/* ══════════ TOOL SHARED CSS — BipolarSite ══════════ */
/* Extracted from duplicated inline styles across 9 tool pages */

/* ── Tool Body Override ── */
body {
  font-family: 'DM Sans', sans-serif;
  color: var(--navy);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  -webkit-font-smoothing: antialiased;
}

/* ── Tool Navigation ── */
.tool-nav {
  width: 100%;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border-warm);
  padding: var(--space-sm) clamp(1rem, 3vw, 1.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: var(--z-tool-nav);
}
.tool-nav-links {
  display: flex; align-items: center; gap: var(--space-base);
}
.tool-back {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px;
  text-decoration: none; color: var(--slate);
  font-size: var(--text-xs); font-weight: 600;
  transition: color 0.2s;
}
.tool-back:hover { color: var(--navy); }
.tool-back--overview { color: var(--text-soft); }
.tool-back--overview:hover { color: var(--teal-cta); }
.tool-back svg { width: 16px; height: 16px; }
@media (max-width: 480px) { .tool-back--overview { display: none; } }
.tool-brand {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-xs); font-weight: 600; color: var(--text-soft);
}

/* ── Tool Glyph Icon ── */
.tool-glyph {
  width: 54px; height: 54px; margin: 0 0 var(--space-base);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-warm);
  background: linear-gradient(180deg, var(--surface-alt), var(--card));
  display: flex; align-items: center; justify-content: center;
}
.tool-glyph svg { width: 30px; height: 30px; }

/* ── Badge (shared across tools) ── */
.badge, .tool-badge {
  display: inline-flex;
  background: var(--success-soft); color: var(--navy);
  padding: 5px 14px; border-radius: var(--radius-round);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: var(--space-base); position: relative; z-index: 1;
}

/* ── Header Section (shared pattern) ── */
.hdr, .tool-header {
  display: grid;
  gap: var(--space-sm);
  text-align: left;
  margin-bottom: var(--space-xl);
  background: linear-gradient(180deg, var(--card), var(--surface-alt));
  border: 1px solid var(--border-warm-md);
  border-radius: var(--card-radius); padding: var(--card-padding);
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.hdr::before, .tool-header::before {
  content: '';
  position: absolute;
  top: -32px;
  right: -18px;
  width: 132px;
  height: 132px;
  border-radius: var(--radius-round);
  background: radial-gradient(circle, var(--teal-light) 0%, transparent 72%);
  opacity: 0.65;
  pointer-events: none;
}
.hdr h1, .tool-header h1 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: var(--text-tool-title); font-weight: 400;
  color: var(--navy); margin: 0; letter-spacing: -0.02em;
  line-height: 1.15;
  max-width: 18ch;
}
.hdr p, .tool-header p {
  font-size: var(--text-base); color: var(--slate);
  line-height: 1.65; max-width: 58ch; margin: 0;
}
.hdr .breadcrumb,
.tool-header .breadcrumb {
  margin-bottom: 0;
}
.hdr .info-box,
.tool-header .info-box {
  margin-top: var(--space-sm);
  max-width: 60ch;
  padding: var(--space-base) var(--space-lg);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--amber);
  background: var(--amber-bg);
}
.hdr .info-box p,
.tool-header .info-box p {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--slate);
}
.hdr .info-box strong,
.tool-header .info-box strong {
  color: var(--amber-dark-text);
}

/* ── Tool Breadcrumb (uses unified .breadcrumb from shared.css) ── */
.tool-hero .breadcrumb {
  justify-content: center;
  margin-bottom: 14px;
  gap: 6px;
}

/* ── Footer Tag ── */
.tf {
  text-align: center; font-size: var(--text-xs); color: var(--sand-ink);
  margin-top: var(--space-lg); line-height: 1.5;
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .tool-nav {
    flex-wrap: wrap;
    padding: var(--space-sm) var(--space-base);
    gap: var(--space-sm);
  }
  .tool-nav-links {
    width: 100%;
    justify-content: space-between;
    gap: var(--space-sm);
  }
  .tool-back {
    min-height: 44px;
    font-size: var(--text-xs);
    padding: 6px 0;
  }
  .tool-brand {
    width: 100%;
    order: 3;
    color: var(--text-soft);
  }
  .tool-actions {
    width: 100%;
    justify-content: stretch;
  }
  .tool-actions button {
    flex: 1;
    min-height: 44px;
    padding: 6px 8px;
    font-size: var(--text-xs);
  }
  .wrap {
    padding: var(--space-lg) var(--space-base);
  }
  .hdr,
  .tool-header {
    gap: var(--space-sm);
    padding: var(--space-lg) var(--space-base);
  }
  .hdr::before,
  .tool-header::before {
    width: 108px;
    height: 108px;
  }
  .hdr h1,
  .tool-header h1,
  .hdr p,
  .tool-header p,
  .hdr .info-box,
  .tool-header .info-box {
    max-width: none;
  }
}

/* Reduced motion handled by shared.css */


/* ══════════════════════════════════════════════════════
   TOOL-SPECIFIC SECTIONS (P2.4 migration)
   ══════════════════════════════════════════════════════ */


