/* ============================================================
   gast3.css — "Dunkel": warmes Dunkelbraun + Honig-Gold
   (Abend-/Kellervariante der "Editorial Boutique"-Markenfamilie,
   Option D aus dem zweiten Designvorschlag — Franz 08.07.2026)

   Lädt NUR bei GAST_V3 (gast.php + gast_v3.php), nutzt dieselben
   gast2-*.js-Dateien wie GAST_V2 unverändert — reines CSS-Reskin
   auf Basis derselben Klassennamen/Selektoren wie gast2.css.
   Wo JS-Inline-Styles Text direkt auf var(--navy)-Flächen legen
   (Schlüsselcode-Box, Adress-Box, Kontakt-Buttons, Sprechblase
   "Gast" usw.), bleibt --navy bewusst ein dunkler Weinton statt
   Gold, damit der vorhandene helle Text (#fff/#f7f2e8) in diesen
   JS-Dateien ohne jede Änderung weiter lesbar bleibt. Gold ist in
   diesem Stylesheet der EINE Hero-Akzent (großer Tür-Button,
   PIN-Reveal, Primary-Buttons) — an den ~8 Stellen, an denen
   gast2.css var(--navy) bisher als reine Textfarbe nutzte, wird
   hier gezielt auf var(--brass)/var(--brass-ink) umgebogen.
   ============================================================ */

