/* ============================================================
   Bad zur Sonne: production styles
   Visual + interaction base: output/badzursonne/v6-tiles/druckgefuehl-dark.html (locked).
   The tile's <style> is carried verbatim in the block below the page shell,
   except for three necessary adaptations:
     1. Google Fonts @import removed, replaced by self-hosted @font-face.
     2. Heading selector h4 -> h2 (production heading semantics: one h1).
     3. Heading selector .fare h5 -> .fare h3 (no heading-level skip under h2).
   Net-new page-shell and content-layout rules sit outside the verbatim block,
   clearly marked, and never re-derive the tile's locked interaction craft.
   ============================================================ */

/* --- Self-hosted Inter Tight (replaces the tile's Google Fonts @import) --- */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-tight-400.woff2') format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-tight-500.woff2') format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-tight-600.woff2') format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter-tight-700.woff2') format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/inter-tight-800.woff2') format('woff2')}

/* --- Page shell (net-new: the tile was an iframe fragment with no document chrome) --- */
*{box-sizing:border-box}
html{background:#16130d;scroll-behavior:smooth} /* #16130d mirrors the --bg token */
body{margin:0;background:#16130d;min-height:100vh}
img{max-width:100%}
.v5-druckgefuehl-dark{max-width:1040px;margin:0 auto;padding:24px}
:where(#tarife,#lage){scroll-margin-top:18px} /* breathing room for in-page scroll landings */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (max-width:600px){.v5-druckgefuehl-dark{padding:12px}}

/* ============================================================
   Tile <style> carried verbatim (heading selectors retargeted as noted above)
   ============================================================ */
.v5-druckgefuehl-dark .frame{
  --bg:#16130d;--panel:#1d190f;--raise:#262016;--ink:#f5f1e8;--muted:#a89e8d;--line:#342d20;
  --accent:#ffc83d;--accent-deep:#f0b21f;--on-accent:#1c1500;--glow:rgba(255,200,61,.5);
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  container-type:inline-size;
  font-family:'Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  line-height:1.5;box-shadow:0 1px 2px rgba(0,0,0,.4),0 24px 60px rgba(0,0,0,.34)}
.v5-druckgefuehl-dark .frame *{min-width:0}
.v5-druckgefuehl-dark .top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 22px;background:var(--panel);border-bottom:1px solid var(--line)}
.v5-druckgefuehl-dark .brand{display:flex;align-items:center;gap:11px}
.v5-druckgefuehl-dark .brand img{width:36px;height:36px;flex:none;border-radius:8px}
.v5-druckgefuehl-dark .brand b{font-weight:800;font-size:1.02rem;letter-spacing:-0.02em;white-space:nowrap}
.v5-druckgefuehl-dark .nav{display:flex;align-items:center;gap:14px;font-size:.85rem}
.v5-druckgefuehl-dark .nav a{text-decoration:none;color:var(--muted);font-weight:600;transition:color .18s var(--ease-out)}
.v5-druckgefuehl-dark .lang-toggle{position:relative;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:999px;background:var(--raise);padding:3px;transition:transform .16s var(--ease-out)}
.v5-druckgefuehl-dark .lang-toggle:active{transform:scale(.97)}
.v5-druckgefuehl-dark .lang-toggle .thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--accent);transition:transform .28s var(--ease-out)}
body[data-lang="en"] .v5-druckgefuehl-dark .lang-toggle .thumb{transform:translateX(100%)}
.v5-druckgefuehl-dark .seg{position:relative;z-index:1;min-width:34px;text-align:center;padding:4px 10px;font-size:.72rem;font-weight:700;letter-spacing:.05em;color:var(--muted);background:transparent;transition:color .2s var(--ease-out)}
body[data-lang="de"] .v5-druckgefuehl-dark .seg.de,body[data-lang="en"] .v5-druckgefuehl-dark .seg.en{color:var(--on-accent)}
.v5-druckgefuehl-dark .lang-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.v5-druckgefuehl-dark .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;padding:30px 24px}
.v5-druckgefuehl-dark .kicker{font-size:.73rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 13px}
.v5-druckgefuehl-dark .headline{font-weight:800;font-size:clamp(2rem,5.2vw,3rem);line-height:1.03;letter-spacing:-0.03em;margin:0 0 14px}
.v5-druckgefuehl-dark .subline{margin:0 0 22px;font-size:1.04rem;color:var(--muted);max-width:42ch}
.v5-druckgefuehl-dark .cta{display:inline-flex;align-items:center;gap:9px;border:none;background:var(--accent);color:var(--on-accent);padding:13px 22px;border-radius:12px;font-weight:700;font-size:.95rem;font-family:inherit;box-shadow:0 6px 22px var(--glow);transition:transform .16s var(--ease-out),background .2s var(--ease-out)}
.v5-druckgefuehl-dark .cta:active{transform:scale(.97)}
.v5-druckgefuehl-dark .cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.v5-druckgefuehl-dark .media{position:relative}
.v5-druckgefuehl-dark .photo{border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 16px 40px rgba(0,0,0,.4);background:var(--panel);aspect-ratio:2/1}
.v5-druckgefuehl-dark .photo img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.v5-druckgefuehl-dark .board{margin-top:14px;display:flex;align-items:center;gap:14px;padding:16px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.v5-druckgefuehl-dark .board .n{font-weight:800;font-size:2rem;line-height:1;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 0 18px var(--glow)}
.v5-druckgefuehl-dark .board .n .of{font-size:1rem;color:var(--muted);font-weight:600;margin-left:2px;text-shadow:none}
.v5-druckgefuehl-dark .board .meta{flex:1;min-width:0}
.v5-druckgefuehl-dark .board .k{font-size:.64rem;font-weight:800;letter-spacing:.22em;color:var(--accent)}
.v5-druckgefuehl-dark .meter{height:6px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden;margin:6px 0 5px}
.v5-druckgefuehl-dark .meter span{display:block;height:100%;width:50%;background:var(--accent);border-radius:999px}
.v5-druckgefuehl-dark .board .note{display:flex;align-items:center;gap:6px;font-size:.7rem;color:var(--muted)}
.v5-druckgefuehl-dark .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;animation:v5dgdpulse 2.4s infinite}
@keyframes v5dgdpulse{0%{box-shadow:0 0 0 0 rgba(255,200,61,.55)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.v5-druckgefuehl-dark .claim{padding:13px 24px;font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--on-accent);background:var(--accent);line-height:1.7;border-radius:14px}
.v5-druckgefuehl-dark .sec{padding:26px 24px;border-top:1px solid var(--line)}
.v5-druckgefuehl-dark .eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin:0 0 6px}
.v5-druckgefuehl-dark h2{font-weight:800;font-size:1.28rem;letter-spacing:-0.02em;margin:0 0 18px}
.v5-druckgefuehl-dark .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.v5-druckgefuehl-dark .step{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;transition:border-color .2s var(--ease-out),transform .2s var(--ease-out)}
.v5-druckgefuehl-dark .step .no{font-weight:800;font-size:.82rem;color:var(--accent);letter-spacing:.05em;display:block;margin-bottom:8px}
.v5-druckgefuehl-dark .step b{display:block;font-size:.98rem;font-weight:700;margin-bottom:4px}
.v5-druckgefuehl-dark .step p{margin:0;font-size:.84rem;color:var(--muted)}
.v5-druckgefuehl-dark .nocash{margin:16px 0 0;display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.04em;color:var(--on-accent);background:var(--accent);padding:5px 11px;border-radius:999px}
.v5-druckgefuehl-dark .adv ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:11px 22px}
.v5-druckgefuehl-dark .adv li{display:flex;gap:10px;align-items:flex-start;font-size:.93rem}
.v5-druckgefuehl-dark .adv li::before{content:"\2713";flex:none;width:19px;height:19px;border-radius:50%;background:rgba(255,200,61,.16);color:var(--accent);display:grid;place-items:center;font-size:.7rem;font-weight:800;margin-top:1px}
.v5-druckgefuehl-dark .fares{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:26px 24px;border-top:1px solid var(--line)}
.v5-druckgefuehl-dark .fare h3{margin:0 0 10px;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.v5-druckgefuehl-dark table{width:100%;border-collapse:collapse;font-size:.88rem}
.v5-druckgefuehl-dark .fares td{padding:7px 0;border-bottom:1px solid var(--line)}
.v5-druckgefuehl-dark .fares td:last-child{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.v5-druckgefuehl-dark .fares tr.max td{border-bottom:none;color:var(--accent);font-weight:800}
.v5-druckgefuehl-dark .eur{margin:12px 0 0;font-size:.76rem;color:var(--muted)}
.v5-druckgefuehl-dark .near{display:grid;grid-template-columns:.85fr 1.15fr;gap:24px;padding:26px 24px;border-top:1px solid var(--line);align-items:start}
.v5-druckgefuehl-dark .map{border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.v5-druckgefuehl-dark .map img{display:block;width:100%;height:auto}
.v5-druckgefuehl-dark .near ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.v5-druckgefuehl-dark .near li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:8px;font-size:.93rem}
.v5-druckgefuehl-dark .near li .min{font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.v5-druckgefuehl-dark .foot{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;align-items:center;padding:16px 24px;background:var(--panel);border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)}
.v5-druckgefuehl-dark .foot a{text-decoration:none;font-weight:600}
.v5-druckgefuehl-dark .foot .links{display:flex;flex-wrap:wrap;gap:6px 14px}
@media (hover:hover) and (pointer:fine){
  .v5-druckgefuehl-dark .nav a:hover{color:var(--ink)}
  .v5-druckgefuehl-dark .cta:hover{background:var(--accent-deep)}
  .v5-druckgefuehl-dark .step:hover{border-color:var(--accent);transform:translateY(-2px)}
  .v5-druckgefuehl-dark .foot a:hover{color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){
  .v5-druckgefuehl-dark .dot{animation:none}
  .v5-druckgefuehl-dark .lang-toggle,.v5-druckgefuehl-dark .lang-toggle .thumb,.v5-druckgefuehl-dark .cta,.v5-druckgefuehl-dark .step{transition:none}
}
@container (max-width:600px){
  .v5-druckgefuehl-dark .hero{grid-template-columns:1fr;gap:20px;padding:22px 16px}
  .v5-druckgefuehl-dark .media{order:-1}
  .v5-druckgefuehl-dark .steps,.v5-druckgefuehl-dark .adv ul,.v5-druckgefuehl-dark .fares,.v5-druckgefuehl-dark .near{grid-template-columns:1fr}
  .v5-druckgefuehl-dark .top,.v5-druckgefuehl-dark .claim,.v5-druckgefuehl-dark .sec,.v5-druckgefuehl-dark .fares,.v5-druckgefuehl-dark .near,.v5-druckgefuehl-dark .foot{padding-left:16px;padding-right:16px}
  /* Mobile header wrap: brand takes full first row, nav (links + DE/EN toggle) drops to a second row below, no overlap.
     Second-row layout: links grouped LEFT, DE/EN toggle pinned RIGHT. .nav has three direct children
     (the two links + the .lang-toggle button, no wrapper around the links), so margin-left:auto on the
     toggle floats ONLY it to the far right while the links stay grouped left; justify-content:space-between
     would wrongly spread all three evenly. Desktop is unaffected (this lives inside the mobile block). */
  .v5-druckgefuehl-dark .top{flex-wrap:wrap}
  .v5-druckgefuehl-dark .nav{display:flex;align-items:center;width:100%;margin-top:8px}
  .v5-druckgefuehl-dark .nav .lang-toggle{margin-left:auto}
}

/* ============================================================
   Net-new content layout (page sections the tile fragment lacked).
   Placed after the verbatim block so source order wins over .adv ul.
   ============================================================ */
.v5-druckgefuehl-dark .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.v5-druckgefuehl-dark .claim strong{margin-right:.5ch}
.v5-druckgefuehl-dark .barrier ul{grid-template-columns:1fr;gap:11px}
.v5-druckgefuehl-dark .fares-head{grid-column:1 / -1;margin-bottom:-6px}
.v5-druckgefuehl-dark .near .addr{margin:0 0 14px;font-weight:700;font-size:.95rem}
.v5-druckgefuehl-dark .near .coords{margin:9px 0 0;font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* ============================================================
   Legal long-form pages (net-new: standalone Garagenordnung + Impressum, Step 3).
   Additive only: no rule above is altered. Reuses the frame tokens
   (--ink,--muted,--line,--accent); no new color literal, no new @font-face.
   Constrained ~65ch measure + comfortable line-height for legal prose.
   ============================================================ */
.v5-druckgefuehl-dark a.brand{color:inherit;text-decoration:none}
.v5-druckgefuehl-dark .legal{padding:30px 24px}
.v5-druckgefuehl-dark .legal h1{font-weight:800;font-size:clamp(1.55rem,4.2vw,2.05rem);letter-spacing:-0.02em;line-height:1.1;margin:0 0 8px}
.v5-druckgefuehl-dark .legal .lead{max-width:65ch;margin:0 0 24px;color:var(--muted);font-size:1rem}
.v5-druckgefuehl-dark .legal h2{font-weight:800;font-size:1.08rem;letter-spacing:-0.01em;max-width:65ch;margin:30px 0 10px}
.v5-druckgefuehl-dark .legal p{max-width:65ch;margin:0 0 13px;font-size:.95rem;line-height:1.62;color:var(--ink)}
.v5-druckgefuehl-dark .legal ul{max-width:65ch;margin:0 0 13px;padding-left:1.3em}
.v5-druckgefuehl-dark .legal li{margin:0 0 8px;font-size:.95rem;line-height:1.55}
.v5-druckgefuehl-dark .legal li::marker{color:var(--accent)}
.v5-druckgefuehl-dark .legal a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.v5-druckgefuehl-dark .legal .legal-subhead{font-weight:800;color:var(--ink);margin:24px 0 8px}
.v5-druckgefuehl-dark .legal .legal-note{max-width:65ch;color:var(--muted);font-size:.9rem;font-style:italic}
.v5-druckgefuehl-dark .legal .legal-summary{margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
body[data-lang="de"] .v5-druckgefuehl-dark .legal-note--en{display:none}
/* Footer links: give every footer <a> the gold accent on all pages. index.html
   sets this inline per-link; the legal pages carried no color rule, so their footer
   links fell back to the UA blue/purple on the dark theme. Scoped to .foot a, so
   nav, brand, CTA, and .legal content links are untouched. The aria-current rule
   below keeps the current page's footer link in --ink; its attribute selector has
   higher specificity and wins regardless of source order. Content links inside
   .legal are already accent-colored by the .legal a rule above, so they need no
   new rule here. Hover for .foot a already resolves to --ink in the hover block. */
.v5-druckgefuehl-dark .foot a{color:var(--accent)}
.v5-druckgefuehl-dark .foot a[aria-current="page"]{color:var(--ink)}
@container (max-width:600px){
  .v5-druckgefuehl-dark .legal{padding-left:16px;padding-right:16px}
}