/* ═══════════════════════════════════════════════════════════════════════════
   stil.css  ·  Das gemeinsame Design aller Inhaltsseiten
   ───────────────────────────────────────────────────────────────────────────
   Grundlage: das Design von adventsspaziergang.html, erweitert um die
   Bausteine der Lichtermarkt-Seite (Faktentabelle, Öffnungszeiten, Nachbarn,
   Kacheln) und der Startseite (Knöpfe, Kartenraster, Blogverweise).

   Jede Inhaltsseite bindet ZWEI Dateien ein, sonst nichts:
       <link rel="stylesheet" href="schriften.css">   ← die Schriften
       <link rel="stylesheet" href="stil.css">        ← dieses Design

   Wer das Aussehen ändert, ändert es hier — einmal, für alle Seiten.
   (Der Routenplaner ist eine eigenständige App und bindet nur schriften.css
   ein; sein App-Layout lebt bewusst in seiner eigenen Datei.)
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --nacht:#0e1830; --bude:#24467f; --bude-hell:#3d6cb0;
  --laterne:#ffcf70; --schnee:#f2f5fa; --tinte:#141d2b;
  --glut:#c93f28; --linie:#c8d3e4;
  --display:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --body:"Literata",Georgia,serif;
  --data:"IBM Plex Mono",ui-monospace,monospace;
}

/* ── Grundgerüst ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--schnee);color:var(--tinte);
  font-family:var(--body);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:min(1080px,92vw);margin-inline:auto}
.schmal{width:min(760px,92vw);margin-inline:auto}
a{color:var(--bude);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--glut)}
:focus-visible{outline:3px solid var(--glut);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;position:fixed;z-index:99;background:var(--laterne);color:var(--nacht);padding:.7rem 1.1rem;font-family:var(--display);font-weight:600}

/* ── Kopfleiste & Brotkrumen ──────────────────────────────────────────────── */
.topbar{background:var(--nacht);color:#c3d0e6;font-family:var(--data);font-size:.75rem;letter-spacing:.06em}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:center;padding:.6rem 0}
.topbar a{color:#c3d0e6;text-decoration:none}
.topbar a:hover{color:var(--laterne)}
.topbar .sprachen{margin-left:auto;display:flex;gap:.8rem}
nav.krumen{background:var(--nacht);color:#8ea4c6;font-family:var(--data);font-size:.75rem;padding-bottom:.9rem}
nav.krumen ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
nav.krumen li+li::before{content:"›";margin-right:.5rem;color:var(--bude-hell)}
nav.krumen a{color:#8ea4c6}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero{
  background:
    radial-gradient(130% 95% at 50% 115%, rgba(255,207,112,.34), transparent 60%),
    radial-gradient(95% 75% at 5% -8%, rgba(61,108,176,.5), transparent 62%),
    var(--nacht);
  color:#eaf0fa;padding:3.6rem 0 0;position:relative;overflow:hidden
}
.eyebrow{font-family:var(--data);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--laterne);margin:0 0 1.2rem}
.eyebrow span{color:#7f97bd}
h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.2rem,6.4vw,4.3rem);line-height:.98;letter-spacing:-.028em;
  margin:0;text-wrap:balance;max-width:18ch
}
h1 em,h1 .zeile2{font-style:normal;color:var(--laterne);font-weight:400;display:block}
.these,.antwort{font-size:clamp(1.03rem,2vw,1.26rem);line-height:1.55;max-width:54ch;margin:1.6rem 0 0;color:#d3ddef}

/* Eckdaten-Leiste (Kennzahlen im Hero) */
.eckdaten{display:flex;flex-wrap:wrap;gap:0;margin:2.3rem 0 3.2rem;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.18)}
.eckdaten li{flex:1 1 8rem;padding:1.05rem 1.2rem 1.2rem 0}
.eckdaten b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,3.2vw,2.1rem);line-height:1;color:var(--laterne)}
.eckdaten span{font-family:var(--data);font-size:.71rem;letter-spacing:.12em;text-transform:uppercase;color:#9fb4d4;display:block;margin-top:.45rem}

/* Chips (kleine Merkmal-Pillen im Hero) */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin:2rem 0 3.2rem;padding:0;list-style:none}
.chips li{font-family:var(--data);font-size:.8rem;border:1px solid rgba(255,207,112,.4);border-radius:999px;padding:.42rem .95rem;color:var(--laterne)}
.chips li.jetzt{background:var(--laterne);color:var(--nacht);border-color:var(--laterne);font-weight:500}

