/* ===== Schriften, selbst gehostet ==============================
   Frueher per <link> von fonts.googleapis.com geladen. Seit 2026-09-11
   lokal, damit beim Aufruf keine Verbindung zu Google entsteht (kein
   IP-Abfluss, kein render-blocking Dritt-Request). Nur die Subsets
   latin und latin-ext, alles andere braucht die Seite nicht.
   Neu ziehen: css2-URL mit Chrome-UA abrufen, woff2 nach assets/fonts/.
   ============================================================== */
/* DM Sans 400 latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/dm-sans-var-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans 400 latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/dm-sans-var-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans 500 latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/dm-sans-var-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans 500 latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/dm-sans-var-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans 700 latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/dm-sans-var-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans 700 latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/dm-sans-var-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 400 latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 400 latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 500 latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-500-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 500 latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-500-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter Tight 400 latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/inter-tight-var-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter Tight 400 latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/inter-tight-var-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter Tight 500 latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/inter-tight-var-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter Tight 500 latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/inter-tight-var-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter Tight 600 latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/inter-tight-var-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter Tight 600 latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/inter-tight-var-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Absolute-IT IT-Solutions GmbH — Onepager
   Design: Referenz systemax.framer.website (Zellgitter, Klammer-Eyebrows,
   ein Akzent), Farben aus dem Bestandsauftritt (Marken-Rot statt Referenz-Blau).
   ========================================================================== */

:root {
  /* Farbe */
  --rot: #bc0930;
  --rot-tief: #9a0727;
  --rot-hauch: #fdf2f4;
  --tinte: #1b1c20;
  --nacht: #0e1013;
  --weiss: #ffffff;
  --dunst: #f2f6fa;
  --linie: #e3e8ef;
  --linie-dunkel: #2b2d33;
  --grau: #64676d;
  --grau-hell: #9aa0a8;

  /* Typo */
  --display: "DM Sans", system-ui, -apple-system, sans-serif;
  --body: "Inter Tight", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --t-hero: clamp(2.6rem, 6.2vw, 5rem);
  --t-h2: clamp(1.9rem, 3.4vw, 3rem);
  --t-h3: clamp(1.05rem, 1.3vw, 1.25rem);
  --t-body: clamp(0.97rem, 1.05vw, 1.06rem);
  --t-klein: 0.86rem;
  --t-eyebrow: 0.75rem;

  /* Raum */
  --bund: 1440px;
  --luft: clamp(1.25rem, 4vw, 3.5rem);
  --sektion: clamp(4.5rem, 8vw, 8rem);
  --radius: 3px;
}

/* --- Reset / Basis --------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }
/* KEIN scroll-behavior:smooth global — bricht Programm-Scroll und Reveal.
   Sanftes Scrollen macht script.js nur beim Klick auf Anker. */

body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--tinte);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
  /* Deutsche Komposita ("Herstellerpartnerschaften") sind auf 375px breiter
     als die Spalte und erzeugen sonst horizontalen Scroll. */
  overflow-wrap: break-word;
  hyphens: auto;
}

p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--rot);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--rot);
  color: #fff;
  padding: 0.8rem 1.2rem;
  z-index: 200;
}
.skip:focus { left: 0; }

/* --- Bausteine -------------------------------------------------------- */

.bund {
  max-width: var(--bund);
  margin-inline: auto;
  padding-inline: var(--luft);
}

.sektion { padding-block: var(--sektion); }
.sektion--dunst { background: var(--dunst); }

/* Klammer-Eyebrow: ( 01 ) LEISTUNGEN — der Signature-Move der Referenz */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rot);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.55em;
}
.eyebrow::before { content: "( " attr(data-nr) " )"; opacity: 0.75; }

/* Kopf traegt Headline UND Fliesstext. Die Headline wird ueber ihre eigene
   max-width kurz gehalten, der Absatz darf breiter laufen. Vorher lag die
   Begrenzung am Container, dadurch brachen die H2 schon nach 3 Woertern um. */
.kopf { max-width: 64ch; }
.kopf h2 { font-size: var(--t-h2); max-width: 24ch; }
.kopf p {
  margin-top: 1.15rem;
  color: var(--grau);
  max-width: 62ch;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  min-height: 46px;
  padding: 0.8rem 1.5rem;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.btn svg { flex: none; transition: transform 0.3s cubic-bezier(0.16, 0.7, 0.2, 1); }
.btn:hover svg { transform: translate(3px, -3px); }

.btn--rot { background: var(--rot); color: #fff; }
.btn--rot:hover { background: var(--rot-tief); }

.btn--linie {
  background: transparent;
  color: var(--tinte);
  border-color: var(--linie);
}
.btn--linie:hover { border-color: var(--tinte); }
/* Auf dunklem Grund muss .hero eigens genannt werden, sonst steht dunkler
   Text auf Schwarz. Der Hero ist aktuell die einzige dunkle Sektion. */
.hero .btn--linie {
  color: #fff;
  border-color: #3a3d45;
}
.hero .btn--linie:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); }

