/* Qlickfang Redesign 2026 · Entwurf
   Farben aus der bestehenden CI (qlickfang.com + Collagen ausgemessen),
   Schriften aus der bestehenden Installation (Satoshi, Inter), selbst gehostet. */

@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Variable.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --gruen: #23B96E;          /* Qlickfang-Grün, live gemessen */
  --gruen-ton: #1FA863;      /* Ton-in-Ton auf Grün */
  --gelb: #F0E150;           /* Gelb der Collagen */
  --schwarz: #000000;
  --ink: #111111;
  --text: #333333;           /* Fließtext wie live */
  --text-2: #5C5C5C;
  --grau-1: #F2F2F2;         /* Kartenfläche wie live */
  --grau-0: #FAFAFA;         /* Sektionsfläche wie live */
  --linie: #E0E0E0;
  --weiss: #FFFFFF;

  --f-display: "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --f-text: "Inter", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1312px;
  --rand: clamp(20px, 4vw, 56px);
  --abschnitt: clamp(88px, 10vw, 160px);
  --radius: 24px;
  --kopf-h: 88px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-h) + 16px); }
body {
  margin: 0; background: var(--weiss); color: var(--text);
  font-family: var(--f-text); font-size: 18px; line-height: 1.65; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-family: var(--f-display); font-weight: 700; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--schwarz); outline-offset: 3px; border-radius: 4px; }
/* Fokus auf schwarzen Flächen grün (8,2:1), auf Weiß, Grau und Grün schwarz (ab 8,2:1) */
:is(.auf-dunkel, .band--schwarz, .menue, .kopf--dunkel) :focus-visible { outline-color: var(--gruen); }
.nowrap { white-space: nowrap; }
@media (max-width: 600px) { .nowrap { white-space: normal; } }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--schwarz); color: var(--weiss); padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--rand); }
.abschnitt { padding-block: var(--abschnitt); position: relative; }
.abschnitt--eng { padding-block: clamp(56px, 6vw, 96px); }

/* ---------- Typografie ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-text); font-size: 13px; font-weight: 600; line-height: 1.2;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
  margin: 0 0 28px;
}
.eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--gruen); flex: none; }
.auf-dunkel .eyebrow, .eyebrow--hell { color: var(--weiss); }
.auf-gruen .eyebrow::before { background: var(--schwarz); }

.d-xl { font-family: var(--f-display); font-weight: 700; font-size: clamp(44px, 6vw, 92px); line-height: 1.06; letter-spacing: -.035em; color: var(--ink); }
.d-l  { font-family: var(--f-display); font-weight: 700; font-size: clamp(38px, 5vw, 76px); line-height: 1.06; letter-spacing: -.032em; color: var(--ink); }
.d-m  { font-family: var(--f-display); font-weight: 700; font-size: clamp(32px, 3.6vw, 54px); line-height: 1.06; letter-spacing: -.028em; color: var(--ink); }
.h-l  { font-family: var(--f-display); font-weight: 700; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.15; letter-spacing: -.02em; color: var(--ink); }
.h-m  { font-family: var(--f-display); font-weight: 700; font-size: clamp(22px, 1.8vw, 26px); line-height: 1.2; letter-spacing: -.012em; color: var(--ink); }
.lead { font-family: var(--f-text); font-weight: 300; font-size: clamp(21px, 1.85vw, 27px); line-height: 1.45; letter-spacing: -.01em; color: var(--ink); }
.klein { font-size: 15px; line-height: 1.6; }
.text-2 { color: var(--text-2); }
.auf-dunkel { color: #CFCFCF; }
.auf-dunkel :where(h1, h2, h3, h4, .d-xl, .d-l, .d-m, .h-l, .h-m, .lead) { color: var(--weiss); }
.auf-gruen { color: var(--ink); }

/* Marker: die schwarzen Boxen aus dem bestehenden Hero, jetzt als durchgehendes Stilmittel */
.mk {
  --mk-bg: var(--schwarz); --mk-fg: var(--weiss);
  --mk-h: 100%;
  color: var(--mk-fg);
  background: linear-gradient(var(--mk-bg), var(--mk-bg)) no-repeat 0 50% / 100% var(--mk-h);
  padding: 0 .14em; margin-inline: -.02em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.mk--g { --mk-bg: var(--gruen); --mk-fg: var(--weiss); }
.mk--y { --mk-bg: var(--gelb); --mk-fg: var(--schwarz); }
.mk--w { --mk-bg: var(--weiss); --mk-fg: var(--schwarz); }
.js-anim .mk { background-size: 0% var(--mk-h); color: inherit; transition: background-size .7s cubic-bezier(.7,0,.2,1), color .2s .35s; }
.js-anim .mk.ist-da { background-size: 100% var(--mk-h); color: var(--mk-fg); }

:is(.d-xl, .d-l, .d-m) .mk { --mk-h: 1.06em; }
.h-l .mk, .h-m .mk { --mk-h: 1.15em; }

/* Riesige Wörter im Hintergrund */
.ghost {
  position: absolute; left: 0; right: 0; pointer-events: none; user-select: none;
  font-family: var(--f-display); font-weight: 700; line-height: .8; letter-spacing: -.045em;
  font-size: clamp(120px, 21vw, 340px); white-space: nowrap; color: var(--grau-1);
  overflow: hidden; z-index: 0;
}
.ghost--rechts { text-align: right; }
.auf-gruen .ghost { color: var(--gruen-ton); }
.auf-dunkel .ghost { color: #151515; }
.abschnitt > .wrap { position: relative; z-index: 1; }

/* ---------- Buttons & Links ---------- */
.btn {
  --b-bg: var(--gruen); --b-fg: var(--weiss); --b-bd: var(--gruen);
  display: inline-flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 30px;
  border-radius: 999px; border: 2px solid var(--b-bd); background: var(--b-bg); color: var(--b-fg);
  font-family: var(--f-text); font-size: 17px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn svg { width: 20px; height: 20px; transition: transform .25s; }
.btn:hover { --b-bg: var(--schwarz); --b-fg: var(--weiss); --b-bd: var(--schwarz); }
.btn:hover svg { transform: translateX(4px); }
.btn--rand { --b-bg: transparent; --b-fg: var(--ink); --b-bd: var(--ink); }
.btn--schwarz { --b-bg: var(--schwarz); --b-fg: var(--weiss); --b-bd: var(--schwarz); }
.btn--schwarz:hover { --b-bg: var(--weiss); --b-fg: var(--schwarz); --b-bd: var(--schwarz); }
.auf-dunkel .btn:hover { --b-bg: var(--weiss); --b-fg: var(--schwarz); --b-bd: var(--weiss); }
.auf-dunkel .btn--rand { --b-fg: var(--weiss); --b-bd: var(--weiss); }
.auf-gruen .btn { --b-bg: var(--schwarz); --b-fg: var(--weiss); --b-bd: var(--schwarz); }
.auf-gruen .btn:hover { --b-bg: var(--weiss); --b-fg: var(--schwarz); --b-bd: var(--weiss); }
.btn--klein { min-height: 46px; padding: 0 22px; font-size: 15px; }
.btn-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 40px; }

.link-pfeil {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; color: var(--ink);
  text-decoration: none; border-bottom: 2px solid var(--gruen); padding-bottom: 4px;
}
.link-pfeil svg { width: 18px; height: 18px; transition: transform .25s; }
.link-pfeil:hover svg { transform: translateX(4px); }
.auf-dunkel .link-pfeil { color: var(--weiss); }

.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: saturate(1.4) blur(8px); transition: box-shadow .25s; }
.kopf.ist-gescrollt { box-shadow: 0 1px 0 var(--linie); }
.kopf__innen { height: var(--kopf-h); display: flex; align-items: center; gap: 28px; }
.kopf__logo { color: var(--schwarz); display: block; margin-right: auto; flex: none; }
.kopf__logo svg { width: 158px; height: auto; max-width: none; }
.menue-knopf {
  display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer;
  font-size: 16px; font-weight: 600; color: var(--ink); padding: 10px 4px;
}
.menue-knopf .ic { width: 20px; height: 20px; transition: transform .3s; }
.menue-knopf[aria-expanded="true"] .ic { transform: rotate(45deg); }
@media (max-width: 640px) { .kopf__cta { display: none; } .kopf__logo svg { width: 132px; } :root { --kopf-h: 72px; } }

/* Vollbild-Menü */
.menue { position: fixed; inset: 0; z-index: 60; background: var(--schwarz); color: var(--weiss); overflow-y: auto; display: none; }
.menue.ist-offen { display: block; animation: menue-rein .35s cubic-bezier(.2,.7,.2,1); }
@keyframes menue-rein { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.menue .kopf__innen { color: var(--weiss); }
.menue .kopf__logo { color: var(--weiss); }
.menue .menue-knopf { color: var(--weiss); }
.menue__raster { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; padding-block: 48px 72px; }
.menue__gruppe h2 { font-family: var(--f-text); font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gruen); margin-bottom: 20px; }
.menue__gruppe ul { list-style: none; display: grid; gap: 6px; }
.menue__gruppe a { font-family: var(--f-display); font-weight: 700; font-size: clamp(28px, 3.2vw, 46px); letter-spacing: -.025em; line-height: 1.15; text-decoration: none; color: var(--weiss); }
.menue__gruppe a:hover { color: var(--gruen); }
.menue__gruppe--klein a { font-size: clamp(22px, 2vw, 28px); }
.menue__fuss { border-top: 1px solid #2A2A2A; padding-block: 28px; display: flex; flex-wrap: wrap; gap: 16px 40px; font-size: 16px; }
.menue__fuss a { color: var(--weiss); text-decoration: none; display: inline-flex; gap: 10px; align-items: center; }
@media (max-width: 900px) { .menue__raster { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- Hero ---------- */
.held { position: relative; padding-block: clamp(40px, 5vw, 72px) clamp(72px, 8vw, 120px); overflow: hidden; }
.held__raster { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 3vw, 48px); align-items: center; }
.held .d-xl { font-size: clamp(34px, 3.9vw, 56px); line-height: 1.1; text-wrap: balance; }
.held .d-xl .mk { --mk-h: 1.1em; }
.held .held__lead { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.55; }
.held h1 { margin: 0; }
.held h1 .eyebrow { display: flex; }
.held__lead { margin-top: 36px; max-width: 34em; }
.held__bild { position: relative; margin-right: calc(-1 * var(--rand)); margin-left: -8%; }
.held__bild img { width: 100%; }
.held--kompakt .held__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
@media (max-width: 900px) {
  .held__raster, .held--kompakt .held__raster { grid-template-columns: 1fr; }
  .held__bild { margin: 8px auto 0; max-width: 480px; }
}

/* Logo-Laufband */
.laufband { border-block: 1px solid var(--linie); overflow: hidden; padding-block: 26px; }
.laufband__spur { display: flex; gap: 72px; width: max-content; animation: lauf 48s linear infinite; align-items: center; }
.laufband:hover .laufband__spur { animation-play-state: paused; }
/* Logos: gleiche Fläche statt gleicher Höhe, --r = Seitenverhältnis (Breite/Höhe) */
.laufband img { width: min(220px, calc(sqrt(var(--r, 3)) * 78px)); height: auto; max-width: none; max-height: 64px; object-fit: contain; filter: grayscale(1); opacity: .75; }
.laufband img.jpg { mix-blend-mode: multiply; }
@keyframes lauf { to { transform: translateX(-50%); } }

/* ---------- Bänder ---------- */
.band--gruen { background: var(--gruen); }
.band--schwarz { background: var(--schwarz); }
.band--grau { background: var(--grau-1); }
.band--hell { background: var(--grau-0); }
.band--gelb { background: var(--gelb); color: var(--ink); }
.auf-gruen .schritt__name { border-top-color: var(--schwarz); }

.zweispaltig { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.zweispaltig--gleich { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .zweispaltig, .zweispaltig--gleich { grid-template-columns: 1fr; } }

.titel-block { max-width: 1040px; }
.titel-block--mitte { margin-inline: auto; text-align: center; }
.titel-block + * { margin-top: clamp(40px, 5vw, 72px); }

/* „Ihr …“-Liste (Startseite) */
.ihr { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 32px; }
.ihr__wort { font-family: var(--f-display); font-weight: 700; font-size: clamp(96px, 13vw, 210px); line-height: .8; letter-spacing: -.05em; color: var(--gruen); position: sticky; top: calc(var(--kopf-h) + 32px); align-self: start; }
.ihr__liste { list-style: none; border-top: 1.5px solid var(--ink); }
.ihr__liste li { border-bottom: 1.5px solid var(--ink); padding: 26px 0 28px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 12px 40px; align-items: baseline; }
.ihr__was { font-family: var(--f-display); font-weight: 700; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.08; letter-spacing: -.025em; color: var(--ink); }
.ihr__wie { font-weight: 300; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; color: var(--text); }
@media (max-width: 900px) {
  .ihr { grid-template-columns: 1fr; gap: 8px; }
  .ihr__wort { position: static; font-size: 88px; }
  .ihr__liste li { grid-template-columns: 1fr; }
}

/* Leistungs-Zeilen */
.zeilen { list-style: none; border-top: 1.5px solid var(--ink); }
.zeile { position: relative; border-bottom: 1.5px solid var(--ink); isolation: isolate; }
.zeile::before { content: ""; position: absolute; inset: 0; background: var(--gruen); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.7,0,.2,1); z-index: -1; }
.zeile:hover::before, .zeile:focus-within::before { transform: scaleX(1); }
.zeile__innen { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px 48px; align-items: start; padding: 36px 8px 38px; }
.zeile__rechts { display: grid; gap: 20px; padding-top: 6px; }
.zeile__titel { font-family: var(--f-display); font-weight: 700; font-size: clamp(28px, 3vw, 44px); line-height: 1.04; letter-spacing: -.028em; color: var(--ink); }
.zeile__text { font-size: 18px; line-height: 1.55; color: var(--text); margin: 0; }
.zeile:hover .zeile__text { color: var(--ink); }
.zeile__links { display: flex; flex-wrap: wrap; gap: 10px; }
.zeile__links:empty { display: none; }
.chip-link { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; text-decoration: none; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 999px; padding: 9px 16px; background: var(--weiss); white-space: nowrap; }
.chip-link svg { width: 16px; height: 16px; }
.chip-link:hover { background: var(--schwarz); color: var(--weiss); border-color: var(--schwarz); }
@media (max-width: 1000px) { .zeile__innen { grid-template-columns: 1fr; padding: 28px 0; } }

/* Logo-Wand */
.logowand { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--linie); border-left: 1px solid var(--linie); background: var(--weiss); position: relative; z-index: 1; }
.logowand li { list-style: none; min-height: clamp(116px, 11vw, 168px); display: grid; place-items: center; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: 22px; }
.logowand img { width: min(100%, calc(sqrt(var(--r, 3)) * 100px)); height: auto; max-height: 96px; object-fit: contain; filter: grayscale(1); opacity: .8; transition: opacity .2s, transform .2s; }
.logowand img.jpg { mix-blend-mode: multiply; }
.logowand li:hover img { opacity: 1; transform: scale(1.04); }
@media (max-width: 1000px) { .logowand { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .logowand { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Kontakt-Block ---------- */
.kontakt { background: var(--grau-1); }
.kontakt__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 104px); align-items: start; }
.kontakt__wege { list-style: none; display: grid; gap: 14px; margin-top: 36px; }
.kontakt__wege a { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; font-size: 20px; font-weight: 500; color: var(--ink); }
.kontakt__wege .ic { width: 28px; height: 28px; color: var(--gruen); }
.kontakt__wege a:hover span { text-decoration: underline; text-decoration-color: var(--gruen); text-decoration-thickness: 2px; text-underline-offset: 5px; }
/* Kontaktblock mit Telefon-Collage: Schnittkante des Arms (Zeile 816 von 862) steht bündig auf dem schwarzen Fuß */
.kontakt--bild { padding-bottom: 0; }
.kontakt--bild .kontakt__raster { grid-template-areas: "text form" "bild form"; grid-template-rows: auto 1fr; }
.kontakt--bild .kontakt__text { grid-area: text; }
.kontakt--bild .formular { grid-area: form; align-self: start; margin-bottom: var(--abschnitt); }
.kontakt__bild { grid-area: bild; align-self: end; width: min(360px, 100%); aspect-ratio: 902 / 816; overflow: hidden; margin-top: 56px; }
.kontakt__bild img { display: block; width: 100%; height: auto; }
@media (max-width: 1000px) {
  .kontakt__raster { grid-template-columns: 1fr; }
  .kontakt--bild .kontakt__raster { grid-template-areas: "text" "form" "bild"; grid-template-rows: auto; }
  .kontakt--bild .formular { margin-bottom: 0; }
  .kontakt__bild { width: min(300px, 80%); margin-top: 48px; }
}

.formular { background: var(--weiss); border-radius: var(--radius); padding: clamp(24px, 3.4vw, 48px); display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.feld { display: grid; gap: 8px; }
.feld--breit { grid-column: 1 / -1; }
.feld label { font-size: 15px; font-weight: 600; color: var(--ink); }
.feld label .pflicht { color: var(--text-2); font-weight: 400; }
.feld input, .feld textarea, .feld select {
  width: 100%; font: inherit; font-size: 17px; color: var(--ink); background: var(--weiss);
  border: 1.5px solid #CFCFCF; border-radius: 14px; padding: 15px 16px; min-height: 56px;
  transition: border-color .15s, box-shadow .15s; appearance: none;
}
.feld textarea { min-height: 150px; resize: vertical; }
.feld input:hover, .feld textarea:hover, .feld select:hover { border-color: #9A9A9A; }
.feld input:focus, .feld textarea:focus, .feld select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(35,185,110,.35); }
.formular__hinweis { grid-column: 1 / -1; font-size: 13px; line-height: 1.55; color: var(--text-2); margin: 0; }
.formular__hinweis a { color: var(--ink); text-decoration: underline; }
.formular .btn { grid-column: 1 / -1; justify-content: center; width: 100%; }
@media (max-width: 560px) { .formular { grid-template-columns: 1fr; } }

/* ---------- Fuß ---------- */
.fuss { background: var(--schwarz); color: #BDBDBD; padding-top: clamp(80px, 9vw, 140px); overflow: hidden; }
.fuss__satz { font-family: var(--f-display); font-weight: 700; font-size: clamp(56px, 10.5vw, 168px); line-height: .9; letter-spacing: -.045em; color: #2E2E2E; margin: 0 0 clamp(64px, 7vw, 112px); }
.fuss__raster { display: grid; grid-template-columns: 1.2fr 1fr 1.3fr; gap: 40px; padding-bottom: 72px; }
.fuss h2 { font-family: var(--f-display); font-size: 20px; letter-spacing: -.01em; color: var(--gruen); margin-bottom: 20px; }
.fuss ul { list-style: none; display: grid; gap: 10px; }
.fuss a { color: var(--weiss); text-decoration: none; font-size: 16px; }
.fuss a:hover { color: var(--gruen); }
.fuss address { font-style: normal; font-size: 16px; line-height: 1.7; color: var(--weiss); }
.fuss address p { margin-bottom: 14px; }
.fuss__unten { border-top: 1px solid #262626; padding-block: 28px; display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; font-size: 14px; }
.fuss__unten > svg { width: 150px; max-width: none; flex: none; color: var(--weiss); }
.fuss__unten ul { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.fuss__unten a { font-size: 14px; color: #BDBDBD; }
@media (max-width: 1000px) { .fuss__raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fuss__raster { grid-template-columns: 1fr; } }

/* ---------- Leistungsseiten ---------- */
.mythen { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); list-style: none; }
.mythos { border-top: 1.5px solid var(--weiss); padding-top: 26px; }
.mythos__nr { font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gruen); margin: 0 0 18px; }
.mythos h3 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; letter-spacing: -.02em; color: var(--weiss); margin-bottom: 22px; position: relative; display: inline; background: linear-gradient(var(--gruen), var(--gruen)) no-repeat 0 58% / 100% 4px; }
.js-anim .mythos h3 { background-size: 0 4px; transition: background-size .8s .2s cubic-bezier(.7,0,.2,1); }
.js-anim .mythos.ist-da h3 { background-size: 100% 4px; }
.mythos p { margin-top: 24px; color: #CFCFCF; }
@media (max-width: 900px) { .mythen { grid-template-columns: 1fr; } }

.angebot { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; border-top: 1.5px solid var(--ink); }
.angebot--3 { grid-template-columns: repeat(3, 1fr); }
.angebot--2 { grid-template-columns: repeat(2, 1fr); }
.angebot li { padding: 30px 28px 36px 0; border-bottom: 1px solid var(--linie); }
.angebot li:not(:nth-child(4n)) { padding-right: 32px; }
.angebot h3 { font-size: 24px; line-height: 1.15; letter-spacing: -.015em; margin-bottom: 14px; }
.angebot p { font-size: 17px; line-height: 1.6; }
.angebot__marke { display: block; width: 36px; height: 6px; background: var(--gruen); margin-bottom: 22px; }
@media (max-width: 1100px) { .angebot, .angebot--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .angebot, .angebot--3, .angebot--2 { grid-template-columns: 1fr; } }

.schritte { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; counter-reset: schritt; gap: 0; }
.schritt { counter-increment: schritt; position: relative; padding: 0 24px 0 0; }
.schritt::before { content: counter(schritt, decimal-leading-zero); display: block; font-family: var(--f-display); font-weight: 700; font-size: clamp(64px, 7vw, 112px); line-height: .9; letter-spacing: -.04em; color: var(--ink); margin-bottom: 18px; }
.schritt__name { font-family: var(--f-display); font-weight: 700; font-size: clamp(22px, 2vw, 30px); letter-spacing: -.02em; color: var(--ink); padding-top: 16px; border-top: 6px solid var(--gruen); }
.schritt:not(:last-child)::after { content: ""; position: absolute; right: 24px; top: 34px; width: 34px; height: 2px; background: var(--ink); }
@media (max-width: 800px) { .schritte { grid-template-columns: 1fr 1fr; gap: 40px 0; } .schritt::after { display: none; } }

/* Selbsttest (Content-Marketing) */
.test { list-style: none; border-top: 1.5px solid var(--ink); }
.test li { border-bottom: 1px solid rgba(0,0,0,.25); }
.test label { display: grid; grid-template-columns: 44px 1fr; gap: 20px; align-items: center; padding: 22px 0; cursor: pointer; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.4; color: var(--ink); }
.test input { appearance: none; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 50%; margin: 0; cursor: pointer; display: grid; place-items: center; background: var(--weiss); }
.test input::after { content: ""; width: 18px; height: 10px; border-left: 3px solid var(--weiss); border-bottom: 3px solid var(--weiss); transform: translateY(-2px) rotate(-45deg); opacity: 0; }
.test input:checked { background: var(--schwarz); }
.test input:checked::after { opacity: 1; }
.test__ergebnis { margin-top: 32px; font-size: 20px; color: var(--ink); min-height: 1.6em; }
.test__ergebnis strong { font-family: var(--f-display); }

.regeln { list-style: none; counter-reset: r; display: grid; gap: 0; border-top: 1.5px solid var(--ink); }
.regeln li { counter-increment: r; display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--linie); font-size: 19px; line-height: 1.5; color: var(--ink); }
.regeln li::before { content: ""; width: 28px; height: 28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 26px no-repeat; margin-top: 1px; }

/* Preise (WordPress Automation) */
.preis-steuerung { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; margin-bottom: 40px; }
.umschalter { display: inline-flex; background: var(--grau-1); border-radius: 999px; padding: 5px; gap: 4px; }
.umschalter button { border: 0; background: none; border-radius: 999px; padding: 12px 24px; font-size: 16px; font-weight: 600; cursor: pointer; color: var(--ink); }
.umschalter button[aria-selected="true"], .umschalter button[aria-pressed="true"] { background: var(--schwarz); color: var(--weiss); }
.umschalter--gross button { font-size: 20px; padding: 14px 32px; font-family: var(--f-display); font-weight: 700; letter-spacing: -.01em; }
.plaene { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; }
.plan { border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 28px 26px 30px; display: flex; flex-direction: column; background: var(--weiss); position: relative; }
.plan--hervor { background: var(--gruen); border-color: var(--gruen); }
.plan__sale { position: absolute; top: 22px; right: 22px; background: var(--gelb); color: var(--schwarz); font-size: 12px; font-weight: 700; letter-spacing: .14em; padding: 6px 10px; border-radius: 999px; }
.plan__fuer { font-size: 15px; line-height: 1.45; color: var(--text); min-height: 4.35em; margin: 0 58px 14px 0; }
.plan--hervor .plan__fuer { color: var(--ink); }
.plan__umfang { font-family: var(--f-display); font-weight: 700; font-size: 30px; letter-spacing: -.02em; color: var(--ink); }
.plan__preis { font-family: var(--f-display); font-weight: 700; font-size: clamp(40px, 3.6vw, 52px); letter-spacing: -.035em; color: var(--ink); line-height: 1; margin: 18px 0 4px; }
.plan__zeit { font-size: 15px; color: var(--text); margin-bottom: 22px; }
.plan ul { list-style: none; display: grid; gap: 10px; margin-bottom: 28px; font-size: 16px; color: var(--ink); }
.plan li { display: flex; gap: 10px; align-items: flex-start; }
.plan li .ic { width: 20px; height: 20px; margin-top: 3px; }
.plan .btn { margin-top: auto; justify-content: center; width: 100%; padding: 0 14px; font-size: 16px; white-space: nowrap; }
.plan--hervor .btn { --b-bg: var(--schwarz); --b-fg: var(--weiss); --b-bd: var(--schwarz); }
@media (max-width: 1100px) { .plaene { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .plaene { grid-template-columns: 1fr; } }

.feature-liste { list-style: none; display: grid; gap: 0; border-top: 1.5px solid var(--ink); }
.feature-liste li { display: flex; gap: 18px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--linie); font-family: var(--f-display); font-weight: 700; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -.015em; color: var(--ink); line-height: 1.25; }
.feature-liste .ic { width: 30px; height: 30px; color: var(--schwarz); }

/* Umwandlungs-Schema (Plugin) */
.schema { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: stretch; }
.schema__karte { background: var(--weiss); border-radius: 18px; padding: 26px; font-size: 14px; line-height: 1.5; color: var(--text); border: 1.5px solid var(--ink); }
.schema__kopf { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); margin-bottom: 16px; }
.schema__roh p { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; margin: 0 0 8px; color: var(--ink); }
.schema__pfeil { display: grid; place-items: center; }
.schema__pfeil span { color: var(--schwarz); display: grid; place-items: center; }
.schema__pfeil .ic { width: 44px; height: 44px; stroke-width: 1.75; }
.schema__block { border-radius: 8px; margin-bottom: 10px; padding: 8px 10px; background: var(--grau-1); font-size: 12px; display: flex; gap: 8px; align-items: center; color: var(--ink); }
.schema__block b { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; background: var(--gruen); padding: 3px 6px; border-radius: 4px; }
.schema__block--h { font-family: var(--f-display); font-weight: 700; font-size: 17px; }
.schema__block--bild { height: 64px; background: repeating-linear-gradient(135deg, #e6e6e6 0 8px, #f2f2f2 8px 16px); }
.schema__block--zitat { font-family: var(--f-display); font-weight: 700; font-size: 14px; background: none; padding-left: 0; }
.schema__block--zitat::before { content: "„"; color: var(--gruen); font-size: 28px; line-height: .6; }
@media (max-width: 900px) { .schema { grid-template-columns: 1fr; } .schema__pfeil span { transform: rotate(90deg); } }

/* ---------- Referenzen ---------- */
.filter { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin-bottom: 40px; }
.filter button { border: 1.5px solid var(--ink); background: var(--weiss); border-radius: 999px; padding: 10px 20px; font-size: 14px; font-weight: 600; letter-spacing: .08em; cursor: pointer; color: var(--ink); }
.filter button[aria-pressed="true"] { background: var(--schwarz); color: var(--weiss); }
.projekte { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 40px); list-style: none; }
.projekt__bild { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--grau-1); display: grid; place-items: center; }
.projekt__bild img { max-width: 50%; max-height: 40%; object-fit: contain; filter: grayscale(1); }
.projekt h3 { font-size: clamp(24px, 2.2vw, 32px); margin-top: 20px; letter-spacing: -.02em; }
.projekt p { margin-top: 6px; color: var(--text-2); font-size: 16px; }

/* ---------- Ratgeber ---------- */
.kategorien { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin-bottom: 48px; }
.kategorien a { display: inline-block; border: 1.5px solid var(--ink); border-radius: 999px; padding: 9px 18px; font-size: 15px; font-weight: 600; text-decoration: none; color: var(--ink); }
.kategorien a[aria-current="page"] { background: var(--schwarz); color: var(--weiss); }
.beitrag-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; text-decoration: none; color: inherit; margin-bottom: clamp(56px, 6vw, 96px); }
.beitrag-top__bild { aspect-ratio: 16 / 11; border-radius: var(--radius); overflow: hidden; background: var(--gelb); position: relative; }
.beitrag-top__bild img { position: absolute; inset: 6% 0; width: 100%; height: 88%; object-fit: contain; }
.beitrag-top h2 { font-size: clamp(34px, 4vw, 60px); line-height: 1.02; letter-spacing: -.03em; margin: 14px 0 20px; }
.beitrag-top:hover h2 { text-decoration: underline; text-decoration-color: var(--gruen); text-decoration-thickness: 4px; text-underline-offset: 8px; }
.meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.meta .kat { color: var(--ink); background: var(--gruen); padding: 3px 10px; border-radius: 999px; letter-spacing: .1em; }
.beitraege { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 40px) clamp(20px, 2.6vw, 40px); list-style: none; }
.karte-beitrag a { text-decoration: none; color: inherit; display: block; }
.karte-beitrag__bild { aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: var(--grau-1); position: relative; margin-bottom: 20px; }
.karte-beitrag__bild img { position: absolute; inset: 8% 0; width: 100%; height: 84%; object-fit: contain; }
.karte-beitrag h3 { font-size: clamp(22px, 1.9vw, 27px); line-height: 1.15; letter-spacing: -.02em; margin: 12px 0 10px; }
.karte-beitrag p { font-size: 16px; color: var(--text); }
.karte-beitrag a:hover h3 { text-decoration: underline; text-decoration-color: var(--gruen); text-decoration-thickness: 3px; text-underline-offset: 6px; }
@media (max-width: 1000px) { .beitraege { grid-template-columns: 1fr 1fr; } .beitrag-top { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .beitraege { grid-template-columns: 1fr; } }

/* Artikel: bewusst nur über HTML-Elemente gestylt (h2, h3, p, ul, ol, blockquote, figure, img),
   damit Beiträge aus dem Plugin „Automation Content“ ohne Handarbeit so aussehen. */
.artikel-kopf { padding-block: clamp(40px, 5vw, 80px) clamp(40px, 5vw, 64px); }
.artikel-kopf h1 { font-size: clamp(42px, 6vw, 88px); line-height: 1; letter-spacing: -.035em; max-width: 14em; margin: 22px 0 28px; }
.artikel-bild { border-radius: var(--radius); overflow: hidden; background: var(--gelb); position: relative; aspect-ratio: 21 / 9; }
.artikel-bild img { position: absolute; inset: 5% 0; width: 100%; height: 90%; object-fit: contain; }
.artikel-raster { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr) minmax(0, 1fr); gap: 40px; padding-block: clamp(56px, 6vw, 96px); }
.inhalt-nav { position: sticky; top: calc(var(--kopf-h) + 24px); align-self: start; font-size: 15px; }
.inhalt-nav p { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); margin-bottom: 14px; }
.inhalt-nav ol { list-style: none; display: grid; gap: 10px; border-left: 2px solid var(--linie); }
.inhalt-nav a { display: block; padding-left: 16px; margin-left: -2px; border-left: 2px solid transparent; text-decoration: none; color: var(--text); line-height: 1.4; }
.inhalt-nav a:hover, .inhalt-nav a.ist-aktiv { color: var(--ink); border-left-color: var(--gruen); font-weight: 600; }
.artikel { font-size: 20px; line-height: 1.7; color: var(--text); max-width: 760px; }
.artikel > p:first-child { font-weight: 300; font-size: clamp(22px, 2vw, 27px); line-height: 1.5; color: var(--ink); }
.artikel h2 { font-size: clamp(30px, 3vw, 44px); line-height: 1.08; letter-spacing: -.028em; margin: 1.9em 0 .6em; }
.artikel h3 { font-size: clamp(23px, 2vw, 28px); line-height: 1.2; letter-spacing: -.015em; margin: 1.6em 0 .5em; }
.artikel p { margin: 0 0 1.1em; }
.artikel ul, .artikel ol { margin: 0 0 1.4em; padding: 0; list-style: none; display: grid; gap: 12px; }
.artikel ul li { position: relative; padding-left: 36px; }
.artikel ul li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 14px; height: 14px; background: var(--gruen); border-radius: 50%; }
.artikel ol { counter-reset: a; }
.artikel ol li { counter-increment: a; position: relative; padding-left: 52px; }
.artikel ol li::before { content: counter(a); position: absolute; left: 0; top: .05em; width: 34px; height: 34px; border-radius: 50%; background: var(--schwarz); color: var(--weiss); font-family: var(--f-display); font-weight: 700; font-size: 16px; display: grid; place-items: center; }
.artikel blockquote { margin: 1.6em 0; padding: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.15; letter-spacing: -.025em; color: var(--ink); }
.artikel blockquote p { margin: 0; }
.artikel blockquote p::before { content: "„"; color: var(--gruen); }
.artikel blockquote p::after { content: "“"; color: var(--gruen); }
.artikel figure { margin: 2em 0; }
.artikel figure img { width: 100%; border-radius: 18px; background: var(--grau-1); }
.artikel figcaption { font-size: 15px; color: var(--text-2); margin-top: 10px; }
.artikel strong { color: var(--ink); font-weight: 600; }
.artikel a { color: var(--ink); text-decoration-color: var(--gruen); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 1000px) { .artikel-raster { grid-template-columns: 1fr; } .inhalt-nav { position: static; } }
@media (max-width: 700px) { .artikel-bild { aspect-ratio: 4 / 3; } }

/* ---------- Jobs ---------- */
.jobliste { list-style: none; border-top: 1.5px solid var(--ink); }
.job { border-bottom: 1.5px solid var(--ink); padding: 32px 0; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr) auto; gap: 20px 40px; align-items: center; }
.job h3 { font-size: clamp(26px, 2.6vw, 40px); line-height: 1.08; letter-spacing: -.025em; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.tags li { font-size: 14px; font-weight: 600; border-radius: 999px; padding: 6px 14px; background: var(--grau-1); color: var(--ink); }
.tags li.gruen { background: var(--gruen); }
@media (max-width: 900px) { .job { grid-template-columns: 1fr; } }

/* ---------- Rechtstexte ---------- */
.recht { max-width: 820px; font-size: 18px; }
.recht h2 { font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -.02em; margin: 1.8em 0 .5em; }
.recht h3 { font-size: 22px; margin: 1.4em 0 .4em; }
.recht a { color: var(--ink); text-decoration-color: var(--gruen); text-decoration-thickness: 2px; }
.recht-nav { list-style: none; display: grid; gap: 4px; position: sticky; top: calc(var(--kopf-h) + 24px); }
.recht-nav a { display: block; padding: 10px 16px; border-radius: 12px; text-decoration: none; color: var(--ink); font-weight: 500; }
.recht-nav a[aria-current="page"] { background: var(--schwarz); color: var(--weiss); }
.recht-nav a:hover:not([aria-current]) { background: var(--grau-1); }
.recht-raster { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(32px, 5vw, 80px); }
@media (max-width: 900px) { .recht-raster { grid-template-columns: 1fr; } .recht-nav { position: static; display: flex; flex-wrap: wrap; } }

/* ---------- Shop ---------- */
.produkte { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 40px); list-style: none; }
.produktkarte { border: 1.5px solid var(--ink); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-rows: auto 1fr; background: var(--weiss); }
.produktkarte__bild { aspect-ratio: 16 / 10; background: var(--grau-1); display: grid; place-items: center; overflow: hidden; position: relative; }
.produktkarte__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.produktkarte__text { padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.produktkarte h2 { font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.02em; line-height: 1.1; }
.preis-klein { font-family: var(--f-display); font-weight: 700; font-size: 26px; color: var(--ink); }
.steuer { font-size: 14px; color: var(--text-2); }
.produkt { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.produkt__bild { border-radius: var(--radius); background: var(--grau-1); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; position: sticky; top: calc(var(--kopf-h) + 24px); }
.produkt__bild img { width: 100%; height: 100%; object-fit: cover; }
.brotkrumen { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; font-size: 14px; color: var(--text-2); margin-bottom: 24px; }
.brotkrumen li:not(:last-child)::after { content: "/"; margin-left: 8px; color: #B0B0B0; }
.brotkrumen a { color: var(--text-2); }
.optionen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; list-style: none; margin: 12px 0 24px; }
.optionen label { display: block; border: 1.5px solid #CFCFCF; border-radius: 14px; padding: 14px 16px; cursor: pointer; font-size: 16px; color: var(--ink); line-height: 1.35; }
.optionen input { position: absolute; opacity: 0; pointer-events: none; }
.optionen input:checked + label { border-color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--grau-0); }
.optionen input:focus-visible + label { outline: 3px solid var(--schwarz); outline-offset: 2px; }
.reiter { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1.5px solid var(--ink); margin-top: clamp(56px, 6vw, 88px); }
.reiter button { border: 0; background: none; padding: 14px 18px; font-size: 16px; font-weight: 600; cursor: pointer; color: var(--text-2); border-bottom: 4px solid transparent; margin-bottom: -1.5px; }
.reiter button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gruen); }
.reiter-inhalt { padding-top: 32px; max-width: 820px; }
.reiter-inhalt[hidden] { display: none; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 16px; }
.tabelle th, .tabelle td { text-align: left; padding: 14px 12px 14px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle th { color: var(--ink); font-weight: 600; width: 32%; }
.leer { text-align: center; padding-block: clamp(64px, 8vw, 120px); }
.leer img { width: min(360px, 70vw); margin: 0 auto 32px; }
@media (max-width: 900px) { .produkte, .produkt { grid-template-columns: 1fr; } .produkt__bild { position: static; } }

/* ---------- Danke ---------- */
.fahrplan { list-style: none; counter-reset: f; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.fahrplan li { counter-increment: f; border-top: 6px solid var(--gruen); padding-top: 24px; }
.fahrplan li::before { content: counter(f, decimal-leading-zero); display: block; font-family: var(--f-display); font-weight: 700; font-size: 64px; line-height: .9; letter-spacing: -.04em; color: var(--ink); margin-bottom: 18px; }
.fahrplan h3 { font-size: 24px; line-height: 1.2; letter-spacing: -.015em; margin-bottom: 12px; }
@media (max-width: 900px) { .fahrplan { grid-template-columns: 1fr; } }

/* ---------- Entwurfs-Kennzeichnung ---------- */
.platzhalter { outline: 2px dashed #B8B8B8; outline-offset: 6px; position: relative; }
.platzhalter__label { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--gelb); color: var(--schwarz); padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; }
.hinweis-live { font-size: 14px; background: var(--gelb); color: var(--schwarz); border-radius: 12px; padding: 12px 16px; margin-top: 16px; line-height: 1.5; }

/* ---------- Einblenden ---------- */
.js-anim .rein { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.js-anim .rein.ist-da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .laufband__spur { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .laufband__spur > [aria-hidden="true"] { display: none; }
  .laufband__spur { gap: 18px 36px; padding-inline: var(--rand); }
  .laufband img { width: min(130px, calc(sqrt(var(--r, 3)) * 46px)); max-height: 44px; }
}

/* =========================================================
   Hero-Varianten (Vergleichsseite hero-varianten.html)
   ========================================================= */
.hv-label { background: var(--gelb); color: var(--schwarz); padding: 18px 0; border-block: 2px solid var(--schwarz); position: relative; z-index: 5; }
.hv-label .wrap { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: baseline; }
.hv-label strong { font-family: var(--f-display); font-size: 22px; letter-spacing: -.01em; }
.hv-label span { font-size: 16px; }

/* Kopfleiste auf dunkler Bühne */
.kopf--dunkel { background: var(--schwarz); backdrop-filter: none; }
.kopf--dunkel.ist-gescrollt { box-shadow: 0 1px 0 #222; }
.kopf--dunkel .kopf__logo, .kopf--dunkel .menue-knopf { color: var(--weiss); }

/* A: Dunkle Bühne mit Slider */
.hv-a { background: var(--schwarz); color: #CFCFCF; position: relative; overflow: hidden; }
.hv-a__buehne { position: relative; min-height: clamp(520px, calc(100vh - var(--kopf-h) - 96px), 700px); display: grid; }
.hv-a__folie { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding-block: clamp(24px, 4vw, 56px); opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s; }
.hv-a__folie.ist-aktiv { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.hv-a__folie .d-xl { color: var(--weiss); font-size: clamp(34px, 3.9vw, 56px); line-height: 1.1; text-wrap: balance; }
.hv-a__folie .d-xl .mk { --mk-h: 1.1em; }
.hv-a__folie .eyebrow { color: var(--weiss); display: flex; }
.hv-a__lead { margin-top: 28px; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.55; max-width: 36em; }
.hv-a__bild { position: relative; display: grid; place-items: center; }
.hv-a__bild img { width: 100%; max-height: min(600px, calc(100vh - 260px)); object-fit: contain; transform: translateY(12px) scale(.98); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.hv-a__folie.ist-aktiv .hv-a__bild img { transform: none; }
.hv-a__steuer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-block: 18px 36px; list-style: none; }
.hv-a__steuer button { width: 100%; background: none; border: 0; padding: 14px 0 0; text-align: left; color: #8C8C8C; font-size: 15px; font-weight: 600; cursor: pointer; position: relative; }
.hv-a__steuer button::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #333; }
.hv-a__steuer button::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--gruen); }
.hv-a__steuer button[aria-current="true"] { color: var(--weiss); }
.hv-a__steuer button[aria-current="true"]::after { width: 100%; }
.hv-a.laeuft .hv-a__steuer button[aria-current="true"]::after { animation: hv-fortschritt 7s linear forwards; }
@keyframes hv-fortschritt { from { width: 0; } to { width: 100%; } }
@media (max-width: 900px) {
  .hv-a__folie { grid-template-columns: 1fr; }
  .hv-a__bild { order: -1; }
  .hv-a__bild img { max-height: 320px; }
  .hv-a__steuer { grid-template-columns: 1fr 1fr; }
}

/* B: Wortbühne */
.hv-b { position: relative; overflow: hidden; background: var(--weiss); }
.hv-b__kopf { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 72px); align-items: end; padding-block: clamp(32px, 4vw, 64px) 0; }
.hv-b__kopf .d-xl { font-size: clamp(34px, 3.9vw, 56px); line-height: 1.1; text-wrap: balance; }
.hv-b__kopf .d-xl .mk { --mk-h: 1.1em; }
.hv-b__kopf .eyebrow { display: flex; }
.hv-b__lead { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; }
.hv-b__buehne { position: relative; margin-top: clamp(8px, 2vw, 24px); padding-bottom: 12px; }
.hv-b__worte { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; pointer-events: none; user-select: none; }
.hv-b__worte span { font-family: var(--f-display); font-weight: 700; font-size: clamp(90px, 14.5vw, 236px); line-height: .86; letter-spacing: -.05em; color: var(--grau-1); white-space: nowrap; }
.hv-b__worte span:nth-child(1) { padding-left: 2vw; }
.hv-b__worte span:nth-child(2) { text-align: right; padding-right: 1vw; }
.hv-b__worte span:nth-child(3) { padding-left: 16vw; }
.hv-b__bild { position: relative; width: min(660px, 86vw); margin: 0 auto; }
@media (max-width: 900px) { .hv-b__kopf { grid-template-columns: 1fr; } }

/* C: Plakat */
.hv-c { position: relative; overflow: hidden; background: var(--weiss); }
.hv-c__raster { position: relative; min-height: clamp(560px, calc(100vh - var(--kopf-h)), 820px); display: grid; grid-template-columns: minmax(0, 12fr); align-items: center; padding-block: clamp(24px, 3vw, 48px); }
.hv-c__bild { position: absolute; right: calc(-1 * var(--rand)); top: 50%; transform: translateY(-50%); width: min(64%, 780px); z-index: 0; }
.hv-c__text { position: relative; z-index: 1; max-width: 760px; }
.hv-c__band { display: inline-block; background: var(--gelb); color: var(--schwarz); font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; padding: 8px 14px; transform: rotate(-2deg); margin: 0 0 18px; }
.hv-c :is(h1, h2):has(> .hv-c__zeile) { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.02; letter-spacing: -.03em; margin: 0; }
.hv-c__zeile { display: table; background: var(--schwarz); color: var(--weiss); padding: .08em .22em .12em; margin-bottom: .14em; transform: rotate(-1.2deg); transform-origin: left center; }
.hv-c__zeile:nth-child(even) { transform: rotate(.9deg); margin-left: .6em; }
.hv-c__zeile--g { background: var(--gruen); color: var(--weiss); }
.hv-c__lead { background: var(--weiss); max-width: 30em; margin-top: 28px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; padding: 18px 22px; border: 1.5px solid var(--schwarz); box-shadow: 6px 6px 0 var(--schwarz); }
.js-anim .hv-c__zeile { opacity: 0; translate: -24px 0; transition: opacity .5s, translate .6s cubic-bezier(.2,.7,.2,1); }
.js-anim .hv-c.ist-da .hv-c__zeile { opacity: 1; translate: 0 0; }
.js-anim .hv-c.ist-da .hv-c__zeile:nth-child(2) { transition-delay: .08s; }
.js-anim .hv-c.ist-da .hv-c__zeile:nth-child(3) { transition-delay: .16s; }
.js-anim .hv-c.ist-da .hv-c__zeile:nth-child(4) { transition-delay: .24s; }
@media (max-width: 900px) {
  .hv-c__bild { position: relative; right: auto; top: auto; transform: none; width: 100%; margin: 0 0 -40px; order: -1; }
  .hv-c__raster { display: flex; flex-direction: column; min-height: 0; }
}

/* Plakat-Hero auf Unterseiten: Bildformate und Varianten */
.hv-c__bild--hoch { width: min(46%, 600px); }
.hv-c__bild--schmal { width: min(26%, 330px); right: 4%; }
.hv-c--kompakt .hv-c__raster { min-height: clamp(460px, 64vh, 620px); }
.hv-c__klein { margin-top: 22px; font-size: 16px; color: var(--text-2); }
.hv-c .kategorien { margin: 28px 0 0; }
.hv-c--grau { background: var(--grau-1); }
.hv-c__kante { position: absolute; right: 0; bottom: 0; width: min(44%, 520px); aspect-ratio: 902 / 816; overflow: hidden; z-index: 0; }
.hv-c__kante img { display: block; width: 100%; height: auto; }
.hv-c--grau .hv-c__lead { background: var(--weiss); }
/* Referenzen: Collage aus den Hand-Motiven der Live-Seite */
.hv-c__stapel { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: min(50%, 620px); aspect-ratio: 620 / 520; z-index: 0; }
.hv-c__stapel img { position: absolute; height: auto; }
.hv-c__stapel .s1 { width: 62%; left: 6%; top: 30%; transform: scaleX(-1); }
.hv-c__stapel .s2 { width: 34%; right: 2%; top: 0; }
.hv-c__stapel .s3 { width: 40%; right: 0; bottom: 0; }
.hv-c__stapel .s4 { width: 22%; left: 0; top: 8%; }
@media (max-width: 900px) {
  .hv-c__bild--hoch, .hv-c__bild--schmal { width: 70%; right: auto; margin-inline: auto; }
  .hv-c__kante { position: relative; width: 80%; margin: 32px 0 0 auto; }
  .hv-c__stapel { position: relative; top: auto; transform: none; width: 100%; order: -1; margin-bottom: 8px; }
}
.kontakt.hv-c { background: var(--grau-1); overflow: visible; }
.kontakt.hv-c h1:has(> .hv-c__zeile) { font-size: clamp(28px, 3vw, 44px); }
@media (min-width: 901px) {
  .hv-c__bild--shop { width: min(30%, 380px); right: 2%; }
  .hv-c__bild--schmal { width: min(21%, 270px); right: 6%; }
}
@media (max-width: 900px) {
  .hv-c--kompakt .hv-c__raster { min-height: 0; }
  .hv-c__bild--schmal { width: 44%; }
  .hv-c__bild--shop { width: 60%; }
  /* Danke: Schnittkante des Arms sitzt auch mobil auf der Unterkante des Hero */
  .hv-c--grau .hv-c__kante { order: 2; margin: 40px 0 calc(-1 * clamp(24px, 3vw, 48px)) auto; }
}

/* Mythen-Varianten (Vergleichsseite mythen-varianten.html) */
/* 1: ohne Linie */
.mythen--ohne .mythos h3, .js-anim .mythen--ohne .mythos.ist-da h3 { background: none; }
/* 2: Stempel im Klebeband-Stil statt Linie */
.mythen--stempel .mythos h3, .js-anim .mythen--stempel .mythos.ist-da h3 { background: none; }
.mythen--stempel .mythos p.mythos__nr { display: table; margin: 0 0 22px; font-size: 14px; padding: 7px 12px 6px; background: var(--gelb); color: var(--schwarz); font-weight: 700; transform: rotate(-3deg); }
.js-anim .mythen--stempel .mythos p.mythos__nr { opacity: 0; transform: rotate(-3deg) scale(1.35); transition: opacity .25s .15s, transform .35s .15s cubic-bezier(.3,1.6,.5,1); }
.js-anim .mythen--stempel .mythos.ist-da p.mythos__nr { opacity: 1; transform: rotate(-3deg) scale(1); }
/* 3: dünnere, tiefere Linie */
.mythen--duenn .mythos h3 { background-size: 100% 2px; background-position: 0 66%; }
.js-anim .mythen--duenn .mythos h3 { background-size: 0 2px; }
.js-anim .mythen--duenn .mythos.ist-da h3 { background-size: 100% 2px; }

/* Stellenanzeige mit aufklappbaren Details */
.job__details { grid-column: 1 / -1; }
.job__details summary { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; font-weight: 600; font-size: 17px; color: var(--ink); border-bottom: 2px solid var(--gruen); padding-bottom: 4px; }
.job__details summary::-webkit-details-marker { display: none; }
.job__details summary .ic { width: 18px; height: 18px; transition: transform .25s; }
.job__details[open] summary .ic { transform: rotate(45deg); }
.job__intro { margin: 28px 0 0; max-width: 60em; font-size: 19px; line-height: 1.6; color: var(--ink); }
.job__spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 24px clamp(32px, 5vw, 80px); margin-top: 28px; }
.job__spalten h4 { font-size: 22px; letter-spacing: -.015em; margin-bottom: 14px; }
.job__spalten ul { list-style: none; display: grid; gap: 10px; }
.job__spalten li { position: relative; padding-left: 26px; font-size: 17px; line-height: 1.55; }
.job__spalten li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--gruen); }
.job__plus { margin-top: 18px; font-size: 16px; color: var(--text-2); }
@media (max-width: 800px) { .job__spalten { grid-template-columns: 1fr; } }

/* =========================================================
   Ratgeber-Übersicht
   ========================================================= */
.rg-held .hv-c__raster { min-height: clamp(560px, 78vh, 760px); }
.rg-held__bild { position: absolute; right: 7%; top: 50%; transform: translateY(-50%) rotate(4deg); width: min(26%, 330px); z-index: 0; }
.rg-held__cursor { position: absolute; right: 30%; bottom: 12%; width: 140px; transform: rotate(-8deg); z-index: 0; }
.rg-held__kreis { position: absolute; right: 16%; top: 16%; width: clamp(160px, 18vw, 280px); aspect-ratio: 1; border-radius: 50%; background: var(--gruen); z-index: 0; }

/* Neu im Ratgeber: Plakat auf Gelb */
.rg-neu { position: relative; background: var(--gelb); overflow: hidden; padding-block: clamp(64px, 8vw, 128px); }
.rg-neu__raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.rg-neu__bild { position: relative; }
.rg-neu__bild img { width: 118%; max-width: none; margin-left: -12%; transform: rotate(-3deg); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.rg-neu:hover .rg-neu__bild img { transform: rotate(-1deg) scale(1.02); }
.rg-neu .hv-c__band { background: var(--schwarz); color: var(--weiss); }
.rg-neu h2 { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.02; letter-spacing: -.03em; margin: 0; }
.js-anim .rg-neu .hv-c__zeile { opacity: 0; translate: -24px 0; transition: opacity .5s, translate .6s cubic-bezier(.2,.7,.2,1); }
.js-anim .rg-neu.ist-da .hv-c__zeile { opacity: 1; translate: 0 0; }
.js-anim .rg-neu.ist-da .hv-c__zeile:nth-child(2) { transition-delay: .1s; }
.rg-neu__text { background: var(--weiss); border: 1.5px solid var(--schwarz); box-shadow: 6px 6px 0 var(--schwarz); padding: 20px 24px; margin-top: 28px; max-width: 32em; font-size: 18px; line-height: 1.6; }
.rg-neu .meta { margin-bottom: 20px; }
.rg-neu .meta .kat { background: var(--schwarz); color: var(--weiss); }
.rg-neu .btn { --b-bg: var(--schwarz); --b-fg: var(--weiss); --b-bd: var(--schwarz); }
.rg-neu .btn:hover { --b-bg: var(--weiss); --b-fg: var(--schwarz); --b-bd: var(--schwarz); }
@media (max-width: 900px) { .rg-neu__raster { grid-template-columns: 1fr; } .rg-neu__bild img { width: 100%; margin: 0; } }

/* Themen-Register */
.rg-themen { list-style: none; border-top: 1.5px solid var(--ink); }
.rg-thema { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px 40px; align-items: center; padding: clamp(14px, 1.6vw, 22px) 8px; border-bottom: 1.5px solid var(--ink); text-decoration: none; color: var(--ink); isolation: isolate; }
.rg-thema::before { content: ""; position: absolute; inset: 0; background: var(--gruen); transform: scaleY(0); transform-origin: bottom; transition: transform .35s cubic-bezier(.7,0,.2,1); z-index: -1; }
.rg-thema:hover::before, .rg-thema:focus-visible::before { transform: scaleY(1); }
.rg-thema:hover, .rg-thema:focus-visible { color: var(--weiss); }
.rg-thema__name { font-family: var(--f-display); font-weight: 700; font-size: clamp(40px, 6.4vw, 104px); line-height: 1; letter-spacing: -.045em; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.rg-thema:hover .rg-thema__name { transform: translateX(16px); }
.rg-thema__zahl { font-size: 15px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.rg-thema__zahl--leer { color: var(--text-2); }
.rg-thema:hover .rg-thema__zahl--leer { color: var(--weiss); }
.rg-thema .ic { width: 36px; height: 36px; stroke-width: 1.5; transition: transform .35s; }
.rg-thema:hover .ic { transform: rotate(-45deg); }
@media (max-width: 700px) { .rg-thema { grid-template-columns: minmax(0, 1fr) auto; } .rg-thema__zahl { grid-column: 1; grid-row: 2; } .rg-thema .ic { grid-column: 2; grid-row: 1 / 3; } }

/* Begriffe-Laufband */
.rg-ticker { background: var(--schwarz); color: var(--weiss); overflow: hidden; padding-block: clamp(28px, 3vw, 44px); }
.rg-ticker__spur { display: flex; align-items: center; gap: .55em; width: max-content; animation: lauf 60s linear infinite; font-family: var(--f-display); font-weight: 700; font-size: clamp(44px, 6.6vw, 104px); letter-spacing: -.04em; line-height: 1.1; }
.rg-ticker__spur span { white-space: nowrap; }
.rg-ticker__spur .g { background: var(--gruen); padding: 0 .16em .04em; }
.rg-ticker__spur .p { color: var(--gruen); font-size: .5em; }
.rg-ticker:hover .rg-ticker__spur { animation-play-state: paused; }

/* Pinnwand */
.rg-wand { background: var(--grau-1); }
.rg-filter { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin-bottom: clamp(40px, 5vw, 64px); }
.rg-filter button { border: 1.5px solid var(--ink); background: var(--weiss); border-radius: 999px; padding: 10px 18px; font-size: 15px; font-weight: 600; cursor: pointer; color: var(--ink); }
.rg-filter button[aria-pressed="true"] { background: var(--schwarz); color: var(--weiss); }
.rg-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 56px) clamp(24px, 3vw, 44px); list-style: none; padding-top: 18px; }
.rg-karte { position: relative; background: var(--weiss); border: 1.5px solid var(--schwarz); box-shadow: 6px 6px 0 var(--schwarz); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.rg-karte:nth-child(3n+1) { transform: rotate(-1.6deg); }
.rg-karte:nth-child(3n+2) { transform: rotate(1.2deg) translateY(18px); }
.rg-karte:nth-child(3n) { transform: rotate(-.7deg); }
.rg-karte::before { content: ""; position: absolute; top: -16px; left: 50%; width: 110px; height: 30px; margin-left: -55px; background: rgba(240,225,80,.92); transform: rotate(-4deg); z-index: 2; }
.rg-karte:nth-child(3n+2)::before { transform: rotate(5deg); }
.rg-karte:hover, .rg-karte:focus-within { transform: rotate(0) translateY(-6px); box-shadow: 10px 10px 0 var(--schwarz); z-index: 3; }
.rg-karte a { display: block; text-decoration: none; color: inherit; }
.rg-karte__bild { aspect-ratio: 4 / 3; position: relative; overflow: hidden; border-bottom: 1.5px solid var(--schwarz); }
.rg-karte__bild img { position: absolute; inset: 8% 0; width: 100%; height: 84%; object-fit: contain; }
.rg-karte__text { padding: 20px 22px 24px; }
.rg-karte h3 { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.12; letter-spacing: -.02em; margin: 12px 0 10px; }
.rg-karte p { font-size: 16px; line-height: 1.55; }
.rg-karte--leer { background: transparent; border-style: dashed; box-shadow: none; }
.rg-karte--leer::before { opacity: .5; }
.rg-karte--leer .rg-karte__bild { border-bottom-style: dashed; background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(0,0,0,.04) 10px 20px); }
.rg-leer-hinweis { font-family: var(--f-display); font-weight: 700; font-size: clamp(24px, 2.4vw, 34px); color: var(--ink); letter-spacing: -.02em; margin-top: 8px; }
@media (max-width: 1000px) { .rg-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .rg-karten { grid-template-columns: 1fr; } .rg-karte:nth-child(n) { transform: rotate(-1deg); } }

@media (prefers-reduced-motion: reduce) {
  .rg-ticker__spur { animation: none; }
}
@media (max-width: 900px) {
  .rg-held .hv-c__raster { min-height: 0; }
  .rg-held__kreis, .rg-held__cursor { display: none; }
  .rg-held__bild { position: relative; right: auto; top: auto; transform: rotate(4deg); width: 46%; margin: 0 auto -12px; order: -1; }
}

/* Handy: Überschrift immer über der Grafik (Klebeband, Überschrift, Grafik, Einleitung, Button) */
@media (max-width: 900px) {
  .hv-c__raster { align-items: stretch; }
  .hv-c__text { display: contents; }
  .hv-c__band { order: 1; align-self: flex-start; }
  .hv-c__text > :is(h1, h2) { order: 2; }
  .hv-c__bild, .hv-c__stapel, .rg-held__bild { order: 3; }
  .hv-c__bild { margin: 28px 0 0; }
  .hv-c__bild--hoch, .hv-c__bild--schmal, .hv-c__bild--shop { margin: 28px auto 0; }
  .hv-c__stapel { margin: 28px 0 0; }
  .rg-held__bild { margin: 28px auto 0; }
  .hv-c__lead { order: 4; }
  .hv-c__klein { order: 5; }
  .hv-c__text > .btn-reihe { order: 6; }
  .hv-c--grau .hv-c__kante { order: 7; }

  .rg-neu__raster > div:last-child { display: contents; }
  .rg-neu .hv-c__band { order: 1; justify-self: start; margin-bottom: 0; }
  .rg-neu .meta { order: 2; margin-bottom: 0; }
  .rg-neu h2 { order: 3; }
  .rg-neu__bild { order: 4; }
  .rg-neu__text { order: 5; margin-top: 0; }
  .rg-neu__raster > div:last-child > .btn-reihe { order: 6; margin-top: 0 !important; }
  .rg-neu__raster { gap: 20px; }

  .zweispaltig > img:first-child { order: 2; }
}

/* Startseite, Desktop: mehr Luft zwischen Hero und Referenz-Logos (02.10.2026).
   Die Collage der Startseite ist deutlich höher als die der Leistungsseiten, deshalb standen
   die Logos dort nur 50 bis 72 px unter dem Bild (Leistungsseiten 122 bis 155 px). */
@media (min-width: 901px) {
  .home .laufband { margin-top: clamp(48px, 5vw, 80px); }
  /* Niedrige Laptops: Collage verkleinern statt an der Hero-Unterkante abschneiden */
}

/* =========================================================
   Team-Seite (Entwurf 02.10.2026): Collage-Porträts
   Porträt = freigestelltes Schwarzweiß-Foto auf grünem oder gelbem Kreis. Unten schneidet der
   Kreis die Schultern ab, oben ragt der Kopf heraus (Maske: Kreis plus alles über der Kreismitte).
   Bis echte Fotos da sind, steht dort eine Silhouette mit dem Hinweis „Foto folgt“.
   ========================================================= */
.tm-portrait { position: relative; width: 100%; aspect-ratio: 1 / 1.08; }
.tm-portrait__kreis { position: absolute; left: 7%; right: 7%; bottom: 0; aspect-ratio: 1; border-radius: 50%; background: var(--gruen); }
.tm-portrait--gelb .tm-portrait__kreis { background: var(--gelb); }
.tm-portrait__maske {
  position: absolute; inset: 0;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% 60.2% no-repeat, radial-gradient(ellipse 43% 39.8% at 50% 60.2%, #000 99.4%, transparent 100%);
          mask: linear-gradient(#000 0 0) top / 100% 60.2% no-repeat, radial-gradient(ellipse 43% 39.8% at 50% 60.2%, #000 99.4%, transparent 100%);
}
.tm-portrait__figur, .tm-portrait__foto { position: absolute; left: 50%; bottom: 0; width: 84%; transform: translateX(-50%); }
.tm-portrait__figur { fill: #2B2B2B; }
.tm-portrait__foto { height: 100%; object-fit: contain; object-position: 50% 100%; filter: grayscale(1) contrast(1.05); }
.tm-portrait__hinweis, .tm-held__hinweis {
  position: absolute; background: var(--schwarz); color: var(--weiss); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; padding: 6px 10px; white-space: nowrap;
}
.tm-portrait__hinweis { left: 50%; bottom: 12%; transform: translateX(-50%) rotate(-3deg); }

/* Hero: drei Porträts als Collage, Lage wie der Stapel auf /referenzen/ */
.tm-held { aspect-ratio: 620 / 560; }
.tm-held .tm-portrait { position: absolute; }
.tm-held .tm-portrait:nth-child(1) { width: 54%; left: 2%; top: 20%; z-index: 2; }
.tm-held .tm-portrait:nth-child(2) { width: 40%; right: 2%; top: 0; z-index: 1; }
.tm-held .tm-portrait:nth-child(3) { width: 36%; right: 10%; bottom: 0; z-index: 3; }
.tm-held__hinweis { left: 6%; bottom: 6%; transform: rotate(-3deg); z-index: 4; }

/* Name als schwarzer Streifen, Rolle als gelbes Klebeband (wie im Plakat-Hero) */
.tm-rolle {
  display: table; background: var(--gelb); color: var(--schwarz); font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; line-height: 1.2; padding: 7px 12px; transform: rotate(-2deg); margin: 0 0 14px;
}
.tm-name {
  display: table; background: var(--schwarz); color: var(--weiss); font-family: var(--f-display); font-weight: 700;
  font-size: clamp(22px, 2vw, 28px); line-height: 1.1; letter-spacing: -.02em; padding: .08em .22em .12em;
  transform: rotate(-1.2deg); transform-origin: left center; margin: 0;
}
.tm-name--gross { font-size: clamp(32px, 3.6vw, 54px); }
.tm-satz { margin: 18px 0 0; font-size: 16px; line-height: 1.6; color: var(--text); max-width: 30em; }

/* Gründer: Text und Porträt nebeneinander; am Handy steht der Name über dem Bild */
.tm-gruender { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.tm-gruender > .tm-portrait { grid-column: 1; grid-row: 1; max-width: 440px; }
.tm-gruender__text { grid-column: 2; grid-row: 1; }
.tm-gruender__lead { margin-top: 28px; max-width: 26em; }

/* Weitere Personen */
.tm-liste { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(56px, 6vw, 80px) clamp(24px, 3vw, 44px); margin-top: clamp(64px, 8vw, 120px); }
.tm-person > .tm-portrait { max-width: 300px; }
.tm-person__text { margin-top: 22px; }

@media (max-width: 900px) {
  .tm-held { max-width: 520px; }
  .tm-gruender { grid-template-columns: minmax(0, 1fr); }
  .tm-gruender > .tm-portrait, .tm-gruender__text { grid-column: 1; grid-row: auto; }
  .tm-gruender > .tm-portrait { max-width: 360px; }
}
/* Hero der Team-Seite: Raster und Linien wie in der Collage der Startseite */
.tm-held::before, .tm-held::after { content: ""; position: absolute; z-index: 0; pointer-events: none; }
.tm-held::before {
  left: -6%; top: 10%; width: 44%; aspect-ratio: 1;
  background: repeating-linear-gradient(0deg, #000 0 1px, transparent 1px 26px), repeating-linear-gradient(90deg, #000 0 1px, transparent 1px 26px);
}
.tm-held::after { right: -4%; top: 46%; width: 30%; height: 72px; background: repeating-linear-gradient(0deg, #000 0 1.5px, transparent 1.5px 12px); }
/* Team-Seite, Korrekturen nach Prüfung (02.10.2026) */
/* Kein farbiger 1-px-Saum unter den Schultern: Kreis minimal kleiner als die Maske */
.tm-portrait__kreis { left: calc(7% + 1px); right: calc(7% + 1px); bottom: 1px; }
/* Schmale Desktop-Fenster: Collage schmaler, Textspalte begrenzt, Hinweis weg von der Knopfreihe */
@media (min-width: 901px) and (max-width: 1200px) {
  .tm-held { width: 40%; }
  .tm-held + .hv-c__text { max-width: 54%; }
  .tm-held__hinweis { left: auto; right: 6%; bottom: auto; top: 47%; }
}
/* Personen: eine Spalte am Handy, ab 750 px drei Spalten (für drei Personen, mit echter Teamgröße neu festlegen) */
.tm-liste { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 750px) { .tm-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  /* Collage mittig, Raster und Linien bleiben im Inhaltsbereich */
  .tm-held { margin-inline: auto; }
  .tm-held::before { left: 0; }
  .tm-held::after { right: 0; }
  /* Gründer: Text dicht über dem eigenen Porträt, mehr Abstand zur Personenliste */
  .tm-gruender { gap: 8px; }
  .tm-liste { margin-top: 96px; }
}
/* Team-Karten am Handy (eine Spalte): Rolle und Name über dem Porträt, wie beim Gründer-Block */
@media (max-width: 749px) {
  .tm-person { display: flex; flex-direction: column; align-items: flex-start; }
  .tm-person__text { display: contents; }
  .tm-person .tm-rolle { order: 1; }
  .tm-person .tm-name { order: 2; }
  .tm-person > .tm-portrait { order: 3; margin-top: 8px; }
  .tm-person .tm-satz { order: 4; }
}

/* Plakat-Heros am Desktop (Startseite und Leistungsseiten, Klasse hv-c--voll): animierter Scroll-Hinweis
   unten in der Mitte (02.10.2026). Der Hero füllt am Desktop genau die Fensterhöhe (siehe unten), der
   Hinweis sitzt im Hero in der unten frei gehaltenen Zone. Rein dekorativ, per Tastatur führen die Links
   im Hero weiter. Unter 640 px Fensterhöhe passt der Inhalt nicht mehr sicher hinein. */
.runter-hinweis { display: none; }
@media (min-width: 901px) and (min-height: 640px) {
  .hv-c--voll > .runter-hinweis {
    display: flex; position: absolute; z-index: 5; left: 50%; bottom: 4px;
    transform: translateX(-50%); width: 48px; height: 60px; align-items: center; justify-content: center;
    color: var(--schwarz); text-decoration: none;
  }
  .runter-hinweis svg { width: 26px; height: 42px; overflow: visible; }
  .runter-hinweis:hover { color: var(--gruen); }
  .runter-hinweis .rad { animation: runter-rad 1.8s cubic-bezier(.45, 0, .55, 1) infinite; }
}
@keyframes runter-rad {
  0% { transform: translateY(0); opacity: 0; }
  25% { opacity: 1; }
  75% { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(10px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .runter-hinweis .rad { animation: none; } }

/* Plakat-Heros am Desktop (Klasse hv-c--voll: Startseite, SEO, Content Marketing, Google Ads): Hero füllt
   immer genau die Fensterhöhe unter der Kopfleiste (02.10.2026), damit der Scroll-Hinweis unten in der Mitte
   Sinn ergibt (vorher höchstens 820 px hoch). Unten bleibt eine Zone für den Hinweis frei.
   Überschrift, Einleitung, Abstände und Bilder richten sich nach der Fensterhöhe, damit der Inhalt
   auch auf niedrigen Laptops hineinpasst. Bilder werden kleiner statt angeschnitten. */
@media (min-width: 901px) {
  .hv-c--voll { --hv-oben: clamp(16px, 4vh, 48px); --hv-unten: clamp(72px, 11vh, 120px); }
  .hv-c--voll .hv-c__raster { min-height: calc(100vh - var(--kopf-h)); padding-block: var(--hv-oben) var(--hv-unten); }
  .hv-c--voll :is(h1, h2):has(> .hv-c__zeile) { font-size: clamp(28px, min(3.4vw, 5vh), 50px); }
  .hv-c--voll .hv-c__band { margin-bottom: clamp(8px, 1.8vh, 18px); }
  .hv-c--voll .hv-c__lead { margin-top: clamp(12px, 2.8vh, 28px); padding: clamp(9px, 1.8vh, 18px) 22px; font-size: clamp(14px, min(1.3vw, 2.1vh), 19px); line-height: 1.55; }
  .hv-c--voll .btn-reihe { margin-top: clamp(12px, 2.8vh, 28px) !important; }
  .hv-c--voll .btn { min-height: clamp(44px, 6.4vh, 60px); }
  .hv-c--voll .hv-c__bild { max-height: calc(100% - 2 * var(--hv-oben)); object-fit: contain; }
  .hv-c--voll .hv-c__bild { object-position: 100% 50%; }
}

/* Heros am Desktop (ab 901 px), Stand 09.10.2026 nach den Rückmeldungen des Eigentümers: Die Collage ragt rechts um 40 % ihrer
   Breite über die Kante von "Menü +" (rechte Inhaltskante des .wrap) hinaus, höchstens bis 8 px vor den Fensterrand, und
   liegt nie unter dem Text. (Erster Stand des Tages: Collage endete an der Kante von "Menü +"; vorher hing sie am
   Innenabstand des .wrap, right: -var(--rand), und ragte unabhängig vom Text hinaus.)
   Raster mit vier Spalten: 1. der Text, so breit wie sein breitestes Element (höchstens 760 px wie bisher, der Text läuft
   deshalb unverändert); 2. Luft zwischen Text und Bild, 56 px ab 1280 px Breite, darunter 4,375vw, mindestens 40 px (an
   der Schattenkante des Textkastens 6 px weniger); 3. die Restspalte bis zur Kante von "Menü +"; 4. eine Spalte ohne Breite
   als Abschluss (grid-column: 3 / 4 liegt so zwischen zwei inneren Linien; die letzte Linie legt Chrome bei absolut
   gesetzten Elementen an die Innenabstandskante, gemessen 09.10.2026).
   Collage, Bilderstapel und Arm-Bild sind absolut gesetzt, waagerecht bezogen auf die Restspalte, senkrecht wie bisher auf
   das ganze Raster (gleiche Mitte, gleiche Höhenbegrenzung der Plakat-Heros). Breite --hv-b = kleinster Wert aus
   Höchstwert --hv-max (wie bisher; Prozent des .wrap hier als vw), Restspalte / 0,6 (dann liegen 60 % in der Restspalte und
   40 % ragen hinaus) und Restspalte + --hv-rest (Platz von der Kante bis 8 px vor den Fensterrand). Überstand: 40 % der
   Breite, höchstens --hv-rest; wo der Platz für 40 % nicht reicht, steht das Bild 8 px vor dem Fensterrand und ist so groß,
   wie es bis zur Luft passt. --hv-rest rechnet mit der Breite des Heros (100cqw, der Hero ist dafür Größen-Container) und
   dem .wrap; qf-gross.css setzt ihn für das wachsende Raster neu.
   Ratgeber sinngemäß: Die Glühbirne ragt um 40 % ihrer gedrehten Breite hinaus (höchstens bis 8 px vor den Fensterrand),
   Kreis und Mauszeiger rücken um dieselbe Strecke --rg-d mit; der Mauszeiger bleibt in der Restspalte (Abstand zum Text).
   Unter 901 px gilt nichts hiervon. */
@media (min-width: 901px) {
  .hv-c:not(.kontakt) { container-type: inline-size; }
  .hv-c__raster { grid-template-columns: fit-content(760px) clamp(40px, 4.375vw, 56px) minmax(0, 1fr) 0px; --hv-rest: calc(50cqw - min(50cqw, 656px) + var(--rand) - 8px); --hv-f: 1; }
  .hv-c__bild, .hv-c__stapel, .hv-c__kante { grid-column: 3 / 4; --hv-b: calc(var(--hv-f) * min(var(--hv-max), 100% / .6, 100% + var(--hv-rest))); width: var(--hv-b); right: calc(-1 * min(var(--hv-b) * .4, var(--hv-rest))); }
  .hv-c__bild { --hv-max: min(64vw, 780px); }
  /* Die Collage darf breiter sein als die Restspalte (40 % ragen hinaus): max-width: 100 % aus img (oben) und aus
     .elementor img (Elementor, Spezifität 0,1,1) gilt hier nicht. */
  .hv-c .hv-c__bild { max-width: none; }
  .hv-c__bild--hoch { --hv-max: min(46vw, 600px); }
  .hv-c__bild--schmal { --hv-max: min(21vw, 270px); }
  .hv-c__bild--shop { --hv-max: min(30vw, 380px); }
  .hv-c__stapel { --hv-max: min(50vw, 620px); }
  .hv-c__kante { --hv-max: min(44vw, 520px); }
  /* Referenzen (hv-c--kompakt): Bilderstapel nie höher als die Mindesthöhe des Rasters (clamp(460px, 64vh, 620px), siehe
     oben), sonst schneidet der Hero ihn bei niedrigen Fenstern oben und unten an. */
  .hv-c--kompakt .hv-c__stapel { --hv-max: min(50vw, 620px, clamp(460px, 64vh, 620px) * 620 / 520); }
  /* Ratgeber: --rg-w Breite des .wrap, --rg-bw Breite der Glühbirne (wie oben min(26 %, 330px)), --rg-d Verschiebung nach
     rechts: bisheriger Abstand der gedrehten Glühbirne zur Kante (7 % - Randabstand - 0,05869 x Breite, Drehung 4 Grad) plus
     40 % ihrer gedrehten Breite (0,4 x 1,11738 x Breite), dieser Überstand höchstens --hv-rest. */
  .rg-held .hv-c__raster { --rg-w: min(100cqw, 1312px); --rg-bw: calc(var(--hv-f) * min(var(--rg-w) * .26, 330px)); --rg-d: calc(var(--rg-w) * .07 - var(--rand) - var(--rg-bw) * .05869 + min(var(--rg-bw) * .44695, var(--hv-rest))); }
  .rg-held__bild { right: calc(7% - var(--rg-d)); width: calc(var(--hv-f) * min(26%, 330px)); }
  .rg-held__kreis { right: calc(16% - var(--rg-d)); width: calc(var(--hv-f) * clamp(160px, 18vw, 280px)); }
  /* Mauszeiger: Abstand rechts wie bisher (30 % des .wrap, von der Kante aus gerechnet) minus --rg-d, höchstens so viel,
     dass er samt Drehung (8 Grad, 4,65 px je Seite) in der Restspalte bleibt, und nie rechts über die Kante hinaus. */
  .rg-held__cursor { grid-column: 3 / 4; right: max(0px, min(min(30vw, 393.6px) - var(--rand) - var(--rg-d), 100% - 145px)); width: calc(var(--hv-f) * 140px); }
  /* Team-Seite (Entwurf): Raster und Linien der Porträt-Collage bleiben in deren Fläche wie unter 901 px. */
  .tm-held::before { left: 0; }
  .tm-held::after { right: 0; }
}
/* 16-Zoll-MacBook (09.10.2026: etwa 20 % kleiner; 11.10.2026 Variante B des Eigentümers, „die 3“: Collage größer und näher am
   Text). Stärke --hv-p der 16-Zoll-Anpassung: 0 bis 1512 px Breite des Heros, linear auf 1 bei 1728 px, linear zurück auf 0 bei
   1920 px, darüber 0; keine Sprünge, bis 1512 px und ab 1920 px bleibt alles wie es ist. Faktor --hv-f = 1 - 0,04 x --hv-p für
   die Breite der Collage, des Bilderstapels, des Arm-Bilds und der Ratgeber-Motive (bei 1728 px 0,96 statt 0,8 vom 09.10.,
   also 20 % größer). Collage, Bilderstapel und Arm-Bild rücken zusätzlich um 3,0533 % ihrer Breite nach links und um 4,1074 %
   ihrer Höhe nach oben, jeweils mal --hv-p: Das ergibt bei 1728 x 966 auf der Startseite genau die Lage der Vorlage B (links
   941,1, rechts 1.696,9, oben 142,9, unten 852,8 px; rechts 31 px Rand; vor der Verschiebung steht die Collage dort 8 px vor
   dem Fensterrand, weil bei 755,8 px Breite der Platz bis zum Rand kleiner ist als 40 %). Die 40-%-Regel rechnet mit der Breite
   vor der Verschiebung. progress() liefert den Anteil der Strecke (Chrome, Firefox und Safari, geprüft 09.10.2026 in Chrome 154,
   Firefox 155, WebKit 26.6); Browser ohne progress() behalten Faktor 1 und keine Verschiebung. Kontakt ohne Verschiebung.
   qf-gross.css setzt --hv-p für das wachsende Raster neu (Breiten ohne z). */
@supports (width: calc(1px * progress(1px, 0px, 2px))) {
  @media (min-width: 901px) {
    .hv-c__raster { --hv-p: clamp(0, min(progress(100cqw, 1512px, 1728px), progress(100cqw, 1920px, 1728px)), 1); --hv-f: calc(1 - .04 * var(--hv-p)); }
  }
  /* Verschiebung nur zwischen 1513 und 1919 px: Schon eine Verschiebung um 0 zeichnet das Bild auf eigener Ebene (Kantenglättung
     minimal anders), außerhalb bleibt so alles pixelgleich wie vorher. */
  @media (min-width: 1513px) and (max-width: 1919px) {
    .hv-c:not(.kontakt) .hv-c__bild, .hv-c:not(.kontakt) .hv-c__stapel, .hv-c:not(.kontakt) .hv-c__kante { translate: calc(-3.0533% * var(--hv-p)) calc(-4.1074% * var(--hv-p)); }
  }
}
/* Team-Seite (Entwurf) von 901 bis 1200 px: Die Textspalte war dort auf 54 % begrenzt (siehe oben). Die Grenze steht an der
   Spalte des Rasters statt am Text (Prozent am Text bezöge sich sonst auf die Spalte selbst), Porträt-Collage höchstens
   40 % des .wrap (hier 40vw). */
@media (min-width: 901px) and (max-width: 1200px) {
  .hv-c__raster:has(> .tm-held) { grid-template-columns: fit-content(54%) clamp(40px, 4.375vw, 56px) minmax(0, 1fr) 0px; }
  .tm-held + .hv-c__text { max-width: none; }
  .tm-held { --hv-max: 40vw; }
}

/* Scrollbalken in Qlickfang-Grün (02.10.2026). Chrome, Edge und Firefox über scrollbar-color,
   Safari über die webkit-Pseudoelemente (Chrome ab Version 121 nutzt dann nur scrollbar-color). */
html { scrollbar-color: var(--gruen) var(--grau-1); }
.menue { scrollbar-color: var(--gruen) var(--schwarz); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--grau-1); }
::-webkit-scrollbar-thumb { background: var(--gruen); border-radius: 999px; border: 3px solid var(--grau-1); }
::-webkit-scrollbar-thumb:hover { background: var(--gruen-ton); }
.menue::-webkit-scrollbar-track { background: var(--schwarz); }
.menue::-webkit-scrollbar-thumb { border-color: var(--schwarz); }

/* Ratgeber-Artikel: Lesefortschritt an der Unterkante der Kopfleiste (02.10.2026), Breite per qf.js */
.lesefortschritt { position: absolute; left: 0; right: 0; bottom: -2px; height: 4px; background: var(--gruen); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }