/* MARIE – neue Website (Gerüst, Oktober 2026). Moodboard: Jost, Warmes Weiß, Leinen, Sand, Altrosa, Dunkelgrau */
:root{
  --weiss:#FAF8F4; --leinen:#EDE5D8; --sand:#C9AA82; --sandlite:#E7D3AB;
  --altrosa:#D4A5A0; --text:#3C3830; --soft:#4A4540; --muted:#6B645F; --line:#C9AA82;
  --altrosa-text:#8F574E; --knopf:#96645B; --knopf-hover:#7F544C;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:'Jost',system-ui,sans-serif; font-weight:300; font-size:17px; line-height:1.6;
     color:var(--text); background:var(--weiss); -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:var(--altrosa-text)}
a:hover{color:var(--knopf-hover)}
h1,h2,h3,h4{font-weight:300; line-height:1.15; margin:0}
p{margin:0 0 12px}
.innen{max-width:1200px; margin:0 auto; padding:0 40px}
@media (max-width:700px){ .innen{padding:0 16px} }
.label{font-size:12px; font-weight:400; letter-spacing:.26em; text-transform:uppercase; color:var(--altrosa-text)}
.abschnitt{padding:80px 0}
.abschnitt.leinen{background:var(--leinen)}
@media (max-width:700px){ .abschnitt{padding:56px 0} }
h2.titel{font-size:clamp(28px,4vw,40px); margin:10px 0 28px}
.lead{font-size:clamp(17px,2vw,19px); color:var(--soft); max-width:680px}

/* Knöpfe */
.knopf{display:inline-block; background:var(--knopf); color:#fff; text-decoration:none; border:1px solid var(--knopf);
       border-radius:999px; padding:13px 28px; font:inherit; font-size:16px; font-weight:400; cursor:pointer; text-align:center}
