/* ==========================================================================
   FOAM-Live e.V. — Design System
   Neumorphismus, minimalistisch, medizinisch, clean
   Shared stylesheet für alle Seiten
   ========================================================================== */

/* Inter selbst gehostet (assets/fonts) statt über Google Fonts geladen:
   so wird beim Seitenaufruf keine IP-Adresse an Google übermittelt
   (DSGVO-Risiko bei extern eingebundenen Google Fonts, vgl. LG München I,
   Urt. v. 20.01.2022 - 3 O 17493/20). Eine Variable-Font-Datei deckt die
   Schriftschnitte 400-900 ab. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('../assets/fonts/inter-latin-variable.woff2') format('woff2');
}

:root{
  --bg:#ffffff; --light:#ffffff; --dark:#dbe4e5;
  --text:#263131; --text-soft:#485556; --accent:#557f7d; --accent-b:#3c6b69;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex; flex-direction:column;
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
:focus-visible{outline:3px solid var(--accent-b); outline-offset:3px;}

.wrap{max-width:1240px; margin:0 auto; padding:0 32px; width:100%; flex:1; display:flex; flex-direction:column;}
footer{margin-top:auto;}

header{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; padding:24px 0; border-bottom:1px solid rgba(0,0,0,.06);}
nav{display:flex; flex-wrap:wrap; gap:4px; font-size:13px; font-weight:700;}
nav a{padding:9px 16px; border-radius:11px; color:var(--text-soft);}
nav a.current{background:var(--bg); box-shadow: inset 4px 4px 8px var(--dark), inset -4px -4px 8px var(--light); color:var(--text);}
nav a:hover{color:var(--text);}

/* ---------- Mobiles Menu (Hamburger, reine CSS-Loesung ueber versteckte Checkbox) ---------- */
/* Die Checkbox bleibt fokussierbar (Tastatur: Tab + Leertaste), ist aber
   visuell versteckt. Ab 961px komplett aus, darunter erscheint der Button. */
.nav-toggle{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;}
.nav-toggle-btn{display:none;}
@media(min-width:961px){ .nav-toggle{display:none;} }

.logo{font-weight:800; font-size:17px; display:flex; align-items:center; gap:10px;}
.logo .mark{width:34px; height:34px; border-radius:10px; box-shadow: inset 3px 3px 6px var(--dark), inset -3px -3px 6px var(--light); display:flex; align-items:center; justify-content:center; padding:5px;}
.logo .mark img{width:100%; height:100%; object-fit:contain;}

.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:18px; padding:36px 0;}
.grid > *{min-width:0;}
.tile{border-radius:22px; padding:28px; background:var(--bg); box-shadow:7px 7px 14px var(--dark), -7px -7px 14px var(--light);}
.tile-hero h1, .tile-hero .kicker, .tile-hero p{overflow-wrap:break-word;}

