/* Länderflaggen auch unter Windows (Schrift enthält nur Flaggen; wird nur geladen, wenn eine Flagge auf der Seite steht). Twemoji, CC-BY 4.0 */
@font-face{font-family:"Twemoji Country Flags";src:url("fonts/TwemojiCountryFlags.woff2") format("woff2");unicode-range:U+1F1E6-1F1FF,U+1F3F4,U+E0062-E0063,U+E0065,U+E0067,U+E006C,U+E006E,U+E0073-E0074,U+E0077,U+E007F;font-display:swap}
/* Slow Roaders - öffentliches Design (aus der Platzhalterseite übernommen) */
:root{--bg:#2b2d30;--text:#f4f3ee;--muted:rgba(244,243,238,.62);--line:rgba(244,243,238,.14);--card:rgba(244,243,238,.05);--accent:#d9b46b;--accent-d:#b8934c}

/* ================= GRUNDWERTE der Einstellungen =================
   Eigene Werte bitte NICHT hier, sondern in assets/einstellungen.css eintragen (wird danach geladen und überschreibt diese).
   Die Regeln, die sie benutzen, stehen weiter unten. (S) = liest auch der Server bzw. die Vorschau im Editor mit. */
:root{
  /* --- Logo --- */
  --logo-breite:540px;          /* Breite des Logos auf der Startseite */
  --logo-flach:.6;              /* Straße samt SLOW: 1 = Original, kleiner = flacher */
  --schild:.8;                  /* Größe von Schildkröte und Claim im Logo: 1 = Original */
  --schild-abstand:0%;          /* Luft um Shelly in % der Logobreite, je zur Hälfte über und unter ihr (mehr = mehr Abstand, negativ = enger) */
  --logo-akzent:var(--accent);  /* Farbe von Straße und Schildkröte; currentColor = einfarbig wie die Schrift */

  /* --- Kopfzeile --- */
  --kopf-breite:80rem;           /* Höchstbreite der Kopfzeile (60rem = so breit wie der Inhalt) */
  --adm-abstand:.7rem;           /* Abstand links/rechts der Linie vor den Verwaltungslinks (kleiner = passen eher neben das Menü) */

  /* --- Text --- */
  --text-breite:48rem;           /* (S) Breite der Textspalte in Beiträgen und Seiten */
  --text-schrift:1.25rem;        /* (S) Schriftgröße des Textes (mit der Breite zusammen ändern, sonst werden die Zeilen zu lang) */
  --listenpunkt:disc;            /* (S) Aufzählungszeichen: disc = Punkt, square = Quadrat, circle = Kreis, oder ein Zeichen wie "▸ " */

  /* --- Fotos --- */
  --foto-wechsel:.6;             /* (S) Wie viel Text neben einem Foto stehen muss, bevor das nächste die Seite wechselt (1 = ganz gefüllt, kleiner = früher) */
  --unterschrift-ausrichtung:center; /* (S) Bildunterschriften: center = mittig, left = linksbündig */

  /* --- Kacheln in der Übersicht --- */
  --kachel-format:3/2;            /* Seitenverhältnis des Titelbilds (Breite/Höhe) */
  --kachel-fokus:50% 35%;       /* Bildausschnitt ohne eigenen Fokuspunkt (waagerecht senkrecht; 0% = links/oben) */
  --kachel-zeilen:6;              /* Zeilen Kurztext mit Titelbild */
  --kachel-zeilen-ohne:13;        /* Zeilen Kurztext ohne Titelbild */

  /* --- Zwischenüberschrift ### mit Linie (nur in Beiträgen) --- */
  --zwischen-linie:1px solid var(--line); /* (S) Aussehen der Linie, z. B. 2px solid var(--accent); none = keine Linie */
  --zwischen-oben:.5em;            /* Abstand vom vorigen Text zur Linie */
  --zwischen-abstand:1.5em;        /* (S) Abstand von der Linie zur Überschrift */

  /* --- Kommentare und Tipps im Text --- */
  --kommentar-farbe:var(--accent); /* Linie und Kopf von [kommentar:…] */
  --kommentar-hg:rgba(217,180,107,.08); /* Hintergrund; transparent = kein Kasten */
  --tipp-farbe:#8cc4a6;          /* (S) Linie und Kopf von [tipp] */
  --tipp-hg:rgba(140,196,166,.09);  /* (S) Hintergrund; transparent = kein Kasten */

  /* --- Glossar und Suche --- */
  --glossar-linie:var(--accent);   /* (S) gepunktete Linie unter Glossarbegriffen */
  --treffer-hg:rgba(217,180,107,.35); /* Hervorhebung von Suchwörtern */

  /* --- Pfeile ⇒ in Titeln --- */
  --pfeil-farbe:currentColor;       /* currentColor = wie der Titel, var(--accent) = gold */
  --pfeil-groesse:1.6em;          /* Länge des Pfeils (Höhe folgt, Zeilenabstand bleibt) */
  --strecke-text:"Etappe ";       /* steht vor der Tagesstrecke unter dem Titel, z. B. "Tagesstrecke " oder "🚐 " (Leerzeichen am Ende!) */
  --symbol-groesse:2.3em;         /* Höhe der eigenen Symbole statt 🙋‍♂️/🙋‍♀️ (Zeilenabstand bleibt) */
  --symbol-wiederholen:none;      /* none = Symbol nur, wenn der Schreiber wechselt; inline-block = an jeder Überschrift */
}
/* ================= Ende der Einstellungen ================= */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background-color:var(--bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");color:var(--text);font-family:"Twemoji Country Flags",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.65;font-size:1.0625rem;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--accent);text-underline-offset:.18em}
a:hover{color:#f0d79c}
img{max-width:100%;height:auto;display:block}
.wrap{width:100%;max-width:60rem;margin:0 auto;padding:0 1.1rem}
.narrow{max-width:calc(var(--text-breite,41.8rem) + 2.2rem)}
header.site{border-bottom:1px solid var(--line)}
/* Kopfzeile: eigene Höchstbreite (--kopf-breite, oben bei den Einstellungen), damit Menü und Verwaltungslinks auf großen Bildschirmen nebeneinander passen */
header.site .wrap{max-width:var(--kopf-breite,60rem);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.8rem;padding-bottom:.8rem;flex-wrap:wrap}
header.site .brand{display:block;width:108px;color:var(--text);flex:none}
header.site .brand .sr-scene{display:block}
nav.main{display:flex;gap:.2rem 0;flex-wrap:wrap;align-items:center;justify-content:flex-end;flex:1 1 0;min-width:min-content;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase}
nav.main .menu{display:flex;gap:.2rem 1.3rem;flex-wrap:nowrap;flex:0 1 auto}
@media(max-width:36rem){nav.main{flex-basis:100%;justify-content:flex-start}nav.main .menu{flex-wrap:wrap}}
nav.main a{color:var(--text);text-decoration:none;opacity:.8;padding:.3rem 0;border-bottom:2px solid transparent}
nav.main a:hover,nav.main a.on{opacity:1;border-bottom-color:var(--accent)}
.hero{text-align:center;padding:2.4rem 1rem 2rem}
.sr-scene{display:block;color:var(--text)}.sr-logo svg{display:block;width:100%;height:auto;overflow:visible}.sr-logo .gold{fill:var(--logo-akzent,var(--accent))}
.sr-logo .strasse{transform-origin:50% 0;transform:scaleY(var(--logo-flach,.6));margin-bottom:calc((var(--logo-flach,.6) - 1) * 21.26%)}
.sr-logo .schild{width:calc(var(--schild,.8) * 98.09%);margin:calc(-4.68% + var(--schild-abstand,0%) / 2) auto 0}.sr-logo .claimzeile{margin-top:calc(var(--schild-abstand,0%) / 2)}
.hero .sr-scene{width:100%;max-width:var(--logo-breite,540px);margin:0 auto}
header.site .brand .schild{display:none}
.claim{margin:2rem 0 0;padding-left:.14em;font-size:clamp(1.15rem,3.2vw,1.6rem);letter-spacing:.14em;text-transform:uppercase;opacity:.9}
main{flex:1;padding:1.6rem 0 3rem}
h1,h2,h3{line-height:1.25;font-weight:600}
h1.titel{font-size:clamp(1.7rem,4.4vw,2.5rem);margin:.2rem 0 .4rem}
.meta{color:var(--muted);font-size:.9rem;letter-spacing:.04em}
.meta a{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1.3rem;margin:1.2rem 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--accent-d);transform:translateY(-2px)}
.card a.cover{display:block;aspect-ratio:var(--kachel-format,3/2);background:rgba(0,0,0,.25);overflow:hidden}
.card a.cover img{width:100%;height:100%;object-fit:cover;object-position:var(--fokus,var(--kachel-fokus,50% 35%))}
.card a.cover.ganz img{object-fit:contain;object-position:center}
.card .in{padding:.9rem 1rem 1.1rem}
.card h2{font-size:1.2rem;margin:.1rem 0 .4rem}
.card h2 a{color:var(--text);text-decoration:none}
.card p{margin:.4rem 0 0;color:var(--muted);font-size:.97rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--kachel-zeilen,6);line-clamp:var(--kachel-zeilen,6);overflow:hidden}
.card.ohnebild p{-webkit-line-clamp:var(--kachel-zeilen-ohne,13);line-clamp:var(--kachel-zeilen-ohne,13)}
.kat{display:inline-block;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);text-decoration:none}
.pager{display:flex;justify-content:space-between;margin:2rem 0 0;font-size:.95rem}
article .inhalt{font-size:var(--text-schrift,1.1rem)}
article .inhalt p{margin:0 0 1.15em}
article .inhalt h2{font-size:1.36em;margin:1.9em 0 .5em}
article .inhalt h3{font-size:1.09em;margin:1.6em 0 .4em}
article .inhalt ul{padding-left:1.3em;margin:0 0 1.15em}
article .inhalt blockquote{margin:1.3em 0;padding:.2em 1.1em;border-left:3px solid var(--accent-d);color:var(--muted);font-style:italic}
article .inhalt hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.inhalt .foto{margin:0 0 1em;width:var(--fw,33%);min-width:11rem}
.inhalt .foto.rechts{float:right;margin-left:1.4rem}
.inhalt .foto.links{float:left;margin-right:1.4rem}
.inhalt .foto.breit{float:none;clear:both;width:100%;margin:1.6em 0}
.inhalt .foto img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:6px}
.inhalt .foto figcaption,.inhalt .foto .cap{color:var(--muted);font-size:.85rem;padding:.4em .1rem 0;line-height:1.35}
@media(max-width:36rem){.inhalt .foto,.inhalt .foto.rechts,.inhalt .foto.links{float:none;width:100%;margin:1.4em 0}}
article .inhalt::after{content:"";display:block;clear:both}
article .inhalt h2,article .inhalt h3,article .inhalt hr,article .inhalt .galerie,article .inhalt .bilderreihe{clear:both}
.bilderreihe{display:flex;gap:.8rem;align-items:flex-start;margin:1.6em 0;clear:both}
.bilderreihe figure{margin:0;flex:var(--r,1.5) 1 0;min-width:0}
.bilderreihe img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:6px}
.bilderreihe figure.transp img,.inhalt .foto.transp img{border:0;border-radius:0}
/* [bilder:12,13:linie] – Figuren sitzen auf einer dunklen Linie vor einem warmen Artense-Grau-Schein, der an der Linie am stärksten ist und nach außen ausläuft (z. B. „Über uns“) */
.bilderreihe.auflinie{--schein:1.2;--glanz:177,165,139;--linie:#131415;--sitz:-3px;position:relative;isolation:isolate;align-items:flex-end;gap:1.6rem;padding:0 1rem;border-bottom:4px solid var(--linie)}
.bilderreihe.auflinie::before{content:"";position:absolute;z-index:-1;left:-30%;right:-30%;top:-90%;bottom:0;pointer-events:none;background:radial-gradient(ellipse 30% 95% at 34.375% 100%,rgba(var(--glanz),calc(var(--schein)*1)) 0,rgba(var(--glanz),calc(var(--schein)*.67)) 31%,rgba(var(--glanz),calc(var(--schein)*.2)) 62%,rgba(var(--glanz),calc(var(--schein)*.08)) 81%,rgba(var(--glanz),0) 100%),radial-gradient(ellipse 30% 95% at 65.625% 100%,rgba(var(--glanz),calc(var(--schein)*1)) 0,rgba(var(--glanz),calc(var(--schein)*.67)) 31%,rgba(var(--glanz),calc(var(--schein)*.2)) 62%,rgba(var(--glanz),calc(var(--schein)*.08)) 81%,rgba(var(--glanz),0) 100%)}
.bilderreihe.auflinie figure{margin-bottom:var(--sitz)}
.bilderreihe.auflinie img{border:0;border-radius:0}
.bilderreihe.auflinie figcaption{display:none}
main{overflow-x:clip}
.bilderreihe figcaption{color:var(--muted);font-size:.85rem;padding:.4em .1rem 0;line-height:1.35}
@media(max-width:36rem){.bilderreihe{flex-direction:column}.bilderreihe figure{flex:none;width:100%}}
@media(max-width:36rem){.bilderreihe.auflinie{flex-direction:row;gap:.8rem;padding:0 .3rem}.bilderreihe.auflinie figure{flex:var(--r,1.5) 1 0;width:auto}}
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.5rem;margin:1.6em 0}
.galerie a{display:block;aspect-ratio:1;overflow:hidden;border-radius:6px;background:rgba(0,0,0,.25)}
.galerie img{width:100%;height:100%;object-fit:cover;transition:transform .2s}
.galerie a:hover img{transform:scale(1.04)}
.cover-groß{margin:1.2rem -1.1rem}
.cover-groß img{width:100%;max-height:30rem;object-fit:cover;object-position:center top}
.kommentare{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.komm{padding:.9rem 0;border-bottom:1px solid var(--line)}
.komm .wer{font-weight:600}
.komm .wann{color:var(--muted);font-size:.85rem;margin-left:.6em}
.komm p{margin:.3em 0 0;white-space:pre-line}
form.fm label{display:block;margin:.9rem 0 .25rem;font-size:.9rem;color:var(--muted);letter-spacing:.04em}
form.fm input[type=text],form.fm input[type=email],form.fm textarea,.suche input{width:100%;padding:.65rem .75rem;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:4px;color:var(--text);font:inherit}
form.fm textarea{min-height:9rem;resize:vertical}
form.fm input:focus,form.fm textarea:focus,.suche input:focus{outline:2px solid var(--accent-d);outline-offset:1px}
.btn,button.btn{display:inline-block;margin-top:1rem;padding:.6rem 1.4rem;background:var(--accent);color:#2b2d30;border:0;border-radius:4px;font:inherit;font-weight:600;letter-spacing:.06em;cursor:pointer;text-decoration:none}
.btn:hover{background:#f0d79c;color:#2b2d30}
.hinweis{padding:.8rem 1rem;border:1px solid var(--accent-d);background:rgba(217,180,107,.1);border-radius:4px;margin:1rem 0}
.hinweis.fehler{border-color:#d46a6a;background:rgba(212,106,106,.1)}
.hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.suche{display:flex;gap:.5rem;margin:1rem 0}
.suche input{flex:1}
.suche .btn{margin:0}
footer.site{border-top:1px solid var(--line);padding:1.4rem 0 2rem;color:var(--muted);font-size:.9rem}
footer.site .wrap{display:flex;gap:.5rem 1.4rem;flex-wrap:wrap;justify-content:space-between}
footer.site a{color:var(--muted)}
footer.site nav{display:flex;gap:.4rem 1.2rem;flex-wrap:wrap}
#lb{position:fixed;inset:0;background:rgba(10,10,12,.93);display:none;align-items:center;justify-content:center;z-index:50;flex-direction:column}
#lb.on{display:flex}
#lb img{max-width:96vw;max-height:84vh;object-fit:contain}
#lb .cap{color:#ddd;margin-top:.7rem;font-size:.95rem;text-align:center;max-width:90vw;min-height:1.4em}
#lb button{position:absolute;background:none;border:0;color:#fff;font-size:2.4rem;cursor:pointer;padding:.5rem 1rem;opacity:.8}
#lb button:hover{opacity:1}
#lb .x{top:.3rem;right:.4rem}#lb .p{left:.2rem;top:45%}#lb .n{right:.2rem;top:45%}
@media print{header.site nav,footer.site,.kommentare,#lb{display:none}body{background:#fff;color:#000}}
[hidden]{display:none !important}

/* Verwaltungslinks: eigener Block rechts neben dem Menü. Wird es eng, stehen sie untereinander (Klasse „gestapelt“, setzt site.js);
   erst wenn auch das nicht passt, rutscht der Block unter das Menü (Klasse „eigenezeile“).
   --adm-abstand: Abstand links und rechts der senkrechten Linie (kleiner = die Links passen eher noch neben das Menü) */
nav.main .adm{flex:1 1 0;min-width:min-content;max-width:max-content;display:flex;flex-wrap:wrap;align-items:center;gap:0 1.3rem;margin-left:var(--adm-abstand);padding-left:var(--adm-abstand);border-left:1px solid var(--line)}
nav.main .adm.gestapelt{flex-direction:column;align-items:flex-start;gap:0}
nav.main .adm.gestapelt a{padding:.05rem 0;line-height:1.35}
nav.main .adm.eigenezeile{flex-basis:100%;max-width:none;margin-left:0;padding-left:0;border-left:0;justify-content:inherit}
nav.main .adm a{font-size:.8rem;letter-spacing:.04em;text-transform:none;color:var(--muted);opacity:1;white-space:nowrap}nav.main .adm a:hover{color:var(--accent)}nav.main .adm a.hot{color:var(--accent);font-weight:600}@media print{nav.main .adm{display:none}}
/* Entwürfe und geplante Beiträge (nur für Angemeldete sichtbar) */
.card.unfertig{border-style:dashed;border-color:var(--accent-d)}.card .stempel{display:inline-block;margin:0 0 .35rem;padding:.05rem .55rem;font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#2b2d30;background:var(--accent);border-radius:3px}
/* ganze Karte klickbar (Überschrift-Link spannt sich über die Karte); Kategorie bleibt eigener Link */
.card{position:relative}
.card h2 a::after{content:"";position:absolute;inset:0;z-index:1}
.card .kat{position:relative;z-index:2}
.card a.cover{position:relative}

nav.blaettern{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2.2rem 0 0;padding-top:1.2rem;border-top:1px solid var(--line)}
nav.blaettern a{display:flex;flex-direction:column;gap:.2rem;padding:.7rem .9rem;border:1px solid var(--line);border-radius:6px;text-decoration:none;color:var(--text);transition:border-color .15s}
nav.blaettern a:hover{border-color:var(--accent)}
nav.blaettern a span{color:var(--muted);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
nav.blaettern a strong{font-weight:600;line-height:1.3}
nav.blaettern .weiter{text-align:right;grid-column:2}
nav.blaettern .zurueck{grid-column:1}
@media(max-width:36rem){nav.blaettern{grid-template-columns:1fr}nav.blaettern .weiter,nav.blaettern .zurueck{grid-column:1;text-align:left}nav.blaettern>span{display:none}}

.serienhinweis{margin:.2rem 0 .1rem}
.serienhinweis a{font-size:.85rem;color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-d)}
.serienhinweis a:hover{border-bottom-color:var(--accent)}
h2.unterwegs{font-size:1.1rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:2rem 0 .8rem}
.serien{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:.8rem}
a.serienkarte{display:flex;flex-direction:column;gap:.25rem;padding:.9rem 1rem;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--text);text-decoration:none;transition:border-color .15s}
a.serienkarte:hover{border-color:var(--accent)}
a.serienkarte strong{font-size:1.1rem}
a.serienkarte span{color:var(--muted);font-size:.85rem}
a.serienkarte em{color:var(--muted);font-style:normal;font-size:.95rem;line-height:1.4}
.serienintro{margin:1.2rem 0 1.6rem;max-width:44rem}

/* Logo: Sitzhöhe der Straße (1 = hoch, kleiner = flacher) und Höhe des Schriftzugs ROADERS (1 = Original) */
/* Titelbild in den Kacheln: Seitenverhältnis (Breite/Höhe) und Ausschnitt für Beiträge ohne eigenen Fokuspunkt (waagerecht senkrecht, 0% = links/oben) */
/* Kurztext in den Kacheln: höchstens so viele Zeilen mit Titelbild bzw. ohne (ohne Bild mehr, damit die Kachel gefüllt ist) */

/* Startseite: Menü mittig unter dem großen Logo */
header.site.home .wrap{justify-content:center}
header.site.home nav.main{justify-content:center}

/* Interne Verweise, die Besucher noch nicht sehen (nur für Angemeldete markiert) */
a.intlink.unfertig{text-decoration-style:dashed;opacity:.75}
.intlink.fehlt{color:#e88}

/* Sichtbarer Kommentar im Text ([kommentar:Aufhänger|Name] …). Kasten aus: --kommentar-hg:transparent */
article .inhalt .kommentar{display:block;margin:1em 0 1.15em;padding:.55em 1em;border-left:3px solid var(--kommentar-farbe);background:var(--kommentar-hg);border-radius:0 4px 4px 0}
article .inhalt .kommentar strong.kopf{color:var(--kommentar-farbe)}
article .inhalt .kommentar.mehrteilig p{font-style:italic;margin:0 0 .6em}article .inhalt .kommentar.mehrteilig p:last-child{margin-bottom:0}article .inhalt .kommentar.mehrteilig strong.kopf{font-style:normal}

/* Unterschrift unter einer Fotogruppe ([bilder:…|Text], [galerie:…|Text]) */
article .inhalt .gruppen-unterschrift{clear:both;margin:-1.1em 0 1.6em;color:var(--muted);font-size:.85rem;line-height:1.35}

/* Wetter unter dem Datum eines Beitrags */
.meta .wetter{white-space:nowrap}

/* Textspalte von Beiträgen und Seiten: Breite des Textes und Schriftgröße (gemeinsam ändern, damit die Zeilen nicht zu lang werden).
   --foto-wechsel: wie viel Text neben einem Foto stehen muss, bevor das nächste Foto die Seite wechselt (1 = ganz gefüllt, kleiner = wechselt früher).
   Diese drei Werte liest auch der Server (Fotoanordnung) und die Vorschau im Editor. */
/* Einzelfoto mitten im Absatz (span statt figure) */
.inhalt .foto.im-text{display:block}.inhalt .foto .cap{display:block}
/* Mehrere Fotos ohne Text dazwischen: untereinander in einer Spalte am Rand (auch Hochformate) */
.inhalt .foto.rechts.stapel{clear:right}.inhalt .foto.links.stapel{clear:left}

/* Ausrichtung der Bildunterschriften (center = mittig, left = linksbündig) */
.inhalt .foto figcaption,.inhalt .foto .cap,.bilderreihe figcaption,.inhalt .gruppen-unterschrift{text-align:var(--unterschrift-ausrichtung,center)}

/* Listen: Aufzählungszeichen (disc = runder Punkt, square = Quadrat, circle = Kreis, oder ein Zeichen in Anführungszeichen, z. B. "▸ ") */
article .inhalt ul{list-style-type:var(--listenpunkt,disc)}
article .inhalt ol{padding-left:1.6em;margin:0 0 1.15em}
article .inhalt li{margin:.15em 0;padding-left:.2em}
article .inhalt li::marker{color:var(--accent);font-weight:600}
/* Zwischenüberschrift (###) in Beiträgen mit Linie darüber (nicht direkt nach einer Trennlinie und nicht ganz oben). Aus: --zwischen-linie:none
   --zwischen-oben: Abstand vom vorigen Text zur Linie, --zwischen-abstand: Abstand von der Linie zur Überschrift */
article .inhalt.beitrag h3{border-top:var(--zwischen-linie);padding-top:var(--zwischen-abstand);margin-top:var(--zwischen-oben)}
/* damit --zwischen-oben auch unter dem Absatzabstand wirkt: der Block direkt vor ### bringt keinen eigenen Abstand mit */
article .inhalt.beitrag>:is(p,ul,ol,blockquote,aside,div):has(+h3){margin-bottom:0}
article .inhalt.beitrag>h3:first-child,article .inhalt.beitrag hr+h3{border-top:0;padding-top:0;margin-top:1.6em}
article .inhalt.beitrag>h3:first-child{margin-top:0}
/* Tipp-Kasten ([tipp] Text). Kasten aus: --tipp-hg:transparent */
article .inhalt .tipp{display:block;margin:1em 0 1.15em;padding:.55em 1em .65em;border-left:3px solid var(--tipp-farbe);background:var(--tipp-hg);border-radius:0 4px 4px 0}
article .inhalt .tipp .kopf{display:block;color:var(--tipp-farbe);margin-bottom:.15em}
/* Glossar: markierte Begriffe und das Erklärfenster (Tooltip) */
.gl{border-bottom:1px dotted var(--glossar-linie);cursor:help;outline-offset:2px}
#gltip{position:absolute;z-index:60;max-width:min(22rem,calc(100vw - 1rem));background:#1e1f22;color:var(--text);border:1px solid var(--accent-d);border-radius:6px;padding:.55em .85em .6em;font-size:.92rem;line-height:1.45;box-shadow:0 8px 28px rgba(0,0,0,.5);display:none}
#gltip .glerkl{white-space:normal}#gltip .glerkl .glzeilen,dl.glossar .glzeilen{display:block;margin:0 0 .3em}#gltip ul,dl.glossar dd ul{margin:.2em 0 .3em;padding-left:1.2em}#gltip li,dl.glossar dd li{margin:.05em 0}#gltip li::marker,dl.glossar dd li::marker{color:var(--accent)}
#gltip.on{display:block}
#gltip .glkopf{display:block;color:var(--accent);margin-bottom:.15em}
#gltip a{display:block;margin-top:.35em;font-size:.82rem}
dl.glossar{margin:0}
dl.glossar .glbuchstabe{font-size:1.3em;color:var(--accent);border-bottom:1px solid var(--line);margin:1.6em 0 .5em;padding-bottom:.15em}
dl.glossar .glbuchstabe:first-child{margin-top:0}
dl.glossar dt{font-weight:600;margin-top:.9em;scroll-margin-top:1.5rem}
dl.glossar dd{margin:.15em 0 0}
dl.glossar dt:target,dl.glossar dt:target+dd{color:var(--accent)}
/* Suche: aufklappendes Feld unter der Kopfzeile, Trefferliste, Hervorhebung */
header.site .kopfsuche{flex-basis:100%;display:flex;gap:.5rem;justify-content:flex-end;margin:.2rem 0 .1rem}
header.site .kopfsuche[hidden]{display:none}
header.site .kopfsuche input{width:min(22rem,100%);padding:.5rem .7rem;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:4px;color:var(--text);font:inherit}
header.site .kopfsuche input:focus{outline:2px solid var(--accent-d);outline-offset:1px}
header.site .kopfsuche .btn{margin:0}
header.site.home .kopfsuche{justify-content:center}
.suchhilfe{color:var(--muted);font-size:.9rem;margin:-.3rem 0 1.2rem}
.suchzahl{color:var(--muted);margin:1.4rem 0 .6rem}
.suchhinweis{border-left:3px solid var(--accent-d);background:rgba(255,255,255,.03);padding:.5rem .8rem;margin:.6rem 0;border-radius:0 4px 4px 0}
.suchhinweis .art{display:inline-block;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:.3rem}
ol.trefferliste{list-style:none;margin:0;padding:0}
ol.trefferliste li{display:flex;gap:1rem;padding:1rem 0;border-top:1px solid var(--line)}
ol.trefferliste .bild{flex:none;width:7.5rem}
ol.trefferliste .bild img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:4px}
ol.trefferliste .in{min-width:0}
ol.trefferliste h2{font-size:1.15rem;margin:0 0 .2rem}
ol.trefferliste h2 a{color:var(--text);text-decoration:none}
ol.trefferliste h2 a:hover{color:var(--accent)}
ol.trefferliste .meta{color:var(--muted);font-size:.85rem;margin-bottom:.35rem}
ol.trefferliste p{margin:0;line-height:1.55}
mark{background:var(--treffer-hg);color:inherit;border-radius:2px;padding:0 .08em}
mark.treffer{transition:background-color 1.5s}
mark.treffer.aus{background:transparent}
@media(max-width:36rem){ol.trefferliste .bild{width:5rem}}
/* Gezeichnete Pfeile für „⇒“ in Titeln (Beitrag, Kacheln, vorheriger/nächster Beitrag, Suche); Mitte des Pfeils = Mitte der Kleinbuchstaben */
/* --pfeil-groesse = Länge des Pfeils (die Höhe folgt im Verhältnis); er zählt nicht für die Zeilenhöhe, umgebrochene Titel bleiben gleich eng.
   --pfeil-farbe: currentColor = wie der Titel, var(--accent) = gold */
/* --symbol-groesse = Höhe der eigenen Symbole für 🙋‍♂️/🙋‍♀️; sie zählen nicht für die Zeilenhöhe */
img.symbol{display:inline-block;width:auto;height:var(--symbol-groesse);margin:calc(var(--symbol-groesse) * -.35) 0;vertical-align:middle;border:0;border-radius:0;box-shadow:none;max-width:none}
img.symbol.wdh{display:var(--symbol-wiederholen,none)} /* gleicher Schreiber wie beim vorigen Symbol */
.meta .strecke::before{content:var(--strecke-text)}
svg.pfeil{display:inline-block;width:var(--pfeil-groesse);height:calc(var(--pfeil-groesse) * .5652);margin:calc(var(--pfeil-groesse) * -.2826) .1em;vertical-align:middle;color:var(--pfeil-farbe);overflow:visible}
/* Titel: „ | “ im Titel = bevorzugte Trennstelle */
.tz{display:inline-block;max-width:100%}