/* glas.css: Glas-Look (Apple-Stil) als Schicht über den bestehenden Styles.
   Inhalte und Struktur der Seite bleiben, nur die Flächen werden zu Milchglas.
   Alles ist auf body.seite-glas begrenzt, andere Seiten bleiben unberührt.
   CI bleibt: Creme, Tinte, Terrakotta, Instrument Serif + Inter. */

body.seite-glas {
  --g-ink: #161512;
  --g-ink2: #2A2823;
  --g-muted: #5F5B52;
  --g-accent: #C2643A;
  --g-accent-dunkel: #A9502A;
  --g-glas: rgba(255, 255, 255, 0.46);
  --g-glas-stark: rgba(255, 255, 255, 0.66);
  --g-rand: rgba(255, 255, 255, 0.72);
  --g-schatten: 0 1px 0 rgba(255,255,255,0.8) inset, 0 -1px 0 rgba(22,21,18,0.04) inset, 0 18px 40px -18px rgba(70,40,20,0.28), 0 2px 6px rgba(70,40,20,0.06);
  position: relative;
  overflow-x: clip;
}

/* ---------- Hintergrund: weiche Farbflächen, die langsam durch die Seite wandern ---------- */
.g-hintergrund { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; --mx: 0; --my: 0; }
.g-blob {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .7;
  width: clamp(340px, 46vw, 680px); aspect-ratio: 1;
  --k1: #F2B38F; --k2: #E48A5E; --tiefe: 20px;
  background: radial-gradient(circle at 40% 35%, var(--k1), var(--k2) 60%, transparent 72%);
  transform: translate3d(calc(var(--mx) * var(--tiefe)), calc(var(--my) * var(--tiefe)), 0);
  transition: transform .9s cubic-bezier(.2,.6,.2,1);
  will-change: transform, translate;
}
.g-blob--1 { left: -8vw;  top: 2%;  --tiefe: 34px; }
.g-blob--2 { right: -8vw; top: 24%; --k1: #F7D9B8; --k2: #EBB98C; --tiefe: -26px; }
.g-blob--3 { left: 40vw;  top: 50%; --k1: #E7C4A8; --k2: #D9946E; opacity: .55; --tiefe: 44px; }
.g-blob--4 { right: -6vw; top: 76%; --k1: #F2C4A0; --k2: #E08D62; opacity: .55; --tiefe: 30px; }
@media (max-width: 767px) { .g-blob--3, .g-blob--4 { display: none; } .g-blob { filter: blur(56px); } }
@media (prefers-reduced-motion: no-preference) {
  .g-blob { animation: var(--weg) var(--dauer) ease-in-out var(--versatz, 0s) infinite; }
  .g-blob--1 { --weg: g-w1; --dauer: 46s; }
  .g-blob--2 { --weg: g-w2; --dauer: 54s; --versatz: -16s; }
  .g-blob--3 { --weg: g-w3; --dauer: 50s; --versatz: -22s; }
  .g-blob--4 { --weg: g-w4; --dauer: 58s; --versatz: -30s; }
}
@keyframes g-w1 { 0%,100% { translate: 0 0; scale: 1; } 25% { translate: 55vw 90vh; scale: 1.12; } 50% { translate: 40vw 220vh; scale: .95; } 75% { translate: -4vw 110vh; scale: 1.08; } }
@keyframes g-w2 { 0%,100% { translate: 0 0; scale: 1; } 25% { translate: -50vw -60vh; scale: 1.1; } 50% { translate: -30vw 80vh; scale: .95; } 75% { translate: -56vw 170vh; scale: 1.12; } }
@keyframes g-w3 { 0%,100% { translate: 0 0; scale: 1; } 25% { translate: -36vw -110vh; scale: 1.12; } 50% { translate: 24vw -220vh; scale: .95; } 75% { translate: 34vw -90vh; scale: 1.08; } }
@keyframes g-w4 { 0%,100% { translate: 0 0; scale: 1; } 25% { translate: -44vw -80vh; scale: 1.1; } 50% { translate: -20vw -190vh; scale: .95; } 75% { translate: 10vw -100vh; scale: 1.1; } }

/* ---------- Kopfleiste ---------- */
body.seite-glas > header {
  background: rgba(246, 242, 236, 0.55);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border-bottom-color: rgba(255,255,255,0.6);
}

/* ---------- Abschnitte: keine harten Linien und Flächen mehr, das Glas übernimmt ---------- */
body.seite-glas main > section { border-top: 0; }
body.seite-glas main > section.bg-paper { background: transparent; }

/* ---------- Glas-Baustein ---------- */
body.seite-glas .g-glas,
body.seite-glas #loesung .grid.grid-cols-2 > div,
body.seite-glas #ablauf .bg-paper,
body.seite-glas #vertrauen .grid > div,
body.seite-glas .faq-item,
body.seite-glas #ueber-uns .lg\:col-start-8 > .reveal {
  background: var(--g-glas);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--g-rand);
  border-radius: 26px;
  box-shadow: var(--g-schatten);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.seite-glas .g-glas, body.seite-glas #loesung .grid.grid-cols-2 > div, body.seite-glas #ablauf .bg-paper,
  body.seite-glas #vertrauen .grid > div, body.seite-glas .faq-item, body.seite-glas #ueber-uns .lg\:col-start-8 > .reveal,
  body.seite-glas .laufband { background: rgba(255, 252, 247, 0.94); }
}

/* Kennzahlen (Lösung) */
body.seite-glas #loesung .grid.grid-cols-2 { gap: 16px; padding-top: 12px; }
body.seite-glas #loesung .grid.grid-cols-2 > div { padding: 22px 22px 20px; }

/* Ablauf: vier Karten statt einer Tabelle mit Haarlinien */
body.seite-glas #ablauf .bg-rule { background: transparent; border: 0; gap: 18px; overflow: visible; border-radius: 0; }
body.seite-glas #ablauf .bg-paper { padding: 32px 28px; }
@media (hover: hover) { body.seite-glas #ablauf .bg-paper { transition: transform .35s ease; } body.seite-glas #ablauf .bg-paper:hover { transform: translateY(-4px); } }

/* Vertrauen: vier Glas-Karten statt Linien */
body.seite-glas #vertrauen .grid { gap: 18px; }
body.seite-glas #vertrauen .grid > div { padding: 30px 28px; border-top: 1px solid var(--g-rand); }

/* Über uns: rechte Spalte als eine Glas-Karte */
body.seite-glas #ueber-uns .lg\:col-start-8 > .reveal { padding: 34px 32px; }

/* FAQ */
body.seite-glas .faq-list { display: grid; gap: 12px; }
body.seite-glas .faq-item { border-top: 1px solid var(--g-rand); border-bottom: 1px solid var(--g-rand); overflow: hidden; }
body.seite-glas .faq-item:last-of-type { border-bottom: 1px solid var(--g-rand); }
body.seite-glas .faq-q { padding: 20px 26px; }
body.seite-glas .faq-a { padding: 0 26px 24px; }

/* Laufband der Branchen als Glasleiste */
body.seite-glas .laufband {
  border: 1px solid var(--g-rand); border-radius: 999px; padding: 14px 0;
  background: var(--g-glas); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: var(--g-schatten);
}

/* Knöpfe */
body.seite-glas .btn-primary { box-shadow: 0 8px 20px -8px rgba(22,21,18,.5), 0 1px 0 rgba(255,255,255,.18) inset; }
body.seite-glas .btn-primary:hover { transform: translateY(-1px); }
body.seite-glas .btn-ghost {
  background: var(--g-glas-stark); border-color: var(--g-rand); color: var(--g-ink);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 20px -10px rgba(70,40,20,.3);
}
body.seite-glas .btn-ghost:hover { background: rgba(255,255,255,.85); color: var(--g-ink); border-color: #fff; }

/* Kontakt: dunkles Glas als abgerundete Karte mitten in der Seite (statt Vollbreite-Block) */
body.seite-glas #kontakt { background: transparent; color: #F6F2EC; border-top: 0; }
body.seite-glas #kontakt > div {
  background: rgba(24, 20, 17, 0.95);
  -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.16); border-radius: 36px;
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 40px 70px -30px rgba(60,30,15,.55);
  padding: 44px 28px;
}
@media (min-width: 1024px) { body.seite-glas #kontakt > div { padding: 72px 64px; } }

body.seite-glas #kontakt select.field, body.seite-glas #kontakt select { background-color: transparent !important; color: #F6F2EC; }
body.seite-glas #kontakt select option { background: #1b1714; color: #F6F2EC; }

/* Fußzeile bleibt dunkel, bekommt nur abgerundete Oberkante */
body.seite-glas > footer { border-top: 0; border-radius: 36px 36px 0 0; }


/* ======================= Weitere Bausteine der Unterseiten ======================= */
/* Tabellen mit Haarlinien (gap-px + bg-rule) werden zu einzelnen Glas-Karten */
body.seite-glas .gap-px.bg-rule { background: transparent; border: 0; gap: 18px; overflow: visible; border-radius: 0; }
body.seite-glas .gap-px.bg-rule > .bg-paper,
body.seite-glas .gap-px.bg-rule > .bg-cream,
body.seite-glas .price-card:not(.featured),
body.seite-glas .einzel__karte,
body.seite-glas .rr,
body.seite-glas .rr-wahl,
body.seite-glas .rr-check,
body.seite-glas .rr-zeile {
  background: var(--g-glas);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--g-rand);
  box-shadow: var(--g-schatten);
}
body.seite-glas .gap-px.bg-rule > .bg-paper,
body.seite-glas .gap-px.bg-rule > .bg-cream { border-radius: 26px; }
body.seite-glas .price-card:not(.featured), body.seite-glas .einzel__karte { border-radius: 26px; }
body.seite-glas .rr { border-radius: 32px; }
body.seite-glas .rr-wahl, body.seite-glas .rr-check, body.seite-glas .rr-zeile { border-radius: 18px; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; }
body.seite-glas .rr-wahl--aktiv { border-color: var(--g-accent); box-shadow: 0 0 0 1px var(--g-accent) inset, 0 8px 18px -10px rgba(194,100,58,.5); }
/* hervorgehobene Preiskarte: dunkles Glas */
body.seite-glas .price-card.featured {
  background: rgba(24, 20, 17, 0.92);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.16); border-radius: 26px;
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 28px 50px -22px rgba(60,30,15,.55);
}
body.seite-glas .rr-summe { border-radius: 26px; border: 1px solid rgba(255,255,255,.14); }
@media (hover: hover) {
  body.seite-glas .price-card, body.seite-glas .einzel__karte { transition: transform .35s ease, box-shadow .35s ease; }
  body.seite-glas .price-card:not(.featured):hover, body.seite-glas .einzel__karte:hover { transform: translateY(-4px); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.seite-glas .gap-px.bg-rule > .bg-paper, body.seite-glas .gap-px.bg-rule > .bg-cream, body.seite-glas .price-card:not(.featured),
  body.seite-glas .einzel__karte, body.seite-glas .rr, body.seite-glas .rr-wahl, body.seite-glas .rr-check, body.seite-glas .rr-zeile { background: rgba(255, 252, 247, 0.94); }
}


/* Über uns: Team und Werte als Glas-Karten */
body.seite-glas [data-toc="Das Team"] .grid > div,
body.seite-glas [data-toc="Wofür wir stehen"] .grid > div {
  background: var(--g-glas); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--g-rand); border-radius: 26px; box-shadow: var(--g-schatten); padding: 30px 28px;
}
body.seite-glas [data-toc="Das Team"] .grid, body.seite-glas [data-toc="Wofür wir stehen"] .grid { gap: 18px; }

