/* ============================================================
   E · EVOLUTION — die vorhandene Version, handwerklich gehoben.
   Warm, einladend, mit Tiefe. Alle Effekte sind STATISCH und
   damit praktisch kostenlos; bewegt wird nur transform/opacity.
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

:root{
  /* ------------------------------------------------------------------
     Farben nach „Handbuch Erscheinungsbild 3.0" der Bundesagentur für
     Arbeit. Nichts hiervon ist Geschmack — es ist vorgeschrieben.

     Der Entscheidungsbaum zur Farbkennung (Kap. 4.3) führt für dieses
     Terminal zu: Kunden der BA → themenspezifische Information → Info
     für Arbeitnehmer → nicht nur Senioren/U25/Fachvermittlung
     → Farbkennung „Alle Arbeitnehmer" = HKS 14 = RGB 226/0/26.

     Die Sekundärfarben des Handbuchs sind ein CODE, keine Palette:
     Gelb heißt „Senioren 50+", Blau heißt „Arbeitgeber", Grün „SGB II".
     Wer sie zur Dekoration verwendet, codiert eine falsche Zielgruppe.
     Deshalb gibt es hier genau eine Buntfarbe und sonst Neutraltöne.
     ------------------------------------------------------------------ */
  --rot:#E2001A;          /* HKS 14 · RGB 226/0/26 · die Leitfarbe */
  --rot-30:#F6B2BA;       /* 30 % — im Handbuch ausdrücklich ausgewiesen */
  --rot-20:#F9CCD1;       /* 20 % — Tonwertstufe nach Kap. 4.1 */
  --rot-10:#FCE5E8;       /* 10 % — dieselbe Reihe */
  --rot-tief:#A8000F;     /* nur für Flächen mit weißer Schrift */

  /* BA-Rot auf Weiß erreicht 4,4:1 und ist damit als TEXTFARBE
     unzulässig. Rot ist hier Fläche und Zeichen, niemals Fließtext. */
  --ink:#16161D;
  --ink-2:#454A57;
  --ink-3:#5F6678;
  --akzent:#2B3140;       /* Anthrazit für Auswahl und Fokus — keine zweite Marke */
  --paper:#FFFDFA;
  --paper-2:#FDF6EE;
  --card:#FFFFFF;
  --line:rgba(22,22,29,.08);

  /* Tiefe durch gestaffelte, statische Schatten */
  --lift-1:0 4px 14px rgba(22,22,29,.05), 0 1px 3px rgba(22,22,29,.04);
  --lift-2:0 24px 60px rgba(22,22,29,.09), 0 6px 16px rgba(22,22,29,.05);
  --lift-3:0 48px 120px rgba(22,22,29,.14), 0 12px 32px rgba(22,22,29,.07);
  --lift-rot:0 32px 72px rgba(226,0,26,.24), 0 8px 20px rgba(226,0,26,.14);
  --lift-akzent:0 32px 72px rgba(43,49,64,.20), 0 8px 20px rgba(43,49,64,.12);

  --r-lg:64px; --r-md:44px; --r-sm:28px;
  --ease:cubic-bezier(.16,1,.3,1);
}

button:focus-visible,[tabindex]:focus-visible{outline:6px solid var(--akzent);outline-offset:6px;border-radius:inherit}

/* ===== Touch statt Maus =====
   Das Gerät wird ausschliesslich mit dem Finger bedient. Deshalb:
   - touch-action:none  -> gar keine Browsergesten mehr
   - user-select / touch-callout -> Langdruck waehlt keinen Text aus und oeffnet
     kein Kontextmenue; im Kiosk ist das sonst ein sicherer Weg in eine kaputte Anzeige
   - overscroll-behavior -> kein Gummiband-Effekt am Rand
   - user-drag -> Bilder und SVG lassen sich nicht wegziehen
   Rueckmeldung auf Druck kommt sofort (0 s hinein) und klingt weich aus —
   bei einem schnellen Tipp saehe man eine 0,3-s-Einblendung sonst gar nicht.

   HIER STAND "manipulation", UND DAS WAR DER FEHLER.
   ------------------------------------------------------------------------
   "manipulation" schaltet den Doppeltipp-Zoom ab — und ERLAUBT dabei
   ausdruecklich den Kneifzoom mit zwei Fingern. Am Geraet gepruefte Folge
   (10.09.2026): zwei Finger ueber den Bildschirm gezogen, und die ganze
   Oberflaeche zoomte. Ein Besucher haette das Terminal so unbedienbar
   hinterlassen, ohne es zu merken.

   "none" nimmt dem Browser alle Gesten ab. Das ist gefahrlos, weil auf dem
   Besucherbildschirm nichts scrollt: html, body und jede Flaeche darin stehen
   auf overflow:hidden. Wo doch einmal etwas rollen soll, bekommt genau dieses
   Element sein eigenes touch-action.

   Das viewport-Meta in index.html (user-scalable=no, maximum-scale=1) stand
   schon richtig — es allein reicht in Chromium aber nicht. */
*{touch-action:none;-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-user-drag:none}
html,body{overscroll-behavior:none}
.choice,.tile,.lang,.nbtn,.a11y,.globe,.sound{transition:transform .28s var(--ease)}
.choice:active,.tile:active,.lang:active,.nbtn:active,.a11y:active,.globe:active,.sound:active{
  transition-duration:0s}
/* Entworfen wurde auf einer festen Leinwand von 2160 x 3840 px. Die Bühne
   wird per transform auf den tatsächlichen Bildschirm skaliert — damit ist die
   Anzeige unabhängig von der Windows-Skalierung, und Schrift bleibt Vektor
   und damit gestochen scharf. */
html,body{width:100%;height:100%;overflow:hidden}
body{
  /* Hausschrift der BA ist Arial (Handbuch Kap. 3.1/3.3, verbindlich für
     PC-Anwendungen und den Online-Bereich). Ausdrücklich unzulässig sind
     die Schnitte Narrow und Extended sowie jede Breitenskalierung; der
     Wortabstand bleibt auf normal. Arial liegt auf jedem Windows vor. */
  font-family:Arial,"Helvetica Neue",Helvetica,"Liberation Sans",sans-serif;
  word-spacing:normal;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  position:relative;
}
/* Statischer Farbschleier — gibt Wärme und Tiefe, kostet nichts */
.stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  /* Die Wärme kommt aus dem Papierton, nicht aus einem zweiten Farbton.
     Die Leitfarbe liegt nur als sehr schwacher Hauch oben rechts darüber —
     genug, um die Fläche zu beleben, zu wenig, um rosa zu wirken. */
  background:
    radial-gradient(1500px 1200px at 88% -10%, rgba(226,0,26,.055), transparent 58%),
    linear-gradient(178deg, #FFFDFA 0%, #FDF6EE 46%, #FFFCF7 100%);
}

/* ---------- Zonen (Bedienhöhe nach DIN 18040-1) ---------- */
.stage{position:absolute;left:0;top:0;width:2160px;height:3840px;
  transform-origin:0 0;z-index:1;overflow:hidden}
/* Am Terminal wird mit dem Finger bedient — dort gibt es keinen Zeiger. */
body.vollbild{cursor:none}
.screen{position:absolute;inset:0;display:none;flex-direction:column}
.screen.on{display:flex}

/* Kopfband — reine Anzeige */
/* ---------- Dienststellen-Marke ----------
   Nach „Handbuch Erscheinungsbild 3.0" der Bundesagentur für Arbeit:

   · Das Signet ist der rote Kreis mit dem weiß ausgesparten, dynamisch
     stilisierten „A". Das „A" steht für „Arbeit". Jede Veränderung der
     Marke ist unzulässig — deshalb ist es die amtliche Pfadkontur und
     keine Nachzeichnung mehr.
   · Es darf grundsätzlich nur zusammen mit dem typografisch definierten
     Textzusatz einer BA-Dienststelle erscheinen, niemals allein (Kap. 2.1).
     Vorher stand es neben dem jeweiligen Bildschirmtitel — das las sich
     wie eine Marke „A · Ich habe meinen Job verloren".
   · Die zweizeilige Fassung ist vorzuziehen (Kap. 2.3).
   · Rundum bleibt ein Schutzraum in Größe des Signet-Durchmessers frei.
     Darin darf kein anderes Element stehen (Kap. 2.4) — daher der große
     Abstand zwischen Marke und Bildschirmtitel.
   · Der Schriftzug steht in gemischter Schreibweise. Die frühere Fassung
     „AGENTUR FÜR ARBEIT" in gesperrten Versalien war eine unzulässige
     Veränderung des Schriftzugs.
   ---------------------------------------------------------------------- */
