/* Modul karte (21.10.2026): gezeichnete Karte über der Bürofoto-Slideshow in #zusammenarbeit.
   „Webdesign aus Deutschland.“ -> „Um genau zu sein: aus Stuttgart.“ -> Baden-Württemberg,
   Zoom, Stuttgart leuchtet -> Feld „acessio im Zentrum Stuttgarts“ -> Fotos.
   Sichtbar nur mit JavaScript und ohne reduzierte Bewegung (Skript setzt .ist-bereit, beim Start
   .ist-laeuft); sonst bleibt alles wie bisher. Liegt absolut über .of__buehne: kein Einfluss auf
   das Layout.
   Korrektur nach QA 22.10.2026: bis zum Start unsichtbar (Foto bleibt sichtbar), beim Start weich
   eingeblendet; Marker als Pseudoelement; einspaltig steht die Bildfläche vor der Textspalte. */
.of__buehne{position: relative; isolation: isolate;}
/* Einspaltig (unter 900 px): Bildfläche vor die Textspalte, damit die Karte beim Betreten der
   Sektion läuft. Nur die Anzeige-Reihenfolge, das HTML (und damit Vorlese- und Tab-Reihenfolge)
   bleibt; gilt auch ohne JavaScript und bei reduzierter Bewegung, also ohne Layoutsprung. */