/* Zellgitter: der zweite Signature-Move. Trenner statt Karten mit Schatten. */
.gitter {
  display: grid;
  border: 1px solid var(--linie);
  background: var(--linie);
  gap: 1px;
}
.gitter > * {
  background: var(--weiss);
  padding: clamp(1.5rem, 2.4vw, 2.4rem);
}
.sektion--dunst .gitter > * { background: var(--dunst); }

.gitter--2 { grid-template-columns: repeat(2, 1fr); }
.gitter--3 { grid-template-columns: repeat(3, 1fr); }
.gitter--4 { grid-template-columns: repeat(4, 1fr); }

/* Sektionsfotos. Das Format kommt aus derselben --ph-ratio, das Verhaeltnis
   ist aber pro Bild auf die GELIEFERTE Datei gesetzt, damit nichts beschnitten
   wird: die Fotos tragen unten rechts das Label "KI-Erstellt", das sichtbar
   bleiben muss (EU-KI-Verordnung). Deshalb Rahmen ans Bild, nie Bild an Rahmen.
   Rundung am Bild selbst, es liegt frei (kein overflow-Container, wie .kontakt-bild). */
.ph-bild {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ph-ratio, 4 / 3);
  object-fit: cover;
  border-radius: var(--radius);
  min-width: 0;
}

/* Dunkle Sektion auf Foto mit Scrim (Referenz: Feature-Sektion auf Bueroaufnahme).
   Solange kein Foto da ist, bleibt der Verlauf allein stehen und sieht sauber aus.
   Sobald das KI-Foto geliefert ist: url() in --foto eintragen, fertig. */
.sektion--foto {
  position: relative;
  isolation: isolate;
  background-color: var(--nacht);
}
.sektion--foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--foto, none);
  background-size: cover;
  background-position: center;
  opacity: 0.28;
}
.sektion--foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(14, 16, 19, 0.72) 0%, rgba(14, 16, 19, 0.92) 100%);
}

/* --- Header ----------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nacht);
  border-bottom: 1px solid var(--linie-dunkel);
}
.header-inner {
  max-width: var(--bund);
  margin-inline: auto;
  padding-inline: var(--luft);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: 74px;
}
.marke {
  display: flex;
  align-items: center;
  padding-right: 2rem;
}
.marke img { height: 34px; width: auto; }

/* Nav in Zellen, wie in der Referenz: senkrechte Trenner zwischen den Punkten */
.nav {
  display: flex;
  align-items: stretch;
  border-left: 1px solid var(--linie-dunkel);
}
.nav a {
  display: flex;
  align-items: center;
  padding: 0 1.35rem;
  font-size: 0.92rem;
  color: #d7dbe1;
  text-decoration: none;
  border-right: 1px solid var(--linie-dunkel);
  transition: color 0.2s, background-color 0.2s;
}
.nav a:hover { color: #fff; background: #16181d; }
.nav a.nav-cta {
  background: var(--rot);
  color: #fff;
  border-right: 0;
  font-weight: 500;
}
.nav a.nav-cta:hover { background: var(--rot-tief); }

.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  align-self: center;
  background: transparent;
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--radius);
  color: #fff;
  cursor: pointer;
}

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

.hero {
  background: var(--nacht);
  color: #fff;
  padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(4rem, 8vw, 7rem);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
/* H1 traegt das Keyword, steht aber klein oben als Tagline.
   Die grosse Headline ist die H2 (siehe 01-design.md). */
.hero-tagline {
  font-family: var(--mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ff5c7a;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.hero-tagline::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  flex: none;
}
.hero-headline {
  font-size: var(--t-hero);
  letter-spacing: -0.035em;
  max-width: 20ch;
  color: #fff;
  /* Silbentrennung ist die Notbremse fuer lange Komposita in schmalen Spalten.
     In der Hero-Headline waere sie sichtbarer Makel, hier also aus. */
  hyphens: manual;
}
/* Zweiter Teil der Aussage tritt zurueck: der Blick faellt auf den ersten.
   Signature-Move der Referenz (dort weiss gegen grau). */
.hero-headline em {
  font-style: normal;
  color: #7f8794;
}
.hero p.hero-text {
  margin-top: 1.1rem;
  color: #9aa2ad;
  max-width: 46ch;
}
.hero-aktionen {
  display: flex;
  gap: 0.85rem;
  margin-top: 2.2rem;
  flex-wrap: wrap;
}
.hero-slogan {
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linie-dunkel);
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: #c9ced6;
}
.hero-slogan strong { color: #fff; font-weight: 500; }

/* Hochkant, weil das gelieferte Serverschrank-Foto hochkant ist. Oben beschnitten
   (896x976), damit das Bild nur noch knapp ueber die Textspalte hinausragt statt
   sie um 240px zu ueberragen. Unten bleibt alles stehen: dort sitzt das KI-Label. */
.hero .ph-bild { --ph-ratio: 896 / 976; }

/* --- Partner-Logos ---------------------------------------------------- */

.partner .gitter { margin-top: 2.5rem; }
.partner-zelle {
  display: grid;
  place-items: center;
  min-height: 118px;
}
.partner-zelle img {
  max-height: 40px;
  width: auto;
  opacity: 0.62;
  filter: grayscale(1);
  transition: opacity 0.25s, filter 0.25s;
}
.partner-zelle:hover img { opacity: 1; filter: grayscale(0); }
/* Wortmarken statt Bilddateien, solange die offiziellen Partner-Logos fehlen.
   Einheitlich gesetzt wirkt das ruhig; ein Mix aus zwei Logos und sechs
   Textzellen sieht dagegen nach Fehler aus. */
.partner-zelle span {
  font-family: var(--display);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: #7a828d;
  text-align: center;
  transition: color 0.25s;
}
.partner-zelle:hover span { color: var(--tinte); }

/* --- Probleme (dunkel) ------------------------------------------------ */

.problem-zelle h3 { font-size: var(--t-h3); margin-bottom: 0.7rem; }
.problem-zelle p { color: #a8aeb8; }
.problem-nr {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: #ff5c7a;
  margin-bottom: 1.6rem;
  display: block;
}

/* --- Ergebnis --------------------------------------------------------- */

.ergebnis-zelle h3 { font-size: var(--t-h3); margin-bottom: 0.7rem; }
.ergebnis-zelle p { color: var(--grau); }
.ergebnis-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--linie);
  border-radius: 50%;
  margin-bottom: 1.5rem;
  color: var(--rot);
}

/* --- Ablauf ----------------------------------------------------------- */

.ablauf-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.ablauf-grid .ph-bild { --ph-ratio: 1200 / 896; }
.ablauf-schritte { border-top: 1px solid var(--linie); }
.schritt {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1.5rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--linie);
}
.schritt-nr {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--rot);
  letter-spacing: -0.03em;
}
.schritt h3 { font-size: var(--t-h3); margin-bottom: 0.55rem; }
.schritt p { color: var(--grau); }

