/* ==========================================================================
   Quetschn Academy · Die Lernreise als Wanderweg auf die Wasserkuppe
   Papierkarte mit Rhön-Kuppen, ein Pfad nach oben, fünf hölzerne Wegweiser.
   Ohne JavaScript und bei reduzierter Bewegung steht alles fertig da.
   ========================================================================== */

.lr-karte {
  --papier-karte: #F4EEE2;
  --pfosten: 72px;
  --brett-h: 70px;
  --pfosten-b: 14px;
  position: relative;
  margin: 0;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--papier-karte);
  box-shadow: 0 0 0 1px rgba(30,23,18,.08), 0 40px 80px -50px rgba(30,23,18,.55);
}

/* ---------- Landschaft (SVG) ---------- */
.lr-bild { display: block; width: 100%; height: auto; }
.lr-fern { fill: #EBE4D3; stroke: #DAD0B9; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.lr-mitte { fill: #E2E1CB; stroke: #C9CDAB; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.lr-vorn { stroke: #8E9F5E; stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.lr-kamm { fill: none; stroke: #8E9F5E; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.lr-hoehen path { fill: none; stroke: #97A86A; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }

.lr-weg-rand, .lr-weg-bett, .lr-weg-linie { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lr-weg-rand { stroke: #A9B784; stroke-width: 17; opacity: .5; }
.lr-weg-bett { stroke: #F8F4EA; stroke-width: 12; }
.lr-weg-linie { stroke: var(--gruen-tief); stroke-width: 3.4; stroke-dasharray: 11 9; }
.lr-weg-zeichner { fill: none; stroke: #fff; stroke-width: 56; stroke-dasharray: 1 1; stroke-dashoffset: 0; }

/* Wegpunkte und Gipfelfahne im Bild: nur in der kleinen Ansicht, groß sitzen dort die Holzschilder */
.lr-wegpunkt circle { fill: var(--gruen-tief); stroke: var(--papier-karte); stroke-width: 6; }
.lr-wegpunkt text { font-family: var(--display); font-weight: 800; font-size: 24px; fill: var(--weiss); text-anchor: middle; }
.lr-wegpunkt { transform-box: fill-box; transform-origin: center; transform: scale(2.2); }
.lr-stange { fill: none; stroke: var(--holz); stroke-width: 7; stroke-linecap: round; }
.lr-knauf { fill: var(--holz); }
.lr-tuch { fill: var(--gruen); stroke: var(--gruen-tief); stroke-width: 3; stroke-linejoin: round; }
.lr-flagge { transform-box: fill-box; transform-origin: 0 100%; }
.lr-gipfelname, .lr-gipfelhoehe { text-anchor: end; paint-order: stroke; stroke: var(--papier-karte); stroke-width: 10px; stroke-linejoin: round; }
.lr-gipfelname { font-family: var(--display); font-weight: 800; font-size: 54px; letter-spacing: .06em; text-transform: uppercase; fill: var(--gruen-dunkel); }
.lr-gipfelhoehe { font-family: var(--text); font-weight: 600; font-size: 44px; fill: var(--tinte-2); }
/* im kleinen Übersichtsbild braucht der Weg mehr Strich, sonst verschwindet er */
@media (max-width: 1279px) {
  .lr-weg-rand { stroke-width: 34; }
  .lr-weg-bett { stroke-width: 24; }
  .lr-weg-linie { stroke-width: 8; stroke-dasharray: 20 16; }
  .lr-weg-zeichner { stroke-width: 80; }
}
@media (min-width: 640px) and (max-width: 1279px) {
  .lr-weg-rand { stroke-width: 24; }
  .lr-weg-bett { stroke-width: 17; }
  .lr-weg-linie { stroke-width: 5.5; stroke-dasharray: 15 12; }
}
@media (min-width: 640px) {
  .lr-wegpunkt { transform: scale(1.35); }
  .lr-gipfelname { font-size: 30px; }
  .lr-gipfelhoehe { font-size: 26px; }
}

/* ---------- Wegweiser aus Holz ---------- */
.lr-halte { list-style: none; margin: 0; padding: 0; counter-reset: halt; }
.lr-halt { counter-increment: halt; }
.lr-weiser { position: relative; display: inline-block; vertical-align: top; }
.lr-brett {
  position: relative; z-index: 1;
  display: grid; align-content: center; gap: 6px;
  min-height: var(--brett-h);
  padding: 13px 44px 13px 20px;
  color: #F8F1E4;
  background:
    linear-gradient(180deg, rgba(255,228,196,.14) 0, rgba(255,228,196,0) 22%, rgba(10,6,4,0) 64%, rgba(10,6,4,.34) 100%),
    linear-gradient(rgba(24,14,9,.16), rgba(24,14,9,.16)),
    url("../img/holz-bahn-klein.webp") var(--holz-x, 18%) var(--holz-y, 34%) / 620px auto,
    #4A3022;
  box-shadow: inset 0 2px 0 rgba(255,226,190,.2), inset 0 -3px 0 rgba(12,7,4,.4);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%);
  border-radius: 3px 0 0 3px;
}
/* zwei Nagelköpfe, dort wo das Brett am Pfosten sitzt */
.lr-brett::before, .lr-brett::after {
  content: ""; position: absolute; left: calc(var(--pfosten-x, 30%) - 3.5px); width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #E4D3B6 0 18%, #8C6C4E 45%, #2A1C14 100%);
  box-shadow: 0 1px 0 rgba(255,226,190,.18);
}
.lr-brett::before { top: 4px; }
.lr-brett::after { bottom: 4px; }
.lr-nr { font-family: var(--display); font-weight: 800; font-size: 14px; line-height: 1; letter-spacing: .18em; text-transform: uppercase; color: #C3DB8E; }
.lr-brett h3 { margin: 0; font-size: clamp(21px, 1.75vw, 25px); font-size: clamp(20px, 1.9cqw, 25px); line-height: .95; letter-spacing: .01em; color: #F8F1E4; white-space: nowrap; text-shadow: 0 1px 0 rgba(8,5,3,.6), 0 -1px 0 rgba(255,230,200,.07); }
.lr-pfosten, .lr-wimpel, .lr-gipfelschild { display: none; }
.lr-halt p { margin: 0; color: var(--tinte); text-wrap: pretty; }

/* ==========================================================================
   Kleine Ansicht (Handy und Tablet): Übersichtsbild oben, darunter der Weg
   senkrecht nach unten mit den Schildern untereinander
   ========================================================================== */
@media (max-width: 1279px) {
  .lr-karte { max-width: 760px; }
  .lr-bild { border-bottom: 1px solid rgba(142,159,94,.35); }
  .lr-halte { padding: clamp(30px, 6vw, 44px) clamp(18px, 5vw, 40px) clamp(10px, 3vw, 24px); }
  .lr-halt { position: relative; padding: 0 0 34px 54px; }
  /* Wegstück zwischen zwei Wegpunkten */
  .lr-halt::before {
    content: ""; position: absolute; left: 17px; top: 0; bottom: 0; width: 4px; border-radius: 2px;
    background: linear-gradient(180deg, var(--gruen-tief) 0 11px, transparent 11px 20px) 0 0 / 4px 20px repeat-y;
    box-shadow: 0 0 0 4px #F8F4EA;
  }
  .lr-halt:first-child::before { top: 35px; }
  .lr-halt:last-child::before { bottom: auto; height: 35px; }
  .lr-halt:last-child { padding-bottom: 20px; }
  /* Wegpunkt mit Nummer, passend zum Übersichtsbild */
  .lr-halt::after {
    content: counter(halt); position: absolute; left: 4px; top: 22px; z-index: 1;
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    background: var(--gruen-tief); color: var(--weiss); box-shadow: 0 0 0 4px var(--papier-karte);
    font-family: var(--display); font-weight: 800; font-size: 16px; line-height: 1;
  }
  .lr-weiser { filter: drop-shadow(0 8px 8px rgba(46,31,23,.26)); max-width: 100%; }
  .lr-brett { --pfosten-x: 26px; }
  .lr-brett h3 { white-space: normal; font-size: clamp(24px, 6.4vw, 30px); }
  .lr-halt p { margin-top: 14px; font-size: 17.5px; line-height: 1.55; max-width: 38ch; }
}

/* Tablet quer und kleine Laptops: Übersichtsbild links mitlaufend, Schilder rechts */
@media (min-width: 900px) and (max-width: 1279px) {
  .lr-karte { max-width: none; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; overflow: clip; }
  .lr-gipfelname { font-size: 42px; }
  .lr-gipfelhoehe { font-size: 36px; }
  .lr-brett h3 { font-size: clamp(23px, 2.4vw, 27px); }
  .lr-bild { position: sticky; top: calc(var(--kopf-h) + 28px); margin: 32px 0 32px 32px; width: calc(100% - 32px); border-bottom: 0; clip-path: inset(0 round 14px); box-shadow: none; }
  .lr-halte { padding: 40px 32px 18px 36px; }
}

/* ==========================================================================
   Große Ansicht: Pfad über die ganze Breite, Schilder abwechselnd
   ========================================================================== */
@media (min-width: 1280px) {
  .lr-karte { aspect-ratio: 1320 / 760; container-type: inline-size; --brett-h: clamp(60px, 5.3cqw, 70px); --pfosten: clamp(62px, 5.5cqw, 72px); }
  .lr-bild { position: absolute; inset: 0; width: 100%; height: 100%; }
  .lr-wegpunkte, .lr-gipfel { display: none; }
  .lr-halte { position: absolute; inset: 0; }
  .lr-halt { position: absolute; left: var(--lr-x); top: var(--lr-y); width: 0; height: 0; }

  .lr-weiser { position: absolute; left: 0; bottom: 0; padding-bottom: var(--pfosten); transform: translateX(-30%); filter: drop-shadow(0 12px 10px rgba(46,31,23,.24)); }
  .lr-brett { height: var(--brett-h); min-height: 0; padding-block: 0; transform: rotate(var(--lr-neigung, 0deg)); transform-origin: var(--pfosten-x, 30%) 50%; }
  /* Pfosten: steht auf dem Weg, ragt oben ein Stück über das Brett */
  .lr-pfosten {
    display: block; position: absolute; z-index: 0; left: calc(30% - var(--pfosten-b) / 2); bottom: 0;
    width: var(--pfosten-b); height: calc(var(--pfosten) + var(--brett-h) + 12px);
    border-radius: 3px 3px 1px 1px;
    background: linear-gradient(90deg, #22160F 0, #4E3526 22%, #6B4A36 44%, #4A3224 72%, #20140E 100%);
    transform-origin: 50% 100%;
  }
  /* Schatten des Pfostens auf dem Boden, die Sonne steht links */
  .lr-pfosten::after {
    content: ""; position: absolute; left: 4px; bottom: -4px; width: 46px; height: 8px; border-radius: 50%;
    background: radial-gradient(farthest-side at 10% 50%, rgba(46,31,23,.42), rgba(46,31,23,0));
  }

  /* Text neben dem Schild: abwechselnd über dem Schild und unter dem Weg */
  .lr-halt p { position: absolute; width: 210px; width: var(--lr-b, 16.2cqw); font-size: clamp(15.5px, 1.3cqw, 17.5px); line-height: 1.48; }
  .lr-halt--oben p { left: calc(100px - var(--lr-b, 16.2cqw)); bottom: calc(var(--pfosten) + var(--brett-h) + 20px); }
  .lr-halt--unten p { left: var(--lr-tx, -12px); top: var(--lr-ty, 26px); }

  /* Gipfel: Fahne oben auf dem letzten Pfosten, daneben der Name */
  .lr-wimpel {
    display: block; position: absolute; left: calc(30% - 2px); bottom: calc(var(--pfosten) + var(--brett-h) + 10px);
    width: 4px; height: 58px; border-radius: 2px; background: linear-gradient(90deg, #2B1C14, #5B3E2D 50%, #2B1C14);
  }
  .lr-wimpel::before { content: ""; position: absolute; left: -2px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: #3B281D; }
  .lr-wimpel svg { position: absolute; left: 3px; top: 2px; width: 50px; max-width: none; height: 33px; overflow: visible; fill: var(--gruen); stroke: var(--gruen-tief); stroke-width: 1.5; stroke-linejoin: round; transform-origin: 0 50%; }
  .lr-gipfelschild {
    display: block; position: absolute; left: calc(30% + 64px); bottom: calc(var(--pfosten) + var(--brett-h) + 36px);
    white-space: nowrap; font-family: var(--display); font-weight: 800; font-size: 16px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--gruen-dunkel);
  }
  .lr-gipfelschild b { display: block; margin-top: 5px; font-family: var(--text); font-weight: 600; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--tinte-2); }

  /* Feinabstimmung je Halt */
  .lr-halt:nth-child(4) { --lr-tx: -30px; --lr-ty: 34px; }
  .lr-halt:nth-child(5) { --lr-tx: -10px; --lr-ty: 30px; --lr-b: 14.4cqw; }
  .lr-halt:nth-child(1) { --lr-neigung: -1.2deg; }
  .lr-halt:nth-child(2) { --lr-neigung: .7deg; }
  .lr-halt:nth-child(3) { --lr-neigung: -.5deg; }
  .lr-halt:nth-child(4) { --lr-neigung: 1deg; }
  .lr-halt:nth-child(5) { --lr-neigung: -.8deg; }
  .lr-halt:nth-child(2) .lr-brett { --holz-x: 60%; --holz-y: 12%; }
  .lr-halt:nth-child(3) .lr-brett { --holz-x: 82%; --holz-y: 70%; }
  .lr-halt:nth-child(4) .lr-brett { --holz-x: 40%; --holz-y: 88%; }
  .lr-halt:nth-child(5) .lr-brett { --holz-x: 4%; --holz-y: 52%; }
}

/* ==========================================================================
   Bewegung: nur wenn lernreise.js die Karte vorbereitet hat (.lr-wartet).
   Der Pfad zeichnet sich von unten nach oben, jedes Schild klappt beim
   Erreichen auf. Einmal, dann bleibt alles stehen.
   Übergänge hängen nur am Ankommen (.ist-offen, .ist-da): das Verstecken
   beim Vorbereiten passiert sofort und ist nie zu sehen.
   ========================================================================== */
.lr-wartet .lr-weg-zeichner { stroke-dashoffset: 1; }

/* Übersichtsbild: Wegpunkte springen auf, oben geht die Fahne hoch */
.lr-wartet .lr-wegpunkt { opacity: 0; transform: scale(1.2); }
.lr-wartet .lr-wegpunkt.ist-da { opacity: 1; transform: scale(2.2); transition: opacity .2s linear, transform .6s var(--ease-feder); }
@media (min-width: 640px) {
  .lr-wartet .lr-wegpunkt { transform: scale(.7); }
  .lr-wartet .lr-wegpunkt.ist-da { transform: scale(1.35); }
}
.lr-wartet .lr-flagge { opacity: 0; transform: scaleY(.2); }
.lr-wartet .lr-gipfelname, .lr-wartet .lr-gipfelhoehe { opacity: 0; }
.lr-wartet .lr-gipfel.ist-da .lr-flagge { opacity: 1; transform: none; transition: opacity .2s linear .15s, transform .8s var(--ease-feder) .15s; }
.lr-wartet .lr-gipfel.ist-da .lr-gipfelname, .lr-wartet .lr-gipfel.ist-da .lr-gipfelhoehe { opacity: 1; transition: opacity .6s var(--ease) .5s; }

/* Wegweiser: das Brett dreht sich am Pfosten in Richtung Gipfel und federt nach */
.lr-wartet .lr-brett { opacity: 0; transform: perspective(700px) rotateY(-82deg) rotate(var(--lr-neigung, 0deg)); transform-origin: var(--pfosten-x, 30%) 50%; }
.lr-wartet .lr-halt p { opacity: 0; transform: translateY(10px); }
.lr-wartet .ist-offen .lr-brett { opacity: 1; transform: perspective(700px) rotateY(0deg) rotate(var(--lr-neigung, 0deg)); transition: opacity .16s linear .12s, transform .95s var(--ease-feder) .12s; }
.lr-wartet .ist-offen p { opacity: 1; transform: none; transition: opacity .7s var(--ease) .4s, transform .7s var(--ease) .4s; }

@media (min-width: 1280px) {
  .lr-wartet .lr-pfosten { opacity: 0; transform: scaleY(.25); }
  .lr-wartet .ist-offen .lr-pfosten { opacity: 1; transform: none; transition: opacity .12s linear, transform .4s var(--ease); }
  .lr-wartet .lr-wimpel { opacity: 0; transform: scaleY(.3); transform-origin: 50% 100%; }
  .lr-wartet .lr-wimpel svg { transform: scaleX(.15); }
  .lr-wartet .lr-gipfelschild { opacity: 0; transform: translateY(6px); }
  .lr-wartet .ist-offen .lr-wimpel { opacity: 1; transform: none; transition: opacity .2s linear .6s, transform .6s var(--ease) .6s; }
  .lr-wartet .ist-offen .lr-wimpel svg { transform: none; transition: transform 1.1s var(--ease-feder) 1s; }
  .lr-wartet .ist-offen .lr-gipfelschild { opacity: 1; transform: none; transition: opacity .6s var(--ease) 1.25s, transform .6s var(--ease) 1.25s; }
}
@media (max-width: 1279px) {
  .lr-wartet .lr-halt::before { clip-path: inset(0 0 100% 0); }
  .lr-wartet .lr-halt::after { opacity: 0; transform: scale(.6); }
  .lr-wartet .lr-halt.ist-offen::before { clip-path: inset(0 0 0 0); transition: clip-path .9s var(--ease); }
  .lr-wartet .lr-halt.ist-offen::after { opacity: 1; transform: none; transition: opacity .2s linear .05s, transform .55s var(--ease-feder) .05s; }
}

@media (prefers-reduced-motion: reduce) {
  .lr-wartet .lr-weg-zeichner { stroke-dashoffset: 0; }
  .lr-wartet .lr-brett { opacity: 1; transform: rotate(var(--lr-neigung, 0deg)); }
  .lr-wartet .lr-halt p, .lr-wartet .lr-pfosten, .lr-wartet .lr-wimpel, .lr-wartet .lr-wimpel svg, .lr-wartet .lr-gipfelschild,
  .lr-wartet .lr-flagge, .lr-wartet .lr-gipfelname, .lr-wartet .lr-gipfelhoehe, .lr-wartet .lr-halt::after { opacity: 1; transform: none; }
  .lr-wartet .lr-wegpunkt { opacity: 1; }
  .lr-wartet .lr-halt::before { clip-path: none; }
}

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