/* ==========================================================================
   Ulis Welt – Reisetagebuch
   ========================================================================== */

:root {
  --papier: #f7f2e8; --blatt: #fffdf8; --tinte: #2b2723; --tinte-2: #6e655b; --linie: #e2d8c6;
  --rost: #b4532c; --rost-weich: #f5e3d6; --petrol: #2d6a66; --zettel: #fbeaa6; --klebe: rgba(214, 196, 150, .55);
  --land: #e7decd; --land-rand: #fffdf8; --besucht: #eab89c; --besucht-hover: #dd9370; --pin: #b4532c; --route: #2d6a66;
  --schatten: 0 1px 2px rgba(60, 40, 20, .1), 0 10px 26px rgba(60, 40, 20, .12);
  --hand: 'Caveat', cursive; --serif: 'Lora', Georgia, serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --breite: 1160px; --text-breite: 660px; --weit: 1000px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #1b1815; --blatt: #24201c; --tinte: #efe7da; --tinte-2: #ab9f8f; --linie: #3a332c;
    --rost: #e8865c; --rost-weich: #3a2a21; --petrol: #78bdb6; --zettel: #4a4128; --klebe: rgba(120, 105, 80, .45);
    --land: #2f2a25; --land-rand: #24201c; --besucht: #7b4630; --besucht-hover: #9a5a3d; --pin: #f09a70; --route: #78bdb6;
    --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 26px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papier: #1b1815; --blatt: #24201c; --tinte: #efe7da; --tinte-2: #ab9f8f; --linie: #3a332c;
  --rost: #e8865c; --rost-weich: #3a2a21; --petrol: #78bdb6; --zettel: #4a4128; --klebe: rgba(120, 105, 80, .45);
  --land: #2f2a25; --land-rand: #24201c; --besucht: #7b4630; --besucht-hover: #9a5a3d; --pin: #f09a70; --route: #78bdb6;
  --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 26px rgba(0, 0, 0, .4);
  color-scheme: dark;
}

/* ---------- Grundlagen ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; color: var(--tinte); font: 400 18px/1.7 var(--serif); -webkit-font-smoothing: antialiased;
  background-color: var(--papier);
  background-image: radial-gradient(rgba(120, 90, 50, .05) 1px, transparent 1px);
  background-size: 6px 6px;
  transition: background-color .3s, color .3s;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0; text-wrap: balance; }
.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }
:focus-visible { outline: 2px dashed var(--rost); outline-offset: 3px; }
.hand { font-family: var(--hand); font-weight: 700; }
.stempel { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--rost); border: 1.5px solid currentColor; border-radius: 4px; padding: 3px 8px; display: inline-block; line-height: 1.5; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.springen { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--blatt); padding: 8px 14px; }
.springen:focus { left: 8px; }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--papier) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1.5px dashed var(--linie); }
.admin-bar .kopf { top: 32px; }
@media (max-width: 782px) { .admin-bar .kopf { top: 0; } }
.kopf .huelle { display: flex; align-items: center; gap: 28px; height: 72px; }
.logo { text-decoration: none; display: flex; align-items: center; gap: 12px; flex: none; }
.logo-bild { --logo-blau: #1f3a4d; --logo-rost: #c8643b; width: 56px; height: auto; flex: none; }
:root[data-theme="dark"] .logo-bild { --logo-blau: var(--tinte); --logo-rost: var(--rost); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-bild { --logo-blau: var(--tinte); --logo-rost: var(--rost); }
}
.logo b { font: 500 16px/1 var(--mono); letter-spacing: .08em; color: var(--rost); }
.logo small { font: 11px var(--mono); color: var(--tinte-2); letter-spacing: .14em; text-transform: uppercase; }
.nav { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.nav > a, .nav summary { font-size: 17px; text-decoration: none; cursor: pointer; list-style: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.nav summary::-webkit-details-marker, .suche-knopf summary::-webkit-details-marker { display: none; }
.nav > a:hover, .nav summary:hover, .nav > a[aria-current] { border-bottom-color: var(--rost); }
.nav details { position: relative; }
.mega { position: absolute; right: -120px; top: 44px; width: 560px; background: var(--blatt); border: 1px solid var(--linie); box-shadow: var(--schatten); padding: 22px 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 20px; rotate: -.4deg; }
.mega::before { content: ''; position: absolute; top: -12px; left: 46%; width: 90px; height: 24px; background: var(--klebe); rotate: 3deg; }
.mega h4 { font: 700 24px var(--hand); color: var(--rost); margin: 0 0 4px; }
.mega a { display: block; text-decoration: none; padding: 3px 0; font-size: 16px; line-height: 1.35; }
.mega a:hover { color: var(--rost); }
.mega span { font: 11px var(--mono); color: var(--tinte-2); white-space: nowrap; }
.schalter { display: flex; align-items: center; gap: 10px; }
.sprache { display: inline-flex; gap: 4px; }
.sprache a { font: 500 12px var(--mono); letter-spacing: .1em; text-decoration: none; color: var(--tinte-2); border: 1.5px solid transparent; border-radius: 4px; padding: 4px 8px; }
.sprache a[aria-current] { color: var(--rost); border-color: var(--rost); rotate: -3deg; display: inline-block; }
.rund { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--linie); background: var(--blatt); color: var(--tinte); display: grid; place-items: center; cursor: pointer; list-style: none; }
.rund svg { width: 18px; height: 18px; }
.icon-sonne { display: none; }
:root[data-theme="dark"] .icon-sonne { display: block; }
:root[data-theme="dark"] .icon-mond { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sonne { display: block; }
  :root:not([data-theme="light"]) .icon-mond { display: none; }
}
.suche-knopf { position: relative; }
.suche-feld { position: absolute; right: 0; top: 50px; width: 320px; background: var(--blatt); box-shadow: var(--schatten); padding: 14px; border: 1px solid var(--linie); }
.suchform { display: flex; gap: 8px; }
.suchform input { flex: 1; min-width: 0; font: 16px var(--serif); padding: 8px 10px; border: 1.5px solid var(--linie); background: var(--papier); color: var(--tinte); border-radius: 4px; }
.suchform button { font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--rost); color: var(--blatt); border: 0; padding: 0 14px; border-radius: 4px; cursor: pointer; }

/* ---------- Gerissener Foto-Streifen ---------- */
.streifen { position: relative; height: 380px; overflow: hidden; background: #2b2723;
  clip-path: polygon(0 0, 100% 0, 100% 92%, 96% 96%, 91% 91%, 85% 97%, 79% 92%, 72% 98%, 66% 93%, 59% 97%, 52% 91%, 46% 96%, 39% 92%, 32% 98%, 25% 93%, 18% 97%, 11% 91%, 5% 96%, 0 92%); }
