/* ============================================================
   nemia · Design-Paket
   Grundlage: Styleguide 0.9 · Anmutung: Headspace
   (warm, ruhig, sehr runde Formen, viel Weissraum, weiche Schatten)
   Dieses Stylesheet ist die gemeinsame Basis ALLER Seiten.
   ============================================================ */

/* ---- Schrift: Nemia Sans (echte Markenschrift, lokal eingebunden) ---- */
/* Vollständige Nemia-Sans-Familie: alle 9 Schnitte (100–900) + Kursive,
   lokal aus assets/Fonts/. So sitzt die Marken-Schrift überall in jedem Gewicht. */
@font-face{font-family:"Nemia Sans";font-style:normal;font-weight:100;font-display:swap;src:url("assets/Fonts/Nemia-Sans-Thin.otf") format("opentype")}
@font-face{font-family:"Nemia Sans";font-style:italic;font-weight:100;font-display:swap;src:url("assets/Fonts/Nemia-Sans-ThinItalic.otf") format("opentype")}
@font-face{font-family:"Nemia Sans";font-style:normal;font-weight:200;font-display:swap;src:url("assets/Fonts/Nemia-Sans-ExtraLight.otf") format("opentype")}
@font-face{font-family:"Nemia Sans";font-style:italic;font-weight:200;font-display:swap;src:url("assets/Fonts/Nemia-Sans-ExtraLightItalic.otf") format("opentype")}
@font-face{font-family:"Nemia Sans";font-style:normal;font-weight:300;font-display:swap;src:url("assets/Fonts/Nemia-Sans-Light.otf") format("opentype")}
@font-face{font-family:"Nemia Sans";font-style:italic;font-weight:300;font-display:swap;src:url("assets/Fonts/Nemia-Sans-LightItalic.otf") format("opentype")}
@font-face{font-family:"Nemia Sans";font-style:normal;font-weight:400;font-display:swap;src:url("assets/Fonts/Nemia-Sans-Regular.otf") format("opentype")}
@font-face{font-family:"Nemia Sans";font-style:italic;font-weight:400;font-display:swap;src:url("assets/Fonts/Nemia-Sans-Italic.otf") format("opentype")}
@font-face{font-family:"Nemia Sans";font-style:normal;font-weight:500;font-display:swap;src:url("assets/Fonts/Nemia-Sans-Medium.otf") format("opentype")}
@font-face{font-family:"Nemia Sans";font-style:italic;font-weight:500;font-display:swap;src:url("assets/Fonts/Nemia-Sans-MediumItalic.otf") format("opentype")}
@font-face{font-family:"Nemia Sans";font-style:normal;font-weight:600;font-display:swap;src:url("assets/Fonts/Nemia-Sans-SemiBold.otf") format("opentype")}
@font-face{font-family:"Nemia Sans";font-style:italic;font-weight:600;font-display:swap;src:url("assets/Fonts/Nemia-Sans-SemiBoldItalic.otf") format("opentype")}
@font-face{font-family:"Nemia Sans";font-style:normal;font-weight:700;font-display:swap;src:url("assets/Fonts/Nemia-Sans-Bold.otf") format("opentype")}
@font-face{font-family:"Nemia Sans";font-style:italic;font-weight:700;font-display:swap;src:url("assets/Fonts/Nemia-Sans-BoldItalic.otf") format("opentype")}
@font-face{font-family:"Nemia Sans";font-style:normal;font-weight:800;font-display:swap;src:url("assets/Fonts/Nemia-Sans-ExtraBold.otf") format("opentype")}
@font-face{font-family:"Nemia Sans";font-style:italic;font-weight:800;font-display:swap;src:url("assets/Fonts/Nemia-Sans-ExtraBoldItalic.otf") format("opentype")}
@font-face{font-family:"Nemia Sans";font-style:normal;font-weight:900;font-display:swap;src:url("assets/Fonts/Nemia-Sans-Black.otf") format("opentype")}
@font-face{font-family:"Nemia Sans";font-style:italic;font-weight:900;font-display:swap;src:url("assets/Fonts/Nemia-Sans-BlackItalic.otf") format("opentype")}

/* ---- Design-Tokens ---- */
:root{
  /* Markenfarben (Styleguide 0.9) */
  --ne-sage:#B4DAC3;       /* Neurodivergenz */
  --m-violet:#848AC4;      /* Medien */
  --ia-blue:#86C2EB;       /* Augenhöhe */
  --graphite:#1D1D1B;      /* Text, dunkle Flächen */
  --pebble:#F7ECE2;        /* heller, warmer Hintergrund */

  /* Weiche Tönungen für ruhige Flächen (Headspace-Logik) */
  --sage-soft:#E4F1EA;
  --violet-soft:#E9EAF4;
  --blue-soft:#E4F2FB;
  --pebble-deep:#F0E2D4;
  --page:#FFFFFF;          /* reines Weiss (Hintergrund komplett weiss, keine Schimmer) */
  --surface:#FFFFFF;       /* reines Weiss */
  --line:#EADBCB;          /* dezente warme Linie */
  --line-soft:#F0E6DA;     /* noch dezentere Trennlinie */

  /* Markenakzente, leicht vertieft für Text/Links (Kontrast) */
  --violet-ink:#5F66A8;
  --blue-ink:#2E6A98;     /* leicht vertieft: lesbar auch auf hellblauen Flaechen (AA) */
  --sage-ink:#3C7355;     /* leicht vertieft: lesbar auch auf hellgruenen Flaechen (AA) */

  /* Text */
  --ink:var(--graphite);
  --muted:#6A655E;         /* abgesoftetes Graphite, AA auf hellen Flächen */

  /* Typo-Skala */
  --fs-h1:clamp(2.3rem, 1.1rem + 5.4vw, 4.5rem);   /* bis 72px (Designteam-Skala) */
  --fs-h2:clamp(1.9rem, 1.1rem + 3.4vw, 3.5rem);   /* bis 56px */
  --fs-h3:clamp(1.4rem, 1.05rem + 1.6vw, 2.25rem); /* bis 36px */
  --fs-h4:1.25rem;                                  /* 20px */
  --fs-body:1.0625rem;
  --fs-lead:clamp(1.15rem, 1.06rem + .4vw, 1.3rem);
  --fs-small:.9rem;
  --fs-eyebrow:.76rem;

  /* Raster & Form */
  --maxw:1280px;
  --maxw-prose:70ch;
  --gutter:clamp(16px, 4vw, 40px);
  --panel-gap:clamp(12px, 2vw, 24px);
  --pad-panel:clamp(24px, 3.4vw, 52px);

  --radius-panel:0;   /* Rundungen ganz weg (eckig wie der Design Guide) */
  --radius:0;
  --radius-sm:0;
  --radius-pill:999px;   /* Buttons/Chips weich (Pill) */

  /* Weiche, geschichtete Schatten */
  --shadow:0 18px 48px -22px rgba(45,33,22,.28), 0 6px 16px -10px rgba(45,33,22,.18);
  --shadow-sm:0 10px 26px -16px rgba(45,33,22,.24);
  --shadow-card:0 14px 34px -20px rgba(45,33,22,.26);

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---- Reset & Basis ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Nemia Sans",ui-rounded,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:var(--fs-body);line-height:1.7;color:var(--ink);
  background:var(--page);     /* komplett weiss, keine farbigen Schimmer */
  overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4{font-weight:600;letter-spacing:-.018em;text-wrap:balance;overflow-wrap:break-word}
h1{font-size:var(--fs-h1);line-height:1.05;font-weight:500;-webkit-hyphens:auto;hyphens:auto}      /* mehrzeilig: genug Abstand, Zeilen beruehren sich nicht */
.hero:not(.hero--page) h1{-webkit-hyphens:manual;hyphens:manual}
h2{font-size:var(--fs-h2);line-height:1.06;font-weight:500;margin-bottom:.9rem}
h3{font-size:var(--fs-h3);line-height:1.2;font-weight:500;letter-spacing:-.012em;margin-bottom:.45rem} /* 120% */
h4{font-size:var(--fs-h4);line-height:1.4;font-weight:600}                         /* 140% */
p{max-width:74ch;text-wrap:pretty}
strong,b{font-weight:600}

/* Fokus-Sichtbarkeit (A11y) */
:focus-visible{outline:3px solid var(--graphite);outline-offset:3px;border-radius:6px}
/* Auf dunklen Flaechen (Footer, dunkle Sektionen) den Fokus-Rahmen hell zeigen, damit er sichtbar bleibt */
.section--graphite :focus-visible,.site-footer :focus-visible{outline-color:var(--pebble)}

/* Skip-Link: springt mit der Tastatur direkt zum Inhalt (sichtbar nur bei Fokus) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--graphite);color:var(--pebble);padding:.7rem 1.1rem;border-radius:0;font-weight:600;box-shadow:var(--shadow)}
.skip-link:focus{left:0}

/* Sprungmarken nicht unter dem Sticky-Header verstecken */
[id]{scroll-margin-top:104px}

/* Zentrier-Container (Header/Footer/Topbar) */
.wrap{width:min(var(--maxw), 100% - 2*var(--gutter));margin-inline:auto}

/* Hilfstexte */
.eyebrow{
  font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue-ink);margin-bottom:1rem;
  display:inline-block;
}
.lead{font-size:var(--fs-lead);font-weight:500;line-height:1.55;color:var(--ink);max-width:66ch}
.muted{color:var(--muted)}
.small{font-size:var(--fs-small)}
.center{text-align:center}
.meta{font-size:var(--fs-small);color:var(--muted);max-width:60ch}

