/* Seasonal character, one consistent component system across the site. */
:root{
 --grund:#fffdfb;--grund-warm:#f7f8f6;--gray-100:#f4f7f5;--gray-300:#dde6e0;--hairline:#eaf0ec;
 --card-radius:14px;--card-border:1px solid #dde6e0;
 --card-shadow:0 3px 8px rgba(24,62,45,.025),0 12px 28px rgba(24,62,45,.045);
 --df-ink:#14432f;--df-text:#4a4a4a;--df-accent:#1f6b4a;--df-pale:#f6faf8;--df-line:#dce6df;--df-line-soft:#eaf0ec;--df-shadow:var(--card-shadow);
}
body{background:var(--grund)}
body .sek-papier-tief{background:linear-gradient(180deg,#f7f9f8,#f2f6f4)}
body :is(h1,h2){letter-spacing:-.025em}
body .hero{background:linear-gradient(120deg,#fffdfb 0%,#fff 75%)}
body .hero::before{content:"";position:absolute;inset:0 35% 0 -5%;pointer-events:none;background:radial-gradient(ellipse at 25% 40%,rgba(86,173,198,.09),transparent 64%);animation:df-hero-light 18s ease-in-out infinite alternate}
@keyframes df-hero-light{from{opacity:.5;transform:translateX(0)}to{opacity:.85;transform:translateX(12px)}}
body .hero::after{opacity:.12}
body .hero-lichter{opacity:.43;filter:saturate(.9) brightness(1.09)}
body .btn{border-radius:8px
  min-height:44px;
  line-height:1.4;
  letter-spacing:.045em;}
body .btn-primary{background:linear-gradient(135deg,#c72b3e,#a91c2d);box-shadow:0 2px 4px rgba(120,24,39,.06),0 6px 14px rgba(176,30,46,.13)}
body .btn-primary:hover{background:linear-gradient(135deg,#bd2336,#981627);box-shadow:0 6px 16px rgba(176,30,46,.17)}
body .btn-ghost{background:#fff;border-color:#acc6b7;color:#14432f;box-shadow:none}
body .btn-ghost:hover{background:#f1f7f3;border-color:#74a48a;color:#14432f}
body :is(a,button,input,textarea,select,summary,[role=button]):focus-visible{outline:3px solid #248969;outline-offset:3px}
body .karte{background:#fff;border:var(--card-border);border-radius:14px;box-shadow:0 2px 6px rgba(24,62,45,.025),0 8px 20px rgba(24,62,45,.035);}
body .nacht .karte{background:#ffffff0b;border-color:#ffffff26;box-shadow:none}
body .hoerprobe-karte{background:#fff;border:var(--card-border);border-radius:12px;box-shadow:none;
  min-height:64px;}
body .hoerprobe-karte:hover,body .hoerprobe-karte.playing{border-color:#86b29b;box-shadow:0 5px 16px rgba(24,62,45,.09)}
body .hoerprobe-karte .play-circle{background:#f0f7f3;border-color:#b9d4c4}
body :is(.werkzeug,.mini,.muster,.hinweis,.gen-live,.variante){border-color:#dce6df;border-radius:14px;box-shadow:var(--card-shadow)}
body .werkzeug{background:#fff;}
body .mini{background:#fff}
body .mini:hover{background:#f5faf7;border-color:#9ebfae}
body .muster{background:#fff}
body .muster-link{border-radius:8px}
body .gen-live{background:#fff}
body .gen-live-bar{background:linear-gradient(110deg,#14432f,#1b6548)}
body :is(.nacht,.abschluss.nacht){background:linear-gradient(120deg,#123d2d,#1a5c43)}
body .schritt-zahl{border-radius:10px;box-shadow:0 3px 8px rgba(24,62,45,.08)}
body .prosa table{border:1px solid #dce6df;border-radius:10px;overflow:hidden}
body .prosa thead th{background:#f0f6f2}
body :is(.fahrplan,.textassistent,.werkzeug) :is(input,textarea,select){border-color:#b9d0c4;border-radius:8px}
@media(max-width:960px){body .hero-lichter{opacity:.25}}
@media(prefers-reduced-motion:reduce){body :is(.btn,.karte,.hoerprobe-karte,.mini){transition:none}body .hero::before{animation:none;opacity:.6}}

/* Shared FAQ component: same construction and states on every page. */
body .faq{border:0;background:none;box-shadow:none;max-width:60rem}
body .faq .df-faq{border:1px solid var(--df-line);border-radius:14px;box-shadow:var(--df-shadow);background:#fff;overflow:hidden;margin-top:24px}
body .faq .df-faq details{border:0;border-bottom:1px solid var(--df-line-soft);border-radius:0;box-shadow:none;background:#fff;margin:0;padding:0;overflow:hidden}
body .faq .df-faq details:last-child{border-bottom:0}
body .faq .df-faq summary{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:19.2px 27.2px;margin:0;min-height:63px;list-style:none;cursor:pointer;color:var(--df-ink);background:none;font-size:1.02rem;font-weight:500;letter-spacing:normal;line-height:1.4;border:0;box-shadow:none;transition:background .2s}
body .faq .df-faq summary::-webkit-details-marker{display:none}
body .faq .df-faq summary::after,body .faq .df-faq summary::before{content:none}
body .faq .df-faq summary:hover,body .faq .df-faq details[open]{background:var(--df-pale)}
body .faq .df-faq summary:focus-visible{outline:3px solid var(--df-accent);outline-offset:-3px}
body .faq .df-faq .df-faq-sign{display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;width:25px;height:25px;border:1px solid var(--df-accent);border-radius:50%;color:var(--df-accent);font-size:17px;font-weight:400;line-height:1;background:none;transition:transform .2s,background .2s,color .2s}
body .faq .df-faq details[open] .df-faq-sign{transform:rotate(45deg);color:#fff;background:var(--df-accent)}
body .faq .df-faq :is(.faq-text,.faq-a){max-width:74ch;padding:0 27.2px 22.4px;margin:0;border:0;color:var(--df-text);font-size:.97rem;line-height:1.72;font-weight:400;letter-spacing:normal}
body .faq .df-faq :is(.faq-text,.faq-a) p{font:inherit;color:inherit;margin:0;padding:0}
body .faq .df-faq :is(.faq-text,.faq-a) p+p{margin-top:.8rem}
body .faq .df-faq a{color:var(--df-ink);text-decoration:underline;text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){body .faq .df-faq :is(summary,.df-faq-sign){transition:none}}

/* Premium: gemeinsame Struktur fuer zusammengehoerige Inhalte, 13.09.2026. */

body .werkzeug {min-width:0}
body .werkzeug-vorschau {border-radius:8px;background:#f6f8f5}
body .werkzeug-titel {color:var(--df-ink)}
body .werkzeug-marke {justify-self:start}
body .werkzeug-cta {min-height:44px;line-height:1.45}
body .raster > .karte {display:flex;flex-direction:column;align-items:flex-start;min-width:0}
body .raster > .karte > .btn {margin-top:auto}
body .raster > .karte > p {margin-bottom:1rem}
body .kalender {align-self:stretch}
body .raster > .karte .anlass-cta {padding-top:.75rem}
body .prosa :is(ul,ol) > li + li {margin-top:.65rem}
body .prosa :is(h2,h3) {text-wrap:balance}
body .prosa table :is(th,td) {padding:1rem 1.125rem;vertical-align:top}
body #preis .raster {margin-top:1.75rem}
@media(min-width:901px){
 body .werkzeuge {row-gap:0}
 body .werkzeug {display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:16px}
 body .werkzeug > * {margin-block:0}
 body .werkzeug-vorschau {justify-content:center}
 body .werkzeug-cta {align-self:end}
}
@media(max-width:640px){
 body .btn {white-space:normal;max-width:100%;text-align:center}
 body .raster {gap:1rem}
 body .hoerprobe-karte {padding:.85rem;gap:.75rem}
}