.streifen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.streifen img.ohne-eigenes { filter: sepia(.6) opacity(.5); }
.streifen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 12, 4, .6), rgba(20, 12, 4, 0) 70%); }
.streifen .huelle { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; color: #fff; }
.streifen h1 { font: 700 clamp(52px, 8vw, 96px)/1 var(--hand); }
.streifen p { font-size: 19px; max-width: 520px; margin: 10px 0 0; }
.streifen .stempel { color: #fff; width: fit-content; margin-bottom: 12px; rotate: -2deg; }
.reise-streifen { height: 460px; }
.reise-streifen h1 { font-size: clamp(56px, 9vw, 108px); }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: 64px 0; }
.titel { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.titel h1, .titel h2 { font: 700 clamp(40px, 5vw, 56px)/1 var(--hand); }
.titel h2 em { font-style: normal; color: var(--rost); }
.titel p { margin: 6px 0 0; color: var(--tinte-2); font-style: italic; }
.reiter { display: inline-flex; gap: 6px; }
.reiter button { font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; background: var(--blatt); color: var(--tinte-2); border: 1.5px solid var(--linie); padding: 8px 14px; border-radius: 6px 6px 0 0; cursor: pointer; }
.reiter button[aria-pressed="true"] { background: var(--rost); border-color: var(--rost); color: var(--blatt); }

/* ---------- Karte auf Papier ---------- */
.kartenblatt { position: relative; background: var(--blatt); box-shadow: var(--schatten); padding: 18px; }
.kartenblatt::before, .kartenblatt::after { content: ''; position: absolute; width: 110px; height: 28px; background: var(--klebe); z-index: 2; }
.kartenblatt::before { top: -12px; left: -22px; rotate: -32deg; }
.kartenblatt::after { top: -12px; right: -22px; rotate: 32deg; }
.karte { position: relative; }
.karte-svg { width: 100%; height: auto; display: block; }
.karte-laedt { aspect-ratio: 2/1; display: grid; place-items: center; font: 30px var(--hand); color: var(--tinte-2); }
.land { fill: var(--land); stroke: var(--land-rand); stroke-width: .6; transition: fill .2s; }
.land.besucht { fill: var(--besucht); cursor: pointer; }
.land.besucht:hover, .land.besucht:focus { fill: var(--besucht-hover); outline: none; }
.route { fill: none; stroke: var(--route); stroke-width: 1.6; stroke-dasharray: 4 4; stroke-linecap: round; }
.pin { cursor: pointer; }
.pin-punkt { fill: var(--pin); stroke: var(--blatt); stroke-width: 1.6; }
.pin-halo { fill: none; stroke: var(--pin); stroke-width: 1.5; opacity: 0; transition: opacity .2s; }
.pin:hover .pin-halo, .pin:focus .pin-halo { opacity: 1; }
.pin:focus { outline: none; }
.karte-tip { position: absolute; z-index: 5; background: var(--zettel); color: var(--tinte); box-shadow: var(--schatten); padding: 10px 12px; min-width: 190px; pointer-events: none; rotate: -1deg; }
.karte-tip[hidden] { display: none; }
.karte-tip.fest { pointer-events: auto; }
.karte-tip .tip-ort { font: 11px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--tinte-2); }
.karte-tip a { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; text-decoration: none; padding: 2px 0; }
.karte-tip a b { font: 700 24px/1.1 var(--hand); }
.karte-tip a span { font: 11px var(--mono); color: var(--tinte-2); }
.karte-tip a:hover b { color: var(--rost); }
.unterzeile { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 12px 4px 0; font: 12px var(--mono); color: var(--tinte-2); letter-spacing: .06em; }
.unterzeile i { display: inline-block; width: 18px; border-top: 2px dashed var(--route); vertical-align: middle; margin-right: 6px; }
.unterzeile i.f { width: 12px; height: 12px; border: 0; background: var(--besucht); vertical-align: -1px; }

/* Deutschland-Ansicht: Lieblingsorte als Rauten, Reisen ausgeblendet */
.ort-pin { display: none; cursor: pointer; }
.modus-deutschland .ort-pin { display: inline; }
.modus-deutschland .pin, .modus-deutschland .route { display: none; }
.modus-deutschland .land.besucht { fill: var(--land); cursor: default; }
.modus-deutschland .land.heimat { fill: color-mix(in srgb, var(--petrol) 28%, var(--blatt)); }
.ort-raute { fill: var(--petrol); stroke: var(--blatt); stroke-width: 1.6; transition: fill .2s; }
.ort-pin:hover .ort-raute, .ort-pin:focus .ort-raute { fill: var(--rost); }
.ort-pin:focus { outline: none; }
.ort-name { font: 700 24px var(--hand); fill: var(--tinte); paint-order: stroke; stroke: var(--blatt); stroke-width: 5px; stroke-linejoin: round; pointer-events: none; }
.unterzeile i.o { width: 9px; height: 9px; border: 0; background: var(--petrol); rotate: 45deg; vertical-align: 0; margin: 0 6px 0 2px; }

/* ---------- Polaroids ---------- */
.pinnwand { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px 30px; padding-top: 10px; }
.polaroid { display: block; text-decoration: none; background: var(--blatt); padding: 12px 12px 16px; box-shadow: var(--schatten); position: relative; transition: rotate .3s, translate .3s; }
.polaroid[hidden] { display: none; }
.polaroid:nth-child(4n+1) { rotate: -1.6deg; } .polaroid:nth-child(4n+2) { rotate: 1.2deg; } .polaroid:nth-child(4n+3) { rotate: -.6deg; } .polaroid:nth-child(4n) { rotate: 1.8deg; }
.polaroid:hover, .polaroid:focus-visible { rotate: 0deg; translate: 0 -4px; }
.polaroid::before { content: ''; position: absolute; top: -13px; left: 50%; translate: -50%; width: 84px; height: 26px; background: var(--klebe); rotate: -2deg; z-index: 1; }
.polaroid .foto { aspect-ratio: 1; overflow: hidden; background: var(--land); }
.polaroid .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.polaroid .leer-foto { width: 100%; height: 100%; display: grid; place-items: center; text-align: center; padding: 12px; font: 700 28px/1.1 var(--hand); color: var(--tinte-2); background: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(150, 120, 80, .08) 10px 20px); }
.polaroid h3 { font: 700 30px/1.05 var(--hand); margin: 12px 2px 4px; }
.polaroid p { margin: 0 2px; font-size: 15px; line-height: 1.5; color: var(--tinte-2); }
.polaroid .stempel { position: absolute; top: 22px; right: 20px; background: var(--blatt); rotate: 6deg; }
.polaroid .zahl { display: block; margin: 8px 2px 0; font: 11px var(--mono); color: var(--rost); letter-spacing: .08em; text-transform: uppercase; }
.filter { display: flex; gap: 14px; flex-wrap: wrap; }
.filter button { font: 700 24px var(--hand); background: none; border: 0; color: var(--tinte-2); cursor: pointer; padding: 0 2px; }
.filter button[aria-pressed="true"] { color: var(--rost); text-decoration: underline wavy; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }

/* ---------- Liniertes Notizblatt ---------- */
.notiz { background: var(--blatt); box-shadow: var(--schatten); padding: 26px 32px 26px 72px; position: relative;
  background-image: linear-gradient(90deg, transparent 54px, rgba(180, 83, 44, .35) 54px, rgba(180, 83, 44, .35) 56px, transparent 56px), repeating-linear-gradient(transparent 0 43px, var(--linie) 43px 44px); }
.notiz a { display: flex; gap: 18px; align-items: baseline; text-decoration: none; height: 44px; line-height: 44px; overflow: hidden; white-space: nowrap; }
.notiz time { font: 12px var(--mono); color: var(--rost); flex: none; width: 92px; }
.notiz b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.notiz span { font: 700 22px var(--hand); color: var(--tinte-2); margin-left: auto; flex: none; }
.notiz a:hover b { color: var(--rost); }

/* ---------- Reiseseite ---------- */
.reise-raster { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 64px; padding: 36px 0 72px; align-items: start; }
.fakten { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }
.fakten .stempel:nth-child(1) { rotate: -1.5deg; }
.fakten .stempel:nth-child(2) { color: var(--petrol); rotate: 1.5deg; }
.zeitstrahl { list-style: none; margin: 0; padding: 0 0 0 30px; position: relative; }
.zeitstrahl::before { content: ''; position: absolute; left: 7px; top: 10px; bottom: 10px; border-left: 2px dashed var(--route); }
.zeitstrahl li { position: relative; }
.zeitstrahl li:not(.jahr)::before { content: ''; position: absolute; left: -29px; top: 18px; width: 12px; height: 12px; border-radius: 50%; background: var(--papier); border: 2.5px solid var(--rost); }
.zeitstrahl a { display: flex; gap: 16px; align-items: baseline; text-decoration: none; padding: 9px 0; }
.zeitstrahl time { font: 12px var(--mono); color: var(--tinte-2); flex: none; width: 50px; }
.zeitstrahl b { font-weight: 500; font-size: 18px; }
.zeitstrahl a:hover b { color: var(--rost); text-decoration: underline wavy; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.zeitstrahl .jahr { font: 700 34px var(--hand); color: var(--rost); margin: 22px 0 4px -30px; }
.zeitstrahl .jahr:first-child { margin-top: 0; }
.seitenleiste { position: relative; }
.seitenleiste .kartenblatt { padding: 12px; rotate: .6deg; }
.stationen { margin-top: 26px; font: 700 24px/1.4 var(--hand); color: var(--tinte-2); }
.stationen b { color: var(--tinte); }
.leer { padding: 36px; border: 2px dashed var(--linie); text-align: center; font: 700 28px var(--hand); color: var(--tinte-2); }

/* ---------- Steckbrief ---------- */
.steckbrief { margin-top: 34px; }
.sb-titel { font: 700 40px/1 var(--hand); margin-bottom: 12px; }
.sb-reiter { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: -1px; position: relative; z-index: 1; }
.sb-reiter button { font: 500 12px var(--mono); letter-spacing: .04em; background: var(--papier); color: var(--tinte-2); border: 1.5px solid var(--linie); border-bottom: 0; border-radius: 6px 6px 0 0; padding: 6px 10px; cursor: pointer; }
.sb-reiter button[aria-selected="true"] { background: var(--blatt); color: var(--rost); }
.sb-blatt { background: var(--blatt); border: 1.5px solid var(--linie); box-shadow: var(--schatten); padding: 18px 20px 20px; }
.sb-blatt[hidden] { display: none; }
.sb-kopf { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1.5px dashed var(--linie); }
.sb-flagge { width: 44px; height: 30px; object-fit: cover; border: 1px solid var(--linie); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); rotate: -3deg; flex: none; }
.sb-flagge.klein { width: 18px; height: 12px; display: inline-block; vertical-align: -1px; margin-right: 4px; rotate: 0deg; box-shadow: none; }
.sb-kopf h3 { font: 700 30px/1.05 var(--hand); }
.sb-blatt dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 14px 0 0; font-size: 16px; }
.sb-blatt dt { font: 11px/2 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--tinte-2); }
.sb-blatt dd { margin: 0; line-height: 1.45; }
.sb-blatt dd small { display: block; font: 700 19px/1.2 var(--hand); color: var(--petrol); }
.kurios { margin: 20px -6px 0; background: var(--zettel); padding: 14px 18px 12px; rotate: -.8deg; box-shadow: var(--schatten); position: relative; }
.kurios::before { content: ''; position: absolute; top: -10px; right: 34px; width: 70px; height: 20px; background: var(--klebe); rotate: 5deg; }
.kurios h4 { font: 700 26px/1 var(--hand); color: var(--rost); margin: 0 0 6px; }
.kurios ul { margin: 0; padding-left: 18px; font-size: 15.5px; line-height: 1.5; }
.kurios li + li { margin-top: 6px; }
.kurios li::marker { content: '✦  '; color: var(--rost); font-size: 11px; }
.sb-stand { font: 11px var(--mono); color: var(--tinte-2); margin: 14px 0 0; }

