/* RAUMRISS · Glas — die eine Designsprache für alle Seiten.
   Werte aus RAUMRISS OS (maex-os/apps/dashboard/src/styles/raumriss-v5-glas.css):
   Glas = durchscheinend + blur(20px) saturate(165%), Grat oben innen, Fuge unten innen,
   zwei Schatten nach Flächengröße, Radius 26 für Flächen und 14 für alles darin.
   Regeln aus dem OS: Glas braucht einen Grund mit Struktur. Kein Glas auf Glas: in einer
   Glasfläche liegen nur Tönungen (.g-kachel), nie ein zweiter Blur. Keine bunten Verläufe.
   Hell oder dunkel richtet sich nach dem System des Besuchers.

   Benutzen: <html class="glas"> und <link rel="stylesheet" href="glas.css">. */

:root{
  --g-grund-farbe:#ecdcc7;
  --g-grund-bild:url("/bilder/raumriss-grund.webp");
  --g-schleier:linear-gradient(180deg,rgba(247,242,234,.62),rgba(240,228,212,.38) 55%,rgba(236,220,199,.5));
  --g-glas:rgba(255,255,255,.34);
  --g-glas-dicht:rgba(255,255,255,.62);
  --g-linie:rgba(22,21,15,.10);
  --g-grat:rgba(255,255,255,.96);
  --g-fuge:rgba(104,78,52,.14);
  --g-r:26px;
  --g-r-kachel:14px;
  --g-blur:blur(20px) saturate(165%);
  --g-schatten:0 1px 1px rgba(58,42,26,.04),0 10px 22px -14px rgba(72,52,32,.22),0 34px 70px -34px rgba(72,52,32,.34);
  --g-schatten-kachel:0 1px 1px rgba(58,42,26,.05),0 4px 9px -6px rgba(72,52,32,.20);
  --g-tint:rgba(255,255,255,.46);
  --g-tint-linie:rgba(22,21,15,.07);
  --g-tinte:#17140f;
  --g-zweit:rgba(28,23,16,.70);
  --g-dritt:rgba(28,23,16,.52);
  --g-akzent:#ff4d00;
  --g-akzent-text:#b93a00;
  --g-pill-an:#ffffff;
  --g-pill-an-text:#17140f;
}
@media (prefers-color-scheme:dark){
  :root{
    --g-grund-farbe:#121110;
    --g-schleier:linear-gradient(180deg,rgba(15,14,13,.86),rgba(15,14,13,.9) 60%,rgba(15,14,13,.94));
    --g-glas:rgba(255,255,255,.06);
    --g-glas-dicht:rgba(36,34,32,.72);
    --g-linie:rgba(255,255,255,.12);
    --g-grat:rgba(255,255,255,.16);
    --g-fuge:rgba(0,0,0,.45);
    --g-schatten:0 1px 1px rgba(0,0,0,.25),0 10px 22px -14px rgba(0,0,0,.55),0 34px 70px -34px rgba(0,0,0,.75);
    --g-schatten-kachel:0 1px 1px rgba(0,0,0,.3),0 4px 9px -6px rgba(0,0,0,.5);
    --g-tint:rgba(255,255,255,.05);
    --g-tint-linie:rgba(255,255,255,.08);
    --g-tinte:#f3f1ed;
    --g-zweit:rgba(243,241,237,.68);
    --g-dritt:rgba(243,241,237,.48);
    --g-akzent-text:#ff8a4c;
    --g-pill-an:#f3f1ed;
    --g-pill-an-text:#17140f;
  }
}

/* ===== Grund ===== */
html.glas{color-scheme:light dark;background:var(--g-grund-farbe)}
html.glas body{background:transparent;color:var(--g-tinte);
  --rr-tinte:var(--g-tinte);--rr-zweit:var(--g-zweit);--rr-akzent-text:var(--g-akzent-text)}
html.glas body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--g-schleier),var(--g-grund-bild) center 48%/cover no-repeat,var(--g-grund-farbe)}

/* ===== Flächen ===== */
.g-karte{position:relative;background:var(--g-glas);border:1px solid var(--g-linie);border-radius:var(--g-r);
  box-shadow:inset 0 1px 0 var(--g-grat),inset 0 -1px 0 var(--g-fuge),var(--g-schatten);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
/* In einer Glasfläche: nur Tönung, kein zweiter Blur */
.g-kachel{background:var(--g-tint);border:1px solid var(--g-tint-linie);border-radius:var(--g-r-kachel)}
.g-trenner{border:0;border-top:1px solid var(--g-tint-linie);margin:0}

/* ===== Typo ===== */
.g-label{font-size:14px;font-weight:600;color:var(--g-zweit);letter-spacing:-.005em}
.g-klein{font-size:13px;color:var(--g-dritt)}
.g-zahl{font-family:var(--rr-anzeige);font-weight:600;letter-spacing:-.035em;line-height:1.02;font-variant-numeric:tabular-nums;color:var(--g-tinte)}
.g-eyebrow{font-size:14px;font-weight:600;color:var(--g-zweit);letter-spacing:.01em}

/* ===== Segment-Schalter (wie Heute / Räume / Zahlen) ===== */
.g-schalter{display:inline-flex;gap:2px;padding:5px;border-radius:999px;background:var(--g-glas);border:1px solid var(--g-linie);
  box-shadow:inset 0 1px 0 var(--g-grat),var(--g-schatten-kachel);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
.g-schalter label,.g-schalter a,.g-schalter button{position:relative;display:block;cursor:pointer;text-decoration:none;color:inherit;border:0;background:none;font:inherit;padding:0}
.g-schalter input{position:absolute;opacity:0;pointer-events:none}
.g-schalter span{display:block;padding:9px 20px;border-radius:999px;font-size:15px;font-weight:600;color:var(--g-zweit);transition:background .25s var(--rr-feder),color .2s}
.g-schalter input:checked + span,.g-schalter .an span,.g-schalter [aria-current] span{background:var(--g-pill-an);color:var(--g-pill-an-text);box-shadow:0 1px 3px rgba(0,0,0,.14),0 6px 14px -8px rgba(0,0,0,.3)}
.g-schalter input:focus-visible + span{outline:2px solid var(--g-akzent);outline-offset:2px}

/* ===== Knöpfe ===== */
.g-knopf{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 24px;border-radius:999px;border:0;
  font:inherit;font-size:15px;font-weight:600;letter-spacing:-.01em;text-decoration:none;cursor:pointer;white-space:nowrap;
  background:var(--g-akzent);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.12),0 8px 20px -10px rgba(255,77,0,.55);
  transition:transform .15s var(--rr-feder),filter .2s}
.g-knopf:hover{filter:brightness(1.06)}
.g-knopf:active{transform:scale(.97)}
.g-knopf.zweit{background:var(--g-glas);color:var(--g-tinte);border:1px solid var(--g-linie);
  box-shadow:inset 0 1px 0 var(--g-grat),var(--g-schatten-kachel);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
.g-karte .g-knopf.zweit{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--g-tint)}
.g-knopf:focus-visible{outline:2px solid var(--g-akzent);outline-offset:3px}

/* Runder Pfeil-Knopf in Karten */
.g-rund{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--g-tint);border:1px solid var(--g-tint-linie);color:var(--g-tinte);text-decoration:none;flex:none}
.g-rund::after{content:"→";font-size:15px;line-height:1}

/* Kleine Kennzahl als Pill */
.g-badge{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;background:var(--g-tint);border:1px solid var(--g-tint-linie);
  font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--g-tinte);font-variant-numeric:tabular-nums;white-space:nowrap}
.g-badge.akzent{background:var(--g-akzent);border-color:transparent;color:#fff}

/* Zeilenliste wie in den OS-Karten */
.g-zeilen{display:flex;flex-direction:column}
.g-zeilen > *{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--g-tint-linie)}


/* ===== Seiten auf seite.css (Über uns, Apps) ===== */
html.glas :is(.hell,.dunkel,.abschnitt){background:transparent;color:var(--g-tinte)}
html.glas .dunkel .zweit,html.glas .zweit{color:var(--g-zweit)}
html.glas .eyebrow{color:var(--g-akzent-text)}
html.glas .kachel,html.glas .hell .kachel{background:var(--g-glas);border:1px solid var(--g-linie);border-radius:var(--g-r);
  box-shadow:inset 0 1px 0 var(--g-grat),inset 0 -1px 0 var(--g-fuge),var(--g-schatten);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
html.glas .beispiel{color:var(--g-dritt)}
html.glas main .rr-knopf{border-radius:999px;background:var(--g-akzent);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 20px -10px rgba(255,77,0,.55)}
html.glas main .rr-knopf.zweit{background:var(--g-glas);color:var(--g-tinte);border:1px solid var(--g-linie);box-shadow:inset 0 1px 0 var(--g-grat),var(--g-schatten-kachel);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
html.glas main .rr-link{color:var(--g-akzent-text)}
  /* ===== Seiten im alten dunklen System (Studio, Bizzy, Roadie, Konto, Rechtliches) =====
     Ihre Variablen (--schwarz, --flaeche, --weiss, --grau, --linie) zeigen auf die Glas-Tokens,
     Flächen werden Glas, darin nur Tönungen. */
  html.glas{--schwarz:transparent;--flaeche:var(--g-glas);--fenster:var(--g-glas);--weiss:var(--g-tinte);--grau:var(--g-zweit);--linie:var(--g-tint-linie);--akzent:var(--g-akzent);color-scheme:light dark}
  html.glas body{background:transparent;color:var(--g-tinte)}
  html.glas body::before{height:auto;inset:0;z-index:-1;background:var(--g-schleier),var(--g-grund-bild) center 48%/cover no-repeat,var(--g-grund-farbe)}
  html.glas :is(.held .unter,.block p,.zitat cite,.karte p,.bruecke,.unter2,.fall-kopf p,.vorher p,.nachher p,.angebot-text p,.agentur p,.danach,.befund-preise span,.preise-kopf p,.paket .wofuer,.modell p,details p,.seitenleiste,.block ul,.vier em,.preise ul,.vergleich dd,label,.haken){color:var(--g-zweit)}
  html.glas :is(.bruecke b,.paket .bringt){color:var(--g-tinte)}
  html.glas :is(.kicker,.marke-klein,.dauer,.preise .dauer,.vier .dauer,.etikett.an,.eigen em,.vergleich .wir strong,.preiszeile b){color:var(--g-akzent-text)}

  /* Glasflächen */
  html.glas :is(.fenster,.drei div,.karte,.vier div,.eigen a,.paket,.modell,.zahlplan li,.vergleich > div,.angebot-karte,.agentur,.versprechen div,.vertrauen){
    background:var(--g-glas);border:1px solid var(--g-linie);border-radius:var(--g-r);
    box-shadow:inset 0 1px 0 var(--g-grat),inset 0 -1px 0 var(--g-fuge),var(--g-schatten);
    -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
  html.glas .vertrauen{margin-block:8px}
  html.glas .vertrauen div + div{border-left:1px solid var(--g-tint-linie)}
  html.glas .eigen a:hover{background:var(--g-glas-dicht)}
  html.glas :is(.paket.hervor,.vier .hervor,.vergleich .wir,.angebot-karte){box-shadow:inset 0 0 0 1.5px var(--g-akzent),inset 0 1px 0 var(--g-grat),var(--g-schatten)}
  html.glas .zahlplan li{border-top:1px solid var(--g-linie)}
  html.glas .band-oben{color:#fff}
  /* In Glas nur Tönung */
  html.glas :is(.vorher,.nachher,.module div,.chip,.seitenleiste .an){background:var(--g-tint);border:1px solid var(--g-tint-linie);border-radius:var(--g-r-kachel)}
  html.glas .chip{border-radius:999px;color:var(--g-tinte)}
  html.glas .chip.heiss{border-color:var(--g-akzent);color:var(--g-akzent-text)}
  html.glas .nachher{box-shadow:inset 0 0 0 1px var(--g-akzent)}
  html.glas .fall{background:transparent;border:0}
  html.glas .fall .fall-raster > .fenster,html.glas .block .fenster{box-shadow:inset 0 1px 0 var(--g-grat),inset 0 -1px 0 var(--g-fuge),var(--g-schatten)}
  html.glas :is(.block,.zitat,.anfrage){border-color:var(--g-tint-linie)}
  html.glas .titel i{background:var(--g-tint-linie)}
  html.glas .titel i:first-child{background:#ff5f57}html.glas .titel i:nth-child(2){background:#febc2e}html.glas .titel i:nth-child(3){background:#28c840}
  html.glas .eigen-kopf{background:#111;color:#f5f5f7}

  /* Knöpfe als Pills */
  html.glas .knopf{border-radius:999px;background:var(--g-akzent);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 20px -10px rgba(255,77,0,.55)}
  html.glas .knopf:hover{background:var(--g-akzent);filter:brightness(1.06)}
  html.glas .knopf.zweit{background:var(--g-glas);color:var(--g-tinte);border:1px solid var(--g-linie);box-shadow:inset 0 1px 0 var(--g-grat),var(--g-schatten-kachel);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
  html.glas .mini{background:var(--g-akzent);color:#fff}
  html.glas .drei b{color:#fff}

  /* Schlussband: Glas statt Orange-Fläche */
  html.glas .band{background:transparent;color:var(--g-tinte);padding-block:20px 60px}
  html.glas .band .rahmen{background:var(--g-glas);border:1px solid var(--g-linie);border-radius:var(--g-r);box-shadow:inset 0 1px 0 var(--g-grat),inset 0 -1px 0 var(--g-fuge),var(--g-schatten);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);max-width:1080px}
  html.glas .band .klein{color:var(--g-akzent-text)}
  html.glas .band p{color:var(--g-zweit)}
  html.glas .band .knopf{background:var(--g-akzent);color:#fff}

  /* Formular */
  html.glas :is(input[type=text],input[type=email],.formular input,.formular select,.formular textarea){background:var(--g-tint);border:1px solid var(--g-linie);color:var(--g-tinte);border-radius:var(--g-r-kachel)}
  html.glas .meldung{background:var(--g-tint);border-left-color:var(--g-akzent);color:var(--g-zweit)}
  html.glas details{border-color:var(--g-tint-linie)}
  html.glas .faq{background:var(--g-glas);border:1px solid var(--g-linie);border-radius:var(--g-r);padding:34px clamp(20px,4vw,44px) 40px;margin-block:40px 88px;box-shadow:inset 0 1px 0 var(--g-grat),inset 0 -1px 0 var(--g-fuge),var(--g-schatten);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}


/* Rechtliche Seiten: der Text liegt auf einer Glasfläche */
html.glas .recht-seite{margin-block:24px 64px;padding:clamp(28px,5vw,56px);background:var(--g-glas);border:1px solid var(--g-linie);border-radius:var(--g-r);
  box-shadow:inset 0 1px 0 var(--g-grat),inset 0 -1px 0 var(--g-fuge),var(--g-schatten);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
html.glas :is(.recht-seite p,.recht-seite li,.recht-seite address){color:var(--g-zweit)}
html.glas .recht-seite a{color:var(--g-akzent-text)}

/* ===== Barrierefreiheit ===== */
@media (prefers-reduced-transparency:reduce){
  :root{--g-glas:var(--g-glas-dicht)}
  .g-karte,.g-schalter,.g-knopf.zweit{-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  :root{--g-linie:rgba(0,0,0,.4);--g-zweit:var(--g-tinte)}
}