/* --- Abrechnung ------------------------------------------------------- */

.abrechnung-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.abrechnung-text p + p { margin-top: 1.2rem; }
.abrechnung-text p { color: var(--grau); }
.zitat {
  border-left: 2px solid var(--rot);
  padding: 0.4rem 0 0.4rem 1.6rem;
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.4;
  color: var(--tinte);
}

/* --- Über uns --------------------------------------------------------- */

.ueber-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.ueber-text p { color: var(--grau); }
.ueber-text p + p { margin-top: 1.2rem; }
.zahlen { margin-top: 2.5rem; }
.zahl-zelle { padding: 1.4rem 1.5rem; }
.zahl {
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--rot);
  display: block;
  line-height: 1.1;
}
.zahl-zelle span:last-child {
  font-size: var(--t-klein);
  color: var(--grau);
  display: block;
  margin-top: 0.35rem;
}

.ueber-grid .ph-bild { --ph-ratio: 1856 / 2304; }

/* --- Kundenstimmen (Marquee) ------------------------------------------ */

.stimmen { overflow: hidden; }
.marquee {
  margin-top: 2.75rem;
  display: flex;
  gap: 1px;
  width: max-content;
  background: var(--linie);
  border-block: 1px solid var(--linie);
}
.js-marquee .marquee { animation: lauf 46s linear infinite; }
.js-marquee .marquee:hover { animation-play-state: paused; }
@keyframes lauf {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 0.5px)); }
}
.stimme {
  background: var(--weiss);
  width: clamp(300px, 30vw, 400px);
  padding: 2rem;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.stimme p {
  color: var(--tinte);
  font-size: 0.98rem;
  flex: 1;
}
.stimme footer { border-top: 1px solid var(--linie); padding-top: 1.1rem; }
.stimme-name { font-weight: 600; display: block; font-family: var(--display); }
.stimme-firma {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau);
}

/* --- Standort --------------------------------------------------------- */

.standort-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.adressen { margin-top: 2.4rem; }
.adresse-zelle h3 {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rot);
  margin-bottom: 0.9rem;
}
.adresse-zelle p { font-size: 0.98rem; }
.adresse-zelle strong { font-family: var(--display); }

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

.faq-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.faq-liste { border-top: 1px solid var(--linie); }
.faq { border-bottom: 1px solid var(--linie); }
.faq summary {
  display: grid;
  grid-template-columns: 2.75rem 1fr auto;
  gap: 1rem;
  align-items: start;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq-nr {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--rot);
  padding-top: 0.15rem;
}
.faq h3 {
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.5;
}
.faq-zeichen {
  position: relative;
  width: 20px;
  height: 20px;
  margin-top: 0.25rem;
  flex: none;
}
.faq-zeichen::before,
.faq-zeichen::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: var(--tinte);
  transition: transform 0.3s;
}
.faq-zeichen::after { transform: rotate(90deg); }
.faq[open] .faq-zeichen::after { transform: rotate(0deg); }
.faq-antwort {
  grid-column: 2 / -1;
  padding: 0 2.5rem 1.6rem 2.75rem;
  color: var(--grau);
  max-width: 68ch;
}
.faq-hilfe {
  margin-top: 2.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linie);
}
.faq-hilfe a {
  color: var(--rot);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* --- Kontakt ---------------------------------------------------------- */

.kontakt-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 0;
  border: 1px solid var(--linie);
  background: var(--linie);
  margin-top: 2.75rem;
  column-gap: 1px;
}
.kontakt-info,
.kontakt-form {
  background: var(--weiss);
  padding: clamp(1.75rem, 3vw, 2.75rem);
}
/* Kontaktfoto: Rundung am Bild selbst, es liegt frei (kein overflow-Container). */
.kontakt-bild {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius);
  margin-bottom: 1.75rem;
}

