/*
Theme Name: sushimushi
Description: Reiseblog-Theme für sushimushi.ch – dunkel, fotografisch, mit Karten aller Reiseorte.
Author: Jens Riedweg
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: sushimushi
*/

@font-face{font-family:Fraunces;src:url(assets/schrift/fraunces.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Manrope;src:url(assets/schrift/manrope.woff2) format("woff2");font-weight:200 800;font-display:swap}

:root{
	--bg:#0f1013;--fl:#17191e;--li:#272a31;--tx:#ecebe6;--mu:#a3a29c;--ak:#2dd4bf;--ak-tx:#04221e;
	--r:18px;--serif:Fraunces,Georgia,serif;--sans:Manrope,system-ui,sans-serif;
	--ak-foto:#2dd4bf;	--held-ende:var(--bg);--karte-filter:invert(1) hue-rotate(180deg) brightness(.82) contrast(.9) saturate(.35);
	color-scheme:dark;
}
/* Hell: nach Systemeinstellung oder per Knopf (data-theme setzt der Kopf vor dem ersten Zeichnen) */
:root[data-theme="hell"]{
	--bg:#f5f1e8;--fl:#fffcf6;--li:#e2dccf;--tx:#17181c;--mu:#5c5a53;--ak:#0f766e;--ak-tx:#fff;
	--held-mitte:#0f1013a6;--held-ende:#0f1013bf;--karte-filter:saturate(.7) contrast(.95);
	color-scheme:light;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dunkel"]){
	--bg:#f5f1e8;--fl:#fffcf6;--li:#e2dccf;--tx:#17181c;--mu:#5c5a53;--ak:#0f766e;--ak-tx:#fff;
	--held-mitte:#0f1013a6;--held-ende:#0f1013bf;--karte-filter:saturate(.7) contrast(.95);
	color-scheme:light;
}}
/* Auf Fotos bleibt es immer dunkel */
.held,.kachel{--tx:#ecebe6;--ak:var(--ak-foto);--ak-tx:#04221e;color:var(--tx)}
/* Kachel ohne geladenes Bild: dunkle Fläche, sonst steht die weisse Zahl im Hellmodus auf Creme */
.kachel{--fl:#17191e;--li:#272a31}
.kopf.ueber-bild .marke,.kopf.ueber-bild .menu-knopf,.kopf.ueber-bild .hell-knopf{color:#ecebe6}
@media (min-width:821px){.kopf.ueber-bild .menu>li>a{color:#ecebe6}.kopf.ueber-bild .menu>li>a:hover{color:var(--ak-foto)}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ak);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.08;margin:0;letter-spacing:-.01em;text-wrap:balance}
.w{width:min(1240px,100% - 40px);margin-inline:auto}
.sprung{position:absolute;left:-999px;top:10px;z-index:9999;background:var(--ak);color:var(--ak-tx);padding:10px 16px;border-radius:8px}
.sprung:focus{left:10px}
.flagge{display:inline-block;width:20px;height:15px;border-radius:3px;object-fit:cover;vertical-align:-2px;margin-right:7px;box-shadow:0 0 0 1px #0003}

/* Kopf */
.kopf{position:relative;z-index:50;padding:20px 0}
.kopf.ueber-bild{position:absolute;inset:0 0 auto;background:linear-gradient(#0009,#0000)}
.kopf .w{display:flex;align-items:center;gap:12px}
.marke{font:700 26px/1 var(--serif);letter-spacing:-.02em;margin-right:auto}
.kopf .menu{display:flex;gap:6px;list-style:none;margin:0;padding:0;font-weight:600;font-size:15px}
.kopf .menu>li{position:relative}
.kopf .menu a{display:block;padding:8px 12px;border-radius:999px}
.kopf .menu a:hover,.kopf .current-menu-item>a{color:var(--ak)}
.kopf .sub-menu{position:absolute;top:100%;left:0;min-width:200px;list-style:none;margin:0;padding:8px;background:var(--fl);border:1px solid var(--li);border-radius:14px;box-shadow:0 20px 40px #0008;opacity:0;visibility:hidden;transform:translateY(6px);transition:.2s}
.kopf li:hover>.sub-menu,.kopf li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.kopf .sub-menu a{border-radius:8px;font-weight:500}
.menu-knopf{display:none;background:none;border:1px solid color-mix(in srgb,currentColor 30%,transparent);border-radius:999px;padding:8px 16px;cursor:pointer}

/* Grosses Bild oben (Startseite und Beitrag) */
.held{position:relative;min-height:88vh;display:grid;align-items:end;overflow:hidden;isolation:isolate}
.held>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.held::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0f101333 0%,#0f101300 35%,var(--held-mitte,#0f1013d9) 80%,var(--held-ende))}
.held .w{padding:140px 0 64px}
.vorzeile{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--ak);margin:0}
.vorzeile a:hover{text-decoration:underline}
.held h1,.held .h1{font-size:clamp(40px,6.4vw,92px);max-width:15ch;margin:14px 0 18px;text-shadow:0 1px 28px #0007}
/* Slider: Folien liegen übereinander und blenden über */
.slider::after{content:none}
.folie{grid-area:1/1;position:relative;min-height:inherit;display:grid;align-items:end;isolation:isolate;opacity:0;visibility:hidden;transition:opacity .9s,visibility 0s .9s}
.folie.an{opacity:1;visibility:visible;transition:opacity .9s}
.folie>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.folie::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0f101333 0%,#0f101300 35%,var(--held-mitte,#0f1013d9) 80%,var(--held-ende))}
.slider-steuer{grid-area:1/1;align-self:end;z-index:2;display:flex;justify-content:flex-end;align-items:center;gap:10px;padding-bottom:64px;pointer-events:none}
.slider-steuer button{pointer-events:auto;width:44px;height:44px;border-radius:50%;border:1px solid #fff5;background:#0f101399;color:#fff;font-size:22px;cursor:pointer;backdrop-filter:blur(6px)}
.slider-steuer button:hover{border-color:var(--ak);color:var(--ak)}
.slider-steuer .punkte{display:flex;gap:2px;margin:0 6px}
.slider-steuer .punkte button{width:24px;height:44px;border:0;background:none;backdrop-filter:none;position:relative}
.punkte button::before{content:"";position:absolute;inset:18px 8px;border-radius:4px;background:#fff7;transition:background .3s,inset .3s}
.punkte button[aria-current]::before{background:var(--ak);inset:18px 2px}
.slider-steuer .pause{font-size:13px}.pause::before{content:"❚❚"}.pause[aria-pressed="true"]::before{content:"▶"}
.held p{max-width:58ch;color:#dcdbd5;margin:0 0 26px}
.held-beitrag{min-height:72vh}.held-beitrag h1{font-size:clamp(36px,5.4vw,76px);max-width:18ch}
.held .meta{color:#cfcec8;margin:0}.held .meta a{text-decoration:underline;text-underline-offset:3px}
.knopf{display:inline-flex;align-items:center;gap:10px;background:var(--ak);color:var(--ak-tx);font-weight:700;padding:13px 22px;border-radius:999px;transition:transform .2s}
.knopf:hover{transform:translateY(-2px)}

/* Band mit Hochformat-Kacheln */
.band-rahmen{position:relative;margin-top:-34px;z-index:3}
.band{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(220px,22vw,280px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(20px,(100vw - 1240px)/2);padding:6px max(20px,(100vw - 1240px)/2) 18px;scrollbar-width:none}
.band::-webkit-scrollbar{display:none}
.kachel{scroll-snap-align:start;position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;background:var(--fl)}
.kachel>img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.kachel:hover>img{transform:scale(1.05)}
.kachel .info{position:absolute;inset:auto 0 0;padding:44px 18px 18px;background:linear-gradient(0deg,#000d,#0000);display:grid;gap:4px}
.kachel strong{font:700 20px/1.15 var(--serif)}.kachel small{color:#d4d3cd;font-size:13px}
.kachel .nr{position:absolute;top:12px;left:16px;font:700 36px/1 var(--serif);color:#fff;text-shadow:0 2px 14px #0009}
.band-knoepfe{display:flex;justify-content:flex-end;gap:10px}
.band-knoepfe button{width:44px;height:44px;border-radius:50%;border:1px solid var(--li);background:var(--fl);font-size:22px;cursor:pointer}
.band-knoepfe button:hover{border-color:var(--ak);color:var(--ak)}

/* Abschnitte */
.abschnitt{padding:70px 0}
.titel{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.titel h2{font-size:clamp(30px,3.6vw,46px)}.titel p{color:var(--mu);margin:6px 0 0;width:100%}
.titel div{flex:1}
.mehr{font-weight:700;color:var(--ak)}.mehr:hover{text-decoration:underline}

.laender{display:flex;gap:26px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none}
.land{flex:0 0 auto;text-align:center;width:124px}
.land .rund{position:relative;display:block;width:124px;height:124px}
.land .rund>img:first-child{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid var(--li);transition:border-color .3s,transform .3s}
.land:hover .rund>img:first-child{border-color:var(--ak);transform:scale(1.04)}
.land .flagge{position:absolute;right:4px;bottom:6px;width:30px;height:22px;margin:0;box-shadow:0 0 0 2px var(--bg)}
.land b{display:block;margin-top:12px}.land small{color:var(--mu)}
/* Der Scroller schneidet alles ab, was über den Rand ragt – Fokusring nach innen */
.land:focus-visible{outline-offset:-2px}

/* Karten */
.karte{height:560px;border-radius:var(--r);overflow:hidden;border:1px solid var(--li);background:var(--fl)}
.karte-beitrag{height:420px}.karte-liste{height:380px;margin-top:10px}
.karte-voll{height:calc(100vh - 200px);min-height:420px;border-radius:0;border-inline:0}
.leaflet-container{font-family:var(--sans)}
.nacht{filter:var(--karte-filter)}
.leaflet-marker-icon.ziel{display:grid;place-items:center}
.punkt{width:14px;height:14px;border-radius:50%;background:var(--ak);border:3px solid #fff;box-shadow:0 0 0 6px #2dd4bf33}
.punkt.hier{width:20px;height:20px;box-shadow:0 0 0 10px #2dd4bf40}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--fl);color:var(--tx);border-radius:14px;box-shadow:0 12px 30px #000a}
.leaflet-popup-content{margin:0;width:240px!important}
.leaflet-container a.leaflet-popup-close-button{color:#fff;text-shadow:0 1px 4px #000}
.pop img{border-radius:14px 14px 0 0;aspect-ratio:16/10;object-fit:cover;width:100%}
.pop span{display:block;padding:12px 14px}.pop b{font:700 17px/1.2 var(--serif);display:block}.pop small{color:var(--mu)}
.leaflet-bar a{background:var(--fl)!important;color:var(--tx)!important;border-color:var(--li)!important}
.leaflet-control-attribution{background:color-mix(in srgb,var(--bg) 80%,transparent)!important;color:var(--mu)!important}.leaflet-control-attribution a{color:var(--tx)!important}

/* Raster */
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:34px 24px}
.eintrag-bild{display:block;border-radius:var(--r);overflow:hidden;background:var(--fl)}
.eintrag-bild>img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .6s}
.eintrag:hover .eintrag-bild img{transform:scale(1.04)}
.eintrag .meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin:14px 0 6px;font-size:13px;color:var(--mu)}
.eintrag .meta a{color:var(--ak);font-weight:700}
.eintrag h3{font-size:23px;margin-bottom:8px}.eintrag h3 a:hover{color:var(--ak)}
.eintrag p{color:var(--mu);margin:0;font-size:15px}

.wir{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.person{background:var(--fl);border:1px solid var(--li);border-radius:var(--r);padding:24px;display:flex;gap:18px;align-items:center;transition:border-color .3s}
.person:hover{border-color:var(--ak)}
.kopfbild{flex:0 0 60px;height:60px;border-radius:50%;background:var(--li);display:grid;place-items:center;font:700 26px var(--serif);color:var(--ak)}
.person b{display:block;font-size:18px}.person small{color:var(--mu)}

/* Listen-Kopf */
.kopf-liste{padding:60px 0 20px}
.kopf-liste h1{font-size:clamp(38px,5vw,68px);margin:10px 0 8px}
.kopf-liste h1 .flagge{width:44px;height:33px;margin-right:16px;vertical-align:4px;border-radius:5px}
.kopf-liste>p{color:var(--mu);margin:0}
.kopf-liste .beschreibung{max-width:65ch;color:var(--mu)}
.kopf-beitrag{padding:60px 0 10px}.kopf-beitrag h1{font-size:clamp(36px,5vw,66px);margin:12px 0}

/* Lesetext */
.text{width:min(720px,100% - 40px);margin:56px auto 0;font-size:19px;line-height:1.75;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:8 4 3}
.text>*{margin-block:0 1.1em}
.text h2,.text h3{margin-top:1.6em;font-size:1.6em}.text h3{font-size:1.3em}
.text a{color:var(--ak);text-decoration:underline;text-underline-offset:3px}
.text img{border-radius:10px}
.text .alignnone,.text .aligncenter,.text .wp-caption{width:auto!important;margin-inline:auto}
.text .alignleft{float:left;margin:.3em 1.4em 1em 0;max-width:50%}
.text .alignright{float:right;margin:.3em 0 1em 1.4em;max-width:50%}
.text .wp-caption-text,.text figcaption{font-size:14px;color:var(--mu);margin-top:8px;text-align:center}
.text blockquote{margin-inline:0;padding-left:22px;border-left:3px solid var(--ak);font-family:var(--serif);font-size:1.15em}
.text::after{content:"";display:table;clear:both}
.galerie,.video,.text .wp-block-embed,.text iframe{width:min(1100px,100vw - 40px);margin-left:50%;transform:translateX(-50%)}
.galerie{display:flex;flex-wrap:wrap;gap:8px;margin-block:1.6em}
.galerie::after{content:"";flex-grow:999}
.galerie figure{margin:0;flex-grow:calc(var(--s)*100);flex-basis:calc(var(--s)*200px);position:relative}
.galerie a{display:block;border-radius:8px;overflow:hidden;background:var(--fl);cursor:zoom-in}
.galerie img{width:100%;height:auto;border-radius:0;transition:transform .5s}
.galerie a:hover img{transform:scale(1.03)}
.galerie figcaption{position:absolute;inset:auto 0 0;margin:0;padding:20px 10px 8px;background:linear-gradient(0deg,#000b,#0000);color:#fff;font-size:13px;text-align:left;border-radius:0 0 8px 8px;pointer-events:none}
.video{aspect-ratio:16/9;max-width:1000px}.video iframe{width:100%;height:100%;border:0;border-radius:12px;margin:0;transform:none}
.text iframe{aspect-ratio:16/9;height:auto;border:0;border-radius:12px;max-width:1000px}
.beitrag-fuss{margin-top:10px}
.marken{display:flex;flex-wrap:wrap;gap:8px}
.marken a{font-size:14px;font-weight:600;text-decoration:none;color:var(--tx);border:1px solid var(--li);padding:5px 14px;border-radius:999px}
.marken a:hover{border-color:var(--ak);color:var(--ak)}

/* Weiter auf der Reise */
.reise{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:20px 0}
.reise a{display:flex;align-items:center;gap:16px;background:var(--fl);border:1px solid var(--li);border-radius:var(--r);padding:14px;transition:border-color .3s}
.reise a:hover{border-color:var(--ak)}
.reise img{width:72px;height:72px;border-radius:12px;object-fit:cover}
.reise small{display:block;color:var(--ak);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.reise b{font:700 18px/1.2 var(--serif)}
.reise-danach{flex-direction:row-reverse;text-align:right}

/* Seitenzahlen, Suche, Kommentare */
.seiten .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:50px}
.seiten .page-numbers{min-width:44px;height:44px;display:grid;place-items:center;padding:0 14px;border-radius:999px;border:1px solid var(--li);font-weight:600}
.seiten .current,.seiten a:hover{background:var(--ak);color:var(--ak-tx);border-color:var(--ak)}
.search-form{display:flex;gap:8px;max-width:480px;margin-top:20px}
.search-form label{flex:1}
.search-field,.kommentare input,.kommentare textarea{width:100%;background:var(--fl);border:1px solid var(--li);border-radius:12px;color:var(--tx);padding:12px 14px;font:inherit}
.search-submit,.kommentare .submit{background:var(--ak);color:var(--ak-tx);border:0;border-radius:999px;padding:12px 22px;font-weight:700;cursor:pointer}
.kommentare{margin-top:40px}.kommentare ol{list-style:none;padding:0}.kommentare .comment-body{border-top:1px solid var(--li);padding:18px 0}

/* Fuss */
.fuss{border-top:1px solid var(--li);padding:50px 0 40px;margin-top:40px;color:var(--mu);font-size:15px}
.fuss .w{display:grid;grid-template-columns:1fr 2fr;gap:30px}
.fuss nav{display:flex;flex-wrap:wrap;gap:10px 22px;align-content:start}
.fuss nav a:hover,.fuss .klein a:hover{color:var(--tx)}
.fuss .klein{grid-column:1/-1;font-size:13px;margin:0}

/* Leuchtkasten */
.gross{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;overflow:hidden}
.gross::backdrop{background:#000e}
.gross img{max-width:92vw;max-height:90vh;margin:auto;position:absolute;inset:0;border-radius:8px}
.gross button{position:absolute;background:#0008;border:1px solid #fff3;color:#fff;width:52px;height:52px;border-radius:50%;font-size:28px;cursor:pointer;z-index:2}
.gross .zu{top:16px;right:16px}.gross .vor{left:16px;top:50%;translate:0 -50%}.gross .nach{right:16px;top:50%;translate:0 -50%}

@media (max-width:820px){
	.menu-knopf{display:block}
	.kopf nav{display:none;position:absolute;inset:100% 0 auto;background:var(--fl);border-block:1px solid var(--li);padding:10px 20px 20px;max-height:80vh;overflow:auto}
	.kopf.offen nav{display:block}
	.kopf .menu{flex-direction:column}
	.kopf .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:none;padding:0 0 0 14px;columns:2}
	.held{min-height:80vh}.held .w{padding-bottom:50px}
	.slider .folie .w{padding-bottom:120px}.slider-steuer{padding-bottom:56px;justify-content:flex-start}
	.karte{height:420px}
	.reise{grid-template-columns:1fr}
	.fuss .w{grid-template-columns:1fr}
	.text{font-size:18px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.hell-knopf{width:40px;height:40px;border-radius:50%;background:none;border:1px solid color-mix(in srgb,currentColor 30%,transparent);cursor:pointer;font-size:18px;line-height:1;flex:0 0 auto}
.hell-knopf:hover{border-color:var(--ak)}

/* Skeleton: Bildflächen schimmern, bis ihr Bild geladen ist (sushi.js setzt .warte) */
.warte{background:linear-gradient(100deg,var(--fl) 30%,var(--li) 50%,var(--fl) 70%) 0 0/300% 100%;animation:schimmer 1.4s linear infinite}
.warte>img{opacity:0}
.kachel>img,.eintrag-bild>img,.galerie img,.rund>img,.reise img{transition:opacity .5s,transform .6s}
@keyframes schimmer{to{background-position:-150% 0}}
.rund.warte{border-radius:50%}

/* Nur für Screenreader */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Filter: Knopf klappt die Leiste auf */
.filter-knopf{margin-top:22px;display:inline-flex;align-items:center;gap:8px;background:var(--fl);border:1px solid var(--li);border-radius:999px;padding:9px 18px;font-weight:700;font-size:14px;cursor:pointer}
.filter-knopf::after{content:"▾";transition:transform .2s}.filter-knopf[aria-expanded="true"]::after{transform:rotate(180deg)}
.filter-knopf:hover{border-color:var(--ak)}
.filter{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.filter[hidden]{display:none}
.filter a{display:inline-flex;align-items:center;font-size:14px;font-weight:600;border:1px solid var(--li);padding:6px 14px;border-radius:999px}
.filter a:hover{border-color:var(--ak);color:var(--ak)}
.filter a[aria-current]{background:var(--ak);border-color:var(--ak);color:var(--ak-tx)}

/* Weitere laden statt Zahlenleiste (ohne JS bleibt die Leiste) */
.mehr-laden{display:block;margin:50px auto 0;background:var(--ak);color:var(--ak-tx);border:0;border-radius:999px;padding:14px 28px;font-weight:700;cursor:pointer}
.mehr-laden[disabled]{opacity:.6;cursor:wait}
.js-mehr .seiten{display:none}
/* Eingeschobene Bilder im Text: Paar füllt die Breite, Einzelbild so breit wie der Text */
.galerie.einschub::after{content:none}
.galerie.einschub:has(figure:only-child){width:min(720px,100vw - 40px)}

/* Animationen: nur opacity und transform, bei reduzierter Bewegung aus (Regel weiter oben) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
.vorher{opacity:0;transform:translateY(26px)}
.zeigt{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
@keyframes auf{from{opacity:0;transform:translateY(-8px)}}
@keyframes hoch{from{opacity:0;transform:translateY(22px)}}
.kopf.offen nav,.filter:not([hidden]){animation:auf .25s ease-out}
.gross[open]{animation:auf .25s ease-out}.gross[open]::backdrop{animation:auf .25s}
.slider.lebt .folie.an .w>*{animation:hoch .8s cubic-bezier(.2,.7,.2,1) both}
.slider.lebt .folie.an .w>:nth-child(2){animation-delay:.08s}.slider.lebt .folie.an .w>:nth-child(3){animation-delay:.16s}.slider.lebt .folie.an .w>:nth-child(4){animation-delay:.24s}
.knopf:active,.mehr-laden:active,.filter-knopf:active,.slider-steuer button:active{transform:scale(.96)}
/* Bei krummem Pixelverhältnis (Zoom 125 %) zeigen sich sonst Nähte zwischen den Kacheln */
.leaflet-tile{outline:1px solid transparent}.leaflet-tile-container{will-change:transform}
/* Hinweis beim Mausrad über der Karte */
.karte{position:relative}.karte::after{content:attr(data-hinweis);position:absolute;inset:0;z-index:1000;display:grid;place-items:center;background:#0009;color:#fff;font-weight:700;opacity:0;pointer-events:none;transition:opacity .3s}
.karte.hinweis::after{opacity:1}

/* Alte Zwischentitel sind <p><b>…</b></p>: wie Titel setzen */
.text p:has(>b:only-child,>strong:only-child){font:700 1.35em/1.2 var(--serif);margin:1.9em 0 .45em;letter-spacing:-.01em}
/* Telefon: ruhigerer Rhythmus, kompakte Listen ab der zweiten Karte, keine Pfeile bei Touch */
@media (max-width:820px){
	.text{line-height:1.62}
	.held p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
	.abschnitt{padding:48px 0}.titel{margin-bottom:20px}
}
@media (max-width:560px){
	.raster{gap:20px}
	.eintrag:not(:first-child){display:grid;grid-template-columns:104px 1fr;column-gap:14px;align-content:start}
	.eintrag:not(:first-child) .eintrag-bild{grid-row:1/3;border-radius:12px}
	.eintrag:not(:first-child) .eintrag-bild>img{aspect-ratio:1}
	.eintrag:not(:first-child) .meta{margin:2px 0 4px}
	.eintrag:not(:first-child) h3{font-size:19px;margin:0}
	.eintrag:not(:first-child) p{display:none}
}
@media (pointer:coarse){.band-knoepfe{display:none}}

/* Mehrere Geschichten am selben Ort: Zahl im Punkt, Liste im Popup */
.punkt.viele{width:26px;height:26px;display:grid;place-items:center;font:800 12px/1 var(--sans);color:var(--ak-tx)}
.pop-liste{display:grid;gap:10px;padding:14px 16px;max-height:280px;overflow:auto}
.pop-liste>small{color:var(--mu);font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.pop-liste a{display:grid;gap:2px;font:700 16px/1.2 var(--serif)}.pop-liste a:hover{color:var(--ak)}
.pop-liste a small{font:400 13px/1.3 var(--sans);color:var(--mu)}

/* Leitspruch auf der Startseite */
.zitat{margin:90px auto 10px;max-width:880px;text-align:center}
.zitat blockquote{margin:0}
.zitat p{font:500 clamp(24px,3.2vw,40px)/1.3 var(--serif);letter-spacing:-.01em;text-wrap:balance;margin:0}
.zitat p::before{content:"«";color:var(--ak)}.zitat p::after{content:"»";color:var(--ak)}
@media (max-width:820px){.zitat{margin-top:60px}}