@font-face {
    font-family: 'Fraunces';
    font-style: normal; font-weight: 400;
    src: url('fonts/Fraunces-400.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    font-style: normal; font-weight: 600;
    src: url('fonts/Fraunces-600.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Nunito';
    font-style: normal; font-weight: 400;
    src: url('fonts/nunito-v32-latin-regular.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Nunito';
    font-style: normal; font-weight: 600;
    src: url('fonts/nunito-v32-latin-600.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Nunito';
    font-style: normal; font-weight: 700;
    src: url('fonts/nunito-v32-latin-700.woff2') format('woff2');
    font-display: swap;
}

:root {
    /* --- Dunkel-Tokens (dunkles Dunkelbraun + Honig-Gold) --- */
    --cream:#2c2117; --ground:#1c1509; --card-bg:#26200f; --panel-bg:#2e2415;
    --ink:#f0e4cf; --muted-ink:#a58c68; --line-c:#3d3020; --line-strong:#5c4830;
    /* Fix 08.07.2026 (Franz, nach erstem v3-Test): --navy wird im JS ETWA GLEICH HÄUFIG als
       Textfarbe ("Mitreisende"-Titel u.v.a. Icons/Labels, ~29 Stellen) UND als Flächenfarbe mit
       hellem Text (Schlüsselcode-/Adress-/Buchungs-Boxen, Kontakt-Buttons, Sprechblase "Gast",
       ~29 Stellen) verwendet. Ein dunkler Weinton (wie ursprünglich gewählt) machte die Text-Rolle
       auf dunklem Grund fast unlesbar ("dunkle Farbe auf dunklem Hintergrund"/"Mitreisende … schlecht
       lesbar"). Mittlerer warmer Bronze-Ton als Kompromiss: als Text auf dunklem Grund gut lesbar
       (~4-5:1 Kontrast), als Fläche mit weißem/cremefarbigem Text weiterhin ausreichend (~3,5-4,5:1). */
    --navy:#b8823f; --navy-dark:#855928; --navy-soft:#3a2a1a;
    --brass:#d9a24c; --brass-ink:#b9812f; --brass-soft:rgba(217,162,76,.14);
    --green-c:#8fa860; --green-ink:#9fb571; --green-soft:rgba(143,168,96,.14);
    --radius-lg:22px;
    --shadow-lg:0 22px 50px -30px rgba(10,7,2,.6);
    --shadow-sm:0 1px 2px rgba(0,0,0,.25);
    --shadow-btn:0 10px 20px -12px rgba(10,7,2,.55);
    --display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    --body-font: 'Nunito', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    /* --- semantische Aliase: dieselben Namen wie gast2.css, damit die unveränderten
       gast2-*.js-Dateien ohne jede Anpassung dieses Theme übernehmen. --- */
    --bg:            var(--ground);
    --panel:         var(--panel-bg);
    --card:          var(--card-bg);
    --surface:       var(--card-bg);
    --text:          var(--ink);
    --muted:         var(--muted-ink);
    --line:          var(--line-c);
    --primary:       var(--navy);
    --primary-dark:  var(--navy-dark);
    --primary-light: var(--brass-soft);
    --yellow:        var(--brass);
    --yellow-dark:   var(--brass-ink);
    --brown:         var(--muted-ink);
    --ok:            var(--green-ink);
    --ok-bg:         var(--green-soft);
    --ok-text:       var(--green-ink);
    --danger:        #d9634a;
    --error-bg:      rgba(217,99,74,.14);
    --error-text:    #e2836a;
    --shadow:        var(--shadow-lg);
    --radius:        16px;
}

*, *::before, *::after {
    box-sizing: border-box;
    font-family: var(--body-font);
}

body {
    margin: 0;
    background: radial-gradient(130% 90% at 50% -10%, #2c2117 0%, var(--bg) 55%) fixed;
    color: var(--text);
    font-family: var(--body-font);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Fix 01.08.2026 (Franz: "der gast soll die schriften größer darstellen können — von haus aus
   ist alles zu klein, dass man es aus etwas entfernung lesen kann, die tablets hängen ja an der
   wand") — zoom statt einzelner font-size-Anpassungen, da px-Werte über die ganze Datei verstreut
   sind; zoom skaliert Text UND Layout gemeinsam und wird von Chromium/Android WebView (worauf
   Fully Kiosk Browser basiert) verlässlich unterstützt. Nur im Kiosk-Modus aktiv (siehe
   gast-init.js), auf dem eigenen Handy des Gasts unverändert. */
body.kiosk-mode { zoom: 1.18; }

.wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 16px 40px;
}

.topbar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
}

.logo {
    height: 44px;
    width: 44px;
    display: block;
}

.lang-switch-fixed {
    position: fixed;
    top: 16px;
    right: 16px;
    display: flex;
    gap: 8px;
    font-size: 14px;
    background: rgba(28,21,9,0.85);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 6px 14px;
    box-shadow: var(--shadow-sm);
    z-index: 100;
    backdrop-filter: blur(4px);
}

.lang-switch-fixed a {
    color: var(--muted);
    text-decoration: none;
}

.lang-switch-fixed a.active {
    color: var(--brass-ink);
    font-weight: 700;
}

/* Hell/Dunkel-Umschalter (Fix 22.07.2026, Franz) — eigene runde Kachel gegenüber der Sprachwahl,
   damit beide fixen Bedienelemente nicht kollidieren.
   Fix 28.07.2026 (Franz: "Sonne bzw. Mond auf der meldung.php besser sichtbar, weil größer -
   diese Symbolgröße auch bei allen anderen Seiten anwenden") — Icon 18px→20px (siehe gast.php
   #gastThemeIcon), Kreis proportional 34px→36px mitgewachsen.
   Fix 29.07.2026 (Franz: "auf meldung.php ist das Hell/Dunkel-Symbol super! genau so möchte ich
   das überall haben") — der eigentliche Grund, weshalb meldung.php besser sichtbar wirkte, war NICHT
   nur die Icon-Größe (schon angeglichen), sondern die dunkle, gefüllte Blur-Kachel hier, die das
   Symbol optisch "schluckt". meldung.php (.mz-theme-toggle) nutzt stattdessen eine transparente,
   dünn umrandete Fläche — genau dieser Look wird jetzt übernommen (Größe zusätzlich exakt auf
   meldung.phps 34px angeglichen, kein 36px-Sonderfall mehr). */
/* Fix 31.07.2026 (Franz: "das icon selbst bzw. der gefüllte kreis soll gefüllt sein und nicht
   transparent. DE/EN ist auch gefüllt. die sonne und den mond größer!") — löst den vorigen Stand
   (29.07.2026, transparent) bewusst wieder ab: gefüllte Kreisfläche wie .lang-switch-fixed
   (gleicher Hintergrund/Schatten/Weichzeichner), Icon+Kreis vergrößert (20px→26px / 34px→42px). */
.theme-switch-fixed {
    position: fixed;
    top: 16px;
    left: 16px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(28,21,9,0.85);
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--brass-ink);
    cursor: pointer;
    z-index: 100;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(4px);
    transition: border-color .15s;
}
.theme-switch-fixed:hover { border-color: var(--brass-ink); }

/* Fix 01.08.2026 (Franz: Textgröße manuell umschaltbar) — gleiches Muster wie .theme-switch-fixed,
   direkt daneben (66px = 16px Abstand + 42px Breite + 8px Lücke). */
.font-switch-fixed {
    position: fixed;
    top: 16px;
    left: 66px;
    min-width: 42px;
    height: 42px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(28,21,9,0.85);
    border: 1px solid var(--line);
    border-radius: 21px;
    color: var(--brass-ink);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    z-index: 100;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(4px);
    transition: border-color .15s;
}
.font-switch-fixed:hover { border-color: var(--brass-ink); }

.card {
    position: relative;
    overflow: hidden;
    background: radial-gradient(120% 90% at 12% -10%, #2e2415 0%, var(--card) 55%);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 28px 16px;
}
/* Fix 28.07.2026 (Franz: "der Hintergrund der Zugangskarte ist super mit dem S im Hintergrund
   rechts oben - das will ich überall anders auch haben") — gleiche Technik wie
   guest_access_card_v2.php (functions.php loadWatermarkSvg()), hier mit der Messington-Farbe des
   dunklen Themes statt der dortigen fest codierten Hex-Werte (Farbe kommt aus derselben Variable
   wie der Rest des dunklen Themes, damit ein künftiger Paletten-Wechsel automatisch mitzieht). */
/* Korrektur 28.07.2026: die ursprüngliche Annahme "position:absolute ohne z-index steht bei
   früherer DOM-Position automatisch hinter normalem, nicht positioniertem Inhalt" war falsch —
   laut CSS-Stapelreihenfolge malen POSITIONIERTE Elemente (auch mit z-index:auto) grundsätzlich
   ÜBER nicht positioniertem Inhalt, unabhängig von der Reihenfolge im Quelltext. Bei der sehr
   geringen Deckkraft (.07) optisch kaum auffällig, aber technisch falsch — jetzt mit explizitem
   z-index:-1 korrekt hinter den gesamten Karteninhalt gelegt (Karte selbst ist bereits
   position:relative, das begrenzt den negativen Stapel korrekt auf diesen Bereich). */
.watermark { position:absolute; top:-7%; right:-24%; width:76%; z-index:-1; pointer-events:none; }
.watermark svg { width:100%; height:auto; display:block; }
.watermark svg path { fill:var(--brass-ink); opacity:.07; }

@media (min-width: 700px) {
    .card { padding: 32px 36px; }
}

h1 {
    margin: 0 0 12px;
    font-family: var(--display);
    font-weight: 600;
    font-size: 27px;
    line-height: 1.14;
    letter-spacing: -.01em;
    color: var(--ink);
    text-wrap: balance;
}

p { margin: 0 0 12px; }
.muted { color: var(--muted); }

.section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    width: 100%;
}
.actions button { width: 60%; }

/* --- Buttons ------------------------------------------------------------ */
button {
    appearance: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    /* Fix 08.07.2026 (Franz): <button>-Elemente erben Farbe NICHT automatisch von Vorfahren (User-
       Agent-Stylesheet setzt "color:buttontext", meist Schwarz) — im hellen Editorial-Boutique-Theme
       fiel das nicht auf (Schwarz auf Creme sah zufällig richtig aus), auf dunklem Grund war Text wie
       "Anliegen an uns" (button.card2 in gast2-arrival.js) dadurch schwarz auf dunkel = unlesbar. */
    color: var(--text);
    /* Fix 27.07.2026 (Franz, Screenshot: "der Text in den Türbuttons ist nicht mittig") — ROOT
       CAUSE: das User-Agent-Standardstylesheet setzt bei <button> text-align:start (links), nicht
       center — .btn-primary/.btn-secondary/.btn-success setzten das nirgends selbst. Bei den
       Türbuttons (.actions button { width:60% }, gast2-arrival.js door-open-btn) fiel das durch die
       zusätzliche Leerfläche rechts besonders auf. Zentral hier im Basis-Reset behoben statt nur an
       einer einzelnen Stelle, damit es für jeden künftigen Button automatisch mitgilt. */
    text-align: center;
}

button:not(.btn-door-big) {
    font-size: 13px !important;
    min-height: 34px !important;
    padding: 7px 12px !important;
}

.btn-primary,
.btn-secondary,
.btn-success {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    transition: background .16s cubic-bezier(.2,.8,.2,1), transform .16s cubic-bezier(.2,.8,.2,1),
                box-shadow .16s ease, color .16s ease, border-color .16s ease;
    /* Fix 31.07.2026 (Franz, Türbuttons: "der Text ist nicht mittig im Button, von der Höhe her
       müsste der Text etwas weiter nach unten") — die horizontale Zentrierung war schon gefixt
       (27.07.2026), vertikal verließ sich der Button bisher auf die normale Inline-Zeilenhöhe des
       inneren <span>, was je nach Icon-Höhe leicht nach oben verschoben wirkte. Jetzt echtes
       Flex-Centering direkt am Button, robust unabhängig von Icon-/Text-Zeilenhöhe. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary {
    background: var(--brass);
    color: #2a1c08;
    box-shadow: var(--shadow-btn);
}
.btn-primary:hover  { background: var(--brass-ink); color: #fff; transform: translateY(-1px); box-shadow: 0 14px 26px -14px rgba(10,7,2,.55); }
.btn-primary:active:not(:disabled) { transform: translateY(0) scale(.97); box-shadow: 0 4px 10px -6px rgba(10,7,2,.4); }

.btn-secondary {
    background: transparent;
    color: var(--brass-ink);
    border: 1.5px solid var(--line-strong);
}
.btn-secondary:hover  { background: var(--panel); border-color: var(--brass); }
.btn-secondary:active:not(:disabled) { transform: scale(.97); }

/* Fix 31.07.2026, 4. Anlauf (Franz: "die schlossanimation ist immer noch da bei der entriegelung
   - die muss auch weg, wenn du es nicht besser hinbekommst") — komplett entfernt (.door-lock-
   shackle gab es hier über 3 Anläufe: erst Ganz-Icon-Rotation, dann Bügel-only-Animation, dann
   statischer Wechsel — alle drei ohne Möglichkeit zum Live-Test auf Franz' Geräten verifiziert).
   gast2-core.js zeigt jetzt wieder das ursprüngliche, unveränderte I.unlock-Icon ohne jede
   Sonderbehandlung. */

.btn-success {
    background: var(--green-c);
    color: #17210c;
    box-shadow: var(--shadow-btn);
}
.btn-success:hover  { background: var(--green-ink); transform: translateY(-1px); box-shadow: 0 14px 26px -14px rgba(10,7,2,.55); }
.btn-success:active:not(:disabled) { transform: translateY(0) scale(.97); box-shadow: 0 4px 10px -6px rgba(10,7,2,.4); }

.btn-countdown {
    background: var(--card);
    color: var(--danger);
    border: 1px solid #6b4034;
}
.btn-countdown:hover { background: rgba(217,99,74,.12); }

.btn-loading { opacity: 0.85; }

button:disabled, .btn-loading { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

.empty {
    text-align: center;
    color: var(--muted);
    font-size: 13.5px;
    padding: 24px 12px;
}

.notice {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 15px;
}
.notice.ok    { background: var(--ok-bg);    color: var(--ok-text); }
.notice.error { background: var(--error-bg); color: var(--error-text); }

.door-list { margin-top: 18px; display: grid; gap: 10px; }
.door-item {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
}

.field { margin-top: 14px; }
.field label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 14px; }
.field input {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    font: inherit;
    color: var(--text);
}

/* --- PIN --- */
.pin-stage-label { text-align: center; font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.pin-display-wrap { margin: 10px 0 18px; }
.pin-display { display: flex; gap: 12px; justify-content: center; align-items: center; }
.pin-dot {
    width: 18px; height: 18px; border-radius: 999px;
    border: 2px solid var(--line); background: transparent;
    transition: all 0.18s ease;
}
.pin-dot.filled { background: var(--brass); border-color: var(--brass); }

.pin-pad {
    display: grid;
    grid-template-columns: repeat(3, minmax(92px, 1fr));
    gap: 12px;
    max-width: 320px;
    margin: 0 auto;
}
.pin-key {
    /* Fix 26.07.2026, 3. Anlauf (Franz: "es ist mir beim wieder Einloggen aufgefallen, nicht bei
       der erstmaligen PIN-Vergabe — wobei alle Tasten gleich groß sein müssten IMMER") — ROOT
       CAUSE des Unterschieds: bisher galt diese Basisgröße nur ab 400px Breite, eine EIGENE,
       größere Fassung erst darunter (@media max-width:400px). Größere Handys (z.B. iPhone Pro
       Max, ~428px CSS-Breite) fielen dadurch auf die kleinere Basisgröße zurück, während schmalere
       Geräte bereits die vergrößerte Fassung bekamen — exakt die von Franz beschriebene
       Inkonsistenz zwischen "gerade eben getestet" und "vorhin getestet". Jetzt EINE einzige,
       größere Größe als Basis (keine Bildschirmbreiten-Abhängigkeit mehr) — auf JEDEM Gerät
       gleich groß, wie gefordert.
       2. Anlauf (Franz: "die Zahlen für alle PIN-Eingaben so groß machen, dass sie fast die
       komplette Taste füllen") — vorher 50px auf 78px Tastenhöhe (~64%), jetzt 74px auf 92px
       (~80%), identisch zur vorherigen Mobil-Sonderfassung.
       4. Anlauf (Franz, mit Live-Screenshot bestätigt: "die Schrift muss größer werden!!!!") —
       74px wirkte trotz ~80%-Verhältnis zur Tastenhöhe noch immer zu klein, vermutlich weil ohne
       explizites line-height der Browser-Standardwert (~1.2) zusätzlichen Leerraum ÜBER/UNTER
       der Ziffer einrechnet, wodurch das sichtbare Schriftbild kleiner wirkt als die 74px
       vermuten lassen. Jetzt größer (84px) UND line-height:1 (keine zusätzliche Zeilenhöhe mehr),
       damit die Ziffer den verfügbaren Platz tatsächlich ausschöpft. */
    height: 92px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--text);
    font-family: var(--body-font);
    font-size: 61px;
    line-height: 1;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.pin-key:hover  { background: var(--panel); border-color: var(--brass); }
.pin-key:active { transform: scale(.96); }
/* Fix 27.07.2026, 5. Anlauf — ROOT CAUSE ENDLICH gefunden (per echtem Browser-Inspektor/
   getComputedStyle geprüft, nicht nur Quelltext gelesen): "button:not(.btn-door-big)" weiter oben
   in dieser Datei setzt "font-size: 13px !important" — eine !important-Regel schlägt IMMER eine
   normale Regel, unabhängig von Spezifität oder davon, wie groß der Wert in .pin-key selbst ist.
   Alle vier vorherigen Anläufe haben nur den Pixelwert oben erhöht, ohne das eigentlich wirksame
   !important zu überstimmen — dadurch blieben die PIN-Tasten immer bei 13px, sichtbar winzig,
   trotz "84px" im Quelltext. Jetzt selbst !important, das behebt es endgültig.
   6. Anlauf 27.07.2026 (Franz, nach Deploy des 5. Anlaufs: "die Pin-Tasten sind okay, die Zahlen
   darin aber zu klein") — der 5. Anlauf war UNVOLLSTÄNDIG: bei zwei kollidierenden !important-
   Regeln entscheidet zuerst die SPEZIFITÄT, erst bei Gleichstand die Quellreihenfolge.
   "button:not(.btn-door-big)" hat Spezifität (Typ-Selektor "button" + Klasse aus ":not()") = 0-1-1.
   Reines ".pin-key" hat nur 0-1-0 — WENIGER spezifisch, verliert also weiterhin gegen die 13px-
   Regel, obwohl beide !important sind und diese Regel im Quelltext später steht. Jetzt über
   ".pin-pad .pin-key"/".pin-pad .pin-key-muted" (Vorfahre + Klasse = 0-2-0) klar höhere Spezifität
   als 0-1-1 — gewinnt unabhängig von Quellreihenfolge, nicht nur zufällig durch Positionierung.
   7. Anlauf 27.07.2026 (Franz: "mach die Zahlen am Pin-Pad doch bitte um etwa 10% kleiner und
   etwas schlanker") — 84px auf 76px (~10% kleiner), Schriftschnitt an der Basisregel oben von 700
   auf 600 (schlanker, weiterhin gut lesbar).
   8. Anlauf 27.07.2026 (Franz: "die Zahlen auf den Pin-Pads noch etwas kleiner darstellen ...
   um ca. 20% verkleinern") — 76px auf 61px. */
.pin-pad .pin-key { font-size: 61px !important; }
.pin-pad .pin-key-muted { font-size: 30px !important; }
/* Fix 27.07.2026 (Franz: "beim schnellen Doppeltippen wird die Seite vergrößert ... bekommen wir
   es hin, dass diese Seite starr die Seite füllt, ohne dass gescrollt werden darf ... vergrößern
   sollte dann auch nicht möglich sein") — NUR während der PIN-Eingabe (ENTER_PIN). Klasse wird von
   gast2-core.js (lockPinScreen()/unlockPinScreen(), im renderPortal()-Dispatcher) gesetzt/entfernt,
   Viewport-Zoom wird dort zusätzlich per Meta-Tag gesperrt. Kontaktblock/Footer außerhalb der Karte
   ausgeblendet — stehen ohnehin bereits innerhalb der PIN-Karte selbst (renderContacts() in
   renderStageEnterPin), reine Dopplung, deren Wegfall zusätzlich Platz spart. #portal behält als
   Sicherheitsnetz eigenes overflow-y:auto, falls der Inhalt auf einem sehr kleinen/alten Gerät
   trotzdem nicht ganz hineinpasst — dann scrollt nur die Karte selbst, nie die ganze Seite.
   2. Anlauf (Franz: "der Hintergrund ist am Smartphone nun weiß bei der eigentlich dunklen
   Ansicht") — ROOT CAUSE: die normale body-Regel setzt "background: radial-gradient(...) fixed"
   (background-attachment:fixed, für den Parallax-Effekt beim Scrollen gedacht). Kombiniert mit
   position:fixed auf demselben Element ist das ein bekannter iOS-Safari-Rendering-Bug — der fixe
   Hintergrund wird dann teils gar nicht gezeichnet, es scheint das Standard-Weiß des Browsers
   durch. Hier wird für den gesperrten Zustand explizit derselbe Verlauf OHNE "fixed" gesetzt
   (ergibt ohnehin dasselbe Bild, da die Seite währenddessen gar nicht scrollt). */
/* Fix 31.07.2026, 2. Anlauf (Franz, per Screenshot bestätigt: Doppel-Tap-/Pinch-Zoom auf der
   Klimakarte funktioniert am iPhone trotz maximum-scale=1/user-scalable=no weiterhin) — iOS
   Safari ignoriert diese Meta-Tag-Werte bewusst. touch-action:pan-x pan-y (CSS Touch-Action-Spec)
   wird dagegen respektiert und ist der eigentliche Wirkstoff hinter dem bereits funktionierenden
   PIN-Screen (body.pin-locked unten) — hier als eigene, leichte Klasse OHNE dessen
   position:fixed/overflow:hidden (würde Smart Home mit vielen Karten unscrollbar machen). */
body.zoom-locked, html.zoom-locked { touch-action: pan-x pan-y; }

body.pin-locked, html.pin-locked {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: pan-x pan-y;
    background: radial-gradient(130% 90% at 50% -10%, #2c2117 0%, var(--bg) 55%);
}
body.pin-locked .wrap {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding-top: 12px;
    padding-bottom: 12px;
}
body.pin-locked #contactsOutside,
body.pin-locked #guestFooter {
    display: none;
}
/* Fix 28.07.2026: .card/#portal wurden aufgeteilt (siehe gast.php, Wasserzeichen-Wrapper), der
   Selektor "#portal.card" (beides auf einem Element) trifft seither nichts mehr — .card ist jetzt
   der äußere, #portal der innere Container. */
body.pin-locked .card {
    max-height: 100%;
    overflow-y: auto;
    flex: 0 1 auto;
}

.pin-success-screen { padding-top: 12px; padding-bottom: 12px; transition: opacity 0.8s ease, transform 0.8s ease; }
.pin-success-screen.fade-out { opacity: 0; transform: translateY(-8px); }
.pin-reveal {
    margin: 18px auto 14px;
    font-family: var(--display);
    font-size: clamp(52px, 14vw, 96px);
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--brass);
}

/* --- Kontakt-Fußzeile --- */
.contact-footer { margin-top: 20px; padding: 14px 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.contact-footer-title { display: none; }
.contact-footer-grid { display: contents; }
.contact-person { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.contact-name { font-weight: 700; color: var(--text); font-size: 13px; }
.contact-role { color: var(--muted); font-size: 11px; }
.contact-link {
    display: inline-flex; align-items: center; gap: 7px;
    color: #fff; background: var(--navy);
    text-decoration: none; font-size: 14px; font-weight: 700;
    padding: 9px 18px; border-radius: 12px; margin-top: 2px;
    transition: background .15s ease, transform .15s ease;
}
.contact-link:hover { background: var(--navy-dark); text-decoration: none; transform: translateY(-1px); }
.phone-icon { display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.8); }
.contact-sep { display: none; }
.center { text-align: center; }

/* --- Großer Tür-Button --- */
.btn-door-big {
    display: block; width: 100%; min-height: 64px;
    padding: 0 24px; border-radius: var(--radius-lg);
    font-family: var(--body-font);
    font-size: 18px; font-weight: 700; text-align: center;
    transition: background .18s cubic-bezier(.2,.8,.2,1), transform .18s cubic-bezier(.2,.8,.2,1),
                box-shadow .18s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
/* Hero-Element: hier bewusst das kräftige Honig-Gold-Gradient aus dem Dunkel-Pitch statt
   des sonst dunklen var(--navy) — das ist der EINE Blickfang pro Screen. */
.btn-door-big.state-default {
    background: linear-gradient(158deg, #f0b856 0%, #d0902f 100%);
    color: #241704;
    border: none;
    box-shadow: 0 16px 40px -14px rgba(224,169,78,.55), 0 0 40px -6px rgba(224,169,78,.28);
}
.btn-door-big.state-default:hover  { transform: translateY(-2px); box-shadow: 0 22px 50px -18px rgba(224,169,78,.6), 0 0 50px -8px rgba(224,169,78,.32); }
.btn-door-big.state-default:active { transform: translateY(0) scale(.985); }
.btn-door-big.state-countdown { background: var(--card); color: var(--danger); border: 1.5px solid #6b4034; }
.btn-door-big.state-loading   { background: var(--ok-bg); color: var(--ok-text); border: none; opacity: 0.9; cursor: default; }

.door-success-msg {
    margin-top: 20px; padding: 18px 20px; border-radius: 14px;
    background: var(--green-soft); color: var(--green-ink);
    font-size: 17px; font-weight: 600; text-align: center;
}

/* Fix 31.07.2026 (Franz: "symbol und textgröße beim entriegeln-button nicht verschieben und nicht
   die größe ändern - als bestätigung einen haken dahinter setzen, der nach 1 sekunde verschwindet")
   — reines Overlay-Badge (position:absolute), rührt Icon/Text im Button-Inneren nicht an. */
.door-btn-checkmark {
    position: absolute; top: -7px; right: -7px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--green-c); color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px -2px rgba(0,0,0,.4);
    animation: doorCheckPop .18s cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
}
.door-btn-checkmark svg { width: 12px; height: 12px; stroke-width: 3; }
@keyframes doorCheckPop {
    from { transform: scale(.4); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* --- Tür-Bestätigungs-Popup --- */
.door-confirm-overlay {
    position: fixed; inset: 0; background: rgba(10,7,2,0.65);
    z-index: 220; display: flex; align-items: center; justify-content: center;
    padding: 20px; opacity: 0; transition: opacity .18s ease;
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.door-confirm-overlay.open { opacity: 1; }
.door-confirm-sheet {
    background: var(--card); border-radius: var(--radius-lg);
    width: 100%; max-width: 340px; padding: 32px 26px 26px;
    text-align: center; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
    transform: scale(.92) translateY(8px); opacity: 0;
    transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
}
.door-confirm-overlay.open .door-confirm-sheet { transform: scale(1) translateY(0); opacity: 1; }
.door-confirm-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 50%;
    background: var(--brass-soft); color: var(--brass-ink);
    animation: doorConfirmPulse 1.6s ease-in-out infinite;
}
.door-confirm-icon svg { width: 28px; height: 28px; }
@keyframes doorConfirmPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(217,162,76,.25); } 50% { box-shadow: 0 0 0 10px rgba(217,162,76,0); } }
.door-confirm-title { font-family: var(--display); font-size: 19px; font-weight: 600; color: var(--text); margin-bottom: 22px; }
.door-confirm-actions { display: flex; flex-direction: column; gap: 10px; }
.door-confirm-actions .btn-success,
.door-confirm-actions .btn-secondary { width: 100% !important; padding: 16px !important; font-size: 16px !important; min-height: 54px !important; }

.guest-toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
    max-width: calc(100vw - 32px); background: var(--danger); color: #fff;
    padding: 12px 18px; border-radius: 12px; font-size: 13.5px; font-weight: 600;
    box-shadow: 0 12px 30px -10px rgba(0,0,0,.5); z-index: 9500; text-align: center;
    opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none;
}
.guest-toast.ok { background: var(--green-c); color: #17210c; }
.guest-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.arrival-step {
    font-size: 11px; color: var(--brass-ink); text-transform: uppercase;
    letter-spacing: 0.18em; font-weight: 700; margin-bottom: 8px;
}

.directions-box { margin-top: 18px; padding: 16px 18px; background: var(--panel); border-radius: 14px; font-size: 15px; line-height: 1.55; }
.directions-box-title { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }

/* Fix 01.08.2026 (Franz: "der Punkt mit dem Häckchen ist etwas größer als der Punkt mit dem Text
   'Zugang aktiv', weshalb bei der Bestätigung der Türentriegelung alles kurz nach unten rutscht,
   dann wieder nach oben") — min-height auf die Höhe des größeren Bestätigungs-Icons (I.checkCircle,
   20px) reserviert von Haus aus genug Platz, damit der Wechsel Punkt(10px)↔Häkchen(20px) die Zeile
   nicht mehr wachsen/schrumpfen lässt. */
.status-dot-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; min-height: 20px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green-c); flex-shrink: 0; animation: dot-pulse 2.4s ease-in-out infinite; }
@keyframes dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
/* [27.08.2026] E-Laden-Fortschrittsleiste (gast2-charging.js kwhDigitalHtml) — Fix: war zuerst nur
   im unbenutzten assets/gast.css ergänzt worden (gast.php lädt tatsächlich NUR gast3.css/gast5.css,
   siehe <link>-Tags dort), dadurch griff die Animation nie. Jetzt hier UND in gast5.css, analog zu
   dot-pulse oben. */
@keyframes ev-charging-progress { from { width: 0%; } to { width: 100%; } }
.status-dot-label { font-size: 13px; color: var(--muted); transition: color 0.4s ease, font-weight 0.2s ease; }

.pin-intro-box { margin-bottom: 20px; padding: 16px 18px; background: var(--panel); border-radius: 14px; font-size: 15px; line-height: 1.55; }

.btn-logout {
    display: block; margin: 24px 0 0 auto; padding: 6px 14px;
    border-radius: 10px; border: 1px solid var(--line);
    background: transparent; color: var(--muted);
    font-size: 12px; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.btn-logout:hover { background: var(--error-bg); color: var(--danger); border-color: #6b4034; }

.btn-back {
    display: inline-flex; align-items: center; gap: 6px; margin: 0;
    padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line);
    background: var(--panel); color: var(--text);
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: background 0.15s; min-height: 40px;
}
.btn-back:hover { background: var(--line); }

.terms-box { margin-top: 20px; padding: 18px; background: var(--panel); border-radius: 14px; font-size: 14px; line-height: 1.6; }
/* Fix 19.07.2026 (Franz, 2. Meldung: "die Häkchen sind immer noch blau"): accent-color allein
   verlässt sich auf Browser-/OS-Unterstützung (auf älteren iOS-Safari-Versionen z.B. nicht
   verfügbar) und fällt dort auf die native blaue Systemfarbe zurück. Jetzt komplett selbst
   gezeichnete Checkbox (appearance:none + eigener Haken), damit die Markenfarbe unabhängig vom
   Browser garantiert greift. */
input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    width: 18px; height: 18px; flex-shrink: 0;
    border: 2px solid var(--line-strong); border-radius: 5px;
    background: var(--card); display: inline-block; position: relative;
    cursor: pointer; margin: 0; vertical-align: middle;
    transition: background 0.15s, border-color 0.15s;
}
input[type="checkbox"]:checked {
    background: var(--brass); border-color: var(--brass);
}
input[type="checkbox"]:checked::after {
    content: ''; position: absolute; left: 5px; top: 1px;
    width: 5px; height: 10px; border: solid var(--ground);
    border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* [08.09.2026] Franz (Screenshot "blauer punkt.png", Zahlweise-Auswahl): "bei der auswahl der
   zahlweise kommt noch der blaue punkt" — gleicher Grund wie bei den Checkboxen oben (reines
   accent-color verlässt sich auf Browser-/OS-Unterstützung), nur wurde damals nur input[type=
   "checkbox"] umgestellt, input[type="radio"] blieb bei der nativen (blauen) Systemdarstellung.
   Gleiches Muster: komplett selbst gezeichnet statt nur accent-color. */
input[type="radio"] {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    width: 18px; height: 18px; flex-shrink: 0;
    border: 2px solid var(--line-strong); border-radius: 50%;
    background: var(--card); display: inline-block; position: relative;
    cursor: pointer; margin: 0; vertical-align: middle;
    transition: background 0.15s, border-color 0.15s;
}
input[type="radio"]:checked {
    border-color: var(--brass);
}
input[type="radio"]:checked::after {
    content: ''; position: absolute; left: 3px; top: 3px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--brass);
}

.terms-check-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; }
.terms-check-row input[type="checkbox"] { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
.terms-check-row label { cursor: pointer; color: var(--text); }
.terms-check-row a { color: var(--brass); text-decoration: underline; }
/* [21.08.2026] Franz: "beim erstmaligen Türöffnen, wenn der Gast auf den inaktiven Button drücken
   möchte, ihn mittels Leuchten auf das anzuklickende Häkchen aufmerksam machen" — kurzer Puls statt
   Dauer-Animation, damit es nicht als generischer "hier ist grundsätzlich was zu tun"-Zustand
   wirkt, sondern klar als Reaktion auf den gerade erfolgten Tastendruck. */
@keyframes attnGlowPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); background: transparent; } 50% { box-shadow: 0 0 0 4px var(--brass-soft); background: var(--brass-soft); } }
.terms-check-row.attn-glow { animation: attnGlowPulse 0.7s ease-in-out 3; border-radius: 10px; }

.site-footer { margin-top: 24px; padding: 16px; text-align: center; font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
.site-footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; }
.site-footer-links button { background: none; border: none; padding: 0; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; text-decoration: none; }
.site-footer-links button:hover { color: var(--text); text-decoration: underline; }

#guestFooter a { color: var(--muted); text-decoration: none; }
#guestFooter a:hover { color: var(--text); text-decoration: underline; }

/* --- Modal --- */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6);
    z-index: 200; display: flex; align-items: flex-end; justify-content: center;
    padding: 0; animation: fadeInOverlay 0.2s ease;
}
@keyframes fadeInOverlay { from { opacity: 0; } to { opacity: 1; } }
.modal-sheet {
    background: var(--card); border-radius: 20px 20px 0 0;
    width: 100%; max-width: 760px; height: 82vh;
    display: flex; flex-direction: column; overflow: hidden;
    animation: slideUp 0.25s cubic-bezier(.2,.8,.2,1);
}
@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.modal-title { font-size: 15px; font-weight: 700; color: var(--text); }
.modal-close { background: none; border: none; font-size: 22px; color: var(--muted); cursor: pointer; padding: 0 4px; line-height: 1; }
.modal-close:hover { color: var(--text); }
.modal-iframe { flex: 1; width: 100%; border: none; background: #fff; }

/* --- Abschiedsseite --- */
.farewell-screen { text-align: center; padding: 16px 0 8px; }
.farewell-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 72px; height: 72px; margin: 0 auto 16px;
    border-radius: 50%; background: var(--brass-soft); color: var(--brass-ink);
}
.farewell-icon svg { width: 36px; height: 36px; }
.farewell-screen h1 { margin-bottom: 12px; }
.farewell-screen p { color: var(--muted); font-size: 15px; }

