/* =========================================================
   SHP für Bildung gGmbH — Corporate Website 2026
   Design system & styles
   ========================================================= */

:root{
  /* Brand */
  --plum:        #5e2150;
  --plum-600:    #6c2a5d;
  --plum-700:    #4c1a41;
  --plum-deep:   #34112c;
  --plum-soft:   #f5ecf2;
  --plum-tint:   #faf5f8;

  --gold:        #d9a047;
  --gold-deep:   #b9812f;
  --gold-soft:   #fbf2e1;

  --mint:        #bfe0dd;
  --mint-soft:   #eef7f6;

  /* Kita accents */
  --rose:        #e0322f;
  --tulip:       #2aa3d4;
  --bud:         #3fa24a;

  /* Neutrals */
  --ink:         #2a2230;
  --ink-soft:    #5a5360;
  --muted:       #837d8c;
  --line:        #ece6ee;
  --paper:       #fcfafb;
  --white:       #ffffff;

  /* Type */
  --serif: "Fraunces", "Georgia", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Shape */
  --r-sm: 10px;
  --r:    18px;
  --r-lg: 26px;
  --shadow-sm: 0 2px 10px rgba(52,17,44,.06);
  --shadow:    0 14px 40px -18px rgba(52,17,44,.28);
  --shadow-lg: 0 30px 70px -30px rgba(52,17,44,.42);

  --maxw: 1180px;
  --gut: clamp(20px, 5vw, 64px);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:150px; }
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.7;
  font-size:clamp(15.5px,1.05vw,17px);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:288px; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; }
ul{ list-style:none; }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.12; color:var(--plum-deep); letter-spacing:-.01em; }
h2{ font-size:clamp(1.9rem,3.6vw,2rem); }
h3{ font-size:clamp(1.25rem,2vw,1.6rem); }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
section{ position:relative; }
/* Uniform section top padding so every anchor-menu target aligns the same
   way under the fixed header (reference: #einrichtungen). Vertical rhythm is
   kept via each section's padding-bottom. */
.section{ padding-top:0; padding-bottom:clamp(64px,9vw,128px); }
#ueber-uns{ padding-bottom:clamp(12px,2vw,28px); }
/* all sections share the same (über-uns / body paper) background; the tint &
   mint variants are kept as no-op hooks so the markup needn't change */
.section--tint{ background:transparent; }
.section--mint{ background:transparent; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--sans); font-weight:700; font-size:.74rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--plum);
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--gold); border-radius:2px; }
.eyebrow--center::after{ content:""; width:26px; height:2px; background:var(--gold); border-radius:2px; }

.section-head{ max-width:740px; margin-bottom:clamp(36px,5vw,64px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head p.lead{ margin-top:18px; color:var(--ink-soft); font-size:.92rem; }

.lead{ font-size:.92rem; color:var(--ink-soft); }
.muted{ color:var(--muted); font-size:.92rem; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.95em 1.6em; border-radius:100px; font-weight:600; font-size:.96rem;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; }
.btn--primary{ background:var(--plum); color:#fff; box-shadow:0 12px 26px -12px rgba(94,33,80,.7); }
.btn--primary:hover{ background:var(--plum-700); transform:translateY(-3px); box-shadow:0 18px 34px -12px rgba(94,33,80,.8); }
.btn--gold{ background:var(--gold); color:#3a2a0a; box-shadow:0 12px 26px -12px rgba(185,129,47,.7); }
.btn--gold:hover{ background:var(--gold-deep); color:#fff; transform:translateY(-3px); }
.btn--ghost{ background:transparent; color:var(--plum); border:1.5px solid rgba(94,33,80,.25); }
.btn--ghost:hover{ border-color:var(--plum); background:var(--plum-soft); transform:translateY(-3px); }
.btn--light{ background:#fff; color:var(--plum); }
.btn--light:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }

/* ---------- Header ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .3s, box-shadow .3s, padding .3s;
  padding-block:16px;
}
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.header.scrolled{
  background:rgba(252,250,251,.85);
  backdrop-filter:saturate(180%) blur(16px);
  box-shadow:0 1px 0 var(--line), 0 10px 30px -22px rgba(52,17,44,.5);
  padding-block:10px;
}
.brand{ display:flex; align-items:center; gap:12px; z-index:2; }
.brand img{ height:100px; width:auto; max-width:none; display:block; transition:height .3s; }
.header.scrolled .brand img{ height:76px; }
.brand__sub{ display:none; }

.nav{ display:flex; align-items:center; gap:4px; }
.nav a{
  position:relative; padding:9px 13px; border-radius:8px; font-size:.92rem; font-weight:500;
  color:var(--ink); transition:color .2s, background .2s; white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:13px; right:13px; bottom:5px; height:2px;
  background:var(--gold); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .25s;
}
.nav a:hover{ color:var(--plum); }
.nav a:hover::after, .nav a.active::after{ transform:scaleX(1); }
.nav a.active{ color:var(--plum); }

.header__cta{ display:flex; align-items:center; gap:10px; }

.burger{ display:none; width:46px; height:46px; border-radius:12px; position:relative; background:var(--plum-soft); }
.burger span{ position:absolute; left:13px; right:13px; height:2px; background:var(--plum); border-radius:2px; transition:.3s; }
.burger span:nth-child(1){ top:16px; } .burger span:nth-child(2){ top:22px; } .burger span:nth-child(3){ top:28px; }
body.menu-open .burger span:nth-child(1){ top:22px; transform:rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ top:22px; transform:rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{
  position:relative; padding-top:clamp(130px,16vw,180px); padding-bottom:clamp(60px,8vw,10px);
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(217,160,71,.16), transparent 55%),
    radial-gradient(110% 80% at 5% 0%, rgba(191,224,221,.4), transparent 55%),
    linear-gradient(180deg,#fff, var(--paper));
}
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center; }
.hero__copy{ text-align:center; }
/* space between hero image and the heading/cards below */
.hero .section-head{ margin-top:clamp(48px,7vw,90px); margin-bottom:clamp(16px,2.4vw,28px); }
/* Hero feature image — gradient frame + lively effects */
.hero__figure{
  position:relative;
  margin:clamp(36px,5vw,56px) auto 0;
  max-width:min(100%,980px);
  padding:8px;
  border-radius:calc(var(--r-lg) + 8px);
  background:linear-gradient(135deg, var(--plum) 0%, var(--gold) 55%, var(--mint) 100%);
  box-shadow:var(--shadow-lg);
  isolation:isolate;
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
}
/* soft animated colour glow behind the frame */
.hero__figure::before{
  content:""; position:absolute; inset:-26px; z-index:-1;
  border-radius:inherit;
  background:
    radial-gradient(55% 70% at 18% 0%, rgba(217,160,71,.5), transparent 60%),
    radial-gradient(55% 70% at 88% 100%, rgba(94,33,80,.45), transparent 60%),
    radial-gradient(60% 65% at 60% 50%, rgba(191,224,221,.55), transparent 70%);
  filter:blur(30px);
  opacity:.75;
  animation:heroGlow 9s ease-in-out infinite alternate;
}
.hero__figure img{
  display:block; width:100%; height:auto; max-width:none;
  border-radius:var(--r-lg);
  aspect-ratio:1046 / 501; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
/* moving glossy shine sweep across the photo */
.hero__figure::after{
  content:""; position:absolute; inset:8px;
  border-radius:var(--r-lg); pointer-events:none;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.42) 47%, transparent 62%);
  background-size:250% 100%; background-position:160% 0;
  mix-blend-mode:overlay;
  animation:heroShine 7s ease-in-out 1.4s infinite;
}
.hero__figure:hover{ transform:translateY(-6px); box-shadow:0 44px 90px -30px rgba(52,17,44,.55); }
.hero__figure:hover img{ transform:scale(1.05); }

@keyframes heroGlow{
  from{ opacity:.5;  transform:scale(.98); }
  to{   opacity:.9;  transform:scale(1.03); }
}
@keyframes heroShine{
  0%{ background-position:160% 0; }
  55%,100%{ background-position:-90% 0; }
}
@media (prefers-reduced-motion:reduce){
  .hero__figure::before, .hero__figure::after{ animation:none; }
  .hero__figure, .hero__figure img{ transition:none; }
}
.hero h1{
  font-size:clamp(2.7rem,6vw,4.7rem); line-height:1.02; letter-spacing:-.02em;
}
.hero h1 .dot{ color:var(--gold); }
.hero h1 .mark{ position:relative; white-space:nowrap; }
.hero__lead{ margin-top:10px; font-size:.92rem; color:var(--ink-soft); max-width:max-content; margin-left:auto; margin-right:auto; }
.hero__cta{ margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; }
.hero__stats{ margin-top:46px; display:flex; gap:clamp(20px,4vw,46px); flex-wrap:nowrap; }
.stat b{ font-family:var(--serif); font-size:clamp(1.8rem,3vw,2.5rem); color:var(--plum); display:block; line-height:1; }
.stat span{ font-size:.86rem; color:var(--muted); }

/* Hero visual */
.hero__visual{ position:relative; }
.hero__cards{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.photo{
  position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:3/4;
  background:linear-gradient(150deg,var(--plum),var(--plum-700));
  box-shadow:var(--shadow);
  display:grid; place-items:center; color:#fff;
}
.photo--mint{ background:linear-gradient(150deg,#7fc4bd,#3f9f97); }
.photo--gold{ background:linear-gradient(150deg,var(--gold),var(--gold-deep)); }
.photo:nth-child(2){ margin-top:42px; aspect-ratio:3/3.4; }
.photo__deco{ position:absolute; inset:0; opacity:.22; z-index:0; }

/* Big framed Gütesiegel certificate */
.cert-big{
  position:relative; max-width:480px; margin-inline:auto;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px; box-shadow:var(--shadow-lg);
  animation:certfloat 7s ease-in-out infinite;
}
.cert-big img{ width:100%; max-width:100%; height:auto; display:block; border-radius:10px; }
/* gold accent ring on hover */
.cert-big::after{
  content:""; position:absolute; inset:6px; border-radius:calc(var(--r-lg) - 6px);
  border:2px solid transparent; transition:border-color .3s; pointer-events:none;
}
.cert-big:hover::after{ border-color:rgba(217,160,71,.5); }

/* Floating child photo card under the certificate */
.hero__kid{
  position:absolute; right:-6px; bottom:-30px; z-index:3;
  width:46%; max-width:210px; aspect-ratio:3/4;
  border-radius:20px; overflow:hidden; border:5px solid #fff;
  box-shadow:var(--shadow-lg);
  animation:kidfloat 6s ease-in-out infinite;
}
.hero__kid img{
  position:absolute; inset:0; width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:center top;
}
@keyframes certfloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@keyframes kidfloat{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-14px) rotate(-1.8deg); } }
@media (prefers-reduced-motion:reduce){ .cert-big, .hero__kid{ animation:none; } }
.photo__tag{
  position:absolute; left:14px; bottom:14px; right:14px;
  background:rgba(255,255,255,.16); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.28); border-radius:12px; padding:10px 14px;
  font-size:.82rem; font-weight:600; letter-spacing:.02em;
}
.hero__badge{
  position:absolute; left:-14px; bottom:-18px; z-index:3;
  background:#fff; border-radius:16px; padding:14px 18px; box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:12px; max-width:240px;
}
.hero__badge .seal{ width:42px; height:42px; flex:none; border-radius:50%; background:var(--gold-soft); display:grid; place-items:center; color:var(--gold-deep); }
.hero__badge b{ font-size:.84rem; color:var(--plum-deep); }
.hero__badge span{ font-size:.74rem; color:var(--muted); }

/* floating petals */
.petal{ position:absolute; opacity:.5; pointer-events:none; color:var(--plum); }

/* ---------- Creds / trust band (unified brand panel) ---------- */
.creds{ position:relative; padding-block:clamp(36px,5vw,64px); background:var(--paper); }
/* left: 2x2 boxes · right: quote */
.creds__layout{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(20px,2.6vw,34px); align-items:stretch;
}
.creds__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.6vw,20px); }
.cred{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(20px,2vw,28px); box-shadow:var(--shadow-sm);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
/* gold accent bar that grows on hover */
.cred::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--plum),var(--gold));
  transform:scaleY(0); transform-origin:top; transition:transform .35s ease;
}
.cred:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent; }
.cred:hover::before{ transform:scaleY(1); }
.cred b{ display:block; font-family:var(--serif); font-weight:600; font-size:clamp(1.02rem,1.4vw,1.18rem); color:var(--plum-deep); line-height:1.2; overflow-wrap:break-word; }
.cred span{ display:block; margin-top:7px; font-size:.82rem; line-height:1.45; color:var(--muted); overflow-wrap:break-word; }