.tile-hero{grid-column:span 8; padding:44px; display:flex; flex-direction:column; justify-content:center;}
.tile-hero--full{grid-column:span 12; min-height:70vh; padding:80px 60px; align-items:center; text-align:center; position:relative; overflow:hidden;}
.tile-hero--brand::before{
  content:""; position:absolute; inset:0;
  background-image:url("../assets/logo.png");
  background-repeat:no-repeat; background-position:center;
  background-size:min(420px, 55%);
  opacity:0.07; pointer-events:none;
}
.tile-hero--brand > *{position:relative; z-index:1;}
.tile-hero--full h1{max-width:820px;}
.tile-hero--full p{max-width:560px; margin-left:auto; margin-right:auto;}
.tile-hero--full .hero-actions{justify-content:center; align-self:center;}
.tile-hero .kicker{font-size:16px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-b); margin-bottom:18px;}
.tile-hero h1{font-size:clamp(30px,3.6vw,46px); font-weight:800; line-height:1.1; letter-spacing:-.02em; margin-bottom:18px;}
.tile-hero h1 em{font-style:normal; color:var(--accent);}
.tile-hero p{font-size:15px; color:var(--text-soft); line-height:1.6; max-width:440px; margin-bottom:26px;}
.hero-actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap; align-self:flex-start;}
.btn-primary{display:inline-block; min-width:230px; text-align:center; padding:19px 40px; border-radius:16px; border:none; font-weight:800; font-size:16px; letter-spacing:.01em; background:var(--accent-b); color:#fff; box-shadow:8px 8px 16px var(--dark), -8px -8px 16px var(--light); transition:transform .18s ease, box-shadow .18s ease;}
.btn-primary:hover{transform:translateY(-3px); box-shadow:11px 11px 20px var(--dark), -11px -11px 20px var(--light);}
.btn-primary:active{transform:translateY(0); box-shadow: inset 4px 4px 8px rgba(0,0,0,.2), inset -4px -4px 8px rgba(255,255,255,.15);}

.btn-donate{display:inline-block; min-width:230px; text-align:center; padding:19px 40px; border-radius:16px; border:none; font-weight:800; font-size:16px; letter-spacing:.01em; background:#f4b400; color:#2b2200; box-shadow:8px 8px 16px var(--dark), -8px -8px 16px var(--light); transition:transform .18s ease, box-shadow .18s ease;}
.btn-donate:hover{transform:translateY(-3px); box-shadow:11px 11px 20px var(--dark), -11px -11px 20px var(--light);}
.btn-donate:active{transform:translateY(0); box-shadow: inset 4px 4px 8px rgba(0,0,0,.15), inset -4px -4px 8px rgba(255,255,255,.4);}

.hero-actions-secondary{display:flex; justify-content:center; margin-top:18px;}
.btn-outline{display:inline-block; padding:14px 32px; border-radius:16px; border:none; font-weight:700; font-size:14px; letter-spacing:.01em; color:var(--text); background:transparent; box-shadow: inset 3px 3px 6px var(--dark), inset -3px -3px 6px var(--light); transition:transform .18s ease, box-shadow .18s ease;}
.btn-outline:hover{transform:translateY(-2px);}
.btn-outline:active{transform:translateY(0); box-shadow: inset 5px 5px 10px var(--dark), inset -5px -5px 10px var(--light);}

.side-stack{grid-column:span 4; display:flex; flex-direction:column; gap:18px;}
.side-stack__row{display:flex; gap:18px;}
.side-stack__row .tile{flex:1; min-width:0;}

.tile-stat{display:flex; flex-direction:column; justify-content:space-between;}
.tile-stat .n{font-size:40px; font-weight:800; letter-spacing:-.02em;}
.tile-stat .l{font-size:12px; color:var(--text-soft); font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-top:4px;}
.tile-stat .bar{height:6px; border-radius:99px; margin-top:16px; box-shadow: inset 2px 2px 4px var(--dark), inset -2px -2px 4px var(--light); overflow:hidden;}
.tile-stat .bar i{display:block; height:100%; background:var(--accent-b); border-radius:99px;}

.tile-stat--sm{padding:18px 22px;}
.tile-stat--sm .n{font-size:26px;}
.tile-stat--sm .bar{margin-top:10px;}

.tile-value{grid-column:span 3; min-height:150px; display:flex; flex-direction:column; justify-content:space-between;}
.tile-value .vi{width:38px; height:38px; border-radius:11px; box-shadow: inset 3px 3px 6px var(--dark), inset -3px -3px 6px var(--light); display:flex; align-items:center; justify-content:center; font-size:16px;}
.tile-value .vi svg{width:17px; height:17px; stroke:var(--accent-b);}
.tile-value .vi--logo{width:auto; height:52px; max-width:100%; padding:0; border-radius:0; box-shadow:none; display:block;}
.tile-value .vi--logo img{max-width:100%; max-height:100%; object-fit:contain; display:block;}
.tile-value h3{font-size:15px; font-weight:700; margin:14px 0 6px;}
.tile-value p{font-size:12.5px; color:var(--text-soft); line-height:1.5;}
.tile-value--wide{grid-column:span 4; min-height:auto; padding:20px 24px;}

.partner-logos-row{display:flex; flex-wrap:wrap; justify-content:center; gap:18px; padding:36px 0;}
.partner-logos-row .tile-value{flex:0 1 260px; text-align:center; align-items:center;}
.partner-logos-row .tile-value .vi--logo{margin:0 auto;}

.tile-value--sm{padding:18px 22px; min-height:auto;}
.tile-value--sm .vi{width:30px; height:30px; font-size:13px;}
.tile-value--sm h3{margin:10px 0 4px;}

.tile-product{grid-column:span 4; min-height:auto; padding:20px 24px; display:flex; flex-direction:column; justify-content:space-between; text-align:left; border:none; background:var(--bg); width:100%;}
.tile-product--bild{padding:0; overflow:hidden; position:relative; display:block; aspect-ratio:4/3;}
.tile-product__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease;}
.tile-product--bild:hover .tile-product__bg, .tile-product--bild:focus-visible .tile-product__bg{transform:scale(1.05);}
.tile-product__overlay{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; padding:22px; background:linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,0) 100%); opacity:0; transition:opacity .25s ease;}
.tile-product--bild:hover .tile-product__overlay, .tile-product--bild:focus-visible .tile-product__overlay{opacity:1;}
.tile-product__overlay .tag{align-self:flex-start; color:#fff; box-shadow:none; background:rgba(255,255,255,.2); backdrop-filter:blur(2px);}
.tile-product__overlay h4{color:#fff; margin:0; font-size:17px; font-weight:700;}
.tile-product .top{display:flex; justify-content:space-between; align-items:flex-start;}
.tile-product .pi{width:40px; height:40px; border-radius:12px; box-shadow: inset 3px 3px 6px var(--dark), inset -3px -3px 6px var(--light); display:flex; align-items:center; justify-content:center; font-size:17px; color:var(--accent); overflow:hidden; flex-shrink:0;}
.tile-product .pi svg{width:18px; height:18px;}
.tile-product .pi img{width:100%; height:100%; object-fit:contain; display:block;}
.tile-product .tag{font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-b); padding:5px 10px; border-radius:99px; box-shadow: inset 3px 3px 6px var(--dark), inset -3px -3px 6px var(--light);}
.tile-product h4{font-size:16px; font-weight:700; margin:16px 0 6px;}
.tile-product p{font-size:13px; color:var(--text-soft); line-height:1.55;}
button.tile-product{transition:transform .18s ease, box-shadow .18s ease;}
button.tile-product:hover{transform:translateY(-3px); box-shadow:10px 10px 20px var(--dark), -10px -10px 20px var(--light);}
button.tile-product:active{transform:translateY(0); box-shadow: inset 4px 4px 8px var(--dark), inset -4px -4px 8px var(--light);}

.tile-product--lg{grid-column:span 4; padding:32px 30px; min-height:230px;}
.tile-product--lg .pi{width:52px; height:52px; border-radius:14px;}
.tile-product--lg .pi svg{width:24px; height:24px;}
.tile-product--lg .tag{font-size:11px; padding:6px 12px;}
.tile-product--lg h4{font-size:20px; margin:20px 0 8px;}
.tile-product--lg p{font-size:14px; line-height:1.6;}

/* Webinar-Kachel: Bild oben, Titel/Datum in der Mitte, Referent:in unten */
.tile-webinar{grid-column:span 4; padding:0; overflow:hidden; display:flex; flex-direction:column; text-align:left; border:none; background:var(--bg); width:100%;}
.tile-webinar__image{width:100%; height:170px; object-fit:cover; display:block;}
.tile-webinar__image--placeholder{align-items:center; justify-content:center; display:flex; color:var(--accent); box-shadow: inset 3px 3px 6px var(--dark), inset -3px -3px 6px var(--light);}
.tile-webinar__image--placeholder svg{width:32px; height:32px;}
.tile-webinar__body{padding:22px 24px 0;}
.tile-webinar__body h4{font-size:18px; font-weight:700; margin:0 0 12px;}
.tile-webinar__body .tag{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-b); padding:6px 12px; border-radius:99px; box-shadow: inset 3px 3px 6px var(--dark), inset -3px -3px 6px var(--light); display:inline-block;}
.tile-webinar__referent{font-size:13px; color:var(--text-soft); line-height:1.55; padding:16px 24px 24px; margin-top:auto;}
button.tile-webinar{transition:transform .18s ease, box-shadow .18s ease;}
button.tile-webinar:hover{transform:translateY(-3px); box-shadow:10px 10px 20px var(--dark), -10px -10px 20px var(--light);}
button.tile-webinar:active{transform:translateY(0); box-shadow: inset 4px 4px 8px var(--dark), inset -4px -4px 8px var(--light);}