.arrival-directions-box { margin-top: 20px; padding: 18px; background: var(--panel); border-radius: 14px; font-size: 15px; line-height: 1.6; }
.arrival-directions-title { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }

.maps-btn {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
    padding: 10px 18px; border-radius: 10px; background: var(--navy); color: #fff;
    text-decoration: none; font-size: 14px; font-weight: 700; transition: background .15s, transform .15s;
}
.maps-btn:hover { background: var(--navy-dark); transform: translateY(-1px); }

@media (max-width: 520px) { .contact-footer-grid { grid-template-columns: 1fr; } }

/* --- Kontakt-Modal --- */
.contact-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6);
    display: flex; align-items: flex-end; justify-content: center;
    z-index: 200; animation: fadeInOverlay 0.2s ease;
}
.contact-modal-sheet {
    background: var(--card); border-radius: 22px 22px 0 0;
    width: 100%; max-width: 520px; padding: 28px 22px 36px;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.4);
    animation: slideUpSheet 0.25s cubic-bezier(.2,.8,.2,1);
}
@keyframes slideUpSheet { from { transform: translateY(100%); } to { transform: translateY(0); } }
.contact-modal-title { font-family: var(--display); font-size: 18px; font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; color: var(--brass-ink); }
.contact-modal-sub { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.contact-modal-person { padding: 14px 0; border-top: 1px solid var(--line); }
.contact-modal-person:last-of-type { border-bottom: 1px solid var(--line); }
.contact-modal-name { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.contact-modal-role { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.contact-modal-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.contact-modal-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; border-radius: 10px; text-decoration: none;
    font-size: 13px; font-weight: 700; border: none; cursor: pointer;
    transition: opacity .15s, transform .15s;
}
.contact-modal-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.contact-modal-btn-call { background: var(--navy); color: #fff; }
.contact-modal-btn-wa   { background: #25D366;      color: #fff; }
.contact-modal-btn-sms  { background: var(--panel); color: var(--text); border: 1px solid var(--line); }
.contact-modal-close {
    width: 100%; margin-top: 18px; padding: 12px;
    border-radius: 12px; border: 1.5px solid var(--line);
    background: transparent; color: var(--muted);
    font-size: 14px; font-weight: 700; cursor: pointer;
}

/* --- Onboarding --- */
.onboarding-wrap { display: flex; flex-direction: column; gap: 0; }
.onboarding-section { padding: 24px 0; border-bottom: 1px solid var(--line); }
.onboarding-section:last-child { border-bottom: none; }
.onboarding-icon {
    width: 48px; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px; flex-shrink: 0;
}
.onboarding-icon.blue   { background: var(--panel);  color: var(--brass-ink); }
.onboarding-icon.yellow { background: var(--brass-soft); color: var(--brass-ink); }
.onboarding-icon.green  { background: var(--ok-bg);       color: var(--ok-text); }
/* [04.09.2026] Franz: Notfallkontakt-Abschnitt farblich wie meldung.php (.mz-section-emergency)
   hervorheben — eigene Karten-Optik statt der sonst randlosen Reihen-Optik der übrigen
   Onboarding-Abschnitte, siehe .onboarding-section.card-emergency unten. */
.onboarding-icon.red    { background: var(--error-bg);   color: var(--danger); }
.onboarding-section.card-emergency {
    background: var(--error-bg); border: 1.5px solid var(--danger);
    border-radius: var(--radius-lg, 16px); padding: 18px 16px; margin: 10px 0;
}
.onboarding-title { font-family: var(--display); font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.onboarding-title small { font-weight: 400; opacity: .7; font-size: 13px; text-transform: none; letter-spacing: normal; margin-left: 4px; }
.onboarding-text { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 14px; }
.onboarding-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-onboarding-primary {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
    border-radius: 10px; background: var(--brass); color: #2a1c08; border: none;
    font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none;
    transition: background .15s, transform .15s;
}
.btn-onboarding-primary:hover { background: var(--brass-ink); color: #fff; transform: translateY(-1px); }
.btn-onboarding-secondary {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
    border-radius: 10px; background: transparent; color: var(--muted);
    border: 1px solid var(--line); font-size: 13px; font-weight: 700;
    cursor: pointer; transition: background .15s, color .15s;
}
.btn-onboarding-secondary:hover { background: var(--panel); color: var(--text); }
.onboarding-recall {
    display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted);
    background: none; border: none; cursor: pointer; padding: 0; margin-top: 8px; text-decoration: underline;
}

/* --- WLAN --- */
.wifi-btn {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
    padding: 6px 14px; border-radius: 20px; border: 1px solid var(--line);
    background: transparent; color: var(--muted); font-size: 13px; cursor: pointer;
    transition: background .15s, color .15s;
}
.wifi-btn:hover { background: var(--panel); color: var(--text); }
.wifi-modal-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); gap: 12px; }
.wifi-modal-row:last-of-type { border-bottom: none; }
.wifi-modal-label { font-size: 13px; color: var(--muted); flex-shrink: 0; }
.wifi-modal-value { font-size: 15px; font-weight: 600; word-break: break-all; text-align: right; }
.wifi-modal-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.btn-wifi-connect {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 14px; border-radius: 10px; background: var(--navy); color: #fff;
    text-decoration: none; font-size: 13px; font-weight: 700; border: none; cursor: pointer;
    transition: background .15s;
}
.btn-wifi-connect:hover { background: var(--navy-dark); }
.btn-wifi-share {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 14px; border-radius: 10px; background: transparent; color: var(--brass);
    border: 1.5px solid var(--brass); font-size: 13px; font-weight: 700; cursor: pointer;
}

@keyframes pulseBtn { 0%,100%{box-shadow:0 4px 20px rgba(217,162,76,0.35);} 50%{box-shadow:0 4px 36px rgba(217,162,76,0.6);} }
@keyframes typewriter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.typewriter-line { display: block; opacity: 0; animation: typewriter 0.3s ease forwards; }
.typewriter-word { display: inline; opacity: 0; animation: typewriter 0.18s ease forwards; }
@keyframes doorPulse {
    0%, 100% { opacity: 1;   text-shadow: 0 0 8px  rgba(10,7,2,0.3); }
    50%       { opacity: 0.4; text-shadow: 0 0 20px rgba(10,7,2,0.7); }
}

/* ============================================================
   NEUE KOMPONENTEN (Redesign): Karten/Kacheln/Zeilen/Zahl-Badge
   ============================================================ */

.card2 {
    background: var(--card);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    padding: 18px;
}

.eyebrow2 {
    display: flex; align-items: center; gap: 9px;
    font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
    font-weight: 800; color: var(--brass-ink); margin-bottom: 10px;
}
.eyebrow2::before { content: ""; width: 20px; height: 2px; background: var(--brass); border-radius: 2px; flex-shrink: 0; }

/* Icon-Kachel-Reihe (Getränke/Bestellungen/Gästemappe/Hausordnung) */
.tile {
    flex: 1; min-width: 78px; min-height: 72px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    padding: 14px 8px; border-radius: 14px; border: 1.5px solid var(--line);
    background: var(--card); color: var(--text);
    font-size: 11.5px; font-weight: 700; text-align: center;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.tile:hover  { border-color: var(--brass); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.tile:active { transform: translateY(0) scale(.97); }

.thumb2 {
    width: 32px; height: 32px; border-radius: 9px;
    display: grid; place-items: center;
    background: var(--brass-soft); color: var(--brass-ink); flex-shrink: 0;
}
.thumb2 svg { width: 18px; height: 18px; }
.thumb2.green { background: var(--green-soft); color: var(--green-ink); }
.thumb2.navy  { background: var(--panel);  color: var(--brass-ink); }
.thumb2.lg    { width: 44px; height: 44px; border-radius: 12px; }
.thumb2.lg svg { width: 22px; height: 22px; }

/* Zähl-Badge (z.B. ungelesene Anliegen) */
.badge-count {
    position: absolute; top: -6px; right: -6px;
    min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 999px; background: var(--brass); color: #2a1c08;
    font-size: 10.5px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}

/* Zeile mit Status-Randfarbe (Kosten-/Zahlungs-Bausteine) — ersetzt Voll-Hintergrundfarben */
.line-row {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border-radius: 12px;
    background: var(--card); border: 1px solid var(--line);
    border-left: 3px solid var(--line-strong);
}
.line-row.status-paid { border-left-color: var(--green-c); }
.line-row.status-open { border-left-color: var(--brass); }
.line-row.status-cash { border-left-color: var(--brass-ink); }
.line-row .lr-icon { flex-shrink: 0; color: var(--muted); }
.line-row.status-paid .lr-icon { color: var(--green-ink); }
.line-row.status-open .lr-icon { color: var(--brass-ink); }
.line-row.status-cash .lr-icon { color: var(--brass-ink); }
.line-row .lr-body { flex: 1; min-width: 0; }
.line-row .lr-label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.line-row .lr-sub   { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
/* Fix 31.07.2026 (Franz: "die beträge in der box 'vorläufige Rechnung' alle ordentlich
   untereinander - nicht vertikal verschoben darstellen") — .line-row zentriert seinen Inhalt
   vertikal an der GESAMTEN Zeilenhöhe; Zeilen MIT lr-sub sind höher als Zeilen ohne, wodurch der
   Betrag von Zeile zu Zeile optisch nach oben/unten wanderte. Betrag jetzt oben ausgerichtet
   (bündig mit lr-label) statt an der variablen Zeilenhöhe zentriert. */
.line-row .lr-amount { font-weight: 700; font-size: 14px; white-space: nowrap; align-self: flex-start; margin-top: 1px; }

/* Zahlungsoptions-Karte — EINE Kartenoptik für alle Zahlarten, Auswahl über Gold-Rand statt Farbe */
.pay-card {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px; border-radius: var(--radius);
    background: var(--card); border: 1.5px solid var(--line);
    cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.pay-card:hover { border-color: var(--line-strong); }
.pay-card.selected { border-color: var(--brass); background: var(--brass-soft); }
.pay-card .pc-title { font-size: 14px; font-weight: 700; color: var(--text); }
.pay-card .pc-sub   { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Sprechblasen (Anliegen-Thread) */
.chat-bubble {
    max-width: 78%; padding: 10px 14px; border-radius: 14px;
    font-size: 13.5px; line-height: 1.5;
}
.chat-bubble.host  { background: var(--panel); color: var(--ink); border-bottom-left-radius: 4px; }
.chat-bubble.guest { background: var(--navy);  color: #f7f2e8;  border-bottom-right-radius: 4px; }
.chat-bubble .cb-time { font-size: 10px; opacity: .65; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
    .tile:hover, .pay-card, .btn-primary:hover, .btn-door-big.state-default:hover { transform: none; }
}

/* ============================================================
   MOBILE OPTIMIERUNG (iPhone / Android) — unverändert von gast2.css
   ============================================================ */

:root {
    --safe-top:    env(safe-area-inset-top,    0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left,   0px);
    --safe-right:  env(safe-area-inset-right,  0px);
}

/* Fix 02.08.2026, 3. Anlauf (Franz: "die gast-seite am smartphone vergrößert keinen text
   sichtlich. die logos und andere sachen werden vergrößert, der text jedoch nicht unbedingt")
   — -webkit-text-size-adjust:100% pinnt die Textgröße fix und unterdrückt damit Chrome/Safaris
   eigene, an die Betriebssystem-Schriftgrößeneinstellung gekoppelte Text-Skalierung (eine ANDERE,
   unabhängige Achse als unser eigener body.style.zoom-basierter "Aa"-Knopf, siehe gast-init.js —
   zoom skaliert Layout+Bilder+Text gemeinsam, text-size-adjust betrifft NUR Text). Entfernt, damit
   beide Mechanismen unabhängig funktionieren. Live am Gerät zu bestätigen, da sich das
   Zusammenspiel Betriebssystem-Einstellung/Browser je nach Gerät leicht unterscheiden kann. */
html { -webkit-tap-highlight-color: transparent; }

body {
    padding-top: var(--safe-top);
    padding-bottom: calc(var(--safe-bottom) + 16px);
    overflow-x: hidden;
}

.topbar { padding-top: calc(12px + var(--safe-top)); }

.contact-modal-btn, .pin-key, .qty-btn { min-height: 44px; min-width: 44px; }
button:not(.btn-door-big), a.btn-onboarding-primary, a.btn-onboarding-secondary { min-width: 34px; }
a.btn-onboarding-primary, a.btn-onboarding-secondary { min-height: 34px; font-size: 13px; padding: 7px 14px; }

@media (max-width: 400px) {
    /* .pin-key hat seit Fix 26.07.2026, 3. Anlauf (siehe Kommentar bei der Basisregel oben) auf
       JEDER Bildschirmbreite dieselbe Größe — keine eigene, hier vorher doppelt gepflegte
       Mobil-Fassung mehr nötig (war die Ursache der von Franz gemeldeten Inkonsistenz). */
    .pin-dot { width: 18px !important; height: 18px !important; }
}

@media (max-width: 480px) {
    .wrap { padding: 0 12px 24px; }
    .card { border-radius: 18px; padding: 16px; }
    .onboarding-section { padding: 18px 16px; }
    .onboarding-title { font-size: 17px; }
    .onboarding-text { font-size: 14px; }
    .onboarding-actions { flex-direction: column; }
    .btn-onboarding-primary, .btn-onboarding-secondary { width: 100%; justify-content: center; text-align: center; }
    .door-btn { min-height: 80px; font-size: 17px; }
    .contact-modal-btn { flex: 1; justify-content: center; text-align: center; font-size: 13px; }
    .lang-switch-fixed { top: calc(10px + var(--safe-top, 0px)); bottom: auto; right: 12px; padding: 5px 12px; font-size: 13px; }
    .theme-switch-fixed { top: calc(10px + var(--safe-top, 0px)); left: 12px; width: 40px; height: 40px; }
    .font-switch-fixed { top: calc(10px + var(--safe-top, 0px)); left: 60px; height: 40px; }
    .contact-modal-sheet { padding-bottom: calc(24px + var(--safe-bottom)); }
    .modal-sheet { max-height: calc(90vh - var(--safe-top)); padding-bottom: calc(16px + var(--safe-bottom)); }
}

@media (max-width: 360px) {
    body { font-size: 14px; }
    .topbar h1 { font-size: 16px; }
    .onboarding-title { font-size: 15px; }
}

@media (max-width: 480px) {
    .wifi-modal-actions { flex-direction: column; }
    .btn-wifi-connect, .btn-wifi-share { width: 100%; justify-content: center; }
}

* { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }

button:focus, a:focus, input:focus { outline: none; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.modal-overlay, .contact-modal-overlay { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* ============================================================
   NAVIGATIONSLEISTE (unten fixiert) — unverändert übernommen,
   bleibt außerhalb des Scopes, nur mitgeführt falls sie je
   aktiviert wird.
   ============================================================ */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    display: flex; justify-content: space-around; align-items: stretch;
    background: var(--card); border-top: 2px solid var(--brass);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.35);
    z-index: 200; padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-nav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 2px 6px; background: none; border: none;
    color: var(--muted); cursor: pointer; transition: color 0.15s; min-height: 56px;
}
.bottom-nav-item.active { color: var(--brass-ink); }
.bottom-nav-item:hover  { color: var(--brass-ink); }
.bottom-nav-icon { display: flex; align-items: center; justify-content: center; }
.bottom-nav-icon svg { width: 22px; height: 22px; }
.bottom-nav-label { font-size: 10px; font-weight: 600; line-height: 1; }

/* ============================================================
   Smart Home (Klima + Schalter) — nur Kiosk-Modus (Apartment-Tablets)
   Portiert aus kiosk.css, an gast3.css-Variablen angepasst (Franz 17.07.2026)
   ============================================================ */
.sh-clima-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 680px;
    margin: 0 auto 16px;
    padding: 0 4px;
}
@media (max-width: 600px) {
    .sh-clima-grid { grid-template-columns: 1fr; }
}
/* Fix 31.07.2026 (Franz: "wenn nur ein Klimagerät verfügbar ist, dann die Steuerung dafür
   mittig platzieren") — bei genau einem Gerät (JS setzt die Klasse "single") schmaler und
   zentriert statt volle Grid-Breite. */
.sh-clima-grid.single { grid-template-columns: 1fr; max-width: 340px; }
/* Fix 02.08.2026 (Franz: "die Uhr sieht man schlecht schwarz auf braun. und die Uhrzeitauswahl,
   die dann öffnet, ist farblich nicht angepasst: weiß/blau ist nicht optimal") — color-scheme
   weist den Browser an, native Formularsteuerelemente (Uhrzeit-/Zahlenfeld-Spinner, der native
   Zeitauswahl-Popup) im dunklen statt hellen System-Standardlook zu rendern. Kein eigenes
   CSS-Styling des Popups selbst möglich (Browser-natives UI, kein CSS-Hook) — dies ist der
   einzige verfügbare Hebel dafür. */
.sh-sch-input { color-scheme: dark; }
/* [30.08.2026] Phase E — Gast-Band-Regler (Wunschtemperatur je Raum). Ausschliesslich
   CSS-Variablen: Track/Thumb/Beschriftung kontrastieren so in BEIDEN Themes (Dunkel
   dunkel / Hell hell) korrekt — kein hartkodierter Farbwert, kein zu dunkler Text auf
   dunklem bzw. zu heller Text auf hellem Hintergrund. Identischer Block in gast5.css. */
.sh-heatroom {
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    background: var(--card-bg);
    padding: 14px 16px;
    margin: 12px auto 0;
    max-width: 480px;
}
.sh-heatroom + .sh-heatroom { margin-top: 10px; }
.sh-heatroom-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sh-heatroom-name { font-weight: 700; font-size: 15px; color: var(--text); }
.sh-heatroom-cur { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sh-heatroom-target { text-align: center; font-size: 30px; font-weight: 700; color: var(--primary); margin: 8px 0 2px; line-height: 1.1; }
.sh-heatroom-slider {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 34px; background: transparent; cursor: pointer; margin: 2px 0;
}
.sh-heatroom-slider:focus { outline: none; }
.sh-heatroom-slider::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: var(--line); }
.sh-heatroom-slider::-moz-range-track { height: 8px; border-radius: 999px; background: var(--line); }
.sh-heatroom-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 26px; height: 26px; margin-top: -9px; border-radius: 50%;
    background: var(--primary); border: 3px solid var(--card-bg); box-shadow: var(--shadow-sm);
}
.sh-heatroom-slider::-moz-range-thumb {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--primary); border: 3px solid var(--card-bg); box-shadow: var(--shadow-sm);
}
.sh-heatroom-slider:focus::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--brass-soft); }
.sh-heatroom-slider:focus::-moz-range-thumb { box-shadow: 0 0 0 4px var(--brass-soft); }
.sh-heatroom-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 2px; }
.sh-heatroom-hint { font-size: 11.5px; color: var(--muted); text-align: center; line-height: 1.5; margin: 8px 0 0; min-height: 14px; }
.sh-clima-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 2px solid var(--line-strong);
}
.sh-clima-card.is-on { border-color: var(--brass); }
.sh-clima-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    font-weight: 700;
}
.sh-clima-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
/* Fix 31.07.2026 (Franz: "der punkt rechts oben kann gerne pulsierend grün blinken, wenn die
   anlage läuft. der einschalt-knopf ebenso") — echtes Grün statt Messing, plus Puls-Animation. */
.sh-clima-card.is-on .sh-clima-dot { background: var(--green-c); animation: sh-pulse-dot 1.6s ease-in-out infinite; }
@keyframes sh-pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(143,168,96,0.5); }
    50% { box-shadow: 0 0 0 5px rgba(143,168,96,0); }
}
/* Fix 31.07.2026 (Franz: "das Lüftungsrad links neben der Temperatur einblenden und die Balken
   ... rechts der Zieltemperatur") — eine Zeile: Lüfterrad-Icon | Temperatur | Lüfterstufen-Balken. */