.brand{height:240px;flex:none;display:flex;align-items:center;padding:0 120px}
.dienstmarke{display:flex;align-items:center;gap:30px;flex:none}
.signet{display:block;flex:none;width:96px;height:96px}
.dm-txt{display:flex;flex-direction:column;line-height:1.14}
.dm-txt b{font-size:46px;font-weight:700;color:var(--ink);letter-spacing:normal}
.dm-txt span{font-size:46px;font-weight:400;color:var(--ink-2);letter-spacing:normal}

.brand-spacer{flex:1}
/* Die Uhr sitzt im Markenband rechts, vor der Sprachkugel. Aus zwei bis
   drei Metern lesbar, aber ruhig: sie ist Beiwerk, nicht Aussage. Die
   Ziffern stehen in Tabellenbreite, damit die Zeile beim Minutenwechsel
   nicht zuckt. */
.uhr{display:flex;flex-direction:column;align-items:flex-end;margin-right:44px;
  line-height:1.05;flex:none}
.uhr b{font-size:64px;font-weight:700;color:var(--ink);letter-spacing:-1px;
  font-variant-numeric:tabular-nums}
.uhr span{font-size:32px;font-weight:400;color:var(--ink-3);margin-top:6px}
.low .uhr b{font-size:56px}
.low .uhr span{font-size:28px}
.sound{
  width:132px;height:132px;border-radius:999px;flex:none;border:3px solid var(--line);
  background:var(--card);box-shadow:var(--lift-1);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform .25s var(--ease);
}
.sound:active{transform:scale(.94)}
.sound svg{width:60px;height:60px}

/* ---------- Ruhezustand ---------- */
/* Die Masse standen bisher als Inline-Stil im Markup und liessen sich
   dadurch von keiner Regel ueberschreiben — der Zugaenglichkeitsmodus
   lief deshalb ins Leere. Sie gehoeren hierher. */
.hero{flex:none;height:1100px;padding:70px 120px 0;position:relative;
  display:flex;flex-direction:column}


.hero h1{
  margin-top:56px;
  font-size:170px;line-height:.94;font-weight:800;letter-spacing:normal;
  max-width:1720px;
}
.hero h1 em{font-style:normal;color:var(--rot)}
.hero p{
  margin-top:44px;font-size:62px;line-height:1.28;color:var(--ink-2);
  font-weight:400;max-width:1560px;letter-spacing:normal;
}

/* ---------- Bedienzone ---------- */
.actions{flex:none;height:1100px;display:flex;flex-direction:column;justify-content:center;padding:0 120px;gap:56px}

.choice{
  display:flex;align-items:center;gap:56px;
  border:0;width:100%;text-align:left;cursor:pointer;font:inherit;color:inherit;
  padding:66px 72px;border-radius:var(--r-lg);
  background:var(--card);box-shadow:var(--lift-2);
  transition:transform .3s var(--ease);
  position:relative;overflow:hidden;
}
.choice::after{ /* statischer Lichtverlauf oben — reine Deko, kostenlos */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 40%);
}
.choice:active{transform:scale(.985) translateY(3px)}

/* BEIDE KACHELN GLEICH HOCH -- auch wenn eine keine Unterzeile traegt.
   Seit dem 01.10.2026 hat "Ich habe einen Termin." keine Unterzeile mehr:
   Sie verriet die Antwort, und wer sie liest, tippt nicht mehr -- dann fehlt
   der Klick in der Statistik, und die ist der Nachweis gegenueber der
   Agentur. Begruendung in dokumente/TEXTE-ENTSCHEIDUNGEN.md.

   Im normalen Layout faellt das nicht auf: Das Symbol ist 188 px hoch und
   flex:none, es bestimmt die Hoehe also selbst -- Text mit Unterzeile kommt
   auf 165 px, ohne auf 87 px, beides darunter. Im abgesenkten Layout ist das
   Symbol nur 132 px, und dort entscheidet der Text: 146 px gegen 68 px. Die
   Kachel ohne Unterzeile waere 14 px flacher.

   Die Mindesthoehe ist die Hoehe der hoeheren Kachel, einschliesslich der
   Innenabstaende (box-sizing: border-box gilt global). Kein Umbau von
   .actions: deren Hoehe von 1100 px ist auf den 50-Zoll-Schirm im Hochformat
   eingemessen.

   GRENZE: Bricht eine Ueberschrift je in zwei Zeilen um, wachsen die Kacheln
   wieder unterschiedlich. Die Mindesthoehe ist ein Boden, keine Festlegung. */