/* Quote card */
.creds__quote{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(28px,3.4vw,46px); border-radius:var(--r-lg);
  background:linear-gradient(150deg,var(--plum) 0%, var(--plum-700) 60%, var(--plum-deep) 100%);
  color:#fff; box-shadow:var(--shadow);
}
/* big decorative quotation mark */
.creds__quote::before{
  content:"\201C"; position:absolute; top:-.18em; left:.12em;
  font-family:var(--serif); font-weight:700; font-size:clamp(7rem,12vw,11rem);
  line-height:1; color:var(--gold); opacity:.28; pointer-events:none;
}
/* soft glow accent */
.creds__quote::after{
  content:""; position:absolute; right:-40px; bottom:-50px; width:200px; height:200px;
  border-radius:50%; background:radial-gradient(circle, rgba(217,160,71,.45), transparent 70%);
  pointer-events:none;
}
.creds__quote blockquote{
  position:relative; z-index:1;
  font-family:var(--serif); font-weight:500; font-style:italic;
  font-size:clamp(1rem,2vw,1.2rem); line-height:1.4; letter-spacing:-.01em;
}
.creds__quote figcaption{
  position:relative; z-index:1; margin-top:18px;
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--sans); font-weight:600; font-size:.84rem;
  letter-spacing:.04em; color:var(--mint);
}
.creds__quote figcaption::before{ content:""; width:26px; height:2px; background:var(--gold); border-radius:2px; }