/* Vorlagen-Karten auf "Arbeiten" */
body.seite-glas .vk {
  background: var(--g-glas); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--g-rand); border-radius: 26px; box-shadow: var(--g-schatten);
}

/* Dunkle Vollbreite-Abschnitte (Kontakt, Abschluss) werden zu einer dunklen Glas-Karte */
body.seite-glas main > section.bg-ink { background: transparent; color: #F6F2EC; }
body.seite-glas main > section.bg-ink > div {
  background: rgba(24, 20, 17, 0.95);
  -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.16); border-radius: 36px;
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 40px 70px -30px rgba(60,30,15,.55);
  padding: 44px 28px;
}
@media (min-width: 1024px) { body.seite-glas main > section.bg-ink > div { padding: 64px 56px; } }
body.seite-glas main > section.bg-ink select, body.seite-glas main > section.bg-ink select.field { background-color: transparent !important; color: #F6F2EC; }
body.seite-glas main > section.bg-ink select option { background: #1b1714; color: #F6F2EC; }


/* ======================= Wissen-Seiten (eigenes Layout) ======================= */
body.seite-glas--wissen { background: transparent; }   /* html trägt das Creme, die Farbpunkte liegen dazwischen */
body.seite-glas--wissen .kopf {
  background: rgba(246, 242, 236, 0.55);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  border-bottom-color: rgba(255,255,255,0.6);
}
body.seite-glas--wissen .merke, body.seite-glas--wissen .hinweis, body.seite-glas--wissen .weiter a, body.seite-glas--wissen .liste > li {
  background: var(--g-glas); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--g-rand); border-radius: 26px; box-shadow: var(--g-schatten);
}
body.seite-glas--wissen .hinweis { border-radius: 22px; }
body.seite-glas--wissen .liste { border-top: 0; display: grid; gap: 14px; }
body.seite-glas--wissen .liste a { padding: 24px 28px; }
body.seite-glas--wissen .liste > li:hover { transform: translateY(-2px); }


/* Textblöcke mit Haarlinie oben (Ortsseiten, Branchenseiten) werden Glas-Karten */
body.seite-glas main section .grid > div.border-t.border-rule.pt-6 {
  background: var(--g-glas); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--g-rand); border-radius: 26px; box-shadow: var(--g-schatten); padding: 28px 26px;
}
body.seite-glas main section .grid:has(> div.border-t.border-rule.pt-6) { gap: 18px; }


/* ======================= Hover: Anheben + Lichtschimmer, der der Maus folgt ======================= */
body.seite-glas { --g-schatten-hover: 0 1px 0 rgba(255,255,255,0.9) inset, 0 -1px 0 rgba(22,21,18,0.04) inset, 0 30px 50px -20px rgba(70,40,20,0.34), 0 4px 10px rgba(70,40,20,0.08); }
body.seite-glas .g-hover { transition: transform .38s cubic-bezier(.2,.7,.2,1), box-shadow .38s ease, border-color .3s ease; }
@media (hover: hover) and (pointer: fine) {
  body.seite-glas .g-hover:hover:not(:focus-within) {
    transform: translateY(-5px);
    box-shadow: var(--g-schatten-hover);
    border-color: #fff;
    background-image: radial-gradient(460px circle at var(--px, 50%) var(--py, 0%), rgba(255,255,255,0.6), rgba(255,255,255,0) 62%);
  }
  /* hervorgehobene Preiskarte steht schon höher */
  body.seite-glas .price-card.featured.g-hover:hover:not(:focus-within) { transform: translateY(-13px); background-image: radial-gradient(460px circle at var(--px, 50%) var(--py, 0%), rgba(255,255,255,0.10), rgba(255,255,255,0) 62%); border-color: rgba(255,255,255,.3); }
  /* dunkle Glas-Karten: nur leichtes Anheben und zarter Schimmer */
  body.seite-glas #kontakt > div.g-hover:hover:not(:focus-within),
  body.seite-glas main > section.bg-ink > div.g-hover:hover:not(:focus-within) {
    transform: translateY(-3px); border-color: rgba(255,255,255,.28);
    background-image: radial-gradient(620px circle at var(--px, 50%) var(--py, 0%), rgba(255,255,255,0.07), rgba(255,255,255,0) 65%);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.seite-glas .g-hover, body.seite-glas .g-hover:hover:not(:focus-within) { transform: none !important; transition: none; }
}

/* Fokus sichtbar */
body.seite-glas .faq-q:focus-visible { outline: 2px solid var(--g-accent-dunkel); outline-offset: -4px; border-radius: 22px; }

/* Chat-Knopf und Fenster am Handy über der unteren Kontaktleiste */
@media (max-width: 767px) {
  body.seite-glas .wkc-knopf { bottom: 84px; }
  body.seite-glas .wkc-fenster { bottom: 156px; height: min(520px, calc(100vh - 190px)); }
}