:root{--navy:#0c2239;--blue:#143e63;--ink:#132d45;--muted:#526575;--yellow:#ffc34d;--pale:#f1f5f7;--line:#dce4e9;--cyan:#9cd8e3}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);font-size:17px;line-height:1.6}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:5px}button{font:inherit;cursor:pointer}a,button,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #df9300;outline-offset:5px}.wrap{width:min(1200px,calc(100% - 80px));margin:auto}.brand{display:flex;gap:12px;align-items:center;font-size:23px;font-weight:800;letter-spacing:.055em;line-height:1.1}.brand small{display:block;font-size:10px;letter-spacing:.15em;font-weight:500;margin-top:7px}.brand-p{display:grid;place-items:center;background:var(--yellow);color:var(--navy);width:42px;height:48px;font-size:33px;letter-spacing:0;border-radius:3px}.hero{background:var(--navy);color:white;padding-top:70px}.hero-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:65px;align-items:center;padding-bottom:70px}.eyebrow{font-size:12px;letter-spacing:.14em;font-weight:bold;margin:0 0 20px;text-transform:uppercase}.amber{color:var(--yellow)}h1{font-size:clamp(52px,5.8vw,82px);letter-spacing:-.055em;line-height:1.06;margin:0 0 28px}h1 span{color:var(--cyan)}.intro{max-width:540px;color:#c3d1dd;font-size:18px}.buttons{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}.button{display:inline-flex;justify-content:space-between;align-items:center;gap:30px;padding:16px 23px;font-size:15px;font-weight:bold;border-radius:3px}.yellow{background:var(--yellow);color:var(--navy)}.ghost{border:1px solid #ffffff50}.hero-note{border:1px solid #547185;background:#15334d;padding:35px 35px 26px;transform:rotate(2deg);box-shadow:15px 15px 0 #ffffff06}.note-top{font-size:12px;letter-spacing:.12em;color:#b6cbd8}.hero-note>p{font-size:39px;font-weight:700;line-height:1.18;letter-spacing:-.03em;margin:27px 0}.hero-note em{font-style:normal;color:var(--yellow)}.note-line{border-top:1px solid #ffffff20;padding:15px 0;font-size:15px}.note-line span{color:var(--cyan);font-size:12px;margin-right:15px}.hero-note>a{display:block;border-top:1px solid #ffffff20;padding-top:23px;font-size:14px;color:var(--yellow)}.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #ffffff25;padding-top:27px;padding-bottom:30px;gap:20px}.facts strong{display:block;font-size:19px}.facts span{font-size:13px;color:#b6cbd8}.section{padding-top:95px;padding-bottom:95px}.section-head{margin-bottom:42px}h2{font-size:clamp(34px,4vw,50px);line-height:1.12;letter-spacing:-.045em;margin:0}h3{font-size:28px;letter-spacing:-.035em;line-height:1.2;margin:20px 0}.section-head .eyebrow{color:#50718b;margin-bottom:14px}.horizontal{display:flex;align-items:flex-end;justify-content:space-between;gap:30px}.horizontal>p{color:var(--muted);font-size:15px;margin-bottom:0}.visits{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.visits article{padding:32px 32px 34px 0;display:flex;flex-direction:column}.visits article+article{padding-left:32px;border-left:1px solid var(--line)}.index{font-size:12px;letter-spacing:.1em;color:#5a7285}.visits h3{font-size:32px}.visits p{color:var(--muted);font-size:16px;margin-top:0;flex:1}.text-link{font-weight:bold;font-size:14px;display:inline-block;margin-top:16px}.journey{background:var(--pale)}.step-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-bottom:20px}.step-tabs button{border:0;border-bottom:3px solid #cfdae3;background:transparent;text-align:left;padding:15px;color:#597081;font-size:16px}.step-tabs b{font-size:12px;margin-right:12px}.step-tabs button[aria-selected=true]{border-color:var(--navy);color:var(--navy);font-weight:bold;background:#e3ebf0}.step-panel{display:grid;grid-template-columns:1fr 1.15fr;min-height:415px;background:white;border-radius:4px;overflow:hidden}.step-visual{background:#0756c8;display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:390px;position:relative;padding:40px}.step-visual img{max-width:100%;width:300px;height:275px;object-fit:contain}.step-visual>span{color:white;font-size:12px;position:absolute;bottom:20px;left:20px;right:20px;text-align:center}.step-visual.parking{background:var(--blue)}.step-visual.parking:before{content:'P';font-size:180px;line-height:1;font-weight:bold;color:white}.step-visual.parking img{display:none}.step-copy{padding:45px 48px}.step-copy h3{font-size:36px;margin:10px 0 22px}.step-copy>p:not(.eyebrow){color:var(--muted);font-size:17px}.step-copy .eyebrow{font-size:12px;color:#638199}.tip{background:#fff5de;border-left:3px solid var(--yellow);padding:12px 16px;font-size:14px}.step-footer{display:flex;align-items:center;justify-content:space-between;margin-top:23px;gap:15px}.step-footer a{font-size:14px;text-decoration:underline}.round{border:0;background:var(--navy);color:white;border-radius:50%;height:44px;min-width:44px;font-size:22px}.small{font-size:12px;color:var(--muted);line-height:1.6}.journey-caption{margin-bottom:0}.cash-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.cash-card{border:1px solid var(--line);border-radius:4px;overflow:hidden}.cash-photo{height:310px;background:#eaf0f4;display:flex;justify-content:center;align-items:center;position:relative;padding:20px}.cash-photo img{height:260px;width:auto;max-width:75%;object-fit:contain}.pill{position:absolute;top:24px;left:24px;border:1px solid #9dafbc;border-radius:30px;padding:5px 12px;font-size:12px;letter-spacing:.07em}.cash-content{padding:30px 36px}.cash-content .eyebrow{font-size:11px;color:#587589;margin-bottom:10px}.cash-content h3{font-size:31px;margin:0 0 16px}.cash-content>p{color:var(--muted)}ul{padding-left:20px;font-size:15px;line-height:1.9}.payment-notice{margin-top:25px;background:var(--navy);color:white;padding:24px 30px;display:flex;gap:30px;justify-content:space-between;font-size:15px}.payment-notice b{color:var(--yellow)}.charge{background:var(--navy);color:white}.charge-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:100px}.charge h2{font-size:52px}.charge p:not(.eyebrow){color:#bdcdd9}.charge .cable{color:var(--yellow)!important;font-weight:bold;font-size:16px;margin-top:28px}.charge-number{font-size:95px;color:var(--yellow);font-weight:bold;line-height:1;letter-spacing:-.05em;margin-bottom:30px}.charge-number span{display:block;font-size:15px;font-weight:normal;letter-spacing:0;color:white;margin-top:15px}.power-row{padding:20px 0;border-top:1px solid #ffffff30;display:flex;justify-content:space-between;gap:30px}.power-row strong{white-space:nowrap;font-size:20px}.power-row span{max-width:220px;font-size:14px;color:#bdcdd9}.user-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}.label{display:inline-block;font-size:12px;font-weight:bold;letter-spacing:.1em;background:#e8f0f4;padding:6px 12px}.user-grid h3{font-size:31px}.user-grid p,.user-grid li{font-size:16px;color:var(--muted)}ol{padding-left:22px}ol li{padding-left:8px;margin-bottom:18px}.parking-option{padding:16px 0;border-bottom:1px solid var(--line)}.parking-option p{margin:4px 0}.availability{padding:18px;background:var(--pale);font-size:14px!important}details{border-bottom:1px solid #cdd9e2;padding:19px 0}summary{cursor:pointer;list-style:none;font-weight:bold;font-size:16px;padding-right:30px;position:relative}summary::-webkit-details-marker{display:none}summary:after{content:'+';position:absolute;right:3px;font-size:22px;top:-5px;font-weight:normal}details[open] summary:after{content:'−'}details p{font-size:15px;line-height:1.75;color:var(--muted);padding-right:20px}.faq{background:var(--pale)}.faq-grid{display:grid;grid-template-columns:.85fr 1.3fr;gap:90px}.faq-grid>div>p{color:var(--muted)}.help-note{max-width:300px;margin-top:30px;border-left:3px solid var(--yellow);padding:0 0 0 20px}.help-note p{font-size:14px;color:var(--muted)}.location{display:grid;grid-template-columns:1.2fr 1fr;gap:90px}.location p{color:var(--muted)}.location .button{margin-top:15px}.location aside{align-self:center;background:var(--pale);padding:32px}.location aside div{padding:20px 0;border-top:1px solid var(--line)}.location aside span{display:block;font-size:15px;color:var(--muted);margin-top:5px}footer{background:var(--navy);color:white;padding:45px 0}footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:30px}footer p{font-size:14px}footer .small{color:#b5c4d0;font-size:12px}.skip{position:absolute;top:-100px;background:white;color:black;padding:10px}.skip:focus{top:0;z-index:10}@media(max-width:1000px){.wrap{width:calc(100% - 48px)}.hero-grid{gap:35px}.hero-note{padding:25px}.hero-note>p{font-size:32px}h1{font-size:60px}.charge-grid{gap:40px}.faq-grid,.location{gap:40px}.step-copy{padding:30px}.step-copy h3{font-size:31px}.payment-notice{flex-direction:column;gap:4px}footer .wrap{flex-wrap:wrap}}@media(max-width:700px){.wrap{width:calc(100% - 36px)}.brand{font-size:20px}.hero{padding-top:45px}.hero-grid{grid-template-columns:1fr;gap:40px;padding-bottom:40px}h1{font-size:clamp(44px,11vw,66px)}.intro{font-size:17px}.hero-note{transform:none;box-shadow:none}.hero-note>p{font-size:32px}.hero-note>p br{display:none}.hero-note>p br:after{content:' '}.facts{grid-template-columns:1fr 1fr;gap:22px}.facts strong{font-size:16px}.facts span{font-size:12px}.section{padding:60px 0}.section-head{margin-bottom:30px}.horizontal{display:block}.horizontal>p{margin-top:20px}.visits,.cash-grid,.charge-grid,.user-grid,.faq-grid,.location{grid-template-columns:1fr}.visits article,.visits article+article{padding:27px 0;border-left:0}.visits article+article{border-top:1px solid var(--line)}.visits h3 br{display:none}.visits h3{font-size:28px}.step-tabs button{padding:12px 4px;font-size:13px;text-align:center}.step-tabs b{display:block;margin:0}.step-panel{grid-template-columns:1fr}.step-visual{min-height:260px;padding:20px}.step-visual img{height:210px}.step-copy{padding:28px 24px}.step-copy h3{font-size:30px}.cash-content{padding:26px}.cash-photo{height:290px}.charge h2{font-size:40px}.charge-data{border-top:1px solid #ffffff30;padding-top:35px}.charge-number{font-size:80px}.user-grid{gap:45px}.faq-grid{gap:25px}.location{gap:35px}.section.location{padding-left:0;padding-right:0}footer .wrap{display:block}footer p{margin-top:25px}.button{padding:15px 18px;gap:18px}.power-row{gap:15px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Südtor identity from the supplied brand references */
:root{--navy:#001e4d;--blue:#0057a6;--yellow:#f2c200;--cyan:#8dbce6}
.brand-logo{width:64px;height:64px;object-fit:contain;background:#fff;border-radius:4px;flex-shrink:0}
.hero-identity{margin:0;justify-self:center;width:min(100%,420px)}
.logo-stage{background:white;padding:18px;border-radius:6px;box-shadow:0 20px 60px #0003}
.logo-stage img{display:block;width:100%;height:auto}
.hero-identity>p{font-size:14px;letter-spacing:.07em;text-align:center;color:#c1d6eb;margin:20px 0 0}
.architecture{padding-top:44px}
.architecture figure{margin:0}
.architecture-image{position:relative;width:100%;aspect-ratio:525 / 273;overflow:hidden;background:#102e53;border-radius:5px}
.architecture-image img{position:absolute;max-width:none;width:292.57143%;height:auto;left:-187.2381%;top:-259.34066%}
.architecture figcaption{display:flex;justify-content:space-between;gap:24px;padding-top:14px;align-items:baseline}
.architecture figcaption span:first-child{font-size:12px;letter-spacing:.12em;font-weight:bold;color:var(--blue);white-space:nowrap}
.architecture figcaption span:last-child{font-size:12px;color:var(--muted);text-align:right}
@media(max-width:700px){.brand-logo{width:52px;height:52px}.hero-identity{width:min(85%,340px)}.logo-stage{padding:12px}.architecture{padding-top:25px}.architecture figcaption{display:block}.architecture figcaption span{display:block}.architecture figcaption span:last-child{text-align:left;margin-top:6px}.hero-grid{gap:32px}}

.architecture-image{aspect-ratio:auto}.architecture-image img{position:static;display:block;width:100%;height:auto;max-width:100%}.imprint{background:var(--pale);border-top:1px solid var(--line)}.imprint-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-top:32px}.imprint h3{font-size:24px}.imprint address{font-style:normal;line-height:1.8}.imprint a{text-decoration:underline;text-underline-offset:4px}.imprint p{font-size:16px}@media(max-width:700px){.imprint-grid{grid-template-columns:1fr;gap:20px}}

.discover-teaser{display:grid;grid-template-columns:1fr 1.2fr;gap:36px;align-items:center;padding-top:70px}.discover-teaser img{width:100%;height:320px;object-fit:cover;border:3px solid var(--navy);box-shadow:8px 8px 0 var(--yellow)}.discover-teaser p{color:var(--muted)}@media(max-width:700px){.discover-teaser{grid-template-columns:1fr;padding-top:50px}.discover-teaser img{height:230px}}

/* Bäng proposal: maritime travel-comic accents, factual service areas remain calm. */
.bang-home .hero{background-color:var(--navy);background-image:radial-gradient(#8dbce624 1px,transparent 1px);background-size:13px 13px;border-bottom:4px solid var(--navy)}
.bang-home .hero h1{font-weight:900;text-shadow:3px 3px 0 #0003}.bang-home .hero h1 span{color:var(--yellow)}
.arrival-sticker{display:inline-block;background:var(--yellow);color:var(--navy);font-weight:900;font-size:13px;letter-spacing:.07em;padding:9px 16px;transform:rotate(-3deg);border:3px solid var(--navy);box-shadow:4px 4px 0 var(--cyan);margin:0 0 12px}
.bang-home .logo-stage{border:4px solid var(--navy);box-shadow:10px 10px 0 var(--yellow);transform:rotate(2deg);border-radius:3px}
.bang-home .hero .button{border:2px solid var(--navy);box-shadow:4px 4px 0 #8dbce6;transition:transform .15s}
.bang-home .hero .button:hover{transform:translateY(-2px)}.bang-home .hero .ghost{border-color:var(--cyan)}
.bang-home .facts{border-top:0;gap:14px}.bang-home .facts>div{background:#fff;color:var(--navy);padding:18px;border:3px solid var(--navy);box-shadow:5px 5px 0 var(--blue)}.bang-home .facts span{color:var(--muted)}
.bang-home .architecture figure{border:3px solid var(--navy);box-shadow:8px 8px 0 var(--yellow)}.bang-home .architecture-image{border-radius:0}.bang-home .architecture figcaption{padding:14px 18px;background:white}
.bang-home .visits{border:0;gap:22px}.bang-home .visits article,.bang-home .visits article+article{border:3px solid var(--navy);padding:28px;box-shadow:6px 6px 0 var(--navy)}.bang-home .visits article:nth-child(2){background:#edf5fc}.bang-home .visits article:nth-child(3){background:#fff8db}
.bang-home .index{color:var(--blue);font-weight:bold}.bang-home .visits h3{font-size:34px}.bang-home .visits .text-link{text-decoration:underline}
.bang-home .journey{border-top:3px solid var(--navy);border-bottom:3px solid var(--navy);background:#eaf3fb}
.bang-home .step-tabs{gap:12px}.bang-home .step-tabs button{border:2px solid var(--navy);background:white;color:var(--navy);font-weight:bold}.bang-home .step-tabs button[aria-selected=true]{background:var(--yellow);box-shadow:4px 4px 0 var(--navy)}
.bang-home .step-panel{border:3px solid var(--navy);box-shadow:7px 7px 0 var(--navy);border-radius:0}.bang-home .step-copy .tip{border:2px solid var(--navy);background:#fff5d2;box-shadow:3px 3px 0 var(--yellow)}
.bang-home .cash-card{border:2px solid var(--navy)}.bang-home .cash-photo .pill{background:var(--yellow);border:2px solid var(--navy);font-weight:bold;border-radius:2px;transform:rotate(-3deg)}
.everyday{padding-top:80px;display:grid;grid-template-columns:1.2fr 1fr;gap:70px;align-items:center}.everyday p{color:var(--muted)}.everyday-sign{border:3px solid var(--navy);box-shadow:8px 8px 0 var(--yellow);padding:30px;transform:rotate(2deg);background:var(--navy);color:white}.everyday-sign span{display:block;border-bottom:1px solid #ffffff40;font-size:28px;font-weight:bold;padding:10px 0}.everyday-sign b{font-size:14px;color:var(--yellow);display:block;margin-top:20px}
@media(max-width:700px){.bang-home .facts{gap:12px}.bang-home .facts>div{padding:13px}.bang-home .visits{gap:20px}.bang-home .visits article,.bang-home .visits article+article{padding:25px}.bang-home .step-tabs{gap:5px}.bang-home .step-tabs button{font-size:12px}.bang-home .logo-stage{transform:none;box-shadow:6px 6px 0 var(--yellow)}.everyday{grid-template-columns:1fr;gap:25px;padding-top:55px}.everyday-sign{transform:none}.bang-home .architecture figure{box-shadow:5px 5px 0 var(--yellow)}}
@media(prefers-reduced-motion:reduce){.bang-home .hero .button{transition:none}}

.sea-teaser{margin-top:60px;margin-bottom:60px;padding:35px;border:3px solid #001e4d;background:#dcecff;box-shadow:8px 8px 0 #f2c200}.sea-teaser h2{font-size:clamp(32px,5vw,54px)}

.everyday-sign a{color:inherit;text-decoration:none}.everyday-sign a:hover{text-decoration:underline}.discover-teaser img{object-position:42% center}

.everyday-sign .stadthalle-emblem{display:block;padding:24px;margin:-8px -8px 20px;background:var(--yellow);color:var(--navy);border:3px solid white;box-shadow:5px 5px 0 var(--blue);text-decoration:none;transform:rotate(-2deg)}.stadthalle-emblem small{display:block;font-size:13px;font-weight:800;letter-spacing:.08em}.stadthalle-emblem strong{display:block;font-size:clamp(32px,4vw,48px);line-height:1.02;margin:16px 0}.stadthalle-emblem em{font-size:15px;font-style:normal}.everyday-sign .stadthalle-emblem b{color:var(--navy);font-size:16px;margin-top:20px}.everyday-sign .stadthalle-emblem:hover{background:white;text-decoration:none}.stadthalle-emblem:focus-visible{outline:4px solid var(--yellow);outline-offset:7px}

/* ---------------------------------------------------------------------------
   Rechtsseiten und Sprachumschaltung.
   Nachtrag zu Heikos Stylesheet, bewusst lesbar statt minifiziert gehalten:
   hier wird von Hand weitergepflegt. Farben und Breakpoints (1000/700) sind
   aus dem Bestand uebernommen, damit die Unterseiten nicht fremd wirken.
--------------------------------------------------------------------------- */

/* Sprachmenue: <details>, damit es ohne JavaScript auf- und zugeht. */
.lang{position:relative;font-size:14px}
.lang>summary{list-style:none;cursor:pointer;color:var(--yellow);
  padding:8px 2px;display:inline-flex;align-items:center;gap:8px}
.lang>summary::-webkit-details-marker{display:none}
.lang>summary::after{content:"";width:7px;height:7px;border-right:2px solid;
  border-bottom:2px solid;transform:rotate(45deg) translateY(-2px)}
.lang[open]>summary::after{transform:rotate(225deg) translateY(-2px)}
.lang-list{position:absolute;right:0;top:calc(100% + 8px);z-index:30;
  min-width:170px;background:#fff;color:var(--ink);border:1px solid var(--line);
  border-radius:4px;box-shadow:0 14px 34px #0c223926;padding:6px 0}
.lang-list a{display:block;padding:10px 18px}
.lang-list a:hover{background:var(--pale);text-decoration:none}
.lang-list a[aria-current="true"]{font-weight:700;color:var(--blue)}
.lang-list a[aria-current="true"]::before{content:"\2713\00a0"}

/* Fliesstextseiten: schmales Mass, damit Rechtstexte lesbar bleiben. */
.legal{padding:70px 0 90px}
.legal .wrap{max-width:760px}
.legal h1{font-size:clamp(38px,4.4vw,56px);letter-spacing:-.045em;
  line-height:1.1;margin:0 0 30px}
.legal h2{font-size:25px;letter-spacing:-.02em;margin:48px 0 14px}
.legal h3{font-size:20px;margin:32px 0 10px}
.legal p,.legal li{color:var(--muted)}
.legal li{margin-bottom:7px}
.legal address{font-style:normal;color:var(--ink);margin:12px 0 18px;
  line-height:1.7}
.legal a{text-decoration:underline;text-underline-offset:4px}

.legal-dl{display:grid;grid-template-columns:auto 1fr;gap:10px 26px;
  margin:6px 0 10px;font-size:16px}
.legal-dl dt{color:var(--muted)}
.legal-dl dd{margin:0;color:var(--ink)}

/* Offene Pflichtangabe. Absichtlich auffaellig: eine Luecke, die man sieht,
   geht nicht versehentlich mit online. */
.legal-open{display:inline-block;background:#fff3d6;color:#8a5a00;
  border:1px dashed #d9a63a;border-radius:3px;padding:1px 9px;font-size:14px;
  font-weight:700}
.legal-note{background:var(--pale);border-left:4px solid var(--cyan);
  padding:14px 20px;margin:0 0 26px;font-size:16px}
/* Widerspruchshinweis nach Art. 21 Abs. 4 DSGVO: getrennt und deutlich
   abgesetzt von den uebrigen Informationen. */
.legal .legal-objection{border:2px solid var(--navy);background:#fff8db;color:var(--ink);padding:16px 20px;box-shadow:4px 4px 0 var(--yellow)}
.legal-back{margin-top:56px;padding-top:26px;border-top:1px solid var(--line)}
.legal-back a{color:var(--blue);font-weight:700}

@media(max-width:700px){
  .legal{padding:44px 0 60px}
  .legal h2{font-size:22px;margin-top:38px}
  .legal-dl{grid-template-columns:1fr;gap:2px 0}
  .legal-dl dd{margin-bottom:12px}
  .lang-list{position:static;box-shadow:none;margin-top:8px}
}

/* ---------------------------------------------------------------------------
   Header, Ueberarbeitung 16.09.2026.
   Ersetzt die alten header/.nav/.nav-cta-Regeln, die entfernt wurden: die
   brachen auf dem Handy auf zwei unruhige Zeilen um und blendeten
   "Fragen & Hilfe" unter 1000 px ganz aus.

   Das eine laute Element ist die gelbe Fahrbahnmarkierung als Unterkante.
   Der Button uebernimmt Heikos Sticker-Stil aus dem Hero (hart versetzter
   hellblauer Schatten), alles andere bleibt ruhig.

   z-index 1100, weil die Leaflet-Karte auf /entdecken/ bis 1000 geht und
   ihre Bedienknoepfe sonst beim Scrollen ueber dem Header laegen.
--------------------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:1100;background:var(--navy);color:#fff}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:repeating-linear-gradient(90deg,var(--yellow) 0 14px,transparent 14px 32px)}
.site-header .nav{min-height:84px;padding-bottom:2px;display:flex;align-items:center;gap:32px}
.site-header .brand{flex-shrink:0;font-size:21px}
.site-header .brand-logo{width:54px;height:54px}

.nav-panel{display:flex;align-items:center;gap:30px;margin-left:auto}
.nav-panel nav{display:flex;align-items:center;gap:26px;font-size:15px;font-weight:700}
.nav-panel nav a{position:relative;padding:8px 0;white-space:nowrap}
.nav-panel nav a:hover{text-decoration:none}
.nav-panel nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .18s}
.nav-panel nav a:hover::after,.nav-panel nav a:focus-visible::after{transform:scaleX(1)}
/* Verweis auf eine andere Seite statt Sprungmarke: duenner Trennstrich davor. */
.nav-panel nav a.nav-page:not(:first-child)::before{content:"";position:absolute;left:-14px;
  top:50%;width:1px;height:20px;margin-top:-10px;background:#ffffff40}

.nav-cta{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;white-space:nowrap;
  background:var(--yellow);color:var(--navy);font-size:15px;font-weight:700;border-radius:3px;
  box-shadow:4px 4px 0 #8dbce6;transition:transform .15s}
.nav-cta:hover{text-decoration:none;transform:translateY(-2px)}
/* Heikos FAQ-Akkordeon stylt jedes details/summary global: Trennlinie,
   Innenabstand, absolut gesetztes +/-. Fuers Sprachmenue zuruecksetzen,
   sonst sitzt der Pfeil ueber dem Wort und beim Aufklappen erscheint ein
   zusaetzliches Minus. */
.lang{border-bottom:0;padding:0}
.lang>summary{position:relative;padding-right:0;font-size:inherit}
.lang>summary::after,.lang[open]>summary::after{content:"";position:static;top:auto;right:auto;font-size:0}
.nav-panel .lang{font-size:15px}
.nav-panel .lang>summary{font-weight:700}

.nav-toggle{display:none}

@media(max-width:1080px){
  .site-header .nav{min-height:70px;flex-wrap:wrap;gap:0 16px}
  .site-header .brand{font-size:19px}
  .site-header .brand small{font-size:9px;margin-top:5px}
  .site-header .brand-logo{width:46px;height:46px}
  .site-header .nav{align-content:flex-start}
  .site-header .brand{min-height:70px}

  .nav-toggle{display:inline-flex;align-items:center;gap:11px;margin-left:auto;padding:9px 15px;
    background:transparent;color:#fff;border:2px solid #ffffff59;border-radius:3px;
    font-size:15px;font-weight:700}
  .nav-toggle[aria-expanded="true"]{background:var(--yellow);color:var(--navy);border-color:var(--yellow)}
  .nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{display:block;width:18px;
    height:2px;background:currentColor}
  .nav-toggle-bars{position:relative}
  .nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0;
    transition:transform .18s}
  .nav-toggle-bars::before{top:-6px}
  .nav-toggle-bars::after{top:6px}
  [aria-expanded="true"] .nav-toggle-bars{background:transparent}
  [aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg)}
  [aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg)}
  /* Ohne JavaScript bleibt das Menue einfach offen stehen, der Knopf entfaellt. */
  html:not(.js) .nav-toggle{display:none}

  .nav-panel{flex-basis:100%;flex-direction:column;align-items:stretch;gap:20px;margin:0;
    padding:4px 0 28px;max-height:calc(100vh - 74px);max-height:calc(100dvh - 74px);overflow-y:auto}
  .js .nav-panel{display:none}
  .js.nav-open .nav-panel{display:flex}
  .nav-panel nav{flex-direction:column;align-items:stretch;gap:0;font-size:18px}
  .nav-panel nav a{padding:15px 2px;border-bottom:1px solid #ffffff1f}
  .nav-panel nav a::after,.nav-panel nav a.nav-page:not(:first-child)::before{display:none}
  .nav-cta{justify-content:center;margin-right:4px;padding:15px 18px;font-size:16px}
  .nav-panel .lang>summary{padding:6px 2px;font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .nav-panel nav a::after,.nav-cta,.nav-toggle-bars::before,.nav-toggle-bars::after{transition:none}
}

/* Zeichenfeld an Verlinkungen (Heiko, 17.09.2026: "Logo bei den Verlinkungen,
   Klick auf Link oder Logo"). Feld und Text liegen in einem einzigen <a> --
   damit fuehrt beides zum Ziel und es bleibt ein Tab-Stopp statt zwei.

   Im Feld steht ein eigenes Piktogramm, kein fremdes Logo. Fremde Logos sind
   Marke und meist auch Werk; ihre Anzeige braucht je Marke eine schriftliche
   Freigabe (siehe _build/LOGOS.md). Liegt eine vor, ersetzt im selben Feld
   ein <img> das <svg> -- am Markup aendert sich sonst nichts. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.link-badge{display:inline-flex;align-items:center;gap:13px;margin-top:16px;
  text-decoration:none;color:inherit}
.link-badge .badge-mark{flex:0 0 auto;width:52px;height:52px;display:grid;
  place-items:center;background:#fff;border:3px solid var(--navy);
  box-shadow:3px 3px 0 var(--navy);transition:background .12s}
.link-badge .badge-mark svg{width:28px;height:28px;fill:none;stroke:var(--navy);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.link-badge .badge-mark img{width:78%;height:78%;object-fit:contain}
.link-badge .badge-label{font-weight:800;font-size:15px;line-height:1.35;
  color:var(--blue);text-decoration:underline;text-underline-offset:4px}
.link-badge:hover .badge-mark,.link-badge:focus-visible .badge-mark{background:var(--yellow)}
.link-badge:hover .badge-label,.link-badge:focus-visible .badge-label{color:var(--navy)}
.link-badge:focus-visible{outline:4px solid var(--yellow);outline-offset:6px}

/* Im Schild auf der Startseite steht das Feld auf dunklem Grund und muss
   gegen ".everyday-sign span" gewinnen: dort gilt 28 px, fett, Trennlinie. */
.everyday-sign .link-badge{margin-top:0;gap:12px}
.everyday-sign .link-badge .badge-mark{display:grid;width:38px;height:38px;padding:0;
  background:transparent;border:2px solid #ffffff59;box-shadow:none;
  border-bottom:2px solid #ffffff59;font-size:0}
.everyday-sign .link-badge .badge-mark svg{width:21px;height:21px;stroke:#fff}
.everyday-sign .link-badge .badge-label{display:block;padding:0;border-bottom:0;
  font-size:26px;color:inherit;text-decoration:none}
.everyday-sign .link-badge:hover .badge-mark{background:var(--yellow);
  border-color:var(--yellow)}
.everyday-sign .link-badge:hover .badge-mark svg{stroke:var(--navy)}
.everyday-sign .link-badge:hover .badge-label{text-decoration:underline}

@media(max-width:650px){
  .link-badge .badge-mark{width:46px;height:46px}
  .link-badge .badge-mark svg{width:25px;height:25px}
  .everyday-sign .link-badge .badge-label{font-size:22px}
}