@media (max-width:900px){
  .creds__layout{ grid-template-columns:1fr; }
}
@media (max-width:460px){
  .creds__grid{ grid-template-columns:1fr; }
}

/* ---------- Cards / values ---------- */
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:20px; box-shadow:var(--shadow-sm); transition:transform .3s, box-shadow .3s, border-color .3s;
 
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent; }
.card__icon{
  width:54px; height:54px; border-radius:14px; display:grid; place-items:center; margin-bottom:18px;
  background:var(--plum-soft); color:var(--plum); 
}
.card__icon svg{ width:26px; height:26px; }
.card h4{ margin-bottom:10px; text-align: center; font-size:larger}
.card p{ color:var(--ink-soft); font-size:.82rem; text-align:left;  }
.hero .card p{ text-align:center; }
.card li{ font-size:.82rem; }
.card--gold .card__icon{ background:var(--gold-soft); color:var(--gold-deep); }
.card--mint .card__icon{ background:var(--mint-soft); color:#3f9f97; }

/* about split */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,72px); align-items:center; }
.about-figure{
  position:relative; border-radius:var(--r-lg); aspect-ratio:4/3;
  background:linear-gradient(160deg,var(--plum),var(--plum-deep)); overflow:hidden;
  box-shadow:var(--shadow); display:grid; place-items:center;
}
.about-figure .quote{
  position:relative; z-index:2; color:#fff; text-align:center; max-width:80%;
  font-family:var(--serif); font-size:clamp(1.2rem,2vw,1.7rem); line-height:1.35;
}
.about-figure .quote cite{ display:block; margin-top:14px; font-family:var(--sans); font-style:normal; font-size:.92rem; opacity:1; letter-spacing:.04em; }
.about-figure--quote{ aspect-ratio:4/3.4; }
.about-list{ margin-top:26px; display:grid; gap:14px; }
.about-list li{ display:flex; gap:13px; align-items:flex-start; }
.about-list svg{ width:22px; height:22px; color:var(--gold-deep); flex:none; margin-top:3px; }

/* ---------- Timeline ---------- */
/* ---------- Chronik accordion (Unsere Geschichte) ---------- */
.chronik-toggle{ cursor:pointer; }
.chronik-toggle__chev{ width:18px; height:18px; transition:transform .35s ease; }
.chronik-toggle[aria-expanded="true"] .chronik-toggle__chev{ transform:rotate(180deg); }
.chronik{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .55s cubic-bezier(.4,0,.2,1);
}
.chronik.is-open{ grid-template-rows:1fr; }
.chronik__inner{ overflow:hidden; min-height:0; }
/* keep timeline items visible inside the panel (reveal handled by the panel itself) */
.chronik .reveal{ opacity:1; transform:none; }
/* small breathing room above the chronik content when open */
.chronik.is-open .chronik__inner{ padding-top:clamp(24px,4vw,48px); }