.sh-clima-temp-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 6px 0;
}
.sh-clima-fanicon { display: flex; color: var(--muted); flex-shrink: 0; transition: color 0.3s; }
.sh-clima-card.is-on .sh-clima-fanicon { color: var(--brass); }
.sh-clima-fanicon.spinning svg { animation: sh-spin-fan 1.4s linear infinite; }
@keyframes sh-spin-fan { to { transform: rotate(360deg); } }
.sh-clima-temp {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
}
.sh-clima-temp-val { font-size: 40px; font-weight: 800; line-height: 1; }
.sh-clima-temp-unit { font-size: 18px; color: var(--muted); }
.sh-clima-fanbars-wrap { display: flex; align-items: center; justify-content: center; min-width: 44px; flex-shrink: 0; }
.sh-clima-fan-auto-label { display: none; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; }
.sh-clima-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.sh-clima-tempbtn {
    width: 44px; height: 44px;
    border-radius: 12px;
    border: none;
    background: var(--panel);
    color: var(--text);
    font-size: 22px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    flex-shrink: 0;
}
.sh-clima-tempbtn:active { transform: scale(0.93); }
.sh-clima-modes, .sh-clima-fans, .sh-clima-extras { display: flex; flex-wrap: wrap; gap: 6px; }
/* Fix 31.07.2026 (Franz: "die lüftersteuerung auf eine zeile zusammen") — 7 Lüfterstufen-Buttons
   (Auto/Leise/1-5) auf einer Zeile statt Umbruch: kein Wrap mehr, kompaktere Buttons, notfalls
   horizontal scrollbar statt umzubrechen. */