.social-bar{display:flex; justify-content:center; align-items:center; gap:10px; padding:14px 0 2px;}
.social-bar__item{
  display:flex; align-items:center; justify-content:center;
  color:var(--text-soft); transition:color .18s ease, transform .18s ease;
}
.social-bar__item:hover{color:var(--accent-b); transform:translateY(-1px);}
.social-bar__item svg{width:15px; height:15px; display:block;}

.partners-bar{display:block; padding:6px 0 0; text-decoration:none; color:inherit; transition:transform .18s ease;}
.partners-bar:hover{transform:translateY(-2px);}
.partners-bar:hover .partners-bar__label{color:var(--accent-b);}
.partners-bar__label{text-align:center; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-soft); margin-bottom:14px; transition:color .18s ease;}
.partners-bar__row{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px;}
.partners-bar__item{
  display:flex; align-items:center; gap:8px;
  padding:8px 16px 8px 8px; border-radius:99px; background:var(--bg);
  box-shadow: inset 3px 3px 6px var(--dark), inset -3px -3px 6px var(--light);
  font-size:12px; font-weight:700; color:var(--text-soft);
}
.partners-bar__logo{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:var(--bg); box-shadow:3px 3px 6px var(--dark), -3px -3px 6px var(--light);
  display:flex; align-items:center; justify-content:center;
}
.partners-bar__logo svg{width:14px; height:14px; stroke:var(--accent-b);}
.partners-bar__logo img{width:100%; height:100%; object-fit:contain; border-radius:50%; padding:3px; box-sizing:border-box;}

