/* 00-variablen.css */
/* Gestaltungsvariablen der BGW-Website. Werte unverändert aus der Bricks-Fassung übernommen (Stand 02.11.2026). */
/* Inter wie in der Bricks-Fassung je Gewicht einzeln angemeldet: Zwischengewichte wie 650 erscheinen dann als nächstes Gewicht (700). */
@font-face {
  font-family: "Inter";
  font-weight: 100;
  font-display: swap;
  unicode-range: U+0000, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF;
  src: url(/schriften/inter-variable-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 200;
  font-display: swap;
  unicode-range: U+0000, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF;
  src: url(/schriften/inter-variable-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 300;
  font-display: swap;
  unicode-range: U+0000, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF;
  src: url(/schriften/inter-variable-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF;
  src: url(/schriften/inter-variable-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF;
  src: url(/schriften/inter-variable-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0000, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF;
  src: url(/schriften/inter-variable-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF;
  src: url(/schriften/inter-variable-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 800;
  font-display: swap;
  unicode-range: U+0000, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF;
  src: url(/schriften/inter-variable-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 900;
  font-display: swap;
  unicode-range: U+0000, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF;
  src: url(/schriften/inter-variable-latin.woff2) format("woff2");
}

:root { --radius-sm: 6px; --radius-me: 14px; --radius-la: 22px; --radius-pill: 50px; --width-500: 500px; --width-650: 650px; --width-800: 800px; --width-950: 950px; --width-1100: 1100px; --width-1280: 1280px; --width-1536: 1536px; --width-20ch: 20ch; --width-58ch: 58ch; --width-62ch: 62ch; --width-68ch: 68ch; --space-2xs: clamp(0.51rem, calc(0.00027681660899654003 * (100vw - 23.75rem) + 0.51rem), 0.53rem); --space-xs: clamp(0.64rem, calc(0.0008304498269896185 * (100vw - 23.75rem) + 0.64rem), 0.7rem); --space-s: clamp(0.8rem, calc(0.0019377162629757771 * (100vw - 23.75rem) + 0.8rem), 0.94rem); --space-m: clamp(1rem, calc(0.0034602076124567475 * (100vw - 23.75rem) + 1rem), 1.25rem); --space-l: clamp(1.25rem, calc(0.005813148788927335 * (100vw - 23.75rem) + 1.25rem), 1.67rem); --space-xl: clamp(1.56rem, calc(0.009134948096885816 * (100vw - 23.75rem) + 1.56rem), 2.22rem); --space-2xl: clamp(1.95rem, calc(0.01397923875432526 * (100vw - 23.75rem) + 1.95rem), 2.96rem); --space-3xl: clamp(2.44rem, calc(0.020899653979238757 * (100vw - 23.75rem) + 2.44rem), 3.95rem); --space-4xl: clamp(3.05rem, calc(0.030588235294117645 * (100vw - 23.75rem) + 3.05rem), 5.26rem); --space-5xl: clamp(3.81rem, calc(0.044290657439446365 * (100vw - 23.75rem) + 3.81rem), 7.01rem); --space-6xl: clamp(4.77rem, calc(0.06339100346020761 * (100vw - 23.75rem) + 4.77rem), 9.35rem); --space-7xl: clamp(5.96rem, calc(0.08996539792387545 * (100vw - 23.75rem) + 5.96rem), 12.46rem); --space-8xl: clamp(7.45rem, calc(0.12678200692041522 * (100vw - 23.75rem) + 7.45rem), 16.61rem); --text-2xs: clamp(0.99rem, calc(-0.0008304498269896185 * (100vw - 23.75rem) + 0.99rem), 0.93rem); --text-xs: clamp(1.13rem, calc(-0.00027681660899653694 * (100vw - 23.75rem) + 1.13rem), 1.11rem); --text-s: clamp(1.3rem, calc(0.0004152249134948101 * (100vw - 23.75rem) + 1.3rem), 1.33rem); --text-m: clamp(1.5rem, calc(0.0013840830449827002 * (100vw - 23.75rem) + 1.5rem), 1.6rem); --text-l: clamp(1.73rem, calc(0.0026297577854671275 * (100vw - 23.75rem) + 1.73rem), 1.92rem); --text-xl: clamp(1.98rem, calc(0.0044290657439446345 * (100vw - 23.75rem) + 1.98rem), 2.3rem); --text-2xl: clamp(2.28rem, calc(0.006643598615916955 * (100vw - 23.75rem) + 2.28rem), 2.76rem); --text-3xl: clamp(2.62rem, calc(0.009688581314878889 * (100vw - 23.75rem) + 2.62rem), 3.32rem); --text-4xl: clamp(3.02rem, calc(0.01328719723183391 * (100vw - 23.75rem) + 3.02rem), 3.98rem); color-scheme: light; --glass-bg: rgba(255, 255, 255, .60); --glass-blur: blur(20px) saturate(180%); --glass-border-color: rgba(255, 255, 255, .50); --glass-bg-strong: rgba(255, 255, 255, .78); --glass-bg-soft: rgba(255, 255, 255, .42); --glass-border-ink: color-mix(in srgb, var(--color-primary) 26%, transparent); --glass-bg-fallback: rgba(255, 255, 255, .94); --glass-bg-dark: rgba(25, 25, 25, .52); --glass-border-dark: rgba(255, 255, 255, .18); --glass-edge-dark: inset 0 1px 0 rgba(255, 255, 255, .22); --transition-snap: 0.16s; --transition-fast: 0.3s; --transition-base: 0.4s; --transition-medium: 0.5s; --transition-slow: 0.7s; --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1); --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); --ease-back-out: cubic-bezier(0.175, 0.885, 0.32, 1.275); --glass-shadow: 0 1px 2px rgba(10, 16, 22, .08), 0 3px 6px rgba(10, 16, 22, .08), 0 8px 16px rgba(10, 16, 22, .10); --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 rgba(10, 16, 22, .05); --glass-shadow-sm: 0 1px 2px rgba(10, 16, 22, .10), 0 3px 6px rgba(10, 16, 22, .12); --shadow-card-hover: 0 15px 35px rgba(0, 0, 0, 0.08); --shadow-kontakt: 0 15px 40px -20px color-mix(in srgb, var(--color-primary) 14%, transparent); --hairline-border: color-mix(in srgb, var(--color-text) 8%, transparent); --hairline-shadow: 0 1px 4px color-mix(in srgb, var(--color-text) 4%, transparent); --form-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%235A5A5A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --form-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5 4.5 8.5 11 1.5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --hdr-max: var(--width-1280); --hdr-gutter: var(--space-l); --hdr-shell-top: 14px; --hdr-pad: 8px; --hdr-pad-sm: 5px; --hdr-logo-h: 40px; --hdr-logo-h-sm: 32px; --hdr-pill-h: 48px; --hdr-pill-h-sm: 42px; --hdr-icon: 22px; --hdr-icon-sm: 20px; --hdr-block: calc(var(--hdr-shell-top) + 2 * var(--hdr-pad) + var(--hdr-pill-h)); --font-sans: "Inter", -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --prim-on-dark: #8FBEE8; --prim-on-dark-hover: #9FCEF9; --prim-on-dark-text: #1F1F1F; --color-primary: #005096; --color-secondary: #1A1A1A; --color-background: #F2F2F2; --color-surface: #FAFAFA; --color-text: #1A1A1A; --color-text-soft: #3D3D3D; --color-muted: #5A5A5A; --color-accent: #047857; --color-own-circle-border: #E0E0E0; --color-field-border: #8A8A8A; --color-efd: #E3B11A; --color-map: #E6E6E6; --color-innerborder: #FFFFFF; --color-but-sec-shadow: rgba(0, 80, 150, 0.13); --color-sub-service-chevron: #6B6B6B; --color-deep: #191919; --color-deep-dark: #121212; --color-deep-light: #232323; --color-error: #B3261E; --color-body: #FFFFFF; --color-card: #FFFFFF; --color-static-white: #FFFFFF; --color-primary-hover: #003F83; --color-on-primary: #FFFFFF; --color-warning: #8A5300; }


@media (min-width: 1101px) and (max-width: 1299px) { :root { --hdr-logo-h: 34px; } }


/* Dunkler Modus: Attribut data-theme="dark" am html-Element (Skript modus.js) */
:root[data-theme="dark"] { color-scheme: dark; --glass-bg: rgba(31, 31, 31, .62); --glass-border-color: rgba(255, 255, 255, .14); --glass-bg-strong: rgba(31, 31, 31, .85); --glass-bg-soft: rgba(31, 31, 31, .44); --glass-border-ink: color-mix(in srgb, var(--color-primary) 34%, transparent); --glass-bg-fallback: rgba(31, 31, 31, .96); --glass-shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 3px 6px rgba(0, 0, 0, .28), 0 8px 16px rgba(0, 0, 0, .32); --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 -1px 0 rgba(0, 0, 0, .40); --glass-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 3px 6px rgba(0, 0, 0, .38); --shadow-card-hover: 0 15px 35px rgba(0, 0, 0, 0.45); --shadow-kontakt: 0 15px 40px -20px rgba(0, 0, 0, .55); --hairline-border: color-mix(in srgb, var(--color-text) 14%, transparent); --hairline-shadow: 0 1px 4px rgba(0, 0, 0, .35); --form-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%239A9893' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --form-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5 4.5 8.5 11 1.5' stroke='%231F1F1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --color-primary: #8FBEE8; --color-secondary: #E8E6E1; --color-background: #191919; --color-surface: #232323; --color-text: #E8E6E1; --color-text-soft: #B4B2AC; --color-muted: #9A9893; --color-accent: #57C79B; --color-own-circle-border: #3A3A3A; --color-field-border: #77746D; --color-efd: #E3B11A; --color-map: #2D2D2D; --color-innerborder: #1F1F1F; --color-but-sec-shadow: rgba(143, 190, 232, 0.13); --color-sub-service-chevron: #9A9893; --color-deep: #191919; --color-deep-dark: #121212; --color-deep-light: #232323; --color-error: #FF8585; --color-body: #1F1F1F; --color-card: #272727; --color-static-white: #FFFFFF; --color-own-circle-border-t-1: hsla(0, 0%, 23%, 0.17); --color-own-circle-border-t-2: hsla(0, 0%, 23%, 0.33); --color-own-circle-border-t-3: hsla(0, 0%, 23%, 0.5); --color-own-circle-border-t-4: hsla(0, 0%, 23%, 0.67); --color-own-circle-border-t-5: hsla(0, 0%, 23%, 0.83); --color-primary-hover: #9FCEF9; --color-on-primary: #1F1F1F; --color-warning: #FFB45F; }


@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url("/schriften/inter-400-italic.woff2") format("woff2"); }

@font-face { font-family: "Inter"; font-style: italic; font-weight: 600; font-display: swap; src: url("/schriften/inter-600-italic.woff2") format("woff2"); }

@font-face { font-family: "Inter"; font-style: italic; font-weight: 700; font-display: swap; src: url("/schriften/inter-700-italic.woff2") format("woff2"); }

/* 01-basis.css */
/* Grundstil: ersetzt Bricks-Grundgerüst und Browser-Vorgaben, nur was die Seiten brauchen. */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 62.5%; line-height: 1.15; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background-color: var(--color-body); }
body { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.7; color: var(--color-text-soft); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--color-text); text-rendering: optimizeLegibility; }
p { margin: 0; }
img { max-width: 100%; height: auto; border-style: none; vertical-align: middle; }
:root[data-theme="dark"] img { filter: brightness(0.92); }
:root[data-theme="dark"] .only-dark img, :root[data-theme="dark"] img.only-dark, :root[data-theme="dark"] img[data-src-dark] { filter: none; }
:root[data-theme="dark"] .only-light { display: none !important; }
:root:not([data-theme="dark"]) .only-dark { display: none !important; }
figure { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; border: none; padding: 0; background: none; }
textarea { overflow: auto; }
hr { height: 0; border: 0; border-top: 1px solid var(--hairline-border); margin: 1em 0; }
a { color: inherit; text-decoration: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
h1 { font-size: 2.4em; line-height: 1.4; }
h2 { font-size: 2.1em; line-height: 1.4; }
h3 { font-size: 1.8em; line-height: 1.4; }
h4 { font-size: 1.6em; line-height: 1.4; }
main :is(h1, h2, h3, h4, h5, h6) { overflow-wrap: anywhere; hyphens: auto; }
/* Sprungziele landen unter dem festen Kopf (Wert wie die Bricks-Fassung) */
[id] { scroll-margin-top: calc(var(--hdr-block) + var(--space-l)); }
section[id] { scroll-margin-top: calc(var(--hdr-block) + var(--space-l) - var(--sek-polster, var(--space-6xl))); }

/* 02-grundbausteine.css */
/* Gemeinsame Bausteine aller Seiten. Abschnittsdateien (10-… bis 89-…) bauen darauf auf und definieren diese Klassen nicht neu. */

/* Abschnitt und Inhaltsrahmen (vorher Bricks-Section/-Container) */
.sektion { display: flex; flex-direction: column; align-items: center; width: 100%; margin-inline: auto; padding: var(--space-6xl) var(--space-l); }
.rahmen { display: flex; flex-direction: column; align-items: flex-start; width: var(--width-1280); max-width: 100%; margin-inline: auto; }
.block { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.stack { display: flex; flex-direction: column; gap: var(--space-2xl); }
.stack > * { margin-block: 0; }
.band { background-color: var(--color-surface); }
.band:has(+ .band) { padding-bottom: var(--space-3xl); }
.band + .band { padding-top: var(--space-3xl); }
@media (max-width: 767px) { .sektion, .rahmen, .block { flex-wrap: wrap; } }

.intro-stack { display: flex; flex-direction: column; gap: var(--space-m); }
.intro-stack > * { margin-block: 0; }
.hero-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-s); }
.zweispalter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4xl); align-items: start; }
.zweispalter.zweispalter--breit { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
@media (max-width: 991px) {
  .zweispalter { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .zweispalter.zweispalter--breit { grid-template-columns: minmax(0, 1fr); }
}
.bg-glass { background-color: var(--glass-bg); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border-color); border-radius: var(--radius-me); box-shadow: var(--glass-edge), var(--glass-shadow); }
@supports not (backdrop-filter: blur(1px)) { .bg-glass { background-color: var(--glass-bg-fallback); } }

/* Karten (Leistungen, Wissen, Werkzeuge): Grundform wie die Bricks-Fassung; Abschnitte setzen nur ihr Raster und Abweichungen */
.karten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-m); align-items: stretch; }
@media (max-width: 991px) { .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 478px) { .karten { grid-template-columns: 1fr; gap: var(--space-s); } }
.karte {
  display: flex; flex-direction: column; overflow: hidden; color: inherit; text-decoration: none;
  background-color: var(--color-surface); border: 1px solid var(--color-own-circle-border); border-radius: var(--radius-la);
  transition: border-color var(--transition-base) ease, box-shadow var(--transition-base) ease;
}
.karte:hover { box-shadow: var(--shadow-card-hover); }
.karte:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.karte__media { position: relative; aspect-ratio: 5 / 3; overflow: hidden; background-color: var(--color-map); }
.karte__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.karte__body { flex: 1 1 0%; display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-m); }
.karte__titel { font-weight: 600; line-height: 1.25; color: var(--color-text); text-wrap: pretty; }
@media (max-width: 478px) { .karte__media { aspect-ratio: 16 / 9; } }
@media (prefers-reduced-motion: reduce) { .karte { transition: none; } }

/* Texte */
.heading-sektion { font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--color-text); text-wrap: balance; max-width: var(--width-650); }
.label { font-size: 1.2rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); }
.label--muted { color: var(--color-muted); }
.eyebrow-text { text-transform: uppercase; font-weight: 700; font-size: 1.2rem; color: var(--color-primary); letter-spacing: 1.5px; }
.intro-lead { max-width: 64rem; font-size: clamp(1.7rem, 1.6rem + 0.25vw, 1.8rem); line-height: 1.55; color: var(--color-text-soft); text-wrap: pretty; }
.fussnote { border-top: 1px solid var(--color-own-circle-border); text-wrap: pretty; font-size: max(1.3rem, var(--text-m)); color: var(--color-muted); padding-top: var(--space-s); max-width: var(--width-650); }

