/* ============================================================
   HelpMate Design System 2026 ("nw")
   Wird NACH style.css geladen und rethemt die gesamte Seite.
   Farben stammen aus dem Logo (#5eaaa8-Familie). Light-only.
   Formsystem: Interaktives = Pille, Flächen = 24px, Chat = 18px.
   ============================================================ */
:root{
  color-scheme: light;
  --bg:          #fafcfc;
  --tint:        #eef4f3;
  --tint-deep:   #dcebe9;
  --ink:         #0e2222;
  --ink-soft:    #526b68;
  --line:        #dbe7e5;
  --brand:       #5eaaa8;
  --accent:      #2e7472;
  --accent-deep: #1d4a49;
  --deep:        #0f2f2e;
  --err:         #b3403a;
  --err-bg:      #fbeeed;
  --ok:          #2e7452;
  --ok-bg:       #edf6f1;
  --r-panel:     24px;
  --r-chat:      18px;
  --font-d:      "Sora", system-ui, sans-serif;
  --font-b:      "Figtree", system-ui, sans-serif;
  --ease:        cubic-bezier(.16,1,.3,1);
}

/* ---------- Basis-Retheming (überschreibt style.css) ---------- */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--font-b) !important;
  background:var(--bg);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{ font-family:var(--font-d); font-weight:700; line-height:1.12; letter-spacing:-0.02em; color:var(--ink); }
a{ color:var(--accent); }
.wrap{ max-width:1180px; margin-inline:auto; padding-inline:clamp(1.2rem, 4vw, 2.5rem); }
.skip{ position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:.6rem 1rem; z-index:1200; border-radius:0 0 12px 0; }
.skip:focus{ left:0; }
:where(a,button,summary):focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:8px; }

