/* ==========================================================================
   Über mich · „Wie alles kam“
   Zeitreise auf der Papierkarte: pro Jahr ein Polaroid, die Karte zeichnet mit.
   Ohne JavaScript und bei reduzierter Bewegung steht alles fertig da.
   Bewegung nur über transform, opacity und stroke-dashoffset.
   ========================================================================== */

.geschichte { --papier-karte: #FBF7EE; --foto-weiss: #FFFDF8; --tinte-karte: #3A2A20; overflow: clip; }
.reise { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(40px, 6vw, 72px); }

/* ---------- Jahre ---------- */
.reise-jahre { position: relative; list-style: none; margin: 0; padding: 0; }
.reise-jahr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; padding-block: clamp(30px, 4vw, 52px); scroll-margin-top: calc(var(--kopf-h) + 20px); }
.reise-jahr:first-child { padding-top: 8px; }
.reise-text { min-width: 0; }
.reise-text h3 { font-size: clamp(30px, 2.7vw, 42px); margin-bottom: 10px; }
.reise-text p { margin: 0; color: var(--tinte-2); max-width: 54ch; }
.reise-text a { color: var(--gruen-dunkel); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: .18em; }

/* Jahreszahl mit Textmarker: der Strich zieht sich unter das aktuelle Jahr */
.reise-zahl { position: relative; display: inline-block; z-index: 0; margin: 0 0 14px; padding: 0 .08em; font-family: var(--display); font-weight: 900; font-size: clamp(58px, 6.2vw, 96px); line-height: .84; letter-spacing: -.012em; color: var(--gruen-tief); }
.reise-zahl::before { content: ""; position: absolute; z-index: -1; left: -.06em; right: -.1em; bottom: .02em; height: .36em; border-radius: .12em .3em .16em .26em; background: var(--gruen-licht); opacity: .55; transform: rotate(-1.2deg); transform-origin: left center; }
.reise-lebt .reise-zahl::before { transform: rotate(-1.2deg) scaleX(0); transition: transform .55s var(--ease); }
.reise-lebt .reise-jahr.ist-aktiv .reise-zahl::before { transform: rotate(-1.2deg) scaleX(1); }

