/* Baustein „Scan“: ein Kartenblatt hinter Werner.
   Oben das Kartenbild: Ein goldener Scanstrich fährt einmal (unter 5 s, WCAG 2.2.2) über das
   Luftbild und legt das Relief frei; jeder Punkt erscheint, wenn der Strich ihn erreicht.
   Unten der Kartenrand wie auf dem Messtischblatt: Übersichtskarte (Heatmap der Region) mit
   markiertem Ausschnitt und Zeichenerklärung. Werners Kopf sitzt vor dem hellen Rand, nicht
   vor dem Bild, damit Ohren und Fell lesbar bleiben.
   Ohne Bewegung (prefers-reduced-motion): halb Luftbild, halb Relief, alles sichtbar.
   Zeitachse: --scan-start + --scan-dauer * --xf (0..1 = Lage im Bild von links). */

.scan{--scan-start:.6s;--scan-dauer:3.3s;margin:0;position:relative;display:flex;flex-direction:column}
.scan__blatt{position:relative;border:var(--l-haar) solid var(--tinte);background:var(--papier);container-type:inline-size}

/* --- Kartenbild --- */
.scan__bild{position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:var(--l-haar) solid var(--tinte);background:var(--papier-2)}
.scan__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.scan__relief{position:absolute;inset:0;clip-path:inset(0 0 0 0);
  animation:scan-frei var(--scan-dauer) linear var(--scan-start) both}
