/* Source Sans 3 (OFL), selbst gehostet - kein Abruf bei Google zur Laufzeit */
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url("../Fonts/source-sans-3-400.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url("../Fonts/source-sans-3-600.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:700;font-display:swap;src:url("../Fonts/source-sans-3-700.woff2") format("woff2")}

/* Thüringen App – Grundgerüst. Farben aus dem Entwurf 09/2026, Blau #008ac4 aus der offiziellen Wort-Bild-Marke.
   Entwurf 10/2026: breiterer Inhalt (1155 px), größere Radien, schwarze Buttons mit Symbol, Kundenicons in #0179be. */
:root{
  --blue:#008ac4; --blue-dark:#006f9e; --grey:#f6f7f9; --line:#e3e6ea;
  --text:#1d1d1b; --muted:#5b6068; --radius:36px; --radius-sm:18px; --container:1203px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;font-family:"Source Sans 3","Source Sans Pro",system-ui,sans-serif;font-size:20px;line-height:1.55;color:var(--text);background:#fff}
/* Motive (Hero, Panels) ragen mit ihrem Schatten über den Rand – kein seitliches Scrollen */
main{overflow-x:clip}
h1,h2,h3{line-height:1.15;margin:0 0 .5em;font-weight:700;text-wrap:balance}
h1{font-size:clamp(2rem,4.2vw,3.4rem)}
h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 1em}
h3{font-size:1.3rem;margin-bottom:.35em}
p{margin:0 0 1em;color:var(--muted)}
a{color:var(--blue)}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--container);margin-inline:auto;padding-inline:24px}
main>section{padding-block:56px}
/* Startseite: „Was in der App steckt“ und „Anlässe …“ näher an den Abschnitt davor */
main>section#app,main>section.occasions,main>section.faq{padding-top:28px}
/* direkt unter dem Hero: „Warum es die Thüringen App gibt“ (Start) und „Was zur Verfügung steht“ (Materialien) */
main>section#abschnitt-3,main>section#pakete,main>section.contact--innen,main>section.kontaktformular,main>section.faq+section.contact{padding-top:0}
.bg-grey{background:var(--grey)}
/* Buttons: schwarze Pille, Symbol links (Entwurf 10/2026) */
.button{display:inline-flex;align-items:center;gap:.6em;background:#000;color:#fff;font-weight:700;font-size:1.05rem;line-height:1.2;padding:.6em 1.5em;border-radius:999px;text-decoration:none;border:0;cursor:pointer}
.button img{flex:none;width:20px;height:20px}
.button:hover,.button:focus-visible{background:#333}
.button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.buttons{display:flex;flex-wrap:wrap;gap:16px 20px;margin-top:28px}

/* Kopf und Fuß */
.wordmark{display:flex;flex-direction:column;line-height:1.15;font-size:.78rem;color:var(--text);text-decoration:none}
.wordmark strong{font-size:1.15rem}
.site-header__logo{text-decoration:none}
.site-header{position:sticky;top:0;z-index:50;background:#fff}
.site-header__inner,.site-footer__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:20px;flex-wrap:wrap}
@media (min-width:1280px){.container.site-header__inner,.container.site-footer__inner{padding-inline:0}}
/* 1280–1500px: etwas schmaler, wächst fließend bis zur vollen Breite (kein Sprung) */
@media (min-width:1280px) and (max-width:1500px){:root{--container:min(1203px, calc(100vw - 180px))}}
.site-nav a,.site-footer nav a{color:var(--text);font-weight:700;text-decoration:none;margin-left:28px;font-size:1.05rem}
.site-nav{display:flex;align-items:center}
.site-nav a{margin-left:42px}
.site-nav a:hover,.site-nav a:focus-visible{color:var(--blue)}
.site-nav .site-nav__download{color:#fff;margin-left:40px;padding:.5em 1.3em}
.site-nav .site-nav__download:hover,.site-nav .site-nav__download:focus-visible{color:#fff}
.site-footer{margin-top:0}

/* Hero (Entwurf 10/2026): blaue Bühne mit schräger Unterkante, schwarze Überschrift, Motiv ragt unten heraus.
   Die Fläche besteht aus zwei Ebenen hinter dem Inhalt: ::before = oberer Teil, ::after = geneigter unterer Teil.
   So bleiben alle Ecken rund und das Motiv darf über den Rand ragen (kein overflow/clip am Abschnitt). */
.hero{position:relative;isolation:isolate;margin:8px auto 64px;width:min(calc(100% - 32px), calc(var(--container) + 23px));display:grid;grid-template-columns:1.2fr .8fr;gap:32px;padding:68px 70px 88px;align-items:center;color:#fff}
.hero::before,.hero::after{content:"";position:absolute;z-index:-1;left:0;right:0;background:var(--blue);border-radius:var(--radius)}
.hero::before{top:0;bottom:22%}
.hero::after{bottom:0;height:45%;transform:skewY(-3deg);transform-origin:left bottom}
.hero h1{color:#000;font-size:clamp(2.45rem,5.6vw,4.7rem);line-height:1.05;margin-bottom:.45em}
.hero p{color:#fff;font-size:clamp(1.08rem,1.7vw,1.42rem);font-weight:600;line-height:1.35;max-width:21em;text-wrap:pretty}
.hero p:last-of-type{margin-bottom:0}
.badge{display:inline-block;background:#fff;color:var(--blue);font-weight:700;font-size:.9rem;padding:.4em 1em;border-radius:6px}
/* Motive bringen ihren weichen Schatten mit (gut ein Drittel der Bildbreite) – daher breiter als die Spalte */
.hero__media{align-self:end;margin-bottom:-150px;position:relative}
.hero__media img{width:150%;max-width:none;max-height:none;margin-left:-15%}
/* alle Heros (groß, schmal, Unterseiten): Motiv etwas nach links */
@media (min-width:768px){.hero__media{left:-24px}}
/* Startseite (nicht Unterseiten): Handy etwas größer, weiter links und tiefer */
/* Schmale Variante (Schalter im Hero): niedriger, Überschrift läuft breiter, Motiv kleiner */
@media (min-width:768px){.hero:not(.hero--sub) .hero__media{margin-bottom:-185px}.hero:not(.hero--sub) .hero__media img{width:165%;margin-left:-26%}}
@media (min-width:768px){.hero.hero--schmal{padding-block:52px 64px;grid-template-columns:1.45fr .55fr}.hero.hero--schmal .hero__media{margin-bottom:-110px}.hero.hero--schmal .hero__media img{width:160%;margin-left:-22%}.hero.hero--schmal .hero__pfeil{left:54%;top:66%}.hero.hero--schmal h1{margin-bottom:.25em}}
.hero__stores{display:flex;flex-wrap:wrap;gap:20px;margin-top:44px}
.hero__stores a{display:block;line-height:0;border-radius:10px}
.hero__stores a:focus-visible{outline:3px solid #fff;outline-offset:3px}
.hero__stores img{height:50px;width:auto}
.hero__stores span{display:block;line-height:0;opacity:.45;filter:grayscale(1);cursor:not-allowed}
/* vor dem Store-Start: „Bald verfügbar“ über den Abzeichen */
.hero p.hero__start,#download.hero p.hero__start{max-width:none;display:inline-flex;align-items:center;gap:.5em;margin:44px 0 0;padding:.45em 1.1em;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;font-weight:700;font-size:1rem;line-height:1.3}
.hero__start img{width:20px;height:20px;flex:none}
.hero__start+.hero__stores{margin-top:16px}
.hero .buttons{margin-top:36px}
/* Deko-Pfeil zwischen Text und Motiv */
.hero__pfeil{position:absolute;width:112px;height:auto;pointer-events:none}
.hero--pfeil-links .hero__pfeil{left:50%;top:64%}
.hero--pfeil-rechts .hero__pfeil{left:54%;top:56%;width:120px}
.hero--pfeil-runter .hero__pfeil{left:54%;top:22%}

/* Bild + Text */
.media-text__inner{display:grid;grid-template-columns:1fr 1.3fr;gap:64px;align-items:center}
.media-text--right .media-text__media{order:2}
/* Startseite: Laufzettel etwas kleiner */
#abschnitt-3 .media-text__media img{width:85%;margin-inline:auto}
@media (min-width:768px){main>section#materialien{padding-block:40px;overflow:hidden}#materialien .media-text__media{margin-block:-50px}#materialien .media-text__media img{width:122%;max-width:none;margin-left:-8%;transform:translateY(10%)}} /* Plakate: unteres Fünftel des Bildes ist nur Schatten – nach unten ausgleichen, damit sie mittig zum Text stehen */

/* Merkmale */
.features__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.features--cards .feature{background:var(--grey);border-radius:var(--radius-sm);padding:32px}
.features--cards.bg-grey .feature{background:#fff}
.feature__icon{width:24px;height:24px;margin-bottom:12px}
.feature p{margin:0}
/* Hervorgehobene Karte, z. B. Starterkit zum Anfordern */
.features .feature--highlight,.features--cards.bg-grey .feature--highlight{background:#fff;border:2px solid var(--blue);border-radius:var(--radius-sm);padding:30px}
.feature .buttons{margin-top:22px}

/* Video */
.video video,.video__placeholder{width:100%;aspect-ratio:16/9;border-radius:var(--radius);background:#000;display:block}
.video__placeholder{display:grid;place-items:center;color:#fff}
/* Überschrift des Videos nur auf dem Telefon (Feld leer = keine Überschrift) */
.video__titel{display:none}
@media (max-width:767px){.video__titel{display:block}}
/* Player: Startknopf = schwarze Pille wie alle Buttons, Bedienleiste weiß auf Verlauf, Fortschritt im Thüringen-Blau.
   Ohne JavaScript bleiben die Browser-Controls (Startknopf und Leiste erscheinen erst mit .player--js). */
/* Grund = Hintergrundfarbe des Videos, damit bei Rundung auf halbe Pixel kein schwarzer Saum am Rand erscheint */
.player{position:relative;border-radius:var(--radius);overflow:hidden;background:#edf2f5;isolation:isolate}
.video .player video{border-radius:0;cursor:pointer;background:#edf2f5;object-fit:cover}
.player__start,.player__leiste{display:none}
.player button{font-family:inherit} /* <button> erbt die Seitenschrift nicht von selbst */
.player--js .player__start{display:inline-flex;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 10px 30px rgba(0,0,0,.2);white-space:nowrap}
.player__start svg{width:22px;height:22px;flex:none}
@media (min-width:768px){.player--js .player__start{font-size:1.2rem;padding:.75em 1.8em}.player__start svg{width:26px;height:26px}}
.player__dauer{font-weight:400;opacity:.7}
.player__dauer:empty{display:none}
.player--gestartet .player__start{display:none}
.player--js.player--gestartet .player__leiste{display:block}
.player__leiste{position:absolute;inset:auto 0 0;padding:56px 20px 10px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.4) 45%,rgba(0,0,0,.8));opacity:0;pointer-events:none;transition:opacity .2s}
.player--leiste .player__leiste,.player--gestartet:not(.player--laeuft) .player__leiste{opacity:1;pointer-events:auto}
.player__knoepfe{display:flex;align-items:center;gap:4px}
.player__zeit{margin-right:auto;padding-left:6px;font-size:.9rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.player__knopf{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:#fff;cursor:pointer}
.player__knopf svg{width:24px;height:24px}
.player__knopf:hover{background:rgba(255,255,255,.16)}
.player__knopf:focus-visible,.player__fortschritt:focus-visible{outline:2px solid #fff;outline-offset:2px}
.player__icon-pause,.player__icon-stumm,.player--laeuft .player__icon-play,.player--stumm .player__icon-ton{display:none}
.player--laeuft .player__icon-pause,.player--stumm .player__icon-stumm{display:block}
/* Fortschritt: 24px hohe Fläche zum Tippen, sichtbar nur die 5px-Spur */
.player__fortschritt{-webkit-appearance:none;appearance:none;display:block;width:100%;height:24px;margin:0;background:none;cursor:pointer;--spur:linear-gradient(to right,var(--blue) var(--wert,0%),rgba(255,255,255,.35) var(--wert,0%))}
.player__fortschritt::-webkit-slider-runnable-track{height:5px;border-radius:99px;background:var(--spur)}
.player__fortschritt::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-5.5px;border-radius:50%;background:#fff;border:0}
.player__fortschritt::-moz-range-track{height:5px;border-radius:99px;background:rgba(255,255,255,.35)}
.player__fortschritt::-moz-range-progress{height:5px;border-radius:99px;background:var(--blue)}
.player__fortschritt::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:0}
.player:fullscreen{display:flex;flex-direction:column;justify-content:center;border-radius:0;background:#000}
.video .player:fullscreen video{flex:1;min-height:0;aspect-ratio:auto;object-fit:contain;background:#000}
/* Untertitel: eigene Ebene über dem Bild, Schrift wächst mit der Playerbreite (auch im Vollbild) */
.player{container-type:inline-size}
.player__untertitel{position:absolute;left:0;right:0;bottom:6%;z-index:2;padding:0 6%;text-align:center;pointer-events:none;transition:bottom .2s}
.player__untertitel:empty{display:none}
.player__untertitel span{display:block;width:fit-content;margin:0 auto;color:#fff;background:rgba(0,0,0,.78);font-weight:600;font-size:clamp(15px,3cqi,34px);line-height:1.3;padding:.06em .45em;border-radius:.2em}
.player__untertitel span+span{margin-top:.15em}
.player--leiste .player__untertitel,.player--gestartet:not(.player--laeuft) .player__untertitel{bottom:92px}
.player__knopf--ut[aria-pressed=true]{background:rgba(255,255,255,.22)}
.player__knopf--ut[aria-pressed=true] rect{fill:currentColor}
.player__knopf--ut[aria-pressed=true] path{stroke:#000}
/* Telefon: Leiste fest unter dem Bild statt darüber – verdeckt im kleinen Video nichts, alle Knöpfe bleiben 40px groß */
@media (max-width:767px){
  .player{border-radius:24px}
  .player__untertitel,.player--leiste .player__untertitel,.player--gestartet:not(.player--laeuft) .player__untertitel{bottom:calc(var(--leiste-h,74px) + 8px)}
  .player__leiste{position:static;padding:4px 10px 6px;background:#000;opacity:1;pointer-events:auto}
  .player__knopf{width:40px;height:40px}
  .player__zeit{font-size:.8rem}
  .player--js .player__start{font-size:.95rem;padding:.55em 1.2em;min-width:0}
}

/* Nummerierte Liste */
.occasions__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px 32px}
.occasions__grid li{display:flex;gap:24px;align-items:baseline;border-bottom:1px solid var(--muted);padding-bottom:16px;font-weight:700}
.occasions__num{color:var(--blue);font-size:.95rem}
.occasions__grid a{color:inherit;text-decoration:none}

/* Benachrichtigung */
.signup__panel{background:var(--blue);border-radius:var(--radius);color:#fff;padding:56px 64px;display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.signup__panel h2,.signup__panel p{color:#fff}
.signup__consent{font-size:.8rem;opacity:.9;margin-top:16px}
.signup__consent a{color:#fff}
.signup form{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end}
.signup form label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.signup input[type=email]{padding:.7em 1em;border:0;border-radius:8px;min-width:300px;font:inherit}
.signup button,.signup input[type=submit]{background:#fff;color:var(--text);font-weight:700;border:0;border-radius:8px;padding:.7em 1.4em;font:inherit;cursor:pointer}
.signup .alert{background:#fff;color:var(--text);border-radius:8px;padding:12px 16px}

/* Häufige Fragen – Löwe als Wasserzeichen hinter der Liste (Entwurf 10/2026) */
.faq .container{position:relative}
.faq .faq__list::before{content:"";position:absolute;z-index:-1;right:86px;top:50%;transform:translateY(-50%);width:400px;height:478px;background:url("../Images/loewe-sterne-wasserzeichen.svg") no-repeat center/contain;pointer-events:none;opacity:.75}
.faq__intro{max-width:62ch}
.faq__list{position:relative;isolation:isolate}
.faq .buttons{margin-top:32px}
/* Mehrere Themenblöcke hintereinander (Seite /fragen): Löwe nur einmal, Abstand nicht doppelt */
.faq+.faq .faq__list::before,.faq.faq--ohne-loewe .faq__list::before{content:none}
main>.faq+.faq{padding-top:0}
.faq details{border-top:1px solid var(--text)}
.faq details:last-of-type{border-bottom:1px solid var(--text)}
.faq summary{cursor:pointer;font-weight:700;padding:24px 32px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e8cc6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq details>div{padding:0 32px 24px}

/* ---------- Rechtstexte: Impressum, Datenschutz & Co. ---------- */
.legal{padding-block:56px}
.legal__inner{max-width:820px}
.legal h1{font-size:clamp(1.9rem,3.4vw,2.6rem);margin-bottom:.35em}
.legal__stand{font-size:.9rem;color:var(--muted);margin-bottom:1.6em}
.legal__intro{font-size:1.05rem;max-width:68ch}
.legal__intro p:last-child{margin-bottom:0}

.legal__toc{background:var(--grey);border-radius:var(--radius-sm);padding:24px 28px;margin:32px 0 8px}
.legal__toc-titel{font-weight:700;color:var(--text);margin:0 0 .6em}
.legal__toc ol{margin:0;padding-left:1.3em;display:grid;gap:.45em}
.legal__toc a{color:var(--blue);text-decoration:none}
.legal__toc a:hover,.legal__toc a:focus{text-decoration:underline}

.legal__section{margin-top:40px;scroll-margin-top:24px}
.legal__section h2{font-size:1.3rem;display:flex;gap:.5em;align-items:baseline}
.legal__nr{color:var(--blue);font-variant-numeric:tabular-nums;flex:none}
.legal__section p,.legal__section li{max-width:68ch}
.legal__section ul,.legal__section ol{margin:0 0 1em;padding-left:1.3em;color:var(--muted)}
.legal__section li{margin-bottom:.4em}
.legal__section a{color:var(--blue)}
.legal__section table{border-collapse:collapse;width:100%;margin-bottom:1em;font-size:.95rem}
.legal__section th,.legal__section td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.legal__section th{font-weight:700;color:var(--text)}

/* Impressum: Bezeichnung neben Inhalt */
.imprint__list{margin:32px 0 0}
.imprint__row{display:grid;grid-template-columns:240px 1fr;gap:8px 32px;padding:20px 0;border-top:1px solid var(--line)}
.imprint__row:last-child{border-bottom:1px solid var(--line)}
.imprint__row dt{font-weight:700;color:var(--text)}
.imprint__row dd{margin:0;color:var(--muted);max-width:60ch}
.imprint__row dd p:last-child{margin-bottom:0}
.imprint__row dd a{color:var(--blue)}

.platzhalter{background:#fff4d6;color:#7a5b00;border:1px dashed #d9a400;border-radius:4px;padding:.1em .45em;font-size:.92em;font-weight:600}

/* ---------- Unterseiten-Hero: Rücklink ---------- */
.hero__back{display:inline-flex;align-items:center;gap:.4em;color:#fff;font-weight:700;text-decoration:none;justify-self:start}
.hero__back:hover,.hero__back:focus-visible{text-decoration:underline}
.hero--sub{grid-template-areas:"back media" "text media";row-gap:12px}
.hero--sub .hero__back{grid-area:back;align-self:end}
.hero--sub .hero__text{grid-area:text;align-self:start}
.hero--sub .hero__media{grid-area:media}

/* ---------- Merkmale: Einleitung und Formate ---------- */
.features__intro{margin:-.4em 0 2em;max-width:48ch}
.tags{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{border:1.5px solid var(--blue);color:var(--blue);background:var(--grey);border-radius:6px;font-size:.72rem;font-weight:700;line-height:1;padding:.42em .8em .36em;display:flex;align-items:center;justify-content:center;text-align:center}

/* ---------- Ansprechpartner ---------- */
.contact>.container{max-width:calc(var(--container) + 55px);padding-inline:16px}
.contact__panel{position:relative;background:var(--blue);border-radius:var(--radius);color:#fff;padding:56px 70px;display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
.contact__panel h2{color:#000;margin-bottom:.4em}
.contact__panel p{color:#fff;font-size:inherit}
.faq+.contact .contact__panel p{max-width:64ch;text-wrap:pretty}
@media (min-width:768px){main>section.faq+section.contact{padding-bottom:28px}.faq+.contact .contact__media img{width:108%;max-width:none;margin-left:-4%;transform:translateY(22px)}}
.contact__panel .contact__subline{font-weight:600;font-size:clamp(1.08rem,1.7vw,1.42rem);line-height:1.35;margin:-.1em 0 1em;text-wrap:pretty}
.contact__media img{margin-inline:auto}
/* Motiv rechts (Podcast, Fragen zum Material): ragt oben/unten aus dem Panel */
.contact--bild-right .contact__panel{grid-template-columns:1.25fr .75fr}
.contact__panel:not(:has(.contact__media)){grid-template-columns:1fr}
.contact--bild-right .contact__media{order:2;margin-block:-90px}
.contact--gekippt .contact__media img{transform:rotate(5deg);filter:drop-shadow(0 18px 30px rgba(0,0,0,.18));max-width:340px;margin-bottom:-120px}
@media (min-width:768px){.contact--gekippt .contact__media img{transform:translate(24px,28px) rotate(5deg);max-width:400px}.contact--gekippt .contact__pfeil{width:130px}}
/* Motiv bleibt im Panel (Entwurf 19.10.: Schlüsselanhänger bei „Fragen zum Material“) */
.contact--innen .contact__panel{grid-template-columns:1fr 1fr;gap:16px;padding-block:44px}
/* Motiv steht auf der Unterkante des Panels; ab Desktop ragt es oben über den Rand (Höhe bestimmt der Text) */
.contact--innen .contact__media{margin-block:-44px;align-self:end}
.contact--innen .contact__media img{width:85%;display:block}
main>section.contact.contact--innen{padding-top:32px}
@media (min-width:768px){main>section.contact.contact--innen{padding-top:90px}.contact--innen .contact__media{margin-top:-120px}}
.contact__pfeil{position:absolute;width:108px;height:auto;pointer-events:none;left:55%;top:16%}
.contact__person{display:grid;grid-template-columns:60px 1fr;gap:28px;margin-top:8px;align-items:start}
.contact__avatar{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.35);display:grid;place-items:center;color:#fff}
.contact__name{font-weight:700;font-size:1.15rem;margin:0 0 .25em}
.contact__role{margin:0}
.contact__links{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.contact__links--person{padding-left:88px}
.contact__links img{flex:none}
.contact__links li{display:flex;align-items:center;gap:14px}
.contact__links svg{flex:none}
.contact__links a,.contact__links span{color:#fff;font-weight:700;text-decoration:none;overflow-wrap:anywhere}
.contact__links a:hover,.contact__links a:focus-visible{text-decoration:underline}

/* ---------- Sprunglink und mobiles Menü ---------- */
.skip-link{position:absolute;left:-9999px;top:8px;background:#fff;color:var(--text);padding:.5em 1em;border-radius:6px;z-index:10}
.skip-link:focus{left:16px}
.menu-toggle{display:none;background:none;border:0;padding:6px;margin:-6px;color:var(--text);cursor:pointer;line-height:0}
/* Mobiles Menü: wie der Hero – blaue Fläche mit schräger Unterkante, schwarze Titel, weiße Zusatzzeilen */
.mobilmenue{inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:0 0 24px;background:#fff;color:var(--text);overflow:auto}
.mobilmenue:popover-open{display:flex;flex-direction:column}
.mobilmenue::backdrop{background:transparent}
/* Seite dahinter nicht scrollbar, solange das Menü offen ist */
html:has(.mobilmenue:popover-open),html:has(.mobilmenue:popover-open) body{overflow:hidden}
.mobilmenue{overscroll-behavior:contain}
.mobilmenue__kopf{display:flex;justify-content:space-between;align-items:center;padding-block:14px;width:100%}
.mobilmenue .menu-toggle{display:block}
.mobilmenue__panel{flex:1;position:relative;isolation:isolate;margin:4px 26px 0;padding:18px 0 64px;display:flex;flex-direction:column;color:#fff}
.mobilmenue__panel::before,.mobilmenue__panel::after{content:"";position:absolute;z-index:-1;left:0;right:0;background:var(--blue);border-radius:24px}
.mobilmenue__panel::before{top:0;bottom:16%}
.mobilmenue__panel::after{bottom:0;height:40%;transform:skewY(-6deg);transform-origin:left bottom}
.mobilmenue__panel ol{list-style:none;margin:0;padding:0 24px}
.mobilmenue__panel li+li{border-top:1px solid rgba(255,255,255,.35)}
.eintrag{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:6px;padding:16px 0;color:#fff;text-decoration:none}
.eintrag__nr{color:#fff;opacity:.8;font-weight:700;font-size:.95rem;align-self:start;padding-top:.55em}
.eintrag strong{display:block;color:#000;font-size:1.75rem;line-height:1.1}
.eintrag small{display:block;font-size:1rem;font-weight:600;margin-top:.3em;line-height:1.35}
.eintrag svg{color:#000}
.eintrag:hover strong,.eintrag:focus-visible strong{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.eintrag:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:8px}
.mobilmenue__cta{margin:28px 24px 0;font-size:1.15rem;padding:.65em 1em;display:flex;justify-content:center;align-self:stretch}
.mobilmenue__cta img{width:22px;height:22px}
.mobilmenue__fuss{display:flex;justify-content:center;flex-wrap:nowrap;gap:0 clamp(12px,4vw,24px);padding:28px 16px 0}
.mobilmenue__fuss a{color:var(--text);font-weight:700;text-decoration:none;white-space:nowrap;font-size:clamp(.82rem,3.9vw,1rem)}

/* ---------- Mobil (Entwurf 400 pt) ---------- */
@media (max-width:767px){
  body{font-size:17px}
  .container{padding-inline:30px}
  main>section{padding-block:36px}
  main>section#app,main>section.occasions,main>section.faq{padding-top:18px}
  main>section#abschnitt-3{padding-bottom:12px}
  main>section#app{padding-top:0}

  /* Kopfzeile: nur die Wort-Bild-Marke, Navigation entfaellt */
  .site-nav{display:none}
  .site-header__inner{padding-block:14px}
  .site-header__logo img{width:180px;height:auto}

  /* Hero: gestapelt und mittig, Motiv unter dem Text und unten über die Schräge hinaus */
  .hero{grid-template-columns:1fr;width:calc(100% - 52px);margin:4px auto calc(29vw + 40px);padding:40px 28px 0;text-align:left;gap:28px}
  .hero::before{bottom:16%;border-radius:24px}
  .hero::after{height:40%;border-radius:24px;transform:skewY(-6deg)}
  .hero h1{font-size:clamp(2.4rem,11.5vw,3.4rem);hyphens:none}
  /* /kontakt, /fragen: „Kontaktformular“ muss ohne Trennung in die Zeile passen */
  .hero.hero--schmal h1{font-size:clamp(2rem,9.3vw,3.1rem)}
  h2{font-size:2.05rem}
  h3{font-size:1.5rem}
  .hero p{max-width:30ch;margin-inline:0;font-size:1.1rem}
  .contact__panel .contact__subline{font-size:1.1rem}
  .badge{display:block;width:100%;padding-block:.7em;font-size:1rem}
  /* blaue Fläche endet früher: das Motiv steht etwa zu einem Drittel unten über */
  .hero__media{margin-bottom:0}
  .contact>.container,.kontaktformular>.container{padding-inline:26px}
  .hero__media img{width:min(130%,460px);margin-inline:auto;margin-left:50%;transform:translateX(-50%);margin-bottom:-36%}
  /* Bilder mit Schatten rechts: sichtbaren Inhalt mittig stellen (Inhalt sitzt ~4,5 % der Bildbreite links der Bildmitte) */
  #download .hero__media img{transform:translateX(-45.7%)}
  #download.hero,main>.hero:has(+ #pakete){margin-bottom:calc(29vw + 2px)}
  .hero--schmal .hero__media img{width:min(105%,380px);transform:translateX(-45.4%) translateY(-16px)}
  .hero.hero--schmal{margin-bottom:calc(20vw + 4px)}
  main>section.kontaktformular{padding-top:20px}
  .hero__stores,.hero .buttons{justify-content:flex-start}
  .hero__stores{margin-top:28px;gap:12px}
  .hero__stores img{height:40px}
  .hero__pfeil{display:none}
  /* Podcast u. ä.: Pfeil zwischen Text und Bild, zeigt nach unten aufs Bild */
  .contact__pfeil{position:absolute;display:block;left:auto;top:auto;right:62px;bottom:200px;width:92px;transform:rotate(35deg)}

  /* Bild + Text: Text zuerst, Bild darunter */
  .media-text__inner{grid-template-columns:1fr;gap:28px}
  .media-text__media{order:2}
  .media-text__media img{width:min(100%,420px);margin-inline:auto}
  /* „Die App bekannt machen“: Plakate größer und mittig (Bild hat transparenten Rand) */
  #materialien .media-text__media img{width:min(118%,500px);max-width:none;margin-left:50%;transform:translateX(-44%);margin-bottom:-8%}

  /* Raster einspaltig */
  .features__grid{grid-template-columns:1fr;gap:28px}
  .video video,.video__placeholder,.contact__panel{border-radius:24px}
  .button{min-width:164px;justify-content:center}
  .contact__links a,.contact__links span{font-size:.9rem}
  .contact--innen h2{max-width:14ch}
  .faq+.contact .contact__media{margin-block:0 -120px}
  .faq+.contact{padding-bottom:90px}
  .contact--bild-right .contact__panel{row-gap:0}
  .features--cards .feature{padding:24px}
  .occasions__grid{grid-template-columns:1fr;gap:0}
  .occasions__grid li{padding-block:14px;font-size:1.5rem;line-height:1.15}

  /* Benachrichtigung: alles untereinander, Felder volle Breite */
  .signup__panel{grid-template-columns:1fr;padding:32px 24px;gap:28px}
  .signup form{display:block}
  .signup input[type=email]{width:100%;min-width:0;margin-bottom:12px}
  .signup button,.signup input[type=submit]{width:100%}
  .signup__media{order:2}
  .signup__media img{width:min(100%,360px);margin-inline:auto}

  /* Haeufige Fragen */
  .faq summary{padding:18px 0;gap:12px}
  .faq details>div{padding:0 0 18px}

  /* Rechtstexte */
  .legal{padding-block:32px}
  .legal__toc{padding:20px}
  .legal__section{margin-top:32px}
  .imprint__row{grid-template-columns:1fr;gap:4px;padding:16px 0}

  /* Menü: Schalter statt Navigation */
  .site-header .menu-toggle{display:block}

  /* Unterseiten-Hero: Rücklink wandert unter das Motiv */
  .hero--sub{grid-template-areas:"text" "media" "back"}
  .hero--sub .hero__back{justify-self:center;font-size:1.2rem;padding-block:4px 8px}
  /* Bild nicht über den Rücklink ziehen, der darunter steht */
  .hero--sub .hero__media{margin-bottom:0}

  /* Merkmale */
  .features__intro{margin-bottom:1.5em}

  /* Ansprechpartner: Text zuerst, Motiv darunter */
  .contact__panel,.contact--bild-right .contact__panel{grid-template-columns:1fr;padding:32px 24px;gap:28px}
  .contact__media{order:2}
  .contact--bild-right .contact__media{margin-block:0 -70px}
  .contact__media img{width:min(100%,380px)}
  .contact--gekippt .contact__media img{max-width:300px;margin-bottom:0}
  .contact--gekippt .contact__media{margin-bottom:-140px}
  .contact.contact--gekippt{padding-bottom:160px}
  .contact--innen .contact__panel{grid-template-columns:1fr}
  .contact--bild-right.contact--innen .contact__media{margin-block:0 -32px}
  .contact--bild-right.contact--innen{padding-bottom:56px}
  .contact--bild-right{padding-bottom:84px}
  .contact__person{grid-template-columns:48px 1fr;gap:16px}
  .contact__avatar{width:48px;height:48px}
  .contact__links--person{padding-left:0}

  /* Häufige Fragen: Wasserzeichen kleiner, oben rechts */
  .faq .faq__list::before{content:none}

  /* Fusszeile: Marke oben, Verweise darunter, mittig */
  .site-footer__inner{flex-direction:column;align-items:center;text-align:center;gap:20px}
  .site-footer nav{display:flex;flex-direction:column;gap:14px}
  .site-footer nav a{margin-left:0}
}
@media (max-width:420px){
  .hero{padding-inline:28px}
  .container{padding-inline:26px}
}
/* Kopfzeile zwischen Telefon und Desktop: Abstände der Navigation enger */
@media (min-width:768px) and (max-width:1180px){
  .site-nav a{margin-left:22px;font-size:1rem}
  .site-nav .site-nav__download{margin-left:22px}
}

/* ---------- Kontaktformular ---------- */
.kontaktformular>.container{max-width:calc(var(--container) + 55px);padding-inline:16px}
.kontaktformular__karte{background:var(--grey);border-radius:var(--radius);padding:60px 70px}
.kontaktformular__karte h2{margin-bottom:.8em}
.kontaktformular__intro{margin-top:-.6em;max-width:60ch}
.kontaktformular form{display:grid;gap:22px}
/* TYPO3-Formular: erstes <div> enthält nur versteckte Felder – nicht als Zeile mitzählen (sonst 22px Leerraum oben) */
.kontaktformular form>div:first-child:not(:has(:not(input[type=hidden]))){display:none}
/* iPad mini bis iPad Pro (768–1279px) */
@media (min-width:768px) and (max-width:1279px){.kontaktformular__karte{padding:40px}}
.kontaktformular form fieldset{border:0;margin:0;padding:0;min-width:0}
.kontaktformular .form-group,.kontaktformular .mb-3{margin:0}
.kontaktformular .row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 24px;margin:0}
.kontaktformular .row>*{width:auto;max-width:none;padding:0;margin:0}
.kontaktformular label,.kontaktformular .form-label{display:block;font-weight:700;color:var(--text);margin-bottom:12px;font-size:1.25rem}
.kontaktformular input[type=text],.kontaktformular input[type=email],.kontaktformular select,.kontaktformular textarea{width:100%;font:inherit;font-size:1.25rem;font-weight:600;color:var(--text);background:#fff;border:1.5px solid transparent;border-radius:14px;padding:22px 26px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.kontaktformular textarea{min-height:190px;resize:vertical}
.kontaktformular ::placeholder{color:#6b7078;font-weight:600}
.kontaktformular select{appearance:none;cursor:pointer;padding-right:52px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008ac4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 18px center/20px no-repeat}
.kontaktformular input:focus-visible,.kontaktformular select:focus-visible,.kontaktformular textarea:focus-visible{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,138,196,.18)}
.kontaktformular .form-check-wrapping-label{display:flex;gap:12px;align-items:flex-start}
.kontaktformular .form-check-wrapping-label .form-check-label{display:block;font-weight:400;color:var(--text);font-size:1.2rem;line-height:1.5;margin:0;cursor:pointer}
.kontaktformular input[type=checkbox]{flex:none;width:18px;height:18px;margin:3px 0 0;accent-color:var(--blue);cursor:pointer}
/* Pflichtfelder tragen required – die Sternchen aus dem Formular-Standard zeigt der Entwurf nicht */
.kontaktformular .required{display:none}
/* Senden: schwarze Pille mit Papierflieger (Button kommt von EXT:form, Symbol daher per Hintergrund) */
.kontaktformular button[type=submit],.kontaktformular input[type=submit]{justify-self:start;background:#000 url("../Icons/ui/send.svg") no-repeat 24px center/20px;color:#fff;font:inherit;font-weight:700;font-size:1.05rem;border:0;border-radius:999px;padding:.65em 1.7em .65em 3.3em;cursor:pointer}
.kontaktformular button[type=submit]:hover,.kontaktformular button[type=submit]:focus-visible{background-color:#333}
.kontaktformular button[type=submit]:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.kontaktformular .actions,.kontaktformular .form-navigation{margin:0}
.kontaktformular .error,.kontaktformular .help-block,.kontaktformular .invalid-feedback{color:#b3261e;font-size:.9rem;margin-top:6px;display:block}
.kontaktformular .has-error input,.kontaktformular .has-error textarea,.kontaktformular .has-error select{border-color:#b3261e}
@media (max-width:767px){
  .kontaktformular__karte{padding:20px 14px;border-radius:var(--radius-sm)}
  .kontaktformular .row{grid-template-columns:1fr}
  .kontaktformular input[type=text],.kontaktformular input[type=email],.kontaktformular select,.kontaktformular textarea{padding:16px 18px;font-size:1rem}
  .kontaktformular button[type=submit],.kontaktformular input[type=submit]{width:100%}
}

@media (max-width:380px){.hero__stores img{height:36px}.contact__pfeil{right:28px;width:76px}.contact__links a,.contact__links span{font-size:.8rem}}
/* Tablet (768–1024px): Desktop-Aufbau, verdichtet */
@media (min-width:768px) and (max-width:1024px){
  .site-header__logo img{width:170px;height:auto}
  .site-nav a{margin-left:16px;font-size:.9rem}
  .site-nav .site-nav__download{margin-left:16px;padding:.45em 1em}
  .hero{padding:56px 40px 72px;gap:16px}
  .hero:not(.hero--sub):not(.hero--schmal) .hero__media img{width:130%;margin-left:-6%}
  .hero__pfeil{width:84px}
  .hero--pfeil-links .hero__pfeil{left:48%;top:57%;z-index:2}
  .hero--pfeil-rechts .hero__pfeil{left:auto;right:27%;top:60%;width:76px}
  .hero--pfeil-runter .hero__pfeil{left:50%;top:22%}
  .hero__stores{margin-top:22px;gap:12px}
  .hero__stores img{height:38px}
  .features__grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .contact__panel{padding:44px 40px;gap:24px}
  .contact--bild-right .contact__panel{grid-template-columns:1.5fr 1fr}
  .hero:not(.hero--sub):not(.hero--schmal) .hero__media{margin-bottom:-110px}
  main>section#abschnitt-3{padding-top:0;padding-bottom:20px}
  main>section#app{padding-top:0}
  .site-footer__inner img{width:170px;height:auto}
  .site-footer nav a{margin-left:14px;font-size:.85rem}
  .kontaktformular .row{grid-template-columns:repeat(2,1fr)}
  .kontaktformular .row>:nth-child(3){grid-column:1/-1}
  /* Radius wie auf dem Telefon */
  :root{--radius:24px}
  /* Laufzettel ausblenden, Text volle Breite */
  #abschnitt-3 .media-text__media{display:none}
  #abschnitt-3 .media-text__inner{grid-template-columns:1fr}
  /* Start-Hero: Handy größer, Beschreibung schmaler */
  #download.hero{grid-template-columns:1fr 1fr}
  #download.hero .hero__media img{width:134%;margin-left:2%}
  #download.hero p{max-width:16em}
  .occasions__grid{grid-template-columns:repeat(2,1fr)}
  /* 10px mehr Seitenrand */
  .container{padding-inline:34px}
  .hero{width:calc(100% - 52px)}
  .contact>.container,.kontaktformular>.container{padding-inline:26px}
  /* Podcast: Cover größer, unten angeschnitten; Pfeil sichtbar */
  .contact--gekippt .contact__media{align-self:center;margin-block:0}
  .contact--gekippt .contact__media img{max-width:300px;margin-bottom:0;transform:rotate(5deg)}
  .contact--gekippt .contact__pfeil{display:none}
  .contact__body .buttons{flex-wrap:nowrap;gap:12px}
  .contact__body .button{white-space:nowrap;min-width:0;padding-inline:1.2em}
  .contact--gekippt .contact__panel{grid-template-columns:1.7fr 1fr}
  /* FAQ-Löwe aus, Footer ohne Logo */
  .faq .faq__list::before{content:none}
  .site-footer__inner{justify-content:center}
  .site-footer__inner img{display:none}
  .site-footer nav a:first-child{margin-left:0}
  /* „Die App bekannt machen“: Plakate mittig in ihrer Spalte */
  #materialien .media-text__media img{width:135%;max-width:none;margin-left:-6%;transform:translateY(8%)}
}
/* iPad Pro / kleine Desktops (1025–1279px) */
@media (min-width:1025px) and (max-width:1279px){
  .container{padding-inline:34px}
  .hero,.contact>.container,.kontaktformular>.container{width:auto}
  .hero{width:min(calc(100% - 52px), calc(var(--container) + 23px))}
  .contact>.container,.kontaktformular>.container{padding-inline:26px}
  main>section#abschnitt-3{padding-top:52px;padding-bottom:24px}
  main>section#app{padding-top:8px}
  .contact--gekippt .contact__pfeil{left:50%;top:18%;bottom:auto;width:110px;z-index:2;transform:translateX(-50%)}
  .contact--gekippt .contact__body p{max-width:24em}
  .site-footer__inner{justify-content:center}
  .site-footer__inner img{display:none}
  .site-footer nav a:first-child{margin-left:0}
  #materialien .media-text__media img{transform:translate(7%,10%)}
  .hero.hero--schmal .hero__pfeil{left:52%;top:66%}
}
/* Tablet hochkant: Footer zweizeilig, mittig (Logo + 5 Links passen nicht in eine Zeile) */
@media (min-width:768px) and (max-width:900px){.site-footer__inner{justify-content:center;row-gap:14px}.site-footer nav{width:100%;text-align:center}.site-footer nav a:first-child{margin-left:0}}
/* /materialien: Plakat „Geschlossen?“ – Bilddatei hat viel transparenten Rand, deshalb deutlich größer */
@media (min-width:1025px){main>.hero:has(+ #pakete) .hero__media img{width:205%;margin-left:-58%;transform:translate(5%,20%)}main>.hero:has(+ #pakete){margin-bottom:200px}}
@media (min-width:1025px) and (max-width:1279px){main>.hero:has(+ #pakete) .hero__media img{width:205%;margin-left:-68%;transform:translate(5%,9%)}main>.hero:has(+ #pakete){margin-bottom:110px}}
/* Desktop: Plakat bleibt groß, bläht den blauen Hero aber nicht auf (Bildhöhe aus der Zeile genommen, Überhang gleich) */
@media (min-width:1280px){main>.hero:has(+ #pakete) .hero__media{margin-bottom:-329px}main>.hero:has(+ #pakete) .hero__media img{transform:translate(5%,0)}}
@media (min-width:768px) and (max-width:1024px){main>.hero:has(+ #pakete) .hero__media img{width:200%;margin-left:-54%;transform:translate(5%,26%)}main>.hero:has(+ #pakete){margin-bottom:150px}
  /* „Fragen zum Material“: Schlüsselanhänger aus, Text volle Breite */
  .contact--innen .contact__media{display:none}
  .contact--innen .contact__panel{grid-template-columns:1fr}
  /* /fragen und /kontakt: Pfeil gespiegelt */
  main>.hero.hero--schmal .hero__pfeil{left:58%;right:auto;top:34%;transform:scaleY(-1)}
}
@media (max-width:767px){main>.hero:has(+ #pakete) .hero__media img{width:min(165%,600px);margin-bottom:-48%}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.faq summary::after{transition:none}}