/* ── durchatmen ── */
body.dark-tool{color:var(--white-text);background:var(--dark-bg);justify-content:center;padding:var(--space-lg);overflow-x:hidden;overflow-y:auto}
body.dark-tool .tool-nav-main a{color:var(--white-text-secondary)}
body.dark-tool .tool-nav-main a:hover{color:var(--white-text)}
body.dark-tool .tool-nav{background:var(--dark-nav-bg);border-bottom:1px solid var(--dark-border)}
body.dark-tool .tool-back{color:var(--white-text-secondary)}
body.dark-tool .tool-brand{color:var(--white-text-secondary)}
body.dark-tool .breadcrumb a{color:var(--teal-accent-light)}
body.dark-tool .breadcrumb{color:var(--white-text-muted)}
.breathe-wrap{width:100%;max-width:var(--content-width-narrow);text-align:center;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-lg)}
.breathe-intro{width:100%;max-width:var(--content-width-narrow);margin:0 auto var(--space-sm);padding:var(--card-padding);border:1px solid var(--white-text-dim);border-radius:var(--card-radius);background:linear-gradient(180deg,var(--white-overlay-sm),transparent)}
.breathe-intro .breadcrumb{justify-content:center;margin-bottom:var(--space-sm)}
.breathe-title{font-family:'DM Serif Display',Georgia,serif;font-size:var(--text-tool-title);font-weight:400;color:var(--white-text);margin-bottom:var(--space-sm)}
.breathe-sub{font-size:var(--text-base);color:var(--white-text-muted);margin-bottom:0;line-height:1.6;max-width:28ch;margin-left:auto;margin-right:auto}
.breathe-circle{width:160px;height:160px;border-radius:var(--radius-round);border:3px solid var(--teal-accent-30);display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-xl);animation:breathe 14s ease-in-out infinite}
.breathe-label{font-size:var(--text-lg);font-weight:600;color:var(--teal-accent-light)}
@keyframes breathe{0%,100%{transform:scale(1);border-color:var(--teal-accent-30)}28.6%{transform:scale(1.25);border-color:var(--teal-accent-60)}57.1%{transform:scale(1.25);border-color:var(--teal-accent-40)}100%{transform:scale(1);border-color:var(--teal-accent-30)}}
.breathe-steps{display:flex;gap:var(--space-md);justify-content:center;margin-bottom:var(--space-2xl);font-size:var(--text-xs);color:var(--white-text-muted)}
.breathe-step{text-align:center}
.breathe-step span{display:block;font-size:var(--text-lg);font-weight:700;color:var(--white-text-secondary);margin-bottom:2px}
.breathe-transition{margin:0 auto var(--space-lg);text-align:center}
.breathe-transition-text{font-size:var(--text-xs);color:var(--white-text-muted);letter-spacing:0.02em}
.breathe-q{font-family:'DM Serif Display',Georgia,serif;font-size:var(--text-lg);font-weight:400;color:var(--white-text);margin-bottom:var(--space-md)}
.breathe-actions{display:flex;flex-direction:column;gap:var(--space-sm);width:100%;max-width:320px}
.breathe-action{display:block;padding:var(--space-base) var(--space-md);border-radius:var(--radius-md);text-decoration:none;text-align:center;font-size:var(--text-base);font-weight:600;transition:transform 0.15s ease,box-shadow 0.15s ease}
.breathe-action:hover{transform:translateY(-1px)}
.breathe-action:focus-visible{outline:2px solid var(--teal-accent-light);outline-offset:2px}
.breathe-action--emergency{background:var(--emergency-mid);color:var(--white-text)}
.breathe-action--emergency:focus-visible{outline-color:var(--alert-red-coral)}
.breathe-action--krisenplan{background:var(--teal-muted);color:var(--white-text);border:1px solid var(--teal-accent-20)}
.breathe-action--weiter{background:var(--white-overlay-sm);color:var(--white-text-secondary);border:1px solid var(--white-text-dim)}
@media(prefers-reduced-motion:reduce){.breathe-circle{animation:none}}


/* ── ee-kreislauf ── */
body.ee-kreislauf-page .wrap{max-width:var(--content-width-narrow);padding:var(--space-xl) var(--space-lg) var(--section-standard);flex:1}
.svg-wrap{width:100%;max-width:380px;margin:0 auto 24px;position:relative}
.svg-wrap svg{width:100%;height:auto;filter:drop-shadow(0 10px 22px rgba(28,43,58,0.08))}
.svg-wrap circle{cursor:pointer;transition:background-color 0.3s ease,color 0.3s ease,border-color 0.3s ease}
.svg-wrap circle:hover{filter:brightness(0.95)}
.svg-wrap [role="button"]:focus-visible{filter:drop-shadow(0 0 0.35rem rgba(116,138,90,0.45))}
.svg-wrap .arrow{transition:opacity 0.5s}
.interrupted .arrow{opacity:0.2;stroke-dasharray:8 6}
.center-text{font-family:'DM Serif Display',Georgia,serif;transition:fill 0.3s}
.detail{background:var(--card);border-radius:var(--card-radius);border:1px solid var(--border-warm);box-shadow:var(--card-shadow);padding:var(--card-padding);margin-bottom:var(--space-lg);display:none}
.detail.vis{display:block}
.detail-num{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px}
.detail h2{font-size:var(--text-lg);margin:0 0 var(--heading-gap-h3)}
.detail p{font-size:var(--text-base);color:var(--slate);line-height:1.75;margin:0 0 12px}
.detail-exit{background:var(--success-soft);border-radius:var(--radius-md);padding:14px 18px;border-left:3px solid var(--phase-green)}
.detail-exit .exit-lbl{font-size:var(--text-xs);font-weight:700;color:var(--phase-green);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px}
.detail-exit p{font-size:var(--text-base);color:var(--navy);margin:0;line-height:1.5}
.station-picker{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--grid-gap-tight);margin-bottom:var(--space-md)}
.station-btn{padding:12px 14px;border-radius:var(--radius-md);border:1px solid var(--border-warm-md);background:var(--card);color:var(--slate);text-align:left;font-family:'DM Sans',sans-serif;font-size:var(--text-xs);font-weight:600;cursor:pointer;transition:border-color 0.2s ease,background-color 0.2s ease,color 0.2s ease,box-shadow 0.2s ease}
.station-btn strong{display:block;color:var(--navy);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:4px}
.station-btn:hover{border-color:rgba(30,101,109,0.28);box-shadow:var(--shadow-soft)}
.station-btn.is-active{border-color:var(--teal-solid);background:var(--success-soft);color:var(--navy)}
.break-btn{width:100%;padding:14px;border-radius:var(--radius-md);border:2px solid var(--phase-green);background:var(--card);color:var(--phase-green);font-size:var(--text-base);font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background-color 0.3s ease,color 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease;margin-bottom:var(--space-md);box-shadow:var(--shadow-soft)}
.break-btn:hover{background:var(--success-soft)}
.break-btn.active{background:var(--phase-green);color:var(--card)}
@media(max-width:600px){.station-picker{grid-template-columns:1fr}body.ee-kreislauf-page .svg-wrap{display:none}body.ee-kreislauf-page .mobile-chart-note{display:block}}


