/* B2B Telemarketing Schweiz – Stylesheet (Quelle; build.js schreibt daraus ../telemarketing-schweiz/css/style.css)
   Markensprache: klar, eckig, geradlinig. Keine Rundungen, Hexagon aus dem Logo als Leitform.
   Den Platzhalter in --waben ersetzt build.js durch das Wabenmuster (SVG). */

:root {
  --gold: #dbb101;
  --gold-light: #f4cc52;
  --gold-soft: #fbf3d6;
  --gold-dark: #8a6e00;
  --deep: #10292c;
  --deep-2: #17393d;
  --deep-3: #0b1f21;
  --ink: #1d2729;
  --muted: #56646a;
  --line: #e4e1d5;
  --cream: #faf8f1;
  --max: 1180px;
  --hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  --cut: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  --waben: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='508' height='400' viewBox='0 0 508 400'%3E%3Cpolygon points='72.0,8.2 94.3,21.1 94.3,46.9 72.0,59.8 49.6,46.9 49.6,21.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.37'/%3E%3Cpolygon points='123.9,8.2 146.3,21.1 146.3,46.9 123.9,59.8 101.6,46.9 101.6,21.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.46'/%3E%3Cpolygon points='175.9,8.2 198.2,21.1 198.2,46.9 175.9,59.8 153.5,46.9 153.5,21.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.55'/%3E%3Cpolygon points='279.8,8.2 302.1,21.1 302.1,46.9 279.8,59.8 257.5,46.9 257.5,21.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.73'/%3E%3Cpolygon points='331.8,8.2 354.1,21.1 354.1,46.9 331.8,59.8 309.4,46.9 309.4,21.1' fill='%23dbb101' fill-opacity='0.45'/%3E%3Cpolygon points='383.7,8.2 406.1,21.1 406.1,46.9 383.7,59.8 361.4,46.9 361.4,21.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.91'/%3E%3Cpolygon points='435.7,8.2 458.0,21.1 458.0,46.9 435.7,59.8 413.3,46.9 413.3,21.1' fill='%23dbb101' fill-opacity='0.55'/%3E%3Cpolygon points='46.0,53.2 68.3,66.1 68.3,91.9 46.0,104.8 23.6,91.9 23.6,66.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.25'/%3E%3Cpolygon points='149.9,53.2 172.2,66.1 172.2,91.9 149.9,104.8 127.6,91.9 127.6,66.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.37'/%3E%3Cpolygon points='201.9,53.2 224.2,66.1 224.2,91.9 201.9,104.8 179.5,91.9 179.5,66.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.46'/%3E%3Cpolygon points='253.8,53.2 276.2,66.1 276.2,91.9 253.8,104.8 231.5,91.9 231.5,66.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.55'/%3E%3Cpolygon points='357.7,53.2 380.1,66.1 380.1,91.9 357.7,104.8 335.4,91.9 335.4,66.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.73'/%3E%3Cpolygon points='409.7,53.2 432.0,66.1 432.0,91.9 409.7,104.8 387.4,91.9 387.4,66.1' fill='%23dbb101' fill-opacity='0.45'/%3E%3Cpolygon points='461.7,53.2 484.0,66.1 484.0,91.9 461.7,104.8 439.3,91.9 439.3,66.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.91'/%3E%3Cpolygon points='72.0,98.2 94.3,111.1 94.3,136.9 72.0,149.8 49.6,136.9 49.6,111.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.25'/%3E%3Cpolygon points='175.9,98.2 198.2,111.1 198.2,136.9 175.9,149.8 153.5,136.9 153.5,111.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.37'/%3E%3Cpolygon points='227.8,98.2 250.2,111.1 250.2,136.9 227.8,149.8 205.5,136.9 205.5,111.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.46'/%3E%3Cpolygon points='279.8,98.2 302.1,111.1 302.1,136.9 279.8,149.8 257.5,136.9 257.5,111.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.55'/%3E%3Cpolygon points='383.7,98.2 406.1,111.1 406.1,136.9 383.7,149.8 361.4,136.9 361.4,111.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.73'/%3E%3Cpolygon points='435.7,98.2 458.0,111.1 458.0,136.9 435.7,149.8 413.3,136.9 413.3,111.1' fill='%23dbb101' fill-opacity='0.45'/%3E%3Cpolygon points='149.9,143.2 172.2,156.1 172.2,181.9 149.9,194.8 127.6,181.9 127.6,156.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.25'/%3E%3Cpolygon points='253.8,143.2 276.2,156.1 276.2,181.9 253.8,194.8 231.5,181.9 231.5,156.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.37'/%3E%3Cpolygon points='305.8,143.2 328.1,156.1 328.1,181.9 305.8,194.8 283.4,181.9 283.4,156.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.46'/%3E%3Cpolygon points='357.7,143.2 380.1,156.1 380.1,181.9 357.7,194.8 335.4,181.9 335.4,156.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.55'/%3E%3Cpolygon points='461.7,143.2 484.0,156.1 484.0,181.9 461.7,194.8 439.3,181.9 439.3,156.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.73'/%3E%3Cpolygon points='175.9,188.2 198.2,201.1 198.2,226.9 175.9,239.8 153.5,226.9 153.5,201.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.25'/%3E%3Cpolygon points='279.8,188.2 302.1,201.1 302.1,226.9 279.8,239.8 257.5,226.9 257.5,201.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.37'/%3E%3Cpolygon points='331.8,188.2 354.1,201.1 354.1,226.9 331.8,239.8 309.4,226.9 309.4,201.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.46'/%3E%3Cpolygon points='383.7,188.2 406.1,201.1 406.1,226.9 383.7,239.8 361.4,226.9 361.4,201.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.55'/%3E%3Cpolygon points='253.8,233.2 276.2,246.1 276.2,271.9 253.8,284.8 231.5,271.9 231.5,246.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.25'/%3E%3Cpolygon points='357.7,233.2 380.1,246.1 380.1,271.9 357.7,284.8 335.4,271.9 335.4,246.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.37'/%3E%3Cpolygon points='409.7,233.2 432.0,246.1 432.0,271.9 409.7,284.8 387.4,271.9 387.4,246.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.46'/%3E%3Cpolygon points='461.7,233.2 484.0,246.1 484.0,271.9 461.7,284.8 439.3,271.9 439.3,246.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.55'/%3E%3Cpolygon points='279.8,278.2 302.1,291.1 302.1,316.9 279.8,329.8 257.5,316.9 257.5,291.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.25'/%3E%3Cpolygon points='383.7,278.2 406.1,291.1 406.1,316.9 383.7,329.8 361.4,316.9 361.4,291.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.37'/%3E%3Cpolygon points='435.7,278.2 458.0,291.1 458.0,316.9 435.7,329.8 413.3,316.9 413.3,291.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.46'/%3E%3Cpolygon points='357.7,323.2 380.1,336.1 380.1,361.9 357.7,374.8 335.4,361.9 335.4,336.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.25'/%3E%3Cpolygon points='461.7,323.2 484.0,336.1 484.0,361.9 461.7,374.8 439.3,361.9 439.3,336.1' fill='none' stroke='%23dbb101' stroke-width='1.5' stroke-opacity='0.37'/%3E%3C/svg%3E");
  --waben-kachel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='291.0' height='216' viewBox='0 0 291.0 216'%3E%3Cpolygon points='-20.8,-57.1 -2.5,-46.6 -2.5,-25.4 -20.8,-14.9 -39.1,-25.4 -39.1,-46.6' fill='none' stroke='%23dbb101' stroke-width='1.4' stroke-opacity='0.63'/%3E%3Cpolygon points='145.5,-57.1 163.8,-46.6 163.8,-25.4 145.5,-14.9 127.2,-25.4 127.2,-46.6' fill='none' stroke='%23dbb101' stroke-width='1.4' stroke-opacity='0.77'/%3E%3Cpolygon points='270.2,-57.1 288.5,-46.6 288.5,-25.4 270.2,-14.9 251.9,-25.4 251.9,-46.6' fill='none' stroke='%23dbb101' stroke-width='1.4' stroke-opacity='0.63'/%3E%3Cpolygon points='-41.6,-21.1 -23.3,-10.6 -23.3,10.6 -41.6,21.1 -59.9,10.6 -59.9,-10.6' fill='none' stroke='%23dbb101' stroke-width='1.4' stroke-opacity='0.57'/%3E%3Cpolygon points='41.6,-21.1 59.9,-10.6 59.9,10.6 41.6,21.1 23.3,10.6 23.3,-10.6' fill='%23dbb101' fill-opacity='.22'/%3E%3Cpolygon points='124.7,-21.1 143.0,-10.6 143.0,10.6 124.7,21.1 106.4,10.6 106.4,-10.6' fill='none' stroke='%23dbb101' stroke-width='1.4' stroke-opacity='0.50'/%3E%3Cpolygon points='207.8,-21.1 226.1,-10.6 226.1,10.6 207.8,21.1 189.6,10.6 189.6,-10.6' fill='none' stroke='%23dbb101' stroke-width='1.4' stroke-opacity='0.38'/%3E%3Cpolygon points='249.4,-21.1 267.7,-10.6 267.7,10.6 249.4,21.1 231.1,10.6 231.1,-10.6' fill='none' stroke='%23dbb101' stroke-width='1.4' stroke-opacity='0.57'/%3E%3Cpolygon points='-20.8,14.9 -2.5,25.4 -2.5,46.6 -20.8,57.1 -39.1,46.6 -39.1,25.4' fill='none' stroke='%23dbb101' stroke-width='1.4' stroke-opacity='0.71'/%3E%3Cpolygon points='62.4,14.9 80.6,25.4 80.6,46.6 62.4,57.1 44.1,46.6 44.1,25.4' fill='none' stroke='%23dbb101' stroke-width='1.4' stroke-opacity='0.70'/%3E%3Cpolygon points='103.9,14.9 122.2,25.4 122.2,46.6 103.9,57.1 85.6,46.6 85.6,25.4' fill='none' stroke='%23dbb101' stroke-width='1.4' stroke-opacity='0.50'/%3E%3Cpolygon points='145.5,14.9 163.8,25.4 163.8,46.6 145.5,57.1 127.2,46.6 127.2,25.4' fill='none' stroke='%23dbb101' stroke-width='1.4' stroke-opacity='0.38'/%3E%3Cpolygon points='228.6,14.9 246.9,25.4 246.9,46.6 228.6,57.1 210.3,46.6 210.3,25.4' fill='none' stroke='%23dbb101' stroke-width='1.4' stroke-opacity='0.79'/%3E%3Cpolygon points='270.2,14.9 288.5,25.4 288.5,46.6 270.2,57.1 251.9,46.6 251.9,25.4' fill='none' stroke='%23dbb101' stroke-width='1.4' stroke-opacity='0.71'/%3E%3Cpolygon points='-41.6,50.9 -23.3,61.4 -23.3,82.6 -41.6,93.1 -59.9,82.6 -59.9,61.4' fill='none' stroke='%23dbb101' stroke-width='1.4' stroke-opacity='0.51'/%3E%3Cpolygon points='166.3,50.9 184.6,61.4 184.6,82.6 166.3,93.1 148.0,82.6 148.0,61.4' fill='%23dbb101' fill-opacity='.22'/%3E%3Cpolygon points='207.8,50.9 226.1,61.4 226.1,82.6 207.8,93.1 189.6,82.6 189.6,61.4' fill='none' stroke='%23dbb101' stroke-width='1.4' stroke-opacity='0.47'/%3E%3Cpolygon points='249.4,50.9 267.7,61.4 267.7,82.6 249.4,93.1 231.1,82.6 231.1,61.4' fill='none' stroke='%23dbb101' stroke-width='1.4' stroke-opacity='0.51'/%3E%3Cpolygon points='-20.8,86.9 -2.5,97.4 -2.5,118.6 -20.8,129.1 -39.1,118.6 -39.1,97.4' fill='none' stroke='%23dbb101' stroke-width='1.4' stroke-opacity='0.64'/%3E%3Cpolygon points='62.4,86.9 80.6,97.4 80.6,118.6 62.4,129.1 44.1,118.6 44.1,97.4' fill='none' stroke='%23dbb101' stroke-width='1.4' stroke-opacity='0.34'/%3E%3Cpolygon points='145.5,86.9 163.8,97.4 163.8,118.6 145.5,129.1 127.2,118.6 127.2,97.4' fill='%23dbb101' fill-opacity='.22'/%3E%3Cpolygon points='187.1,86.9 205.3,97.4 205.3,118.6 187.1,129.1 168.8,118.6 168.8,97.4' fill='none' stroke='%23dbb101' stroke-width='1.4' stroke-opacity='0.56'/%3E%3Cpolygon points='228.6,86.9 246.9,97.4 246.9,118.6 228.6,129.1 210.3,118.6 210.3,97.4' fill='%23dbb101' fill-opacity='.22'/%3E%3Cpolygon points='270.2,86.9 288.5,97.4 288.5,118.6 270.2,129.1 251.9,118.6 251.9,97.4' fill='none' stroke='%23dbb101' stroke-width='1.4' stroke-opacity='0.64'/%3E%3Cpolygon points='-41.6,122.9 -23.3,133.4 -23.3,154.6 -41.6,165.1 -59.9,154.6 -59.9,133.4' fill='%23dbb101' fill-opacity='.22'/%3E%3Cpolygon points='41.6,122.9 59.9,133.4 59.9,154.6 41.6,165.1 23.3,154.6 23.3,133.4' fill='none' stroke='%23dbb101' stroke-width='1.4' stroke-opacity='0.79'/%3E%3Cpolygon points='83.1,122.9 101.4,133.4 101.4,154.6 83.1,165.1 64.8,154.6 64.8,133.4' fill='none' stroke='%23dbb101' stroke-width='1.4' stroke-opacity='0.47'/%3E%3Cpolygon points='249.4,122.9 267.7,133.4 267.7,154.6 249.4,165.1 231.1,154.6 231.1,133.4' fill='%23dbb101' fill-opacity='.22'/%3E%3Cpolygon points='-20.8,158.9 -2.5,169.4 -2.5,190.6 -20.8,201.1 -39.1,190.6 -39.1,169.4' fill='none' stroke='%23dbb101' stroke-width='1.4' stroke-opacity='0.63'/%3E%3Cpolygon points='145.5,158.9 163.8,169.4 163.8,190.6 145.5,201.1 127.2,190.6 127.2,169.4' fill='none' stroke='%23dbb101' stroke-width='1.4' stroke-opacity='0.77'/%3E%3Cpolygon points='270.2,158.9 288.5,169.4 288.5,190.6 270.2,201.1 251.9,190.6 251.9,169.4' fill='none' stroke='%23dbb101' stroke-width='1.4' stroke-opacity='0.63'/%3E%3Cpolygon points='-41.6,194.9 -23.3,205.4 -23.3,226.6 -41.6,237.1 -59.9,226.6 -59.9,205.4' fill='none' stroke='%23dbb101' stroke-width='1.4' stroke-opacity='0.57'/%3E%3Cpolygon points='41.6,194.9 59.9,205.4 59.9,226.6 41.6,237.1 23.3,226.6 23.3,205.4' fill='%23dbb101' fill-opacity='.22'/%3E%3Cpolygon points='124.7,194.9 143.0,205.4 143.0,226.6 124.7,237.1 106.4,226.6 106.4,205.4' fill='none' stroke='%23dbb101' stroke-width='1.4' stroke-opacity='0.50'/%3E%3Cpolygon points='207.8,194.9 226.1,205.4 226.1,226.6 207.8,237.1 189.6,226.6 189.6,205.4' fill='none' stroke='%23dbb101' stroke-width='1.4' stroke-opacity='0.38'/%3E%3Cpolygon points='249.4,194.9 267.7,205.4 267.7,226.6 249.4,237.1 231.1,226.6 231.1,205.4' fill='none' stroke='%23dbb101' stroke-width='1.4' stroke-opacity='0.57'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink); background: #fff;
  font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .55em; color: var(--deep); letter-spacing: -.015em; font-weight: 800; }
h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.55rem); letter-spacing: -.02em; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
section { padding: clamp(64px, 9vw, 112px) 0; position: relative; }
.center { text-align: center; }
.lead { font-size: 1.15rem; color: var(--muted); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 12px; z-index: 100; background: var(--gold); color: #1f1900; padding: 10px 16px; font-weight: 700; }
.skip:focus { left: 16px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 16px;
  font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dark);
}
.eyebrow::before { content: ""; flex: none; width: 11px; height: 13px; background: var(--gold); clip-path: var(--hex); }
.eyebrow::after { content: ""; width: 34px; height: 2px; background: currentColor; opacity: .35; }
.center .eyebrow::after { display: none; }

/* Buttons: eckig, unten rechts angeschnitten wie die Sprechblase im Logo */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border: 0; border-radius: 0; cursor: pointer;
  font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2; text-decoration: none;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .15s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn-gold { background: var(--gold); color: #1f1900; clip-path: var(--cut); }
.btn-gold:hover { background: var(--gold-light); }
.btn-dark { background: var(--deep); color: #fff; clip-path: var(--cut); }
.btn-dark:hover { background: var(--deep-2); }
.btn-line { box-shadow: inset 0 0 0 2px currentColor; color: var(--deep); }
.btn-line:hover { background: var(--deep); color: #fff; box-shadow: inset 0 0 0 2px var(--deep); }
.btn-line-light { box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); color: #fff; }
.btn-line-light:hover { box-shadow: inset 0 0 0 2px var(--gold); color: var(--gold-light); }

/* Header: über dem dunklen Hero transparent (helle Schrift), beim Runterscrollen weiss (main.js setzt .solid) */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: transparent; color: #fff; transition: background-color .3s ease, box-shadow .3s ease, color .3s ease; }
.site-header::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 3px; background: linear-gradient(90deg, var(--gold) 0 120px, transparent 120px); opacity: 0; transition: opacity .3s; }
.site-header.solid { background: rgba(255,255,255,.97); color: var(--deep); box-shadow: 0 6px 24px rgba(16,41,44,.08); }
.site-header.solid::after { opacity: 1; }
.nav { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand img { width: 64px; height: auto; }
.site-header .brand .on-light, .site-header.solid .brand .on-dark { display: none; }
.site-header.solid .brand .on-light { display: block; }
.brand-text { line-height: 1.1; }
.brand-text strong { display: block; font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.brand-text span { font-size: .76rem; opacity: .7; letter-spacing: .06em; text-transform: uppercase; }
.site-header:not(.solid) .menu > li > a:not(.btn) { color: rgba(255,255,255,.9); }
.site-header:not(.solid) .menu > li > a:not(.btn):hover, .site-header:not(.solid) .menu > li > a[aria-current="page"] { color: #fff; }
.menu { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
.menu > li { position: relative; }
.menu > li > a:not(.btn) { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; text-decoration: none; font-weight: 600; font-size: .98rem; }
.menu > li > a:not(.btn)::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.menu > li > a:not(.btn):hover::after, .menu > li > a[aria-current="page"]::after { transform: scaleX(1); }
.menu .btn { margin-left: 12px; padding: 12px 22px; }
.has-sub > a svg { width: 14px; height: 14px; transition: transform .15s; }
/* .has-sub reicht bis zum Untermenü, damit es beim Hinfahren mit der Maus offen bleibt */
.nav .has-sub { padding-bottom: 0; }
.nav .sub {
  list-style: none; margin: 0; padding: 8px; position: absolute; top: 100%; left: 0; min-width: 290px;
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--gold); box-shadow: 0 22px 44px rgba(16,41,44,.16);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: .15s ease;
}
.nav .has-sub::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.nav .has-sub:hover .sub, .nav .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: translateY(0); }
.has-sub:hover > a svg { transform: rotate(180deg); }
.nav .sub a { display: block; padding: 11px 14px 11px 16px; text-decoration: none; color: var(--ink); font-size: .96rem; font-weight: 600; border-left: 3px solid transparent; }
.nav .sub a:hover, .nav .sub a[aria-current="page"] { background: var(--cream); border-left-color: var(--gold); }
.nav .sub a small { display: block; color: var(--muted); font-size: .82rem; font-weight: 400; }
.menu-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: inherit; }

/* Breadcrumb */
.breadcrumb { font-size: .85rem; margin-bottom: 24px; color: rgba(255,255,255,.65); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; opacity: .5; }
.breadcrumb a { text-decoration: none; color: rgba(255,255,255,.82); }
.breadcrumb a:hover { color: var(--gold-light); }

/* Hero */
.hero { background: var(--deep); color: #fff; padding: calc(78px + clamp(56px, 8vw, 100px)) 0 clamp(72px, 9vw, 118px); }
.hero h1 { color: #fff; margin-bottom: .3em; }
.hero .sub-h { color: var(--gold-light); font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; margin: 0 0 .9em; }
.hero .eyebrow { color: var(--gold-light); }
.hero p.lead { color: rgba(255,255,255,.84); max-width: 34em; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero-media { position: relative; margin: 0 20px 20px 0; }
.hero-media::before { content: ""; position: absolute; inset: 20px -20px -20px 20px; border: 2px solid var(--gold); }
.hero-media .photo { position: relative; width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; }
.hero-media .hexmark { position: absolute; z-index: 1; left: -26px; bottom: 34px; width: 78px; height: 90px; background: var(--gold); clip-path: var(--hex); display: grid; place-items: center; color: #1f1900; text-decoration: none; transition: background-color .15s, transform .15s; }
.hero-media .hexmark:hover { background: var(--gold-light); transform: scale(1.06); }
.hero-media .hexmark svg { width: 30px; height: 30px; }
.trust { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 40px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.14); font-size: .93rem; color: rgba(255,255,255,.84); }
.trust span { display: inline-flex; align-items: center; gap: 10px; }
.trust span::before { content: ""; width: 10px; height: 12px; background: var(--gold); clip-path: var(--hex); }

.page-hero { padding: calc(78px + clamp(44px, 6vw, 76px)) 0 clamp(60px, 7vw, 92px); }
.page-hero .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.page-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); }
.page-hero .hero-media .photo { aspect-ratio: 4 / 3; }

/* Wabenmuster aus dem Logo in dunklen Flächen */
.hero, .band-deep, .site-footer, .cta { position: relative; overflow: hidden; }
.hero::before, .band-deep::before, .site-footer::before, .cta::before {
  content: ""; position: absolute; pointer-events: none; z-index: 0; background: var(--waben) right top / contain no-repeat;
}
.hero::before { width: 560px; height: 441px; right: -40px; top: -30px; opacity: .4; }
.page-hero::before { width: 460px; height: 362px; opacity: .45; }
.band-deep::before { width: 420px; height: 331px; left: -70px; bottom: -40px; opacity: .4; transform: scale(-1, -1); }
.site-footer::before { width: 380px; height: 299px; right: -30px; top: -30px; opacity: .22; }
.cta::before { width: 360px; height: 283px; right: -40px; top: -40px; opacity: .5; filter: brightness(.25); }
.hero > .wrap, .band-deep > .wrap, .site-footer > .wrap { position: relative; z-index: 1; }

/* Unregelmässige Waben, die unter dem Mauszeiger in den dunklen Flächen aufleuchten (main.js setzt --mx/--my und .glow-on) */
.hero, .band-deep, .site-footer, .person-card { --mx: 50%; --my: 50%; }
.person-card { position: relative; }
.person-card > * { position: relative; z-index: 1; }
.hero::after, .band-deep::after, .site-footer::after, .person-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .6s ease;
  background: var(--waben-kachel), radial-gradient(240px circle at var(--mx) var(--my), rgba(219,177,1,.16), rgba(219,177,1,.05) 50%, transparent 72%);
  -webkit-mask-image: radial-gradient(220px circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.5) 45%, transparent 75%);
  mask-image: radial-gradient(220px circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.5) 45%, transparent 75%);
}
.glow-on::after { opacity: 1; }

/* WhatsApp: Hexagon unten rechts */
.wa {
  position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 54px; height: 62px; clip-path: var(--hex);
  background: var(--gold); color: #1f1900; display: grid; place-items: center; text-decoration: none;
  transition: background-color .15s, transform .15s;
}
.wa:hover { background: var(--gold-light); transform: translateY(-3px); }
.wa svg { width: 26px; height: 26px; }
.wa-tip {
  position: fixed; right: 84px; bottom: 36px; z-index: 60; background: var(--deep); color: #fff; font-size: .88rem; font-weight: 600;
  padding: 8px 14px; border-left: 3px solid var(--gold); pointer-events: none; opacity: 0; transform: translateX(6px); transition: .2s ease; white-space: nowrap;
}
.wa:hover + .wa-tip, .wa:focus-visible + .wa-tip { opacity: 1; transform: none; }

/* Split section */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.split.reverse .split-media { order: 2; }
.split-media { position: relative; margin: 0 0 18px 18px; }
.split-media::before { content: ""; position: absolute; inset: 18px 18px -18px -18px; background: var(--gold-soft); border-left: 3px solid var(--gold); }
.split-media img { position: relative; width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* Service cards */
/* Helle Kachel (gewählte Variante C vom 25.10.): dunkelblaue Linie oben, dunkelblaues Hexagon ragt oben heraus,
   beim Drüberfahren wird die ganze Kachel gold und der Balken unten dunkelblau */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; padding-top: 34px; }
.related { padding-top: 34px; }
/* Platz für das Hexagon, das oben aus der Kachel ragt, wenn Kacheln untereinander stehen */
.cards, .related { row-gap: 58px; }
.card {
  position: relative; display: flex; flex-direction: column; min-height: 300px; text-decoration: none; color: var(--ink);
  background: var(--cream); border-top: 4px solid var(--deep); padding: 56px 26px 0;
  transition: transform .25s ease, background-color .3s ease;
}
a.card:hover { transform: translateY(-6px); background: var(--gold); }
.card .nr { position: absolute; top: 14px; right: 22px; font-size: 1rem; font-weight: 800; line-height: 1; color: var(--deep); letter-spacing: .1em; }
.card .nr::before { content: "Leistung "; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .72rem; color: var(--muted); }
.card .ico {
  position: absolute; top: -34px; left: 22px; width: 64px; height: 74px; clip-path: var(--hex);
  background: var(--deep); color: var(--gold-light); display: grid; place-items: center; transition: transform .25s ease;
}
a.card:hover .ico { transform: rotate(30deg); }
a.card:hover .ico svg { transform: rotate(-30deg); }
.card .ico svg { width: 28px; height: 28px; transition: transform .25s ease; }
.card h3 { margin-bottom: 10px; color: var(--deep); font-size: 1.25rem; }
.card p { font-size: .95rem; color: var(--muted); margin-bottom: 22px; }
a.card:hover h3, a.card:hover .nr, a.card:hover .nr::before { color: #1f1900; }
a.card:hover p { color: #3d3200; }
.card .more {
  margin: auto -26px 0; padding: 15px 26px; border-top: 1px solid var(--line);
  font-weight: 700; font-size: .93rem; color: var(--deep); display: flex; align-items: center; justify-content: space-between; gap: 6px;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.card .more svg { width: 18px; height: 18px; transition: transform .2s; }
a.card:hover .more { background: var(--deep); color: var(--gold-light); border-top-color: transparent; }
a.card:hover .more svg { transform: translateX(4px); }

.band-cream { background: var(--cream); }
.band-deep { background: var(--deep); color: #fff; }
.band-deep h2, .band-deep h3 { color: #fff; }
.band-deep p { color: rgba(255,255,255,.82); }
.band-deep .eyebrow { color: var(--gold-light); }

/* Ablauf: nummerierte Hexagone auf einer Linie */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; counter-reset: step; position: relative; }
.steps::before { content: ""; position: absolute; left: 27px; right: calc((100% - 48px) / 3 - 27px); top: 31px; height: 2px; background: var(--gold); opacity: .55; }
.step { position: relative; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: relative; display: grid; place-items: center; width: 54px; height: 62px; clip-path: var(--hex);
  background: var(--gold); color: #1f1900; font-weight: 800; margin-bottom: 18px;
}
.step-body { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--deep); padding: 24px 24px 26px; height: calc(100% - 80px); }
.step h3 { margin-bottom: 6px; }
.step p { margin: 0; color: var(--muted); font-size: .96rem; }

/* Tags */
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 28px 0 0; }
.tags li { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--gold); color: var(--deep); padding: 7px 14px; font-weight: 600; font-size: .92rem; }

/* Quote */
.quote-band { text-align: center; }
.quote-band blockquote { margin: 0 auto; max-width: 840px; font-size: clamp(1.4rem, 2.6vw, 2.05rem); line-height: 1.35; font-weight: 700; color: #fff; }
.quote-band .credo { font-size: inherit; line-height: inherit; color: inherit; margin: 0; letter-spacing: 0; font-weight: inherit; }
.quote-band .eyebrow::after { display: none; }
.quote-band cite { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 22px; font-style: normal; font-size: .95rem; font-weight: 600; color: var(--gold-light); }
.quote-band cite::before { content: ""; width: 34px; height: 2px; background: var(--gold); }

/* Testimonials */
.testimonials { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
@media (max-width: 1179px) { .testimonials { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } }
.testimonial { position: relative; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--gold); padding: 28px 22px 24px; margin: 0; display: flex; flex-direction: column; }
.testimonial::after { content: "»"; position: absolute; right: 26px; top: 6px; font-size: 5rem; line-height: 1; font-weight: 800; color: var(--gold-soft); }
.testimonial img { position: relative; z-index: 1; height: 44px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; margin-bottom: 22px; }
.ref-hex { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 50px; clip-path: var(--hex); background: var(--deep); color: var(--gold-light); margin-bottom: 20px; }
.ref-hex svg { width: 20px; height: 20px; }
.testimonial blockquote { position: relative; z-index: 1; margin: 0 0 22px; font-size: .95rem; line-height: 1.65; }
.testimonial figcaption { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .92rem; }
.testimonial figcaption b { display: block; color: var(--ink); }

/* Skills als Boxen (Über mich): 4 Bereiche, eckige Chips, abwechselnd dunkelblau und gold */
.skills-kopf { align-items: center; }
.skill-zahl { display: inline-flex; align-items: center; gap: 16px; margin-top: 10px; }
.skill-zahl b { display: grid; place-items: center; width: 92px; height: 106px; clip-path: var(--hex); background: var(--deep); color: var(--gold-light); font-size: 1.7rem; font-weight: 800; }
.skill-zahl span { font-weight: 700; color: var(--deep); font-size: 1.05rem; max-width: 12em; line-height: 1.3; }
.skill-boxen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: clamp(48px, 6vw, 72px); }
.skill-box { background: var(--cream); border-top: 4px solid var(--deep); padding: 26px 22px 24px; }
.skill-box.gold { border-top-color: var(--gold); }
.skill-titel { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.skill-titel h3 { margin: 0; font-size: 1.15rem; }
.skill-ico { flex: none; display: grid; place-items: center; width: 46px; height: 53px; clip-path: var(--hex); background: var(--deep); color: var(--gold-light); }
.skill-box.gold .skill-ico { background: var(--gold); color: #1f1900; }
.skill-ico svg { width: 22px; height: 22px; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--deep); padding: 6px 11px; font-size: .88rem; font-weight: 600; color: var(--deep); line-height: 1.35; }
.skill-box.gold .chips li { border-left-color: var(--gold); }
@media (max-width: 1060px) { .skill-boxen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .skill-boxen { grid-template-columns: minmax(0, 1fr); } .skill-zahl b { width: 78px; height: 90px; font-size: 1.45rem; } }

/* Skills */
.skills { columns: 2; column-gap: 28px; list-style: none; padding: 0; margin: 26px 0 0; }
.skills li { break-inside: avoid; display: flex; gap: 12px; margin-bottom: 12px; }
.skills li::before { content: ""; flex: none; width: 18px; height: 21px; margin-top: 3px; clip-path: var(--hex); background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1900' stroke-width='3.4' stroke-linecap='square'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; }

/* CTA */
.cta { background: var(--gold); padding: clamp(34px, 5vw, 60px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%); }
.cta > * { position: relative; z-index: 1; }
.cta h2 { margin-bottom: .3em; color: #1f1900; }
.cta p { margin: 0; color: #3d3200; font-size: 1.05rem; }
.cta .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cta .btn-line { color: #1f1900; }
.cta .btn-line:hover { background: #1f1900; color: var(--gold); box-shadow: inset 0 0 0 2px #1f1900; }

/* Dienstleistungen als Waben (Startseite) */
.svc-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.hexgrid {
  --w: min(163px, 12.6vw); --g: 8px; --h: calc(var(--w) * 1.1547); --step: calc(var(--w) + var(--g)); --vstep: calc(var(--h) * .75 + var(--g) * .866);
  position: relative; z-index: 1; width: calc(var(--step) * 3.5 - var(--g)); height: calc(var(--vstep) * 2 + var(--h)); margin-left: auto;
}
.hx {
  --px: var(--x); --py: var(--y);
  position: absolute; left: calc(var(--px) * var(--step) / 2); top: calc(var(--py) * var(--vstep)); width: var(--w); height: var(--h);
  clip-path: var(--hex); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0 16px;
  text-align: center; text-decoration: none; transition: transform .2s ease, background-color .2s ease;
}
.hx > * { position: relative; z-index: 1; }
.hx h3 { margin: 0; font-size: 1rem; line-height: 1.2; color: inherit; -webkit-hyphens: auto; hyphens: auto; }
.hx .ico svg { width: 30px; height: 30px; }
.hx .more svg { width: 18px; height: 18px; transition: transform .2s; }
a.hx:hover { transform: translateY(-5px); }
a.hx:hover .more svg { transform: translateX(4px); }
.hx-gold { background: var(--gold); color: #1f1900; }
.hx-gold:hover { background: var(--gold-light); }
/* dunkle Wabe mit goldener Kontur: Gold dahinter, dunkle Fläche 2px kleiner darüber */
.hx-dunkel { background: var(--gold); color: #fff; }
.hx-dunkel::before { content: ""; position: absolute; inset: 2px; clip-path: var(--hex); background: var(--deep-2); transition: background-color .2s; }
.hx-dunkel .ico { color: var(--gold-light); }
.hx-dunkel:hover::before { background: #1f4a4f; }
.hx-leer { background: rgba(219,177,1,.35); }
.hx-leer::before { content: ""; position: absolute; inset: 1.5px; clip-path: var(--hex); background: var(--deep); }
.hx-voll { background: rgba(219,177,1,.14); }
.hx-voll::before { display: none; }
.services-band::before { left: auto; right: -60px; bottom: auto; top: -40px; transform: none; opacity: .3; }

.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 22px; margin-top: 30px; }

/* Form */
.form-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 48px; align-items: start; }
.form-card { background: #fff; padding: clamp(26px, 4vw, 46px); border: 1px solid var(--line); border-top: 4px solid var(--gold); box-shadow: 0 22px 48px rgba(16,41,44,.08); }
.form-card h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
form .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-weight: 600; font-size: .92rem; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--ink); background: #fbfaf6;
  border: 1.5px solid #d9d4c2; border-radius: 0; padding: 12px 14px; width: 100%;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: #fff; box-shadow: 0 0 0 3px rgba(219,177,1,.22); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .85rem; color: var(--muted); margin: 6px 0 18px; }
.form-note a { color: var(--gold-dark); }
.form-status { display: none; padding: 14px 16px; margin-top: 16px; font-weight: 600; border-left: 4px solid; }
.form-status.ok { display: block; background: #e7f5ec; color: #1d6b3a; }
.form-status.err { display: block; background: #fdecea; color: #8a2a1f; }
.person-card { background: var(--deep); color: #fff; overflow: hidden; }
.person-card img { width: 100%; aspect-ratio: 4/3.2; object-fit: cover; object-position: 55% 30%; }
.person-card .body { padding: 26px 28px 30px; border-top: 4px solid var(--gold); }
.person-card h3 { color: #fff; margin-bottom: 2px; }
.person-card .role { color: var(--gold-light); font-size: .92rem; margin-bottom: 16px; }
.person-card p { color: rgba(255,255,255,.8); }
.person-card ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; }
.person-card ul a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.person-card ul a:hover { color: var(--gold-light); }
.person-card ul svg { width: 18px; height: 18px; color: var(--gold); }
.person-card .btn { width: 100%; }

/* ---------- Blog: Artikel ---------- */
.lesefortschritt { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 70; pointer-events: none; }
.lesefortschritt span { display: block; height: 100%; width: 100%; background: var(--gold); transform: scaleX(var(--fortschritt, 0)); transform-origin: left; }
.artikel-hero { padding-bottom: clamp(140px, 16vw, 200px); }
.artikel-hero h1 { max-width: 22em; font-size: clamp(2rem, 4vw, 3rem); }
.artikel-hero .lead { max-width: 46em; }
.artikel-meta { display: flex; align-items: center; gap: 14px; margin-top: 28px; font-size: .92rem; color: rgba(255,255,255,.8); line-height: 1.5; }
.artikel-meta a { color: #fff; font-weight: 700; text-decoration: none; }
.artikel-meta a:hover { color: var(--gold-light); }
.autor-hex { flex: none; display: grid; place-items: center; width: 46px; height: 53px; clip-path: var(--hex); background: var(--gold); color: #1f1900; font-weight: 800; font-size: .95rem; letter-spacing: .02em; }
.autor-hex.gross { width: 70px; height: 80px; font-size: 1.3rem; }
.artikel-titelbild { position: relative; margin-top: calc(-1 * clamp(110px, 13vw, 160px)); }
.artikel-titelbild::before { content: ""; position: absolute; inset: 20px 4px -20px 44px; border: 2px solid var(--gold); }
.artikel-titelbild .photo { position: relative; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: 50% 35%; }
.artikel { padding-top: clamp(56px, 7vw, 88px); }
.artikel-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 64px; align-items: start; }
.toc { position: sticky; top: 104px; border-left: 3px solid var(--line); padding-left: 18px; font-size: .92rem; }
.toc-titel { font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 12px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.toc a { display: block; position: relative; padding: 6px 0; text-decoration: none; color: var(--muted); line-height: 1.35; transition: color .15s; }
.toc a:hover { color: var(--deep); }
.toc a.aktiv { color: var(--deep); font-weight: 700; }
.toc a.aktiv::before { content: ""; position: absolute; left: -21px; top: 6px; bottom: 6px; width: 3px; background: var(--gold); }
.prose { max-width: 760px; font-size: 1.06rem; line-height: 1.8; }
.prose section { scroll-margin-top: 100px; padding: 0; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 2.2em 0 .7em; padding-top: .2em; }
.prose h2::before { content: ""; display: block; width: 14px; height: 16px; clip-path: var(--hex); background: var(--gold); margin-bottom: 14px; }
.prose a { color: var(--deep); text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 600; }
.prose a:hover { color: var(--gold-dark); }
.kernpunkte { background: var(--cream); border-left: 4px solid var(--gold); padding: 24px 28px 18px; }
.kp-titel { font-weight: 800; color: var(--deep); font-size: 1.1rem; margin-bottom: 10px; }
.kernpunkte ul, .haken-liste { list-style: none; padding: 0; margin: 0 0 1em; }
.kernpunkte li, .haken-liste li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.kernpunkte li::before, .haken-liste li::before { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 18px; clip-path: var(--hex); background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1900' stroke-width='3.4' stroke-linecap='square'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat; }
.fehler-liste li::before { background: var(--deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4cc52' stroke-width='3.4' stroke-linecap='square'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/9px no-repeat; }
.schritte { list-style: none; padding: 0; margin: 1.4em 0; counter-reset: schritt; display: grid; gap: 12px; }
.schritte li { counter-increment: schritt; position: relative; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--deep); padding: 16px 20px 16px 74px; min-height: 72px; }
.schritte li::before { content: counter(schritt); position: absolute; left: 16px; top: 14px; display: grid; place-items: center; width: 40px; height: 46px; clip-path: var(--hex); background: var(--deep); color: var(--gold-light); font-weight: 800; }
/* Einwände als Karten */
.einwand { margin: 30px 0; padding: 28px 30px 10px; background: var(--cream); border-top: 4px solid var(--deep); scroll-margin-top: 100px; }
.ew-kopf { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
/* Handy: Einwand- und Baustein-Karten zum Aufklappen (main.js setzt .klappbar und .zu) */
.einwand.klappbar .ew-kopf { cursor: pointer; position: relative; padding-right: 40px; margin-bottom: 0; }
.einwand.klappbar .ew-kopf::after { content: ""; position: absolute; right: 0; top: 50%; width: 28px; height: 28px; margin-top: -14px; background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1900' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center/13px no-repeat; }
.einwand.klappbar.zu .ew-kopf::after { background-color: var(--deep); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4cc52' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.einwand.klappbar:not(.zu) .ew-kopf { margin-bottom: 14px; }
.einwand.klappbar.zu > :not(.ew-kopf) { display: none; }
.einwand.klappbar.zu { padding-bottom: 22px; margin: 12px -4px; }
.ew-nr { flex: none; display: grid; place-items: center; width: 48px; height: 55px; clip-path: var(--hex); background: var(--deep); color: var(--gold-light); font-weight: 800; }
.einwand h3 { margin: 0; font-size: 1.3rem; }
.ew-tipp { border-top: 1px solid var(--line); padding-top: 14px; font-size: .98rem; }
/* Gesprächsbeispiel als eckige Sprechblasen (wie im Logo) */
.dialog { display: grid; gap: 10px; margin: 18px 0 20px; }
.dialog p { position: relative; margin: 0; padding: 14px 18px 16px; max-width: 88%; font-size: 1rem; line-height: 1.6; }
.dialog span { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; }
.d-kunde { background: #fff; border: 1px solid var(--line); justify-self: start; clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.d-kunde span { color: var(--muted); }
.d-du { background: var(--deep); color: #fff; justify-self: end; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
.d-du span { color: var(--gold-light); }
.artikel-bild { margin: 8px 0 20px; }
.artikel-bild.rechts { float: right; width: 42%; margin: 6px 0 18px 28px; }
.artikel-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; border-bottom: 4px solid var(--gold); }
.artikel-bild figcaption { font-size: .85rem; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.prose section::after { content: ""; display: table; clear: both; }
/* Vorlage (Blog): eine Seite Leitfaden zum Kopieren */
.vorlage { margin: 24px 0; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--gold); padding: 24px 26px 10px; }
.vorlage-titel { font-weight: 800; color: var(--deep); font-size: 1.1rem; margin-bottom: 14px; }
.vorlage dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 0; margin: 0; }
.vorlage dt, .vorlage dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--line); font-size: .97rem; }
.vorlage dt { font-weight: 700; color: var(--deep); padding-right: 14px; }
@media (max-width: 560px) { .vorlage dl { grid-template-columns: minmax(0, 1fr); } .vorlage dd { border-top: 0; padding-top: 0; } }
.autor-box { display: flex; gap: 22px; align-items: flex-start; margin-top: 56px; padding: 28px; background: var(--deep); color: rgba(255,255,255,.82); font-size: .98rem; }
.autor-box a { color: var(--gold-light); }
.autor-name { color: #fff; font-weight: 800; font-size: 1.15rem; margin: 0 0 2px; }
.autor-rolle { color: var(--gold-light); font-size: .88rem; margin-bottom: 10px; }
.prose .faq { margin-top: 20px; }

/* ---------- Blog: Übersicht ---------- */
.posts { display: grid; gap: 34px; }
.post-karte { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); text-decoration: none; color: var(--ink); background: var(--cream); border-top: 4px solid var(--deep); transition: transform .25s ease, background-color .3s ease; }
.post-bild { overflow: hidden; }
.post-bild img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
.post-text { display: flex; flex-direction: column; padding: clamp(26px, 4vw, 44px); }
.post-text h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.post-text p { color: var(--muted); }
.post-meta { font-size: .88rem; }
.post-karte .more { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--deep); }
.post-karte .more svg { width: 18px; height: 18px; transition: transform .2s; }
.post-karte:hover { transform: translateY(-4px); background: var(--gold); }
.post-karte:hover .post-bild img { transform: scale(1.04); }
.post-karte:hover p, .post-karte:hover .eyebrow { color: #3d3200; }
.post-karte:hover .more svg { transform: translateX(4px); }
/* «Neu» (main.js zeigt es nur in den ersten 30 Tagen) */
.neu-badge { display: inline-block; margin-left: 8px; padding: 3px 9px; background: var(--gold); color: #1f1900; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; vertical-align: middle; clip-path: var(--cut); }
.neu-badge[hidden] { display: none; }
/* Ältere Beiträge als Kacheln unter dem grossen */
.post-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 34px; }
.post-klein { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); background: var(--cream); border-top: 4px solid var(--deep); transition: transform .25s ease, background-color .3s ease; }
.post-klein[hidden] { display: none; }
.post-klein-bild { position: relative; overflow: hidden; }
.post-klein-bild img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s ease; }
.post-klein-bild .neu-badge { position: absolute; top: 14px; right: 14px; margin: 0; }
.post-chip { position: absolute; left: 14px; top: 14px; background: var(--deep); color: var(--gold-light); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; }
.post-klein h2, .post-klein h3 { font-size: 1.2rem; margin: 20px 22px 8px; }
/* Weiterlesen am Ende eines Blogbeitrags */
.weiterlesen { padding-top: 0; }
.weiterlesen-titel { display: flex; align-items: center; gap: 14px; font-size: clamp(1.5rem, 2.6vw, 2rem); padding-top: 40px; border-top: 1px solid var(--line); }
.weiterlesen-titel svg { width: 30px; height: 30px; color: var(--gold-dark); }
.weiterlesen .post-raster { margin-top: 26px; }
.post-klein .post-meta { color: var(--muted); margin: auto 22px 22px; }
.post-klein:hover { transform: translateY(-4px); background: var(--gold); }
.post-klein:hover img { transform: scale(1.04); }
.post-klein:hover .post-meta { color: #3d3200; }
/* Umschalter 1 / 3 – eckig */
.pager { display: flex; align-items: center; justify-content: center; margin-top: 44px; }
.pager span { padding: 0 22px; font-weight: 700; color: var(--deep); }
.pager button { display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid var(--deep); background: #fff; color: var(--deep); cursor: pointer; transition: background-color .15s, color .15s; }
.pager button svg { width: 18px; height: 18px; }
.pager-zurueck svg { transform: rotate(180deg); }
.pager button:hover:not(:disabled) { background: var(--deep); color: var(--gold-light); }
.pager button:disabled { opacity: .3; cursor: default; }
@media (max-width: 960px) { .post-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .post-raster { grid-template-columns: minmax(0, 1fr); } }

/* Legal */
.legal { max-width: 820px; }
.legal h2 { font-size: 1.25rem; margin-top: 2em; }
.legal p, .legal li { color: #3a4547; }
.legal a { color: var(--gold-dark); }
.legal .box { background: var(--cream); border-left: 4px solid var(--gold); padding: 22px 26px; margin: 24px 0; }

/* Footer */
.site-footer { background: var(--deep-3); color: rgba(255,255,255,.72); font-size: .94rem; padding: 68px 0 28px; border-top: 4px solid var(--gold); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.site-footer .brand { color: #fff; margin-bottom: 18px; }
.site-footer .brand-text span { color: rgba(255,255,255,.6); }
.site-footer .foot-titel { color: var(--gold-light); font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin: 6px 0 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer a { color: rgba(255,255,255,.84); text-decoration: none; }
.site-footer a:hover { color: var(--gold-light); }
.foot-bottom { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .86rem; }
.foot-bottom nav { display: flex; gap: 22px; flex-wrap: wrap; }

/* FAQ */
.faq { max-width: 880px; margin: 44px auto 0; display: grid; gap: 10px; }
.faq details { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--line); padding: 0 24px; transition: border-color .15s, box-shadow .15s; }
.faq details:hover { border-left-color: var(--gold-light); }
.faq details[open] { border-left-color: var(--gold); box-shadow: 0 16px 34px rgba(16,41,44,.08); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative; font-weight: 700; font-size: 1.05rem; color: var(--deep); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 0; top: 50%; width: 28px; height: 28px; margin-top: -14px; background: var(--deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4cc52' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/13px no-repeat; transition: transform .2s; }
.faq details[open] summary::after { background-color: var(--gold); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1900' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.faq details p { margin: 0 0 22px; color: var(--muted); max-width: 70ch; }
.faq-section { background: var(--cream); }
.faq-section.faq-white { background: #fff; padding-top: 0; }

/* FAQ-Übersichtsseite */
.faq-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.faq-jump a { color: #fff; text-decoration: none; font-size: .92rem; font-weight: 600; padding: 8px 16px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); transition: background-color .15s, box-shadow .15s, color .15s; }
.faq-jump a:hover { box-shadow: inset 0 0 0 1.5px var(--gold); color: var(--gold-light); }
.faq-page { padding-top: clamp(48px, 6vw, 72px); }
.faq-group { scroll-margin-top: 100px; }
.faq-group + .faq-group { margin-top: 52px; }
.faq-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 880px; margin: 0 auto 4px; border-bottom: 3px solid var(--gold); padding-bottom: 10px; }
.faq-group-head h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin: 0; }
.faq-group-head a { color: var(--gold-dark); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-size: .95rem; }
.faq-group-head a svg { width: 16px; height: 16px; }
.faq-group .faq { margin-top: 18px; }
.legal .btn-dark { color: #fff; text-decoration: none; margin-top: 6px; }

/* Responsive */
@media (max-width: 1060px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu > li > a:not(.btn) { padding: 10px 10px; }
  .menu > li > a:not(.btn)::after { left: 10px; right: 10px; }
}
@media (max-width: 960px) {
  .hero-grid, .page-hero .hero-grid, .split, .form-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .split.reverse .split-media { order: 0; }
  /* Startseite: nicht zwei Fotos direkt hintereinander (Text zuerst, Foto danach) */
  .split-home .split-media { order: 2; }
  .steps, .testimonials, .related { grid-template-columns: minmax(0, 1fr); }
  .svc-split { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .artikel-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .toc { position: static; background: var(--cream); border-left: 4px solid var(--gold); padding: 18px 20px; }
  .toc a.aktiv::before { display: none; }
  .post-karte { grid-template-columns: minmax(0, 1fr); }
  .hexgrid { margin: 0 auto; --w: min(163px, calc((100vw - 48px) / 3.5 - 8px)); }
  .steps::before { left: 26px; right: auto; top: 30px; bottom: 30px; width: 2px; height: auto; }
  .step { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 18px; align-items: start; }
  .step::before { margin: 0; }
  .step-body { height: auto; }
  .cta { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px) {
  .menu-toggle { display: block; }
  .menu {
    display: none; position: absolute; top: 78px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 3px solid var(--gold); padding: 8px 16px 18px; max-height: calc(100vh - 78px); overflow-y: auto;
  }
  .menu.open { display: flex; }
  .menu > li > a:not(.btn), .site-header:not(.solid) .menu > li > a:not(.btn) { display: flex; padding: 13px 8px; border-bottom: 1px solid var(--line); color: var(--ink); }
  .menu > li > a:not(.btn)::after { display: none; }
  .menu > li > a[aria-current="page"] { color: var(--gold-dark); }
  .has-sub > a svg { display: none; }
  .nav .sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 4px 0 6px 12px; min-width: 0; }
  .nav .sub a small { display: none; }
  .menu .btn { margin: 14px 0 0; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  h1, h2, h3, .faq summary { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
  h1, .page-hero h1 { font-size: clamp(1.85rem, 8.2vw, 2.4rem); }
  .eyebrow { max-width: 100%; letter-spacing: .14em; overflow-wrap: anywhere; }
  .eyebrow::after { display: none; }
  .wrap { padding: 0 16px; }
  .hero { padding-top: calc(78px + 22px); }
  .brand img { width: 54px; }
  .brand-text span { display: none; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .card { min-height: 0; }
  .skills { columns: 1; }
  form .row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero-actions .btn, .cta .actions .btn { width: 100%; }
  .hero-media { margin: 0 14px 14px 0; }
  .hero-media::before { inset: 14px -14px -14px 14px; }
  .hero-media .hexmark { display: none; }
  .split-media { margin: 0 0 12px 12px; }
  .split-media::before { inset: 12px 12px -12px -12px; }
  .hero::before { width: 340px; height: 268px; right: -110px; opacity: .35; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .testimonial { padding: 28px 22px 24px; }
  .wa { right: 12px; bottom: 12px; width: 48px; height: 55px; }
  /* Grössere Tippflächen auf dem Handy; unten Platz, damit der WhatsApp-Knopf keine Footer-Links verdeckt */
  .site-footer { padding-bottom: 90px; }
  .site-footer ul a, .foot-bottom nav a { display: inline-block; padding: 7px 0; }
  .site-footer ul { gap: 2px; }
  .person-card ul a { padding: 7px 0; }
  .faq-group-head a { padding: 8px 0; }
  .wa svg { width: 23px; height: 23px; }
  .wa-tip { display: none; }
  /* Waben auf dem Handy: 2 + 2, leere Waben weg */
  .hexgrid { --w: min(150px, calc((100vw - 32px) / 2.5 - 8px)); width: calc(var(--step) * 2.5 - var(--g)); height: calc(var(--vstep) + var(--h)); }
  .hx { --px: var(--x2); --py: var(--y2); padding: 0 10px; gap: 5px; }
  .hx-leer { display: none; }
  /* Blog auf dem Handy */
  .artikel-titelbild::before { inset: 12px -4px -12px 20px; }
  .artikel-titelbild .photo { aspect-ratio: 4 / 3; }
  .artikel-bild.rechts { float: none; width: 100%; margin: 6px 0 20px; }
  .artikel-bild img { aspect-ratio: 4 / 3; }
  .einwand { padding: 22px 18px 6px; margin: 24px -4px; }
  .dialog p { max-width: 100%; }
  .schritte li { padding-left: 66px; }
  .autor-box { flex-direction: column; }
  .prose { font-size: 1rem; }
  .hx h3 { font-size: .9rem; }
  .hx .ico svg { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }