:root{
  --bg:#0f1c1c; --card:#0b1616; --card2:#112828; --text:#d4f2f2; --muted:#9cdfe0;
  --accentA:#00ff88; --accentB:#00c8ff; --accent:#19c48c;
  --ok:#2bd08a; --x:#ff6a6a; --yellow:#ffd166;
  --shadow:0 8px 20px rgba(0,0,0,.25);
  --radius:16px; --line:#00c8ff22;
  --navH:64px; --scrollPad:64px;
}
@media (max-width:720px){ :root{ --navH:56px; --scrollPad:56px; } }

*{box-sizing:border-box}
html{ scroll-behavior:smooth; scroll-padding-top:var(--scrollPad); background:#0f1c1c; }
body{
  margin:0; font-family:'Inter',system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--text);
  background: var(--bg) url('../img/futuristic_portal_bg.png') bottom center no-repeat fixed;
  background-size:cover; overflow-x:hidden; position:relative; min-height:100vh;
}
body::after{content:""; position:fixed; inset:0; background:rgba(15,28,28,0.72); pointer-events:none; z-index:0}

/* Images responsiv */
img{max-width:100%; height:auto; display:block}

.container{max-width:1180px; margin:0 auto; padding:0 1rem; position:relative; z-index:1}

/* Nav */
.nav{ position:sticky; top:0; left:0; right:0; z-index:60; background:#050f0f; }
.nav .row{ height:var(--navH); display:flex; align-items:center; gap:.8rem; }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:#bff; font-weight:800; letter-spacing:.2px }
.brand img{ width:28px; height:28px; }
.nav .menu{ margin-left:auto; display:flex; gap:.4rem; align-items:center; }
.nav .menu a{
  color:#cfe; text-decoration:none; padding:.45rem .7rem; border-radius:10px;
  line-height:1.2; min-height:44px; display:inline-flex; align-items:center;
}
.nav .menu a:hover,.nav .menu a.active{ background:#0d2427 }

.btn{
  display:inline-block; font-weight:700; text-decoration:none; border-radius:10px; padding:.65rem .95rem; transition:.2s; border:1px solid transparent; color:#002;
  background:linear-gradient(135deg, var(--accentA), var(--accentB)); box-shadow:0 6px 16px rgba(0,200,255,.22), 0 0 8px #00ffcc, 0 0 16px rgba(0,255,204,.4);
  min-height:44px; /* bessere Tap-Targets */
}
.btn:hover{ transform:translateY(-1px); filter:saturate(1.1) }
.btn.ghost{ background:transparent; color:#dff; border:1px solid #00c8ff66; box-shadow:none }
.btn.ghost:hover{ background:#002933 }

/* Hero */
.hero{ padding:2.2rem 0 1.2rem }
.hero .wrap{ background:rgba(0,0,0,.55); border-radius:20px; padding:1.4rem; text-align:center; box-shadow:var(--shadow) }
.hero img.logo{ width:120px; margin:0 auto .8rem; filter:drop-shadow(0 0 10px rgba(0,255,204,.35)) }
/* mobile-freundliche Skalierung */
.hero h1{ font-size:clamp(1.6rem, 5vw, 2.2rem); margin:.3rem 0 .3rem; text-shadow:0 0 3px rgba(0,240,204,.35) }
.hero p{ color:#bde9f4; font-size:clamp(.98rem, 2.6vw, 1.06rem); max-width:900px; margin:.1rem auto .8rem }
.badges{ display:flex; gap:.4rem; justify-content:center; flex-wrap:wrap; margin:.4rem 0 .8rem }
.badge{ background:#0f2520; color:#cfe; border:1px solid #174e42; padding:.32rem .56rem; border-radius:999px; font-size:.86rem; display:inline-flex; align-items:center; gap:.36rem }

.section{ background:rgba(0,0,0,.6); border-radius:20px; box-shadow:var(--shadow); padding:1.6rem; margin:1.4rem 0 }
.section h2{ margin:0 0 .7rem; color:#cfe; font-size:clamp(1.3rem, 4vw, 1.66rem); text-align:center }
.section p.lead{ text-align:center; color:var(--muted); margin:.2rem auto 1rem; max-width:820px; font-size:clamp(.96rem, 2.5vw, 1rem) }

.grid-3{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.9rem }
.grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem }
@media (max-width:960px){ .grid-3,.grid-2{ grid-template-columns:1fr } }
/* Karten – egal ob <div class="card"> oder <a class="card"> */
.card, a.card{
  display:block;
  background:#112828;
  border:1px solid var(--line);
  border-radius:14px;
  padding:1rem;
  color:inherit;
  text-decoration:none; /* keine Unterstreichung bei Links */
  transition:transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.card:hover, a.card:hover{
  transform: translateY(-3px);
  background:#0f2529;
  border-color:#00c8ff44;
}
.card h3, a.card h3{
  margin:.1rem 0 .4rem;
  color:#cfe;
  font-size:1rem;
}
.card p, a.card p{
  margin:0;
  color:#d9ffff;
  opacity:.9;
  font-size:.94rem;
}
/* Sicherheitsnetz gegen globale Link-Styles */
a.card:link, a.card:visited, a.card:active, a.card:focus{
  color:inherit;
  background:inherit;
}


/* Tabelle mobil scrollbar */
.table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table{ width:100%; border-collapse:collapse; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.92rem; min-width:640px }
.table th,.table td{ padding:.6rem; border-bottom:1px solid #13393a }
.table th{ text-align:left }
.center{ text-align:center }

/* Pricing */
.pricing-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.9rem; align-items:stretch }
@media (max-width:1100px){ .pricing-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:640px){ .pricing-grid{ grid-template-columns:1fr } }
.plan{ background:#112828; border-radius:14px; border:1px solid var(--line); display:flex; flex-direction:column; padding:1rem; position:relative; padding-bottom:86px }
.plan.popular{ outline:2px solid var(--accent); box-shadow:0 0 0 6px rgba(0,255,204,.12) }
.plan h3{ margin:.05rem 0 .08rem; color:#9be8e8 }
.price{ font-size:1.9rem; font-weight:800 }
.per{ font-size:.9rem; color:#9cdfe0 }
.incl{ margin:.1rem 0 .2rem; color:#cfe; font-size:.92rem }
.list{ display:grid; gap:.42rem; flex:1 }
.row{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:.6rem; border-radius:10px; padding:.48rem .6rem; border:1px solid }
.good{ background:#0f2b24; border-color:#1b6e58 }
.bad{ background:#2b1414; border-color:#6e1b2b }
.row .k{ font-size:.9rem; color:#cfe }
.row .v{ font-size:.9rem; font-weight:800 }
.check{ color:var(--ok) } .x{ color:var(--x) }
.plan .btn{ position:absolute; left:1rem; right:1rem; bottom:.8rem }

.footer{ color:#a9b; text-align:center; padding:2rem 1rem; font-size:.92rem }

/* Active toggle state */
.btn.active{ filter:saturate(1.2) }

/* Language selector styled like .btn */
.nav select#lang{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding:.6rem .9rem; border-radius:999px;
  background:linear-gradient(135deg, var(--accentA), var(--accentB));
  color:#002; font-weight:700; border:1px solid transparent;
  box-shadow:0 6px 18px rgba(0,255,136,.22), 0 6px 18px rgba(0,200,255,.22);
}
.nav select#lang:hover{ filter:saturate(1.1); transform:translateY(-1px) }
.nav select#lang:focus{ outline:none; box-shadow:0 0 0 2px #00c8ff66, 0 6px 18px rgba(0,255,136,.22), 0 6px 18px rgba(0,200,255,.22) }
.nav .menu{ display:flex; align-items:center; gap:.2rem }

/* Nav dropdown ("More") */
.nav .menu{ display:flex; align-items:center; gap:.2rem }
.dropdown{ position:relative; }
.dropdown > .btn.ghost{ user-select:none }
.dropdown-menu{
  position:absolute; top:calc(100% + .4rem); right:0;
  min-width:220px; padding:.5rem;
  background:var(--card); border:1px solid #00c8ff33; border-radius:12px;
  box-shadow:var(--shadow); display:none; z-index:80;
}
.dropdown-menu a{
  display:block; padding:.55rem .7rem; border-radius:8px; text-decoration:none; color:var(--text);
}
.dropdown-menu a:hover{ background:#123; }
.dropdown:hover .dropdown-menu{ display:block; }

/* Queue running progress bar */
.runbox{
  background:rgba(0,0,0,.5); border:1px solid #00c8ff33; border-radius:16px; padding:1rem; margin:.5rem 0 1.2rem;
}
.runbox h3{ margin:.2rem 0 .4rem; }
.progress{
  height:12px; background:#0b1f25; border-radius:999px; overflow:hidden; position:relative;
  box-shadow:inset 0 0 0 1px #00c8ff22;
}
.progress .bar{
  position:absolute; left:-40%; top:0; height:100%; width:40%;
  background:linear-gradient(90deg, var(--accentA), var(--accentB));
  animation:slide 1.2s linear infinite;
}
@keyframes slide{
  0%{ left:-40%; } 100%{ left:100%; }
}
.runmeta{ display:flex; gap:1rem; margin-top:.6rem; font-size:.95rem; color:#cfe; flex-wrap:wrap }
.runmeta .k{ opacity:.8; margin-right:.35rem }

/* Queue lanes (classic single-page style) */
.queue-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.85rem}
.queue{background:#102526; border:1px solid var(--line); border-radius:14px; padding:1rem}
.queue h4{margin:.1rem 0 .32rem; color:#cfe}
.lane{height:12px; background:#0b2021; border:1px solid #0e3b40; border-radius:999px; overflow:hidden}
.bar{height:100%; width:70%; background:linear-gradient(90deg, var(--accentA), var(--accentB)); animation:flow 2.8s infinite linear}
.tag{display:inline-block; margin-top:.42rem; font-size:.86rem; color:#aff; opacity:.85}
.eta{font-size:.9rem; color:#cfe; margin-top:.3rem}
.prio{font-weight:800}
@keyframes flow{from{transform:translateX(-40%)} to{transform:translateX(60%)}}
@media (prefers-reduced-motion: reduce){ .bar{animation:none} }
@media (max-width:1100px){.queue-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.queue-grid{grid-template-columns:1fr}}

/* === Top Banner (Navigation) — unified & professional === */
.nav{ position:sticky; top:0; left:0; right:0; z-index:60; background:#050f0f; border-bottom:1px solid #00c8ff22; }
.nav .row{ max-width: clamp(1180px, 96vw, 1600px); margin:0 auto; height:56px; padding:0 .9rem; display:flex; align-items:center; gap:.8rem }
.brand{ display:flex; align-items:center; gap:.5rem; text-decoration:none; color:#bff; font-weight:800; letter-spacing:.2px; height:56px }
.brand img{ width:28px; height:28px; object-fit:contain; display:block; filter:drop-shadow(0 0 6px rgba(0,255,204,.25)) }
.brand span{ font-size:1.02rem }
.menu{ display:flex; align-items:center; gap:.6rem; flex:1 }
.menu a{ color:#cfe; opacity:.95; text-decoration:none; padding:.42rem .62rem; border-radius:10px }
.menu a:hover,.menu a.active{ background:#0d2427 }
.dropdown{ position:relative }
.dropdown > .btn.ghost{ user-select:none }
.dropdown-menu{
  position:absolute; top:calc(100% + .4rem); right:0; min-width:240px; padding:.5rem;
  background:#0e2326; border:1px solid #13393a; border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.35); display:none; z-index:80
}
.dropdown-menu a{ display:block; padding:.55rem .7rem; border-radius:8px; color:#cfe; text-decoration:none }
.dropdown-menu a:hover{ background:#0a1b1e }
.dropdown.open .dropdown-menu{ display:block }

.banner-actions{
  display:flex; align-items:center; gap:.6rem;
  flex-wrap: nowrap;          /* WICHTIG: nicht umbrechen */
  min-width:0;
}
.banner-actions select#lang{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding:.48rem .85rem; border-radius:10px;
  background:#0c1f21; color:#cfe; font-weight:600; border:1px solid #1a3c3f;
  background-image:url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%239cdfe0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .55rem center; padding-right:2rem;
}
.banner-actions select#lang:focus{ outline:none; box-shadow:0 0 0 3px #00c8ff40; border-color:#00c8ff66 }

@media (max-width:980px){
  .banner-actions .btn,
  .banner-actions select#lang,
  .user-chip{
    padding:.42rem .62rem;
    font-size:.92rem;
  }
  .banner-actions{ gap:.5rem; }
}
@media (max-width:780px){
  .banner-actions .btn,
  .banner-actions select#lang,
  .user-chip{
    padding:.36rem .56rem;
    font-size:.88rem;
  }
  .banner-actions{ gap:.4rem; }
}

@media (max-width:900px){
  .menu{ gap:.4rem }
  .menu a{ padding:.35rem .5rem }
  /* WICHTIG: nur das Menü ausblenden – nicht alle .desktop-Elemente */
  .nav .menu.desktop{ display:none }
  /* .banner-actions bleibt sichtbar */
}
@media (max-width:720px){
  .nav .row{ height:52px; padding:0 .7rem }
  .brand span{ font-size:.98rem }
  .banner-actions{ gap:.4rem }
}

/* Mobile polish for top banner */
@media (max-width:640px){
  .menu{ gap:.3rem }
  .menu a{ padding:.3rem .46rem; font-size:.92rem }
  .brand span{ display:none } /* keep icon-only brand to save space */
  .banner-actions select#lang{ padding:.4rem .7rem; padding-right:1.6rem }
  .btn.ghost{ padding:.42rem .6rem }
}
@media (max-width:480px){
  .menu{ overflow-x:auto; white-space:nowrap; scrollbar-width:none }
  .menu::-webkit-scrollbar{ display:none }
}

/* === Mobile drawer nav === */
vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; clip-path:inset(50%); }
.nav{ position:sticky; top:0; left:0; right:0; z-index:60; background:#050f0f; border-bottom:1px solid #00c8ff22; }
.nav .row{ max-width: clamp(1180px, 96vw, 1600px); margin:0 auto; height:56px; padding:0 .9rem; display:flex; align-items:center; gap:.8rem }
.brand{ display:flex; align-items:center; gap:.5rem; text-decoration:none; color:#bff; font-weight:800; letter-spacing:.2px; height:56px }
.brand img{ width:28px; height:28px; object-fit:contain; display:block; filter:drop-shadow(0 0 6px rgba(0,255,204,.25)) }
.brand span{ font-size:1.02rem }
.menu.desktop{ display:flex; align-items:center; gap:.6rem; flex:1 }
.menu.desktop a{ color:#cfe; opacity:.95; text-decoration:none; padding:.42rem .62rem; border-radius:10px }
.menu.desktop a:hover,.menu.desktop a.active{ background:#0d2427 }
.dropdown{ position:relative }
.dropdown-menu{
  position:absolute; top:calc(100% + .4rem); right:0; min-width:240px; padding:.5rem;
  background:#0e2326; border:1px solid #13393a; border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.35); display:none; z-index:80
}
.dropdown:hover .dropdown-menu, .dropdown.open .dropdown-menu{ display:block }

.btn{
  display:inline-block; font-weight:700; text-decoration:none; border-radius:10px; padding:.6rem .95rem; transition:.2s; border:1px solid transparent; color:#002;
  background:linear-gradient(135deg, #00ff88, #00c8ff); box-shadow:0 6px 16px rgba(0,200,255,.22), 0 0 8px #00ffcc, 0 0 16px rgba(0,255,204,.4);
}
.btn.ghost{ background:transparent; color:#dff; border:1px solid #00c8ff66; box-shadow:none }

.nav .nav-toggle{ display:none; background:transparent; border:0; padding:.4rem; margin-right:.2rem; cursor:pointer }
.nav .nav-close{ background:transparent; border:0; padding:.4rem; cursor:pointer }

@media (max-width:900px){
  .nav .nav-toggle{ display:inline-flex; align-items:center; gap:.4rem }
  .brand span{ display:none }
}

.nav-drawer{ position:fixed; inset:0; z-index:100; display:grid; grid-template-columns:1fr; }
.nav-drawer[hidden]{ display:none }
.drawer-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); z-index:1; }
.drawer-inner{
  position:absolute; top:0; right:0; bottom:0; width:min(86vw, 360px);
  background:#071616; border-left:1px solid #00c8ff22; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .25s ease;
  overflow-y:auto; -webkit-overflow-scrolling:touch; /* WICHTIG: mobil scrollen */
  z-index:2; /* ÜBER dem Backdrop */
}
.nav-drawer.open .drawer-inner{ transform:none }
.drawer-top{ display:flex; align-items:center; justify-content:space-between; padding:.8rem 1rem; border-bottom:1px solid #123; }
.drawer-brand{ color:#cfe; font-weight:800 }
.drawer-links{ display:flex; flex-direction:column; padding:.4rem .4rem }
.drawer-links a{ padding:.7rem .8rem; border-radius:10px; color:#cfe; text-decoration:none; min-height:44px; display:flex; align-items:center }
.drawer-links a:hover{ background:#0a1b1e }
.drawer-links hr{ border:0; border-top:1px solid #0e2a2a; margin:.4rem .5rem }
.drawer-actions{ margin-top:auto; padding:1rem; display:flex; gap:.6rem; align-items:center; position:sticky; bottom:0; background:linear-gradient(180deg, rgba(7,22,22,.98), rgba(7,22,22,.98)) }
.drawer-actions select{ flex:1; padding:.5rem .8rem; border-radius:10px; border:1px solid #1a3c3f; background:#0c1f21; color:#cfe }
.drawer-actions .btn{ flex:1 }

/* name-only user chip (no avatar) */
.user-chip{ align-items:center; gap:.35rem; padding:.38rem .72rem; border:1px solid #1a3c3f; border-radius:999px; color:#cfe; text-decoration:none; display:inline-flex; font-weight:700; background:#0c1f21; }
.user-chip:hover{ background:#0f2529; }

/* banner actions wrap */
.banner-actions{ display:flex; align-items:center; gap:.55rem; flex-wrap:nowrap }
#nav-me{ max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* Minimal hero fallback */
.hero{max-width:1100px; margin:.4rem auto 0; padding:0 1.05rem; position:relative; z-index:1}
.hero-wrap{background:rgba(0,0,0,.55); border-radius:16px; box-shadow:0 8px 20px rgba(0,0,0,0.25); padding:1.0rem 1.1rem; text-align:center}
.hero .actions{display:flex; gap:.52rem; justify-content:center; flex-wrap:wrap; margin-top:.6rem}
.section{position:relative; z-index:1; background:rgba(0,0,0,.6); border-radius:20px; box-shadow:0 8px 20px rgba(0,0,0,0.25); padding:1.2rem; margin:1.4rem auto; max-width:1100px}

/* === NEU: Typo für festen Titel + i18n-Überschrift im Hero === */
.hero .brand-title{
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 800;
  margin: .25rem 0 .25rem;
  letter-spacing: .2px;
  text-shadow: 0 0 3px rgba(0,240,204,.35);
}
.hero .hero-title{
  font-size: clamp(22px, 4.2vw, 32px);
  font-weight: 600;
  margin: .1rem 0 .6rem;
}

/* === WICHTIG: User-Chip im Top-Banner ausblenden === */
.user-chip{ display:none !important; }




/* -------------------------
   Mobile & wrapping fixes
   -------------------------
   These rules ensure long words/links and elements wrap correctly on small screens,
   and allow banner/action groups to wrap instead of forcing horizontal scrolling.
   Applied globally to common text elements; tweak selectors if you need exceptions.
*/

:root {
  --mobile-text-wrap-padding: 12px;
}

/* Make text break safely (URLs, long strings, joined words) */
html, body, .container, .wrap, p, li, h1, h2, h3, a, .card, .hero p {
  overflow-wrap: anywhere; /* modern */
  word-break: break-word;  /* fallback */
  -ms-word-break: break-word;
}

/* Allow banner actions to wrap on small screens instead of overflowing */
@media (max-width: 720px) {
  .banner-actions {
    flex-wrap: wrap;
    gap: .5rem;
  }
  .menu {
    white-space: normal;
    overflow-x: visible;
  }
  .hero p { margin-left: var(--mobile-text-wrap-padding); margin-right: var(--mobile-text-wrap-padding); }
  .container { padding-left: 12px; padding-right: 12px; }
  .btn { min-width: 0; }
}

/* Prevent overflowing fixed background from forcing horizontal scroll */
body { overflow-x: hidden; }

/* Code/pre blocks: keep preformatted but allow soft-wrapping where necessary */
pre, code {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Small tweak: ensure anchors inside paragraphs break */
p a { word-break: break-word; overflow-wrap: anywhere; hyphens: auto; }

/* End of mobile & wrapping fixes */
/* Basis: Leiste als eine Reihe erzwingen */
.navbar .menu {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* oder space-between */
  gap: 10px;                   /* Abstand zwischen Buttons */
  flex-wrap: nowrap;           /* NICHT umbrechen */
  overflow-x: auto;            /* falls es trotzdem eng wird: horizontales Scrollen */
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;         /* Texte nicht umbrechen */
}

.navbar .menu > * {
  min-width: 0;  /* erlaubt Schrumpfen */
  flex: 0 0 auto;
}

/* Buttons allgemein etwas kompakter machen */
.navbar .btn,
.navbar a.btn,
.navbar a.nav-link {
  padding: 10px 14px;
  font-size: clamp(13px, 2.8vw, 16px); /* skaliert mit Bildschirmbreite */
  line-height: 1.1;
}

/* Handy-Optimierung */
@media (max-width: 480px) {
  .navbar .menu { gap: 6px; }
  .navbar .btn,
  .navbar a.btn,
  .navbar a.nav-link {
    padding: 6px 10px;    /* kleinere Buttons */
    font-size: 12px;      /* kleinere Schrift */
  }

  /* Logo etwas kleiner, um mehr Platz für Buttons zu schaffen */
  .navbar .logo img {
    max-height: 28px;     /* anpassen, falls du eine andere Struktur hast */
    height: auto;
    width: auto;
  }
}

/* =====================
   HOTFIX nur für Banner
   ===================== */

/* Im Banner keine aggressiven Umbrüche -> verhindert vertikalen Brand-Text */
.nav, .nav * { 
  overflow-wrap: normal; 
  word-break: normal; 
  hyphens: manual; 
}
/* Brand immer in einer Zeile */
.brand, .brand * { white-space: nowrap; }

/* Mobile-Layout: Menu unter Brand links; Buttons rechts bleiben */
@media (max-width: 720px){
  .nav .row{
    display: grid;
    grid-template-columns: auto 1fr;           /* Brand | Actions */
    grid-template-areas:
      "brand actions"
      "menu  actions";                          /* Menu in Zeile 2 links */
    align-items: center;
    row-gap: .4rem;
    height: auto;
    padding: .6rem .7rem;
  }
  .brand{ grid-area: brand; display:flex; align-items:center; gap:.5rem; }
  .banner-actions{ grid-area: actions; justify-self: end; display:flex; gap:.5rem; flex-wrap:nowrap; }
  .nav .nav-toggle{ grid-area: menu; justify-self: start; display: inline-flex; } /* Menu sichtbar NUR mobil */
}

/* Sicherheit: auf Desktop bleibt der Toggle aus */
@media (min-width: 901px){
  .nav .nav-toggle{ display:none !important; }
}
/* === Logo größer im Top-Banner === */
.brand img{
  width: 40px;   /* vorher 28px */
  height: 40px;
}

/* Mobil etwas kompakter, damit nix klemmt */
@media (max-width: 720px){
  .brand img{
    width: 65px;
    height: 65px;
  }
}
/* =========================================
   PATCH (ans Dateiende einfügen)
   - Banner-Actions: 2 Spalten mobil
   - Brand-Logo >= 60px mobil
   - Hyphens-Fix im Banner
   ========================================= */

/* 1) Hyphens: im Banner automatische Silbentrennung erlauben
      (überschreibt deine frühere "hyphens: manual" Regel) */
.nav, .nav * {
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  overflow-wrap: normal;
  word-break: normal;
}

/* 2) Mobile Layout für Top-Bereich: 
      - Brand/Logo links (größer)
      - Menü bleibt links wie gehabt
      - Actions rechts als 2x2 Grid
*/
@media (max-width: 900px){
  /* Logo sicher >= 60px */
  .brand img{
    width: 60px !important;
    height: 60px !important;
    object-fit: contain;
  }

  /* Rechte Button-Gruppe als 2-Spalten-Grid */
  .banner-actions{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(38px, auto);
    gap: .48rem;
    align-content: start;
    justify-items: stretch;
    min-width: 200px;    /* damit 2 Spalten Platz haben */
    max-width: 55vw;     /* drückt das Menü nicht weg */
  }

  /* Kinder immer vollbreit in der jeweiligen Grid-Zelle */
  .banner-actions > *{
    width: 100% !important;
    min-height: 38px;
  }

  /* Dropdown/Select im Grid sauber ausrichten */
  .banner-actions select#lang{
    padding: .38rem .58rem;
    font-size: .94rem;
  }

  /* Optionaler Platzhalter, falls ein Button fehlt (Layout stabil) */
  .banner-actions .ghost-slot{
    visibility: hidden;
    border: 1px solid transparent;
    border-radius: 10px;
  }
}

/* 3) Sehr kleine Screens etwas enger */
@media (max-width: 420px){
  .banner-actions{
    gap: .42rem;
    max-width: 60vw;
  }
  .nav .menu a{
    padding: .32rem .46rem;
    font-size: .92rem;
  }
}
/* =========================================
   DE-Fix: saubere Umbrüche NUR für deutsch
   ========================================= */

/* 0) Fließtext darf umbrechen */
:lang(de) .content p,
:lang(de) .content li,
:lang(de) .section p,
:lang(de) .section li,
:lang(de) .hero p {
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: auto !important;
}

/* 1) UI-Elemente in DE NICHT mitten im Wort trennen */
:lang(de) .nav,
:lang(de) .nav *,
:lang(de) .menu a,
:lang(de) .btn,
:lang(de) .badge,
:lang(de) .user-chip,
:lang(de) .plan h3,
:lang(de) .plan .incl,
:lang(de) .row .k,
:lang(de) .row .v,
:lang(de) .table th,
:lang(de) .table td,
:lang(de) .card h3,
:lang(de) .card p,
:lang(de) .drawer-links a {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* 2) Zahlen/Labels zusammenhalten (DE) */
:lang(de) .price,
:lang(de) .per,
:lang(de) .eta,
:lang(de) .prio,
:lang(de) .counter,
:lang(de) .stat,
:lang(de) .credits,
:lang(de) #nav-me,
:lang(de) .brand span {
  white-space: nowrap !important;
}

/* =========================================
   Banner rechts: 2×2-Grid auf Mobile
   ========================================= */

@media (max-width: 900px){
  /* Logo mobil >= 60px */
  .brand img{
    width: 60px !important;
    height: 60px !important;
    object-fit: contain;
  }

  /* Rechte Actions GRUNDSÄTZLICH als 2 Spalten – mit höherer Spezifität */
  .nav .banner-actions{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(38px, auto);
    gap: .5rem !important;
    align-content: start;
    justify-items: stretch;
  }
  .nav .banner-actions > *{
    width: 100% !important;
    min-height: 38px;
  }

  /* Optionaler Platzhalter, wenn z.B. Dashboard fehlt (ausgeloggt) */
  .nav .banner-actions .ghost-slot{
    visibility: hidden;
    border: 1px solid transparent;
    border-radius: 10px;
  }
}

/* Sehr kleine Screens etwas enger */
@media (max-width: 420px){
  .nav .banner-actions{ gap: .42rem !important; }
  .nav .menu a{ padding: .32rem .46rem; font-size: .92rem; }
}
/* Minimiert Text-Blink (FOUC) durch i18n */
html.pre-i18n body { opacity: 0; }
body { transition: opacity .15s ease-in; }