/* ==========================================================================
   Smile Akademie — Designsystem
   CI-Werte stehen alle in :root. Sobald Logo und Live-Screenshot vorliegen,
   werden nur diese Variablen getauscht — der Rest bleibt unverändert.
   ========================================================================== */

:root{
  /* --- Markenfarben, ausgelesen aus dem Sommerschule-Plakat 2026 --- */
  --brand:        #056065;   /* Petrol, Hausfarbe */
  --brand-dark:   #03474b;   /* dunkler, für Hover und Fußbereich */
  --brand-mid:    #49b3b4;   /* helles Türkis, Zweitfarbe */
  --brand-light:  #e4f1f1;   /* sehr helle Fläche */
  --accent:       #e6c542;   /* Gelb, Sonne und Auszeichnungen */
  --accent-dark:  #b89613;   /* Gelb für Text auf Weiß, kontraststark */

  /* --- Neutrale Töne --- */
  --ink:      #1c2426;
  --ink-2:    #4a5457;
  --ink-3:    #78827f;
  --line:     #e2e6e6;
  --bg:       #ffffff;
  --bg-soft:  #f0efed;   /* warmes Cremeweiß aus der CI */

  /* --- Maße --- */
  --wrap:     1120px;
  --radius:   12px;
  --gap:      clamp(1.5rem, 4vw, 3rem);

  --font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  font-family:var(--font);
  font-size:clamp(16px, 1rem + .15vw, 17.5px);
  line-height:1.65;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block }

a{ color:var(--brand-dark) }
a:hover{ color:var(--brand) }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem) }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--brand); color:#fff; padding:.75rem 1.25rem;
}
.skip:focus{ left:0 }

/* ------------------------------- Kopfbereich ----------------------------- */

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; gap:1rem;
  min-height:76px;
}
.logo{ display:flex; align-items:center; margin-right:auto }
.logo img{ height:38px; width:auto }

.navtoggle{ position:absolute; opacity:0; pointer-events:none }

.burger{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:10px; cursor:pointer; margin-left:auto;
}
.burger span{ display:block; height:2px; background:var(--ink); border-radius:2px }

.mainnav{ display:none }
.mainnav ul{ list-style:none; margin:0; padding:0 }
.mainnav a{
  display:block; padding:.7rem 0; color:var(--ink);
  text-decoration:none; font-weight:600; font-size:.98rem;
}
.mainnav a:hover, .mainnav a.active{ color:var(--brand) }
.mainnav .sub a{ font-weight:500; color:var(--ink-2); padding:.45rem 0 }
.chev{ display:none }

.navtoggle:checked ~ .mainnav{
  display:block; position:absolute; left:0; right:0; top:100%;
  background:#fff; border-bottom:1px solid var(--line);
  padding:.5rem clamp(1rem,4vw,2rem) 1.5rem;
  max-height:calc(100vh - 68px); overflow:auto;
}
.navtoggle:checked ~ .mainnav .sub{ padding-left:1rem; border-left:2px solid var(--line) }