/* Begleitende Inline-Icons (Outline, nehmen automatisch die Textfarbe an) */
.ico-line{display:inline-flex;align-items:center;gap:.45rem}
.ico-line > svg{width:1.2em;height:1.2em;flex:none}
/* Kontakt-Karten: Icon als eckiges Badge, graphit gefuellt mit weissem Symbol (Variante A: "mehr schwarz", passt zu den Buttons). */
.eyebrow.ico-line{gap:.5rem}
.eyebrow.ico-line > svg{width:18px;height:18px;flex:none;box-sizing:content-box;padding:7px;border-radius:0;background:var(--graphite);border:1px solid var(--graphite);color:#fff}

/* ============================================================
   SEKTIONEN als abgerundete Panels (Headspace-Anmutung)
   Jede <section> in <main> ist ein Panel auf dem Seiten-Hintergrund.
   ============================================================ */
main{display:block;padding-block:var(--panel-gap)}
main > section{
  width:min(var(--maxw), 100% - 2*var(--gutter));
  margin-inline:auto;margin-block:var(--panel-gap);
  padding:var(--pad-panel);
  background:transparent;     /* Umbau: offen auf Weiss statt gerahmte Kachel */
  border:none;
  border-radius:var(--radius-panel);
  box-shadow:none;
}
/* Nur noch die farbigen Akzent-Blöcke werden als Fläche sichtbar; weisse/neutrale Abschnitte
   stehen offen auf dem hellen Hintergrund (mehr Weiss, weniger Rahmen). */
main > section > *{max-width:var(--maxw)}

/* Sanfte Einblendung beim Scrollen (per JS aktiviert; ohne JS bleibt alles sichtbar) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease), transform .6s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* Farbflächen je Abschnitt */
.section--pebble{background:var(--pebble)}
.section--pebble-deep{background:var(--pebble-deep)}
.section--surface{background:var(--surface)}
.section--sage{background:var(--sage-soft);border-color:#D6E8DD}
.section--violet{background:var(--violet-soft);border-color:#DCDEEE}
.section--blue{background:var(--blue-soft);border-color:#D3E8F6}
.section--graphite{background:var(--graphite);color:var(--pebble);border-color:transparent}
.section--graphite .muted{color:#C9C2BA}
.section--graphite .eyebrow{color:var(--ia-blue)}
.section--graphite h1,.section--graphite h2,.section--graphite h3{color:var(--pebble)}
/* Beschriftung (eyebrow) nimmt die Farbe der jeweiligen Sektion auf, statt ueberall Violett zu sein */
.section--blue .eyebrow{color:var(--blue-ink)}
.section--sage .eyebrow{color:var(--sage-ink)}

/* Abstand der Textblöcke innerhalb eines Panels */
.section-intro > * + *{margin-top:1rem}
.section-intro{margin-bottom:.4rem}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;border-radius:var(--radius-pill);
  padding:.85rem 1.7rem;font-family:inherit;font-weight:600;font-size:1rem;cursor:pointer;
  border:1.5px solid var(--graphite);background:transparent;color:var(--graphite);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--graphite);color:var(--pebble)}
.btn--primary:hover{background:#000}
.btn--ghost{background:transparent;color:var(--graphite)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:1.6rem}

/* Textlink mit Pfeil */
.link-arrow{
  font-weight:600;color:var(--blue-ink);display:inline-flex;align-items:center;gap:.35rem;
  margin-top:1.2rem;transition:gap .18s var(--ease), color .18s var(--ease);
}
.link-arrow::after{content:"\2192";transition:transform .18s var(--ease)}
.link-arrow:hover{color:var(--graphite)}
.link-arrow:hover::after{transform:translateX(3px)}

/* Verweis mitten im Fliesstext */
.ilink{color:var(--blue-ink);font-weight:600;text-decoration:underline;text-decoration-color:rgba(46,106,152,.35);text-underline-offset:3px;transition:text-decoration-color .18s var(--ease)}
.ilink:hover{text-decoration-color:var(--blue-ink)}
.section--blue .ilink{color:var(--blue-ink);text-decoration-color:rgba(62,127,176,.4)}
.section--blue .ilink:hover{text-decoration-color:var(--blue-ink)}

/* Quellen-/Verweis-Link mit Logo (z. B. KJA-Tarife) */
.source-link{display:inline-flex;align-items:center;gap:.7rem;margin-top:1.5rem;padding:.55rem .95rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);font-size:.92rem;font-weight:600;color:var(--graphite);transition:transform .18s var(--ease), box-shadow .18s var(--ease)}
.source-link:hover{transform:translateY(-2px)}
.source-link img{height:28px;width:auto;flex:none}
.source-link .ext-icon{color:var(--muted);flex:none}

/* Chips / Tags als Pille */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.2rem 0 1rem}
.chip{
  font-size:.82rem;font-weight:500;color:var(--pebble);
  background:var(--graphite);border:1px solid var(--graphite);
  padding:.3rem .8rem;border-radius:var(--radius-pill);white-space:nowrap;
}

/* ============================================================
   TOPBAR + HEADER (auf allen Seiten gleich)
   ============================================================ */
.topbar{font-size:var(--fs-small);color:var(--muted)}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:4px;padding-bottom:4px}
.status-dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:var(--ne-sage);margin-right:.45rem;vertical-align:middle;box-shadow:0 0 0 4px rgba(180,218,195,.3)}

.site-header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--page) 92%, transparent);
  backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;align-items:center;gap:22px;padding-top:14px;padding-bottom:14px}

.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand__logo{height:40px;width:auto}
.brand__tagline{font-size:.8rem;color:var(--muted);letter-spacing:.01em;line-height:1.25;max-width:15ch;border-left:1px solid var(--line);padding-left:14px}

.main-nav{margin-inline:auto}
.main-nav > ul{list-style:none;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.main-nav a{font-weight:500;padding:6px 2px;border-bottom:2px solid transparent;transition:border-color .18s var(--ease), color .18s var(--ease)}
.main-nav > ul > li > a:hover{border-bottom-color:var(--ia-blue)}
/* aktuelle Seite im Menü */
.main-nav a.is-active{border-bottom-color:var(--ia-blue);font-weight:600}

.nav-actions{display:flex;align-items:center;gap:14px;margin-left:4px}
.nav-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-pill);border:1px solid var(--line);background:var(--surface);color:var(--graphite);transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease)}
.nav-icon:hover{transform:translateY(-2px);background:#fff}
.nav-icon svg{width:19px;height:19px}
.nav-phone{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;white-space:nowrap;padding:.55rem 1.1rem;border-radius:var(--radius-pill);background:var(--graphite);color:var(--pebble);transition:transform .18s var(--ease), box-shadow .18s var(--ease)}
.nav-phone:hover{transform:translateY(-2px)}
.nav-phone svg{width:17px;height:17px}

/* Dropdown "Angebote" */
.has-dropdown{position:relative}
.has-dropdown > a{cursor:pointer;display:inline-flex;align-items:center;gap:.42rem}
/* deutlicher Aufklapp-Pfeil bei "Angebote" (dreht sich beim Öffnen) */
.has-dropdown > a::after{content:"";width:8px;height:8px;flex:none;border-right:2.5px solid var(--blue-ink);border-bottom:2.5px solid var(--blue-ink);transform:translateY(-2px) rotate(45deg);transition:transform .22s var(--ease)}
.has-dropdown:hover > a::after,.has-dropdown > a[aria-expanded="true"]::after{transform:translateY(1px) rotate(225deg)}
.dropdown{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(6px);
  min-width:320px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow);
  padding:10px;list-style:none;opacity:0;visibility:hidden;
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .35s;
}
/* unsichtbare Brücke über die Lücke zum Trigger: der Hover reisst beim Wechsel zur Liste nicht ab */
.dropdown::after{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.dropdown::before{content:"";position:absolute;top:-7px;left:50%;width:14px;height:14px;background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:translateX(-50%) rotate(45deg)}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown,.dropdown.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition:opacity .2s var(--ease), transform .2s var(--ease), visibility 0s}
.dropdown li{display:block}
.dropdown a{display:block;padding:11px 14px;border-radius:0;border:none;font-weight:500}
.dropdown a:hover{background:var(--blue-soft)}

/* Hamburger (nur Mobile sichtbar, sitzt in .nav-actions) */
.nav-toggle{display:none;align-items:center;justify-content:center;width:46px;height:46px;border-radius:0;border:1px solid var(--line);background:var(--surface);cursor:pointer}
.nav-toggle span{position:relative;width:20px;height:2px;background:var(--graphite);border-radius:0;transition:transform .2s var(--ease), opacity .2s var(--ease)}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--graphite);border-radius:0;transition:transform .2s var(--ease)}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;overflow:hidden}
.hero .hero__inner{display:grid;grid-template-columns:260px 1fr;gap:clamp(28px,5vw,64px);align-items:center;position:relative;z-index:1}
.hero__brand{display:flex;flex-direction:column;align-items:flex-start}
.hero__message{max-width:680px;position:relative;z-index:1}
.hero__inner .hero__message{max-width:none}
.hero__message h1{font-size:clamp(2.1rem, 1.0rem + 3.4vw, 3.3rem);margin-bottom:1.1rem}
.hero__message .lead{margin-bottom:.5rem}
.hero__sub{font-style:normal;font-weight:700;color:var(--ink)}
/* sehr dezenter, weicher Hintergrund-Akzent */
.hero::after{content:none}   /* blauer Hero-Schimmer entfernt (alles weiss) */
/* Hero auf Unterseiten: Eyebrow + Titel + Subline, etwas kompakter */
.hero--page h1{font-size:clamp(2.1rem, 1.2rem + 4vw, 3.6rem);margin-bottom:1rem}
.hero--page .hero__message{max-width:720px}
.hero--page .eyebrow{margin-bottom:.9rem}
/* Startseiten-Hero: echtes Illustrationsbild statt Platzhalter */
.hero__brand-img{width:100%;max-width:240px;height:auto}
/* Unterseiten-Hero mit Illustration (Text + Bild nebeneinander) */
.hero--media .hero__cols{display:grid;grid-template-columns:1.05fr .82fr;gap:clamp(24px,4.5vw,56px);align-items:center;position:relative;z-index:1}
.hero--media .hero__message{max-width:none}
.hero__media{display:flex;justify-content:center}
.hero__media img{max-width:100%;max-height:clamp(200px,30vh,290px);width:auto;height:auto}
@media (max-width:760px){
  .hero--media .hero__cols{grid-template-columns:1fr;gap:18px}
  .hero__media img{max-height:240px}
}

/* Themenblöcke (z. B. SPF: Neurodivergenz / Medien) */
.theme{padding:26px 28px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface)}
.theme + .theme{margin-top:20px}
.theme h3{margin-bottom:.5rem}
/* SPF-Schwerpunkte (Option 2): farbiger Kopf + weisser Koerper, wie die Startseiten-Karten.
   padding/margin-0 neutralisiert die Basis- und Mobile-.theme-Regeln, damit der Kopf bis an die Kante reicht. */
.theme--ne,.theme--m{padding:0;margin-left:0;margin-right:0;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.theme--ne{border-top:5px solid var(--ne-sage)}
.theme--m{border-top:5px solid var(--m-violet)}
.theme__head{padding:16px 28px}
.theme--ne .theme__head{background:var(--ne-sage)}
.theme--m .theme__head{background:var(--m-violet)}
.theme__head h3{margin:0}
.theme__body{padding:22px 28px 26px}
.theme__body p{margin:0}
/* SPF-Schwerpunkte: Block auf angenehme Lesebreite begrenzen, damit der farbige Kopf
   nicht weit ueber den Text hinausragt (sonst grosse leere Flaeche rechts). Text fuellt den Koerper. */
.themes{max-width:820px}
.themes .theme__body p{max-width:none}
.theme--ia{background:var(--blue-soft);border-color:#D3E8F6;border-left:5px solid var(--ia-blue)}
.themes{margin-top:2rem}

/* dezente Hinweiszeile / Querverweis am Seitenende */
.hinweis > * + *{margin-top:.5rem}
.hinweis p{max-width:64ch}

/* gestapelte Inhaltsblöcke (Überschrift + Text) */
.stack > * + *{margin-top:1.1rem}
.stack h3{margin-top:2rem;margin-bottom:.3rem}
.stack h3:first-child{margin-top:0}

/* hervorgehobenes Zitat (z. B. Kindeswohl-Leitsatz) */
.quote{margin:2rem 0 .5rem;padding:24px 30px;background:var(--blue-soft);border:1px solid #CFE6F7;border-radius:var(--radius);font-size:1.18rem;font-weight:500;line-height:1.5;max-width:68ch}
.section--blue .quote{background:rgba(255,255,255,.5)}
/* Kindeswohl-Leitsatz auf eine Zeile (Box haengt sich an den Text, bricht erst auf schmalen Schirmen um) */


/* ruhige Übergangs-/Scharnierzeile zwischen Themengruppen */
.transition{font-size:var(--fs-lead);font-weight:500;max-width:58ch;margin:2.2rem 0 1.4rem}

/* ============================================================
   KARTEN-RASTER (Schwerpunkte, Kontakt etc.)
   ============================================================ */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:2.2rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:2.2rem}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;box-shadow:none;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-3px)}
.card h3{margin-bottom:.35rem}
.card > .muted{margin-bottom:.1rem}
.card .link-arrow{margin-top:auto;padding-top:1rem}
.card .tags{font-size:var(--fs-small);color:var(--muted);font-style:italic;margin-bottom:.8rem}

/* Markenakzent oben an den Schwerpunkt-Karten */
.card--ne{border-top:5px solid var(--ne-sage)}
.card--m{border-top:5px solid var(--m-violet)}
.card--ia{border-top:5px solid var(--ia-blue)}
.card--primary{border-color:var(--graphite)}   /* einheitlich 1px, nur dunkler als Akzent, kein Schatten */

