/* Unterseiten Maia · Salma · Socci */
main,.fuss,.band{position:relative;z-index:2}
.held .kicker{margin-bottom:4px}
.einleitung{padding:10vh var(--pad) 4vh;max-width:1280px;margin:0 auto}
.einleitung h2{max-width:14em}

/* Zeilen im Handy */
.zl{display:flex;align-items:center;gap:9px;padding:9px 10px;background:#fff;border-radius:14px;box-shadow:0 3px 12px rgba(26,29,31,.08)}
.zl b{display:block;font-size:12.5px}.zl small{display:block;font-size:10.5px;color:#4E575B}
.zl .zeit{font-family:Syne;font-weight:800;font-size:11px;width:38px;flex:none;color:#4E575B}
.zl .rechts{margin-left:auto;font-weight:700;font-size:11.5px;white-space:nowrap}
.zl.frei{background:#E8F6F0;box-shadow:none;color:#1F6F55;font-weight:700}
.zl .ok{width:18px;height:18px;border-radius:50%;background:var(--salma);flex:none;display:grid;place-items:center;font-size:10px;font-weight:700}
.rund{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:12px;flex:none;background:#C5E8D9}
.rund.r{background:#F6D3DB}.rund.g{background:#EEF0F1}
.s-titel{font-family:Syne;font-weight:800;font-size:19px;letter-spacing:-.02em;line-height:1.05}
.paar{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.drei{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.drei .foto{aspect-ratio:3/4}
.weg-linie{display:flex;flex-direction:column;gap:7px;padding-left:4px}
.weg-linie div{display:flex;gap:9px;align-items:center;font-size:12px}
.weg-linie div::before{content:"";width:9px;height:9px;border-radius:50%;background:#D5DADD;flex:none}
.weg-linie .f::before{background:var(--salma)}.weg-linie .j::before{background:var(--altrosa);box-shadow:0 0 0 4px #F6D3DB}
.weg-linie .j{font-weight:700}
.weg-linie em{margin-left:auto;font-style:normal;font-weight:700;font-size:10px;color:var(--altrosa)}
.weg-linie em.sk{color:#1F6F55}
.welle-ton{display:flex;align-items:center;gap:3px;height:44px;padding:0 12px;background:#fff;border-radius:14px;box-shadow:0 3px 12px rgba(26,29,31,.08)}
.welle-ton i{flex:1;border-radius:3px;background:var(--salma);height:20%;animation:ton 1.1s ease-in-out infinite alternate}
.welle-ton i:nth-child(3n){animation-duration:.7s}.welle-ton i:nth-child(4n+1){animation-duration:.9s;animation-delay:-.3s}.welle-ton i:nth-child(5n+2){animation-delay:-.6s}
@keyframes ton{to{height:90%}}
.tage{display:flex;justify-content:space-between;gap:4px}
.tage span{flex:1;text-align:center;font-size:10px;padding:6px 0;border-radius:10px;font-weight:700;color:#4E575B}
.tage span b{display:block;font-size:14px;color:#1A1D1F}
.tage .a{background:#1A1D1F;color:#fff}.tage .a b{color:#fff}

/* Maia: Fragen-Liste */
.fragen{list-style:none;padding:0;margin-top:50px;border-top:1.5px solid var(--hair)}
.fragen li{display:grid;grid-template-columns:70px 1fr auto;gap:20px;align-items:center;padding:clamp(18px,2.6vw,34px) 0;border-bottom:1.5px solid var(--hair);position:relative;transition:padding .5s var(--ease),color .3s}
.fragen li::before{content:"";position:absolute;inset:0 calc(var(--pad)*-1);background:var(--maia);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);z-index:-1}
.fragen li:hover{padding-left:24px;color:#1A1D1F}
.fragen li:hover::before{transform:none}
.fragen .nr{font-family:Syne;font-weight:800;font-size:14px;color:var(--accent-ink)}
.fragen li:hover .nr,.fragen li:hover>span{color:#1A1D1F}
.fragen h3{font-size:clamp(24px,3.8vw,60px)}
.fragen li>span:not(.nr){color:var(--muted);font-size:15px;max-width:16em;text-align:right}
@media(max-width:700px){.fragen li{grid-template-columns:34px 1fr;gap:6px 12px}.fragen li>span:not(.nr){grid-column:2;text-align:left}.fragen h3{hyphens:auto}}

/* Salma: „Sag es Salma“ */
.sag-es{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center;margin-top:50px}
.saetze{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.saetze button{text-align:left;padding:16px 20px;border-radius:18px 18px 5px 18px;background:#1A1D1F;color:#fff;font-weight:700;font-size:clamp(16px,1.5vw,20px);
  transition:transform .4s var(--spring),background .3s,color .3s}
.saetze button:hover{transform:translateX(8px) scale(1.03)}
.saetze button.an{background:var(--salma);color:#1A1D1F}
.salma-sagt{display:flex;gap:12px;align-items:flex-start;margin-top:10px;min-height:76px}
.salma-sagt .face{width:44px;height:44px}
.salma-sagt p{background:#fff;padding:13px 16px;border-radius:18px 18px 18px 5px;font-weight:500;box-shadow:0 3px 12px rgba(26,29,31,.08);max-width:24em}
.plan{background:#fff;border-radius:24px;padding:20px;box-shadow:0 30px 70px -40px var(--salma-tief);display:flex;flex-direction:column;gap:6px;position:relative}
.plan .kopfz{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.plan .kopfz b{font-family:Syne;font-size:20px;letter-spacing:-.02em}
.slot{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:stretch;min-height:44px}
.slot time{font-family:Syne;font-weight:800;font-size:12px;color:#4E575B;padding-top:13px}
.slot .in{border-radius:12px;border:1.5px dashed #D5DADD;display:flex;align-items:center;padding:0 12px;font-size:14px;color:#9AA3A7;transition:all .6s var(--spring)}
.slot .in.belegt{border:0;background:#E8F6F0;color:#1A1D1F;font-weight:700;border-left:5px solid var(--salma)}
.slot .in.neu{animation:neu .8s var(--spring)}
.slot .in.frei{border:0;background:repeating-linear-gradient(135deg,#F6F7F8 0 8px,#EEF0F1 8px 16px);color:#4E575B;font-weight:700}
@keyframes neu{0%{transform:scale(.6);opacity:0}}
@media(max-width:860px){.sag-es{grid-template-columns:1fr}}

/* Socci: Galerie */
.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:50px;align-items:start}
.galerie .sp{display:flex;flex-direction:column;gap:16px;will-change:transform}
.bild{position:relative;border-radius:20px;overflow:hidden;background:#2A2E31;cursor:pointer;aspect-ratio:600/744}
.bild img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s;filter:saturate(.9)}
.bild:hover img,.bild.an img{transform:scale(1.07);filter:none}
.bild figcaption{position:absolute;left:12px;right:12px;bottom:12px;padding:12px 14px;border-radius:14px;background:rgba(20,22,24,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:#fff;font-family:Syne;font-weight:800;font-size:clamp(14px,1.5vw,20px);letter-spacing:-.02em;line-height:1.1;min-height:3.1em;opacity:0;transform:translateY(12px);transition:opacity .4s,transform .5s var(--spring)}
.bild.an figcaption{opacity:1;transform:none}
.bild figcaption small{display:block;font:700 10px/1 'DM Sans';letter-spacing:.12em;text-transform:uppercase;color:var(--mint-3);margin-bottom:7px}
.bild figcaption .strich{display:inline-block;width:2px;height:1em;background:var(--mint-3);vertical-align:-2px;margin-left:2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.hinweis{margin-top:18px;font-size:13px;color:var(--muted)}
@media(max-width:700px){.galerie{grid-template-columns:repeat(2,1fr);gap:10px}.galerie .sp{gap:10px}.galerie .sp:nth-child(3){display:none}}

.drei-saetze{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:60px;border-top:1.5px solid var(--hair)}
.drei-saetze div{padding:28px 24px 28px 0;border-right:1.5px solid var(--hair)}
.drei-saetze div+div{padding-left:24px}.drei-saetze div:last-child{border:0}
.drei-saetze h3{font-size:clamp(22px,2.4vw,34px);margin-bottom:10px}
.drei-saetze p{color:var(--muted)}
@media(max-width:700px){.drei-saetze{grid-template-columns:1fr}.drei-saetze div,.drei-saetze div+div{border-right:0;border-bottom:1.5px solid var(--hair);padding:22px 0}}

/* Schluss der Unterseiten */
.ende{min-height:90svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:24px;padding:120px var(--pad)}
.ende .trio{display:flex;gap:14px}
.ende .trio a{width:74px;height:74px;transition:transform .5s var(--spring)}
.ende .trio a:hover{transform:translateY(-8px) scale(1.12) rotate(6deg)}
.ende .trio .face{width:100%;height:100%}
.ende .lead{margin:0 auto}

/* ===== Feinschliff nach dem Prüfbericht (14.11.2026) ===== */
.galerie{max-width:1000px;margin-inline:auto;padding-bottom:70px}
.bild img{object-position:50% 22%}
.hinweis{text-align:center}
#nochmal{margin-top:6px}