/* ---------- Buttons (neu + Legacy-Mapping) ---------- */
.btn, button.btn, a.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--font-d); font-weight:600; font-size:1rem;
  padding:.9rem 1.8rem; border-radius:999px; text-decoration:none; border:none; cursor:pointer;
  transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
  white-space:nowrap; line-height:1.2;
}
.btn:active{ transform:translateY(1px) scale(.985); }
.btn i{ font-size:.85em; }
.btn-solid, .btn-primary{ background:var(--accent) !important; color:#fff !important; }
.btn-solid:hover, .btn-primary:hover{ background:var(--accent-deep) !important; transform:translateY(-1px); }
.btn-line, .btn-secondary{ border:1.5px solid var(--line) !important; color:var(--ink) !important; background:transparent !important; }
.btn-line:hover, .btn-secondary:hover{ border-color:var(--brand) !important; }
.btn-white{ background:#fff !important; color:var(--accent-deep) !important; }
.btn-white:hover{ background:var(--tint) !important; }
.btn-danger{ background:var(--err) !important; color:#fff !important; }
.btn-block{ width:100%; }

/* ---------- Legacy-Formulare & Alerts rethemen ---------- */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=time], input[type=url], input[type=search], textarea, select{
  font-family:var(--font-b);
  border-radius:14px;
  border:1.5px solid var(--line);
  background:#fff;
  color:var(--ink);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input:focus, textarea:focus, select:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(46,116,114,.15);
}
.alert{ border-radius:16px; font-size:.96rem; }
.alert-error, .alert-danger{ background:var(--err-bg); color:var(--err); border:1px solid #eed3d1; }
.alert-success{ background:var(--ok-bg); color:var(--ok); border:1px solid #cfe6da; }

/* ============================================================
   Globale Navigation (.nwn)
   ============================================================ */
.nwn{
  position:sticky; top:0; z-index:1000;
  background:rgba(250,252,252,.88);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.nwn-in{ max-width:1280px; margin-inline:auto; padding-inline:clamp(1rem, 3vw, 2rem);
  display:flex; align-items:center; gap:1.4rem; height:76px; }
.nwn-brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--ink);
  font-family:var(--font-d); font-weight:700; font-size:1.3rem; letter-spacing:-0.02em; flex-shrink:0; }
.nwn-brand img{ width:46px; height:46px; display:block; }
.nwn-menu{ display:flex; align-items:center; gap:.2rem; margin-left:auto; list-style:none; margin-block:0; padding:0; }
.nwn-menu > li{ position:relative; }
.nwn-menu > li > a{
  display:flex; align-items:center; gap:.45rem;
  color:var(--ink-soft); text-decoration:none; font-weight:500; font-size:.95rem;
  padding:.55rem .8rem; border-radius:999px; transition:color .15s, background .15s;
}
.nwn-menu > li > a:hover, .nwn-menu > li > a[aria-current]{ color:var(--ink); background:var(--tint); }
.nwn-menu > li > a > i.fa-chevron-down{ font-size:.6rem; opacity:.7; }
.nwn-cta{ margin-left:.4rem; }
.nwn-cta .btn{ padding:.6rem 1.35rem; font-size:.93rem; }

/* Dropdowns */
.nwn-drop-menu{
  display:none; position:absolute; top:calc(100% + 6px); left:0; min-width:240px;
  background:#fff; border:1px solid var(--line); border-radius:18px;
  box-shadow:0 20px 50px -20px rgba(15,47,46,.3); padding:.5rem; z-index:1100; list-style:none;
}
.nwn-drop-menu a{
  display:flex; align-items:center; gap:.7rem; padding:.65rem .85rem; border-radius:12px;
  color:var(--ink); text-decoration:none; font-size:.93rem; font-weight:500;
}
.nwn-drop-menu a:hover{ background:var(--tint); color:var(--accent-deep); }
.nwn-drop-menu a i{ color:var(--accent); width:18px; text-align:center; }
@media (min-width: 901px){
  .nwn-drop::after{ content:""; position:absolute; top:100%; left:0; right:0; height:10px; }
  .nwn-drop:hover > .nwn-drop-menu{ display:block; }
}
.nwn-drop.open > .nwn-drop-menu{ display:block; }

/* Benachrichtigungen + Sprache */
.nwn-icon-link{ font-size:1rem; }
#notificationsDropdown, #languageDropdown{
  border:1px solid var(--line); border-radius:18px !important;
  box-shadow:0 20px 50px -20px rgba(15,47,46,.3) !important;
}

/* Burger */
.nwn-burger{ display:none; background:none; border:none; cursor:pointer; padding:.5rem; margin-left:auto; }
.nwn-burger span{ display:block; width:24px; height:2.5px; background:var(--ink); border-radius:2px; margin:5px 0; transition:transform .25s var(--ease), opacity .2s; }
.nwn-burger.open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nwn-burger.open span:nth-child(2){ opacity:0; }
.nwn-burger.open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

@media (max-width: 900px){
  .nwn-in{ height:68px; }
  .nwn-brand img{ width:40px; height:40px; }
  .nwn-burger{ display:block; }
  .nwn-menu{
    display:none; position:fixed; inset:68px 0 auto 0; max-height:calc(100dvh - 68px); overflow-y:auto;
    flex-direction:column; align-items:stretch; gap:.15rem;
    background:var(--bg); border-bottom:1px solid var(--line);
    padding:1rem clamp(1rem, 4vw, 2rem) 1.4rem; margin:0;
    box-shadow:0 30px 50px -20px rgba(15,47,46,.25);
  }
  .nwn-menu.open{ display:flex; }
  .nwn-menu > li > a{ padding:.8rem .9rem; font-size:1.02rem; border-radius:14px; }
  .nwn-drop-menu{ position:static; box-shadow:none; border:none; background:var(--tint); margin:.2rem 0 .4rem; }
  .nwn-cta{ margin:0; padding-top:.6rem; }
  .nwn-cta .btn{ width:100%; }
}

/* ---------- Deaktivierter Button ---------- */
.btn-off{
  background:var(--tint-deep) !important; color:var(--ink-soft) !important;
  cursor:not-allowed; pointer-events:none;
}

/* ============================================================
   Hinweisband: Neugründung (ganz oben, unter der Nav)
   ============================================================ */
.rebuild{ background:var(--brand); }
.rebuild-in{ display:flex; align-items:center; gap:1rem; padding-block:1rem; flex-wrap:wrap; }
.rebuild-ic{ width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.25); color:#fff;
  display:grid; place-items:center; font-size:1rem; flex-shrink:0; }
.rebuild p{ color:#10302f; font-size:1rem; margin:0; flex:1; min-width:240px; line-height:1.5; }
.rebuild p strong{ color:#0c2423; font-weight:700; }

/* ============================================================
   Notfallband
   ============================================================ */
.crisis{ background:#fdf1ef; border-block:1px solid #f3d8d3; }
.crisis-in{ display:flex; align-items:center; gap:1rem; padding-block:1.15rem; flex-wrap:wrap; }
.crisis-ic{ width:42px; height:42px; border-radius:50%; background:var(--err); color:#fff;
  display:grid; place-items:center; font-size:1rem; flex-shrink:0; }
.crisis p{ color:var(--ink); font-size:1rem; flex:1; min-width:220px; margin:0; }
.crisis p strong{ font-weight:700; }
.crisis-tels{ display:flex; gap:.6rem; flex-wrap:wrap; }
.crisis-tels a{
  display:inline-flex; align-items:center; gap:.45rem; text-decoration:none;
  background:#fff; border:1.5px solid #efc9c2; color:#9d332e; font-weight:700; font-size:.95rem;
  padding:.5rem 1.05rem; border-radius:999px; transition:border-color .15s var(--ease), transform .15s var(--ease);
}
.crisis-tels a:hover{ border-color:var(--err); transform:translateY(-1px); }
.crisis-tels a i{ font-size:.82em; }

/* ============================================================
   Startseite: Hero + Chat-Demo
   ============================================================ */
.nw-hero{ position:relative; overflow:hidden; }
.hero-glow{ position:absolute; pointer-events:none; border-radius:50%;
  background:radial-gradient(closest-side, rgba(94,170,168,.28), transparent 70%); }
.g1{ width:720px; height:720px; top:-160px; right:-140px; }
.g2{ width:420px; height:420px; bottom:-180px; left:-120px; opacity:.6; }
@media (prefers-reduced-motion: no-preference){
  .g1{ animation:nwdrift 14s ease-in-out infinite alternate; }
  @keyframes nwdrift{ from{ transform:translate(0,0); } to{ transform:translate(-40px,30px); } }
}
.nw-hero-in{ position:relative; display:grid; grid-template-columns:1.08fr .92fr;
  gap:clamp(2.5rem, 6vw, 5rem); align-items:center;
  padding-block:clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem); }
.nw-hero h1{ font-size:clamp(2.8rem, 5.6vw, 4.5rem); max-width:11ch; line-height:1.08; }
.nw-hero h1 em{ font-style:normal; color:var(--accent); }
.nw-hero-sub{ margin-top:1.4rem; font-size:1.13rem; color:var(--ink-soft); max-width:42ch; }
.nw-hero-cta{ margin-top:2.4rem; display:flex; gap:.9rem; flex-wrap:wrap; }

.chat{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-panel);
  box-shadow:0 30px 80px -40px rgba(15,47,46,.35);
  /* Feste Hoehe: je kuerzer der Text links, desto mehr Leerraum entsteht
     durch align-items:center. 580px haelt den Unterschied zwischen den
     Sprachfassungen klein und macht den Hero insgesamt kompakter. */
  display:flex; flex-direction:column; height:580px; width:100%; max-width:440px;
  margin-left:auto; overflow:hidden;
}
.chat-head{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  padding:1.05rem 1.3rem; color:#fff;
  background:linear-gradient(135deg, #5eaaa8 0%, #4a8886 100%);
}
.chat-head strong{ font-family:var(--font-d); font-weight:600; font-size:1.02rem; display:flex; align-items:center; gap:.55rem; }
.chat-status{
  display:inline-flex; align-items:center; gap:.45rem; font-size:.82rem; font-weight:600;
  background:rgba(255,255,255,.2); padding:.45rem .85rem; border-radius:8px; white-space:nowrap;
}
.chat-body{ flex:1; padding:1.2rem 1.3rem; background:#fff;
  display:flex; flex-direction:column; gap:1rem; justify-content:flex-end; overflow:hidden; }
@media (prefers-reduced-motion: no-preference){ .chat-body{ transition:opacity .7s var(--ease); } }
.chat-body.fade{ opacity:0; }
.msg{ max-width:78%; padding:.65rem .95rem; border-radius:var(--r-chat);
  box-shadow:0 2px 5px rgba(0,0,0,.08); }
.msg-user{ align-self:flex-end; color:#fff; border-bottom-right-radius:4px;
  background:linear-gradient(135deg, #5eaaa8 0%, #4a8886 100%); }
.msg-helper{ align-self:flex-start; background:#fff; color:#2c3e50; border-bottom-left-radius:4px;
  border:1px solid var(--line); }
.msg-sender{ font-size:.72rem; font-weight:600; opacity:.8; margin-bottom:2px; }
.msg-text{ font-size:.95rem; line-height:1.5; }
.msg-time{ font-size:.68rem; opacity:.7; margin-top:3px; text-align:right; }
.typing{ align-self:flex-start; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-chat); border-bottom-left-radius:4px; padding:.85rem 1rem;
  display:flex; gap:.3rem; box-shadow:0 2px 5px rgba(0,0,0,.08); }
.typing b{ width:7px; height:7px; border-radius:50%; background:var(--ink-soft); opacity:.5; }
@media (prefers-reduced-motion: no-preference){
  .msg.pop{ animation:nwpop .35s ease-out; }
  @keyframes nwpop{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
  .typing b{ animation:nwblink 1.2s infinite; }
  .typing b:nth-child(2){ animation-delay:.2s; }
  .typing b:nth-child(3){ animation-delay:.4s; }
  @keyframes nwblink{ 0%,60%,100%{ opacity:.35; } 30%{ opacity:1; } }
}
.chat-foot{ display:flex; align-items:center; gap:.7rem; padding:.9rem 1.1rem; border-top:1px solid var(--line); }
.chat-foot span{ flex:1; border:1px solid var(--line); border-radius:12px; padding:.6rem 1rem;
  color:var(--ink-soft); font-size:.93rem; background:var(--bg); }
.chat-foot i{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  color:#fff; background:linear-gradient(135deg, #5eaaa8 0%, #4a8886 100%); font-size:.9rem; flex-shrink:0; }
@media (max-width: 900px){
  .nw-hero-in{ grid-template-columns:1fr; }
  .chat{ margin-inline:auto; height:540px; }
}

/* ============================================================
   Startseite: Ablauf / Bento / Tools / Abgrenzung / FAQ / Join
   ============================================================ */
/* Wie alle anderen Sektionen: Abstand nur nach unten. Sonst addiert er
   sich mit dem der vorherigen Sektion (gemessen 256px statt 128px). */
.how{ padding-block:0 clamp(5rem, 10vw, 8rem); }
.how-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2.5rem, 6vw, 5rem); }
.how-left{ align-self:start; position:sticky; top:110px; }
.how h2{ font-size:clamp(2rem, 3.8vw, 3rem); max-width:14ch; }
.how-left p{ margin-top:1.2rem; color:var(--ink-soft); max-width:36ch; }
.hstep{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.3rem, 3vw, 2.2rem); padding-block:2.2rem; }
.hstep + .hstep{ border-top:1px solid var(--line); }
.hstep-num{ font-family:var(--font-d); font-weight:700; font-size:3rem; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px var(--brand); }
.hstep h3{ font-size:1.3rem; margin-bottom:.45rem; }
.hstep p{ color:var(--ink-soft); max-width:46ch; }
@media (max-width: 820px){
  .how-grid{ grid-template-columns:1fr; }
  .how-left{ position:static; }
}

.bento{ padding-block:0 clamp(5rem, 10vw, 8rem); }
.bento-grid{ display:grid; gap:1rem; grid-template-columns:repeat(3, 1fr);
  grid-template-areas:"big big small" "a b c"; }
.cell{ border-radius:var(--r-panel); padding:2rem; }
.cell-big{ grid-area:big; min-height:280px; display:flex; align-items:flex-end;
  background:linear-gradient(135deg, var(--tint-deep), var(--tint) 60%); }
.cell-big p{ font-family:var(--font-d); font-weight:600; letter-spacing:-0.02em;
  font-size:clamp(1.5rem, 2.6vw, 2.1rem); line-height:1.25; color:var(--accent-deep); max-width:22ch; margin:0; }
.cell-small{ grid-area:small; background:var(--deep); display:flex; align-items:flex-end; }
.cell-small p{ font-family:var(--font-d); font-weight:600; font-size:1.22rem; line-height:1.4; color:#fff; margin:0; }
.cell-fact{ background:#fff; border:1px solid var(--line); }
.cell-fact i{ font-size:1.3rem; color:var(--accent); }
.cell-fact h3{ font-size:1.12rem; margin-top:.9rem; }
.cell-fact p{ color:var(--ink-soft); font-size:.96rem; margin-top:.35rem; }
@media (max-width: 860px){
  .bento-grid{ grid-template-columns:1fr 1fr; grid-template-areas:"big big" "small small" "a b" "c c"; }
}
@media (max-width: 560px){
  .bento-grid{ grid-template-columns:1fr; grid-template-areas:"big" "small" "a" "b" "c"; }
}

/* Auf der Startseite hat .bento keine Ueberschrift, auf Unterseiten schon.
   Ohne diese Regel faellt der Titel auf die Browser-Groesse zurueck. */
.bento h2{ font-size:clamp(2rem, 3.8vw, 3rem); max-width:20ch; }
.bento > .wrap > p{ margin-top:1.2rem; color:var(--ink-soft); max-width:60ch; }

.honest{ padding-block:0 clamp(5rem, 10vw, 8rem); }
.honest h2{ font-size:clamp(2rem, 3.8vw, 3rem); max-width:16ch; }
.honest > .wrap > p{ margin-top:1.2rem; color:var(--ink-soft); max-width:60ch; }
.honest-grid{ margin-top:2.5rem; display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.honest-col{ border-radius:var(--r-panel); padding:clamp(1.6rem, 3.5vw, 2.2rem); }
.honest-col.is-yes{ background:var(--tint); }
.honest-col.is-no{ background:var(--deep); color:#fff; }
.honest-col h3{ font-size:1.18rem; }
.honest-col.is-no h3{ color:#fff; }
.honest-col ul{ list-style:none; margin:1.2rem 0 0; padding:0; display:grid; gap:.95rem; }
.honest-col li{ display:flex; gap:.8rem; align-items:flex-start; font-size:.98rem; line-height:1.55; }
.honest-col.is-yes li{ color:#3d5a57; }
.honest-col.is-no li{ color:#a9c6c4; }
.honest-col li i{ margin-top:.25rem; font-size:.85rem; flex-shrink:0; }
.honest-col.is-yes li i{ color:var(--accent); }
.honest-col.is-no li i{ color:#e08a83; }
.honest-crisis{
  margin-top:1rem; border-radius:var(--r-panel); background:#fdf1ef; border:1px solid #f3d8d3;
  padding:clamp(1.4rem, 3vw, 1.8rem); display:flex; gap:1.1rem; align-items:flex-start; flex-wrap:wrap;
}
.honest-crisis .crisis-ic{ width:46px; height:46px; font-size:1.1rem; }
.honest-crisis div{ flex:1; min-width:260px; }
.honest-crisis strong{ font-family:var(--font-d); font-weight:600; font-size:1.05rem; display:block; color:var(--ink); }
.honest-crisis p{ color:#5d4a47; font-size:.97rem; margin:.35rem 0 0; max-width:60ch; }
.honest-crisis .crisis-tels{ margin-top:.9rem; }
@media (max-width: 780px){ .honest-grid{ grid-template-columns:1fr; } }

.nw-tools{ padding-block:0 clamp(5rem, 10vw, 8rem); }
.nw-tools h2{ font-size:clamp(2rem, 3.8vw, 3rem); max-width:20ch; }
.tools-panel{ margin-top:2.5rem; background:var(--tint); border-radius:var(--r-panel); padding:clamp(.5rem, 2vw, 1.2rem); }
.trow{ display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(1rem, 3vw, 1.8rem); padding:1.35rem clamp(1rem, 2.5vw, 1.6rem);
  text-decoration:none; color:var(--ink); border-radius:16px; transition:background .18s var(--ease); }
.trow + .trow{ border-top:1px solid var(--tint-deep); }
.trow:hover{ background:#fff; }
.trow-ic{ width:46px; height:46px; border-radius:14px; background:#fff; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--accent); font-size:1.15rem;
  transition:background .18s var(--ease), color .18s var(--ease); }
.trow:hover .trow-ic{ background:var(--accent); color:#fff; border-color:var(--accent); }
.trow h3{ font-size:1.08rem; }
.trow p{ color:var(--ink-soft); font-size:.94rem; margin:0; }
.trow > i{ color:var(--ink-soft); transition:transform .18s var(--ease), color .18s var(--ease); }
.trow:hover > i{ transform:translateX(4px); color:var(--accent); }
@media (max-width: 640px){
  .trow{ grid-template-columns:auto 1fr; }
  .trow > i{ display:none; }
}

.faq{ padding-block:0 clamp(5rem, 10vw, 8rem); }
.faq h2{ font-size:clamp(2rem, 3.8vw, 3rem); max-width:16ch; }
.faq > .wrap > p{ margin-top:1.2rem; color:var(--ink-soft); max-width:60ch; }
.faq-list{ margin-top:2.5rem; max-width:820px; border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:1rem;
  padding:1.35rem .3rem; font-family:var(--font-d); font-weight:600; font-size:1.08rem;
  transition:color .15s var(--ease);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--accent); }
.faq-item summary i{ margin-left:auto; color:var(--accent); font-size:.85rem;
  transition:transform .25s var(--ease); flex-shrink:0; }
.faq-item[open] summary i{ transform:rotate(45deg); }
.faq-item .faq-a{ padding:0 .3rem 1.4rem; color:var(--ink-soft); max-width:64ch; }
.faq-item .faq-a p + p{ margin-top:.7rem; }

.join{ background:var(--deep); color:#fff; }
.join-in{ padding-block:clamp(5rem, 10vw, 7.5rem); text-align:center; }
.join h2{ font-size:clamp(2.2rem, 4.5vw, 3.4rem); max-width:16ch; margin-inline:auto; color:#fff; }
.join h2 em{ font-style:normal; color:var(--brand); }
.join p{ margin:1.4rem auto 0; color:#a9c6c4; max-width:52ch; font-size:1.08rem; }
.join .btn{ margin-top:2.4rem; }

/* ============================================================
   Unterseiten: Kopf, Formulare, Seitenleiste, Rechtstexte
   ============================================================ */
.subhero{ position:relative; overflow:hidden; }
.subhero .hero-glow{ width:560px; height:560px; top:-260px; right:-160px; }
.subhero-in{ position:relative; padding-block:clamp(3rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.subhero h1{ font-size:clamp(2.1rem, 4.4vw, 3.2rem); max-width:18ch; }
.subhero p{ margin-top:1.1rem; color:var(--ink-soft); max-width:52ch; font-size:1.08rem; }

.start-grid{ display:grid; grid-template-columns:1.35fr .85fr; gap:clamp(1.5rem, 4vw, 3rem);
  align-items:start; padding-bottom:clamp(4rem, 8vw, 6rem); }
.start-aside{ position:sticky; top:100px; display:grid; gap:1rem; }
.aside-card{ background:var(--tint); border-radius:var(--r-panel); padding:1.6rem; }
.aside-card h3{ font-size:1.05rem; display:flex; align-items:center; gap:.6rem; }
.aside-card h3 i{ color:var(--accent); font-size:.92rem; }
.aside-card ol{ list-style:none; margin:1.1rem 0 0; padding:0; display:grid; gap:.9rem; }
.aside-card ol li{ display:flex; gap:.85rem; align-items:flex-start; font-size:.93rem; color:#3d5a57; line-height:1.5; }
.aside-card ol b{
  width:26px; height:26px; border-radius:50%; background:#fff; color:var(--accent);
  font-family:var(--font-d); font-weight:700; font-size:.82rem;
  display:grid; place-items:center; flex-shrink:0; margin-top:.05rem;
}
.aside-card ul{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.7rem; }
.aside-card ul li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.93rem; color:#3d5a57; line-height:1.5; }
.aside-card ul li i{ color:var(--accent); margin-top:.25rem; font-size:.8rem; flex-shrink:0; }
.aside-crisis{ background:#fdf1ef; border:1px solid #f3d8d3; }
.aside-crisis h3 i{ color:var(--err); }
.aside-crisis p{ margin:.7rem 0 0; font-size:.93rem; color:#5d4a47; line-height:1.55; }
.aside-crisis .crisis-tels{ margin-top:.9rem; }
.aside-crisis .crisis-tels a{ font-size:.88rem; padding:.42rem .9rem; }
@media (max-width: 940px){
  .start-grid{ grid-template-columns:1fr; }
  .start-aside{ position:static; }
}

.nw-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-panel); padding:clamp(1.5rem, 4vw, 2.2rem); }
.nw-card + .nw-card{ margin-top:1.1rem; }
.nw-card > h2{ font-size:1.2rem; display:flex; align-items:center; gap:.6rem; }
.nw-card > h2 i{ color:var(--accent); font-size:1rem; }
.card-hint{ margin-top:.4rem; color:var(--ink-soft); font-size:.95rem; }
.field{ margin-top:1.2rem; }
.field label{ display:block; font-weight:600; font-size:.95rem; margin-bottom:.45rem; }
.field input[type=text], .field input[type=email], .field input[type=password],
.field input[type=number], .field input[type=time], .field select, .field textarea{
  width:100%; padding:.85rem 1.1rem; font:inherit; background-color:var(--bg);
}
.field .help{ margin-top:.45rem; font-size:.88rem; color:var(--ink-soft); }
.tiles{ display:grid; gap:.7rem; margin-top:1.2rem; }
.tiles-2{ grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }
.tile{
  display:flex; align-items:center; gap:.8rem; padding:.9rem 1.1rem; cursor:pointer;
  background:var(--bg); border:1.5px solid var(--line); border-radius:16px;
  transition:border-color .15s var(--ease), background .15s var(--ease);
}
.tile:hover{ border-color:var(--brand); }
.tile:has(input:checked){ border-color:var(--accent); background:var(--tint); }
.tile input{ width:19px; height:19px; accent-color:var(--accent); flex-shrink:0; cursor:pointer; }
.tile strong{ font-weight:600; font-size:.97rem; }
.tile small{ display:block; color:var(--ink-soft); font-size:.87rem; line-height:1.4; }
.tile.is-off{ opacity:.55; cursor:not-allowed; }
.tile.is-off:hover{ border-color:var(--line); }
.consent{ display:flex; align-items:flex-start; gap:.8rem; cursor:pointer; }
.consent input{ width:19px; height:19px; accent-color:var(--accent); flex-shrink:0; margin-top:3px; cursor:pointer; }
.consent span{ font-size:.97rem; line-height:1.55; }
.form-actions{ margin-top:1.4rem; display:flex; gap:.9rem; flex-wrap:wrap; }
.auth-card{ max-width:440px; margin-inline:auto; }
.auth-foot{ margin-top:1.3rem; text-align:center; color:var(--ink-soft); font-size:.95rem; }
.page-pad{ padding-block:2.5rem clamp(4rem, 8vw, 6rem); }

/* Die Vertikalabstaende kommen von der umgebenden .nw-flow-Sektion,
   .legal-page setzt nur die schmalere Textbreite.
   style.css rendert den Block als weisse Karte mit Schatten - das passt
   nicht zum Sektionsaufbau der Startseite und wird hier zurueckgesetzt. */
/* Liegt in einem .wrap: das uebernimmt Zentrierung und Seitenrand,
   .legal-page setzt nur die schmalere Textbreite. style.css rendert den
   Block als weisse Karte mit Schatten - hier zurueckgesetzt. */
.legal-page{
  max-width:820px;
  margin-inline:0 !important;
  background:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}
.legal-section{ margin-top:2.6rem; }
.legal-section:first-child{ margin-top:0; }
.legal-section h2{ font-size:1.35rem; margin-bottom:.8rem; }
/* style.css faerbt diese Zwischenueberschriften in #5eaaa8 - auf der
   hellen Flaeche zu schwach (2,3:1). Zurueck auf die Textfarbe. */
.legal-section h3{ font-size:1.08rem; margin:1.4rem 0 .5rem; color:var(--ink) !important; }
.legal-section p, .legal-section li{ color:var(--ink-soft); font-size:.98rem; }
.legal-section p + p{ margin-top:.8rem; }
.legal-section ul{ padding-left:1.2rem; margin-top:.6rem; display:grid; gap:.35rem; }
.legal-notice{ display:flex; gap:1rem; background:var(--tint); border-radius:var(--r-panel); padding:1.4rem; }
.legal-notice i{ color:var(--accent); font-size:1.2rem; margin-top:.2rem; }
.legal-notice p{ margin-top:.4rem; }
/* style.css zentriert den Block; zwei Buttons ueberlappen dort, weil kein
   Abstand gesetzt ist. Hier als linksbuendige Reihe wie ueberall sonst. */
.legal-back{ margin-top:3rem; display:flex; gap:.9rem; flex-wrap:wrap; text-align:left !important; }

/* ============================================================
   Globaler Footer (.nwf)
   ============================================================ */
/* Hintergrund bewusst transparent: auf kurzen Seiten (Login, Register) beginnt
   der Footer noch im Auslauf der getoenten Kopfflaeche und wuerde ihn sonst
   hart abschneiden. Auf langen Seiten liegt er ohnehin auf --bg. */
.nwf{ padding-block:clamp(3.5rem, 7vw, 5rem) 2rem; border-top:1px solid var(--line); background:transparent; }
.nwf-grid{ display:flex; justify-content:space-between; gap:2.5rem; flex-wrap:wrap; }
.nwf-brand{ max-width:300px; }
.nwf-brand .nwn-brand{ font-size:1.15rem; }
.nwf-brand .nwn-brand img{ width:38px; height:38px; }
.nwf-brand p{ margin-top:.9rem; color:var(--ink-soft); font-size:.95rem; }
.nwf nav{ display:flex; gap:clamp(2rem, 5vw, 4.5rem); flex-wrap:wrap; }
.nwf nav ul{ list-style:none; display:grid; gap:.55rem; margin:0; padding:0; }
.nwf nav strong{ font-family:var(--font-d); font-weight:600; font-size:.92rem; display:block; margin-bottom:.7rem; color:var(--ink); }
.nwf nav a{ color:var(--ink-soft); text-decoration:none; font-size:.95rem; }
.nwf nav a:hover{ color:var(--accent); }
.nwf-legal{ margin-top:3.2rem; padding-top:1.4rem; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; color:var(--ink-soft); font-size:.88rem; }
.nwf-legal a{ color:var(--ink-soft); }

/* Newsletter-Sektion (nur Startseite) - bewusst groesser als der
   kompakte Footer-Block, sie ist der Abschluss der Startseite. */
.nw-newsletter{ padding-block:0 clamp(4rem, 8vw, 6rem); }
.nw-newsletter .nwf-news{
  margin:0 auto; max-width:820px;
  padding:clamp(2.2rem, 5vw, 3.2rem);
  display:block;
}
.nw-newsletter .nwf-news > strong{ font-size:1.5rem; gap:.7rem; }
.nw-newsletter .nwf-news > strong i{ font-size:.86em; }
.nw-newsletter .nwf-news > p{ margin:.7rem 0 1.4rem; font-size:1.02rem; max-width:58ch; }
.nw-newsletter .nwf-langs{ margin:0 0 1rem; }
.nw-newsletter .nwf-langs label{ padding:.55rem 1.2rem; font-size:.95rem; }
.nw-newsletter .nwf-news-row{ gap:.7rem; }
.nw-newsletter .nwf-news-row input[type=email]{ padding:.9rem 1.3rem; font-size:1rem; }
.nw-newsletter .nwf-news-row .btn{ padding:.9rem 1.9rem; font-size:1rem; }
.nw-newsletter .nwf-news small{ margin-top:1.1rem; font-size:.87rem; }

/* Newsletter-Anmeldung */
.nwf-news{ margin-top:3rem; padding:1.6rem; background:var(--tint); border-radius:var(--r-panel); max-width:560px; }
.nwf-news strong{ font-family:var(--font-d); font-weight:600; font-size:1.02rem; display:flex; align-items:center; gap:.55rem; color:var(--ink); }
.nwf-news strong i{ color:var(--accent); font-size:.92rem; }
.nwf-news > p{ margin:.5rem 0 1rem; color:var(--ink-soft); font-size:.93rem; }
.nwf-news-row{ display:flex; gap:.6rem; flex-wrap:wrap; }
.nwf-news-row input[type=email]{
  flex:1; min-width:200px; padding:.7rem 1rem; font:inherit; font-size:.95rem;
  border:1.5px solid var(--line); border-radius:999px; background:#fff; color:var(--ink);
}
.nwf-news-row .btn{ padding:.7rem 1.4rem; font-size:.93rem; }
.nwf-langs{ display:flex; gap:.5rem; margin:.8rem 0; flex-wrap:wrap; }
.nwf-langs label{
  display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  padding:.45rem 1rem; border-radius:999px; border:1.5px solid var(--line); background:#fff;
  font-size:.9rem; font-weight:600; color:var(--ink-soft);
  transition:border-color .15s var(--ease), color .15s var(--ease);
}
.nwf-langs label:hover{ border-color:var(--brand); }
.nwf-langs label:has(input:checked){ border-color:var(--accent); color:var(--accent-deep); background:var(--tint-deep); }
.nwf-langs input{ accent-color:var(--accent); width:15px; height:15px; }
.nwf-news small{ display:block; color:var(--ink-soft); font-size:.82rem; line-height:1.5; }
.nwf-news small a{ color:var(--accent); }
#nwNewsMsg{ margin:.7rem 0 0; font-size:.92rem; font-weight:600; display:none; }
#nwNewsMsg.ok{ display:block; color:var(--ok); }
#nwNewsMsg.err{ display:block; color:var(--err); }

/* ============================================================
   Interne Bereiche: Legacy-Bausteine ans neue Design angleichen
   ============================================================ */
.mood-emoji i, .mood-emoji .fas{ color:var(--accent); }
.card, .stat-card, .question-block, .chat-card, .admin-card, .dashboard-card,
.resource-card, .partner-card, .settings-card{
  border-radius:var(--r-panel) !important;
  box-shadow:0 14px 40px -24px rgba(15,47,46,.25) !important;
  border:1px solid var(--line);
}
.stat-value{ font-family:var(--font-d); font-weight:700; color:var(--accent-deep); }
.stat-label{ color:var(--ink-soft); }

/* Seitenköpfe der internen Bereiche: heller Panel-Look statt Farbverlauf.
   Der alte Gradient machte dunkle Überschriften unlesbar. */
.admin-header, .page-header, .crisis-header, .announcement-header,
.affirmations-header, .teamchat-header, .dashboard-header, .partners-header,
.resources-header, .tags-header, .newsletter-header{
  background:var(--tint) !important;
  color:var(--ink) !important;
  border:1px solid var(--line);
  border-radius:var(--r-panel) !important;
  padding:clamp(1.6rem, 3.5vw, 2.4rem) !important;
  margin-bottom:2rem;
  box-shadow:none !important;
  text-align:left !important;
}
.admin-header h1, .page-header h1, .crisis-header h1, .announcement-header h1,
.affirmations-header h1, .teamchat-header h1, .dashboard-header h1,
.partners-header h1, .resources-header h1, .tags-header h1, .newsletter-header h1,
.admin-header h2, .page-header h2, .crisis-header h2, .dashboard-header h2{
  color:var(--ink) !important;
  font-family:var(--font-d); font-weight:700; letter-spacing:-0.02em;
  font-size:clamp(1.7rem, 3.4vw, 2.3rem) !important;
  margin:0 0 .4rem !important;
  display:flex !important; align-items:center; gap:.7rem; flex-wrap:wrap;
  justify-content:flex-start !important;
  text-shadow:none !important;
  /* style.css faerbt diese Titel per background-clip als Gradient-Text ein,
     wodurch color wirkungslos bleibt. Beides zuruecksetzen. */
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:currentColor !important;
}
.admin-header h1 i, .page-header h1 i, .crisis-header h1 i, .announcement-header h1 i,
.affirmations-header h1 i, .teamchat-header h1 i, .dashboard-header h1 i{
  color:var(--accent) !important; font-size:.8em;
}
.admin-header p, .page-header p, .crisis-header p, .announcement-header p,
.affirmations-header p, .teamchat-header p, .dashboard-header p,
.partners-header p, .newsletter-header p{
  color:var(--ink-soft) !important; margin:0 !important; font-size:1rem;
  text-shadow:none !important; opacity:1 !important;
}
.admin-header .btn, .page-header .btn, .dashboard-header .btn{ margin-top:1.2rem; }

/* Tabellen */
table{ border-collapse:separate; border-spacing:0; width:100%; }
table thead th{
  background:var(--tint) !important; color:var(--ink) !important;
  font-family:var(--font-d); font-weight:600; font-size:.88rem;
  text-transform:none !important; letter-spacing:0;
  padding:.9rem 1rem !important; border-bottom:1px solid var(--line) !important;
}
table tbody td{ padding:.85rem 1rem !important; border-bottom:1px solid var(--line) !important; color:var(--ink); }
table tbody tr:hover{ background:var(--tint); }
.table-wrap, .applications-table, .users-table{ border-radius:var(--r-panel); overflow:hidden; border:1px solid var(--line); background:#fff; }

/* Badges / Chips */
.badge, .tag, .status-badge, .role-badge, .status{
  border-radius:999px !important; font-family:var(--font-d); font-weight:600;
  font-size:.78rem !important; padding:.32rem .8rem !important; letter-spacing:0;
}

/* Buttons in Tabellen kompakt und nebeneinander */
td .btn, td .btn-sm, .actions .btn{ padding:.45rem .95rem !important; font-size:.84rem !important; }
td .btn i{ margin-right:.15rem; }
td:last-child, td.actions{ white-space:nowrap; }
td:last-child .btn + .btn, td.actions .btn + .btn{ margin-left:.4rem; }

/* Weitere Gradient-Text-Titel im internen Bereich zuruecksetzen */
h1.gradient-text, h2.gradient-text, .section-title, .stats-title,
h2[class*="-title"], .content-header h1, .content-header h2{
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:currentColor !important;
  color:var(--ink) !important;
}

.modal-content, #editProfileModal > div{ border-radius:var(--r-panel) !important; }

/* ============================================================
   Legacy-Hero der Unterseiten (Team, Partner, Tools ...)
   style.css rendert ihn als Vollflaechen-Gradient mit weisser Schrift.
   Hier auf den hellen Look der Startseite umstellen.
   ============================================================ */
.hero:not(.nw-hero){
  background:transparent !important;
  color:var(--ink) !important;
  padding:clamp(2.5rem, 5vw, 3.5rem) clamp(1.2rem, 4vw, 2.5rem) clamp(1.5rem, 3vw, 2rem) !important;
  text-align:left !important;
  position:relative; overflow:hidden;
  max-width:1180px; margin-inline:auto;
}
/* Weicher Marken-Glow statt Farbflaeche */
.hero:not(.nw-hero)::before{
  content:""; position:absolute; pointer-events:none; border-radius:50%;
  width:640px; height:640px; top:-280px; right:-180px; z-index:0;
  background:radial-gradient(closest-side, rgba(94,170,168,.28), transparent 70%);
}
.hero:not(.nw-hero) > *{ position:relative; z-index:1; }
.hero:not(.nw-hero) h1{
  color:var(--ink) !important; font-family:var(--font-d); font-weight:700;
  font-size:clamp(2.1rem, 4.4vw, 3.2rem) !important; letter-spacing:-0.025em;
  line-height:1.1; margin:0 0 1rem !important;
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  background:none !important; -webkit-background-clip:border-box !important;
  background-clip:border-box !important; -webkit-text-fill-color:currentColor !important;
  text-shadow:none !important;
}
.hero:not(.nw-hero) h1{ justify-content:flex-start !important; }
.hero:not(.nw-hero) h1 i{ color:var(--accent) !important; font-size:.75em; }
.hero:not(.nw-hero) p, .hero:not(.nw-hero) .hero-subtitle{
  color:var(--ink-soft) !important; font-size:1.08rem; max-width:60ch;
  margin:0 !important; opacity:1 !important; text-shadow:none !important;
}
.hero-badges{ justify-content:flex-start !important; margin-top:1.4rem !important; }
.hero-badges > *, .hero-badge{
  background:var(--tint) !important; color:var(--accent-deep) !important;
  border:1px solid var(--line) !important; border-radius:999px !important;
  font-family:var(--font-d); font-weight:600; font-size:.9rem;
  padding:.5rem 1.1rem !important; backdrop-filter:none !important;
}
.hero-badges i, .hero-badge i{ color:var(--accent) !important; }
@media (max-width: 700px){
  .hero:not(.nw-hero) h1{ font-size:1.9rem !important; }
}

/* Abschnittstitel auf Unterseiten */
.section-header, .section-title-wrap{ text-align:left !important; }
.section-header h2, .section-title, .section-header h1{
  font-family:var(--font-d); font-weight:700; letter-spacing:-0.02em;
  color:var(--ink) !important;
  font-size:clamp(1.8rem, 3.4vw, 2.6rem) !important;
  display:flex; align-items:center; gap:.7rem; justify-content:flex-start !important;
  background:none !important; -webkit-background-clip:border-box !important;
  background-clip:border-box !important; -webkit-text-fill-color:currentColor !important;
}
.section-header h2 i, .section-title i, .section-header h1 i{ color:var(--accent) !important; font-size:.78em; }
.section-header p, .section-subtitle{ color:var(--ink-soft) !important; max-width:64ch; margin:.6rem 0 0 !important; }

/* ============================================================
   Unterseiten: exakt das Kartenmuster der Startseite (.cell-fact)
   Weisse Flaeche, 1px Linie, 24px Radius, Icon schlicht in Teal
   OHNE Kachel/Hintergrund - so wie auf der Startseite.
   ============================================================ */
.partner-card, .challenge-card, .breathing-card, .tool-card,
.member-card, .info-card, .feature-card, .intro-card, .men-card, .method-card{
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-panel) !important;
  padding:2rem !important;
  box-shadow:none !important;
  text-align:left !important;
  transform:none !important;
}
.partner-card:hover, .challenge-card:hover,
.feature-card:hover, .intro-card:hover, .men-card:hover{
  border-color:var(--brand) !important; transform:none !important;
}
/* Icons wie .cell-fact i: nur Glyphe, kein Kaestchen */
.card-icon, .challenge-icon, .feature-icon, .value-icon, .method-icon,
.men-icon, .partner-icon{
  margin-bottom:.9rem !important;
  background:none !important; background-image:none !important;
  border:none !important; box-shadow:none !important;
  width:auto !important; height:auto !important; min-height:0 !important;
  border-radius:0 !important; padding:0 !important; margin:0 0 .9rem !important;
  display:block !important; line-height:1 !important;
  font-size:1.3rem !important; color:var(--accent) !important;
}
.card-icon i, .challenge-icon i, .feature-icon i, .value-icon i,
.method-icon i, .men-icon i, .partner-icon i{
  font-size:1.3rem !important; color:var(--accent) !important;
  background:none !important; -webkit-text-fill-color:currentColor !important;
}
.partner-card h3, .challenge-card h3, .member-card h3,
.intro-card h3, .feature-card h3, .men-card h3, .method-card h3,
.partner-card h2, .intro-card h2{
  font-family:var(--font-d) !important; font-weight:700 !important;
  font-size:1.12rem !important; letter-spacing:-0.01em;
  color:var(--ink) !important; text-align:left !important;
  margin:0 0 .35rem !important; line-height:1.25 !important;
}
.partner-card p, .challenge-card p, .member-card p, .intro-card p,
.feature-card p, .men-card p, .method-card p,
.partner-card .description{
  color:var(--ink-soft) !important; text-align:left !important;
  font-size:.96rem !important; line-height:1.6 !important; margin:0 !important;
}
.partner-card p + p, .intro-card p + p{ margin-top:.7rem !important; }
.badge{
  background:var(--tint) !important; color:var(--accent-deep) !important;
  border:1px solid var(--line) !important;
  font-family:var(--font-d); font-weight:600; font-size:.78rem !important;
  padding:.32rem .8rem !important; border-radius:999px !important;
}
.subtitle, .section-intro{ color:var(--ink-soft) !important; max-width:64ch; }
.intro-card img{ border-radius:16px !important; margin-bottom:1.1rem; }

/* Textbloecke (z. B. "Partner werden") wie die Startseiten-Sektionen */
.message-section, .intro-section, .content-section, .features-section{ padding-block:clamp(1.5rem, 3.5vw, 2.5rem) 0 !important; }
.message-box, .content-box{
  background:var(--tint) !important; border:none !important;
  border-radius:var(--r-panel) !important;
  padding:clamp(1.8rem, 4vw, 2.6rem) !important;
  box-shadow:none !important; text-align:left !important;
}
.message-box h2, .content-box h2{
  font-family:var(--font-d) !important; font-weight:700 !important;
  font-size:clamp(1.6rem, 3vw, 2.1rem) !important;
  color:var(--ink) !important; letter-spacing:-0.02em;
  display:flex; align-items:center; gap:.65rem; justify-content:flex-start !important;
  margin:0 0 1.2rem !important; text-align:left !important;
  background:none !important; -webkit-background-clip:border-box !important;
  background-clip:border-box !important; -webkit-text-fill-color:currentColor !important;
}
.message-box h2 i, .content-box h2 i{ color:var(--accent) !important; font-size:.78em; }
.message-content p, .message-box p, .content-box p{
  color:var(--ink-soft) !important; font-size:1rem; line-height:1.7;
  max-width:72ch; text-align:left !important;
}
.message-content p + p{ margin-top:1rem; }
.message-content strong, .message-box strong, .content-box strong{
  color:var(--ink) !important; font-weight:600 !important;
  font-size:inherit !important; font-family:var(--font-b) !important;
  display:inline; line-height:inherit;
}
.message-content p{ border-left:none !important; padding-left:0 !important; }

/* Partner-/Karten-Grids: gleichmaessige Spalten, Karte fuellt die Zelle */
.intro-grid, .partners-grid, .challenges-grid,
.members-grid, .features-grid, .men-grid{
  display:grid !important;
  /* auto-fill statt auto-fit: eine einzelne Karte bleibt in Normalbreite,
     statt sich ueber die ganze Zeile zu strecken. */
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap:1rem !important; align-items:start; justify-content:start;
}
.intro-grid{ grid-template-columns:repeat(auto-fill, minmax(300px, 360px)) !important; }
.intro-card, .partner-card, .member-card, .challenge-card{
  height:100%; display:flex; flex-direction:column;
}

/* CTA-Bloecke auf Unterseiten: dunkler Markenblock wie auf der Startseite */
.cta-section{ padding-block:clamp(3rem, 6vw, 4.5rem) !important; background:transparent !important; }
.cta-box{
  background:var(--deep) !important; color:#fff !important;
  border-radius:var(--r-panel) !important; border:none !important;
  padding:clamp(2.5rem, 6vw, 4rem) clamp(1.6rem, 4vw, 3rem) !important;
  text-align:center !important; box-shadow:none !important;
}
.cta-box h2, .cta-box h3{
  color:#fff !important; font-family:var(--font-d) !important; font-weight:700 !important;
  font-size:clamp(1.8rem, 3.6vw, 2.6rem) !important; letter-spacing:-0.02em;
  justify-content:center !important; margin:0 auto 1rem !important; max-width:18ch;
  background:none !important; -webkit-background-clip:border-box !important;
  background-clip:border-box !important; -webkit-text-fill-color:currentColor !important;
}
.cta-box p{ color:#a9c6c4 !important; max-width:52ch; margin:0 auto !important; font-size:1.05rem; }
.cta-box .btn{ margin-top:1.8rem; }
.cta-box .btn-primary, .cta-box .btn-large{
  background:#fff !important; color:var(--accent-deep) !important;
  font-size:1rem !important; padding:.9rem 1.8rem !important;
}
.cta-box .btn-primary:hover{ background:var(--tint) !important; }
.cta-box .btn, .cta-box .btn-primary, .cta-box .btn-large{
  box-shadow:none !important; filter:none !important;
}
/* Der .join-Block der Startseite hat weder Muster noch Animation. */
.cta-box::before, .cta-box::after,
.cta-section::before, .cta-section::after{ display:none !important; content:none !important; }
.cta-box{ animation:none !important; background-image:none !important; overflow:hidden; }

/* Newsletter-Editor: Sprachfassungen als eigene Bloecke */
.nl-hint{
  display:flex; gap:.6rem; align-items:flex-start;
  background:var(--tint); border-radius:16px; padding:.9rem 1.1rem;
  color:var(--ink-soft); font-size:.92rem; line-height:1.55; margin-bottom:1.2rem;
}
.nl-hint i{ color:var(--accent); margin-top:.2rem; }
.nl-lang{
  border:1px solid var(--line); border-radius:var(--r-panel);
  padding:1.2rem 1.3rem 1.3rem; margin:0 0 1.1rem;
}
.nl-lang legend{
  font-family:var(--font-d); font-weight:600; font-size:.95rem; color:var(--accent-deep);
  padding:.25rem .8rem; background:var(--tint); border-radius:999px;
  display:flex; align-items:center; gap:.45rem;
}
.nl-lang legend i{ color:var(--accent); font-size:.85em; }
.nl-lang textarea{ min-height:170px; }

/* ============================================================
   Reveals
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
  .reveal.in{ opacity:1; transform:none; }
}

/* ============================================================
   Tool- und Team-Seiten: Typografie und Bausteine vereinheitlichen
   Die Seiten bringen eigene Schriftgroessen mit, die vom
   Designsystem der Startseite abweichen. Hier global angleichen.
   ============================================================ */
.tool-page h2, .checkin-container h2, .energy-container h2,
.nutrition-container h2, .affirmation-container h2,
.breathing-card h2, .question-block h2{
  font-family:var(--font-d) !important; font-weight:700 !important;
  font-size:clamp(1.5rem, 2.8vw, 2rem) !important;
  letter-spacing:-0.02em; color:var(--ink) !important;
  background:none !important; -webkit-text-fill-color:currentColor !important;
}
.tool-page h3, .checkin-container h3, .energy-container h3,
.nutrition-container h3, .question-block h3{
  font-family:var(--font-d) !important; font-weight:700 !important;
  font-size:1.12rem !important; letter-spacing:-0.01em; color:var(--ink) !important;
}
.tool-page p, .checkin-container p, .energy-container p,
.nutrition-container p, .question-block p{
  font-size:.98rem !important; line-height:1.65 !important; color:var(--ink-soft) !important;
}
.tool-page label, .checkin-container label, .energy-container label,
.nutrition-container label{
  font-family:var(--font-b) !important; font-size:.95rem !important; font-weight:600 !important;
  color:var(--ink) !important;
}
.tool-page small, .checkin-container small, .energy-container small,
.nutrition-container small{ font-size:.87rem !important; color:var(--ink-soft) !important; }

/* Grosse Kennzahlen (z. B. Energie-Score) im Marken-Look */
.energy-value, .score-value, .big-number, .stat-number{
  font-family:var(--font-d) !important; font-weight:700 !important;
  color:var(--accent-deep) !important; letter-spacing:-0.03em;
}

/* Panels/Boxen der Tool-Seiten wie .cell-fact der Startseite */
.question-block, .checkin-card, .energy-card, .nutrition-card,
.tool-panel, .result-box, .summary-box{
  background:#fff !important; border:1px solid var(--line) !important;
  border-radius:var(--r-panel) !important; box-shadow:none !important;
  padding:clamp(1.4rem, 3vw, 2rem) !important;
}

/* Keine Deko-Animationen ausserhalb der Startseite und des Atemkreises */
.cta-box::before, .cta-box::after,
.hero:not(.nw-hero)::after,
.affirmation-card::before, .affirmation-card::after,
.page-header::before, .page-header::after,
.admin-header::before, .admin-header::after{
  display:none !important; content:none !important;
}

/* ============================================================
   Vollbreite-Baender als Karten (nicht ueber den ganzen Bildschirm)
   Betrifft: Neugruendungs-Hinweis, Notfallband, Helfer-Aufruf.
   ============================================================ */
.rebuild, .crisis, .join{
  background:transparent !important;
  border:none !important;
  padding-inline:clamp(1.2rem, 4vw, 2.5rem);
}
.rebuild-in, .crisis-in, .join-in{
  max-width:1180px; margin-inline:auto;
  border-radius:var(--r-panel);
  padding:clamp(1.3rem, 3vw, 1.8rem) clamp(1.4rem, 3vw, 2rem) !important;
}
/* Neugruendung und Helfer-Aufruf teilen sich dieselbe Markenfarbe */
.rebuild-in, .join-in{ background:var(--brand) !important; }
.rebuild-in{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.crisis-in{ background:#fdf1ef !important; border:1px solid #f3d8d3; }

/* Helfer-Aufruf: gleiche Farbe wie der Neugruendungs-Hinweis */
.join{ padding-block:clamp(2rem, 4vw, 3rem) !important; }
.join-in{
  padding-block:clamp(3rem, 6vw, 4.5rem) !important;
  text-align:center; color:#10302f !important;
}
.join-in h2{ color:#0c2423 !important; }
.join-in h2 em{ color:#fff !important; }
.join-in p{ color:#1c3a3b !important; }
.join-in .btn-white{ background:#fff !important; color:var(--accent-deep) !important; }

/* Abstand zwischen letzter Sektion und Newsletter */
.nw-newsletter{ padding-block:clamp(3rem, 6vw, 4.5rem) clamp(4rem, 8vw, 6rem) !important; }

/* ============================================================
   Sektionsrhythmus der Unterseiten
   Die Startseite setzt den Abstand konsequent unter die Sektion
   (.bento, .honest, .nw-tools, .faq: padding-block 0 / 5-8rem).
   .nw-flow gibt jeder Folgesektion genau dieses Mass, damit die
   Abstaende zwischen den Kategorien nicht auseinanderlaufen.
   ============================================================ */
.nw-flow{ padding-block:0 clamp(5rem, 10vw, 8rem); }
/* Erste Sektion nach dem Seitenkopf: etwas Vorlauf, sonst klebt die
   Ueberschrift am Hero. */
.nw-flow.is-lead{ padding-top:clamp(3.5rem, 7vw, 5.5rem); }

/* Kopf-Glow der Unterseiten: liegt wie auf der Partnerseite in der
   Inhaltsspalte hinter der Ueberschrift statt als Fleck in der
   Bildschirmecke. left rechnet die 1180px-Spalte nach: bei schmalen
   Fenstern faellt der Glow auf die linke Kante zurueck. */
.subhero .hero-glow.g-lead{
  width:640px; height:640px;
  top:-280px; right:auto; left:max(0px, calc(50% - 590px));
}

/* ============================================================
   Personenliste (Team-Seite)
   Baustein im Kartenmuster der Startseite (.cell-fact): weisse
   Flaeche, 1px Linie, 24px Radius, 2rem Innenabstand, links
   ausgerichtet, kein Schatten. Statt der Icon-Glyphe steht oben
   das Profilbild.
   ============================================================ */
.nw-roster h2{ font-size:clamp(2rem, 3.8vw, 3rem); max-width:16ch; }
.nw-roster > .wrap > p{ margin-top:1.2rem; color:var(--ink-soft); max-width:60ch; }
/* Karten-Grid fuer Personen- und Partnerlisten.
   align-items bewusst auf stretch: Karten einer Zeile sind gleich hoch,
   genau wie die .cell-fact-Karten der Startseite. */
.roster-grid{
  margin-top:2.5rem; display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
}
.mcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-panel);
  padding:2rem; text-align:left;
}
.mcard-top{ display:flex; align-items:center; gap:1rem; }
.mcard-av{
  width:64px; height:64px; border-radius:50%; flex-shrink:0;
  border:1px solid var(--line); background:var(--tint); object-fit:cover; display:block;
}
span.mcard-av{ display:grid; place-items:center; color:var(--accent); font-size:1.5rem; }
.mcard h3{ font-size:1.12rem; margin:0; }
.mcard-since{
  margin:.3rem 0 0; display:flex; align-items:center; gap:.45rem;
  font-size:.87rem; color:var(--ink-soft);
}
.mcard-since i{ color:var(--accent); font-size:.82em; }
.mcard-bio{ margin:1.1rem 0 0; color:var(--ink-soft); font-size:.96rem; line-height:1.6; }
.mcard-bio.is-empty{ font-style:italic; }

/* Leerzustand, falls keine Mitglieder in der Datenbank stehen */
.roster-empty{
  margin-top:2.5rem; background:var(--tint); border-radius:var(--r-panel);
  padding:clamp(1.8rem, 4vw, 2.6rem); display:flex; gap:1rem; align-items:flex-start;
}
.roster-empty i{ color:var(--accent); font-size:1.3rem; margin-top:.15rem; }
.roster-empty p{ margin:0; color:var(--ink-soft); }

/* ============================================================
   Startseite: getoente Flaeche hinter dem Seitenkopf
   Eine durchgehende Flaeche ueber Navigation und Hero statt
   einzelner Farbflecken, nach unten weich auslaufend.
   Grundton ist die Markenfarbe bei etwa halber Deckung:
   #a9d1d0. Das Hinweisband darueber ist volle Markenfarbe und
   hebt sich dadurch weiter als Karte ab.
   ============================================================ */
:root{
  --head-fill: #a9d1d0;                /* Flaeche hinter Navigation und Hero */
  --head-line: rgba(94,170,168,.42);   /* Trennlinie der Navigation darin    */
  --head-soft: #2b4644;                /* Sekundaertext darauf (>= 6:1)      */
  --head-bub:  rgba(94,170,168,.30);   /* zwei weiche, etwas tiefere Stellen */
}

/* Reihenfolge = Malreihenfolge: die Blasen stehen vor der Flaeche,
   die Flaeche selbst kommt als letzte Ebene ganz nach hinten.
   Die Y-Werte sind absolut, damit die Blasen im Kopfbereich bleiben und
   nicht mit der Seitenlaenge nach unten wandern. */
body.nw-home{
  background-image:
    radial-gradient(circle 420px at 88% 130px, var(--head-bub), transparent 70%),
    radial-gradient(circle 300px at  2% 800px, var(--head-bub), transparent 70%),
    linear-gradient(180deg,
      var(--head-fill)     0px,
      var(--head-fill)   620px,
      rgba(94,170,168,.30) 790px,
      rgba(94,170,168,0)   950px);
  background-repeat:no-repeat; background-attachment:scroll;
}
@media (max-width: 900px){
  /* Der Hero ist hier hoeher, die Flaeche muss weiter reichen.
     Grosse Blasen wuerden auf schmalen Schirmen hinter dem Text liegen. */
  body.nw-home{
    background-image:
      radial-gradient(circle 300px at 96% 120px, var(--head-bub), transparent 70%),
      radial-gradient(circle 220px at  0% 700px, var(--head-bub), transparent 70%),
      linear-gradient(180deg,
        var(--head-fill)     0px,
        var(--head-fill)   560px,
        rgba(94,170,168,.30) 760px,
        rgba(94,170,168,0)   980px);
  }
}


/* Navigation laeuft auf der Startseite in derselben Flaeche durch.
   --ink-soft kaeme darauf nur auf 3,5:1 - Navigationstext deshalb
   auf --head-soft. */
.nw-home .nwn{
  /* Deckend, nicht .9: sonst scheint das weisse Body-Weiss durch und die
     Leiste wird eine Spur heller als die Flaeche darunter. */
  background:var(--head-fill);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  /* Ohne Trennlinie geht die Flaeche sauber durch. Beim Scrollen trennt
     die Farbe selbst die Leiste vom hellen Inhalt darunter. */
  border-bottom:none;
}
.nw-home .nwn-menu > li > a{ color:var(--head-soft); }
.nw-home .nwn-menu > li > a:hover,
.nw-home .nwn-menu > li > a[aria-current]{ background:rgba(255,255,255,.5); color:var(--ink); }
.nw-home .nwn-burger span{ background:var(--head-soft); }
@media (max-width: 900px){
  .nw-home .nwn-menu{ background:var(--head-fill); border-bottom-color:var(--head-line); }
  .nw-home .nwn-drop-menu{ background:rgba(255,255,255,.55); }
}

/* Hero-Bausteine auf der getoenten Flaeche */
body.nw-home .nw-hero-sub,
body.nw-home .subhero-in > p{ color:var(--head-soft); }
/* Auf der getoenten Flaeche ist ein transparenter Button mit heller Linie
   praktisch unsichtbar (1,1:1 gegen den Untergrund). Dort weiss fuellen -
   betrifft Hero, Seitenkopf und den kompakten Kopf der internen Bereiche. */
body.nw-home .subhero .btn-line,
body.nw-home .nw-hero .btn-line,
body.nw-home .nw-head .btn-line{ background:#fff !important; border-color:#fff !important; }
body.nw-home .subhero .btn-line:hover,
body.nw-home .nw-hero .btn-line:hover,
body.nw-home .nw-head .btn-line:hover{ background:var(--tint) !important; border-color:var(--tint) !important; }
body.nw-home .btn-off{ background:rgba(255,255,255,.55) !important; color:var(--head-soft) !important; }

/* ============================================================
   Partnerkarte
   Gleiches Kartenmuster wie .mcard/.cell-fact, zusaetzlich Bild,
   Kategorie-Pille und eine Zeile mit Profil-Links.
   ============================================================ */
.pcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-panel);
  padding:2rem; text-align:left; display:flex; flex-direction:column;
}
.pcard-img{ width:100%; height:190px; object-fit:cover; border-radius:16px; display:block; margin-bottom:1.3rem; }
/* image_shape = circle aus der Partnerverwaltung */
.pcard-img.is-circle{ width:96px; height:96px; border-radius:50%; }
.pcard-ic{ display:block; line-height:1; font-size:1.3rem; color:var(--accent); margin-bottom:.9rem; }
.pcard h3{ font-size:1.12rem; margin:0; }
.pcard-cat{
  /* align-self, sonst dehnt die Flex-Spalte die Pille auf volle Kartenbreite */
  display:inline-block; align-self:flex-start; margin-top:.6rem;
  background:var(--tint); color:var(--accent-deep); border:1px solid var(--line);
  border-radius:999px; padding:.32rem .8rem;
  font-family:var(--font-d); font-weight:600; font-size:.78rem;
}
.pcard-bio{ margin:1.1rem 0 0; color:var(--ink-soft); font-size:.96rem; line-height:1.6; }
.pcard-links{
  display:flex; flex-wrap:wrap; gap:.55rem;
  margin-top:auto; padding-top:1.3rem; border-top:1px solid var(--line);
}
.pcard-bio + .pcard-links{ margin-top:1.4rem; }
.pcard-links a{
  width:40px; height:40px; border-radius:14px; text-decoration:none;
  background:#fff; border:1px solid var(--line); color:var(--accent);
  display:grid; place-items:center; font-size:1rem;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.pcard-links a:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* ============================================================
   Tool-Seiten: Panel, Auswahl-Pillen, Hinweisblock
   Ein Werkzeug (Atemkreis, Formular, Skala) liegt in einem Panel
   im Kartenmuster der Startseite. Die Auswahl darueber nutzt
   dieselbe Pillenform wie die Buttons.
   ============================================================ */
.nw-tool{ padding-block:0 clamp(5rem, 10vw, 8rem); }
.nw-tool h2{ font-size:clamp(2rem, 3.8vw, 3rem); max-width:20ch; }
.nw-tool > .wrap > p{ margin-top:1.2rem; color:var(--ink-soft); max-width:60ch; }
.tool-panel{
  margin-top:2.5rem; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-panel); padding:clamp(1.6rem, 4vw, 2.6rem);
}
.tool-panel > h3:first-child{ margin-top:0; }
.tool-panel h3{ font-size:1.12rem; margin:0 0 .35rem; }
.tool-panel .tool-hint{ color:var(--ink-soft); font-size:.96rem; margin:0 0 1.4rem; }

/* Auswahl-Pillen (Atemtechnik, Portionsgroesse ...) */
.pill-row{ display:flex; flex-wrap:wrap; gap:.6rem; }
.pill-row button, .pill-row .pill{
  font-family:var(--font-d); font-weight:600; font-size:.93rem; line-height:1.2;
  padding:.6rem 1.25rem; border-radius:999px; cursor:pointer;
  background:#fff; border:1.5px solid var(--line); color:var(--ink);
  transition:border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.pill-row button:hover, .pill-row .pill:hover{ border-color:var(--brand); }
.pill-row button.active, .pill-row .pill.is-on{
  background:var(--accent); border-color:var(--accent); color:#fff;
}

/* Getoenter Hinweisblock innerhalb eines Panels */
.tool-note{
  background:var(--tint); border-radius:16px; padding:1.2rem 1.4rem; margin-top:1.4rem;
}
.tool-note h3{ font-size:1.02rem; display:flex; align-items:center; gap:.55rem; margin:0; }
.tool-note h3 i{ color:var(--accent); font-size:.88em; }
.tool-note p{ margin:.5rem 0 0; color:var(--ink-soft); font-size:.95rem; line-height:1.6; }

/* Atemkreis - die einzige erlaubte Deko-Animation ausserhalb der Startseite */
.breath-stage{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:420px; margin-top:2rem;
}
.breath-circle{
  width:200px; height:200px; border-radius:50%;
  background:linear-gradient(135deg, #5eaaa8 0%, #4a8886 100%);
  display:grid; place-items:center; color:#fff;
}
.breath-circle .breath-phase{ font-family:var(--font-d); font-weight:700; font-size:1.5rem; letter-spacing:-0.02em; }
.breath-circle .breath-count{ font-family:var(--font-d); font-weight:700; font-size:3rem; line-height:1; letter-spacing:-0.03em; }
.breath-say{ margin-top:2rem; font-family:var(--font-d); font-weight:600; font-size:1.15rem; text-align:center; min-height:1.6em; }
.breath-cycles{ margin-top:.6rem; color:var(--ink-soft); font-size:.93rem; text-align:center; min-height:1.4em; }
.tool-actions{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }
@media (max-width: 560px){
  .breath-stage{ min-height:360px; }
}

/* ============================================================
   Tool-Formulare: Skala, Felder, Checkliste, Diagramm
   ============================================================ */
/* Stimmungsskala und aehnliche Auswahlreihen */
.scale-row{ display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); }
.scale-opt{
  padding:1.2rem .8rem; text-align:center; cursor:pointer;
  background:var(--bg); border:1.5px solid var(--line); border-radius:16px;
  transition:border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.scale-opt:hover{ border-color:var(--brand); }
.scale-opt i{ font-size:1.6rem; color:var(--accent); display:block; }
.scale-opt .mood-label{ margin-top:.55rem; font-size:.9rem; font-weight:600; }
.scale-opt.selected{ background:var(--accent); border-color:var(--accent); color:#fff; }
.scale-opt.selected i{ color:#fff; }

/* Feldraster innerhalb eines Panels */
.field-grid{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.tool-panel .field label{ display:block; font-weight:600; font-size:.95rem; margin-bottom:.45rem; }
.tool-panel .field label i{ color:var(--accent); font-size:.9em; margin-right:.35rem; }
.tool-panel .field input[type=text], .tool-panel .field input[type=number],
.tool-panel .field input[type=time], .tool-panel .field select, .tool-panel .field textarea{
  width:100%; padding:.85rem 1.1rem; font:inherit; font-size:.97rem; background:var(--bg);
}
.tool-panel .field textarea{ min-height:130px; resize:vertical; }
.tool-panel .field + .field{ margin-top:1.1rem; }

/* Checkliste */
.tool-check{ display:grid; gap:.6rem; }
.tool-check .checklist-item{
  display:flex; align-items:center; gap:.85rem; cursor:pointer;
  padding:.9rem 1.1rem; background:var(--bg);
  border:1.5px solid var(--line); border-radius:16px;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.tool-check .checklist-item:hover{ border-color:var(--brand); }
.tool-check .checklist-item.checked{ border-color:var(--accent); background:var(--tint); }
.tool-check .checklist-item input{ width:19px; height:19px; accent-color:var(--accent); flex-shrink:0; cursor:pointer; }
.tool-check .checklist-item label{ font-size:.97rem; font-weight:500; cursor:pointer; }
.tool-check .checklist-item label i{ color:var(--accent); width:20px; text-align:center; margin-right:.4rem; }

/* Diagramm-Panel */
.chart-panel{ margin-top:1.1rem; }
.chart-panel canvas{ max-height:320px; }

/* Meldung nach dem Speichern */
#alertBox{
  display:none; position:fixed; top:96px; right:clamp(1rem, 3vw, 2rem); z-index:1200;
  max-width:min(420px, calc(100vw - 2rem));
  padding:.9rem 1.3rem; border-radius:16px;
  font-family:var(--font-d); font-weight:600; font-size:.95rem;
  background:var(--ok-bg); color:var(--ok); border:1px solid #cfe6da;
  box-shadow:0 20px 50px -20px rgba(15,47,46,.3);
}
#alertBox.is-err{ background:var(--err-bg); color:var(--err); border-color:#eed3d1; }

/* ============================================================
   Mentale Energie: 1-10-Skala und Verlaufsliste
   Die Skala wird per JavaScript erzeugt (.energy-btn), die
   Verlaufszeilen ebenfalls (.history-item).
   ============================================================ */
.energy-scale{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem; }
.energy-btn{
  width:52px; height:52px; border-radius:16px; cursor:pointer;
  font-family:var(--font-d); font-weight:700; font-size:1.05rem;
  background:var(--bg); border:1.5px solid var(--line); color:var(--ink);
  transition:border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.energy-btn:hover{ border-color:var(--brand); }
.energy-btn.selected{ background:var(--accent); border-color:var(--accent); color:#fff; }
.energy-scale-legend{
  display:flex; justify-content:space-between; gap:1rem;
  margin-top:.7rem; color:var(--ink-soft); font-size:.87rem;
}

.history-list{ margin-top:1.1rem; display:grid; gap:.6rem; }
.history-item{
  display:grid; grid-template-columns:minmax(120px, auto) auto 1fr; align-items:center;
  gap:1rem 1.2rem; padding:1rem 1.2rem;
  background:var(--bg); border:1px solid var(--line); border-radius:16px;
}
.history-date{ font-family:var(--font-d); font-weight:600; font-size:.92rem; }
.history-energy{ display:flex; gap:4px; }
.energy-dot{ width:8px; height:8px; border-radius:50%; background:var(--tint-deep); }
.energy-dot.filled{ background:var(--accent); }
.history-note{ color:var(--ink-soft); font-size:.93rem; }
.history-empty{ color:var(--ink-soft); font-size:.95rem; padding:1.6rem 0; }
@media (max-width: 640px){
  .history-item{ grid-template-columns:1fr; gap:.5rem; }
}

/* Ernaehrung: Verlaufskarten (per JavaScript erzeugt) */
.nlog{
  padding:1.3rem 1.4rem; background:var(--bg);
  border:1px solid var(--line); border-radius:16px;
}
.nlog + .nlog{ margin-top:.6rem; }
.nlog strong.nlog-date{ font-family:var(--font-d); font-weight:600; font-size:.95rem; display:block; }
.nlog-facts{ display:flex; gap:1.4rem; flex-wrap:wrap; margin-top:.7rem; color:var(--ink-soft); font-size:.93rem; }
.nlog-facts i{ color:var(--accent); margin-right:.35rem; }
.nlog-facts b{ color:var(--ink); font-weight:600; }
.nlog-note{ margin-top:.9rem; padding:.8rem 1rem; background:var(--tint); border-radius:12px; color:var(--ink-soft); font-size:.93rem; }
.nlog-note i{ color:var(--accent); margin-right:.4rem; }

/* ============================================================
   Tagesaffirmation: Zitatkarte
   ============================================================ */
.aff-panel{ text-align:center; }
.aff-icon{ font-size:1.6rem; color:var(--accent); line-height:1; }
.aff-text{
  margin-top:1.4rem; font-family:var(--font-d); font-weight:600;
  font-size:clamp(1.4rem, 2.8vw, 2rem); line-height:1.35; letter-spacing:-0.02em;
  color:var(--ink); max-width:26ch; margin-inline:auto;
}
.aff-text .quote-open, .aff-text .quote-close{ color:var(--brand); }
.aff-author{ margin-top:1.1rem; color:var(--ink-soft); font-size:1rem; }
.aff-author:empty{ display:none; }
.aff-cat{
  display:inline-block; margin-top:1.2rem;
  background:var(--tint); color:var(--accent-deep); border:1px solid var(--line);
  border-radius:999px; padding:.32rem .9rem;
  font-family:var(--font-d); font-weight:600; font-size:.78rem;
}
.aff-cat:empty{ display:none; }
.aff-loading{ text-align:center; color:var(--ink-soft); padding:2.5rem 0; }
.aff-loading i{ color:var(--accent); font-size:1.4rem; }
.aff-loading p{ margin-top:.8rem; font-size:.95rem; }

/* Nur fuer Screenreader */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ============================================================
   Mobiler Durchgang
   Auf schmalen Schirmen faellt jedes clamp() auf seinen Minimalwert
   zurueck. Dadurch stehen Sektionen kaum weiter auseinander als die
   Bloecke in ihnen (gemessen 85px gegen 35px, am Desktop 135px gegen
   40px) und die Seite liest sich als eine einzige Textspalte.
   Hier den Rhythmus wiederherstellen und Innenabstaende kuerzen,
   damit der Text mehr von der Breite bekommt.
   ============================================================ */
@media (max-width: 700px){
  /* Abstand zwischen Sektionen wieder deutlich groesser als innerhalb */
  .nw-flow, .nw-roster, .nw-tool, .how, .bento, .honest, .nw-tools, .faq{
    padding-bottom:6.5rem;
  }
  .nw-flow.is-lead{ padding-top:2.8rem; }
  .nw-newsletter{ padding-block:2.5rem 4rem !important; }

  /* Ueberschrift, Einleitung und Inhalt gehoeren zusammen: enger stellen */
  .nw-roster > .wrap > p, .nw-tool > .wrap > p, .bento > .wrap > p,
  .faq > .wrap > p, .honest > .wrap > p, .how-left p{ margin-top:.8rem; }
  .roster-grid, .tools-panel, .faq-list, .honest-grid, .tool-panel{ margin-top:1.8rem; }

  /* Karten: 2rem Innenabstand kosten auf 390px ein Fuenftel der Breite */
  .mcard, .pcard, .cell{ padding:1.5rem; }
  .tool-panel{ padding:1.4rem; }
  .honest-col{ padding:1.5rem; }

  /* Nummerierte Schritte: Zahl ueber den Text, damit der Absatz die volle
     Breite bekommt statt einer eingerueckten Schmalspalte */
  .hstep{ grid-template-columns:1fr; gap:.4rem; padding-block:1.8rem; }
  .hstep-num{ font-size:2.1rem; }
  .hstep h3{ font-size:1.15rem; }

  /* Hero und Seitenkopf etwas kompakter */
  .nw-hero-in{ padding-block:2.5rem 3rem; }
  .nw-hero h1{ font-size:2.35rem; }
  .nw-hero-sub{ margin-top:1.1rem; }
  .nw-hero-cta{ margin-top:1.8rem; }
  .subhero-in{ padding-block:2.5rem 1.8rem; }

  /* Grosse Zwischenueberschriften auf Mobil nicht zu wuchtig */
  .nw-roster h2, .nw-tool h2, .bento h2, .honest h2, .nw-tools h2,
  .faq h2, .how h2{ font-size:1.85rem; }

  /* Abschlussblock */
  .join-in{ padding-block:2.8rem !important; }
  .join h2{ font-size:2rem; }
}

@media (max-width: 560px){
  /* Fuenf Optionen in zwei Spalten lassen eine allein in der letzten Zeile
     stehen. Untereinander mit Icon links liest sich das besser und trifft
     sich mit der Checkliste darunter. */
  .scale-row{ grid-template-columns:1fr; gap:.5rem; }
  .scale-opt{
    display:flex; align-items:center; gap:.9rem;
    text-align:left; padding:.85rem 1.1rem;
  }
  .scale-opt i{ font-size:1.25rem; width:1.6rem; text-align:center; flex-shrink:0; }
  .scale-opt .mood-label{ margin-top:0; }

  /* Notfallnummern: bei .95rem bricht die laengste Nummer in die zweite
     Zeile und das Icon steht dann mittig daneben. */
  .crisis-tels a{ font-size:.88rem; padding:.45rem .9rem; }
}

@media (max-width: 420px){
  /* Der Seitenrand von .wrap ist hier bereits am Minimum - Karten duerfen
     den letzten Rest nicht auch noch verbrauchen. */
  .mcard, .pcard, .cell, .tool-panel{ padding:1.25rem; }
  .nw-hero h1{ font-size:2.1rem; }
}

/* ============================================================
   Nummerierte Schritte auf schmalen Schirmen
   Die grosse Konturziffer der Startseite braucht Platz daneben und
   wirkt auf dem Handy verloren. Dort stattdessen eine kleine gefuellte
   Ziffer direkt vor der Ueberschrift: Der Absatz behaelt die volle
   Breite, die Reihenfolge bleibt trotzdem sofort lesbar.
   ============================================================ */
@media (max-width: 700px){
  .hstep{ display:block; padding-block:1.5rem; }
  .hstep-num{
    float:left; margin:.15rem .7rem .2rem 0;
    width:28px; height:28px; border-radius:50%;
    display:grid; place-items:center;
    background:var(--tint-deep); color:var(--accent-deep);
    -webkit-text-stroke:0; font-size:.85rem; line-height:1;
  }
  .hstep h3{ font-size:1.12rem; margin-bottom:.35rem; }
  .hstep p{ clear:both; }
}

/* ============================================================
   Ankuendigungen im Helfer-Panel
   ============================================================ */
.nw-news{ margin-bottom:2rem; }
.nw-news-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:1rem;
}
.nw-news-head h2{ font-size:1.3rem; margin:0; }
.nw-news-head h2 i{ color:var(--brand); margin-right:.4rem; }
.nw-news-item{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-panel);
  padding:1.5rem 1.6rem; margin-bottom:.9rem;
}
/* Wichtiges bekommt eine Kante, keine Signalfarbe im Hintergrund -
   sonst faellt der Text darauf schlechter zu lesen aus. */
.nw-news-item.is-high{ border-left:4px solid var(--err); }
.nw-news-item h3{ font-size:1.1rem; margin:0 0 .6rem; }
.nw-news-item h3 i{ color:var(--brand); margin-right:.35rem; }
.nw-news-item.is-high h3 i{ color:var(--err); }
.nw-news-item p{ margin:0 0 .8rem; color:var(--ink); line-height:1.65; }
.nw-news-meta{ font-size:.85rem; color:var(--ink-soft); }

/* ============================================================
   Verfuegbarkeits-Schalter im Helfer-Panel
   Steuert, was Hilfesuchenden am Chat-Start angezeigt wird.
   ============================================================ */
.nw-avail{
  display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-panel);
  padding:1.3rem 1.5rem; margin-bottom:1.5rem;
}
.nw-avail-dot{
  width:14px; height:14px; border-radius:50%; flex-shrink:0;
  background:var(--tint-deep); box-shadow:0 0 0 4px var(--tint);
}
.nw-avail[data-state="on"]{ border-color:var(--brand); }
.nw-avail[data-state="on"] .nw-avail-dot{ background:var(--ok); box-shadow:0 0 0 4px var(--ok-bg); }
.nw-avail-text{ flex:1; min-width:240px; }
.nw-avail-text strong{ font-family:var(--font-d); font-weight:600; font-size:1.05rem; display:block; color:var(--ink); }
.nw-avail-text p{ margin:.3rem 0 0; color:var(--ink-soft); font-size:.93rem; line-height:1.55; }
@media (max-width: 640px){
  .nw-avail{ padding:1.1rem 1.2rem; }
  .nw-avail .btn{ width:100%; }
}

/* ============================================================
   Anwesenheits-Rueckfrage (Helfer)
   ============================================================ */
.nw-presence{
  position:fixed; right:clamp(1rem, 3vw, 2rem); bottom:clamp(1rem, 3vw, 2rem); z-index:1300;
  max-width:min(380px, calc(100vw - 2rem));
  background:#fff; border:1px solid var(--line); border-radius:var(--r-panel);
  padding:1.3rem 1.4rem;
  box-shadow:0 24px 60px -24px rgba(15,47,46,.4);
}
.nw-presence strong{ font-family:var(--font-d); font-weight:600; font-size:1.05rem; display:block; color:var(--ink); }
.nw-presence p{ margin:.45rem 0 0; color:var(--ink-soft); font-size:.93rem; line-height:1.55; }
.nw-presence-row{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.1rem; }
.nw-presence .btn{ padding:.6rem 1.2rem; font-size:.92rem; }
.nw-presence-off{ border-color:var(--tint-deep); }
.nw-presence-off .btn{ margin-top:1.1rem; }

/* ============================================================
   Auswahlfelder
   Der native Pfeil passt nicht zum Formsystem. Eigener Chevron als
   Data-URI, damit dafuer kein externer Request entsteht.
   ============================================================ */
select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23526b68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1.05rem center;
  padding-right:2.8rem;
  cursor:pointer;
}
select::-ms-expand{ display:none; }

/* ============================================================
   Vorlauf hinter dem Notfallband
   Die Sektionen setzen ihren Abstand konsequent nach unten. Direkt
   hinter dem Notfallband fehlt dadurch der Vorlauf und die naechste
   Ueberschrift klebt am Band (gemessen 16px gegen sonst 133-176px).
   ============================================================ */
.crisis + .honest, .crisis + .how, .crisis + .bento, .crisis + .nw-tools,
.crisis + .faq, .crisis + .nw-tool, .crisis + .nw-roster{
  padding-top:clamp(4.5rem, 9vw, 7rem);
}

/* ============================================================
   Interne Bereiche: Statuslisten (Bewerbungen, Meldungen)
   ============================================================ */
.nw-list{ display:grid; gap:.9rem; margin-top:1.6rem; }
.nw-item{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-panel);
  padding:1.4rem 1.5rem;
}
.nw-item-head{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding-bottom:.9rem; border-bottom:1px solid var(--line);
}
.nw-item-date{ color:var(--ink-soft); font-size:.9rem; display:flex; align-items:center; gap:.45rem; }
.nw-item-date i{ color:var(--accent); font-size:.85em; }
.nw-state{
  margin-left:auto; display:inline-flex; align-items:center; gap:.45rem;
  border-radius:999px; padding:.32rem .9rem;
  font-family:var(--font-d); font-weight:600; font-size:.78rem;
  background:var(--tint); color:var(--accent-deep); border:1px solid var(--line);
}
.nw-state i{ font-size:.9em; }
.nw-state.is-wait{ background:var(--tint); color:var(--accent-deep); }
.nw-state.is-ok{ background:var(--ok-bg); color:var(--ok); border-color:#cfe6da; }
.nw-state.is-no{ background:var(--err-bg); color:var(--err); border-color:#eed3d1; }
.nw-item-body{ margin-top:.9rem; color:var(--ink-soft); font-size:.95rem; line-height:1.6; }
.nw-item-body p + p{ margin-top:.5rem; }
.nw-item-body strong{ color:var(--ink); font-weight:600; }
.nw-note{
  margin-top:1rem; background:var(--tint); border-radius:16px; padding:1rem 1.2rem;
}
.nw-note strong{ display:flex; align-items:center; gap:.5rem; font-family:var(--font-d);
  font-weight:600; font-size:.95rem; color:var(--ink); }
.nw-note strong i{ color:var(--accent); font-size:.88em; }
.nw-note p{ margin:.45rem 0 0; color:var(--ink-soft); font-size:.94rem; line-height:1.6; }
.nw-empty{
  margin-top:1.6rem; background:var(--tint); border-radius:var(--r-panel);
  padding:clamp(1.6rem, 4vw, 2.4rem); display:flex; gap:1rem; align-items:flex-start;
}
.nw-empty i{ color:var(--accent); font-size:1.3rem; margin-top:.15rem; }
.nw-empty p{ margin:0; color:var(--ink-soft); }
@media (max-width: 560px){
  .nw-item{ padding:1.2rem; }
  .nw-state{ margin-left:0; }
}

/* ============================================================
   Teamchat
   Eigener Baustein: die Nachrichtenflaeche muss scrollen und das
   Eingabefeld unten stehen bleiben.
   ============================================================ */
.tchat{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-panel);
  display:flex; flex-direction:column; overflow:hidden;
  height:min(68vh, 640px); margin-top:1.8rem;
}
.tchat-body{ flex:1; overflow-y:auto; padding:1.4rem clamp(1rem, 3vw, 1.6rem); display:flex; flex-direction:column; gap:1rem; }
.tchat-foot{ border-top:1px solid var(--line); padding:.9rem clamp(1rem, 3vw, 1.4rem); background:var(--bg); }
.tchat-row{ display:flex; gap:.7rem; align-items:flex-end; }
.tchat-row textarea{
  flex:1; min-height:46px; max-height:140px; resize:none;
  padding:.75rem 1.1rem; font:inherit; font-size:.97rem;
  border:1.5px solid var(--line); border-radius:16px; background:#fff; color:var(--ink);
}
.tchat-row .btn{ flex-shrink:0; padding:.75rem 1.4rem; }

/* Nachricht */
.tmsg{ display:flex; gap:.8rem; align-items:flex-start; }
.tmsg-av{
  width:38px; height:38px; border-radius:50%; flex-shrink:0; object-fit:cover;
  background:var(--tint); border:1px solid var(--line);
  display:grid; place-items:center; color:var(--accent);
  font-family:var(--font-d); font-weight:700; font-size:.9rem;
}
.tmsg-main{ flex:1; min-width:0; }
.tmsg-head{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; }
.tmsg-name{ font-family:var(--font-d); font-weight:600; font-size:.95rem; color:var(--ink); }
.tmsg-role{
  font-family:var(--font-d); font-weight:600; font-size:.7rem;
  border-radius:999px; padding:.15rem .6rem;
  background:var(--tint); color:var(--accent-deep); border:1px solid var(--line);
}
.tmsg-time{ color:var(--ink-soft); font-size:.8rem; margin-left:auto; }
.tmsg-text{ margin-top:.25rem; color:var(--ink); font-size:.97rem; line-height:1.6; overflow-wrap:anywhere; }
.tmsg-del{
  background:none; border:none; cursor:pointer; padding:.2rem .4rem;
  color:var(--ink-soft); font-size:.8rem; border-radius:8px;
}
.tmsg-del:hover{ color:var(--err); background:var(--err-bg); }
.tmsg.is-own .tmsg-av{ background:var(--accent); color:#fff; border-color:var(--accent); }
.tchat-empty{ margin:auto; text-align:center; color:var(--ink-soft); font-size:.95rem; }
.tchat-empty i{ color:var(--accent); font-size:1.6rem; display:block; margin-bottom:.6rem; }
@media (max-width: 560px){
  .tchat{ height:min(72vh, 560px); }
  .tchat-row .btn span{ display:none; }
}

/* ============================================================
   Interne Bereiche: Werkbank-Layout
   Die Startseite lebt von grossen Ueberschriften und viel Luft -
   das ist fuer Marketing richtig und fuer ein Arbeitswerkzeug falsch.
   Hier gilt: kompakter Kopf, Inhalt sofort sichtbar, dichtere
   Abstaende. Farben, Schriften und Radien bleiben identisch.
   ============================================================ */
/* Die internen Seiten folgen dem Rhythmus der Startseite, nicht einem
   eigenen engeren Raster. Abstaende, Kartenmasse und Ueberschriftgroessen
   sind dieselben. */
.nw-work{ padding-block:0 clamp(5rem, 10vw, 8rem); }

/* Kompakter Seitenkopf: Titel, Zeile Kontext, Aktionen rechts */
.nw-head{
  display:flex; align-items:flex-start; gap:1.4rem; flex-wrap:wrap;
  padding-block:clamp(3rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
}
.nw-head-main{ flex:1; min-width:min(100%, 320px); }
/* Wie .subhero h1 der Unterseiten */
.nw-head h1{
  font-size:clamp(2.1rem, 4.4vw, 3.2rem); letter-spacing:-0.025em; line-height:1.1;
  display:flex; align-items:center; gap:.7rem; margin:0; flex-wrap:wrap;
}
.nw-head h1 em{ font-style:normal; color:var(--accent); }
.nw-head h1 i{ color:var(--accent); font-size:.66em; }
.nw-head p{ margin:1.1rem 0 0; color:var(--head-soft); font-size:1.08rem; max-width:52ch; }
.nw-head-actions{ display:flex; gap:.9rem; flex-wrap:wrap; align-items:center; }
.nw-head-actions .btn{ padding:.9rem 1.8rem; font-size:1rem; }

/* Kennzahlen-Reihe unter dem Kopf */
.nw-stats{ display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); margin-bottom:1.6rem; }
.nw-stat{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:1rem 1.2rem; }
.nw-stat b{ display:block; font-family:var(--font-d); font-weight:700; font-size:1.6rem;
  line-height:1.1; letter-spacing:-0.02em; color:var(--accent-deep); }
.nw-stat span{ display:block; margin-top:.2rem; color:var(--ink-soft); font-size:.86rem; }

/* Panel im Arbeitsbereich - flacher als .tool-panel der Toolseiten */
.nw-panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-panel);
  padding:2rem;
}
.nw-panel + .nw-panel{ margin-top:1rem; }
.nw-panel > h2{
  font-size:1.12rem; display:flex; align-items:center; gap:.55rem; margin:0 0 .3rem;
}
.nw-panel > h2 i{ color:var(--accent); font-size:.88em; }
.nw-panel > .hint{ margin:0 0 1.1rem; color:var(--ink-soft); font-size:.92rem; }
.nw-panel > h2:only-child, .nw-panel > .hint:last-child{ margin-bottom:0; }

/* Zweispaltig, wo es Sinn ergibt */
.nw-split{ display:grid; gap:1rem; grid-template-columns:1.4fr .9fr; align-items:start; }
@media (max-width: 940px){ .nw-split{ grid-template-columns:1fr; } }

/* Im Arbeitsbereich brauchen Listen und Formulare weniger Vorlauf */
.nw-work .nw-list{ margin-top:1rem; }
.nw-work .nw-empty{ margin-top:1rem; }
.nw-work .field:first-child{ margin-top:0; }

/* ============================================================
   Reiter (Helfer-Ressourcen)
   Pillenform wie die Auswahl auf den Tool-Seiten.
   ============================================================ */
.nw-tabs{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.4rem; }
.nw-tabs .tab-btn{
  font-family:var(--font-d); font-weight:600; font-size:.93rem; line-height:1.2;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1.25rem; border-radius:999px; cursor:pointer;
  background:#fff; border:1.5px solid var(--line); color:var(--ink);
  transition:border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.nw-tabs .tab-btn i{ color:var(--accent); font-size:.9em; transition:color .18s var(--ease); }
.nw-tabs .tab-btn:hover{ border-color:var(--brand); }
.nw-tabs .tab-btn.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.nw-tabs .tab-btn.active i{ color:#fff; }

/* Wissensblöcke: Titel, Text, Listen - ohne farbige Kanten */
.nw-doc{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-panel);
  padding:clamp(1.3rem, 3vw, 1.8rem);
}
.nw-doc + .nw-doc{ margin-top:1rem; }
.nw-doc > h2{
  font-size:1.15rem; display:flex; align-items:center; gap:.6rem; margin:0 0 1rem;
}
.nw-doc > h2 i{ color:var(--accent); font-size:.85em; }
.nw-doc h3{ font-size:1rem; margin:1.4rem 0 .5rem; }
.nw-doc p, .nw-doc li{ color:var(--ink-soft); font-size:.96rem; line-height:1.65; }
.nw-doc p + p{ margin-top:.7rem; }
.nw-doc ul, .nw-doc ol{ margin:.7rem 0 0; padding-left:1.3rem; display:grid; gap:.45rem; }
.nw-doc strong{ color:var(--ink); font-weight:600; }
.nw-doc .nw-note{ margin-top:1.1rem; }

/* Statuszeile "Training abgeschlossen" */
.nw-done{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--ok-bg); color:var(--ok); border:1px solid #cfe6da;
  border-radius:999px; padding:.55rem 1.2rem;
  font-family:var(--font-d); font-weight:600; font-size:.92rem;
}

/* Hinweisblöcke in Wissensseiten: neutral, warnend, kritisch */
.nw-box{ background:var(--tint); border-radius:16px; padding:1.2rem 1.4rem; margin-top:1rem; }
.nw-box > *:first-child{ margin-top:0; }
.nw-box > *:last-child{ margin-bottom:0; }
.nw-box.is-ok{ background:var(--ok-bg); }
.nw-box.is-warn{ background:#fdf6ec; }
.nw-box.is-crit{ background:var(--err-bg); }
.nw-box h3, .nw-box h4{ font-size:1rem; margin:0 0 .5rem; display:flex; align-items:center; gap:.5rem; }
.nw-box.is-ok h3, .nw-box.is-ok h4{ color:var(--ok); }
.nw-box.is-crit h3, .nw-box.is-crit h4{ color:var(--err); }
.nw-box ul, .nw-box ol{ margin:.6rem 0 0; padding-left:1.2rem; display:grid; gap:.4rem; }
.nw-box li{ color:var(--ink-soft); font-size:.95rem; line-height:1.6; }
/* Listenpunkte in Wissensbloecken */
.nw-li{
  padding:.7rem .9rem; margin-bottom:.5rem;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  color:var(--ink-soft); font-size:.95rem; line-height:1.55;
}
.nw-li:last-child{ margin-bottom:0; }
.nw-li i{ color:var(--accent); margin-right:.4rem; }
.nw-box .nw-li{ background:rgba(255,255,255,.75); border-color:transparent; }
/* Listen aus Wissensbloecken tragen ihre Aufzaehlungszeichen nicht selbst */
ul:has(> .nw-li){ list-style:none; padding-left:0; margin:0; }

/* Rhythmus in Wissensbloecken: eine Regel statt Inline-Abstaenden.
   Vorher standen Warnbox und erste Zeile ohne jede Luecke aufeinander. */
.nw-doc > * + *{ margin-top:1.1rem !important; }
.nw-doc > h2 + *{ margin-top:0 !important; }
.nw-doc .nw-box{ margin-top:0; }
.nw-doc ul{ margin:0; display:grid; gap:.55rem; }
.nw-doc ul + *, .nw-doc .nw-box + *{ margin-top:1.1rem !important; }
.nw-doc h3, .nw-doc h4{ margin-top:1.6rem; margin-bottom:.5rem; }
.nw-doc > h2 + h3, .nw-doc > h2 + h4{ margin-top:0; }

/* Wissensseiten: wiederkehrende Textbausteine */
.nw-lbl{ display:block; color:var(--ink); font-weight:600; font-size:.97rem; margin-bottom:.35rem; }
.nw-sub{ color:var(--ink-soft); font-size:.95rem; line-height:1.6; margin:0; }
.nw-grid{ display:grid; gap:.8rem; }
.nw-grid-2{ display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
/* Abstaende in Wissensbloecken vereinheitlichen */
/* Ueberschriften in Hinweisbloecken: eine Groesse fuer h3 und h4 */
.nw-box h3, .nw-box h4, .nw-doc .nw-box h3, .nw-doc .nw-box h4{
  font-size:1rem; margin:0 0 .5rem; display:flex; align-items:center; gap:.5rem;
}

/* ============================================================
   Wissensseiten: aufklappbare Abschnitte, Suche, Notfallband
   ============================================================ */
/* Aufklappbare Abschnitte: exakt das FAQ-Muster der Startseite,
   also Trennlinien statt einzelner Kaesten. */
.nw-docs{ margin-top:2.5rem; border-top:1px solid var(--line); }
details.nw-doc{
  padding:0; background:none; border:none; border-radius:0;
  border-bottom:1px solid var(--line);
}
details.nw-doc + details.nw-doc{ margin-top:0; }
details.nw-doc > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:1rem;
  padding:1.35rem .3rem;
  font-family:var(--font-d); font-weight:600; font-size:1.08rem; color:var(--ink);
  transition:color .15s var(--ease);
}
details.nw-doc > summary::-webkit-details-marker{ display:none; }
details.nw-doc > summary:hover{ color:var(--accent); }
details.nw-doc > summary > i:first-child{ color:var(--accent); font-size:.85em; flex-shrink:0; }
details.nw-doc > summary .nw-plus{
  margin-left:auto; flex-shrink:0;
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--tint); color:var(--accent); font-size:.78rem;
  transition:transform .25s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
details.nw-doc > summary:hover .nw-plus{ background:var(--accent); color:#fff; }
details.nw-doc[open] > summary .nw-plus{ transform:rotate(180deg); }
details.nw-doc > summary{ border-radius:14px; }
details.nw-doc > summary:hover{ background:var(--tint); }
details.nw-doc > .nw-doc-in{ padding:0 .3rem 1.8rem; max-width:72ch; }
details.nw-doc > .nw-doc-in > * + *{ margin-top:1.1rem !important; }
details.nw-doc > .nw-doc-in > *:first-child{ margin-top:0 !important; }
/* Abschnitte, die immer offen bleiben (Krisenwissen) */
details.nw-doc.is-pinned > summary{ cursor:default; }
details.nw-doc.is-pinned > summary .nw-plus{ display:none; }

/* Suche */
.nw-search{ margin-top:2.5rem; max-width:520px; }
/* Das Icon sitzt am Eingabefeld, nicht am ganzen Block - sonst rutscht es
   nach unten, sobald der Trefferzaehler darunter erscheint. */
.nw-search-field{ position:relative; }
.nw-search input{
  width:100%; padding:.85rem 1.1rem .85rem 2.9rem; font:inherit; font-size:.98rem;
  border:1.5px solid var(--line); border-radius:999px; background:#fff; color:var(--ink);
}
.nw-search-field > i{
  position:absolute; left:1.15rem; top:50%; transform:translateY(-50%);
  color:var(--ink-soft); font-size:.95rem; pointer-events:none;
}
.nw-search-info{ margin:.7rem 0 0 1.15rem; color:var(--head-soft); font-size:.92rem; font-weight:600; }
/* Deutlich sichtbar: eine blasse Toenung geht im Text unter. */
mark.nw-hit{
  background:#ffe9a8; color:var(--ink); border-radius:4px;
  padding:.05em .25em; box-shadow:0 0 0 1px #f2d383;
}
.nw-nohit{
  background:var(--tint); border-radius:var(--r-panel);
  padding:clamp(1.4rem, 3vw, 2rem); color:var(--ink-soft);
}

/* Notfallband, bleibt beim Scrollen sichtbar */
.nw-sos{
  position:sticky; bottom:1rem; z-index:900;
  margin-top:2.5rem;
  padding:.85rem 1.2rem;
  background:rgba(253,241,239,.94); border:1px solid #f3d8d3; border-radius:var(--r-panel);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 16px 40px -20px rgba(15,47,46,.28);
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
}
.nw-sos strong{ font-family:var(--font-d); font-weight:600; font-size:.92rem; color:#9d332e;
  display:flex; align-items:center; gap:.5rem; }
.nw-sos strong i{ font-size:.9em; }
.nw-sos .crisis-tels{ margin-left:auto; }
.nw-sos .crisis-tels a{ font-size:.86rem; padding:.4rem .85rem; }
@media (max-width: 700px){
  .nw-sos{ padding:.8rem 1rem; bottom:.6rem; }
  .nw-sos strong{ width:100%; }
  .nw-sos .crisis-tels{ margin-left:0; width:100%; }
  .nw-sos .crisis-tels a{ flex:1; justify-content:center; }
}

/* ============================================================
   Leitfaden fuer Helfer (helper-resources)
   Vollstaendig neu. Nutzt die Bausteine der Startseite: Sektions-
   rhythmus, Kartenmasse, FAQ-Muster. Bewusst ohne backdrop-filter
   und ohne klebende Overlays - beides erzeugt eigene Stapelkontexte
   und hat auf dieser Seite die Navigations-Dropdowns gestoert.
   ============================================================ */

/* Kopfzeile mit Fortschritt */
.gd-meter{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1.6rem; }
.gd-bar{
  flex:1; min-width:200px; height:8px; border-radius:999px;
  background:rgba(255,255,255,.55); overflow:hidden;
}
.gd-bar > span{
  display:block; height:100%; width:0; border-radius:999px;
  background:var(--accent); transition:width .5s var(--ease);
}
.gd-meter-txt{ font-family:var(--font-d); font-weight:600; font-size:.92rem; color:var(--head-soft); }

/* Schnellzugriff: Notfall zuerst */
.gd-sos{
  background:#fdf1ef; border:1px solid #f3d8d3; border-radius:var(--r-panel);
  padding:clamp(1.5rem, 3.5vw, 2rem);
}
.gd-sos h2{ font-size:1.2rem; display:flex; align-items:center; gap:.6rem; margin:0; }
.gd-sos h2 i{ color:var(--err); font-size:.85em; }
.gd-sos > p{ margin:.6rem 0 0; color:#5d4a47; font-size:.98rem; max-width:62ch; }
.gd-sos-nums{ display:grid; gap:.7rem; margin-top:1.3rem;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); }
.gd-num{
  display:flex; align-items:center; gap:.9rem; text-decoration:none;
  background:#fff; border:1.5px solid #efc9c2; border-radius:16px; padding:.9rem 1.1rem;
  transition:border-color .18s var(--ease), transform .18s var(--ease);
}
.gd-num:hover{ border-color:var(--err); transform:translateY(-1px); }
.gd-num i{ color:var(--err); font-size:1.05rem; flex-shrink:0; }
.gd-num b{ display:block; font-family:var(--font-d); font-weight:700; font-size:1.02rem; color:#9d332e; }
.gd-num span{ display:block; color:#5d4a47; font-size:.86rem; margin-top:.1rem; }

/* Suche */
.gd-find{ margin-top:2.5rem; }
.gd-find-box{ position:relative; max-width:560px; }
.gd-find-box > i{
  position:absolute; left:1.2rem; top:50%; transform:translateY(-50%);
  color:var(--ink-soft); pointer-events:none;
}
.gd-find input{
  width:100%; padding:1rem 3rem 1rem 3rem; font:inherit; font-size:1rem;
  border:1.5px solid var(--line); border-radius:999px; background:#fff; color:var(--ink);
}
.gd-find input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.gd-find-clear{
  position:absolute; right:.9rem; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border:none; border-radius:50%; cursor:pointer;
  background:var(--tint); color:var(--accent); display:none; place-items:center;
}
.gd-find-clear.is-on{ display:grid; }
.gd-find-clear:hover{ background:var(--accent); color:#fff; }
.gd-find-note{ margin:.8rem 0 0 1.2rem; font-family:var(--font-d); font-weight:600;
  font-size:.92rem; color:var(--head-soft); }
mark.gd-hit{ background:#ffe9a8; color:var(--ink); border-radius:4px;
  padding:.05em .25em; box-shadow:0 0 0 1px #f2d383; }

/* Kapitelnavigation */
.gd-chapters{ display:grid; gap:1rem; margin-top:2.5rem;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); }
.gd-chapter{
  display:block; text-decoration:none; text-align:left;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-panel);
  padding:1.6rem; cursor:pointer; font:inherit;
  transition:border-color .18s var(--ease), transform .18s var(--ease);
}
.gd-chapter:hover{ border-color:var(--brand); }
.gd-chapter[aria-current="true"]{ border-color:var(--accent); background:var(--tint); }
.gd-chapter i{ font-size:1.3rem; color:var(--accent); display:block; }
.gd-chapter h3{ font-size:1.08rem; margin:.9rem 0 .3rem; }
.gd-chapter p{ color:var(--ink-soft); font-size:.93rem; margin:0; line-height:1.55; }
/* Kein Flex mit gap: in einem Flex-Container wird auch der Textknoten zu
   einem eigenen Element, der gap wirkt dann als Luecke hinter der Zahl. */
.gd-chapter .gd-chapter-meta{
  display:block; margin-top:.9rem;
  font-size:.84rem; color:var(--ink-soft);
}
.gd-chapter .gd-chapter-meta [data-chapter-count]{ font-weight:600; color:var(--ink); }
.gd-chapter-meta .gd-done{ color:var(--ok); }

/* Kapitelinhalt */
.gd-part{ scroll-margin-top:110px; }
.gd-part + .gd-part{ margin-top:clamp(3.5rem, 7vw, 5.5rem); }
.gd-part > h2{ font-size:clamp(1.7rem, 3.2vw, 2.3rem); max-width:20ch; }
.gd-part > p.gd-lead{ margin-top:1rem; color:var(--ink-soft); max-width:62ch; font-size:1.05rem; }

/* Abschnitte im FAQ-Muster der Startseite */
.gd-list{ margin-top:2rem; border-top:1px solid var(--line); }
.gd-item{ border-bottom:1px solid var(--line); }
.gd-item > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:1rem;
  padding:1.35rem .4rem; border-radius:14px;
  font-family:var(--font-d); font-weight:600; font-size:1.08rem; color:var(--ink);
  transition:color .15s var(--ease), background .15s var(--ease);
}
.gd-item > summary::-webkit-details-marker{ display:none; }
.gd-item > summary:hover{ color:var(--accent); background:var(--tint); }
.gd-item > summary > .gd-ic{ color:var(--accent); font-size:.9em; flex-shrink:0; width:1.2em; }
.gd-item > summary > .gd-chev{
  margin-left:auto; flex-shrink:0; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; background:var(--tint); color:var(--accent); font-size:.78rem;
  transition:transform .25s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.gd-item > summary:hover > .gd-chev{ background:var(--accent); color:#fff; }
.gd-item[open] > summary > .gd-chev{ transform:rotate(180deg); }
.gd-body{ padding:.2rem .4rem 1.8rem; max-width:74ch; }
.gd-body > * + *{ margin-top:1.1rem; }
.gd-body p, .gd-body li{ color:var(--ink-soft); font-size:.98rem; line-height:1.7; }
.gd-body strong{ color:var(--ink); font-weight:600; }

/* Nummerierte Schritte im Kapitel */
.gd-steps{ list-style:none; padding:0; margin:0; display:grid; gap:.7rem; }
.gd-steps > li{
  display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:start;
  background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:1rem 1.2rem;
}
.gd-steps > li > b{
  width:26px; height:26px; border-radius:50%; background:var(--tint-deep); color:var(--accent-deep);
  display:grid; place-items:center; font-family:var(--font-d); font-weight:700; font-size:.82rem;
}
.gd-steps h4{ font-size:1rem; margin:0 0 .2rem; }
.gd-steps p{ margin:0; font-size:.95rem; }

/* Ja/Nein-Gegenueberstellung, wie .honest-grid der Startseite */
.gd-two{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width: 780px){ .gd-two{ grid-template-columns:1fr; } }

/* Satzbausteine zum Uebernehmen */
.gd-phrase{
  display:flex; align-items:flex-start; gap:.8rem;
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:.85rem 1rem;
}
.gd-phrase + .gd-phrase{ margin-top:.5rem; }
.gd-phrase q{ flex:1; color:var(--ink); font-size:.97rem; line-height:1.6; font-style:normal; }
.gd-phrase q::before, .gd-phrase q::after{ color:var(--brand); }
.gd-copy{
  flex-shrink:0; width:32px; height:32px; border-radius:10px; cursor:pointer;
  border:1px solid var(--line); background:var(--bg); color:var(--ink-soft); font-size:.82rem;
  display:grid; place-items:center;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.gd-copy:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.gd-copy.is-done{ background:var(--ok-bg); border-color:#cfe6da; color:var(--ok); }

/* Merker "gelesen" */
.gd-read{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  border:1.5px solid var(--line); background:#fff; border-radius:999px;
  padding:.5rem 1.1rem; font-family:var(--font-d); font-weight:600; font-size:.88rem;
  color:var(--ink-soft); transition:all .18s var(--ease);
}
.gd-read:hover{ border-color:var(--brand); }
.gd-read[aria-pressed="true"]{ background:var(--ok-bg); border-color:#cfe6da; color:var(--ok); }

.gd-empty{
  margin-top:2rem; background:var(--tint); border-radius:var(--r-panel);
  padding:clamp(1.6rem, 4vw, 2.4rem); color:var(--ink-soft);
}
@media (prefers-reduced-motion: reduce){
  .gd-chapter, .gd-bar > span, .gd-item > summary > .gd-chev{ transition:none; }
}

/* ============================================================
   Einstellungsseiten (Admin)
   ============================================================ */
.set-group{ margin-top:1.4rem; }
.set-group > h3{ font-size:1.05rem; margin:0 0 .3rem; display:flex; align-items:center; gap:.55rem; }
.set-group > h3 i{ color:var(--accent); font-size:.88em; }
.set-group > .hint{ margin:0 0 1.1rem; color:var(--ink-soft); font-size:.93rem; max-width:68ch; }

/* Schalterzeile */
.set-row{
  display:flex; align-items:flex-start; gap:1rem; cursor:pointer;
  background:var(--bg); border:1.5px solid var(--line); border-radius:16px;
  padding:1.1rem 1.3rem;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.set-row + .set-row{ margin-top:.6rem; }
.set-row:hover{ border-color:var(--brand); }
.set-row:has(input:checked){ border-color:var(--accent); background:var(--tint); }
.set-row input[type=checkbox]{
  width:20px; height:20px; accent-color:var(--accent); flex-shrink:0; cursor:pointer; margin-top:.15rem;
}
.set-row-txt{ flex:1; min-width:0; }
.set-row-txt strong{ display:block; font-family:var(--font-d); font-weight:600; font-size:1rem; color:var(--ink); }
.set-row-txt small{ display:block; margin-top:.25rem; color:var(--ink-soft); font-size:.92rem; line-height:1.55; }

/* Zustandsanzeige oben */
.set-state{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  border-radius:var(--r-panel); padding:1.2rem 1.4rem; margin-bottom:1.6rem;
  background:var(--ok-bg); border:1px solid #cfe6da;
}
.set-state.is-off{ background:var(--err-bg); border-color:#eed3d1; }
.set-state-dot{ width:14px; height:14px; border-radius:50%; background:var(--ok); flex-shrink:0;
  box-shadow:0 0 0 4px rgba(46,116,82,.15); }
.set-state.is-off .set-state-dot{ background:var(--err); box-shadow:0 0 0 4px rgba(179,64,58,.15); }
.set-state-txt{ flex:1; min-width:240px; }
.set-state-txt strong{ display:block; font-family:var(--font-d); font-weight:600; font-size:1.05rem; color:var(--ink); }
.set-state-txt p{ margin:.3rem 0 0; color:var(--ink-soft); font-size:.94rem; }
.set-state-num{ font-family:var(--font-d); font-weight:700; font-size:1.6rem;
  color:var(--accent-deep); letter-spacing:-0.02em; }

.set-time{ display:flex; gap:.8rem; flex-wrap:wrap; align-items:flex-end; }
.set-time .field{ margin-top:0; max-width:160px; }
.set-actions{
  display:flex; gap:.9rem; flex-wrap:wrap; align-items:center;
  margin-top:1.8rem; padding-top:1.4rem; border-top:1px solid var(--line);
}
.set-saved{ color:var(--ok); font-family:var(--font-d); font-weight:600; font-size:.92rem;
  display:inline-flex; align-items:center; gap:.45rem; }

/* ============================================================
   Wartezeit-Auskunft am Chat-Start
   Drei Toene: jemand ist da, niemand aktiv aber erreichbar,
   nachts unwahrscheinlich.
   ============================================================ */
.nw-wait{
  display:flex; align-items:flex-start; gap:1rem; flex-wrap:wrap;
  border-radius:var(--r-panel); padding:1.3rem 1.5rem; margin-bottom:1.6rem;
  background:var(--tint); border:1px solid var(--line);
}
.nw-wait-dot{
  width:12px; height:12px; border-radius:50%; flex-shrink:0; margin-top:.45rem;
  background:var(--ink-soft); box-shadow:0 0 0 4px rgba(82,107,104,.14);
}
.nw-wait.is-good{ background:var(--ok-bg); border-color:#cfe6da; }
.nw-wait.is-good .nw-wait-dot{ background:var(--ok); box-shadow:0 0 0 4px rgba(46,116,82,.16); }
.nw-wait.is-quiet{ background:#fdf6ec; border-color:#f0e0c4; }
.nw-wait.is-quiet .nw-wait-dot{ background:#a06a12; box-shadow:0 0 0 4px rgba(160,106,18,.16); }
.nw-wait-txt{ flex:1; min-width:240px; }
.nw-wait-txt strong{ display:block; font-family:var(--font-d); font-weight:600;
  font-size:1.05rem; color:var(--ink); }
.nw-wait-txt p{ margin:.4rem 0 0; color:var(--ink-soft); font-size:.96rem; line-height:1.6; max-width:62ch; }
.nw-wait-num{ text-align:right; flex-shrink:0; }
.nw-wait-num b{ display:block; font-family:var(--font-d); font-weight:700;
  font-size:1.7rem; line-height:1; letter-spacing:-0.02em; color:var(--accent-deep); }
.nw-wait-num span{ display:block; margin-top:.25rem; color:var(--ink-soft); font-size:.83rem; }
@media (max-width: 560px){
  .nw-wait{ padding:1.1rem 1.2rem; }
  .nw-wait-num{ text-align:left; }
}

/* ============================================================
   Admin: Bereichsnavigation und Listen
   ============================================================ */
.adm-nav{
  display:flex; gap:.5rem; flex-wrap:wrap;
  margin-bottom:2rem; padding-bottom:1.4rem; border-bottom:1px solid var(--head-line);
}
.adm-tab{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  font-family:var(--font-d); font-weight:600; font-size:.92rem;
  padding:.55rem 1.1rem; border-radius:999px;
  background:#fff; border:1.5px solid var(--line); color:var(--ink);
  transition:border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.adm-tab i{ color:var(--accent); font-size:.88em; transition:color .18s var(--ease); }
.adm-tab:hover{ border-color:var(--brand); }
.adm-tab[aria-current="page"]{ background:var(--accent); border-color:var(--accent); color:#fff; }
.adm-tab[aria-current="page"] i{ color:#fff; }

/* Kennzahlen */
.adm-stats{ display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); margin-bottom:2rem; }
.adm-stat{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-panel); padding:1.4rem 1.5rem;
}
.adm-stat b{ display:block; font-family:var(--font-d); font-weight:700; font-size:2rem;
  line-height:1; letter-spacing:-0.03em; color:var(--accent-deep); }
.adm-stat span{ display:block; margin-top:.4rem; color:var(--ink-soft); font-size:.9rem; }
.adm-stat.is-warn b{ color:var(--err); }

/* Bereichskarten (Uebersicht) */
.adm-cards{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); }
.adm-card{
  display:block; text-decoration:none;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-panel); padding:1.6rem;
  transition:border-color .18s var(--ease), transform .18s var(--ease);
}
.adm-card:hover{ border-color:var(--brand); }
.adm-card > i{ font-size:1.3rem; color:var(--accent); display:block; }
.adm-card h3{ font-size:1.08rem; margin:.9rem 0 .3rem; }
.adm-card p{ color:var(--ink-soft); font-size:.93rem; margin:0; line-height:1.55; }
.adm-card .adm-card-num{
  display:inline-block; margin-top:.9rem; border-radius:999px; padding:.22rem .7rem;
  background:var(--tint); color:var(--accent-deep);
  font-family:var(--font-d); font-weight:600; font-size:.8rem;
}
.adm-card .adm-card-num.is-warn{ background:var(--err-bg); color:var(--err); }

/* Datenzeilen statt Tabellen - auf dem Handy lesbar */
.adm-list{ display:grid; gap:.7rem; }
.adm-row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem 1.2rem;
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:1.1rem 1.3rem;
}
.adm-row-av{
  width:42px; height:42px; border-radius:50%; object-fit:cover; flex-shrink:0;
  background:var(--tint); border:1px solid var(--line);
  display:grid; place-items:center; color:var(--accent);
  font-family:var(--font-d); font-weight:700; font-size:.95rem;
}
.adm-row-main{ min-width:0; }
.adm-row-main strong{ display:block; font-family:var(--font-d); font-weight:600; font-size:1rem; color:var(--ink); }
.adm-row-main span{ display:block; margin-top:.2rem; color:var(--ink-soft); font-size:.88rem; }
.adm-row-act{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.adm-row-act .btn{ padding:.45rem 1rem; font-size:.86rem; }
.adm-tagset{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.5rem; }
.adm-chip{
  border-radius:999px; padding:.22rem .7rem; font-size:.78rem;
  font-family:var(--font-d); font-weight:600;
  background:var(--tint); color:var(--accent-deep); border:1px solid var(--line);
}
.adm-chip.is-ok{ background:var(--ok-bg); color:var(--ok); border-color:#cfe6da; }
.adm-chip.is-no{ background:var(--err-bg); color:var(--err); border-color:#eed3d1; }
.adm-chip.is-wait{ background:#fdf6ec; color:#a06a12; border-color:#f0e0c4; }
@media (max-width: 640px){
  .adm-row{ grid-template-columns:auto 1fr; }
  .adm-row-act{ grid-column:1 / -1; }
  .adm-row-act .btn{ flex:1; justify-content:center; }
}

/* Filterleiste */
.adm-filter{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-bottom:1.2rem; }
.adm-filter .adm-search{ position:relative; flex:1; min-width:220px; max-width:420px; }
.adm-filter .adm-search > i{
  position:absolute; left:1.1rem; top:50%; transform:translateY(-50%);
  color:var(--ink-soft); font-size:.9rem; pointer-events:none;
}
.adm-filter .adm-search input{
  width:100%; padding:.7rem 1.1rem .7rem 2.7rem; font:inherit; font-size:.95rem;
  border:1.5px solid var(--line); border-radius:999px; background:#fff; color:var(--ink);
}
.adm-pill{
  border:1.5px solid var(--line); background:#fff; color:var(--ink);
  border-radius:999px; padding:.55rem 1.1rem; cursor:pointer;
  font-family:var(--font-d); font-weight:600; font-size:.88rem;
  transition:border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.adm-pill:hover{ border-color:var(--brand); }
.adm-pill.is-on{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* ============================================================
   Fehlerseiten
   Eigenstaendig aufgebaut (ohne PHP-Includes), damit eine 500er
   Seite nicht an derselben Ursache scheitert. Nutzt nur nw.css.
   ============================================================ */
.err-page{
  min-height:100dvh; display:flex; flex-direction:column;
  background-image:
    radial-gradient(circle 420px at 88% 130px, rgba(94,170,168,.30), transparent 70%),
    radial-gradient(circle 300px at  2% 800px, rgba(94,170,168,.30), transparent 70%),
    linear-gradient(180deg, #a9d1d0 0px, #a9d1d0 620px,
                    rgba(94,170,168,.30) 790px, rgba(94,170,168,0) 950px);
  background-repeat:no-repeat;
}
.err-top{ padding:1.6rem clamp(1.2rem, 4vw, 2.5rem); }
.err-top a{
  display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--ink);
  font-family:var(--font-d); font-weight:700; font-size:1.3rem; letter-spacing:-0.02em;
}
.err-top img{ width:46px; height:46px; display:block; }
.err-main{ flex:1; display:grid; place-items:center; padding:clamp(2rem, 6vw, 4rem) clamp(1.2rem, 4vw, 2.5rem); }
.err-in{ max-width:640px; }
.err-code{
  font-family:var(--font-d); font-weight:700; font-size:.9rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent-deep); margin:0 0 .8rem;
}
.err-in h1{
  font-size:clamp(2.1rem, 5vw, 3.2rem); letter-spacing:-0.025em; line-height:1.1; margin:0;
}
.err-in h1 em{ font-style:normal; color:var(--accent); }
.err-in > p{ margin:1.2rem 0 0; color:#2b4644; font-size:1.08rem; line-height:1.7; max-width:52ch; }
.err-cta{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:2rem; }
.err-cta .btn-line{ background:#fff !important; border-color:#fff !important; }
.err-help{
  margin-top:2.5rem; background:#fdf1ef; border:1px solid #f3d8d3;
  border-radius:var(--r-panel); padding:1.4rem 1.6rem;
}
.err-help strong{ display:flex; align-items:center; gap:.55rem;
  font-family:var(--font-d); font-weight:600; font-size:1rem; color:var(--ink); }
.err-help strong i{ color:var(--err); font-size:.9em; }
.err-help p{ margin:.5rem 0 0; color:#5d4a47; font-size:.95rem; line-height:1.6; }
.err-help .crisis-tels{ margin-top:1rem; }
.err-foot{
  padding:1.6rem clamp(1.2rem, 4vw, 2.5rem);
  color:#2b4644; font-size:.88rem;
}
.err-foot a{ color:var(--accent-deep); }

/* Karten bleiben beim Ueberfahren an Ort und Stelle. Die Anhebung aus
   style.css wirkte in den internen Bereichen unruhig. */
.section-card:hover, .intro-card:hover, .stat-card:hover, .challenge-card:hover,
.dashboard-card:hover, .resource-card:hover, .info-card:hover, .feature-card:hover{
  transform:none !important;
}