/* ganze Karte als Link (Startseite: Schwerpunkte) */
a.card{text-decoration:none;color:inherit}
.card--link{cursor:pointer}
.card-arrow{margin-top:auto;padding-top:1.1rem;align-self:flex-start;font-size:1.35rem;font-weight:700;line-height:1;color:var(--blue-ink);transition:transform .18s var(--ease)}
.card--ne .card-arrow{color:var(--sage-ink)}
.card--m .card-arrow{color:var(--violet-ink)}
.card--link:hover .card-arrow{transform:translateX(5px)}
/* Klare Klickbarkeit ohne Schatten: beim Hover umlaufender graphitfarbener Rahmen
   (outline liegt ueber allen 4 Seiten, auch ueber dem farbigen Kopf, ohne Layout-Versatz) */
.card--link:hover{outline:2px solid var(--graphite);outline-offset:-1px}
/* Schwerpunkt-Karten (Startseite): farbiger Kopf-Balken oben, Rest weiss */
.card--link{padding:0;overflow:hidden}
.card--link.card--ne,.card--link.card--m{border-top:none}
.card__head{padding:22px 28px 18px}
.card__head h3{margin-bottom:.2rem}
.card__head .muted{margin:0}
.card__body{padding:20px 28px 26px;display:flex;flex-direction:column;flex:1}
.card--link.card--ne .card__head{background:var(--ne-sage)}
.card--link.card--m .card__head{background:var(--m-violet)}
/* auf den kräftigen Farb-Köpfen die Unterzeile dunkel halten, damit sie gut lesbar bleibt */
.card--link.card--ne .card__head .muted,
.card--link.card--m .card__head .muted{color:var(--graphite);font-weight:500}

/* Eyebrow innerhalb einer Karte (z. B. "1 · Anrufen") */
.card .eyebrow{color:var(--muted);margin-bottom:.5rem}
.card .lead a:hover{color:var(--blue-ink)}

/* Kontakt-Karten kompakter (index/spf/uwb/kontakt), 2026-06-24.
   Merkmal Kontakt-Karte = Eyebrow (mit oder ohne Icon). Inhalts-Karten (workshops, nur h3+p) bleiben unveraendert. */
.card:has(> .eyebrow){padding:20px 26px}
.card:has(> .eyebrow) .eyebrow{margin-bottom:.35rem}
.card:has(> .eyebrow) .lead{line-height:1.35;margin-bottom:.2rem}
.card:has(> .eyebrow) .link-arrow{padding-top:.65rem}

/* ============================================================
   PRINZIPIEN (Haltung)
   ============================================================ */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:2.2rem 0}
.principle{display:block;text-decoration:none;color:inherit;transition:transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease)}
/* Optik + Hover stehen flach/eckig weiter unten (.principle / .principle:hover, ~Zeile 833) */
.principles h3{margin-bottom:.3rem}

/* ============================================================
   ÜBER UNS · Foto + Personen + Logo-Moment
   ============================================================ */
figure{margin:1.8rem 0}
figcaption .lead{margin-top:1.1rem}
/* Über-uns-Foto klickbar (führt zur Über-uns-Seite) */
.photo-link{display:block;border-radius:var(--radius);overflow:hidden;transition:transform .18s var(--ease), box-shadow .18s var(--ease)}
.photo-link:hover{transform:translateY(-3px)}

.person{display:grid;grid-template-columns:210px 1fr;gap:30px;align-items:start;margin-top:2rem}
.person + .person{margin-top:30px;padding-top:30px;border-top:1px solid var(--line)}
.person__photo{width:100%}
.person__name{margin-bottom:0}
.person__role{color:var(--muted);font-weight:500;margin-bottom:1rem}
.person__body > p + p{margin-top:1rem}