.knopf:hover{background:var(--knopf-hover); color:#fff}
.knopf.hell{background:#fff; color:var(--text); border-color:var(--line)}
.knopf.hell:hover{border-color:var(--altrosa-text); color:var(--altrosa-text)}
.knoepfe{display:flex; flex-wrap:wrap; gap:12px; align-items:center}

/* Hinweisleiste + Testband */
.testband{background:var(--soft); color:var(--weiss); text-align:center; font-size:13px; padding:6px 16px}
.hinweisleiste{background:var(--altrosa); text-align:center; padding:10px 16px; font-size:15px}
.hinweisleiste a{color:var(--text); text-decoration:none}

/* Kopf */
.kopf{position:sticky; top:0; z-index:20; background:rgba(250,248,244,.97); border-bottom:1px solid var(--leinen)}
.kopf .innen{display:flex; align-items:center; gap:16px 28px; min-height:72px}
.marke{text-decoration:none; color:var(--text); display:flex; flex-direction:column; line-height:1.1}
.marke b{font-weight:300; font-size:28px; letter-spacing:.28em}
.marke small{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-top:3px}
.hauptnav{display:flex; gap:4px 26px; flex:1; justify-content:center; font-size:15px; font-weight:400}
.hauptnav a, .hauptnav summary{color:var(--text); text-decoration:none; padding:10px 0; cursor:pointer; border-bottom:2px solid transparent}
.hauptnav a.aktiv, .hauptnav details.aktiv summary{color:var(--altrosa-text); border-bottom-color:var(--altrosa)}
.hauptnav summary{list-style:none}
.hauptnav summary::-webkit-details-marker{display:none}
.hauptnav details{position:relative}
.hauptnav details .unter{position:absolute; top:44px; left:-18px; background:#fff; border:1px solid var(--leinen); border-radius:8px;
       padding:8px 0; min-width:220px; box-shadow:0 10px 30px rgba(60,56,48,.1)}
.hauptnav details .unter a{display:block; padding:9px 18px; border:0}
.hauptnav details .unter a:hover{background:var(--weiss)}
.kopf .knopf{padding:11px 22px; font-size:15px; white-space:nowrap}
.menu-handy{display:none}
@media (max-width:1060px){
  .hauptnav{display:none}
  .kopf .innen{min-height:60px}
  .marke b{font-size:22px} .marke small{display:none}
  .kopf .knopf{margin-left:auto; padding:9px 16px; font-size:14px}
  .menu-handy{display:block}
  .menu-handy summary{list-style:none; width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer}
  .menu-handy summary::-webkit-details-marker{display:none}
  .menu-handy nav{position:fixed; left:0; right:0; top:60px; bottom:0; background:var(--weiss); padding:16px 24px; overflow:auto}
  .menu-handy nav a{display:block; font-size:22px; padding:14px 0; border-bottom:1px solid var(--leinen); color:var(--text); text-decoration:none}
  .menu-handy nav a.unter{font-size:17px; padding:10px 0 10px 18px; color:var(--soft)}
  .menu-handy .kontakt{margin-top:24px; font-size:15px; color:var(--muted)}
}

/* Einstieg */
.hero .innen{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:48px; align-items:center; padding-top:56px; padding-bottom:72px}
.hero h1{font-size:clamp(46px,7vw,76px); font-weight:200; margin:16px 0 20px}
.hero p{font-size:clamp(17px,2vw,20px); color:var(--soft); max-width:480px; margin-bottom:28px}
.hero img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:8px}
@media (max-width:860px){ .hero .innen{grid-template-columns:1fr; gap:24px; padding-top:24px} .hero img{order:-1} .hero .knoepfe a{flex:1 1 200px} }

/* Kacheln */
.kacheln{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
@media (max-width:960px){ .kacheln{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .kacheln{grid-template-columns:1fr; gap:14px} }
.kachel{background:#fff; border:1px solid var(--leinen); border-radius:8px; overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:var(--text)}
.kachel img{width:100%; aspect-ratio:3/2; object-fit:cover}
.kachel .k{padding:18px 20px 22px; display:flex; flex-direction:column; gap:6px; flex:1}
.kachel .nr{font-size:13px; letter-spacing:.2em; color:var(--altrosa-text); font-weight:400}
.kachel h3{font-size:22px; font-weight:400}
.kachel p{color:var(--soft); font-size:16px; margin:0; flex:1}
.kachel .meta{color:var(--muted); font-size:14px}
.kachel .mehr{color:var(--altrosa-text); font-weight:400; margin-top:6px}
.kachel:hover{border-color:var(--sand)}
@media (max-width:600px){
  .kachel{flex-direction:row; align-items:center}
  .kachel img{width:96px; height:96px; aspect-ratio:auto; flex:none; margin:10px 0 10px 10px; border-radius:6px}
  .kachel .k{padding:10px 14px} .kachel p, .kachel .mehr{display:none}
}

/* Demnächst */
.termine-kurz{list-style:none; margin:0; padding:0; background:#fff; border:1px solid var(--leinen); border-radius:8px}
.termine-kurz li{display:flex; align-items:center; gap:12px 24px; padding:16px 22px; border-top:1px solid var(--leinen)}
.termine-kurz li:first-child{border-top:0}
.k-datum{width:90px; font-weight:500; flex:none}
.k-info{flex:1; min-width:0; display:flex; flex-direction:column}
.k-titel{font-weight:400}
.k-detail{font-size:15px; color:var(--muted)}
.k-link{border:1px solid var(--line); border-radius:999px; padding:8px 18px; text-decoration:none; color:var(--text); font-size:15px; font-weight:400}
@media (max-width:600px){ .termine-kurz li{flex-wrap:wrap; padding:14px 16px} .k-datum{width:auto} .k-info{flex-basis:100%} }

/* Künstlerin */
.kuenstlerin{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:56px; align-items:center}
.kuenstlerin img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:8px}
.kuenstlerin h2{font-size:clamp(26px,3.4vw,36px); margin:12px 0 18px}
@media (max-width:760px){ .kuenstlerin{grid-template-columns:1fr; gap:24px} .kuenstlerin img{max-width:360px} }

/* Kasten, Pakete, Ablauf, FAQ */
.kasten{background:#fff; border:1px solid var(--leinen); border-radius:10px; padding:26px 28px}
.kasten.leinen{background:var(--leinen); border:0}
.raster2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
@media (max-width:700px){ .raster2{grid-template-columns:1fr} }
.paket .preis{font-size:34px; font-weight:300}
.paket .preis small{font-size:15px; color:var(--muted)}
.paket h3{font-size:20px; font-weight:400; margin:4px 0 10px}
.paket ul{margin:0; padding-left:20px; color:var(--soft)}
.ablauf{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px}
.ablauf li{border-top:2px solid var(--sand); padding-top:12px; color:var(--soft)}
.ablauf li span{display:block; font-size:13px; letter-spacing:.2em; color:var(--altrosa-text)}
.ablauf li b{display:block; font-weight:500; color:var(--text)}
@media (max-width:700px){ .ablauf{grid-template-columns:repeat(2,minmax(0,1fr))} }
.faq details{border-top:1px solid var(--line); padding:14px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; font-weight:400; font-size:18px}
.faq details p{margin:10px 0 0; color:var(--soft)}
.kurs-block{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:40px; align-items:center; padding:48px 0; border-top:1px solid var(--leinen)}
.kurs-block img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px}
.kurs-block h2{font-size:clamp(26px,3vw,34px); margin:8px 0 14px}
.kurs-block .meta{color:var(--muted); font-size:15px; margin-bottom:16px}
@media (max-width:760px){ .kurs-block{grid-template-columns:1fr; gap:18px; padding:36px 0} }
.sprungnav{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.sprungnav a{border:1px solid var(--line); border-radius:999px; padding:9px 18px; text-decoration:none; color:var(--text); font-weight:400; background:#fff}

/* Filter (Terminseite) */
.t-filter{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 10px}
.t-filter button{font:inherit; font-size:15px; font-weight:400; min-height:44px; padding:0 18px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--text); cursor:pointer}
.t-filter button[aria-pressed="true"]{background:var(--soft); border-color:var(--soft); color:var(--weiss)}
.termine-seite .termine{margin-top:6px}
.hinweis{color:var(--soft); font-size:16px}

/* Fuß */
.fuss{background:var(--leinen); border-top:1px solid var(--line); color:var(--text); font-size:15px; margin-top:0}
.fuss .spalten{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; padding:48px 0 28px}
.fuss .spalten b{display:block; font-weight:500; margin-bottom:6px}
.fuss a{color:var(--text)}
.fuss .recht{border-top:1px solid var(--line); padding:16px 0 28px; display:flex; flex-wrap:wrap; gap:8px 24px; font-size:14px}
.fuss .recht a{color:var(--soft)}
@media (max-width:760px){ .fuss .spalten{grid-template-columns:1fr 1fr} }
@media (max-width:460px){ .fuss .spalten{grid-template-columns:1fr} }

/* 16.10.2026: Knöpfe in Reihen nicht auseinanderziehen; Ablauf-Schritte am Handy untereinander */
.knoepfe .t-anmelden{margin-left:0}
@media (max-width:700px){ .ablauf{grid-template-columns:1fr !important; gap:18px} }

/* Film und Kurzvideos (aus der bisherigen Startseite übernommen, 28.10.2026) */
#film > .innen > video{width:100%; max-width:960px; display:block; border-radius:10px; background:#000; aspect-ratio:16/9}
#film .reels{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; max-width:960px; margin-top:28px}
#film .reel{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); gap:18px; align-items:center}
#film .reel video{width:100%; aspect-ratio:9/16; object-fit:cover; border-radius:10px; background:#000}
#film .reel h3{font-size:20px; font-weight:400; margin-bottom:6px}
#film .reel p{color:var(--soft); margin:0 0 8px; font-size:16px}
@media (max-width:760px){#film .reels{grid-template-columns:1fr}}