footer{padding:18px 0 22px;}
.footer-inner{
  border-radius:16px; padding:14px 20px; background:var(--bg);
  box-shadow:5px 5px 10px var(--dark), -5px -5px 10px var(--light);
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.footer-brand{display:flex; align-items:center; gap:8px;}
.footer-brand .mark{width:22px; height:22px; border-radius:7px; box-shadow: inset 2px 2px 4px var(--dark), inset -2px -2px 4px var(--light); display:flex; align-items:center; justify-content:center; padding:3px; flex-shrink:0;}
.footer-brand .mark img{width:100%; height:100%; object-fit:contain;}
.footer-brand strong{font-size:12px; font-weight:800; display:block;}
.footer-brand p{font-size:10.5px; color:var(--text-soft); margin-top:1px;}
.footer-nav{display:flex; gap:14px; flex-wrap:wrap; font-size:11px; font-weight:700; color:var(--text-soft);}
.footer-nav a:hover{color:var(--accent-b);}
.footer-meta{width:100%; text-align:center; font-size:10px; color:var(--text-soft); margin-top:2px;}

/* ---------- Kicker / section intro (standalone, between tile groups) ---------- */

.kicker{font-size:16px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-b); margin-bottom:12px;}
.section-intro{text-align:center; max-width:640px; margin:0 auto 8px;}
.section-intro h2{font-size:clamp(22px,3vw,32px); font-weight:800; letter-spacing:-.01em; margin-bottom:10px;}
.section-intro p{font-size:14px; color:var(--text-soft); line-height:1.6;}