.kontakt-daten { margin-top: 2rem; display: grid; gap: 1.4rem; }
.kontakt-punkt span {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grau);
  display: block;
  margin-bottom: 0.3rem;
}
.kontakt-punkt a,
.kontakt-punkt strong {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--tinte);
}
.kontakt-punkt a:hover { color: var(--rot); }

.feld-reihe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.feld { display: block; margin-bottom: 1rem; }
.feld > span {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grau);
  display: block;
  margin-bottom: 0.45rem;
}
.feld input,
.feld textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 0.98rem;
  color: var(--tinte);
  background: var(--dunst);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  min-height: 46px;
  transition: border-color 0.2s, background-color 0.2s;
}
.feld textarea { min-height: 110px; resize: vertical; }
.feld input:focus,
.feld textarea:focus {
  background: var(--weiss);
  border-color: var(--tinte);
  outline: none;
}
.feld input:focus-visible,
.feld textarea:focus-visible { outline: 2px solid var(--rot); outline-offset: 1px; }

fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; }
fieldset legend {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grau);
  padding: 0;
  margin-bottom: 0.6rem;
}
.wahl-gitter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.wahl {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  font-size: 0.92rem;
  cursor: pointer;
  min-height: 44px;
  transition: border-color 0.2s, background-color 0.2s;
}
.wahl:hover { border-color: var(--grau-hell); }
.wahl input { accent-color: var(--rot); width: 17px; height: 17px; flex: none; }
.wahl:has(input:checked) { border-color: var(--rot); background: var(--rot-hauch); }

.dsgvo {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.86rem;
  color: var(--grau);
  margin: 0.4rem 0 1.4rem;
  line-height: 1.55;
}
.dsgvo input { accent-color: var(--rot); margin-top: 0.2rem; width: 17px; height: 17px; flex: none; }
.dsgvo a { color: var(--rot); }

.hp-feld {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-hinweis {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--rot);
  min-height: 1.4em;
}

/* --- Schluss-CTA ------------------------------------------------------ */

.cta-person {
  margin-top: 2.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie-dunkel);
  display: grid;
  gap: 0.3rem;
}
.cta-person strong { font-family: var(--display); font-weight: 500; }
/* #9aa2ad steht sonst auf dem dunklen Hero und hat dort reichlich Kontrast. Hier
   liegt die Rolle unter dem Namen auf Weiss und kam damit auf 2,58:1, bei 12,5px.
   #6c7685 ist derselbe Farbton, nur so weit abgedunkelt, dass 4,60:1 erreicht sind
   (WCAG AA). Gemessen mit Lighthouse am 2026-09-16, einziges Vorkommen der Klasse. */
