/* =====================================================================
   site.css - gemeinsames Aussehen der Website von testr.

   Eingebunden von den drei Startseiten (index.asp, index_en.asp,
   index_es.asp) und von allen zwoelf Rechtstexten (AGB, Datenschutz,
   Impressum, Disclaimer x de/en/es).

   ACHTUNG, PFAD: Diese fuenfzehn Seiten liegen produktiv im
   WURZELVERZEICHNIS, waehrend admin.html und index.html unter /testr/
   liegen. Das Stylesheet gehoert deshalb serverseitig ebenfalls in die
   Wurzel und wird absolut eingebunden - /css/site.css. Im
   Entwicklungsbaum liegt es trotzdem hier bei den anderen, unter
   _testr/css/: der Baum bildet die Aufteilung nicht ab, sie wird beim
   Hochladen von Hand gemacht. Wer die Datei umbenennt oder verschiebt,
   muss den absoluten Pfad in allen fuenfzehn Seiten mitziehen.

   Hervorgegangen aus css/legal.css (nur Rechtstexte) plus dem frueheren
   <style>-Block am Kopf der drei Startseiten. Die beiden hielten
   zweiunddreissig Regeln wortgleich doppelt - Kopfzeile, Logo, Knoepfe,
   Sprachwahl, Fuss und den kompletten Farbsatz. Die stehen jetzt einmal.

   Abgrenzung zu den anderen Stylesheets:

     /css/site.css          Website - index*.asp + Rechtstexte (hier),
                            im Baum _testr/css/site.css
     /testr/css/core.css    App     - admin.html und index.html gemeinsam
     /testr/css/admin.css   App     - nur die Verwaltung
     /testr/css/index.css   App     - nur der Testbogen
     /testr/css/apply.css   App     - nur die Bewerbungsseite
     /testr/css/hilfe.css   Hilfe   - die sechs hilfe*.html im iframe
     /testr/css/all.min.css App     - Font Awesome, unveraendert

   Aufbau dieser Datei:

     1. Gemeinsam        Farben, Grundgeruest, Kopfzeile, Knoepfe, Fuss
     2. Nur Rechtstexte  auf .page-legal eingegrenzt
     3. Nur Startseiten  auf .page-home eingegrenzt, ganz unten

   Seitenkennung: <body class="page-home"> bzw. <body class="page-legal">.
   Beide Seitentypen haben dieselbe Kopfzeile, aber sehr verschiedene
   Koerper - die Startseite bringt Preistafel, Galerie und Aufklapptexte
   mit, die Rechtstexte Fliesstext, Inhaltsverzeichnis und Tabellen. Ohne
   die Kennung faerbten die Tabellenregeln der Startseite die Tabellen in
   den AGB um.
   ===================================================================== */

:root{
  --bg:#f4f7fb; --surface:#fff; --ink:#10202f; --ink-soft:#56636f;
  --accent:#0a66ff; --accent-soft:#e4edff; --border:#dde4ec;
  --done:#0f9d58; --done-soft:#e3f5ea;
  --crit-bg:#ffe3e1; --crit-ink:#b3261e;
  --shadow:0 1px 2px rgba(16,32,47,.06),0 8px 24px rgba(16,32,47,.06);
}
/* Farbmodus dreifach definiert wie in allen Apps der Familie:
   prefers-color-scheme, body.theme-dark und body.theme-light. Der Knopf in der
   Kopfzeile wechselt System -> Hell -> Dunkel und merkt sich die Wahl unter
   demselben localStorage-Schluessel wie die Anwendung ("user-theme");
   .theme-forced am <html> schaltet die Media-Query ab, damit "hell" auch auf
   einem dunkel eingestellten Geraet hell bleibt. Siehe js/site.js.

   ACHTUNG: die Anwendung (admin.html, index.html) benutzt dafuer js/i18n.js mit
   dem Schluessel "user_theme". Die Website hat ihre eigene Mechanik und den
   Schluessel "user-theme" - so wie die vier anderen Apps der Familie. */