/* ---------- Orte in Deutschland ---------- */
.ort-liste { margin-top: 40px; }
.ort-liste h2, .ort-tipps h2 { font-size: 40px; color: var(--rost); margin-bottom: 8px; }
.ort-liste ul { list-style: none; margin: 0; padding: 0; }
.ort-liste li { padding: 10px 0 10px 30px; border-bottom: 1.5px dashed var(--linie); position: relative; }
.ort-liste li::before { content: ''; position: absolute; left: 6px; top: 19px; width: 9px; height: 9px; background: var(--petrol); rotate: 45deg; }
.ort-tipps { margin: 44px -10px 0 !important; }
.ort-tipps ul { margin: 0; padding-left: 20px; font: 700 25px/1.35 var(--hand); }
.ort-tipps li + li { margin-top: 6px; }
.ort-raster .beitrag-inhalt { padding: 0; margin: 0; max-width: none; }
.ort-raster .beitrag-inhalt .fotostrecke { width: 100%; margin-left: 0; translate: none; }
.ort-uebersicht { display: grid; gap: 56px; }
.ort-uebersicht > .kartenblatt { width: min(100%, 720px); margin: 0 auto; }
a.stempel { text-decoration: none; }
a.stempel:hover { background: var(--rost-weich); }

/* ---------- Bericht ---------- */
.beitrag-kopf { max-width: 820px; margin: 0 auto; padding: 56px 24px 28px; }
.zurueck { font: 700 26px var(--hand); color: var(--rost); text-decoration: none; }
.beitrag-kopf h1 { font-size: clamp(38px, 6vw, 64px); margin: 12px 0 18px; }
.beitrag-meta { display: flex; gap: 10px; flex-wrap: wrap; }
.beitrag-meta .stempel:first-child { rotate: -2deg; }
.beitrag-meta .stempel:nth-child(2) { color: var(--petrol); rotate: 1deg; }
.titelbild { max-width: 1100px; margin: 10px auto 56px; padding: 0 24px; }
.titelbild figure { margin: 0; background: var(--blatt); padding: 14px 14px 18px; box-shadow: var(--schatten); rotate: -.5deg; }
.titelbild img { width: 100%; aspect-ratio: 16/8.5; object-fit: cover; display: block; }

