/* ---------- Schriften: selbst gehostet (keine Verbindung zu Google) ---------- */
/* Inter 400 latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(schriften/inter-latin-ext-395290.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 400 latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(schriften/inter-latin-567244.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 500 latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(schriften/inter-latin-ext-395290.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 500 latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(schriften/inter-latin-567244.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 600 latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(schriften/inter-latin-ext-395290.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 600 latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(schriften/inter-latin-567244.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 700 latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(schriften/inter-latin-ext-395290.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 700 latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(schriften/inter-latin-567244.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono 400 latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(schriften/jetbrains-mono-latin-ext-ba1653.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono 400 latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(schriften/jetbrains-mono-latin-480c06.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono 500 latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(schriften/jetbrains-mono-latin-ext-ba1653.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono 500 latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(schriften/jetbrains-mono-latin-480c06.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Plus Jakarta Sans 500 latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(schriften/plus-jakarta-sans-latin-ext-9f6257.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Plus Jakarta Sans 500 latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(schriften/plus-jakarta-sans-latin-fdb05b.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Plus Jakarta Sans 700 latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(schriften/plus-jakarta-sans-latin-ext-9f6257.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Plus Jakarta Sans 700 latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(schriften/plus-jakarta-sans-latin-fdb05b.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Plus Jakarta Sans 800 latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(schriften/plus-jakarta-sans-latin-ext-9f6257.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Plus Jakarta Sans 800 latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(schriften/plus-jakarta-sans-latin-fdb05b.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   HausTech Plus AG — Design-System 2026
   Hell und warm: Creme, Sand, Grau. Ein Signalton fuers Pikett.
   Runde Formen, weiches Licht, ruhige Bewegung.
   ========================================================================== */

:root {
  /* Flaechen */
  --creme:      #FCFBF8;
  --creme-2:    #F8F5EF;
  --sand:       #F3EDE3;
  --sand-2:     #EBE2D4;

  /* Text */
  --tinte:      #191B1F;
  --tinte-2:    #6B675F;
  --tinte-3:    #97928A;

  /* Linien */
  --linie:      rgba(25,27,31,.08);
  --linie-2:    rgba(25,27,31,.14);

  /* Signal: ausschliesslich Pikett und Notfall */
  --signal:     #E14434;
  --signal-2:   #C0392B;
  --signal-licht: rgba(225,68,52,.38);

  /* Sekundaer */
  --wasser:     #226C88;
  --wa:         #25D366;
  --wa-2:       #128C7E;
  --wa-licht:   rgba(37,211,102,.50);
  --gold:       #C99A3E;

  /* Radien */
  --r-xs:  10px;
  --r-s:   14px;
  --r:     20px;
  --r-l:   28px;
  --r-xl:  36px;
  --r-max: 999px;

  /* Licht und Tiefe */
  --schatten-1: 0 1px 2px rgba(25,27,31,.04), 0 8px 24px -14px rgba(25,27,31,.22);
  --schatten-2: 0 2px 4px rgba(25,27,31,.05), 0 22px 48px -20px rgba(25,27,31,.30);
  --schatten-3: 0 30px 70px -28px rgba(25,27,31,.38);
  --innen:      inset 0 1px 0 rgba(255,255,255,.8);

  /* Raster */
  --breite: 1200px;
  --schmal: 760px;

  --f-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --f-text:    "Inter", "Segoe UI", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* Festes helles Design: Browser im Dark Mode (Samsung Internet, Chrome Android)
   sollen die Seite nicht automatisch umfaerben -- sonst verschwinden Logo und Farben. */
:root { color-scheme: only light; }
@media (prefers-color-scheme: dark) {
  :root { color-scheme: only light; }
  html, body { background-color: var(--creme); color: var(--tinte); }
}

body {
  margin: 0;
  color: var(--tinte);
  font-family: var(--f-text);
  font-size: 17px;
  line-height: 1.62;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  background: var(--creme);
  position: relative;
  overflow-x: hidden;
}

/* Ruhiges Umgebungslicht im Hintergrund */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 12% -6%, rgba(255,196,128,.30), transparent 62%),
    radial-gradient(760px 480px at 92% 4%, rgba(225,68,52,.10), transparent 60%),
    radial-gradient(1000px 640px at 50% 108%, rgba(34,108,136,.10), transparent 66%);
}

img { max-width: 100%; display: block; }

a { color: var(--wasser); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--tinte); }

:focus-visible { outline: 3px solid var(--wasser); outline-offset: 3px; border-radius: 6px; }

/* ---------- Typografie ---------- */

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
  margin: 0 0 .55em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.35rem, 6vw, 4.35rem); }
h2 { font-size: clamp(1.8rem, 3.8vw, 2.85rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; letter-spacing: -.025em; }
h4 { font-size: 1rem; font-weight: 700; letter-spacing: -.02em; }

p { margin: 0 0 1.1em; max-width: 66ch; }

.lead {
  font-size: clamp(1.08rem, 1.7vw, 1.32rem);
  color: var(--tinte-2);
  line-height: 1.58;
  letter-spacing: -.012em;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinte-2);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--linie);
  box-shadow: var(--schatten-1);
  border-radius: var(--r-max);
  padding: .42rem .95rem;
  margin: 0 0 1.3rem;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-licht);
  flex: none;
}

.mono { font-family: var(--f-mono); font-size: .84em; letter-spacing: -.01em; }

/* ---------- Layout ---------- */

.wrap { width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }
.wrap-schmal { width: min(100% - 2.5rem, var(--schmal)); margin-inline: auto; }

section { padding: clamp(3.6rem, 7vw, 6.5rem) 0; scroll-margin-top: 96px; }
[id] { scroll-margin-top: 96px; }

