/* ══════════════════════════════════════════════════════════════════════
   ZUSATZLEISTUNGEN — Anbindung an die Hauptseite (nur Reutlingen)

   Diese Datei wird NUR in das Upload-Paket von Reutlingen eingesetzt.
   Der gemeinsame Quelltext `seite-standort.html` bleibt unangetastet:
   null geaenderte Zeilen. Wurmsham bekommt weder diese Datei noch einen
   Verweis darauf.

   Sie fasst nichts an, was die Reise steuert — keine Zone, keine Tafel,
   keine Kamera. Alles hier ist entweder neu (Hinweis, Streifen) oder
   haengt sich an vorhandene Behaelter an (Kopfnavigation, Blattmenue,
   Fusslinks).
   ══════════════════════════════════════════════════════════════════ */

/* ── In der Kopfnavigation ────────────────────────────────────────
   Die zwei Eintraege erben das Aussehen von `.nav a` aus der Hauptseite
   — sie sollen aussehen wie die anderen. Abgesetzt sind sie trotzdem,
   denn sie tun etwas anderes: Die sieben Leistungen springen in eine
   Scrollzone, diese beiden wechseln die Seite. */
.nav a[data-zusatz]{opacity:.82;}
.nav a[data-zusatz]:hover{opacity:1;}
.nav a[data-zusatz="erst"]{margin-left:9px;padding-left:15px;}
.nav a[data-zusatz="erst"]::after{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:13px;background:rgba(232,235,238,.18);}

/* ── Im Vollbildmenue ─────────────────────────────────────────────
   Unter 1080 px ist die Kopfnavigation ausgeblendet und der Knopf
   „Menue" tritt an ihre Stelle. Dort stehen die zwei Eintraege ebenso —
   mit einer Trennlinie, weil sie die Seite wechseln. */
#blattnav a[data-zusatz="erst"]{margin-top:10px;padding-top:16px;
  border-top:1px solid rgba(232,235,238,.12);}

/* ── KEIN FESTER HINWEIS MEHR ─────────────────────────────────────
   Hier standen die Regeln fuer ein schmales Band unter der Kopfleiste,
   das auf Schirmen unter 1080 px die zwei Leistungen nannte.
   Entfernt am 28.08.2026 auf Vorgabe von Dennis: Die Eintraege stehen
   im Vollbildmenue und im Streifen vor den Fragen; ein drittes festes
   Element kostet auf dem Telefon nur Hoehe. */

/* ── DER STREIFEN ZWISCHEN REISE UND FRAGEN ───────────────────────
   Die dramaturgisch richtige Stelle: Der Besucher hat gerade „Dein Setup
   steht." gelesen und abgeschickt oder nicht. Vorher waere es eine
   Unterbrechung der Reise, nachher — im Fuss — nur noch eine Fussnote.

   Er liegt VOR `#fragen` und beruehrt die Reise nicht: ein eigener
   Abschnitt im Fluss, kein Eingriff in die Buehne. */
.zusatz-streifen{
  position:relative;z-index:2;
  padding:clamp(46px,7vh,88px) var(--rand,clamp(20px,5vw,84px))
          clamp(30px,5vh,58px);
  background:#08090B;
}
.zusatz-streifen::before{
  content:'';position:absolute;left:var(--rand,clamp(20px,5vw,84px));right:0;top:0;
  height:1px;pointer-events:none;
  background:linear-gradient(90deg,#1E2329 0,#1E2329 44%,
    rgba(30,35,41,.35) 72%,transparent 100%);}
.zusatz-streifen .nummer{
  display:block;font-family:'Martian Mono',ui-monospace,Menlo,monospace;
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:#666D75;margin-bottom:1.1rem;}
.zusatz-streifen h2{
  margin:0 0 1rem;font-family:'Archivo',system-ui,sans-serif;
  font-size:clamp(24px,3.4vw,40px);font-weight:700;
  letter-spacing:-.03em;line-height:1.08;color:#E8EBEE;}
.zusatz-streifen > p{
  margin:0 0 2rem;font-family:'Archivo',system-ui,sans-serif;
  font-size:15.5px;line-height:1.75;color:#9AA1A9;max-width:54ch;}

.zusatz-karten{display:grid;gap:1px;max-width:58rem;
  grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));
  background:#1E2329;border:1px solid #1E2329;}
.zusatz-karten a{
  display:flex;flex-direction:column;gap:.55rem;
  background:#0D0F13;padding:1.5rem 1.5rem 1.65rem;
  text-decoration:none;color:inherit;
  transition:background 220ms cubic-bezier(.4,0,.15,1);}
.zusatz-karten a:hover,.zusatz-karten a:focus-visible{background:#12161C;}
.zusatz-karten a:focus-visible{outline:1px solid #E8A33C;outline-offset:-1px;}
.zusatz-karten .kopfzeile{
  font-family:'Martian Mono',ui-monospace,Menlo,monospace;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:#666D75;}
.zusatz-karten .name{
  font-family:'Archivo',system-ui,sans-serif;
  font-size:19px;font-weight:700;letter-spacing:-.02em;color:#E8EBEE;}
.zusatz-karten .dazu{
  font-family:'Archivo',system-ui,sans-serif;
  font-size:14px;line-height:1.65;color:#9AA1A9;}
.zusatz-karten .weiter{
  margin-top:.35rem;display:inline-flex;align-items:center;gap:.55em;
  font-family:'Martian Mono',ui-monospace,Menlo,monospace;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:#9AA1A9;
  transition:color 220ms cubic-bezier(.4,0,.15,1);}
/* Der Strich waechst ueber `transform`, nicht ueber `width`: Eine
   Breitenaenderung laesst den Browser bei jedem Bild neu umbrechen,
   waehrend `scaleX` nur zeichnet. Der Strich ist fest 24 px breit und
   liegt im Ruhezustand auf zwei Dritteln — sichtbar dasselbe wie
   16 px, aber ohne Layout. */
.zusatz-karten .weiter::after{
  content:'';width:24px;height:1px;background:currentColor;
  transform:scaleX(.667);transform-origin:left;
  transition:transform 220ms cubic-bezier(.4,0,.15,1);}
.zusatz-karten a:hover .weiter{color:#F0D9B4;}
.zusatz-karten a:hover .weiter::after{transform:scaleX(1);}
@media (prefers-reduced-motion:reduce){
  .zusatz-karten a,.zusatz-karten .weiter,.zusatz-karten .weiter::after{
    transition:none;}
}