/* ── eisberg ── */
.tool-wrap{width:100%;max-width:560px;padding:var(--space-xl) var(--space-lg) var(--section-standard);flex:1}
.tool-header h1{font-family:'DM Serif Display',Georgia,serif;font-size:var(--text-tool-title);font-weight:400;color:var(--navy);margin:0 0 8px;letter-spacing:-0.02em}
.tool-header p{font-size:var(--text-base);color:var(--slate);line-height:1.65;max-width:58ch;margin:0}
.iceberg{width:100%;border-radius:var(--card-radius);overflow:hidden;box-shadow:var(--card-shadow);border:1px solid var(--border-warm-md)}
.ice-above{background:var(--bg);padding:var(--space-lg) 20px var(--space-xl)}
.ice-lbl{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.12em;text-align:center;margin-bottom:var(--space-md)}
.ice-lbl-a{color:var(--blue-phase)}.ice-lbl-b{color:var(--white-text-muted)}
.ice-tags{display:flex;flex-wrap:wrap;gap:var(--space-sm);justify-content:center}
.ice-wl{height:4px;background:var(--blue-phase);opacity:0.3;position:relative}
.ice-wl span{position:absolute;left:50%;top:-10px;transform:translateX(-50%);background:var(--blue-phase-light);border:1px solid var(--border);border-radius:var(--radius-round);padding:2px 14px;font-size:var(--text-xs);font-weight:700;color:var(--blue-phase);letter-spacing:0.06em;white-space:nowrap}
.ice-below{background:var(--ice-deep);padding:var(--space-xl) 20px var(--space-lg)}
.tag{padding:8px 16px;border-radius:var(--radius-sm);font-size:var(--text-xs);cursor:pointer;font-family:'DM Sans',sans-serif;transition:background-color 0.25s ease,color 0.25s ease,border-color 0.25s ease;-webkit-appearance:none;line-height:1.3;min-height:44px;display:inline-flex;align-items:center}
.tv{background:var(--card);color:var(--slate);border:1px solid var(--border);font-weight:600}
.tv.on{background:var(--blue-phase);color:var(--card);border:2px solid var(--blue-phase)}
.ti{font-weight:500;background:var(--white-overlay-sm);color:var(--white-text-muted);border:1px solid var(--white-text-dim)}
.ti.rev{background:var(--white-overlay-sm);color:var(--white-text-secondary);border-color:var(--white-text-dim)}
.ti.on{background:var(--teal-muted);color:var(--white-text);border:2px solid var(--white-text-secondary);font-weight:700}
.ctr{text-align:center;margin-top:20px;font-size:var(--text-xs);color:var(--white-text-muted)}
#dp{width:100%;margin-top:16px;transition:background-color 0.3s ease,opacity 0.3s ease,border-color 0.3s ease}
#dp.hide{opacity:0;transform:translateY(8px);pointer-events:none;max-height:0;overflow:hidden;margin:0}
.dc{border-radius:var(--card-radius);padding:24px 28px}
.dcl{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-card)}
.dcd{background:var(--ice-deep);border:1px solid var(--white-overlay-sm);box-shadow:var(--shadow-elevated)}
.dlbl{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--white-text-muted);margin-bottom:10px}
.dc h2{font-size:var(--text-lg);margin:0 0 var(--heading-gap-h3)}
.dc p{font-size:var(--text-base);line-height:1.75;margin:0}
.dcl h2{color:var(--navy)}.dcl p{color:var(--slate)}
.dcd h2{color:var(--white-text)}.dcd p{color:var(--white-text-secondary)}
.refl{width:100%;margin-top:20px;background:var(--bg);border-radius:var(--card-radius);padding:24px 28px;display:none}
.refl.vis{display:block}
.refl-lbl{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--teal-cta);margin-bottom:10px}
.refl h2{font-size:var(--text-base);color:var(--navy-mid);line-height:1.5;margin:0 0 var(--heading-gap-h3)}
.refl p{font-size:var(--text-base);color:var(--slate);line-height:1.75;margin:0}
.tool-wrap .tf{color:var(--teal-light)}
/* Floating tag animation removed (editorial restraint) */
@media(prefers-reduced-motion:reduce){*{transition-duration:0.01ms!important}}
@media(max-width:480px){
  .tool-wrap{padding:20px 14px 36px}
  .ice-above{padding:16px 14px 24px}
  .ice-below{padding:24px 14px 20px}
  .dc{padding:16px}
  .refl{padding:16px}
  .tag{padding:6px 12px;font-size:var(--text-xs)}
}