/* Knöpfe (Handlungsaufrufe) */
.knoepfe{display:flex;flex-wrap:wrap;gap:.7rem;margin:2rem 0 3.4rem}
.knopf{
  display:inline-block;background:var(--laterne);color:var(--nacht);text-decoration:none;
  font-family:var(--display);font-weight:600;font-size:1rem;padding:.85rem 1.4rem;border-radius:2px
}
.knopf:hover{background:#ffdd94;color:var(--nacht)}
.knopf--leer{background:transparent;color:#eaf0fa;border:1px solid rgba(255,255,255,.32);font-weight:400}
.knopf--leer:hover{background:rgba(255,255,255,.08);color:#fff}
.knoepfe.dunkel .knopf--leer{color:var(--bude);border-color:var(--linie)}
.knoepfe.dunkel .knopf--leer:hover{background:#fff;color:var(--glut)}

/* Signatur: Münster-Silhouette (eine Heimat: bilder/muenster-silhouette.svg,
   per CSS-Maske eingefärbt) + Spitzdach-Kante am Hero-Fuß */
.skyline,.stadtkante{
  display:block;width:100%;aspect-ratio:1525/393;
  -webkit-mask:url("bilder/muenster-silhouette.svg") center bottom/contain no-repeat;
          mask:url("bilder/muenster-silhouette.svg") center bottom/contain no-repeat;
}
/* Hero-Fuß: helle Stadt gegen den dunklen Nachthimmel des Hero */
.skyline{max-height:clamp(160px,26vw,320px);margin-bottom:-1px;background-color:var(--schnee)}
/* Seiten-Fuß: dieselbe Stadt, dunkel, wächst aus dem Footer empor — das Wiedererkennungszeichen */
.stadtkante{max-height:clamp(96px,15vw,168px);margin:3rem auto -1px;background-color:var(--nacht)}
.dachkante{display:block;width:100%;height:34px;margin-bottom:-1px}
.dachkante .dach{fill:var(--schnee)}
.dachkante .lampe{fill:var(--laterne)}
@media (prefers-reduced-motion:no-preference){
  .skyline,.stadtkante{opacity:0;transform:translateY(10px);animation:aufsteigen .9s ease-out .15s forwards}
  .dachkante .lampe{opacity:0;animation:anzuenden .5s ease-out forwards}
}
@keyframes aufsteigen{to{opacity:1;transform:none}}
@keyframes anzuenden{to{opacity:1}}

/* ── Abschnitte & Typografie ──────────────────────────────────────────────── */
main{padding-bottom:5rem}
section{padding-top:3.6rem}
h2{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.12;letter-spacing:-.018em;margin:0 0 .4rem;text-wrap:balance}
h2 .nr{font-family:var(--data);font-size:.72rem;letter-spacing:.16em;color:var(--bude-hell);display:block;margin-bottom:.55rem;font-weight:400}
h3{font-family:var(--display);font-weight:600;font-size:1.08rem;margin:1.6rem 0 .35rem}
.lead{max-width:64ch;margin:.7rem 0 1.5rem}
p{max-width:66ch}
.gross{font-size:1.15rem;max-width:60ch}

/* ── Signatur: Stationen und Strecken (Adventsspaziergang) ────────────────── */
.route{list-style:none;margin:2.2rem 0 0;padding:0}
.halt{position:relative;padding-left:3.6rem;padding-bottom:.4rem}
.halt::before{content:"";position:absolute;left:15px;top:34px;bottom:-2.4rem;width:2px;background:var(--linie)}
.halt.letzte::before{display:none}
.marke{position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--nacht);color:var(--laterne);
  font-family:var(--data);font-size:.85rem;display:grid;place-items:center;box-shadow:0 0 0 5px var(--schnee),0 0 16px rgba(255,207,112,.5)}
.halt h3{font-family:var(--display);font-weight:600;font-size:1.35rem;margin:.05rem 0 .3rem;line-height:1.1}
.halt h3 a{color:var(--tinte);text-decoration:none}
.halt h3 a:hover{color:var(--glut)}
.sinne{font-family:var(--data);font-size:.73rem;letter-spacing:.11em;text-transform:uppercase;color:var(--bude);margin:0 0 .6rem}
.halt p{margin:0 0 .6rem;max-width:58ch}
.gratis{display:inline-block;font-family:var(--data);font-size:.72rem;letter-spacing:.08em;color:#2c6b4a;background:#e2f0e7;border:1px solid #b7d9c5;padding:.2rem .6rem;margin-bottom:.3rem}
.strecke{position:relative;margin:1.5rem 0 2.4rem;padding:1rem 1.2rem 1rem 3.6rem;background:#fff;border:1px solid var(--linie);border-left:3px solid var(--laterne)}
.strecke::before{content:"";position:absolute;left:15px;top:-1.5rem;height:1.5rem;width:2px;background:var(--linie)}
.strecke .weg-marke{position:absolute;left:-2.4rem;top:1.15rem;font-family:var(--data);font-size:.72rem;color:var(--bude);letter-spacing:.06em;white-space:nowrap}
.strecke h4{font-family:var(--display);font-weight:600;font-size:1.02rem;margin:0 0 .3rem}
.strecke p{margin:0;font-size:.96rem;color:#3c4a60;max-width:58ch}
.strecke .dauer{font-family:var(--data);font-size:.73rem;letter-spacing:.09em;color:var(--glut);display:block;margin-bottom:.35rem}

/* ── Faktentabelle (der zitierbare Block) ─────────────────────────────────── */
.fakten{border-top:2px solid var(--tinte);width:100%;border-collapse:collapse;margin-top:1.2rem}
.fakten caption{text-align:left;font-family:var(--data);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bude);padding-bottom:.5rem}
.fakten th,.fakten td{text-align:left;padding:.75rem .5rem;border-bottom:1px solid var(--linie);vertical-align:top}
.fakten th{font-family:var(--data);font-weight:400;font-size:.8rem;color:#4a5c76;width:34%;white-space:nowrap}
.fakten td{font-size:1rem}
.fakten td strong{font-family:var(--display);font-weight:600}

/* ── Öffnungszeiten ───────────────────────────────────────────────────────── */
.zeiten{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--linie);border:1px solid var(--linie);margin-top:1rem}
.zeiten div{background:#fff;padding:.9rem 1rem}
.zeiten dt{font-family:var(--data);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:#4a5c76}
.zeiten dd{margin:.2rem 0 0;font-family:var(--display);font-weight:600;font-size:1.15rem}

/* ── Nachbarmärkte (das Kollegen-Signal) ──────────────────────────────────── */
.nachbarn{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie)}
.nachbarn li{background:#fff;display:flex;align-items:baseline;gap:1rem;padding:.9rem 1.1rem;flex-wrap:wrap}
.nachbarn .min{font-family:var(--data);font-size:.95rem;color:var(--bude);min-width:5.5rem}
.nachbarn .name{font-family:var(--display);font-weight:600;font-size:1.05rem}
.nachbarn .was{color:#4a5c76;font-size:.95rem;flex:1 1 16rem}
.nachbarn a{text-decoration:none}
.nachbarn a:hover .name{color:var(--glut)}

/* ── Info-Kacheln / Kartenraster ──────────────────────────────────────────── */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.4rem;margin-top:1.2rem}
.kachel{background:#fff;border:1px solid var(--linie);border-top:3px solid var(--bude);padding:1.2rem 1.3rem}
.kachel h3{margin-top:0}
.kachel .ort{font-family:var(--data);font-size:.74rem;letter-spacing:.06em;color:var(--bude);margin:.15rem 0 .6rem}
.kachel p{font-size:.97rem;margin:0}
.kachel ul{font-size:.97rem;margin:.4rem 0 0;padding-left:1.1rem}
.kachel a{text-decoration:none}
.kachel a:hover h3{color:var(--glut)}

/* ── Blogverweise ─────────────────────────────────────────────────────────── */
.blogliste{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--linie);border:1px solid var(--linie);margin-top:1.2rem}
.blogliste a{background:#fff;padding:1rem 1.2rem;text-decoration:none;color:var(--tinte);font-family:var(--display);font-weight:600}
.blogliste a span{display:block;font-family:var(--body);font-weight:400;font-size:.92rem;color:#4a5c76;margin-top:.2rem}
.blogliste a:hover{color:var(--glut)}

/* ── free4all ─────────────────────────────────────────────────────────────── */
.gratisblock{background:var(--nacht);color:#dbe4f2;padding:2.2rem 2rem;margin-top:1.4rem;border-top:4px solid var(--laterne)}
.gratisblock h3{font-family:var(--display);font-weight:600;color:#fff;font-size:1.3rem;margin:0 0 .3rem}
.gratisblock p{color:#a9bcd8;font-size:.97rem;margin:0 0 1.2rem}
.gratisblock ul{list-style:none;margin:0;padding:0;columns:2;column-gap:2.4rem;font-size:.99rem}
.gratisblock li{break-inside:avoid;padding:.4rem 0 .4rem 1.5rem;position:relative;color:#e6ecf7}
.gratisblock li::before{content:"·";position:absolute;left:.3rem;top:.35rem;color:var(--laterne);font-size:1.5rem;line-height:1}
@media(max-width:620px){.gratisblock ul{columns:1}}

/* ── Zeitplan-Tabelle ─────────────────────────────────────────────────────── */
.zeitplan{border-top:2px solid var(--tinte);width:100%;border-collapse:collapse;margin-top:1.3rem}
.zeitplan caption{text-align:left;font-family:var(--data);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bude);padding-bottom:.55rem}
.zeitplan th,.zeitplan td{text-align:left;padding:.72rem .55rem;border-bottom:1px solid var(--linie);vertical-align:top;font-size:.98rem}
.zeitplan tbody th{font-family:var(--data);font-weight:500;white-space:nowrap;color:var(--glut);width:9rem}
.zeitplan thead th{font-family:var(--data);font-weight:400;font-size:.73rem;letter-spacing:.1em;text-transform:uppercase;color:#4a5c76}

/* ── Varianten-Karten ─────────────────────────────────────────────────────── */
.varianten{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:1px;background:var(--linie);border:1px solid var(--linie);margin-top:1.3rem}
.varianten article{background:#fff;padding:1.2rem 1.3rem}
.varianten .dauer{font-family:var(--data);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bude)}
.varianten h3{font-family:var(--display);font-weight:600;font-size:1.06rem;margin:.35rem 0 .4rem}
.varianten p{font-size:.95rem;margin:0}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq{margin-top:1.3rem;border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie);background:#fff}
.faq summary{cursor:pointer;padding:1rem 1.1rem;font-family:var(--display);font-weight:600;font-size:1.03rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--data);color:var(--bude);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 1.1rem 1.2rem;margin:0;font-size:1rem;max-width:70ch}
.faq .a p{margin:0 0 .7rem}
.faq .a p:last-child{margin-bottom:0}

/* ── Platzhalter-Markierung (nur im Prototyp) ─────────────────────────────── */
.pl{background:rgba(201,63,40,.12);border-bottom:1px dashed var(--glut);padding:0 .15em}
.hinweis{background:var(--nacht);color:#dbe4f2;border-left:5px solid var(--glut);padding:1.1rem 1.3rem;margin:3rem 0 0;font-size:.95rem}
.hinweis strong{font-family:var(--display);color:var(--laterne)}

/* ── Fußzeile mit Lichtermarkt-Logo ───────────────────────────────────────── */
footer{background:var(--nacht);color:#a9bcd8;padding:2.6rem 0;font-size:.92rem}
footer .stand{font-family:var(--data);font-size:.78rem;color:var(--laterne);letter-spacing:.08em}
footer a{color:#dbe4f2}
footer p{max-width:64ch}
.fusszeile{display:flex;gap:1.6rem;align-items:flex-start;flex-wrap:wrap}
.fusslogo{flex:none;width:132px;height:auto;border-radius:4px;display:block}
.fusstext{flex:1 1 20rem;min-width:min(100%,18rem)}
.fusstext p{margin:0 0 .8rem}
.fusstext .fusslinks{margin-top:.4rem}
@media(max-width:520px){.fusslogo{width:104px}}

/* ── Feinschliff Faktentabelle auf kleinen Schirmen ───────────────────────── */
@media (max-width:560px){
  .fakten th{width:auto;white-space:normal;display:block;padding-bottom:0;border:0}
  .fakten td{display:block;padding-top:.15rem}
  .fakten tr{display:block;border-bottom:1px solid var(--linie);padding:.5rem 0}
  .fakten th,.fakten td{border-bottom:0}
}