.cta-person span { font-family: var(--mono); font-size: 0.78rem; color: #6c7685; }

/* --- Footer ----------------------------------------------------------- */

.footer {
  background: var(--nacht);
  color: #b6bcc6;
  border-top: 1px solid var(--linie-dunkel);
  padding-block: clamp(3rem, 5vw, 4.5rem) 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
.footer img { height: 34px; width: auto; margin-bottom: 1.3rem; }
.footer h3 {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7d848f;
  margin-bottom: 1.1rem;
}
.footer a { color: #b6bcc6; text-decoration: none; }
.footer a:hover { color: #fff; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font-size: 0.94rem; }
.footer-fuss {
  margin-top: 3rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--linie-dunkel);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.86rem;
  color: #7d848f;
}

/* Abschluss-Marquee wie in der Referenz: grosse Outline-Wortmarke */
.schluss-band {
  overflow: hidden;
  background: var(--nacht);
  border-top: 1px solid var(--linie-dunkel);
  padding-block: 1.2rem 1.6rem;
}
.band-lauf {
  display: flex;
  gap: 2.5rem;
  width: max-content;
  align-items: center;
}
.js-marquee .band-lauf { animation: lauf 30s linear infinite; }
.band-lauf span {
  font-family: var(--display);
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px #3a3d45;
  white-space: nowrap;
}
.band-lauf i { color: var(--rot); font-style: normal; font-size: clamp(1.4rem, 3vw, 2.4rem); }

/* --- Reveal (nur wenn JS laeuft und Motion erlaubt ist) ---------------- */

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity 1.05s cubic-bezier(0.16, 0.7, 0.2, 1),
              transform 1.05s cubic-bezier(0.16, 0.7, 0.2, 1);
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js-reveal .reveal { opacity: 1; transform: none; }
}

/* --- Responsive ------------------------------------------------------- */

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* Hochkant-Fotos einspaltig nicht ueber die volle Breite ziehen. */
  .hero .ph-bild,
  .ueber-grid .ph-bild { max-width: 480px; margin-inline: auto; }
  .ablauf-grid,
  .abrechnung-grid,
  .ueber-grid,
  .standort-grid,
  .faq-grid { grid-template-columns: 1fr; }
  .kontakt-grid { grid-template-columns: 1fr; row-gap: 1px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .gitter--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--nacht);
    border-left: 0;
    border-bottom: 1px solid var(--linie-dunkel);
    padding: 0.5rem var(--luft) 1.25rem;
  }
  /* Sichtbar-machende Regel: ohne sie tut der Burger nichts */
  .nav.offen { display: flex; }
  .nav a {
    border-right: 0;
    border-bottom: 1px solid var(--linie-dunkel);
    padding: 0.95rem 0;
    min-height: 48px;
  }
  .nav a.nav-cta {
    margin-top: 0.9rem;
    justify-content: center;
    border-radius: var(--radius);
    border-bottom: 0;
  }
  .burger { display: flex; }
  .header { position: sticky; }
  .header-inner { position: relative; }

  /* Gleiche Spezifitaet wie die Basisregeln, sonst greifen die Overrides nicht */
  .gitter--2,
  .gitter--3,
  .gitter--4 { grid-template-columns: 1fr; }
  .feld-reihe,
  .wahl-gitter { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .schritt { grid-template-columns: 3rem 1fr; gap: 1rem; }
  .faq-antwort { padding-right: 0; padding-left: 2.75rem; }
  .stimme { width: min(84vw, 340px); }
  .footer-fuss { flex-direction: column; }
}

/* --- Rechtsseiten (Impressum, Datenschutz) ----------------------------- */

.recht { padding-block: clamp(3rem, 6vw, 5.5rem) var(--sektion); }
.recht-bund { max-width: 78ch; margin-inline: auto; padding-inline: var(--luft); }
.recht h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 0.6rem;
}
.recht .stand {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 2.75rem;
  display: block;
}
.recht h2 {
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  margin: 2.75rem 0 0.9rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linie);
}
.recht h3 {
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  margin: 1.6rem 0 0.5rem;
}
.recht p, .recht li { color: var(--grau); }
.recht p + p { margin-top: 0.9rem; }
.recht ul { margin: 0.6rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.4rem; }
.recht a { color: var(--rot); }
.recht .daten {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1.6rem;
  margin-top: 1rem;
  font-size: 0.98rem;
}
.recht .daten dt {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grau);
  padding-top: 0.22rem;
}
.recht .daten dd { margin: 0; color: var(--tinte); }
.zurueck {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 3rem;
  font-family: var(--display);
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--tinte);
  border-bottom: 1px solid var(--linie);
  padding-bottom: 0.2rem;
}
.zurueck:hover { border-color: var(--tinte); }

@media (max-width: 768px) {
  .recht .daten { grid-template-columns: 1fr; gap: 0.2rem 0; }
  .recht .daten dd { margin-bottom: 0.9rem; }
}

/* ===== Feedback-Runde 1 (17.08.2026) ================================== */

/* P2: Nummer in den Eyebrows entfernt, der Punkt bleibt als Marke */
.eyebrow::before { content: "·"; opacity: 0.75; }

/* P1: echte Partner-Logos statt Wortmarken */
.partner-zelle img {
  max-height: 42px;
  max-width: 78%;
  width: auto;
  object-fit: contain;
  opacity: 0.72;
  filter: grayscale(1);
  transition: opacity 0.25s, filter 0.25s;
}
.partner-zelle:hover img { opacity: 1; filter: grayscale(0); }

/* P4: Ergebnis-Icons groesser */
.ergebnis-icon { width: 52px; height: 52px; }
.ergebnis-icon svg { width: 24px; height: 24px; }

/* P5, P7, P12: Bild und Textspalte gleich hoch */
.ablauf-grid, .ueber-grid, .standort-grid { align-items: stretch; }
.ablauf-grid > *, .ueber-grid > *, .standort-grid > * { min-width: 0; }

.ablauf-schritte { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }

/* P6: linker Rand am Zitat weg */
.zitat { border-left: 0; padding-left: 0; }