/* ── komm-trainer ── */
body.komm-trainer-page .wrap{width:100%;max-width:600px;padding:var(--space-xl) var(--space-lg) var(--section-standard);flex:1}
body.komm-trainer-page .hdr{margin-bottom:var(--space-lg)}
body.komm-trainer-page .hdr h1{color:var(--navy)}
body.komm-trainer-page .prog{display:flex;gap:6px;margin-bottom:var(--space-lg)}body.komm-trainer-page .prog div{flex:1;height:4px;border-radius:var(--radius-sm);background:var(--success-soft);transition:background 0.4s}body.komm-trainer-page .prog .done{background:var(--teal)}body.komm-trainer-page .prog .cur{background:var(--teal-light)}
body.komm-trainer-page .card{background:var(--card);border-radius:var(--card-radius);border:1px solid var(--border-warm);box-shadow:var(--card-shadow);overflow:hidden;transition:opacity 0.3s}
body.komm-trainer-page .card.fade{opacity:0}
.card-body{padding:24px 28px}
.phase-row{display:flex;align-items:center;gap:10px;margin-bottom:var(--space-md)}
.phase-badge{padding:4px 12px;border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.06em}
.phase-m{background:var(--amber-bg);color:var(--amber-dark)}.phase-d{background:var(--blue-phase-light);color:var(--old-blue-accent)}.phase-f{background:var(--success-soft);color:var(--teal-cta)}.phase-n{background:var(--surface-alt);color:var(--navy)}
.phase-count{font-size:var(--text-xs);color:var(--slate)}
.sit{font-family:'DM Sans',sans-serif;font-size:var(--text-base);font-weight:700;color:var(--navy);line-height:1.5;margin-bottom:20px}
.olbl{font-size:var(--text-xs);font-weight:700;color:var(--slate);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:var(--space-base)}
.opt-btn{width:100%;padding:14px 18px;border-radius:var(--radius-md);border:1px solid var(--border-warm-md);background:var(--card);color:var(--slate);font-size:var(--text-base);text-align:left;cursor:pointer;font-family:'DM Sans',sans-serif;line-height:1.5;transition:background-color 0.25s ease,color 0.25s ease,border-color 0.25s ease;margin-bottom:10px;-webkit-appearance:none}
.opt-btn:disabled{cursor:default}
.opt-btn.correct{border:2px solid var(--phase-green);background:var(--success-soft);color:var(--navy);font-weight:600}
.opt-btn.wrong{border:2px solid var(--alert);background:var(--alert-soft);color:var(--alert)}
.opt-btn.dimmed{border-color:var(--border-warm);color:var(--teal-light)}
.fb{padding:12px 16px;margin-top:-4px;margin-bottom:10px;border-radius:var(--radius-sm);font-size:var(--text-xs);line-height:1.5}
.fb-ok{background:var(--bg);border-left:3px solid var(--phase-green);color:var(--navy)}
.fb-no{background:var(--alert-soft);border-left:3px solid var(--alert);color:var(--alert)}
.mark{font-size:var(--text-base);font-weight:800;margin-right:6px}
body.komm-trainer-page .btn-next{width:100%;font-size:var(--text-base);font-weight:700;margin-top:8px}
.res{padding:var(--space-xl);text-align:center}
.res-circle{width:80px;height:80px;border-radius:var(--radius-lg);margin:0 auto 20px;display:flex;align-items:center;justify-content:center;border:3px solid}
.res-circle span{font-family:'DM Serif Display',Georgia,serif;font-size:var(--text-xl);font-weight:400}
.res h2{font-size:var(--text-lg);margin:0 0 var(--heading-gap-h3)}
.res p{font-size:var(--text-base);color:var(--slate);line-height:1.75;margin:0 0 24px}
.rules{background:var(--bg);border-radius:var(--radius-md);padding:16px 20px;text-align:left;margin-bottom:20px}
.rules-title{font-size:var(--text-xs);font-weight:700;color:var(--teal-cta);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:10px}
.rules p{font-size:var(--text-base);color:var(--navy);line-height:1.5;margin:0 0 8px}.rules p:last-child{margin:0}
body.komm-trainer-page .btns{display:flex;gap:10px}
body.komm-trainer-page .btns button{flex:1;padding:12px;border-radius:var(--radius-md);font-family:'DM Sans',sans-serif;font-size:var(--text-xs);font-weight:600;cursor:pointer}
/* .btn-r and .btn-c base styles now in shared.css BUTTON SYSTEM */
@media(max-width:480px){
  body.komm-trainer-page .wrap{padding:20px 14px 36px}
  .card-body{padding:16px}
  .opt-btn{padding:12px 14px}
}


/* ── krisenplan ── */
body.krisenplan-page{display:block}
body.krisenplan-page .wrap{max-width:var(--content-width);margin:0 auto;padding:var(--space-xl) var(--space-lg) var(--section-standard)}
/* .btn-save, .btn-print, .btn-reset base now in shared.css BUTTON SYSTEM */
.btn-save:hover{background:var(--slate)}
.tool-actions button:disabled,
.local-storage-choice .btn-reset:disabled{opacity:0.55;cursor:not-allowed;box-shadow:none}
.prog-wrap{margin-bottom:var(--space-lg)}.prog-bar{height:6px;border-radius:var(--radius-sm);background:var(--success-soft);overflow:hidden}.prog-fill{height:100%;background:var(--teal);transition:width 0.4s;border-radius:var(--radius-sm)}
.prog-label{font-size:var(--text-xs);color:var(--slate);margin-top:6px;text-align:right}
.section{border-radius:var(--card-radius);padding:var(--card-padding);margin-bottom:var(--space-lg);border-left:5px solid}
.section h2{font-size:var(--text-lg);margin:0 0 var(--heading-gap-h4);display:flex;align-items:center;gap:10px}
.section-step{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-round);border:1px solid currentColor;background:var(--white-text-muted);font-family:'DM Sans',sans-serif;font-size:var(--text-xs);font-weight:700;line-height:1;flex-shrink:0}
.section .sdesc{font-size:var(--text-xs);color:var(--slate);margin-bottom:var(--space-md);line-height:1.5}
.field{margin-bottom:var(--space-base)}
.field label{display:block;font-size:var(--text-xs);font-weight:600;color:var(--slate);margin-bottom:6px}
/* field input/textarea/focus base now in shared.css FORM FIELDS */
.s1{background:var(--amber-bg);border-color:var(--amber)}.s1 h2{color:var(--amber)}
.s2{background:var(--success-soft);border-color:var(--phase-green)}.s2 h2{color:var(--phase-green)}
.s3{background:var(--alert-soft);border-color:var(--alert)}.s3 h2{color:var(--alert)}
.s4{background:var(--blue-phase-light);border-color:var(--blue-phase)}.s4 h2{color:var(--blue-phase)}
.s5{background:var(--surface-alt);border-color:var(--slate)}.s5 h2{color:var(--slate)}
.s6{background:var(--bg);border-color:var(--slate)}.s6 h2{color:var(--slate)}
.saved-msg{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--teal-cta);color:var(--card);padding:10px var(--space-lg);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:600;box-shadow:var(--shadow-elevated);opacity:0;transition:opacity 0.3s;pointer-events:none;z-index:100}
.saved-msg.is-warning{background:var(--alert)}
.saved-msg.vis{opacity:1}
.confirm{border:none;padding:0;background:transparent;max-width:100vw;max-height:100vh}
.confirm::backdrop{background:var(--overlay-dark)}
.confirm-box{background:var(--card);border-radius:var(--card-radius);padding:32px;max-width:360px;text-align:center;box-shadow:var(--shadow-elevated)}
.confirm-box h2{font-size:var(--text-lg);margin:0 0 var(--heading-gap-h3)}
.confirm-box p{font-size:var(--text-base);color:var(--slate);line-height:1.5;margin:0 0 20px}
.confirm-btns{display:flex;gap:10px}.confirm-btns button{flex:1;padding:12px;border-radius:var(--radius-md);font-family:'DM Sans',sans-serif;font-size:var(--text-xs);font-weight:600;cursor:pointer}
.confirm-cancel{border:1px solid var(--border-warm-md);background:var(--card);color:var(--slate)}
.confirm-delete{border:none;background:var(--alert);color:var(--card)}
.print-hdr{display:none}
@media print{
  .tool-nav,.prog-wrap,.btn-save,.btn-print,.btn-reset,.tf,.confirm,.local-storage-choice{display:none!important}
  .print-hdr{display:block;text-align:center;margin-bottom:var(--space-lg);padding-bottom:16px;border-bottom:2px solid var(--navy)}
  .print-hdr .print-title{font-family:'DM Serif Display',Georgia,serif;font-size:var(--text-xl);font-weight:400;margin:0 0 4px}
  .print-hdr p{font-size:var(--text-xs);color:var(--slate)}
  .section{break-inside:avoid;border-radius:0;box-shadow:none}
  body{background:var(--card)}
}
@media(max-width:600px){.section{padding:18px 16px}.tool-nav{flex-wrap:wrap;padding:10px 14px;gap:10px}.tool-nav-links{width:100%;justify-content:space-between;gap:10px}.tool-back{min-height:44px;font-size:var(--text-xs);padding:6px 0}.tool-brand{width:100%;order:3;color:var(--text-soft)}.tool-actions{width:100%;justify-content:stretch}.tool-actions button{flex:1;padding:6px 8px;font-size:var(--text-xs);min-height:44px}.field textarea{min-height:60px}}