.timeline{ position:relative; max-width:880px; margin-inline:auto; }
.timeline::before{
  content:""; position:absolute; left:120px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(var(--gold),var(--plum-soft));
}
.tl{ position:relative; display:grid; grid-template-columns:104px 1fr; gap:34px; padding-block:14px; }
.tl__year{ text-align:right; font-family:var(--serif); font-weight:600; color:var(--plum); font-size:1.15rem; padding-top:1px; }
.tl__dot{ position:absolute; left:113px; top:9px; width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--gold); box-shadow:0 0 0 5px var(--plum-tint); }
.tl__body{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px 22px; box-shadow:var(--shadow-sm); transition:transform .3s, box-shadow .3s; }
.tl__body:hover{ transform:translateX(4px); box-shadow:var(--shadow); }
.tl__body b{ color:var(--plum-deep); }
.tl__body p{ color:var(--ink-soft); font-size:.95rem; margin-top:3px; }
.tl--hl .tl__body{ background:linear-gradient(120deg,var(--plum),var(--plum-700)); border-color:transparent; color:#fff; }
.tl--hl .tl__body b, .tl--hl .tl__body p{ color:#fff; }
.tl--hl .tl__dot{ border-color:#fff; box-shadow:0 0 0 5px rgba(94,33,80,.25); }

/* ---------- Kitas ---------- */
.kita-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform .3s, box-shadow .3s; display:flex; flex-direction:column;
}
.kita-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.kita-card__top{ height:120px; display:grid; place-items:center; padding:24px; position:relative; }
.kita-card__top img{ height:62px; width:auto; position:relative; z-index:1; }
.kita-card--rose .kita-card__top{ background:linear-gradient(135deg,#fdeceb,#f7d7d6); }
.kita-card--tulip .kita-card__top{ background:linear-gradient(135deg,#e7f4fb,#cfe9f6); }
.kita-card--bud .kita-card__top{ background:linear-gradient(135deg,#e9f5ea,#d2ecd5); }
.kita-card__body{ padding:24px 26px 28px; }
.kita-card__body h3{ font-size:1.3rem; }
.kita-card__year{ font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); }
.kita-card__body p{ color:var(--ink-soft); font-size:.94rem; margin-top:8px; }

.facility{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px 28px; box-shadow:var(--shadow-sm); }
.facility > img{ display:block; max-height:110px; margin-inline:auto; }
.facility h4{ font-family:var(--serif); font-size:1.1625rem; color:var(--plum-deep);  text-align: center; align-items:center; gap:10px; }
.facility h4 svg{ width:20px; height:20px; color:var(--plum); }
.spec{ margin-top:16px; display:grid; gap:9px; }
.spec li{ display:flex; justify-content:space-between; gap:16px; font-size:.82rem; padding-bottom:9px; border-bottom:1px dashed var(--line); }
.spec li:last-child{ border-bottom:none; }
.spec li span:first-child{ color:var(--muted); }
.spec li span:last-child{ color:var(--ink); font-weight:600; text-align:right; }

/* real estate callout */
.callout{
  border-radius:var(--r-lg); padding:clamp(30px,5vw,56px);
  background:linear-gradient(135deg,var(--plum) 0%, var(--plum-deep) 100%);
  color:#fff; position:relative; overflow:hidden;
}
.callout::after{
  content:""; position:absolute; right:-60px; top:-60px; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle,rgba(217,160,71,.4),transparent 70%);
}
.callout h3{ color:#fff; font-size:clamp(1.5rem,2.6vw,2.1rem); max-width:18ch; }
.callout p{ color:rgba(255,255,255,.85); margin-top:14px; max-width:54ch; }
.callout__tags{ margin-top:22px; display:flex; flex-wrap:wrap; gap:10px; position:relative; z-index:2; }
.tag{ font-size:.84rem; padding:7px 14px; border-radius:100px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); }

/* ---------- Concept / Schwerpunkte ---------- */
.focus{
  background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px; position:relative;
  box-shadow:var(--shadow-sm); transition:transform .3s, box-shadow .3s; overflow:hidden;
  text-align:center;
}
.focus:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.focus::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--gold); }
.focus__emoji{ width:50px; height:50px; border-radius:14px; background:var(--gold-soft); color:var(--gold-deep); display:grid; place-items:center; font-size:1.5rem; margin:0 auto 16px; }
.focus__emoji svg{ width:26px; height:26px; }
.focus h3{ font-size:1.1625rem; }
.focus p{ color:var(--ink-soft); font-size:.82rem; margin-top:8px; }

.pill-list{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
.pill{ display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:100px; background:var(--plum-soft); color:var(--plum-deep); font-weight:600; font-size:.92rem; }
.pill svg{ width:16px; height:16px; color:var(--gold-deep); }

/* ---------- Team ---------- */
.team-card{ text-align:center; padding:34px 26px; }
.team-card p{ text-align:center; }
.team-card .av{
  width:84px; height:84px; border-radius:24px; margin:0 auto 18px; display:grid; place-items:center;
  background:var(--plum-soft); color:var(--plum); font-size:2rem;
}
.team-card .av svg{ width:38px; height:38px; }
.team-card.t-gold .av{ background:var(--gold-soft); color:var(--gold-deep); }
.team-card.t-mint .av{ background:var(--mint-soft); color:#3f9f97; }

/* ---------- Verantwortlicher ---------- */
.profile{ display:grid; grid-template-columns:340px 1fr; gap:clamp(30px,4vw,56px); align-items:start; }
.profile__card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; box-shadow:var(--shadow); text-align:center; position:sticky; top:100px;
}
.profile__photo{
  width:276px; height:350px; border-radius:50%; margin:0 auto 18px; display:grid; place-items:center;
  background:linear-gradient(160deg,var(--plum),var(--plum-deep)); color:#fff; font-family:var(--serif); font-size:2.6rem;
  box-shadow:0 16px 30px -14px rgba(94,33,80,.6);
  overflow:hidden; border:4px solid #fff;
}
.profile__photo img{
  width:100%; height:100%; max-width:none; object-fit:cover; object-position:28% 14%;
  transform-origin:30% 20%;
}
.profile__card h3{ font-size:1.4rem; }
.profile__role{ color:var(--gold-deep); font-weight:700; font-size:.86rem; letter-spacing:.06em; text-transform:uppercase; margin-top:4px; }
.profile__meta{ margin-top:20px; text-align:left; display:grid; gap:11px; font-size:.92rem; }
.profile__meta li{ display:flex; gap:11px; align-items:flex-start; color:var(--ink-soft); }
.profile__meta svg{ width:18px; height:18px; color:var(--plum); flex:none; margin-top:3px; }
.prose p{ color:var(--ink-soft); margin-bottom:16px; font-size: .92rem; text-align: left;}
.prose h3{ margin:26px 0 12px; }
.prose--framed{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(24px,3vw,40px); box-shadow:var(--shadow-sm);
}
.prose--framed > :first-child{ margin-top:0; }
.prose--framed > :last-child{ margin-bottom:0; }

/* ---------- Jobs ---------- */
.job{
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow);
}
.job__head{
  background:linear-gradient(135deg,var(--plum),var(--plum-700)); color:#fff; padding:clamp(28px,4vw,46px);
  position:relative; overflow:hidden;
}
.job__head::after{ content:""; position:absolute; right:-40px; bottom:-60px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(217,160,71,.35),transparent 70%); }
.job__head .tag{ background:rgba(255,255,255,.14); }
.job__head h3{ color:#fff; font-size:clamp(1.5rem,2.6vw,2rem); margin-top:14px; max-width:100%; }
.job__body{ padding:clamp(28px,4vw,46px); display:grid; grid-template-columns:repeat(2,1fr); gap:36px; }
.job__col h4{ font-family:var(--serif); font-size:1.15rem; color:var(--plum-deep); margin-bottom:14px; display:flex; align-items:center; gap:9px; }
.job__col h4 svg{ width:20px; color:var(--gold-deep); }
.check{ display:grid; gap:11px; }
.check li{ display:flex; gap:11px; align-items:flex-start; font-size:.92rem; color:var(--ink-soft); }
.check li svg{ width:19px; height:19px; color:var(--bud); flex:none; margin-top:3px; }
.job__foot{ border-top:1px solid var(--line); padding:26px clamp(28px,4vw,46px); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; background:var(--plum-tint); }

/* ---------- FAQ ---------- */
.faq{ max-width:860px; margin-inline:auto; }
.acc{ border:1px solid var(--line); border-radius:var(--r); background:#fff; margin-bottom:14px; overflow:hidden; box-shadow:var(--shadow-sm); }
.acc__q{ width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px 26px; font-family:var(--serif); font-size:1.1625rem; color:var(--plum-deep); }
.acc__q .ic{ width:34px; height:34px; border-radius:50%; background:var(--plum-soft); color:var(--plum); flex:none; display:grid; place-items:center; transition:transform .3s, background .3s; }
.acc__q .ic svg{ width:18px; height:18px; }
.acc.open .acc__q .ic{ transform:rotate(45deg); background:var(--plum); color:#fff; }
.acc__a{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.acc__a p{ padding:0 26px 24px; color:var(--ink-soft); font-size:.82rem; }

/* ---------- Anmeldung steps ---------- */
.steps{ counter-reset:step; display:grid; gap:20px; }
.step{ display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px 26px; box-shadow:var(--shadow-sm); transition:transform .3s,box-shadow .3s; }
.step:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.step__n{ counter-increment:step; width:46px; height:46px; border-radius:14px; background:var(--plum); color:#fff; font-family:var(--serif); font-size:1.3rem; display:grid; place-items:center; }
.step__n::before{ content:counter(step,decimal-leading-zero); }
.step h4{ font-family:var(--serif); color:var(--plum-deep); font-size:1.1625rem; margin-bottom:5px; }
.step p{ color:var(--ink-soft); font-size:.82rem; }
.note{ display:flex; gap:14px; align-items:flex-start; margin-top:24px; padding:20px 24px; border-radius:var(--r); background:var(--gold-soft); border:1px solid #f0dcb0; }
.note svg{ width:24px; height:24px; color:var(--gold-deep); flex:none; }
.note b{ color:#6b4a14; }
.note p{ color:#7a5a22; font-size:.92rem; }

/* ---------- Contact / CTA band ---------- */
.cta-band{
  border-radius:var(--r-lg); padding:clamp(36px,6vw,72px); text-align:center; position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--plum) 0%,var(--plum-deep) 100%); color:#fff;
}
.cta-band::before, .cta-band::after{ content:""; position:absolute; border-radius:50%; }
.cta-band::before{ width:340px; height:340px; left:-120px; top:-140px; background:radial-gradient(circle,rgba(191,224,221,.3),transparent 70%); }
.cta-band::after{ width:340px; height:340px; right:-120px; bottom:-160px; background:radial-gradient(circle,rgba(217,160,71,.32),transparent 70%); }
.cta-band h2{ color:#fff; position:relative; }
.cta-band p{ color:rgba(255,255,255,.85); max-width:60ch; margin:16px auto 0; position:relative; font-size:.92rem; }
.cta-band .hero__cta{ justify-content:center; position:relative; }

/* ---------- Footer ---------- */
.footer{ background:var(--plum-deep); color:rgba(255,255,255,.72); padding-top:clamp(56px,7vw,84px); }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:50px; }
.footer__brand img{ height:72px; width:auto; margin-bottom:18px; }
.footer__brand p{ font-size:.92rem; max-width:34ch; }
.footer__claim{ color:var(--gold); font-family:var(--serif); font-weight:600; font-size:1.05rem; letter-spacing:.01em; }
.footer h5{ color:#fff; font-family:var(--sans); font-weight:700; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px; }
.footer ul{ display:grid; gap:10px; }
.footer a{ color:rgba(255,255,255,.72); font-size:.92rem; transition:color .2s; }
.footer a:hover{ color:var(--gold); }
.footer__contact li{ display:flex; gap:11px; font-size:.92rem; align-items:flex-start; }
.footer__contact svg{ width:18px; color:var(--gold); flex:none; margin-top:3px; }
.socials{ display:flex; gap:10px; margin-top:18px; }
.socials a{ width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.08); display:grid; place-items:center; color:#fff; transition:.25s; }
.socials a:hover{ background:var(--gold); color:var(--plum-deep); transform:translateY(-3px); }
.socials svg{ width:19px; height:19px; }
.footer__bar{ border-top:1px solid rgba(255,255,255,.12); padding-block:24px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.92rem; }
.footer__bar a:hover{ color:var(--gold); }

/* ---------- Legal pages (Impressum / Datenschutz) ---------- */
.legal-header{ position:static; background:#fff; border-bottom:1px solid var(--line); padding-block:14px; }
.legal-header .brand img{ height:64px; }
.legal-header .header__inner{ gap:16px; }
.legal-back{ font-weight:600; font-size:.92rem; color:var(--plum); display:inline-flex; align-items:center; gap:.5em; }
.legal-back:hover{ color:var(--plum-700); }
.legal-back svg{ width:18px; height:18px; }

.legal{ padding-block:clamp(36px,6vw,72px); background:var(--paper); }
.legal .wrap{ max-width:880px; }
.legal__head{ margin-bottom:36px; }
.legal h1{ font-size:clamp(2rem,4.4vw,2.9rem); color:var(--plum-deep); }
.legal .updated{ color:var(--muted); font-size:.92rem; margin-top:10px; }
.legal h2{ font-family:var(--serif); font-weight:600; font-size:clamp(1.3rem,2.4vw,1.6rem); color:var(--plum-deep); margin:38px 0 12px; padding-top:24px; border-top:1px solid var(--line); }
.legal h2:first-of-type{ border-top:none; padding-top:0; margin-top:0; }
.legal h3{ font-family:var(--serif); font-weight:600; font-size:1.12rem; color:var(--plum-700); margin:22px 0 8px; }
.legal p{ margin-bottom:14px; color:var(--ink-soft); font-size:.92rem; }
.legal ul{ margin:6px 0 18px; display:grid; gap:9px; }
.legal ul li{ position:relative; padding-left:22px; color:var(--ink-soft); font-size:.92rem; }
.legal ul li::before{ content:""; position:absolute; left:3px; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--gold); }
.legal strong{ color:var(--ink); font-weight:700; }
.legal a{ color:var(--plum); text-decoration:underline; text-underline-offset:2px; word-break:break-word; }
.legal a:hover{ color:var(--plum-700); }
.legal__card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px 28px; margin-bottom:20px; box-shadow:var(--shadow-sm); }
.legal__card p{ margin-bottom:6px; }
.legal__card p:last-child{ margin-bottom:0; }
.legal__note{ font-size:.92rem; color:var(--muted); margin-top:6px; }

/* ---------- Legal modal (Impressum / Datenschutz) ---------- */
.modal{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:clamp(12px,3vw,32px); }
.modal[hidden]{ display:none; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(52,17,44,.55); backdrop-filter:blur(4px); animation:fadeIn .25s ease; }
.modal__dialog{ position:relative; background:#fff; border-radius:var(--r-lg); width:min(840px,100%); max-height:88vh; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); overflow:hidden; animation:modalIn .3s cubic-bezier(.2,.7,.2,1); }
.modal__head{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px clamp(20px,3vw,32px); border-bottom:1px solid var(--line); background:#fff; flex:none; }
.modal__head h2{ font-family:var(--serif); font-weight:600; font-size:clamp(1.3rem,2.4vw,1.7rem); color:var(--plum-deep); margin:0; }
.modal__close{ width:42px; height:42px; flex:none; border-radius:12px; background:var(--plum-soft); color:var(--plum); display:grid; place-items:center; transition:background .2s, color .2s, transform .2s; }
.modal__close:hover{ background:var(--plum); color:#fff; transform:rotate(90deg); }
.modal__close svg{ width:20px; height:20px; }
.modal__body{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
.modal__body.legal{ padding:clamp(20px,3vw,34px); background:transparent; }
.modal__body.legal h2:first-of-type{ margin-top:0; }
body.modal-open{ overflow:hidden; }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes modalIn{ from{ opacity:0; transform:translateY(24px) scale(.98); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .modal__backdrop, .modal__dialog{ animation:none; } }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }

/* scroll progress */
.progress{ position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,var(--gold),var(--plum)); z-index:200; transition:width .1s linear; }

/* to-top */
.to-top{ position:fixed; right:22px; bottom:22px; width:48px; height:48px; border-radius:14px; background:var(--plum); color:#fff; display:grid; place-items:center; box-shadow:var(--shadow); opacity:0; pointer-events:none; transform:translateY(12px); transition:.3s; z-index:90; }
.to-top.show{ opacity:1; pointer-events:auto; transform:none; }
.to-top:hover{ background:var(--plum-700); }
.to-top svg{ width:22px; height:22px; }

/* ---------- Mobile nav panel ---------- */
.mobile-nav{
  position:fixed; inset:0; z-index:99; background:rgba(252,250,251,.98); backdrop-filter:blur(10px);
  display:flex; flex-direction:column; justify-content:flex-start; gap:4px; padding:104px var(--gut) 40px;
  transform:translateX(100%); transition:transform .4s cubic-bezier(.6,.05,.3,1); overflow-y:auto;
}
body.menu-open .mobile-nav{ transform:none; }
.mobile-nav a{ font-family:var(--serif); font-size:1.6rem; color:var(--plum-deep); padding:10px 0; border-bottom:1px solid var(--line); }
.mobile-nav a:hover{ color:var(--gold-deep); }
.mobile-nav .btn{ margin-top:24px; justify-content:center; }

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .nav{ display:none; }
  .burger{ display:block; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .profile{ grid-template-columns:1fr; }
  .profile__card{ position:static; max-width:420px; margin-inline:auto; }
}
@media (max-width:860px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__visual{ max-width:460px; }
  /* minmax(0,1fr) lets the single column shrink to the container width so
     cards (e.g. Einrichtungen) stay centered instead of overflowing right */
  .split, .grid-2, .grid-3, .job__body{ grid-template-columns:minmax(0,1fr); }
  .header__cta .btn--primary{ display:none; }
  /* mobile Chronik: drop the left rail (line + dots) and center each item so
     the cards sit full-width and symmetric instead of pushed to one side */
  .timeline::before{ display:none; }
  .tl{ grid-template-columns:1fr; gap:6px; padding-left:0; }
  .tl__year{ text-align:center; }
  .tl__dot{ display:none; }
}
@media (max-width:560px){
  .brand img{ height:58px; }
  .header.scrolled .brand img{ height:50px; }
  .grid-4{ grid-template-columns:1fr; }
  .hero__cards{ grid-template-columns:1fr; }
  .photo:nth-child(2){ margin-top:0; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1/-1; }
  /* keep the three hero stats on one row */
  .hero__stats{ gap:12px; }
  .stat b{ font-size:1.5rem; }
  .stat span{ font-size:.72rem; line-height:1.25; }
  /* give the footer Kontakt column the full width so the e-mail never wraps off */
  .footer__grid > *:last-child{ grid-column:1/-1; }
  /* "Alle Rechte vorbehalten." on its own line (mobile only) */
  .footer__bar .rights{ display:block; }
  /* let the "Zusammenarbeit mit Eltern" quote box grow to fit its text
     instead of clipping it under the fixed aspect-ratio */
  .about-figure--quote{ aspect-ratio:auto; height:auto; padding:clamp(30px,7vw,44px) 0; }
  .about-figure--quote .quote{ max-width:86%; }
  /* give the Verantwortlicher biography a little breathing room from the
     screen edges on mobile instead of sitting edge-to-edge */
  .prose{ padding-inline:12px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* cookie notice */
.cookie{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:90; width:min(92vw, 640px);
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 12px 32px rgba(52,17,44,.18);
  padding:14px 18px;
}
.cookie[hidden]{ display:none; }
.cookie p{ font-size:.88rem; color:var(--ink-soft); margin:0; }
.cookie p a{ color:var(--plum); font-weight:600; text-decoration:underline; }
.cookie .btn{ flex-shrink:0; padding:9px 18px; font-size:.85rem; }
@media (max-width:560px){
  .cookie{ flex-direction:column; align-items:stretch; text-align:center; }
}