/* Über uns: warme Kurzzeile, Steckbrief und abwechselnde Foto-Seite (dezent) */
.person__tag{font-size:1.04rem;font-weight:600;color:var(--violet-ink);letter-spacing:-.005em;margin-bottom:.3rem}
.person__tag--sage{color:var(--sage-ink)}
.person--reverse{grid-template-columns:1fr 210px}
.person--reverse .person__body{order:1}
.person--reverse .person__aside{order:2}
.person-facts{margin:1.4rem 0 .2rem}
.person-facts .fact{display:grid;grid-template-columns:128px 1fr;gap:.5rem 1rem;align-items:baseline;padding:.6rem 0;border-top:1px solid var(--line-soft)}
.person-facts .fact:first-child{border-top:none;padding-top:.2rem}
.person-facts dt{font-size:.9rem;color:var(--muted);font-weight:500}
.person-facts dd{font-size:.99rem}
.fact-pill{display:inline-block;font-size:.84rem;font-weight:500;padding:.22rem .72rem;border-radius:var(--radius-pill);margin:0 .35rem .35rem 0;border:1px solid transparent}
.fact-pill--ne{background:var(--sage-soft);color:var(--sage-ink);border-color:#D6E8DD}
.fact-pill--m{background:var(--violet-soft);color:var(--violet-ink);border-color:#DCDEEE}
.fact-pill--ia{background:var(--blue-soft);color:var(--blue-ink);border-color:#D3E8F6}
/* Arbeitsfelder als neutrale Chips in einer Steckbrief-Zeile */
.person-facts .fact--fields{align-items:start}
.person-facts .fact--fields .chips{margin:.15rem 0 0}

/* Aufklappbare Abschnitte je Person (Erfahrung · Aus- und Weiterbildungen) — schlicht, mit Pfeil nach unten */
.person-disc{border-top:1px solid var(--line)}
.person-disc:first-of-type{margin-top:1.2rem}
.person-disc > summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;list-style:none;padding:.85rem 0;font-weight:600;font-size:1rem;color:var(--graphite);transition:color .18s var(--ease)}
.person-disc > summary::-webkit-details-marker{display:none}
.person-disc > summary:hover{color:var(--blue-ink)}
.person-disc > summary::after{content:"";width:10px;height:10px;flex:none;border-right:2.5px solid var(--blue-ink);border-bottom:2.5px solid var(--blue-ink);transform:translateY(-3px) rotate(45deg);transition:transform .25s var(--ease)}
.person-disc[open] > summary::after{transform:translateY(1px) rotate(225deg)}
.person-disc .disc-body{padding:.1rem 0 1.1rem}
.person-disc[open] .disc-body{animation:accReveal .28s var(--ease)}
.cv-list{list-style:none;display:grid;gap:.75rem}
.cv-list li{display:grid;grid-template-columns:108px 1fr;gap:.25rem 1rem;align-items:baseline}
.cv-when{font-size:.85rem;color:var(--muted);font-weight:600}
.cv-what{font-size:.97rem}
.quals-label{font-weight:600;font-size:var(--fs-small);margin-top:1.3rem}

/* Qualifikationen als aufklappbarer Zusatz (dezent, v. a. für Fachpersonen) */
.quals-toggle{margin-top:1.3rem}
.quals-toggle > summary{display:inline-flex;align-items:center;gap:.55rem;width:fit-content;cursor:pointer;list-style:none;font-weight:600;font-size:var(--fs-small);color:var(--graphite);padding:.5rem .95rem;border-radius:var(--radius-pill);border:1px solid var(--line);background:rgba(29,29,27,.04);transition:background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease)}
.quals-toggle > summary::-webkit-details-marker{display:none}
.quals-toggle > summary::before{content:"";width:18px;height:18px;flex:none;border-radius:50%;background:rgba(29,29,27,.08);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1D1B' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E");background-size:12px 12px;background-position:center;background-repeat:no-repeat}
.quals-toggle[open] > summary::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1D1B' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E")}
.quals-toggle > summary:hover{background:#fff;border-color:#D8C8B6;transform:translateY(-1px)}
.quals-toggle[open] .quals{animation:accReveal .28s var(--ease)}
.quals{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem}
.quals li{font-size:.84rem;background:rgba(29,29,27,.05);border:1px solid var(--line);padding:.32rem .8rem;border-radius:var(--radius-pill)}

/* Profil-Buttons (LinkedIn) bei den Personen */
.person__aside{display:flex;flex-direction:column;align-items:center;gap:.9rem}
.person__social{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
.social-link{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:600;padding:.5rem 1rem;border-radius:var(--radius-pill);border:1px solid var(--line);background:var(--surface);color:var(--graphite);transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease)}
.social-link:hover{transform:translateY(-2px);background:#fff}
.social-link svg{width:18px;height:18px;flex:none}
.social-link--muted{color:var(--muted);background:transparent;border-style:dashed;cursor:default}
.social-link--muted:hover{transform:none;box-shadow:none;background:transparent}

/* Direkter Kontakt je Person (unter Foto/LinkedIn) */
.person__contact{display:flex;flex-direction:column;align-items:center;gap:.4rem;font-size:.85rem;text-align:center}
.person__contact a,.person__contact > span{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--graphite);line-height:1.3;overflow-wrap:anywhere}
.person__contact a:hover{color:var(--blue-ink)}
.person__contact svg{width:15px;height:15px;flex:none;color:var(--muted)}
.person__contact > span.muted{font-weight:500}

/* Aussprache-Karte (nemia · Duden-Stil) */
.aussprache{display:inline-block;text-align:center;padding:30px 46px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:none}
.aussprache__word{font-size:2.1rem;font-weight:700;letter-spacing:-.02em}
.aussprache__ipa{font-size:1.3rem;color:var(--muted);margin-top:.15rem}
.aussprache__syll{margin-top:.7rem;font-weight:500}

.logo-moment{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;padding:clamp(20px,4vw,40px) 0}
.logo-moment img{width:min(100%,360px)}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:2rem}
.pillar{padding:24px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.pillar h3{margin-bottom:.4rem}
.pillar--ne{border-top:5px solid var(--ne-sage)}
.pillar--m{border-top:5px solid var(--m-violet)}
.pillar--ia{border-top:5px solid var(--ia-blue)}
.pillar .tag{font-weight:700;letter-spacing:.04em}
.pillar--ne .tag{color:var(--sage-ink)}
.pillar--m .tag{color:var(--violet-ink)}
.pillar--ia .tag{color:var(--blue-ink)}

/* ============================================================
   KONTAKTZEILEN (kompakt, ohne Karten)
   ============================================================ */
.contact-lines{display:grid;gap:14px;margin-top:1.6rem}
.contact-line{display:flex;flex-wrap:wrap;gap:.3rem .9rem;align-items:baseline;padding:16px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm)}
.contact-line strong{font-weight:700}
.contact-line a{font-weight:600}
.contact-line a:hover{color:var(--blue-ink)}
.contact-line .sep{color:var(--muted)}

/* ============================================================
   PLATZHALTER (Foto, Illustration, Verbands-Logos, Grafik)
   ============================================================ */
.placeholder{
  display:flex;align-items:center;justify-content:center;text-align:center;
  border:1.5px dashed #C9B6A2;color:#9A8676;background:rgba(255,255,255,.4);
  border-radius:var(--radius-sm);font-style:italic;font-size:var(--fs-small);
  padding:16px;line-height:1.45;
}
.placeholder--herologo{width:100%;max-width:320px;aspect-ratio:5/3;font-size:1rem;border-radius:var(--radius)}
.placeholder--photo{width:100%;aspect-ratio:16/8;font-size:1rem;border-radius:var(--radius)}
.placeholder--portrait{width:100%;aspect-ratio:4/5;border-radius:var(--radius)}
.placeholder--illustration{width:100%;aspect-ratio:4/3;border-radius:var(--radius)}
.placeholder--graphic{width:100%;aspect-ratio:16/9;border-radius:var(--radius)}
.placeholder--badge{width:128px;height:46px}
.placeholder--note{width:100%;justify-content:flex-start;text-align:left;font-size:.85rem;margin:.7rem 0;padding:12px 16px}
.section--graphite .placeholder--badge{background:rgba(255,255,255,.06);border-color:#5b5750;color:#C9C2BA}
.placeholder--link{display:inline-flex;width:auto;padding:.7rem 1.2rem;border-radius:var(--radius-pill);margin-top:1rem}

/* Inline-Platzhalter (z. B. UID, Datenschutz-Lücken) */
.ph-inline{
  font-style:normal;background:rgba(132,138,196,.14);border:1px dashed #B6BAD9;
  color:var(--violet-ink);padding:.05rem .45rem;border-radius:0;font-size:.92em;
}

/* ============================================================
   TIMELINE (Ablauf · vier Stationen)
   ============================================================ */
.timeline{position:relative;margin:2rem 0 .5rem;padding-left:38px;display:grid;gap:30px}
.timeline::before{content:"";position:absolute;left:9.5px;top:6px;bottom:6px;width:3px;background:var(--ia-blue);border-radius:0}
.timeline .step{position:relative}
.timeline .step::before{content:"";position:absolute;left:-38px;top:0;width:22px;height:22px;border-radius:50%;background:var(--surface);border:3px solid var(--ia-blue);box-shadow:0 0 0 5px color-mix(in srgb, var(--ia-blue) 22%, transparent)}
.timeline .step h3{margin-bottom:.25rem;font-size:1.15rem;display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
/* "Begleiten" als längste Phase: Marker wird zum hohen Balken + dezentes Label */
.timeline .step--long::before{left:-32px;top:2px;bottom:2px;width:12px;height:auto;border:none;border-radius:var(--radius-pill);background:var(--ia-blue);box-shadow:0 0 0 5px color-mix(in srgb, var(--ia-blue) 16%, transparent)}
.timeline .step--long h3{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.step-tag{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--blue-ink);background:transparent;border:1px solid var(--blue-ink);padding:.2rem .6rem;border-radius:var(--radius-pill);white-space:nowrap}

/* ============================================================
   ACCORDION (Kompetenzfelder · details/summary)
   ============================================================ */
/* Akkordeon: offene, eckige Liste mit nemia-Quadrat-Sprache (statt gerahmter Box) */
.accordion{margin-top:1.6rem;--acc:var(--ia-blue);border-top:1px solid var(--line)}
.accordion details{border-bottom:1px solid var(--line)}
.accordion summary{
  cursor:pointer;list-style:none;padding:20px 2px;font-weight:600;font-size:1.12rem;
  display:flex;align-items:center;gap:14px;
  transition:padding-left .2s var(--ease);
}
.accordion summary:hover{padding-left:7px}
.accordion summary::-webkit-details-marker{display:none}
/* farbiges Quadrat-Marker vor dem Titel, kippt beim Oeffnen zur Raute */
.accordion summary::before{content:"";width:16px;height:16px;flex:none;background:var(--acc);transition:transform .25s var(--ease)}
.accordion details[open] > summary::before{transform:rotate(45deg)}
/* klares +/- rechts statt Pfeil */
.accordion summary::after{content:"";width:22px;height:22px;flex:none;margin-left:auto;background:no-repeat center/22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1D1B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.accordion details[open] > summary::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1D1B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}
/* geoeffneter Text mit farbigem Balken angeschnitten */
.accordion .acc-body{padding:2px 2px 22px 30px;border-left:3px solid var(--acc);margin-left:7px}
.accordion .acc-body > * + *{margin-top:.8rem}
.accordion .acc-body p{max-width:none}
.accordion details[open] .acc-body{animation:accReveal .28s var(--ease)}
@keyframes accReveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
/* Themenfarbe je Gruppe (steuert Quadrat + Balken) */
.accordion--sage{--acc:var(--ne-sage)}
.accordion--violet{--acc:var(--m-violet)}
.accordion--blue{--acc:var(--ia-blue)}

/* ============================================================
   LIVIA · Visuelle Sprache, Stufe 1 (2026-06-24):
   GRUENES NEURODIVERGENZ-BAND - erste grosse, ruhige Farbflaeche.
   Bedeutungstreu (gruen = Neurodivergenz); Marker/Linien auf --sage-ink,
   damit sie auf der hellgruenen Flaeche lesbar bleiben. Eckig (radius 0). */
.accordion--sage-band{
  background:var(--sage-soft);
  padding:clamp(18px,2.6vw,28px) clamp(18px,2.6vw,32px);
  border-top:none;
  --acc:var(--sage-ink);
}
.accordion--sage-band details{border-color:#CFE6D6}
.accordion--sage-band .acc-body{border-left-color:var(--sage-ink)}
/* Violettes Band fuer Medienpaedagogik (Pendant zum gruenen Neurodivergenz-Band).
   Marker/Akzent in dunklerem Violett (--violet-ink), damit es auf der hellvioletten Flaeche lesbar bleibt. */
.accordion--violet-band{
  background:var(--violet-soft);
  padding:clamp(18px,2.6vw,28px) clamp(18px,2.6vw,32px);
  border-top:none;
  --acc:var(--violet-ink);
}
.accordion--violet-band details{border-color:#DCDEEE}
.accordion--violet-band .acc-body{border-left-color:var(--violet-ink)}
.accordion-group + .accordion-group{margin-top:1.4rem}
.accordion-group > h3{margin-bottom:.2rem}

/* ============================================================
   PROSE (Rechtstexte: Impressum, Datenschutz, Disclaimer)
   ============================================================ */
.prose{max-width:var(--maxw-prose);margin-inline:auto}
/* Abschnittstitel der Rechtsseiten sind jetzt h2 (saubere Ueberschriften-Folge h1>h2>h3).
   Optik bewusst identisch zum bisherigen h3 gehalten, damit sich am Aussehen nichts aendert. */
.prose h2{font-size:var(--fs-h3);line-height:1.2;font-weight:500;letter-spacing:-.012em;margin:2rem 0 .6rem}
.prose h3{margin:2rem 0 .6rem}
.prose h4{margin:1.4rem 0 .4rem}
.prose p{margin-bottom:1rem;max-width:none}
.prose ul,.prose ol{margin:0 0 1rem 1.3rem}
.prose li{margin-bottom:.4rem}
.prose a{color:var(--blue-ink);font-weight:600}
.prose a:hover{text-decoration:underline}
.prose strong{font-weight:700}
.page-head{text-align:left}
.page-head .eyebrow{margin-bottom:.7rem}
.prose .address{font-weight:600;font-size:1.1rem;line-height:1.75;margin-bottom:1rem}
.address{font-style:normal;font-weight:600;font-size:1.15rem;line-height:1.75}

/* ============================================================
   NEWSLETTER + FOOTER (auf allen Seiten gleich)
   ============================================================ */
.site-footer{background:var(--graphite);color:var(--pebble);padding:clamp(40px,6vw,76px) 0 32px}
.site-footer a{color:var(--pebble)}
.newsletter{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.newsletter h3{color:var(--pebble);margin-bottom:.3rem}
.newsletter .muted{color:#C9C2BA}
.footer-divider{border:none;border-top:1px solid #3a3733;margin:32px 0}
.footer-trust{display:flex;gap:56px;flex-wrap:wrap}
.footer-trust .eyebrow{color:var(--ia-blue)}
.badge-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:.7rem}
/* Trust-/Partner-Logos auf weisser Kachel (sichtbar auf dunklem Footer) */
.trust-logo{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:0;padding:10px 16px;height:56px;transition:transform .18s var(--ease), box-shadow .18s var(--ease)}
.trust-logo:hover{transform:translateY(-2px)}
.trust-logo img{height:34px;width:auto;max-width:180px;display:block}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:32px}
.footer-logo{height:30px;width:auto;opacity:.92}
.legal{display:flex;gap:18px;flex-wrap:wrap;font-size:var(--fs-small);color:#C9C2BA}
.legal a:hover{text-decoration:underline;color:var(--pebble)}
.copyright{font-size:var(--fs-small);color:#C9C2BA;margin:0}
.footer-end{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.footer-social{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-pill);border:1px solid #3a3733;color:var(--pebble);transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease)}
.footer-social:hover{transform:translateY(-2px);background:rgba(255,255,255,.08);border-color:#55504a}
.footer-social svg{width:19px;height:19px}
/* Instagram noch nicht live: sichtbar als Hinweis, aber nicht klickbar und ohne Hover-Bewegung */
.footer-social--soon{opacity:.5;cursor:default}
.footer-social--soon:hover{transform:none;background:transparent;border-color:#3a3733}

/* "Nach oben"-Knopf (von site.js erzeugt) */
.to-top{position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:60;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--graphite);box-shadow:var(--shadow);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s var(--ease), background .18s var(--ease)}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:#fff;transform:translateY(-3px)}
.to-top svg{width:22px;height:22px}

/* KPG-Grafik im Akkordeon (Experiment auf Haltung & Methoden · als Block entfernbar) */
.kpg-figure{margin:1.6rem 0 0}
.kpg-grid{display:grid;grid-template-columns:1fr 2fr;gap:24px;max-width:1040px;margin-inline:auto}
.kpg-phase{border-radius:var(--radius-panel);padding:clamp(20px,3vw,28px)}
.kpg-phase > .eyebrow{display:block;margin-bottom:1.4rem}
.kpg-num{width:38px;height:38px;border-radius:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.15rem;margin-bottom:1rem}
.kpg-step h3{font-size:1.2rem;margin-bottom:.4rem}
.kpg-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px}
.kpg-loop{text-align:center;margin:1.4rem 0 .3rem}
.kpg-loop__label{display:block;margin:0;font-weight:600;color:var(--graphite);font-size:.95rem}
.kpg-loop__icon{display:none;color:var(--blue-ink)}
.kpg-loop__arc{display:block;width:100%;max-width:720px;height:auto;margin:-1rem auto 0;color:var(--blue-ink);opacity:.8}
@media (max-width:720px){
  .kpg-grid{grid-template-columns:1fr}
  .kpg-loop__arc{display:none}
  .kpg-loop__label{display:flex;justify-content:center;align-items:center;gap:.4rem;margin:0}
  .kpg-loop__icon{display:block;flex:none}
}

/* ============================================================
   RESPONSIV
   ============================================================ */
/* Nav einklappen (Hamburger), bevor sie umbricht — Nav braucht ~990px */
@media (max-width:1100px){
  .nav-toggle{display:inline-flex}
  .site-header .wrap{flex-wrap:wrap;gap:14px}
  .brand{margin-right:auto}
  .main-nav{order:3;width:100%;margin-left:0;display:none}
  .main-nav.open{display:block}
  .main-nav > ul{flex-direction:column;align-items:stretch;gap:2px;padding:10px 0 4px}
  .main-nav > ul > li > a{display:block;padding:12px 6px;border-bottom:1px solid var(--line-soft)}
  .main-nav > ul > li > a:hover{border-bottom-color:var(--line-soft)}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;background:transparent;min-width:0;padding:2px 0 6px 14px}
  .dropdown::before{display:none}
  .dropdown::after{display:none}
  .dropdown a:hover{background:transparent;text-decoration:underline}
  /* Mobile: Aufklapp-Pfeil weg (Dropdown ist hier ohnehin offen) und kein Links-Versatz beim Antippen */
  .has-dropdown > a::after{display:none}
  .has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown,.dropdown.open{transform:none}
}

@media (max-width:900px){
  .hero .hero__inner{grid-template-columns:1fr;gap:24px}
  .placeholder--herologo{max-width:260px}
  .grid-3,.pillars{grid-template-columns:1fr 1fr}
  .principles{grid-template-columns:1fr;gap:18px}
  .person,.person--reverse{grid-template-columns:1fr;gap:16px}
  .person--reverse .person__body,.person--reverse .person__aside{order:0}
  .person__photo{max-width:240px}
}

@media (max-width:760px){
  .grid-2,.grid-3,.pillars{grid-template-columns:1fr}
  .footer-trust{gap:28px}
  .newsletter{flex-direction:column;align-items:flex-start}

  /* Kontaktzeilen (Ansprechpersonen) schon ab Tablet gestapelt: jeder Teil zentriert auf eigener Zeile,
     Trenner ausgeblendet, lange E-Mails brechen sauber um (vorher erst ab 600px) */
  .contact-line{display:block;text-align:center;padding:22px 20px}
  .contact-line > *{display:block}
  .contact-line > * + *{margin-top:.3rem}
  .contact-line .sep{display:none}
  .contact-line strong{font-size:1.1rem;margin-bottom:.2rem}
  .contact-line a{color:var(--blue-ink);overflow-wrap:break-word}
}

@media (max-width:600px){
  /* Schriftgrössen auf dem Handy gesamthaft etwas kompakter: passt zum kleineren Fliesstext, ruhigere Hierarchie (Desktop bleibt unveraendert) */
  :root{
    --fs-body:1rem;       /* 16px */
    --fs-h2:1.38rem;      /* Abschnittstitel: ~26 -> 22px */
    --fs-h3:1.12rem;      /* ~19 -> 18px */
    --fs-lead:1.06rem;    /* Einleitungen: ~18,5 -> 17px */
  }

  /* Steckbrief + Stationen-Liste (Über uns): Beschriftung/Jahr über den Wert stapeln auf dem Handy */
  .person-facts .fact{grid-template-columns:1fr;gap:.15rem;padding:.55rem 0}
  .cv-list li{grid-template-columns:1fr;gap:.1rem}

  /* Akkordeons auf dem Handy: etwas kleinerer Titel, schmalerer Text-Einzug */
  .accordion summary{font-size:1.05rem}
  .accordion .acc-body{padding-left:24px}

  /* Themen-Karten (Neurodivergenz / Medien) auf dem Handy ebenso breiter + weniger Innenabstand -> besser lesbar */
  .theme{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}

  /* kompakter Button NUR auf dem Handy (auf dem Desktop bleibt er normal gross) */
  .btn--sm{padding:.6rem 1.25rem;font-size:.9rem}
}

@media (max-width:480px){
  /* Unterseiten-Titel etwas kleiner: lange Wörter passen ohne hässliche Silbentrennung auf eine Zeile */
  .hero--page h1{font-size:clamp(1.45rem, 6.2vw, 1.7rem)}
}

@media (max-width:420px){
  .nav-phone span{display:none}
  .nav-phone{padding:.55rem .8rem}
}

@media (max-width:400px){
  /* Lange E-Mails (z. B. miqueles.scheidegger@nemia.ch) auf sehr schmalen Handys etwas kleiner */
  .contact-line a{font-size:.95rem;overflow-wrap:break-word}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
  .card:hover,.btn:hover,.nav-icon:hover,.nav-phone:hover,
  .principle:hover,.photo-link:hover,.source-link:hover,.social-link:hover,
  .trust-logo:hover,.footer-social:hover,.to-top:hover,.quals-toggle>summary:hover{transform:none}
}

/* ============================================================
   UMBAU 2026-06-23 · mehr Weiss, weniger Rahmen, mehr Leben
   ============================================================ */

/* 1) Status-Punkt "freie Kapazitaeten" pulsiert sanft */
@keyframes nemiaPulse{
  0%{box-shadow:0 0 0 0 rgba(180,218,195,.55)}
  70%{box-shadow:0 0 0 9px rgba(180,218,195,0)}
  100%{box-shadow:0 0 0 0 rgba(180,218,195,0)}
}
.status-dot{animation:nemiaPulse 2.8s var(--ease) infinite}

/* 2) Inhalte blenden beim Scrollen leicht gestaffelt ein */
.reveal .grid-2 > *,
.reveal .grid-3 > *,
.reveal .principles > *,
.hero.reveal .hero__message > *{
  opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.reveal.is-visible .grid-2 > *,
.reveal.is-visible .grid-3 > *,
.reveal.is-visible .principles > *,
.hero.reveal.is-visible .hero__message > *{opacity:1;transform:none}
.reveal.is-visible .grid-2 > :nth-child(2){transition-delay:.09s}
.reveal.is-visible .grid-3 > :nth-child(2){transition-delay:.07s}
.reveal.is-visible .grid-3 > :nth-child(3){transition-delay:.14s}
.reveal.is-visible .principles > :nth-child(2){transition-delay:.07s}
.reveal.is-visible .principles > :nth-child(3){transition-delay:.14s}
.hero.reveal.is-visible .hero__message > :nth-child(2){transition-delay:.08s}
.hero.reveal.is-visible .hero__message > :nth-child(3){transition-delay:.16s}

/* 3) Testfotos (Platzhalter, bis echte Fotos vorliegen) */
.photo-link img{display:block;width:100%;aspect-ratio:2 / 1;object-fit:cover}
img.person__photo{width:100%;aspect-ratio:3 / 4;object-fit:cover;border-radius:14px;background:var(--line-soft)}

/* "weniger Bewegung": Puls und Einblende-Versatz aus */
@media (prefers-reduced-motion:reduce){
  .status-dot{animation:none}
  .reveal .grid-2 > *,
  .reveal .grid-3 > *,
  .reveal .principles > *,
  .hero.reveal .hero__message > *{opacity:1;transform:none;transition:none}
}

/* ============================================================
   UMBAU 2026-06-23 (2) · naeher am Entwurf
   ============================================================ */

/* Status-Band als dezenter heller Streifen (wie im Entwurf) */
.topbar{background:transparent;border-bottom:1px solid var(--line-soft)}
.topbar .wrap{padding-top:8px;padding-bottom:8px}

/* Ueber-uns-Teaser: Foto links, blaues Panel + cremefarbene CTA rechts, violetter Balken */
.ueber-grid{display:grid;grid-template-columns:1.3fr .85fr;gap:0;align-items:stretch}
.ueber-photo{display:block;border-radius:var(--radius-panel);overflow:hidden;min-height:340px;transition:transform .18s var(--ease), box-shadow .18s var(--ease)}
.ueber-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ueber-photo:hover{transform:translateY(-3px)}
.ueber-side{display:flex;flex-direction:column;gap:0}
.ueber-panel{border-radius:var(--radius-panel);padding:clamp(22px,2.6vw,40px)}
.ueber-panel--blue{background:var(--ia-blue);flex:1;display:flex;flex-direction:column;justify-content:center}
.ueber-panel--blue .eyebrow{color:var(--graphite)}
.ueber-panel--blue h2{font-size:clamp(1.75rem,1.2rem + 1.5vw,2.3rem);line-height:1.1;margin-bottom:.8rem}
.ueber-panel--blue .lead{color:var(--graphite);margin-bottom:.1rem}
.ueber-panel--blue .muted{color:var(--graphite);opacity:.8}
.ueber-cta{background:var(--pebble);color:var(--graphite);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.5rem;font-size:clamp(1.6rem,1.1rem + 1.4vw,2.05rem);line-height:1.05;font-weight:600;transition:transform .18s var(--ease), box-shadow .18s var(--ease)}
.ueber-cta::after{content:"\2192";transition:transform .18s var(--ease)}
.ueber-cta:hover{transform:translateY(-2px)}
.ueber-cta:hover::after{transform:translateX(4px)}
.ueber-bar{height:6px;border-radius:0;background:var(--m-violet);margin:0}
.ueber-bar--top{background:var(--ia-blue)}
@media (max-width:760px){
  .ueber-grid{grid-template-columns:1fr}
  .ueber-photo{min-height:240px}
}

/* ============================================================
   UMBAU 2026-06-23 (3) · Header + "Interaktion auf Augenhoehe"
   ============================================================ */

/* E-Mail-Knopf als Outline-Pill (sekundaer), Telefon bleibt gefuellt (primaer) */
.nav-mail{background:transparent;color:var(--graphite);border:1.5px solid var(--graphite)}
.nav-mail:hover{background:var(--graphite);color:var(--pebble)}

/* "Interaktion auf Augenhoehe": offene Spalten mit Logo-Quadrat-Marker in den drei Markenfarben */
.principle{padding:0;border:none;border-radius:0;background:none}
.principle::before{content:"";display:block;width:22px;height:22px;border-radius:0;margin-bottom:1rem;background:var(--ia-blue);transition:transform .2s var(--ease)}
/* "Interaktion auf Augenhoehe" = Augenhoehe/Blau: alle Marker blau (konsequente Farblogik) */
.principle:nth-child(1)::before{background:var(--ia-blue)}
.principle:nth-child(2)::before{background:var(--ia-blue)}
.principle:nth-child(3)::before{background:var(--ia-blue)}
.principle:hover{transform:translateY(-2px);background:none;box-shadow:none}
.principle:hover::before{transform:rotate(45deg) scale(1.08)}
.principle h3{margin-bottom:.35rem}

/* ============================================================
   UMBAU 2026-06-23 (4) · Feinschliff Richtung Style Guide / nemia-Logo
   ============================================================ */

/* Outline-Knopf exakt wie im Style Guide: kraeftige (Semibold) Schrift,
   klar sichtbarer Rahmen, grosszuegige Innenabstaende (roomy Pille). */
.btn--ghost{border-width:1.5px;font-weight:600;padding:1.05rem 2.4rem;line-height:1.2;letter-spacing:.005em}

/* Status-Band: Eintraege zusammenruecken (kein leerer Platz in der Mitte) */
.topbar .wrap{justify-content:flex-start;gap:0}
.topbar .wrap > span + span::before{content:"\00B7";margin:0 .8rem;opacity:.5}

/* Ueber-uns: eckiger, naeher am nemia-Logo (weg von Headspace) */
.ueber-photo,.ueber-panel{border-radius:0}

/* Hero wieder zweispaltig/kompakt (zurueck wie vorher) */

/* Status-Band buendig unter den Header (kein Abstand darueber) */
main{padding-top:0}

/* Karten-Koerper leicht grau hinterlegt (wie im Design Guide) */
.card--link .card__body{background:#E6E4DF}

/* Unterseiten-Heros offen auf Weiss (wie Startseite), statt warmer Pebble-/Blau-Block */
.hero--page{background:transparent}

/* Mobile: Status-Band-Einträge sauber untereinander (Trennpunkt weg) */
@media (max-width:700px){
  .topbar .wrap > span + span::before{display:none}
  .topbar .wrap{row-gap:4px}
}

/* Unterseiten: volle Farb-Bloecke -> weiss/offen (wie Startseite); Farbe nur noch als Akzent */
.section--pebble,.section--blue,.section--sage,.section--violet{background:transparent}


/* ============================================================
   PERSOENLICHKEITS-EBENE 2026-06-23 · Logo-Logik: ueberlappende Quadrate + Farbmischung
   (Livia "Variante B" - subtil, eckig, wahrt den weissen Grundlook)
   ============================================================ */

/* 1) Hero: Logo-Echo aus drei ueberlappenden Quadraten (oben rechts, hinter dem Text) */
.hero__squares{position:absolute;top:-40px;right:clamp(-30px,-2vw,0px);z-index:0;width:clamp(180px,26vw,300px);height:clamp(180px,26vw,300px);pointer-events:none;isolation:isolate;opacity:.32}
.hero__squares .sq{position:absolute;width:clamp(96px,11vw,168px);aspect-ratio:1;border-radius:0;mix-blend-mode:multiply}
.sq--ne{top:0;left:0;background:var(--ne-sage);animation:sqInNe .8s var(--ease) both}
.sq--m{top:34%;left:30%;background:var(--m-violet);animation:sqInM .8s var(--ease) .12s both}
.sq--ia{top:8%;left:52%;background:var(--ia-blue);animation:sqInIa .8s var(--ease) .24s both}
@keyframes sqInNe{from{opacity:0;transform:translate(-10px,-8px) rotate(-3deg)}to{opacity:1;transform:translate(0,0) rotate(-3deg)}}
@keyframes sqInM{from{opacity:0;transform:translate(8px,10px) rotate(2deg)}to{opacity:1;transform:translate(0,0) rotate(2deg)}}
@keyframes sqInIa{from{opacity:0;transform:translate(12px,-6px) rotate(-2deg)}to{opacity:1;transform:translate(0,0) rotate(-2deg)}}
@media (max-width:600px){.hero__squares{display:none}}
@media (prefers-reduced-motion:reduce){
  .sq--ne{animation:none;opacity:1;transform:rotate(-3deg)}
  .sq--m{animation:none;opacity:1;transform:rotate(2deg)}
  .sq--ia{animation:none;opacity:1;transform:rotate(-2deg)}
}

/* 2) Sektions-Marker entfernt - Farbmischung/Quadrat-Akzent bleibt exklusiv im Hero-Echo. */

/* Ueber-uns: Streifen liegen AUF dem Foto (oben Pebble, unten Violett) - wie Style Guide */
.ueber-photo{position:relative}
/* "Coming soon"-Label auf dem Foto-Platzhalter (oben links, wie Vorlage) - beim echten Foto den <span> entfernen */
.ueber-photo__soon{position:absolute;top:clamp(14px,1.6vw,22px);left:clamp(16px,1.8vw,24px);z-index:3;color:#fff;font-weight:600;font-size:clamp(.95rem,.85rem + .3vw,1.1rem);letter-spacing:.01em;text-shadow:0 1px 8px rgba(0,0,0,.35);pointer-events:none}
.ueber-photo::before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background:var(--pebble);z-index:2;pointer-events:none}
.ueber-photo::after{content:"";position:absolute;bottom:0;left:0;right:0;height:8px;background:var(--m-violet);z-index:2;pointer-events:none}

/* "Warum es nemia gibt": Text + Bild als ruhiges Zwei-Spalten-Raster (Bild als Panel rechts eingewoben, mobil gestapelt). */
.warum-grid{display:grid;grid-template-columns:1fr clamp(300px,38%,440px);gap:clamp(28px,4vw,52px);align-items:start;margin-top:1.6rem}
.warum-grid__text > p + p{margin-top:1rem}
.warum-grid__text .btn-row{margin-top:1.6rem}

/* Foto-Platzhalter rechts neben dem Text (Coming-soon-Stil, eckig/flach), natuerliches Hochformat. */
.foto-platzhalter{position:relative;margin:0;max-width:none}
.foto-platzhalter img{display:block;width:100%;height:auto;border-radius:0}
.foto-platzhalter__soon{position:absolute;top:clamp(14px,1.6vw,20px);left:clamp(16px,1.8vw,22px);color:#fff;font-weight:600;font-size:var(--fs-small);letter-spacing:.01em;text-shadow:0 1px 8px rgba(0,0,0,.35);pointer-events:none}

@media (max-width:760px){
  .warum-grid{grid-template-columns:1fr;gap:1.4rem}
}

/* ============================================================
   UMBAU 2026-06-23 (5) · UWB-Feinschliff + Ueber-uns-Schrift
   ============================================================ */

/* UWB "Das Angebot": die zwei Themen-Boxen im Raster GLEICH HOCH.
   Der Stapel-Abstand (.theme + .theme) ist nur fuers Untereinander gedacht
   und schob im Grid die zweite Box nach unten -> sie wurde kuerzer. */
.grid-2 .theme{margin-top:0}

/* UWB "Das Angebot": Fliesstext-Absaetze NACH den Boxen brauchen Abstand,
   sonst kleben "Fuer wen." und "Haltung und Methoden" am Vorabsatz. */
#uwb > p + p{margin-top:1.1rem}

/* UWB "Rahmen"-Block: kleinere, einzeilige Spalten-Titel, damit die drei
   Spalten sauber auf gleicher Hoehe starten (vorher 36px, uneinheitlicher Umbruch). */
#rahmen .grid-3 h3{font-size:1.35rem;line-height:1.3;letter-spacing:-.01em;margin-bottom:.55rem}
/* Spalten gleich hoch, "Direkt zum Kontakt" sitzt unten -> sauberer, gerader Abschluss */
#rahmen .grid-3 > div{display:flex;flex-direction:column}
#rahmen .grid-3 .link-arrow{margin-top:auto;padding-top:1.2rem}

/* ============================================================
   UMBAU 2026-06-23 (6) · "Was nemia heisst" kompakter (passt auf 1 Screen, 13")
   Logo kleiner, weniger Padding/Margin, Pillars kompakter. Nur dieser Abschnitt. */
#was-nemia-heisst{padding-block:clamp(18px,2.2vw,32px)}
#was-nemia-heisst .logo-moment{padding:clamp(8px,1.6vw,16px) 0;gap:.6rem}
#was-nemia-heisst .logo-moment img{width:min(100%,270px)}
#was-nemia-heisst .pillars{margin-top:1.3rem}
#was-nemia-heisst .pillar{padding:18px 20px}
#was-nemia-heisst .pillar h3{font-size:1.45rem;line-height:1.22}
/* "Was nemia heisst": die drei Saeulen in ihren Logo-Farben getoent (mehr Farbe an der Logo-Vorstellung) */
#was-nemia-heisst .pillar--ne{background:var(--sage-soft)}
#was-nemia-heisst .pillar--m{background:var(--violet-soft)}
#was-nemia-heisst .pillar--ia{background:var(--blue-soft)}


/* ============================================================
   LIVIA · VISUELLE SPRACHE — Stufen 2-8 (2026-06-24)
   Jede Stufe = eigener Block. Punkt einzeln rueckgaengig: diesen Block (CSS)
   und die im HTML mit "LIVIA Stufe N" markierten Stellen entfernen.
   (Stufe 1 = gruenes Band steht oben bei .accordion--sage-band.)
   ============================================================ */

/* --- STUFE 4: Eckige Formensprache - Timeline-Punkte Kreis -> Quadrat --- */
.timeline .step::before{border-radius:0}

/* --- STUFE 5: Etiketten/Status entrunden (Knoepfe bleiben bewusst RUND) --- */
.status-dot{border-radius:0}
.chip{border-radius:0}
.fact-pill{border-radius:0}
.quals li{border-radius:0}
.quals-toggle > summary::before{border-radius:0}

/* --- STUFE 6: Hero-Logo-Echo der STARTSEITE etwas praesenter --- */
.hero:not(.hero--page) .hero__squares{opacity:.4;width:clamp(200px,28vw,330px);height:clamp(200px,28vw,330px)}

/* --- STUFE 7: je EIN themenpassendes Farb-Band pro Unterseite ---
   HTML: betroffene Sektionen tragen zusaetzlich .color-band (blau=Haltung/Fachstellen, violett=Medien). */
.section--blue.color-band{background:var(--blue-soft)}
.section--violet.color-band{background:var(--violet-soft)}
.section--sage.color-band{background:var(--sage-soft)}

/* --- STUFE 8: Hero-Echo als roter Faden auch auf den Unterseiten-Heros (dezenter) ---
   HTML: jeder .hero--page bekommt den hero__squares-Block. */
.hero--page .hero__squares{opacity:.3}

/* ============================================================
   MOBIL-FEINSCHLIFF 2026-06-24 (<=600px): zentrierter, kompakter, Farbflaechen fuellen
   ============================================================ */
@media (max-width:600px){
  /* Langes Wort im Startseiten-Button am Handy ausblenden -> "Mehr zur Familienbegleitung" */
  .wide-only{display:none}

  /* Startseiten-Hero: Illustration kleiner + zentriert */
  .hero__brand{align-items:center}
  .hero__brand-img{max-width:160px;margin-inline:auto}

  /* Schwerpunkt-Karten (Neurodivergenz/Medien): Inhalt zentriert */
  .card--link .card__head{text-align:center}
  .card--link .card__body{align-items:center;text-align:center}
  .card--link .chips{justify-content:center}
  .card--link .card-arrow{align-self:center}

  /* "Mehr zur ..."-Button kleiner */
  .btn--ghost{font-size:.9rem;padding:.72rem 1.25rem}

  /* "Zwei Personen. Eine Haltung."-Panel + CTA zentriert */
  .ueber-panel--blue{text-align:center}
  .ueber-cta{align-items:center;text-align:center}

  /* SPF-Schwerpunkte: farbiger Kopf fuellt die volle Breite (alten Rand-Ueberlauf neutralisieren) */
  .theme--ne,.theme--m{margin-left:0;margin-right:0;padding:0}
}


/* Startseiten-Hero: auf gestapelter Ansicht (Handy/Tablet) zuerst Text, dann Bild (wie Unterseiten).
   Desktop unveraendert (Bild bleibt links). */
@media (max-width:900px){
  .hero__brand{order:2}
}

/* Startseite: Schwerpunkt-Karten (Neurodivergenz/Medien) kompakter - weniger Hoehe.
   .card--link kommt nur auf der Startseite vor. */
.card--link .card__head{padding:16px 28px 14px}
.card--link .card__body{padding:15px 28px 20px}
.card--link .chips{margin:.1rem 0 .7rem}
.card--link .card-arrow{padding-top:.8rem}

/* ============================================================
   FINESSEN 2026-07-02 · kuratierte Design-Feinschliffe
   Jeder Unterblock traegt die Rang-Nr. aus der Empfehlungsliste
   und ist EINZELN entfernbar (Rueckgaengig = Unterblock loeschen).
   ============================================================ */

/* --- FINESSE 3 · Farb-Band randlos (Testlauf NUR spf.html #anfragewege via
       Klasse .color-band--full; Rollout = Klasse auf weitere Baender setzen) --- */
main > section.color-band--full{
  width:100%;
  padding-inline:max(var(--gutter), calc((100% - var(--maxw)) / 2));
}

/* --- FINESSE 7 · Druckausgabe: sauberes Fachdokument statt Bildschirm-Ballast.
       Behebt zugleich den Druck-Fehler der Scroll-Einblendung (.reveal opacity:0). --- */
@media print{
  .topbar,.site-header,.site-footer,.to-top,.skip-link,
  .hero__squares,.btn-row,.nav-toggle{display:none !important}
  .reveal,
  .reveal .grid-2 > *,.reveal .grid-3 > *,.reveal .principles > *,
  .hero.reveal .hero__message > *,
  .reveal .timeline > .step,.reveal .pillars > *{opacity:1 !important;transform:none !important;transition:none !important}
  body{background:#fff;color:#000}
  main > section{width:100% !important;max-width:none;padding:0 0 14pt;margin:0 0 10pt;background:transparent !important}
  .section--blue,.section--sage,.section--violet,.section--pebble,.section--pebble-deep,
  .accordion--sage-band,.accordion--violet-band,.color-band,.color-band--full{background:transparent !important}
  .card,.theme{border:1px solid #999;box-shadow:none}
  a{color:#000}
  .ilink,.prose a,.legal a{background:none !important;text-decoration:underline}
  .ilink[href^="http"]::after{content:" (" attr(href) ")";font-weight:400;font-size:.85em}
  .hero--media .hero__cols{grid-template-columns:1fr}
  .hero__media{display:none}
}

/* --- FINESSE 8 · Wachsender Link-Unterstrich als System (~220ms, von links).
       Ruhelage: ilink/prose zarte Linie wie bisher, Footer ohne Linie.
       "Weniger Bewegung" schaltet die Transition global ab (Z.792). --- */
.ilink,.prose a{
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(rgba(46,106,152,.35),rgba(46,106,152,.35));
  background-repeat:no-repeat;
  background-position:0 100%,0 100%;
  background-size:0% 1.5px,100% 1.5px;
  transition:background-size .22s var(--ease), color .18s var(--ease);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding-bottom:2px;
}
.ilink:hover,.prose a:hover{text-decoration:none;background-size:100% 1.5px,100% 1.5px}
.legal a{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;
  transition:background-size .22s var(--ease), color .18s var(--ease);
  padding-bottom:2px;
}
.legal a:hover{text-decoration:none;background-size:100% 1px}
@media (min-width:1101px){
  .main-nav a{border-bottom:none;
    background-image:linear-gradient(var(--ia-blue),var(--ia-blue));
    background-repeat:no-repeat;background-position:0 100%;background-size:0% 2px;
    transition:background-size .22s var(--ease), color .18s var(--ease);
    padding:6px 2px 8px;
  }
  .main-nav > ul > li > a:hover{background-size:100% 2px}
  .main-nav a.is-active{background-size:100% 2px}
}

/* --- FINESSE 9 · Gestaffelte Einblendung: Ablauf-Timeline (spf) + Saeulen (ueber-uns).
       Gleiches Muster wie der Stagger-Block Z.812; einmalig beim Scrollen. --- */
.reveal .timeline > .step,
.reveal .pillars > *{
  opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.reveal.is-visible .timeline > .step,
.reveal.is-visible .pillars > *{opacity:1;transform:none}
.reveal.is-visible .timeline > .step:nth-child(2){transition-delay:.09s}
.reveal.is-visible .timeline > .step:nth-child(3){transition-delay:.18s}
.reveal.is-visible .timeline > .step:nth-child(4){transition-delay:.27s}
.reveal.is-visible .pillars > :nth-child(2){transition-delay:.09s}
.reveal.is-visible .pillars > :nth-child(3){transition-delay:.18s}
@media (prefers-reduced-motion:reduce){
  .reveal .timeline > .step,.reveal .pillars > *{opacity:1;transform:none;transition:none}
}

/* --- FINESSE 10 · Footer-Veredelung: mehr Luft, groesseres Logo, einheitliche Kacheln --- */
.site-footer{padding:clamp(56px,8vw,110px) 0 36px}
.footer-logo{height:42px}
.trust-logo{min-width:150px}
.footer-divider{margin:44px 0 36px}
.footer-bottom{margin-top:40px}

/* --- FINESSE 11 · Unsichtbares Handwerk (5 Minis) --- */
::selection{background:var(--blue-soft);color:var(--graphite)}
.site-footer ::selection{background:rgba(134,194,235,.3);color:#fff}
:focus-visible{border-radius:0}
html{scrollbar-gutter:stable;-webkit-tap-highlight-color:transparent}
a,button,summary{-webkit-tap-highlight-color:transparent}
.accordion summary,.person-disc > summary,.quals-toggle > summary{-webkit-user-select:none;user-select:none}

/* --- FINESSE 12 · Akkordeon: Plus dreht weich zum X (statt hartem Bildtausch) --- */
.accordion summary::after{transition:transform .25s var(--ease)}
.accordion details[open] > summary::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1D1B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  transform:rotate(45deg);
}
/* --- FINESSE 6 · Kapiteltitel: strukturelle h2.eyebrow als ruhige echte Titel
       (faq-Kategorien; haltung "Unsere Haltung"/"Unser fachliches Handwerk";
        ueber-uns "Wer wir sind"/"Der Name") — CAPS-Optik verschwindet,
        Bedeutungsfarbe (blau/violett/gruen) bleibt als feines Signal. --- */
h2.eyebrow{
  font-size:clamp(1.5rem, 1.15rem + 1.5vw, 2.4rem);
  font-weight:500;
  letter-spacing:-.014em;
  text-transform:none;
  display:block;
  margin-bottom:1rem;
}

/* --- LANDING-UMBAU 2026-07-02 · Hero-Button + groessere Kapazitaeten-Topbar --- */
.hero:not(.hero--page) .btn-row{margin-top:1.3rem}
.hero:not(.hero--page) h1{-webkit-hyphens:auto;hyphens:auto}
.topbar{font-size:1.02rem;color:var(--ink);font-weight:600}
.topbar .wrap{padding-top:11px;padding-bottom:11px}
#angebote .card__head h3,.kontakt-karte .card__head h3{font-size:1.3rem;-webkit-hyphens:auto;hyphens:auto}
#angebote .card--link .card__body,.kontakt-karte .card__body{background:transparent}
.kontakt-karte{flex-direction:row;align-items:center;justify-content:space-between;gap:18px;padding:22px 28px;max-width:520px}
.kontakt-karte h3{font-size:1.3rem;margin:0 0 .15rem}
.kontakt-karte .muted{margin:0}
.kontakt-karte .card-arrow{margin:0;padding:0;align-self:center}
.sp-intro{padding:0 28px;margin:0 0 12px;color:var(--muted);font-weight:500}
.angebote-layout{display:grid;grid-template-columns:2.1fr 1fr;gap:28px;align-items:stretch}
#angebote .card{border:1.5px solid rgba(29,29,27,.28)}
.angebot-spf{overflow:hidden}
.angebot-spf__link{display:block;color:inherit;flex:1}
.angebot-spf__link .card__body{padding-bottom:16px}
.angebote-neben{display:flex;flex-direction:column;gap:28px}
.angebote-neben > .card{flex:1}
.sp-row--in{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:0 28px 24px}
.sp-kachel{display:flex;flex-direction:column;position:relative;padding:20px 22px 16px;color:var(--graphite);transition:transform .18s var(--ease)}
.sp-kachel--ne{background:var(--ne-sage)}
.sp-kachel--m{background:var(--m-violet)}
.sp-kachel--plain{background:var(--surface);border:1px solid var(--line)}
.sp-kachel--plain .card-arrow,.karte-workshops .card-arrow{color:var(--violet-ink)}
.sp-kachel h3{font-size:1.15rem;margin:0}
.sp-kachel .muted{color:var(--graphite);font-weight:500;margin:.1rem 0 0}
.sp-kachel .sp-text{margin:.55rem 0 0;font-size:.95rem;line-height:1.55}
.sp-kachel .card-arrow{margin-top:auto;padding-top:.8rem;font-size:1.15rem}
.sp-kachel--ne .card-arrow{color:var(--sage-ink)}
.sp-kachel--m .card-arrow{color:var(--violet-ink)}
.sp-kachel:hover{outline:2px solid var(--graphite);transform:translateY(-2px)}
.sp-kachel:hover .card-arrow{transform:translateX(4px)}
@media (max-width:900px){.angebote-layout{grid-template-columns:1fr}}
@media (max-width:600px){.sp-row--in{grid-template-columns:1fr}}
#hintergrund{padding-top:0;margin-top:0}
#hintergrund .accordion summary{font-size:1.5rem;font-weight:500;flex-wrap:wrap}
.accordion summary .acc-titel{flex:1;min-width:0}
.accordion summary .acc-teaser{flex-basis:100%;order:10;margin:.4rem 0 0 30px;font-size:1.05rem;font-weight:400;color:var(--muted)}
.accordion details[open] summary .acc-teaser{display:none}
#spezialisierung .accordion summary,#anfragewege .accordion summary{font-size:1.5rem;font-weight:500;flex-wrap:wrap}
#hintergrund .accordion{margin-top:0}
#haltung .principle h3{font-size:1.3rem;margin-bottom:.25rem}
#haltung .principles{margin-top:1.4rem;gap:22px}

/* --- FINESSE 1 · Weissraum-Rhythmus: mehr Luft zwischen den Kapiteln (Headspace-Mass) --- */
main > section{padding-block:clamp(36px,5vw,80px)}

/* --- FINESSE 2 · Hero-Titel auf die Designteam-Skala (bis 72px), leichter (Gewicht 400).
       Unterseiten eine Stufe darunter (~64px) fuer die Hierarchie Startseite > Unterseite. --- */
.hero__message h1{font-size:var(--fs-h1);font-weight:400}
.hero--page h1{font-size:clamp(2.2rem, 1.4rem + 3.4vw, 4rem);font-weight:400}
@media (max-width:480px){.hero__message h1,.hero--page h1{font-size:clamp(1.5rem, 7.2vw, 1.75rem)}}

/* --- FINESSE 4 · Kindeswohl-Leitsatz als grosser typografischer Moment (Variante A:
       blaue Haltungs-Flaeche bleibt, grosszuegig, grosse leichte Schrift) --- */
.quote{font-size:clamp(1.35rem, 1.05rem + 1.3vw, 1.9rem);font-weight:400;line-height:1.45;padding:clamp(26px,3.5vw,44px) clamp(28px,4vw,52px);margin:2.6rem 0 1.2rem}

/* --- CTA-Band (kosten): Text links, Button rechts — ausgewogene Zeile --- */
.cta-band{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
.cta-band h2{margin-bottom:.5rem}

/* --- ACC-KARTE: Dropdown im alten Kopf/Koerper-Design (kraeftiger Farbkopf,
       weisser Koerper; geschlossen kompakt; Teaser verschwindet beim Oeffnen) --- */
.acc-karte{border-top:none;background:var(--surface);border:1px solid var(--line)}
.acc-karte + .acc-karte{margin-top:14px}
.acc-karte details{border-bottom:none}
.acc-karte summary{padding:18px 24px}
.acc-karte summary:hover{padding-left:31px}
.acc-karte summary::before{display:none}
.acc-karte--ne summary{background:var(--ne-sage)}
.acc-karte--m summary{background:var(--m-violet)}
.acc-karte--ia summary{background:var(--ia-blue)}
.acc-karte summary .acc-teaser{color:var(--graphite);opacity:.85;margin:.3rem 0 0}
.acc-karte .acc-body{padding:18px 24px 24px;margin-left:0;border-left:none}

/* --- WEG-TIMELINE (spf #anfragewege): Station 1 = freiwilliger Einstieg --- */
.weg-timeline .step--optional::before{border-style:dashed;box-shadow:none;background:transparent}
.weg-timeline .step--optional h3{font-size:1.02rem}
.weg-timeline .step--optional p{font-size:.95rem;color:var(--muted);max-width:60ch}
.weg-timeline::after{content:"";position:absolute;left:10px;top:calc(100% - 4px);width:2px;height:calc(2*clamp(36px,5vw,80px) + clamp(12px,2vw,24px) + 2px);background:repeating-linear-gradient(to bottom, color-mix(in srgb, var(--ia-blue) 75%, transparent) 0 6px, transparent 6px 12px)}
.timeline--anschluss::after{content:"";position:absolute;left:10px;bottom:calc(100% - 6px);width:2px;height:30px;background:repeating-linear-gradient(to top, color-mix(in srgb, var(--ia-blue) 75%, transparent) 0 6px, transparent 6px 12px)}
.timeline--anschluss .step:last-child::after{content:"";position:absolute;left:-30px;top:26px;bottom:-8px;width:8px;background:var(--page)}

/* ===== /FINESSEN 2026-07-02 ===== */

/* ===== BAND-SLIM 2026-07-03: kompakte blaue Hinweis-Baender (kosten + kontakt).
   Zurueck: Block loeschen + Klasse .band--slim in kosten.html/kontakt.html entfernen. ===== */
main > section.band--slim{padding-block:clamp(22px,3vw,38px)}
.band--slim h2{font-size:var(--fs-h3);margin-bottom:.4rem}
.band--slim p{font-size:1rem}
.band--slim .btn--ghost{padding:.72rem 1.6rem;font-size:.95rem}
/* Textblock gibt nach, damit der Knopf rechts in der Zeile bleibt (statt darunter zu rutschen) */
.cta-band > div:first-child{flex:1 1 22rem;min-width:min(100%, 18rem)}
.cta-band .btn-row{flex:0 0 auto}
/* ===== /BAND-SLIM 2026-07-03 ===== */

/* ===== SEKTIONS-KLAPP 2026-07-03: «Der Weg zur SPF» + «Wie eine Begleitung abläuft» kompakt:
   Timeline (Strich + Vierecke + Titel + 1 Kurz-Satz) immer sichtbar, Volltexte per Knopf rechts.
   Zurueck: Block loeschen, Klassen sek-klapp/klapp-btn/klapp-detail/step-kurz in spf.html entfernen,
   site.js-Abschnitt «Sektions-Klapper» loeschen. ===== */
/* Layout: Knopf rechts NEBEN der Timeline (spart Hoehe), auf schmalen Screens darunter */
.sek-klapp{display:grid;grid-template-columns:calc(8.4*var(--fs-h2)) 1fr;align-items:center;column-gap:clamp(18px,2.5vw,30px)}
/* Titelspalte = feste Breite in beiden Sektionen (10x h2-Schriftgroesse, skaliert mit) -> Knoepfe exakt buendig */
.sek-klapp > h2{grid-column:1}
.sek-klapp > .timeline{grid-column:1 / -1;grid-row:2}
.sek-klapp > .klapp-btn{grid-column:2;grid-row:1;align-self:center;justify-self:start;margin:0}
.sek-klapp > .klapp-detail{grid-column:1 / -1}
/* Kurz-Satz: nur im zugeklappten Zustand sichtbar */
.sek-klapp .step-kurz{display:none;font-size:.95rem;color:var(--muted);max-width:60ch;margin-top:.1rem}
.sek-klapp.zu .timeline .step p{display:none}
.sek-klapp.zu .timeline .step p.step-kurz{display:block}
.sek-klapp.zu .klapp-detail{display:none}
.sek-klapp.zu .timeline{gap:20px;margin-bottom:0}
/* deutlich sichtbarer Auf-/Zuklapp-Knopf */
.klapp-btn{display:inline-flex;align-items:center;gap:10px;padding:.68rem 1.5rem;border:1.5px solid var(--blue-ink);border-radius:var(--radius-pill);background:transparent;color:var(--blue-ink);font:inherit;font-size:.95rem;font-weight:600;letter-spacing:.005em;cursor:pointer;transition:background .2s var(--ease);white-space:nowrap}
.klapp-btn[hidden]{display:none}
.klapp-btn:hover{background:color-mix(in srgb, var(--blue-ink) 9%, transparent)}
.klapp-btn::before{content:"+";font-size:1.3rem;font-weight:500;line-height:1;transform:translateY(-1px)}
.klapp-btn[aria-expanded="true"]::before{content:"\2212"}
/* Weg + Begleitung ruecken als Paar naeher zusammen (nur die Naht zwischen beiden) */
#anfragewege{padding-bottom:clamp(22px,3vw,40px);margin-bottom:0}
#ablauf{padding-top:clamp(22px,3vw,40px);margin-top:0}
.weg-timeline::after{height:calc(2*clamp(22px,3vw,40px) + 2px)}
@media (max-width: 700px){
  .sek-klapp{display:block}
  .sek-klapp > .klapp-btn{margin:20px 0 0 38px}
  /* Knopfzeile unter der Timeline: gestrichelte Linie entsprechend verlaengern */
  .weg-timeline::after{height:calc(2*clamp(22px,3vw,40px) + 76px)}
}
/* ===== /SEKTIONS-KLAPP 2026-07-03 ===== */

/* ===== HALTUNG-METHODEN VISUELL 2026-07-03: Angleichung an die ueberarbeiteten Seiten.
   Nr.-Verweise = Vorschlagsliste vom 03.07. Zurueck: einzelne Regeln loeschen
   (HTML-Rueckbau siehe Sicherung _Archiv_nemia/haltung-methoden_vor-visuell_2026-07-03.html). ===== */
/* Nr.5: KPG-Grafik – vormals Inline-Styles, pixelgleich ins CSS gezogen */
.kpg-phase{background:var(--blue-soft);border:1px solid #D3E8F6}
.kpg-phase > .eyebrow{color:var(--blue-ink)}
.kpg-num{background:#fff;border:2px solid var(--blue-ink);color:var(--blue-ink)}
.kpg-step .small{margin:0}
/* Nr.6: Rueckfuehrungsbogen gestrichelt – gleiche Liniensprache wie die spf-Timeline-Naht */
.kpg-loop__arc path:first-child{stroke-dasharray:6 6}
/* ===== /HALTUNG-METHODEN VISUELL 2026-07-03 ===== */

/* ===== START-BANNER 2026-07-03: Outline-Badge (Design 7) im Hero, blendet sich per site.js ab 1.8.2026 aus.
   Zurueck: diesen Block + das div.hero__start in index.html + den site.js-Abschnitt "Zeit-Ausblenden" loeschen. ===== */
.hero__start{position:absolute;right:clamp(14px,4vw,40px);bottom:6px;z-index:3}
.start-badge{display:inline-flex;align-items:center;gap:.55rem;border:1.5px solid var(--blue-ink);color:var(--blue-ink);background:var(--page);border-radius:var(--radius-pill);padding:.6rem 1.25rem;font-weight:600;font-size:1rem;white-space:nowrap}
.start-badge__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--ia-blue);flex:none}
@media (max-width:820px){
  .hero__start{position:static;margin-top:22px}
  .start-badge{font-size:.92rem;white-space:normal}
}
/* ===== /START-BANNER 2026-07-03 ===== */

/* ===== SPF-FEINSCHLIFF 2026-07-03 ===== */
/* Hero-Titel bricht nur am gesetzten <br>, keine haesslichen Wort-Trennungen (Sozialpäd-agogische) */
.hero--media h1{-webkit-hyphens:manual;hyphens:manual}
/* Titelspalte breiter (Illu schmaler), damit der Titel gross sein kann ohne zu quetschen – nur zweispaltig (>760px) */
@media (min-width:761px){.hero--media .hero__cols{grid-template-columns:1.45fr .7fr}}
@media (min-width:481px){.hero--media .hero__message h1{font-size:clamp(2rem, 0.4rem + 3.85vw, 3.6rem)}}
/* "Neurodivergenz und Medien"-Titel naeher an den vorangehenden Abschnitt ruecken */
#spf{padding-bottom:clamp(14px,2vw,26px)}
#spezialisierung{padding-top:0}
/* ===== /SPF-FEINSCHLIFF 2026-07-03 ===== */

/* ===== KOSTEN-KAESTCHEN 2026-07-03: 3 kompakte Info-Boxen nebeneinander + schlichte Tarif-Ueberschrift ===== */
.kost-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:stretch}
.kost-card{background:var(--blue-soft);border:1.5px solid #CFE6F7;padding:20px 22px}
.kost-card__t{font-weight:600;color:var(--blue-ink);font-size:1.06rem;line-height:1.3;margin:0 0 .4rem;letter-spacing:0}
.kost-card p{font-size:.95rem;color:var(--graphite);margin:0;line-height:1.45}
.kost-h-schlicht{font-size:1.35rem;font-weight:600;letter-spacing:-.008em;margin-bottom:.35rem}
@media (max-width:720px){ .kost-cards{grid-template-columns:1fr} }
/* ===== /KOSTEN-KAESTCHEN 2026-07-03 ===== */

/* ===== KOSTEN-KOMPAKT 2026-07-03: engere Abstaende, Symbole, kleinere CTA ===== */
body.kosten-kompakt main > section{padding-block:clamp(18px,2.6vw,40px)}
.kost-card svg{width:24px;height:24px;color:var(--blue-ink);display:block;margin-bottom:10px}
body.kosten-kompakt .cta-band h2{font-size:1.2rem;margin-bottom:.25rem}
body.kosten-kompakt .cta-band p{font-size:.95rem}
/* ===== /KOSTEN-KOMPAKT 2026-07-03 ===== */

/* ===== KONTAKT-REDESIGN 2026-07-03: Ort-Kärtchen (neutral, mit Symbol) ===== */
.ort-card{display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1.5px solid var(--line);padding:20px 22px;max-width:34rem}
.ort-card > svg{flex:none;width:26px;height:26px;color:var(--blue-ink);margin-top:2px}
.ort-card .address{margin:.15rem 0 .4rem;font-weight:600}
.ort-card .muted{margin:0}
/* ===== /KONTAKT-REDESIGN 2026-07-03 ===== */

/* ===== KONTAKT-KOMPAKT 2026-07-03: zwei Kärtchen nebeneinander + engere Abstände ===== */
body.kontakt-kompakt main > section{padding-block:clamp(30px,4.5vw,66px)}
.kontakt-zwei{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:stretch}
.kontakt-zwei .ort-card{max-width:none}
.k-person{margin:0;line-height:1.5}
.k-person + .k-person{margin-top:.9rem}
@media (max-width:720px){ .kontakt-zwei{grid-template-columns:1fr} }
/* Kontakt-Karten: schlankes blaues Icon oben (statt dunklem Badge) */
.card-ico{width:26px;height:26px;color:var(--blue-ink);display:block;margin:0 0 12px}
/* ===== /KONTAKT-KOMPAKT 2026-07-03 ===== */

/* ===== ES-STICKER 2026-07-05: runder «Español»-Hinweis unter der SPF-Hero-Illustration.
   Zurueck: Block loeschen + p.es-sticker in spf.html entfernen. ===== */
.haus-wrap{position:relative;display:inline-block}
.haus-wrap img{height:clamp(200px,30vh,290px);width:auto;max-width:none}
@media (max-width:760px){ .haus-wrap img{height:220px} }
.es-sticker{position:absolute;left:-96px;bottom:-16px;width:118px;height:118px;border-radius:50%;background:var(--blue-soft);border:1.5px solid var(--blue-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(-6deg);gap:2px;margin:0}
.es-sticker b{font-size:1.05rem;color:var(--blue-ink);font-weight:700;line-height:1}
.es-sticker span{font-size:.68rem;color:var(--graphite);line-height:1.25;max-width:92px}
@media (max-width:760px){
  .es-sticker{width:104px;height:104px;left:-78px;bottom:-12px}
}
/* ===== /ES-STICKER 2026-07-05 ===== */

/* ===== FOTO-WECHSEL 2026-07-07: zwei Bilder sanft abwechselnd (ueber-uns #warum-nemia) ===== */
.foto-wechsel{position:relative}
.foto-wechsel .foto-wechsel__b{position:absolute;inset:0;height:100%;object-fit:cover;opacity:0;animation:fotoWechsel 14s ease-in-out infinite}
@keyframes fotoWechsel{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){
  .foto-wechsel .foto-wechsel__b{animation:none;opacity:0}
}
/* ===== /FOTO-WECHSEL 2026-07-07 ===== */

/* ===== KONTAKT-KARTEN zentrieren 2026-07-07: Karte darf ihre Grid-Spalte nicht ueberragen (lange E-Mail zwang sie breiter -> wirkte mobil nach links verschoben) ===== */
.kontakt-zwei .ort-card{min-width:0}
.kontakt-zwei .ort-card > div{min-width:0}
.ort-card a[href^="mailto"]{overflow-wrap:anywhere}
/* ===== /KONTAKT-KARTEN 2026-07-07 ===== */

/* ===== PH-SCHALTER 2026-07-20: Ein/Aus-Schalter Reichweitenmessung (datenschutz Ziffer 9) ===== */
.ph-schalter{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1.5px solid var(--line);padding:16px 18px;margin:1.1rem 0}
.ph-schalter p{margin:0}
.ph-schalter__titel{font-weight:600}
.ph-schalter__status{font-size:.92rem}
.ph-switch{position:relative;width:54px;height:30px;flex:none;border-radius:999px;border:1.5px solid var(--blue-ink);background:var(--blue-ink);cursor:pointer;padding:0;transition:background .15s var(--ease)}
.ph-switch .ph-knopf{position:absolute;top:2px;left:26px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .15s var(--ease)}
.ph-switch[aria-checked="false"]{background:#fff}
.ph-switch[aria-checked="false"] .ph-knopf{left:2px;background:var(--blue-ink)}
@media (max-width:480px){
  .ph-schalter{flex-direction:column;align-items:flex-start;gap:12px}
}
/* ===== /PH-SCHALTER ===== */

/* ===== GLV-HINWEIS 2026-07-20: Fachbegriff-Satz unter dem KJA-Logo im Footer (Variante A) ===== */
.glv-note{color:#C9C2BA;font-size:.85rem;line-height:1.5;margin:10px 0 0;max-width:30em}
/* ===== /GLV-HINWEIS ===== */