.beitrag-inhalt { max-width: var(--text-breite); margin: 0 auto; padding: 0 24px; font-size: 19px; line-height: 1.8; overflow-wrap: break-word; }
.beitrag-inhalt > * { margin-top: 0; margin-bottom: 1.35em; }
.beitrag-inhalt > .uw-tageskopf { margin-bottom: 1.6em; }
/* Initiale: zwei Zeilen hoch, nur bei Buchstaben (wird im Theme gesetzt) */
.initiale { float: left; font: 700 3.4em/1 var(--hand); color: var(--rost); margin: .02em .12em 0 -.02em; height: 1em; }
.beitrag-inhalt h2 { font: 700 44px/1.1 var(--hand); color: var(--rost); margin: 1.2em 0 .4em; }
.beitrag-inhalt h3 { font: 700 34px/1.1 var(--hand); margin: 1.1em 0 .3em; }
.beitrag-inhalt h4 { font-size: 20px; margin: 1em 0 .3em; }
.beitrag-inhalt a { color: var(--rost); }
.beitrag-inhalt hr { border: 0; border-top: 1.5px dashed var(--linie); margin: 2.4em 0; }
.beitrag-inhalt ul, .beitrag-inhalt ol { padding-left: 1.3em; }
.beitrag-inhalt table { border-collapse: collapse; width: 100%; font-size: 16px; }
.beitrag-inhalt td, .beitrag-inhalt th { border-bottom: 1px solid var(--linie); padding: 8px; text-align: left; }

/* Zitat = Notizzettel */
.beitrag-inhalt blockquote, .beitrag-inhalt .wp-block-quote, .beitrag-inhalt .wp-block-pullquote, .is-style-notizzettel {
  margin: 2em -10px; padding: 22px 26px; background: var(--zettel); box-shadow: var(--schatten); rotate: -1deg; position: relative; border: 0; color: var(--tinte); }
.beitrag-inhalt blockquote::before, .beitrag-inhalt .wp-block-pullquote::before, .is-style-notizzettel::before { content: ''; position: absolute; top: -11px; left: 40px; width: 80px; height: 22px; background: var(--klebe); rotate: -4deg; }
.beitrag-inhalt blockquote p, .beitrag-inhalt .wp-block-pullquote p { font: 700 27px/1.35 var(--hand); margin: 0; }
.beitrag-inhalt blockquote p + p { margin-top: .5em; }
.beitrag-inhalt blockquote cite, .beitrag-inhalt .wp-block-pullquote cite { display: block; margin-top: 8px; font: 12px var(--mono); font-style: normal; color: var(--tinte-2); }
.beitrag-inhalt .wp-block-pullquote blockquote { margin: 0; padding: 0; background: none; box-shadow: none; rotate: 0deg; }
.beitrag-inhalt .wp-block-pullquote blockquote::before { display: none; }
.is-style-notizzettel > :last-child { margin-bottom: 0; }

/* Block-Stile */
.is-style-handschrift { font: 700 28px/1.3 var(--hand) !important; color: var(--petrol); }
.is-style-stempel { font: 500 12px var(--mono) !important; text-transform: uppercase; letter-spacing: .12em; color: var(--rost); }
.is-style-stempel mark, .uw-tageskopf mark { background: none; color: inherit; border: 1.5px solid currentColor; border-radius: 4px; padding: 3px 8px; margin-right: 6px; display: inline-block; line-height: 1.5; }
.uw-tageskopf { display: flex; flex-wrap: wrap; gap: 10px; }

/* Bilder = Foto-Abzüge: gilt für Blöcke, alte [caption]-Bilder und einfach eingefügte Bilder */
.beitrag-inhalt figure, .beitrag-inhalt .wp-caption { margin: 2.4em 0; max-width: 100%; }
.beitrag-inhalt .wp-block-image > img, .beitrag-inhalt .wp-block-image a > img,
.beitrag-inhalt .wp-caption img,
.beitrag-inhalt > p img, .beitrag-inhalt > p > a > img {
  background: var(--blatt); padding: 10px; box-shadow: var(--schatten); display: block; max-width: 100%; height: auto; }
.beitrag-inhalt .wp-block-image figcaption, .beitrag-inhalt .wp-caption-text, .beitrag-inhalt .blocks-gallery-caption, .beitrag-inhalt .wp-element-caption {
  font: 700 24px/1.2 var(--hand); color: var(--tinte-2); margin: 10px 4px 0; text-align: left; }