@media (max-width: 899px){.of__buehne{order: -1;}}
.of-karte{display: none;}
.of-karte.ist-bereit{display: block;
  position: absolute;
  inset: 0;
  z-index: 6;
  /* clip statt nur hidden: kein Scroll-Container. Bei dir=rtl meldete Chrome sonst beim Platzieren
     des Feldes eine Layoutverschiebung der Karte (Scroll-Ursprung), obwohl sich nichts sichtbar bewegt. */
  overflow: hidden;
  overflow: clip;
  border: 1px solid var(--line, rgba(25, 25, 28, 0.10));
  border-radius: 22px;
  background: #FBFAF8;
  color: var(--ink, #19191C);
  container: okarte / size;
  -webkit-tap-highlight-color: transparent;
  /* geladen, aber noch nicht gestartet: unsichtbar, Klicks gehen an die Slideshow */
  opacity: 0;
  visibility: hidden;
  transition: opacity 420ms var(--ease, ease), visibility 0s linear 420ms;}
.of-karte.ist-bereit.ist-laeuft{opacity: 1;
  visibility: visible;
  cursor: pointer;
  /* weicher Anlauf statt des schnellen --ease: das Papier legt sich über das Foto, ohne aufzublitzen */
  transition: opacity 560ms cubic-bezier(0.45, 0, 0.3, 1), visibility 0s linear 0s;}
.of-karte.ist-bereit.ist-aus{opacity: 0; pointer-events: none;
  transition: opacity 420ms var(--ease, ease), visibility 0s linear 420ms;}
.of-karte.ist-loch{-webkit-mask-image: radial-gradient(circle at var(--loch-x, 50%) var(--loch-y, 50%), transparent var(--loch, 0px), #000 calc(var(--loch, 0px) + 28px));
  mask-image: radial-gradient(circle at var(--loch-x, 50%) var(--loch-y, 50%), transparent var(--loch, 0px), #000 calc(var(--loch, 0px) + 28px));}

/* Karte: auf der Endseite (rechts, bei dir=rtl links); die Zeichnung selbst wird nie gespiegelt. */
.of-karte__bild{position: absolute;
  inset-block: 5%;
  inset-inline-end: 4%;
  inline-size: 58%;}
.of-karte__bild svg{display: block; width: 100%; height: 100%; overflow: visible;}

/* Sätze: auf der Anfangsseite oben (links, bei dir=rtl rechts) */
.of-karte__text{position: absolute;
  inset-block-start: clamp(16px, 5.2cqi, 34px);
  inset-inline-start: clamp(16px, 5.2cqi, 34px);
  inline-size: 38%;
  display: grid;
  text-align: start;}
.of-karte__satz{grid-area: 1 / 1;
  margin: 0;
  font-family: var(--serif, inherit);
  font-size: clamp(19px, 5.4cqi, 36px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
  /* Papierkante um die Schrift: beim Zoom laufen Linien darunter durch */
  text-shadow: 0 0 0.12em #FBFAF8, 0 0 0.3em #FBFAF8, 0 0 0.5em #FBFAF8;
  opacity: 0;
  transform: translateY(0.35em);
  transition: opacity 480ms var(--ease, ease), transform 700ms var(--ease, ease);}
.of-karte__vorsatz{display: block;
  margin-bottom: 0.45em;
  font-family: var(--sans, inherit);
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted, #6E6A66);}
/* Marker unter „aus Stuttgart.“: eigenes Pseudoelement über der Papierkante (text-shadow), per
   multiply verrechnet. Auf Papier erscheint das Hellcyan des Markers, die Schrift bleibt dunkel
   (#19191C × #DDF8FA); optisch liegt der Marker unter der Schrift, die Papierkante schützt weiter
   vor Linien beim Zoom. Zieht sich von der Anfangsseite her auf (clip-path).
   Feinschliff 22.10.2026: .of-karte__ziel bleibt inline (vorher inline-block, das bei Umbruch so breit
   wie die ganze Textspalte wurde). Der Bezugsrahmen des ::after reicht dann vom Anfang der ersten bis
   zum Ende der letzten Zeile (CSS 2.1, 10.1); weil jede Zeile an der Anfangsseite beginnt, liegt der
   Marker genau unter der letzten Zeile, bei dir=rtl von rechts. Ohne Innenabstand, also genau so breit
   wie der Text. bottom 0.06em hält die bisherige Höhe (vorher 0.02em über der Zeilenunterkante). */
.of-karte__ziel{position: relative;
  display: inline;}
.of-karte__ziel::after{content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0.06em;
  height: 0.5em;
  background: url(/assets/img/zeichen/marker-cyan.svg) no-repeat 0 0 / 100% 100%;
  mix-blend-mode: multiply;
  pointer-events: none;
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  transition: -webkit-clip-path 650ms var(--ease, ease) 380ms, clip-path 650ms var(--ease, ease) 380ms;}
[dir="rtl"] .of-karte__ziel::after{-webkit-clip-path: inset(0 0 0 100%); clip-path: inset(0 0 0 100%);}
@supports not (mix-blend-mode: multiply){.of-karte__ziel::after{opacity: 0.55;}}

/* Feld am Ort (Lage setzt das Skript; --x/--y sind Pixel im Feld) */
.of-karte__feld{position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  display: grid;
  gap: 0.28em;
  max-inline-size: min(17.5em, calc(100cqi - 28px));
  padding: 0.8em 1.05em 0.85em;
  font-size: clamp(12px, 2.6cqi, 17px);
  line-height: 1.15;
  text-align: start;
  background: url(/assets/img/zeichen/karte-feld-394a868bd08a.svg) 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(5px 6px 0 #DDF8FA);
  opacity: 0;
  transform: translate(var(--x, 0px), calc(var(--y, 0px) + 8px));
  transition: opacity 450ms var(--ease, ease), transform 600ms var(--ease, ease);}
.of-karte__feld::after{content: "";
  position: absolute;
  border-radius: 2px;
  background: #0E8A97;
  opacity: 0;
  transition: opacity 300ms ease 350ms;}
.of-karte__feld[data-lage="seite"]::after{top: 50%; height: 2px; width: var(--zeiger, 12px); margin-top: -1px;}
.of-karte__feld[data-lage="seite"]:not([data-rtl])::after{left: 100%;}
.of-karte__feld[data-lage="seite"][data-rtl]::after{right: 100%;}
.of-karte__feld[data-lage="oben"]::after{top: 100%; left: var(--zeiger-x, 50%); width: 2px; height: var(--zeiger, 12px); margin-left: -1px;}
.of-karte__feld[data-lage="unten"]::after{bottom: 100%; left: var(--zeiger-x, 50%); width: 2px; height: var(--zeiger, 12px); margin-left: -1px;}
/* Wie die H2 daneben: Wortmarke, darunter „im Zentrum Stuttgarts“ */
.of-karte__titel{display: grid; justify-items: start; gap: 0.12em;
  font-family: var(--serif, inherit); font-weight: 700; font-size: 1.12em; letter-spacing: -0.02em; color: var(--ink, #19191C);}
.of-karte__marke{display: inline-flex; align-items: flex-end; --marke-h: 1.02em;}
.of-karte__marke .marke-inline{height: var(--marke-h); width: auto; transform: translateY(0.12em);}
[dir="rtl"] .of-karte__marke{direction: ltr;}  /* Wortmarke bleibt „acessio.“ wie .of__marke in sprachen.css */
.of-karte__marke .marke__punkt{width: calc(var(--marke-h) * 0.205); height: calc(var(--marke-h) * 0.205);
  margin: 0 0 calc(var(--marke-h) * 0.02) calc(var(--marke-h) * -0.034);}
.of-karte__adresse{font-family: var(--sans, inherit); font-size: 0.82em; font-weight: 600; color: var(--muted, #6E6A66);}

/* Hochformat (Tablet-Spalte): Sätze oben über die ganze Breite, Karte darunter */
@container okarte (max-aspect-ratio: 21 / 20){
  .of-karte__text{inline-size: auto; inset-inline-end: clamp(16px, 5.2cqi, 34px);}
  .of-karte__satz{font-size: clamp(19px, 6.4cqi, 36px);}
  .of-karte__bild{inset-block: 27% 4%; inset-inline: 6%; inline-size: auto;}
}

/* Linien zeichnen sich (Masken-Zug von 1 auf 0), Flächen blenden ein */
.okarte-zug{stroke-dasharray: 1.02 1.02; stroke-dashoffset: 1.02;}
.okarte-flaeche{opacity: 0; transition: opacity 700ms var(--ease, ease);}
.okarte-bw{opacity: 0;}
.okarte-ort__innen{opacity: 0;
  transform: scale(0.3);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 300ms ease, transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1);}
.okarte-ort__schein,
.okarte-ort__welle{opacity: 0; transform-box: fill-box; transform-origin: center;}

.of-karte.ist-1 .okarte-zug--de{stroke-dashoffset: 0; transition: stroke-dashoffset 1700ms cubic-bezier(0.45, 0, 0.3, 1);}
.of-karte.ist-1 .okarte-flaeche--de{opacity: 1; transition-delay: 1000ms;}
.of-karte.ist-1 .of-karte__satz--1{opacity: 1; transform: none; transition-delay: 250ms;}
.of-karte.ist-2 .of-karte__satz--1{opacity: 0; transform: translateY(-0.3em); transition-delay: 0ms;}
.of-karte.ist-2 .of-karte__satz--2{opacity: 1; transform: none; transition-delay: 300ms;}
.of-karte.ist-2 .of-karte__ziel::after{-webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0);}
.of-karte.ist-2 .okarte-zug--bwde{stroke-dashoffset: 0; transition: stroke-dashoffset 1000ms cubic-bezier(0.45, 0, 0.3, 1) 150ms;}
.of-karte.ist-2 .okarte-flaeche--bwde{opacity: 1; transition-delay: 650ms;}
.of-karte.ist-2 .okarte-ort__innen{opacity: 1; transform: scale(0.6); transition-delay: 900ms;}
.of-karte.ist-3 .okarte-flaeche--bw,
.of-karte.ist-3 .okarte-flaeche--see{opacity: 1; transition: none;}
.of-karte.ist-4 .okarte-ort__innen{transform: scale(1); transition-delay: 0ms;}
.of-karte.ist-4 .okarte-ort__schein{animation: okarte-schein 1700ms ease-in-out 2 both;}
.of-karte.ist-4 .okarte-ort__welle{animation: okarte-welle 1700ms cubic-bezier(0.2, 0.6, 0.35, 1) 2;}
.of-karte.ist-4 .okarte-zug--see{stroke-dashoffset: 0; transition: stroke-dashoffset 700ms ease-out 100ms;}
.of-karte.ist-4 .okarte-zug--neckar{stroke-dashoffset: 0; transition: stroke-dashoffset 1200ms cubic-bezier(0.45, 0, 0.3, 1);}
.of-karte.ist-5 .of-karte__satz--2{opacity: 0; transform: translateY(-0.3em); transition-delay: 0ms;}
.of-karte.ist-5 .of-karte__feld{opacity: 1; transform: translate(var(--x, 0px), var(--y, 0px)); transition-delay: 120ms;}
.of-karte.ist-5 .of-karte__feld::after{opacity: 1;}
@keyframes okarte-schein{
  0%   { opacity: 0.45; transform: scale(0.7); }
  50%  { opacity: 1;    transform: scale(1.18); }
  100% { opacity: 0.8;  transform: scale(1); }
}
@keyframes okarte-welle{
  0%   { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0;   transform: scale(2.7); }
}

@media (prefers-reduced-motion: reduce){.of-karte{display: none !important;}}
@media print{.of-karte{display: none !important;}}