/* Die Wichtelorte.
 *
 * 33 Seiten aus einem Generator, deshalb liegt das Aussehen hier und nicht
 * in jeder Datei einzeln. Kopf- und Fusszeile sind wortgleich zur Start-
 * und zur Kamera-Seite; wer dort etwas aendert, aendert es auch hier.
 *
 * Die Karte ist selbst gezeichnet. Kein fremder Kachel-Dienst, kein
 * Fremdaufruf aus dem Browser: wir werben damit, dass bei uns nichts
 * abfliesst, dann darf eine Karte das nicht unterlaufen.
 */
:root{
  --rot:#E0472F; --gold:#EFB54B; --grad:linear-gradient(100deg,#E0472F,#EFB54B);
  --nacht:#0B0608; --grund:#130A0C; --flaeche:#1B1013; --linie:#382320;
  --txt:#F7F1E8; --leise:#C3AEA0; --hand:#F0D9A6; --r:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--grund);color:var(--txt);font-family:Inter,system-ui,sans-serif;
  font-size:16px;line-height:1.62;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
.bahn{max-width:1100px;margin:0 auto;padding:0 24px}
.hand{font-family:Caveat,cursive;color:var(--hand)}
.kicker{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);font-weight:700}
h1,h2,h3{letter-spacing:-.034em;line-height:1.06;font-weight:900}
h1{font-size:clamp(34px,5.4vw,58px)}
h2{font-size:clamp(24px,3.2vw,36px)}
.gold{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.fein{font-size:12.5px;color:#8A7566;line-height:1.65}
.an{color:var(--leise);font-size:clamp(15.5px,1.5vw,18px);max-width:62ch;margin-top:14px}

/* ── Kopfzeile ────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:20px;
  padding:13px max(24px,calc((100vw - 1100px)/2));
  background:rgba(11,6,8,.82);backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid rgba(56,35,32,.9)}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--txt)}
.logo .zeichen{width:auto;height:30px;flex:none}
.logo .wort{display:inline-flex;flex-direction:column;align-items:flex-start;
  font-weight:800;font-size:17px;letter-spacing:-.045em;line-height:1}
/* "fritzis" steht klein ueber der Wortmarke, nicht davor: so bleibt die
   Kopfleiste genau so breit wie vorher und bricht nicht um. */
.logo .wort b{font-weight:700;font-size:.5em;letter-spacing:.06em;line-height:1;
  color:var(--leise);margin-bottom:.22em}
.logo .wort i{font-style:normal;color:var(--gold)}
/* Ab 1160 px hat die Kopfleiste Platz, dann steht der Name in einer Zeile.
   Darunter wird die Leiste eng, dort bleibt er gestapelt. Kein gap, sonst
   trennt es auch "wichtel" von "kamera": beide sind eigene Flex-Kinder. */
@media(min-width:1160px){
  .logo .wort{flex-direction:row;align-items:baseline;white-space:nowrap}
  .logo .wort b{font-size:.62em;letter-spacing:.04em;margin:0 .42em 0 0}
}
.nav ul{display:flex;gap:22px;list-style:none;margin-left:auto;align-items:center}
.nav a.pfad{color:var(--leise);text-decoration:none;font-size:14px;font-weight:600}
.nav a.pfad:hover{color:var(--txt)}
.nav a.pfad.hier{color:var(--txt)}
.nav .bald{color:#6E5A4E;font-size:14px;font-weight:600;display:inline-flex;
  align-items:baseline;gap:6px;cursor:default}
.nav .bald i{font-style:normal;font-family:"JetBrains Mono",monospace;font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;color:#5E4A3E;
  border:1px solid #3A2C24;border-radius:999px;padding:2px 6px}
.nav .ruf{padding:10px 19px;border-radius:999px;
  border:1px solid rgba(239,181,75,.55);color:var(--gold);font-weight:800;font-size:14px;
  text-decoration:none;white-space:nowrap}
.klapp{display:none;width:38px;height:38px;border:1px solid #3A2620;border-radius:11px;
  background:transparent;cursor:pointer;padding:0;position:relative;flex:none}
.klapp span,.klapp span::before,.klapp span::after{position:absolute;left:9px;width:20px;
  height:2px;border-radius:2px;background:#C3AEA0;content:"";transition:transform .25s,opacity .2s}
.klapp span{top:18px}
.klapp span::before{top:-6px;left:0}
.klapp span::after{top:6px;left:0}
.nav.offen .klapp span{background:transparent}
.nav.offen .klapp span::before{transform:translateY(6px) rotate(45deg)}
.nav.offen .klapp span::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1080px){
  .nav{gap:12px}
  .nav .ruf{font-size:13.5px;padding:9px 15px;order:1;margin-left:0}
  .klapp{display:block;margin-left:auto;order:2}
  .nav ul{order:3;display:none;width:100%;flex-direction:column;align-items:flex-start;
    gap:0;margin:10px 0 4px;border-top:1px solid #3A2620}
  .nav.offen{flex-wrap:wrap}
  .nav.offen ul{display:flex}
  .nav ul li{width:100%;border-bottom:1px solid rgba(56,35,32,.7)}
  .nav ul li a,.nav ul li span{display:block;padding:14px 2px;font-size:16px}
}
@media(max-width:600px){
  .nav{gap:10px;padding-left:14px;padding-right:14px}
  .nav .logo .wort{display:none}
  .nav .ruf{font-size:13px;padding:9px 13px}
  .klapp{width:36px;height:36px}
  .klapp span{top:17px}
}
@media(max-width:560px){.nav .ruf .lang{display:none}}

/* ── Der Nachtwald-Kopf ───────────────────────────────────────────── */
/* Die erste Fassung hatte kein einziges Bild. Eine Farbflaeche kann nicht
   erzaehlen, dass es mehr von diesen Tueren gibt als man denkt, ein Wald
   voller kleiner Lichter kann es. */
.nachthed{position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(460px,62vh,660px);display:flex;align-items:flex-end;
  padding:clamp(40px,7vw,90px) 0 clamp(30px,4vw,52px)}
.nachtbild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2;transform:scale(1.02)}
.nachtschleier{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(11,6,8,.86) 0%,rgba(11,6,8,.34) 26%,rgba(11,6,8,.62) 62%,#130A0C 99%),
    linear-gradient(90deg,rgba(11,6,8,.8) 0%,rgba(11,6,8,.22) 52%,transparent 78%)}
.nachtinhalt{width:100%}
.nachtinhalt h1{margin-top:12px;text-shadow:0 12px 40px rgba(0,0,0,.75)}
/* background-image, NICHT background: die Kurzform setzt background-clip
   zurueck, und damit war der Verlauf ein Farbblock ueber der Schrift statt
   in ihr. */
.nachtinhalt h1 .gold{background-image:linear-gradient(100deg,#FF8352,#FFD37A)}
.wegband .gold{background-image:linear-gradient(100deg,#FF8352,#FFD37A)}
.an.gross{font-size:clamp(16px,1.75vw,19.5px);max-width:60ch;color:#E2D2C4;
  text-shadow:0 6px 24px rgba(0,0,0,.7)}
.nachtinhalt .zahlen{margin-top:26px}

/* ── Der Kopf der Seite ───────────────────────────────────────────── */
.held{padding:clamp(46px,6.5vw,86px) 0 clamp(26px,3vw,40px);
  background:radial-gradient(120% 100% at 18% 0%,rgba(224,71,47,.14),transparent 58%)}
.held.klein{padding-bottom:8px}
.held h1{margin-top:12px}
.zahlen{display:flex;gap:38px;flex-wrap:wrap;margin-top:30px}
.zahlen b{display:block;font-size:clamp(28px,3.4vw,38px);font-weight:900;
  letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;
  background-clip:text;color:transparent;line-height:1}
.zahlen span{display:block;font-size:12.5px;color:#8A7566;margin-top:4px;
  font-family:"JetBrains Mono",monospace;letter-spacing:.1em}

/* ── Die Karte ────────────────────────────────────────────────────── */
.kartenblock{padding:8px 0 clamp(34px,5vw,60px)}
/* Die Karte ist quadratisch wie DACH selbst. Ueber die volle Bahn gezogen
   waere sie 1200 Punkte hoch und wuerde die Seite auffressen, deshalb der
   Deckel und die Mitte. */
.kartenkopf{max-width:62ch;margin-bottom:6px}
.kartenkopf h2{margin-top:10px}
.kartenfeld{position:relative}
.karte{display:block;margin:0 auto;width:100%;max-width:min(100%,660px);height:auto;
  filter:drop-shadow(0 40px 70px rgba(0,0,0,.55))}
/* Die Lichter atmen. Jeder Punkt hat seinen eigenen Versatz, der im HTML
   steht, damit nicht 171 Lichter im Gleichschritt blinken. */
@keyframes atmen{0%,100%{opacity:.55}45%{opacity:1}}
.karte .pkt{animation:atmen 5.2s ease-in-out infinite}
.karte .streif{fill:none;stroke:#FFE1A0;stroke-width:1.6;opacity:0}
.karte .streif.an{animation:streifen 3.6s ease-out}
@keyframes streifen{
  0%{opacity:0;r:4}
  14%{opacity:1;r:11}
  70%{opacity:.5;r:13}
  100%{opacity:0;r:15}
}
/* Das Wort steht UNTER der Karte. Lag es darauf, verdeckte es die Schweiz
   und war je nach Phase der Blende kaum zu lesen. */
.streifwort{margin:6px auto 0;text-align:center;
  font-size:clamp(20px,2.3vw,26px);color:var(--hand);opacity:0;min-height:1.5em;
  pointer-events:none}
.streifwort.an{animation:wortauf 3.6s ease-out}
@keyframes wortauf{0%{opacity:0;transform:translateY(6px)}18%{opacity:1;transform:none}
  74%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .karte .pkt{animation:none}
  .karte .streif,.streifwort{display:none}
}
.karte .flaeche{fill:#1C1216;stroke:#2C1D1F;stroke-width:1;stroke-linejoin:round}
.karte a.flaeche{cursor:pointer}
.karte a.flaeche path{fill:#241619;stroke:#42292A;stroke-width:1;stroke-linejoin:round;
  transition:fill .18s}
.karte a.flaeche:hover path,.karte a.flaeche:focus path{fill:#3A2220;stroke:var(--gold);
  outline:none}
.karte .pkt{fill:#FFCE6A}
.karte .pkt.g{fill:#E8845A}
.karte .pkt.s{fill:#F2E3C4}
.legende{display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin-top:18px}
.legende .l{font-size:12.5px;color:var(--leise);display:inline-flex;align-items:center;gap:7px;
  font-family:"JetBrains Mono",monospace;letter-spacing:.06em}
.legende .l::before{content:"";width:9px;height:9px;border-radius:50%;background:#FFCE6A}
.legende .l.ganzjaehrig::before{background:#E8845A}
.legende .l.sommer::before{background:#F2E3C4}
.legende .hinweisl{margin-left:auto;font-size:12px;color:#7A6558}
@media(max-width:700px){.legende .hinweisl{margin-left:0;width:100%}}

/* ── Die Regionen ─────────────────────────────────────────────────── */
.listen{padding:clamp(10px,2vw,20px) 0 clamp(40px,6vw,70px)}
.halt{padding-left:56px;padding-bottom:34px}
.halt h2{font-size:clamp(21px,2.6vw,29px)}
.anzahl{font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#8A7566;margin-top:7px}
.regionen{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:10px;margin-top:18px}
.reg{position:relative;display:flex;align-items:center;gap:13px;
  padding:13px 15px;border:1px solid var(--linie);border-radius:14px;
  background:var(--flaeche);text-decoration:none;color:var(--txt);
  transition:border-color .16s,background .16s;overflow:hidden}
.reg:hover{border-color:rgba(239,181,75,.6);background:#22151A}
.reg .sil{width:38px;height:38px;flex:none}
.reg .sil path{fill:#3A2620;stroke:#513630;stroke-width:1.4;stroke-linejoin:round;
  transition:fill .16s,stroke .16s}
.reg:hover .sil path{fill:#5A3520;stroke:var(--gold)}
.regtext{min-width:0}
.reg b{display:block;font-size:15px;font-weight:700;letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.regzahl{display:block;font-size:11px;color:#8A7566;font-family:"JetBrains Mono",monospace;
  letter-spacing:.08em;margin-top:2px}

.regionen{grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
@media(max-width:760px){.halt{padding-left:50px}}

/* ── Die Ortskacheln ──────────────────────────────────────────────── */
.krume{border-bottom:1px solid rgba(56,35,32,.7);padding:11px 0;font-size:13px}
.krume a{color:var(--leise);text-decoration:none}
.krume a:hover{color:var(--txt)}
.krume span{color:#5E4A3E;margin:0 6px}
.krume b{color:var(--txt);font-weight:600}
.ortliste{padding:clamp(24px,4vw,44px) 0 clamp(30px,5vw,56px)}
/* min(330px,100%) statt 330px: ein nackter Pixelwert im minmax()-Boden ist
   eine harte Untergrenze, die Spalte schrumpft nicht darunter und die ganze
   Seite laeuft rechts heraus. Hier rettet zwar noch die Regel darunter, aber
   nur zufaellig und nur bis 720 px -- der Boden soll von sich aus stimmen. */
.gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:14px}
@media(max-width:720px){.gitter{grid-template-columns:1fr}}
.ort{border:1px solid var(--linie);border-radius:var(--r);padding:20px 21px;
  background:var(--flaeche);display:flex;flex-direction:column}
.ort h3{font-size:19px;letter-spacing:-.028em;font-weight:800}
.ort .wo{font-size:13.5px;color:var(--leise);margin-top:4px}
.marken{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.marke{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;padding:3px 9px;border-radius:999px;
  border:1px solid rgba(239,181,75,.4);color:#FFCE6A}
.marke.ganzjaehrig{border-color:rgba(232,132,90,.45);color:#E8845A}
.marke.sommer{border-color:rgba(242,227,196,.3);color:#D8C9AE}
.marke.unklar,.marke.verwandt{border-color:#3A2C24;color:#8A7566}
.ort dl{margin-top:14px;border-top:1px solid rgba(56,35,32,.9);padding-top:12px}
.ort dt{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#8A7566;font-weight:700;margin-top:10px}
.ort dt:first-child{margin-top:0}
.ort dd{font-size:14.5px;color:var(--txt);margin-top:2px;line-height:1.5}
.lauwarm{margin-top:12px;font-size:12.5px;color:#C9A87A;line-height:1.55;
  border-left:2px solid rgba(239,181,75,.45);padding-left:10px}
.ort .zeile{display:flex;gap:16px;flex-wrap:wrap;margin-top:auto;padding-top:16px}
.quelle{color:var(--gold);text-decoration:none;font-size:13.5px;font-weight:700}
.quelle:hover{text-decoration:underline}
.quelle.leise{color:var(--leise);font-weight:600}
.fussnote{margin-top:26px;font-size:13px;color:#8A7566;line-height:1.62;max-width:78ch}
.fussnote a{color:var(--gold)}

/* ── Die Ortsseite ────────────────────────────────────────────────── */
/* Der Kopf heisst ortkopf und nicht ort: `.ort` ist die Kachel auf der
   Regionsseite, mit Rahmen, Polster und display:flex. Als der Kopf so hiess,
   sass er in einem Kasten und war eingerueckt. */
.held.ortkopf{padding-bottom:6px}
.held.ortkopf h1{font-size:clamp(30px,4.6vw,52px);margin-top:12px}
.unterzeile{color:var(--leise);font-size:clamp(15px,1.6vw,18px);margin-top:12px}
.held.ortkopf .marken{margin-top:16px}

/* Fritzis Notiz. Das Element, das es nur bei uns gibt: eine Handschrift
   ueber jemanden, den es an diesem Ort gibt und der nicht Fritzi ist.
   Deshalb steht direkt darunter, wem der Ort gehoert. */
.notizblock{padding:clamp(24px,3.4vw,40px) 0 clamp(6px,1vw,12px)}
.notiz{position:relative;border:1px solid rgba(239,181,75,.34);border-radius:24px;
  padding:clamp(26px,3.4vw,38px) clamp(24px,4vw,52px) clamp(22px,3vw,30px);
  background:
    radial-gradient(120% 150% at 88% 0%,rgba(224,71,47,.2),transparent 58%),
    radial-gradient(90% 120% at 4% 100%,rgba(239,181,75,.12),transparent 60%),
    #1B1013;
  box-shadow:0 50px 100px -60px #000;margin:0;overflow:hidden}
/* Eine Spur, die einmal quer durch die Notiz laeuft, nicht gekachelt.
   Gekachelt sah es aus wie Tapete: gleiche Abstaende, gleicher Winkel,
   sofort als Muster erkennbar. Jemand, der durchs Bild gelaufen ist,
   setzt die Fuesse ungleich. */
.notiz::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-repeat:no-repeat;background-position:right -30px top 8px;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='420' height='300'>\
<g fill='%23EFB54B' opacity='.13'>\
<g transform='translate(18,14) rotate(24)'>\
<ellipse cx='0' cy='0' rx='4.6' ry='6.8'/><circle cx='-3.4' cy='8.8' r='1.6'/>\
<circle cx='0.4' cy='10' r='1.7'/><circle cx='4.2' cy='8.4' r='1.6'/></g>\
<g transform='translate(74,58) rotate(31)'>\
<ellipse cx='0' cy='0' rx='4.4' ry='6.5'/><circle cx='-3.3' cy='8.4' r='1.5'/>\
<circle cx='0.4' cy='9.6' r='1.6'/><circle cx='4' cy='8' r='1.5'/></g>\
<g transform='translate(122,116) rotate(20)'>\
<ellipse cx='0' cy='0' rx='4.6' ry='6.8'/><circle cx='-3.4' cy='8.8' r='1.6'/>\
<circle cx='0.4' cy='10' r='1.7'/><circle cx='4.2' cy='8.4' r='1.6'/></g>\
<g transform='translate(186,158) rotate(34)'>\
<ellipse cx='0' cy='0' rx='4.3' ry='6.3'/><circle cx='-3.2' cy='8.2' r='1.5'/>\
<circle cx='0.3' cy='9.4' r='1.55'/><circle cx='3.9' cy='7.8' r='1.5'/></g>\
<g transform='translate(238,218) rotate(18)'>\
<ellipse cx='0' cy='0' rx='4.6' ry='6.8'/><circle cx='-3.4' cy='8.8' r='1.6'/>\
<circle cx='0.4' cy='10' r='1.7'/><circle cx='4.2' cy='8.4' r='1.6'/></g>\
</g></svg>")}
.notiz .fritzi{position:absolute;right:clamp(14px,2.6vw,30px);bottom:-6px;height:104px;width:auto;
  opacity:.5;filter:drop-shadow(0 10px 30px rgba(0,0,0,.7))}
.notizkopf{position:relative;font-family:"JetBrains Mono",monospace;font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:700}
.notiz blockquote{position:relative;font-family:Caveat,cursive;color:var(--hand);
  font-size:clamp(24px,3.5vw,36px);line-height:1.34;margin:14px 0 0;max-width:36ch;
  text-wrap:balance}
.notizfuss{position:relative;margin-top:20px;padding-top:16px;
  border-top:1px solid rgba(239,181,75,.22);font-size:12.5px;color:#9A8474;
  line-height:1.6;max-width:64ch}
@media(max-width:620px){
  .notiz .fritzi{height:72px;opacity:.34}
  .notiz blockquote{max-width:none}
}

/* Text, Fakten und Lage nebeneinander */
.fliess{padding:clamp(26px,4vw,46px) 0 clamp(20px,3vw,36px)}
.fliess .bahn{display:grid;grid-template-columns:1fr 340px;gap:clamp(26px,4vw,54px);
  align-items:start}
@media(max-width:900px){.fliess .bahn{grid-template-columns:1fr}}
.satzspalte p{font-size:clamp(16px,1.7vw,18.5px);color:#D9CABC;line-height:1.72;
  margin-bottom:16px;max-width:66ch}
.satzspalte p:first-child::first-letter{font-size:1.02em}
.spalte{display:block}
.fakten{border:1px solid var(--linie);border-radius:20px;padding:22px 22px 20px;
  background:var(--flaeche)}
.fakten h2{font-size:15px;font-weight:800;letter-spacing:-.01em;margin-bottom:12px}
.fakten dl{border-top:1px solid rgba(56,35,32,.9);padding-top:12px}
.fakten dt{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#8A7566;font-weight:700;margin-top:13px}
.fakten dt:first-child{margin-top:0}
.fakten dd{font-size:14.5px;color:var(--txt);margin-top:3px;line-height:1.5}
.fakten .zeile{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px;padding-top:16px;
  border-top:1px solid rgba(56,35,32,.9)}
.lage{margin-top:18px;border:1px solid var(--linie);border-radius:20px;padding:20px 22px;
  background:var(--nacht)}
.lage .kicker{margin-bottom:12px}
.lage .fein{margin-top:12px}
.minikarte{display:block;width:100%;height:auto;max-height:260px}
.minikarte .mflaeche{fill:#241619;stroke:#42292A;stroke-width:1;stroke-linejoin:round}
.minikarte .mpkt{fill:#6E5A4E}
.minikarte .mhier{fill:#FFCE6A}
.regkarte{padding:6px 0 0}
.regkarte .minikarte{max-width:420px;margin:0 auto;max-height:300px}

/* Nachbarschaft */
.naehe{padding:clamp(20px,3vw,38px) 0}
.naehe h2{font-size:clamp(21px,2.4vw,27px)}
.naehe .an{margin-bottom:18px}
.gitter.drei{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.nachbar{display:block;border:1px solid var(--linie);border-radius:16px;padding:17px 18px;
  background:var(--flaeche);text-decoration:none;color:var(--txt);transition:border-color .16s}
a.nachbar:hover{border-color:rgba(239,181,75,.6)}
.nachbar.stumm{opacity:.72}
.nachbar b{display:block;font-size:15.5px;letter-spacing:-.02em}
.nachbar .wo{display:block;font-size:13px;color:var(--leise);margin-top:3px}
.nachbar .km{display:block;font-family:"JetBrains Mono",monospace;font-size:10.5px;
  letter-spacing:.12em;color:#8A7566;margin-top:9px}
.quellzeile{padding:6px 0 clamp(24px,4vw,44px)}
.quellzeile .fein{max-width:88ch}
.quellzeile a{color:var(--gold)}
.ort.erzaehlt{border-color:rgba(239,181,75,.34)}
.ort h3 a{color:inherit;text-decoration:none}
.ort h3 a:hover{color:var(--gold)}

/* ── Weiter suchen, Ehrlichkeit, Bruecke ──────────────────────────── */
.weiter{padding:0 0 clamp(30px,5vw,54px)}
.weiter h2{font-size:clamp(19px,2.2vw,24px);margin-bottom:4px}
.ehrlich{padding:clamp(34px,5vw,60px) 0;border-top:1px solid var(--linie);
  background:var(--nacht)}
.paar{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;margin-top:20px;
  align-items:start}
@media(max-width:880px){.paar{grid-template-columns:1fr}}
.ehrlich p{color:var(--leise);margin-bottom:12px;font-size:15px}
.ehrlich b{color:var(--txt)}
.kasten{border:1px solid rgba(239,181,75,.36);border-radius:20px;padding:24px;
  background:rgba(239,181,75,.06)}
.kasten h3{font-size:19px;margin:9px 0 8px}
.kasten p{font-size:14px}
.knopf{display:inline-block;margin:8px 0 14px;padding:12px 22px;border-radius:999px;
  background:var(--grad);color:#1A1207;font-weight:800;font-size:14.5px;
  text-decoration:none;box-shadow:0 16px 34px -18px rgba(239,181,75,.9)}
.knopf.gross{margin-top:22px;padding:15px 28px;font-size:16px}
.brueckchen{padding:clamp(40px,6vw,74px) 0;
  background:radial-gradient(90% 130% at 50% 0%,rgba(224,71,47,.16),transparent 62%)}
.brueckchen h2{margin-top:12px}

/* ── Fusszeile ────────────────────────────────────────────────────── */
.fuss{border-top:1px solid var(--linie);padding:46px 0 70px;background:var(--nacht)}
.fusszeile{display:flex;gap:22px;flex-wrap:wrap;align-items:center;margin-top:22px}
.fuss a{color:var(--leise);text-decoration:none;font-size:14px}
.fuss a:hover{color:var(--txt)}

/* ── Die Suche ────────────────────────────────────────────────────── */
/* Sie laeuft im Browser, ohne einen einzigen Aufruf nach draussen. Auf
   dieser Seite ist das kein technisches Detail: wir werben damit, dass bei
   uns nichts abfliesst, also darf auch ein Suchfeld nichts senden. */
.suche{padding:clamp(24px,4vw,48px) 0 clamp(20px,3vw,34px)}
.suchkopf{display:block;margin-bottom:14px;cursor:text}
.suchsatz{display:block;font-size:clamp(20px,2.6vw,28px);font-weight:900;
  letter-spacing:-.03em;margin-top:8px}
.suchzeile{max-width:560px}
.suchfeld{width:100%;padding:16px 22px;border-radius:999px;background:#0F080A;
  border:1px solid #3A2620;color:var(--txt);font-family:inherit;font-size:16.5px;
  outline:none;transition:border-color .16s,box-shadow .16s}
.suchfeld::placeholder{color:#6E5A4E}
.suchfeld:focus{border-color:rgba(239,181,75,.75);
  box-shadow:0 0 0 4px rgba(239,181,75,.1)}
.suche .fein{margin-top:10px}
.treffer{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:9px;margin-top:18px}
.treffer[hidden]{display:none}
.tref{display:block;padding:12px 15px;border:1px solid var(--linie);border-radius:13px;
  background:var(--flaeche);text-decoration:none;color:var(--txt);transition:border-color .16s}
.tref:hover{border-color:rgba(239,181,75,.6)}
.tref b{display:block;font-size:14.5px;letter-spacing:-.02em}
.tref span{display:block;font-size:12.5px;color:var(--leise);margin-top:2px}
.treffer .mehr,.treffer .leer{grid-column:1/-1;font-size:13.5px;color:#8A7566;margin-top:2px}
.treffer .leer a{color:var(--gold)}

/* ── Die Tuer neben dem ehrlichen Teil ────────────────────────────── */
.paar.bild{grid-template-columns:.85fr 1.15fr;align-items:start}
@media(max-width:880px){.paar.bild{grid-template-columns:1fr}}
.tuerbild{margin:0;position:sticky;top:88px}
.tuerbild img{width:100%;border-radius:20px;border:1px solid var(--linie);
  box-shadow:0 50px 90px -54px #000}
.tuerbild figcaption{font-size:clamp(19px,2vw,23px);color:var(--hand);margin-top:12px;
  text-align:center}
@media(max-width:880px){.tuerbild{position:static}}
.ehrlich .kasten{margin-top:24px}

/* ── Das Lichterband mit der Bruecke zur App ──────────────────────── */
.wegband{position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(56px,8vw,110px) 0;display:flex;align-items:center}
.wegbild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.wegschleier{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(11,6,8,.94) 0%,rgba(11,6,8,.74) 46%,rgba(11,6,8,.3) 100%),
    linear-gradient(180deg,#130A0C 0%,transparent 16%,transparent 84%,#130A0C 100%)}
.weginhalt{width:100%}
.weginhalt h2{margin-top:12px;text-shadow:0 10px 34px rgba(0,0,0,.8)}
.weginhalt .an{color:#E2D2C4;text-shadow:0 6px 22px rgba(0,0,0,.75)}

/* ── Der SEO-Text ─────────────────────────────────────────────────── */
.seotext{padding:clamp(34px,5vw,64px) 0;border-top:1px solid var(--linie);
  background:var(--nacht)}
.seospalte h2{font-size:clamp(23px,3vw,34px)}
.seospalte h3{font-size:clamp(17px,1.9vw,21px);font-weight:800;letter-spacing:-.02em;
  margin:26px 0 8px;color:var(--txt)}
.seospalte p{color:var(--leise);margin-top:10px;font-size:15.5px;line-height:1.72;
  max-width:70ch}
.seospalte b{color:var(--txt)}
.seospalte a{color:var(--gold);text-decoration:none}
.seospalte a:hover{text-decoration:underline}
.kasten.breit{margin-top:clamp(26px,4vw,44px)}
.kasten.breit p{max-width:88ch}

/* ── Der App-Block ueber dem Lichterweg ───────────────────────────── */
.appgrid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,52px);
  align-items:center}
@media(max-width:900px){.appgrid{grid-template-columns:1fr}}
.apptext h2{margin-top:10px}
.appliste{list-style:none;margin:24px 0 0;display:grid;gap:13px}
.appliste li{position:relative;padding-left:26px}
.appliste li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;
  border-radius:50%;background:var(--grad)}
.appliste b{display:block;font-size:15.5px;letter-spacing:-.02em;color:var(--txt)}
.appliste span{display:block;font-size:13.5px;color:#CBB9AA;margin-top:2px;line-height:1.55;
  max-width:56ch}
.appknoepfe{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.knopf.leer{background:transparent;color:var(--gold);box-shadow:none;
  border:1px solid rgba(239,181,75,.55);padding:15px 26px;font-size:16px;margin:0}
.knopf.leer:hover{border-color:var(--gold);color:#FFD37A}
.appknoepfe .knopf.gross{margin-top:0}
.appfein{margin-top:16px;color:#9A8474;max-width:62ch}

/* Der echte Beweis-Clip in seinem Rahmen. Dieselbe Anmutung wie auf der
   Startseite, damit es sich als dasselbe Produkt anfuehlt. */
.beweis{margin:0}
.beweisrahmen{position:relative;border-radius:20px;overflow:hidden;
  border:1px solid #3A2620;background:#000;
  box-shadow:0 50px 100px -50px #000, 0 0 0 1px rgba(239,181,75,.12)}
.beweisrahmen video{width:100%;display:block;aspect-ratio:9/16;object-fit:cover}
.beweisrahmen .hud{position:absolute;font-family:"JetBrains Mono",monospace;
  font-size:10px;letter-spacing:.1em;color:#9FE8C0;text-shadow:0 1px 6px #000}
.beweisrahmen .hud.tl{top:11px;left:12px}
.beweisrahmen .hud.bl{bottom:11px;left:12px}
.beweis figcaption{font-size:clamp(19px,2vw,23px);margin-top:12px;text-align:center}
@media(max-width:900px){
  .beweis{max-width:330px;margin:8px auto 0}
}

/* ── Der Kopf einer Ortsseite ─────────────────────────────────────── */
/* Das Bild ist eine Illustration und keine Aufnahme dieses Weges. Das
   steht auch so darunter: ein fotorealistisches Bild an dieser Stelle
   wuerde behaupten, es zeige genau diesen Ort, und das koennen wir nicht
   belegen. */
.landhed{position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(360px,46vh,480px);display:flex;align-items:flex-end;
  padding:clamp(34px,6vw,70px) 0 clamp(26px,3vw,40px)}
.landbild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.landschleier{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(11,6,8,.72) 0%,rgba(11,6,8,.24) 30%,rgba(11,6,8,.66) 66%,#130A0C 99%),
    linear-gradient(90deg,rgba(11,6,8,.82) 0%,rgba(11,6,8,.24) 56%,transparent 84%)}
.landinhalt{width:100%}
.landinhalt h1{font-size:clamp(30px,4.6vw,52px);margin-top:12px;
  text-shadow:0 12px 40px rgba(0,0,0,.8)}
.landinhalt .unterzeile{margin-top:10px;color:#E2D2C4;text-shadow:0 6px 22px rgba(0,0,0,.8)}
.landinhalt .marken{margin-top:16px}
.bildnote{position:absolute;right:14px;bottom:10px;font-size:10.5px;color:#8A7566;
  font-family:"JetBrains Mono",monospace;letter-spacing:.08em;opacity:.75}
.marke.zaehler{border-color:rgba(255,206,106,.7);color:#FFCE6A;background:rgba(255,206,106,.1)}
.marke.zaehler[hidden]{display:none}

/* ── Der Fliesstext einer Ortsseite ───────────────────────────────── */
.satzkopf{font-size:clamp(20px,2.5vw,27px);margin:0 0 14px}
.satzspalte .satzkopf:not(:first-child){margin-top:34px}
.randnotiz{margin:22px 0 4px;padding:16px 20px;border-left:2px solid rgba(239,181,75,.5);
  background:linear-gradient(90deg,rgba(239,181,75,.07),transparent 70%)}
.randnotiz .hand{font-size:clamp(20px,2.2vw,25px);line-height:1.4}

/* ── Die kurze Bruecke zur App auf einer Ortsseite ────────────────── */
.ortsapp{padding:clamp(30px,5vw,58px) 0;border-top:1px solid var(--linie);
  background:radial-gradient(90% 130% at 20% 0%,rgba(224,71,47,.14),transparent 62%),var(--nacht)}
.ortsappgrid{display:grid;grid-template-columns:230px 1fr;gap:clamp(22px,4vw,46px);
  align-items:center}
@media(max-width:760px){.ortsappgrid{grid-template-columns:1fr}}
.beweis.klein{max-width:230px}
@media(max-width:760px){.beweis.klein{margin:0 auto}}
.ortsapp h2{margin-top:10px}

/* ── Der Einzug als Layer ─────────────────────────────────────────── */
/* Wortgleich aus recht.css uebernommen. Der Einzug ist auf jeder Seite
   derselbe Weg, und er soll auch ueberall gleich aussehen. */
/* ─ Der Einzug als Layer ────────────────────────────────────────────*/
.elay{position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:20px}
.elay[hidden]{display:none}
.elayhaut{position:absolute;inset:0;background:rgba(6,3,5,.84);backdrop-filter:blur(6px)}
.elayblatt{position:relative;width:min(520px,100%);max-height:88svh;overflow:auto;
  border:1px solid rgba(239,181,75,.34);border-radius:26px;padding:clamp(24px,3.4vw,36px);
  background:radial-gradient(120% 130% at 50% 0%,rgba(224,110,47,.22),transparent 62%),#1B1013;
  box-shadow:0 60px 120px -50px #000;animation:elayauf .3s cubic-bezier(.2,.9,.3,1)}
@keyframes elayauf{from{opacity:0;transform:translateY(14px) scale(.985)}}
.elayzu{position:absolute;top:14px;right:16px;width:34px;height:34px;border-radius:50%;
  border:1px solid #3A2620;background:transparent;color:#C3AEA0;font-size:20px;line-height:1;
  cursor:pointer}
.elayzu:hover{color:#F7F1E8;border-color:#EFB54B}
.elayblatt h2{margin:12px 0 10px;font-size:clamp(24px,3.6vw,34px);letter-spacing:-.034em;
  line-height:1.05;font-weight:900;color:#F7F1E8}
.elayblatt .gold{background:linear-gradient(100deg,#E0472F,#EFB54B);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.elayblatt .kicker{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:#EFB54B;font-weight:700}
.elaysatz{font-size:14.5px;color:#C3AEA0}
.elaydinge{margin:18px 0 0;border-top:1px solid rgba(239,181,75,.3)}
.elaydinge div{padding:11px 0;border-bottom:1px solid rgba(56,35,32,.8)}
.elaydinge b{display:block;font-size:14.5px;color:#F7F1E8}
.elaydinge span{display:block;font-size:13px;color:#C3AEA0;margin-top:2px}
.elayzeile{display:flex;gap:9px;margin-top:20px}
.elayfeld{flex:1;min-width:0;padding:14px 18px;border-radius:999px;background:#0F080A;
  border:1px solid #3A2620;color:#F7F1E8;font-family:inherit;font-size:15.5px;outline:none}
.elayfeld:focus{border-color:rgba(239,181,75,.7)}
.elayknopf{padding:14px 22px;border-radius:999px;border:0;cursor:pointer;font-family:inherit;
  font-size:15px;font-weight:800;white-space:nowrap;color:#1A1207;
  background:linear-gradient(100deg,#E0472F,#EFB54B);
  box-shadow:0 16px 34px -16px rgba(239,181,75,.9)}
.elayknopf[disabled]{opacity:.5;cursor:default;box-shadow:none}
.elaywort{margin-top:11px;font-size:12.5px;color:#EFB54B;min-height:1px}
.elaywort.schlecht{color:#F09A82}
.elayfein{margin-top:14px;font-size:12px;color:#8A7566;line-height:1.6}
@media(max-width:560px){.elayzeile{flex-direction:column}.elayknopf{width:100%}}

/* Weitere Wege derselben Region. Klare interne Verlinkung ist bei
   Verzeichnissen einer der wenigen Hebel, die wirklich zaehlen: sie fuehrt
   Leser tiefer und verbindet die Seiten eines Bundeslandes untereinander. */
.mehrregion{padding:0 0 clamp(24px,4vw,44px)}
.mehrregion h2{font-size:clamp(20px,2.3vw,26px);margin-bottom:4px}
.mehrregion .regzahl{text-transform:none;letter-spacing:0}

/* ── Die App-Box (Nachbau des abgenommenen Werkstatt-Blocks) ─────────── */
/* Der Handy-Faecher waechst aus der Unterkante der Kiste, Fritzi steht auf
 * ihr, der Zettel klebt auf den Handys: alles am Boden verankert, nichts
 * schwebt. Version 2 nach Roberts "sieht komisch aus". */
.appkiste{padding:26px 0 10px}
.appkiste .appinnen{position:relative;display:grid;grid-template-columns:1.55fr 300px;
  gap:26px;align-items:center;border:1px solid #4A2F1B;border-radius:22px;
  padding:38px 36px;overflow:hidden;
  background:radial-gradient(120% 160% at 85% 10%,#2A1712 0%,var(--flaeche) 55%,var(--grund) 100%)}
.appkiste .appinnen::after{content:"";position:absolute;right:-40px;bottom:-120px;
  width:480px;height:380px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(239,181,75,.22),transparent 70%);pointer-events:none}
.appkiste h2{font-size:clamp(21px,2.6vw,27px);line-height:1.22;margin-top:10px}
.appkiste .an{max-width:56ch}
.appkiste .laeden{display:flex;gap:14px;margin-top:18px;flex-wrap:wrap;align-items:center}
.appkiste .laeden span{border:1px solid var(--linie);border-radius:12px;padding:8px 14px;
  font-size:12.5px;color:var(--leise)}
.appkiste .laeden b{display:block;color:var(--txt);font-size:13.5px}
.appkiste .appschau{position:static;width:300px;min-height:330px}
.appkiste .tel{position:absolute;width:150px;border-radius:16px;border:1px solid #4A2F1B;
  box-shadow:0 18px 34px rgba(0,0,0,.55);z-index:1}
.appkiste .t1{right:216px;bottom:-96px;transform:rotate(-8deg)}
.appkiste .t2{right:106px;bottom:-56px;transform:rotate(2deg);z-index:2}
.appkiste .t3{right:10px;bottom:-100px;transform:rotate(8deg)}
.appkiste .fritzifigur{position:absolute;right:352px;bottom:0;height:158px;z-index:3;
  transform:rotate(-2deg);filter:drop-shadow(0 14px 20px rgba(0,0,0,.6))}
.appkiste .zettel{position:absolute;right:22px;bottom:18px;z-index:4;max-width:190px;
  background:#F5E9D2;color:#4A3320;border-radius:4px 14px 12px 4px;padding:10px 13px;
  font-family:Caveat,cursive;font-size:17px;line-height:1.25;transform:rotate(-2deg);
  box-shadow:0 10px 22px rgba(0,0,0,.5)}
@media(max-width:1080px){.appkiste .fritzifigur{display:none}}
@media(max-width:820px){
  .appkiste .appinnen{grid-template-columns:1fr;padding:26px 22px}
  .appkiste .appschau,.appkiste .tel,.appkiste .zettel{display:none}
}

/* ── Regions-Hero und Kacheln ────────────────────────────────────────── */
.nachthed.klein{min-height:0}
.nachthed.klein .nachtinhalt{padding:clamp(64px,9vw,120px) 0 clamp(34px,5vw,60px)}
.regionshand{margin-top:18px;font-size:clamp(19px,2.2vw,24px);opacity:.95;
  text-shadow:0 8px 30px rgba(0,0,0,.8)}
.ort .schau{display:block;margin:-18px -18px 14px;border-radius:14px 14px 0 0;overflow:hidden}
.ort .schau img{width:100%;height:128px;object-fit:cover;display:block;
  filter:saturate(.92) brightness(.92);transition:transform .35s}
.ort.erzaehlt:hover .schau img{transform:scale(1.04)}

/* ── Der Mitmach-Block: warme Pinnwand statt kalter Karte ────────────── */
.mitmach{padding:30px 0 0}
.mitmachkarte{position:relative;display:grid;grid-template-columns:1.5fr auto;gap:26px;
  align-items:center;border:1px dashed rgba(239,181,75,.45);border-radius:20px;
  padding:32px 34px;overflow:hidden;
  background:radial-gradient(130% 170% at 90% 0%,#2A1712 0%,#241618 50%,#1E1114 100%)}
.mitmachkarte::after{content:"";position:absolute;right:-60px;top:-80px;width:380px;height:300px;
  border-radius:50%;background:radial-gradient(closest-side,rgba(239,181,75,.16),transparent 70%);
  pointer-events:none}
.mitmachkarte h2{font-size:clamp(21px,2.5vw,26px);margin-top:8px}
.mitmachkarte .an{max-width:56ch}
.mitmachwege{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;margin-top:18px}
.mitweg{display:block;border:1px solid var(--linie);border-radius:14px;padding:14px 18px;
  text-decoration:none;color:var(--txt);background:rgba(20,9,11,.5);
  transition:border-color .2s,background .2s}
.mitweg:hover{border-color:var(--gold);background:#22151A}
.mitweg b{display:block;color:var(--gold)}
.mitweg span{color:var(--leise);font-size:14px}
.mitmachkarte .fein{margin-top:16px}
.mitmachkarte .fein a{color:var(--gold)}
.pinnwand{position:relative;width:250px;height:300px;flex:none}
.polaroid{position:absolute;margin:0;background:#F5E9D2;padding:9px 9px 30px;
  border-radius:3px;box-shadow:0 16px 30px rgba(0,0,0,.55)}
.polaroid::before{content:"";position:absolute;top:-10px;left:50%;width:64px;height:20px;
  margin-left:-32px;background:rgba(239,181,75,.35);transform:rotate(-2deg);
  border-radius:2px}
.polaroid img{width:170px;height:150px;object-fit:cover;display:block}
.polaroid .hand{display:block;text-align:center;margin-top:6px;color:#4A3320;font-size:17px}
.polaroid.p1{left:0;top:6px;transform:rotate(-5deg)}
.polaroid.p2{left:56px;top:96px;transform:rotate(4deg)}
.polaroid.p2 img{filter:saturate(.35) opacity(.55)}
@media(max-width:900px){
  .mitmachkarte{grid-template-columns:1fr}
  .pinnwand{display:none}
}

/* ── Das Wecker-Band ─────────────────────────────────────────────────── */
.weckerband{padding:30px 0 0}
.weckerkarte{position:relative;display:grid;grid-template-columns:1.4fr 1fr;gap:26px;
  align-items:center;border:1px solid #4A2F1B;border-radius:20px;padding:32px 34px;
  overflow:hidden;
  background:radial-gradient(120% 200% at 10% 0%,#26150F 0%,var(--flaeche) 55%,var(--grund) 100%)}
.weckerkarte::before{content:"";position:absolute;left:-70px;bottom:-110px;width:340px;height:280px;
  border-radius:50%;background:radial-gradient(closest-side,rgba(239,181,75,.2),transparent 70%);
  pointer-events:none}
.weckerkarte h2{font-size:clamp(21px,2.5vw,26px);margin-top:8px}
.weckerkarte .an{max-width:48ch}
.weckerzeile{display:flex;gap:10px;flex-wrap:wrap}
.weckerfeld{flex:1 1 210px;background:#14090B;border:1px solid #4A2F1B;border-radius:12px;
  padding:13px 16px;color:var(--txt);font-size:15px}
.weckerfeld:focus{outline:none;border-color:var(--gold)}
.weckerknopf{border:0;border-radius:999px;padding:13px 24px;font-weight:800;font-size:15px;
  color:#2A1200;background:linear-gradient(100deg,#E0472F,#EFB54B);cursor:pointer}
.weckerknopf:disabled{opacity:.7;cursor:default}
.weckerwort{margin-top:10px;font-size:14px;color:var(--leise);min-height:20px}
.weckerwort.schlecht{color:#E0765A}
@media(max-width:820px){.weckerkarte{grid-template-columns:1fr;padding:26px 22px}}


/* ── Der Textabschnitt der Regionsseite ──────────────────────────────── */
.regtext{padding:34px 0 6px}
.regtextspalte{max-width:760px}
.regtext h2{font-size:clamp(20px,2.4vw,26px);line-height:1.25}
.regtext p{color:var(--leise);margin-top:14px;line-height:1.65;font-size:15.5px}
.regtext a{color:var(--gold);text-decoration:none}
.regtext a:hover{text-decoration:underline}

/* ── Der SEO-Fuss mit Spalten ────────────────────────────────────────── */
.spaltenfuss .spalten{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:8px}
.spaltenfuss .fk{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
  color:var(--gold);margin-bottom:12px}
.spaltenfuss .spalten a{display:block;margin-top:8px;line-height:1.45}
.spaltenfuss .soz{display:flex;gap:12px}
.spaltenfuss .soz a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--linie);color:var(--leise)}
.spaltenfuss .soz a:hover{color:var(--gold);border-color:var(--gold)}
.spaltenfuss .sozsatz{color:var(--leise);font-size:13px;margin-top:12px;max-width:22ch}
.spaltenfuss .fusszeile{border-top:1px solid var(--linie);padding-top:18px;margin-top:30px}
@media(max-width:820px){.spaltenfuss .spalten{grid-template-columns:1fr 1fr;gap:20px}}
@media(max-width:460px){.spaltenfuss .spalten{grid-template-columns:1fr}}

/* ── Content-Bausteine der erzaehlten Ortsseiten ─────────────────────── */
.collage{padding:30px 0 0}
.collage figure{margin:0}
.collage img{width:100%;border-radius:18px;border:1px solid #3a2418;display:block}
.collage figcaption{color:var(--leise);font-size:13.5px;line-height:1.55;margin-top:9px;
  max-width:88ch}
.amweg{list-style:none;margin:14px 0 4px;padding:0;display:grid;gap:9px}
.amweg li{border-left:2px solid rgba(239,181,75,.5);padding:2px 0 2px 14px}
.amweg b{color:var(--txt)}
.amweg span{display:block;color:var(--leise);font-size:14.5px}
.eindruecke{margin-top:30px}
.eindruecke .einordnung{color:var(--leise);font-size:14px;margin:4px 0 14px}
.egitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.egitter figure{margin:0}
.egitter img{width:100%;border-radius:14px;border:1px solid #3a2418;display:block}
.egitter figcaption{color:var(--leise);font-size:13px;margin-top:6px}
.ortskarte{margin-top:30px}
.ortskarte figure{margin:10px 0 0}
.ortskarte img{width:100%;border-radius:14px;border:1px solid #3a2418;display:block}
.ortskarte figcaption{color:var(--leise);font-size:13px;margin-top:6px}
.teilen{display:flex;gap:10px;align-items:center;margin-top:26px;flex-wrap:wrap}
.teilen .tk{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;
  color:var(--leise)}
.teilen a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--linie);color:#B9A88F}
.teilen a:hover{color:var(--gold);border-color:var(--gold)}