.beitrag-inhalt .wp-block-image.is-style-ohne-rahmen img { padding: 0; box-shadow: none; background: none; }
.beitrag-inhalt .is-style-polaroid { rotate: -1.4deg; }
.beitrag-inhalt .is-style-polaroid img { padding: 12px 12px 48px; }
.beitrag-inhalt .is-style-polaroid figcaption { margin-top: -42px; position: relative; padding: 0 14px; }
/* Große Bilder („Groß“, „Volle Größe“ und alte 1024er-Bilder) auf volle Breite ziehen */
.beitrag-inhalt img.size-large, .beitrag-inhalt img.size-full, .beitrag-inhalt .wp-block-image.size-large img, .beitrag-inhalt .wp-block-image.size-full img { width: 100%; }
/* Hochformat: höchstens so hoch wie der Bildschirm, mittig */
.beitrag-inhalt img.hochkant { width: auto !important; max-height: min(80vh, 860px); margin-inline: auto; }
.beitrag-inhalt figure:has(> img.hochkant), .beitrag-inhalt figure:has(> a > img.hochkant), .beitrag-inhalt .wp-caption:has(img.hochkant) { width: fit-content !important; margin-inline: auto; }
.beitrag-inhalt .gallery img.hochkant, .beitrag-inhalt .wp-block-gallery img.hochkant, .beitrag-inhalt > p:has(> a + a > img) img.hochkant { width: 100% !important; max-height: none; }
.beitrag-inhalt .alignleft { float: left; margin: .3em 1.4em 1em 0; max-width: 50%; }
.beitrag-inhalt .alignright { float: right; margin: .3em 0 1em 1.4em; max-width: 50%; }
.beitrag-inhalt .aligncenter { margin-left: auto; margin-right: auto; }
.beitrag-inhalt .aligncenter img { margin: 0 auto; }
/* Weite und volle Breite */
.beitrag-inhalt .alignwide { width: min(var(--weit), calc(100vw - 48px)); max-width: none; margin-left: 50%; translate: -50%; }
.beitrag-inhalt .alignfull { width: 100vw; max-width: none; margin-left: 50%; translate: -50%; }
.beitrag-inhalt .alignfull img { padding: 0; box-shadow: none; }
/* Alte Berichte: mehrere Bilder hintereinander in einem Absatz → als Reihe */
.beitrag-inhalt > p:has(> img + img), .beitrag-inhalt > p:has(> a + a > img), .beitrag-inhalt > p:has(> a > img):has(> a + a) {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; align-items: start; }
.beitrag-inhalt > p:has(> a + a > img) img, .beitrag-inhalt > p:has(> img + img) img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.beitrag-inhalt > p:has(> a + a > img) br, .beitrag-inhalt > p:has(> img + img) br { display: none; }

/* Galerien – Block und alter [gallery]-Shortcode */
.beitrag-inhalt .wp-block-gallery { gap: 22px !important; }
.beitrag-inhalt .wp-block-gallery:not(.alignfull):not(.alignwide) { width: min(var(--weit), calc(100vw - 48px)); max-width: none; margin-left: 50%; translate: -50%; }
.beitrag-inhalt .wp-block-gallery .wp-block-image { margin: 0 !important; }
.beitrag-inhalt .wp-block-gallery .wp-block-image img { padding: 10px; background: var(--blatt); box-shadow: var(--schatten); }
.beitrag-inhalt .wp-block-gallery:not(.is-style-gerade) .wp-block-image:nth-child(3n+1) { rotate: -1.3deg; }
.beitrag-inhalt .wp-block-gallery:not(.is-style-gerade) .wp-block-image:nth-child(3n+2) { rotate: .9deg; }
.beitrag-inhalt .wp-block-gallery:not(.is-style-gerade) .wp-block-image:nth-child(3n) { rotate: -.4deg; }
.beitrag-inhalt .wp-block-gallery .wp-block-image:hover { rotate: 0deg; transition: rotate .25s; }
.beitrag-inhalt .wp-block-gallery.has-nested-images figure.wp-block-image figcaption { position: static; background: none; color: var(--tinte-2); font: 700 21px/1.2 var(--hand); padding: 6px 4px 0; text-shadow: none; max-height: none; overflow: visible; }
.beitrag-inhalt .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before { display: none; }
.beitrag-inhalt .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; width: min(var(--weit), calc(100vw - 48px)); margin-left: 50%; translate: -50%; }
.beitrag-inhalt .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.beitrag-inhalt .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.beitrag-inhalt .gallery br { display: none; }
.beitrag-inhalt .gallery-item { margin: 0; }
.beitrag-inhalt .gallery-item img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--blatt); padding: 10px; box-shadow: var(--schatten); }
.beitrag-inhalt .gallery-item:nth-child(3n+1) { rotate: -1.3deg; } .beitrag-inhalt .gallery-item:nth-child(3n+2) { rotate: .9deg; }
.beitrag-inhalt .gallery-caption { font: 700 21px/1.2 var(--hand); color: var(--tinte-2); padding: 6px 4px 0; }
/* 10Web Photo Gallery: in die Breite ziehen, Rest macht das Plugin */
.beitrag-inhalt [id^="bwg_container"] { width: min(var(--weit), calc(100vw - 48px)) !important; max-width: none; margin-left: 50%; translate: -50%; }

/* Einheitliche Fotostrecke: ein großes Foto, darunter Reihen in gleicher Höhe */
.beitrag-inhalt .fotostrecke { width: min(var(--weit), calc(100vw - 48px)); margin: 2.4em 0 2.4em 50%; translate: -50%; display: flex; flex-direction: column; gap: 22px; }
.foto-reihe { display: flex; gap: 22px; align-items: flex-start; }
.beitrag-inhalt .foto { flex: var(--a, 1.5) 1 0; box-sizing: content-box; min-width: 0; margin: 0; background: var(--blatt); padding: 10px 10px 8px; box-shadow: var(--schatten); transition: rotate .25s; }
.foto-reihe .foto:nth-child(3n+1) { rotate: -.7deg; } .foto-reihe .foto:nth-child(3n+2) { rotate: .5deg; } .foto-reihe .foto:nth-child(3n) { rotate: -.3deg; }
.foto-reihe.einzeln .foto { rotate: .3deg; }
.foto-reihe .foto:hover { rotate: 0deg; }
.beitrag-inhalt .foto a { display: block; }
.beitrag-inhalt .foto img { display: block; width: 100%; height: auto; aspect-ratio: var(--a, 1.5); object-fit: cover; padding: 0; margin: 0; background: var(--land); box-shadow: none; max-height: none; }
.beitrag-inhalt .foto figcaption { font: 700 22px/1.2 var(--hand); color: var(--tinte-2); margin: 8px 2px 0; text-align: left; }
.foto-reihe.einzeln.hochformat .foto { flex: 0 1 auto; width: min(100% - 20px, 70vh * var(--a, .75), 560px); margin: 0 auto; }
.zoombar { cursor: zoom-in; }
.beitrag-inhalt video, .beitrag-inhalt iframe { max-width: 100%; }
.beitrag-inhalt .wp-video, .beitrag-inhalt .wp-block-video, .beitrag-inhalt .videopack-wrapper { background: var(--blatt); padding: 10px; box-shadow: var(--schatten); }
.beitrag-inhalt::after { content: ''; display: table; clear: both; }