/* P10: Sterne und Ueberschrift in den Kundenstimmen */
.stimme { gap: 0.9rem; }
.sterne { color: var(--rot); line-height: 0; }
.stimme-titel {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.stimme p { margin-top: -0.2rem; }

/* P13, P14: Logo groesser */
.marke img { height: 44px; }
.footer img { height: 46px; }

@media (max-width: 1024px) {

}
@media (max-width: 768px) {
  .marke img { height: 36px; }
}

/* Nachbesserung Feedback-Runde 1 */
.sterne { display: inline-flex; gap: 3px; }
/* Quelllogos haben sehr unterschiedlich viel Weissraum, daher grosszuegiger */
.partner-zelle img { max-height: 54px; max-width: 84%; }
@media (max-width: 768px) {
}

.partner .partner-zelle { padding-inline: 0.9rem; }
.partner .partner-zelle img { max-height: 40px; max-width: 88%; }
@media (max-width: 1100px) { .partner .gitter { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px)  { .partner .gitter { grid-template-columns: repeat(2, 1fr); } }

/* ===== Feedback-Runde 2 (17.08.2026) ================================== */

/* P10: Lesbarkeit. Zielgruppe sind Geschaeftsfuehrer ab 40, die Seite wurde
   durchgaengig eine Stufe groesser gesetzt. */
:root {
  --t-body: clamp(1.03rem, 1.1vw, 1.12rem);
  --t-h3: clamp(1.12rem, 1.4vw, 1.32rem);
  --t-klein: 0.94rem;
  --t-eyebrow: 0.8rem;
  /* P3: Hero-Headline war zu gross und dadurch schwer zu lesen */
  --t-hero: clamp(2.2rem, 4.4vw, 3.5rem);
}
.faq h3 { font-size: 1.06rem; }
.faq-antwort { font-size: 1rem; }
.stimme p { font-size: 1.02rem; }
.kontakt-punkt a, .kontakt-punkt strong { font-size: 1.08rem; }
.feld input, .feld textarea { font-size: 1.02rem; }
.footer ul { font-size: 1rem; }
.hero-text { font-size: 1.05rem; }

/* P2: Punkt vor der Tagline weg, buendig zur Ueberschrift */
.eyebrow::before { content: none; }
.eyebrow { gap: 0; }

/* P1: Logos in Farbe, kein Hover-Wechsel, einheitliche Groesse.
   Die Dateien sind vorab zugeschnitten und auf gleiche Leinwand normiert. */
.partner .gitter { grid-template-columns: repeat(6, 1fr); }
.partner-zelle img {
  opacity: 1;
  filter: none;
  max-height: 40px;
  max-width: 86%;
}
.partner-zelle:hover img { opacity: 1; filter: none; }
@media (max-width: 1100px) { .partner .gitter { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .partner .gitter { grid-template-columns: repeat(2, 1fr); } }

/* P5: X-Icon statt Nummer */
.problem-nr {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--linie-dunkel);
  border-radius: 50%;
  color: #ff5c7a;
  margin-bottom: 1.4rem;
}

/* P4: zweite Zeile im Hero-Slogan */
.hero-slogan span { color: #9aa2ad; }

/* P7: CTA im Header mit Pfeil, plus Zwischen-CTA in der Seite */
.nav a.nav-cta { gap: 0.5em; }
.nav a.nav-cta svg { transition: transform 0.3s cubic-bezier(0.16,0.7,0.2,1); }
.nav a.nav-cta:hover svg { transform: translate(2px,-2px); }
.zwischen-cta { background: var(--rot); color: #fff; padding-block: clamp(2rem, 3.5vw, 2.75rem); }
.zwischen-cta-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.75rem; flex-wrap: wrap;
}
.zwischen-cta p {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem); max-width: 60ch;
}
.zwischen-cta .btn--rot { background: #fff; color: var(--rot); }
.zwischen-cta .btn--rot:hover { background: var(--tinte); color: #fff; }

/* P8: rechte Spalte beginnt auf Hoehe des Fotos */
.ablauf-grid { align-items: start; }
.ablauf-schritte { border-top: 0; }
.ablauf-schritte .schritt:first-child { padding-top: 0; }

/* ===== Feedback-Runde 3 (26.08.2026) ================================== */

/* P1: Weg vom schwarzen Auftritt. Kopf und Hero werden hell, die dunkle
   Foto-Sektion und der Footer bleiben als Kontrastanker stehen.
   Alle Werte hier ueberschreiben die dunklen Basisregeln weiter oben. */

.header {
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
}
.nav { border-left: 1px solid var(--linie); }
.nav a {
  color: var(--tinte);
  border-right: 1px solid var(--linie);
}
.nav a:hover { color: var(--rot); background: var(--dunst); }
/* Der rote CTA bleibt rot, der Hover-Zustand darf ihn nicht aufhellen */
.nav a.nav-cta { color: #fff; }
.nav a.nav-cta:hover { color: #fff; background: var(--rot-tief); }
.burger { border-color: var(--linie); color: var(--tinte); }

.hero {
  background: var(--weiss);
  color: var(--tinte);
}
.hero-tagline { color: var(--rot); }
.hero-headline { color: var(--tinte); }
.hero-headline em { color: var(--grau); }
.hero p.hero-text { color: var(--grau); }
.hero-slogan {
  border-top: 1px solid var(--linie);
  color: var(--grau);
}
.hero-slogan strong { color: var(--tinte); }
.hero-slogan span { color: var(--grau); }
/* Die Sammelregel weiter oben faerbt Umriss-Buttons in .hero weiss.
   Auf hellem Grund waeren sie unsichtbar. */
.hero .btn--linie {
  color: var(--tinte);
  border-color: var(--linie);
  background: transparent;
}
.hero .btn--linie:hover {
  border-color: var(--tinte);
  background: transparent;
}

@media (max-width: 768px) {
  /* Aufgeklapptes Mobilmenue haengt unter dem jetzt hellen Kopf */
  .nav {
    background: var(--weiss);
    border-bottom: 1px solid var(--linie);
  }
  .nav a { border-bottom: 1px solid var(--linie); }
  .nav a.nav-cta { border-bottom: 0; }
}

/* P6: HP raus, Fortinet und Scale Computing rein -> 7 Zellen statt 6.
   In den schmalen Rastern geht 7 nicht auf, der Rest wird zentriert
   statt links angeschlagen. */
.partner .gitter { grid-template-columns: repeat(7, 1fr); }
@media (max-width: 1200px) {
  .partner .gitter { grid-template-columns: repeat(3, 1fr); }
  /* Volle Zeile statt Mittelspalte: sonst zeigen die zwei leeren Rasterfelder
     den Gitter-Hintergrund und sehen aus wie fehlende Logos. */
  .partner .partner-zelle:last-child { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .partner .gitter { grid-template-columns: repeat(2, 1fr); }
  .partner .partner-zelle:last-child { grid-column: 1 / -1; }
}

/* P11 (Nachtrag): Der Abschnitt "Wenn die EDV-Betreuung fehlt" wird hell.
   Der Foto-Haken bleibt erhalten, nur der Scrim dreht sich von dunkel auf
   hell. Sobald das KI-Foto da ist, also weiterhin nur --foto setzen. */
.sektion--foto { background-color: var(--dunst); }
.sektion--foto::before { opacity: 0.16; }
.sektion--foto::after {
  background: linear-gradient(
    180deg,
    rgba(242, 246, 250, 0.86) 0%,
    rgba(242, 246, 250, 0.96) 100%
  );
}
/* Die drei Problem-Zellen waren auf den schwarzen Grund kalibriert */
.problem-zelle p { color: var(--grau); }
.problem-nr {
  border-color: var(--linie);
  color: var(--rot);
}

/* P7 (Nachtrag): Leistungen als Liste plus Tafel statt hochgestellter Tabs.
   Links die sechs Leistungen lesbar untereinander, rechts die ausgewaehlte
   ueber die volle Hoehe der Liste. Getragen wird das von Radiobuttons, das
   Umschalten beim Ueberfahren setzt script.js obendrauf.

   Zur Mechanik: alle sechs Tafeln liegen in Spalte 2 uebereinander
   (grid-row: 1 / -1) und werden ueber die Nachbar-Selektoren ein- und
   ausgeblendet. Dafuer braucht das Raster sechs EXPLIZITE Zeilen, sonst
   zeigt -1 auf die erste Linie und der Stapel bricht zusammen. Kommt eine
   siebte Leistung dazu, hier die 6 mit anpassen. */

.lst {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  grid-template-rows: repeat(6, minmax(64px, 1fr));
  gap: 10px;
  margin-top: 2.75rem;
}

/* Sichtbar versteckt: nimmt keinen Platz, bleibt aber fokussierbar,
   damit die Pfeiltasten die Auswahl weiterschalten. */
.lst-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.lst-item {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1.15rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--weiss);
  cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
.lst-item:hover { border-color: var(--grau-hell); }
.lst-nr {
  flex: none;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--grau);
  transition: color 0.25s;
}
.lst-ikon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--linie);
  border-radius: 50%;
  color: var(--rot);
  transition: border-color 0.25s, color 0.25s;
}
.lst-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.lst-radio:checked + .lst-item {
  background: var(--rot);
  border-color: var(--rot);
  color: #fff;
}
.lst-radio:checked + .lst-item .lst-nr { color: rgba(255, 255, 255, 0.8); }
.lst-radio:checked + .lst-item .lst-ikon {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
.lst-radio:focus-visible + .lst-item {
  outline: 2px solid var(--rot);
  outline-offset: 3px;
}

.lst-tafel {
  grid-column: 2;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  /* mittig statt unten: die sechs Texte sind unterschiedlich lang, und ueber
     die volle Listenhoehe steht sonst die halbe Tafel leer */
  justify-content: center;
  padding: clamp(1.5rem, 2.4vw, 2.5rem);
  border-radius: var(--radius);
  background: var(--rot);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
}
.lst-radio:checked + .lst-item + .lst-tafel { opacity: 1; visibility: visible; }
.lst-tafel-ikon {
  display: grid;
  place-items: center;
  width: clamp(72px, 6.5vw, 88px);
  height: clamp(72px, 6.5vw, 88px);
  margin-bottom: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.lst-tafel h3 {
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  color: #fff;
}
.lst-tafel p {
  margin-top: 0.85rem;
  max-width: 42ch;
  color: rgba(255, 255, 255, 0.92);
}

/* Unter 1024px gibt es kein Nebeneinander und kein Ueberfahren mehr:
   dieselben Elemente werden zum Akkordeon, die Tafel steht unter ihrem
   Listenpunkt. Die DOM-Folge macht das ohne zweites Markup moeglich. */
@media (max-width: 1024px) {
  .lst {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 8px;
  }
  .lst-item { grid-column: 1; }
  .lst-radio:checked + .lst-item { border-radius: var(--radius) var(--radius) 0 0; }
  .lst-tafel {
    grid-column: 1;
    grid-row: auto;
    display: none;
    padding: 1.35rem 1.25rem;
    border-radius: 0 0 var(--radius) var(--radius);
    margin-top: -8px;
  }
  .lst-radio:checked + .lst-item + .lst-tafel { display: block; opacity: 1; visibility: visible; }
  .lst-tafel-ikon { display: none; }
  .lst-tafel h3 { display: none; }
  .lst-tafel p { max-width: 62ch; margin-top: 0; }
}

/* --- Standort-Karten (OpenStreetMap, consent-gated ueber Klaro) --------
   Zwei Karten untereinander in der rechten Spalte, je eine pro Standort.
   Bewusst min-height OHNE aspect-ratio: eine Mindesthoehe zusammen mit
   einem Seitenverhaeltnis erzwingt eine Mindestbreite und schiebt das
   Layout auf 375px aus dem Viewport (siehe Pitfall in CLAUDE.md). */
.karten {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
  height: 100%;
}
.karte {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 240px;
  min-width: 0;
  margin: 0;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
}
.karte figcaption {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rot);
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--linie);
}
.karte-rahmen { position: relative; flex: 1; min-height: 190px; }
.karte-rahmen iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--dunst);
}
/* Liegt ueber der Karte, bis die Einwilligung fuer den Dienst "karte" vorliegt. */
.karte-consent {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 1.25rem;
  text-align: center;
  background: var(--dunst);
}
.karte-consent p { max-width: 40ch; margin: 0; font-size: 0.88rem; color: var(--grau); }
.karte-consent a {
  font-size: 0.78rem;
  color: var(--grau);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.karte-consent a:hover { color: var(--rot); }
.karte-consent.versteckt { display: none; }
.btn--klein { min-height: 38px; padding: 0.5rem 1.1rem; font-size: 0.86rem; }
.karte-link {
  padding: 0.75rem 1.1rem;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--rot);
  text-align: center;
  text-decoration: none;
  border-top: 1px solid var(--linie);
}
.karte-link:hover { color: var(--rot-tief); text-decoration: underline; }

@media (max-width: 1024px) {
  .karten { height: auto; }
  .karte { min-height: 0; }
  .karte-rahmen { min-height: 220px; }
}

/* ===== Feedback-Runde 5 (15.09.2026) ================================== */

/* P2: Das Menue zeigt an, in welchem Abschnitt man gerade ist. Die Regeln
   stehen bewusst am Dateiende, damit sie nach den hellen Kopf-Regeln aus
   Runde 3 greifen (.nav a dort ist 0,1,1 — .nav a.ist-aktiv ist 0,2,0). */
.nav .ist-aktiv {
  color: var(--rot);
  background: var(--dunst);
  box-shadow: inset 0 -2px 0 var(--rot);
}
/* Der rote CTA ist schon farbig, er wird nur satter statt rot auf rot */
.nav a.nav-cta.ist-aktiv {
  color: #fff;
  background: var(--rot-tief);
  box-shadow: none;
}
@media (max-width: 768px) {
  /* Im aufgeklappten Mobilmenue sitzt der Balken links statt unten,
     sonst kollidiert er mit der Trennlinie unter jedem Punkt */
  .nav .ist-aktiv {
    box-shadow: inset 2px 0 0 var(--rot);
    padding-left: 0.7rem;
  }
}

/* --- Leistungen als Dropdown im Kopf ---------------------------------
   Der Knopf sieht aus wie die uebrigen Nav-Zellen (gleiches Polster,
   gleicher Trenner), ist aber ein <button>, weil er ein Menue oeffnet und
   nicht navigiert. Geoeffnet wird per Klick, nicht per Hover: auf dem
   Finger gibt es keinen Hover-Zustand. */
.nav-gruppe {
  position: relative;
  display: flex;
  align-items: stretch;
}
.nav-knopf {
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0 1.35rem;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--tinte);
  background: none;
  border: 0;
  border-right: 1px solid var(--linie);
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
}
.nav-knopf:hover { color: var(--rot); background: var(--dunst); }
.nav-pfeil { transition: transform 0.25s cubic-bezier(0.16,0.7,0.2,1); }
.nav-gruppe.offen .nav-pfeil { transform: rotate(180deg); }

/* Ohne diese Zeile gewinnt das display:flex unten gegen das hidden-Attribut
   (UA-Stylesheet verliert gegen Author-CSS) und das Panel haengt dauerhaft
   offen unter dem Kopf. */
.nav-drop[hidden] { display: none; }
.nav-drop {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-width: 264px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-top: 0;
  box-shadow: 0 14px 34px rgba(27, 28, 32, 0.12);
}
.nav-drop a {
  padding: 0.72rem 1.15rem;
  font-size: 0.9rem;
  color: var(--tinte);
  text-decoration: none;
  border-right: 0;
  border-bottom: 1px solid var(--linie);
}
.nav-drop a:last-child { border-bottom: 0; }
.nav-drop a:hover { color: var(--rot); background: var(--dunst); }
/* Erster Eintrag ist die Uebersicht, optisch von den Leistungen abgesetzt */
.nav-drop a:first-child {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grau);
}

/* Sprungziel der einzelnen Leistung: der Kopf ist sticky und wuerde den
   angesteuerten Punkt sonst verdecken */
.lst-item { scroll-margin-top: 96px; }

@media (max-width: 768px) {
  /* Im Burger klappt das Untermenue inline auf, kein schwebendes Panel */
  .nav-gruppe { flex-direction: column; }
  .nav-knopf {
    justify-content: space-between;
    width: 100%;
    padding: 0.95rem 0;
    min-height: 48px;
    border-right: 0;
    border-bottom: 1px solid var(--linie);
  }
  .nav-drop {
    position: static;
    min-width: 0;
    border: 0;
    box-shadow: none;
    background: var(--dunst);
  }
  .nav-drop a {
    padding: 0.8rem 0 0.8rem 1.1rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--linie);
  }
}