/* Glas-Sprache der ganzen Website (Auftrag 4m, 29.10.2026): EINE Quelle für Tönung, Kante, Radius, Unschärfe und Reflex.
   Unschärfe höchstens 18 px, keine gestapelten Gläser. WebGL-Brechung nur im Startseiten-Hero (glass.css), sonst Milchglas.
   Helle Abschnitte (.is-light) liegen jetzt auf dem dunklen ruhigen Grund; die Farbvariablen werden dort gedreht. */
:root{
  --g-fill:linear-gradient(155deg,rgba(250,248,245,.085),rgba(250,248,245,.035));
  --g-flat:rgba(250,248,245,.05);
  --g-edge:rgba(250,248,245,.16);
  --g-hi:inset 0 1px 0 rgba(255,255,255,.2);
  --g-shadow:0 22px 48px -30px rgba(0,0,0,.75);
  --g-bf:blur(16px) saturate(1.4);
  --g-r:22px;--g-r-sm:14px;
}
@media (max-width:767px){:root{--g-bf:blur(12px) saturate(1.3);--g-r:18px}}
@media (prefers-reduced-transparency:reduce){:root{--g-bf:none;--g-fill:#1d1b19;--g-flat:#1d1b19}}
@media (prefers-contrast:more){:root{--g-bf:none;--g-fill:#1d1b19;--g-flat:#1d1b19;--g-edge:rgba(250,248,245,.5)}}

/* Ruhiger Grund: zwei weiche Kupferlichter, statisch (kein Scrollen, keine Last), dahinter Schwarz. Das Glas braucht etwas dahinter. */
body{background-color:var(--bg);background-image:radial-gradient(900px 640px at 86% 520px,rgba(215,134,84,.13),transparent 70%),radial-gradient(800px 600px at 8% 1450px,rgba(215,134,84,.09),transparent 70%);background-size:100% 2000px;background-repeat:repeat-y}
.is-surface,.help{background:rgba(250,248,245,.025)}

/* Helle Abschnitte werden dunkel: Farbvariablen drehen, damit Überschriften, Texte, Ränder und Links der bestehenden Regeln passen */
.is-light{--ink:#faf8f5;--ink-soft:#d3ccc3;--copper-deep:#f2bf98;--line-light:rgba(250,248,245,.16);background:transparent;color:var(--text)}
.is-light .btn-accent,.is-light .btn-accent:hover,.is-light .kontakt-steps li::before{color:#151412}
.svc li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2bf98' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E")}

/* Glas-Flächen mit Unschärfe: Karten, Pakete, Kontaktbox, Formular, Kurzantwort, Handlungsaufruf */
:is(.svc,.pcard,.proj,.step,.pkg,.page-cta,.quick-answer,form.leadform,.testimonial,.kontakt-offer,.help-tile){
  background:var(--g-fill);border:1px solid var(--g-edge);box-shadow:var(--g-hi),var(--g-shadow);
  -webkit-backdrop-filter:var(--g-bf);backdrop-filter:var(--g-bf)}
:is(.svc,.pcard,.proj,.step,.pkg,.page-cta,form.leadform,.testimonial){border-radius:var(--g-r)}
:is(.quick-answer,.kontakt-offer){border-radius:0 var(--g-r-sm) var(--g-r-sm) 0}
.is-light :is(.page-cta,.quick-answer){background:var(--g-fill);border-color:var(--g-edge)}
.is-light .quick-answer{border-left-color:var(--copper-2)}
.is-light .quick-answer p{color:var(--text)}
.demo-gallery .pcard{background:var(--g-fill);border-color:var(--g-edge)}
.svc:hover,a.pcard:hover{border-color:rgba(242,191,152,.5);box-shadow:var(--g-hi),0 26px 54px -30px rgba(0,0,0,.8)}
.svc--aux,.svc--aux:hover{box-shadow:var(--g-hi),var(--g-shadow)}
.svc-proof{background:rgba(242,191,152,.08);border-left-color:var(--copper-2)}
.svc-proof a,.svc-more a{color:var(--copper-2)}

/* Glas-Flächen ohne Unschärfe (klein oder viele): Tönung, Kante, Randlicht */
:is(.faq details,.quick-link,.about-facts span,.kontakt-steps li,.proj-tags span,.page-links a,.tbl-wrap){background:var(--g-flat);border:1px solid var(--g-edge);box-shadow:var(--g-hi)}
:is(.faq details,.quick-link,.tbl-wrap){border-radius:var(--g-r-sm)}
.tbl-wrap{padding:4px 10px}
.tbl th,.tbl td{border-color:var(--g-edge)}
.quick-link:hover{border-color:rgba(242,191,152,.6)}

/* Schalter und Chips */
.btn-ghost,.is-light .btn-ghost{background:rgba(250,248,245,.06);border-color:var(--g-edge);color:var(--text);box-shadow:var(--g-hi)}
.btn-ghost:hover,.is-light .btn-ghost:hover{border-color:var(--copper-2);color:var(--copper-2)}
.btn-accent{box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}

/* Formular im Glas: dunkle Felder, helle Schrift */
.field label{color:var(--text)}
.field input,.field select,.field textarea{background:rgba(250,248,245,.06);border-color:rgba(250,248,245,.24);color:var(--text);color-scheme:dark}
.field input::placeholder,.field textarea::placeholder{color:#a9a29a}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--copper-2)}
.field-error{color:#ffb4ab}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#ff8a80;box-shadow:0 0 0 3px rgba(255,138,128,.22)}

/* Header und Footer: Milchglas, Kupferkante. Header liegt auf der Startseite über dem Hero (glass.css), sonst über dem Seiteninhalt. */
header.site-header{background:rgba(14,13,12,.58);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border-bottom-color:rgba(250,248,245,.14);box-shadow:inset 0 -1px 0 rgba(255,255,255,.05)}
footer.site-footer{background:linear-gradient(180deg,rgba(14,13,12,.6),rgba(10,9,8,.82));-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border-top:1px solid var(--g-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  header.site-header{background:#141210;-webkit-backdrop-filter:none;backdrop-filter:none}
  footer.site-footer{background:#0c0c0c;-webkit-backdrop-filter:none;backdrop-filter:none}
}
.about-photo{background:var(--g-flat);border:1px solid var(--g-edge)}
/* Lesbarkeit auf Glas: Grautöne etwas heller (Messung am Pixel, Text auf Glas mindestens 4,5:1) */
:root{--muted:#c9c2b9;--muted-2:#b6afa7}