/* Blättern zwischen Berichten */
.blaettern { max-width: var(--text-breite); margin: 60px auto 0; padding: 28px 24px 0; border-top: 1.5px dashed var(--linie); display: flex; justify-content: space-between; gap: 24px; }
.blaettern a { text-decoration: none; max-width: 46%; }
.blaettern small { display: block; font: 11px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--tinte-2); }
.blaettern b { font: 700 28px/1.15 var(--hand); }
.blaettern a:hover b { color: var(--rost); }
.blaettern > :last-child { text-align: right; }
.liste-seite { padding: 56px 24px 40px; }
.liste-seite .blaettern { max-width: none; }

/* GPX-Route */
.uw-route { position: relative; background: var(--blatt); padding: 10px; box-shadow: var(--schatten); }
.uw-route-karte { position: relative; background: var(--land); background-image: repeating-linear-gradient(-45deg, transparent 0 12px, rgba(150, 120, 80, .08) 12px 24px); }
.uw-route-start { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 16px; }
.uw-route-start .hand { font-size: 34px; color: var(--tinte-2); }
.uw-route-knopf { font: 500 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--rost); color: var(--blatt); border: 0; padding: 10px 18px; border-radius: 4px; cursor: pointer; }
.uw-route-start small { font: 12px var(--mono); color: var(--tinte-2); max-width: 360px; }
.uw-route .leaflet-container { font: 13px var(--serif); background: var(--land); }

/* Kommentare */
.kommentare { max-width: var(--text-breite); margin: 56px auto 0; padding: 0 24px; }
.kommentar-titel { font: 700 40px/1.1 var(--hand); margin: 0 0 22px; }
.kommentar-titel small a { font: 12px var(--mono); color: var(--tinte-2); margin-left: 10px; }
.kommentar-liste, .kommentar-liste .children { list-style: none; margin: 0; padding: 0; }
.kommentar-liste .children { margin: 14px 0 0 28px; padding-left: 18px; border-left: 2px dashed var(--linie); }
.postkarte { margin-bottom: 18px; }
.postkarte article { background: var(--blatt); box-shadow: var(--schatten); padding: 16px 20px 14px; position: relative; }
.kommentar-liste > .postkarte:nth-child(odd) > article { rotate: -.4deg; }
.kommentar-liste > .postkarte:nth-child(even) > article { rotate: .3deg; }
.postkarte header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1.5px dashed var(--linie); padding-bottom: 6px; margin-bottom: 8px; }
.postkarte header b { font-size: 26px; line-height: 1.1; }
.postkarte header a { text-decoration: none; }
.postkarte time { font: 11px var(--mono); color: var(--tinte-2); letter-spacing: .08em; flex: none; }
.postkarte.bypostauthor > article { background: var(--zettel); }
.kommentar-text { font-size: 17px; line-height: 1.6; }
.kommentar-text p { margin: 0 0 .6em; }
.antworten a { font: 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--rost); text-decoration: none; }
.wartet, .hinweis-klein { font: 12px var(--mono); color: var(--tinte-2); }
.comment-respond { margin-top: 40px; }
.comment-form label { display: block; font: 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--tinte-2); margin-bottom: 4px; }
.comment-form p { margin: 0 0 14px; }
.comment-form textarea, .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"] { width: 100%; font: 16px var(--serif); padding: 10px; border: 1.5px solid var(--linie); background: var(--blatt); color: var(--tinte); border-radius: 4px; }
.comment-form .comment-form-cookies-consent { display: flex; gap: 8px; align-items: baseline; }
.comment-form .comment-form-cookies-consent label { text-transform: none; letter-spacing: 0; font: 14px var(--serif); }
.comment-form .submit { font: 500 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--rost); color: var(--blatt); border: 0; padding: 12px 20px; border-radius: 4px; cursor: pointer; }

/* 404 und Suche */
.nicht-gefunden { padding: 80px 24px; text-align: center; }
.nicht-gefunden .gross { font-size: 120px; line-height: 1; color: var(--rost); margin: 0; }
.nicht-gefunden h1 { margin: 10px 0 28px; }
.suche-gross { max-width: 480px; margin: 24px auto; }

/* Fuß */
.fuss { border-top: 1.5px dashed var(--linie); padding: 36px 0 44px; margin-top: 40px; color: var(--tinte-2); font: 12px var(--mono); letter-spacing: .06em; }
.fuss .huelle { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
.fuss-menue { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--rost); }
.fuss .hand { font-size: 26px; color: var(--rost); letter-spacing: 0; }
.fuss-widgets { padding-top: 40px; }