.sh-clima-fans { flex-wrap: nowrap; overflow-x: auto; gap: 3px; }
/* [28.08.2026] Franz: "wenn es viele kalendertage sind, die dargestellt werden, dann die
   bildlaufleiste ... farblich an unsere farben anpassen" ("Ihr Aufenthalt"-Kalenderleiste,
   gast2-arrival.js renderStayCalendarCardHtml()) — gleiches Muster wie kiosk.css .k-screen/
   .k-products-body, hier mit den Markenfarben statt der Kiosk-Messingtöne. */
.cal-stay-strip { scrollbar-width: thin; scrollbar-color: var(--primary) transparent; }
.cal-stay-strip::-webkit-scrollbar { height: 6px; }
.cal-stay-strip::-webkit-scrollbar-track { background: transparent; }
.cal-stay-strip::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; }
.cal-stay-strip::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); }
/* Fix 31.07.2026 (Franz, 2. Anlauf: "den text für die lüftersteuerung ... kleiner machen, sodass
   er in die zeile passt"). [29.08.2026] Franz (Screenshot ac.png: "Auto"/"Quiet" abgeschnitten,
   Text nicht ganz am Button) — ROOT CAUSE: flex:1 1 0 + min-width:0 ließ die Buttons schmaler als
   ihren Text werden, der Text lief über den Button-Hintergrund hinaus statt umzubrechen/zu passen.
   Jetzt: min-width:max-content (Button nie schmaler als sein Wort) + flex:1 0 auto (wachsen, aber
   nicht unter Textbreite schrumpfen); die Zeile scrollt notfalls horizontal (overflow-x:auto oben,
   von Franz 31.07. bereits akzeptiert) statt Text abzuschneiden. */