/* ── phasenverlauf ── */
:root{--hypo-phase:var(--amber-light)}
body.phasenverlauf-page .wrap{width:100%;max-width:680px;padding:var(--space-xl) var(--space-lg) var(--section-standard);flex:1}
body.phasenverlauf-page .hdr h1{font-family:'DM Serif Display',serif;font-size:var(--text-tool-title);font-weight:400;color:var(--navy);margin:0 0 8px;letter-spacing:-0.02em;line-height:1.15}
body.phasenverlauf-page .chart-wrap{width:100%;border-radius:var(--card-radius);overflow:hidden;background:var(--card);border:1px solid var(--border-warm-md);box-shadow:var(--card-shadow);margin-bottom:18px}
.chart-top{padding:16px 18px 10px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);flex-wrap:wrap}
.chart-heading{font-size:var(--text-xs);font-weight:700;color:var(--slate);text-transform:uppercase;letter-spacing:0.08em}
.chart-legend{display:flex;gap:var(--space-base);flex-wrap:wrap}
.leg{display:flex;align-items:center;gap:5px;font-size:var(--text-xs);color:var(--slate);font-weight:500}
.leg-dot{width:9px;height:9px;border-radius:var(--radius-round);flex-shrink:0}
.chart-svg-wrap{padding:4px 18px 0}
.chart-svg{width:100%;height:auto;display:block;overflow:visible}
.zone-hit{cursor:pointer;fill:transparent}
.zone-hit:hover{fill:var(--white-overlay-md)}
#wavePath{stroke:var(--teal);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.wpt{cursor:pointer;transition:r 0.2s,filter 0.2s}
.wpt:focus:not(:focus-visible){outline:none}
.wpt:focus-visible{filter:drop-shadow(0 0 4px var(--teal-solid)) drop-shadow(0 0 8px var(--teal-solid))}
.chart-xlab{text-align:center;font-size:var(--text-xs);color:var(--text-soft);padding:10px 18px 16px;font-style:italic}
.phase-btns{display:grid;grid-template-columns:repeat(5, 1fr);gap:6px;margin-bottom:18px}
.pbtn{padding:10px 4px;border-radius:var(--radius-md);border:2px solid transparent;background:var(--bg);color:var(--slate);font-size:var(--text-xs);font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background-color 0.2s ease,color 0.2s ease,border-color 0.2s ease;display:flex;flex-direction:column;align-items:center;gap:3px;-webkit-appearance:none;line-height:1.2;text-align:center}
.pbtn .ico{font-size:var(--text-lg);display:block}
.pbtn:focus-visible{outline:2px solid var(--teal-solid);outline-offset:2px}
.pbtn:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.pbtn.active{color:var(--card);transform:translateY(-2px);box-shadow:var(--shadow-elevated)}
.detail-card{background:var(--card);border-radius:var(--card-radius);border:1px solid var(--border-warm-md);box-shadow:var(--card-shadow);padding:24px 24px 20px;border-left:4px solid var(--border);transition:border-color 0.3s,opacity 0.3s,transform 0.3s;opacity:0;transform:translateY(8px);pointer-events:none}
.detail-card.vis{opacity:1;transform:translateY(0);pointer-events:auto}
.det-top{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px}
.det-icon{width:48px;height:48px;min-width:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:var(--text-lg)}
.det-phase-name{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:4px}
.det-title{font-family:'DM Sans',sans-serif;font-size:var(--text-base);font-weight:700;color:var(--navy);line-height:1.5}
.det-dur{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);color:var(--slate);background:var(--bg);padding:4px 12px;border-radius:var(--radius-round);margin-bottom:var(--space-md)}
.det-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap-tight);margin-bottom:14px}
.det-col{border-radius:var(--radius-md);padding:14px 15px;border-left:3px solid}
.det-col-lbl{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.07em;margin-bottom:8px}
.det-col ul{list-style:none;display:flex;flex-direction:column;gap:5px}
.det-col li{font-size:var(--text-xs);line-height:1.5;padding-left:14px;position:relative;color:var(--slate)}
.det-col li::before{content:'–';position:absolute;left:0;color:var(--slate-warm)}
.det-note{border-radius:var(--radius-md);padding:12px 15px;font-size:var(--text-xs);line-height:1.5;color:var(--slate)}
.det-note strong{color:var(--navy)}
.hint{text-align:center;font-size:var(--text-xs);color:var(--text-soft);margin:0 0 18px;line-height:1.5}
.mobile-chart-note{display:none;background:var(--bg);border:1px solid var(--border-warm-md);border-radius:var(--radius-md);padding:12px 14px;margin-bottom:14px;font-size:var(--text-xs);line-height:1.5;color:var(--slate);text-align:center}
body.phasenverlauf-page .tf{color:var(--teal-light)}
@media(max-width:600px){
  .phase-btns{grid-template-columns:repeat(3, 1fr)}
  .det-cols{grid-template-columns:1fr}
  .chart-legend{display:none}
  body.phasenverlauf-page .chart-wrap{display:none}
  .mobile-chart-note{display:block}
  body.phasenverlauf-page .wrap{padding:24px 14px 40px}
}