.choice{min-height:320px}        /* 188 Symbol + 2*66 Innenabstand */
.low .choice{min-height:250px}   /* 146 Text   + 2*52 Innenabstand */
.choice .ic{
  width:188px;height:188px;border-radius:54px;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.choice .ic svg{width:96px;height:96px;stroke:#fff;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.ic-teal{background:linear-gradient(145deg,var(--akzent),var(--akzent));box-shadow:var(--lift-akzent)}
.ic-red{background:var(--rot);box-shadow:var(--lift-rot)}
.choice .tx{flex:1;min-width:0}
.choice .tx b{display:block;font-size:82px;font-weight:750;letter-spacing:normal;line-height:1.06}
.choice .tx span{display:block;margin-top:18px;font-size:46px;color:var(--ink-2);font-weight:400;line-height:1.3}
.choice .go{
  width:104px;height:104px;border-radius:999px;flex:none;background:var(--paper-2);
  display:flex;align-items:center;justify-content:center;
}
.choice .go svg{width:46px;height:46px;stroke:var(--ink);fill:none;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- Sprachband ---------- */


.lang-row{display:flex;gap:22px;flex-wrap:wrap}
.lang{
  border:3px solid var(--line);background:var(--card);border-radius:999px;
  padding:34px 52px;font:inherit;font-size:46px;min-height:112px;font-weight:600;color:var(--ink-2);
  cursor:pointer;box-shadow:var(--lift-1);white-space:nowrap;
  transition:transform .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.lang:active{transform:scale(.95)}
.lang.sel{border-color:var(--akzent);color:var(--akzent);background:#EDEFF3;font-weight:700}
/* Der letzte Knopf im Band ist kein Sammelbegriff, sondern ein Fenster:
   er zeigt die Sprache, die gerade oben in der zweiten Zeile spricht — im
   eigenen Schriftsystem. Dadurch ist der Zusammenhang zwischen "da oben
   steht etwas auf Vietnamesisch" und "hier unten finde ich Vietnamesisch"
   nicht angedeutet, sondern buchstäblich.
   Feste Breite, damit das Band nicht alle 4,2 s umbricht. */
.lang.more{
  border-style:dashed;color:var(--ink-3);
  width:600px;padding:20px 36px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  overflow:hidden
}
.lang.more .ml-name{
  display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  font-size:44px;font-weight:700;color:var(--akzent);line-height:1.1;
  transition:opacity .34s var(--ease), transform .34s var(--ease)
}
.lang.more .ml-rest{
  display:block;font-size:28px;font-weight:600;color:var(--ink-3);
  letter-spacing:.02em;line-height:1.1
}
.lang.more.swap .ml-name{opacity:0;transform:translateY(-12px)}
.lang.more.pulse{border-color:var(--akzent);border-style:dashed}
.lang.todo{border-color:var(--rot);color:var(--rot)}

/* ---------- Fußband ---------- */
.foot{
  flex:none;height:190px;background:var(--rot);
  display:flex;align-items:center;overflow:hidden;position:relative
}
.foot .marq{white-space:nowrap;color:#fff;font-size:48px;font-weight:600;
  will-change:transform;animation:marq 26s linear infinite}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.idle{
  position:absolute;left:0;bottom:0;height:8px;background:rgba(255,255,255,.85);
  width:100%;transform:scaleX(0);transform-origin:left center;will-change:transform
}
.rtl .idle{transform-origin:right center}



.langzone{flex:none;height:1010px;padding:0 120px;display:flex;align-items:center}
.langzone .langbox{width:100%;padding:56px 60px}


/* ===== Bedienhöhe =====
   Der Bildschirm reicht von 693 mm bis 1800 mm über Boden (50", 9:16, Oberkante 1,80 m).
   Damit deckt der DIN-18040-1-Greifbereich (380–1220 mm) nur die unteren 48 % ab —
   für Stehende ist genau das die unbequemste Zone, weil man sich vorbeugen muss.
   Standard ist deshalb der bequeme Stand-Greifbereich (rund 1030–1470 mm),
   umschaltbar auf den DIN-Bereich für Rollstuhlfahrende und kleinwüchsige Menschen.
   ACHTUNG: Die 1,80 m sind eine Angabe des Auftraggebers und vor Ort zu messen. */
/* ================================================================
   ZUGÄNGLICHKEITSMODUS — eigenes Layout, keine Verschiebung

   Die frühere Fassung schob vier Blöcke pauschal um 900 px nach unten.
   Das Sprachfeld sitzt normal bei y 2440–3450 und landete damit bei
   3340–4350 — der Bildschirm endet bei 3840. Es fiel schlicht heraus.

   Es ist ausserdem nicht nur ein Greif-, sondern auch ein Blickproblem:
   wer sitzt, schaut auf etwa 1150–1300 mm. Die Kernaussage stand bei
   1731–1414 mm; Verschieben löste das eine und liess das andere stehen.

   Gerechnet mit 1 px = 0,2883 mm und Oberkante 1800 mm:
     sitzend erreichbar (DIN 18040-1, 380–1220 mm)  ->  y 2012–3840
     stehend bequem     (1000–1500 mm)              ->  y 1041–2775

   Das Stehend-Layout bleibt deshalb unangetastet — es ist der Normalfall.
   Der Modus ordnet die Komposition neu, statt sie zu schieben.
   ================================================================ */

/* Unten wird ein Band von 160 px freigehalten. Dort stehen die beiden fest
   platzierten Knoepfe (Datenschutz, Bedienung tiefer stellen) — sonst laegen
   sie im Zugaenglichkeitsmodus unter der Navigation. */
.low .foot{margin-top:160px}
.low .a11y,.low .privacy{bottom:200px}

/* --- Startbildschirm: Marke 240 · Anzeige 1780 · Karten 990 ·
       Sprache 480 · Knopfband 160 · Fussband 190 = 3840 --- */
/* KEINE festen Hoehen im Modus. Der Inhalt einzelner Bildschirme ist
   unterschiedlich hoch — die Dolmetscher-Karte traegt eine Karte, einen
   QR-Block und zwei Kacheln. Eine feste Hoehe von 1200 px liess ihn
   ueber die Navigation laufen.
   Stattdessen: alle Bloecke wachsen mit ihrem Inhalt, der Fueller steht
   OBEN und nimmt den Rest auf. Damit legt sich der Inhalt immer von oben
   an die Navigation an, und nichts ueberlappt — egal wie hoch er ist. */
.low .hero{
  height:auto;padding:0 120px 40px;
  display:flex;flex-direction:column;justify-content:flex-end
}
/* Wer den Knopf gedrueckt hat, steht schon davor — die grosse Anmachschrift
   hat ihre Aufgabe erfuellt. Kleiner gesetzt rueckt die ganze Anzeige in den
   bequemen Blick eines Sitzenden (etwa 1150–1300 mm) statt darueber. */
.low .hero h1{font-size:86px;margin-top:0}
.low .hero #hdSub{font-size:44px;margin-top:18px}
.low .second{margin-top:40px}
.low .second .line{font-size:48px}
.low .second .name{font-size:24px}
.low .second .rule{width:8px}
.low .msg{padding:30px 44px}
.low .msg .mt{font-size:44px}

/* Karten bei y 2027–3003  ->  1216 bis 934 mm über Boden */
.low .actions{height:auto;justify-content:center;gap:48px;padding-bottom:40px}
.low .choice{padding:52px 60px}
.low .choice .ic{width:132px;height:132px}
.low .choice .tx b{font-size:64px}

/* Sprachfeld bei y 3010–3490  ->  932 bis 794 mm */
.low .langzone{height:auto;align-items:center;padding-bottom:0}
.low .langbox{padding:36px 56px}
.low .langbox-hd{display:none}
.low .lang-row{display:none}
.low .lang-gross{display:flex;min-height:150px}

.lang-gross{
  display:none;width:100%;min-height:180px;align-items:center;justify-content:center;gap:36px;
  border:4px solid var(--line);background:var(--card);border-radius:var(--r-md);
  font:inherit;font-size:62px;font-weight:700;color:var(--ink);cursor:pointer;
  box-shadow:var(--lift-1)
}
.lang-gross svg{width:76px;height:76px;stroke:var(--rot);fill:none;stroke-width:1.9}
.lang-gross:active{transform:scale(.98)}

/* --- Folgebildschirme: die Navigation wandert nach unten.
       Oben sitzt sie bei 1725–1639 mm und ist vom Rollstuhl aus unerreichbar,
       unten bei 833–750 mm ist sie bequem. Das ist die auffälligste Änderung
       des Modus — und die sachlich zwingendste.
       Kopf 260 · Füller 1140 · Titel 600 · Inhalt 1200 · Navigation 290 ·
       Knopfband 160 · Fussband 190 = 3840 --- */
.low .top{height:auto;padding-bottom:40px}
.low .mid{height:auto;padding-bottom:40px}
.low .nav{height:290px;flex:none}
.low .brand{order:0}
.low .head{order:0}
.low .fueller{order:1;flex:1}
.low .hero{order:2}
.low .actions{order:3}
.low .langzone{order:4}
.low .top{order:2}
.low .mid{order:3}
.low .langflaeche{order:3}   /* der Sprachbildschirm hat kein .mid */
.low .nav{order:4}
.low .foot{order:5}

/* --- Sprachbildschirm: als einziger ohne Füller. Das Raster traegt sich
       selbst (flex:1); die Kacheln beginnen erst bei y 1280, weil darueber
       das schwer erreichbare obere Drittel liegt. 48 Kacheln in vier Spalten
       sind zwoelf Reihen — die passen in die verbleibenden 1920 px, wenn sie
       im Modus etwas kompakter gesetzt werden. --- */
/* Dasselbe Prinzip wie ueberall im Modus: von unten anlegen. Ein fester
   Abstand nach oben hielt nicht, sobald die Ueberschrift kuerzer wurde. */
.low .langflaeche{align-items:flex-end;padding:0 120px 0}
.low .langgrid{gap:18px;grid-template-columns:repeat(4,1fr)}
.low .langk{min-height:138px;padding:14px 22px;gap:4px}
.low .langk .kn{font-size:38px}
.low .langk .kg{font-size:24px}
.low .langk[lang="ar"] .kn,.low .langk[lang="fa"] .kn,
.low .langk[lang="ur"] .kn{font-size:36px}

/* --- Der Umbau soll man sehen. Nur transform und opacity, einmalig. --- */
.umbau .hero,.umbau .actions,.umbau .langzone,
.umbau .top,.umbau .mid,.umbau .nav{
  animation:umbau .45s var(--ease) both
}
@keyframes umbau{
  from{opacity:.2;transform:translateY(-36px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .umbau .hero,.umbau .actions,.umbau .langzone,
  .umbau .top,.umbau .mid,.umbau .nav{animation:none}
}
.a11y{
  position:absolute;right:120px;bottom:262px;z-index:40;
  display:flex;align-items:center;gap:24px;border:3px solid var(--line);background:var(--card);
  border-radius:999px;padding:26px 44px;box-shadow:var(--lift-1);cursor:pointer;font:inherit
}
.a11y svg{width:52px;height:52px;stroke:var(--ink);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.a11y span{font-size:38px;font-weight:700}
/* Der Knopf sagt, was er tut. Ist der Modus an, sagt er das Gegenteil —
   „tiefer stellen" kann man nicht zweimal. Und er sieht eingeschaltet aus. */
.a11y-aus{display:none}
.low .a11y-ein{display:none}
.low .a11y-aus{display:inline}
/* Der Globus sitzt bei 1793 mm und ist vom Rollstuhl aus unerreichbar.
   Im Modus uebernimmt der grosse Sprachknopf bei 932-794 mm seine Aufgabe,
   auf Folgebildschirmen der Sprachknopf in der Navigation. Ein Knopf, den
   man sieht aber nicht erreicht, ist schlimmer als keiner. */
.low .globe{display:none}
.low .a11y{background:var(--rot);border-color:var(--rot);box-shadow:var(--lift-rot)}
.low .a11y span{color:#fff}
.low .a11y svg{stroke:#fff}


/* ===== Bewegungsregie im Ruhezustand — nur transform ===== */
.drift{
  position:absolute;top:-14%;left:-14%;width:128%;height:128%;
  pointer-events:none;z-index:0;will-change:transform;
  background:
    radial-gradient(52% 42% at 74% 12%, rgba(226,0,26,.13), transparent 66%),
    radial-gradient(46% 40% at 16% 62%, rgba(0,137,184,.10), transparent 64%);
  animation:drift 60s ease-in-out infinite
}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%    {transform:translate3d(-2.2%,1.6%,0) scale(1.05)}
  66%    {transform:translate3d(1.8%,-1.4%,0) scale(1.02)}
}
.screen.on .choice{animation:invite 9s var(--ease) infinite}
.screen.on .choice:nth-of-type(2){animation-delay:.9s}
@keyframes invite{
  0%,86%,100%{transform:translateY(0)}
  91%        {transform:translateY(-10px)}
}

/* ===== Zweite Stimme: mehrsprachig, klar untergeordnet ===== */
.second{
  margin-top:88px;display:flex;align-items:stretch;gap:40px;align-self:flex-start;
  max-width:1800px
}
.second .rule{width:12px;border-radius:999px;background:var(--rot);flex:none}
.second .col{display:flex;flex-direction:column;justify-content:center;gap:18px;min-width:0}
.second .line{
  font-size:84px;font-weight:400;color:var(--ink);letter-spacing:normal;
  white-space:nowrap;line-height:1.24;
  transition:opacity .34s var(--ease), transform .34s var(--ease)
}
.second .name{
  font-size:34px;font-weight:700;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.2em;white-space:nowrap;
  transition:opacity .34s var(--ease), transform .34s var(--ease)
}
/* Verbundene Schriften nie sperren — Arabisch und Persisch zerfielen sonst */
.second .name[lang="ar"],.second .name[lang="fa"],.second .name[lang="ur"]{
  letter-spacing:normal;text-transform:none;font-size:38px}
.second.swap .line,.second.swap .name{opacity:0;transform:translateY(-14px)}
.second[dir="rtl"] .col{align-items:flex-end}

/* ===== Kernbotschaft ===== */
.msg{
  display:inline-flex;align-items:center;gap:32px;align-self:flex-start;
  background:var(--rot-10);border:4px solid var(--rot-30);
  border-radius:var(--r-md);padding:38px 52px;box-shadow:var(--lift-1)
}
.msg .mi{width:96px;height:96px;border-radius:999px;background:var(--rot);flex:none;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--lift-rot)}
.msg .mi svg{width:50px;height:50px;stroke:#fff;fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.msg .mt{font-size:52px;font-weight:700;letter-spacing:normal;line-height:1.2;color:var(--ink)}

/* ===== Globus als universelles Sprachzeichen ===== */
.globe{
  width:190px;height:190px;border-radius:999px;flex:none;cursor:pointer;border:0;
  background:linear-gradient(145deg,#FFFFFF,#F3F4F7);box-shadow:var(--lift-2);
  display:flex;align-items:center;justify-content:center;
  transition:transform .28s var(--ease);position:relative
}
.globe:active{transform:scale(.94)}
.globe svg{width:92px;height:92px;stroke:var(--akzent);fill:none;stroke-width:1.8}
.globe .cnt{
  position:absolute;top:-10px;right:-10px;background:var(--akzent);color:#fff;
  border-radius:999px;min-width:74px;height:74px;padding:0 18px;
  display:flex;align-items:center;justify-content:center;
  font-size:34px;font-weight:750;box-shadow:var(--lift-akzent)
}

/* ===== Sprachfeld ===== */
.langbox-hd{display:flex;align-items:center;gap:32px;margin-bottom:36px}
.gi{width:120px;height:120px;border-radius:999px;flex:none;background:#F3F4F7;
  display:flex;align-items:center;justify-content:center}
.gi svg{width:72px;height:72px;stroke:var(--akzent);fill:none;stroke-width:1.8}
.gt{display:block;font-size:52px;font-weight:700;letter-spacing:normal;color:var(--ink)}
.gs{display:block;font-size:36px;color:var(--ink-3);font-weight:600;margin-top:6px}
.langbox{
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--lift-2);
  padding:48px 56px
}
.lang.pulse{border-color:var(--akzent);border-style:dashed;color:var(--akzent)}

/* ---------- Folgebildschirme ----------
   Gleiche Zonenlogik wie der Startbildschirm:
   0–1344  Anzeige (Titel, Kernaussage) — hier wird nichts berührt
   1344–2880  Inhalt, den man berührt
   2880–3072  Navigation: zurück und Sprache, am unteren Rand der Greifhöhe,
              weil das die bequemste Reichweite an einer 1820-mm-Stele ist */
/* Der Abstand von 96 px zwischen Marke und Bildschirmtitel ist kein
   Geschmack, sondern der vorgeschriebene Schutzraum. */
.head{height:260px;flex:none;display:flex;align-items:center;gap:96px;padding:0 120px}
.head .dienstmarke{gap:24px}
.head .signet{width:76px;height:76px}
.head .dm-txt b,.head .dm-txt span{font-size:34px}
.head .dm-txt{line-height:1.16}
.head .ht{font-size:40px;font-weight:700;letter-spacing:normal;color:var(--ink-3)}

.top{flex:none;height:600px;padding:8px 120px 0;display:flex;flex-direction:column}
.lead{font-size:104px;font-weight:800;letter-spacing:normal;line-height:1.02;max-width:1800px}
.sub{margin-top:26px;font-size:54px;color:var(--ink-2);line-height:1.28;max-width:1680px;font-weight:400}

.mid{flex:none;height:1340px;padding:0 120px;display:flex;flex-direction:column;justify-content:center;gap:44px}

/* Ortsangabe — auf den Endpunkten ist sie die Hauptsache */
/* Die Ortsangabe ist auf einem Endpunkt die Hauptsache. Sie trug bisher
   ein gelbes Schild — Gelb ist im BA-Farbcode aber „Senioren 50+" und
   hätte unabsichtlich eine falsche Zielgruppe codiert. Jetzt trägt sie
   die Leitfarbe in ihren amtlichen Tonwertstufen. */
.place{
  display:flex;align-items:center;gap:56px;
  background:var(--rot-10);
  border:5px solid var(--rot-30);border-radius:var(--r-lg);padding:72px 76px;
  box-shadow:var(--lift-3)
}
.place .arw{width:156px;height:156px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--rot);border-radius:999px;box-shadow:var(--lift-rot)}
.place .arw svg{width:80px;height:80px;stroke:#fff;fill:none;stroke-width:3.2;
  stroke-linecap:round;stroke-linejoin:round}
.place .pt b{display:block;font-size:88px;font-weight:700;line-height:1.08;color:var(--ink)}
.place .pt span{display:block;margin-top:16px;font-size:50px;color:var(--ink-2);font-weight:700}
.ph{border-bottom:6px dashed var(--rot-30);padding-bottom:4px}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.tile{
  border:0;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:var(--card);border-radius:var(--r-lg);padding:62px;box-shadow:var(--lift-2);
  display:flex;flex-direction:column;gap:32px;
  transition:transform .3s var(--ease)
}
.tile:active{transform:scale(.985) translateY(3px)}
.tile .ti{width:146px;height:146px;border-radius:44px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#F4F2EF,#EBE7E2)}
.tile .ti svg{width:76px;height:76px;stroke:var(--ink-2);fill:none;stroke-width:2.3;
  stroke-linecap:round;stroke-linejoin:round}
.tile b{font-size:64px;font-weight:750;letter-spacing:normal;line-height:1.08}
.tile span{font-size:44px;color:var(--ink-2);line-height:1.28}
.tile.accent .ti{background:linear-gradient(145deg,#F4F2EF,#EBE7E2)}
.tile.accent .ti svg{stroke:var(--ink-2)}

.qr-wrap{display:flex;align-items:center;gap:72px;
  background:var(--card);border-radius:var(--r-lg);padding:66px;box-shadow:var(--lift-2)}
.qr{width:440px;height:440px;flex:none;background:#fff;border-radius:28px;padding:24px;
  box-shadow:var(--lift-1)}
.qr .qrimg,.qr svg{width:100%;height:100%;display:block}
.qr-tx b{display:block;font-size:72px;font-weight:750;letter-spacing:normal;line-height:1.1}
.qr-tx span{display:block;margin-top:24px;font-size:48px;color:var(--ink-2);line-height:1.3;max-width:1000px}
/* Die ausgeschriebene Adresse kommt aus der Konfiguration und kann lang sein
   — der Terminlink hat 84 Zeichen. Ohne Umbruch lief er aus der Karte heraus.
   Bei einer URL darf an beliebiger Stelle getrennt werden. */
.qr-url{display:block;margin-top:20px;font-size:34px;color:var(--ink-3);font-weight:600;
  letter-spacing:.01em;overflow-wrap:anywhere;line-height:1.3}

/* Navigation am unteren Rand der Greifhöhe */
.nav{flex:none;height:300px;padding:0 120px;display:flex;align-items:center;gap:28px}
.nbtn{
  display:flex;align-items:center;gap:26px;border:3px solid var(--line);background:var(--card);
  border-radius:999px;padding:32px 54px;font:inherit;cursor:pointer;box-shadow:var(--lift-1);
  transition:transform .25s var(--ease)
}
.nbtn:active{transform:scale(.96)}
.nbtn svg{width:52px;height:52px;stroke:var(--ink);fill:none;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.nbtn span{font-size:46px;font-weight:700;letter-spacing:normal}
.nbtn.lang-btn svg{stroke:var(--akzent);stroke-width:1.9}
.nbtn.lang-btn span{color:var(--akzent)}
.nav-spacer{flex:1}

.rtl{direction:rtl}
.rtl .hero h1,.rtl .hero p,.rtl .lead,.rtl .sub,.rtl .choice .tx{text-align:right}
.rtl .back svg,.rtl .choice .go svg{transform:scaleX(-1)}

.rtl .tile{text-align:right}

/* Auftritt — nur transform/opacity */
.screen.on .anim{animation:rise .55s var(--ease) both}
.screen.on .anim:nth-child(1){animation-delay:.02s}
.screen.on .anim:nth-child(2){animation-delay:.07s}
.screen.on .anim:nth-child(3){animation-delay:.12s}
.screen.on .anim:nth-child(4){animation-delay:.17s}
@keyframes rise{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}

.badge{position:absolute;bottom:26px;left:26px;opacity:.55;z-index:9;background:rgba(22,22,29,.82);
  color:#fff;border-radius:20px;padding:18px 28px;font-size:26px;max-width:620px;line-height:1.35}
.badge b{display:block;font-size:32px;margin-bottom:6px}

/* ---------- Datenschutz ----------
   Bewusst leiser als der Zugänglichkeitsknopf: er gehört erreichbar, aber
   er ist keine Handlung, die jemand sucht. Gleiche Höhe, gegenüberliegende
   Seite, ohne Kartenfläche. */
.privacy{
  position:absolute;left:120px;bottom:262px;z-index:40;
  display:flex;align-items:center;gap:18px;border:0;background:none;
  padding:26px 8px;cursor:pointer;font:inherit;color:var(--ink-3)
}
.privacy svg{width:40px;height:40px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.privacy span{font-size:34px;font-weight:600}
.privacy:active{transform:scale(.96)}

.ds-liste{display:flex;flex-direction:column;gap:36px}
.ds-liste li{display:flex;align-items:flex-start;gap:36px;list-style:none}
.ds-liste .hk{
  width:76px;height:76px;border-radius:999px;flex:none;background:#F3F4F7;
  display:flex;align-items:center;justify-content:center
}
.ds-liste .hk svg{width:42px;height:42px;stroke:var(--akzent);fill:none;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.ds-liste .tx2{font-size:52px;line-height:1.24;font-weight:500;color:var(--ink);max-width:1600px}
.ds-betreiber{margin-top:56px;font-size:34px;line-height:1.4;color:var(--ink-3);max-width:1600px}
.ds-betreiber:empty{display:none}
.auf-datenschutz .privacy{display:none}

/* ---------- Alle Sprachen ----------
   Endonyme, keine Flaggen: Arabisch ist nicht Saudi-Arabien, Kurdisch hat
   keine Flagge, und Deutsch ist nicht nur Deutschland. Vier Spalten passen
   bei 2160 px; das Raster nimmt bis zu rund 48 Sprachen auf, ohne dass
   jemand scrollen muss — Scrollen ist auf einem Terminal ein Fehler. */
.langflaeche{flex:1;min-height:0;padding:0 120px 40px;display:flex;align-items:flex-start}
.langgrid{
  width:100%;display:grid;gap:26px;align-content:start;
  grid-template-columns:repeat(auto-fill,minmax(420px,1fr))
}
/* Jede Kachel trägt zwei Zeilen: den Namen der Sprache in ihrer eigenen
   Schrift und darunter das Willkommen in derselben Sprache. Das ist die
   ganze Grafik — und sie ist reiner Inhalt, keine Dekoration.
   Keine Flaggen: Arabisch ist nicht ein Land, Kurdisch hat keinen Staat,
   und auf anderthalb Metern Abstand ist eine Flagge ohnehin ein Farbfleck,
   während arabische oder bengalische Schrift auf drei Meter erkennbar ist. */
.langk{
  min-height:158px;padding:24px 28px;border-radius:var(--r-sm);
  border:3px solid var(--line);background:var(--card);box-shadow:var(--lift-1);
  font:inherit;color:var(--ink);cursor:pointer;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  text-align:center;
  animation:kachel .52s var(--ease) both;
  animation-delay:calc(var(--i) * 13ms)
}
.langk .kn{
  font-size:46px;font-weight:700;line-height:1.08;letter-spacing:normal;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.langk .kg{
  font-size:30px;font-weight:500;color:var(--ink-3);line-height:1.2;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.langk.sel{border-color:var(--akzent);background:#EDEFF3}
.langk.sel .kn{color:var(--akzent)}
.langk:active{transform:scale(.97)}
/* Verbundene Schriften nie sperren und etwas kleiner setzen — sonst
   überlaufen sie die Kachel oder zerfallen. */
.langk[lang="ar"] .kn,.langk[lang="fa"] .kn,.langk[lang="ur"] .kn{
  letter-spacing:normal;font-size:44px}

/* Auftritt als Welle — 48 Kacheln in gut einer halben Sekunde.
   Nur transform und opacity, also praktisch kostenlos. */
@keyframes kachel{
  from{opacity:0;transform:translateY(30px) scale(.97)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .langk{animation:none}
}

/* ---------- Was am Empfang zu sagen ist ----------
   Ein Zitat, kein Text: zwei deutsche Wörter, die der Besucher aussprechen
   soll. Sie stehen bewusst nicht in den Sprachdateien — übersetzt wären sie
   wertlos, weil die Kollegin am Empfang sie nicht versteht. Deshalb sind sie
   auch optisch als Zitat gesetzt und nicht als Fließtext. */
.sagwort{display:flex;gap:24px;margin-top:34px;flex-wrap:wrap}
.rtl .sagwort{flex-direction:row}
.sagwort span{
  display:inline-block;font-size:56px;font-weight:750;letter-spacing:normal;
  color:var(--ink);background:var(--rot-10);border:4px solid var(--rot-30);
  border-radius:var(--r-sm);padding:20px 40px;box-shadow:var(--lift-1)
}

/* ---------- Ruhefrage ----------
   Volle Abdunklung statt eines Bandes am Rand: wer auf den QR-Code in der
   Bildschirmmitte schaut, übersieht ein Band und wird mitten im Scannen
   zurückgesetzt. Die Abdunklung kann man nicht übersehen, und ein Tipp
   macht weiter.
   Nur transform und opacity werden bewegt — das Renderbudget bleibt. */
.ruhefrage{
  position:absolute;inset:0;z-index:60;display:none;
  align-items:center;justify-content:center;
  background:rgba(12,12,16,.74);cursor:pointer
}
.ruhefrage.an{display:flex;animation:rfEin .2s ease-out both}
@keyframes rfEin{from{opacity:0}to{opacity:1}}

.rf-karte{
  width:1560px;max-width:86%;background:var(--card);border-radius:var(--r-lg);
  padding:96px 96px 72px;box-shadow:var(--lift-3);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:0
}
.rf-frage{font-size:96px;font-weight:700;line-height:1.14;color:var(--ink)}
.rf-de{margin-top:18px;font-size:52px;font-weight:400;color:var(--ink-3);line-height:1.2}
.rf-de:empty{display:none}

/* Weitermachen ist ein riesiges Ziel — praktisch „einmal antippen". */
.rf-weiter{
  margin-top:72px;width:100%;background:var(--rot);border-radius:var(--r-md);
  padding:52px 40px;color:#fff;box-shadow:var(--lift-rot);
  display:flex;flex-direction:column;align-items:center;gap:8px
}
.rf-weiter > span:first-child{font-size:76px;font-weight:700;line-height:1.1}
.rf-weiter .rf-klein{font-size:36px;font-weight:400;opacity:.88}

/* Zurücksetzen muss bewusst getroffen werden. */
.rf-neu{
  margin-top:40px;border:3px solid var(--line);background:var(--card);
  border-radius:999px;padding:30px 60px;font:inherit;color:var(--ink-2);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:4px
}
.rf-neu > span:first-child{font-size:44px;font-weight:700}
.rf-neu .rf-klein{font-size:30px;font-weight:400;color:var(--ink-3)}
.rf-neu:active{transform:scale(.97)}

.rf-balken{margin-top:56px;width:100%;height:10px;border-radius:999px;
  background:rgba(22,22,29,.08);overflow:hidden}
.rf-balken i{display:block;width:100%;height:100%;border-radius:999px;
  background:var(--rot);transform-origin:left center;will-change:transform}
.rtl .rf-balken i{transform-origin:right center}
.ruhefrage.an .rf-balken i{animation:rfAblauf linear forwards}
@keyframes rfAblauf{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* Der Weg zurück auf Deutsch, solange eine andere Sprache eingestellt ist. */
.de-btn{display:none}
.fremdsprache .de-btn{display:flex}
.de-btn svg{stroke:var(--rot)!important;stroke-width:1.9}
.de-btn span{color:var(--rot)}

.fueller{flex:1}
/* Steht der Lauftext still, wird er mittig gesetzt statt zu laufen. */
.foot.steht .marq{animation:none;width:100%;text-align:center}


/* ── Die anderen Anzeigemodi ───────────────────────────────────────────────
   Aushang und Messe liegen als eigene Ebene ueber der Buehne. Sie ersetzen
   die Besucherfuehrung nicht, sie verdecken sie — dadurch steht darunter alles
   unveraendert und macht beim Zurueckschalten dort weiter, wo es war.

   Im Aushang ist der Bildschirm eine FLAECHE, keine Bedienung: die Ebene
   schluckt jede Beruehrung, damit kein Besucher versehentlich etwas ausloest. */
/* Das hidden-Attribut ist die eigentliche Sicherung: sollte dieses Stylesheet
   je fehlen oder veraltet sein, bleiben die Ebenen trotzdem weg, statt als
   nackter Text ueber dem Startbildschirm zu stehen. Die Klasse .an macht sie
   danach sichtbar. */
[hidden]{display:none !important}
.ebene{position:fixed;inset:0;z-index:50;display:none;background:#000;
  align-items:center;justify-content:center}
.ebene.an{display:flex}
#aushang img,#aushang video{max-width:100%;max-height:100%;object-fit:contain;display:none}
#aushang img.da,#aushang video.da{display:block}
#messe iframe{width:100%;height:100%;border:0;background:#fff}
.ebene-leer{color:#fff;text-align:center;padding:200px;font-size:64px;line-height:1.3}
.ebene-leer b{display:block;font-size:96px;font-weight:750;margin-bottom:32px}
.ebene-leer span{color:rgba(255,255,255,.62)}


/* ── Verdeckter Ausstieg ───────────────────────────────────────────────────
   Aus Aushang und Messe fuehrt sonst kein Weg zurueck, wenn die Verbindung
   fehlt — genau daran hing der alte Prototyp fest. Die Flaeche ist unsichtbar
   und liegt in der oberen Ecke, also ausserhalb der Greifzone, die fuer
   Besucher gilt. Ein langer Druck oeffnet die Kennwortfrage.

   Ob langes Halten unter Windows zuverlaessig ausloest, ist am Geraet zu
   pruefen. Faellt es durch, wird die Geste ausgetauscht — die Mechanik
   dahinter bleibt dieselbe. */
/* Der Diensteingang. Leer, ohne Hintergrund, ohne Rahmen — er ist in jedem
   Fall unsichtbar; die Groesse entscheidet nur, wo Beruehrungen ankommen.
   Sie wird in passeAn() gesetzt, weil die Flaeche im Fenster liegt (ueber
   Aushang und Messe) und die Buehne darunter skaliert wird. */
.dienstzugang{position:fixed;top:0;left:0;z-index:70;width:700px;height:300px}
/* In der Vorschau im Panel hat der Diensteingang nichts zu suchen: dort
   wuerde er nur den Blick auf den Bildschirm abfangen. */
body.vorschau .dienstzugang{display:none}

.dz-ebene{position:fixed;inset:0;z-index:90;background:#0A0A0E}
.dz-ebene[hidden]{display:none}
.dz-ebene iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  background:#F6F7F9}
.ausstieg-frage{position:fixed;inset:0;z-index:80;background:rgba(10,10,14,.72);
  display:flex;align-items:center;justify-content:center}
.ausstieg-frage[hidden]{display:none}
.af-karte{background:#fff;border-radius:56px;padding:110px 120px;width:1500px;
  box-shadow:var(--lift-3);text-align:center}
.af-karte b{display:block;font-size:88px;font-weight:750;margin-bottom:56px;letter-spacing:-.02em}
.af-karte input{width:100%;height:170px;font-size:76px;text-align:center;
  border:4px solid var(--line);border-radius:32px;font-family:inherit}
.af-knoepfe{display:flex;gap:32px;margin-top:56px}
/* Ohne Geraetekennwort — im Auslieferungszustand ist keines gesetzt — waere
   die Notkarte nutzlos. Dieser Knopf blendet das Benutzerfeld ein. */
.af-text{background:none;border:0;color:var(--ink-2);text-decoration:underline;
  font:inherit;font-size:44px;cursor:pointer;margin-top:40px;padding:16px}
#dzBenutzer{margin-bottom:28px}
.af-b{flex:1;height:150px;font-size:56px;font-weight:700;border-radius:999px;
  border:4px solid var(--line);background:#fff;font-family:inherit;cursor:pointer}
.af-b.rot{background:var(--rot);border-color:var(--rot);color:#fff}
.af-fehler{display:block;margin-top:36px;font-size:48px;color:var(--rot-tief)}
.af-fehler[hidden]{display:none}

/* ================================================================
   WEGWEISER — "Wo ist Raum 02.158?"

   Zwei Bildschirme, eine Regel: gelesen wird oben, getippt wird unten.
   Der Bildschirm ist 3840 px hoch und reicht von etwa 690 bis 1800 mm
   ueber dem Boden. Alles, was eine Hand beruehren soll, liegt deshalb
   unterhalb von y 2400 (rund 1110 mm) — die Zifferntastatur ganz unten,
   die Treffer darueber, die Eingabe oben, wo sie aus drei Metern
   lesbar ist.
   ================================================================ */

.wegzone,.wegroute{
  flex:none;padding:0 120px;display:flex;flex-direction:column;gap:36px
}
/* 2280 und nicht 2490: bei y 3468 beginnen die beiden fest gesetzten
   Knoepfe (Datenschutz, Bedienung tiefer stellen), darunter das Laufband.
   Gemessen, nicht geschaetzt -- die erste Fassung schob die unterste
   Tastenreihe darunter, und die Ruecktaste war gar nicht mehr zu sehen. */
.wegzone{height:2280px}
.wegroute{height:2280px}

/* ---------- Die Eingabe ---------- */
.wgfeld{
  flex:none;min-height:230px;display:flex;align-items:center;
  background:var(--card);border:5px solid var(--line);border-radius:var(--r-lg);
  padding:0 72px;box-shadow:var(--lift-2)
}
.wgziffern{
  font-size:132px;font-weight:800;letter-spacing:.06em;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1
}
/* Solange nichts getippt ist, steht hier die Aufforderung — nicht ein
   leerer Kasten, vor dem man sich fragt, was er will. */
.wgleer{font-size:46px;color:var(--ink-3);font-weight:400;line-height:1.25}

/* ---------- Kacheln und Treffer teilen sich dieselbe Flaeche ----------
   Damit springt der Bildschirm nicht, wenn die erste Ziffer faellt. */
.wgmitte{flex:1;min-height:0;display:flex;flex-direction:column}
.wgkacheln,.wgtreffer{flex:1;min-height:0;display:flex;flex-direction:column;gap:26px}
.wgkachelkopf b{display:block;font-size:52px;font-weight:750;color:var(--ink)}
.wgkachelkopf span{display:block;margin-top:10px;font-size:40px;color:var(--ink-2)}
/* Eine Spalte, nicht zwei. Seit der Infopoint keine Kachel mehr hat, sind
   es drei — und drei in einem Zweierraster lassen eine Luecke. Ueber die
   ganze Breite haben ausserdem die langen Namen Platz, ohne umzubrechen. */
.wgkachelreihe{display:grid;grid-template-columns:1fr;gap:24px}
.wgkachel{
  display:flex;align-items:center;gap:34px;border:0;text-align:left;font:inherit;
  color:inherit;cursor:pointer;background:var(--card);border-radius:var(--r-md);
  padding:38px 44px;box-shadow:var(--lift-1);min-height:190px
}
.wgkachel:active{transform:scale(.985)}
.wgkachel .ki{
  width:112px;height:112px;flex:none;border-radius:999px;background:var(--rot-10);
  border:4px solid var(--rot-30);display:flex;align-items:center;justify-content:center
}
.wgkachel .ki svg{width:58px;height:58px;stroke:var(--rot);fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.wgkachel .kt{font-size:48px;font-weight:700;line-height:1.14}

/* ---------- Trefferliste ---------- */
.wgzeile{
  display:flex;align-items:center;gap:44px;border:0;width:100%;text-align:left;
  font:inherit;color:inherit;cursor:pointer;background:var(--card);
  border-radius:var(--r-md);padding:30px 48px;box-shadow:var(--lift-1);
  min-height:152px
}
.wgzeile:active{transform:scale(.99)}
.wznr{
  font-size:76px;font-weight:800;font-variant-numeric:tabular-nums;
  letter-spacing:.02em;min-width:420px;color:var(--ink)
}
/* Zwei Nummern, eine Zeile: oben die aus der Einladung, darunter klein die,
   die im Haus laeuft. Wer nur eine davon kennt, findet trotzdem beide. */
.wznr b{display:block;font-weight:800}
.wznr small{display:block;margin-top:6px;font-size:36px;font-weight:600;
  letter-spacing:.01em;color:var(--ink-3)}
.wznr small:empty{display:none}
.wzwas{flex:1;min-width:0}
.wzwas b{display:block;font-size:52px;font-weight:700;line-height:1.1}
.wzwas span{display:block;margin-top:8px;font-size:40px;color:var(--ink-2)}
.wzgo{
  width:88px;height:88px;flex:none;border-radius:999px;background:var(--paper-2);
  display:flex;align-items:center;justify-content:center
}
.wzgo svg{width:40px;height:40px;stroke:var(--ink);fill:none;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.wgmehr{font-size:38px;color:var(--ink-3);padding:8px 48px}
.wgnix{font-size:46px;color:var(--ink-2);line-height:1.3;padding:30px 48px}

/* ---------- Zifferntastatur ----------
   Unten, weil sie beruehrt wird. 624 px breite Tasten sind fuer eine
   Hand aus zwei Metern Entfernung noch sicher zu treffen. */
.wgtasten{flex:none;display:flex;flex-direction:column;gap:20px}
.wgreihe{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
/* Die Buchstabenreihe. Vier statt drei Spalten: 461 px je Taste statt 624 —
   das sind immer noch 13 cm auf dem 50-Zoll-Schirm und mit einer Hand aus
   zwei Metern sicher zu treffen. */
.wgreihe.vier{grid-template-columns:repeat(4,1fr)}
.wgtaste.buchstabe{font-size:84px;letter-spacing:.04em}
.wgtaste{
  border:5px solid var(--line);background:var(--card);border-radius:var(--r-md);
  font:inherit;font-size:96px;font-weight:750;color:var(--ink);cursor:pointer;
  height:190px;box-shadow:var(--lift-1);font-variant-numeric:tabular-nums
}
.wgtaste:active{transform:scale(.97);background:var(--paper-2)}
.wgtaste.hell{background:var(--paper-2);color:var(--ink-2);font-size:70px}
.wgtaste.breit{font-size:48px;font-weight:700}

/* ---------- Der Weg ---------- */
.wgwahl{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:26px}
.wgw{
  display:flex;align-items:center;justify-content:center;gap:26px;
  border:5px solid var(--line);background:var(--card);border-radius:var(--r-md);
  font:inherit;font-size:46px;font-weight:700;color:var(--ink-2);cursor:pointer;
  min-height:150px;box-shadow:var(--lift-1)
}
.wgw svg{width:56px;height:56px;stroke:var(--ink-3);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.wgw.an{border-color:var(--akzent);color:var(--ink);background:var(--paper-2)}
.wgw.an svg{stroke:var(--rot)}

.wgschritte{
  flex:1;min-height:0;list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;justify-content:flex-start;gap:18px;
  overflow:hidden
}
.wgs{
  display:flex;align-items:center;gap:40px;
  background:var(--card);border:4px solid var(--line);border-radius:var(--r-md);
  /* Wachsen bis 260, dann Schluss. Ohne Deckel bekaeme eine Route aus
     vier Schritten Kaesten von einem halben Meter Hoehe; ohne Wachsen
     laege unter einer kurzen Route ein Meter totes Weiss. */
  padding:24px 44px;flex:1 1 auto;min-height:150px;max-height:260px
}
.wgsi{
  width:104px;height:104px;flex:none;border-radius:999px;background:var(--paper-2);
  display:flex;align-items:center;justify-content:center
}
.wgsi svg{width:56px;height:56px;stroke:var(--ink);fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.wgst{flex:1;min-width:0}
.wgst b{display:block;font-size:50px;font-weight:600;line-height:1.16;color:var(--ink)}
.wgst span{display:block;margin-top:6px;font-size:38px;color:var(--ink-2);font-weight:400}

/* Anfang und Ziel sind keine Schritte, sondern die beiden Enden. Sie
   tragen deshalb die Leitfarbe, alles dazwischen bleibt neutral. */
.wgs.start{background:var(--paper-2);border-style:dashed}
.wgs.ziel{
  background:var(--rot-10);border:5px solid var(--rot-30);box-shadow:var(--lift-2)
}
.wgs.ziel .wgsi{background:var(--rot);border:0}
.wgs.ziel .wgsi svg{stroke:#fff;stroke-width:2.8}
.wgs.ziel .wgst b{font-size:56px;font-weight:750}
.wgs.etage .wgsi{background:var(--akzent)}
.wgs.etage .wgsi svg{stroke:#fff}

/* ---------- Einstieg auf "Ich habe einen Termin" ---------- */
.wgknopf{
  display:flex;align-items:center;gap:48px;border:0;width:100%;text-align:left;
  cursor:pointer;font:inherit;color:inherit;padding:52px 64px;
  border-radius:var(--r-lg);background:var(--card);box-shadow:var(--lift-2)
}
.wgknopf:active{transform:scale(.985)}
.wgknopf .ic{
  width:152px;height:152px;border-radius:46px;flex:none;background:var(--rot);
  box-shadow:var(--lift-rot);display:flex;align-items:center;justify-content:center
}
.wgknopf .ic svg{width:80px;height:80px;stroke:#fff;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.wgknopf .tx{flex:1;min-width:0}
.wgknopf .tx b{display:block;font-size:68px;font-weight:750;line-height:1.06}
.wgknopf .tx span{display:block;margin-top:14px;font-size:44px;color:var(--ink-2)}
.wgknopf .go{
  width:96px;height:96px;border-radius:999px;flex:none;background:var(--paper-2);
  display:flex;align-items:center;justify-content:center
}
.wgknopf .go svg{width:42px;height:42px;stroke:var(--ink);fill:none;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- Die dritte Zeile auf dem Startbildschirm ----------
   Bewusst kein dritter Knopf: kein Schatten, keine Flaeche, halbe
   Schriftgroesse. Sie soll gefunden werden, nicht gewaehlt. */
.dritte{
  display:flex;align-items:center;gap:32px;border:4px solid var(--line);
  background:transparent;border-radius:var(--r-md);padding:36px 56px;
  font:inherit;font-size:48px;font-weight:600;color:var(--ink-2);
  cursor:pointer;text-align:left;width:100%
}
.dritte:active{background:var(--paper-2)}
.dritte .di{
  width:84px;height:84px;flex:none;border-radius:999px;background:var(--paper-2);
  display:flex;align-items:center;justify-content:center
}
.dritte .di svg{width:46px;height:46px;stroke:var(--rot);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.dritte>span:nth-child(2){flex:1;min-width:0}
.dritte .dg{width:56px;height:56px;flex:none;display:flex;align-items:center;
  justify-content:center}
.dritte .dg svg{width:38px;height:38px;stroke:var(--ink-3);fill:none;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- Zugaenglichkeitsmodus ----------
   Dieselbe Umordnung wie fuer .mid: die Navigation nach unten, der
   Inhalt legt sich von oben an sie an. Die Tastatur wird flacher, damit
   sie im tieferen Aufbau nicht die Treffer verdraengt. */
.low .wegzone,.low .wegroute{height:auto;order:3;padding-bottom:40px}
.low .wgfeld{min-height:170px}
.low .wgziffern{font-size:96px}
.low .wgtaste{height:132px;font-size:70px}
.low .wgtaste.buchstabe{font-size:62px}
.low .wznr small{font-size:30px}
.low .wgtaste.hell{font-size:52px}
.low .wgtaste.breit{font-size:38px}
.low .wgzeile{min-height:120px;padding:22px 40px}
.low .wznr{font-size:60px;min-width:340px}
.low .wzwas b{font-size:42px}
.low .wgkachel{min-height:150px}
.low .wgkachel .kt{font-size:40px}
.low .wgs{padding:18px 36px}
.low .wgst b{font-size:42px}
.low .wgs.ziel .wgst b{font-size:46px}
.low .wgw{min-height:118px;font-size:38px}

/* ============================================================
   s-wegziel — Karte statt Pfeilliste.

   Die Bandhoehen sind nicht gewaehlt, sondern gerechnet:
     Kopf 260 · Navigation 300 · Von–Nach 296 · Karte 1488 ·
     Zoomleiste 140 · Schritte 956  =  3440.
   Bei 3468 beginnen die beiden fest gesetzten Knoepfe. Der Inhalt
   endet also genau davor — dieselbe Rechnung wie beim Tastenfeld,
   wo die Ruecktaste einmal darunter verschwunden war.

   Gelesen wird oben, beruehrt wird unten: die Zoomleiste liegt bei
   1124–1084 mm ueber dem Boden, die Schrittkacheln darunter.
   ============================================================ */
.wgvon{height:296px;flex:none;padding:0 120px;display:flex;align-items:center;gap:36px}
.wgv{flex:1;min-width:0;background:var(--card);border:3px solid var(--line);
  border-radius:var(--r-md);padding:32px 44px;box-shadow:var(--lift-1)}
.wgv.ziel{border-color:var(--rot-30);background:var(--rot-10)}
.wgvl{display:block;font-size:30px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--ink-3)}
.wgvw{display:block;margin-top:8px;font-size:50px;font-weight:800;line-height:1.1;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wgvp{width:56px;height:56px;flex:none;stroke:var(--ink-3);fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}

.wgkarte{height:1488px;flex:none;padding:0 120px;position:relative}
.wgkarte canvas{width:1920px;height:1488px;display:block;
  border-radius:var(--r-md);box-shadow:var(--lift-2);background:var(--paper)}
.wgetikett{position:absolute;left:184px;top:44px;background:rgba(255,253,250,.94);
  border-radius:999px;padding:16px 34px;font-size:34px;font-weight:800;
  color:var(--ink-2);box-shadow:var(--lift-1);pointer-events:none}

/* Der Etagenstapel liegt am rechten Rand der Karte: die Etagen
   uebereinander, so wie sie im Haus liegen. Ein roter Punkt zeigt, auf
   welchen Etagen etwas vom Weg liegt. */
/* Liegt der ganze Weg auf einer Etage, gibt es nichts umzuschalten. */
.wgstapel.aus{display:none}
.wgstapel{position:absolute;right:184px;top:44px;display:flex;flex-direction:column;
  gap:12px;background:rgba(255,253,250,.94);border-radius:38px;padding:14px;
  box-shadow:var(--lift-1)}
.wget{width:104px;height:96px;border-radius:26px;border:0;background:transparent;
  font-size:44px;font-weight:800;line-height:1;color:var(--ink-2);
  display:flex;align-items:center;
  justify-content:center;position:relative;cursor:pointer}
.wget.an{background:var(--akzent);color:#fff}
.wget .pkt{position:absolute;right:16px;top:14px;width:16px;height:16px;
  border-radius:999px;background:var(--rot)}
.wget.an .pkt{background:#fff}

.wgleiste{height:140px;flex:none;padding:0 120px;display:flex;align-items:center;gap:20px}
.wgls{flex:1}
.wglb{background:var(--card);border:3px solid var(--line);border-radius:var(--r-sm);
  height:104px;padding:0 36px;display:flex;align-items:center;gap:18px;
  font-size:36px;font-weight:700;line-height:1;color:var(--ink-2);
  box-shadow:var(--lift-1);cursor:pointer}
.wglb.rund{width:104px;padding:0;justify-content:center;border-radius:999px}
.wglb svg{width:44px;height:44px;stroke:var(--ink-2);fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.wglb[disabled]{opacity:.35}

.wgschritte{height:956px;flex:none;padding:30px 120px 0;display:flex;
  flex-direction:column;gap:22px;overflow:hidden;list-style:none}
.wgs{flex:none;display:flex;gap:34px;align-items:flex-start;background:var(--card);
  border:3px solid var(--line);border-radius:var(--r-md);padding:30px 40px;
  box-shadow:var(--lift-1);opacity:0;transform:translateY(8px);
  transition:opacity .22s var(--ease), transform .22s var(--ease)}
.wgs.da{opacity:1;transform:none}
.wgs .nr{width:70px;height:70px;flex:none;border-radius:999px;background:var(--akzent);
  color:#fff;font-size:38px;font-weight:800;line-height:1;
  display:flex;align-items:center;justify-content:center}
.wgs .tx{flex:1;min-width:0;font-size:44px;line-height:1.28;font-weight:500;padding-top:8px}
/* Der Hinweis "kein Weg" ist KEIN Schritt. Ein gefuellter Zaehlkreis
   davor liest sich wie "Schritt 1 von irgendwas" -- es gibt aber keinen
   zweiten. Stattdessen ein ruhiger Rahmen ohne Kreis. */
.wgs.ohneweg{border-color:var(--line);background:var(--paper-2)}
.wgs.ohneweg .nr{display:none}
.wgs.ziel{border-color:var(--rot-30);background:var(--rot-10)}
.wgs.ziel .nr{background:var(--rot)}
/* Zwei bis sechs Saetze muessen in dasselbe Band passen. Statt zu rollen
   -- auf einem Kiosk rollt niemand -- wird die Kachel enger. */
.wgschritte.viel{gap:11px;padding-top:18px}
.wgschritte.viel .wgs{padding:18px 32px}
.wgschritte.viel .wgs .tx{font-size:35px;line-height:1.24;padding-top:2px}
.wgschritte.viel .wgs .nr{width:54px;height:54px;font-size:30px}

/* Ohne Grundriss bleiben die Saetze -- sie sind die Auskunft, die Karte
   ist die Bestaetigung. Dann wird das Kartenband nicht leer angezeigt,
   sondern gar nicht: ein weisses Rechteck sieht nach Fehler aus, und die
   Saetze bekommen den Platz. 956 + 1488 + 140 = 2584. */
#s-wegziel.ohnekarte .wgkarte,
#s-wegziel.ohnekarte .wgleiste{display:none}
#s-wegziel.ohnekarte .wgschritte{height:2584px}
.low #s-wegziel.ohnekarte .wgschritte{height:auto}

/* Zugaenglichkeitsmodus: alles rutscht nach unten in den Greifbereich.
   Die Karte wird kleiner, nicht weggelassen -- sie ist fuer jemanden im
   Rollstuhl eher wichtiger als weniger wichtig. Die Leinwand behaelt ihre
   1920 x 1488 Bildpunkte; nur ihre Anzeige schrumpft, die Schrift darauf
   bleibt also gestochen. */
.low .wgvon{height:auto;padding-bottom:24px}
.low .wgkarte{height:auto;padding-bottom:20px}
/* Im Zugaenglichkeitsmodus bleibt die Karte gross: wer sitzt, sieht sie
   aus derselben Entfernung, aber aus einem flacheren Winkel. Sie kleiner
   zu machen waere genau verkehrt herum gedacht. Und sie schiebt die
   Knoepfe darunter tiefer in den Greifbereich. */
.low .wgkarte canvas{width:1920px;height:1488px}
.low .wgetikett{left:284px}
.low .wgstapel{right:284px}
.low .wgschritte{height:auto;padding-bottom:40px}
.low .wgs .tx{font-size:40px}
@media (prefers-reduced-motion: reduce){
  .wgs{transition:none}
}