/* Knöpfe */
.btn-prim, .btn-sec {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; width: auto; height: auto;
  border: none; cursor: pointer; appearance: none; font-family: inherit; font-size: inherit; font-weight: 600; line-height: 1.2;
  text-align: center; text-transform: none; text-decoration: none; background-image: none; border-radius: var(--radius-pill);
  letter-spacing: 0.5px;
}
.btn-prim:focus-visible, .btn-sec:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.btn-prim {
  color: var(--color-static-white); background-color: var(--color-primary); padding: var(--space-m) var(--space-xl);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(10, 16, 22, 0), 0 4px 12px color-mix(in srgb, var(--color-primary) 15%, transparent);
  transition: background-color var(--transition-base) var(--ease-out-quart), box-shadow var(--transition-base) var(--ease-out-quart);
}
.btn-prim :is(svg, i) { transition: translate var(--transition-base) var(--ease-out-quart); margin: 0 !important; }
.btn-prim:is(:hover, :focus-visible) {
  background-color: color-mix(in srgb, var(--color-primary) 74%, var(--color-secondary));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .34), inset 0 -2px 0 rgba(10, 16, 22, .16), 0 4px 12px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.btn-prim:is(:hover, :focus-visible) :is(svg, i) { translate: 5px; }
.btn-prim:is(:hover, :focus-visible) > :is(svg, i):first-child { translate: none; }
.btn-prim:active {
  background-color: color-mix(in srgb, var(--color-primary) 64%, var(--color-secondary));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(10, 16, 22, .22), 0 2px 6px color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.btn-sec {
  color: var(--color-primary); background-color: transparent; padding: var(--space-m) var(--space-l);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-primary) 40%, transparent);
  transition: box-shadow var(--transition-base) var(--ease-out-quart), background-color var(--transition-base) var(--ease-out-quart);
}
.btn-sec :is(svg, i) { color: currentcolor; fill: currentcolor; margin: 0 !important; }
.btn-sec:is(:hover, :focus-visible) { background-color: color-mix(in srgb, var(--color-primary) 7%, transparent); box-shadow: inset 0 0 0 2px var(--color-primary); }
.btn-sec:active { background-color: color-mix(in srgb, var(--color-primary) 13%, transparent); }
:root[data-theme="dark"] .btn-prim { color: var(--color-on-primary); background-color: var(--color-primary); }
:root[data-theme="dark"] .btn-prim:is(:hover, :focus-visible) { background-color: var(--color-primary-hover); }
@media (prefers-reduced-motion: reduce) { .btn-prim, .btn-sec, .btn-prim :is(svg, i) { transition: none; } }

/* Auf dunklem Grund (Fuß, Bänder) */
:is(.on-dark, .ftr) :is(h1, h2, h3, h4, h5, h6), :is(.on-dark, .ftr) p { color: var(--color-static-white); }
:root[data-theme="dark"] :is(.on-dark, .ftr) :is(h1, h2, h3, h4, h5, h6), :root[data-theme="dark"] :is(.on-dark, .ftr) p { color: var(--color-text); }
:is(.on-dark, .ftr) .btn-prim { color: var(--prim-on-dark-text); background-color: var(--prim-on-dark); box-shadow: rgba(255, 255, 255, 0.35) 0 1px 1px inset, rgba(0, 0, 0, 0.25) 0 4px 12px; }
:is(.on-dark, .ftr) .btn-prim:is(:hover, :focus-visible) { background-color: var(--prim-on-dark-hover); box-shadow: rgba(255, 255, 255, 0.45) 0 2px 0 inset, rgba(0, 0, 0, 0.12) 0 -2px 0 inset, rgba(0, 0, 0, 0.25) 0 4px 12px; }
:is(.on-dark, .ftr) .btn-prim:active { background-color: color-mix(in srgb, var(--prim-on-dark) 82%, var(--color-deep-dark)); }
:is(.on-dark, .ftr) .btn-sec { color: var(--color-static-white); background-color: color-mix(in srgb, var(--color-static-white) 6%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-static-white) 38%, transparent); }
:is(.on-dark, .ftr) .btn-sec:is(:hover, :focus-visible) { background-color: color-mix(in srgb, var(--color-static-white) 12%, transparent); box-shadow: inset 0 0 0 2px var(--color-static-white); }
:root[data-theme="dark"] :is(.on-dark, .ftr) .btn-sec { color: var(--color-text); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-text) 38%, transparent); }
:root[data-theme="dark"] :is(.on-dark, .ftr) .btn-sec:is(:hover, :focus-visible) { background-color: color-mix(in srgb, var(--color-text) 12%, transparent); box-shadow: inset 0 0 0 2px var(--color-text); }
:is(.on-dark, .ftr) :is(.btn-prim, .btn-sec, a):focus-visible { outline: 2px solid var(--prim-on-dark); outline-offset: 3px; }
:is(.on-dark, .ftr) :is(.btn-prim, .btn-sec) :is(svg, i) { color: currentcolor; fill: currentcolor; }

/* Seitenübergreifende Bausteine (Phase 2). */
.heading-block { font-size: var(--text-xl); font-weight: 600; }
.prof-h1 { line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
.karte__kopf { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--space-s); }
.karte__text { line-height: 1.55; color: var(--color-muted); text-wrap: pretty; }
.leistung-link-text { display: flex; align-items: center; column-gap: var(--space-s); color: var(--color-primary); font-weight: 600; }
.leistung-link-text > svg { transition: translate var(--transition-base) var(--ease-out-quart); }
a:is(:hover, :focus-visible) .leistung-link-text > svg { translate: 5px; }
.pfeil-icon { width: var(--text-xl); min-width: 1em; min-height: 1em; font-size: 13px; }
.svc__inner { gap: var(--space-2xl); }
.svc__head { gap: var(--space-m); max-width: var(--width-68ch); }
.svc__point { position: relative; max-width: 100%; padding-left: 30px; }
.svc__point::before { content: "›"; position: absolute; left: 6px; top: 0; color: var(--color-primary); font-size: 1.4em; line-height: 1; }
.svc__point-lead { font-weight: 600; color: var(--color-text); overflow-wrap: anywhere; hyphens: auto; }
.svc__closer {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xl); align-items: center; padding: var(--space-xl); border-radius: var(--radius-me);
  background-color: color-mix(in srgb, var(--color-primary) 7%, var(--color-card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.svc__closer-text { max-width: var(--width-68ch); color: var(--color-text-soft); }
/* Hakenliste */
.liste-check { width: 100%; margin: 0; padding: 0; list-style: none; }
.liste-check li { display: flex; align-items: flex-start; }
.liste-check__icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; margin-top: 0.3em; color: var(--color-accent); }
.liste-check__icon > svg { width: 1em; height: 1em; font-size: medium; }
.liste-check__text { margin: 0 10px 0 var(--space-xs); }
.liste-check--zeilen li { padding-block: var(--space-s); }
.liste-check--zeilen li + li { border-top: 1px solid var(--color-own-circle-border); }

/* Ablauf nach dem Absenden: Zeitleiste mit Punkten */
.pfad--hell { --pfad-grund: var(--color-body); }
.pfad-item {
  --pfad-knoten: calc(4px + 0.7 * var(--text-m)); --pfad-punkt: 12px; --pfad-linie: 2px;
  display: grid; grid-template-columns: clamp(96px, 22%, 220px) minmax(0, 1fr); align-items: start;
}
.pfad-item--ziel { --pfad-punkt: 16px; }
.pfad-item__jahr {
  position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: flex-end; gap: var(--space-xs); padding-top: 4px;
  font-size: var(--text-m); font-weight: 600; line-height: 1.4; text-align: right; color: var(--color-text); font-variant-numeric: tabular-nums;
}
.pfad-item__jahr::after {
  content: ""; flex: 0 0 auto; width: var(--pfad-punkt); height: var(--pfad-punkt); margin-top: calc(0.7em - var(--pfad-punkt) / 2); margin-right: -1px;
  border: 2px solid var(--color-primary); border-radius: 50%; background-color: var(--pfad-grund, var(--color-background)); transform: translateX(50%);
}
.pfad-item--ziel .pfad-item__jahr::after { border-style: dashed; }
.pfad-item__body { position: relative; padding: 0 0 var(--space-xl) calc(var(--space-xl) + var(--pfad-linie)); }
.pfad-item--ziel .pfad-item__body { padding-bottom: var(--space-2xl); }
.pfad-item__body::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; border-left: var(--pfad-linie) solid color-mix(in srgb, var(--color-primary) 32%, transparent); }
.pfad-item:first-child .pfad-item__body::before { top: var(--pfad-knoten); }
.pfad-item:last-child .pfad-item__body::before { bottom: auto; height: var(--pfad-knoten); }
.pfad-item__titel { max-width: var(--width-62ch); font-size: var(--text-l); font-weight: 600; line-height: 1.35; color: var(--color-text); }
.pfad-item__text { max-width: var(--width-62ch); margin-top: var(--space-2xs); line-height: 1.65; color: var(--color-text-soft); text-wrap: pretty; }


.textlink a:not(.btn-prim, .btn-sec) {
  color: inherit; text-decoration: underline 1px color-mix(in srgb, currentcolor 40%, transparent 60%); text-underline-offset: 3px;
  transition: color var(--transition-fast) ease-out, text-decoration-color var(--transition-fast) ease-out;
}
.textlink a:not(.btn-prim, .btn-sec):is(:hover, :focus-visible) { color: var(--color-primary); text-decoration-color: currentcolor; }
@media (max-width: 991px) { .svc__closer { grid-template-columns: 1fr; gap: var(--space-m); } }
@media (max-width: 478px) { .svc__point { padding-left: 24px; } .svc__point::before { left: 4px; } }
@media (prefers-reduced-motion: reduce) { .textlink a, .leistung-link-text > svg { transition: none; } }

/* The picture wrapper keeps the existing image layout. */
.bild-varianten { display: contents; }

.bild-varianten > source { display: none; }

/* 10-kopf.css */
/* Kopf: Glasleiste mit Logo, Hauptmenü (drei Großmenüs), Kopfknöpfen und Mobilmenü. Vorlage vorlagen/kopf.html, Skript skripte/kopf.js.
   Werte wie die Bricks-Fassung (Stand 02.11.2026). Zustände: .is-scrolled (Leiste), .is-open (Großmenü-Eintrag, Burger, Mobilmenü). */

#kopf { position: sticky; top: 0; z-index: 60; padding-top: var(--hdr-shell-top); }
#kopf:has(.hdr__mobile.is-open) { z-index: 10000; }

/* Leiste */
.hdr {
  position: relative; z-index: 99; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px;
  width: min(var(--hdr-max), calc(100% - 2 * var(--hdr-gutter))); margin-inline: auto; padding: var(--hdr-pad) var(--hdr-pad) var(--hdr-pad) 20px;
  border: 1px solid var(--glass-border-color); border-radius: var(--radius-pill); background-color: var(--glass-bg);
  backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow);
  transition: padding var(--transition-medium) var(--ease-out-expo), background-color var(--transition-medium) var(--ease-out-expo), box-shadow var(--transition-medium) var(--ease-out-expo);
}
@supports not (backdrop-filter: blur(1px)) { .hdr { background-color: var(--glass-bg-fallback); } }
.hdr.is-scrolled {
  --hdr-logo-h: var(--hdr-logo-h-sm); --hdr-pill-h: var(--hdr-pill-h-sm); --hdr-icon: var(--hdr-icon-sm);
  padding-block: var(--hdr-pad-sm); background-color: var(--glass-bg-strong); box-shadow: var(--glass-edge), var(--glass-shadow-sm);
}
/* Breit: Unschärfe auf einer Unterlage, damit die Großmenüs ihre eigene Unschärfe behalten */
@media (min-width: 1101px) {
  .hdr { backdrop-filter: none; }
  .hdr::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; backdrop-filter: var(--glass-blur); pointer-events: none; }
}
@media (max-width: 1199px) { .hdr { display: flex; flex-direction: row; justify-content: space-between; gap: 12px; } }
/* Schmal bleiben Logo und Knöpfe beim Scrollen gleich groß, nur der Innenabstand wird kleiner (wie bisher) */
@media (max-width: 560px) {
  .hdr, .hdr.is-scrolled { --hdr-logo-h: 36px; --hdr-pill-h: 42px; --hdr-icon: 20px; }
  .hdr { gap: 10px; padding-left: 14px; }
}

.hdr__skip {
  position: absolute; top: 50%; left: 12px; z-index: 10; translate: 0 -50%; display: flex; align-items: center;
  width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 10px 16px;
  border-radius: var(--radius-pill); background-color: var(--color-card); box-shadow: var(--glass-shadow-sm);
  color: var(--color-primary); font-weight: 600; text-decoration: none;
}
.hdr__skip:focus-visible { width: auto; height: auto; overflow: visible; clip-path: none; outline: 2px solid var(--color-primary); outline-offset: 2px; }

.hdr__logo { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; line-height: 0; text-decoration: none; }
.hdr__logo img { display: block; width: auto; height: var(--hdr-logo-h); object-fit: contain; object-position: left center; transition: height var(--transition-medium) var(--ease-out-expo); }
.hdr__logo:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; border-radius: var(--radius-sm); }

/* Hauptmenü (ab 1200 px) */
.hdr__nav { grid-column: 2; justify-self: center; min-width: 0; }
@media (max-width: 1199px) { .hdr__nav { display: none; } }
.hdr__liste { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.hdr__nav .hdr__liste { align-items: center; }
.hdr__nav .hdr__liste > li { position: relative; margin-left: 4px; }
.hdr__nav .hdr__liste > li:first-child { margin-left: 30px; }
.hdr__nav .hdr__liste > li > a, .hdr__nav .hdr__zeile > a {
  display: block; padding: 10px; border-radius: var(--radius-pill); color: var(--color-text);
  font-size: clamp(1.15rem, -1.05rem + 2vw, 1.4rem); font-weight: 500; letter-spacing: -0.005em; white-space: nowrap;
  text-decoration: none; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--color-primary) 45%, transparent); text-underline-offset: 7px;
  transition: color var(--transition-base) ease;
}
.hdr__nav .hdr__liste > li > a:is(:hover, :focus-visible), .hdr__nav .hdr__zeile > a:is(:hover, :focus-visible) { color: var(--color-primary); text-decoration-line: underline; }
.hdr__nav .hdr__liste > li > a:focus-visible, .hdr__nav .hdr__zeile > a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.hdr__nav .hdr__liste > li > a[aria-current="page"], .hdr__nav .hdr__zeile > a[aria-current="page"] { color: var(--color-primary); font-weight: 600; text-decoration-line: underline; text-decoration-color: currentcolor; }
.hdr__zeile { display: flex; align-items: center; }
.hdr__nav .hdr__zeile button {
  box-sizing: content-box; display: flex; align-items: center; margin: -8px -8px -8px -4px; padding: 8px;
  font-size: clamp(1.15rem, -1.05rem + 2vw, 1.4rem);
}
.hdr__chevron { display: block; width: 1em; height: 1em; transition: rotate 200ms var(--ease-out-expo); }
.hdr__nav .hat-mega:is(:hover, :focus-within, .is-open) > .hdr__zeile > * { color: var(--color-primary); }
.hdr__nav .is-open .hdr__chevron { rotate: 180deg; }

/* Großmenü: öffnet sofort, schließt mit Ausblenden; Lage und Abstand setzt kopf.js */
.hdr__nav .hdr__mega {
  position: absolute; top: 100%; left: 0; z-index: 998; width: 760px; max-width: calc(100vw - 32px); margin-top: 6px; border-radius: 1.2rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 260ms var(--ease-out-expo), visibility 260ms var(--ease-out-expo);
}
.hdr__nav .hdr__mega--breit { width: 900px; }
.hdr__nav .hdr__mega a { font-weight: 500; letter-spacing: -0.005em; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--color-primary) 45%, transparent); }
.hdr__nav .hdr__mega::before { content: ""; position: absolute; inset-inline: 0; bottom: 100%; height: var(--menue-abstand, 6px); }
.hdr__nav .is-open > .hdr__mega { opacity: 1; visibility: visible; pointer-events: auto; transition: none; }
.hdr__nav .hdr__mega :is(.wk-menu, .bgw-services-menu) {
  background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); border-color: var(--glass-border-color); box-shadow: var(--glass-edge), var(--glass-shadow);
}
@supports not (backdrop-filter: blur(1px)) { .hdr__nav .hdr__mega :is(.wk-menu, .bgw-services-menu) { background: var(--glass-bg-fallback); } }
.is-open > .hdr__mega :is(.wk-menu, .bgw-services-menu) { animation: kopf-menue-ein 260ms var(--ease-out-expo) both; }
@keyframes kopf-menue-ein { from { opacity: 0; } to { opacity: 1; } }

/* Inhalt der Großmenüs (breit und im Mobilmenü) */
.bgw-services-menu, .wk-menu {
  width: 100%; min-width: 0; padding: 1.6rem; color: var(--color-text);
  border: 1px solid var(--color-own-circle-border); border-radius: 1.2rem;
}
.bgw-services-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.wk-menu { display: flex; flex-direction: column; }
.hdr__mega :is(.wk-row, .bgw-services-card) {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden; color: var(--color-text); text-decoration: none;
  background: var(--color-card); border: 1px solid var(--hairline-border); border-radius: var(--radius-me); box-shadow: var(--hairline-shadow);
  transition: box-shadow var(--transition-medium) ease;
}
.hdr__mega :is(.wk-row, .bgw-services-card):hover { box-shadow: var(--shadow-card-hover); }
.hdr__mega :is(.wk-menu, .bgw-services-menu) a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

.bgw-services-image { width: 100%; aspect-ratio: 2.4 / 1; object-fit: cover; }
.bgw-services-efd .bgw-services-image { object-fit: contain; background: var(--color-deep); padding: 1.6rem; }
.bgw-services-copy { display: block; flex: 1 1 0%; width: 100%; min-width: 0; padding: 1.2rem 1.4rem 1.4rem; text-wrap: balance; }
.bgw-services-title { display: inline; margin: 0; font-size: 1.7rem; line-height: 1.35; font-weight: 650; hyphens: auto; }
.bgw-services-arrow, .wk-arrow { display: inline-block; width: 2rem; height: 2rem; margin-left: 0.6rem; vertical-align: -0.25rem; color: var(--color-primary); }
.bgw-services-efd-note { display: block; margin-top: 0.4rem; font-size: 1.2rem; line-height: 1.4; font-weight: 400; }

.wk-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 1.2rem; width: 100%; min-width: 0; }
.wk-row { align-items: stretch; width: 100%; }
.wk-bild { position: relative; display: block; width: 100%; aspect-ratio: 2 / 1; overflow: hidden; }
.wk-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wk-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; min-width: 0; padding: 1.2rem 1.2rem 1.4rem; }
.wk-title-line { display: block; width: 100%; min-width: 0; text-wrap: balance; }
.wk-heading { display: inline; min-width: 0; margin: 0; font-size: 1.6rem; line-height: 1.35; font-weight: 650; hyphens: auto; }
.wk-text { margin: 0; font-size: 1.3rem; line-height: 1.5; font-weight: 400; color: var(--color-text-soft); }
.wk-mobile-all {
  display: flex; align-items: center; justify-content: flex-start; width: 100%; margin-top: 1.2rem; padding: 1.6rem 1.2rem 0.4rem 0;
  border-top: 1px solid var(--color-own-circle-border); color: var(--color-primary);
  font-size: 1.4rem; line-height: 1.5; font-weight: 650; text-decoration: none; transition: box-shadow var(--transition-medium) ease;
}
.wk-mobile-all:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Werkzeugkiste: Textkarten mit Symbol */
.wk-menu--text .wk-copy { flex: 1 1 0%; gap: 0.8rem; padding: 1.2rem; }
.wk-menu--text .eyebrow-text { margin: 0; }
.wk-menu--text .wk-title-line { display: flex; flex-direction: row; align-items: center; gap: 0.6rem; }
.wk-menu--text .wk-heading { display: block; flex: 0 1 auto; letter-spacing: -0.01em; hyphens: manual; white-space: nowrap; }
.wk-icon { flex: 0 0 2rem; width: 2rem; height: 2rem; color: var(--color-primary); fill: none; }
.wk-icon--gross { flex-basis: 2.2rem; width: 2.2rem; height: 2.2rem; }
.wk-menu--text .wk-text { font-size: 1.4rem; }
.wk-link { margin-top: auto; font-size: 1.4rem; font-weight: 700; color: var(--color-primary); }

/* Kopfknöpfe */
.hdr__actions { grid-column: 3; justify-self: end; display: flex; flex-direction: row; align-items: center; gap: 8px; }
@media (max-width: 560px) { .hdr__actions { gap: 6px; } }
.hdr__pill {
  position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center;
  width: var(--hdr-pill-h); height: var(--hdr-pill-h); padding: 0; border: 1px solid var(--glass-border-ink); border-radius: var(--radius-pill);
  background-color: var(--glass-bg-soft); box-shadow: var(--glass-edge); color: var(--color-primary); font: inherit; text-decoration: none; cursor: pointer;
  transition: width var(--transition-medium) var(--ease-out-expo), height var(--transition-medium) var(--ease-out-expo), background-color var(--transition-medium) var(--ease-out-expo), border-color var(--transition-medium) var(--ease-out-expo);
}
.hdr__pill:is(:hover, :focus-visible) { background-color: var(--glass-bg-strong); border-color: color-mix(in srgb, var(--color-primary) 55%, transparent); }
.hdr__pill:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.hdr__pill :is(svg, .toggle) {
  display: block; flex: 0 0 auto; width: var(--hdr-icon); height: var(--hdr-icon); color: currentcolor; line-height: 1;
  transition: width var(--transition-medium) var(--ease-out-expo), height var(--transition-medium) var(--ease-out-expo);
}
@media (max-width: 560px) { .hdr__pill--whatsapp { display: none; } }
:root[data-theme="dark"] .toggle--hell, :root:not([data-theme="dark"]) .toggle--dunkel { display: none; }

.hdr__actions .btn-prim {
  height: var(--hdr-pill-h); padding-block: 0; padding-inline: 22px; font-size: var(--text-m); letter-spacing: 0.5px; white-space: nowrap;
  transition: height var(--transition-medium) var(--ease-out-expo), background-color var(--transition-base) var(--ease-out-quart), box-shadow var(--transition-base) var(--ease-out-quart);
}
.hdr__actions .btn-prim:focus-visible, .hdr__mobile .btn-prim:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
@media (max-width: 860px) { .hdr__actions .btn-prim { display: none; } }

/* Burger (bis 1199 px) */
.hdr__burger {
  --burger-w: var(--hdr-icon); --burger-h: 2px; --burger-gap: 6px; --burger-speed: var(--transition-snap); --burger-stagger: 0.10s;
  display: none;
}
@media (max-width: 1199px) { .hdr__burger { display: inline-flex; } }
.hdr__burger.is-open { background-color: color-mix(in srgb, var(--color-primary) 14%, transparent); border-color: var(--color-primary); }
.hdr__burger-bar {
  position: absolute; inset: 0; width: var(--burger-w); height: var(--burger-h); margin: auto; border-radius: var(--radius-sm); background-color: currentcolor;
  transition: rotate var(--burger-speed) var(--ease-out-quart), translate var(--burger-speed) var(--ease-out-quart) var(--burger-stagger), scale var(--burger-speed) var(--ease-out-quart) var(--burger-stagger), opacity var(--burger-speed) ease var(--burger-stagger), width var(--transition-medium) var(--ease-out-expo);
}
.hdr__burger-bar:nth-child(1) { translate: 0 calc(var(--burger-gap) * -1); }
.hdr__burger-bar:nth-child(3) { translate: 0 var(--burger-gap); }
.hdr__burger.is-open .hdr__burger-bar {
  transition: translate var(--burger-speed) var(--ease-out-quart), scale var(--burger-speed) var(--ease-out-quart), opacity var(--burger-speed) ease, rotate var(--burger-speed) var(--ease-out-quart) var(--burger-stagger), width var(--transition-medium) var(--ease-out-expo);
}
.hdr__burger.is-open .hdr__burger-bar:nth-child(1) { translate: 0; rotate: 45deg; }
.hdr__burger.is-open .hdr__burger-bar:nth-child(2) { opacity: 0; scale: 0 1; }
.hdr__burger.is-open .hdr__burger-bar:nth-child(3) { translate: 0; rotate: -45deg; }

/* Mobilmenü: deckt die Seite unter der Leiste ab (oberer Rand per kopf.js) */
.hdr__mobile {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overscroll-behavior: contain;
  padding: 1.6rem max(1.6rem, env(safe-area-inset-right)) max(2.4rem, env(safe-area-inset-bottom)) max(1.6rem, env(safe-area-inset-left));
  background: #fff; visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity var(--transition-snap) var(--ease-out-quart), visibility 0s linear var(--transition-snap);
}
.hdr__mobile::before { content: ""; position: fixed; inset: 0; z-index: -1; background: #fff; pointer-events: none; }
:root[data-theme="dark"] .hdr__mobile, :root[data-theme="dark"] .hdr__mobile::before { background: var(--color-background); }
.hdr__mobile.is-open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity var(--transition-fast) var(--ease-out-expo), visibility 0s linear; }
.hdr__mobile-menue { font-size: var(--text-m); }
.hdr__mobile .hdr__liste { flex-direction: column; align-items: stretch; }
.hdr__mobile :is(.hdr__liste > li > a, .hdr__zeile > a, .hdr__direkt a) {
  display: block; padding: 12px 14px; border-radius: var(--radius-me); color: var(--color-text); font-weight: 500; text-decoration: none;
  transition: background-color var(--transition-base) var(--ease-out-expo), color var(--transition-base) ease;
}
.hdr__mobile :is(.hdr__liste > li > a, .hdr__zeile > a, .hdr__direkt a, .wk-mobile-all):is(:hover, :focus-visible) { background-color: color-mix(in srgb, var(--color-primary) 6%, transparent); color: var(--color-primary); }
.hdr__mobile a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.hdr__mobile :is(.hdr__liste > li > a, .hdr__zeile > a, .hdr__direkt a)[aria-current="page"] { color: var(--color-primary); font-weight: 600; }
.hdr__mobile .hdr__liste > li > a, .hdr__mobile .hdr__zeile > a { font-size: var(--text-l); }
.hdr__mobile .hdr__zeile { justify-content: space-between; gap: 4px; }
.hdr__mobile .hdr__zeile > a { flex: 1 1 auto; min-width: 0; }
.hdr__mobile .hdr__zeile button {
  display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-me);
  color: var(--color-muted); line-height: 0; transition: color var(--transition-base) ease, background-color var(--transition-base) var(--ease-out-expo);
}
.hdr__mobile .hdr__zeile button:is(:hover, :focus-visible) { color: var(--color-primary); background-color: color-mix(in srgb, var(--color-primary) 6%, transparent); }
.hdr__mobile .hdr__zeile button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.hdr__mobile .hdr__chevron { width: 18px; height: 18px; transition-duration: var(--transition-fast); }
.hdr__mobile .is-open .hdr__chevron { rotate: 180deg; }
.hdr__mobile .hdr__mega { display: none; width: 100%; }
.hdr__mobile .is-open > .hdr__mega { display: block; }
.hdr__mobile :is(.wk-menu, .bgw-services-menu) { padding: 0.8rem 0; border: 0; }
.hdr__mobile .bgw-services-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.hdr__mobile .bgw-services-image { aspect-ratio: 1.6 / 1; }
.hdr__mobile .bgw-services-copy { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 1rem; text-wrap: wrap; }
.hdr__mobile .bgw-services-title { display: block; font-size: 1.3rem; }
.hdr__mobile .bgw-services-arrow { display: none; }
.hdr__mobile .bgw-services-efd-note { margin-top: 0; }
.hdr__mobile .wk-list { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
.hdr__mobile .wk-row { flex-direction: row; }
.hdr__mobile .wk-bild { flex: 0 0 11rem; width: 11rem; min-height: 7.2rem; aspect-ratio: auto; }
.hdr__mobile .wk-copy { flex: 1 1 0%; justify-content: center; padding: 1rem 1.2rem; }
.hdr__mobile .wk-menu--text .wk-copy { padding: 1.2rem; }
.hdr__mobile .wk-mobile-all { padding: 1.4rem 0.8rem 0.4rem 0; }
.hdr__direkt { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-own-circle-border); }
.hdr__direkt a { font-size: var(--text-l); }
.hdr__mobile > .btn-prim { position: relative; isolation: isolate; width: 100%; min-width: 0; height: auto; margin-top: 8px; padding: 14px 22px; letter-spacing: 0.5px; }

@media (prefers-reduced-motion: reduce) {
  .hdr, .hdr *, .hdr__mobile, .hdr__mobile * { transition: none !important; }
  .is-open > .hdr__mega :is(.wk-menu, .bgw-services-menu) { animation: none; }
}

/* 20-hero.css */
/* Startseite Abschnitt 1 „Hero“: Text, Fakten, Hausbild mit Hotspots (skripte/hotspots.js). Werte wie die Bricks-Fassung. */


/* Aufbau */
.hero { --sek-polster: 0px; padding-top: var(--space-3xl); padding-bottom: var(--space-4xl); }
.hero__intro { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 2.5fr); gap: var(--space-6xl); align-items: center; }
.hero__copy { gap: var(--space-l); max-width: var(--width-800); }
.hero__titel { text-wrap: balance; }

/* Fakten rechts */
.hero__aside { align-self: end; gap: 0; width: fit-content; max-width: 100%; font-size: var(--text-m); }
.hero-fakt { gap: 2px; padding-block: var(--space-s); }
.hero-fakt + .hero-fakt { border-top: 1px solid var(--color-own-circle-border); }
.hero-fakt:first-child { padding-top: 0; }
.hero-fakt:last-child { padding-bottom: 0; }
.fakt-wert { font-size: 1.4rem; font-weight: 600; color: var(--color-text); text-wrap: pretty; }

@media (max-width: 991px) {
  .hero__intro { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
  .hero__aside { display: none; }
  .start .hero__bild { margin-top: var(--space-3xl); }
}

/* Hausbild mit Hotspots */
.hotspot-wrapper { position: relative; z-index: 1; isolation: isolate; align-self: center; max-width: var(--width-1100); }
.hero-hotspot { position: absolute; z-index: 10; }
.hotspot-wrapper > .hero-hotspot:is(:hover, :focus-within, .is-active) { z-index: 1; }
.hero-hotspot--balkenkopf { top: 26%; left: 64%; }
.hero-hotspot--riss { top: 26%; left: 38%; }
.hero-hotspot--parkett { top: 62%; left: 51%; }
.hero-hotspot--putz { top: 58%; left: 23.5%; }

.hero-hotspot__circle {
  --dot: clamp(26px, 2vw + 16px, 38px); --dot-ring: 2px; --dot-ring-on: 3px; --dot-halo: 3px; --dot-halo-on: 6px; --dot-kern: 4px; --dot-lift: 0 3px 10px rgba(0, 0, 0, .45);
  display: block; position: relative; width: var(--dot); height: var(--dot); border-radius: 50%; cursor: pointer; scale: 1;
  background: radial-gradient(circle at 50% 50%, var(--color-static-white) 0 var(--dot-kern), rgba(255, 255, 255, .25) var(--dot-kern));
  box-shadow: 0 0 0 var(--dot-ring) rgba(255, 255, 255, .9), 0 0 0 0 rgba(255, 255, 255, 0), var(--dot-lift);
  transition: background var(--transition-fast) var(--ease-out-quart), scale var(--transition-fast) var(--ease-out-quart);
}
.hero-hotspot__circle::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  /* Schatten einmal zeichnen; nur Skalierung/Deckkraft animieren. Ohne Sichtsignal bleibt der Halo pausiert. */
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .22); opacity: 0; transform: scale(.76);
  animation: hotspot-halo 3.2s var(--ease-out-quart) infinite; animation-play-state: paused;
}
.hotspot-wrapper.halo-ist-sichtbar .hero-hotspot__circle::after { animation-play-state: running; }
.hero-hotspot__circle:hover, .hero-hotspot:focus-within .hero-hotspot__circle {
  scale: 1.08;
  background: radial-gradient(circle at 50% 50%, var(--color-static-white) 0 var(--dot-kern), color-mix(in srgb, var(--color-primary) 60%, transparent) var(--dot-kern));
  box-shadow: 0 0 0 var(--dot-ring) var(--color-static-white), 0 0 0 calc(var(--dot-ring) + var(--dot-halo)) color-mix(in srgb, var(--color-primary) 30%, transparent), var(--dot-lift);
}
.hero-hotspot.is-active .hero-hotspot__circle {
  scale: 1.08;
  background: radial-gradient(circle at 50% 50%, var(--color-static-white) 0 5px, var(--color-primary) 5px);
  box-shadow: 0 0 0 var(--dot-ring-on) var(--color-static-white), 0 0 0 calc(var(--dot-ring-on) + var(--dot-halo-on)) color-mix(in srgb, var(--color-primary) 45%, transparent), var(--dot-lift);
}
.hero-hotspot__circle:hover::after, .hero-hotspot:is(:focus-within, .is-active) .hero-hotspot__circle::after { animation: none; }
.hero-hotspot:has(> .hero-hotspot__circle:focus-visible) { outline: 2px solid var(--color-static-white); outline-offset: 3px; }
.hero-hotspot__circle:focus-visible { outline: none; }
@keyframes hotspot-halo {
  0%, 70%, 100% { opacity: 0; transform: scale(.76); }
  35% { opacity: 1; transform: scale(1); }
}