/* ── saeulen-check ── */
body.saeulen-check-page .wrap{width:100%;max-width:600px;padding:var(--space-xl) var(--space-lg) var(--section-standard);flex:1}
.pc{background:var(--card);border-radius:var(--card-radius);border:1px solid var(--border-warm);box-shadow:var(--card-shadow);padding:22px 24px;margin-bottom:14px;border-left:4px solid}
.pc-hdr{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pc-num{width:28px;height:28px;border-radius:var(--radius-sm);color:var(--card);display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:800;flex-shrink:0}
.pc h2{font-size:var(--text-base);margin:0}
.pc p{font-size:var(--text-base);color:var(--slate);margin:0 0 14px;line-height:1.5}
.sc{display:flex;gap:6px}
.sc button{flex:1;padding:10px 4px;border-radius:var(--radius-sm);border:1px solid var(--border-warm-md);background:var(--card);color:var(--slate);font-size:var(--text-xs);font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background-color 0.2s ease,color 0.2s ease,border-color 0.2s ease;display:flex;flex-direction:column;align-items:center;gap:2px;-webkit-appearance:none}
.sc button:focus-visible{outline:2px solid var(--teal-solid);outline-offset:2px}
.sc button.sel{font-weight:700;color:var(--card)}
.sc .sv{font-size:var(--text-base)}
.sc .sl{font-size:var(--text-xs);opacity:0.8}
.submit{width:100%;padding:14px;border-radius:var(--radius-md);border:none;background:var(--teal-subtle);color:var(--text-soft);font-size:var(--text-base);font-weight:700;cursor:default;font-family:'DM Sans',sans-serif;margin-top:8px;transition:background 0.3s}
.submit.ready{background:var(--cta-primary-bg);cursor:pointer}
.res-card{background:var(--card);border-radius:var(--card-radius);border:1px solid var(--border-warm);box-shadow:var(--card-shadow);padding:32px 28px}
.res-card h2{font-size:var(--text-lg);margin:0 0 var(--heading-gap-h2);text-align:center}
.pillars{display:flex;align-items:flex-end;justify-content:center;gap:var(--space-base);height:200px;margin-bottom:var(--space-lg);padding:0 8px}
.pillar{display:flex;flex-direction:column;align-items:center;flex:1}
.pillar .pv{font-size:var(--text-base);font-weight:700;margin-bottom:6px}
.pillar .pb{width:100%;max-width:56px;border-radius:var(--radius-sm) var(--radius-sm) var(--radius-sm) var(--radius-sm);transition:height 0.8s cubic-bezier(0.34,1.56,0.64,1)}
.pillar .pl{font-size:var(--text-xs);font-weight:600;margin-top:8px;text-align:center;line-height:1.15}
.res-score{text-align:center;margin-bottom:var(--space-lg);padding:12px 0;border-top:1px solid var(--border-warm);border-bottom:1px solid var(--border-warm)}
.res-score span{font-size:var(--text-xs);color:var(--slate)}
.res-score strong{color:var(--navy);font-size:var(--text-base)}
.rbox{border-radius:var(--radius-md);padding:18px 20px;margin-bottom:14px;border-left:4px solid}
.rbox-title{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px}
.rbox p{font-size:var(--text-base);line-height:1.5;margin:0}
.rbox-weak{background:var(--alert-soft)}.rbox-strong{background:var(--success-soft)}
.all-detail{margin-top:20px}
.all-title{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--slate);margin-bottom:var(--space-base)}
.ad-row{display:flex;align-items:flex-start;gap:var(--space-base);padding:10px 0;border-bottom:1px solid var(--border-warm)}
.ad-num{width:24px;height:24px;border-radius:var(--radius-sm);color:var(--card);display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:800;flex-shrink:0;margin-top:2px}
.ad-name{font-size:var(--text-xs);font-weight:600;color:var(--navy);margin-bottom:2px}
.ad-text{font-size:var(--text-xs);color:var(--slate);line-height:1.5}
body.saeulen-check-page .btns{display:flex;gap:10px;margin-top:24px}
body.saeulen-check-page .btns button{flex:1;padding:12px;border-radius:var(--radius-md);font-family:'DM Sans',sans-serif;font-size:var(--text-xs);font-weight:600;cursor:pointer}
/* saeulen-check .btn-r and .btn-c base now in shared.css BUTTON SYSTEM */
body.saeulen-check-page .disc{font-size:var(--text-xs);color:var(--slate);margin-top:16px;line-height:1.5;text-align:center}
@media(max-width:480px){.sc{flex-wrap:wrap}.sc button{flex:1 1 calc(33% - 4px);min-height:44px}.pc{padding:18px 16px}.res-card{padding:24px 16px}.pillars{gap:6px;padding:0}}


