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

   Eingebunden von der Startseite (index.asp) und von allen zwoelf
   Rechtstexten (AGB, Datenschutz, Impressum, Disclaimer x de/en/es).

   Hervorgegangen aus dem <style>-Block am Kopf von index.asp plus
   css/legal.css. Das war bis zum 27.08.2026 nicht nur an zwei Stellen
   gepflegt, sondern es waren ZWEI VERSCHIEDENE ENTWUERFE mit denselben
   Klassennamen: .btn, .brand, .navlinks, .lang-switch, .help-panel und
   footer sahen auf der Startseite anders aus als in den Rechtstexten.
   Von sechsundzwanzig gemeinsamen Selektoren waren nur vier gleich.

   Aufgeloest wurde das in die Richtung der Startseite: Glas, weiche
   Ecken (--radius 22px), Pillenknoepfe, Verlaufsschrift und der
   Aurora-Hintergrund gelten jetzt auch fuer die Rechtstexte. Die zwoelf
   Seiten sehen deshalb sichtbar anders aus als vorher.

   Neu dabei ist der HELLMODUS. Die Startseite war dunkel gedacht -
   --glass war rgba(255,255,255,.05), die Linien waren weisse
   Transparenz, die Knopfschrift #1a1000 auf Orange. Eine helle
   Entsprechung gab es nirgends; sie ist hier erfunden worden, indem
   dieselben Rollen mit hellen Werten belegt sind: Glas wird dunkle
   statt heller Transparenz, Teal und Orange werden fuer den Kontrast
   auf Weiss abgedunkelt (#177a91 / #d1770d), und die Aurora-Blobs
   verlieren an Deckkraft, damit sie tonen statt zu leuchten.

   Abgrenzung zu den anderen Stylesheets im Verzeichnis:

     css/site.css   Website  - index.asp + alle Rechtstexte (diese Datei)
     css/hilfe.css  Hilfe    - hilfe_de/en/es.html, von App UND Website
                               im iframe geoeffnet, deshalb eigenstaendig
     css/core.css   App      - index.html, Grundgeruest
     css/app.css    App      - index.html, App-eigene Bausteine
     css/all.min.css App     - Font Awesome, unveraendert uebernommen

   Aufbau dieser Datei:

     1. Farbwerte        vier Bloecke, wie ueberall in der Familie
     2. Gemeinsam        Grundgeruest, Aurora, Kopfzeile-Bausteine,
                         Knoepfe, Sprachwahl, Hilfe-Panel, Fuss
     3. Nur Startseite   auf .page-home eingegrenzt
     4. Nur Rechtstexte  auf .page-legal eingegrenzt

   Seitenkennung: <body class="page-home"> bzw. <body class="page-legal">.
   Noetig, weil die beiden Seitentypen verschiedenes Markup fuer dieselbe
   Aufgabe haben: die Startseite hat header>nav und .mobile-nav, die
   Rechtstexte .navbar>.wrap.nav und .navlinks.open.
   ===================================================================== */

/* =====================================================================
   1. Farbwerte

   Farbmodus dreifach definiert wie ueberall in der Familie:
   prefers-color-scheme, body.theme-dark und body.theme-light. Der
   Schalter in der Kopfzeile wechselt System -> Hell -> Dunkel und merkt
   sich die Wahl unter demselben localStorage-Schluessel wie die App
   ("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.

   Die dunklen Werte sind die der bisherigen Startseite, unveraendert -
   im Dunkeln sieht sie also aus wie vorher. Die hellen sind neu.
   ===================================================================== */
:root{
  /* Flaechen: Seitengrund und Panel. Alles dazwischen ist Glas -
     --glass auf --bg, nicht eine eigene Flaechenfarbe. */
  --bg:#eef2f7;
  --surface:#ffffff;

  /* Schrift. */
  --ink:#0f1f38;
  --ink-soft:#54657f;

  /* Die beiden Markenfarben. Auf Hell abgedunkelt, sonst traegt Teal auf
     Weiss keinen Text: #3badc7 kommt gegen #ffffff nicht auf 4.5:1. */
  --accent:#177a91;
  --accent-light:#3badc7;
  --accent-2:#d1770d;
  --accent-2-light:#f4941f;
  --on-accent:#ffffff;      /* Schrift auf gefuelltem Teal */
  --on-accent-2:#1a1000;    /* Schrift auf gefuelltem Orange - in beiden Modi dunkel */
  --accent-soft:#dcf0f5;    /* Codeschnipsel in den Rechtstexten */

  /* Linien und Glas. Im Dunkeln helle Transparenz auf dunklem Grund,
     im Hellen dunkle auf hellem - dieselbe Rolle, umgedrehtes Vorzeichen. */
  --border:rgba(15,31,56,.12);
  --glass:rgba(15,31,56,.035);
  --glass-strong:rgba(15,31,56,.07);

  /* Kopfzeile: durchscheinend mit Weichzeichner. Die zweite Fassung ist
     fuer das aufgeklappte Menue, das nichts durchscheinen lassen darf. */
  --header-bg:rgba(255,255,255,.72);
  --header-bg-solid:rgba(255,255,255,.94);

  /* Verlaeufe. Als Token, weil sie im Hellen andere Enden brauchen:
     die hellen Marken-Toene tragen auf Weiss keinen Text. */
  --grad-brand:linear-gradient(120deg,var(--accent),var(--accent-2));
  --grad-cta:linear-gradient(135deg,var(--accent-2),var(--accent-2-light));
  --grad-icon:linear-gradient(135deg,var(--accent),#2a7fa0);
  --grad-band:linear-gradient(135deg,rgba(23,122,145,.10),rgba(209,119,13,.10));

  /* Schatten und Schein. */
  --glow-cta:0 8px 24px -8px rgba(209,119,13,.45);
  --glow-cta-hover:0 12px 30px -8px rgba(209,119,13,.6);
  --panel-shadow:-30px 0 60px -20px rgba(15,31,56,.22);
  --shadow-lg:0 20px 50px rgba(15,31,56,.14);

  /* Aurora: im Hellen tont sie nur, im Dunkeln leuchtet sie. */
  --aurora-opacity:.16;

  --radius:22px;
  --num:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}

@media (prefers-color-scheme:dark){
  :root:not(.theme-forced){
    --bg:#050a14;
    --surface:#0a1526;
    --ink:#e9eff8;
    --ink-soft:#9fb0c7;
    --accent:#3badc7;
    --accent-light:#6fd4ea;
    --accent-2:#f4941f;
    --accent-2-light:#ffb75c;
    --on-accent:#001820;
    --accent-soft:#152a4a;
    --border:rgba(255,255,255,.09);
    --glass:rgba(255,255,255,.05);
    --glass-strong:rgba(255,255,255,.09);
    --header-bg:rgba(5,10,20,.65);
    --header-bg-solid:rgba(5,10,20,.92);
    --grad-brand:linear-gradient(120deg,var(--accent-light),var(--accent-2-light));
    --grad-band:linear-gradient(135deg,rgba(59,173,199,.18),rgba(244,148,31,.18));
    --glow-cta:0 8px 24px -8px rgba(244,148,31,.6);
    --glow-cta-hover:0 12px 30px -8px rgba(244,148,31,.75);
    --panel-shadow:-30px 0 60px -20px rgba(0,0,0,.6);
    --shadow-lg:0 20px 50px rgba(0,0,0,.35);
    --aurora-opacity:.5;
  }
}

body.theme-dark{
  --bg:#050a14; --surface:#0a1526;
  --ink:#e9eff8; --ink-soft:#9fb0c7;
  --accent:#3badc7; --accent-light:#6fd4ea;
  --accent-2:#f4941f; --accent-2-light:#ffb75c;
  --on-accent:#001820; --accent-soft:#152a4a;
  --border:rgba(255,255,255,.09);
  --glass:rgba(255,255,255,.05); --glass-strong:rgba(255,255,255,.09);
  --header-bg:rgba(5,10,20,.65); --header-bg-solid:rgba(5,10,20,.92);
  --grad-brand:linear-gradient(120deg,var(--accent-light),var(--accent-2-light));
  --grad-band:linear-gradient(135deg,rgba(59,173,199,.18),rgba(244,148,31,.18));
  --glow-cta:0 8px 24px -8px rgba(244,148,31,.6);
  --glow-cta-hover:0 12px 30px -8px rgba(244,148,31,.75);
  --panel-shadow:-30px 0 60px -20px rgba(0,0,0,.6);
  --shadow-lg:0 20px 50px rgba(0,0,0,.35);
  --aurora-opacity:.5;
}

body.theme-light{
  --bg:#eef2f7; --surface:#ffffff;
  --ink:#0f1f38; --ink-soft:#54657f;
  --accent:#177a91; --accent-light:#3badc7;
  --accent-2:#d1770d; --accent-2-light:#f4941f;
  --on-accent:#ffffff; --accent-soft:#dcf0f5;
  --border:rgba(15,31,56,.12);
  --glass:rgba(15,31,56,.035); --glass-strong:rgba(15,31,56,.07);
  --header-bg:rgba(255,255,255,.72); --header-bg-solid:rgba(255,255,255,.94);
  --grad-brand:linear-gradient(120deg,var(--accent),var(--accent-2));
  --grad-band:linear-gradient(135deg,rgba(23,122,145,.10),rgba(209,119,13,.10));
  --glow-cta:0 8px 24px -8px rgba(209,119,13,.45);
  --glow-cta-hover:0 12px 30px -8px rgba(209,119,13,.6);
  --panel-shadow:-30px 0 60px -20px rgba(15,31,56,.22);
  --shadow-lg:0 20px 50px rgba(15,31,56,.14);
  --aurora-opacity:.16;
}


/* =====================================================================
   2. Gemeinsam - was Startseite und Rechtstexte gleich haben
   ===================================================================== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  background:var(--bg);
  color:var(--ink);
  overflow-x:hidden;
}
a{color:inherit;}
img{max-width:100%;display:block;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px;}

/* Aurora: drei weiche Farbflecken hinter allem. Sie liegen fest im
   Viewport (position:fixed) und ziehen langsam - der einzige bewegte
   Teil der Seite. Seit dem 27.08.2026 auch in den Rechtstexten; die
   zwoelf Dateien tragen dafuer denselben Dreizeiler im Markup. */
.aurora{position:fixed; inset:0; z-index:-1; overflow:hidden;}
.aurora span{
  position:absolute; border-radius:50%; filter:blur(90px);
  opacity:var(--aurora-opacity);
  animation:drift 22s ease-in-out infinite alternate;
}
.aurora span:nth-child(1){width:42vw;height:42vw;background:var(--accent-light);top:-10%;left:-8%;}
.aurora span:nth-child(2){width:38vw;height:38vw;background:var(--accent-2);top:20%;right:-12%;animation-duration:28s;}
.aurora span:nth-child(3){width:30vw;height:30vw;background:#4a5bd6;bottom:-15%;left:20%;animation-duration:26s;}
@keyframes drift{
  0%{transform:translate(0,0) scale(1);}
  100%{transform:translate(6%,8%) scale(1.15);}
}
@media (prefers-reduced-motion:reduce){
  .aurora span{animation:none;}
}

/* Wortmarke. */
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;letter-spacing:-0.02em;text-decoration:none;}
.brand img{width:34px;height:34px;}

/* Verweise in der Kopfzeile: Schrift im Markenverlauf. */

/* =====================================================================
   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.
   ===================================================================== */
.navlinks{display:flex;gap:32px;font-size:0.95rem;color:var(--ink-soft);margin-inline:auto;}
.navlinks a{
  background:var(--grad-brand);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  font-weight:600;text-decoration:none;transition:opacity .18s ease;
}
.navlinks a:hover{opacity:0.7;}

/* Knopf: Pille. Der gefuellte traegt den Orangeverlauf und einen Schein
   darunter - die einzige Stelle der Seite, die leuchtet. */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 22px;border-radius:100px;font-weight:600;font-size:0.92rem;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-primary{background:var(--grad-cta);color:var(--on-accent-2);box-shadow:var(--glow-cta);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--glow-cta-hover);}

/* Runder Icon-Knopf. Traegt den Farbmodus-Schalter und, in den
   Rechtstexten, den Menueknopf. */
.iconbtn{
  width:40px;height:40px;flex:0 0 auto;border-radius:50%;
  border:1px solid var(--border);background:var(--glass);color:var(--ink);
  font:inherit;font-size:15px;cursor:pointer;
  display:grid;place-content:center;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.iconbtn:hover{background:var(--glass-strong);border-color:var(--accent);color:var(--accent);}

/* Sprachwahl. Die aktive Sprache steht im Markenverlauf. */
.lang-switch{display:flex;align-items:center;gap:8px;font-size:0.85rem;font-weight:600;}
.lang-switch a{color:var(--ink-soft);text-decoration:none;transition:color .18s ease;}
.lang-switch a:hover{color:var(--ink);}
.lang-switch a.active{
  background:var(--grad-brand);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.lang-switch .sep{color:var(--border);}

/* Hilfe: Panel von rechts mit hilfe_<lang>.html im iframe. Der iframe
   wird erst beim ersten Oeffnen geladen; die Hilfe bringt ihr Aussehen
   selbst mit (css/hilfe.css), weil ein iframe nichts erbt.
   Steuerung: js/site.js. */
.help-overlay{
  position:fixed;inset:0;z-index:1090;background:rgba(3,6,12,0.6);
  display:none;opacity:0;transition:opacity .3s ease;
}
.help-overlay.open{display:block;opacity:1;}
.help-panel{
  position:fixed;top:0;right:0;height:100%;width:40%;max-width:520px;min-width:320px;
  background:var(--surface);border-left:1px solid var(--border);
  box-shadow:var(--panel-shadow);
  z-index:1100;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .32s ease;
}
.help-panel.open{transform:translateX(0);}
@media (max-width:800px){.help-panel{width:100%;max-width:none;min-width:0;}}
.help-panel-header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.help-panel-header h3{margin:0;font-size:1.05rem;font-weight:800;}
.help-panel iframe{flex:1;width:100%;border:0;background:var(--surface);}
.help-close{
  width:40px;height:40px;flex:0 0 auto;border-radius:50%;
  border:1px solid var(--border);background:var(--glass);color:var(--ink);
  font:inherit;font-size:1.5rem;line-height:1;cursor:pointer;
  display:grid;place-content:center;transition:background .18s ease,color .18s ease;
}
.help-close:hover{background:var(--glass-strong);color:var(--accent);}

/* Fuss. */
footer{border-top:1px solid var(--border);padding:28px 0 40px;color:var(--ink-soft);font-size:14.5px;}
footer a{color:inherit;text-decoration:none;}
footer a:hover{color:var(--ink);}


/* =====================================================================
   3. Nur die Startseite (index.asp)

   Der Abschnitt stand bis zum 27.08.2026 inline am Kopf der Datei. Was
   die Rechtstexte mitbenutzen, ist nach oben in Teil 2 gewandert; hier
   steht nur noch, was es allein auf der Startseite gibt.

   Jede Regel ist auf .page-home eingegrenzt - die beiden Seitentypen
   haben verschiedenes Markup fuer dieselbe Aufgabe. Ausgenommen sind
   die html-Regeln: eine Klasse am <body> kann <html> nicht treffen.
   ===================================================================== */

  /* Nav */
  .page-home header{
    position:sticky; top:0; z-index:50;
    backdrop-filter:blur(16px);
    background:var(--header-bg);
    border-bottom:1px solid var(--border);
  }
  .page-home nav{display:flex;align-items:center;gap:12px;height:64px;padding:0 28px;max-width:1200px;margin:0 auto;}

  .page-home .nav-cta{display:flex;gap:12px;align-items:center;}

  .page-home .menu-toggle{
    display:none;background:none;border:none;color:var(--ink);cursor:pointer;
    padding:6px;align-items:center;justify-content:center;
  }
  .page-home .menu-toggle svg{width:26px;height:26px;}

  /* Mobile nav dropdown */
  .page-home .mobile-nav{
    display:none;flex-direction:column;gap:2px;
    padding:6px 28px 20px;
    background:var(--header-bg-solid);
    border-bottom:1px solid var(--border);
    backdrop-filter:blur(16px);
  }
  .page-home .mobile-nav a{
    padding:13px 4px;text-decoration:none;font-size:0.98rem;
    border-bottom:1px solid var(--border);
    background:var(--grad-brand);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    font-weight:600;transition:opacity .18s ease;
  }
  .page-home .mobile-nav a:hover{opacity:0.7;}
  .page-home .mobile-nav .btn-primary{
    margin-top:12px;justify-content:center;border-bottom:none;
    background:var(--grad-cta);
    -webkit-background-clip:padding-box;background-clip:padding-box;
    color:var(--on-accent-2);-webkit-text-fill-color:var(--on-accent-2);
  }
  .page-home .mobile-nav.open{display:flex;}

  /* Hero */
  .page-home .hero{padding:96px 0 60px;}
  .page-home .hero-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;}
  .page-home .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    padding:6px 14px;border-radius:100px;background:var(--glass);border:1px solid var(--border);
    font-size:0.8rem;color:var(--accent-light);font-weight:600;margin-bottom:22px;
  }
  .page-home h1{font-size:clamp(2.4rem,4.6vw,3.6rem);line-height:1.08;letter-spacing:-0.03em;margin:0 0 22px;font-weight:800;}
  .page-home h1 span{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .page-home .lead{font-size:1.15rem;color:var(--ink-soft);line-height:1.65;margin:0 0 34px;max-width:520px;}
  .page-home .hero-ctas{display:flex;flex-direction:column;gap:16px;margin-bottom:36px;}
  .page-home .store-badges{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
  .page-home .store-badges a{
    display:flex;align-items:center;transition:transform .18s ease;
  }
  .page-home .store-badges a:hover{transform:translateY(-2px);}
  .page-home .store-badges img{height:44px;width:auto;display:block;}
  .page-home .trust-row{display:flex;gap:26px;color:var(--ink-soft);font-size:0.85rem;flex-wrap:wrap;}
  .page-home .trust-row b{color:var(--ink);font-size:1.3rem;display:block;font-weight:800;}

  /* Phone mockup */
  .page-home .phone-stage{position:relative;display:flex;justify-content:center;}
  .page-home .phone{
    width:270px;position:relative;z-index:2;
  }
  .page-home .phone img{width:100%;display:block;}
  .page-home .phone-float{
    position:absolute;width:150px;
    z-index:1;
  }
  .page-home .phone-float.pf1{top:-6%;left:-14%;transform:rotate(-9deg);}
  .page-home .phone-float.pf2{bottom:2%;right:-16%;transform:rotate(10deg);}
  @media (max-width:640px){
    .page-home .phone-stage{align-items:flex-end;gap:10px;max-width:100%;}
    .page-home .phone{width:38%;max-width:150px;flex-shrink:0;}
    .page-home .phone-float{width:24%;max-width:90px;flex-shrink:0;}
    .page-home .phone-float.pf1, .page-home .phone-float.pf2{position:static;transform:none;}
  }

  /* Sections */
  .page-home section{padding:90px 0;}
  .page-home .section-head{max-width:640px;margin:0 auto 54px;text-align:center;}
  .page-home .section-head .eyebrow{margin-left:auto;margin-right:auto;}
  .page-home h2{font-size:clamp(1.8rem,3.2vw,2.5rem);letter-spacing:-0.02em;margin:0 0 16px;font-weight:800;}
  .page-home .section-head p{color:var(--ink-soft);font-size:1.05rem;line-height:1.6;}

  /* Bento features */
  .page-home .bento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;}
  .page-home .card{
    background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);
    padding:30px;transition:.25s;
  }
  .page-home .card:hover{background:var(--glass-strong);transform:translateY(-4px);}
  .page-home .b-lg{grid-column:span 3;}
  .page-home .b-md{grid-column:span 3;}
  .page-home .b-sm{grid-column:span 2;}
  @media (max-width:900px){.page-home .b-lg, .page-home .b-md, .page-home .b-sm{grid-column:span 6;}}
  .page-home .icon-badge{
    width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;
    background:var(--grad-icon);margin-bottom:18px;font-size:1.3rem;
  }
  .page-home .card h3{margin:0 0 10px;font-size:1.15rem;font-weight:700;}
  .page-home .card p{margin:0;color:var(--ink-soft);font-size:0.95rem;line-height:1.6;}

  /* Screens showcase */
  .page-home .showcase-scroll{
    display:flex;gap:14px;overflow-x:auto;padding:20px 4px 30px;scroll-snap-type:x mandatory;
  }
  .page-home .showcase-scroll::-webkit-scrollbar{height:6px;}
  .page-home .showcase-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px;}
  .page-home .showcase-item{
    flex:0 0 auto; scroll-snap-align:center; width:220px;
  }
  .page-home .showcase-cap{text-align:center;color:var(--ink-soft);font-size:0.85rem;margin-top:10px;}

  /* Lightbox */
  .page-home .zoomable{cursor:zoom-in;}
  .page-home .lightbox{
    position:fixed;inset:0;z-index:1000;display:none;
    align-items:center;justify-content:center;padding:40px;
    background:rgba(3,6,12,0.92);backdrop-filter:blur(6px);
  }
  .page-home .lightbox.open{display:flex;}
  .page-home .lightbox img{max-width:90vw;max-height:88vh;border-radius:20px;box-shadow:0 30px 80px -20px rgba(0,0,0,0.7);cursor:zoom-out;}
  .page-home .lightbox-close{
    position:absolute;top:20px;right:24px;width:44px;height:44px;border-radius:50%;
    background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,.14);color:#e9eff8;
    font-size:1.6rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:background .18s ease;
  }
  .page-home .lightbox-close:hover{background:rgba(255,255,255,0.18);}
  .page-home .lightbox-nav{
    position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
    background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,.14);color:#e9eff8;
    font-size:1.3rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:background .18s ease;
  }
  .page-home .lightbox-nav:hover{background:rgba(255,255,255,0.18);}
  .page-home .lightbox-prev{left:20px;}
  .page-home .lightbox-next{right:20px;}
  @media (max-width:640px){
    .page-home .lightbox-nav{width:42px;height:42px;font-size:1.1rem;}
    .page-home .lightbox-prev{left:8px;}
    .page-home .lightbox-next{right:8px;}
  }

  .page-home .mobile-nav .lang-switch{padding:13px 4px;border-bottom:1px solid var(--border);}
  .page-home .mobile-nav .lang-switch a{-webkit-text-fill-color:unset;}
  .page-home .mobile-nav .lang-switch a.active{
    background:var(--grad-brand);
    -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  }

  @media (max-width:800px){.page-home .help-panel{width:100%;max-width:none;min-width:0;}}

  /* Steps */
  .page-home .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
  @media (max-width:800px){.page-home .steps{grid-template-columns:1fr;}}
  .page-home .step{position:relative;padding:32px 26px;border-radius:var(--radius);background:var(--glass);border:1px solid var(--border);}
  .page-home .step-num{
    width:38px;height:38px;border-radius:50%;background:var(--grad-cta);
    color:var(--on-accent-2);font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  }

  /* CTA */
  .page-home .cta-band{
    border-radius:32px;padding:64px 40px;text-align:center;
    background:var(--grad-band);
    border:1px solid var(--border);
  }
  .page-home .cta-band h2{margin-bottom:14px;}
  .page-home .cta-band p{color:var(--ink-soft);max-width:520px;margin:0 auto 30px;}
  .page-home .cta-video{width:100%;max-width:520px;margin:0 0 20px 0;border-radius:20px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-lg);display:block;align-self:flex-end;}

  /* Pricing table */
  .page-home .pricing-table{width:100%;border-collapse:collapse;background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
  .page-home .pricing-table th, .page-home .pricing-table td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--border);font-size:0.92rem;}
  .page-home .pricing-table th{color:var(--ink-soft);font-weight:700;font-size:0.85rem;text-transform:uppercase;letter-spacing:0.03em;}
  .page-home .pricing-table tr:last-child td{border-bottom:none;}
  .page-home .pricing-table td:first-child{color:var(--ink-soft);}
  .page-home .pricing-table td.yes{color:var(--accent-light);font-weight:700;}
  .page-home .pricing-table td.no{color:var(--ink-soft);opacity:0.5;}
  .page-home .tier-pill{display:inline-block;border-radius:100px;padding:3px 12px;font-size:0.78rem;font-weight:700;}
  .page-home .tier-pill.free{background:var(--glass-strong);color:var(--ink-soft);}
  .page-home .tier-pill.premium{background:linear-gradient(135deg,var(--accent),var(--accent-light));color:var(--on-accent);}
  .page-home .tier-pill.premiumplus{background:linear-gradient(135deg,#d18cff,#af52de);color:#20003a;}
  .page-home .tier-pill.enterprise{background:linear-gradient(135deg,#7a5bd6,#a98ff2);color:#180a30;}
  .page-home .tier-pill.whitelabel{background:var(--grad-cta);color:var(--on-accent-2);}
  .page-home .pricing-note{color:var(--ink-soft);font-size:0.9rem;margin-top:18px;text-align:center;}
  .page-home .pricing-table-wrap{overflow-x:auto;}

  /* Audience grid */
  .page-home .audience-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;} 
  @media (max-width:900px){.page-home .audience-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.page-home .audience-grid{grid-template-columns:1fr;}}
  .page-home .audience-card{
    background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);
    padding:26px;
  }
  .page-home .audience-card h3{margin:14px 0 10px;font-size:1.05rem;font-weight:800;}
  .page-home .audience-card p{margin:0;color:var(--ink-soft);font-size:0.9rem;line-height:1.6;}

  /* Below ~680px, 4 columns don't fit any phone screen — turn each row
     into a stacked card so every tier stays visible without scrolling. */
  @media (max-width:680px){
    .page-home .pricing-table thead{display:none;}
    .page-home .pricing-table, .page-home .pricing-table tbody, .page-home .pricing-table tr, .page-home .pricing-table td{display:block;width:100%;}
    .page-home .pricing-table{border-radius:16px;}
    .page-home .pricing-table tr{padding:16px 18px;border-bottom:1px solid var(--border);}
    .page-home .pricing-table td{padding:0;border-bottom:none;}
    .page-home .pricing-table td:first-child{
      color:var(--ink);font-weight:700;font-size:0.95rem;margin-bottom:10px;
    }
    .page-home .pricing-table td:not(:first-child){
      display:flex;align-items:center;justify-content:space-between;
      padding:7px 0;font-size:0.9rem;
    }
    .page-home .pricing-table td:not(:first-child)::before{
      content:attr(data-label);color:var(--ink-soft);font-weight:600;
    }
  }


  @media (max-width:960px){
    .page-home .hero-grid{grid-template-columns:1fr;}
    .page-home .phone-stage{margin-top:20px;}
  }
  @media (max-width:720px){
    .page-home .navlinks{display:none;}
    .page-home .menu-toggle{display:flex;}
    /* Ohne den zentrierten Mittelteil braucht die Wortmarke den Schub, sonst
       klebt der rechte Teil der Leiste am Namen. */
    .page-home nav > .brand{margin-right:auto;}
    /* Auf dem Telefon zeigt die Leiste nur noch Wortmarke, Farbmodus und
       Menueknopf. Sprachwahl und Ladeknopf weichen; im Klappmenue stehen
       dafuer ihre Zwillingsfassungen. */
    .page-home .nav-cta > .lang-switch{display:none;}
    .page-home .nav-cta > .btn-primary{display:none;}
  }
  @media (min-width:721px){
    .page-home .mobile-nav{display:none !important;}
  }

/* =====================================================================
   4. Nur die Rechtstexte (agb, datenschutz, impressum, disclaimer und
      die englischen und spanischen Fassungen)

   Bis zum 27.08.2026 hatten diese zwoelf Seiten einen eigenen Entwurf:
   Papierstruktur, scharfe Ecken (border-radius:0), Versatzschatten,
   eine Schreibmaschinenschrift fuer Zahlen. Sie tragen jetzt dieselbe
   Sprache wie die Startseite - Glas, weiche Ecken, Pillenknoepfe,
   Verlaufsschrift, Aurora im Hintergrund.

   Das Markup ist unveraendert geblieben bis auf zwei Kleinigkeiten:
   die Kennung am body und der Aurora-Dreizeiler. Deshalb heisst die
   feste Leiste hier .navbar>.wrap.nav und nicht header>nav wie auf der
   Startseite - dieselbe Optik, anderes Geruest.
   ===================================================================== */

.page-legal{padding-top:64px;}

/* --- Feste Leiste ---------------------------------------------------- */
.page-legal .navbar{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:var(--header-bg);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.page-legal .nav{display:flex;align-items:center;gap:12px;height:64px;}
.page-legal .brand{font-size:1.05rem;}

/* Der Ladeknopf ist ein <a> in .navlinks - ohne diese Regeln gewinnt die
   Verlaufsschrift von ".navlinks a" gegen ".btn-primary", und der Knopf
   stuende mit durchsichtiger Schrift auf Orange. */
.page-legal .navlinks a.btn-primary,
.page-legal .navlinks a.btn-primary:hover{
  background:var(--grad-cta);
  -webkit-background-clip:padding-box;background-clip:padding-box;
  color:var(--on-accent-2);-webkit-text-fill-color:var(--on-accent-2);
}

.page-legal .burger{display:none;}

@media (max-width:860px){
  .page-legal .burger{display:grid;}
  /* Aufgeklappt liegt die Liste unter der Leiste und laesst nichts
     durchscheinen - Text auf Text waere nicht lesbar. */
  .page-legal .navlinks{
    position:absolute;top:64px;left:0;right:0;display:none;
    flex-direction:column;align-items:stretch;gap:2px;
    padding:10px 28px 20px;
    background:var(--header-bg-solid);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border);
  }
  .page-legal .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. */
  .page-legal .nav > .brand{margin-right:auto;}
  .page-legal .navlinks a{padding:13px 4px;border-bottom:1px solid var(--border);}
  .page-legal .navlinks .btn{margin-top:12px;justify-content:center;border-bottom:none;}
  /* Auf dem Telefon zeigt die Leiste nur noch Wortmarke, Farbmodus und
     Menueknopf. Der Ladeknopf aus der Leiste weicht; im Klappmenue steht
     dafuer seine Zwillingsfassung als letzter Eintrag. */
  .page-legal .nav > .btn{display:none;}
  .page-legal .navlinks a.cta-menu{display:flex;width:100%;}
  /* In der Leiste weicht die Sprachwahl, im Menue steht sie dafuer voll da. */
  .page-legal .nav > .lang-switch{display:none;}
  .page-legal .navlinks .lang-switch{padding:13px 4px;border-top:1px solid var(--border);margin-top:8px;}
}
@media (min-width:861px){
  .page-legal .navlinks .lang-switch{display:none;}
  .page-legal .navlinks a.cta-menu{display:none;}
}

/* --- Textkoerper ----------------------------------------------------- */
.page-legal main{padding:64px 0 72px;}
.page-legal .legal{max-width:78ch;}
.page-legal .legal h1{
  font-size:clamp(2rem,3.6vw,2.8rem);line-height:1.1;letter-spacing:-0.03em;
  font-weight:800;margin:0 0 12px;
}
.page-legal .legal h1 span,
.page-legal .legal .accent{
  background:var(--grad-brand);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.page-legal .legal .stand{
  display:inline-flex;align-items:center;
  padding:6px 14px;border-radius:100px;
  background:var(--glass);border:1px solid var(--border);
  color:var(--ink-soft);font-size:0.8rem;font-weight:600;margin:0 0 34px;
}
.page-legal .legal h2{
  font-size:1.35rem;font-weight:800;letter-spacing:-0.02em;
  margin:44px 0 14px;padding-top:28px;border-top:1px solid var(--border);
}
.page-legal .legal h2:first-of-type{border-top:none;padding-top:0;}
.page-legal .legal h3{font-size:1.02rem;font-weight:700;margin:26px 0 8px;}
.page-legal .legal p,
.page-legal .legal ul,
.page-legal .legal ol{color:var(--ink-soft);font-size:1rem;line-height:1.7;margin:0 0 14px;}
.page-legal .legal ul,.page-legal .legal ol{padding-left:22px;}
.page-legal .legal li{margin-bottom:7px;}
.page-legal .legal strong{color:var(--ink);font-weight:700;}
.page-legal .legal a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.page-legal .legal address{
  font-style:normal;color:var(--ink-soft);font-size:1rem;line-height:1.7;margin:0 0 14px;
}
.page-legal .legal code{
  font-family:var(--num);font-size:.92em;
  background:var(--accent-soft);color:var(--ink);
  padding:2px 7px;border-radius:6px;
}

/* Hervorgehobener Kasten fuer Kontakt, Anbieter, Warnhinweise - dieselbe
   Glaskarte wie die Bento-Felder der Startseite. */
.page-legal .legal .box{
  background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px 26px;margin:0 0 22px;
}
.page-legal .legal .box p:last-child,
.page-legal .legal .box ul:last-child{margin-bottom:0;}

/* Inhaltsverzeichnis oben. Bei Texten mit fuenfzehn Abschnitten ist das
   der Unterschied zwischen Nachschlagen und Durchscrollen. */
.page-legal .toc{
  background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px 26px;margin:0 0 40px;
}
.page-legal .toc ol{margin:0;padding-left:20px;columns:2;column-gap:34px;font-size:0.95rem;line-height:1.8;}
@media (max-width:640px){ .page-legal .toc ol{columns:1;} }
.page-legal .toc li{margin:0;color:var(--ink-soft);}
.page-legal .toc a{text-decoration:none;color:var(--ink-soft);}
.page-legal .toc a:hover{color:var(--accent);}

/* Sprungziele duerfen nicht unter der festen Leiste landen. */
.page-legal h2[id],.page-legal section[id]{scroll-margin-top:76px;}

/* --- Tabellen: dieselbe Bauart wie die Preistafel der Startseite ------ */
.page-legal .tbl-scroll{overflow-x:auto;}
.page-legal .legal table{
  width:100%;border-collapse:collapse;font-size:0.92rem;
  background:var(--glass);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;margin:0 0 22px;
}
.page-legal .legal th,.page-legal .legal td{
  text-align:left;padding:16px 18px;border-bottom:1px solid var(--border);
  color:var(--ink-soft);vertical-align:top;
}
.page-legal .legal th{
  font-size:0.85rem;font-weight:700;text-transform:uppercase;letter-spacing:0.03em;
}
.page-legal .legal td:first-child{color:var(--ink);font-weight:700;}
.page-legal .legal tbody tr:last-child td{border-bottom:none;}

/* Unter 680px wird jede Zeile eine Karte: seitwaerts scrollen ruecken die
   Werte aus dem Bild, die Beschriftung bleibt links. Gleiche Loesung wie
   bei der Preistafel auf der Startseite. */
@media (max-width:680px){
  .page-legal .tbl-scroll{overflow-x:visible;}
  .page-legal .legal table thead{display:none;}
  .page-legal .legal table,
  .page-legal .legal tbody,
  .page-legal .legal tr,
  .page-legal .legal td{display:block;width:100%;}
  .page-legal .legal table{border-radius:16px;}
  .page-legal .legal table tr{padding:16px 18px;border-bottom:1px solid var(--border);}
  .page-legal .legal tbody tr:last-child{border-bottom:none;}
  .page-legal .legal table td{padding:0;border-bottom:none;}
  .page-legal .legal table td:first-child{margin-bottom:10px;}
  .page-legal .legal table td.v{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    text-align:right;padding:7px 0;
  }
  .page-legal .legal table td.v::before{
    content:attr(data-label);color:var(--ink-soft);font-weight:600;
    font-size:0.85rem;text-transform:uppercase;letter-spacing:0.03em;
  }
}

/* --- Fuss ------------------------------------------------------------ */
/* Der Fuss ist seit dem 27.08.2026 auf allen Website-Seiten derselbe: links die
   Wortmarke als Verweis auf die Startseite, rechts die vier Rechtstexte und ganz
   aussen die Hilfe. Kein "Startseite", kein "Kontakt", keine Sprachwahl. Die
   Regeln stehen deshalb ungescopt - sie gelten fuer .page-home wie .page-legal. */

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}
}
.brand-sm{font-weight:800;font-size:0.95rem;letter-spacing:-0.02em;}

@media (max-width:640px){
  .page-legal main{padding:44px 0 52px;}
}