.partner-intro-text{max-width:900px; margin:16px auto 0; text-align:left;}
.partner-intro-text p{font-size:14.5px; color:var(--text-soft); line-height:1.7; margin-bottom:14px;}
.partner-intro-text p:last-child{margin-bottom:0;}
.partner-intro-text strong{color:var(--text); font-weight:800;}

/* ---------- Person cards (Team / Referent:innen) ---------- */

.tile-person{grid-column:span 3; text-align:center; padding:32px 24px; transition:transform .2s ease, box-shadow .2s ease;}
.tile-person:hover{transform:translateY(-3px); box-shadow:11px 11px 22px var(--dark), -11px -11px 22px var(--light);}
.tile-person .avatar{
  width:80px; height:80px; margin:0 auto 18px; border-radius:50%;
  box-shadow: inset 3px 3px 6px var(--dark), inset -3px -3px 6px var(--light);
  display:flex; align-items:center; justify-content:center; color:var(--accent);
}
.tile-person .avatar svg{width:34px; height:34px;}
.tile-person .avatar img{width:100%; height:100%; object-fit:cover; border-radius:50%;}
.tile-person h3{font-size:17px; margin-bottom:8px;}
.tile-person .role{
  display:inline-block; font-size:11px; font-weight:700; color:#fff;
  background:var(--accent-b); padding:6px 14px; border-radius:99px;
}
.tile-person__desc{
  max-height:0; opacity:0; overflow:hidden;
  font-size:13px; line-height:1.6; color:var(--text-soft);
  margin-top:0; transition:max-height .25s ease, opacity .2s ease, margin-top .25s ease;
}
.tile-person:hover .tile-person__desc{max-height:480px; opacity:1; margin-top:14px;}

/* ---------- Legal pages ---------- */

.tile-legal{grid-column:span 12; padding:56px; max-width:820px; margin:0 auto; text-align:left;}
.tile-legal h2{font-size:19px; font-weight:800; color:var(--accent-b); margin-top:36px; margin-bottom:12px;}
.tile-legal h2:first-child{margin-top:0;}
.tile-legal p, .tile-legal li{font-size:14.5px; color:var(--text-soft); line-height:1.65;}
.tile-legal p{margin-bottom:14px;}
.tile-legal ul{padding-left:22px; margin:0 0 14px;}
.tile-legal a, .inline-link{color:var(--accent-b); font-weight:600; text-decoration:underline; text-underline-offset:2px;}

.placeholder{color:var(--text-soft); font-style:italic;}

/* ---------- Modal ---------- */

/*
  Zentrierung ueber Flexbox statt top/left/transform: das <dialog> selbst
  wird zum vollflaechigen, unsichtbaren Rahmen (100vw/100vh) und zentriert
  die eigentliche sichtbare Box (.modal__box) darin per Flexbox. Das ist
  robuster als top:50%/transform, das je nach Browser mit der nativen
  Top-Layer-Positionierung von <dialog> in Konflikt geraten kann.
*/
.modal{
  border:none; padding:0; margin:0; background:transparent;
  width:100vw; height:100vh; max-width:100vw; max-height:100vh;
  inset:0;
  overflow:hidden;
}
.modal[open]{
  display:flex; align-items:center; justify-content:center;
}
.modal::backdrop{background: rgba(38,49,49,.45); backdrop-filter:blur(2px);}
.modal__head{
  display:flex; align-items:center; gap:24px;
  margin-bottom:24px;
}
.modal__head-text{flex:1; min-width:0;}
.modal__head-text .kicker{margin-bottom:8px;}
.modal__head-text h3{margin-bottom:0;}
.modal__autoren{font-size:13px; color:var(--text-soft); margin-top:6px;}
.modal__image-btn{
  flex-shrink:0; border:0; margin:0; padding:0; background:none;
  cursor:zoom-in; display:block;
}
.modal__image{
  width:320px; max-height:260px; object-fit:cover;
  border-radius:20px; display:block;
  box-shadow:10px 10px 20px var(--dark), -10px -10px 20px var(--light);
}