/* ── selbsttest ── */
body.selbsttest-page{justify-content:center;padding:var(--space-lg)}
body.selbsttest-page .tool-nav{background:var(--bg);border-bottom:1px solid var(--border-warm)}
body.selbsttest-page .wrap{width:100%;max-width:600px}
body.selbsttest-page .hdr{margin-bottom:var(--space-xl)}
body.selbsttest-page .hdr h1{font-size:var(--text-tool-title)}
body.selbsttest-page .hdr p{max-width:40ch}
body.selbsttest-page .prog{display:flex;gap:6px;margin-bottom:28px}body.selbsttest-page .prog div{flex:1;height:4px;border-radius:var(--radius-sm);background:var(--success-soft);transition:background 0.4s}body.selbsttest-page .prog .done{background:var(--teal)}body.selbsttest-page .prog .cur{background:var(--teal-light)}
body.selbsttest-page .card{background:var(--card);border-radius:var(--card-radius);border:1px solid var(--border-warm);box-shadow:var(--card-shadow);padding:var(--card-padding);min-height:340px;display:flex;flex-direction:column;transition:opacity 0.3s,transform 0.3s}
body.selbsttest-page .card.fade{opacity:0;transform:translateY(12px)}
.qhdr{display:flex;align-items:center;gap:var(--space-base);margin-bottom:var(--space-lg)}
.qnum{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--success-soft);color:var(--slate);display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:800;flex-shrink:0}
.qtxt{font-family:'DM Sans',sans-serif;font-size:var(--text-lg);font-weight:700;color:var(--navy);line-height:1.5}
.opts{display:flex;flex-direction:column;gap:var(--space-sm);flex:1}
.opt{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:var(--radius-md);border:1px solid var(--border-warm-md);background:var(--card);cursor:pointer;font-family:'DM Sans',sans-serif;font-size:var(--text-base);color:var(--slate);text-align:left;transition:background-color 0.2s ease,color 0.2s ease,border-color 0.2s ease;-webkit-appearance:none}
.opt.sel{border:2px solid var(--teal);background:var(--success-soft);color:var(--navy);font-weight:600}
.opt .em{font-size:var(--text-lg);color:var(--teal-light);width:22px;text-align:center;line-height:1}.opt.sel .em{color:var(--teal-cta)}
.nav{display:flex;justify-content:space-between;align-items:center;margin-top:24px;padding-top:16px;border-top:1px solid var(--border-warm)}
/* .btn base, .btn-back, .btn-next base now in shared.css BUTTON SYSTEM */
.btn-back{background:var(--success-soft);color:var(--slate)}.btn-back:disabled{visibility:hidden;cursor:default}
body.selbsttest-page .btn-next:disabled{background:var(--teal-subtle);color:var(--text-soft);cursor:default}
.navlbl{font-size:var(--text-xs);color:var(--slate)}
.res-top{display:flex;align-items:center;gap:18px;margin-bottom:var(--space-lg)}
body.selbsttest-page .res-score{width:64px;height:64px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;flex-shrink:0}
body.selbsttest-page .res-score span{font-family:'DM Serif Display',Georgia,serif;font-size:var(--text-xl);font-weight:400}
.res-level{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:4px}
.res-title{font-family:'DM Serif Display',Georgia,serif;font-size:var(--text-lg);font-weight:400;color:var(--navy);line-height:1.15}
.bar-wrap{margin-bottom:var(--space-lg)}.bar-labels{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--slate);margin-bottom:6px}
.bar{height:8px;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--phase-green) 0%,var(--amber) 50%,var(--alert) 100%);position:relative}
.bar-dot{position:absolute;top:-4px;width:16px;height:16px;border-radius:var(--radius-round);background:var(--card);transform:translateX(-50%);box-shadow:var(--shadow-soft);transition:left 0.6s;border:3px solid transparent}
.res-txt{font-size:var(--text-base);color:var(--slate);line-height:1.75;margin-bottom:20px}
.rec{border-radius:var(--radius-md);padding:18px 20px;margin-bottom:var(--space-lg);border-left:4px solid}
.rec-title{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:10px}
.rec-item{font-size:var(--text-base);color:var(--slate);line-height:1.5;padding:4px 0 4px 18px;position:relative}
.rec-item::before{content:'→';position:absolute;left:0;font-weight:700}
body.selbsttest-page .disc{font-size:var(--text-xs);color:var(--slate);line-height:1.5;padding:12px 16px;background:var(--bg);border-radius:var(--radius-sm);margin-bottom:20px}
body.selbsttest-page .disc strong{color:var(--navy)}
body.selbsttest-page .btns{display:flex;gap:10px;padding-top:12px;border-top:1px solid var(--border-warm)}
body.selbsttest-page .btns button{flex:1;padding:12px;border-radius:var(--radius-md);font-family:'DM Sans',sans-serif;font-size:var(--text-xs);font-weight:600;cursor:pointer}
/* .btn-reset and .btn-cont base now in shared.css BUTTON SYSTEM */
body.selbsttest-page .tf{color:var(--teal-light);margin-top:20px}

/* ── [from overrides.css] TOOL FOOTER CONTRAST FIX ── */
/* --alert (#B91C1C) on navy (#1C2B3A) = ~1.65:1 — WCAG fail.
   Light red (#fca5a5) on navy = ~5.8:1 — passes AA. */
footer.tf a[href="/notfall/"] {
  color: var(--alert-red-border);
  font-weight: 600;
}

/* ── [from overrides.css] TOOL-BACK/TOOL-BRAND RULES ── */
body:not(.dark-tool) .tool-back {
  color: var(--navy);
}