@media (prefers-color-scheme:dark){
  :root:not(.theme-forced){
    --bg:#0b1420; --surface:#111d2c; --ink:#eef3f8; --ink-soft:#9db0c2;
    --accent:#5b9dff; --accent-soft:#16273f; --border:#24354a;
    --done:#48c98a; --done-soft:#12301f;
    --crit-bg:#3a1a1a; --crit-ink:#ff8f88;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  }
}
body.theme-dark{
  --bg:#0b1420; --surface:#111d2c; --ink:#eef3f8; --ink-soft:#9db0c2;
  --accent:#5b9dff; --accent-soft:#16273f; --border:#24354a;
  --done:#48c98a; --done-soft:#12301f;
  --crit-bg:#3a1a1a; --crit-ink:#ff8f88;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
}
body.theme-light{
  --bg:#f4f7fb; --surface:#fff; --ink:#10202f; --ink-soft:#56636f;
  --accent:#0a66ff; --accent-soft:#e4edff; --border:#dde4ec;
  --done:#0f9d58; --done-soft:#e3f5ea;
  --crit-bg:#ffe3e1; --crit-ink:#b3261e;
  --shadow:0 1px 2px rgba(16,32,47,.06),0 8px 24px rgba(16,32,47,.06);
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font-family:ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:17px;
  -webkit-text-size-adjust:100%}
.wrap{max-width:1100px;margin:0 auto;padding:0 26px}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* --- Kopf: identisch zu index.asp ---------------------------------- */
body{padding-top:64px}
.navbar{position:fixed;top:0;left:0;right:0;z-index:60;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(160%) blur(9px);
  -webkit-backdrop-filter:saturate(160%) blur(9px);
  border-bottom:1px solid var(--border)}

/* =====================================================================
   Einheitliche Masse fuer Kopf und Fuss - in ALLEN Apps der Familie
   dieselben Zahlen. Wer eine davon aendert, aendert sie ueberall.

     Kopfzeile         64px hoch, 12px Abstand zwischen den Teilen
     Inhalt beginnt    64px unter dem Seitenrand (body padding-top)
     Sprungziele       76px (Leistenhoehe plus etwas Luft)
     Klappmenue        oeffnet bei 64px
     Fuss              1px durchgezogener Strich, 28px oben / 40px unten

   Die Reihenfolge in der Leiste ist ebenfalls ueberall gleich:
   Wortmarke, Navigationspunkte, Farbmodus, Sprachwahl, Handlungsknopf,
   Menueknopf. Die Navigationspunkte stehen ZENTRIERT zwischen der Wortmarke
   und dem rechten Teil: .navlinks traegt margin-inline:auto, damit teilt sich
   der freie Platz gleichmaessig auf beide Seiten auf. Die Wortmarke darf
   deshalb KEIN margin-right:auto haben - das schoebe alles nach rechts und
   die Navigation klebte am Logo.
   ===================================================================== */
.nav{display:flex;align-items:center;gap:12px;height:64px}
.navlinks{display:flex;align-items:center;gap:8px;margin-inline:auto}
/* Das Sprachfeld in der Leiste bekommt einen Deckel, sonst nimmt es zu viel
   Platz ein. Auf Telefonen zeigt es sich gar nicht mehr - dort steht seine
   Zwillingsfassung im Klappmenue. */
.nav > .langsel{max-width:7.5rem}

/* Runder Knopf fuer den Farbmodus - dieselbe Rolle und dieselbe Groesse wie in
   den vier anderen Apps der Familie. */
.iconbtn{width:40px;height:40px;flex:0 0 auto;border-radius:50%;
  border:1px solid var(--border);background:var(--surface);color:var(--ink);
  font:inherit;font-size:15px;cursor:pointer;display:grid;place-content:center;
  transition:border-color .18s ease,color .18s ease}
.iconbtn:hover{border-color:var(--accent);color:var(--accent)}
.burger{display:none;font:inherit;font-size:18px;line-height:1;color:var(--ink-soft);
  background:var(--surface);border:1px solid var(--border);border-radius:9px;
  width:44px;height:44px;cursor:pointer}
.burger:hover{color:var(--ink);border-color:var(--accent)}

@media (max-width:760px){
  .burger{display:grid;place-content:center}
  .navlinks{position:absolute;top:64px;left:0;right:0;display:none;
    flex-direction:column;align-items:stretch;gap:6px;padding:14px 26px 18px;
    background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow)}
  .navlinks.open{display:flex}
  /* Die Wortmarke schiebt den rechten Teil ans Ende der Leiste: solange die
     Navigationspunkte im Klappmenue liegen, gibt es keinen zentrierten
     Mittelteil mehr, der den Platz von selbst verteilt. */
  .nav > .logo{margin-right:auto}
  .navlinks .btn{text-align:center;padding:14px 18px;font-size:16px}
  .navlinks select{width:100%}
  /* Auf dem Telefon zeigt die Leiste nur noch Wortmarke, Farbmodus und
     Menueknopf. Sprachfeld und Handlungsknopf weichen; im Klappmenue stehen
     dafuer ihre Zwillingsfassungen - der Knopf als letzter Eintrag ueber die
     volle Breite. */
  .nav > .langsel,.nav > .btn{display:none}
  .navlinks .langsel{display:block}
  .navlinks a.cta-menu{display:block;margin-top:12px}
}