@keyframes scan-frei{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.scan__flaeche{position:absolute;inset:0;width:100%;height:100%}
.scan__flaeche pattern line{stroke:var(--gold);stroke-width:9}
.scan__flaeche path{fill:url(#scan-schraffur);fill-opacity:.55;stroke:var(--gold);stroke-width:2.5;stroke-dasharray:9 6;vector-effect:non-scaling-stroke}

/* Scanstrich mit Band, wie ein Messbalken */
.scan__strich{position:absolute;top:0;bottom:0;left:0;width:3px;margin-left:-1.5px;background:var(--gold);
  box-shadow:0 0 0 1px rgba(30,38,41,.55);opacity:0;
  animation:scan-strich var(--scan-dauer) linear var(--scan-start) both}
.scan__strich::before{content:"";position:absolute;top:0;bottom:0;right:3px;width:3.5rem;background:rgba(201,162,74,.22);border-right:1px solid rgba(201,162,74,.5)}
@keyframes scan-strich{0%{left:0;opacity:1}92%{opacity:1}100%{left:100%;opacity:0}}

/* Ecken-Marken */
.scan__marke{position:absolute;top:.6rem;padding:.2rem .55rem;font:600 var(--s-klein)/1.2 var(--f-schild);
  background:var(--papier);color:var(--tinte);border:var(--l-haar) solid var(--tinte)}
.scan__marke--luft{left:.6rem;animation:scan-aus .4s linear calc(var(--scan-start) + var(--scan-dauer) * .3) both}
.scan__marke--relief{right:.6rem;animation:scan-ein .4s linear calc(var(--scan-start) + var(--scan-dauer) * .85) both}
@keyframes scan-aus{from{opacity:1}to{opacity:0;visibility:hidden}}
@keyframes scan-ein{from{opacity:0}to{opacity:1}}

/* Punkte: Kartensignatur auf Papierplatte, Name daneben */
.scan__punkte{list-style:none;margin:0;padding:0}
.scan__punkt{position:absolute;left:calc(var(--xf) * 100%);top:calc(var(--yf) * 100%);width:2rem;
  display:flex;align-items:center;transform:translate(-50%,-50%);
  animation:scan-punkt .35s ease-out calc(var(--scan-start) + var(--scan-dauer) * var(--xf)) both}
@keyframes scan-punkt{from{opacity:0;transform:translate(-50%,-50%) scale(.4)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.scan__zeichen{display:grid;place-items:center;width:2rem;height:2rem;background:var(--papier);color:var(--tinte);
  border:2px solid var(--tinte);flex:none}
.scan__zeichen .i{width:1.35rem;height:1.35rem}
.scan__name{position:absolute;left:calc(100% + .1rem);top:50%;transform:translateY(-50%);
  font:600 var(--s-klein)/1.15 var(--f-schild);color:var(--tinte);background:var(--papier);
  padding:.1rem .4rem;border:var(--l-haar) solid var(--tinte);white-space:nowrap}
.scan__punkt--links .scan__name{left:auto;right:calc(100% + .1rem)}

/* --- Kartenrand: Übersicht (Heatmap) und Zeichenerklärung --- */
.scan__rand{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--a-2);align-items:start;
  padding:var(--a-2);padding-right:var(--werner-platz,50%)}
.scan__uebersicht{margin:0;animation:scan-ein .5s linear calc(var(--scan-start) + var(--scan-dauer) * .9) both}
.scan__uebersicht img{display:block;width:100%;height:auto;border:var(--l-haar) solid var(--tinte)}
.scan__uebersicht-titel{display:flex;align-items:center;gap:.35rem;margin-top:.35rem;font:600 var(--s-klein)/1.2 var(--f-schild)}
.scan__uebersicht-titel .i{width:1.25rem;height:1.25rem}
.scan__legende{display:grid;grid-template-columns:repeat(2,max-content);gap:.35rem 1rem;margin:0}
.scan__legende div{display:flex;align-items:center;gap:.45rem}
.scan__legende dt{display:flex}
.scan__legende dd{margin:0;font:600 var(--s-klein)/1.2 var(--f-schild)}
.scan__legende .i{width:1.35rem;height:1.35rem}
.scan__schraffur{display:inline-block;width:1.35rem;height:1.1rem;border:2px dashed var(--gold);
  background:repeating-linear-gradient(45deg,var(--gold) 0 2px,transparent 2px 6px)}

/* Schmale Blätter: kleinere Zeichen, keine Namen, Rand untereinander */
@container (max-width: 30rem){
  .scan__name{display:none}
  .scan__punkt--neben{display:none}
  .scan__punkt{width:1.6rem}
  .scan__zeichen{width:1.6rem;height:1.6rem;border-width:1.5px}
  .scan__zeichen .i{width:1.05rem;height:1.05rem}
  .scan__marke{top:.4rem;padding:.1rem .4rem}
  .scan__marke--luft{left:.4rem}.scan__marke--relief{right:.4rem}
  .scan__rand{grid-template-columns:minmax(0,1.2fr) auto;padding-right:var(--a-2)}
  .scan__legende{grid-template-columns:max-content}
}

/* --- Unterschrift --- */
.scan>figcaption{margin-top:var(--a-2);position:relative;z-index:2}
.scan__titel{margin:0 0 var(--a-1);font-size:var(--s-klein);line-height:1.45}
.scan__quelle{margin:0;font-size:var(--s-klein);color:var(--tinte-2);line-height:1.4}
.scan__lizenz{display:inline}
.scan__lizenz summary{display:inline;cursor:pointer;text-decoration:underline;text-underline-offset:.15em;color:var(--wasser)}
.scan__lizenz[open]{display:block}
.scan__lizenz p{margin:.3rem 0 0}
.scan__nochmal{margin-top:var(--a-2)}

/* Warten, bis das Relief geladen ist (setzt das Seitenskript) */
.scan--warten .scan__relief,.scan--warten .scan__strich,.scan--warten .scan__marke,.scan--warten .scan__punkt,.scan--warten .scan__uebersicht{animation-play-state:paused}

/* Ohne Bewegung: geteiltes Bild, alles sichtbar */
@media (prefers-reduced-motion: reduce){
  .scan__relief{animation:none;clip-path:inset(0 0 0 50%)}
  .scan__strich{animation:none;left:50%;opacity:1}
  .scan__marke,.scan__punkt,.scan__uebersicht{animation:none}
}

/* --- Einbau in den Startseitenkopf --- */
.blattkopf__bild{position:relative;min-width:0}
.scan__werner{position:relative;z-index:1;align-self:flex-end;line-height:0;
  margin:calc(-1 * var(--werner-ueber,9.5rem)) -.25rem 0 0;pointer-events:none}
.scan__werner img{display:block;width:auto;height:var(--werner-h,240px);object-fit:contain;object-position:bottom}
.blattkopf--start .scan{--werner-platz:52%}
.blattkopf--start .scan__werner{--werner-h:clamp(190px,19vw,240px);--werner-ueber:clamp(7rem,8.5vw,9rem)}
@media (min-width:48em){
  .blattkopf--start .blattkopf__feld{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start}
}
@media (max-width:47.99em){
  .blattkopf__bild{margin-top:var(--a-3)}
  .blattkopf--start .scan__werner{--werner-h:clamp(170px,48vw,220px);--werner-ueber:2.5rem}
}

/* --- App-Leiste „So sieht es in der App aus“ (Startseite, unter dem Seitenkopf) ---
   Echte Bildschirmfotos als kleine Telefone mit Tintenrand, kein Schatten, immer alle fünf in
   einer Reihe (Marcus 24.10.2026: „viel kleiner und alle in einer Reihe“). Unter jedem Bild nur
   Zeichen und Name; am Handy stehen die Namen als eine Zeile unter der Reihe. */
.app-leiste__reihe{list-style:none;margin:var(--a-3) 0 var(--a-2);padding:0;display:grid;
  grid-template-columns:repeat(6,minmax(0,8.5rem));gap:var(--a-2) var(--a-3);justify-content:start}
.app-bild{min-width:0}
.app-bild figure{margin:0}
.app-bild__screen{display:block;width:100%;height:auto;border-radius:.6rem;background:#111}
.app-bild__titel{display:flex;align-items:flex-start;gap:.35rem;margin-top:var(--a-1);font:600 var(--s-klein)/1.25 var(--f-schild)}
.app-bild__titel .i{width:1.2rem;height:1.2rem;flex:none;margin-top:.05rem}
.app-bild__pro{display:inline-block;margin-left:.25rem;padding:0 .3rem;border:var(--l-haar) solid var(--tinte);font:inherit}
.app-leiste__namen{display:block;margin:0 0 var(--a-2);font:600 var(--s-klein)/1.4 var(--f-schild)}
.app-leiste__quelle{font-size:var(--s-klein);color:var(--tinte-2);line-height:1.4;margin:0}
@media (max-width:39.99em){
  .app-leiste__reihe{grid-template-columns:repeat(6,minmax(0,1fr));gap:.4rem}
  .app-bild__screen{border-width:1px;border-radius:.55rem}
  .app-bild figcaption{display:none}
  .app-leiste__namen{display:block}
}