.sh-clima-fans .sh-clima-fan { flex: 1 0 auto; min-width: max-content; padding: 5px 7px; font-size: 10px; white-space: nowrap; }
.sh-clima-mode, .sh-clima-fan, .sh-clima-extra {
    flex: 1 1 auto;
    min-width: 44px;
    padding: 9px 6px;
    border-radius: 10px;
    border: none;
    background: var(--panel);
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
}
.sh-clima-mode.active, .sh-clima-fan.active, .sh-clima-extra.active {
    background: var(--brass);
    color: var(--ground);
}
.sh-clima-mode:disabled { opacity: 0.3; cursor: not-allowed; }
/* Fix 31.07.2026 (kiosk_daikin.php-Portierung, Farben an unsere Palette angepasst) —
   Sensor-Zeile (Innen/Außen), Lüfter-Balken, Icon-Modus-Buttons, Lade-/Fehler-Overlay, Status-Text. */
.sh-clima-mode { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sh-clima-mode svg { display: block; }
.sh-clima-sensor-row {
    display: flex; justify-content: center; gap: 20px;
    margin: -6px 0 10px; font-size: 12px; color: var(--muted);
}
.sh-clima-sensor-row svg { vertical-align: middle; }
.sh-clima-sensor-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.sh-clima-fanbars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 26px; }
.sh-clima-fanbars .bar { width: 6px; border-radius: 2px 2px 0 0; background: var(--line-strong); opacity: 0.3; }
.sh-clima-fanbars .bar:nth-child(1) { height: 20%; }
.sh-clima-fanbars .bar:nth-child(2) { height: 40%; }
.sh-clima-fanbars .bar:nth-child(3) { height: 60%; }
.sh-clima-fanbars .bar:nth-child(4) { height: 80%; }
.sh-clima-fanbars .bar:nth-child(5) { height: 100%; }
.sh-clima-fanbars .bar.active { background: var(--brass); opacity: 1; }
.sh-clima-fanbars .bar.silent { background: var(--muted); opacity: 0.5; }
.sh-clima-status { text-align: center; font-size: 12px; color: var(--muted); margin: 0 0 6px; min-height: 15px; }
.sh-clima-overlay {
    position: absolute; inset: 0; border-radius: inherit;
    background: var(--card); opacity: 0.97;
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px;
    font-size: 12.5px; color: var(--muted); z-index: 2;
}
.sh-clima-spinner {
    width: 22px; height: 22px; border: 2px solid var(--line-strong); border-top-color: var(--brass);
    border-radius: 50%; animation: sh-spin 0.8s linear infinite;
}
@keyframes sh-spin { to { transform: rotate(360deg); } }
.sh-clima-error-icon { color: var(--danger); font-size: 18px; }
/* Fix 31.07.2026 (Franz: "auch den ein/ausschaltknopf mit anderem symbol usw. die steuerung
   optisch ansprechender darstellen") — runder Icon-Button statt breiter Text-Pille, echtes
   Power-Symbol (icons.js) statt des bisherigen Blitz-Icons. */
.sh-clima-power {
    margin: 6px auto 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: var(--danger);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.sh-clima-power:active { transform: scale(0.94); }
/* Fix 31.07.2026 (Franz: "der einschalt-knopf ebenso [pulsierend grün blinken]") */
.sh-clima-card.is-on .sh-clima-power { background: var(--green-c); animation: sh-pulse-power 1.6s ease-in-out infinite; }
@keyframes sh-pulse-power {
    0%, 100% { box-shadow: 0 2px 10px rgba(0,0,0,0.18), 0 0 0 0 rgba(143,168,96,0.5); }
    50% { box-shadow: 0 2px 10px rgba(0,0,0,0.18), 0 0 0 8px rgba(143,168,96,0); }
}
.sh-clima-power svg { width: 22px; height: 22px; }

.sh-switch-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 560px;
    margin: 0 auto;
    padding: 0 4px;
}
.sh-switch-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.sh-switch-card .btn-secondary { min-width: max-content; white-space: nowrap; }
body:has(.bottom-nav) .wrap { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }