/*
Theme Name: Krabbelkiste
Description: Eigenes Theme der Bergedorfer Krabbelkiste e. V. Alle Texte und Bilder der Startseite pflegt man unter „Startseite bearbeiten“ im Admin-Menü.
Author: Bergedorfer Krabbelkiste e. V.
Version: 2.0.2611012244
Requires at least: 6.0
Requires PHP: 7.4
License: Schriften unter SIL Open Font License (siehe fonts/)
Text Domain: krabbelkiste
*/
/* Schriften lokal eingebunden (keine Verbindung zu Google, DSGVO-freundlich) */
@font-face{font-family:"Belanosima";src:url("fonts/Belanosima-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Belanosima";src:url("fonts/Belanosima-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/Inter-Variable.ttf") format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"Krikikrak Pen";src:url("fonts/KrikikrakPen-Bold.woff2") format("woff2");font-weight:700;font-display:swap}

/* Layout: heller Cremegrund, darauf satte, rund gebaute Farbtafeln wie Bauklötze.
   Vier Formen (Kreis, Herz, Stern, Blume) ziehen sich als Zeichen durch die ganze Seite;
   jede Form hat immer dieselbe Farbe. Große Farbflächen nur bei Tagesablauf und Kontakt. */
:root{
  --paper:#F1F8F5;        /* Hintergrund, im Customizer änderbar */
  --paper-deep:color-mix(in srgb,var(--paper) 93%,#2C1166);
  --card:#FFFFFF;
  --ink:#2C1166;          /* Indigo statt Schwarz */
  --text:#3B2F66;
  --text-soft:#5B4E8A;
  /* Aktion: nur Buttons, Links, Bedienelemente */
  --action:#5B21D6;

  /* Vier Akzente, fest an die vier Formen gebunden */
  --kreis:#1FA896;   --kreis-deep:#12806F; --kreis-tint:#DDF4EF;   /* Türkis */
  --herz:#C2185B;    --herz-deep:#9E1149;  --herz-tint:#FCE4EC;    /* Beere */
  --stern:#FFC93C;   --stern-deep:#E39E00; --stern-tint:#FFF3CC;   /* Sonnengelb */
  --blume:#8F6BEB;   --blume-deep:#6F48D6; --blume-tint:#EEE7FF;   /* Lila */

  /* Logo: vier Akzente plus Indigo */
  --l-berry:var(--herz);--l-teal:var(--kreis-deep);--l-lilac:var(--blume);--l-sun:var(--stern-deep);--l-ink:var(--ink);--l-blue:var(--kreis);

  --f-display:"Belanosima","Trebuchet MS",system-ui,sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-hand:"Krikikrak Pen","Chalkboard SE","Comic Sans MS",cursive;

  /* Schriftgrößen: Handschrift nie kleiner als 1.15rem */
  --fs-hand-s:clamp(1.15rem,1.25vw,1.28rem);   /* Bildunterschriften */
  --fs-hand:clamp(1.25rem,1.5vw,1.4rem);       /* Labels, Eyebrows, Rollen */
  --fs-hand-l:clamp(1.4rem,1.9vw,1.65rem);     /* Kartentitel */
  --fs-small:1rem;

  --r:26px;
  --r-big:clamp(28px,4vw,44px);
  --wrap:1200px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{
  margin:0;color:var(--text);font:400 1.1rem/1.65 var(--f-body);-webkit-font-smoothing:antialiased;
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4  0 0 0 0 .3  0 0 0 0 .2  0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:400;color:var(--ink);line-height:1.02;margin:0;text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--action);outline-offset:3px;border-radius:8px}

.wrap{max-width:calc(var(--wrap) + 96px);margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:760px){.wrap{padding-left:max(48px,env(safe-area-inset-left,0px));padding-right:max(48px,env(safe-area-inset-right,0px))}}
section{position:relative;overflow-x:clip}
.block{padding-block:clamp(72px,10vw,128px) 0}
.h2{font-size:clamp(2.5rem,5.6vw,4.4rem)}
.text{max-width:58ch;display:grid;gap:1em}
.lead{font-size:clamp(1.08rem,1.5vw,1.22rem);color:var(--text-soft);max-width:46ch}
.eyebrow{display:inline-block;color:var(--text-soft);font:700 var(--fs-hand)/1 var(--f-hand);margin-bottom:16px}
.panel{border-radius:var(--r-big);padding:clamp(28px,5vw,60px);position:relative;overflow:hidden}

/* Formen als Zeichen */
.shape{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-.12em}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.45em;font:600 1rem/1 var(--f-body);text-decoration:none;padding:.9em 1.35em;border-radius:var(--btn-radius,999px);border:2px solid transparent;cursor:pointer;transition:transform .25s cubic-bezier(.3,1.7,.5,1),background .2s,color .2s,box-shadow .2s}
/* Farbe, Schatten und Effekt kommen aus Design → Customizer → Buttons */
.btn:hover{transform:var(--btn-hover,translateY(-2px) rotate(-1.5deg))}
.btn--violet{background:var(--btn,var(--action));color:var(--btn-text,#fff);box-shadow:var(--btn-shadow,0 5px 0 var(--ink))}
.btn--violet:hover{box-shadow:var(--btn-shadow-hover,0 8px 0 var(--ink))}
.btn--line{border-color:var(--ink);color:var(--ink)}
.btn--line:hover{background:var(--ink);color:#fff}
.btn--light{background:var(--paper);color:var(--ink);box-shadow:var(--btn-shadow-light,0 5px 0 rgba(0,0,0,.25))}
.btn--big{font-size:1.08rem;padding:1em 1.6em}

/* ---------- Charaktere ---------- */
.char{overflow:visible}
.char .eye{transform-box:fill-box;transform-origin:center;animation:blink 5.5s infinite}
.char .pupil{transition:transform .12s ease-out}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
.char.c2 .eye{animation-delay:1.4s}.char.c3 .eye{animation-delay:2.9s}.char.c4 .eye{animation-delay:.7s}

/* ---------- Kopf ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:31;background:var(--paper)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;transition:background .25s,box-shadow .25s}
.top.is-scrolled,.top.menu-offen{background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(44,17,102,.08)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:16px}
.brand{display:flex;align-items:center;gap:16px;text-decoration:none;min-width:0}
.brand svg{width:clamp(180px,22vw,270px);height:auto;overflow:visible;flex:none}
.l-berry{fill:var(--l-berry)}.l-teal{fill:var(--l-teal)}.l-lilac{fill:var(--l-lilac)}.l-sun{fill:var(--l-sun)}.l-ink{fill:var(--l-ink)}.l-blue{fill:var(--l-blue)}
.claim{font:700 1.15rem/1.1 var(--f-hand);color:var(--text-soft);white-space:nowrap}
.nav{display:flex;align-items:center;gap:4px}
.nav a.link{white-space:nowrap;font-size:1rem;text-decoration:none;color:var(--text);padding:.6em .85em;border-radius:999px;transition:background .2s}
.nav a.link:hover{background:var(--paper-deep)}
.nav .btn{white-space:nowrap;padding:.75em 1.2em;font-size:1rem}

/* Burger-Menü unter 1020 px */
.burger{display:none;flex:none;width:52px;height:52px;border:0;border-radius:50%;background:var(--ink);cursor:pointer;place-items:center;padding:0}
.burger span{display:block;width:22px;height:2.5px;border-radius:2px;background:#fff;position:relative;transition:transform .3s,background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:2.5px;border-radius:2px;background:#fff;transition:transform .3s}
.burger span::before{top:-7px}.burger span::after{top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}
.top .mobilmenue{display:block}
.mobilmenue[hidden]{display:none!important}
.mobilmenue{border-top:1px solid rgba(44,17,102,.08);padding-block:8px 28px;max-height:calc(100dvh - 90px);overflow-y:auto}
.mobilmenue a.link{display:block;font:400 clamp(1.7rem,6vw,2.2rem)/1.1 var(--f-display);color:var(--ink);text-decoration:none;padding:16px 0;border-bottom:1px solid rgba(44,17,102,.1)}
.mobilmenue .btn{margin-top:24px}
@media (max-width:1240px){
  .nav a.link{display:none}
  .burger{display:grid}
  .claim{display:none}
}
@media (min-width:1241px){.mobilmenue{display:none!important}}

/* Handy: Logo groß und fest neben dem Burger */
@media (max-width:600px){
  .nav .btn{display:none}
  .brand svg{width:min(100vw - 112px, 330px)}
}

/* Kritzel großflächig auf dem Papier, nie in Kacheln */
.doodle{position:absolute;pointer-events:none;z-index:0;opacity:.5;mix-blend-mode:multiply}
section > .wrap{position:relative;z-index:1}

/* ---------- Intro ---------- */
.intro .wrap{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media (min-width:900px){.intro .wrap{grid-template-columns:.95fr 1.05fr;gap:72px}.intro .peek{order:-1;justify-self:start}.intro .peek img{transform:rotate(-1.5deg)}.intro .peek .char{right:auto;left:12%}.intro .peek:hover .char{transform:translateY(-14px) rotate(8deg)}.intro .peek figcaption{text-align:left}}
.intro .h2{font-size:clamp(2.9rem,6.2vw,5.6rem);line-height:.98;margin-bottom:26px}
.intro{padding-top:clamp(24px,6vw,88px)}
.intro .peek{order:-1}
.intro .btn{margin-top:30px}
.peek{position:relative;margin:0;justify-self:center;width:100%;max-width:520px;padding-top:58px}
.peek img{width:100%;aspect-ratio:4/4.3;object-fit:cover;border-radius:var(--r-big);position:relative;z-index:1;transform:rotate(1.5deg)}
.peek .char{position:absolute;top:-14px;right:12%;width:clamp(96px,11vw,130px);z-index:0;transition:transform .5s cubic-bezier(.3,1.7,.5,1)}
.peek:hover .char{transform:translateY(-14px) rotate(-8deg)}
.peek figcaption{font:700 var(--fs-hand-s)/1.3 var(--f-hand);color:var(--text-soft);margin-top:14px;text-align:right}

/* ---------- Besonders (Bauklötze) ---------- */
.pillars{display:grid;grid-template-columns:1fr;gap:18px;margin-top:clamp(36px,5vw,56px)}
@media (min-width:620px){.pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1060px){.pillars{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pillar{border-radius:var(--r);padding:30px 28px 32px;display:flex;flex-direction:column;gap:10px;color:var(--ink);background:var(--tint);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.pillar:hover{transform:translateY(-6px) rotate(var(--tilt))}
.pillar:nth-child(1){--tint:var(--kreis-tint);--acc:var(--kreis-deep);--tilt:-1.5deg}
.pillar:nth-child(2){--tint:var(--herz-tint);--acc:var(--herz);--tilt:1.2deg}
.pillar:nth-child(3){--tint:var(--stern-tint);--acc:var(--stern-deep);--tilt:-1deg}
.pillar:nth-child(4){--tint:var(--blume-tint);--acc:var(--blume-deep);--tilt:1.6deg}
.pillar .top-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.pillar b{font:400 clamp(3rem,5vw,4rem)/1 var(--f-display);color:var(--acc);font-variant-numeric:tabular-nums}
.pillar .shape{width:48px;height:48px;fill:var(--acc);transition:transform .5s cubic-bezier(.3,1.8,.5,1)}
.pillar:hover .shape{transform:rotate(-18deg) scale(1.1)}
.pillar h3{font:700 var(--fs-hand-l)/1.15 var(--f-hand);color:inherit}
.pillar p{color:var(--text-soft);font-size:1.04rem;line-height:1.5}

/* ---------- Alltag ---------- */
.alltag .wrap{display:grid;grid-template-columns:1fr;gap:44px;align-items:start}
@media (min-width:920px){.alltag .wrap{grid-template-columns:1fr 1fr;gap:64px}}
.alltag figure{margin:0;position:sticky;top:110px}
@media (max-width:919px){.alltag figure{position:static}}
.alltag figure img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-big);transform:rotate(-1.2deg)}
.alltag figcaption{font:700 var(--fs-hand-s)/1.3 var(--f-hand);color:var(--text-soft);margin-top:14px}
.alltag .h2{margin-bottom:20px}
.cards{display:grid;gap:14px;margin-top:34px}
.acard{background:var(--card);border-radius:var(--r);padding:24px 26px;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 18px;box-shadow:0 1px 0 rgba(44,17,102,.06);transition:transform .35s cubic-bezier(.3,1.6,.5,1),box-shadow .3s}
.acard:hover{transform:translateX(6px);box-shadow:0 14px 30px -18px rgba(44,17,102,.4)}
.acard .shape{width:44px;height:44px;grid-row:span 3}
.acard h3{font-size:clamp(1.5rem,2.3vw,1.8rem)}
.acard p{color:var(--text-soft);font-size:1.05rem;line-height:1.55}
.acard a{font-weight:600;text-decoration:none;color:var(--action);margin-top:6px;width:fit-content}
.acard a:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- Tagesablauf ---------- */
.day-panel{background:var(--ink);color:#fff;display:grid;grid-template-columns:1fr;gap:40px}
@media (min-width:940px){.day-panel{grid-template-columns:.85fr 1fr;gap:60px}}
.day-panel h2{color:#fff;font-size:clamp(2.4rem,5vw,4rem);margin-bottom:18px}
.day-panel .eyebrow{color:var(--stern)}
.day-panel .lead{color:#EDE4FF;max-width:34ch}
.day-panel figure{margin:30px 0 0}
.day-panel figure img{width:100%;aspect-ratio:4/3.4;object-fit:cover;border-radius:var(--r)}
.day-panel figcaption{font:700 var(--fs-hand-s)/1.3 var(--f-hand);color:#E2D6FF;margin-top:10px}
.day{list-style:none;margin:0;padding:0;position:relative;z-index:1}
.day li{display:grid;grid-template-columns:5rem minmax(0,1fr);gap:16px;padding:20px 0;border-top:1px solid rgba(255,255,255,.22);transition:background .3s}
@media (min-width:560px){.day li{grid-template-columns:7.5rem minmax(0,1fr)}}
.day time{font:400 clamp(1.6rem,2.6vw,2rem)/1.05 var(--f-display);font-variant-numeric:tabular-nums}
.day h3{font:700 var(--fs-hand-l)/1.15 var(--f-hand);color:#fff;margin-bottom:4px}
.day p{color:#ECE4FF;font-size:1.05rem;line-height:1.5}
.day li.now{background:linear-gradient(90deg,rgba(255,212,59,.14),transparent 70%);border-radius:14px;margin-inline:-14px;padding-inline:14px}
.day li.now time{color:var(--stern)}
.day li.now h3::after{content:"jetzt";font:600 .7rem/1 var(--f-body);text-transform:uppercase;letter-spacing:.08em;background:var(--stern);color:var(--ink);border-radius:999px;padding:.4em .65em;margin-left:.6em;vertical-align:.2em;animation:nowpulse 2s ease-in-out infinite}
@keyframes nowpulse{50%{box-shadow:0 0 0 6px rgba(255,212,59,.25)}}
.day-note{margin-top:20px;color:#E2D6FF;font-size:1.05rem}

/* ---------- Räume (Karussell) ---------- */
.rooms{background:var(--stern-tint);color:var(--ink)}
.rooms-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.rooms-head .lead{margin-top:16px;color:var(--ink)}
.arrows{display:flex;gap:12px}
.arrows button{width:54px;height:54px;border-radius:50%;border:0;background:var(--btn,var(--action));color:var(--btn-text,#fff);font:600 1.3rem/1 var(--f-body);cursor:pointer;display:grid;place-items:center;transition:transform .25s cubic-bezier(.3,1.7,.5,1),opacity .2s}
.arrows button:hover{transform:var(--btn-hover-rund,scale(1.1))}
.arrows button:disabled{opacity:.3;cursor:default;transform:none}
.track{display:grid;grid-auto-flow:column;grid-auto-columns:min(74vw,340px);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;margin-top:clamp(28px,4vw,40px);padding-bottom:6px;scrollbar-width:none;overscroll-behavior-x:contain}
.track::-webkit-scrollbar{display:none}
@media (min-width:1100px){.track{grid-auto-columns:calc((100% - 40px)/3)}}
/* Handy: Tafel reicht bis an den Rand, damit die Fotos so groß wie möglich sind */
@media (max-width:600px){
  .rooms{margin-inline:-16px;border-radius:0;padding-inline:0}
  .rooms-head{padding-inline:20px}
  .track{padding-inline:16px;scroll-padding-inline:16px;grid-auto-columns:calc(100% - 22px);gap:12px}
  .arrows button{width:48px;height:48px}
}
.track figure{margin:0;scroll-snap-align:start;display:grid;gap:12px}
.track img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.track figure:hover img{transform:rotate(-1deg) scale(1.015)}
.track figcaption{font:700 var(--fs-hand)/1.25 var(--f-hand)}

/* ---------- Team ---------- */
.team .lead{margin-top:20px;max-width:50ch}
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(32px,4vw,48px)}
@media (min-width:1000px){.people{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:460px){.people{grid-template-columns:1fr}}
.person{border-radius:var(--r);padding:28px 26px 30px;display:flex;flex-direction:column;gap:2px}
.person:nth-child(1){background:var(--kreis-tint)}
.person:nth-child(2){background:var(--herz-tint)}
.person:nth-child(3){background:var(--stern-tint)}
.person:nth-child(4){background:var(--blume-tint)}
.person .char{width:96px;height:96px;margin-bottom:18px;transition:transform .5s cubic-bezier(.3,1.8,.5,1)}
.person:hover .char{transform:rotate(-10deg) scale(1.08)}
.person h3{font-size:2.2rem}
.person .role{font:700 var(--fs-hand)/1.2 var(--f-hand);color:var(--ink);margin-top:8px}
.person .since{color:var(--text-soft);font-size:var(--fs-small);margin-top:6px}

/* ---------- Elterninitiative ---------- */
.ei{background:var(--kreis-tint);color:var(--ink);display:grid;grid-template-columns:1fr;gap:28px}
@media (min-width:920px){.ei{grid-template-columns:.8fr 1fr;gap:60px}}
.ei h2{font-size:clamp(2.2rem,4.4vw,3.5rem);max-width:12ch;position:relative;z-index:1}
.ei .text{position:relative;z-index:1;font-size:1.08rem;color:var(--ink)}

/* ---------- Stimmen (Kacheln) ---------- */
.quotes{display:grid;grid-template-columns:1fr;gap:16px;margin-top:clamp(32px,4vw,48px)}
@media (min-width:760px){.quotes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.quotes{grid-template-columns:1.35fr 1fr 1fr}.q--big{grid-row:span 2}.q--wide{grid-column:span 2}}
.q{margin:0;border-radius:var(--r);padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;gap:22px;position:relative;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.q:hover{transform:translateY(-4px) rotate(var(--tilt,0deg))}
.q .shape{width:40px;height:40px}
.q blockquote{margin:0;font:400 clamp(1.35rem,1.8vw,1.6rem)/1.25 var(--f-display);text-wrap:pretty}
.q figcaption{margin-top:auto;display:grid;gap:2px}
.q figcaption b{font-weight:600}
.q figcaption span{font-size:var(--fs-small);opacity:.85}
.q--big{background:var(--herz-tint);color:var(--ink);--tilt:-.8deg}
.q--big blockquote{font-size:clamp(1.7rem,2.8vw,2.4rem);line-height:1.15}
.q--big .shape{fill:var(--herz);width:52px;height:52px}
.q--teal{background:var(--kreis-tint);color:var(--ink);--tilt:.8deg}.q--teal .shape{fill:var(--kreis)}
.q--sun{background:var(--stern-tint);color:var(--ink);--tilt:-.6deg}.q--sun .shape{fill:var(--stern-deep)}
.q--wide{background:var(--blume-tint);color:var(--ink);--tilt:.4deg}.q--wide .shape{fill:var(--blume)}
/* Nur ein Zitat: als breite Kachel statt schmal in der ersten Spalte */
.quotes:has(> .q:only-child){grid-template-columns:1fr}
.q:only-child{grid-row:auto;grid-column:auto;padding:clamp(28px,4.5vw,60px);gap:28px}
.q:only-child blockquote{max-width:34ch}
.draft{position:absolute;top:16px;right:18px;font:700 var(--fs-hand-s)/1 var(--f-hand);color:var(--herz-deep);background:rgba(255,255,255,.8);padding:.35em .7em;border-radius:999px}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:1fr;gap:36px}
@media (min-width:920px){.faq{grid-template-columns:.8fr 1fr;gap:60px}}
.faq .lead{margin-top:18px}
.qa{display:grid;gap:12px}
.qa details{background:var(--card);border-radius:22px;transition:box-shadow .25s}
.qa details[open]{box-shadow:0 14px 30px -18px rgba(44,17,102,.45)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;font:600 1.08rem/1.35 var(--f-body);color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--paper-deep);color:var(--ink);font:600 1.15rem/1 var(--f-body);transition:transform .3s,background .2s,color .2s}
.qa details[open] summary::after{content:"–";background:var(--action);color:#fff;transform:rotate(180deg)}
.qa .a{padding:0 24px 22px;color:var(--text-soft);max-width:60ch}

/* ---------- Kontakt ---------- */
.contact{background:var(--herz);color:#fff;text-align:center;padding-block:clamp(40px,6vw,76px)}
.contact h2{color:#fff;font-size:clamp(2.4rem,5.6vw,4.4rem);position:relative;z-index:1}
.contact .btn{margin-top:26px;position:relative;z-index:1}
.contact .msg{max-width:52ch;margin:28px auto 0;font-size:clamp(1.05rem,1.5vw,1.2rem);color:#FFE6F0;display:grid;gap:.9em;position:relative;z-index:1}
.ways{display:grid;grid-template-columns:1fr;gap:26px;margin:44px auto 0;padding-top:36px;border-top:1px solid rgba(255,255,255,.3);max-width:980px;text-align:left;position:relative;z-index:1}
@media (min-width:820px){.ways{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ways > div{min-width:0}
.ways .label{font:700 var(--fs-hand) var(--f-hand);color:var(--stern)}
.ways .big{display:block;font:400 clamp(1.6rem,2.8vw,2.1rem)/1.15 var(--f-display);color:#fff;text-decoration:none;margin-top:4px;font-variant-numeric:tabular-nums}
.ways .mid{display:block;color:#fff;margin-top:6px;font-size:1.08rem;line-height:1.4;overflow-wrap:anywhere;text-decoration:none;font-style:normal}
.ways a:hover{text-decoration:underline;text-underline-offset:4px}
.ways small{display:block;margin-top:6px;color:#FFD9E8;font-size:var(--fs-small)}
.copy-btn{margin-top:12px;font:500 .95rem var(--f-body);background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:.5em 1em;cursor:pointer}
.copy-btn:hover{background:rgba(255,255,255,.24)}
.sign{margin-top:48px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px 28px;position:relative;z-index:1}
.sticker{background:var(--paper);border-radius:28px;padding:18px 26px 14px;transform:rotate(-2deg);box-shadow:0 14px 30px -14px rgba(0,0,0,.4);display:grid;gap:4px;justify-items:center}
.sticker span{font:700 var(--fs-hand-s) var(--f-hand);color:var(--text-soft)}
.sticker img{width:clamp(150px,18vw,190px)}
.sign .char{width:clamp(84px,9vw,110px);transform:rotate(8deg)}

/* ---------- Fuß ---------- */
footer{padding-block:56px 48px}
footer .wrap{display:flex;flex-wrap:wrap;gap:20px 36px;align-items:center;justify-content:space-between}
footer .flogo{width:170px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 26px}
footer a{text-decoration:none;color:var(--text)}
footer nav a:hover{color:var(--action);text-decoration:underline;text-underline-offset:4px}
footer small{font-size:var(--fs-small);color:var(--text-soft)}

/* sanftes Anheben beim Hereinscrollen; Inhalte sind im Ruhezustand sichtbar */
.reveal{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.js .reveal.pending{transform:translateY(26px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}.track{scroll-behavior:auto}
}

/* WordPress: Kopfleiste rutscht unter die Admin-Leiste */
.admin-bar .top{top:32px}
@media (max-width:782px){.admin-bar .top{top:46px}}
@media (max-width:600px){#wpadminbar{position:fixed}}

/* Unterseiten (Impressum, Datenschutz …) */
.seite{padding-block:clamp(48px,8vw,110px) 40px;max-width:calc(760px + 96px)}
.seite .h2{margin:0 0 32px;font-size:clamp(2.1rem,7vw,4.4rem)}
/* Lange deutsche Wörter am Handy trennen statt über den Rand laufen lassen */
@media (max-width:600px){h1,h2,h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}}
.inhalt{display:grid;gap:1em}
.inhalt h2,.inhalt h3{font-family:var(--f-display);font-weight:400;color:var(--ink);line-height:1.1;margin:1.2em 0 0}
.inhalt h2{font-size:clamp(1.7rem,3vw,2.2rem)}.inhalt h3{font-size:1.35rem}
.inhalt a{color:var(--action)}
.inhalt p,.inhalt ul,.inhalt ol{margin:0}