/* ---------- Lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 100000; background: rgba(24, 18, 12, .95); color: #f4ecdf; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 72px 1fr 72px; touch-action: pan-y; }
.lb[hidden] { display: none; }
.lb-kopf { grid-column: 1 / -1; grid-row: 1; display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; font: 13px var(--mono); letter-spacing: .1em; }
.lb-zu { background: none; border: 0; color: inherit; font-size: 24px; cursor: pointer; width: 44px; height: 44px; }
.lb-buehne { grid-column: 2; grid-row: 2; min-width: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; padding: 0 8px; }
.lb-buehne img { max-width: 100%; max-height: calc(100vh - 220px); max-height: calc(100dvh - 220px); object-fit: contain; border: 10px solid #fffdf8; border-bottom-width: 14px; user-select: none; -webkit-user-drag: none; }
.lb-buehne figcaption { margin-top: 10px; font: 700 28px var(--hand); min-height: 1.3em; text-align: center; }
.lb-pfeil { background: rgba(255, 253, 248, .1); border: 0; color: inherit; font-size: 40px; width: 52px; height: 52px; border-radius: 50%; align-self: center; justify-self: center; cursor: pointer; line-height: 1; }
.lb-zurueck { grid-column: 1; grid-row: 2; }
.lb-vor { grid-column: 3; grid-row: 2; }
.lb-pfeil:hover { background: rgba(255, 253, 248, .2); }
.lb-leiste { grid-column: 1 / -1; grid-row: 3; display: flex; gap: 8px; padding: 14px 20px 20px; overflow-x: auto; justify-content: safe center; }
.lb-leiste img { width: 60px; height: 46px; object-fit: cover; opacity: .45; cursor: pointer; flex: none; border: 2px solid transparent; }
.lb-leiste img.aktiv { opacity: 1; border-color: #fffdf8; }

/* ---------- Kleinere Bildschirme ---------- */
@media (max-width: 1100px) {
  .nav { gap: 16px; }
  .logo small { display: none; }
}
@media (max-width: 960px) {
  .pinnwand { grid-template-columns: repeat(2, 1fr); }
  /* Handy/Tablet: Karte oben, dann die Tage, Steckbrief zum Schluss */
  .reise-raster { display: flex; flex-direction: column; gap: 28px; }
  .seitenleiste { display: contents; }
  .seitenleiste .kartenblatt { order: -2; }
  .seitenleiste .stationen { order: -1; margin-top: 0; }
  .seitenleiste .steckbrief { order: 1; margin-top: 12px; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .huelle { padding: 0 16px; }
  .kopf .huelle { gap: 10px; height: 62px; }
  .logo b { font-size: 12px; letter-spacing: .04em; }
  .logo-bild { width: 44px; }
  .logo { gap: 8px; }
  .nav { gap: 12px; }
  .nav > a { display: none; }
  .mega { position: fixed; left: 12px; right: 12px; top: 66px; width: auto; grid-template-columns: 1fr 1fr; max-height: calc(100vh - 90px); overflow-y: auto; rotate: 0deg; }
  .rund { width: 36px; height: 36px; }
  .sprache a { padding: 4px 5px; }
  .suche-feld { position: fixed; left: 12px; right: 12px; top: 66px; width: auto; }
  .streifen { height: 280px; }
  .reise-streifen { height: 320px; }
  .abschnitt { padding: 48px 0; }
  .pinnwand { gap: 30px 16px; }
  .polaroid { padding: 8px 8px 12px; }
  .polaroid h3 { font-size: 24px; }
  .polaroid p { display: none; }
  .polaroid .stempel { top: 14px; right: 12px; font-size: 10px; }
  .kartenblatt { padding: 8px; margin: 0 -6px; }
  .notiz { padding: 16px 16px 16px 50px; background-image: linear-gradient(90deg, transparent 36px, rgba(180, 83, 44, .35) 36px, rgba(180, 83, 44, .35) 38px, transparent 38px), repeating-linear-gradient(transparent 0 43px, var(--linie) 43px 44px); }
  .notiz span { display: none; }
  .notiz time { width: 86px; }
  .beitrag-kopf { padding-top: 36px; }
  .beitrag-inhalt .alignwide, .beitrag-inhalt .wp-block-gallery:not(.alignfull), .beitrag-inhalt .gallery, .beitrag-inhalt [id^="bwg_container"] { width: calc(100vw - 32px) !important; }
  .beitrag-inhalt .gallery { grid-template-columns: 1fr 1fr; gap: 14px; }
  .beitrag-inhalt .fotostrecke { width: calc(100vw - 32px); gap: 14px; }
  .foto-reihe { gap: 12px; flex-wrap: wrap; }
  .foto-reihe:has(> :nth-child(3)) > :first-child { flex-basis: 100%; }
  .beitrag-inhalt .foto { padding: 6px 6px 5px; }
  .beitrag-inhalt .foto figcaption { font-size: 18px; }
  .beitrag-inhalt .alignleft, .beitrag-inhalt .alignright { float: none; margin: 1.4em 0; max-width: 100%; }
  .titelbild { padding: 0 12px; }
  .lb { grid-template-columns: 0 1fr 0; }
  .lb-pfeil { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print {
  .kopf, .fuss, .blaettern, .lb, .uw-route { display: none !important; }
  body { background: #fff; }
}