/* Lightbox: Bild bildschirmfüllend und vollständig (nichts abgeschnitten). */
.lightbox{
  border:none; padding:0; margin:0; background:transparent;
  width:100vw; height:100vh; max-width:100vw; max-height:100vh; inset:0;
  overflow:hidden;
}
.lightbox[open]{display:flex; align-items:center; justify-content:center;}
.lightbox::backdrop{background:rgba(20,26,26,.9);}
.lightbox__img{
  max-width:96vw; max-height:92vh; width:auto; height:auto;
  object-fit:contain; border-radius:10px; cursor:zoom-out;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.lightbox__close{
  position:fixed; top:16px; right:20px; z-index:1;
  width:44px; height:44px; border:none; border-radius:50%;
  background:rgba(255,255,255,.15); color:#fff; font-size:24px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.lightbox__close:hover{background:rgba(255,255,255,.3);}
.modal__dozenten{display:flex; flex-wrap:wrap; gap:18px;}
.modal__dozenten--anschluss{margin-top:16px;}
.modal__dozent{display:flex; flex-direction:column; align-items:center; gap:8px; width:84px; text-align:center;}
.modal__dozent img, .modal__dozent-platzhalter{
  width:64px; height:64px; border-radius:50%; object-fit:cover;
  box-shadow: inset 3px 3px 6px var(--dark), inset -3px -3px 6px var(--light);
}
.modal__dozent-platzhalter{display:flex; align-items:center; justify-content:center; color:var(--accent); background:var(--bg);}
.modal__dozent-platzhalter svg{width:26px; height:26px;}
.modal__dozent span{font-size:12px; font-weight:600; color:var(--text); line-height:1.3; overflow-wrap:break-word;}
.modal__box{
  position:relative; background:var(--bg); border-radius:22px;
  box-shadow:14px 14px 28px var(--dark), -14px -14px 28px var(--light);
  padding:56px 64px;
  width:94%; max-width:1080px;
  max-height:90vh; overflow-y:auto;
  box-sizing:border-box;
}
.modal__box h3{font-size:27px; font-weight:800; margin-bottom:22px; overflow-wrap:break-word;}
.modal__box h4{
  font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color:var(--accent-b); margin:28px 0 10px; padding-top:20px; border-top:1px solid var(--dark);
}
.modal__box h4:first-of-type{padding-top:0; border-top:none; margin-top:22px;}
.modal__box p{font-size:15px; color:var(--text-soft); line-height:1.65; margin-bottom:0; overflow-wrap:break-word; word-break:break-word;}
.modal__box p a{color:var(--accent-b); font-weight:600; text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere;}
.modal__box p a:hover{color:var(--accent);}
.modal__box .kicker{overflow-wrap:break-word;}
.modal__close{
  position:absolute; top:16px; right:16px; width:36px; height:36px;
  border:none; border-radius:50%; background:var(--bg);
  box-shadow:5px 5px 10px var(--dark), -5px -5px 10px var(--light);
  color:var(--text-soft); font-size:14px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.modal__close:active{box-shadow: inset 3px 3px 6px var(--dark), inset -3px -3px 6px var(--light);}
.modal__footer{text-align:center; margin-top:28px;}

.form{display:flex; flex-direction:column; gap:16px; margin-top:24px;}
.form__field{display:flex; flex-direction:column; gap:6px; text-align:left; font-size:12.5px; font-weight:700; color:var(--text-soft);}
.form__field input,
.form__field textarea{
  font-family:inherit; font-size:14px; font-weight:400; color:var(--text);
  background:var(--bg); border:none; border-radius:14px; padding:12px 14px;
  box-shadow: inset 3px 3px 6px var(--dark), inset -3px -3px 6px var(--light);
  resize:none;
}
.form__field input::placeholder,
.form__field textarea::placeholder{color:var(--text-soft);}
.form__field input:disabled,
.form__field textarea:disabled{opacity:.6; cursor:not-allowed;}
.form__checkbox{display:flex; align-items:flex-start; gap:10px; text-align:left; font-size:13px; color:var(--text-soft); line-height:1.5; cursor:pointer;}
.form__checkbox input{width:auto; margin-top:3px; flex-shrink:0;}

.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

.alert{padding:14px 18px; border-radius:14px; font-size:13.5px; font-weight:600; margin-bottom:20px; box-shadow: inset 3px 3px 6px var(--dark), inset -3px -3px 6px var(--light);}
.alert-success{color:#1b7a4a;}
.alert-error{color:#c0392b;}

@media(max-width:960px){
  .tile-hero,.tile-stat,.tile-value,.tile-product,.tile-product--lg,.tile-webinar,.side-stack,.tile-legal{grid-column:span 12;}
  .tile-person{grid-column:span 6;}
  header{padding:18px 0;}

  .nav-toggle-btn{
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    width:46px; height:46px; border-radius:12px; cursor:pointer;
    background:var(--bg); box-shadow: inset 3px 3px 6px var(--dark), inset -3px -3px 6px var(--light);
  }
  .nav-toggle-btn > span,
  .nav-toggle-btn > span::before,
  .nav-toggle-btn > span::after{
    content:""; display:block; width:20px; height:2px; border-radius:2px;
    background:var(--text); transition:transform .2s ease, background .2s ease;
  }
  .nav-toggle-btn > span{position:relative;}
  .nav-toggle-btn > span::before{position:absolute; left:0; top:-6px;}
  .nav-toggle-btn > span::after{position:absolute; left:0; top:6px;}
  .nav-toggle:checked + .nav-toggle-btn > span{background:transparent;}
  .nav-toggle:checked + .nav-toggle-btn > span::before{transform:translateY(6px) rotate(45deg);}
  .nav-toggle:checked + .nav-toggle-btn > span::after{transform:translateY(-6px) rotate(-45deg);}
  .nav-toggle:focus-visible + .nav-toggle-btn{outline:3px solid var(--accent-b); outline-offset:3px;}

  nav{display:none; width:100%; flex-direction:column; gap:4px; padding-top:12px;}
  .nav-toggle:checked ~ nav{display:flex;}
  nav a{padding:12px 14px; border-radius:12px;}

  .footer-inner{justify-content:center; text-align:center;}
  .footer-nav{justify-content:center;}
  .tile-legal{padding:36px 24px;}
  .modal__box{width:94%; padding:32px 24px; max-height:90vh;}
  .referenten-list{column-count:2;}
}

@media(max-width:560px){
  .wrap{padding:0 18px;}
  .grid{grid-template-columns:1fr;}
  .grid > *{grid-column:auto !important;}
  .tile{padding:22px;}
  .tile-hero{padding:32px;}
  .tile-hero--full{padding:48px 22px; min-height:0;}
  .tile-hero--full h1{font-size:clamp(26px,7vw,34px);}
  .tile-hero .kicker{letter-spacing:.08em; font-size:14px;}
  .hero-actions{width:100%;}
  .btn-primary,.btn-donate{min-width:0; width:100%; padding:18px 24px;}
  .modal__head{flex-direction:column; align-items:stretch;}
  .modal__image-btn{width:100%;}
  .modal__image{width:100%; max-height:240px;}
  .referenten-list{column-count:1;}
}

.referenten-thanks{font-size:15px; font-weight:700; color:var(--text); text-align:center; margin-bottom:32px;}
.referenten-list{list-style:none; margin:0; padding:0; column-count:3; column-gap:40px;}
.referenten-list li{font-size:14px; color:var(--text-soft); padding:9px 0; break-inside:avoid;}