/* Abschnitte als weiche, schwebende Flaechen */
.sec-beige {
  background: linear-gradient(180deg, var(--creme-2), var(--sand));
  border-radius: var(--r-xl);
  margin: .6rem auto;
  width: min(100% - 1.5rem, 1420px);
  box-shadow: var(--innen);
}
.sec-graphit {
  background:
    radial-gradient(700px 380px at 18% 0%, rgba(255,196,128,.16), transparent 60%),
    linear-gradient(165deg, #23262C, #15171A);
  color: #E9E6E0;
  border-radius: var(--r-xl);
  margin: .6rem auto;
  width: min(100% - 1.5rem, 1420px);
  box-shadow: var(--schatten-3);
}
.sec-graphit h2, .sec-graphit h3, .sec-graphit h4 { color: #fff; }
.sec-graphit p, .sec-graphit .lead { color: #B9B5AD; }
.sec-graphit .eyebrow { color: #CFCBC3; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }
.sec-graphit .liste-haken li { color: #D6D2CB; }

.grid { display: grid; gap: 1.5rem; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.split {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 4.5vw, 4rem); align-items: center;
}

.kopf {
  max-width: 64ch;
  margin: 0 auto clamp(2.2rem, 4vw, 3.4rem);
  text-align: center;
}
.kopf .lead { margin-inline: auto; }
.kopf .eyebrow { margin-inline: auto; }

/* ---------- Knoepfe ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 54px;
  padding: 0 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--r-max);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .99rem;
  letter-spacing: -.015em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease,
              background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn svg { flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Lichtstreifen, der beim Zeigen ueber den Knopf laeuft */
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,.30) 48%, transparent 62%);
  transform: translateX(-130%);
  transition: transform .68s cubic-bezier(.3,.7,.3,1);
  pointer-events: none;
  z-index: 2;
}
.btn:hover::after { transform: translateX(130%); }

.btn-primar {
  background: linear-gradient(165deg, #2B2E35, #16181C);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 12px 30px -12px rgba(25,27,31,.75);
}
.btn-primar:hover { color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 20px 44px -14px rgba(25,27,31,.8); }

.btn-geist {
  background: rgba(255,255,255,.7);
  color: var(--tinte);
  border-color: var(--linie-2);
  box-shadow: var(--schatten-1);
}
.btn-geist:hover { color: var(--tinte); border-color: var(--tinte); box-shadow: var(--schatten-2); }

.btn-pikett {
  background: linear-gradient(165deg, #F0584A, var(--signal-2));
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 14px 34px -12px var(--signal-licht);
}
.btn-pikett:hover { color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 22px 48px -14px var(--signal-licht); }

.btn-wa {
  background: linear-gradient(165deg, #2FE076, #1FAE68);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 14px 34px -12px var(--wa-licht);
}
.btn-wa:hover { color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.34) inset, 0 22px 48px -14px var(--wa-licht); }

.btn-hell { background: #fff; color: var(--tinte); box-shadow: var(--schatten-2); }
.btn-hell:hover { color: var(--tinte); }

.btn-gross { min-height: 62px; font-size: 1.06rem; padding: 0 2.1rem; }
.btn-block { display: flex; width: 100%; }

.btn-reihe { display: flex; flex-wrap: wrap; gap: .85rem; }

/* ---------- Kopfbereich ---------- */

.kopfzeile {
  position: sticky; top: 0; z-index: 60;
  background: rgba(252,251,248,.96);
  border-bottom: 1px solid var(--linie);
}
.kopfzeile .wrap { display: flex; align-items: center; gap: 1.2rem; min-height: 76px; }

.marke { display: flex; align-items: center; flex: none; text-decoration: none; color: var(--tinte); }
.marke-logo { display: block; height: 56px; width: auto; background: #fff; border-radius: 8px; }
.marke-fuss .marke-logo { height: 64px; background: #fff; padding: .45rem .7rem; border-radius: 12px; box-sizing: content-box; }

.nav { margin-left: auto; display: flex; align-items: center; }
.nav ul { list-style: none; display: flex; align-items: center; gap: .1rem; margin: 0; padding: 0; flex-wrap: wrap; }
.nav .nav-el > a, .nav .nav-el > button {
  display: inline-flex; align-items: center; gap: .32rem;
  background: none; border: 0; cursor: pointer;
  font-family: var(--f-text); font-size: .95rem; font-weight: 600;
  letter-spacing: -.01em;
  color: var(--tinte); text-decoration: none;
  padding: .55rem .85rem; border-radius: var(--r-max);
  transition: background-color .16s ease, color .16s ease;
}
.nav .nav-el > a:hover, .nav .nav-el > button:hover { background: rgba(25,27,31,.06); }
.nav-el { position: relative; }
.nav-el[aria-current="true"] > a, .nav-el[aria-current="true"] > button {
  background: rgba(25,27,31,.07);
}

.klapp {
  position: absolute; top: calc(100% + .55rem); left: 0;
  min-width: 320px;
  background: rgba(255,255,255,.94);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  box-shadow: var(--schatten-3);
  padding: .55rem;
  display: none;
}
.nav-el.offen .klapp { display: block; }
.klapp a {
  display: block; padding: .6rem .8rem; border-radius: var(--r-s);
  color: var(--tinte); text-decoration: none; font-size: .94rem; font-weight: 600;
  transition: background-color .14s ease;
}
.klapp a small { display: block; font-weight: 400; color: var(--tinte-2); font-size: .8rem; letter-spacing: 0; }
.klapp a:hover { background: rgba(25,27,31,.05); }

.nav-cta { margin-left: .6rem; }

.burger {
  display: none; margin-left: auto;
  background: rgba(255,255,255,.7); border: 1px solid var(--linie-2);
  border-radius: var(--r-max);
  width: 48px; height: 48px; cursor: pointer;
  align-items: center; justify-content: center;
  box-shadow: var(--schatten-1);
}

/* ---------- Hero ---------- */

.hero { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(2.6rem, 5vw, 4.2rem); text-align: center; }
.hero h1 { max-width: 16ch; margin-inline: auto; }
.hero .lead { max-width: 58ch; margin-inline: auto; }
.hero .eyebrow { margin-inline: auto; }
.hero .btn-reihe { justify-content: center; }
.hero .wrap-schmal > p, .hero .wrap > p { margin-inline: auto; }
.hero-artikel { text-align: left; }
.hero-artikel h1, .hero-artikel .lead, .hero-artikel p { margin-inline: 0; }
.hero-artikel .btn-reihe { justify-content: flex-start; }
.artikel h2 { margin-top: 2.2rem; }
.artikel h2:first-child { margin-top: 0; }

/* ---------- Videowand ---------- */

.videowand {
  display: grid;
  grid-template-columns: 190px 1fr 190px;
  gap: 1.2rem;
  margin: clamp(2rem, 3.5vw, 3rem) 0;
  align-items: start;
  text-align: left;
}
.videowand-spalte { display: grid; gap: 1.2rem; }

.vid {
  display: block; width: 100%;
  background: none; border: 0; padding: 0;
  text-align: left; cursor: pointer;
  transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
.vid:hover { transform: translateY(-3px); }

.vid-flaeche {
  position: relative; display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 30% 10%, rgba(255,255,255,.75), transparent 60%),
    linear-gradient(160deg, var(--sand), var(--sand-2));
  box-shadow: var(--schatten-1), inset 0 0 0 1px var(--linie);
  transition: box-shadow .22s ease;
}
.vid:hover .vid-flaeche { box-shadow: var(--schatten-2), inset 0 0 0 1px var(--linie-2); }
.vid[aria-pressed="true"] .vid-flaeche { box-shadow: 0 0 0 2px var(--tinte), var(--schatten-2); }

.vid-haupt .vid-flaeche { border-radius: var(--r-l); }

.play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.94);
  display: grid; place-items: center;
  color: var(--tinte);
  box-shadow: 0 10px 26px -8px rgba(25,27,31,.45), 0 0 0 8px rgba(255,255,255,.28);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease;
}
.vid:hover .play { transform: translate(-50%,-50%) scale(1.08); box-shadow: 0 14px 34px -8px rgba(25,27,31,.5), 0 0 0 12px rgba(255,255,255,.34); }
.vid-haupt .play { width: 84px; height: 84px; }

.vid-dauer {
  position: absolute; right: .6rem; bottom: .6rem;
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .03em;
  background: rgba(25,27,31,.72); color: #fff;
  padding: .22rem .5rem; border-radius: var(--r-max);
}
.vid-haupt .vid-dauer { right: 1rem; bottom: 1rem; font-size: .76rem; padding: .3rem .7rem; }

.vid-marke {
  position: absolute; left: 1rem; bottom: 1rem;
  font-family: var(--f-display); font-weight: 700; font-size: .92rem;
  letter-spacing: -.02em;
  background: rgba(255,255,255,.92); color: var(--tinte);
  padding: .42rem .95rem; border-radius: var(--r-max);
  box-shadow: var(--schatten-1);
}

.vid-titel {
  display: block;
  margin-top: .65rem;
  font-size: .84rem; font-weight: 600; line-height: 1.35;
  color: var(--tinte); letter-spacing: -.012em;
}
.vid-titel small { display: block; font-weight: 400; color: var(--tinte-2); font-size: .76rem; margin-top: .12rem; }

/* Startseite: ein einzelnes Hauptvideo im Hochformat */
.videowand-solo { grid-template-columns: 1fr; justify-items: center; }
.vid-hochkant { width: min(100%, 360px); cursor: default; }
.vid-hochkant:hover { transform: none; }
.vid-hochkant .vid-flaeche { aspect-ratio: 478 / 850; background: var(--tinte); }
.vid-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vid-hochkant .play { border: 0; padding: 0; cursor: pointer; z-index: 2; }
.vid-hochkant .play[hidden] { display: none; }

/* Eigene Steuerleiste: Pause, 10 s zurueck/vor, Zeitleiste, Ton */
.vid-steuerung {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: grid; gap: .35rem;
  padding: 2.2rem .8rem .7rem;
  background: linear-gradient(180deg, transparent, rgba(15,16,19,.78));
  color: #fff;
}
.vid-knoepfe { display: flex; align-items: center; gap: .3rem; }
.vid-knoepfe button {
  display: inline-flex; align-items: center; justify-content: center; gap: .15rem;
  min-width: 34px; height: 34px; padding: 0 .45rem;
  border: 0; border-radius: var(--r-max);
  background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
  transition: background .2s ease;
}
.vid-knoepfe button:hover { background: rgba(255,255,255,.28); }
.vid-knoepfe button:focus-visible, .vid-zeitleiste:focus-visible { outline: 2px solid var(--werk-gelb); outline-offset: 2px; }
.vid-knoepfe small { font-family: var(--f-mono); font-size: .62rem; }
.vid-uhr { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .02em; opacity: .9; margin-left: .2rem; white-space: nowrap; }
.vid-knoepfe .vid-ton { margin-left: auto; }
.vid-zeitleiste {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; margin: 0; border-radius: 4px; cursor: pointer;
  background: linear-gradient(90deg, var(--werk-gelb) var(--fortschritt, 0%), rgba(255,255,255,.3) var(--fortschritt, 0%));
}
.vid-zeitleiste::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 0; }
.vid-zeitleiste::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 0; }

/* Hero der Startseite: Text links, Video rechts — so steht das Video oben */
@media (min-width: 1001px) {
  .hero-raster {
    display: grid; grid-template-columns: minmax(0, 1fr) 340px;
    gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center;
    text-align: left;
  }
  .hero-raster .hero-text h1 { margin-inline: 0; max-width: none; font-size: clamp(2.6rem, 4.3vw, 4.1rem); }
  .hero-raster .hero-text .lead { margin-inline: 0; }
  .hero-raster .hero-text .eyebrow { margin-inline: 0; max-width: none; }
  .hero-raster .hero-text .btn-reihe { justify-content: flex-start; }
  .hero-raster .videowand { margin: 0; }
}

/* Mobil: Video direkt unter dem Einleitungstext, Knoepfe darunter */
@media (max-width: 1000px) {
  .hero-raster { display: flex; flex-direction: column; align-items: center; }
  .hero-raster .hero-text { display: contents; }
  .hero-raster .videowand { order: 1; margin: 1.6rem 0 0; width: 100%; }
  .hero-raster .btn-reihe { order: 2; margin-top: 1.6rem; }
}

/* Platzhalter: Video folgt */
.vid-folgt { cursor: default; }
.vid-folgt:hover { transform: none; }
.vid-folgt .vid-flaeche { display: grid; place-items: center; }
.vid-folgt .vid-flaeche > span {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinte-3);
}

.vertrauen {
  display: flex; flex-wrap: wrap; gap: .6rem;
  justify-content: center;
  margin-top: 2.2rem;
}
.vertrauen span {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--f-mono); font-size: .74rem; color: var(--tinte-2);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--linie);
  border-radius: var(--r-max);
  padding: .42rem .95rem;
  box-shadow: var(--schatten-1);
}
.stern { color: var(--gold); letter-spacing: -.1em; }

/* ---------- Karten ---------- */

.karte {
  background: rgba(255,255,255,.82);
  border: 1px solid var(--linie);
  border-radius: var(--r-l);
  padding: 1.7rem;
  display: flex; flex-direction: column; gap: .45rem;
  box-shadow: var(--schatten-1), var(--innen);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .22s ease;
}
.karte h3 { margin-bottom: .25rem; }
.karte p { font-size: .96rem; color: var(--tinte-2); margin-bottom: .7rem; }
.karte .karte-mehr {
  margin-top: auto; font-weight: 700; font-size: .93rem; text-decoration: none;
  color: var(--tinte); font-family: var(--f-display); letter-spacing: -.02em;
}
.karte .karte-mehr::after { content: " →"; transition: margin-left .2s ease; display: inline-block; }
a.karte { text-decoration: none; color: inherit; }
a.karte:hover, .karte:hover { transform: translateY(-4px); box-shadow: var(--schatten-2), var(--innen); border-color: var(--linie-2); }
a.karte:hover .karte-mehr::after { margin-left: .28rem; }

.sec-graphit .karte { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.sec-graphit .karte p { color: #B9B5AD; }
.sec-graphit .karte .karte-mehr, .sec-graphit .karte h3 { color: #fff; }

.karte-bild { border-radius: var(--r); margin-bottom: 1rem; }

/* Bildplatz mit Angabe des vorgesehenen Motivs */
.bildplatz {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--r);
  background:
    radial-gradient(120% 90% at 30% 10%, rgba(255,255,255,.7), transparent 62%),
    linear-gradient(160deg, var(--sand), var(--sand-2));
  box-shadow: inset 0 0 0 1px var(--linie);
  display: grid; place-items: center;
  text-align: center; padding: 1rem;
  overflow: hidden;
}
.bildplatz span {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .06em;
  color: var(--tinte-3); max-width: 92%;
}
.bildplatz.mit-foto { padding: 0; background: var(--sand); }
.bildplatz.mit-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Galerie: Fotos oeffnen gross in einer Ansicht */
.galerie-bild { display: block; cursor: zoom-in; }
/* Leistungsseiten: weitere Projektfotos unter dem Hauptfoto */
.foto-reihe { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-top: .6rem; }
.foto-reihe .bildplatz { aspect-ratio: 1; }
.galerie-bild img { transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.galerie-bild:hover img { transform: scale(1.04); }
.galerie-bild .galerie-ort {
  position: absolute; left: .6rem; bottom: .6rem; z-index: 1;
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: .04em;
  background: rgba(25,27,31,.72); color: #fff;
  padding: .22rem .55rem; border-radius: var(--r-max);
}
.leuchtkasten {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: rgba(15,16,19,.92);
  padding: 3.5rem 4.5rem;
}
.leuchtkasten[hidden] { display: none; }
.leuchtkasten img { max-width: 100%; max-height: calc(100vh - 7rem); border-radius: var(--r); box-shadow: var(--schatten-3); }
.leuchtkasten button {
  position: absolute; border: 0; cursor: pointer;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff;
  display: grid; place-items: center;
}
.leuchtkasten button:hover { background: rgba(255,255,255,.28); }
.lk-zu { top: 1rem; right: 1rem; }
.lk-zurueck { left: 1rem; top: 50%; transform: translateY(-50%); }
.lk-vor { right: 1rem; top: 50%; transform: translateY(-50%); }
.lk-text { position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.8); font-family: var(--f-mono); font-size: .75rem; }
@media (max-width: 700px) {
  .leuchtkasten { padding: 3.5rem .75rem; }
  .lk-zurueck, .lk-vor { top: auto; bottom: .6rem; transform: none; }
}

/* ---------- Schritte ---------- */

.schritte { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.schritt {
  background: rgba(255,255,255,.7);
  border: 1px solid var(--linie);
  border-radius: var(--r-l);
  padding: 1.6rem;
  box-shadow: var(--schatten-1), var(--innen);
}
.schritt-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  font-family: var(--f-mono); font-size: .78rem;
  color: var(--signal);
  background: rgba(225,68,52,.1);
  box-shadow: 0 0 0 1px rgba(225,68,52,.2), 0 0 20px -6px var(--signal-licht);
  margin-bottom: .9rem;
}
.schritt h3 { font-size: 1.2rem; }
.schritt p { font-size: .96rem; color: var(--tinte-2); margin: 0; }

.sec-graphit .schritt, .notfall .schritt {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
}
.sec-graphit .schritt p { color: #B9B5AD; }
.notfall .schritt-nr { color: #fff; background: rgba(255,255,255,.16); box-shadow: 0 0 0 1px rgba(255,255,255,.28); }
.notfall .schritt p { color: rgba(255,255,255,.88); }

/* ---------- Datenkarte ---------- */

.typenschild {
  position: relative;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.9), transparent 62%),
    linear-gradient(165deg, #FAF7F1, #EEE6D9);
  border: 1px solid var(--linie);
  border-radius: var(--r-l);
  padding: 1.8rem;
  font-family: var(--f-mono);
  font-size: .84rem;
  color: var(--tinte);
  box-shadow: var(--schatten-2), var(--innen);
}
.ts-kopf {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--linie);
  padding-bottom: .8rem; margin-bottom: 1rem;
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-3);
}
.ts-kopf span:first-child { display: inline-flex; align-items: center; gap: .5rem; }
.ts-kopf span:first-child::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--wasser); box-shadow: 0 0 0 3px rgba(34,108,136,.18);
}
.ts-zeile { display: grid; grid-template-columns: 118px 1fr; gap: .8rem; padding: .34rem 0; }
.ts-zeile dt { color: var(--tinte-3); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.ts-zeile dd { margin: 0; font-weight: 500; }
dl.typenschild-liste { margin: 0; }

a.ts-karte { text-decoration: none; display: block; transition: transform .22s cubic-bezier(.2,.7,.3,1); }
a.ts-karte:hover { transform: translateY(-4px); }
a.ts-karte h3 { color: var(--tinte); }

/* ---------- Zitat und Bewertungen ---------- */

.zitat {
  position: relative;
  padding: 1.6rem 1.8rem;
  border-radius: var(--r-l);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--linie);
  box-shadow: var(--schatten-1), var(--innen);
  font-size: clamp(1.08rem, 1.9vw, 1.3rem);
  font-family: var(--f-display); font-weight: 700; letter-spacing: -.025em;
  line-height: 1.38;
  margin: 1.6rem 0;
}
.zitat::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%;
  width: 3px; border-radius: var(--r-max);
  background: linear-gradient(180deg, var(--signal), transparent);
}
.zitat cite {
  display: block; font-family: var(--f-text); font-style: normal; font-weight: 400;
  font-size: .9rem; color: var(--tinte-2); margin-top: .8rem; letter-spacing: 0;
}

.bewertung {
  background: rgba(255,255,255,.82);
  border: 1px solid var(--linie);
  border-radius: var(--r-l);
  padding: 1.5rem;
  box-shadow: var(--schatten-1), var(--innen);
  margin: 0;
}
.bewertung p { font-size: .95rem; margin-bottom: .9rem; color: var(--tinte-2); }
.bewertung footer { font-family: var(--f-mono); font-size: .72rem; color: var(--tinte-3); }

/* ---------- Merkmale ---------- */

.merkmal { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; align-items: start; }
.merkmal-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  font-family: var(--f-mono); font-size: .74rem; color: var(--signal);
  background: rgba(225,68,52,.1);
  box-shadow: 0 0 0 1px rgba(225,68,52,.2), 0 0 20px -6px var(--signal-licht);
}
.merkmal h3 { font-size: 1.12rem; margin-bottom: .3rem; }
.merkmal p { font-size: .95rem; color: var(--tinte-2); margin: 0; }
.sec-graphit .merkmal p { color: #B9B5AD; }
.sec-graphit .merkmal-nr { color: #FFB3A8; background: rgba(225,68,52,.2); box-shadow: 0 0 0 1px rgba(225,68,52,.35); }

.liste-haken { list-style: none; padding: 0; margin: 0 0 1.3rem; }
.liste-haken li { position: relative; padding-left: 1.9rem; margin-bottom: .6rem; font-size: .99rem; }
.liste-haken li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 15px; height: 15px; border-radius: 50%;
  background: rgba(225,68,52,.12);
  box-shadow: inset 0 0 0 1px rgba(225,68,52,.3);
}
.liste-haken li::after {
  content: ""; position: absolute; left: 5px; top: .72em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--signal);
}
.liste-haken.blau li::before { background: rgba(34,108,136,.12); box-shadow: inset 0 0 0 1px rgba(34,108,136,.3); }
.liste-haken.blau li::after { background: var(--wasser); }

/* ---------- FAQ ---------- */

.faq { display: grid; gap: .7rem; }
.faq details {
  background: rgba(255,255,255,.78);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  box-shadow: var(--schatten-1), var(--innen);
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.faq details[open] { box-shadow: var(--schatten-2), var(--innen); }
.faq summary {
  cursor: pointer; padding: 1.15rem 3.4rem 1.15rem 1.4rem; position: relative;
  font-family: var(--f-display); font-weight: 700; font-size: 1.03rem; letter-spacing: -.025em;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: 1rem; color: var(--signal);
  background: rgba(225,68,52,.1);
}
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 1.4rem 1.3rem; margin: 0; color: var(--tinte-2); }

/* ---------- Formular ---------- */

.feld { display: block; margin-bottom: 1.05rem; }
/* Unsichtbares Feld gegen Spam-Bots (Menschen sehen und fuellen es nicht) */
.hp-feld { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.feld > span { display: block; font-size: .87rem; font-weight: 600; margin-bottom: .4rem; }
.feld input, .feld select, .feld textarea {
  width: 100%; font: inherit; font-size: 1rem;
  padding: .82rem 1rem;
  border: 1px solid var(--linie-2);
  border-radius: var(--r-s);
  background: rgba(255,255,255,.85);
  color: var(--tinte);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.feld textarea { min-height: 130px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  border-color: var(--wasser); outline: none; box-shadow: 0 0 0 4px rgba(34,108,136,.14);
}
.hinweis-klein { font-size: .85rem; color: var(--tinte-2); }

.feld-offen {
  display: inline-block; min-width: 9ch;
  border-bottom: 1px dashed var(--linie-2);
  color: var(--tinte-3); font-family: var(--f-mono); font-size: .88em;
}

/* ---------- Notfall-Abschnitt ---------- */

.notfall {
  background:
    radial-gradient(700px 400px at 80% 0%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(160deg, #E7503F, #B5321F);
  color: #fff;
  border-radius: var(--r-xl);
  margin: .6rem auto;
  width: min(100% - 1.5rem, 1420px);
  box-shadow: 0 40px 90px -40px var(--signal-licht);
}
.notfall h1, .notfall h2, .notfall h3 { color: #fff; }
.notfall p, .notfall .lead { color: rgba(255,255,255,.9); }
.notfall .eyebrow { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.24); }
.notfall .eyebrow::before { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.3); }
.notfall .karte { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); box-shadow: none; }
.notfall .karte h3, .notfall .karte p { color: #fff; }
.notfall .liste-haken li::before { background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.notfall .liste-haken li::after { background: #fff; }
.notfall .tabelle th, .notfall .tabelle td { border-color: rgba(255,255,255,.18); color: #fff; }

/* ---------- Fussbereich ---------- */

.fuss {
  background: linear-gradient(165deg, #23262C, #131518);
  color: #A9A59D;
  padding: clamp(3.2rem,5vw,4.8rem) 0 1.8rem;
  font-size: .94rem;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  margin: clamp(2rem,4vw,3.5rem) auto 0;
  width: min(100% - 1.5rem, 1420px);
}
.fuss h4 {
  color: #fff; font-size: .72rem; font-family: var(--f-mono); font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1rem;
}
.fuss a { color: #D2CEC7; text-decoration: none; }
.fuss a:hover { color: #fff; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin-bottom: .5rem; }
@media (max-width: 880px) {
  .fuss li { margin-bottom: 0; }
  .fuss li a { display: inline-block; padding: .5rem 0; }
}
.fuss-raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.2rem; }
.fuss-unten {
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 3rem; padding-top: 1.4rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between;
  font-size: .84rem;
}
.fuss-notfall {
  border: 1px solid rgba(225,68,52,.4);
  background: rgba(225,68,52,.12);
  padding: 1rem 1.2rem; border-radius: var(--r); margin-top: 1.4rem;
  box-shadow: 0 0 30px -12px var(--signal-licht);
}
.fuss-notfall strong { color: #fff; display: block; font-family: var(--f-display); letter-spacing: -.02em; margin-bottom: .2rem; }

/* ---------- Schwebendes WhatsApp-Icon ---------- */

.wa-schwebend {
  position: fixed; right: 1.4rem; bottom: 1.6rem; z-index: 85;
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #2FE076, #17A05C);
  color: #fff;
  box-shadow: 0 10px 30px -8px var(--wa-licht), inset 0 0 0 1px rgba(255,255,255,.22);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease;
}
.wa-schwebend:hover { transform: scale(1.07); color: #fff; box-shadow: 0 16px 40px -8px var(--wa-licht), inset 0 0 0 1px rgba(255,255,255,.3); }
.wa-schwebend svg { position: relative; z-index: 2; }

/* Leuchtender Ring, der langsam nach aussen laeuft */
.wa-schwebend::before,
.wa-schwebend::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--wa); opacity: .45;
  animation: leuchtring 2.6s cubic-bezier(.25,.6,.35,1) infinite;
  z-index: 1;
}
.wa-schwebend::after { animation-delay: 1.3s; }
@keyframes leuchtring {
  0%   { transform: scale(1);    opacity: .45; }
  70%  { transform: scale(1.75); opacity: 0; }
  100% { transform: scale(1.75); opacity: 0; }
}

.wa-hinweis {
  position: absolute; right: 74px; top: 50%; transform: translateY(-50%);
  white-space: nowrap;
  background: rgba(25,27,31,.92); color: #fff;
  font-size: .82rem; font-weight: 600;
  padding: .5rem .9rem; border-radius: var(--r-max);
  box-shadow: var(--schatten-2);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 3;
}
.wa-schwebend:hover .wa-hinweis { opacity: 1; transform: translateY(-50%) translateX(-4px); }

/* ---------- Mobile Aktionsleiste ---------- */

.mobilleiste {
  position: fixed; left: .8rem; right: .8rem; bottom: .8rem; z-index: 70;
  display: none; gap: .5rem;
  background: rgba(252,251,248,.97);
  border: 1px solid var(--linie);
  border-radius: var(--r-max);
  padding: .45rem;
  box-shadow: var(--schatten-3);
}
.mobilleiste a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .45rem;
  text-decoration: none;
  font-size: .88rem; font-weight: 700; font-family: var(--f-display); letter-spacing: -.02em;
  border-radius: var(--r-max);
  min-height: 50px;
}
.mobilleiste .ml-pikett { background: linear-gradient(160deg, #F0584A, var(--signal-2)); color: #fff; box-shadow: 0 8px 22px -10px var(--signal-licht); }
.mobilleiste .ml-termin { background: linear-gradient(165deg, #2B2E35, #16181C); color: #fff; }
.mobilleiste .ml-wa { background: linear-gradient(160deg, #2BD46C, #128C4A); color: #fff; }
/* Am Handy steckt WhatsApp in der Leiste -- der schwebende Knopf wuerde Inhalte verdecken */
@media (max-width: 880px) { .wa-schwebend { display: none !important; } }
.mobilleiste a { white-space: nowrap; padding: 0 .4rem; }
@media (max-width: 400px) { .mobilleiste a { font-size: .8rem; gap: .3rem; } .mobilleiste { gap: .35rem; } }
@media (max-width: 340px) { .mobilleiste a svg { display: none; } }

/* ---------- Kurzmeldung ---------- */

.meldung {
  position: fixed; left: 50%; bottom: 110px; transform: translate(-50%, 14px);
  z-index: 90; max-width: min(92vw, 440px);
  background: rgba(25,27,31,.96); color: #fff;
  border-radius: var(--r);
  padding: 1rem 1.2rem;
  font-size: .92rem; line-height: 1.45;
  box-shadow: var(--schatten-3);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.meldung.sichtbar { opacity: 1; transform: translate(-50%, 0); }
.meldung b { display: block; font-family: var(--f-display); font-weight: 700; margin-bottom: .25rem; letter-spacing: -.02em; }

/* ---------- Hilfsklassen ---------- */

.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.zentriert { text-align: center; margin-inline: auto; }
.zentriert .btn-reihe, .zentriert .eyebrow { justify-content: center; }
.zentriert p { margin-inline: auto; }
.nur-lesbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a.nur-lesbar:focus {
  position: fixed; top: .8rem; left: .8rem; z-index: 100;
  width: auto; height: auto; overflow: visible; clip: auto;
  background: var(--tinte); color: #fff;
  font-weight: 700; text-decoration: none;
  padding: .75rem 1.3rem; border-radius: var(--r-max);
  box-shadow: var(--schatten-2);
}

.tabelle { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .95rem; }
.tabelle th, .tabelle td { text-align: left; padding: .85rem .8rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle th { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-3); font-weight: 400; }
.tabelle tr:last-child td { border-bottom: 0; }

.rohr { height: 1px; background: var(--linie); border: 0; margin: 0; }

/* ---------- Responsiv ---------- */

@media (max-width: 1000px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .fuss-raster { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
  .nav {
    display: block; position: absolute; top: calc(100% + .5rem); left: .8rem; right: .8rem;
    background: rgba(255,255,255,.97);
    border: 1px solid var(--linie);
    border-radius: var(--r-l);
    box-shadow: var(--schatten-3);
    padding: 1rem 1.1rem 1.3rem;
    max-height: calc(100vh - 140px); overflow: auto;
    opacity: 0; visibility: hidden;
    transform: translateY(-12px) scale(.98);
    transform-origin: top center;
    pointer-events: none;
    transition: opacity .28s ease, transform .32s cubic-bezier(.2,.8,.3,1), visibility 0s linear .32s;
  }
  .nav.offen {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    transition: opacity .28s ease, transform .32s cubic-bezier(.2,.8,.3,1);
  }
  .nav ul { display: block; }
  .nav .nav-el > a, .nav .nav-el > button { width: 100%; justify-content: space-between; padding: .85rem 1rem; font-size: 1.04rem; }
  .nav .klapp { position: static; display: none; box-shadow: none; border: 0; border-radius: 0; margin: 0 0 .5rem 1rem; min-width: 0; background: none; padding: 0; }
  .nav .nav-el.offen .klapp { display: block; }
  .nav .nav-cta { margin: .9rem 0 0; }
  .nav .nav-cta .btn { width: 100%; }
  .burger { display: flex; }
  .kopfzeile { position: relative; }

  .split, .g2, .g3 { grid-template-columns: 1fr; }
  .videowand { grid-template-columns: 1fr; }
  .videowand > .vid-haupt { order: 1; }
  .videowand > .videowand-spalte { order: 2; }
  .videowand > .videowand-spalte-2 { order: 3; }
  /* Kleine Videos als sauberes Zweierraster — nichts wird angeschnitten */
  .videowand-spalte { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .videowand-spalte .vid-titel { font-size: .8rem; }
  .videowand-spalte .vid-titel small { font-size: .72rem; }

  .mobilleiste { display: flex; }
  body { padding-bottom: 84px; }
  .wa-schwebend { bottom: 88px; right: 1rem; width: 56px; height: 56px; }
  .wa-hinweis { display: none; }

  .pikett-status { display: none; }
  .sec-beige, .sec-graphit, .notfall { border-radius: var(--r-l); width: min(100% - 1rem, 1420px); }
  .fuss { border-radius: var(--r-l) var(--r-l) 0 0; width: min(100% - 1rem, 1420px); }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .marke-logo { height: 48px; }
  .g4, .fuss-raster { grid-template-columns: 1fr; }
  .pikett-aktionen { gap: .4rem; font-size: .85rem; }
  .pikett-label { font-size: .88rem; }
  .karte, .schritt, .typenschild { padding: 1.35rem; }
  .btn { padding: 0 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .puls::after { animation: none; opacity: .35; transform: scale(2.2); }
  .wa-schwebend::before, .wa-schwebend::after { animation: none; opacity: .2; transform: scale(1.3); }
  .btn::after { display: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

@media print {
  .pikettleiste, .kopfzeile, .mobilleiste, .wa-schwebend, .meldung { display: none; }
  body::before { display: none; }
}


/* ==========================================================================
   Ergaenzungen: Kopf-Aktionen, Zurueck, CTA-Streifen, Referenzzeilen,
   Leistungszeichen, Team, Terminkarten
   ========================================================================== */

/* ---------- Zwei Aktionsknoepfe in der Kopfzeile ---------- */

.kopf-aktionen { display: flex; align-items: center; gap: .5rem; margin-left: .7rem; }
.kopf-aktionen .btn { white-space: nowrap; }
/* Schmalere Bildschirme: Knopf kuerzer, Menuepunkte enger -- alles bleibt einzeilig */
@media (min-width: 881px) and (max-width: 1240px) {
  .nav .nav-el > a, .nav .nav-el > button { padding-inline: .55rem; font-size: .9rem; }
  .kopf-aktionen { margin-left: .4rem; }
  .kopf-aktionen .btn-klein { padding: 0 .85rem; font-size: .84rem; }
}
@media (min-width: 881px) and (max-width: 1060px) {
  .kopf-aktionen .btn-klein svg { display: none; }
  .kopf-aktionen .btn-klein { padding: 0 .7rem; }
  .kopfzeile .wrap { gap: .6rem; }
  .marke-logo { height: 46px; }
}

.btn-klein { min-height: 44px; padding: 0 1.1rem; font-size: .9rem; }

/* Pikett-Knopf mit ruhig atmendem Leuchtkranz */
.btn-leuchtet { position: relative; }
.btn-leuchtet::before {
  content: "";
  position: absolute; inset: -3px;
  border-radius: var(--r-max);
  background: var(--signal);
  opacity: .5;
  z-index: -1;
  animation: kranz 2.6s cubic-bezier(.25,.6,.35,1) infinite;
}
@keyframes kranz {
  0%   { transform: scale(.97); opacity: .5; }
  70%  { transform: scale(1.14); opacity: 0; }
  100% { transform: scale(1.14); opacity: 0; }
}
.btn-leuchtet.btn-dunkel::before { background: var(--tinte); opacity: .32; }

/* ---------- Zurueck ---------- */

.zurueck {
  display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(255,255,255,.8);
  border: 1px solid var(--linie-2);
  border-radius: var(--r-max);
  padding: .6rem 1.25rem .6rem 1rem;
  font-family: var(--f-display); font-weight: 700; font-size: .9rem;
  letter-spacing: -.02em;
  color: var(--tinte); text-decoration: none;
  box-shadow: var(--schatten-1);
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, border-color .18s ease;
  margin-bottom: 1.6rem;
}
.zurueck:hover { color: var(--tinte); transform: translateX(-3px); box-shadow: var(--schatten-2); border-color: var(--tinte); }
.zurueck svg { flex: none; }

/* ---------- Schmaler CTA-Streifen mitten im Text ---------- */

.cta-streifen {
  display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
  justify-content: space-between;
  background:
    radial-gradient(420px 200px at 12% 0%, rgba(255,196,128,.22), transparent 62%),
    linear-gradient(165deg, rgba(255,255,255,.9), rgba(247,243,236,.92));
  border: 1px solid var(--linie);
  border-radius: var(--r-l);
  padding: 1.6rem 1.9rem;
  box-shadow: var(--schatten-1), var(--innen);
  margin: clamp(2rem,4vw,3rem) auto;
  max-width: var(--breite);
}
.cta-streifen-text { flex: 1 1 320px; }
.cta-streifen h3 { margin-bottom: .25rem; font-size: 1.28rem; }
.cta-streifen p { margin: 0; color: var(--tinte-2); font-size: .95rem; }
.cta-streifen .btn-reihe { flex: 0 0 auto; }

/* ---------- Referenzen im Wechsel ---------- */

.ref-zeile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
  padding: clamp(2.2rem, 4vw, 3.4rem) 0;
  border-bottom: 1px solid var(--linie);
}
.ref-zeile:last-child { border-bottom: 0; }
.ref-zeile:nth-child(even) .ref-bild { order: 2; }
.ref-nummer {
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinte-3);
  display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem;
}
.ref-nummer::after { content: ""; height: 1px; flex: 1; background: var(--linie-2); }
.ref-bild { position: relative; }
.ref-bild .bildplatz { aspect-ratio: 4 / 3; border-radius: var(--r-l); }
.ref-marken {
  display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0 1.3rem;
}
.ref-marken span {
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .04em;
  background: rgba(255,255,255,.8); border: 1px solid var(--linie);
  border-radius: var(--r-max); padding: .34rem .8rem; color: var(--tinte-2);
}

/* ---------- Leistungszeichen ---------- */

.zeichen {
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, rgba(255,255,255,.95), rgba(240,234,224,.9));
  box-shadow: inset 0 0 0 1px var(--linie), var(--schatten-1);
  color: var(--tinte);
  margin-bottom: 1.1rem;
}
.zeichen svg { display: block; }
.karte:hover .zeichen { box-shadow: inset 0 0 0 1px var(--linie-2), var(--schatten-2); }

/* ---------- Team ---------- */

.team-raster {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.team-kopf {
  display: flex; align-items: center; gap: .9rem;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--linie);
  border-radius: var(--r-max);
  padding: .55rem .55rem .55rem .6rem;
  box-shadow: var(--schatten-1), var(--innen);
}
.team-bild {
  width: 52px; height: 52px; flex: none; border-radius: 50%;
  background: linear-gradient(160deg, var(--sand), var(--sand-2));
  box-shadow: inset 0 0 0 1px var(--linie);
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: .78rem; color: var(--tinte-3);
}
.team-name { font-weight: 700; font-size: .93rem; letter-spacing: -.02em; line-height: 1.25; }
.team-rolle { font-size: .78rem; color: var(--tinte-2); }

/* ---------- Terminkarten ---------- */

.termin-karte {
  display: flex; flex-direction: column; gap: .5rem;
  background: rgba(255,255,255,.85);
  border: 1px solid var(--linie);
  border-radius: var(--r-l);
  padding: 1.7rem;
  box-shadow: var(--schatten-1), var(--innen);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease;
}
.termin-karte:hover { transform: translateY(-4px); box-shadow: var(--schatten-2), var(--innen); }
.termin-dauer {
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wasser); background: rgba(34,108,136,.09);
  border-radius: var(--r-max); padding: .3rem .75rem; align-self: flex-start;
  margin-bottom: .4rem;
}
.termin-karte p { font-size: .95rem; color: var(--tinte-2); flex: 1; }
.termin-karte .btn { margin-top: .4rem; }

@media (max-width: 880px) {
  .ref-zeile { grid-template-columns: 1fr; }
  .ref-zeile:nth-child(even) .ref-bild { order: 0; }
  .kopf-aktionen { display: none; }
  .nav .kopf-aktionen { display: flex; flex-direction: column; margin: .9rem 0 0; }
  .nav .kopf-aktionen .btn { width: 100%; }
  .cta-streifen { padding: 1.4rem; }
  .cta-streifen .btn-reihe { width: 100%; }
  .cta-streifen .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-leuchtet::before { animation: none; opacity: .25; transform: scale(1.04); }
}

/* ==========================================================================
   Ergaenzungen 2: Live-Chip, Partner-Band, Team-Karten
   ========================================================================== */

/* ---------- Live-Chip (ersetzt die rote Leiste) ---------- */

.eyebrow-live { color: var(--tinte); font-weight: 500; }
.eyebrow-live::before { animation: statuspuls 2.4s ease-out infinite; }
@keyframes statuspuls {
  0%   { box-shadow: 0 0 0 0 var(--signal-licht); }
  70%  { box-shadow: 0 0 0 9px rgba(225,68,52,0); }
  100% { box-shadow: 0 0 0 9px rgba(225,68,52,0); }
}

/* ---------- Partner-Band (Logos laufen nach links) ---------- */

.partner-bereich { margin-top: 2.6rem; }
.partner-titel {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinte-3);
  text-align: center; margin: 0 0 1.1rem; max-width: none;
}
.partner-band {
  overflow: hidden;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.partner-band::-webkit-scrollbar { display: none; }
.partner-spur {
  display: flex; align-items: center;
  gap: clamp(2.6rem, 5vw, 4.5rem);
  width: max-content;
  animation: laufband 30s linear infinite;
  padding-block: .4rem;
}
.partner-band:hover .partner-spur { animation-play-state: paused; }
@keyframes laufband { to { transform: translateX(-50%); } }

.partner-logo {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--f-display); font-weight: 800; font-size: 1.12rem;
  letter-spacing: -.02em; white-space: nowrap;
  color: var(--tinte-3);
  filter: grayscale(1);
  opacity: .8;
  transition: color .2s ease, opacity .2s ease;
}
.partner-logo:hover { color: var(--tinte-2); opacity: 1; }
.partner-logo svg { flex: none; opacity: .85; }
.partner-logo small {
  font-family: var(--f-mono); font-weight: 400; font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase; margin-left: .1rem;
}

@media (prefers-reduced-motion: reduce) {
  /* Das Band laeuft bewusst weiter, nur halb so schnell — ein Rollbalken soll hier nie erscheinen */
  .partner-spur { animation-duration: 60s; }
  .eyebrow-live::before { animation: none; }
}

/* ---------- Team-Karten mit Zitat ---------- */

.team-raster-gross {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}
.team-karte {
  background: rgba(255,255,255,.85);
  border: 1px solid var(--linie);
  border-radius: var(--r-l);
  padding: 1.9rem 1.6rem 1.7rem;
  text-align: center;
  box-shadow: var(--schatten-1), var(--innen);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease;
  display: flex; flex-direction: column;
}
.team-karte:hover { transform: translateY(-4px); box-shadow: var(--schatten-2), var(--innen); }
.team-avatar {
  width: 88px; height: 88px; border-radius: 50%;
  margin: 0 auto 1.1rem;
  display: grid; place-items: center;
  background:
    radial-gradient(90% 90% at 30% 20%, rgba(255,255,255,.9), transparent 60%),
    linear-gradient(160deg, var(--sand), var(--sand-2));
  box-shadow: inset 0 0 0 1px var(--linie), var(--schatten-1);
  font-family: var(--f-display); font-weight: 800; font-size: 1.5rem;
  letter-spacing: -.03em; color: var(--tinte-2);
}
.team-karte h3 { font-size: 1.12rem; margin-bottom: .1rem; }
.team-karte .team-rolle {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--wasser);
  background: rgba(34,108,136,.08);
  border-radius: var(--r-max);
  padding: .28rem .75rem;
  align-self: center;
  margin: .35rem 0 .9rem;
}
.team-zitat {
  font-size: .92rem; line-height: 1.55; color: var(--tinte-2);
  font-style: italic;
  margin: 0;
  padding-top: .9rem;
  border-top: 1px solid var(--linie);
}
/* Ueber uns: nur die Geschaeftsfuehrung, eine grosse Karte */
.team-solo { grid-template-columns: minmax(0, 560px); justify-content: center; }
.team-solo .team-karte { padding: 2.4rem 2.2rem 2.2rem; }
.team-solo .team-avatar { width: 108px; height: 108px; font-size: 1.8rem; }
.team-solo .team-karte h3 { font-size: 1.35rem; }
.team-solo .team-zitat { font-size: 1.12rem; line-height: 1.6; color: var(--tinte); padding-top: 1.2rem; }

/* ==========================================================================
   Ergaenzungen 3: Responsive-Feinschliff
   ========================================================================== */

/* Ausklappmenue nie breiter als der Bildschirm */
.klapp { max-width: calc(100vw - 2rem); }

/* Lange deutsche Woerter in Titeln auf schmalen Bildschirmen trennen */
@media (max-width: 560px) {
  h1, h2 { hyphens: auto; overflow-wrap: break-word; }
}

/* Sehr kleine Geraete (iPhone SE, ältere Androids) */
@media (max-width: 400px) {
  h1 { font-size: 2.05rem; }
  h2 { font-size: 1.55rem; }
  .wrap, .wrap-schmal { width: calc(100% - 1.6rem); }
  .btn { min-height: 50px; padding: 0 1.15rem; font-size: .94rem; }
  .btn-gross { min-height: 56px; padding: 0 1.35rem; font-size: 1rem; }
  .karte, .schritt, .typenschild, .termin-karte, .cta-streifen { padding: 1.15rem; }
  .zitat { padding: 1.2rem 1.25rem; }
  .vertrauen span, .eyebrow { padding: .38rem .75rem; }
  .ts-zeile { grid-template-columns: 96px 1fr; gap: .6rem; }
  .vid-marke { font-size: .78rem; padding: .32rem .7rem; left: .7rem; bottom: .7rem; max-width: 62%; white-space: normal; }
  .vid-haupt .vid-dauer { right: .7rem; bottom: .7rem; font-size: .68rem; }
}

/* Moderne Viewport-Einheit: Adressleiste auf dem Handy zaehlt nicht mit */
@supports (height: 100dvh) {
  @media (max-width: 880px) {
    .nav { max-height: calc(100dvh - 140px); }
  }
}

/* iPhone-Balken unten (Safe Area) freihalten */
@supports (padding: env(safe-area-inset-bottom)) {
  .wa-schwebend { bottom: calc(1.6rem + env(safe-area-inset-bottom)); }
  @media (max-width: 880px) {
    body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
    .mobilleiste { bottom: calc(.8rem + env(safe-area-inset-bottom)); }
    .wa-schwebend { bottom: calc(88px + env(safe-area-inset-bottom)); }
  }
}


/* ==========================================================================
   Werkstatt-Design — das gewaehlte Design der Website (Fassung 6)
   Die Maschine laeuft: Schraubenschluessel als Mauszeiger, acht Werkzeuge
   in 3D-Tiefenebenen, die vor der Maus ausweichen, eine Blaupausen-Leitung,
   die sich selbst zeichnet, Zahnraeder an den Abschnitten, Videowand als
   3D-Buehne, Vorlauf-Leitung mit Funken, Laufband mit Konturschrift.
   Die beweglichen Teile liegen in app.js (Teil 2).
   Hinweis: Die Signatur-Animationen laufen bewusst auch bei reduzierter
   Bewegung — sie SIND die Idee dieser Variante.
   ========================================================================== */

:root {
  --werk-blau:   #226C88;
  --werk-rot:    #E14434;
  --werk-gelb:   #F2B33D;
  --tape:        rgba(242,179,61,.45);
}

/* Etwas mehr Temperament in der Grundstimmung */
body::before {
  background:
    radial-gradient(900px 520px at 12% -6%, rgba(255,196,128,.36), transparent 62%),
    radial-gradient(760px 480px at 92% 4%, rgba(225,68,52,.12), transparent 60%),
    radial-gradient(1000px 640px at 50% 108%, rgba(34,108,136,.13), transparent 66%);
}

/* Typografie: eine Spur groesser und knackiger */
h1 { font-size: clamp(2.5rem, 6.6vw, 4.9rem); letter-spacing: -.042em; line-height: 1.02; }

/* ---------- Vorlauf-Leitung: Scroll-Fortschritt als Heizungsrohr ---------- */

.vorlauf {
  position: fixed; left: 0; top: 0; bottom: 0; width: 26px;
  z-index: 65; pointer-events: none;
}
.vorlauf-rohr {
  position: absolute; left: 10px; top: 0; bottom: 0; width: 6px;
  background: rgba(25,27,31,.07);
  box-shadow: inset 0 0 0 1px rgba(25,27,31,.05);
  border-radius: 0 0 999px 999px;
}
.vorlauf-fuellung {
  position: absolute; left: 0; top: 0; width: 100%; height: 0%;
  background: linear-gradient(180deg, var(--werk-blau), var(--werk-gelb) 55%, var(--werk-rot));
  border-radius: inherit;
  box-shadow: 0 0 18px rgba(225,68,52,.45);
}
.vorlauf-fuellung::after {
  content: "";
  position: absolute; left: 0; right: 0; top: -14px; bottom: 0;
  background-image: repeating-linear-gradient(180deg,
    transparent 0 10px, rgba(255,255,255,.5) 10px 14px);
  animation: stroemen .7s linear infinite;
  will-change: transform;
}
.vorlauf-fuellung { overflow: hidden; }
/* Verschiebung statt Hintergrund-Animation: laeuft auf der Grafikkarte, ohne Neuzeichnen */
@keyframes stroemen { to { transform: translateY(14px); } }
button.vorlauf-ventil {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 19px; height: 19px; border-radius: 50%;
  border: 0; padding: 0;
  pointer-events: auto; cursor: pointer;
  background: radial-gradient(120% 120% at 30% 25%, #fff, #F1EDE4);
  box-shadow: 0 0 0 3px var(--werk-rot), 0 4px 14px rgba(25,27,31,.35);
  transition: top .1s linear, box-shadow .2s ease;
}
button.vorlauf-ventil:hover { box-shadow: 0 0 0 3px var(--werk-rot), 0 0 18px rgba(225,68,52,.6), 0 4px 14px rgba(25,27,31,.35); }
button.vorlauf-ventil:active { transform: translateX(-50%) scale(.88); }
.vorlauf-ventil::after {
  content: "";
  position: absolute; inset: 5px; border-radius: 50%;
  background: var(--werk-rot);
}
.vorlauf-ventil.dreht::after { animation: ventildreh .5s cubic-bezier(.3,1.4,.4,1); }
@keyframes ventildreh { to { transform: rotate(180deg); } }
.vorlauf-grad {
  position: absolute; left: 26px; transform: translateY(-50%);
  font-family: var(--f-mono); font-size: .62rem; font-weight: 700;
  color: #fff;
  background: linear-gradient(160deg, #2B2E35, #16181C);
  border-radius: 999px; padding: .22rem .55rem;
  box-shadow: var(--schatten-1);
  white-space: nowrap;
}
@media (max-width: 880px) { .vorlauf { display: none; } }

/* ---------- Acht Werkzeuge in 3D-Tiefenebenen ---------- */

.hero { position: relative; overflow: visible; }
.werkzeug {
  position: absolute; z-index: 0; pointer-events: none;
  will-change: transform;
}
.werkzeug-innen {
  display: block;
  filter: drop-shadow(0 12px 20px rgba(25,27,31,.16));
  animation: schweben3d 8s ease-in-out infinite;
  animation-delay: var(--verzug, 0s);
  opacity: var(--tiefe-deck, .45);
}
.werkzeug svg { display: block; }
/* Vordere Ebene: gross und klar */
.werkzeug-1 { left: 4%;  top: 14%;    color: var(--werk-blau); --verzug: 0s; }
.werkzeug-2 { right: 5%; top: 10%;    color: var(--werk-rot);  --verzug: -2.3s; }
.werkzeug-3 { left: 9%;  bottom: 18%; color: var(--werk-gelb); --verzug: -4.1s; }
.werkzeug-4 { right: 8%; bottom: 24%; color: var(--tinte);     --verzug: -5.6s; }
/* Hintere Ebene: kleiner, weicher, langsamer — Tiefenschaerfe */
.werkzeug-5 { left: 19%; top: 34%;    color: var(--werk-rot);  --verzug: -1.2s; --tiefe-deck: .28; }
.werkzeug-6 { right: 17%; top: 42%;   color: var(--werk-blau); --verzug: -3.4s; --tiefe-deck: .28; }
.werkzeug-7 { left: 30%; bottom: 7%;  color: var(--tinte);     --verzug: -6.2s; --tiefe-deck: .32; }
.werkzeug-8 { right: 27%; bottom: 5%; color: var(--werk-gelb); --verzug: -7.1s; --tiefe-deck: .32; }
/* Leistung: keine Filter auf animierten Werkzeugen (wuerden in jedem Bild neu berechnet) */
.werkzeug-innen { filter: none !important; }
@keyframes schweben3d {
  0%, 100% { transform: perspective(600px) translateY(0) rotateZ(-7deg) rotateY(0deg); }
  50%      { transform: perspective(600px) translateY(-18px) rotateZ(8deg) rotateY(32deg); }
}
@media (max-width: 880px) {
  .werkzeug-innen { opacity: .18; }
  .werkzeug-3, .werkzeug-4, .werkzeug-5, .werkzeug-6, .werkzeug-7, .werkzeug-8 { display: none; }
}

/* ---------- Blaupause: eine Leitung zeichnet sich im Hero selbst ---------- */

/* Die Anlage: Rohrleitung plus Stationen (Waermepumpe, Speicher, Heizkoerper …)
   als gezeichnete Installation hinter dem Hero */
.anlage {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}
.anlage-station {
  position: absolute;
  transform: translate(-50%, -50%);
  color: var(--werk-blau);
  opacity: 0;
  animation: station-auf .45s ease forwards;
  animation-delay: var(--sd, 1.2s);
}
.anlage-station svg { display: block; }
@keyframes station-auf { to { opacity: .4; } }
@media (max-width: 880px) { .anlage { display: none; } }

/* ---------- Leben in den Stationen: jede Anlage arbeitet sichtbar ---------- */

.st-dreh, .st-wippen, .st-klingeln, .st-nadel, .st-haemmern, .st-puls-el, .st-flackern {
  transform-box: view-box;
  transform-origin: 50% 50%;
}
.st-dreh { animation: st-dreh 8s linear infinite; }
@keyframes st-dreh { to { transform: rotate(360deg); } }

.st-wippen { animation: st-wippen 2.8s ease-in-out infinite; }
@keyframes st-wippen { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }

.st-klingeln { animation: st-klingeln 2.6s ease-in-out infinite; }
@keyframes st-klingeln {
  0%, 14%, 100% { transform: rotate(0); }
  2%  { transform: rotate(-13deg); }
  4%  { transform: rotate(11deg); }
  6%  { transform: rotate(-9deg); }
  8%  { transform: rotate(7deg); }
  10% { transform: rotate(-4deg); }
  12% { transform: rotate(2deg); }
}

.st-nadel { animation: st-nadel 3.2s ease-in-out infinite; }
@keyframes st-nadel { 0%, 100% { transform: rotate(-30deg); } 50% { transform: rotate(28deg); } }

.st-haemmern { animation: st-haemmern 2.2s ease-in-out infinite; }
@keyframes st-haemmern {
  0%, 55%, 100% { transform: rotate(0); }
  65% { transform: rotate(-17deg); }
  73% { transform: rotate(5deg); }
  80% { transform: rotate(0); }
}

.st-puls-el { animation: st-puls-el 2.4s ease-in-out infinite; }
@keyframes st-puls-el { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }

.st-flackern { animation: st-flackern 1.4s ease-in-out infinite; transform-origin: 50% 86%; }
@keyframes st-flackern {
  0%, 100% { transform: scale(1) rotate(0); }
  30% { transform: scale(1.05) rotate(-2deg); }
  60% { transform: scale(.97) rotate(2deg); }
}

.st-blink { animation: st-blink 1.6s ease-in-out infinite; }
@keyframes st-blink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }

.st-tropfen { animation: st-tropfen 1.6s ease-in infinite; }
@keyframes st-tropfen {
  0%   { transform: translateY(0); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translateY(5px); opacity: 0; }
}

.st-daempfe { animation: st-daempfe 2.8s ease-out infinite; }
@keyframes st-daempfe {
  0%   { transform: translateY(1.6px); opacity: 0; }
  30%  { opacity: .9; }
  100% { transform: translateY(-2.6px); opacity: 0; }
}

.st-gluehen { animation: st-gluehen 3.2s ease-in-out infinite; }
@keyframes st-gluehen {
  0%, 100% { stroke: currentColor; }
  50%      { stroke: #F2B33D; }
}

.st-wogen { animation: st-wogen 3s ease-in-out infinite; }
@keyframes st-wogen {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(2.5px); }
}

.st-glanz { animation: st-glanz 3.4s ease-in-out infinite; }
@keyframes st-glanz {
  0%   { transform: translateX(-5px); opacity: 0; }
  40%  { opacity: .9; }
  100% { transform: translateX(9px); opacity: 0; }
}

.st-luft { animation: st-luft 1.9s ease-out infinite; }
@keyframes st-luft {
  0%   { transform: translateX(0); opacity: 0; }
  30%  { opacity: .9; }
  100% { transform: translateX(4.5px); opacity: 0; }
}

.blaupause {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  color: var(--werk-blau);
}
.blaupause .bp-linie {
  opacity: .3;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: bp-zeichnen 1.4s cubic-bezier(.4,0,.2,1) forwards .1s;
}
.blaupause .bp-punkt {
  opacity: 0;
  animation: bp-punkt .4s ease forwards;
}
.blaupause .bp-punkt:nth-of-type(2) { animation-delay: 1.1s; }
.blaupause .bp-punkt:nth-of-type(3) { animation-delay: 1.7s; }
.blaupause .bp-punkt:nth-of-type(4) { animation-delay: 2.3s; }
.blaupause .bp-punkt:nth-of-type(5) { animation-delay: 2.9s; }
@keyframes bp-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes bp-punkt { to { opacity: .35; } }
/* Leitungspuls: die Waerme wandert sichtbar durch die Leitung */
.blaupause .bp-puls {
  stroke-dasharray: 10 90;
  stroke-dashoffset: 100;
  opacity: 0;
  animation: bp-puls 5s linear infinite 3.2s;
}
@keyframes bp-puls {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  4%   { opacity: .95; }
  92%  { opacity: .95; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@media (max-width: 880px) { .blaupause { display: none; } }

/* ---------- Zahnraeder an den Abschnittskanten ---------- */

.sec-beige { position: relative; }
.zahnraeder {
  position: absolute; top: -30px; right: 7%;
  display: flex; align-items: flex-start;
  pointer-events: none;
  color: var(--tinte);
  opacity: .4;
}
.zahnraeder svg { will-change: transform; }
.zahnrad-2 { margin: 22px 0 0 -12px; }
@media (max-width: 880px) { .zahnraeder { right: 4%; transform: scale(.7); transform-origin: top right; } }

/* ---------- Videowand als 3D-Buehne (werkstatt.js kippt sie zur Maus) ---------- */

.videowand { transform-style: preserve-3d; will-change: transform; }

/* ---------- Laufband: Konturschrift im Wechsel ---------- */

.laufband {
  overflow: hidden;
  background: linear-gradient(165deg, #23262C, #15171A);
  color: var(--creme);
  margin: 1.6rem 0;
  box-shadow: var(--schatten-2);
}
.laufband-spur {
  display: flex; gap: 2.8rem; width: max-content;
  padding: .95rem 0;
  font-family: var(--f-display); font-weight: 800; font-size: 1.14rem;
  letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
  animation: laufband-zug 60s linear infinite;
}
.laufband-spur span { display: inline-flex; align-items: center; gap: 2.8rem; }
.laufband-spur em { font-style: normal; color: var(--werk-gelb); font-size: .8em; }
.laufband-spur i {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 1.3px rgba(252,251,248,.85);
}
@keyframes laufband-zug { to { transform: translateX(-50%); } }

/* ---------- Sticker-Optik: Eyebrows wie mit Klebeband angeheftet ---------- */

.kopf .eyebrow, .hero .eyebrow {
  transform: rotate(-2deg);
  position: relative;
}
.kopf .eyebrow::after, .hero .eyebrow::after {
  content: "";
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%) rotate(3deg);
  width: 46px; height: 13px;
  background: var(--tape);
  border-radius: 2px;
}

/* ---------- Karten: 3D-Kippen, Spotlight und Lichtstreifen ---------- */

.grid.g3 > .karte:nth-child(odd)  { transform: rotate(-.5deg); }
.grid.g3 > .karte:nth-child(even) { transform: rotate(.5deg); }
.karte { will-change: transform; }
a.karte:hover, .karte:hover { transform: rotate(0deg) translateY(-6px); }

.karte, .schritt, .termin-karte { position: relative; overflow: hidden; }
.karte::before, .schritt::before, .termin-karte::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
              rgba(242,179,61,.18), transparent 65%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.karte:hover::before, .schritt:hover::before, .termin-karte:hover::before { opacity: 1; }
.karte > *, .schritt > *, .termin-karte > * { position: relative; z-index: 1; }

/* Lichtstreifen, der beim Zeigen ueber die Karte laeuft */
.karte::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.35) 50%, transparent 62%);
  transform: translateX(-140%);
  pointer-events: none;
}
.karte:hover::after { transition: transform .7s cubic-bezier(.3,.7,.3,1); transform: translateX(140%); }

.zeichen { transition: transform .3s cubic-bezier(.3,1.6,.4,1); }
.karte:hover .zeichen { transform: rotate(-14deg) scale(1.12); }

/* Schritt-Nummern drehen sich beim Zeigen wie ein Ventilrad */
.schritt-nr { transition: transform .5s cubic-bezier(.3,1.4,.4,1); }
.schritt:hover .schritt-nr { transform: rotate(180deg); }

/* ---------- Gestaffeltes Einblenden ---------- */

.werk-reveal {
  opacity: 0;
  transform: translateY(14px);
}
.werk-reveal.sichtbar {
  opacity: 1;
  transform: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.3,1);
  transition-delay: var(--staffel, 0s);
}

/* ---------- Hero-Intro: Titel Wort fuer Wort ---------- */

.hero h1 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10' viewBox='0 0 120 10'%3E%3Cpath d='M2 7 Q 30 2 60 6 T 118 4' fill='none' stroke='%23E14434' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: min(46vw, 340px) auto;
  background-position: 50% 100%;
  padding-bottom: .22em;
}
.hero h1 .wort { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; max-width: 100%; }
.hero h1 .wort-innen {
  display: inline-block;
  max-width: 100%;
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
  transform: translateY(115%);
  animation: wort-auf .5s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: calc(var(--i, 0) * 32ms + 80ms);
}
@keyframes wort-auf { to { transform: translateY(0); } }

.intro { opacity: 0; }
.intro-an {
  animation: intro-auf .45s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay: var(--iv, 0s);
}
@keyframes intro-auf {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Play-Knopf pulsiert einladend ---------- */

.vid-haupt .play { animation: playpuls 2.4s ease-in-out infinite; }
@keyframes playpuls {
  0%, 100% { box-shadow: 0 10px 26px -8px rgba(25,27,31,.45), 0 0 0 8px rgba(255,255,255,.28); }
  50%      { box-shadow: 0 10px 26px -8px rgba(25,27,31,.45), 0 0 0 16px rgba(255,255,255,.12); }
}

/* ---------- Der Mauszeiger ist ein Schraubenschluessel ----------
   Als echter Systemzeiger: das Betriebssystem zeichnet ihn, daher ohne jede Verzoegerung.
   Ueber Klickbarem glueht die Spitze golden. */

@media (pointer: fine) {
  html { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='scale%281.25%29' fill='%23FCFBF8' stroke='%23191B1F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/g%3E%3Ccircle cx='21' cy='6' r='2.5' fill='%23E14434'/%3E%3C/svg%3E") 21 6, auto; }
  a, button, [role="button"], summary, label, select, .galerie-bild, .vid-zeitleiste { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='scale%281.25%29' fill='%23FCFBF8' stroke='%23191B1F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/g%3E%3Ccircle cx='21' cy='6' r='4.6' fill='%23F2B33D' fill-opacity='.35'/%3E%3Ccircle cx='21' cy='6' r='2.8' fill='%23F2B33D' stroke='%23191B1F' stroke-width='.8'/%3E%3C/svg%3E") 21 6, pointer; }
  input:not([type="range"]), textarea { cursor: text; }
}

/* ---------- Funken und Muttern ---------- */

.funke {
  position: fixed; z-index: 135;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--werk-gelb);
  box-shadow: 0 0 8px rgba(242,179,61,.8);
  pointer-events: none;
  animation: funkenflug .85s cubic-bezier(.2,.6,.4,1) forwards;
}
.funke:nth-child(odd) { background: var(--werk-rot); box-shadow: 0 0 8px rgba(225,68,52,.8); }
@keyframes funkenflug {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to   { opacity: 0; transform: translate(var(--fx, 20px), var(--fy, -40px)) scale(.3); }
}
.mutter {
  position: fixed; z-index: 135;
  width: 10px; height: 10px;
  background: var(--tinte);
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  pointer-events: none;
  animation: mutterflug .9s cubic-bezier(.2,.6,.4,1) forwards;
}
@keyframes mutterflug {
  from { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  to   { opacity: 0; transform: translate(var(--fx, 24px), var(--fy, -30px)) rotate(260deg); }
}

/* ---------- Scrollbalken als Heizrohr, goldene Markierung ---------- */

html { scrollbar-width: thin; scrollbar-color: #E14434 rgba(25,27,31,.07); }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: rgba(25,27,31,.05); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--werk-gelb), var(--werk-rot));
  border-radius: 999px;
  border: 2px solid var(--creme);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #F5C25E, #E85B4B); }

::selection { background: rgba(242,179,61,.45); }

/* ---------- Bewegung gehoert hier zur Idee: auch bei reduzierter Einstellung
     bleiben alle Effekte geschmeidig ---------- */

@media (prefers-reduced-motion: reduce) {
  .karte { transition-duration: .25s !important; }
  .btn { transition-duration: .2s !important; }
  .werk-reveal.sichtbar { transition-duration: .35s !important; }
  .zeichen, .schritt-nr { transition-duration: .3s !important; }
  .karte::before, .schritt::before, .termin-karte::before { transition-duration: .3s !important; }
  .karte:hover::after { transition-duration: .7s !important; }
  .nav { transition-duration: .3s !important; }
  .sf-kredit, .sf-pfeil { transition-duration: .2s !important; }
}

/* Bilder atmen beim Scrollen leicht mit (app.js setzt die Verschiebung) -- die Galerie nicht */
.bildplatz:not(.galerie-bild) { will-change: transform; }

/* Leistung: Hero ausser Sicht -> Szene und Werkzeuge halten an */
.hero.ausser-sicht *, .hero.ausser-sicht *::before, .hero.ausser-sicht *::after { animation-play-state: paused !important; }

/* ---------- Notfall-Knoepfe im Fussbereich: sichtbar anklickbar ---------- */

.fuss-notfall-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; }
.fn-tel, .fn-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .55rem 1.05rem;
  border-radius: 999px;
  font-family: var(--f-display); font-weight: 700; font-size: .9rem; letter-spacing: -.01em;
  text-decoration: none; color: #fff;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease;
}
.fn-tel { background: linear-gradient(165deg, #F0584A, var(--signal-2)); box-shadow: 0 8px 20px -10px var(--signal-licht); }
.fn-wa  { background: linear-gradient(165deg, #2FE076, #1FAE68); box-shadow: 0 8px 20px -10px var(--wa-licht); }
.fn-tel:hover, .fn-wa:hover { color: #fff; transform: translateY(-2px); }

/* Untere Fusszeile: auf kleinen Bildschirmen sauber gestapelt */
@media (max-width: 700px) {
  .fuss-unten { flex-direction: column; align-items: flex-start; gap: .9rem; }
}

/* CTA-Streifen: auf dem Handy stapeln sich die Knoepfe einzeilig untereinander */
@media (max-width: 560px) {
  .cta-streifen .btn { flex: 1 1 100%; }
}

/* ---------- Sunna-Flow-Credit im Fussbereich ---------- */

.sf-kredit {
  display: inline-flex; align-items: center; gap: .45rem;
  color: #8D8A83;
  font-size: .82rem; font-weight: 500;
  text-decoration: none;
  padding: .45rem 1rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), border-color .2s ease,
              color .2s ease, box-shadow .2s ease;
}
.sf-kredit svg { color: var(--werk-gelb); flex: none; }
.sf-kredit b {
  font-weight: 700; letter-spacing: -.01em;
  background: linear-gradient(90deg, #F2B33D, #E14434);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sf-pfeil { transition: transform .2s cubic-bezier(.2,.7,.3,1); color: #B9B5AD; }
.sf-kredit:hover {
  color: #fff;
  border-color: rgba(242,179,61,.55);
  box-shadow: 0 0 26px -8px rgba(242,179,61,.55);
  transform: translateY(-2px);
}
.sf-kredit:hover .sf-pfeil { transform: translateX(4px); color: #fff; }

/* ==========================================================================
   Ergaenzungen 4: Themen-Elemente und Wasserzeichen
   ========================================================================== */

/* Grosses, blasses Werkzeug-Wasserzeichen hinter Abschnitten (Jobs, Ueber uns) */
.sec-graphit { position: relative; overflow: hidden; }
.wasserzeichen {
  position: absolute; right: -2%; bottom: -8%;
  pointer-events: none;
  color: var(--tinte);
  opacity: .05;
  transform: rotate(-10deg);
}
.sec-graphit .wasserzeichen { color: #fff; opacity: .05; }
.wasserzeichen svg { display: block; }
@media (max-width: 880px) { .wasserzeichen { display: none; } }

/* Calendly-Dialog: kurz sichtbar machen, dass geladen wird */
a.laedt { opacity: .7; cursor: progress; }

/* Leistung: Abschnitte ausserhalb des Bildschirms erst bei Bedarf zeichnen */
main > section:not(.hero) { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* ---------- Gespraech buchen: eigener Calendly-Dialog ----------
   Fenster = exakt Calendlys Karte (1058 x 698 sichtbar). Der Rahmen ist 1200 x 900 gross
   und so verschoben, dass Calendlys eigener Rand und Seitenhintergrund wegfallen. */
.cal-dialog {
  --cal-s: 1;
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: rgba(17,19,23,.55);
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, visibility 0s linear .22s;
}
.cal-dialog.offen { opacity: 1; visibility: visible; transition: opacity .22s ease; }
.cal-fenster {
  position: relative;
  width: calc(1058px * var(--cal-s));
  height: calc(698px * var(--cal-s));
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 70px -18px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.04);
  transform: translateY(10px) scale(.985);
  transition: transform .26s cubic-bezier(.2,.7,.3,1);
}
.cal-dialog.offen .cal-fenster { transform: none; }
.cal-buehne {
  position: absolute; left: 0; top: 0;
  width: 1058px; height: 698px;
  overflow: hidden; border-radius: calc(14px / var(--cal-s));
  transform: scale(var(--cal-s)); transform-origin: 0 0;
}
.cal-buehne iframe {
  position: absolute; left: -71px; top: -67px;
  width: 1200px; height: 900px; border: 0;
  opacity: 0; transition: opacity .3s ease;
}
.cal-dialog.geladen .cal-buehne iframe { opacity: 1; }
.cal-laden {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .8rem;
  font-family: var(--f-mono); font-size: .8rem; color: var(--tinte-2);
}
.cal-laden span {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid var(--linie); border-top-color: var(--werk-rot);
  animation: cal-dreh .8s linear infinite;
}
@keyframes cal-dreh { to { transform: rotate(360deg); } }
.cal-dialog.geladen .cal-laden { display: none; }
/* Schliessen: hell und dezent, aussen an der Ecke */
.cal-zu {
  position: absolute; top: 0; right: -54px; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: #fff; color: #3A3F47;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.35);
  transition: transform .15s ease, color .15s ease, box-shadow .15s ease;
}
.cal-zu svg { width: 16px; height: 16px; }
.cal-zu:hover { transform: rotate(90deg); color: #111; box-shadow: 0 8px 22px -6px rgba(0,0,0,.45); }
.cal-zu:focus-visible { outline: 2px solid var(--werk-gelb); outline-offset: 2px; }
html.dialog-offen { overflow: hidden; }
/* Kleine Bildschirme: Calendlys eigene Handy-Ansicht, bildschirmfuellend */
.cal-dialog.kompakt .cal-fenster { width: 100%; height: 100%; border-radius: 0; }
.cal-dialog.kompakt .cal-buehne { position: absolute; inset: 0; width: auto; height: auto; transform: none; border-radius: 0; }
.cal-dialog.kompakt .cal-buehne iframe { left: 0; top: 0; width: 100%; height: 100%; }
.cal-kopf { display: none; }
.cal-dialog.kompakt .cal-kopf {
  display: flex; align-items: center; height: 56px; padding: 0 64px 0 18px;
  font-family: var(--f-display); font-weight: 800; font-size: 1.05rem; color: var(--tinte);
  border-bottom: 1px solid var(--linie); background: #fff;
}
.cal-dialog.kompakt .cal-buehne { top: 56px; }
.cal-dialog.kompakt .cal-laden { top: 56px; }
.cal-dialog.kompakt .cal-zu { top: 8px; right: 10px; box-shadow: none; background: var(--sand); border: 0; }

/* Dialog offen: Animationen dahinter anhalten */
html.dialog-offen .anlage *, html.dialog-offen .werkzeug *, html.dialog-offen .laufband-spur, html.dialog-offen .vorlauf * { animation-play-state: paused !important; }

/* Knopf-Ordnung ueberall: Notfall/Anrufen -> WhatsApp -> Gespraech buchen (rechts).
   Am Handy stehen die Knoepfe untereinander -- dort kommt die Hauptaktion nach oben. */
@media (max-width: 560px) {
  .btn-reihe > a[href$="#termin"] { order: -1; }
}