/* 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{font-weight:800;font-size:17px;letter-spacing:-.045em;line-height:1}
.logo .wort i{font-style:normal;color:var(--gold)}
.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)}
.gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,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}
.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)}