.btn{
  display:inline-block; background:var(--brand); color:#fff;
  padding:.7rem 1.35rem; border-radius:999px; text-decoration:none;
  font-weight:600; font-size:.97rem; line-height:1.3;
  transition:background .15s ease;
}
.btn:hover{ background:var(--brand-dark); color:#fff }
.btn-ghost{
  background:transparent; color:var(--brand-dark);
  box-shadow:inset 0 0 0 1.5px var(--brand);
}
.btn-ghost:hover{ background:var(--brand-light); color:var(--brand-dark) }
.btn-header{ display:none }

@media (min-width:920px){
  .burger{ display:none }
  .btn-header{ display:inline-block }
  .mainnav{ display:block; margin-right:1.25rem }
  .mainnav > ul{ display:flex; gap:1.75rem; align-items:center }
  .mainnav a{ padding:.4rem 0 }
  .chev{ display:inline-block; margin-left:.35rem; vertical-align:middle; opacity:.6 }
  .mainnav .has-sub{ position:relative }
  .mainnav .sub{
    position:absolute; top:100%; left:-1rem; min-width:250px;
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:0 12px 30px rgba(0,0,0,.09);
    padding:.5rem; opacity:0; visibility:hidden; transform:translateY(6px);
    transition:opacity .14s ease, transform .14s ease;
  }
  .mainnav .has-sub:hover .sub,
  .mainnav .has-sub:focus-within .sub{ opacity:1; visibility:visible; transform:none }
  .mainnav .sub a{ padding:.5rem .75rem; border-radius:8px }
  .mainnav .sub a:hover{ background:var(--brand-light) }
}

/* --------------------------------- Hero ---------------------------------- */

.hero{
  background:linear-gradient(180deg, var(--brand-light) 0%, #fff 100%);
  padding:clamp(2.5rem,7vw,4.5rem) 0 clamp(1.5rem,4vw,2.5rem);
}
.hero h1{
  margin:0 0 .6rem;
  font-size:clamp(1.85rem, 1.2rem + 2.6vw, 3rem);
  line-height:1.15; letter-spacing:-.02em; max-width:20ch;
}
.hero .lead{
  margin:0; font-size:clamp(1.05rem,1rem + .5vw,1.3rem);
  color:var(--ink-2); max-width:60ch;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin:1.6rem 0 0 }

/* -------------------------------- Inhalt --------------------------------- */

.prose{ padding-block:clamp(2rem,5vw,3.5rem) }
.prose > *{ max-width:70ch }
.prose h2{
  margin:2.6rem 0 .8rem; font-size:clamp(1.3rem,1.1rem + 1vw,1.75rem);
  line-height:1.25; letter-spacing:-.01em;
}
.prose h3{ margin:2rem 0 .5rem; font-size:1.18rem; line-height:1.3 }
.prose h4{ margin:1.5rem 0 .4rem; font-size:1.03rem; color:var(--ink-2) }
.prose p{ margin:0 0 1.1rem }
.prose ul{ margin:0 0 1.2rem; padding-left:1.3rem }
.prose li{ margin-bottom:.45rem }
.prose > h2:first-child{ margin-top:0 }

/* Karten-Raster für Leistungsübersichten */
.cardgrid{
  display:grid; gap:1rem; max-width:none;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  margin:1.5rem 0 2rem;
}
.card{
  position:relative;
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.3rem 1.4rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.card:hover{ border-color:var(--brand-mid); box-shadow:0 6px 20px rgba(5,96,101,.10) }
.card h3{ margin:0 0 .4rem; font-size:1.1rem; line-height:1.3 }
.card h3 a{ text-decoration:none; color:var(--ink) }
.card h3 a::after{ content:''; position:absolute; inset:0 }
.card:hover h3 a{ color:var(--brand-dark) }
.card p{ margin:0; color:var(--ink-2); font-size:.97rem }

/* Hinweisblock */
.infobox{
  max-width:none; background:var(--brand-light);
  border-left:3px solid var(--brand); border-radius:0 var(--radius) var(--radius) 0;
  padding:1.15rem 1.35rem; margin:1.75rem 0;
}
.infobox p:last-child{ margin-bottom:0 }

/* Handlungsaufforderung */
.cta{
  max-width:none; background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--radius); padding:clamp(1.5rem,4vw,2.25rem);
  margin:2.5rem 0 .5rem; text-align:center;
}
.cta h2{ margin-top:0 }
.cta p{ margin-inline:auto; max-width:52ch; color:var(--ink-2) }

/* Standort-Raster */
.locationgrid{
  display:grid; gap:1rem; max-width:none;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin:1.5rem 0;
}

/* -------------------------------- Fußbereich ----------------------------- */

.site-footer{
  margin-top:clamp(3rem,7vw,5rem);
  background:var(--ink); color:#cfd8d6;
  padding:clamp(2.5rem,6vw,4rem) 0 1.5rem;
  font-size:.95rem;
}
.site-footer a{ color:#fff; text-decoration:none }
.site-footer a:hover{ text-decoration:underline; color:#fff }
.footer-top{ display:grid; gap:2.5rem }
@media (min-width:820px){ .footer-top{ grid-template-columns:1fr 1.35fr; gap:3.5rem } }
.claim{ color:#fff; font-size:1.2rem; font-weight:600; line-height:1.35; margin:0 0 1.25rem }
.contact{ margin:0 0 1.25rem; line-height:1.9 }
.hours{ margin:0 0 1.25rem; color:#a9b5b2; font-size:.9rem }
.hours strong{ color:#cfd8d6; font-weight:600 }
.social{ display:flex; gap:1.25rem; margin:0 }
.footer-locs{
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.loc{ display:flex; flex-direction:column; gap:.15rem }
.loc strong{ color:#fff; margin-bottom:.25rem }
.loc-note{ color:var(--accent); font-size:.87rem; margin-top:.35rem; line-height:1.5 }
.footer-bottom{
  display:flex; flex-wrap:wrap; gap:1.25rem;
  margin-top:2.5rem; padding-top:1.25rem;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.88rem; color:#8e9a97;
}

@media print{
  .site-header,.site-footer,.hero-actions{ display:none }
  body{ font-size:11pt }
}

/* ==========================================================================
   Bilder, Bildstrecken und Bewegung beim Scrollen
   ========================================================================== */

.fig{
  margin:0; overflow:hidden; border-radius:var(--radius);
  background:var(--bg-soft);
}
.fig img{ width:100%; height:100%; object-fit:cover }

/* Hero mit Bild: Text links, Bild rechts, am Handy untereinander */
.hero-split{ padding-bottom:0 }
.hero-inner{ display:grid; gap:clamp(1.5rem,4vw,3rem); align-items:center }
.hero-split .hero-inner{ padding-bottom:clamp(2rem,5vw,3.5rem) }
.hero-fig{
  aspect-ratio:4/3; max-height:min(52vh,460px);
  box-shadow:0 18px 50px rgba(5,96,101,.18);
}
.hero-fig img{ transform:scale(1.04); transition:transform 1.2s cubic-bezier(.2,.7,.3,1) }
.hero-split:hover .hero-fig img{ transform:scale(1) }
@media (min-width:900px){
  .hero-split .hero-inner{ grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem) }
  .hero-fig{ aspect-ratio:5/4 }
}

/* Wechselnde Bild-Text-Abschnitte */
.media{
  max-width:none; display:grid; gap:clamp(1.25rem,3vw,2.5rem);
  align-items:center; margin:clamp(2.5rem,6vw,4rem) 0;
}
.media .fig{ aspect-ratio:4/3 }
.media .fig img{ transition:transform .9s cubic-bezier(.2,.7,.3,1) }
.media:hover .fig img{ transform:scale(1.045) }
.media-body > :first-child{ margin-top:0 }
.media-body > :last-child{ margin-bottom:0 }
@media (min-width:820px){
  .media{ grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,3.5rem) }
  .media-reverse .fig{ order:2 }
  .media .fig{ aspect-ratio:1/1 }
}

/* Vollbreiter Farbstreifen zum Rhythmisieren langer Seiten */
.band{
  max-width:none; background:var(--brand-light);
  border-radius:var(--radius);
  padding:clamp(1.75rem,5vw,3rem) clamp(1.25rem,4vw,2.5rem);
  margin:clamp(2.5rem,6vw,4rem) 0;
}
.band > :first-child{ margin-top:0 }
.band > :last-child{ margin-bottom:0 }

/* --- Einblenden beim Scrollen -------------------------------------------
   Die Startposition wird nur gesetzt, wenn JavaScript aktiv ist und keine
   Bewegungsreduktion gewünscht wird. Ohne JS sind alle Inhalte sofort da —
   für Google und für Textbrowser ändert sich also nichts.               */

.reveal-on [data-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),
             transform .7s cubic-bezier(.2,.7,.3,1);
  will-change:opacity, transform;
}
.reveal-on [data-reveal].is-in{ opacity:1; transform:none }

/* Karten im Raster leicht versetzt einblenden */
.reveal-on .cardgrid.is-in .card{
  animation:cardin .55s cubic-bezier(.2,.7,.3,1) backwards;
}
.reveal-on .cardgrid.is-in .card:nth-child(2){ animation-delay:.07s }
.reveal-on .cardgrid.is-in .card:nth-child(3){ animation-delay:.14s }
.reveal-on .cardgrid.is-in .card:nth-child(4){ animation-delay:.21s }
.reveal-on .cardgrid.is-in .card:nth-child(5){ animation-delay:.28s }
.reveal-on .cardgrid.is-in .card:nth-child(6){ animation-delay:.35s }
@keyframes cardin{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}

/* --- Ergänzungen zur echten CI ------------------------------------------- */

/* Gelber Akzentstrich unter Hauptüberschriften — Anlehnung an den Plakatstil */
.hero h1::after{
  content:""; display:block; width:64px; height:5px; border-radius:3px;
  background:var(--accent); margin-top:1rem;
}
.hero{ background:linear-gradient(180deg, var(--brand-light) 0%, #fff 92%) }

/* Bildzeichen im Kopfbereich etwas größer, damit der Claim lesbar bleibt */
.logo img{ height:52px }
@media (max-width:520px){ .logo img{ height:46px } }

/* Fußbereich in der Hausfarbe statt neutralem Dunkelgrau */
.site-footer{ background:var(--brand-dark); color:#c3d6d7 }
.footer-logo{ margin:0 0 1.25rem }
.footer-logo img{ height:52px; width:auto }
.hours strong{ color:#dbe8e8 }
.loc-note{ color:var(--accent) }
.footer-bottom{ color:#8fabad; border-top-color:rgba(255,255,255,.16) }

/* Sekundärer Knopf auf farbigem Grund */
.btn-ghost{ box-shadow:inset 0 0 0 1.5px var(--brand-mid) }

/* --- Standorte mit Anfahrtsskizze ---------------------------------------- */

.standorte{ max-width:none; display:grid; gap:1.25rem; margin:1.75rem 0 2.5rem }
.standort{
  display:grid; gap:1.25rem; align-items:center;
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.25rem;
}
@media (min-width:760px){ .standort{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) } }
.standort-skizze{ aspect-ratio:16/9; background:#f0efed; border:1px solid var(--line) }
.standort-skizze img{ object-fit:contain }
.standort-text h3{ margin:0 0 .35rem; font-size:1.15rem }
.standort-adr{ margin:0 0 .7rem; color:var(--ink-2); font-weight:600 }
.standort-text p{ margin:0 0 .8rem; font-size:.97rem; color:var(--ink-2) }
.standort-text p:last-child{ margin-bottom:0 }

/* Routenlink im Fußbereich */
.loc-route{
  display:inline-block; margin-top:.5rem; font-size:.88rem; font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.35); text-decoration:none !important;
}
.loc-route:hover{ border-bottom-color:#fff }

/* --- Schnell-Links (Anfrage, Termine, Portal) ---------------------------- */
.schnelllinks{ max-width:none; margin:clamp(1rem,2.5vw,1.75rem) 0 }
.schnelllinks ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem }
.schnelllinks li a{
  display:inline-flex; align-items:center; gap:.35rem;
  background:var(--bg-soft); color:var(--brand-dark);
  border:1.5px solid var(--brand-mid); border-radius:999px;
  padding:.5rem 1.15rem; text-decoration:none;
  font-weight:600; font-size:.93rem;
  transition:background .15s, color .15s, border-color .15s;
}
.schnelllinks li a:hover{ background:var(--brand); color:#fff; border-color:var(--brand) }

/* --- Offene Kurse auf der Homepage -------------------------------------- */
.kurs-section{ max-width:none; margin:clamp(2rem,5vw,3rem) 0 }
.kurs-section > h2{ margin-top:0; margin-bottom:1.1rem }
.kurs-alle{ max-width:none !important; margin-top:1.1rem }
.kurs-grid{
  display:grid; gap:.9rem; max-width:none;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.kurs-card{
  display:flex; flex-direction:column; gap:.4rem;
  background:var(--kc-bg, var(--brand-light)); color:var(--kc-fg, var(--ink));
  border-radius:var(--radius); padding:1.15rem 1.25rem;
  text-decoration:none;
  transition:box-shadow .15s, transform .15s;
}
.kurs-card:hover{ box-shadow:0 8px 24px rgba(0,0,0,.13); transform:translateY(-2px) }
.kurs-card-sub{
  font-size:.76rem; font-weight:700; opacity:.65;
  text-transform:uppercase; letter-spacing:.06em;
}
.kurs-card-name{ font-size:1.03rem; font-weight:700; line-height:1.3; color:inherit }
.kurs-card-dates{ font-size:.87rem; opacity:.8 }
.kurs-card-spots{
  font-size:.76rem; font-weight:700; margin-top:.3rem; align-self:flex-start;
  background:rgba(0,0,0,.12); border-radius:999px; padding:.18rem .6rem;
}

/* --- Sommerschule-Popup ------------------------------------------------- */
.popup-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.6); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:1rem;
  animation:popup-in .22s ease;
}
@keyframes popup-in{ from{opacity:0} to{opacity:1} }
.popup-dialog{
  position:relative; max-width:min(500px,95vw);
  border-radius:var(--radius); overflow:hidden;
  box-shadow:0 28px 70px rgba(0,0,0,.42);
}
.popup-close{
  position:absolute; top:.55rem; right:.55rem; z-index:1;
  width:34px; height:34px;
  background:rgba(0,0,0,.52); color:#fff; border:none;
  border-radius:50%; cursor:pointer;
  font-size:1.2rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .12s;
}
.popup-close:hover{ background:rgba(0,0,0,.82) }
.popup-link{ display:block; line-height:0 }
.popup-link img{ width:100%; height:auto; display:block }

/* --- Akkordeon (Förderpartner etc.) ------------------------------------- */
.accordion{ margin:1.5rem 0 }
.accordion-item{
  border:1px solid var(--line); border-radius:var(--radius);
  margin-bottom:.6rem; overflow:hidden;
}
.accordion-item summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem;
  font-weight:600; font-size:1.02rem;
  background:var(--bg-soft);
  transition:background .15s;
}
.accordion-item summary::-webkit-details-marker{ display:none }
.accordion-item summary::after{
  content:'+'; flex-shrink:0; margin-left:1rem;
  font-size:1.35rem; font-weight:400; line-height:1;
  color:var(--brand); transition:transform .2s;
}
.accordion-item[open] summary{ background:var(--brand-light) }
.accordion-item[open] summary::after{ transform:rotate(45deg) }
.accordion-item summary:hover{ background:var(--brand-light) }
.accordion-body{
  padding:.85rem 1.25rem 1.1rem;
  border-top:1px solid var(--line);
}
.accordion-body p{ margin:.6rem 0 }
.accordion-body p:first-child{ margin-top:0 }
.accordion-body p:last-child{ margin-bottom:0 }