/* ---------- Polaroids ---------- */
.reise-bild { position: relative; min-width: 0; }
.polaroid { --dreh: -2deg; position: relative; z-index: 1; width: min(100%, 268px); margin: 0; padding: 11px 11px 0; background: var(--foto-weiss); box-shadow: 0 1px 1px rgba(30,23,18,.1), 0 14px 26px -14px rgba(30,23,18,.5), 0 34px 56px -40px rgba(30,23,18,.55); transform: rotate(var(--dreh)); }
.polaroid img:not(.polaroid-aufkleber) { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #E3DACA; filter: sepia(.1) saturate(.94) contrast(1.03); }
.polaroid--hoch img:not(.polaroid-aufkleber) { aspect-ratio: 4 / 5; }
.polaroid figcaption { display: grid; place-items: center; min-height: 56px; padding: 10px 6px 12px; font-family: var(--text); font-style: italic; font-weight: 600; font-size: 17px; line-height: 1.25; text-align: center; color: var(--holz); text-wrap: balance; }
.polaroid figcaption small { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; letter-spacing: .02em; color: var(--tinte-2); }
/* Reißzwecke */
.polaroid-pin, .karte-pin { position: absolute; z-index: 3; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 36% 32%, #E4F2BF 0 9%, #A9C770 20%, var(--gruen) 50%, var(--gruen-dunkel) 100%); box-shadow: inset 0 -2px 3px rgba(23,17,13,.25), 3px 6px 6px -2px rgba(30,23,18,.45); }
.polaroid-pin { top: -9px; left: calc(50% - 11px); }
/* Aufkleber auf dem Polaroid */
.polaroid-aufkleber { --kleb: 12deg; position: absolute; z-index: 2; right: -30px; bottom: 30px; width: 96px; height: auto; filter: drop-shadow(0 6px 7px rgba(30,23,18,.35)); transform: rotate(var(--kleb)); }
.polaroid-aufkleber--gross { width: 124px; right: -40px; bottom: 92px; }

/* Zwei Polaroids (2023): das zweite hängt schräg darunter und ragt in die freie Fläche unter dem Text */
.reise-bild--paar { display: grid; justify-items: start; }
.reise-bild--paar .polaroid--hoch { z-index: 2; width: clamp(184px, 13vw, 196px); margin: -22px 0 0 clamp(-170px, -12vw, -120px); }

/* ---------- Karte ---------- */
.reise-karte { margin: 0; min-width: 0; }
.karte-blatt { position: relative; padding: clamp(12px, 1.6vw, 20px); background-color: var(--papier-karte); background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .26 0 0 0 0 .18 0 0 0 0 .12 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(90deg, transparent calc(50% - 7px), rgba(67,45,34,.035) calc(50% - 1px), rgba(67,45,34,.09) 50%, rgba(255,255,255,.7) calc(50% + 1px), rgba(255,255,255,0) calc(50% + 8px)),
    linear-gradient(180deg, transparent calc(50% - 7px), rgba(67,45,34,.03) calc(50% - 1px), rgba(67,45,34,.08) 50%, rgba(255,255,255,.65) calc(50% + 1px), rgba(255,255,255,0) calc(50% + 8px)),
    linear-gradient(90deg, rgba(67,45,34,.025) 0 50%, transparent 50%),
    radial-gradient(130% 100% at 50% 35%, #FDFAF3 0%, #F3EBDA 100%);
  box-shadow: 0 1px 2px rgba(30,23,18,.12), 0 26px 50px -30px rgba(30,23,18,.6); transform: rotate(-.7deg); }
.karte-pin--links { top: -8px; left: 22px; }
.karte-pin--rechts { top: -8px; right: 22px; }
.karte-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Grundkarte */
.k-netz { fill: none; stroke: rgba(67,45,34,.16); stroke-width: 1; stroke-dasharray: 2 7; }
.k-netz-text text { font: 600 16px var(--text); letter-spacing: .06em; fill: rgba(87,74,63,.75); }
.k-grenzen path { fill: none; stroke: #B09C80; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14 7 3 7; }
.k-fluesse path { fill: none; stroke: #93B4BB; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.k-huegel path { fill: none; stroke: #A38E6E; stroke-width: 2.2; stroke-linecap: round; }
.k-land text { font: 800 27px var(--display); letter-spacing: .38em; text-transform: uppercase; text-anchor: middle; fill: rgba(67,45,34,.26); }
.k-gebirge text { font: italic 600 22px var(--text); letter-spacing: .03em; text-anchor: middle; fill: #86735B; }
.k-gebirge .k-rhoen { font-size: 30px; font-weight: 700; fill: #6F5D46; }
.k-ort circle { fill: var(--papier-karte); stroke: var(--tinte-karte); stroke-width: 2.6; r: 5.5px; }
.k-ort text { font: 600 23px var(--text); fill: var(--tinte-karte); paint-order: stroke; stroke: var(--papier-karte); stroke-width: 6px; stroke-linejoin: round; }
.k-ort--gross circle { fill: var(--tinte-karte); }
.k-ort--gross text { font-weight: 700; font-size: 27px; }
.k-kartusche rect { fill: var(--papier-karte); stroke: var(--holz); stroke-width: 1.6; }
.k-kartusche .k-kartusche-innen { fill: none; stroke-width: .8; }
.k-kartusche-titel { font: 900 29px var(--display); letter-spacing: .08em; text-transform: uppercase; fill: var(--holz); }
.k-kartusche-unter { font: italic 600 16.5px var(--text); fill: var(--tinte-2); }
.k-rahmen { fill: none; stroke: var(--holz); stroke-width: 2; }
.k-massstab path { fill: none; stroke: var(--tinte-2); stroke-width: 2.2; }
.k-massstab rect { fill: var(--tinte-2); }
.k-massstab text { font: 700 18px var(--text); fill: var(--tinte-2); }
.k-nord .k-nord-a { fill: var(--holz); }
.k-nord .k-nord-b { fill: var(--papier-karte); stroke: var(--holz); stroke-width: 1.4; stroke-linejoin: round; }
.k-nord text { font: 900 24px var(--display); fill: var(--holz); }

/* Geschichte auf der Karte */
.k-anfrage { fill: none; stroke: var(--holz); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; opacity: .75; }
.k-anfrage-spitze { fill: none; stroke: var(--holz); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.k-lernweg { fill: none; stroke: var(--gruen); stroke-width: 4.6; stroke-linecap: round; stroke-dasharray: 1; }
.k-notiz { font: italic 600 21px var(--text); fill: var(--holz); }
.k-notiz--gross { font-size: 28px; font-weight: 700; }
.k-weg path { fill: none; stroke: var(--gruen-tief); stroke-width: 5.5; stroke-linecap: round; stroke-dasharray: 13 11; }
.k-weg-zeichner { fill: none; stroke: #fff; stroke-width: 20; stroke-linecap: round; stroke-dasharray: 1; }
.k-fest-zug { transform: translate(var(--fx), var(--fy)); }
.k-fest-mast { fill: none; stroke: var(--holz); stroke-width: 3; stroke-linecap: round; }
.k-fest-tuch { fill: var(--holz); }
.k-fest-text { font: italic 700 21px var(--text); fill: var(--holz); paint-order: stroke; stroke: var(--papier-karte); stroke-width: 6px; stroke-linejoin: round; }
.k-tirol-pfeil { fill: none; stroke: var(--holz); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 6 6; }
.k-tirol-spitze { fill: none; stroke: var(--holz); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.k-hof { fill: var(--gruen); opacity: 0; }
.k-pin-schatten { fill: rgba(30,23,18,.28); }
.k-pin-nadel { fill: var(--gruen); stroke: var(--gruen-dunkel); stroke-width: 1.5; }
.k-pin-punkt { fill: #fff; }
.k-laden-name { font: 900 38px var(--display); text-transform: uppercase; letter-spacing: .01em; fill: var(--tinte); paint-order: stroke; stroke: var(--papier-karte); stroke-width: 9px; stroke-linejoin: round; }
.k-laden-jahr { font: italic 700 22px var(--text); fill: var(--gruen-dunkel); paint-order: stroke; stroke: var(--papier-karte); stroke-width: 6px; stroke-linejoin: round; }
.k-tausend-rand { fill: var(--gruen-tief); }
.k-tausend-grund { fill: var(--gruen); stroke: rgba(255,255,255,.6); stroke-width: 1.6; stroke-dasharray: 3 4; }
.k-tausend-zahl { font: 900 37px var(--display); fill: #fff; }
.k-tausend-text { font: 800 14.5px var(--display); letter-spacing: .12em; text-transform: uppercase; fill: #fff; }
.k-tausend-innen { filter: drop-shadow(0 5px 6px rgba(30,23,18,.3)); }

/* Jahresleiste unter der Karte */
.karte-jahre { display: flex; justify-content: space-between; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1.5px dashed rgba(67,45,34,.28); }
.karte-jahre a { position: relative; display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 6px; border-radius: 8px; font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: .04em; color: var(--tinte-2); text-decoration: none; isolation: isolate; }
.karte-jahre a::before { content: ""; position: absolute; inset: 7px 0; z-index: -1; border-radius: 6px; background: var(--gruen-tief); opacity: 0; transform: scale(.8); transition: opacity .3s var(--ease), transform .4s var(--ease-feder); }
.karte-jahre a:hover { color: var(--tinte); }
.karte-jahre a.ist-aktiv { color: #fff; }
.karte-jahre a.ist-aktiv::before { opacity: 1; transform: none; }

/* ---------- Bilanz ---------- */
.reise-bilanz { display: grid; justify-items: start; gap: 10px; padding-top: clamp(28px, 3.4vw, 44px); border-top: 2px dashed rgba(67,45,34,.25); }
.bilanz-oben { margin: 0; font: 800 15px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--gruen-dunkel); }
.bilanz-zahl { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: clamp(10px, 1.2vw, 18px); margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .9; color: var(--tinte); }
.bilanz-rund { font-size: clamp(30px, 3vw, 46px); color: var(--tinte-2); }
.bilanz-zahl b { font-size: clamp(112px, 12vw, 196px); font-weight: 900; line-height: .86; letter-spacing: -.02em; color: var(--gruen-tief); }
.bilanz-wort { font-size: clamp(44px, 5vw, 80px); }

/* ---------- Bewegung (nur wenn geschichte.js läuft) ---------- */
.reise-lebt .polaroid { opacity: 0; transform: translate3d(0, -28px, 0) rotate(calc(var(--dreh) + 7deg)) scale(1.06); transition: opacity .25s linear, transform .8s var(--ease-feder); }
.reise-lebt .polaroid.ist-angepinnt { opacity: 1; transform: rotate(var(--dreh)); }
.reise-lebt .polaroid--hoch { transition-delay: .25s; }
.reise-lebt .polaroid-pin { opacity: 0; transform: translate3d(-6px, -30px, 0) scale(1.6); transition: opacity .12s linear .42s, transform .42s var(--ease-feder) .42s; }
.reise-lebt .polaroid--hoch .polaroid-pin { transition-delay: .67s; }
.reise-lebt .ist-angepinnt .polaroid-pin { opacity: 1; transform: none; }
.reise-lebt .polaroid-aufkleber { opacity: 0; transform: rotate(calc(var(--kleb) + 24deg)) scale(1.35); transition: opacity .15s linear .7s, transform .5s var(--ease-feder) .7s; }
.reise-lebt .ist-angepinnt .polaroid-aufkleber { opacity: 1; transform: rotate(var(--kleb)); }

.reise-lebt .k-schritt { opacity: 0; transition: opacity .45s var(--ease); }
.reise-lebt .k-schritt.ist-an { opacity: 1; }
.reise-lebt .k-pin { transform: translate3d(0, -46px, 0); transition: transform .7s var(--ease-feder); }
.reise-lebt .k-laden.ist-an .k-pin { transform: none; }
.reise-lebt .k-pin-schatten { transform: scale(.3); transform-box: fill-box; transform-origin: center; transition: transform .7s var(--ease-feder); }
.reise-lebt .k-laden.ist-an .k-pin-schatten { transform: none; }
.reise-lebt.im-blick .k-laden.ist-hier .k-hof { animation: k-puls 2.4s var(--ease) infinite; }
@keyframes k-puls { 0% { opacity: .28; transform: scale(.35); } 100% { opacity: 0; transform: scale(1.25); } }
.reise-lebt .k-anfrage { stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease); }
.reise-lebt .k-anfragen.ist-an .k-anfrage { stroke-dashoffset: 0; }
.reise-lebt .k-anfrage:nth-child(3) { transition-delay: .15s; }
.reise-lebt .k-anfrage:nth-child(5) { transition-delay: .3s; }
.reise-lebt .k-anfrage-spitze, .reise-lebt .k-anfragen .k-notiz { opacity: 0; transition: opacity .3s var(--ease) .9s; }
.reise-lebt .k-anfragen.ist-an .k-anfrage-spitze, .reise-lebt .k-anfragen.ist-an .k-notiz { opacity: .75; }
.reise-lebt .k-lernweg { stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease-io); }
.reise-lebt .k-lernwege.ist-an .k-lernweg { stroke-dashoffset: 0; }
.reise-lebt .k-lernweg:nth-child(2) { transition-delay: .12s; }
.reise-lebt .k-lernweg:nth-child(3) { transition-delay: .24s; }
.reise-lebt .k-weg-zeichner { stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s var(--ease-io); }
.reise-lebt .k-weg-zeichner.ist-an { stroke-dashoffset: 0; }
.reise-lebt .k-fest-zug { transform: none; transition: transform 1.3s var(--ease-io) .2s; }
.reise-lebt .k-fest-zug.ist-an { transform: translate(var(--fx), var(--fy)); }
.reise-lebt .k-fest-tuch { transform-box: fill-box; transform-origin: left center; transform: scaleX(.2); transition: transform .6s var(--ease-feder) .2s; }
.reise-lebt .k-fest.ist-an .k-fest-tuch { transform: none; }
.reise-lebt .k-tausend-innen { transform: rotate(-24deg) scale(1.5); transition: transform .6s var(--ease-feder); }
.reise-lebt .k-tausend.ist-an .k-tausend-innen { transform: none; }

/* Polaroid in die Hand nehmen: richtet sich beim Zeigen kurz gerade */
@media (hover: hover) and (pointer: fine) {
  .polaroid { transition: transform .35s var(--ease); }
  .polaroid:hover, .reise-lebt .polaroid.ist-angepinnt:hover { z-index: 3; transform: translate3d(0, -6px, 0) rotate(calc(var(--dreh) * .25)) scale(1.025); transition: transform .35s var(--ease); transition-delay: 0s; }
}

/* ---------- Handy: eine Spalte, Pfad mit Pins links ---------- */
@media (max-width: 1199px) {
  .reise-jahre::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 40px; border-left: 3px dashed rgba(94,125,31,.45); }
  .reise-jahr { padding-left: 50px; }
  .reise-jahr::before { content: ""; position: absolute; left: 3px; top: calc(clamp(30px, 4vw, 52px) + 6px); width: 24px; height: 24px; border-radius: 50% 50% 50% 0; background: var(--gruen); box-shadow: inset 0 0 0 2px var(--gruen-dunkel), 0 4px 6px -2px rgba(30,23,18,.4); transform: rotate(-45deg); }
  .reise-jahr::after { content: ""; position: absolute; left: 12px; top: calc(clamp(30px, 4vw, 52px) + 15px); width: 7px; height: 7px; border-radius: 50%; background: #fff; }
  .reise-jahr:first-child::before { top: 14px; }
  .reise-jahr:first-child::after { top: 23px; }
  .reise-karte { max-width: 660px; width: 100%; justify-self: center; }
}
@media (min-width: 700px) and (max-width: 1199px) {
  .reise-jahr { grid-template-columns: minmax(0, 1fr) 236px; column-gap: 40px; align-items: start; }
  .reise-bild { padding-top: 14px; }
}
@media (max-width: 699px) {
  .reise-jahr { gap: 30px; }
  .reise-bild { display: flex; }
  .reise-jahr:nth-child(even) .reise-bild { justify-content: flex-end; }
  .polaroid { width: min(72%, 250px); padding: 9px 9px 0; }
  .polaroid figcaption { min-height: 48px; font-size: 16px; padding: 8px 4px 10px; }
  .reise-jahr:nth-child(even) .polaroid-aufkleber { right: auto; left: -24px; }
  .polaroid-aufkleber { width: 78px; right: -20px; }
  .polaroid-aufkleber--gross { width: 96px; right: -22px; }
  .reise-bild--paar { display: flex; justify-content: flex-start; align-items: flex-start; }
  .reise-bild--paar .polaroid { width: 56%; }
  .reise-bild--paar .polaroid--hoch { width: 46%; margin: 46px 0 0 -14px; }
  .reise-bild--paar figcaption { font-size: 14px; padding-inline: 2px; }
  .karte-blatt { transform: rotate(-.5deg); padding: 10px; }
  .karte-jahre { gap: 0; }
  .karte-jahre a { font-size: 15px; min-width: 40px; padding: 0; }
  .k-land text { font-size: 32px; letter-spacing: .3em; }
  .k-ort text { font-size: 30px; stroke-width: 7px; }
  .k-ort--gross text { font-size: 31px; }
  .k-ort circle { r: 7px; }
  .k-laden-name { font-size: 43px; stroke-width: 10px; }
  .k-laden-jahr { font-size: 26px; stroke-width: 7px; }
  .k-gebirge text:not(.k-rhoen), .k-netz-text, .k-kartusche, .k-nord, .k-huegel path { display: none; }
  .k-gebirge .k-rhoen { font-size: 36px; }
  .k-notiz { font-size: 24px; } .k-notiz--gross { font-size: 32px; }
  .k-fest-text { font-size: 27px; }
  .k-massstab text { font-size: 24px; }
  .k-grenzen path { stroke-width: 3.2; }
  .k-fluesse path { stroke-width: 4; }
}

/* ---------- Desktop: Karte links fest, Jahre rechts ---------- */
@media (min-width: 1200px) {
  .reise { grid-template-columns: minmax(0, 4.1fr) minmax(0, 5.9fr); column-gap: clamp(48px, 5vw, 88px); row-gap: 0; align-items: start; }
  .reise-jahre { grid-column: 2; grid-row: 1; }
  .reise-karte { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: calc(var(--kopf-h) + 30px); }
  .reise-bilanz { grid-column: 2; grid-row: 2; margin-top: 24px; }
  .reise-jahr { grid-template-columns: minmax(0, 1fr) clamp(212px, 17.5vw, 262px); column-gap: clamp(30px, 3vw, 48px); align-items: start; }
  .reise-bild { padding-top: 18px; }
  .karte-svg { max-height: calc(100vh - var(--kopf-h) - 170px); }
}

@media print {
  .reise-lebt .polaroid, .reise-lebt .polaroid-pin, .reise-lebt .polaroid-aufkleber, .reise-lebt .k-schritt, .reise-lebt .k-pin, .reise-lebt .k-tausend-innen, .reise-lebt .k-fest-tuch { opacity: 1 !important; transform: none !important; }
  .reise-lebt .polaroid { transform: rotate(var(--dreh)) !important; }
  .reise-lebt .k-anfrage, .reise-lebt .k-lernweg, .reise-lebt .k-weg-zeichner { stroke-dashoffset: 0 !important; }
  .reise-karte { position: static !important; }
}

/* Runde 30: ohne Zeichenabstand, sonst schneidet Safari die Buchstaben am hellen Rand an */
.k-laden-name { letter-spacing: 0; }