body:not(.dark-tool) .tool-brand {
  color: var(--text);
}
@media(max-width:600px){body.selbsttest-page .card{padding:24px 20px;min-height:auto}.bar-labels{font-size:var(--text-xs)}.bar-labels span:nth-child(2),.bar-labels span:nth-child(4){display:none}}
/* Result state colours */
body.selbsttest-page .card.result--green .res-score{background:var(--success-soft);border:2px solid var(--teal-light)}
body.selbsttest-page .card.result--green .res-score span,body.selbsttest-page .card.result--green .res-level{color:var(--phase-green)}
body.selbsttest-page .card.result--green .bar-dot{border-color:var(--phase-green)}
body.selbsttest-page .card.result--green .rec{background:var(--success-soft);border-color:var(--phase-green)}
body.selbsttest-page .card.result--green .rec-title,body.selbsttest-page .card.result--green .rec-item::before{color:var(--phase-green)}
body.selbsttest-page .card.result--amber .res-score{background:var(--amber-bg);border:2px solid var(--amber-border)}
body.selbsttest-page .card.result--amber .res-score span,body.selbsttest-page .card.result--amber .res-level{color:var(--amber)}
body.selbsttest-page .card.result--amber .bar-dot{border-color:var(--amber)}
body.selbsttest-page .card.result--amber .rec{background:var(--amber-bg);border-color:var(--amber)}
body.selbsttest-page .card.result--amber .rec-title,body.selbsttest-page .card.result--amber .rec-item::before{color:var(--amber)}
body.selbsttest-page .card.result--red .res-score{background:var(--alert-soft);border:2px solid var(--alert-red-border)}
body.selbsttest-page .card.result--red .res-score span,body.selbsttest-page .card.result--red .res-level{color:var(--alert)}
body.selbsttest-page .card.result--red .bar-dot{border-color:var(--alert)}
body.selbsttest-page .card.result--red .rec{background:var(--alert-soft);border-color:var(--alert)}
body.selbsttest-page .card.result--red .rec-title,body.selbsttest-page .card.result--red .rec-item::before{color:var(--alert)}
.rec-cta{display:block;background:var(--teal-cta);color:var(--white-text);text-align:center;padding:14px 20px;border-radius:var(--radius-md);text-decoration:none;font-weight:700;font-size:var(--text-base);line-height:1.4;transition:background 0.2s}
.rec-cta:hover{background:var(--teal-cta-dark)}
.rec-cta span{display:block;font-weight:400;font-size:var(--text-sm);opacity:0.85;margin-top:2px}


/* ── solidaritaets-chart ── */
body.solidaritaets-chart-page .wrap{width:100%;max-width:680px;padding:var(--space-xl) var(--space-lg) var(--section-standard);flex:1}
.legend{display:flex;gap:var(--grid-gap-tight);justify-content:center;margin-bottom:var(--space-md);flex-wrap:wrap}
.legend-item{display:flex;align-items:center;gap:6px;font-size:var(--text-xs);color:var(--slate);cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);transition:background 0.2s}
.legend-item:hover{background:var(--border-warm)}
.legend-line{width:20px;height:3px;border-radius:var(--radius-sm)}
body.solidaritaets-chart-page .chart-wrap{width:100%;background:var(--card);border-radius:var(--card-radius);border:1px solid var(--border-warm);box-shadow:var(--card-shadow);padding:20px;margin-bottom:var(--space-md);overflow-x:auto}
body.solidaritaets-chart-page .chart-wrap svg{width:100%;height:auto;display:block}
body.solidaritaets-chart-page .chart-wrap [role="button"]:focus-visible{filter:drop-shadow(0 0 0.35rem rgba(116,138,90,0.45))}
.episodes{display:flex;gap:var(--space-sm);margin-bottom:var(--space-md);flex-wrap:wrap;justify-content:center}
.ep-btn{padding:8px 16px;border-radius:var(--radius-sm);border:1px solid var(--border-warm-md);background:var(--card);font-size:var(--text-xs);font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background-color 0.2s ease,color 0.2s ease,border-color 0.2s ease;-webkit-appearance:none}
.ep-btn.active{color:var(--card)}
body.solidaritaets-chart-page .detail{background:var(--card);border-radius:var(--card-radius);border:1px solid var(--border-warm);box-shadow:var(--card-shadow);padding:24px;margin-bottom:var(--space-md);display:none}
body.solidaritaets-chart-page .detail.vis{display:block}
body.solidaritaets-chart-page .detail h2{font-size:var(--text-base);margin:0 0 var(--heading-gap-h3)}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap-tight)}
.detail-col{padding:12px;border-radius:var(--radius-sm);font-size:var(--text-xs);line-height:1.5}
.detail-col h4{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:var(--heading-gap-h4)}
.toggle-wrap{text-align:center;margin-bottom:var(--space-md)}
.toggle-btn{padding:10px 20px;border-radius:var(--radius-sm);border:2px solid var(--phase-green);background:var(--card);color:var(--phase-green);font-size:var(--text-xs);font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background-color 0.2s ease,color 0.2s ease,border-color 0.2s ease}
.toggle-btn.on{background:var(--phase-green);color:var(--card)}
body.solidaritaets-chart-page .disc{text-align:center;font-size:var(--text-xs);color:var(--slate);background:var(--bg);border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:var(--space-md);line-height:1.5}
body.solidaritaets-chart-page .mobile-chart-note{display:none;background:var(--bg);border:1px solid var(--border-warm-md);border-radius:var(--radius-md);padding:12px 14px;margin-bottom:14px;font-size:var(--text-xs);line-height:1.5;color:var(--slate);text-align:center}
body.solidaritaets-chart-page .tf{color:var(--teal-light);margin-top:20px}
@media(max-width:600px){
  body.solidaritaets-chart-page .chart-wrap{display:none}
  body.solidaritaets-chart-page .mobile-chart-note{display:block}
  .detail-grid{grid-template-columns:1fr}
}
/* ── Noscript Fallback ── */
.noscript-box{padding:20px 24px;background:var(--surface-alt);border-radius:var(--radius-md);margin:20px 0;font-family:'DM Sans',sans-serif}
.noscript-box p:first-child{font-weight:600;margin:0 0 8px}
.noscript-box p:last-child{margin:0}
.noscript-box a{color:var(--teal-cta);font-weight:600}
/* ── Phase Legend Dots ── */
.leg-dot--mania{background:var(--amber)}
.leg-dot--hypo{background:var(--hypo-phase)}
.leg-dot--stable{background:var(--phase-green)}
.leg-dot--dep-mild{background:var(--blue-phase)}
.leg-dot--dep-severe{background:var(--slate)}
/* ── Chart Legend Lines ── */
.legend-line--amber{background:var(--amber)}
.legend-line--blue{background:var(--blue-phase)}
.legend-line--green{background:var(--phase-green);border-style:dashed}
/* ── SVG Cursor Pointer ── */
body.solidaritaets-chart-page .chart-wrap rect[id^="ep"]{cursor:pointer}
/* ── SVG Fill ── */
#zone-severe{fill:var(--severe-dep-phase-bg)}