/* Fresh Mind Marketing — Fassung 17, 14.09.2026
   Gestaltungssystem: hell und ruhig, sehr große Typografie, breite Bildbänder,
   Belege klein und sachlich. Keine Kacheln mit Schatten. Alle Pfade relativ.
   Fassung 15: der Aufmacher ist hell und trägt ohne Foto im Hintergrund. Das
   Licht kommt aus einem weichen Verlauf und nimmt die Glühbirne im Logo
   passiv auf. Der einzige dunkle Block ist der Aufruf am Seitenende. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('schriften/inter.woff2') format('woff2');
}

:root {
  --blau: #0089C7;
  --blau-tief: #00658F;
  --tinte: #101418;
  --tinte-weich: #1A2026;
  --text: #3A434A;
  --grau: #6E7880;
  --grau-hell: #9BA5AC;
  --linie: #E4E1DC;
  --linie-dunkel: rgba(255,255,255,0.13);
  --sand: #F5F3EF;
  --bahn: 1240px;
  --eng: 780px;
  --luft: clamp(80px, 9.5vw, 152px);
}

*, *::before, *::after { box-sizing: border-box; }
/* Nur helles Farbschema. Ohne diese Angabe drehen iOS-Safari und In-App-Browser
   die Seite eigenmaechtig ins Dunkle und invertieren jede Flaeche. */
:root { color-scheme: only light; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
       background: #fff; color-scheme: only light; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--blau-tief); }
.bahn { max-width: var(--bahn); margin: 0 auto; padding: 0 28px; }
.eng { max-width: var(--eng); }

h1, h2, h3, h4 {
  color: var(--tinte); margin: 0;
  line-height: 1.03; letter-spacing: -0.035em; font-weight: 620;
  hyphens: manual; overflow-wrap: break-word;
}
h1 { font-size: clamp(2.7rem, 5.6vw, 4.6rem); letter-spacing: -0.04em; }
h2 { font-size: clamp(2rem, 4.3vw, 3.5rem); }
h3 { font-size: clamp(1.3rem, 1.9vw, 1.65rem); line-height: 1.16; letter-spacing: -0.025em; }
h4 { font-size: 1.14rem; letter-spacing: -0.01em; font-weight: 600; line-height: 1.3; }
p { margin: 0 0 1.05em; }
strong, b { font-weight: 620; color: var(--tinte); }

.lead { font-size: clamp(1.1rem, 1.55vw, 1.34rem); line-height: 1.52; }
.klein { font-size: 0.93rem; color: var(--grau); }

.marke {
  display: block; font-size: 0.71rem; font-weight: 620; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--blau-tief); margin-bottom: 22px;
}
.dunkel .marke { color: #63C3EA; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--blau-tief); color: #fff; text-decoration: none;
  font-weight: 560; font-size: 1.02rem; letter-spacing: -0.01em;
  padding: 18px 32px; border-radius: 3px; border: 1px solid var(--blau-tief);
  transition: background .18s ease, border-color .18s ease;
}
.knopf:hover { background: #00506F; border-color: #00506F; }
.knopf-linie { background: transparent; color: var(--tinte); border-color: var(--linie); }
.knopf-linie:hover { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.knopf-hell { background: #fff; color: var(--tinte); border-color: #fff; }
.knopf-hell:hover { background: #E8E5E0; border-color: #E8E5E0; color: var(--tinte); }
.knopf-linie-hell { background: transparent; color: #fff; border-color: rgba(255,255,255,0.34); }
.knopf-linie-hell:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

/* ---------- Kopf ---------- */
.entwurfshinweis {
  background: #101418; color: #C3CCD2; font-size: 0.76rem; letter-spacing: 0.04em;
  text-align: center; padding: 7px 16px;
}
.kopf {
  position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--linie);
  transition: background .25s ease, border-color .25s ease;
}
/* Auf der Startseite liegt die Kopfzeile ueber dem Film, solange nicht
   gescrollt ist. Ein weisser Verlauf darunter haelt Logo und Menue lesbar,
   auch wenn im Film gerade eine dunkle Szene laeuft. Sobald gescrollt wird,
   setzt sich die Kopfzeile wieder auf weissen Grund. */
body.kopf-ueber-film .kopf {
  background: transparent; backdrop-filter: none; border-bottom-color: transparent;
}
body.kopf-ueber-film .kopf::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 190px;
  pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%,
              rgba(255,255,255,0.82) 42%, rgba(255,255,255,0) 100%);
}
body.kopf-ueber-film .aufmacher { margin-top: -84px; }
body.kopf-ueber-film .aufmacher-innen { padding-top: calc(clamp(90px, 11vw, 150px) + 84px); }
@media (max-width: 880px) {
  body.kopf-ueber-film .aufmacher { margin-top: 0; }
  body.kopf-ueber-film .aufmacher-innen { padding-top: clamp(90px, 11vw, 150px); }
  body.kopf-ueber-film .kopf { background: rgba(255,255,255,0.94); backdrop-filter: saturate(180%) blur(14px); border-bottom-color: var(--linie); }
  body.kopf-ueber-film .kopf::before { display: none; }
}
.kopf-innen { display: flex; align-items: center; gap: 30px; height: 84px; }
.kopf-logo { margin-right: auto; display: block; }
.kopf-logo img { height: 40px; width: auto; }

.menue { display: flex; align-items: center; gap: 30px; }
.menue > a, .menue-punkt > a {
  color: var(--tinte); text-decoration: none; font-size: 0.97rem; font-weight: 520;
  letter-spacing: -0.01em; padding: 6px 0; border-bottom: 1px solid transparent;
}
.menue > a:hover, .menue-punkt > a:hover { border-bottom-color: var(--tinte); }
.menue > a.knopf { border-bottom: 1px solid var(--blau-tief); padding: 13px 24px; color: #fff; }

.menue-punkt { position: relative; }
.menue-punkt > a::after {
  content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 8px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.untermenue {
  position: absolute; top: 100%; left: -22px; min-width: 300px; padding: 12px 0;
  background: #fff; border: 1px solid var(--linie); border-radius: 3px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.menue-punkt:hover .untermenue, .menue-punkt:focus-within .untermenue {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.untermenue a { display: block; padding: 10px 24px; color: var(--text); text-decoration: none; font-size: 0.96rem; }
.untermenue a:hover { background: var(--sand); color: var(--tinte); }
.menue-schalter { display: none; background: none; border: 0; color: var(--tinte); padding: 8px; cursor: pointer; }

/* ---------- Aufmacher ----------
   Fassung 15: hell. Kein Foto im Hintergrund, kein Verlauf über einem Motiv.
   Die Fläche trägt zwei weiche Lichtquellen, eine warme oben rechts und eine
   kühle links unten. Darunter läuft ein Band aus echten Arbeiten in die
   Seite hinein. */
.aufmacher { position: relative; background: #fff; overflow: hidden; }
/* Hintergrundfilm im Aufmacher. Das Showreel laeuft stumm und endlos rechts,
   der Verlauf zieht es nach links ins Weiss, damit der Text schwarz auf hell
   bleibt. Entsaettigt und aufgehellt, sonst nimmt es dem Text die Aufmerksamkeit. */
.aufmacher-video {
  position: absolute; inset: 0 0 0 auto; width: 74%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
  filter: saturate(.88) brightness(1.04) contrast(.98);
}
.aufmacher-maske {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(97deg,
    #fff 0%, #fff 27%, rgba(255, 255, 255, 0.9) 39%,
    rgba(255, 255, 255, 0.34) 56%, rgba(255, 255, 255, 0.06) 74%,
    rgba(255, 255, 255, 0.1) 100%);
}
/* Der Text bleibt links, sonst laeuft er ins Bild. */
.aufmacher .marke, .aufmacher .lead { max-width: 42%; }
.aufmacher .zusagen { max-width: 40%; }
.aufmacher h1 { max-width: 15ch; }
/* Der Linienknopf ist sonst durchsichtig und zeigt den Film dahinter. */
.aufmacher .knopf-linie { background: #fff; }

/* Auf dem Telefon laeuft kein Film und liegt auch kein Standbild dahinter.
   3,6 MB ueber Mobilfunk sind zu viel fuer einen Hintergrund, ein Hochformat
   zeigt vom Querformat fast nichts, und hinter dem Text bliebe es ohnehin
   verdeckt. Das Bildband direkt darunter traegt dort das Bild. */
@media (max-width: 880px) {
  .aufmacher-video, .aufmacher-maske { display: none; }
  .aufmacher .marke, .aufmacher .lead, .aufmacher .zusagen { max-width: none; }
}

.aufmacher-innen {
  position: relative; z-index: 2;
  /* Nur die senkrechte Polsterung setzen. Die Kurzform `padding` loescht sonst
     die seitliche Polsterung der Bahn, und unterhalb von 1240px klebt der Text
     am Bildschirmrand. Gefunden am 14.09.2026 auf dem iPad. */
  padding-block: clamp(104px, 13vw, 178px) clamp(52px, 6vw, 84px);
  display: flex; flex-direction: column; justify-content: center;
}
.aufmacher h1 { max-width: 22ch; font-size: clamp(2.5rem, 5vw, 4.1rem); }
.aufmacher h1 em { font-style: normal; color: var(--blau-tief); }
.aufmacher .lead { color: var(--text); margin-top: 30px; max-width: 48ch; }
.aufmacher-knoepfe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

.zusagen {
  display: flex; flex-wrap: wrap; gap: 10px 30px;
  list-style: none; margin: clamp(40px, 4.4vw, 60px) 0 0; padding: 0;
  font-size: 0.93rem; color: var(--grau);
}
.zusagen li { position: relative; padding-left: 24px; }
.zusagen li::before {
  content: ''; position: absolute; left: 2px; top: 0.52em;
  width: 9px; height: 5px; border-left: 1.6px solid var(--blau-tief);
  border-bottom: 1.6px solid var(--blau-tief); transform: rotate(-45deg);
}

/* Bildband: drei echte Arbeiten, über die volle Breite, unten angeschnitten.
   Es ist gleichzeitig Bild und Beleg und ersetzt das frühere Stimmungsfoto. */
.aufmacher-band {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  padding: 0 2px;
}
.aufmacher-band figure { margin: 0; }
.aufmacher-band img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center;
}
.aufmacher-band figcaption {
  padding: 12px 2px 0; font-size: 0.83rem; color: var(--grau);
}

/* ---------- Belegleiste ---------- */
.beleg { background: var(--sand); padding: 38px 0; border-bottom: 1px solid var(--linie); }
.beleg-innen { display: flex; align-items: center; gap: clamp(28px, 4vw, 64px); flex-wrap: wrap; }
.beleg-text { font-size: 0.95rem; color: var(--grau); max-width: 22ch; flex: 0 0 auto; }
.beleg-text b { color: var(--tinte); font-weight: 620; }
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 16px clamp(18px, 2.2vw, 32px); flex: 1; }
.logos img { height: 26px; width: auto; opacity: .72; filter: grayscale(1); transition: opacity .2s ease; }
.logos img:hover { opacity: 1; }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: var(--luft) 0; }
.abschnitt-sand { background: var(--sand); }
.dunkel { background: var(--tinte); color: #BFC8CE; }
.dunkel h2, .dunkel h3, .dunkel h4 { color: #fff; }
.dunkel .lead { color: #BFC8CE; }
.kopfzeile { max-width: 26ch; }
.kopfzeile.weit { max-width: 40ch; }
.kopfzeile .lead { margin-top: 26px; max-width: 52ch; color: var(--text); }

/* ---------- Symbole ----------
   Duenne Linien in der Markenfarbe, im Stil der Gluehbirne aus dem Logo.
   Keine Kaesten, kein Hintergrund, kein Schatten. Das Symbol ist ein Anker
   fuer das Auge und traegt keine Aussage, die nicht auch im Text steht. */
.ikon { display: block; color: var(--blau-tief); line-height: 0; }
.ikon svg {
  width: 30px; height: 30px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.dunkel .ikon { color: #63C3EA; }

/* ---------- Abschnittskopf, zweispaltig ----------
   Eine grosse Ueberschrift allein laesst die rechte Haelfte leer. Der
   einleitende Satz fuellt sie mit Inhalt statt mit Dekoration und schliesst
   unten mit der letzten Zeile der Ueberschrift ab. */
.kopf-zwei {
  display: grid; grid-template-columns: 1.32fr 1fr;
  gap: clamp(28px, 4.5vw, 78px); align-items: end;
  margin-bottom: clamp(54px, 6vw, 90px);
}
.kopf-zwei h2 { max-width: none; }
.kopf-satz {
  margin: 0 0 6px; font-size: 1.06rem; line-height: 1.62;
  color: var(--text); max-width: 44ch;
}
.dunkel .kopf-satz { color: #BFC8CE; }

/* ---------- Ausgangslage ---------- */
.lage-punkte {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(30px, 3.4vw, 56px); margin-top: 0;
}
.lage-punkt { padding-top: 26px; border-top: 2px solid var(--blau-tief); }
.lage-punkt .ikon { margin-bottom: 20px; }
.lage-punkt h4 { margin-bottom: 10px; }
.lage-punkt p { margin: 0; font-size: 1rem; }
.lage-schluss { margin-top: clamp(46px, 5vw, 72px); font-size: 1.1rem; max-width: 56ch; color: var(--tinte); }

/* ---------- Leistungen ---------- */
.leistung { display: grid; grid-template-columns: 1.08fr 1fr; gap: clamp(36px, 5vw, 84px); align-items: center; }
.leistung + .leistung { margin-top: clamp(78px, 8vw, 132px); padding-top: clamp(78px, 8vw, 132px); border-top: 1px solid var(--linie); }
.leistung-gedreht .leistung-beleg { order: -1; }
.leistung-nr { font-size: 0.74rem; font-weight: 620; letter-spacing: 0.2em; color: var(--blau-tief); text-transform: uppercase; margin-bottom: 20px; }
.leistung h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -0.03em; }
.leistung p { margin-top: 22px; font-size: 1.06rem; }
.punkte { list-style: none; margin: 26px 0 0; padding: 0; }
.punkte li { padding: 13px 0 13px 30px; border-top: 1px solid var(--linie); position: relative; font-size: 1rem; }
.punkte li:last-child { border-bottom: 1px solid var(--linie); }
.punkte li::before {
  content: ''; position: absolute; left: 2px; top: 21px; width: 11px; height: 6px;
  border-left: 2px solid var(--blau); border-bottom: 2px solid var(--blau); transform: rotate(-45deg);
}
.mehr {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 30px;
  color: var(--tinte); text-decoration: none; font-weight: 560; font-size: 1.02rem;
  border-bottom: 1.5px solid var(--blau); padding-bottom: 3px;
}
.mehr:hover { color: var(--blau); }

/* Belege sind klein und sachlich, sie tragen den Abschnitt nicht. */
.leistung-beleg { position: relative; }
.rahmen { border: 1px solid var(--linie); border-radius: 4px; overflow: hidden; background: #fff; }
.rahmen img { width: 100%; }
.belegzeile { margin-top: 16px; font-size: 0.86rem; color: var(--grau); }

.treffer { background: #fff; border: 1px solid var(--linie); border-radius: 4px; padding: 26px 26px 20px; }
.treffer-suche {
  display: flex; align-items: center; gap: 10px; padding: 10px 15px; margin-bottom: 20px;
  border: 1px solid var(--linie); border-radius: 999px; color: var(--grau); font-size: 0.95rem;
}
.treffer-eintrag { padding: 14px 0; border-top: 1px solid var(--linie); }
.treffer-eintrag:first-of-type { border-top: 0; }
.treffer-marke {
  display: inline-block; font-size: 0.69rem; font-weight: 700; letter-spacing: 0.06em;
  color: var(--tinte); border: 1px solid var(--tinte); border-radius: 2px; padding: 1px 6px; margin-bottom: 8px;
}
.treffer-titel { color: #1A0DAB; font-size: 1.04rem; line-height: 1.3; margin-bottom: 4px; }
.treffer-url { color: #0B7A3B; font-size: 0.83rem; margin-bottom: 6px; }
.treffer-text { font-size: 0.89rem; color: var(--grau); margin: 0; }
.treffer-blass { opacity: .62; }

.bildpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bildpaar div { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; }
.bildpaar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Unterschied ---------- */
.unterschied { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 5vw, 88px); align-items: center; }
.unterschied-bild { align-self: stretch; display: flex; }
.unterschied-bild img {
  border-radius: 4px; width: 100%; align-self: center;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 55% center;
}
.merkmale { margin-top: 42px; }
.merkmal { padding: 26px 0; border-top: 1px solid var(--linie); }
.merkmal:last-child { border-bottom: 1px solid var(--linie); }
.merkmal h4 { margin-bottom: 10px; display: flex; align-items: center; gap: 13px; }
.merkmal h4 .ikon svg { width: 25px; height: 25px; }
.merkmal p { margin: 0; font-size: 1rem; padding-left: 38px; }

/* ---------- Betreuung ---------- */
.betreuung { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 90px); align-items: start; }
.betreuung-punkte { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 46px; }
.betreuung-abschnitt { background: linear-gradient(180deg, #FBFAF8 0%, #F2F5F7 100%); }
.betreuung-punkt { padding: 26px 0 30px; border-top: 2px solid var(--blau-tief); }
.betreuung-punkt .ikon { margin-bottom: 18px; }
.dunkel .betreuung-punkt { border-top-color: #63C3EA; }
.betreuung-punkt h4 { margin-bottom: 8px; }
.betreuung-punkt p { margin: 0; font-size: 0.97rem; color: var(--text); }
.dunkel .betreuung-punkt p { color: #A6B0B7; }

/* ---------- Arbeiten ---------- */
.arbeiten-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.arbeiten-kopf .kopfzeile { max-width: 44ch; }
.reihe-steuerung { display: flex; gap: 10px; }
.reihe-steuerung button {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--linie);
  background: #fff; color: var(--tinte); cursor: pointer; display: grid; place-items: center;
}
.reihe-steuerung button:hover { border-color: var(--tinte); }
.reihe {
  display: flex; gap: 22px; margin-top: 46px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 12px; scrollbar-width: none;
}
.reihe::-webkit-scrollbar { display: none; }
.arbeit { flex: 0 0 clamp(266px, 33vw, 400px); scroll-snap-align: start; text-decoration: none; }
.arbeit .rahmen { margin-bottom: 14px; }
.arbeit-name { color: var(--tinte); font-weight: 560; font-size: 1rem; display: block; }
.arbeit-was { color: var(--grau); font-size: 0.9rem; }

/* ---------- Ablauf ---------- */
.ablauf { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 46px); margin-top: 62px; }
.ablauf > div { padding-top: 24px; border-top: 1px solid var(--linie); }
.ablauf-nr { font-size: 0.74rem; font-weight: 620; letter-spacing: 0.2em; color: var(--blau-tief); margin-bottom: 16px; }
.ablauf h4 { margin-bottom: 12px; font-size: 1.12rem; }
.ablauf p { margin: 0; font-size: 0.98rem; }

/* ---------- Fragen ---------- */
.fragen { margin-top: 56px; border-top: 1px solid var(--linie); }
.frage { border-bottom: 1px solid var(--linie); }
.frage summary {
  list-style: none; cursor: pointer; padding: 26px 44px 26px 0; position: relative;
  font-size: clamp(1.06rem, 1.5vw, 1.2rem); font-weight: 560; color: var(--tinte); letter-spacing: -0.015em;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: ''; position: absolute; right: 8px; top: 50%; width: 13px; height: 13px;
  border-right: 2px solid var(--grau); border-bottom: 2px solid var(--grau);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.frage[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.frage-text { padding: 0 60px 28px 0; max-width: 76ch; }
.frage-text p { margin: 0 0 0.9em; }
.frage-text p:last-child { margin-bottom: 0; }

/* ---------- Aufruf ---------- */
.aufruf { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.aufruf h2 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); }
.hinweis-klein { font-size: 0.95rem; color: #8E9AA1; margin-top: 24px; }
.aufruf-karte { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.aufruf-person { display: flex; flex-direction: column; gap: 3px; }
.aufruf-name { color: #fff; font-size: 1.18rem; font-weight: 620; letter-spacing: -0.02em; }
.aufruf-rolle { font-size: 0.93rem; color: #8E9AA1; }
.aufruf-mail { color: #8FCFEC; text-decoration: none; font-size: 0.97rem; border-bottom: 1px solid rgba(143,207,236,0.4); }
.aufruf-mail:hover { color: #fff; border-bottom-color: #fff; }

/* ---------- Fuß ---------- */
.fuss { background: var(--tinte); color: #93A0A7; padding: 0 0 40px; font-size: 0.95rem; }
.fuss-innen { padding-top: clamp(66px, 7vw, 96px); border-top: 1px solid var(--linie-dunkel); }
.fuss-spalten { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(28px, 3.4vw, 56px); }
.fuss h4 { color: #fff; margin-bottom: 18px; font-size: 0.79rem; letter-spacing: 0.16em; text-transform: uppercase; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 11px; line-height: 1.5; }
.fuss a { color: #93A0A7; text-decoration: none; }
.fuss a:hover { color: #fff; }
.fuss-unten {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 54px; padding-top: 26px; border-top: 1px solid var(--linie-dunkel);
  font-size: 0.87rem; color: #737F87;
}

/* ---------- Einblenden ---------- */
.js .auf { opacity: 0; transform: translateY(16px); }
.js .auf.da { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce) {
  .js .auf { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Cookie-Hinweis ---------- */
.cookie-hinweis {
  position: fixed; left: 18px; bottom: 18px; width: min(440px, calc(100vw - 36px));
  background: #fff; border: 1px solid var(--linie); border-radius: 4px; padding: 26px;
  z-index: 90; display: none; box-shadow: 0 18px 50px rgba(16,20,24,0.16);
}
.cookie-hinweis.sichtbar { display: block; }
.cookie-hinweis h3 { font-size: 1.12rem; margin-bottom: 10px; }
.cookie-hinweis p { font-size: 0.92rem; margin-bottom: 18px; }
.cookie-knoepfe { display: flex; gap: 10px; }
.cookie-knoepfe button {
  flex: 1; padding: 13px 16px; border-radius: 3px; font-size: 0.95rem; font-weight: 560;
  cursor: pointer; font-family: inherit;
}
.cookie-knoepfe .ja { background: var(--blau-tief); border: 1px solid var(--blau-tief); color: #fff; }
.cookie-knoepfe .nein { background: #fff; border: 1px solid var(--linie); color: var(--tinte); }

/* ---------- Schmale Geräte ---------- */
@media (max-width: 1080px) {
  .leistung, .unterschied, .betreuung, .aufruf { grid-template-columns: 1fr; }
  .unterschied-bild img { aspect-ratio: 3 / 2; }
  .leistung-gedreht .leistung-beleg { order: 0; }
  .leistung-beleg { margin-bottom: 8px; }
  .unterschied-bild { margin-bottom: 10px; }
  .lage-punkte { grid-template-columns: 1fr; gap: 36px; }
  .lage-punkt { padding: 26px 0 0; }
  .lage-punkt .ikon { margin-bottom: 16px; }
  .betreuung-punkt { padding: 26px 0 8px; }
  .merkmal p { padding-left: 0; }
  .ablauf { grid-template-columns: 1fr 1fr; }
  .fuss-spalten { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px) {
  .menue-schalter { display: block; }
  .menue {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--linie); padding: 18px 28px 28px;
    max-height: calc(100vh - 84px); overflow-y: auto;
  }
  .menue.offen { display: flex; }
  .menue > a, .menue-punkt > a { padding: 13px 0; border-bottom: 1px solid var(--linie); }
  .menue > a.knopf { justify-content: center; margin-top: 18px; border: 1px solid var(--blau-tief); }
  .menue-punkt > a::after { display: none; }
  .untermenue {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; padding: 4px 0 10px; min-width: 0;
  }
  .untermenue a { padding: 9px 0 9px 18px; border-bottom: 1px solid var(--linie); color: var(--grau); }
  .betreuung-punkte { grid-template-columns: 1fr; }
  .kopf-zwei { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .kopf-zwei h2 { max-width: 22ch; }
  .kopf-satz { margin-bottom: 0; }
  .beleg-text { max-width: none; flex: 1 0 100%; }
}

@media (max-width: 620px) {
  body { font-size: 16.5px; }
  .bahn { padding: 0 20px; }
  .kopf-innen { height: 74px; }
  .kopf-logo img { height: 34px; }
  .menue { max-height: calc(100vh - 74px); }
  .aufmacher-innen { padding-top: 92px; }
  .aufmacher-knoepfe .knopf { flex: 1 0 100%; justify-content: center; }
  .aufmacher-band { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .aufmacher-band figure + figure { margin-top: 2px; }
  .aufmacher-band img { aspect-ratio: 16 / 11; }
  .aufmacher-band figcaption { padding: 10px 20px 0; }
  .zusagen { gap: 8px 20px; font-size: 0.88rem; }
  .ablauf, .fuss-spalten { grid-template-columns: 1fr; }
  .bildpaar { grid-template-columns: 1fr; }
  .logos img { height: 24px; }
  .frage summary { padding-right: 34px; }
  .frage-text { padding-right: 0; }
  .cookie-hinweis { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 22px; }
}

/* Drei Standorte im Fuss und im Kontaktaufruf. */
.fuss-orte li { margin-bottom: 14px; line-height: 1.5; }
.fuss-orte li:last-child { margin-bottom: 0; }
.fuss-orte b { font-weight: 620; color: inherit; }
.aufruf-orte {
  margin-top: 4px; font-size: 0.88rem; letter-spacing: 0.02em; opacity: .72;
}

/* =====================================================================
   Fassung 22, 17.09.2026: Unterseiten im System der Startseite.
   Neu: gruppiertes Untermenue, Brotkrumen, Seitenkopf der Unterseiten,
   Referenzkarten, Galerie mit Filter, Projektseiten, Kontaktformular,
   Rechner, Rechtstexte. Alles darunter baut auf den Tokens oben auf.
   ===================================================================== */

:root { --zart: #F5F8FA; --dunkel: #101418; }

/* ---------- Menue ---------- */
.menue > a.aktiv, .menue-punkt > a.aktiv { border-bottom-color: var(--blau-tief); }
.untermenue-gruppen {
  display: grid; grid-template-columns: repeat(3, auto); gap: 0 10px;
  min-width: 0; left: -40px; padding: 22px 12px 18px;
}
.untermenue-gruppe { min-width: 210px; }
.untermenue-titel {
  display: block; padding: 0 24px 8px; font-size: 0.68rem; font-weight: 620;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--grau-hell);
}
.untermenue a[aria-current="page"] { color: var(--blau-tief); }

/* ---------- Brotkrumen ---------- */
.brotkrumen { border-bottom: 1px solid var(--linie); background: #fff; }
.brotkrumen ol {
  list-style: none; margin: 0; padding: 13px 0; display: flex; flex-wrap: wrap;
  gap: 4px 0; font-size: 0.84rem; color: var(--grau);
}
.brotkrumen li + li::before { content: '/'; margin: 0 10px; color: var(--grau-hell); }
.brotkrumen a { color: var(--grau); text-decoration: none; }
.brotkrumen a:hover { color: var(--tinte); }
.brotkrumen [aria-current] { color: var(--tinte); }

/* ---------- Seitenkopf der Unterseiten ---------- */
.seitenkopf { background: linear-gradient(180deg, #fff 0%, #FAF9F6 100%); border-bottom: 1px solid var(--linie); }
.seitenkopf-innen {
  display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(36px, 5vw, 84px);
  align-items: center; padding-block: clamp(64px, 8vw, 118px) clamp(60px, 7vw, 104px);
}
.seitenkopf h1 { font-size: clamp(2.35rem, 4.6vw, 3.9rem); max-width: 16ch; }
.seitenkopf .lead { margin-top: 28px; max-width: 48ch; }
.seitenkopf .aufmacher-knoepfe { margin-top: 36px; }
.seitenkopf-bild { position: relative; }
.seitenkopf-bild .belegzeile { margin-top: 14px; }

/* Zwei Geraete uebereinander: Arbeitsplatz hinten, Telefon vorne rechts. */
.geraete { position: relative; padding: 0 9% 12% 0; }
.geraete .telefon { position: absolute; right: 0; bottom: 0; width: 27%; }

/* ---------- Rahmen ---------- */
.rahmen-browser { box-shadow: 0 30px 60px -34px rgba(16,20,24,0.28); }
.browser-leiste {
  display: flex; gap: 6px; padding: 10px 12px; background: #F3F1ED;
  border-bottom: 1px solid var(--linie);
}
.browser-leiste i { width: 9px; height: 9px; border-radius: 50%; background: #D8D4CD; display: block; }
.telefon {
  border: 7px solid var(--tinte); border-radius: 26px; overflow: hidden; background: var(--tinte);
  box-shadow: 0 30px 60px -30px rgba(16,20,24,0.4);
}
.telefon img { width: 100%; aspect-ratio: 9 / 18.5; object-fit: cover; object-position: top; border-radius: 19px; }
.foto { border-radius: 4px; overflow: hidden; }
.foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Vorteile ---------- */
.vorteile { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(30px, 3.4vw, 56px); }
.vorteil { padding-top: 26px; border-top: 2px solid var(--blau-tief); }
.vorteil .ikon { margin-bottom: 20px; }
.vorteil h3 { font-size: 1.22rem; margin-bottom: 10px; letter-spacing: -0.02em; }
.vorteil p { margin: 0; font-size: 1rem; }
.abschnitt-schluss { margin-top: clamp(46px, 5vw, 72px); font-size: 1.1rem; max-width: 60ch; color: var(--tinte); }

/* ---------- Text mit Bild ---------- */
.zweispalt { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 84px); align-items: center; }
.zweispalt-gedreht > :first-child { order: 2; }
.zweispalt h2 { margin-bottom: 26px; }
.zweispalt .punkte { margin-top: 26px; }

/* ---------- Referenzkarten ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.chip {
  display: inline-block; font-size: 0.74rem; font-weight: 540; letter-spacing: 0.01em;
  color: var(--text); background: #fff; border: 1px solid var(--linie);
  border-radius: 999px; padding: 3px 10px; line-height: 1.5;
}
.abschnitt-sand .chip { background: #fff; }
.ref-karte { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.ref-karte-bild { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: var(--sand); border: 1px solid var(--linie); }
.ref-karte-bild img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.ref-karte:hover .ref-karte-bild img { transform: scale(1.035); }
.ref-karte-text { display: flex; flex-direction: column; padding-top: 18px; }
.ref-karte-branche { font-size: 0.72rem; font-weight: 620; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blau-tief); }
.ref-karte-name { margin-top: 8px; font-size: 1.28rem; font-weight: 620; color: var(--tinte); letter-spacing: -0.02em; line-height: 1.2; }
.ref-karte:hover .ref-karte-name { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.ref-karte-teaser { margin-top: 8px; font-size: 0.97rem; color: var(--text); line-height: 1.55; }

.ref-reihe {
  display: flex; gap: 26px; margin-top: 46px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 12px; scrollbar-width: none;
}
.ref-reihe::-webkit-scrollbar { display: none; }
.ref-reihe > .ref-karte { flex: 0 0 clamp(270px, 30vw, 380px); scroll-snap-align: start; }
.ref-reihe-fest { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; }
.ref-reihe-fest > .ref-karte { flex: none; }
.ref-reihe + .mehr { margin-top: 34px; }

/* ---------- Galerie mit Filter ---------- */
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 38px; }
.filter button {
  font: inherit; font-size: 0.92rem; font-weight: 540; cursor: pointer;
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--linie);
  background: #fff; color: var(--tinte); transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.filter button:hover { border-color: var(--tinte); }
.filter button[aria-pressed="true"] { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.filter button span { opacity: .55; margin-left: 4px; font-weight: 450; }
.galerie {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(40px, 4vw, 60px) clamp(22px, 2.6vw, 38px);
  margin-top: 54px;
}
.galerie > .ref-karte:nth-child(1) { grid-column: span 2; }
.galerie > .ref-karte:nth-child(1) .ref-karte-bild { aspect-ratio: 16 / 9.6; }
.galerie > .ref-karte[hidden] { display: none; }
.galerie-leer { margin-top: 40px; color: var(--grau); }
.galerie.gefiltert > .ref-karte { grid-column: auto; }
.galerie.gefiltert > .ref-karte .ref-karte-bild { aspect-ratio: 16 / 10; }

/* ---------- Projektseite ---------- */
.projekt-kopf { padding: clamp(58px, 7vw, 104px) 0 clamp(40px, 4vw, 60px); }
.projekt-kopf h1 { font-size: clamp(2.3rem, 4.8vw, 4rem); max-width: 20ch; margin-top: 4px; }
.projekt-kopf .lead { margin-top: 26px; max-width: 58ch; }
.projekt-fakten {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 34px;
  margin-top: clamp(40px, 4.4vw, 60px); padding-top: 26px; border-top: 1px solid var(--linie);
}
.projekt-fakten dt { font-size: 0.72rem; font-weight: 620; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grau); margin-bottom: 8px; }
.projekt-fakten dd { margin: 0; color: var(--tinte); font-size: 1rem; }
.projekt-fakten dd a { color: var(--tinte); }
.projekt-fakten .chips { margin-top: 0; }
.projekt-titelbild { margin-top: 0; }
.projekt-titelbild .rahmen-browser, .projekt-titelbild .foto { border-radius: 5px; }
.projekt-titelbild .foto img { aspect-ratio: 16 / 8; }

.projekt-teile { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 84px); }
.projekt-teile h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 24px; }
.projekt-teile p { font-size: 1.06rem; }

.zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 3vw, 50px); margin-top: 10px; }
.zahl { padding-top: 22px; border-top: 2px solid var(--blau-tief); }
.zahl b { display: block; font-size: clamp(2.6rem, 5vw, 3.8rem); font-weight: 620; letter-spacing: -0.04em; color: var(--tinte); line-height: 1; }
.zahl span { display: block; margin-top: 12px; font-size: 0.98rem; }

.bilder-raster { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; margin-top: 46px; align-items: start; }
.bilder-raster figure { margin: 0; }
.bilder-raster figcaption { margin-top: 10px; font-size: 0.86rem; color: var(--grau); }
.bilder-raster .b-breit { grid-column: span 8; }
.bilder-raster .b-halb { grid-column: span 6; }
.bilder-raster .b-drittel { grid-column: span 4; }
.bilder-raster .b-telefon { grid-column: span 3; }
.bilder-raster .foto img { aspect-ratio: 3 / 2; }
.bilder-raster .b-breit .foto img { aspect-ratio: 16 / 9; }

.zitat-block { max-width: 820px; }
.zitat-block blockquote { margin: 0; font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.3; letter-spacing: -0.02em; color: var(--tinte); font-weight: 520; }
.zitat-block figcaption { margin-top: 22px; color: var(--grau); }
.zitat-platz {
  border: 1.5px dashed #CFC9BF; border-radius: 4px; padding: 26px 28px; color: var(--grau);
  background: repeating-linear-gradient(135deg, #fff 0 12px, #FBFAF8 12px 24px);
}
.zitat-platz b { color: var(--tinte); display: block; margin-bottom: 6px; }

.projekt-weiter { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.projekt-weiter a {
  display: block; padding: 30px 0; border-top: 1px solid var(--linie); text-decoration: none; color: var(--tinte);
}
.projekt-weiter a:last-child { text-align: right; }
.projekt-weiter small { display: block; color: var(--grau); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px; }
.projekt-weiter strong { font-size: 1.3rem; letter-spacing: -0.02em; }
.projekt-weiter a:hover strong { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Passt / passt nicht ---------- */
.passt { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 70px); margin-top: 46px; }
.passt h3 { margin-bottom: 8px; }
.punkte-nein li::before {
  width: 12px; height: 12px; top: 19px; left: 1px; border: 0; transform: none;
  background:
    linear-gradient(45deg, transparent 45%, var(--grau-hell) 45%, var(--grau-hell) 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, var(--grau-hell) 45%, var(--grau-hell) 55%, transparent 55%);
}

/* ---------- Ablauf mit drei Schritten ---------- */
.ablauf-3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- Zweiter Link unter einer Leistung ---------- */
.mehr + .mehr-zweit { margin-left: 26px; }

/* ---------- Anzeige im Feed (Mitarbeiter finden) ---------- */
.feed {
  max-width: 400px; margin-left: auto; background: #fff; border: 1px solid var(--linie);
  border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -34px rgba(16,20,24,0.28);
}
.feed-kopf { display: flex; align-items: center; gap: 11px; padding: 14px 16px; }
.feed-logo { width: 38px; height: 38px; border-radius: 50%; background: var(--sand); border: 1px solid var(--linie); display: grid; place-items: center; font-weight: 700; font-size: 0.8rem; color: var(--tinte); }
.feed-name { font-weight: 620; color: var(--tinte); font-size: 0.93rem; line-height: 1.2; }
.feed-name small { display: block; font-weight: 400; color: var(--grau); font-size: 0.76rem; }
.feed-text { padding: 0 16px 12px; font-size: 0.92rem; color: var(--tinte); line-height: 1.5; margin: 0; }
.feed-bild { aspect-ratio: 1 / 1; background: linear-gradient(160deg, #2A3540 0%, #101418 100%); display: grid; place-items: center; padding: 30px; }
.feed-bild span { color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; text-align: center; }
.feed-bild em { font-style: normal; color: #63C3EA; }
.feed-fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--linie); background: #FAFAF8; }
.feed-fuss small { color: var(--grau); font-size: 0.78rem; }
.feed-fuss b { font-size: 0.82rem; background: var(--tinte); color: #fff; padding: 7px 14px; border-radius: 4px; font-weight: 560; }

/* ---------- Pruefliste (Wartung) ---------- */
.pruefliste { background: #fff; border: 1px solid var(--linie); border-radius: 6px; padding: 8px 26px; box-shadow: 0 30px 60px -34px rgba(16,20,24,0.22); }
.pruef { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--linie); font-size: 0.96rem; color: var(--tinte); }
.pruef:last-child { border-bottom: 0; }
.pruef i { width: 10px; height: 10px; border-radius: 50%; background: #2FA36B; box-shadow: 0 0 0 4px rgba(47,163,107,0.14); flex: none; }
.pruef small { margin-left: auto; color: var(--grau); font-size: 0.82rem; white-space: nowrap; }
.pruefliste-kopf { display: flex; justify-content: space-between; padding: 16px 0 12px; border-bottom: 1px solid var(--linie); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grau); }

/* ---------- Rechner (Google Ads) ---------- */
.rechner { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(30px, 4vw, 56px); align-items: start; margin-top: 46px; }
.rechner-felder { display: grid; gap: 20px; }
.feld label { display: block; font-size: 0.93rem; font-weight: 540; margin-bottom: 7px; color: var(--tinte); }
.feld-hinweis { display: block; font-size: 0.84rem; color: var(--grau); margin-top: 6px; line-height: 1.45; }
.feld-eingabe { display: flex; align-items: center; gap: 8px; border: 1px solid var(--linie); border-radius: 3px; padding: 12px 14px; background: #fff; transition: border-color .2s ease; }
.feld-eingabe:focus-within { border-color: var(--blau-tief); }
.feld-eingabe input { width: 100%; border: 0; padding: 0; font: inherit; font-weight: 600; font-size: 1.05rem; color: var(--tinte); background: transparent; -moz-appearance: textfield; }
.feld-eingabe input:focus { outline: none; }
.feld-eingabe input::-webkit-outer-spin-button, .feld-eingabe input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.feld-einheit { font-size: 0.95rem; color: var(--grau); flex: none; }
.rechner-ergebnis { border-left: 2px solid var(--blau-tief); padding-left: clamp(22px, 3vw, 34px); }
.ergebnis-zahl { font-size: clamp(3rem, 7vw, 4.6rem); font-weight: 620; line-height: 1; letter-spacing: -0.04em; color: var(--blau-tief); }
.ergebnis-satz { font-size: 1.05rem; line-height: 1.6; margin-top: 14px; max-width: 46ch; }
.ergebnis-zeile { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--linie); font-size: 0.95rem; }
.ergebnis-zeile:first-of-type { border-top: 1px solid var(--linie); }
.ergebnis-zeile b { white-space: nowrap; }
.ergebnis-block { margin-top: 30px; }
.ergebnis-warnung { margin-top: 22px; padding: 16px 18px; border-radius: 3px; background: #fff; border: 1px solid var(--linie); font-size: 0.93rem; line-height: 1.6; color: var(--text); }
.rechner .hinweis-klein { color: var(--grau); }

/* ---------- Kontakt ---------- */
.kontakt-raster { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(40px, 5vw, 90px); align-items: start; }
.formular { background: #fff; border: 1px solid var(--linie); border-radius: 6px; padding: clamp(24px, 3.4vw, 44px); }
.formular h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: 8px; }
.formular-einleitung { color: var(--grau); margin-bottom: 30px; }
.formular fieldset { border: 0; margin: 0 0 30px; padding: 0; }
.formular legend { font-size: 0.72rem; font-weight: 620; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blau-tief); margin-bottom: 16px; padding: 0; }
.felder-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.f { display: flex; flex-direction: column; gap: 7px; }
.f-voll { grid-column: 1 / -1; }
.f label, .f .f-titel { font-size: 0.93rem; font-weight: 540; color: var(--tinte); }
.f label .pflicht, .f .f-titel .pflicht { color: var(--blau-tief); }
.f input[type=text], .f input[type=email], .f input[type=tel], .f input[type=url], .f select, .f textarea {
  font: inherit; font-size: 1rem; color: var(--tinte); background: #FCFBFA;
  border: 1px solid #D9D5CE; border-radius: 3px; padding: 12px 14px; min-height: 50px; width: 100%;
  transition: border-color .15s ease, background .15s ease;
}
.f select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--grau) 50%), linear-gradient(135deg, var(--grau) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.f textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--blau-tief); background: #fff; box-shadow: 0 0 0 3px rgba(0,101,143,0.12); }
.f-hinweis { font-size: 0.83rem; color: var(--grau); }
.auswahl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.auswahl label { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border: 1px solid #E2DED7; border-radius: 3px; cursor: pointer; font-size: 0.95rem; font-weight: 450; color: var(--text); background: #FCFBFA; }
.auswahl label:hover { border-color: #C9C3BA; }
.auswahl input { margin: 4px 0 0; accent-color: var(--blau-tief); width: 16px; height: 16px; flex: none; }
.auswahl label:has(input:checked) { border-color: var(--blau-tief); background: #F2F8FB; color: var(--tinte); }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.einwilligung { font-size: 0.88rem; color: var(--grau); margin: 6px 0 22px; }
.formular .knopf { border: 0; cursor: pointer; font-family: inherit; }
.fehlermeldung { display: none; background: #FDF1EF; border: 1px solid #F1C4BC; color: #8A2C1D; border-radius: 3px; padding: 14px 16px; margin-bottom: 24px; font-size: 0.95rem; }
.fehlermeldung.sichtbar { display: block; }

.kontakt-seite { position: sticky; top: 110px; }
.kontakt-seite h3 { font-size: 1.2rem; margin-bottom: 14px; }
.danach { list-style: none; margin: 0 0 40px; padding: 0; counter-reset: schritt; }
.danach li { position: relative; padding: 0 0 22px 46px; counter-increment: schritt; }
.danach li::before { content: counter(schritt); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--blau-tief); color: var(--blau-tief); display: grid; place-items: center; font-size: 0.85rem; font-weight: 620; }
.danach b { display: block; color: var(--tinte); }
.kontakt-orte { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.kontakt-orte li { padding-top: 16px; border-top: 1px solid var(--linie); line-height: 1.55; }
.kontakt-orte b { color: var(--tinte); }
.kontakt-mail { display: inline-block; margin: 6px 0 36px; font-size: 1.12rem; font-weight: 560; color: var(--tinte); text-decoration: none; border-bottom: 1.5px solid var(--blau); }

/* ---------- Rechtstexte ---------- */
.rechtstext { max-width: 760px; }
.rechtstext h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin: 54px 0 14px; }
.rechtstext h3 { font-size: 1.05rem; margin: 30px 0 8px; }
.rechtstext p { margin: 0 0 14px; }
.rechtstext ul { margin: 0 0 16px; padding-left: 20px; }
.rechtstext li { margin-bottom: 7px; }
.rechtstext .anschrift { font-style: normal; margin: 0 0 16px; line-height: 1.7; }
.rechtstext .stand { color: var(--grau); font-size: 0.9rem; }
.rechtstext table { border-collapse: collapse; width: 100%; margin: 0 0 18px; font-size: 0.94rem; }
.rechtstext th, .rechtstext td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--linie); }
.rechtstext th { color: var(--tinte); font-weight: 600; white-space: nowrap; }
.rechtstext-kopf { padding: clamp(60px, 7vw, 96px) 0 8px; }
.rechtstext-kopf h1 { font-size: clamp(2rem, 4.4vw, 3rem); }

/* ---------- Ueber uns ---------- */
.werte { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 44px); margin-top: 50px; }
.werte > div { padding-top: 22px; border-top: 2px solid var(--blau-tief); }
.werte .ikon { margin-bottom: 16px; }
.werte h4 { margin-bottom: 8px; }
.werte p { margin: 0; font-size: 0.98rem; }
.orte-drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); margin-top: 46px; }
.orte-drei > div { padding: 24px 0 0; border-top: 1px solid var(--linie); }
.orte-drei h4 { margin-bottom: 8px; }

/* ---------- Danke ---------- */
.danke { padding: clamp(90px, 11vw, 160px) 0; }
.danke h1 { font-size: clamp(2.4rem, 5vw, 4rem); max-width: 18ch; }
.danke .lead { margin-top: 26px; max-width: 52ch; }

/* ---------- Fuss mit fuenf Spalten ---------- */
.fuss-spalten-fuenf { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; }

/* ---------- Schmale Geraete, Ergaenzungen ---------- */
@media (max-width: 1180px) {
  .fuss-spalten-fuenf { grid-template-columns: 1fr 1fr 1fr; }
  .fuss-spalten-fuenf > div:first-child { grid-column: 1 / -1; max-width: 60ch; }
}
@media (max-width: 1080px) {
  .seitenkopf-innen, .zweispalt, .projekt-teile, .kontakt-raster { grid-template-columns: 1fr; }
  .zweispalt-gedreht > :first-child { order: 0; }
  .seitenkopf h1 { max-width: 20ch; }
  .vorteile { grid-template-columns: 1fr; gap: 36px; }
  .galerie, .ref-reihe-fest { grid-template-columns: 1fr 1fr; }
  .galerie > .ref-karte:nth-child(1) { grid-column: 1 / -1; }
  .projekt-fakten { grid-template-columns: 1fr 1fr; }
  .werte { grid-template-columns: 1fr 1fr; }
  .kontakt-seite { position: static; }
  .feed { margin: 0 auto; }
  .ablauf-3 { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .untermenue-gruppen { display: block; padding: 4px 0 10px; }
  .untermenue-gruppe { min-width: 0; }
  .untermenue-titel { padding: 12px 0 4px 18px; }
}
@media (max-width: 760px) {
  .rechner, .passt { grid-template-columns: minmax(0, 1fr); }
  .rechner-ergebnis { border-left: 0; border-top: 2px solid var(--blau-tief); padding-left: 0; padding-top: 26px; }
  .galerie, .ref-reihe-fest { grid-template-columns: 1fr; }
  .ref-reihe-fest { display: flex; overflow-x: auto; }
  .ref-reihe-fest > .ref-karte { flex: 0 0 82%; scroll-snap-align: start; }
  .zahlen { grid-template-columns: 1fr; gap: 26px; }
  .bilder-raster { grid-template-columns: 1fr 1fr; }
  .bilder-raster .b-breit, .bilder-raster .b-halb, .bilder-raster .b-drittel { grid-column: 1 / -1; }
  .bilder-raster .b-telefon { grid-column: span 1; }
  .felder-zwei, .auswahl { grid-template-columns: 1fr; }
  .orte-drei, .werte, .projekt-weiter { grid-template-columns: 1fr; }
  .projekt-weiter a:last-child { text-align: left; }
  .fuss-spalten-fuenf { grid-template-columns: 1fr; }
  .mehr + .mehr-zweit { margin-left: 0; display: flex; width: max-content; }
}
@media (max-width: 620px) {
  .projekt-fakten { grid-template-columns: 1fr; }
  .geraete { padding: 0 14% 16% 0; }
  .geraete .telefon { width: 33%; border-width: 5px; border-radius: 18px; }
}

.logos-gross { margin-top: 10px; gap: 30px clamp(30px, 4vw, 60px); }
.logos-gross img { height: 34px; }

/* Das gruppierte Untermenue ist breiter als der Menuepunkt. Es haengt deshalb
   an der Kopfzeile und endet buendig mit der Bahn, sonst ragt es rechts aus
   dem Fenster und erzeugt eine waagrechte Bildlaufleiste. */
@media (min-width: 981px) {
  .menue-punkt { position: static; }
  .untermenue-gruppen { left: auto; right: max(28px, calc((100vw - var(--bahn)) / 2 + 28px)); top: calc(100% - 1px); }
  .untermenue-gruppen::before { content: ''; position: absolute; left: 0; right: 0; top: -26px; height: 26px; }
}

/* Bilder der Projektseite, Zeilen kommen aus bau.py (raster). */
.bilder-projekt { row-gap: 34px; }
.bilder-projekt .b-telefon { grid-column: span 3; }
.bilder-projekt .b-mitte { grid-column: 5 / span 4; }
.bilder-projekt .b-neben { grid-column: span 9; }
.bilder-projekt .b-neben .foto img, .bilder-projekt .b-halb .foto img { aspect-ratio: 3 / 2; }
.bilder-projekt .b-halb { grid-column: span 6; }
.bilder-projekt .b-voll { grid-column: 1 / -1; }
.bilder-projekt .b-voll .foto img { aspect-ratio: 16 / 8; }
.galerie > .ref-karte:nth-child(3n+1):last-child { grid-column: span 2; }
.galerie > .ref-karte:nth-child(3n+1):last-child .ref-karte-bild { aspect-ratio: 16 / 9.6; }
.galerie.gefiltert > .ref-karte:nth-child(n) { grid-column: auto; }
.galerie.gefiltert > .ref-karte:nth-child(n) .ref-karte-bild { aspect-ratio: 16 / 10; }
@media (max-width: 760px) {
  .bilder-projekt .b-telefon { grid-column: 1 / -1; max-width: 240px; }
  .bilder-projekt .b-neben, .bilder-projekt .b-halb, .bilder-projekt .b-mitte { grid-column: 1 / -1; }
  .galerie > .ref-karte:nth-child(3n+1):last-child { grid-column: auto; }
}
.feed + .belegzeile { max-width: 400px; margin-left: auto; }
@media (max-width: 1080px) { .feed + .belegzeile { margin-right: auto; } }

/* Foto und Video (Fassung 24). Film mit Bedienleiste, geladen erst beim Abspielen. */
.film video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #10202c; }
.vorteil .mehr { margin-top: 14px; }
.vorteile + .vorteile { margin-top: clamp(30px, 3.4vw, 56px); }
/* Ein Dreh, drei Zuschnitte: dasselbe Bild in den Seitenverhaeltnissen der Kanaele. */
.formate { display: flex; gap: clamp(12px, 2vw, 26px); align-items: flex-end; margin-top: 46px; }
.format { margin: 0; }
.format > div { overflow: hidden; border-radius: 4px; }
.format img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; }
.format-quer { flex: 3.2; } .format-quer > div { aspect-ratio: 16 / 9; }
.format-feed { flex: 1.45; } .format-feed > div { aspect-ratio: 4 / 5; }
.format-hoch { flex: 1; } .format-hoch > div { aspect-ratio: 9 / 16; }
.format figcaption { margin-top: 10px; font-size: 0.86rem; color: var(--grau); line-height: 1.4; }
.format figcaption b { display: block; color: var(--blau-tief); font-size: 0.95rem; }
@media (max-width: 760px) {
  .formate { flex-wrap: wrap; }
  .format-quer { flex: 1 1 100%; }
}

/* Loesungen: Menue und Startseite (Fassung 24). Das einfache Aufklappmenue
   haengt am Menuepunkt, nicht an der Kopfzeile wie das gruppierte. */
@media (min-width: 981px) { .menue-punkt.menue-punkt-einfach { position: relative; } }
.menue-punkt-einfach .untermenue { min-width: 350px; }
.fuss-spalten-sechs { grid-template-columns: 1.3fr repeat(5, 1fr); }
@media (max-width: 1080px) {
  .fuss-spalten-sechs { grid-template-columns: 1fr 1fr 1fr; }
  .fuss-spalten-sechs > div:first-child { grid-column: 1 / -1; max-width: 60ch; }
}
@media (max-width: 760px) { .fuss-spalten-sechs { grid-template-columns: 1fr; } }
.loesungen-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(24px, 3vw, 48px); margin-top: 40px; }
.loesungen-liste a { display: block; padding: 22px 0 24px; border-top: 1px solid var(--linie); color: var(--text); text-decoration: none; }
.loesungen-liste a b { display: block; font-size: 1.12rem; font-weight: 600; color: var(--tinte); letter-spacing: -0.015em; margin-bottom: 6px; }
.loesungen-liste a b::after { content: ' \2192'; color: var(--blau-tief); }
.loesungen-liste a span { font-size: 0.97rem; color: var(--grau); }
.loesungen-liste a:hover b { color: var(--blau-tief); }
@media (max-width: 980px) { .loesungen-liste { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .loesungen-liste { grid-template-columns: 1fr; } }

/* Auftraggeber-Logos (Fassung 24): feste Zellen, zentrierte Zeilen, Hoehe je Logo. */
.logos-gross { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 44px 0; margin-top: 30px; }
.logos-gross img { flex: 0 0 auto; height: var(--h, 36px); max-width: 180px; object-fit: contain; margin: 0 clamp(18px, 2.6vw, 38px); }
@media (max-width: 760px) { .logos-gross { gap: 30px 0; } .logos-gross img { height: calc(var(--h, 36px) * .8); max-width: 120px; margin: 0 16px; } }

/* ================= Fassung 25, 23.09.2026 =================
   Anmerkungsrunde vom 23.09.2026. Alles hier gilt seitenweit, damit dieselbe
   Sache ueberall gleich aussieht: Symbole, Schritte, Referenzkoepfe. */

/* Symbole groesser. 30 px gingen neben den Ueberschriften unter. Die Strichstaerke
   sinkt mit, sonst wirken sie bei 40 px plump. */
.ikon svg { width: 40px; height: 40px; stroke-width: 1.25; }
.merkmal h4 .ikon svg { width: 32px; height: 32px; stroke-width: 1.3; }
.merkmal p { padding-left: 45px; }

/* Schritte als Zeitstrahl: Nummer im Kreis, Linie zum naechsten Schritt.
   Gilt fuer jeden Ablauf der Seite (Makro t.ablauf und Startseite). */
.ablauf { --ablauf-abstand: clamp(24px, 3vw, 46px); gap: var(--ablauf-abstand); counter-reset: none; }
.ablauf > div { position: relative; padding-top: 0; border-top: 0; }
.ablauf-nr {
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: #E3F1F8; color: var(--blau-tief); font-size: 1.12rem; font-weight: 650;
  letter-spacing: 0; margin-bottom: 24px; position: relative; z-index: 1;
  font-variant-numeric: tabular-nums;
}
.ablauf > div:last-child .ablauf-nr { background: var(--blau-tief); color: #fff; }
.ablauf > div:not(:last-child)::after {
  content: ''; position: absolute; top: 30px; left: 72px;
  right: calc(-1 * var(--ablauf-abstand) + 12px); height: 2px;
  background: linear-gradient(90deg, #9CCBE0, #E3F1F8);
}
.ablauf h4 { font-size: 1.15rem; }
@media (max-width: 1080px) {
  .ablauf-3 { grid-template-columns: repeat(3, 1fr); }
  .ablauf:not(.ablauf-3) > div:nth-child(2n)::after { display: none; }
}
@media (max-width: 760px) {
  .ablauf, .ablauf-3 { grid-template-columns: 1fr; }
  .ablauf > div { padding-left: 80px; min-height: 60px; padding-bottom: 8px; }
  .ablauf-nr { position: absolute; left: 0; top: -6px; margin: 0; }
  .ablauf > div:not(:last-child)::after,
  .ablauf:not(.ablauf-3) > div:nth-child(2n):not(:last-child)::after {
    display: block; top: 62px; bottom: calc(-1 * var(--ablauf-abstand) + 6px);
    left: 29px; right: auto; width: 2px; height: auto;
    background: linear-gradient(180deg, #9CCBE0, #E3F1F8);
  }
}

/* Kontakt: die drei Schritte im selben Kreis wie die Ablaeufe. */
.danach li { padding-left: 58px; padding-bottom: 26px; }
.danach li::before { width: 40px; height: 40px; top: -6px; border: 0; background: #E3F1F8; font-size: 0.95rem; font-weight: 650; }
.danach li:last-child::before { background: var(--blau-tief); color: #fff; }

/* Loesungen als Kacheln mit Symbol statt als Textliste. */
.loesungen-kacheln { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.loesungen-kacheln a {
  display: flex; flex-direction: column; gap: 10px; padding: 30px 24px 26px;
  background: var(--sand); border: 1px solid transparent; border-radius: 6px;
  color: var(--text); text-decoration: none; transition: background .2s, border-color .2s, transform .2s;
}
.loesungen-kacheln a:hover { background: #fff; border-color: var(--blau-tief); transform: translateY(-3px); }
.loesungen-kacheln .ikon { margin-bottom: 12px; }
.loesungen-kacheln b { font-size: 1.1rem; font-weight: 600; color: var(--tinte); letter-spacing: -0.015em; line-height: 1.3; }
.loesungen-kacheln span { font-size: 0.95rem; color: var(--grau); line-height: 1.5; }
.loesungen-kacheln i { margin-top: auto; padding-top: 8px; font-style: normal; color: var(--blau-tief); font-size: 1.2rem; }
@media (max-width: 1180px) { .loesungen-kacheln { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .loesungen-kacheln { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .loesungen-kacheln { grid-template-columns: 1fr; } }

/* Startseite: Aushaengeschild mit Bild daneben statt halber Zeile Text. */
.lage-bild { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(36px, 5vw, 84px); align-items: center; margin-top: clamp(56px, 6vw, 96px); }
.lage-bild .lage-schluss { margin-top: 0; }
.lage-bild .lage-schluss + .lage-schluss { margin-top: 20px; }
.lage-bild figure { margin: 0; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 4.2; }
.lage-bild img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 980px) { .lage-bild { grid-template-columns: 1fr; } .lage-bild figure { aspect-ratio: 4 / 3; } }

/* Vier Bilder im Leistungsblock Bilder und Filme. */
.bildvier { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bildvier div { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; }
.bildvier img { width: 100%; height: 100%; object-fit: cover; }

/* Referenzkopf zweispaltig wie jeder andere Abschnittskopf, damit rechts kein
   Loch bleibt. Die Pfeile stehen unter dem Satz. */
.ref-kopf { margin-bottom: 0; }
.ref-kopf .kopf-rechts { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.ref-kopf .kopf-rechts .reihe-steuerung { align-self: flex-end; }
.ref-reihe-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .ref-kopf .kopf-rechts .reihe-steuerung { align-self: flex-start; } }

/* Telefon im Seitenkopf nicht hoeher als der Text daneben. */
.seitenkopf-bild > .telefon { max-width: 280px; margin-inline: auto; }
.seitenkopf-bild > .telefon + .belegzeile { text-align: center; }

/* Seitenkopf mit Foto (Ueber uns, Kontakt, KI-Seiten). */
.seitenkopf-foto { border-radius: 6px; overflow: hidden; aspect-ratio: 5 / 4; box-shadow: 0 30px 60px -34px rgba(16,20,24,0.28); }
.seitenkopf-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kopf-foto-raster { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 5vw, 84px); align-items: center; }
.kopf-foto-raster h1 { max-width: 17ch; }
@media (max-width: 980px) { .kopf-foto-raster { grid-template-columns: 1fr; } }

/* KI-Antwort als Beispielgrafik (KI-Optimierung, KI-Werbung). */
.ki-antwort { background: #fff; border: 1px solid var(--linie); border-radius: 10px; padding: 26px; box-shadow: 0 30px 60px -34px rgba(16,20,24,0.22); font-size: 0.95rem; }
.ki-frage { margin-left: auto; max-width: 85%; background: #F1F4F6; border-radius: 14px 14px 4px 14px; padding: 12px 16px; color: var(--tinte); }
.ki-text { margin-top: 18px; color: var(--text); line-height: 1.6; }
.ki-text b { color: var(--tinte); }
.ki-quelle { display: inline-block; margin-top: 12px; font-size: 0.8rem; padding: 4px 10px; border-radius: 20px; background: #E3F1F8; color: var(--blau-tief); }
.ki-anzeige { margin-top: 18px; border: 1px solid var(--linie); border-radius: 8px; padding: 14px 16px; }
.ki-anzeige small { display: block; font-size: 0.72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grau); margin-bottom: 4px; }
.ki-anzeige b { color: #1a0dab; font-weight: 500; }
.vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kopf-foto-raster h1 { font-size: clamp(2.2rem, 3.9vw, 3.3rem); }

/* ================= Fassung 26, 24.09.2026 =================
   Vorher/Nachher auf der Seite KI-Bilder und KI-Videos: Querformat links,
   Hochformat rechts, beide gleich hoch. */
.vorher-nachher { display: grid; grid-template-columns: 1.9fr 1fr; gap: clamp(18px, 3vw, 40px); align-items: end; }
.vorher-nachher figure { margin: 0; }
.vorher-nachher figure > div { border-radius: 6px; overflow: hidden; aspect-ratio: 3 / 2; box-shadow: 0 30px 60px -34px rgba(16,20,24,0.28); }
.vorher-nachher .vn-hoch > div { aspect-ratio: 9 / 16; }
.vorher-nachher img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vorher-nachher figcaption { margin-top: 12px; font-size: 0.9rem; color: var(--grau); }
.vorher-nachher figcaption b { display: block; color: var(--tinte); font-weight: 600; }
@media (max-width: 620px) { .vorher-nachher { grid-template-columns: 1fr; } .vorher-nachher .vn-hoch { max-width: 260px; } }

/* ================= Fassung 27, 24.09.2026 ================= */
/* Vorher/Nachher mit zwei gleich grossen Bildern. */
.vorher-nachher.vn-gleich { grid-template-columns: 1fr 1fr; align-items: start; }
.vorher-nachher.vn-gleich figure > div { aspect-ratio: 16 / 10; }
@media (max-width: 620px) { .vorher-nachher.vn-gleich { grid-template-columns: 1fr; } }

/* Knopf mit Linie im Aufmacher: die weisse Flaeche ueberschrieb das Hover,
   Schrift und Grund waren dann beide weiss. */
.aufmacher .knopf-linie:hover { background: var(--tinte); border-color: var(--tinte); color: #fff; }

/* Gruppentitel im Menue als Link auf die Uebersichtsseite. */
.untermenue a.untermenue-titel-link { display: block; padding: 0 24px 8px; font-size: 0.68rem; font-weight: 620; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blau-tief); text-decoration: none; }
.untermenue a.untermenue-titel-link:hover { color: var(--tinte); }
@media (max-width: 980px) { .untermenue a.untermenue-titel-link { padding: 12px 0 4px 18px; } }

/* Bildband unter einem Abschnitt (KI-Werbung). */
.bildband { margin: clamp(40px, 5vw, 70px) 0 0; border-radius: 6px; overflow: hidden; aspect-ratio: 21 / 9; }
.bildband img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) { .bildband { aspect-ratio: 4 / 3; } }

/* ================= Fassung 28, 24.09.2026 ================= */
/* Abschnittsmarken eine Spur groesser (Anmerkung KI-Werbung). */
.marke { font-size: 0.78rem; }

/* Startseite Betreuung: die vier Punkte beginnen auf Hoehe der Ueberschrift,
   nicht der Marke darueber. */
.betreuung-punkte { margin-top: calc(0.78rem * 1.6 + 22px); }
@media (max-width: 980px) { .betreuung-punkte { margin-top: 0; } }

/* Telefon mit Video (TikTok) und Feed mit Video (Meta). */
.telefon-video video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 19px; background: var(--tinte); }
.seitenkopf-bild > .telefon-video { max-width: 300px; }
.feed-bild-video { padding: 0; aspect-ratio: 4 / 5; background: var(--tinte); }
.feed-bild-video video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Videoproduktion: Showreel groesser, darf rechts ueber die Bahn hinausragen. */
@media (min-width: 981px) {
  .film-gross { margin-right: calc(-1 * min(8vw, 120px)); }
}

/* Zwei Formate nebeneinander, quer und hoch gleich hoch. */
.medien-paar { display: grid; grid-template-columns: 16fr 5.4fr; gap: clamp(16px, 2.4vw, 32px); align-items: end; }
.medien-paar figure { margin: 0; }
.medien-paar figure > div { border-radius: 6px; overflow: hidden; background: var(--tinte); box-shadow: 0 30px 60px -34px rgba(16,20,24,0.28); }
.medien-paar .mp-quer { aspect-ratio: 16 / 9; }
.medien-paar .mp-hoch { aspect-ratio: 9 / 16; }
.medien-paar video, .medien-paar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.medien-paar figcaption { margin-top: 12px; font-size: 0.9rem; color: var(--grau); }
.medien-paar figcaption b { display: block; color: var(--tinte); font-weight: 600; }
@media (max-width: 620px) { .medien-paar { grid-template-columns: 1fr; } .medien-paar .mp-hoch { max-width: 240px; } }
/* Aushaengeschild-Bild so hoch wie der Text daneben (Anmerkung 24.09.2026). */
@media (min-width: 981px) {
  .lage-bild { align-items: stretch; }
  .lage-bild figure { aspect-ratio: auto; position: relative; min-height: 300px; }
  .lage-bild img { position: absolute; inset: 0; object-position: 50% 60%; }
}