@media (min-width:761px){
  .navlinks .langsel,.navlinks a.cta-menu{display:none}
}

.logo{font-size:21px;font-weight:750;letter-spacing:-.02em;text-decoration:none;color:var(--ink);
  display:inline-flex;align-items:center}
.logo .dot{color:var(--accent)}
/* Ohne border-radius: das PNG bringt seine runden Ecken schon mit. */
.logo img{display:block;height:30px;width:auto;margin-right:10px}
.nav .grow{flex:1 1 auto}

.btn{display:inline-block;font:inherit;font-size:15px;font-weight:600;color:var(--ink-soft);
  background:var(--surface);border:1px solid var(--border);border-radius:9px;
  padding:12px 19px;cursor:pointer;text-decoration:none}
.btn:hover{color:var(--ink);border-color:var(--accent)}
.btn.primary{background:var(--accent);color:#fff;border-color:transparent}
.btn.primary:hover{filter:brightness(1.08);color:#fff}

/* Sprachwahl. Dieselben Masse wie I18N.selectHtml in js/i18n.js, damit die
   Leiste hier und in der Verwaltung gleich aussieht. */
select.langsel{width:auto;font:inherit;font-size:14.5px;color:var(--ink-soft);
  background:var(--surface);border:1px solid var(--border);border-radius:9px;
  padding:8px 10px;cursor:pointer}

/* --- Textkoerper ---------------------------------------------------- */
.page-legal main{padding:52px 0 64px}
.legal{max-width:80ch}
.legal h1{font-size:38px;font-weight:750;line-height:1.15;letter-spacing:-.025em;margin:0 0 10px}
.legal .stand{color:var(--ink-soft);font-size:14.5px;margin:0 0 34px}
.legal h2{font-size:23px;font-weight:750;letter-spacing:-.01em;margin:40px 0 12px;
  padding-top:26px;border-top:1px solid var(--border)}
.legal h2:first-of-type{border-top:none;padding-top:0}
.legal h3{font-size:17.5px;font-weight:700;margin:26px 0 8px}
.legal p{color:var(--ink-soft);font-size:16px;line-height:1.65;margin:0 0 14px}
.legal ul,.legal ol{color:var(--ink-soft);font-size:16px;line-height:1.65;margin:0 0 14px;padding-left:22px}
.legal li{margin-bottom:7px}
.legal strong{color:var(--ink)}
.legal address{font-style:normal;color:var(--ink-soft);font-size:16px;line-height:1.7;margin:0 0 14px}
.legal code{font-family:ui-monospace,Menlo,monospace;font-size:.92em;background:var(--accent-soft);
  padding:2px 6px;border-radius:4px}

/* Hervorgehobener Kasten fuer Kontakt, Anbieter, Warnhinweise. */
.legal .box{background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow);padding:20px 24px;margin:0 0 20px}
.legal .box p:last-child,.legal .box ul:last-child{margin-bottom:0}

/* Inhaltsverzeichnis oben. Bei Texten mit fuenfzehn Abschnitten ist das der
   Unterschied zwischen Nachschlagen und Durchscrollen. */
.toc{background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow);padding:18px 24px;margin:0 0 38px}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:34px;font-size:15px;line-height:1.7}
@media (max-width:640px){ .toc ol{columns:1} }
.toc li{margin:0}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}
/* Sprungziele duerfen nicht unter der festen Leiste landen. */
.page-legal h2[id],.page-legal section[id]{scroll-margin-top:76px}

/* Tabelle wie in der Preisuebersicht von index.asp. */
.legal table{width:100%;border-collapse:collapse;font-size:15.5px;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:0 0 20px}
.legal th,.legal td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--border);
  color:var(--ink-soft);vertical-align:top}
.legal th{font-size:13px;text-transform:uppercase;letter-spacing:.05em;font-weight:650;color:var(--ink-soft)}
.legal td:first-child{color:var(--ink);font-weight:650}
.legal tbody tr:last-child td{border-bottom:none}
.tbl-scroll{overflow-x:auto;border-radius:12px}

/* Unter 680px wird jede Zeile eine Karte - dieselbe Loesung wie in index.asp:
   seitwaerts scrollen ruecken die Werte aus dem Bild, die Beschriftung bleibt links. */
@media (max-width:680px){
  .tbl-scroll{overflow-x:visible}
  .legal table thead{display:none}
  .legal table,.legal tbody,.legal tr,.legal td{display:block;width:100%}
  .legal table tr{padding:14px 16px;border-bottom:1px solid var(--border)}
  .legal tbody tr:last-child{border-bottom:none}
  .legal table td{padding:0;border-bottom:none}
  .legal table td:first-child{margin-bottom:8px}
  .legal table td.v{display:flex;align-items:center;justify-content:space-between;gap:12px;
    text-align:right;padding:6px 0}
  .legal table td.v::before{content:attr(data-label);color:var(--ink-soft);font-weight:650;
    font-size:13px;text-transform:uppercase;letter-spacing:.05em}
}

/* --- Fuss: identisch zu index.asp ----------------------------------- */
footer{border-top:1px solid var(--border);padding:28px 0 40px;color:var(--ink-soft);font-size:14.5px}
footer .fl{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap}
footer .grow{flex:1 1 auto}
/* Die Wortmarke und die einzelnen Verweise brechen nie in sich um - sonst
   steht die halbe Rechtstextliste unter dem Namen. Umbrochen wird, wenn
   ueberhaupt, zwischen den Verweisen. */
footer .fl > a{white-space:nowrap}
footer .brand-sm,footer .logo{white-space:nowrap;flex:0 0 auto}

/* --- Fuss auf dem Telefon: Wortmarke oben, Rechtstexte fest darunter ---
   Unter 640px bekommt die Wortmarke eine ganze Zeile fuer sich, damit die
   Verweise IMMER in der zweiten Zeile beginnen und nicht je nach Laenge des
   Namens mal neben und mal unter ihm stehen. Der Platzhalter .grow entfaellt
   dabei - sonst schoebe er die Verweise weiterhin nach rechts. */
@media (max-width:640px){
  footer .fl{justify-content:center;text-align:center;row-gap:12px;column-gap:16px}
  footer .grow{display:none}
  footer .brand-sm,footer .logo{flex:0 0 100%;justify-content:center}
}

@media (max-width:640px){
  .legal h1{font-size:30px}
  .page-legal main{padding:40px 0 48px}
}