/* Hinweis am Punkt: ohne Skript über Hover/Fokus, mit Skript gesteuert (.ist-gesteuert) */
.hero-hotspot__tooltip {
  position: absolute; bottom: 100%; left: 50%; z-index: 9999; width: max-content; max-width: 350px; margin: 0 0 12px;
  padding: var(--space-xs) var(--space-xl); border-radius: var(--radius-me);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 15px);
  transition: transform var(--transition-fast) var(--ease-out-quart), opacity var(--transition-fast) var(--ease-out-quart), visibility var(--transition-fast);
}
.hero-hotspot:is(:hover, :focus-within, .is-active) > .hero-hotspot__tooltip { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.hero-hotspot__titel { margin-bottom: var(--space-2xs); font-size: var(--text-l); font-weight: 600; color: var(--color-primary); }
.hero-hotspot__tooltip > .hero-hotspot__text { line-height: 1.5; }
@media (max-width: 991px) { .hero-hotspot__tooltip { width: 260px; max-width: 85vw; padding: var(--space-xs); } }
@media (max-width: 478px) {
  .hero-hotspot--parkett { display: none; }
  .hero-hotspot--putz > .hero-hotspot__tooltip { left: 100%; }
}

.ist-gesteuert .hero-hotspot, .ist-gesteuert .hero-hotspot:is(:hover, :focus-within) { z-index: 10; cursor: pointer; }
.ist-gesteuert .hero-hotspot.is-active { z-index: 20; }
.ist-gesteuert .hero-hotspot::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
.ist-gesteuert .hero-hotspot__tooltip { margin: 0; overflow-wrap: anywhere; opacity: 0; visibility: hidden; pointer-events: none; transform: none; transition: opacity 180ms ease, visibility 180ms ease; }
.ist-gesteuert .hero-hotspot:is(:hover, :focus-within) > .hero-hotspot__tooltip { opacity: 0; visibility: hidden; pointer-events: none; transform: none; }
.ist-gesteuert .hero-hotspot.is-active > .hero-hotspot__tooltip { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.ist-gesteuert[data-hotspot-mode="mobile"] .hero-hotspot__tooltip { display: none; }
.ist-gesteuert .hero-hotspot:has(> .hero-hotspot__circle:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 4px; }

/* Hinweisfeld unter dem Bild (schmale Ansicht, vom Skript erzeugt) */
.hero-hotspot-details { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: start; gap: 1.2rem; width: 100%; max-width: var(--width-1100); align-self: center; padding: 1.6rem; margin-top: 1.2rem; border: 1px solid var(--color-own-circle-border); border-radius: var(--radius-me); background: var(--color-card); color: var(--color-text); overflow-wrap: anywhere; }
.hero-hotspot-details[hidden] { display: none; }
.hero-hotspot-details__content { min-width: 0; }
.hero-hotspot-details__content > .hero-hotspot__titel { margin-bottom: 0.6rem; font-size: 1.6rem; color: var(--color-primary); }
.hero-hotspot-details__close { display: grid; place-items: center; width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--color-own-circle-border); border-radius: 50%; color: var(--color-primary); background: transparent; font-size: 2.6rem; line-height: 1; cursor: pointer; }
.hero-hotspot-details__close:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }

/* Kennzeichnung KI-Bild (Hinweis dazu: eigener Baustein) */
.hotspot-wrapper > .ki-note-light {
  position: absolute; right: 10px; bottom: 10px; z-index: 5; padding: 4px 8px; border-radius: var(--radius-sm);
  background-color: color-mix(in srgb, var(--color-card) 72%, transparent); color: var(--color-text);
  backdrop-filter: blur(4px); font-size: 1.1rem; font-weight: 500; line-height: 1.2; letter-spacing: 0.02em; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-hotspot__circle, .hero-hotspot__tooltip, .ist-gesteuert .hero-hotspot__tooltip { transition: none; }
  .hero-hotspot__circle::after { animation: none; }
}

/* 30-leistungen.css */
/* Startseite Abschnitt 2 „Leistungen“: Einleitung und fünf Leistungskarten. Werte wie die Bricks-Fassung. */


/* Karten: oben zwei breite Schwerpunkte, darunter drei schmale */
:where(#leistungen) .karten { display: grid; gap: var(--space-m); align-items: stretch; }
.leistungen__karten { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.leistungen__karten > .karte { grid-column: span 2; }
.leistungen__karten > .karte:nth-child(-n+2) { grid-column: span 3; }
.leistungen__karten > .karte:nth-child(2) img { object-position: 60% 72%; }

:where(#leistungen) .bento-badge {
  position: absolute; top: 16px; left: 16px; z-index: 2; padding: 6px 14px; border-radius: var(--radius-pill);
  background-color: var(--color-primary); color: var(--color-surface);
  font-size: var(--text-s); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}
:where(#leistungen) .karte__titel { font-size: var(--text-l); font-weight: 600; line-height: 1.25; color: var(--color-text); text-wrap: pretty; }

:where(#leistungen) .karte__fuss { margin-inline: var(--space-m); padding: var(--space-m) 0; border-top: 1px solid var(--color-own-circle-border); }





@media (max-width: 767px) {
  .leistungen__karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leistungen__karten > .karte, .leistungen__karten > .karte:nth-child(-n+2) { grid-column: auto; }
  .leistungen__karten > .karte:last-child { grid-column: 1 / -1; }
  .leistungen__karten > .karte:last-child .karte__media { aspect-ratio: 5 / 2; }
}
@media (max-width: 478px) {
  .leistungen__karten { grid-template-columns: minmax(0, 1fr); gap: var(--space-s); }
  :where(#leistungen) .karte__media, .leistungen__karten > .karte:last-child .karte__media { aspect-ratio: 16 / 9; }
}


/* 40-baugutachter.css */
/* Startseite Abschnitt 3 „Ihr Baugutachter“: Bildband mit Zitat, Qualifikationen, Lightbox (skripte/lightbox.js). */


/* Bildband: Foto mit Verlauf, darüber die Zitatkarte */
.bildband { position: relative; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; min-height: clamp(320px, 42vw, 500px); padding: var(--space-xl); overflow: hidden; border: 1px solid var(--color-own-circle-border-t-5); border-radius: var(--radius-la); box-shadow: 5px 5px 10px var(--color-own-circle-border); }
.bildband__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 30%; }
.bildband__verlauf { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to left top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 60%); }
.bildband__karte { --glass-bg: var(--glass-bg-strong); position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--space-l); width: min(500px, 100%); margin: 0; padding: var(--space-xl); }
.bildband__karte > * { margin: 0; }
@media (max-width: 767px) {
  .bildband { align-items: stretch; min-height: 0; padding: 0; }
  .bildband__bild { position: static; height: auto; aspect-ratio: 3 / 2; }
  .bildband__verlauf { display: none; }
  .bildband__karte.bg-glass { width: 100%; padding: var(--space-l); background-color: var(--color-card); backdrop-filter: none; border: 0; border-top: 1px solid var(--color-own-circle-border); border-radius: 0; box-shadow: none; }
}

/* Zitat */
.zitat__text { max-width: var(--width-68ch); padding-left: 30px; border-left: 4px solid #dddedf; font-family: Georgia, "Times New Roman", serif; font-size: var(--text-l); line-height: 1.55; }
.zitat__signatur { display: flex; flex-direction: row; align-items: center; gap: var(--space-m); font-style: normal; }
.zitat__signatur--verteilt { flex-wrap: wrap; justify-content: space-between; font-size: var(--text-s); }
.zitat__urheber { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.zitat__urheber > * { margin-block: 0; }
.zitat__name { font-size: var(--text-m); font-weight: 700; line-height: 1.3; color: var(--color-text); }
.zitat__region { font-size: var(--text-s); font-weight: 600; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); }
@media (max-width: 478px) { .zitat__signatur { gap: var(--space-s); } }

/* Qualifikationen */
.nachweise { display: flex; flex-direction: column; }
.nachweise__kopf { display: flex; flex-flow: row wrap; align-items: baseline; gap: var(--space-2xs) var(--space-m); margin-bottom: var(--space-s); }
.nachweise__hinweis { font-size: var(--text-s); line-height: 1.4; color: var(--color-muted); }
.nachweise__galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: var(--space-l) var(--space-m); }
.nachweise__galerie .nachweis { align-items: center; text-align: center; }
.nachweise__galerie .nachweis__bild { max-width: 96px; }
.nachweise__galerie .nachweis__titel { max-width: var(--width-20ch); text-wrap: balance; }
.nachweis { display: flex; flex-direction: column; gap: var(--space-2xs); color: inherit; text-decoration: none; }
.nachweis__bild { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; overflow: hidden; background-color: var(--color-card); border: 1px solid var(--hairline-border); box-shadow: var(--hairline-shadow); transition: box-shadow var(--transition-base) var(--ease-out-quart); }
.nachweis:is(:hover, :focus-visible) .nachweis__bild { box-shadow: 0 4px 10px color-mix(in srgb, var(--color-text) 12%, transparent); }
:root[data-theme="dark"] .nachweis:is(:hover, :focus-visible) .nachweis__bild { box-shadow: rgba(0, 0, 0, 0.45) 0 4px 10px; }
.nachweis__titel { font-weight: 500; line-height: 1.4; color: var(--color-text); hyphens: auto; overflow-wrap: break-word; }
.nachweis__titel--klein { font-size: var(--text-s); color: var(--color-muted); }
@media (prefers-reduced-motion: reduce) { .nachweis__bild { transition: none; } }

/* Lightbox (vorher PhotoSwipe): Bild auf abgedunkeltem Grund, Schließen oben rechts */
.lightbox { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; overflow: hidden; color: var(--color-static-white); background: transparent; border: 0; }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background-color: rgba(0, 0, 0, 0.8); }
.lightbox__bild { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; cursor: zoom-out; }
.lightbox__zu { position: absolute; top: 10px; right: 20px; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; color: inherit; opacity: 0.85; }
.lightbox__zu svg { width: 40px; height: 40px; fill: currentcolor; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6)); }
.lightbox__zu:is(:hover, :focus-visible) { opacity: 1; }
.lightbox__zu:focus-visible { outline: 2px solid currentcolor; outline-offset: -8px; }
html:has(.lightbox[open]) { overflow: hidden; }

/* 45-ablauf.css */
/* Startseite Abschnitt 4 „So läuft eine Beauftragung ab“: vier Schritte, mobil senkrechte Achse, ab 992 px waagerecht.
   Gemeinsame Klassen (.intro-stack, .heading-sektion, .hero-actions, Knopf-Laufweite) stehen in 02-grundbausteine.css. */

.ablauf { --punkt: 64px; --ring: var(--color-body); --achse-farbe: color-mix(in srgb, var(--color-primary) 45%, transparent); --achse-h: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 18%, transparent), color-mix(in srgb, var(--color-primary) 50%, transparent) 14%, color-mix(in srgb, var(--color-primary) 50%, transparent) 86%, color-mix(in srgb, var(--color-primary) 18%, transparent)); position: relative; width: 100%; max-width: var(--width-1280); margin: 0; padding: 0; }
.ablauf__schritt { position: relative; width: 100%; margin-bottom: var(--space-4xl); padding-left: 96px; }
.ablauf__schritt:last-child { margin-bottom: 0; }
.ablauf__schritt::before { content: ""; position: absolute; top: 28px; bottom: calc(-1 * var(--space-4xl) - 28px); left: 30px; width: 4px; background: var(--achse-farbe); }
.ablauf__schritt:last-child::before { display: none; }
.ablauf__punkt { position: absolute; top: -4px; left: 0; z-index: 2; display: flex; align-items: center; justify-content: center; width: var(--punkt); height: var(--punkt); padding: var(--space-m); border-radius: 50%; background-color: var(--color-surface); box-shadow: inset 0 0 0 2px var(--color-primary); transition: background-color var(--transition-base) ease; }
.ablauf__punkt svg { width: 44px; min-width: 1em; max-width: 100%; height: 44px; stroke: var(--color-primary); transition: stroke var(--transition-base) ease; }
.ablauf__schritt:is(:hover, :focus-within) .ablauf__punkt { background-color: var(--color-primary); }
.ablauf__schritt:is(:hover, :focus-within) .ablauf__punkt svg { stroke: var(--color-static-white); }
.ablauf__inhalt { display: flex; flex-direction: column; gap: var(--space-s); width: 100%; }
.ablauf__inhalt > * { margin-block: 0; }
.ablauf__titel { font-size: var(--text-l); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: var(--color-text); text-wrap: balance; }
.ablauf__text { line-height: 1.6; color: var(--color-text-soft); text-wrap: pretty; }
@media (max-width: 991px) { .ablauf__punkt svg { width: 38px; height: 38px; } }
@media (min-width: 992px) {
  .ablauf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-xl); }
  .ablauf__schritt { display: flex; flex-direction: column; margin-bottom: 0; padding-left: 0; }
  .ablauf__schritt::before { display: none; }
  .ablauf__schritt::after { content: ""; position: absolute; top: calc(var(--punkt) / 2 - 1px); left: calc(var(--punkt) / 2); width: calc(100% + var(--space-xl) - var(--punkt) / 2); height: 2px; background: var(--achse-h); }
  .ablauf__schritt:last-child::after { display: none; }
  .ablauf__punkt { position: relative; top: auto; left: auto; align-self: flex-start; box-shadow: inset 0 0 0 2px var(--color-primary), 0 0 0 10px var(--ring); }
  .ablauf__inhalt { padding-top: var(--space-l); }
}
@media (prefers-reduced-motion: reduce) { .ablauf__punkt, .ablauf__punkt svg { transition: none; } }

/* 50-faq.css */
/* Startseite Abschnitt 5 „Häufige Fragen“: Gruppen-Navigation (klebt ab 992 px) und aufklappbare Fragen als <details>. */


/* Linke Spalte */
.faq__spalte { position: sticky; top: var(--space-5xl); align-self: start; }
.faq__nav { display: flex; flex-direction: column; gap: 4px; max-width: 100%; margin: var(--space-l) 0 0 -16px; }
.faq__nav > a {
  flex-direction: row; align-items: center; gap: var(--space-s); padding: 10px 16px; border-radius: var(--radius-pill);
  color: var(--color-text); font-weight: 600; text-decoration: none; box-shadow: inset 0 0 0 1.5px transparent;
  transition: box-shadow var(--transition-fast) var(--ease-out-quart), color var(--transition-fast) var(--ease-out-quart);
}
.faq__nav > a:hover { color: var(--color-primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 35%, transparent); }
.faq__nav > a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.faq__nav-zahl {
  margin-left: auto; padding: 2px 10px; border-radius: var(--radius-pill); font-size: var(--text-s); line-height: 1.6;
  color: var(--color-muted); background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
  transition: color var(--transition-fast) var(--ease-out-quart), background-color var(--transition-fast) var(--ease-out-quart);
}
.faq__trenner { box-sizing: content-box; margin-block: var(--space-xl); border-top-color: var(--color-own-circle-border); }
.faq__hinweis { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-s); }
.faq__hinweis-titel { font-size: var(--text-l); font-weight: 700; line-height: 1.3; color: var(--color-text); }
@media (max-width: 991px) {
  .faq__spalte { position: static; }
  .faq__nav { flex-flow: row wrap; margin-left: 0; }
}

/* Gruppen */
.faq__gruppe { scroll-margin-top: calc(var(--hdr-block) + var(--space-2xl)); }
.faq__gruppe + .faq__gruppe { margin-top: var(--space-3xl); }
.faq__gruppe-kopf { display: flex; align-items: center; }
.faq__gruppe-icon { width: 40px; min-width: 1em; min-height: 1em; margin-right: var(--space-l); stroke: var(--color-primary); }
.faq__gruppe-titel { font-size: var(--text-xl); font-weight: 700; line-height: 1.25; text-wrap: balance; }
.faq__liste { margin-top: var(--space-l); }

/* Fragen: Kopfzeile als <summary>, Antwort klappt mit 200 ms auf, wo der Browser das kann */
.faq__kopf {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-m); align-items: start;
  min-height: 44px; padding-block: var(--space-s); border-bottom: 1px solid var(--color-own-circle-border); cursor: pointer; list-style: none;
}
.faq__kopf::-webkit-details-marker { display: none; }
.faq__kopf:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.faq__frage { grid-column: 1; margin: 0; font-size: var(--text-l); font-weight: 500; line-height: 1.3; text-wrap: pretty; transition: color var(--transition-fast) ease; }
.faq__kopf:hover .faq__frage { color: var(--color-primary); }
.faq__direkt { grid-column: 1; margin-top: var(--space-s); font-family: Georgia, "Times New Roman", serif; color: var(--color-muted); }
.faq__icon { grid-area: 1 / 2 / span 2; width: var(--text-xl); height: var(--text-xl); color: var(--color-primary); transition: transform 0.1s; }
.faq__eintrag[open] .faq__icon { transform: rotate(90deg); }
.faq__antwort { max-width: var(--width-68ch); padding: 8px 0 16px; line-height: 1.6; color: var(--color-muted); text-wrap: pretty; }
@supports (interpolate-size: allow-keywords) {
  .faq__eintrag { interpolate-size: allow-keywords; }
  .faq__eintrag::details-content { height: 0; overflow: clip; transition: height 0.2s, content-visibility 0.2s allow-discrete; }
  .faq__eintrag[open]::details-content { height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .faq__nav > a, .faq__nav-zahl, .faq__frage, .faq__icon, .faq__eintrag::details-content { transition: none; }
}

/* 60-werkzeugkiste.css */
/* Startseite Abschnitt 6 „Werkzeugkiste“: drei Rechner als Karten mit KI-Bild. .heading-sektion und Knopf-Laufweite: 50-faq.css. */

.werkzeuge { row-gap: var(--space-xl); }
.werkzeuge > :is(.eyebrow-text, .intro-lead), .werkzeug > .eyebrow-text { margin-bottom: 1.2em; }
.werkzeuge > .fussnote { font-size: 1.5rem; line-height: 1.6; color: var(--color-text-soft); border-top: 1px solid var(--color-own-circle-border); text-wrap: pretty; }
.werkzeuge__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-l); }
@media (max-width: 767px) { .werkzeuge__raster { grid-template-columns: minmax(0, 1fr); } }

/* Karte (gleiche Karte wie auf /werkzeugkiste/) */
.wissen-karte {
  display: flex; flex-direction: column; gap: var(--space-s); height: 100%; padding: var(--space-l);
  background-color: var(--color-card); border: 1px solid var(--hairline-border); border-radius: var(--radius-me); box-shadow: var(--hairline-shadow);
  text-decoration: none; transition: box-shadow var(--transition-base) var(--ease-out-quart), translate var(--transition-base) var(--ease-out-quart);
}
.wissen-karte:hover { box-shadow: var(--shadow-card-hover); translate: 0 -3px; }
@media (prefers-reduced-motion: reduce) { .wissen-karte { transition: none; } }

.werkzeug { position: relative; min-width: 0; gap: 1.2rem; padding: 2rem; }
.werkzeug__medien { position: relative; }
.werkzeug__medien img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-me); }
.werkzeug__medien .ki-note-dark {
  right: 0.8rem; bottom: 0.8rem; z-index: 3; padding: 0.3rem 0.7rem; border-radius: 0;
  background: rgb(31 31 31 / 0.78); color: #c3ccc6; font: 500 1rem / 1.4 ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.werkzeug__kopf { flex-direction: row; align-items: flex-start; gap: 1rem; min-width: 0; }
.werkzeug__icon { flex: 0 0 2.6rem; width: 2.6rem; height: 2.6rem; margin-top: 0.15rem; color: var(--color-primary); }
/* Schimmel-Symbol ist in der Bricks-Fassung 28 px groß (dort ohne width-Attribut), die anderen 26 px */
.werkzeug__icon--gross { min-width: 28px; min-height: 28px; }
.werkzeug__kopf h3 { flex: 1 1 0; min-width: 0; font-size: 2.2rem; line-height: 1.3; overflow-wrap: anywhere; }
.werkzeug__text { font-size: 1.5rem; line-height: 1.6; color: var(--color-text-soft); }
.werkzeug__link { margin-top: auto; font-size: 1.5rem; font-weight: 700; color: var(--color-primary); }

/* 65-wissen.css */
/* Startseite Abschnitt 7 „Wissen“: Einleitung und drei Artikelkarten mit KI-Bild. */

.wissen-teaser { padding: 72px 32px; font-size: 10px; color: var(--color-text); background: var(--color-card); }
.wissen-teaser__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.wissen-teaser__text { gap: 22px; min-width: 0; }
.wissen-teaser__eyebrow { margin-bottom: 1.2em; font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary); }
.wissen-teaser__titel { font-size: clamp(34px, 3.5vw, 48px); font-weight: 700; line-height: 1.12; letter-spacing: -0.03em; }
.wissen-teaser__lead { max-width: 46ch; font-size: 17px; line-height: 1.7; color: var(--color-text-soft); }
.wissen-teaser__alle { display: flex; align-items: center; margin-top: 8px; font-size: 15px; font-weight: 650; line-height: 1.5; color: var(--color-primary); text-decoration: none; }

/* Kartenraster und Karte; gleiche Karte wie Abschnitt 2 und /wissen/, daher nur in diesem Abschnitt definiert */
:where(#wh-knowledge) .karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); align-items: stretch; }
:where(#wh-knowledge) .karte { color: var(--color-text); }
:where(#wh-knowledge) .karte__body { flex: 1 1 0%; gap: var(--space-2xs); padding: var(--space-m); }
.karte__kategorie { font-size: 1.2rem; font-weight: 700; line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary); }
:where(#wh-knowledge) .karte__titel { font-size: var(--text-l); font-weight: 600; line-height: 1.25; text-wrap: balance; hyphens: manual; }
:where(#wh-knowledge) .karte:hover .karte__titel { color: var(--color-primary); }
:where(#wh-knowledge) .karte__titel::after {
  content: ""; display: inline-block; width: 1.6rem; height: 1.6rem; margin-left: 0.6rem; vertical-align: -0.2rem; background-color: var(--color-primary);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l14 0'/%3E%3Cpath d='M15 16l4 -4'/%3E%3Cpath d='M15 8l4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}
:where(#wh-knowledge) .karte__text { font-size: 1.5rem; line-height: 1.55; color: var(--color-muted); text-wrap: pretty; }

@media (min-width: 768px) and (max-width: 991px) { :where(#wh-knowledge) .karte__titel { font-size: 1.7rem; } }
@media (max-width: 767px) {
  .wissen-teaser { padding: 48px 24px; }
  .wissen-teaser__titel { font-size: 38px; }
  :where(#wh-knowledge) .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(#wh-knowledge) .karte:last-child { grid-column: 1 / -1; }
  :where(#wh-knowledge) .karte:last-child .karte__media { aspect-ratio: 5 / 2; }
}
@media (max-width: 478px) {
  .wissen-teaser { padding: 40px 20px; }
  .wissen-teaser__titel { font-size: 34px; }
  :where(#wh-knowledge) .karten { grid-template-columns: minmax(0, 1fr); gap: var(--space-s); }
  :where(#wh-knowledge) .karte__media, :where(#wh-knowledge) .karte:last-child .karte__media { aspect-ratio: 16 / 9; }
}

/* 66-ki-hinweis.css */
/* KI-Kennzeichnung „✦ AI“ auf Bildern (alle Seiten) und Hinweis dazu (skripte/ki-hinweis.js setzt data-ki-marke und #ki-tooltip). */

.ki-note-dark, .ki-note-light {
  position: absolute; right: 10px; bottom: 10px; z-index: 5; padding: 4px 8px; border-radius: var(--radius-sm); backdrop-filter: blur(4px);
  font-size: 1.1rem; font-weight: 500; line-height: 1.2; letter-spacing: 0.02em; pointer-events: none;
}
.ki-note-dark { background-color: color-mix(in srgb, var(--color-deep-dark) 72%, transparent); color: var(--color-static-white); }
.ki-note-light { background-color: color-mix(in srgb, var(--color-card) 72%, transparent); color: var(--color-text); }

/* Zeichen mit Hinweis: größere Trefferfläche, Fokusrahmen */
main [data-ki-marke] { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; pointer-events: auto; cursor: help; }
main [data-ki-marke]::after { content: ""; position: absolute; inset: -8px; }
main [data-ki-marke]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; box-shadow: 0 0 0 2px var(--color-card); }

.ki-hinweis {
  position: fixed; top: 0; left: 0; z-index: 10000; width: max-content; max-width: min(30rem, calc(100vw - 16px)); padding: 8px 12px;
  border: 1px solid var(--glass-border-color); border-radius: var(--radius-me); background-color: var(--color-card); box-shadow: var(--glass-shadow-sm);
  color: var(--color-text); font-size: 1.3rem; font-weight: 500; line-height: 1.4; letter-spacing: -0.005em; text-wrap: pretty;
  visibility: hidden; opacity: 0; translate: 0 6px;
  transition: opacity var(--transition-base) ease, translate var(--transition-base) var(--ease-out-expo), visibility var(--transition-base);
}
.ki-hinweis.ist-offen { visibility: visible; opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .ki-hinweis { transition: none; } }

/* 70-kontakt.css */
/* Startseite Abschnitt 8 „Schildern Sie mir Ihren Fall“: Kontaktwege links, Karte mit Kurzanfrage rechts. */


#kontakt-sektion { background-color: var(--color-background); }
/* Laufweite der Bricks-Knöpfe; gehört später in 02-grundbausteine.css */
:where(#kontakt-sektion) .kontakt__weg > .btn-sec { letter-spacing: 0.5px; }

/* Absender mit Portrait */
.kontakt__absender { flex-direction: row; align-items: center; gap: var(--space-l); }
.kontakt__portrait { display: block; flex: 0 0 80px; width: 80px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; }
.kontakt__absender-text { display: flex; flex-direction: column; gap: var(--space-2xs); min-width: 0; }
.kontakt__absender-text > * { margin-block: 0; }
.kontakt__name { font-weight: 700; line-height: 1.3; color: var(--color-text); }

/* Drei Kontaktwege */
.kontakt__wege { margin-top: var(--space-xl); }
.kontakt__weg { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-s); padding-block: var(--space-l); border-top: 1px solid var(--color-own-circle-border); }
.kontakt__weg:last-child { padding-bottom: 0; }
.kontakt__weg-titel { font-size: var(--text-l); font-weight: 700; line-height: 1.3; color: var(--color-text); }

/* Karte mit Kurzanfrage */
.kontakt__karte { position: relative; align-self: start; padding: 26px 40px; background-color: var(--color-card); border-radius: var(--radius-la); box-shadow: var(--shadow-kontakt); }
:root[data-theme="dark"] .kontakt__karte { box-shadow: var(--shadow-kontakt), inset 0 0 0 1px var(--color-own-circle-border); }
@media (max-width: 991px) { .kontakt__karte { padding: var(--space-l); } }
.kontakt__karte-titel { font-size: var(--text-xl); font-weight: 700; line-height: 1.25; color: var(--color-text); text-wrap: balance; }
.kontakt__formular { width: 100%; margin-top: var(--space-xl); }
.kontakt__fussnote { margin-top: var(--space-xl); font-size: var(--text-s); line-height: 1.5; color: var(--color-muted); }

/* 72-formular-huelle.css */
/* Formular-Hülle der Kurz- und Projektanfrage (Fragmente aus dist/formular). Unverändert aus den Inline-Regeln der Bricks-Fassung übernommen,
 bis der Formular-Baustein (Phase 3) sie übernimmt. Formidable-Klassen (frm_…) sind hier erlaubt, weil das Fragment sie mitbringt. */
.frm_forms.with_frm_style .btn-prim:is(:hover, :focus-visible) > :is(svg, i):first-child { translate: none; }
.frm_forms input[type="text"].frm_verify, .frm_forms .frm_hidden { display: none !important; }
.frm_forms .frm_screen_reader { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.frm_forms :is(.frm_none_container, .frm_pos_none) label.frm_primary_label { display: none; }
.frm_forms :is(.frm_hidden_container, .frm_pos_hidden) label.frm_primary_label { visibility: hidden; }
.frm_forms fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.frm_forms .frm_fields_container { display: grid; }
.frm_forms .frm_form_field:not(:has(> .frm_form_field)) { display: flex; flex-direction: column; gap: var(--space-2xs); margin: 0; }
.frm_forms .frm_primary_label { font-size: var(--text-m); font-weight: 600; line-height: 1.4; color: var(--color-text); }
.frm_forms .frm_required { margin-left: 2px; color: var(--color-primary); }
.frm_forms .frm_description { font-size: var(--text-s); line-height: 1.5; color: var(--color-muted); }
.frm_forms :is( input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="file"]), select, textarea) { width: 100%; padding: 12px 16px; font-family: inherit; font-size: var(--text-m); line-height: 1.5; color: var(--color-text); background-color: var(--color-card); border: none; border-radius: var(--radius-me); box-shadow: inset 0 0 0 1px var(--color-field-border); transition: box-shadow var(--transition-fast) var(--ease-out-quart); -webkit-appearance: none; appearance: none; }
.frm_forms :is( input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="file"]), select, textarea):hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 30%, transparent); }
.frm_forms :is( input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="file"]), select, textarea):focus { outline: none; box-shadow: inset 0 0 0 1px var(--color-primary), 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent); }
.frm_forms ::placeholder { color: var(--color-muted); opacity: .65; }
.frm_forms textarea { min-height: 140px; resize: vertical; }
.frm_forms select { padding-right: 44px; background-image: var(--form-chevron); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; }
.frm_forms .frm_inside_container { position: relative; --frm-notch-bg: var(--color-card); }
.frm_forms .frm_inside_container > label.frm_primary_label { position: absolute; top: 0; left: 12px; z-index: 1; max-width: calc(100% - 24px); padding-inline: 4px; font-size: var(--text-m); font-weight: 400; line-height: 1.5; color: var(--color-muted); background-color: var(--frm-notch-bg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transform: translateY(12px); transition: transform var(--transition-fast) var(--ease-out-quart), font-size var(--transition-fast) var(--ease-out-quart), color var(--transition-fast) var(--ease-out-quart); }
.frm_forms .frm_inside_container:has(> select) > label.frm_primary_label { max-width: calc(100% - 68px); }
.frm_forms .frm_inside_container.frm_label_float_top > label.frm_primary_label, .frm_forms .frm_inside_container:has( > :is(input, select, textarea):is(:focus, :autofill)) > label.frm_primary_label { transform: translateY(-50%); font-size: var(--text-s); font-weight: 600; color: var(--color-text); }
.frm_forms .frm_inside_container:has( > :is(input, select, textarea):focus) > label.frm_primary_label { color: var(--color-primary); }
.frm_forms .frm_inside_container > :is(input, textarea)::placeholder { opacity: 0; transition: opacity var(--transition-fast) var(--ease-out-quart); }
.frm_forms .frm_inside_container.frm_label_float_top > :is(input, textarea)::placeholder, .frm_forms .frm_inside_container:has( > :is(input, textarea):focus) > :is(input, textarea)::placeholder { opacity: .65; }
.frm_forms .frm_inside_container.frm_blank_field > label.frm_primary_label { color: var(--color-error); }
@media (prefers-reduced-motion: reduce) { .frm_forms .frm_inside_container > label.frm_primary_label, .frm_forms .frm_inside_container > :is(input, textarea)::placeholder { transition: none; } }
.frm_forms :is(.frm_checkbox, .frm_radio) { margin: 0 0 var(--space-xs); }
.frm_forms :is(.frm_checkbox, .frm_radio):last-child { margin-bottom: 0; }
.frm_forms :is(.frm_checkbox, .frm_radio) label { display: block; position: relative; padding-left: 30px; margin: 0; font-size: var(--text-m); line-height: 1.6; color: var(--color-text); cursor: pointer; }
.frm_forms :is(.frm_checkbox, .frm_radio) label :is(input[type="checkbox"], input[type="radio"]) { position: absolute; left: 0; font-size: var(--text-m); top: 6.5px; box-sizing: border-box; width: 20px; min-width: 20px; max-width: 20px; height: 20px; min-height: 20px; max-height: 20px; aspect-ratio: 1; padding: 0; margin: 0; cursor: pointer; background-color: var(--color-card); border: none; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--color-field-border); transition: box-shadow var(--transition-fast) var(--ease-out-quart), background-color var(--transition-fast) var(--ease-out-quart); -webkit-appearance: none; appearance: none; }
.frm_forms :is(.frm_checkbox, .frm_radio) label input[type="radio"] { border-radius: 50%; }
.frm_forms :is(.frm_checkbox, .frm_radio) label:hover :is(input[type="checkbox"], input[type="radio"]) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 30%, transparent); }
.frm_forms :is(.frm_checkbox, .frm_radio) label input[type="checkbox"]:checked { background-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); background-image: var(--form-check); background-repeat: no-repeat; background-position: center; background-size: 12px 10px; }
.frm_forms :is(.frm_checkbox, .frm_radio) label input[type="radio"]:checked { background-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary), inset 0 0 0 3px var(--color-card); }
.frm_forms :is(.frm_checkbox, .frm_radio) label :is(input[type="checkbox"], input[type="radio"]):focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--color-primary), 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent); }
.frm_forms .frm_blank_field :is(input, select, textarea) { box-shadow: inset 0 0 0 1px var(--color-error); }
.frm_forms .frm_error { font-size: var(--text-s); color: var(--color-error); }
.frm_forms :is(.frm_message, .frm_success_style) { font-size: var(--text-m); line-height: 1.6; padding: var(--space-m) var(--space-l); border-radius: var(--radius-me); background-color: color-mix(in srgb, var(--color-accent) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 30%, transparent); }
.frm_forms .frm_submit { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: var(--space-s); margin-top: 0; }
.frm_forms a:not(.btn-prim, .btn-sec, .frm_start_over) { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--color-primary) 40%, transparent); transition: text-decoration-color var(--transition-fast) var(--ease-out-quart); }
.frm_forms a:not(.btn-prim, .btn-sec, .frm_start_over):hover, .frm_forms a:not(.btn-prim, .btn-sec, .frm_start_over):focus-visible { text-decoration-color: var(--color-primary); }
.frm_forms .frm_dropzone { display: block; min-height: 0; padding: 12px 16px; background-color: var(--color-card); border: 1px dashed color-mix(in srgb, var(--color-primary) 35%, transparent); border-radius: var(--radius-me); cursor: pointer; transition: border-color var(--transition-fast) var(--ease-out-quart), background-color var(--transition-fast) var(--ease-out-quart); }
.frm_forms .frm_dropzone:is(:hover, .dz-drag-hover) { border-color: var(--color-primary); background-color: color-mix(in srgb, var(--color-primary) 5%, var(--color-card)); }
.frm_forms .frm_dropzone:focus-within { border-color: var(--color-primary); outline: 2px solid var(--color-primary); outline-offset: 2px; }
.frm_forms .frm_dropzone :is(.dz-message, .dz-default, .dz-button) { min-height: 0; margin: 0; padding: 0; border: none; background: none; }
.frm_forms .frm_dropzone .dz-message { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; text-align: left; }
.frm_forms .frm_dropzone svg { flex: none; width: 20px; height: 20px; color: var(--color-muted); fill: currentColor; }
.frm_forms .frm_dropzone .frm_upload_text { font-size: var(--text-m); font-weight: 600; line-height: 1.3; color: var(--color-text); }
.frm_forms .frm_dropzone .frm_small_text { font-size: var(--text-s); font-weight: 400; line-height: 1.3; color: var(--color-muted); }
.frm_forms .frm_dropzone .dz-preview { display: flex; align-items: center; gap: var(--space-s); width: 100%; padding: 8px 10px; margin-top: 8px; background-color: color-mix(in srgb, var(--color-primary) 6%, transparent); border-radius: var(--radius-sm); }
.frm_forms .frm_dropzone .dz-details { min-width: 0; font-size: var(--text-s); color: var(--color-text); overflow-wrap: anywhere; }
.frm_forms .frm_dropzone :is(.dz-image, .dz-image img) { width: 28px; height: 28px; border-radius: var(--radius-sm); object-fit: cover; }
.frm_forms .frm_dropzone .dz-remove { margin-left: auto; font-size: var(--text-s); color: var(--color-muted); }
@media (prefers-reduced-motion: reduce) { .frm_forms .frm_dropzone { transition: none; } }
.frm_forms :has(> .frm_form_field) { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-l) var(--space-m); }
.frm_forms :has(> .frm_form_field) > * { grid-column: 1 / -1; }
.frm_forms .frm_form_field:is(.frm6, .frm_half) { grid-column: span 6; }
.frm_forms .frm_form_field:is(.frm4, .frm_third) { grid-column: span 4; }
.frm_forms .frm_form_field:is(.frm3, .frm_fourth) { grid-column: span 3; }
.frm_forms .frm_form_field:is(.frm8, .frm_two_thirds) { grid-column: span 8; }
@media (max-width: 600px) { .frm_forms .frm_form_field:is(.frm3, .frm4, .frm6, .frm8, .frm_half, .frm_third, .frm_fourth, .frm_two_thirds) { grid-column: 1 / -1; } }
:root[data-theme="dark"] .frm_forms.with_frm_style .btn-prim { color: var(--color-on-primary); background-color: var(--color-primary); }
:root[data-theme="dark"] .frm_forms.with_frm_style .btn-prim:is(:hover, :focus-visible) { background-color: var(--color-primary-hover); }
.frm_forms .frm_rootline_group { margin-bottom: var(--space-xl); }
.frm_forms ul.frm_rootline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.frm_forms .frm_rootline_single { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); text-align: center; }
.frm_forms .frm_rootline_single::before { content: ""; position: absolute; top: 6px; right: 50%; left: -50%; height: 2px; background-color: var(--color-primary); }
.frm_forms .frm_rootline_single:first-child::before { display: none; }
.frm_forms ul.frm_rootline li.frm_rootline_single input[type="button"] { order: -1; z-index: 1; width: 14px; height: 14px; padding: 0; margin: 0; border: none; border-radius: 50%; background-color: var(--color-primary); font-size: 0; line-height: 0; cursor: pointer; transition: box-shadow var(--transition-fast) var(--ease-out-quart); -webkit-appearance: none; appearance: none; }
.frm_forms ul.frm_rootline li.frm_current_page input[type="button"] { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 18%, transparent); cursor: default; }
.frm_forms ul.frm_rootline li.frm_current_page ~ li input[type="button"] { background-color: var(--color-card); box-shadow: inset 0 0 0 2px var(--color-field-border); cursor: default; }
.frm_forms .frm_current_page ~ .frm_rootline_single::before { background-color: var(--color-own-circle-border); }
.frm_forms .frm_rootline_single input[type="button"]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.frm_forms .frm_rootline_group:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; border-radius: var(--radius-sm); }
.frm_forms .frm_rootline_title { font-size: var(--text-m); line-height: 1.3; color: var(--color-muted); }
.frm_forms .frm_current_page .frm_rootline_title { color: var(--color-text); font-weight: 600; }
@media (max-width: 640px) {
  .frm_forms .frm_rootline_single { min-width: 0; padding-inline: 3px; }
  .frm_forms .frm_rootline_title { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
}
.frm_forms .frm_submit .frm_prev_page { order: -1; }
.frm_forms :is(.frm_checkbox, .frm_radio) label, .frm_forms .frm_description { font-size: max(1.3rem, var(--text-m)); }
.frm_forms.with_frm_style .btn-prim { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; width: auto; height: auto; border: none; cursor: pointer; -webkit-appearance: none; appearance: none; font-family: inherit; font-size: inherit; font-weight: 600; line-height: 1.2; text-align: center; text-transform: none; text-decoration: none; color: var(--color-static-white); background-color: var(--color-primary); background-image: none; padding: var(--space-m) var(--space-xl); border-radius: var(--radius-pill); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(10, 16, 22, 0), 0 4px 12px color-mix(in srgb, var(--color-primary) 15%, transparent); transition: background-color var(--transition-base) var(--ease-out-quart), box-shadow var(--transition-base) var(--ease-out-quart); }
.frm_forms.with_frm_style .btn-prim:hover, .frm_forms.with_frm_style .btn-prim:focus-visible { background-color: color-mix(in srgb, var(--color-primary) 74%, var(--color-secondary)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .34), inset 0 -2px 0 rgba(10, 16, 22, .16), 0 4px 12px color-mix(in srgb, var(--color-primary) 15%, transparent); }
.frm_forms.with_frm_style .btn-prim:active { background-color: color-mix(in srgb, var(--color-primary) 64%, var(--color-secondary)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(10, 16, 22, .22), 0 2px 6px color-mix(in srgb, var(--color-primary) 12%, transparent); }
.frm_forms.with_frm_style .btn-prim:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.frm_forms.with_frm_style .btn-sec, .frm_forms .frm_prev_page { display: inline-flex; align-items: center; justify-content: center; gap: .5em; width: auto; height: auto; border: none; cursor: pointer; -webkit-appearance: none; appearance: none; font-family: inherit; font-size: inherit; font-weight: 600; line-height: 1.2; text-align: center; text-transform: none; text-decoration: none; color: var(--color-primary); background-color: transparent; background-image: none; padding: var(--space-m) var(--space-l); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-primary) 40%, transparent); transition: box-shadow var(--transition-base) var(--ease-out-quart), background-color var(--transition-base) var(--ease-out-quart); }
.frm_forms .frm_prev_page :is(svg, i) { margin: 0 !important; color: currentColor; fill: currentColor; }
.frm_forms.with_frm_style .btn-sec:is(:hover, :focus-visible), .frm_forms .frm_prev_page:is(:hover, :focus-visible) { background-color: color-mix(in srgb, var(--color-primary) 7%, transparent); box-shadow: inset 0 0 0 2px var(--color-primary); }
.frm_forms.with_frm_style .btn-sec:active, .frm_forms .frm_prev_page:active { background-color: color-mix(in srgb, var(--color-primary) 13%, transparent); }
.frm_forms.with_frm_style .btn-sec:focus-visible, .frm_forms .frm_prev_page:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .frm_forms .frm_prev_page { transition: none; } }
.frm_dropzone:not(.dz-clickable) > .fallback { display: none; }
/* Zeilenhöhe im Textfeld wie bisher vom Feld geerbt (vorher Bricks-Grundstil mit !important) */
.frm_forms .frm_form_field textarea { line-height: inherit; }

/* Die Formularbeschriftung behält ihre normale Laufweite. */
.frm_forms :is(.btn-prim, .btn-sec) { letter-spacing: normal; }

/* 80-fuss.css */
/* Fuß aller Seiten (dunkles Band) und Knopf „Nach oben“ mit Maus-Hinweis (skripte/nach-oben.js). Werte wie die Bricks-Fassung. */
.ftr {
  --ftr-max: var(--width-1280); --ftr-gutter: var(--space-l); --ftr-inline: max(var(--ftr-gutter), calc((100% - var(--ftr-max)) / 2));
  --ftr-fg: var(--color-static-white); --ftr-fg-soft: color-mix(in srgb, var(--color-static-white) 74%, transparent);
  --ftr-fg-mute: color-mix(in srgb, var(--color-static-white) 62%, transparent); --ftr-line: color-mix(in srgb, var(--color-static-white) 14%, transparent);
  --ftr-fill: color-mix(in srgb, var(--color-static-white) 6%, transparent); --ftr-accent: var(--prim-on-dark);
  position: relative; width: 100%; color: var(--ftr-fg); background-color: var(--color-deep);
}

/* Kurzantworten */
.ftr__faq { padding: var(--space-2xl) var(--ftr-inline) var(--space-xl); border-bottom: 1px solid var(--ftr-line); }
.ftr .ftr__eyebrow { margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ftr-accent); }
.ftr__faq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl); margin-top: var(--space-xl); }
@media (max-width: 860px) { .ftr__faq-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }
.ftr__q { font-size: var(--text-l); line-height: 1.25; letter-spacing: -0.02em; font-weight: 700; text-wrap: pretty; }
.ftr__a { margin-top: var(--space-s); font-size: var(--text-m); line-height: 1.6; color: var(--ftr-fg-soft); text-wrap: pretty; }
.ftr__more { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--space-xl); font-size: var(--text-m); font-weight: 600; white-space: nowrap; color: var(--ftr-fg); text-decoration: none; transition: color var(--transition-base) ease; }
.ftr__more-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; }
.ftr__more svg { width: 18px; height: 18px; transition: translate var(--transition-base) var(--ease-out-quart); }
.ftr__more:is(:hover, :focus-visible) { color: var(--ftr-accent); }
.ftr__more:is(:hover, :focus-visible) svg { translate: 5px; }

/* Hauptteil: Vorstellung links, Einsatzgebiet und Listen rechts */
.ftr__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); padding: var(--space-2xl) var(--ftr-inline); background-color: var(--color-deep-light); }
@media (max-width: 1100px) { .ftr__body { grid-template-columns: minmax(0, 1fr); } }
.ftr__logo { display: block; width: auto; height: 44px; margin: 0 0 3.2rem; }
.ftr__title { margin-top: 1.4rem; font-size: var(--text-2xl); line-height: 1.2; letter-spacing: -0.015em; font-weight: 700; max-width: 16ch; text-wrap: pretty; }
.ftr__lead { margin-top: 1.8rem; max-width: var(--width-68ch); font-size: 1.7rem; line-height: 1.55; color: var(--ftr-fg-soft); text-wrap: pretty; }
.ftr__cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-s); margin-top: var(--space-xl); max-width: var(--width-500); }
.ftr__cta > .btn-prim { grid-column: 1 / -1; }
.ftr__cta > .btn-sec { width: 100%; gap: 0.7rem; }
/* Laufweite der Bricks-Knöpfe; gehört später in 02-grundbausteine.css */
:where(#fuss) :is(.btn-prim, .btn-sec) { letter-spacing: 0.5px; }
@media (max-width: 560px) { .ftr__cta { grid-template-columns: minmax(0, 1fr); max-width: none; } }
.ftr__nap { display: block; margin-top: var(--space-l); font-size: var(--text-m); line-height: 1.7; color: var(--ftr-fg-soft); }
.ftr__nap-name { display: block; margin-bottom: 0.4rem; font-weight: 700; color: var(--ftr-fg); }
.ftr__nap-zeile { display: flex; align-items: flex-start; gap: 0.8rem; }

/* Kleine Linien-Icons vor Adresse, Zeit, Telefon und E-Mail */
.ftr__nap-zeile::before, .ftr__cta > .btn-sec::before { content: ""; flex: 0 0 auto; width: 1.6rem; height: 1.6rem; background-color: currentcolor; mask: var(--ftr-icon) center / contain no-repeat; }
.ftr__nap-zeile::before { margin-top: 0.4rem; color: var(--ftr-accent); }
.ftr__nap-zeile--ort { --ftr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/%3E%3Cpath d='M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0'/%3E%3C/svg%3E"); }
.ftr__nap-zeile--zeit { --ftr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E"); }
.ftr__cta > a[href^="tel:"] { --ftr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2'/%3E%3C/svg%3E"); }
.ftr__cta > a[href^="mailto:"] { --ftr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10'/%3E%3Cpath d='M3 7l9 6l9 -6'/%3E%3C/svg%3E"); }

@media (min-width: 1101px) { .ftr__region { padding-left: var(--space-2xl); border-left: 1px solid var(--ftr-line); } }
.ftr__label { margin: 0 0 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--ftr-line); font-size: 1.2rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ftr__chips { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--text-m); }
.ftr__chips > * { display: inline-flex; align-items: center; min-height: 32px; padding: 5px 12px; font-size: 1.35rem; line-height: 1.2; white-space: nowrap; color: var(--ftr-fg); background-color: var(--ftr-fill); border: 1px solid var(--ftr-line); border-radius: var(--radius-pill); }
.ftr__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); margin-top: 4.8rem; }
@media (min-width: 1101px) { .ftr__cols { margin-top: 9.2rem; } }
@media (min-width: 1101px) and (max-width: 1190px) { .ftr__cols { margin-top: 5.4rem; } }
@media (max-width: 860px) { .ftr__cols { column-gap: var(--space-l); } }
@media (max-width: 560px) {
  .ftr__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr__cols > :first-child { grid-column: 1 / -1; }
}
.ftr__list { display: flex; flex-direction: column; gap: 0.8rem; margin: 0; padding: 0; font-size: 1.45rem; list-style: none; }
.ftr__list > li { display: flex; line-height: 1.4; color: var(--ftr-fg-soft); }
.ftr__list a { display: flex; align-items: center; min-width: 0; overflow-wrap: anywhere; hyphens: auto; padding-block: 0.2rem; font-size: 1.45rem; font-weight: 500; line-height: 1.3; color: color-mix(in srgb, var(--color-static-white) 90%, transparent); text-decoration: none; transition: color var(--transition-base) ease; }
@media (max-width: 860px) { .ftr__list a { min-height: 32px; } }
.ftr__list a > span { min-width: 0; margin-right: 10px; }
.ftr__cols > :not(:first-child) .ftr__list a { font-weight: 400; color: var(--ftr-fg-soft); }
.ftr__cols .ftr__list a:is(:hover, :focus-visible) { color: var(--ftr-accent); }
.ftr__zusatz { display: block; margin-top: 0.1rem; font-size: 1.3rem; font-weight: 400; line-height: 1.25; color: var(--ftr-fg-mute); }
.ftr__list a:is(:hover, :focus-visible) .ftr__zusatz { color: inherit; }
.ftr__legal { padding: var(--space-m) var(--ftr-inline); font-size: var(--text-s); color: var(--ftr-fg-mute); background-color: var(--color-deep-dark); }
@media (prefers-reduced-motion: reduce) { .ftr a, .ftr__more svg { transition: none; } }

/* Knopf „Nach oben“: Maße und Rahmen wie die Knöpfe im Kopf */
.nach-oben {
  position: fixed; right: max(2.4rem, env(safe-area-inset-right)); bottom: max(2.4rem, env(safe-area-inset-bottom)); z-index: 50;
  display: inline-flex; align-items: center; justify-content: center; width: var(--hdr-pill-h); height: var(--hdr-pill-h); padding: 0;
  border: 1px solid var(--glass-border-ink); border-radius: var(--radius-pill); color: var(--color-primary); text-decoration: none; cursor: pointer;
  background-color: var(--color-card); box-shadow: var(--glass-shadow-sm); visibility: hidden; opacity: 0; translate: 0 6px;
  transition: opacity var(--transition-base) ease, translate var(--transition-base) var(--ease-out-expo), visibility var(--transition-base), border-color var(--transition-base) ease;
}
.nach-oben.ist-sichtbar { visibility: visible; opacity: 1; translate: 0 0; }
.nach-oben:is(:hover, :focus-visible) { border-color: color-mix(in srgb, var(--color-primary) 55%, transparent); }
.nach-oben:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.nach-oben svg { flex: none; width: var(--hdr-icon); height: var(--hdr-icon); }
@media (max-width: 560px) { .nach-oben { --hdr-pill-h: 42px; --hdr-icon: 20px; right: max(1.6rem, env(safe-area-inset-right)); bottom: max(1.6rem, env(safe-area-inset-bottom)); } }

/* Hinweis direkt an der Maus (nur Maus), am Knopf „Nach oben“ und an den Knöpfen im Kopf */
.maus-hinweis {
  position: fixed; left: 0; top: 0; z-index: 2147483647; width: max-content; padding: 5px 11px; border: 1px solid var(--glass-border-color); border-radius: var(--radius-pill);
  font-size: 1.3rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.005em; white-space: nowrap; color: var(--color-text);
  background-color: var(--color-card); box-shadow: var(--glass-shadow-sm); pointer-events: none; opacity: 0; transition: opacity var(--transition-base) ease;
}
.maus-hinweis.ist-sichtbar { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .nach-oben, .maus-hinweis { transition: none; } }
@media print { .nach-oben, .maus-hinweis { display: none; } }