/* =====================================================================
   3. Nur die Startseiten (index.asp, index_en.asp, index_es.asp)

   Der Abschnitt stand bis zum 27.08.2026 inline am Kopf jeder der drei
   Dateien - dreimal byte-identisch. Die zweiunddreissig Regeln, die er
   mit den Rechtstexten teilte, sind beim Zusammenlegen herausgefallen;
   was hier steht, gibt es nur auf den Startseiten.

   Jede Regel ist auf .page-home eingegrenzt. Ausgenommen sind die
   html-Regeln: eine Klasse am <body> kann <html> nicht treffen.
   ===================================================================== */

  /* Dieselben Tokens wie /testr/admin.html - beide Seiten sollen erkennbar
     zusammengehoeren. Wer dort etwas an den Farben aendert, aendert es hier mit. */

  .page-home h2{font-size:27px;font-weight:750;letter-spacing:-.01em;margin:0 0 10px}
  .page-home section{padding:64px 0}
  .page-home section+section{border-top:1px solid var(--border)}
  /* Die Leiste liegt fest über allem - ohne das landete jeder Sprung auf #preise so, dass
     die Überschrift darunter verschwindet. Muss zur Höhe der Leiste passen. */
  .page-home section[id]{scroll-margin-top:76px}
  .page-home .lead{color:var(--ink-soft);font-size:17px;line-height:1.6;max-width:70ch;margin:0 0 30px}

  /* --- Kopf ------------------------------------------------------------- */
  .page-home header.top{background:linear-gradient(180deg,var(--accent-soft),transparent 85%);
    border-bottom:1px solid var(--border)}

  /* Text links, Zeichen rechts in der freien Flaeche. Der Text behaelt seine 44ch - er
     soll nicht mitwachsen, nur weil daneben Platz ist. */
  .page-home .heroband{display:flex;align-items:center;gap:56px}
  .page-home .hero{padding:34px 0 74px;max-width:44ch;flex:0 1 auto}
  .page-home .hero h1{font-size:44px;font-weight:750;line-height:1.12;letter-spacing:-.025em;margin:0 0 16px}
  /* Groesse aus dem verbleibenden Platz, gedeckelt: auf breiten Schirmen soll das Zeichen
     nicht ins Riesenhafte wachsen. */
  .page-home .heromark{flex:0 1 300px;width:300px;max-width:100%;height:auto;align-self:center}
  /* Unter 900px steht daneben nichts mehr sinnvoll - dann faellt es weg statt den Text
     auf ein Drittel der Breite zu quetschen. */
  @media (max-width:900px){ .page-home .heromark{display:none} }
  .page-home .hero p{font-size:19px;line-height:1.55;color:var(--ink-soft);margin:0 0 26px;max-width:60ch}
  .page-home .cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .page-home .hint{font-size:14.5px;color:var(--ink-soft);margin-top:14px}

  /* --- Ablauf ----------------------------------------------------------- */
  .page-home .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
  .page-home .step{background:var(--surface);border:1px solid var(--border);border-radius:12px;
    box-shadow:var(--shadow);padding:22px 24px}
  /* Zeichen und Nummer stehen nebeneinander: das Zeichen sagt auf einen Blick, worum es
     geht, die Nummer haelt die Reihenfolge fest - untereinander gestapelt ginge beides
     verloren. */
  .page-home .step .shead{display:flex;align-items:center;gap:11px;margin-bottom:12px}
  .page-home .step .n{display:grid;place-content:center;width:38px;height:38px;border-radius:9px;
    background:var(--accent-soft);color:var(--accent);font-size:17px;flex:0 0 auto}
  .page-home .step .sn{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
    color:var(--ink-soft);font-variant-numeric:tabular-nums}
  .page-home .step h3{font-size:17.5px;font-weight:700;margin:0 0 6px}
  .page-home .step p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-soft)}

  /* --- Funktionen ------------------------------------------------------- */
  .page-home .feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px 34px}
  .page-home .feat{padding:4px 0 14px;border-bottom:1px dashed var(--border)}
  .page-home .feat h3{font-size:16.5px;font-weight:700;margin:0 0 5px}
  .page-home .feat p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-soft)}

  /* --- Preise ----------------------------------------------------------- */
  /* Vier Tarifkarten in einer Reihe. Feste Spaltenzahl statt auto-fit mit minmax(260px):
     .wrap ist 1100px breit minus 2x26px Polster = 1048px Inhalt, vier Spalten a 260px
     plus drei Luecken a 16px braeuchten aber 1088px - die vierte Karte fiel dadurch in
     die naechste Zeile. Mit fester Spaltenzahl teilen sich die vier den vorhandenen
     Platz (je 250px) statt eine Mindestbreite einzufordern.

     Die Stufen darunter sind bewusst 4 -> 2 -> 1 und nicht 4 -> 3 -> 2 -> 1: Bei drei
     Spalten stuende die vierte Karte allein in der zweiten Zeile, was genauso aussieht
     wie der Fehler, der hier behoben wurde. */
  .page-home .tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:34px}
  @media (max-width:1040px){ .page-home .tiers{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:620px){ .page-home .tiers{grid-template-columns:1fr} }
  .page-home .tier{background:var(--surface);border:1px solid var(--border);border-radius:12px;
    box-shadow:var(--shadow);padding:22px;display:flex;flex-direction:column}
  .page-home .tier.best{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow)}
  .page-home .tier .tag{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
    color:var(--accent);margin-bottom:10px;min-height:16px}
  .page-home .tier h3{font-size:20px;font-weight:750;margin:0 0 4px}
  .page-home .tier .sub{font-size:14.5px;color:var(--ink-soft);line-height:1.5;margin:0 0 18px;min-height:44px}
  .page-home .price{display:flex;align-items:baseline;gap:5px;margin-bottom:20px}
  .page-home .price{flex-wrap:wrap}
  .page-home .price .amt{font-size:36px;font-weight:750;line-height:1;font-variant-numeric:tabular-nums;
    letter-spacing:-.02em}
  .page-home .price .per{font-size:14.5px;color:var(--ink-soft)}
  .page-home .tier ul{list-style:none;margin:0 0 22px;padding:0;font-size:15.5px;line-height:1.5}
  .page-home .tier li{display:flex;gap:9px;padding:7px 0;border-bottom:1px dashed var(--border)}
  .page-home .tier li:last-child{border-bottom:none}
  .page-home .tier li::before{content:"✓";color:var(--done);font-weight:700;flex:0 0 auto}
  .page-home .tier li b{font-variant-numeric:tabular-nums}
  .page-home .tier .btn{margin-top:auto;text-align:center}

  .page-home table{width:100%;border-collapse:collapse;font-size:15.5px;background:var(--surface);
    border:1px solid var(--border);border-radius:12px;overflow:hidden}
  .page-home th, .page-home td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--border)}
  .page-home th{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);font-weight:650}
  .page-home td.v, .page-home th.v{text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}
  .page-home tbody tr:last-child td{border-bottom:none}
  .page-home tbody tr:hover{background:var(--accent-soft)}

  .page-home .yes{color:var(--done);font-weight:700}

  /* Unter ~680px passen vier Spalten auf kein Telefon. Seitwaerts scrollen waere die
     schlechteste Antwort: Das Merkmal steht dann links, der Wert dazu ausserhalb des
     Bildes. Stattdessen wird jede Zeile eine Karte - das Merkmal als Ueberschrift,
     darunter je Tarif eine Zeile mit Beschriftung (data-label) und Wert. */
  @media (max-width:680px){

    .page-home table thead{display:none}
    .page-home table, .page-home table tbody, .page-home table tr, .page-home table td{display:block;width:100%}
    .page-home table tr{padding:14px 16px;border-bottom:1px solid var(--border)}
    .page-home tbody tr:last-child{border-bottom:none}
    .page-home table td{padding:0;border-bottom:none}
    .page-home table td:first-child{font-weight:700;margin-bottom:8px}
    .page-home table td.v{display:flex;align-items:center;justify-content:space-between;gap:12px;
      text-align:right;padding:6px 0;white-space:normal}
    .page-home table td.v::before{content:attr(data-label);color:var(--ink-soft);font-weight:650;
      font-size:13px;text-transform:uppercase;letter-spacing:.05em}
  }

  /* --- FAQ / Fuss ------------------------------------------------------- */
  .page-home details{border-bottom:1px solid var(--border);padding:4px 0}
  .page-home details>summary{cursor:pointer;font-weight:650;font-size:16.5px;padding:14px 0;list-style:none;
    display:flex;gap:10px;align-items:center}
  .page-home details>summary::after{content:"+";margin-left:auto;color:var(--ink-soft);font-weight:400;font-size:21px}
  .page-home details[open]>summary::after{content:"–"}
  .page-home details p{margin:0 0 16px;font-size:15.5px;line-height:1.6;color:var(--ink-soft);max-width:80ch}

  .page-home code{font-family:ui-monospace,Menlo,monospace;font-size:.92em;background:var(--accent-soft);
    padding:2px 6px;border-radius:4px}

  /* --- Bilder ------------------------------------------------------------
     Alle Aufnahmen sind 4112x2332 (Seitenverhaeltnis 1.763). Das steht per
     aspect-ratio im CSS, damit der Platz schon vor dem Laden steht und der Text
     darunter beim Eintreffen des Bildes nicht wegspringt. */
  .page-home .shot{display:block;width:100%;height:auto;aspect-ratio:4112/2332;object-fit:cover;
    object-position:top center;background:var(--surface);
    border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}

  .page-home .gal .cap{margin:9px 2px 0;font-size:14px;color:var(--ink-soft);line-height:1.5}

  .page-home .gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:26px 24px}
  .page-home .gal figure{margin:0}
  .page-home .gal .cap b{color:var(--ink);font-weight:650}
  /* Anfassbar aussehen, bevor jemand klickt. */
  .page-home .gal button.shotbtn{display:block;width:100%;padding:0;border:none;background:none;cursor:zoom-in}
  .page-home .gal button.shotbtn .shot{transition:transform .18s,border-color .18s}
  .page-home .gal button.shotbtn:hover .shot{transform:translateY(-3px);border-color:var(--accent)}

  /* --- Vollbild-Galerie --------------------------------------------------
     Aufbau wie #fullscreen-overlay in der MyTripWallet-App: ein schwarzes Feld ueber
     allem, das Bild per object-fit:contain mittig, der Schliessen-Knopf als runde
     44er-Flaeche oben rechts. Dazu hier: Blaettern, Zaehler und Bildunterschrift.
     Absichtlich ohne fremde Bibliothek - fuenf Bilder rechtfertigen keine. */
  .page-home #lb{display:none;position:fixed;inset:0;background:#000;z-index:9999;
    flex-direction:column;justify-content:center;align-items:center}
  .page-home #lb.on{display:flex}
  .page-home #lb img{max-width:calc(100% - 130px);max-height:calc(100% - 150px);object-fit:contain;
    border-radius:8px}
  .page-home #lb .lbcap{color:#fff;font-size:15px;line-height:1.5;text-align:center;max-width:70ch;
    padding:16px 24px 0;opacity:.85}
  .page-home #lb .lbcap b{font-weight:650}
  .page-home #lb .lbn{position:absolute;top:26px;left:26px;color:#fff;opacity:.6;font-size:14px;
    font-variant-numeric:tabular-nums;letter-spacing:.04em}
  .page-home #lb button{position:absolute;background:rgba(255,255,255,.2);border:none;color:#fff;
    font-size:22px;width:44px;height:44px;border-radius:50%;cursor:pointer;z-index:10000}
  .page-home #lb button:hover{background:rgba(255,255,255,.34)}
  .page-home #lb .lbx{top:20px;right:20px}
  .page-home #lb .lbp{left:20px;top:50%;transform:translateY(-50%)}
  .page-home #lb .lbnx{right:20px;top:50%;transform:translateY(-50%)}
  @media (max-width:640px){
    .page-home #lb img{max-width:calc(100% - 24px);max-height:calc(100% - 190px)}
    .page-home #lb .lbp{left:12px;top:auto;bottom:20px;transform:none}
    .page-home #lb .lbnx{right:12px;top:auto;bottom:20px;transform:none}
  }

  @media (max-width:640px){
    .page-home .hero h1{font-size:34px}
    .page-home section{padding:48px 0}
  }
