/* =========================================================
   studio aah! – stil.css
   Eine Datei für die ganze Website.
   Quelle der Werte: Vorlage ../studio-aah-website
   (css/zusatz.css, design/customizer.json)
   ========================================================= */

/* ---------- 1. Variablen: Farben, Schriften, Abstände ---------- */
:root {
  /* Farben */
  --farbe-dunkel: #0e1011;
  --farbe-weiss: #fff;
  --farbe-hellgrau: #f8f8f8;
  --farbe-hellgrau-2: #eee;
  --farbe-rahmen: #e8eded;
  --farbe-gedaempft: rgba(14, 16, 17, .6);
  --farbe-gedaempft-invers: rgba(255, 255, 255, .7);
  --farbe-creme: #eeece7;            /* Flächen, Plakatgrund */
  --farbe-grau-hell: #d6d8d9;
  --farbe-grau: #9a9d9e;
  /* Button-Hierarchie (Anna 11.10.2026): Primär = blau gefüllt (Hauptaktion, v. a. „Projekt anfragen“),
     Sekundär = schwarze Outline, Tertiär = unterstrichener Textlink, alle mit Pfeil.
     Blau #2a5fe6 ist der einzige Akzent (Anna 16.10.2026: vorher auch #2f6bff); Kontrast zu Weiß 5,4 : 1 (WCAG AA). */
  --farbe-primaer: #2a5fe6;
  /* Akzente der Farbtafel „modernes Bauhaus“ – nur im Hero der Startseite und im Konfetti (Anna, 09.11.2026) */
  --bb-blau: #2a5fe6;   /* Webdesign – Kreis */
  --bb-rot: #ff3b2f;    /* Markenbildung – Quadrat */
  --bb-pink: #ff4fa3;   /* UI/UX – Halbkreis */
  --bb-rosa: #ff8fc8;   /* Marketing & Vertrieb – Halbkreis */
  --bb-gelb: #ffe600;   /* KI & Digitalisierung – Dreieck */
  --farbe-primaer-dunkel: #1f4cc4;
  /* Schleier über dunklen, blau eingefärbten Fotos (Landingpage Marken-Regelwerk, 07.11.2026) */
  --schleier-stark: rgba(6, 7, 10, .9);
  --schleier-mittel: rgba(6, 7, 10, .55);
  --schleier-leer: rgba(6, 7, 10, 0);
  --schatten-weich: 0 24px 60px rgba(14, 16, 17, .12);
  /* Farbband am unteren Rand des Fußes (Anna 13.10.2026) – bewusste Ausnahme von „Blau als einziger Akzent“ */
  --farbband: linear-gradient(90deg, #d8c4fd 0%, #ee8fea 3%, #fe5fbe 6%, #ff3e3d 9%, #fe5100 12%, #fd9400 15%, #ffd700 18%, #c0ee28 22%, #6cee5e 26%, #18ef94 30%, #04ecb9 35%, #0fe6ef 45%, #19a3f9 55%, #255dfc 65%, #263fe4 70%, #212e85 75%, #1e254c 78%, #1d1d1d 81.5%, #ff2f00 81.5%, #ff2f00 100%);

  /* Schriften */
  --schrift-ueberschrift: "Anton", Impact, "Arial Narrow", sans-serif;
  --schrift-text: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --schrift-meta: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Abstände */
  --inhalt-breite: 1200px;
  --rand-seite: clamp(24px, calc(5.8824vw - 11.294px), 64px); /* fließend: 24 px bis 600 px Breite, 64 px ab 1280 px (Anna, 18.10.2026) */
  --rand-seite-mobil: 24px;
  --rahmen: 2px;
  --kopf-hoehe: 80px;
}

/* ---------- 2. Schriften (lokal, nichts von fremden Servern) ----------
   Lizenzhinweise (Anton geprüft am 03.10.2026, Manrope und JetBrains Mono am 10.10.2026):

   Anton – Copyright 2020 The Anton Project Authors
   (https://github.com/googlefonts/AntonFont.git)
   Manrope – Copyright 2019 The Manrope Project Authors
   (https://github.com/sharanda/manrope)
   JetBrains Mono – Copyright 2020 The JetBrains Mono Project Authors
   (https://github.com/JetBrains/JetBrainsMono)
   Alle: SIL Open Font License, Version 1.1 – https://openfontlicense.org
   Dateien: Teilmengen latin und latin-ext (Fontsource), unverändert.
   --------------------------------------------------------------------- */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../schriften/anton-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;
}
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../schriften/anton-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;
}
/* Manrope und JetBrains Mono sind variable Schriften: eine Datei für alle Stärken */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../schriften/manrope-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;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../schriften/manrope-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;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(../schriften/jetbrains-mono-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;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(../schriften/jetbrains-mono-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;
}

/* ---------- 3. Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-hoehe) + 72px); }

body {
  margin: 0;
  background: var(--farbe-weiss);
  color: var(--farbe-dunkel);
  font-family: var(--schrift-text);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

p { margin: 0 0 1em; }

h1, h2, h3 {
  font-family: var(--schrift-ueberschrift);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 .15em;
}

/* Sichtbarer Fokus für Tastatur */
:focus-visible {
  outline: 3px solid var(--farbe-dunkel);
  outline-offset: 3px;
}
.fuss :focus-visible { outline-color: var(--farbe-weiss); }

/* Nur für Bildschirmleser */
.unsichtbar {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Sprunglink zum Inhalt */
.sprunglink {
  position: absolute;
  left: 1rem; top: -100px;
  background: var(--farbe-dunkel);
  color: var(--farbe-weiss);
  padding: .75rem 1rem;
  z-index: 10;
}
.sprunglink:focus { top: 1rem; }

/* ---------- 4. Schriftgrößen (wie in der Vorlage, vw-Einheiten) ---------- */
.gr-xxl   { font-size: clamp(64px, 19vw, 19vw); line-height: 1; }
.gr-xl    { font-size: clamp(56px, 12vw, 12vw); line-height: 1; }
/* Überschriften mit einem sehr langen Wort (z. B. „Digitalisierung“) – passen ohne seitliches Scrollen */
.gr-xxl.lang-wort { font-size: clamp(40px, 12vw, 12vw); }
.gr-h2    { font-size: clamp(40px, 6vw, 6vw);   line-height: 1; }
/* Inter-Zwischenzeilen */
.alt-klein, .alt-h2, .alt-h3, .alt-h5, .alt-h6 {
  font-family: var(--schrift-text);
  font-weight: 600;
  text-transform: none;
}
.alt-klein { font-size: clamp(28px, 5vw, 5vw);      line-height: 1.1; margin: 0 0 .8em; }
.alt-h2    { font-size: clamp(20px, 3vw, 3vw);      line-height: 1.2; margin: 0 0 .8em; }
.alt-h3    { font-size: clamp(22px, 2.5vw, 2.5vw);  line-height: 1.2; margin: 0 0 .8em; }
.alt-h5    { font-size: clamp(18px, 1.75vw, 1.75vw); line-height: 1.4; margin: 0; }
.alt-h6    { font-size: clamp(16px, 1.375vw, 1.375vw); line-height: 1.2; margin: 0; }

/* Meta-Text (Labels über Überschriften): JetBrains Mono, Versalien, gesperrt, gedämpft */
.meta {
  font-family: var(--schrift-meta);
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--farbe-gedaempft);
  margin: 0 0 1rem;
}

.gedaempft { color: var(--farbe-gedaempft); }

.rechts { text-align: right; }

/* Text-Button mit Unterstrich */
.textlink {
  display: inline-block;
  font-weight: 600;
  font-size: clamp(16px, 1.25vw, 1.25vw);
  line-height: 1.2;
  color: var(--farbe-dunkel);
  text-decoration: none;
  border-bottom: var(--rahmen) solid currentColor;
  padding-bottom: 2px;
}
.textlink:hover { opacity: .6; }

/* ---------- 5. Kopf ---------- */
.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: var(--kopf-hoehe);
  padding: 0 var(--rand-seite);
}

.kopf-logo img { width: clamp(140px, calc(100px + 6.25vw), 180px); height: auto; } /* fließend: 140 px am Handy, 180 px ab 1280 px */

.kopf-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.kopf-nav ul {
  display: flex;
  gap: 1.5rem;
  margin: 0; padding: 0;
  list-style: none;
}
.kopf-nav a {
  font-weight: 600;
  text-decoration: none;
  line-height: 1.5;
}
.kopf-nav a:hover { opacity: .6; }

/* „Projekt anfragen“: unterstrichen wie in der Vorlage */
.kopf-button {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

/* Mobilmenü: <details> funktioniert ohne JavaScript */
.kopf-mobil { display: none; }
.kopf-mobil summary {
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  padding: .5rem 0;
}
.kopf-mobil summary::-webkit-details-marker { display: none; }
.kopf-mobil-icon {
  display: inline-block;
  width: 24px; height: 2px;
  background: currentColor;
  position: relative;
  vertical-align: middle;
}
.kopf-mobil-icon::before, .kopf-mobil-icon::after {
  content: "";
  position: absolute; left: 0;
  width: 24px; height: 2px;
  background: currentColor;
}
.kopf-mobil-icon::before { top: -7px; }
.kopf-mobil-icon::after  { top: 7px; }
.kopf-mobil ul {
  position: absolute;
  left: 0; right: 0;
  top: var(--kopf-hoehe);
  margin: 0;
  padding: 1rem var(--rand-seite-mobil) 2rem;
  list-style: none;
  background: var(--farbe-weiss);
  border-bottom: var(--rahmen) solid var(--farbe-rahmen);
  z-index: 5;
}
.kopf-mobil li a {
  display: block;
  padding: .6rem 0;
  font-weight: 600;
  font-size: 1.25rem;
  text-decoration: none;
}

/* ---------- 6. Fuß ---------- */
.fuss {
  background: var(--farbe-dunkel);
  color: var(--farbe-weiss);
  padding: 6rem var(--rand-seite) 3rem;
  position: relative;
}
.fuss p { margin: 0 0 .4em; }
.fuss a { color: var(--farbe-weiss); text-decoration: none; font-weight: 600; }
.fuss a:hover { opacity: .7; }
.fuss .meta { color: var(--farbe-gedaempft-invers); }
.fuss-gross {
  font-family: var(--schrift-ueberschrift);
  text-transform: uppercase;
  font-size: 13vw;
  line-height: 1;
  margin: .1em 0 .3em !important;
}
/* Logo (Variante 1, gedehntes A, Anna 13.10.2026): nur in Kopf und Fuß, sonst Social Media und Print */
.fuss-gross img { display: block; width: 61vw; max-width: 100%; height: auto; }
.fuss::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--farbband); }
.fuss-spalten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 3rem 0;
}
.fuss-spalten p { margin: 0 0 .5em; }
.fuss-unten {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
  border-top: 1px solid rgba(255, 255, 255, .15);
  padding-top: 1.5rem;
}
.fuss-unten p { margin: 0; }
.fuss-unten a { font-weight: 600; }

/* ---------- 7. Bausteine der Seiten ---------- */
.sektion { padding: 48px 32px; }
.sektion-schmal > * { max-width: var(--inhalt-breite); margin-left: auto; margin-right: auto; }

/* Startseite: Kopfbereich */
.hero { padding: 48px 32px; text-align: center; }

/* Zwei Spalten: schmal links, Text rechts (Verhältnis wie „right-golden“) */
.golden {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 32px;
  max-width: var(--inhalt-breite);
  margin: 0 auto;
  padding: 48px 32px 96px;
}
.tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 20px;
  margin: 1rem 0 3rem;
  padding: 0;
  list-style: none;
}
.tools img { height: 48px; width: auto; object-fit: contain; }
.tools .tool-klein { height: 30px; }
.tools .tool-gross { height: 56px; }
.tools .tool-mittel { height: 32px; }
/* Logos GitHub und Claude: simple-icons (CC0), Kadence: kadencewp.com – Marken der jeweiligen Inhaber */

/* Sektionskopf: (Label) … (Nummer), große Überschrift */
.sektionskopf { padding: 96px var(--rand-seite) 48px; }
.sektionskopf-zeile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}


.hg-hellgrau   { background: var(--farbe-hellgrau); }
.hg-hellgrau-2 { background: var(--farbe-hellgrau-2); }

.liste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 32px;
  margin: 0; padding: 0;
  list-style: none;
}

/* Stimmen */
.stimmen {
  grid-template-columns: repeat(3, 1fr);
}
.stimme {
  display: flex;
  flex-direction: column;
}
.stimme-icon { width: 40px; height: auto; margin: 0 0 1.5rem; }
.stimme h3 { margin-bottom: 1rem; }
.person {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  margin-top: auto;
  padding-top: 2rem;
}
.person p { margin: 0; }
.avatar {
  width: 60px; height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

/* ---------- 8. Bausteine der Unterseiten ---------- */
.gr-h3 { font-size: clamp(32px, 4vw, 4vw); line-height: 1.1; }

/* Seitenkopf mit großer Überschrift */
.seitenkopf { padding: 64px var(--rand-seite) 48px; }

/* Profil- und Kontaktbild */
.profilbild { width: 100%; height: auto; border-radius: 24px; object-fit: cover; }



.kachel { padding: 48px 40px; }
/* Runder Button (Kontakt) */
.button {
  display: inline-block;
  border-radius: 500px;
  font-weight: 600;
  text-decoration: none;
}
.kontaktwege { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin: 1.5rem 0; }
.kontaktwege .textlink { font-size: inherit; }

/* ---------- Blog ---------- */
.blog-liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: var(--inhalt-breite);
  margin: 0 auto;
  padding: 0 32px 96px;
  list-style: none;
}
.blog-karte {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--farbe-weiss);
}
.blog-karte img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.blog-karte-text { display: flex; flex-direction: column; flex: 1; }
.blog-karte h2 {
  font-family: var(--schrift-text);
  font-weight: 600;
  text-transform: none;
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 0 0 .5rem;
}
.blog-karte h2 a { text-decoration: none; }
.blog-karte h2 a:hover { opacity: .6; }
.blog-karte .weiterlesen { margin-top: auto; }

.kategorie {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 0 0 .5rem;
}
.artikel-meta { font-size: .9rem; color: var(--farbe-gedaempft); margin: 0 0 1rem; }

.weiterlesen {
  font-size: .9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: none;
}
.weiterlesen:hover { opacity: .6; }

/* Impressum, Datenschutz */
.rechtstext { max-width: var(--inhalt-breite); margin: 0 auto; padding: 64px 32px 96px; }

/* Einzelner Artikel */
.artikel { max-width: 842px; margin: 0 auto; padding: 48px 32px 96px; }
.artikel-bild { width: 100%; max-height: 70vh; object-fit: cover; margin: 0 0 2rem; }
.artikel h1 { font-size: clamp(36px, 5vw, 64px); line-height: 1.05; }
.artikel-text h2, .artikel-text h3 {
  font-family: var(--schrift-text);
  font-weight: 600;
  text-transform: none;
  line-height: 1.3;
  margin: 2rem 0 .75rem;
}
.artikel-text h2 { font-size: 1.5rem; }
.artikel-text h3 { font-size: 1.2rem; }
.artikel-text a { text-decoration: underline; overflow-wrap: anywhere; }
.artikel-text ul { padding-left: 1.2em; margin: 0 0 1.5rem; }
.artikel-text li { margin: .25em 0; }
.artikel-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: var(--rahmen) solid var(--farbe-rahmen);
}
.artikel-nav a { text-decoration: none; display: block; }
.artikel-nav a:hover { opacity: .6; }
.artikel-nav .weiter { text-align: right; grid-column: 2; }
.artikel-nav span { display: block; }



/* ---------- 9. Tablet und Handy ---------- */
@media (max-width: 1024px) {
  .kopf-nav { display: none; }
  .kopf-mobil { display: block; }
}

@media (max-width: 767.98px) {
  body { font-size: 16px; }

  .golden { grid-template-columns: 1fr; padding-bottom: 64px; }
  .liste { grid-template-columns: 1fr; }
  .sektionskopf { padding-top: 64px; }

  .stimmen { grid-template-columns: 1fr; }
  .kachel { padding: 40px 24px; }

  .blog-liste { grid-template-columns: 1fr; padding: 0 var(--rand-seite) 64px; }
  .artikel { padding: 32px var(--rand-seite) 64px; }
  .artikel-nav { gap: 16px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .blog-liste { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 10. Mega-Menü „Service“ (Desktop) ---------- */
.kopf { position: sticky; top: 0; z-index: 30; background: var(--farbe-weiss); }
.mm-pfeil { display: inline-block; transition: transform .3s; }
.mm-toggle[aria-expanded="true"] .mm-pfeil { transform: rotate(180deg); }
.mm { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: var(--farbe-weiss);
  border-top: var(--rahmen) solid var(--farbe-rahmen); border-bottom: var(--rahmen) solid var(--farbe-rahmen);
  clip-path: inset(0 0 100% 0); transition: clip-path .45s cubic-bezier(.2, .7, .2, 1); }
.mm.offen { clip-path: inset(0 0 0 0); }
.mm-innen { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; padding: 48px var(--rand-seite) 32px; max-width: 1440px; margin: 0 auto; }
.mm-label { margin: 0 0 16px; }
.mm-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.mm-liste a { display: block; border-top: var(--rahmen) solid var(--farbe-rahmen); text-decoration: none; color: inherit; }
.mm-name { display: block; font-family: var(--schrift-ueberschrift); text-transform: uppercase; line-height: 1.1; transition: transform .25s; }
.mm-liste a:hover .mm-name, .mm-liste a:focus-visible .mm-name { transform: translateX(6px); }
.mm-text { display: block; color: var(--farbe-gedaempft); margin-top: 4px; font-weight: 400; }
.mm-karte { display: flex; flex-direction: column; gap: 12px; background: var(--farbe-hellgrau); border-radius: 24px; text-decoration: none; color: inherit; transition: transform .3s; }
.mm-karte:hover { transform: translateY(-4px); }
.mm-karte .meta { margin: 0; }
.mm-karte-titel { font-family: var(--schrift-ueberschrift); text-transform: uppercase; line-height: 1; margin: 0; }
.mm-karte .button { align-self: flex-start; margin-top: auto; }
.mm > * { opacity: 0; transform: translateY(-8px); transition: opacity .3s .15s, transform .3s .15s; }
.mm.offen > * { opacity: 1; transform: none; }
.mm-schleier { position: fixed; inset: 0; z-index: 10; background: rgba(14, 16, 17, .35); opacity: 0; transition: opacity .4s; }
.mm-schleier.offen { opacity: 1; }
.kopf-nav .mm-liste { display: grid; gap: 0; }
.kopf-nav .mm-liste a, .kopf-nav .mm-karte { line-height: 1.4; }
.kopf-nav .mm-liste a:hover, .kopf-nav .mm-karte:hover { opacity: 1; }
/* Mobilmenü: Leistungen aufklappbar */
.kopf-mobil .mobil-unter summary { list-style: none; cursor: pointer; display: block; padding: .6rem 0; font-weight: 600; font-size: 1.25rem; }
.kopf-mobil .mobil-unter summary::-webkit-details-marker { display: none; }
.kopf-mobil .mobil-unter summary::after { content: " ↓"; }
.kopf-mobil .mobil-unter[open] summary::after { content: " ↑"; }
.kopf-mobil .mobil-unterliste { position: static; padding: 0 0 .5rem 1rem; border: 0; background: none; }
.kopf-mobil .mobil-unterliste a { font-size: 1.05rem; padding: .4rem 0; }
.kopf-mobil .mobil-weitere { margin: .6rem 0 .2rem; }
.fuss .fuss-weitere { margin-top: 1.2rem; }
/* Name und Adresse wie im Google-Unternehmensprofil (Anna 25.10.2026, lokale Suche Leipzig) */
.fuss-adresse { font-style: normal; margin: 0 0 1em; line-height: 1.5; }
@media (max-width: 1024px) { .mm, .mm-schleier { display: none !important; } }

/* ---------- 11. Leistungsseiten: Pakete und FAQ ---------- */
.faq { padding: 96px var(--rand-seite); background: var(--farbe-hellgrau); }
.faq h2 { text-align: center; margin: 0 0 48px; }
.faq-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; max-width: 1200px; margin: 0 auto; align-items: start; }
.faq-eintrag { background: var(--farbe-weiss); border: 1px solid var(--farbe-rahmen); border-radius: 20px; }
.faq-eintrag summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 28px; font-weight: 600; font-size: 1.1rem; }
.faq-eintrag summary::-webkit-details-marker { display: none; }
.faq-eintrag summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .3s; }
.faq-eintrag[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.faq-eintrag summary:focus-visible { outline-offset: 2px; border-radius: 20px; }
.faq-antwort { padding: 0 28px 24px; color: var(--farbe-gedaempft); }
.faq-antwort p { margin: 0 0 .75em; }
@media (max-width: 767.98px) {
  .faq { padding: 64px var(--rand-seite); }
  .faq-liste { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .mm, .mm > *, .mm-schleier, .mm-pfeil, .mm-name, .mm-karte, .faq-eintrag summary::after { transition: none; }
}

/* Zweiter Knopf (Umriss), z. B. „Adresse kopieren“ */
.button-zweit { background: transparent; color: var(--farbe-dunkel); border: var(--rahmen) solid var(--farbe-dunkel); font: inherit; font-weight: 600; cursor: pointer; padding: calc(1rem - var(--rahmen)) 1.5rem; }
.button-zweit[hidden] { display: none; }
/* ---------- 13. Startseite: Referenz-Akkordeon (ohne Nummern) ---------- */
.referenzen { padding: 0 var(--rand-seite) 64px; }

/* ---------- 14. Startseite: Hero mit Bildband, das auf die Maus reagiert ---------- */
.hero-buehne { position: relative; overflow: hidden; padding: 48px 0 72px; text-align: center; }
.hero-buehne .hero-text { position: relative; z-index: 2; padding: 0 var(--rand-seite); }
.hero-buehne .alt-h2 { max-width: 30ch; margin-left: auto; margin-right: auto; }
.hero-buehne h1.alt-h2 { letter-spacing: normal; }
/* Punkteraster: dezent hellgrau, nur im Umkreis der Maus sichtbar */
.hero-raster { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, #dcdfdf 1.3px, transparent 1.5px); background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 55%), #000 0, transparent 30%);
          mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 55%), #000 0, transparent 30%); }
.hero-titel { font-family: var(--schrift-ueberschrift); text-transform: uppercase; font-weight: 400; font-size: clamp(52px, 9vw, 9vw); margin: 8px 0 0; }
.hero-titel > span { display: block; overflow: hidden; white-space: nowrap; } /* bricht auch mit Ersatzschrift nicht um (kein Verrutschen beim Laden) */
.hero-titel > span > span { display: inline-block; animation: aus-maske .9s cubic-bezier(.2, .8, .2, 1) both; }
.hero-titel > span:nth-child(2) > span { animation-delay: .12s; }
@keyframes aus-maske { from { translate: 0 105%; } }
/* Bildband */
.hero-band { position: relative; z-index: 1; overflow: hidden; margin: 0 0 8px; touch-action: pan-y; perspective: 1200px; animation: band-rein 1.2s cubic-bezier(.2, .8, .2, 1) .2s both; }
.hero-band.zieht { cursor: grabbing; }
@keyframes band-rein { from { translate: 30vw 0; opacity: 0; } }
.hero-spur { display: flex; align-items: center; gap: 36px; width: max-content; will-change: transform; }
.laptop-seite { position: relative; animation: website-scroll 26s ease-in-out infinite alternate; }
.laptop-seite > img { display: block; width: 100%; height: auto; }
/* Slider im Hero der Bauer-Seite: Bilder blenden über dem Foto im Bildschirmfoto über (Lage in % des Bildschirmfotos) */
@keyframes laptop-slide { 0% { opacity: 0; } 4%, 20% { opacity: 1; } 24%, 100% { opacity: 0; } }
@keyframes website-scroll { 0%, 8% { transform: translateY(0); } 92%, 100% { transform: translateY(calc(-100% + 100cqh)); } }
/* Visitenkarten aufgefächert, gehen bei Annäherung der Maus weiter auf */
.hero-unten { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .hero-titel { font-size: calc((100vw - 2 * var(--rand-seite)) / 5.8); }
  .hero-spur { gap: 26px; }
  }
@media (prefers-reduced-motion: reduce) {
  .hero-titel > span > span, .hero-band, .laptop-seite { animation: none !important; }
  }

/* 3D-Icons in Überschriften (3dicons.co, Clay, CC0): ploppen auf, schweben leicht, kippen beim Darüberfahren */
.icon-3d { display: inline-block; height: .95em; width: auto; vertical-align: -.1em; margin-left: .04em; animation: icon-plopp .45s cubic-bezier(.3, 1.6, .6, 1) .5s both, icon-schweben 4s ease-in-out 1s infinite; transition: rotate .3s; }
.icon-3d:hover { rotate: -10deg; }
.wort-mit-icon { white-space: nowrap; }
@keyframes icon-plopp { from { scale: 0; } to { scale: 1; } }
@keyframes icon-schweben { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.06em; } }
@media (prefers-reduced-motion: reduce) { .icon-3d { animation: none; } }
@media (max-width: 400px) { .wort-mit-icon { white-space: normal; } } /* kleine Handys: Icon darf in die nächste Zeile */

/* ---------- 15. Fuß: Karte „Eine Website im Monat“ ---------- */
.fuss-karte { position: relative; display: grid; gap: 10px; max-width: none; margin: 0 0 3rem; padding: 48px 56px; padding-right: min(360px, 34%); background: var(--farbe-creme); border-radius: 32px; color: var(--farbe-dunkel); text-decoration: none; font-weight: 400 !important; overflow: hidden; transition: transform .25s; }
.fuss-karte:hover { opacity: 1 !important; transform: translateY(-3px); }
.fuss-karte .meta { color: var(--farbe-gedaempft); display: inline-flex; align-items: center; gap: 8px; }
.fuss-karte-icon { position: absolute; right: 24px; top: 50%; translate: 0 -50%; width: min(280px, 30%); height: auto; pointer-events: none; transition: rotate .4s; mix-blend-mode: multiply; }
.fuss-karte:hover .fuss-karte-icon { rotate: -8deg; }
.fuss-karte-titel { font-family: var(--schrift-ueberschrift); text-transform: uppercase; font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 1; }
.fuss-karte-text { color: var(--farbe-gedaempft); font-size: 1.15rem; }
.fuss-karte-link { justify-self: start; margin-top: 12px; padding: 12px 22px; border-radius: 999px; background: var(--farbe-dunkel); color: var(--farbe-weiss); font-weight: 600; }
@media (max-width: 767.98px) { .fuss-karte { padding: 28px 24px 150px; } .fuss-karte-icon { top: auto; bottom: -10px; translate: 0 0; width: 150px; } }
@media (prefers-reduced-motion: reduce) { .fuss-karte { transition: none; } }

/* ---------- 17. Profil: größeres Bild, bleibt beim Scrollen stehen ---------- */
@media (min-width: 768px) {
  .profil-golden { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
  .profil-golden > div:first-child { position: sticky; top: calc(var(--kopf-hoehe) + 32px); align-self: start; }
  .profil-golden .profilbild { max-height: calc(100vh - 64px); }
}

/* ---------- 18. Kontakt: Kopier-Symbol an der Adresse, kleine Hinweise ---------- */
.mail-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 .5rem; }
.kopier-knopf { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--farbe-rahmen); border-radius: 50%; background: var(--farbe-weiss); color: var(--farbe-dunkel); cursor: pointer; transition: border-color .2s, background .2s; }
.kopier-knopf[hidden] { display: none; }
.kopier-knopf:hover { border-color: var(--farbe-dunkel); }
.kopier-knopf:focus-visible { outline: 2px solid var(--farbe-dunkel); outline-offset: 2px; }
.kopier-knopf .symbol-ok { display: none; }
.kopier-knopf.ok { background: var(--farbe-dunkel); color: var(--farbe-weiss); border-color: var(--farbe-dunkel); }
.kopier-knopf.ok .symbol-ok { display: block; }
.kopier-knopf.ok .symbol-kopieren { display: none; }
.kopiert { font-size: .85rem; color: var(--farbe-gedaempft); }
.hinweis-klein { font-size: .85rem; color: var(--farbe-gedaempft); margin: 0; }
.hinweis-klein + .alt-h3 { margin-top: 2.5rem; }


/* ---------- 19. Startseite: „Roter Faden“ und Ziel „Projekt anfragen“ ---------- */
main.mit-faden { position: relative; }
.roter-faden { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; overflow: visible; }
.faden-linie { fill: none; stroke: var(--farbe-dunkel); stroke-width: 2.5; stroke-linecap: round; }
.faden-punkt { fill: var(--farbe-dunkel); transition: r .3s; }
.weg-ziel { text-align: center; padding: 160px var(--rand-seite) 176px; }
.weg-ziel .gr-h2 { font-size: clamp(3rem, 9.4vw, 9.5rem); line-height: 1.15; max-width: 14ch; margin: 12px auto 28px; }
/* „Für“ in Versalien: Umlaut-Punkte brauchen Zeilenabstand 1,2 (CLAUDE.md) */
.weg-ziel h2.gr-h2 { line-height: 1.2; }
/* Unterzeile deutlich kleiner als die H2 (Anna 09.11.2026): etwa 1 : 6,9 = Goldener Schnitt hoch 4 */
.weg-ziel .alt-klein { font-size: clamp(18px, 1.45vw, 22px); line-height: 1.45; max-width: 46ch; margin: 0 auto 36px; }
.weg-ziel-knopf { font-size: 1.15rem; padding: 1.1rem 2rem; transition: transform .3s, box-shadow .3s; }
.roter-faden.angekommen ~ .weg-ziel .weg-ziel-knopf { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(14, 16, 17, .08); }
@media (prefers-reduced-motion: reduce) { .weg-ziel-knopf, .faden-punkt { transition: none; } }

/* ---------- 20. Fuß: Kontakt als erste, abgesetzte Spalte mit Symbolen ---------- */
.fuss-spalten { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px 48px; }
.fuss-kontakt { padding-right: 48px; border-right: 1px solid rgba(255, 255, 255, .18); }
.mit-symbol { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.mit-symbol svg { flex: none; color: var(--farbe-weiss); }
.fuss-folge { margin-top: 2rem !important; }
.symbol-link { display: inline-block; color: var(--farbe-weiss); line-height: 0; }
.symbol-link:hover { opacity: .7; }
@media (max-width: 767.98px) {
  .fuss-spalten { grid-template-columns: 1fr; }
  .fuss-kontakt { padding: 0 0 32px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .18); }
}

/* Kundenstimmen: auf Tablet untereinander statt zu breit (Fehler war schon live) */
.stimmen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .stimmen { grid-template-columns: minmax(0, 1fr); } }
/* Fuß auf Tablet: Kontakt über die ganze Breite, darunter zwei Spalten; E-Mail bricht nicht um */
@media (min-width: 768px) and (max-width: 1024px) {
  .fuss-spalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fuss-kontakt { grid-column: 1 / -1; padding: 0 0 32px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .18); }
}

/* ---------- 16. Dachzeile: Programm „Demokratie braucht Sichtbarkeit.“ ---------- */
/* Schmale Leiste über dem Kopf (Idee: Ankündigungsleiste, proxy.gonka.gg). Ein blauer Punkt pulsiert (Anna, 10.10.2026). */
.ankuendigung { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 9px var(--rand-seite); background: var(--farbe-dunkel); color: var(--farbe-weiss); font-size: 15px; }
.ank-text { margin: 0; }
.ank-text strong { font-weight: 700; }
.ank-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--farbe-primaer); flex: none; animation: ank-puls 2.4s ease-in-out infinite; }
@keyframes ank-puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.ank-zusatz { color: var(--farbe-gedaempft-invers); }
.ank-link { color: var(--farbe-weiss); font-weight: 600; text-decoration: none; white-space: nowrap; border-bottom: 1px solid transparent; transition: border-color .2s; }
.ank-link:hover, .ank-link:focus-visible { border-bottom-color: currentColor; }
@media (max-width: 767.98px) {
  .ankuendigung { gap: 10px; font-size: 13px; padding: 8px var(--rand-seite); justify-content: space-between; }
  .ank-zusatz { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ank-punkt, .ank-link { animation: none; transition: none; } }


/* ---------- 18. Programmseite als Landingpage ---------- */
.programm { --lp-breite: 1200px; }
.lp-held, .lp-sektion { max-width: var(--lp-breite); margin: 0 auto; padding: 64px var(--rand-seite); }
.lp-held { padding-top: 72px; }
.lp-titel { margin: 8px 0 24px; font-size: clamp(52px, 8.4vw, 132px); line-height: .95; }
.lp-einleitung { max-width: 46ch; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.45; }
.lp-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin: 28px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 24px 0 0; }
.chips li { border: 1px solid var(--farbe-dunkel); border-radius: 999px; padding: 6px 14px; font-size: .95rem; }
.lp-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.lp-karte { border-radius: 24px; padding: 40px; }
.lp-creme { background: var(--farbe-creme); }
.lp-rand { border: var(--rahmen) solid var(--farbe-dunkel); }
.lp-liste { margin: 16px 0 0; padding-left: 1.2em; }
.lp-liste li { margin: 0 0 8px; }
.lp-zitat { font-family: var(--schrift-text); font-weight: 600; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.35; margin: 12px 0 16px; max-width: 32ch; }
.lp-tabelle { margin: 32px 0 0; border-top: 1px solid var(--farbe-dunkel); }
.lp-tabelle > div { display: grid; grid-template-columns: minmax(180px, 1fr) 2fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--farbe-rahmen); }
.lp-tabelle dt { font-weight: 600; }
.lp-tabelle dd { margin: 0; color: var(--farbe-gedaempft); }
.lp-tabelle dd strong { color: var(--farbe-dunkel); }
.lp-schritte { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--farbe-dunkel); }
.lp-schritte li { padding: 20px 24px 0 0; }
.lp-schritte li + li { border-left: 1px solid var(--farbe-rahmen); padding-left: 24px; }
.lp-schritte h3 { font-size: 1.3rem; margin: 8px 0; }
.lp-schritte p { margin: 0; }
.lp-cta { padding: 56px; }
.lp-klein { padding-top: 24px; font-size: .95rem; }
@media (max-width: 900px) {
  .lp-paar { grid-template-columns: 1fr; }
  .lp-schritte { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .lp-schritte li:nth-child(3) { border-left: 0; padding-left: 0; }
  .lp-tabelle > div { grid-template-columns: 1fr; gap: 4px; }
  .lp-karte, .lp-cta { padding: 28px 24px; }
  .lp-held, .lp-sektion { padding: 40px var(--rand-seite); }
}
@media (max-width: 600px) { .lp-schritte { grid-template-columns: 1fr; } .lp-schritte li + li { border-left: 0; padding-left: 0; } }

/* ---------- 21. Preisseite: Bedingungen, Bereichsleiste, Kostenrechner, Preisliste ---------- */
.preisseite .seitenkopf .alt-klein { font-size: clamp(20px, 2vw, 28px); line-height: 1.3; max-width: 40ch; }
.bedingungen { list-style: none; padding: 0; margin: 2rem 0 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; max-width: 900px; }
.bedingungen li { padding-left: 1.6em; position: relative; }
.bedingungen li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; }
/* Mitlaufende Bereichsleiste unter dem Kopf */
.preis-leiste { position: sticky; top: var(--kopf-hoehe); z-index: 25; display: flex; gap: 6px; overflow-x: auto; padding: 10px var(--rand-seite); background: var(--farbe-weiss); border-bottom: 1px solid var(--farbe-rahmen); scrollbar-width: none; }
.preis-leiste::-webkit-scrollbar { display: none; }
.preis-leiste a { flex: none; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--farbe-rahmen); font-size: 14px; font-weight: 600; text-decoration: none; color: inherit; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.preis-leiste a:hover { border-color: var(--farbe-dunkel); }
.preis-leiste a.aktiv { background: var(--farbe-dunkel); border-color: var(--farbe-dunkel); color: var(--farbe-weiss); }
/* Summe: rechts mitlaufend, auf dem Handy schmale Leiste unten */
/* Glossar */
.glossar { padding: 64px var(--rand-seite) 24px; }
.glossar-liste { margin: 24px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; border-top: 1px solid var(--farbe-dunkel); }
.glossar-liste > div { padding: 14px 0; border-bottom: 1px solid var(--farbe-rahmen); }
.glossar-liste dt { font-weight: 600; }
.glossar-liste dd { margin: 2px 0 0; color: var(--farbe-gedaempft); }
@media (max-width: 767.98px) { .glossar-liste { grid-template-columns: 1fr; } }
.druck-bereich { display: none; }
/* Preisliste */
.preisseite .preis-h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1; }
/* Tabelle scrollt seitlich, ohne die Seite auf dem Handy zu verbreitern */
.tabelle-scroll { overflow-x: auto; max-width: 100%; contain: inline-size; margin: 0 0 24px; }
.tabelle-scroll:focus-visible { outline: 2px solid var(--farbe-dunkel); outline-offset: 2px; }
.preis-netto { margin-top: 12px; font-size: .95rem; }
/* Programm-Aufruf und Schluss */
.preis-cta-kostenlos { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; margin: 72px var(--rand-seite) 48px; padding: clamp(32px, 5vw, 72px); background: var(--farbe-hellgrau); border-radius: 32px; overflow: hidden; }
.programm-unterzeile { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; max-width: 36ch; margin: 0 0 24px; }
.programm-bild { margin: 0; align-self: stretch; position: relative; }
.programm-bild img { width: 100%; height: 100%; max-height: 520px; object-fit: cover; border-radius: 20px; display: block; }
.preis-cta-kostenlos .gr-h2 { font-size: clamp(2.6rem, 6vw, 5.5rem); line-height: 1; margin: 12px 0 24px; max-width: 14ch; }
.preis-schluss { padding: 48px var(--rand-seite) 96px; }
.schluss-karte { margin-top: 24px; background: var(--farbe-dunkel); color: var(--farbe-weiss); border-radius: 32px; padding: 56px; }
.schluss-karte .meta { color: var(--farbe-gedaempft-invers); }
.schluss-karte .button { background: var(--farbe-weiss); color: var(--farbe-dunkel); }
.schluss-karte .textlink { color: var(--farbe-weiss); margin-left: 20px; }
@media (max-width: 900px) {
  .schluss-karte { padding: 32px 24px; }
}
@media (max-width: 767.98px) {
  .bedingungen { grid-template-columns: 1fr; }
  .preis-cta-kostenlos { grid-template-columns: 1fr; margin-top: 48px; margin-bottom: 32px; padding: 32px 24px; border-radius: 24px; }
  .programm-bild img { max-height: 320px; }
}
/* Kostenrechner Webdesign v4 (Anna 16.10.2026): Schritte wie an einer Kasse, Kassenbon rechnet mit (js/webrechner.js) */
.wr { margin: 32px var(--rand-seite); padding: 48px; background: var(--farbe-hellgrau); border-radius: 32px; }
.wr-raster { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
.wr-titel { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.12; margin: 8px 0 12px; }
.wr-lead { margin: 0 0 28px; color: var(--farbe-gedaempft); max-width: 60ch; font-size: 18px; }
.wr-leiste { list-style: none; margin: 0 0 32px; padding: 0; display: flex; gap: 4px; }
.wr-leiste li { flex: 1; min-width: 0; }
.wr-leiste button { all: unset; cursor: pointer; display: block; width: 100%; padding: 10px 0 0; border-top: 4px solid var(--farbe-rahmen); font-size: 14px; line-height: 1.3; }
.wr-leiste button:focus-visible { outline: 2px solid var(--farbe-primaer); outline-offset: 3px; }
.wr-nr { font-family: var(--schrift-meta); font-size: 12px; color: var(--farbe-gedaempft); display: block; }
.wr-nm { font-weight: 700; display: block; hyphens: auto; overflow-wrap: break-word; }
.wr-leiste li.fertig button { border-top-color: var(--farbe-dunkel); }
.wr-leiste li.aktiv button { border-top-color: var(--farbe-primaer); }
.wr-leiste li.aktiv .wr-nm { color: var(--farbe-primaer); }
.wr-leiste li.zu button { cursor: default; opacity: .45; }
.wr-leiste-mobil { display: none; }
.wr-schritt:focus { outline: none; }
.wr-dach { margin-bottom: 8px; }
.wr-h { font-family: var(--schrift-ueberschrift); text-transform: uppercase; font-weight: 400; font-size: clamp(28px, 3vw, 40px); line-height: 1.15; margin: 0 0 10px; }
.wr-warum { margin: 0 0 24px; color: var(--farbe-gedaempft); max-width: 62ch; }
.wr-frage { margin: 28px 0 10px; font-weight: 700; }
.wr-frage small { display: block; font-weight: 400; color: var(--farbe-gedaempft); font-size: 15px; }
.wr-frage-gross { font-family: var(--schrift-ueberschrift); text-transform: uppercase; font-weight: 400; font-size: 24px; line-height: 1.15; margin-top: 40px; }
.wr-mit-abstand { margin: 12px 0 0; }
/* Kacheln */
.wr-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 12px; }
.wr-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wr-breit { grid-column: 1 / -1; }
.wr-kachel { position: relative; display: block; border: 1.5px solid var(--farbe-rahmen); border-radius: 14px; padding: 16px 16px 14px; cursor: pointer; background: var(--farbe-weiss); transition: border-color .15s; }
.wr-kachel:hover { border-color: var(--farbe-dunkel); }
.wr-kachel input { position: absolute; opacity: 0; pointer-events: none; }
.wr-k-t { font-weight: 700; display: block; padding-right: 28px; }
.wr-k-u { display: block; font-size: 15px; color: var(--farbe-gedaempft); margin-top: 2px; }
.wr-k-p { display: block; font-family: var(--schrift-meta); font-size: 14px; margin-top: 10px; }
.wr-kachel::after { content: ""; position: absolute; top: 14px; right: 14px; width: 18px; height: 18px; border: 1.5px solid var(--farbe-gedaempft); border-radius: 50%; }
.wr-mehrfach::after { border-radius: 5px; }
.wr-kachel:has(input:checked) { border-color: var(--farbe-primaer); box-shadow: inset 0 0 0 1px var(--farbe-primaer); }
.wr-kachel:has(input:checked)::after { border-color: var(--farbe-primaer); background: var(--farbe-primaer) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center / 14px no-repeat; }
.wr-kachel:has(input:focus-visible) { outline: 2px solid var(--farbe-primaer); outline-offset: 2px; }
.wr-kachel details, .wr-zeile-mehr { margin-top: 8px; font-size: 15px; }
.wr-kachel summary, .wr-zeile-mehr summary { cursor: pointer; color: var(--farbe-gedaempft); }
.wr-kachel ul, .wr-zeile-mehr ul { margin: 6px 0 0; padding-left: 18px; }
.wr-hinweis { background: var(--farbe-creme); border-radius: 14px; padding: 14px 16px; margin-top: 16px; font-size: 15px; }
/* Basispreis */
.wr-basis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; margin: 20px 0 0; padding: 20px; border: 1.5px solid var(--farbe-dunkel); border-radius: 14px; background: var(--farbe-weiss); }
.wr-basis-titel { grid-column: 1 / -1; margin: 0; font-family: var(--schrift-ueberschrift); font-weight: 400; text-transform: uppercase; font-size: 22px; line-height: 1.15; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wr-basis-titel span { font-family: var(--schrift-meta); font-size: 15px; text-transform: none; }
.wr-basis h4:not(.wr-basis-titel) { margin: 0 0 6px; font-family: var(--schrift-meta); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 500; color: var(--farbe-primaer); }
.wr-basis ul { margin: 0; padding-left: 18px; font-size: 15px; }
.wr-nicht { grid-column: 1 / -1; border-top: 1.5px dashed var(--farbe-rahmen); padding-top: 12px; }
.wr-basis .wr-nicht h4 { color: var(--farbe-gedaempft); }
/* Sitemap: Karten im Baum, × oben rechts, + darunter, ziehen zum Umsortieren */
.wr-sitemap { border: 1.5px solid var(--farbe-rahmen); border-radius: 18px; padding: 28px 16px 22px; background: var(--farbe-weiss); overflow-x: auto; user-select: none; -webkit-user-select: none; }
.wr-baum { min-width: min-content; }
.wr-start { display: flex; justify-content: center; }
.wr-karte { position: relative; display: flex; align-items: center; gap: 4px; background: var(--farbe-weiss); border: 1.5px solid var(--farbe-dunkel); border-radius: 10px; padding: 9px 26px 9px 8px; min-height: 44px; cursor: grab; touch-action: none; }
.wr-karte input { border: 0; background: transparent; width: 100%; min-width: 70px; font: inherit; font-weight: 600; font-size: 14px; padding: 0; outline: none; cursor: text; text-overflow: ellipsis; color: inherit; }
.wr-karte input:focus { text-decoration: underline; text-decoration-color: var(--farbe-primaer); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.wr-karte:has(input:focus-visible) { outline: 2px solid var(--farbe-primaer); outline-offset: 2px; }
.wr-griff { color: var(--farbe-gedaempft); font-size: 13px; line-height: 1; flex: none; width: 14px; text-align: center; }
@media (hover: hover) and (pointer: fine) { .wr-griff { display: none; } .wr-karte { padding-left: 12px; padding-right: 20px; } }
.wr-x { all: unset; position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; border-radius: 50%; background: var(--farbe-weiss); border: 1.5px solid var(--farbe-dunkel); display: grid; place-items: center; font-size: 14px; line-height: 1; cursor: pointer; }
.wr-x:hover, .wr-x:focus-visible { background: var(--farbe-dunkel); color: var(--farbe-weiss); }
.wr-x:focus-visible { outline: 2px solid var(--farbe-primaer); outline-offset: 2px; }
.wr-typ { position: absolute; left: 10px; top: -9px; background: var(--farbe-primaer); color: var(--farbe-weiss); font-family: var(--schrift-meta); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; padding: 2px 6px; border-radius: 4px; }
.wr-modul { border-color: var(--farbe-primaer); border-style: dashed; }
.wr-fest { background: var(--farbe-dunkel); color: var(--farbe-weiss); cursor: default; justify-content: center; padding: 11px 24px; font-family: var(--schrift-ueberschrift); text-transform: uppercase; letter-spacing: .03em; font-size: 17px; }
.wr-schloss { font-family: var(--schrift-meta); font-size: 11px; opacity: .8; margin-left: 8px; text-transform: none; letter-spacing: 0; }
.wr-zieht { opacity: .35; }
.wr-ziel-vor { box-shadow: -6px 0 0 -2px var(--farbe-primaer); }
.wr-geist { position: fixed; z-index: 60; pointer-events: none; transform: translate(-50%, -60%) rotate(-2deg); box-shadow: 0 10px 30px rgba(0, 0, 0, .2); background: var(--farbe-weiss); border: 1.5px solid var(--farbe-primaer); border-radius: 10px; padding: 8px 14px; font-weight: 600; font-size: 14px; }
.wr-plus { all: unset; cursor: pointer; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--farbe-primaer); color: var(--farbe-primaer); display: grid; place-items: center; font-size: 16px; line-height: 1; margin: 6px auto 0; background: var(--farbe-weiss); }
.wr-plus:hover, .wr-plus:focus-visible, .wr-plus.wr-ziel { background: var(--farbe-primaer); color: var(--farbe-weiss); }
.wr-plus:focus-visible, .wr-neu:focus-visible, .wr-chip:focus-visible { outline: 2px solid var(--farbe-primaer); outline-offset: 2px; }
.wr-ebene { display: flex; gap: 10px; justify-content: safe center; padding-top: 26px; position: relative; }
.wr-ebene::before { content: ""; position: absolute; top: 0; left: 50%; height: 13px; border-left: 1.5px solid var(--farbe-grau); }
.wr-spalte { display: flex; flex-direction: column; align-items: stretch; gap: 10px; position: relative; padding-top: 13px; width: 128px; flex: none; }
.wr-spalte.wr-leer { width: 44px; }
.wr-spalte::before { content: ""; position: absolute; top: -13px; height: 26px; left: 50%; border-left: 1.5px solid var(--farbe-grau); }
.wr-spalte::after { content: ""; position: absolute; top: -13px; left: -6px; right: -6px; border-top: 1.5px solid var(--farbe-grau); }
.wr-spalte:first-child::after { left: 50%; }
.wr-spalte:last-child::after { right: 50%; }
.wr-spalte:only-child::after { display: none; }
.wr-spalte:has(+ .wr-spalte.wr-leer)::after { right: 50%; }
.wr-spalte:first-child:has(+ .wr-spalte.wr-leer)::after { display: none; }
.wr-spalte.wr-leer::before, .wr-spalte.wr-leer::after { border-color: transparent; }
.wr-kinder { display: flex; flex-direction: column; gap: 10px; padding-left: 14px; border-left: 1.5px solid var(--farbe-grau); margin-left: 12px; }
.wr-kinder .wr-karte { border-color: var(--farbe-grau); min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
.wr-kinder .wr-karte input { font-weight: 500; font-size: 13px; }
.wr-neu { all: unset; cursor: pointer; border: 1.5px dashed var(--farbe-grau); border-radius: 10px; padding: 10px 0; font-size: 16px; font-weight: 600; color: var(--farbe-gedaempft); text-align: center; min-height: 20px; }
.wr-neu:hover, .wr-neu:focus-visible, .wr-neu.wr-ziel { border-color: var(--farbe-primaer); color: var(--farbe-primaer); }
.wr-pflicht { margin-top: 24px; padding-top: 14px; border-top: 1.5px dashed var(--farbe-rahmen); display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; font-size: 13px; color: var(--farbe-gedaempft); }
.wr-k { border: 1.5px solid var(--farbe-rahmen); border-radius: 8px; padding: 3px 10px; background: var(--farbe-weiss); }
.wr-funk-reihe { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 18px; font-size: 13px; color: var(--farbe-gedaempft); }
.wr-funk-chip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px dashed var(--farbe-primaer); color: var(--farbe-primaer); background: var(--farbe-weiss); border-radius: 999px; padding: 3px 4px 3px 10px; font-size: 13px; font-weight: 600; }
.wr-funk-chip button { all: unset; cursor: pointer; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; }
.wr-funk-chip button:hover, .wr-funk-chip button:focus-visible { background: var(--farbe-primaer); color: var(--farbe-weiss); }
.wr-palette { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.wr-palette h4 { margin: 0 0 8px; font-size: 13px; font-family: var(--schrift-meta); text-transform: uppercase; letter-spacing: .05em; font-weight: 500; color: var(--farbe-gedaempft); }
.wr-vorschlaege { display: flex; flex-wrap: wrap; gap: 8px; }
.wr-chip { border: 1.5px solid var(--farbe-dunkel); border-radius: 999px; background: var(--farbe-weiss); padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer; color: var(--farbe-dunkel); }
.wr-chip-modul { border-color: var(--farbe-primaer); color: var(--farbe-primaer); }
.wr-chip:hover:not([disabled]) { background: var(--farbe-dunkel); color: var(--farbe-weiss); border-color: var(--farbe-dunkel); }
.wr-chip[disabled] { opacity: .4; cursor: default; }
.wr-mehr-funk { margin-top: 8px; }
.wr-mehr-funk summary { cursor: pointer; font-size: 14px; color: var(--farbe-primaer); font-weight: 600; margin-bottom: 8px; }
.wr-tipp { font-size: 14px; color: var(--farbe-gedaempft); margin: 10px 0 0; }
.wr-zaehler { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 16px; border: 1.5px solid var(--farbe-dunkel); border-radius: 14px; background: var(--farbe-weiss); }
.wr-zahl { font-family: var(--schrift-ueberschrift); font-size: 44px; line-height: 1.15; }
.wr-zahl-text { font-size: 15px; max-width: 56ch; }
/* Extras: Zähler für Sprachen, Zeilen „Nach dem Start“ mit Ja · Nein · Weiß ich noch nicht */
.wr-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--farbe-dunkel); border-radius: 999px; overflow: hidden; background: var(--farbe-weiss); }
.wr-stepper button { border: 0; background: var(--farbe-weiss); width: 44px; height: 40px; cursor: pointer; font-size: 18px; color: var(--farbe-dunkel); }
.wr-stepper button:hover { background: var(--farbe-hellgrau); }
.wr-stepper button:focus-visible { outline: 2px solid var(--farbe-primaer); outline-offset: -2px; }
.wr-stepper output { min-width: 34px; text-align: center; font-weight: 700; }
.wr-zeile { border: 1.5px solid var(--farbe-rahmen); border-radius: 14px; background: var(--farbe-weiss); margin: 12px 0 0; padding: 16px; min-width: 0; }
.wr-zeile legend { float: left; width: 100%; padding: 0; }
.wr-zeile legend b { display: block; font-size: 17px; }
.wr-zeile legend span { display: block; color: var(--farbe-gedaempft); }
.wr-zeile-text { clear: both; margin: 0; padding-top: 6px; font-size: 15px; color: var(--farbe-gedaempft); max-width: 62ch; }
.wr-zeile-mehr { clear: both; }
.wr-segmente { clear: both; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
.wr-segmente label { position: relative; cursor: pointer; }
.wr-segmente input { position: absolute; opacity: 0; pointer-events: none; }
.wr-segmente span { display: inline-block; border: 1.5px solid var(--farbe-dunkel); border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 600; }
.wr-segmente label:hover span { background: var(--farbe-hellgrau); }
.wr-segmente input:checked + span { background: var(--farbe-primaer); border-color: var(--farbe-primaer); color: var(--farbe-weiss); }
.wr-segmente input:focus-visible + span { outline: 2px solid var(--farbe-primaer); outline-offset: 2px; }
/* Knöpfe */
.wr-knoepfe { display: flex; justify-content: space-between; gap: 12px; margin-top: 36px; padding-top: 20px; border-top: 1.5px solid var(--farbe-rahmen); }
.wr-knoepfe .button { font: inherit; font-weight: 600; cursor: pointer; }
.wr-knoepfe #wr-weiter { margin-left: auto; }
.wr-knoepfe .button[hidden] { display: none; }
.wr-kein-kauf { margin: 12px 0 0; font-size: 14px; color: var(--farbe-gedaempft); text-align: right; }
/* Kassenbon */
.wr-bon { position: sticky; top: calc(var(--kopf-hoehe) + 72px); background: var(--farbe-weiss); border: 1.5px solid var(--farbe-dunkel); border-bottom: 0; padding: 20px 20px 10px; font-family: var(--schrift-meta); font-size: 13px; }
.wr-bon::after { content: ""; position: absolute; left: -1.5px; right: -1.5px; bottom: -10px; height: 10px; background: linear-gradient(135deg, var(--farbe-weiss) 33%, transparent 33%) 0 0 / 12px 10px, linear-gradient(225deg, var(--farbe-weiss) 33%, transparent 33%) 0 0 / 12px 10px; filter: drop-shadow(0 1.5px 0 var(--farbe-dunkel)); }
.wr-bon-titel { font-family: var(--schrift-ueberschrift); text-transform: uppercase; font-size: 22px; line-height: 1.15; margin: 0 0 2px; letter-spacing: .02em; }
.wr-bon-klein { color: var(--farbe-gedaempft); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin: 0; }
.wr-bon-phase { margin: 14px 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--farbe-primaer); }
.wr-bon-z { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.wr-bon-n { min-width: 0; }
.wr-bon-n small { display: block; color: var(--farbe-gedaempft); font-size: 11px; }
.wr-bon-b { white-space: nowrap; text-align: right; }
.wr-offen .wr-bon-b { color: var(--farbe-gedaempft); }
.wr-bon-linie { border-top: 1.5px dashed var(--farbe-dunkel); margin: 12px 0; }
.wr-bon-summe { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; font-weight: 700; }
.wr-bon-summe .wr-bon-b { font-family: var(--schrift-ueberschrift); font-weight: 400; font-size: 26px; line-height: 1.15; }
.wr-bon-neben { display: flex; justify-content: space-between; gap: 8px; color: var(--farbe-gedaempft); font-size: 12px; padding-top: 4px; }
.wr-bon-fuss { margin: 12px 0 0; color: var(--farbe-gedaempft); font-size: 11px; line-height: 1.45; }
.wr-bon-leiste { display: none; }
/* Ihr Bon: Ablauf, Anfrage, Website-Review */
.wr-ablauf { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.wr-ablauf li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }
.wr-ablauf-k { width: 30px; height: 30px; border-radius: 50%; background: var(--farbe-primaer); color: var(--farbe-weiss); display: grid; place-items: center; font-family: var(--schrift-meta); font-size: 12px; }
.wr-uebergabe { margin-top: 32px; padding: 22px; border: 1.5px solid var(--farbe-dunkel); border-radius: 14px; background: var(--farbe-weiss); }
.wr-box-titel { margin: 0 0 12px; font-family: var(--schrift-ueberschrift); font-weight: 400; text-transform: uppercase; font-size: 24px; line-height: 1.15; }
.wr-uebersicht { list-style: none; margin: 0 0 18px; padding: 0; font-size: 15px; }
.wr-uebersicht li { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--farbe-rahmen); }
.wr-uebersicht li span:first-child { font-family: var(--schrift-meta); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--farbe-gedaempft); padding-top: 2px; }
.wr-review { margin-top: 24px; padding: 22px; background: var(--farbe-creme); border-radius: 14px; }
.wr-review p { max-width: 62ch; }
.wr-review .meta { margin-bottom: 6px; }
/* Anfrageformular (Kostenrechner und Projekt anfragen): baut eine E-Mail, js/anfrage.js */
.anfrage-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.anfrage-felder label { display: flex; flex-direction: column; gap: 4px; font-size: 15px; font-weight: 600; }
.anfrage-ganz { grid-column: 1 / -1; }
.anfrage-felder input, .anfrage-felder textarea { font: inherit; font-weight: 400; border: 1.5px solid var(--farbe-gedaempft); border-radius: 10px; padding: 10px 12px; background: var(--farbe-weiss); color: var(--farbe-dunkel); resize: vertical; }
.anfrage-felder input:focus-visible, .anfrage-felder textarea:focus-visible { outline: 2px solid var(--farbe-primaer); outline-offset: 1px; border-color: var(--farbe-primaer); }
.anfrage-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 16px 0 12px; }
.anfrage-knoepfe .button { font: inherit; font-weight: 600; cursor: pointer; }
.anfrage-danach { margin-top: 14px; padding: 16px 18px; border: 1.5px solid var(--farbe-primaer); border-radius: 14px; background: var(--farbe-weiss); }
.anfrage-danach p { margin: 0; }
.anfrage-danach p + p { margin-top: 8px; font-size: 15px; }
.anfrage-kopieren { font: inherit; font-weight: 600; background: none; border: 0; padding: 0 0 2px; border-bottom: var(--rahmen) solid currentColor; cursor: pointer; color: var(--farbe-dunkel); }
.anfrage-kopiert { font-weight: 600; }
.kontakt-anfrage { margin: 0 0 1.5rem; }
/* Honeypot gegen Spam: unsichtbares Feld, das nur Bots ausfüllen */
.anfrage-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Newsletter-Häkchen in den Anfrageformularen (Anna 11.11.2026; kommt per js/anfrage.js) */
.anfrage-nl { margin: 16px 0 0; }
.anfrage-nl label { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; font-weight: 600; line-height: 1.4; cursor: pointer; }
.anfrage-nl input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--farbe-primaer); }
.anfrage-nl .hinweis-klein { margin: 4px 0 0 32px; }
/* Preislisten der übrigen Leistungen (ohne Rechner) */
.preisliste { padding: 64px var(--rand-seite) 0; }
.preisliste-kopf { max-width: 760px; margin-bottom: 24px; }
.preisliste-kopf .preis-h2 { margin: 8px 0 12px; }
.preisliste-kopf p { margin: 0 0 12px; }
.preisliste-netto { padding: 0 var(--rand-seite); }
/* Kostenrechner-Knopf unten rechts auf jeder Seite (Anna 16.10.2026: statt „Preise“ in der Navigation) */
.sticky-rechner { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: inline-flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; border-radius: 999px; background: var(--farbe-primaer); color: var(--farbe-weiss); font-weight: 600; text-decoration: none; box-shadow: 0 10px 30px rgba(14, 16, 17, .18); transition: background .2s, opacity .2s, visibility .2s; }
.sticky-rechner:hover { background: var(--farbe-primaer-dunkel); }
.sticky-rechner.weg { opacity: 0; visibility: hidden; pointer-events: none; } /* menue.js: liegt ein Knopf oder Kontakt-Link darunter */
.sticky-rechner:focus-visible { outline: 2px solid var(--farbe-dunkel); outline-offset: 3px; }
.sticky-rechner-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--farbe-weiss); display: grid; place-items: center; overflow: hidden; }
.sticky-rechner-icon img { width: 30px; height: 30px; }
/* nicht auf der Preisseite (dort ist der Rechner), nicht bei offenem Mobilmenü und nicht beim Tippen in Formularen */
body:has(.wr) .sticky-rechner, body:has(.kopf-mobil[open]) .sticky-rechner, body:has(input:focus, textarea:focus) .sticky-rechner { display: none; }
@media (max-width: 767.98px) {
  .sticky-rechner { padding: 4px 14px 4px 4px; gap: 8px; font-size: 15px; }
  .sticky-rechner-icon { width: 32px; height: 32px; }
  .sticky-rechner-icon img { width: 26px; height: 26px; }
}
@media (max-width: 1024px) {
  .wr { margin: 24px 12px; padding: 24px 16px 32px; border-radius: 24px; }
  .wr-raster { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .wr-leiste { display: none; }
  .wr-leiste-mobil { display: block; margin: 0 0 24px; }
  .wr-lm-oben { display: flex; justify-content: space-between; gap: 12px; font-family: var(--schrift-meta); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
  .wr-lm-balken { height: 4px; background: var(--farbe-rahmen); border-radius: 2px; overflow: hidden; }
  .wr-lm-balken i { display: block; height: 100%; background: var(--farbe-primaer); transition: width .2s; }
  .wr-drei, .wr-palette, .wr-basis, .anfrage-felder { grid-template-columns: minmax(0, 1fr); }
  .wr-uebersicht li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .wr-kein-kauf { text-align: left; }
  .wr-knoepfe { flex-direction: column-reverse; }
  .wr-knoepfe .button { text-align: center; }
  .wr-knoepfe #wr-weiter { margin-left: 0; }
  .wr-sitemap { overflow: visible; padding: 20px 14px; }
  .wr-start { justify-content: flex-start; }
  .wr-start .wr-karte { display: inline-flex; }
  .wr-ebene { flex-direction: column; gap: 14px; padding: 14px 0 0 18px; margin-left: 16px; border-left: 1.5px solid var(--farbe-grau); }
  .wr-ebene::before { display: none; }
  .wr-spalte, .wr-spalte.wr-leer { width: auto; padding-top: 0; }
  .wr-spalte::before { top: 21px; left: -18px; width: 14px; height: 0; border-left: 0; border-top: 1.5px solid var(--farbe-grau); }
  .wr-spalte::after { display: none; }
  .wr-spalte.wr-leer::before { display: none; }
  .wr-neu { padding: 10px 12px; font-size: 14px; }
  .wr-neu::after { content: " Seite"; }
  .wr-plus { margin: 6px 0 0 12px; }
  /* Bon als Leiste unten, aufklappbar; nur solange der Rechner im Bild ist */
  .wr-bon { position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-height: 78vh; overflow: auto; border-radius: 16px 16px 0 0; border-width: 1.5px 0 0; transform: translateY(100%); transition: transform .25s; z-index: 45; padding-bottom: 84px; visibility: hidden; }
  .wr-bon::after { display: none; }
  .wr-bon.offen { transform: none; box-shadow: 0 -10px 40px rgba(0, 0, 0, .18); visibility: visible; }
  .wr-im-bild .wr-bon-leiste { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 46; background: var(--farbe-dunkel); color: var(--farbe-weiss); padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); align-items: center; justify-content: space-between; gap: 12px; }
  .wr-bon-leiste button { all: unset; cursor: pointer; font-family: var(--schrift-meta); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; text-decoration: underline; text-underline-offset: 3px; padding: 8px 0; }
  .wr-bon-leiste button:focus-visible { outline: 2px solid var(--farbe-weiss); outline-offset: 2px; }
  .wr-bon-summe-leiste { font-family: var(--schrift-ueberschrift); font-size: 24px; line-height: 1.15; }
  .wr-bon-summe-leiste small { font-family: var(--schrift-meta); font-size: 11px; display: block; opacity: .75; }
}
@media (max-width: 767.98px) { .preisliste { padding-top: 48px; } }
@media (prefers-reduced-motion: reduce) { .wr *, .wr-bon { transition: none !important; } }
@media print { .sticky-rechner, .wr-bon-leiste { display: none !important; } }
/* PDF: nur den Kostenvoranschlag drucken */
@media print {
  body.druck-rechner > *:not(main), body.druck-rechner main > *:not(.wr), body.druck-rechner .wr > *:not(.druck-bereich) { display: none !important; }
  body.druck-rechner .wr { background: none; padding: 0; margin: 0; }
  .druck-bereich h2 { font-family: var(--schrift-ueberschrift); text-transform: uppercase; font-size: 20px; margin: 18px 0 0; }
  .druck-bereich pre { font-family: var(--schrift-text); font-size: 13px; white-space: pre-wrap; margin: 8px 0 0; }
  .druck-bereich small { color: #555; }
  body.druck-rechner .druck-bereich { display: block; font-family: var(--schrift-text); color: #000; }
  .druck-marke { font-family: var(--schrift-ueberschrift); font-size: 28px; margin: 0 0 12px; }
  .druck-bereich h1 { font-family: var(--schrift-ueberschrift); text-transform: uppercase; font-size: 32px; margin: 0 0 6px; }
  .druck-bereich table { width: 100%; border-collapse: collapse; margin: 18px 0; }
  .druck-bereich td { padding: 6px 0; border-bottom: 1px solid #ccc; }
  .druck-bereich td:last-child { text-align: right; white-space: nowrap; }
  .druck-summe td { font-weight: 700; border-top: 2px solid #000; }
}

/* ---------- 22. Kopf und Fuß: Kostenrechner-Pille, Fuß-Karte, Brotkrumen ---------- */
.fuss .fuss-karte, .fuss .fuss-karte .fuss-karte-titel { color: var(--farbe-dunkel); }
.fuss .fuss-karte .fuss-karte-link { color: var(--farbe-weiss); }
.fuss .fuss-karte .meta { color: var(--farbe-gedaempft); }
/* Brotkrumen: liegen über der großen Überschrift, damit der Link klickbar bleibt */
.seitenkopf .meta { position: relative; z-index: 2; }


#prozess { scroll-margin-top: calc(var(--kopf-hoehe) + 64px); }
.seitenkopf .alt-klein .textlink { font-size: inherit; }

/* ---------- 24. Leistungsseite v2: Karten, kompakter Prozess ---------- */
.ls-raster { padding: 24px var(--rand-seite) 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 48px; }
.ls-karte { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; scroll-margin-top: calc(var(--kopf-hoehe) + 24px); }
.ls-karte img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; transition: transform .4s; }
.ls-karte:hover img { transform: scale(1.02); }
.ls-karte-titel { font-family: var(--schrift-ueberschrift); text-transform: uppercase; font-size: clamp(28px, 2.6vw, 40px); line-height: 1; margin-top: 8px; }
.ls-karte-text { color: var(--farbe-gedaempft); max-width: 48ch; }
.prozess-kompakt { padding: 72px var(--rand-seite); }
.glossar { padding-bottom: 120px; }
@media (max-width: 900px) {
  .ls-raster { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .glossar { padding-bottom: 80px; }
}

/* ---------- 25. Startseite neu: Vorstellung im Magazin-Stil, Leistungen mit Chips ---------- */
/* Vorstellung: Foto links (bleibt beim Scrollen stehen), rechts Brief mit Unterschrift, darunter Werkzeuge */
.intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); padding: 120px var(--rand-seite) 96px; }
.intro-text { max-width: 640px; }
.intro-text .gr-h2 { margin: 12px 0 32px; }
.intro-brief p { font-size: clamp(18px, 1.35vw, 21px); line-height: 1.6; margin: 0 0 1.1em; }
.intro-gruss { display: flex; margin: 40px 0; }
.intro-gruss p { margin: 0; }
.profil-tools { border-top: 1px solid var(--farbe-rahmen); padding-top: 24px; margin-bottom: 24px; }
.profil-tools .tools { margin: 16px 0 0; flex-wrap: nowrap; gap: 18px; }
.profil-tools .tools img { max-width: 100%; }

/* Leistungen: Chips springen zur Karte */
.start-leistungen .sektionskopf { padding-bottom: 24px; }
.leistungs-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--rand-seite) 24px; }
.leistungs-chips a { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--farbe-rahmen); font-size: 14px; font-weight: 600; text-decoration: none; color: inherit; white-space: nowrap; transition: border-color .2s, background .2s, color .2s; }
.leistungs-chips a:hover { border-color: var(--farbe-dunkel); }
.leistungs-chips a:last-child { background: var(--farbe-dunkel); border-color: var(--farbe-dunkel); color: var(--farbe-weiss); }
@media (max-width: 900px) {
  .intro { padding: 72px var(--rand-seite) 64px; }
  .profil-tools .tools { flex-wrap: wrap; }
  .leistungs-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .leistungs-chips::-webkit-scrollbar { display: none; }
}

/* ---------- 26. Zeilenabstand der Überschriften (Anna, 11.10.2026) ---------- */
/* Kompakt, aber Umlaut-Punkte und Akzente dürfen die Zeile darüber nicht berühren (Anton: bei 1,0 stößt „Ä“ an „M“) */
h1, h2, h3, .gr-xxl, .gr-xl, .gr-h2, .gr-h3, .artikel h1, .mm-karte-titel, .fuss-karte-titel, .ls-karte-titel, .weg-ziel .gr-h2, .preisseite .preis-h2, .preis-cta-kostenlos .gr-h2, .lp-titel { line-height: 1.12; }
.hero-titel { line-height: 1.04; }
/* Blog-Vorschaukarten: Titel ohne Unterstrich, etwas mehr Zeilenabstand */
.blog-karte h3 { line-height: 1.15; margin: 0 0 .5rem; }
.blog-karte h2 a, .blog-karte h3 a { text-decoration: none; color: inherit; }
.blog-karte h3 a:hover { opacity: .6; }
/* Vorstellung: Nutzen als Häkchen-Liste (Idee: lueth-duemchen.de), danach wer ich bin */

/* ---------- 27. Kundenstimmen als versetztes Raster (wie Pinterest), alle sichtbar – Startseite und Profil ---------- */
.stimmen { display: block; columns: 3 320px; column-gap: 20px; padding: 0 var(--rand-seite) 96px; }
.stimme { break-inside: avoid; margin: 0 0 20px; padding: 32px 28px; border-radius: 20px; }
.stimme h3 { min-height: 0; }
.stimme .gedaempft { font-size: .95rem; line-height: 1.55; }
.stimme .person { padding-top: 1.25rem; }
@media (max-width: 1024px) { .stimmen { columns: 2 280px; } }
@media (max-width: 767.98px) { .stimmen { columns: 1; } }

/* ---------- 28. Profilseite: Ansatz und Engagement, Aktivitäten, Werdegang, Empfehlungen ---------- */
.profil-zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; padding: 0 var(--rand-seite) 96px; }
.zwecke { list-style: none; padding: 0; margin: 16px 0 32px; display: flex; flex-wrap: wrap; gap: 8px; }
.zwecke li { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--farbe-rahmen); font-size: 14px; font-weight: 600; }
@media (max-width: 900px) {
  .profil-zweispaltig { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-bottom: 64px; }
  }

/* ---------- 29. Profil-Einstieg: Kennzahlen (Idee: proxy.gonka.gg), Grafik „Herzstück“, Fuß „Made with Love“ ---------- */
.fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 40px 0; border-top: 1px solid var(--farbe-rahmen); border-bottom: 1px solid var(--farbe-rahmen); }
.fakten > div { padding: 20px 16px; text-align: center; }
.fakten > div + div { border-left: 1px solid var(--farbe-rahmen); }
.fakten dt { font-family: var(--schrift-ueberschrift); font-size: clamp(36px, 4vw, 56px); line-height: 1.12; font-variant-numeric: tabular-nums; }
.fakten dd { margin: 4px 0 0; color: var(--farbe-gedaempft); font-size: 14px; line-height: 1.4; }
.profil-wer { padding-top: 96px; }
.profil-wer .gr-h3 { margin: 12px 0 24px; }
/* Website in der Mitte, sechs Kanäle im Kreis darum */
.mit-liebe svg { width: 12px; height: 12px; vertical-align: -1px; fill: currentColor; }
@media (max-width: 767.98px) {
  .fakten { grid-template-columns: minmax(0, 1fr); }
  .fakten > div + div { border-left: 0; border-top: 1px solid var(--farbe-rahmen); }
  }

/* Hero Startseite: Knöpfe (Anfrage zuerst) und Kennzahlen darunter (Idee: proxy.gonka.gg) */
.hero-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 32px; margin: 24px 0 0; }
.hero-fakten { max-width: 880px; margin: 48px auto 0; }
.fakt-ort { width: 1em; height: 1em; vertical-align: -.12em; }
/* ---------- 30. Profil: Blick ins Studio – Überschrift oben, Querformat-Foto mit Hinweisen (Linie + Etikett in der Meta-Schrift) ---------- */
.studio-blick { padding: 120px var(--rand-seite) 0; }
.studio-text { max-width: 720px; margin-bottom: 40px; }
.studio-text .gr-h3 { margin: 12px 0 24px; }
.studio-bild { position: relative; margin: 0; border-radius: 20px; overflow: hidden; }
.studio-bild img { display: block; width: 100%; height: auto; }
.studio-punkt { --l: 44px; position: absolute; left: var(--x); top: var(--y); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--farbe-weiss); box-shadow: 0 0 0 3px var(--farbe-dunkel); }
.studio-punkt::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--farbe-weiss); animation: studio-puls 2.4s ease-out infinite; }
.studio-punkt::after { content: ""; position: absolute; left: 100%; top: 50%; width: var(--l); height: 2px; background: var(--farbe-weiss); transform-origin: left; }
.studio-label { position: absolute; left: calc(100% + var(--l)); top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 6px 12px; border-radius: 999px; background: var(--farbe-dunkel); color: var(--farbe-weiss); font-family: var(--schrift-meta); font-size: 13px; letter-spacing: .02em; }
/* „oben“: Linie senkrecht nach oben, Etikett darüber */
.studio-punkt.oben::after { left: 50%; top: auto; bottom: 100%; width: 2px; height: var(--l); transform-origin: bottom; }
.studio-punkt.oben .studio-label { left: -8px; top: auto; bottom: calc(100% + var(--l)); transform: none; }

@keyframes studio-puls { from { transform: scale(1); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
/* Auftritt nacheinander: Punkt, Linie, Etikett */
.studio-bild.wartet .studio-punkt { transform: scale(0); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1) calc(.4s + var(--i) * .6s); }
.studio-bild.wartet .studio-punkt::after { transform: scaleX(0); transition: transform .4s ease calc(.75s + var(--i) * .6s); }
.studio-bild.wartet .studio-punkt.oben::after { transform: scaleY(0); }
.studio-bild.wartet .studio-label { opacity: 0; transition: opacity .4s ease calc(1.05s + var(--i) * .6s); }
.studio-bild.los .studio-punkt, .studio-bild.los .studio-punkt::after { transform: none; }
.studio-bild.los .studio-label { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .studio-punkt::before { animation: none; } }
@media (max-width: 900px) {
  .studio-blick { padding-top: 72px; }
  .studio-text { margin-bottom: 24px; }
  .studio-punkt { --l: 18px; --h: 34px; width: 12px; height: 12px; margin: -6px 0 0 -6px; }
  .studio-label { font-size: 10px; padding: 3px 8px; white-space: normal; width: max-content; max-width: 130px; line-height: 1.3; }
}
/* Kennzeichnung: Foto mit KI bearbeitet (Bildschirminhalt ersetzt, Kabel entfernt) */
.studio-ki { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(14, 16, 17, .72); color: var(--farbe-weiss); cursor: help; }
.studio-ki svg { width: 12px; height: 12px; fill: currentColor; }

/* ---------- 31. Fuß: Newsletter-Anmeldung (Brevo, Double Opt-in) ---------- */
.fuss-newsletter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; padding: 40px 0; margin: 40px 0 0; border-top: 1px solid rgba(255, 255, 255, .15); }
.fuss-nl-text { max-width: 52ch; color: var(--farbe-gedaempft-invers); }
.fuss-nl-feld { display: flex; gap: 8px; flex-wrap: wrap; }
.fuss-nl-feld input[type="email"] { flex: 1 1 220px; min-width: 0; padding: 12px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: var(--farbe-weiss); font: inherit; }
.fuss-nl-feld input[type="email"]::placeholder { color: var(--farbe-gedaempft-invers); }
.fuss-nl-feld .button { border: 0; cursor: pointer; }
.fuss-nl-falle { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fuss-nl-hinweis { font-size: 13px; color: var(--farbe-gedaempft-invers); margin-top: 12px !important; }
.fuss .fuss-nl-hinweis a { text-decoration: underline; font-weight: 400; }
.fuss-nl-meldung { margin-top: 12px !important; font-weight: 600; }
@media (max-width: 900px) { .fuss-newsletter { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 32. Seite „Newsletter bestätigt“ ---------- */
.nl-danke { padding: 140px var(--rand-seite) 120px; max-width: 900px; }
.nl-danke .gr-xl { margin: 12px 0 24px; }
.nl-danke-knoepfe { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; margin-top: 32px; }

/* ---------- 33. Megamenü mit 9 Leistungen und Bild in der Aktions-Karte ---------- */
.mm-liste a { padding: 14px 0; }
.mm-name { font-size: 1.45rem; }
.mm-text { font-size: .88rem; }
/* Mega-Menü-Karte wie die Preise-Karte der Leistungsseiten: schwarz, Icon auf weißer Kachel (Anna 25.10.2026) */
.mm-karte-dunkel { background: var(--farbe-dunkel); color: var(--farbe-weiss); padding: 32px; }
.mm-karte-dunkel .meta { color: rgba(255, 255, 255, .6); }
.mm-karte-dunkel .mm-karte-titel { color: var(--farbe-weiss); }
.mm-karte-dunkel > span:not([class]) { color: rgba(255, 255, 255, .78); font-weight: 400; }
.kopf-nav .mm-karte-dunkel .button.button-zweit { background: transparent; color: var(--farbe-weiss); border-color: var(--farbe-weiss); }
.kopf-nav .mm-karte-dunkel:hover .button.button-zweit { background: var(--farbe-weiss); color: var(--farbe-dunkel); }
.mm-karte-icon { width: 72px; height: 72px; border-radius: 18px; background: var(--farbe-weiss); padding: 6px; }
.ohne-umbruch { white-space: nowrap; }
.mm-karte { padding: 20px 20px 28px; }
.mm-karte-titel { font-size: 2rem; }

/* ---------- 34. Leistungsunterseiten (erzeugt mit werkzeuge/leistungsseiten.py) ---------- */
.lsx-loesung, .lsx-pakete, .lsx-vergleich, .lsx-extras, .lsx-stimmen { padding: 96px var(--rand-seite) 0; }
.lsx-loesung { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.lsx-pakete .gr-h3, .lsx-vergleich .gr-h3, .lsx-extras .gr-h3, .lsx-stimmen .gr-h3 { margin: 12px 0 24px; }
.lsx-knoepfe { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; margin-top: 28px; }
.lsx-hinweis { max-width: 70ch; color: var(--farbe-gedaempft); margin: 0 0 32px; }
.lsx-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 20px; }
.lsx-karte { position: relative; border: 1px solid var(--farbe-rahmen); border-radius: 24px; padding: 32px 28px; flex-direction: column; gap: 8px; }
.lsx-gefragt { border: 2px solid var(--farbe-dunkel); }
.lsx-badge { position: absolute; top: -13px; left: 24px; margin: 0; padding: 3px 12px; border-radius: 999px; background: var(--farbe-dunkel); color: var(--farbe-weiss); font-family: var(--schrift-meta); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.lsx-karte-name { font-size: 1.8rem; margin: 0; hyphens: auto; overflow-wrap: break-word; }
.lsx-karte-preis { font-family: var(--schrift-ueberschrift); font-size: 2.4rem; line-height: 1.12; margin: 0; }
.lsx-karte-wer { color: var(--farbe-gedaempft); margin: 0 0 8px; }
.lsx-karte-plus { font-weight: 700; margin: 8px 0 0; }
.lsx-karte-liste { margin: 4px 0 0; padding-left: 1.1em; display: grid; gap: 6px; align-content: start; } /* Punkte bleiben eng zusammen, auch wenn die Nachbarkarte eine längere Liste hat */
.lsx-tabelle-rahmen { overflow-x: auto; border: 1px solid var(--farbe-rahmen); border-radius: 20px; }
.lsx-tabelle { width: 100%; border-collapse: collapse; min-width: 560px; }
.lsx-tabelle th, .lsx-tabelle td { padding: 14px 18px; border-bottom: 1px solid var(--farbe-rahmen); text-align: left; vertical-align: top; }
.lsx-tabelle tbody tr:last-child th, .lsx-tabelle tbody tr:last-child td { border-bottom: 0; }
.lsx-tabelle thead th { background: var(--farbe-hellgrau); font-weight: 700; }
.lsx-tabelle thead th span { display: block; font-weight: 400; color: var(--farbe-gedaempft); font-size: .9rem; }
.lsx-tabelle tbody th { font-weight: 400; }
.lsx-tabelle td { text-align: center; width: 18%; }
.lsx-ja { font-weight: 700; }
.lsx-nein { color: var(--farbe-gedaempft); }
.lsx-extra-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--farbe-rahmen); }
.lsx-extra-liste li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 4fr) auto; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--farbe-rahmen); align-items: baseline; }
.lsx-extra-name { font-weight: 700; }
.lsx-extra-text { color: var(--farbe-gedaempft); }
.lsx-extra-preis { white-space: nowrap; font-weight: 600; }
.lsx-stimmen .stimmen { padding: 0; columns: 2 320px; }
.faq-mehr { text-align: center; margin: 40px 0 0; }
@media (max-width: 900px) {
  .lsx-loesung { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 64px; }
  .lsx-pakete, .lsx-vergleich, .lsx-extras, .lsx-stimmen { padding-top: 64px; }
  .lsx-extra-liste li { grid-template-columns: minmax(0, 1fr) fit-content(60%); }
  .lsx-extra-text { grid-column: 1 / -1; grid-row: 2; }
  .lsx-extra-preis { white-space: normal; } /* lange Preise („50–85 € … je nach Unternehmensgröße“) umbrechen statt überlaufen */
  .faq-liste { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 35. Anton: fester Zusatz-Zeichenabstand (Anna, 12.10.2026) ---------- */
/* Fester Wert in px: bei kleinen Größen deutlich (Buchstaben laufen sonst ineinander), bei großen kaum sichtbar */
h1, h2, h3, .mm-name, .mm-karte-titel, .hero-titel, .fuss-karte-titel, .fuss-gross, .ls-karte-titel, .fakten dt, .lsx-karte-preis, .gr-xxl, .gr-xl, .gr-h2, .gr-h3 { letter-spacing: .9px; }
.blog-karte h2 { letter-spacing: normal; }
.lsx-extra-liste li > span { text-align: left; }
.lsx-extra-preis { text-align: right !important; }
/* Ankernavigation der Leistungsseiten: gleiche Leiste wie auf der Preisseite (.preis-leiste) – direkt unter dem Kopf, weiß, feine graue Linie */
.lsx-chips { margin-top: 32px; }
main section[id] { scroll-margin-top: 0; } /* Abstand kommt schon aus html { scroll-padding-top } – sonst doppelt (Prüfung 13.10.2026) */
.lsx-karte-dauer { margin: 0 0 8px; } .lsx-karte-dauer .meta { margin-right: 6px; }
/* Leistungsseiten: Kennzahlen, „Nicht enthalten“, Referenzen, „Sie arbeiten direkt mit mir“ */
.lsx-fakten { max-width: 880px; margin: 40px 0 0; }
.lsx-nicht { margin-top: 24px; border-radius: 20px; background: var(--farbe-hellgrau); }
.lsx-nicht ul { margin: 12px 0 0; padding-left: 1.1em; display: grid; }
.lsx-referenzen { padding: 96px var(--rand-seite) 0; }
.lsx-referenzen .gr-h3 { margin: 12px 0 24px; }
.lsx-referenzen .referenzen { padding: 0; }
.lsx-direkt { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: center; padding: 96px var(--rand-seite) 0; max-width: 1000px; }
.lsx-direkt img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 20px; }
.lsx-direkt .gr-h3 { margin: 12px 0 16px; }
@media (max-width: 767.98px) { .lsx-direkt { grid-template-columns: 120px minmax(0, 1fr); gap: 20px; padding-top: 64px; } }
/* FAQ: kein schwarzer Rahmen beim Aufklappen mit der Maus; Tastatur sieht eine Unterstreichung */
.faq-eintrag summary:focus-visible { outline: none; text-decoration: underline; text-underline-offset: 4px; }
/* FAQ: mehr Luft zwischen Frage und Antwort */
.faq-eintrag[open] summary { padding-bottom: 16px; }
.faq-antwort { padding-top: 4px; }
.faq-antwort p { margin-top: 0; }
/* Leistungsseiten: passende Blogartikel */
.lsx-artikel { padding: 96px 0 0; }
.lsx-artikel-kopf { padding: 0 var(--rand-seite); }
.lsx-artikel-kopf .gr-h3 { margin: 12px 0 24px; }
.lsx-artikel .blog-liste { max-width: none; padding: 0 var(--rand-seite) 96px; }

/* 37. Netto-Hinweis an Preisen der Leistungsseiten */
.lsx-netto { font-family: var(--schrift-text); font-size: .4em; letter-spacing: 0; font-weight: 400; text-transform: none; vertical-align: .35em; margin-left: .15em; }
.lsx-extra-preis .lsx-netto, .lsx-tabelle .lsx-netto { font-size: max(12px, .8em); vertical-align: baseline; }
.lsx-klein { font-size: .85rem; color: var(--farbe-gedaempft); margin: 16px 0 0; }

/* 38. Grafik Corporate Identity (Brand-Seite) und Kleingedrucktes „Nicht enthalten“ */
.lsx-nicht { padding: 18px 22px; }
.lsx-nicht ul { font-size: .85rem; color: var(--farbe-gedaempft); gap: 2px; }
.ci-grafik { margin: 0 0 96px; grid-template-columns: minmax(0, 560px) auto minmax(0, 240px); align-items: center; justify-content: center; gap: 24px 32px; }
.ci-t { font-weight: 700; }
.ci-kern-t { font-family: var(--schrift-ueberschrift); font-size: 38px; letter-spacing: .9px; text-transform: uppercase; }
.ci-grafik figcaption { grid-column: 1 / -1; max-width: 70ch; justify-self: center; text-align: center; font-size: .9rem; color: var(--farbe-gedaempft); }
@media (max-width: 767.98px) {
  .ci-grafik { grid-template-columns: 1fr; justify-items: center; }
  }
.lsx-termine { max-width: 70ch; margin: 16px 0 0; font-size: 1rem; }
.lsx-termine .meta { display: inline-block; margin-right: 8px; }
@media (max-width: 767.98px) {
  .ci-grafik figcaption { padding: 0 4px; }
}
@media (max-width: 767.98px) {
  .ci-grafik { padding: 0 16px; margin-bottom: 64px; }
  }

.ci-t { font-size: 26px; fill: var(--farbe-weiss); }
.ci-s { font-size: 17px; fill: rgba(255, 255, 255, .78); }
.ci-kern-t { fill: var(--farbe-dunkel); }
.ci-titel { grid-column: 1 / -1; order: -1; max-width: 46ch; justify-self: center; text-align: center; margin-bottom: 16px; }
.ci-titel .gr-h3 { display: block; }
.ci-unter { display: block; margin-top: 12px; color: var(--farbe-gedaempft); font-size: 1rem; }
.ci-grafik figcaption.ci-titel { font-size: inherit; color: var(--farbe-dunkel); max-width: 40ch; }
.ci-titel-gross { display: block; font-family: var(--schrift-ueberschrift); font-size: clamp(26px, 2.6vw, 38px); line-height: 1.12; letter-spacing: .9px; text-transform: uppercase; }
.ci-grafik { margin-top: 96px; }
@media (max-width: 767.98px) { .ci-grafik { margin-top: 64px; } }
.lsx-grundsatz { margin-top: 8px; }
.ls-grundsatz { margin: 32px 0 0; text-align: center; }
/* Grafik Corporate Identity, Fassung 3: Animation in Schwarz-Weiß (werkzeuge/grafiken/ci-animation.py) */
.ci-grafik { display: block; max-width: 1000px; margin-left: auto; margin-right: auto; }
.ci-anim { display: block; width: 100%; height: auto; font-family: var(--schrift-text); }
.ci-hoch { display: none; max-width: 520px; margin: 0 auto; }
.ci-klein { font-family: var(--schrift-meta); letter-spacing: 1.5px; }
.ci-anim .ci-t { font-weight: 700; }
.ci-anim .ci-t, .ci-anim .ci-s, .ci-anim .ci-klein { fill: inherit; }
.ci-anim text.ci-weiss { fill: var(--farbe-weiss); }
.ci-anim text.ci-schwarz-t { fill: var(--farbe-dunkel); }
.ci-anim .ci-kern-t { font-family: var(--schrift-ueberschrift); font-size: 36px; letter-spacing: .9px; }
.ci-titel { display: block; margin: 0 auto 24px; }
@media (max-width: 767.98px) {
  .ci-quer { display: none; }
  .ci-hoch { display: block; }
}
/* Nutzen der Corporate Identity (Brand-Seite): eigene Linien-Icons, grau mit schwarzem Akzent */
.ci-nutzen { margin: 0 auto 96px; }
.ci-nutzen-liste { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 40px 32px; }
.ci-nutzen-liste svg { width: 120px; height: 80px; display: block; margin-bottom: 16px; }
.ci-nutzen-liste h3 { font-size: 1.4rem; margin: 0 0 8px; }
.ci-nutzen-liste p { margin: 0; color: var(--farbe-gedaempft); }
.ci-l { fill: none; stroke: #c9cccd; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ci-a { fill: none; stroke: var(--farbe-dunkel); stroke-width: 3; stroke-linejoin: round; }
.ci-f { fill: var(--farbe-dunkel); }
.ci-p { fill: none; stroke: #c9cccd; stroke-width: 2; stroke-dasharray: 2 4; stroke-linecap: round; }

.ci-anim .ci-l { stroke-width: 2; }
.ci-anim > .ci-p, .ci-anim path.ci-p { stroke-width: 1.8; }
.ci-anim .ci-s { opacity: .62; }
.ci-nutzen { padding: 0 var(--rand-seite); max-width: calc(var(--inhalt-breite) + 2 * var(--rand-seite)); }
@media (max-width: 767.98px) { .ci-nutzen { padding: 0 var(--rand-seite-mobil); } }
/* Corporate Identity als Erklärfilm (werkzeuge/grafiken/ci-film.py): Elemente erscheinen nacheinander (--d = Startzeit) */
.ci-film .z { animation-duration: .7s; animation-delay: var(--d); animation-fill-mode: both; animation-timing-function: cubic-bezier(.2, .8, .2, 1); transform-box: fill-box; transform-origin: center; }
.ci-film .z-ein { animation-name: ci-ein; }
.ci-film .z-pop { animation-name: ci-pop; }
.ci-film .z-hoch { animation-name: ci-hoch; transform-origin: center bottom; }
.ci-film .z-links { animation-name: ci-links; animation-duration: 1s; }
.ci-film .z-rechts { animation-name: ci-rechts; animation-duration: 1s; }
.ci-film .z-fallen { animation-name: ci-fallen; animation-duration: .8s; }
.ci-film .z-blick { animation-name: ci-blick; animation-duration: .6s; }
.ci-film.wartet .z { animation-play-state: paused; }
.ci-film.neu .z { animation: none; }
@keyframes ci-ein { from { opacity: 0; transform: translateY(8px); } }
@keyframes ci-pop { from { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.06); } to { transform: none; } }
@keyframes ci-hoch { from { opacity: 0; transform: scaleY(0); } }
@keyframes ci-links { from { opacity: 0; transform: translateX(-16px); } }
@keyframes ci-rechts { from { opacity: 0; transform: translateX(16px); } }
@keyframes ci-fallen { from { opacity: 0; transform: translateY(-28px); } 70% { opacity: 1; transform: translateY(3px); } to { transform: none; } }
@keyframes ci-blick { from { transform: scaleY(.05); } }
@keyframes ci-strich { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.ci-nochmal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin: 8px 0 0; }
.ci-nochmal-knopf, .ci-pause-knopf { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
/* Pause-Taste (WCAG 2.2.2, Regel „höchstens 5 s oder Pause-Taste“): hält Film und Punkte an */
.ci-film.angehalten :is(.z, .ci-schweben, .oeko-icon) { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .ci-film .z { animation: none !important; }
  .ci-nochmal { display: none; }
}
.ci-anim .ci-kern-t.ci-image-t { font-size: 27px; }

/* 40. Referenzkarten, Karussell, „Für wen“, Erfolgsgeschichte (Vorbild Google Business Profile, Anna 11.10.2026)
       Kartenfarbe = Hausfarbe des Projekts (Regel: Farbe kommt aus den Kundenprojekten). Erzeugt von werkzeuge/inhalte-erzeugen.py */
.referenz-rahmen { padding: 0 var(--rand-seite) 64px; }
.lsx-referenzen .referenz-rahmen { padding: 0; }

.ks { position: relative; }
.ks-spur { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.ks-spur::-webkit-scrollbar { display: none; }
.ks-steuerung { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }
.ks-pfeile, .ks-rechts { display: flex; align-items: center; gap: 12px; }
.ks-knopf { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--farbe-hellgrau); color: var(--farbe-dunkel); font-size: 1.1rem; cursor: pointer; }
.ks-knopf:hover { background: var(--farbe-hellgrau-2); }
.ks-punkte { display: flex; gap: 6px; }
.ks-punkte i { width: 10px; height: 10px; border-radius: 999px; background: var(--farbe-grau-hell); transition: width .3s; overflow: hidden; position: relative; }
.ks-punkte i.aktiv { width: 44px; }
.ks-punkte i.aktiv::after { content: ""; position: absolute; inset: 0; background: var(--farbe-dunkel); transform-origin: left; animation: ks-lauf 7s linear forwards; }
.ks.pause .ks-punkte i.aktiv::after { animation: none; }
@keyframes ks-lauf { from { transform: scaleX(0); } }

.dk { margin: 32px var(--rand-seite) 0; border-radius: 40px; padding: 64px 56px 72px; text-align: center; }
.dk > .meta { margin: 0 0 16px; }
.dk-umschalter { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 6px; border-radius: 999px; margin: 0 0 40px; }
.dk-umschalter button { border: 0; background: none; font: inherit; padding: 10px 22px; border-radius: 999px; cursor: pointer; }
.dk-umschalter button:focus-visible { outline: 2px solid var(--farbe-weiss); outline-offset: 2px; }
.dk-titel { font-family: var(--schrift-ueberschrift); font-size: clamp(32px, 4vw, 60px); letter-spacing: .9px; text-transform: uppercase; line-height: 1.08; margin: 0 0 16px; }
.dk-karte-titel { font-family: var(--schrift-ueberschrift); font-size: 1.5rem; letter-spacing: .9px; text-transform: uppercase; line-height: 1.12; }
.dk-karte-text { color: var(--farbe-gedaempft); }
.dk-preis { margin-top: auto; font-family: var(--schrift-ueberschrift); letter-spacing: .9px; }
.dk-preis small { font-family: var(--schrift-text); font-size: .8rem; letter-spacing: 0; color: var(--farbe-gedaempft); }
.dk-feld[hidden] { display: none; }

@media (max-width: 900px) {
  .referenz-rahmen { padding: 0 var(--rand-seite-mobil) 48px; }
  .dk { margin: 24px var(--rand-seite-mobil) 0; padding: 40px 18px 48px; border-radius: 28px; }
  }
@media (prefers-reduced-motion: reduce) {
}
/* 41. Problem & Lösung (Anna 11.10.2026): Problem schwarz, Lösung hell daneben in gleicher Höhe, Knöpfe unter dem Problem */
.lsx-pl .gr-h3 { margin: 12px 0 32px; max-width: 22ch; }
.lsx-pl-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 24px; align-items: stretch; }
.lsx-pl-problem, .lsx-pl-loesung { border-radius: 28px; padding: 36px 36px 32px; }
.lsx-pl-problem { background: var(--farbe-dunkel); color: var(--farbe-weiss); }
.lsx-pl-problem .meta { color: rgba(255, 255, 255, .6); }
.lsx-pl-loesung { background: var(--farbe-hellgrau); }
.lsx-pl-problem ul, .lsx-pl-loesung ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.lsx-pl-problem li, .lsx-pl-loesung li { position: relative; padding-left: 28px; line-height: 1.45; }
.lsx-pl-problem li::before { content: "×"; position: absolute; left: 2px; top: -1px; color: rgba(255, 255, 255, .55); }
.lsx-pl-loesung li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 700; }
.lsx-pl-text { margin: 16px 0 0; font-size: 1.1rem; line-height: 1.5; max-width: 52ch; }
.lsx-pl-loesung .lsx-grundsatz { margin: 24px 0 0; }
.lsx-pl .lsx-knoepfe { grid-column: 1; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
@media (max-width: 900px) {
  .lsx-pl-raster { grid-template-columns: 1fr; }
  .lsx-pl .lsx-knoepfe { grid-row: 3; }
  .lsx-pl-problem, .lsx-pl-loesung { padding: 28px 24px; border-radius: 24px; }
}

/* Pakete in Reihen (Print: 2 große, darunter 3) */
.lsx-karten + .lsx-karten { margin-top: 20px; }
.lsx-karten-2 { grid-template-columns: repeat(2, 1fr); }
/* Drei Pakete nebeneinander (Anna 25.10.2026, UI/UX) */
@media (min-width: 900.02px) { .lsx-karten:has(> .lsx-karte:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Vier Pakete: 2 × 2 statt 3 + 1 mit viel Weißraum (Anna 25.10.2026) */
.lsx-karten:has(> .lsx-karte:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lsx-karten-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .lsx-karten-2, .lsx-karten-3, .lsx-karten:has(> .lsx-karte:nth-child(4):last-child) { grid-template-columns: 1fr; } }

/* Ansprechpartnerin und Kostenrechner als zwei Karten nebeneinander */
.lsx-duo { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; padding: 96px var(--rand-seite) 0; align-items: stretch; }
.lsx-duo-karte { border-radius: 32px; padding: 40px; position: relative; overflow: hidden; }
.lsx-duo .lsx-direkt { background: var(--farbe-hellgrau); display: grid; grid-template-columns: 160px 1fr; gap: 28px; align-items: start; margin: 0; padding: 40px; }
.lsx-duo .lsx-direkt img { width: 160px; height: auto; border-radius: 20px; }
.lsx-duo-rechner { background: var(--farbe-dunkel); color: var(--farbe-weiss); display: flex; flex-direction: column; gap: 12px; }
.lsx-duo-rechner .meta { color: rgba(255, 255, 255, .6); margin: 0; }
.lsx-duo-rechner .gr-h3 { color: var(--farbe-weiss); margin: 0; max-width: 12ch; }
.lsx-duo-rechner p { margin: 0; color: rgba(255, 255, 255, .78); max-width: 40ch; }
.lsx-duo-rechner :focus-visible { outline-color: var(--farbe-weiss); } /* Fokus auf Schwarz sichtbar */
.lsx-duo-rechner .button-hell, .lsx-duo-rechner .button { background: var(--farbe-weiss); color: var(--farbe-dunkel); margin-top: 8px; }
.lsx-duo-icon { right: 24px; top: 20px; }
@media (max-width: 900px) {
  .lsx-duo { grid-template-columns: 1fr; padding: 64px var(--rand-seite-mobil) 0; }
  .lsx-duo .lsx-direkt { grid-template-columns: 1fr; padding: 28px; }
  .lsx-duo-karte { padding: 28px; border-radius: 24px; }
  }

/* Magazin im Querformat (Print-Referenz Bauer): Seiten blättern nacheinander um */
.lsx-loesung.lsx-pl { display: block; }
.lsx-pl .lsx-knoepfe { flex-direction: row; }
.lsx-duo-icon { border-radius: 22px; background: var(--farbe-weiss); padding: 6px; }

/* 42. Preiskarten: Zeilen in einer Reihe auf gleicher Höhe (Unterzeile, Dauer, „Enthalten“, Liste) – Regel Anna 11.10.2026 */
.lsx-karten { align-items: stretch; }
.lsx-karte { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 8px; align-content: start; }
.lsx-karte > p:empty { margin: 0; }
.lsx-karte-plus:empty, .lsx-karte-dauer:empty { min-height: 0; }
/* Nur ein Paket: Karte und Hintergrund nebeneinander */
.lsx-einzeln { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: stretch; }
.lsx-einzeln .lsx-karte { grid-row: auto; display: flex; flex-direction: column; }
.lsx-einzeln .lsx-nicht { margin-top: 0; }
.lsx-hintergrund { background: var(--farbe-creme); border-radius: 24px; padding: 32px; }
.lsx-hintergrund .meta { margin: 0 0 8px; }
.lsx-hintergrund-titel { font-size: 1.6rem; margin: 0 0 12px; }
.lsx-hintergrund p:not(.meta) { margin: 0 0 10px; max-width: 60ch; }
@media (max-width: 900px) { .lsx-einzeln { grid-template-columns: 1fr; } }
/* Überschrift der Leistungsseiten passt sich der Breite an (--n = Buchstaben im längsten Wort) */
.lsx-titel { font-size: min(clamp(64px, 19vw, 19vw), calc((100vw - 2 * var(--rand-seite)) / (var(--n) * .56 + 1.4))); }
@media (max-width: 767.98px) { .lsx-titel { font-size: min(19vw, calc((100vw - 2 * var(--rand-seite-mobil)) / (var(--n) * .56 + 1.4))); } }
.lsx-titel .icon-3d { height: .9em; width: auto; }
.lsx-kopf .alt-klein { hyphens: auto; overflow-wrap: break-word; }
.lsx-duo { padding-bottom: 96px; }
@media (max-width: 900px) { .lsx-duo { padding-bottom: 64px; } }
/* Drei Einstiege (Anna 25.10.2026): Ansprechpartnerin, Website-Check, Preise – breit nebeneinander,
   mittel Website-Check und Preise nebeneinander und die Ansprechpartnerin darunter, schmal untereinander */
.lsx-trio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "check preise" "direkt direkt"; }
.lsx-trio .lsx-direkt { grid-area: direkt; }
.lsx-trio .lsx-duo-check { grid-area: check; }
.lsx-trio .lsx-duo-rechner { grid-area: preise; }
.lsx-trio .lsx-duo-check > p:last-child, .lsx-trio .lsx-duo-rechner > p:last-child { margin-top: auto; } /* Knöpfe auf einer Linie */
@media (min-width: 1200.02px) {
  .lsx-trio { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "direkt check preise"; }
  .lsx-trio .lsx-direkt { grid-template-columns: minmax(0, 1fr); }
  .lsx-trio .lsx-direkt img { width: 120px; }
}
@media (max-width: 900px) { .lsx-trio { grid-template-columns: minmax(0, 1fr); grid-template-areas: "check" "preise" "direkt"; } }
.lsx-duo-check { background: var(--farbe-primaer); color: var(--farbe-weiss); display: flex; flex-direction: column; gap: 12px; }
.lsx-duo-check .meta { color: var(--farbe-weiss); margin: 0; }
.lsx-duo-check .meta::before { background: var(--farbe-weiss); }
.lsx-duo-check .gr-h3 { color: var(--farbe-weiss); margin: 0; max-width: 14ch; }
.lsx-duo-check p { margin: 0; max-width: 40ch; }
.lsx-duo-check .button { align-self: flex-start; background: var(--farbe-weiss); color: var(--farbe-dunkel); margin-top: 8px; }
.lsx-duo-check .button:hover { background: var(--farbe-creme); }
/* Retainer nach dem Ablauf (Webdesign) */
.lsx-retainer { padding: 0 var(--rand-seite) 96px; max-width: 900px; }
.lsx-retainer .gr-h3 { margin: 8px 0 12px; }
@media (max-width: 900px) { .lsx-retainer { padding: 0 var(--rand-seite-mobil) 64px; } }
.lsx-duo-icon { position: static; width: 96px; height: 96px; margin: 0 0 8px; filter: none; }
/* Megamenü ab 09.11.2026 (Anna: aufräumen): drei gleich breite Spalten – Kernkompetenzen, Marke und Marketing, Weitere Leistungen (klein, ohne Unterzeile) – daneben die Preiskarte */
.mm-bereiche { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
/* Mega-Menü ruhig wie bei Tesla (Anna 25.10.2026): nur zwei Größen – Namen in Anton (eine Stärke, mehr Buchstabenabstand), Text und kleine Leistungen gleich groß */
.kopf-nav .mm-name { font-size: 1.35rem; letter-spacing: .06em; }
.kopf-nav .mm-text, .kopf-nav .mm-weitere a { font-size: .95rem; }
.kopf-nav .mm-weitere a { font-weight: 500; }
/* Fokusrahmen um „Leistungen“ mit mehr Luft (bleibt für die Bedienung mit Tastatur) */
.kopf-nav .mm-toggle { padding: 6px 12px; margin: -6px -12px; border-radius: 10px; }
.kopf-nav .mm-toggle:focus-visible { outline-offset: 0; }
.kopf-nav .mm-weitere { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.kopf-nav .mm-weitere a { display: block; padding: 12px 0; border-top: var(--rahmen) solid var(--farbe-rahmen); }
@media (min-width: 1024.02px) and (max-width: 1200px) {
  .mm-innen { grid-template-columns: 5fr 2fr; gap: 32px; }
  .mm-bereiche { gap: 0 24px; }
  .kopf-nav .mm-name { font-size: 1.2rem; }
}
.kopf-nav .mm-weitere a { text-decoration: none; font-weight: 600; }
.kopf-nav .mm-weitere a:hover, .kopf-nav .mm-weitere a:focus-visible { text-decoration: underline; opacity: 1; }
.kopf-nav .mm-weitere a[aria-current] { color: var(--farbe-primaer); }
/* Menüleiste (Anna 11.10.2026): Leistungen · Preise · Über mich · Blog · [Projekt anfragen] – ein einziger Button */
.kopf-nav .kopf-button { text-decoration: none !important; padding: 8px 18px; border-radius: 999px; color: var(--farbe-weiss); }
.mm-toggle { display: inline-flex; align-items: center; gap: 6px; }
.mm-pfeil { width: 11px; height: 11px; }
.dk { margin-bottom: 64px; }
@media (max-width: 900px) { .dk { margin-bottom: 40px; } }
/* Erklärfilm, Fassung 5 (Anna 11.10.2026): Unterzeilen 14 px, Icons ohne Kreis, größer und leicht schwebend, „Noch einmal ansehen“ klein */
.ci-nochmal-knopf, .ci-pause-knopf { font-size: .85rem; }
.ci-schweben { transform-box: fill-box; transform-origin: center; animation: ci-schweben 4.2s ease-in-out var(--s, 0s) infinite alternate; }
@keyframes ci-schweben { from { transform: translateY(-2.5px) rotate(-3deg); } to { transform: translateY(2.5px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .ci-schweben { animation: none; } }
/* Bewegung anhalten (WCAG 2.2.2): Erklärfilm nach dem Aufbau, Mockups mit dem Pause-Knopf des Karussells, einzelne Karten nach zwei Durchläufen */
.ci-film.ruhe .ci-schweben { animation-play-state: paused; }
/* 43. Zeitleiste im Stil von Annas Lebenslauf 2024: Mittellinie, Karten abwechselnd links/rechts, Datumsmarke (Werdegang, Prozess) */
.zeitleiste { list-style: none; margin: 48px 0 0; padding: 0; position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 112px; row-gap: 28px; }
.zeitleiste::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #b9bcbd; }
.zeitleiste li { position: relative; grid-column: 1; display: flex; align-items: center; gap: 0; min-height: 150px; background: var(--farbe-weiss); border-radius: 0 999px 999px 0; box-shadow: 0 14px 40px rgba(14, 16, 17, .08); padding: 0 56px 0 0; }
.zeitleiste li:nth-child(even) { grid-column: 2; flex-direction: row-reverse; text-align: right; border-radius: 999px 0 0 999px; padding: 0 0 0 56px; transform: translateY(55%); }
.zl-marke { flex: none; align-self: stretch; display: flex; flex-direction: column; justify-content: center; width: 132px; margin: 28px 28px 28px -12px; padding: 16px 18px; background: var(--farbe-dunkel); color: var(--farbe-weiss); border-radius: 0 56px 56px 0; }
.zeitleiste li:nth-child(even) .zl-marke { margin: 28px -12px 28px 28px; border-radius: 56px 0 0 56px; text-align: right; }
.zl-marke small { font-size: .8rem; }
.zl-marke b { font-family: var(--schrift-ueberschrift); font-size: 2.4rem; line-height: 1; letter-spacing: .9px; font-weight: 400; }
.zl-text { padding: 24px 0; }
.zl-text .meta { margin: 0 0 4px; }
.zl-text h3 { margin: 0 0 6px; font-size: 1.5rem; }
.zl-text p.gedaempft { margin: 0; max-width: 42ch; }
.zeitleiste li:nth-child(even) .zl-text p.gedaempft { margin-left: auto; }
/* Verbindung zur Mittellinie mit Punkt */
.zeitleiste li::after { content: ""; position: absolute; top: 50%; right: -56px; width: 56px; height: 1px; background: #b9bcbd; }
.zeitleiste li::before { content: ""; position: absolute; top: 50%; right: -63px; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--farbe-dunkel); z-index: 1; }
.zeitleiste li:nth-child(even)::after { right: auto; left: -56px; }
.zeitleiste li:nth-child(even)::before { right: auto; left: -63px; }
.zeitleiste li.zl-aktuell::before { background: var(--farbe-primaer); }
.zeitleiste:has(li:nth-child(even):last-child) { padding-bottom: 90px; }
@media (max-width: 900px) {
  .zeitleiste { grid-template-columns: 1fr; row-gap: 20px; padding-left: 28px; }
  .zeitleiste::before { left: 6px; }
  .zeitleiste li, .zeitleiste li:nth-child(even) { grid-column: 1; transform: none; flex-direction: row; text-align: left; border-radius: 0 40px 40px 0; padding: 0 24px 0 0; min-height: 0; }
  .zeitleiste li:nth-child(even) .zl-marke, .zl-marke { margin: 20px 18px 20px 0; width: 104px; border-radius: 0 40px 40px 0; text-align: left; }
  .zeitleiste li::after, .zeitleiste li:nth-child(even)::after { left: -22px; right: auto; width: 22px; }
  .zeitleiste li::before, .zeitleiste li:nth-child(even)::before { left: -29px; right: auto; }
  .zeitleiste li:nth-child(even) .zl-text p.gedaempft { margin-left: 0; }
  .zl-marke b { font-size: 1.9rem; }
  .zeitleiste:has(li:nth-child(even):last-child) { padding-bottom: 0; }
}
/* Profil: Engagement und künstlerischer Hintergrund als eigene Abschnitte mit Bild (Anna 11.10.2026) */
.profil-ansatz-text { padding: 0 var(--rand-seite); max-width: 900px; }
.profil-bildtext { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; padding: 96px var(--rand-seite) 0; }
.profil-bildtext-rechts > .profil-bildtext-bild { order: 2; }
.profil-bildtext-bild { margin: 0; width: 100%; }
img.profil-bildtext-bild, .profil-bildtext-bild img { width: 100%; height: auto; max-height: 640px; object-fit: cover; border-radius: 28px; display: block; }
.profil-bildtext-bild figcaption { margin-top: 10px; font-size: .8rem; color: var(--farbe-gedaempft); }
.profil-bildtext .gr-h3 { margin: 8px 0 20px; }
@media (max-width: 900px) { .profil-bildtext { grid-template-columns: 1fr; gap: 28px; padding: 64px var(--rand-seite-mobil) 0; } .profil-bildtext-rechts > .profil-bildtext-bild { order: 0; } .profil-ansatz-text { padding: 0 var(--rand-seite-mobil); } }
/* „Warum Website“ als animierte Grafik (werkzeuge/grafiken/website-herz.py), auf Leistungsseiten mit Website-Bezug */
.herz-abschnitt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; padding: 96px var(--rand-seite) 0; }
.herz-text .gr-h3 { margin: 8px 0 20px; }
@media (max-width: 900px) { .herz-abschnitt { grid-template-columns: 1fr; gap: 24px; padding: 64px var(--rand-seite-mobil) 0; } }
/* Erklärfilm, Fassung 6: Unterzeilen = Größe der Dachzeile (Anna 11.10.2026) */
.ci-anim .ci-s { font-size: 12px; }
.ci-hoch .ci-s { font-size: 19px; }
/* nur Desktop: auf dem Handy braucht die Marke Abstand zum Text (Anna 13.10.2026) */
@media (min-width: 900.02px) { .zeitleiste li:nth-child(even) .zl-marke { margin-right: 0; } }

/* 44. Website-Ökosystem (ersetzt Kreisgrafik „Warum Website“, Anna 11.10.2026) */
.oeko-abschnitt { grid-template-columns: 1fr; gap: 40px; }
.oeko-abschnitt .herz-text { max-width: 760px; }
.oeko { position: relative; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px 72px; align-items: center; }
.oeko-linien { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.oeko-linien path { fill: none; stroke-dasharray: 5 7; }
.oeko-seite { display: grid; gap: 22px; position: relative; z-index: 1; }
.oeko-karte { background: var(--farbe-weiss); border: 1px solid var(--farbe-rahmen); border-radius: 22px; padding: 20px 22px; box-shadow: 0 10px 30px rgba(14, 16, 17, .05); }
.oeko-titel { display: inline-block; margin: 0 10px 0 0; font-weight: 700; font-size: 1.1rem; }
.oeko-weg { display: inline-block; font-size: .78rem; padding: 3px 10px; border-radius: 999px; background: var(--farbe-hellgrau); color: var(--farbe-gedaempft); vertical-align: 2px; }
.oeko-text { margin: 8px 0 12px; font-size: .9rem; color: var(--farbe-gedaempft); }
.oeko-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.oeko-chips li { font-size: .8rem; padding: 4px 10px; border: 1px solid var(--farbe-rahmen); border-radius: 8px; }
.oeko-mitte { position: relative; z-index: 1; }
.oeko-website { background: var(--farbe-weiss); border: 1.5px solid var(--farbe-dunkel); border-radius: 28px; box-shadow: 0 24px 60px rgba(14, 16, 17, .12); }
.oeko-browser { display: flex; gap: 6px; margin: 0 0 14px; }
.oeko-browser i { width: 9px; height: 9px; border-radius: 50%; background: var(--farbe-grau-hell); }
.oeko-website-titel { font-family: var(--schrift-ueberschrift); font-size: clamp(30px, 2.8vw, 44px); letter-spacing: .9px; text-transform: uppercase; }
.oeko-ziele { grid-column: 1 / -1; text-align: center; padding-top: 12px; }
.oeko-ziele .meta { margin: 0 0 6px; }
.oeko-ziel-text { font-family: var(--schrift-ueberschrift); font-size: clamp(24px, 2.4vw, 34px); letter-spacing: .9px; text-transform: uppercase; margin: 0 0 8px; }
.oeko-beispiel { margin: 0; color: var(--farbe-gedaempft); font-size: .9rem; }
.oeko-beispiel span { color: var(--farbe-dunkel); }
.oeko .ci-nochmal { grid-column: 1 / -1; }
/* Aufbau: Website zuerst als Wireframe (gestrichelt, größer), dann Zoom heraus */
.ci-film .z-zoom { animation-name: oeko-zoom; animation-duration: 1.1s; }
@keyframes oeko-zoom { from { transform: scale(1.22); box-shadow: none; border-style: dashed; border-color: #b9bcbd; } }
.oeko-linien .oeko-linie { opacity: 0; transition: opacity .8s; }
.oeko.linien-an .oeko-linien .oeko-linie { opacity: 1; }
@media (max-width: 900px) {
  .oeko { grid-template-columns: 1fr; gap: 18px; }
  .oeko-mitte { order: -1; }
  .oeko-linien { display: none; }
  .oeko-karte { position: relative; }
}
.oeko-linien path { stroke: #8f9293; stroke-width: 1.8; }
/* Außenkarten untereinander vernetzt (gestrichelte Verbindung zwischen den Karten einer Seite) */
.oeko-seite .oeko-karte { position: relative; }
.oeko-seite .oeko-karte + .oeko-karte::before { content: ""; position: absolute; left: 50%; top: -23px; height: 22px; border-left: 1.8px dashed #8f9293; }
/* Ökosystem, Runde 2 (Anna 11.10.2026): Clay-Icon und Logos in den Karten, Website in der Mitte als Wireframe, jeder zweite Punkt blau */
.oeko-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.oeko-kopf .oeko-titel { margin: 0; }
.oeko-icon { width: 46px; height: 46px; flex: none; margin: -6px 0 -6px -4px; animation: ci-schweben 5s ease-in-out infinite; }
.oeko-karte:nth-child(2n) .oeko-icon { animation-delay: -2.5s; }
.oeko-chips li { display: inline-flex; align-items: center; gap: 6px; }
.oeko-linien .oeko-punkt-blau { fill: var(--farbe-primaer); }
.oeko-website { text-align: left; padding: 18px 20px 22px; }
.oeko-browser { align-items: center; }
.oeko-adresse { margin-left: 10px; flex: 1; font-size: .75rem; color: var(--farbe-gedaempft); background: var(--farbe-hellgrau); border-radius: 999px; padding: 3px 12px; }
.oeko-website-titel { text-align: center; margin: 4px 0 14px; }
.oeko-wf { display: grid; gap: 10px; position: relative; }
.wf-nav { display: flex; align-items: center; gap: 8px; padding: 0 2px 4px; }
.wf-nav b { width: 34px; height: 12px; border-radius: 4px; background: var(--farbe-dunkel); margin-right: auto; }
.wf-nav span { width: 28px; height: 6px; border-radius: 3px; background: var(--farbe-grau-hell); }
.wf-nav em { width: 40px; height: 14px; border-radius: 999px; background: var(--farbe-dunkel); }
.wf-block { border: 1.5px dashed #b9bcbd; border-radius: 14px; background: var(--farbe-hellgrau); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; min-height: 64px; }
.wf-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wf-name { font-size: .82rem; font-weight: 700; line-height: 1.25; }
.wf-hero { min-height: 84px; justify-content: center; }
.wf-hero .wf-name { font-family: var(--schrift-ueberschrift); font-weight: 400; font-size: 1.25rem; letter-spacing: .6px; text-transform: uppercase; }
.wf-linie { display: block; height: 6px; width: 80%; border-radius: 3px; background: var(--farbe-grau-hell); }
.wf-linie.wf-kurz { width: 55%; }
.wf-kacheln { display: flex; gap: 5px; margin-top: auto; }
.wf-kacheln i { flex: 1; height: 22px; border-radius: 5px; background: #e1e3e4; }
.wf-feld { display: block; height: 9px; border-radius: 3px; background: var(--farbe-weiss); border: 1px solid var(--farbe-grau-hell); }
.wf-knopf { display: block; width: 46px; height: 11px; border-radius: 999px; background: var(--farbe-dunkel); margin-top: auto; }
.wf-chat { justify-self: end; margin: -2px -4px -8px 0; padding: 7px 14px; border-radius: 16px 16px 4px 16px; background: var(--farbe-primaer); color: var(--farbe-weiss); }
.wf-chat .wf-name { font-size: .78rem; }
.ci-film.ruhe .oeko-icon { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .oeko-icon { animation: none; } }
/* Aktion: zentrales Zitat unter großem Bild (Anna 11.10.2026: Bild schön groß) */
.lp-warum-bild .lp-warum-foto { width: 100%; height: clamp(320px, 44vw, 640px); object-fit: cover; object-position: center 48%; border-radius: 28px; display: block; margin-bottom: 40px; }
.lp-warum-bild .lp-zitat { max-width: 40ch; }
/* Profil „Mein Ansatz“: Bauhaus-Grundformen nach Annas Skizze (11.10.2026). Alle Formen gleich groß (--s).
   Quadrat unten, Dreieck darauf; der Kreis fällt aufs Dreieck, rollt die linke Schräge herunter und bleibt neben dem Quadrat liegen. */
.ansatz-kopf { position: relative; }
@keyframes bf-fallen { from { transform: translateY(calc(var(--s) * -2)); opacity: 0; } 60% { opacity: 1; } 80% { transform: translateY(calc(var(--s) * .06)); } to { transform: none; } }
/* Versatz des Kreises gegenüber seinem Ruheplatz neben dem Quadrat */
@keyframes bf-purzeln {
  0% { transform: translate(calc(var(--s) * 1.05), calc(var(--s) * -3.1)); opacity: 0; animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
  8% { opacity: 1; }
  24% { transform: translate(calc(var(--s) * 1.15), calc(var(--s) * -1.87)) rotate(0); animation-timing-function: ease-out; }
  32% { transform: translate(calc(var(--s) * 1.12), calc(var(--s) * -2.15)) rotate(-30deg); animation-timing-function: ease-in; }
  40% { transform: translate(calc(var(--s) * 1.1), calc(var(--s) * -1.87)) rotate(-60deg); animation-timing-function: ease-in; }
  68% { transform: translate(calc(var(--s) * .45), calc(var(--s) * -.8)) rotate(-220deg); animation-timing-function: ease-in; }
  82% { transform: translate(calc(var(--s) * .15), 0) rotate(-310deg); animation-timing-function: ease-out; }
  90% { transform: translate(calc(var(--s) * .06), calc(var(--s) * -.12)) rotate(-340deg); animation-timing-function: ease-in; }
  100% { transform: translate(0, 0) rotate(-360deg); opacity: 1; }
}
.ansatz-herkunft { max-width: 62ch; color: var(--farbe-gedaempft); }
/* Fußzeile: Leitsatz der Personal Brand (Anna 11.10.2026: Bauhaus-Faden auf der ganzen Website) */
.fuss-claim { margin: 10px 0 0; font-size: 1rem; color: var(--farbe-gedaempft-invers); }
/* Startseite Intro (Anna 11.10.2026): Bild kleiner, Studio statt Porträt; Porträt rund neben Name */
.intro { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.intro-gruss { flex-direction: row; align-items: center; gap: 16px; }
.intro-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; }
/* Prozess: erster und letzter Punkt blau (nicht beim Werdegang, der markiert Aktuelles) */
.zeitleiste li:first-child::before, .zeitleiste li:last-child::before { background: var(--farbe-primaer); }
/* Profil „Über mich“: Kopf über beiden Spalten, Textblöcke beginnen auf einer Höhe (Anna 11.10.2026) */
.profil-wer-kopf { padding: 0 var(--rand-seite) 32px; }
.profil-wer-kopf .gr-h3 { margin: 8px 0 0; }
.profil-wer .profil-zweispaltig .alt-h3 { margin-top: 0; }
.profil-wer .profil-zweispaltig > div > p:first-child { margin-top: 0; }
@media (max-width: 900px) { .profil-wer-kopf { padding: 0 var(--rand-seite-mobil) 24px; } }
/* „Warum Website“: Text neben der Überschrift, unten bündig (Anna 11.10.2026) */
.oeko-abschnitt .herz-text.oeko-kopf-zeile { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: end; }
.oeko-kopf-zeile .gr-h3 { margin-bottom: 0; }
.oeko-kopf-zeile > div:last-child p:last-child { margin-bottom: 0; }
@media (max-width: 900px) { .oeko-abschnitt .herz-text.oeko-kopf-zeile { grid-template-columns: 1fr; gap: 16px; } }
/* Startseite Intro: Bauhaus-Tetris auf hellem Grund, sticky, bis neue Studiofotos da sind (Anna 11.10.2026).
   Raster 3 × 4 Felder (--u), große Teile, ruhiger Fall (Anna 11.10.2026: doppelt so groß, langsamer). Jedes Teil: Ursprung --x/--y, Zellen --c/--r; fällt mit Versatz --dx und Drehung --rot. */
.bauhaus-tetris { --u: min(28cqw, 20cqh); position: relative; width: calc(var(--u) * 3); height: calc(var(--u) * 4); }
.tt { position: absolute; left: calc(var(--u) * var(--x)); bottom: calc(var(--u) * var(--y)); width: var(--u); height: var(--u); }
.tz { position: absolute; left: calc(var(--u) * var(--c) + 3px); bottom: calc(var(--u) * var(--r) + 3px); width: calc(var(--u) - 6px); height: calc(var(--u) - 6px); background: var(--f); }
.tt-w { --f: var(--farbe-weiss); } .tt-d { --f: var(--farbe-dunkel); } .tt-m { --f: var(--farbe-grau); } .tt-h { --f: var(--farbe-grau-hell); } .tt-b { --f: var(--farbe-primaer); }
.tz-to { clip-path: polygon(50% 4%, 100% 100%, 0 100%); }
.tz-tu { clip-path: polygon(0 0, 100% 0, 50% 96%); }
.tz-k { border-radius: 50%; }
.tz-ki { border-radius: 50%; }
.ci-film .tt { animation-name: tt-fallen; animation-duration: 1s; animation-timing-function: cubic-bezier(.3, 0, .8, 1); will-change: transform; }
/* Wie beim Tetris: jedes Teil läuft von der Oberkante des Felds herein (Start eine ganze Feldhöhe höher, 100cqh – passt bei jeder Feldgröße),
   fällt gleichmäßig, dreht und verschiebt sich unterwegs und rastet ein – kein Sammelpunkt oben (Anna 11.10.2026) */
@keyframes tt-fallen {
  from { transform: translate(calc(var(--u) * var(--dx)), -100cqh) rotate(var(--rot)); }
  to { transform: none; }
}



/* Profil „Mein Ansatz“: Text links, Formen groß rechts (Anna 11.10.2026: „langweilig“) */
.ansatz-zeile { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: end; padding: 0 var(--rand-seite); }
.ansatz-zeile .profil-ansatz-text { padding: 0; }
.ansatz-zeile .ansatz-herkunft { font-size: 1.2rem; line-height: 1.6; color: var(--farbe-dunkel); }
@media (max-width: 900px) { .ansatz-zeile { grid-template-columns: 1fr; gap: 32px; padding: 0 var(--rand-seite-mobil); } }
/* Profil „Über mich“: große Zeile links bleibt stehen, rechter Text scrollt (Anna 11.10.2026) */
.profil-wer .profil-zweispaltig > div:first-child { position: sticky; top: calc(var(--kopf-hoehe) + 32px); align-self: start; }
@media (max-width: 900px) { .profil-wer .profil-zweispaltig > div:first-child { position: static; } }
/* Blog-Vorschau Startseite und Profil: vier Artikel über die volle Breite (Anna 11.10.2026) */
.blog-liste.blog-vier { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; max-width: none; padding: 0 var(--rand-seite) 96px; }
@media (max-width: 1200px) { .blog-liste.blog-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .blog-liste.blog-vier { grid-template-columns: 1fr; padding: 0 var(--rand-seite-mobil) 64px; } }
/* Zeitleisten: wo der Punkt blau ist, ist auch die Marke blau; alle Karten gleich hoch, Inhalt mittig (Anna 11.10.2026) */
.zeitleiste { grid-auto-rows: 1fr; }
.zeitleiste li:first-child .zl-marke, .zeitleiste li:last-child .zl-marke { background: var(--farbe-primaer); }
.profil-erfahrung .zeitleiste li .zl-marke { background: var(--farbe-dunkel); }
.profil-erfahrung .zeitleiste li.zl-aktuell .zl-marke { background: var(--farbe-primaer); }
.button { background: var(--farbe-primaer); color: var(--farbe-weiss); border: var(--rahmen) solid var(--farbe-primaer); padding: calc(1rem - var(--rahmen)) 1.5rem; transition: background .2s, color .2s, border-color .2s; }
.button:hover { opacity: 1; background: var(--farbe-primaer-dunkel); border-color: var(--farbe-primaer-dunkel); }
.button.button-zweit { background: transparent; color: var(--farbe-dunkel); border-color: var(--farbe-dunkel); }
.button.button-zweit:hover { background: var(--farbe-dunkel); color: var(--farbe-weiss); }
.kopf-nav .kopf-button { background: var(--farbe-primaer); }
.kopf-nav .kopf-button:hover { opacity: 1; background: var(--farbe-primaer-dunkel); }
/* Sekundär auf dunklem Grund */
.lsx-duo-rechner .button.button-zweit, .lsx-duo-rechner .button-hell.button-zweit { background: transparent; color: var(--farbe-weiss); border-color: var(--farbe-weiss); }
.lsx-duo-rechner .button.button-zweit:hover { background: var(--farbe-weiss); color: var(--farbe-dunkel); }
.fuss-nl-feld .button { background: var(--farbe-primaer); color: var(--farbe-weiss); }
.fuss-nl-feld .button:hover { background: var(--farbe-primaer-dunkel); }
/* Profil „Hier bin ich“: Bauhaus-Tetris auf dem Monitor im Studiofoto (Anna 11.10.2026). Lage in % des Fotos (1600 × 1067). */
.studio-bildschirm { position: absolute; left: 6.9%; top: 17.8%; width: 18.4%; height: 15.6%; background: var(--farbe-weiss); container-type: size; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 2%; }
.studio-bildschirm .bauhaus-tetris { --u: min(25cqw, 23.5cqh); }
.studio-bildschirm .tz { left: calc(var(--u) * var(--c) + 1px); bottom: calc(var(--u) * var(--r) + 1px); width: calc(var(--u) - 2px); height: calc(var(--u) - 2px); }
/* Profil: Werdegang-Zeitleiste direkt unter „Über mich“, ohne eigene Überschrift (Anna 11.10.2026) */
.profil-wer .profil-zweispaltig { padding-bottom: 16px; }
.profil-wer-zeitleiste { padding: 0 var(--rand-seite) 120px; }
@media (max-width: 900px) { .profil-wer-zeitleiste { padding: 0 var(--rand-seite-mobil) 64px; } }
/* Dachzeilen (Meta-Zeile direkt vor einer Überschrift): blauer Punkt davor (Anna 11.10.2026) */
.meta:has(+ :is(h1, h2))::before, div:has(+ :is(h1, h2)) > .meta:last-child::before { content: ""; display: inline-block; width: .62em; height: .62em; margin: 0 .55em .08em 0; border-radius: 50%; background: var(--farbe-primaer); vertical-align: middle; }
/* Startseite Intro: ohne Bild, zwei Spalten (Anna 11.10.2026) */
.intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start; }
.intro .intro-text { max-width: none; }
.intro-links { position: sticky; top: calc(var(--kopf-hoehe) + 32px); }
@media (max-width: 900px) { .intro { grid-template-columns: 1fr; gap: 8px; } .intro-links { position: static; } }
/* „Für wen“: blauer Grund, weiße Karten, Referenzkarten mit Screenshot (Anna 11.10.2026) */
.dk-karte-text { font-size: .95rem; line-height: 1.5; }
.dk-preis { padding-top: 14px; border-top: 1px solid var(--farbe-rahmen); font-size: 1.35rem; }

.dk-punkte { list-style: none; margin: 8px 0 18px; padding: 0; display: grid; gap: 10px; font-size: .95rem; line-height: 1.45; }
.dk-punkte li { position: relative; padding-left: 26px; }
.dk-punkte li::before { content: ""; position: absolute; left: 2px; top: .3em; width: 12px; height: 7px; border-left: 2px solid var(--farbe-primaer); border-bottom: 2px solid var(--farbe-primaer); transform: rotate(-45deg); }
.dk-punkte small { font-size: .8rem; color: var(--farbe-gedaempft); }
.dk-titel { margin-bottom: 40px; }
section[hidden] { display: none !important; }
/* Profil „Mein Ansatz“: Bauhaus-Raster 4 × 4 (Anna 11.10.2026). Kacheln stoßen ohne Fuge aneinander, Formen über Rundungen und Clip-Pfade. */
.bauhaus-raster { --u: clamp(56px, 6.6vw, 104px); position: relative; width: calc(var(--u) * 4); height: calc(var(--u) * 4); justify-self: center; }
.bk { position: absolute; left: calc(var(--u) * var(--c)); top: calc(var(--u) * var(--r)); width: var(--u); height: var(--u); background: var(--f); transform: rotate(var(--dreh)); }
.bk-d { --f: var(--farbe-dunkel); } .bk-b { --f: var(--farbe-primaer); } .bk-h { --f: var(--farbe-grau-hell); } .bk-m { --f: var(--farbe-grau); }
.bk-k { border-radius: 50%; }
.bk-hk { border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.bk-vk { border-radius: 100% 0 0 0; }
.bk-dr { clip-path: polygon(0 100%, 100% 100%, 100% 0); }
.bk-s { background: repeating-linear-gradient(90deg, var(--f) 0 14%, transparent 14% 28%); }
.bk-kq { background: radial-gradient(circle closest-side, var(--farbe-weiss) 99%, var(--f) 100%); }
.ci-film .bk { animation-name: bk-drehen; animation-duration: .8s; animation-timing-function: cubic-bezier(.3, 1.3, .5, 1); }
@keyframes bk-drehen { from { transform: rotate(calc(var(--dreh) - 90deg)) scale(0); } to { transform: rotate(var(--dreh)) scale(1); } }
.ansatz-zeile .bauhaus-raster { margin: 0; }
@media (max-width: 900px) { .bauhaus-raster { --u: 64px; justify-self: start; } }
/* CI-Grafik und Nutzen-Icons: Bauhaus-Akzente in Blau und Grau, gefüllte Grundformen (Anna 11.10.2026) */
.ci-blau { fill: var(--farbe-primaer); stroke: none; }
.ci-grau { fill: var(--farbe-grau-hell); stroke: none; }
/* Kennzahlen: „+“ und Punkt im Ort-Symbol in Blau (Anna 11.10.2026) */
.fakt-plus { color: var(--farbe-primaer); }
.ci-weiss { fill: var(--farbe-weiss); stroke: none; }
/* Bauhaus-Raster auf Creme wie ein Plakat (Anna 11.10.2026: „wir haben ja auch noch die Cremefarbe“); helle Kacheln weiß statt grau */
.bauhaus-raster { box-sizing: content-box; padding: calc(var(--u) * .45); background: var(--farbe-creme); border-radius: 28px; }
.bauhaus-raster .bk { left: calc(var(--u) * (var(--c) + .45)); top: calc(var(--u) * (var(--r) + .45)); }
.bauhaus-raster .bk-h { --f: var(--farbe-weiss); }
.bauhaus-raster .bk-kq { background: radial-gradient(circle closest-side, var(--farbe-creme) 99%, var(--f) 100%); }
/* Startseite Intro: beide Spalten oben und unten bündig – links bleibt stehen und endet mit der rechten Spalte (Anna 11.10.2026) */
.intro-links > :last-child, .intro-links .intro-brief > p:last-child { margin-bottom: 0; }
.intro-links .meta { margin-top: 0; }
/* Prozesse spaltenweise lesen – links 01 und 02, rechts versetzt 03 und 04, nie im Zickzack (Anna 11.10.2026 Startseite; 25.10.2026: für alle Prozesse mit vier Schritten) */
@media (min-width: 900.02px) {
  /* gilt für .zl-spalten und jede Zeitleiste mit genau vier Schritten */
  :is(.zl-spalten, .zeitleiste:has(> li:nth-child(4):last-child)):not(.grafik-prozess .zeitleiste) > li:nth-child(1) { grid-column: 1; grid-row: 1; }
  :is(.zl-spalten, .zeitleiste:has(> li:nth-child(4):last-child)):not(.grafik-prozess .zeitleiste) > li:nth-child(2) { grid-column: 1; grid-row: 2; flex-direction: row; text-align: left; border-radius: 0 999px 999px 0; padding: 0 56px 0 0; transform: none; }
  :is(.zl-spalten, .zeitleiste:has(> li:nth-child(4):last-child)):not(.grafik-prozess .zeitleiste) > li:nth-child(2) .zl-marke { margin: 28px 28px 28px -12px; border-radius: 0 56px 56px 0; text-align: left; }
  :is(.zl-spalten, .zeitleiste:has(> li:nth-child(4):last-child)):not(.grafik-prozess .zeitleiste) > li:nth-child(2) .zl-text p.gedaempft { margin-left: 0; }
  :is(.zl-spalten, .zeitleiste:has(> li:nth-child(4):last-child)):not(.grafik-prozess .zeitleiste) > li:nth-child(2)::after { left: auto; right: -56px; }
  :is(.zl-spalten, .zeitleiste:has(> li:nth-child(4):last-child)):not(.grafik-prozess .zeitleiste) > li:nth-child(2)::before { left: auto; right: -63px; }
  :is(.zl-spalten, .zeitleiste:has(> li:nth-child(4):last-child)):not(.grafik-prozess .zeitleiste) > li:nth-child(3) { grid-column: 2; grid-row: 1; flex-direction: row-reverse; text-align: right; border-radius: 999px 0 0 999px; padding: 0 0 0 56px; transform: translateY(55%); }
  :is(.zl-spalten, .zeitleiste:has(> li:nth-child(4):last-child)):not(.grafik-prozess .zeitleiste) > li:nth-child(3) .zl-marke { margin: 28px -12px 28px 28px; border-radius: 56px 0 0 56px; text-align: right; }
  :is(.zl-spalten, .zeitleiste:has(> li:nth-child(4):last-child)):not(.grafik-prozess .zeitleiste) > li:nth-child(3) .zl-text p.gedaempft { margin-left: auto; }
  :is(.zl-spalten, .zeitleiste:has(> li:nth-child(4):last-child)):not(.grafik-prozess .zeitleiste) > li:nth-child(3)::after { right: auto; left: -56px; }
  :is(.zl-spalten, .zeitleiste:has(> li:nth-child(4):last-child)):not(.grafik-prozess .zeitleiste) > li:nth-child(3)::before { right: auto; left: -63px; }
  :is(.zl-spalten, .zeitleiste:has(> li:nth-child(4):last-child)):not(.grafik-prozess .zeitleiste) > li:nth-child(4) { grid-column: 2; grid-row: 2; }
}
/* Kostenrechner: Frage zu den Unterseiten oben, Eingabefelder darunter linksbündig (Anna 12.10.2026) */
/* ---------- 37. Blog-Ratgeber: Vorlage für ausführliche Beiträge (13.10.2026) ----------
   Bausteine: Reihe, Vorspann, „Kurz gesagt“, Inhaltsverzeichnis, Tabellen, Grafiken, Kennzahlen,
   „Aus der Praxis“, Vergleich, Checkliste, FAQ, Methodik, Autorin, Abschluss mit Buttons, Quellen. */
.artikel-ratgeber { max-width: 900px; }
.artikel-ratgeber .artikel-bild { max-height: none; aspect-ratio: 3 / 2; }
.artikel-lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; margin: 0 0 1.25rem; }
.artikel-ratgeber .artikel-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.artikel-ratgeber .artikel-text { font-size: 18px; line-height: 1.7; }
/* Blog: eine mittige Lesespalte für alle Textteile (höchstens etwa 80 Zeichen pro Zeile, Website-Check 25.10.2026; mittig: Anna 25.10.2026).
   Bilder, Grafiken und Tabellen bleiben breiter. */
.artikel { --lesespalte: 37rem; }
/* Profil (Anna 25.10.2026, SEO): H1 mit Aussage als Dachzeile, „Aaha!“ bleibt optisch groß wie bisher */
.profil-h1 { margin: 0 0 .6em; }
/* LinkedIn weit oben auf dem Profil (Anna 25.10.2026) */
.profil-linkedin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 1.5rem 0 0; }
.profil-linkedin .meta { margin: 0; }
.profil-linkedin svg { color: var(--farbe-dunkel); flex: none; }
.profil-linkedin { margin: 0 0 1.5rem; }
/* Alle Dachzeilen mit blauem Punkt (Anna 25.10.2026) – auch die Profil-H1, die selbst Dachzeile ist */
.profil-h1::before { content: ""; display: inline-block; width: .62em; height: .62em; margin: 0 .55em .08em 0; border-radius: 50%; background: var(--farbe-primaer); vertical-align: middle; }
.profil-aaha { font-family: var(--schrift-ueberschrift); font-weight: 400; text-transform: uppercase; letter-spacing: .9px; margin: 0 0 .15em; }
.artikel-weiter { margin-top: 2.5rem; } /* Link auf die passende Leistung am Ende jedes Artikels (Anna 25.10.2026) */
.artikel > :is(nav.meta, p.meta, h1, .artikel-lead, .artikel-meta, .artikel-nav),
.artikel .artikel-text > :is(p, ul, ol, h2, h3, h4, aside, nav, section, .artikel-faq) { max-width: var(--lesespalte); margin-left: auto; margin-right: auto; }
.artikel-ratgeber .artikel-text h2 { font-size: clamp(24px, 2.4vw, 30px); margin: 3.5rem 0 1rem; scroll-margin-top: 24px; }
.artikel-ratgeber .artikel-text h3 { margin: 2rem 0 .5rem; }
.artikel-ratgeber .artikel-text ol { padding-left: 1.4em; margin: 0 0 1.5rem; }
.kurz { padding: 32px 36px; margin: 0 0 2.5rem; }
.kurz .meta { margin: 0 0 12px; }
.kurz ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.kurz li { position: relative; padding-left: 28px; margin: 0; }
.kurz li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; background: var(--farbe-dunkel); }
.kurz li:first-child::before { background: var(--farbe-primaer); border-radius: 50%; }
.inhalt-verzeichnis { border-top: var(--rahmen) solid var(--farbe-dunkel); border-bottom: 1px solid var(--farbe-rahmen); padding: 20px 0 8px; margin: 0 0 2rem; }
.inhalt-verzeichnis .meta { margin: 0 0 10px; }
.inhalt-verzeichnis ol { counter-reset: iv; list-style: none; padding: 0 !important; columns: 2 280px; column-gap: 32px; }
.inhalt-verzeichnis li { counter-increment: iv; break-inside: avoid; margin: 0 0 10px; padding-left: 36px; position: relative; line-height: 1.4; }
.inhalt-verzeichnis li::before { content: counter(iv, decimal-leading-zero); position: absolute; left: 0; top: .1em; font-family: var(--schrift-meta); font-size: 13px; color: var(--farbe-gedaempft); }
.inhalt-verzeichnis a { text-decoration: none; font-weight: 600; }
.inhalt-verzeichnis a:hover { text-decoration: underline !important; }
.artikel-text .tabelle-scroll { margin: 1.5rem 0 2rem; }
.artikel-tabelle { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.artikel-tabelle caption { text-align: left; font-family: var(--schrift-meta); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--farbe-gedaempft); padding: 0 0 10px; }
.artikel-tabelle th, .artikel-tabelle td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--farbe-rahmen); }
.artikel-tabelle thead th { background: var(--farbe-dunkel); color: var(--farbe-weiss); font-weight: 600; }
.artikel-tabelle tbody th { font-weight: 600; }
.artikel-tabelle .zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.artikel-tabelle tfoot td { font-size: 14px; color: var(--farbe-gedaempft); border-bottom: 0; }
.grafik { margin: 2rem 0 2.5rem; }
.grafik svg { display: block; width: 100%; height: auto; background: var(--farbe-creme); border-radius: 28px; }
.grafik figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; }
.grafik figcaption strong { color: var(--farbe-dunkel); }
.praxis { border-left: 6px solid var(--farbe-primaer); padding: 4px 0 4px 24px; margin: 2rem 0; }
.praxis .meta { margin: 0 0 6px; }
.praxis p:last-child { margin-bottom: 0; }
.vergleich { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 1.5rem 0 2rem; }
.vergleich > div { border: var(--rahmen) solid var(--farbe-dunkel); border-radius: 24px; padding: 24px 24px 12px; }
.vergleich > div:last-child { background: var(--farbe-dunkel); color: var(--farbe-weiss); }
.vergleich h3 { margin: 0 0 12px !important; display: flex; align-items: center; gap: 12px; }
.vergleich h3 svg { flex: none; }
.vergleich ul { padding-left: 1.1em; }
.vergleich > div:last-child a { color: var(--farbe-weiss); }
.checkliste { counter-reset: ck; list-style: none; padding: 0 !important; margin: 1.5rem 0 2rem !important; display: grid; gap: 14px; }
.checkliste li { counter-increment: ck; position: relative; padding: 2px 0 0 56px; margin: 0; min-height: 40px; }
.checkliste li::before { content: counter(ck); position: absolute; left: 0; top: 0; border-radius: 50%; font-family: var(--schrift-ueberschrift); display: grid; place-items: center; }
.artikel-faq { margin: 1rem 0 2rem; display: grid; gap: 12px; }
.artikel-faq .faq-eintrag summary { font-size: 1.05rem; padding: 20px 24px; }
.artikel-faq .faq-antwort { padding: 0 24px 20px; font-size: 17px; }
.reihe { border: 1px solid var(--farbe-rahmen); border-radius: 24px; padding: 24px; margin: 3rem 0 0; }
.reihe .meta { margin: 0 0 10px; }
.reihe ol { margin: 0 !important; }
.reihe li[aria-current] { font-weight: 700; }
.autorin { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 24px; align-items: start; border-top: var(--rahmen) solid var(--farbe-dunkel); padding-top: 28px; margin: 3.5rem 0 0; }
.autorin img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; }
.autorin .meta { margin: 0 0 4px; }
.autorin-name { font-weight: 700; font-size: 1.15rem; margin: 0 0 6px; }
.autorin p { margin: 0 0 10px; font-size: 16px; line-height: 1.55; }
.artikel-schluss { padding: 36px; margin: 3rem 0 0; }
.artikel-schluss h2 { margin: 0 0 12px !important; }
.artikel-schluss p { margin: 0 0 20px; }
.artikel-schluss .knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.artikel-schluss .button { text-decoration: none; }
.quellen { font-size: 15px; line-height: 1.5; }
.quellen li { margin: 0 0 8px; }
/* Diagramme als HTML (passen sich dem Handy an, Text bleibt lesbar). Bauhaus: Balken mit Halbkreis-Ende. */
.diagramm { padding: 28px; }
.diagramm > .meta { margin: 0 0 18px; }
.balken-liste { list-style: none; padding: 0 !important; margin: 0 !important; display: grid; gap: 14px; }
.balken-liste li { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 4px 16px; align-items: center; margin: 0; }
.balken-name { font-size: 15px; line-height: 1.3; font-weight: 600; }
.balken-name small { display: block; font-size: 13px; font-weight: 400; color: var(--farbe-gedaempft); }
.balken-spur { display: flex; align-items: center; gap: 10px; min-width: 0; }
.balken { flex: none; width: calc(var(--w) * .74); min-width: 14px; background: var(--farbe-dunkel); border-radius: 0 999px 999px 0; }
.balken-blau { background: var(--farbe-primaer); }
.balken-wert { font-family: var(--schrift-meta); font-size: 14px; white-space: nowrap; }
.stapel { display: flex; gap: 3px; margin: 4px 0 18px; } /* Fuge: Blau grenzt nie direkt an Schwarz */
.stapel span { flex: var(--w) 1 0; min-width: 10px; }
.stapel span:last-child { border-radius: 0 999px 999px 0; }
.st-schwarz { background: var(--farbe-dunkel); }  .st-blau { background: var(--farbe-primaer); }
.st-streifen { background: repeating-linear-gradient(135deg, var(--farbe-dunkel) 0 4px, transparent 4px 10px); }
.legende { list-style: none; padding: 0 !important; margin: 0 !important; display: grid; gap: 8px; font-size: 15px; line-height: 1.4; }
.legende li { display: flex; gap: 10px; align-items: baseline; margin: 0; }
.legende i { flex: none; width: 14px; height: 14px; transform: translateY(2px); }
.legende b { font-family: var(--schrift-meta); font-weight: 500; font-size: 14px; margin-left: auto; padding-left: 12px; white-space: nowrap; }
.legende .legende-summe { border-top: 1px solid rgba(14, 16, 17, .2); padding-top: 8px; font-weight: 700; }
.dauer-zeilen { list-style: none; padding: 0 !important; margin: 0 !important; display: grid; gap: 16px; }
.dauer-zeilen li { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 4px 16px; align-items: center; margin: 0; }
.dauer-spur { position: relative; background: repeating-linear-gradient(90deg, rgba(14, 16, 17, .14) 0 1px, transparent 1px calc(100% / 6)); }
.dauer-spur span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 999px 999px 0; }
.dauer-kern { width: var(--kern); background: var(--farbe-dunkel); }
.dauer-kern:not(:last-child) { border-radius: 0; }
.dauer-spanne, .dauer-gross { left: calc(var(--von) + 3px) !important; width: calc(var(--bis) - var(--von) - 3px); }
.dauer-spanne { background: var(--farbe-primaer); }
.dauer-spanne:not(:last-child) { border-radius: 0; }
.dauer-gross { background: repeating-linear-gradient(135deg, var(--farbe-dunkel) 0 4px, transparent 4px 10px); }
.dauer-achse { display: flex; justify-content: space-between; margin: 8px 0 0 calc(220px + 16px); font-family: var(--schrift-meta); font-size: 12px; color: var(--farbe-gedaempft); }
.freigabe { display: inline-flex; align-items: center; gap: 8px; font-family: var(--schrift-meta); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.freigabe::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--farbe-primaer); flex: none; }
.grafik-bild img { width: 100%; height: auto; border-radius: 20px; border: 1px solid var(--farbe-rahmen); }
@media (max-width: 767.98px) {
  .artikel-ratgeber .artikel-text { font-size: 17px; }
  .kurz { padding: 24px 20px; }
  .vergleich { grid-template-columns: minmax(0, 1fr); }
  .autorin { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; }
  .autorin img { width: 72px; height: 72px; }
  .artikel-schluss { padding: 28px 20px; }
  .grafik svg { border-radius: 16px; }
  .diagramm { padding: 20px 16px; }
  .balken-liste li, .dauer-zeilen li { grid-template-columns: minmax(0, 1fr); }
  .dauer-achse { margin-left: 0; }
  }

/* 37b. Feinschliff nach Annas Rückmeldung (13.10.2026): weniger Beige und Grau, feine Linien statt Flächen */
.artikel-ratgeber .artikel-bild { border: 1.5px solid var(--farbe-grau-hell); border-radius: 20px; }
.kurz { background: var(--farbe-weiss); border: 1.5px solid var(--farbe-dunkel); border-radius: 20px; }
.diagramm { background: var(--farbe-weiss); border: 1.5px solid var(--farbe-dunkel); border-radius: 20px; }
.balken { height: 12px; }
.stapel { height: 18px; }
.dauer-spur { height: 12px; }
.praxis { border-left-width: 3px; }
.vergleich > div { border-width: 1.5px; }
.checkliste li::before { background: transparent; color: var(--farbe-dunkel); border: 1.5px solid var(--farbe-dunkel); box-sizing: border-box; width: 36px; height: 36px; font-size: 18px; }
.checkliste li:first-child::before { background: var(--farbe-primaer); border-color: var(--farbe-primaer); color: var(--farbe-weiss); } /* Weiß auf var(--farbe-primaer): 5,4 : 1 */
.checkliste li { padding-left: 52px; }
.artikel-schluss { background: var(--farbe-weiss); border: 1.5px solid var(--farbe-dunkel); border-radius: 20px; }
.grafik figcaption { color: rgba(14, 16, 17, .7); }

/* 37c. Abstände im Artikel (Anna, 13.10.2026): Überschriften stehen näher am folgenden Text als am vorherigen; Tabellen, Grafiken und Kästen bekommen Luft */
.artikel-text h2, .artikel-ratgeber .artikel-text h2 { margin: clamp(3.5rem, 7vw, 5rem) 0 1rem; }
.artikel-text h3, .artikel-ratgeber .artikel-text h3 { margin: clamp(2.5rem, 5vw, 3.25rem) 0 .75rem; }
.artikel-text .tabelle-scroll, .artikel-text .grafik, .artikel-text .grafik-bild, .artikel-text .praxis, .artikel-text .checkliste, .artikel-text .vergleich, .artikel-text .ablauf, .artikel-text .artikel-bild { margin-top: clamp(2rem, 4vw, 2.75rem); margin-bottom: clamp(2.25rem, 4.5vw, 3rem); }
.artikel-text .artikel-tabelle caption { padding-bottom: 14px; }
.artikel-text h2 + .tabelle-scroll, .artikel-text h3 + .tabelle-scroll, .artikel-text h2 + .grafik, .artikel-text h3 + .grafik { margin-top: 1.25rem; }
/* Kapiteltrenner vor jedem Hauptabschnitt (Anna, 13.10.2026): großer Abstand, dann eine feine Linie über der Überschrift */
.artikel-text > h2, .artikel-ratgeber .artikel-text > h2 { margin-top: clamp(4.5rem, 9vw, 6.5rem); padding-top: clamp(1.75rem, 3vw, 2.25rem); border-top: 1.5px solid var(--farbe-dunkel); }
.artikel-text > .inhalt-verzeichnis + h2 { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
/* Artikel: Prozess als dieselbe Zeitleiste wie auf der Startseite (Anna 13.10.2026), in der schmalen Spalte immer einspaltig */
.grafik-prozess > .meta { margin: 0 0 4px; }
.grafik-prozess .zeitleiste { grid-template-columns: 1fr; grid-auto-rows: auto; row-gap: 20px; margin: 20px 0 0; padding-left: 28px; padding-bottom: 0; }
.grafik-prozess .zeitleiste::before { left: 6px; }
.grafik-prozess .zeitleiste li, .grafik-prozess .zeitleiste li:nth-child(even) { grid-column: 1; transform: none; flex-direction: row; text-align: left; border-radius: 0 40px 40px 0; padding: 0 32px 0 0; min-height: 0; margin: 0; }
.grafik-prozess .zeitleiste li .zl-marke, .grafik-prozess .zeitleiste li:nth-child(even) .zl-marke { margin: 20px 22px 20px 0; width: 112px; border-radius: 0 40px 40px 0; text-align: left; }
.grafik-prozess .zeitleiste li::after, .grafik-prozess .zeitleiste li:nth-child(even)::after { left: -22px; right: auto; width: 22px; }
.grafik-prozess .zeitleiste li::before, .grafik-prozess .zeitleiste li:nth-child(even)::before { left: -29px; right: auto; }
.grafik-prozess .zeitleiste li:nth-child(even) .zl-text p.gedaempft { margin-left: 0; }
.grafik-prozess .zl-text { padding: 20px 0; }
.grafik-prozess .zl-text h3 { margin: 0 0 6px; font-size: 1.35rem; }
.grafik-prozess .zl-text p.gedaempft { max-width: none; font-size: 16px; line-height: 1.5; }
.grafik-prozess .zl-text .freigabe { margin: 10px 0 0; }
.grafik-prozess figcaption { margin-top: 20px; }
@media (max-width: 600px) {
  .grafik-prozess .zeitleiste { padding-left: 22px; }
  .grafik-prozess .zeitleiste::before { left: 4px; }
  .grafik-prozess .zeitleiste li::after, .grafik-prozess .zeitleiste li:nth-child(even)::after { left: -18px; width: 18px; }
  .grafik-prozess .zeitleiste li::before, .grafik-prozess .zeitleiste li:nth-child(even)::before { left: -25px; }
  .grafik-prozess .zeitleiste li .zl-marke, .grafik-prozess .zeitleiste li:nth-child(even) .zl-marke { width: 80px; margin-right: 16px; padding: 12px; }
  .grafik-prozess .zeitleiste li, .grafik-prozess .zeitleiste li:nth-child(even) { padding-right: 20px; }
  .grafik-prozess .zl-marke b { font-size: 1.6rem; }
}
.grafik-prozess .zeitleiste:has(li:nth-child(even):last-child) { padding-bottom: 0; }
/* Gruppen im Artikel (Nähe-Prinzip, proximity): Einleitungssatz eng an die folgende Grafik, Abstand zwischen Grafik und nächstem Absatz bzw. nächster Grafik größer */
.artikel-text p + .grafik-prozess { margin-top: 1.25rem; }
.artikel-text .grafik + p, .artikel-text .grafik + .grafik { margin-top: clamp(3.5rem, 7vw, 4.5rem); }
/* stärker als .artikel-ratgeber .artikel-text ol, damit Linie und Punkte genau übereinander sitzen */
.artikel-ratgeber .artikel-text .grafik-prozess .zeitleiste { padding-left: 28px; margin: 20px 0 0; }
@media (max-width: 600px) { .artikel-ratgeber .artikel-text .grafik-prozess .zeitleiste { padding-left: 22px; } }
/* Kontrast (Anna 13.10.2026): „Schritt“/„seit“ voll deckend, blaue Marken im Button-Blau – Weiß darauf 5,4 : 1 statt 4,5 : 1 */
.zl-marke small { opacity: 1; }
/* Ökosystem-Grafik: die Zoom-Animation (Start bei 122 %) darf die Seite nicht seitlich verbreitern (Handy) */
.oeko-abschnitt { overflow-x: clip; }
/* Schmale Handys (bis 400 px): nichts darf die Seite seitlich verbreitern (Prüfung 13.10.2026) */
@media (max-width: 900px) {
  .zeitleiste { grid-template-columns: minmax(0, 1fr); }
  .zl-text { min-width: 0; hyphens: auto; overflow-wrap: break-word; }
  .lsx-karten-2, .lsx-karten-3, .lsx-karte { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .lsx-karte-name { font-size: 1.5rem; }
}
@media (max-width: 400px) {
  h1 { hyphens: auto; overflow-wrap: break-word; }
  .bauhaus-raster { --u: 54px; }
  .zeitleiste li .zl-marke, .zeitleiste li:nth-child(even) .zl-marke { width: 80px; margin-right: 14px; padding: 12px; }
  .zl-marke b { font-size: 1.6rem; }
}
/* ---------- 45. Blog-Übersicht und Vorschaukarten (Anna 13.10.2026) ----------
   Neuester Beitrag groß, Chip-Leiste mit Themen und Anzahl, Themen mit Überschrift und Linie.
   Karten: feine Linie, ganze Karte anklickbar (Link auf dem Titel spannt sich über die Karte), Lesezeit, Teaser auf 3 Zeilen. */
.blog-karte { position: relative; border: 1px solid var(--farbe-rahmen); border-radius: 24px; overflow: hidden; box-shadow: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.blog-karte:hover { border-color: var(--farbe-dunkel); box-shadow: 0 18px 40px rgba(14, 16, 17, .08); }
.blog-karte:has(h2 a:focus-visible, h3 a:focus-visible) { outline: 3px solid var(--farbe-primaer); outline-offset: 3px; }
@supports selector(:has(a)) { .blog-karte h2 a:focus-visible, .blog-karte h3 a:focus-visible { outline: none; } }
.blog-karte h2 a::after, .blog-karte h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.blog-karte h2 a:hover, .blog-karte h3 a:hover { opacity: 1; }
.blog-karte:hover h2 a, .blog-karte:hover h3 a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.blog-karte-bild { aspect-ratio: 3 / 2; overflow: hidden; background: var(--farbe-creme); border-bottom: 1px solid var(--farbe-rahmen); }
.blog-karte-bild img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.blog-karte:hover .blog-karte-bild img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .blog-karte, .blog-karte-bild img { transition: none; } .blog-karte:hover .blog-karte-bild img { transform: none; } }
.blog-karte-text { padding: 22px 24px 24px; gap: 0; }
.blog-karte h3, .blog-karte h2 { font-family: var(--schrift-text); font-weight: 600; text-transform: none; letter-spacing: normal; font-size: 1.3rem; line-height: 1.25; margin: 0 0 8px; }
.blog-karte .artikel-meta { font-size: .85rem; margin: 0 0 12px; }
.blog-karte-teaser { margin: 0 0 20px; color: var(--farbe-gedaempft); font-size: .95rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-karte .weiterlesen { margin: auto 0 0; }
/* Neuester Beitrag: große erste Karte seines Themas über die ganze Breite, Bild links, Text rechts */
.blog-thema .blog-li-gross { grid-column: 1 / -1; }
/* Aktuelles: großer neuester Beitrag, darunter die zwei nächsten nebeneinander */
.blog-thema.blog-aktuell .blog-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024.02px) {
  .blog-aktuell .blog-karte:not(.blog-karte-gross) { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .blog-aktuell .blog-karte:not(.blog-karte-gross) .blog-karte-bild { aspect-ratio: auto; min-height: 100%; border-bottom: 0; border-right: 1px solid var(--farbe-rahmen); }
}
.blog-karte-gross .kategorie { color: var(--farbe-primaer); }
.blog-karte-gross { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.blog-karte-gross .blog-karte-bild { aspect-ratio: auto; min-height: 100%; border-bottom: 0; border-right: 1px solid var(--farbe-rahmen); }
.blog-karte-gross .blog-karte-text { padding: clamp(28px, 4vw, 56px); justify-content: center; }
.blog-karte-gross h3 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.15; margin-bottom: 14px; }
.blog-karte-gross .blog-karte-teaser { font-size: 1.05rem; -webkit-line-clamp: 4; }
.blog-karte-gross .weiterlesen { margin-top: 8px; }
/* Chip-Leiste: Anzahl je Thema */
.blog-leiste { margin-top: 0; }
.chip-zahl { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--farbe-hellgrau); font-size: 12px; font-weight: 600; }
.preis-leiste a.aktiv .chip-zahl { background: var(--farbe-weiss); color: var(--farbe-dunkel); }
/* Themenbereiche: Überschrift mit Linie */
.blog-thema { padding: clamp(48px, 6vw, 80px) var(--rand-seite) 0; }
.blog-thema:last-child { padding-bottom: 120px; }
.blog-thema-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; border-top: 1.5px solid var(--farbe-dunkel); padding-top: 18px; margin-bottom: 28px; }
.blog-thema-kopf h2 { font-size: clamp(2rem, 3.6vw, 3.25rem); margin: 0; }
.blog-thema-kopf .meta { margin: 0; white-space: nowrap; }
.blog-thema .blog-liste { max-width: none; margin: 0; padding: 0; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .blog-thema .blog-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .blog-karte-gross { grid-template-columns: minmax(0, 1fr); }
  .blog-karte-gross .blog-karte-bild { aspect-ratio: 3 / 2; border-right: 0; border-bottom: 1px solid var(--farbe-rahmen); }
  .blog-thema:last-child { padding-bottom: 64px; }
}
@media (max-width: 767.98px) {
  .blog-thema .blog-liste, .blog-thema.blog-aktuell .blog-liste { grid-template-columns: minmax(0, 1fr); }
}
/* Prüfung 13.10.2026: Punkte der Zeitleiste im selben Blau wie die Marken; schmale Handys: Überschriften der Zeitleiste kleiner,
   Bauhaus-Raster erst unter 370 px kleiner */
.zeitleiste li.zl-aktuell::before, .zeitleiste li:first-child::before, .zeitleiste li:last-child::before { background: var(--farbe-primaer); }
.profil-erfahrung .zeitleiste li:not(.zl-aktuell)::before { background: var(--farbe-dunkel); }
@media (max-width: 400px) { .zl-text h3 { font-size: 1.25rem; } }
/* Startseite nach dem Hero (Anna 13.10.2026): links Text, rechts kleine Ökosystem-Grafik (Link zur ganzen Grafik), darunter drei Karten */
.intro-neu { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px 80px; align-items: center; }
.intro-neu .intro-links { position: static; }
.intro-neu .intro-text .gr-h2 { margin: 12px 0 28px; }
.intro-neu .intro-gruss { margin: 32px 0 20px; }
.intro-neu .intro-mehr { margin: 0; }
.intro-oeko { position: relative; margin: 0; }
.om-flaeche { position: relative; aspect-ratio: 1 / .86; background: var(--farbe-hellgrau); border-radius: 20px;
  background-image: radial-gradient(circle, #dcdfdf 1.2px, transparent 1.4px); background-size: 14px 14px; }
.om-linien { position: absolute; inset: 0; width: 100%; height: 100%; }
.om-linien line { stroke: #8f9293; stroke-width: 1.5; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.om-seite { position: absolute; left: 50%; top: 50%; width: 42%; translate: -50% -50%; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; background: var(--farbe-weiss); border: 1.5px solid var(--farbe-dunkel); border-radius: 14px; box-shadow: 0 18px 40px rgba(14, 16, 17, .1); }
.om-browser { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.om-browser i { width: 7px; height: 7px; border-radius: 50%; background: var(--farbe-grau-hell); }
.om-browser b { margin-left: 6px; flex: 1; font: 400 11px var(--schrift-text); color: var(--farbe-gedaempft); background: var(--farbe-hellgrau); border-radius: 99px; padding: 2px 8px; white-space: nowrap; overflow: hidden; }
.om-titel { font-family: var(--schrift-ueberschrift); text-transform: uppercase; font-size: clamp(20px, 2.3vw, 34px); line-height: 1; text-align: center; margin: 6px 0; }
.om-balken { height: 7px; border-radius: 4px; background: #e3e5e5; }
.om-kurz { width: 62%; }
.om-knopf { align-self: flex-end; margin-top: 4px; font: 600 12px var(--schrift-text); color: var(--farbe-weiss); background: var(--farbe-primaer); border-radius: 99px; padding: 5px 12px; }
.om-chip { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; background: var(--farbe-weiss); border: 1px solid var(--farbe-rahmen); border-radius: 99px; box-shadow: 0 8px 20px rgba(14, 16, 17, .06); font-size: 14px; font-weight: 500; white-space: nowrap; }
.om-chip img { width: 30px; height: 30px; }
/* Kräftiger statt skizziert (Anna 09.11.2026: „zu zart, die Chips liest keiner“): Creme als Plakatgrund, durchgezogene schwarze Linien,
   große Chips mit schwarzem Rand; Grafik etwas kleiner */
.intro-neu .intro-oeko { width: 100%; max-width: 600px; justify-self: end; }
.intro-neu .om-flaeche { background: var(--farbe-creme); background-image: none; }
.intro-neu .om-linien line { stroke: var(--farbe-dunkel); stroke-width: 1.5; stroke-dasharray: none; }
.intro-neu .om-seite { border-width: 2px; box-shadow: 0 14px 0 -4px rgba(14, 16, 17, .08); }
.intro-neu .om-balken { background: var(--farbe-grau-hell); }
.intro-neu .om-chip { gap: 8px; padding: 6px 16px 6px 8px; border: 1.5px solid var(--farbe-dunkel); box-shadow: none; font-size: clamp(15px, 1.2vw, 17px); font-weight: 600; }
.intro-neu .om-chip img { width: 36px; height: 36px; }
/* Größere Chips rücken auf ihrer Linie etwas zur Mitte, damit sie in der Fläche bleiben */
.intro-neu .om-chip { left: calc(50% + (var(--x) - 50%) * .8); top: calc(50% + (var(--y) - 50%) * .84); }
.intro-neu .om-chip { width: max-content; }
.intro-neu .om-linien { scale: .8 .84; } /* Linien gleich stark gekürzt: sie enden an den Chips */
.intro-oeko figcaption { margin-top: 18px; }
/* ganze Grafik klickbar, Fokusrahmen am Link */
.om-link::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }
.intro-oeko .om-seite, .intro-oeko .om-chip { transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.intro-oeko:hover .om-seite { transform: scale(1.03); }
.intro-oeko:hover .om-linien line { stroke: var(--farbe-primaer); }
.intro-karten { grid-column: 1 / -1; list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.intro-karte { display: flex; flex-direction: column; align-items: flex-start; padding: 28px; border: 1.5px solid var(--farbe-dunkel); border-radius: 20px; background: var(--farbe-weiss); }
.ik-icon { width: 44px; height: 44px; margin-bottom: 20px; }
.intro-karte h3 { font-size: clamp(19px, 1.4vw, 22px); line-height: 1.3; margin: 0 0 10px; }
.intro-karte p { margin: 0 0 20px; line-height: 1.55; }
.intro-karte .textlink { margin-top: auto; }
@media (max-width: 1024px) { .intro-karten { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .intro-neu { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .intro-karten { margin-top: 8px; gap: 16px; }
}
@media (max-width: 600px) {
  .om-flaeche { aspect-ratio: 1 / 1.1; }
  .om-seite { width: 50%; padding: 8px 10px 10px; gap: 6px; }
  .om-browser b { display: none; }
  .om-knopf { padding: 4px 9px; }
  .om-chip { flex-direction: column; gap: 0; padding: 2px 5px 3px; background: var(--farbe-hellgrau); border: 0; border-radius: 8px; box-shadow: none; font-size: 12px; }
  .intro-neu .om-chip { padding: 3px 7px 4px; background: var(--farbe-weiss); border: 1.5px solid var(--farbe-dunkel); font-size: 13px; }
  .intro-neu .om-chip img { width: 32px; height: 32px; }
  .om-chip img { width: 34px; height: 34px; }
  .intro-karte { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) { .intro-oeko .om-seite { transition: none; } .intro-oeko:hover .om-seite { transform: none; } }
@media (max-width: 600px) {
  .profil-tools .tools { gap: 14px 20px; }
  .profil-tools .tools img { height: 34px; } .profil-tools .tools .tool-klein { height: 22px; }
  .profil-tools .tools .tool-gross { height: 40px; } .profil-tools .tools .tool-mittel { height: 23px; }
}
/* Aktivstatus im Menü (Anna 13.10.2026, gesetzt von js/menue.js): feine Linie unter dem Punkt, in den Leistungen blauer Name */
.kopf-nav > ul > li > a[aria-current], .kopf-nav .mm-toggle.aktiv, .kopf-mobil nav > ul > li > a[aria-current], .kopf-mobil .mobil-unter > summary.aktiv,
.kopf-mobil .mobil-unterliste a[aria-current] { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 7px; }
.kopf-nav .mm-liste a[aria-current] .mm-name { color: var(--farbe-primaer); }
/* Brotkrumen (Anna 13.10.2026): die aktuelle Seite ist unterstrichen, der Weg zurück erst beim Darüberfahren */
.brotkrumen a, nav[aria-label="Brotkrumen"] a { text-decoration: none; }
.brotkrumen a:hover, .brotkrumen a:focus-visible, nav[aria-label="Brotkrumen"] a:hover, nav[aria-label="Brotkrumen"] a:focus-visible { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.brotkrumen [aria-current] { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; color: var(--farbe-dunkel); }
/* Hero: Leistungen als Kategorie-Leiste wie bei Dribbble (Anna 13.10.2026): Karte mit gestapelten Ebenen, darin Beispiel oder Kartenbild, Name darunter */
.hero-band { cursor: default; }
.kat { flex: none; width: 236px; display: flex; flex-direction: column; gap: 14px; color: inherit; text-decoration: none; isolation: isolate; }
.kat-stapel { position: relative; display: block; margin: 14px 10px 0 0; transition: translate .3s cubic-bezier(.2, .8, .2, 1); }
/* Ebenen dahinter wie bei Dribbble: nach oben rechts versetzt, links eingerückt, zart blau getönt (Blau ist der einzige Akzent) */
.kat-stapel::before, .kat-stapel::after { content: ""; position: absolute; border-radius: 8px; }
.kat-stapel::before { inset: -7px -5px 7px 14px; background: #eef2ff; border: 1.5px solid #dbe4ff; z-index: -1; }
.kat-stapel::after { inset: -14px -10px 14px 28px; background: #f6f8ff; border: 1.5px solid #e8edff; z-index: -2; }
.kat-bild { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: var(--farbe-hellgrau); border: 1px solid var(--farbe-rahmen); }
.kat-bild > img { width: 100%; height: 100%; object-fit: cover; }
.kat-name { font-weight: 600; font-size: 14px; line-height: 1.3; }
.kat:hover .kat-name, .kat:focus-visible .kat-name { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.kat:hover .kat-stapel, .kat:focus-visible .kat-stapel { translate: 0 -4px; }
.band-pause { position: absolute; right: var(--rand-seite); width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--farbe-dunkel); background: var(--farbe-weiss); cursor: pointer; display: grid; place-items: center; }
.band-pause::before { content: ""; width: 9px; height: 10px; border-left: 3px solid var(--farbe-dunkel); border-right: 3px solid var(--farbe-dunkel); box-sizing: border-box; }
.band-pause[aria-pressed="true"]::before { width: 0; height: 0; border: 0; border-left: 10px solid var(--farbe-dunkel); border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
@media (max-width: 900px) {
  .kat { width: 180px; gap: 12px; }
  .band-pause { right: var(--rand-seite-mobil); }
}
@media (prefers-reduced-motion: reduce) { .band-pause { display: none; } }
.kb-typo { display: grid; justify-items: start; align-content: center; gap: 2px; width: 100%; height: 100%; padding: 0 22px; background: var(--farbe-weiss); }
.kb-typo-aa { font-family: var(--schrift-ueberschrift); font-size: 64px; line-height: .95; }
.kb-typo-text { font-family: var(--schrift-text); font-weight: 600; font-size: 18px; }
.kb-typo-meta { font-family: var(--schrift-meta); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--farbe-gedaempft); }
@media (max-width: 900px) { .kb-typo-aa { font-size: 50px; } .kb-typo-text { font-size: 15px; } .kb-typo { padding: 0 16px; } }
.kat { text-align: left; }
.kb-raster { display: grid; grid-template-columns: 1fr 1fr .62fr; grid-template-rows: 1fr 1fr; gap: 5px; width: 100%; height: 100%; padding: 6px; background: var(--farbe-weiss); }
.kb-raster > img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.kb-r-farben { grid-column: 3; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 4px; }
.kb-r-farben i { flex: 1; display: flex; align-items: flex-end; padding: 4px 5px; border-radius: 3px; background: var(--f); border: 1px solid var(--farbe-rahmen); }
.kb-r-farben b { font: 500 7px var(--schrift-meta); color: var(--t, var(--farbe-weiss)); letter-spacing: .04em; }
/* Produktdesign wie bei Dribbble (Anna 13.10.2026): links die Website auf einer Fläche in Markenfarbe, rechts die Farben als gestapelte Chips mit Farbwert */
.kb-produkt { display: grid; grid-template-columns: 1fr 1fr; width: 100%; height: 100%; background: var(--farbe-weiss); }
.kb-p-buehne { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 20% 15%, #4a6a5c 0%, #2d3b42 55%, #1f2a2f 100%); }
.kb-p-seite { position: absolute; left: 14%; top: 20%; width: 120%; height: 64%; overflow: hidden; border-radius: 4px; background: var(--farbe-weiss); box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }
.kb-p-seite img { width: 100%; height: auto; display: block; }
.kb-p-farben { display: flex; flex-direction: column; justify-content: center; padding: 10px 12px; }
.kb-p-farben i { display: flex; align-items: flex-start; height: 30px; margin-top: -6px; padding: 4px 6px; border-radius: 5px; background: var(--f); color: var(--t); font: 500 6px/1 var(--schrift-meta); font-style: normal; letter-spacing: .04em; box-shadow: 0 -1px 0 rgba(255, 255, 255, .5), 0 -2px 6px rgba(14, 16, 17, .08); }
.kb-p-farben i:first-child { margin-top: 0; }
.kb-p-farben i:last-child { border: 1px solid var(--farbe-rahmen); }
/* Mobil wie bei Dribbble: dünner schwarzer Rahmen, heller Grund mit weicher Lichtkante, schwebende Bauhaus-Formen */
.kb-mobil { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 100%;
  background: linear-gradient(118deg, #e9eaea 0%, #f2f3f3 38%, #fbfbfb 46%, #eeefef 47%, #e6e7e7 100%); }
.kb-phone { position: relative; z-index: 1; height: 80%; aspect-ratio: 9 / 19.2; padding: 2.5px; border-radius: 15px; background: #111314; box-shadow: 0 0 0 .5px #3a3d3f, 0 12px 22px rgba(14, 16, 17, .18); }
.kb-phone::before { content: ""; position: absolute; z-index: 2; top: 6px; left: 50%; translate: -50% 0; width: 28%; height: 6px; border-radius: 4px; background: #111314; }
.kb-phone-screen { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 12.5px; background: var(--farbe-weiss); container-type: size; }
.kb-phone-screen img { display: block; width: 100%; height: auto; animation: website-scroll 60s linear infinite alternate; }
.kb-phone:last-child .kb-phone-screen img { animation-delay: -20s; }
/* eine große Form hinter den Handys (kleine Formen sind im kleinen Format kaum zu sehen); weiße Fuge statt Blau an Schwarz */
.kb-form-gross { position: absolute; z-index: 0; left: 50%; bottom: 0; width: 96%; aspect-ratio: 2 / 1; translate: -50% 0; border-radius: 999px 999px 0 0; background: var(--farbe-primaer); }
.kb-mobil .kb-phone { box-shadow: 0 0 0 2px var(--farbe-weiss), 0 12px 22px rgba(14, 16, 17, .2); }
@media (prefers-reduced-motion: reduce) { .kb-phone-screen img { animation: none; } }
/* Mehr Weißraum um die Leiste (Anna 13.10.2026) */
.hero-band { padding: 56px 0 64px; }
@media (max-width: 900px) { .hero-band { padding: 40px 0 52px; } }
.band-pause { bottom: 12px; }
/* H1 auf breiten Bildschirmen in einer Zeile */
@media (min-width: 900.02px) {
  .hero-titel { font-size: clamp(52px, 6.6vw, 112px); white-space: nowrap; }
  .hero-titel > span { display: inline-block; }
}
/* „Für wen“ auf Creme statt Blau (Anna 13.10.2026) */
.dk { background: var(--farbe-creme); color: var(--farbe-dunkel); }
.dk > .meta { color: var(--farbe-gedaempft); }
.dk > .meta::before { background: var(--farbe-primaer) !important; }
.dk-umschalter { background: rgba(14, 16, 17, .06); }
.dk-umschalter button { color: var(--farbe-dunkel); }
.dk-umschalter button[aria-selected="true"] { background: var(--farbe-weiss); color: var(--farbe-dunkel); box-shadow: 0 2px 8px rgba(14, 16, 17, .08); }
.dk-umschalter button:focus-visible { outline-color: var(--farbe-dunkel); }
.dk-titel { color: var(--farbe-dunkel); }
/* Foto-Mockups in den Kategorie-Karten: Bühne in Fotogröße (2000 × 1500), auf Kartengröße skaliert; Inhalt per matrix3d im Bildschirm */
.kb-szene { position: absolute; left: 0; top: 0; width: calc(var(--sb) * 1px); height: calc(var(--sh) * 1px); transform-origin: 0 0; scale: calc(224 / var(--sb)); }
.kb-szene-bild { display: block; width: 100%; height: 100%; }
.kb-szene-schirm { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; transform-origin: 0 0; overflow: hidden; background: var(--farbe-weiss); container-type: size; }
.kb-szene-schirm img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .kb-szene { scale: calc(168 / var(--sb)); } }
/* Markenbildung in der Leiste: STUDIO AAH! selbst (Logo, Markenfarben, Kreis auf Blau, „AAH!“ auf Schwarz) */
.kb-eigen .kb-e-logo { grid-column: 1 / 3; display: grid; place-items: center; background: var(--farbe-creme); border-radius: 3px; }
.kb-eigen .kb-e-logo img { width: 70%; height: auto; }
.kb-e-blau { display: grid; place-items: center; background: var(--farbe-primaer); border-radius: 3px; }
.kb-e-blau i { width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--farbe-weiss); }
.kb-e-schwarz { display: grid; place-items: center; background: var(--farbe-dunkel); color: var(--farbe-weiss); border-radius: 3px; font: 400 26px/1 var(--schrift-ueberschrift); letter-spacing: .02em; }
@media (max-width: 900px) { .kb-e-schwarz { font-size: 20px; } }
/* Animation in der Leiste: Erklärfilm füllt den Laptop-Bildschirm */
.kb-szene-schirm picture, .kb-anim { display: block; width: 100%; height: 100%; }
.kb-anim { object-fit: contain; background: var(--farbe-weiss); }
/* Leistungskarten (Anna 13.10.2026): eigene Bildwelt statt Kundenfotos – nur das Clay-Icon auf ruhiger Fläche (Formen raus, Anna 13.10.2026).
   Die Icons haben weißen Grund: multiply lässt ihn in der Fläche verschwinden. */
.ls-bild { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 20px; background: var(--farbe-hellgrau); isolation: isolate; }
.ls-karte .ls-bild img { width: 50%; height: auto; aspect-ratio: 1; border-radius: 0; object-fit: contain; mix-blend-mode: multiply; transition: translate .4s cubic-bezier(.2, .8, .2, 1); }
.ls-karte:hover .ls-bild img { transform: none; translate: 0 -8px; }
@media (prefers-reduced-motion: reduce) { .ls-karte .ls-bild img { transition: none; } .ls-karte:hover .ls-bild img { translate: none; } }

/* ===== Projekte wie bei Behance (Anna 14.10.2026) =====
   Titelbild (Cover): Fläche in der Hausfarbe des Kunden, Kopfzeile „Kunde · Leistung · Jahr“ (redaktioneller Rahmen),
   Geräte gerade gestellt, bei allen Projekten gleiche Machart. Beim Überfahren scrollt der Bildschirm langsam nach unten. */
.pc { --pc-farbe: var(--farbe-creme); position: relative; display: block; aspect-ratio: 16 / 9; background: var(--pc-farbe); border-radius: 28px; overflow: hidden; color: var(--farbe-weiss); isolation: isolate; }
.pc-hell { color: var(--farbe-dunkel); }
.pc-zeile { position: absolute; top: 5.5%; left: 5%; right: 5%; z-index: 3; margin: 0; display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid currentColor; font-family: var(--schrift-meta); font-size: 11px; letter-spacing: .3px; text-transform: uppercase; } /* Bildbestandteil (aria-hidden, Name steht lesbar darunter): 11 px statt 9 px, engere Laufweite, damit Namen nicht abgeschnitten werden (Website-Check 18.10.2026) */
.pc-zeile span:last-child { text-align: right; }
.pc-desktop { position: absolute; left: 12%; right: 12%; top: 19%; bottom: -8%; display: flex; flex-direction: column; background: var(--farbe-weiss); border-radius: 12px 12px 0 0; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.pc-desktop::before { content: ""; flex: 0 0 22px; border-bottom: 1px solid var(--farbe-rahmen); background: radial-gradient(circle at 14px 11px, #dcdcdc 3.5px, transparent 4.5px), radial-gradient(circle at 28px 11px, #dcdcdc 3.5px, transparent 4.5px), radial-gradient(circle at 42px 11px, #dcdcdc 3.5px, transparent 4.5px), #fafafa; }
.pc-desktop img, .pc-handy img { flex: 1; min-height: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; transition: object-position 9s ease-in-out; }
.pc-mit-handy .pc-desktop, .mit-handy .pc-desktop { left: 8%; right: 24%; }
.pc-handy { position: absolute; right: 8%; top: 27%; z-index: 2; width: 19%; aspect-ratio: 9 / 19; display: flex; border: clamp(4px, .5vw, 7px) solid var(--farbe-dunkel); border-radius: clamp(16px, 2.2vw, 30px); overflow: hidden; background: var(--farbe-weiss); box-shadow: 0 24px 60px rgba(0, 0, 0, .4); }
.pc-bild { position: absolute; left: 12%; right: 12%; top: 19%; bottom: 7%; display: grid; place-items: center; }
.pc-bild img { max-width: 100%; max-height: 100%; display: block; border-radius: 6px; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
.pk:hover .pc-desktop img, .pk:hover .pc-handy img, .cs-flaeche:hover img { object-position: 50% 100%; }
@media (prefers-reduced-motion: reduce) { .pc-desktop img, .pc-handy img { transition: none; } }

/* Projektkarte: Titelbild, darunter Name, ein Satz, Link */
.pk-bild { display: block; text-decoration: none; }
.pk-name { font-family: var(--schrift-ueberschrift); font-size: clamp(24px, 2.4vw, 36px); font-weight: 400; line-height: 1.1; letter-spacing: .9px; text-transform: uppercase; margin: 24px 0 8px; }
.pk-name a { color: inherit; text-decoration: none; }
.pk-name a:hover, .pk-name a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.pk-satz { color: var(--farbe-gedaempft); margin: 0 0 12px; max-width: 60ch; }
.pk-link { margin: 0; }
.ks-spur > .pk { flex: 0 0 min(1180px, 92%); scroll-snap-align: start; }
.ref-alle { padding: 0 var(--rand-seite) 64px; margin: -24px 0 0; }
.stimmen-quelle { padding: 0 var(--rand-seite); margin: 24px 0 64px; }
.lsx-stimmen .stimmen-quelle, .cs-stimme .stimmen-quelle { padding: 0; margin-bottom: 0; }

/* Übersicht /referenzen/: Raster mit zwei Spalten, Titelbilder 4 : 3 */
.ref-uebersicht { padding: 0 var(--rand-seite) 120px; }
.ref-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 32px; }
.ref-raster .pc { aspect-ratio: 4 / 3; }


@media (max-width: 900px) {
  .pc { border-radius: 20px; }
  .ref-alle { padding: 0 var(--rand-seite-mobil) 48px; }
  .stimmen-quelle { padding: 0 var(--rand-seite-mobil); }
  .ref-uebersicht { padding: 0 var(--rand-seite-mobil) 64px; }
  .ref-raster { grid-template-columns: 1fr; gap: 48px; }
  }

@keyframes cs-wand { from { transform: rotate(-16deg) translateY(6%); } }


.pc-zeile span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { .pc-zeile { grid-template-columns: 1fr auto; } .pc-zeile span:nth-child(2) { display: none; } }






@media (max-width: 600px) {
  /* Sitemap auf dem Handy als einspaltiger Baum */
  }




/* Schieberegler Wireframe ↔ fertig */
@property --pos { syntax: "<percentage>"; inherits: true; initial-value: 50%; }






/* Projektseite, Runde 3 (Anna 14.10.2026): Zahlenleiste, Designsystem, Vorher/Nachher-Film, Karriere-Schwerpunkt */
@font-face { font-family: "Montserrat Goldhammer"; src: url("../schriften/montserrat-latin-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Montserrat Goldhammer"; src: url("../schriften/montserrat-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Raleway Kerstin"; src: url("../schriften/raleway-latin-800.woff2") format("woff2"); font-weight: 600 900; font-display: swap; }
@font-face { font-family: "Inter Bauer"; src: url("../schriften/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

 


@keyframes kr-scrollen { 0%, 6% { transform: translateY(0); } 94%, 100% { transform: translateY(calc(-100% + 100cqh)); } }








@keyframes hd-scrollen { from { transform: translateY(0); } to { transform: translateY(calc(-100% + 100cqh)); } }
@keyframes hd-cursor { 50% { opacity: 0; } }










/* Projektseite, Runde 5 (Anna 14.10.2026) */


















#fm-mobil ~ * , .fm-mit-text .fm-story .fm[style*="--sb:700"] { max-width: 520px; margin-inline: auto; }










/* Projektseite, Runde 7 (Anna 14.10.2026) */



















@keyframes zg-zeichnen { to { stroke-dashoffset: 0; } }



@keyframes mf-zeiger {
  0% { left: 50%; top: 60%; } 10%, 40% { left: 32.2%; top: 5.2%; animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  52%, 82% { left: 65.9%; top: 5.2%; } 100% { left: 50%; top: 60%; }
}
@keyframes mf-auf-0 {
  0%, 12% { clip-path: inset(0 0 calc(100% - var(--kopf)) 0); animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  18%, 38% { clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(.6, 0, .8, .2); }
  44%, 100% { clip-path: inset(0 0 calc(100% - var(--kopf)) 0); }
}
@keyframes mf-auf-1 {
  0%, 54% { clip-path: inset(0 0 calc(100% - var(--kopf)) 0); animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  60%, 80% { clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(.6, 0, .8, .2); }
  86%, 100% { clip-path: inset(0 0 calc(100% - var(--kopf)) 0); }
}
@keyframes mf-dunkel { 0%, 12% { opacity: 0; } 18%, 38% { opacity: 1; } 44%, 54% { opacity: 0; } 60%, 80% { opacity: 1; } 86%, 100% { opacity: 0; } }












@keyframes fk-scrollen { 0%, 12% { transform: translateY(0); } 88%, 100% { transform: translateY(min(0px, calc(100cqh - 100%))); } }




 /* Trennstellen per &shy; im Generator (TRENNEN), automatische Trennung zerlegte „Reb-randing“ */







@media (max-width: 600px) {
   /* Schnitt in der Lücke nach „Referenzen“, vor dem Foto */
  }


 
 /* Zeile = Höhe der Wand; laufende Spalten ragen darüber hinaus, die Bühne schneidet ab */







@keyframes hw-lauf { to { transform: translateY(calc(-100% / 3)); } }
 







 /* Text mittig (Anna 14.10.2026) */






/* ===== Variante B, Runde 15.10.2026 (Annas Rückmeldung mit 7 Bildern) ===== */




/* Standrechner passt am Laptop ganz in den Bildschirm (Anna 15.10.2026): Breite aus der Fensterhöhe, Fuß und Rand flacher */









/* ===== Bauer, neuer Aufbau nach der Recherche (15.10.2026) ===== */







                               
                                      /* war fast unsichtbar auf Blau */
          /* nichts läuft, also kein „anhalten“ */

  /* „Ausgangslage ↓“ passt nicht in zwei Spalten */
/* Funnel-Seiten größer: am Desktop drei Spalten statt aller Stationen in einer Reihe */


















/* am Handy nur die Handy-Fassung (Anna 15.10.2026: sonst „zweimal dasselbe“) */












/* Vorher-Film im echten Monitor-Foto (Anna 15.10.2026: nur echte Mockups; Bauer: heller Monitor auf Holztisch, Sora Sagano/Unsplash) */















/* Für wen – Angebot im Mittelpunkt, eigenes Bild je Zielgruppe, Referenz nur als kleiner Link (Anna 16.10.2026) */
.dk-angebot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--farbe-weiss); border-radius: 28px; overflow: hidden; text-align: left; box-shadow: 0 12px 30px rgba(14, 16, 17, .07); max-width: 1180px; margin: 0 auto; }
.dk-angebot-text { display: flex; flex-direction: column; gap: 10px; padding: 40px 40px 36px; }
.dk-angebot-text .meta { margin: 0; }
.dk-angebot .dk-karte-titel { margin: 0; font-size: clamp(1.5rem, 2.2vw, 2rem); }
.dk-angebot .dk-karte-text { margin: 0; }
.dk-angebot .dk-punkte { margin: 6px 0 8px; }
.dk-angebot .dk-preis { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--farbe-rahmen); font-size: 1.6rem; }
.dk-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 8px 0 0; }
.dk-angebot-bild { position: relative; min-height: 360px; background: var(--farbe-hellgrau); }
.dk-angebot-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; }
.dk-beleg { margin: 20px 0 0; font-size: .95rem; color: var(--farbe-gedaempft); }
.dk-beleg a { color: var(--farbe-dunkel); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .dk-angebot { grid-template-columns: 1fr; }
  .dk-angebot-bild { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
  .dk-angebot-text { padding: 24px 22px 26px; }
}
/* Illustrationen mit Abstand zum Kartenrand (Anna 16.10.2026); Foto (Vereine) bleibt randlos */
.dk-angebot-bild.dk-grafik { background: var(--farbe-weiss); padding: 32px; display: flex; align-items: center; justify-content: center; }
.dk-angebot-bild.dk-grafik img { position: static; width: 100%; height: auto; object-fit: contain; }
/* Umschalter am Handy: eine Zeile, mit dem Finger seitlich ziehen (Anna 16.10.2026) */
@media (max-width: 900px) {
  .dk-angebot-bild.dk-grafik { aspect-ratio: auto; padding: 20px 20px 4px; }
  .dk-umschalter { display: flex; flex-wrap: nowrap; justify-content: flex-start; max-width: 100%; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; }
  .dk-umschalter::-webkit-scrollbar { display: none; }
  .dk-umschalter button { flex: none; white-space: nowrap; scroll-snap-align: start; }
}
.dk-angebot .dk-karte-titel a { color: inherit; text-decoration: none; }
.dk-angebot .dk-karte-titel a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* ---------- Landingpage Website-Review und Danke-Seite (Anna 16.10.2026) ---------- */
.rv-kopf .gr-xxl { line-height: 1.15; hyphens: manual; }
.rv-intro { font-size: clamp(20px, 2vw, 28px); line-height: 1.35; max-width: 40ch; margin: 0 0 24px; }
.rv-knopf { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0 0 12px; }
.rv-abschnitt { padding: 64px var(--rand-seite) 0; }
.rv-abschnitt .preis-h2 { margin: 8px 0 16px; }
.rv-text { max-width: 62ch; font-size: 18px; margin: 0 0 24px; }
.rv-karten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rv-karte { background: var(--farbe-hellgrau); border-radius: 24px; padding: 24px; }
.rv-karte img { width: 72px; height: 72px; mix-blend-mode: multiply; margin: 0 0 8px; }
.rv-karte h3 { margin: 0 0 6px; font-size: 1.25rem; }
.rv-karte p { margin: 0; color: var(--farbe-gedaempft); }
.rv-bekommen .bedingungen { margin-top: 8px; }
.schluss-karte .rv-hell { color: var(--farbe-weiss); }
@media (max-width: 1024px) { .rv-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .rv-karten { grid-template-columns: minmax(0, 1fr); } .rv-abschnitt { padding-top: 48px; } }

/* 60. Blog „Was sollte eine Website 2027 können?“ (Anna 19.10.2026): Golden Circle, Zwischenüberschriften h4, breite Grafiken im Artikel */
.golden-circle { max-width: 520px; margin: clamp(2rem, 4vw, 2.75rem) auto clamp(2.25rem, 4.5vw, 3rem); }
.golden-circle svg { display: block; width: 100%; height: auto; overflow: visible; }
.golden-circle .gc-ring { transform-box: fill-box; transform-origin: center; }
.golden-circle .gc-ring--was { fill: var(--farbe-weiss); stroke: var(--farbe-dunkel); stroke-width: 2; }
.golden-circle .gc-ring--wie { fill: var(--farbe-creme); stroke: var(--farbe-dunkel); stroke-width: 2; }
.golden-circle .gc-ring--warum { fill: var(--farbe-dunkel); }
.golden-circle .gc-label { font-family: var(--schrift-ueberschrift); letter-spacing: .04em; text-anchor: middle; fill: var(--farbe-dunkel); }
.golden-circle .gc-sub { font-family: var(--schrift-text); font-size: 15px; text-anchor: middle; fill: var(--farbe-gedaempft); }
.golden-circle .gc-text--warum .gc-label { fill: var(--farbe-weiss); }
.golden-circle .gc-text--warum .gc-sub { fill: var(--farbe-gedaempft-invers); }
.golden-circle figcaption { margin-top: 16px; text-align: center; font-size: 15px; color: var(--farbe-gedaempft); }
/* Animation von innen nach außen: Warum, Wie, Was – einmal, 2,75 s. Die Klasse is-animated setzt erst js/menue.js, ohne JavaScript steht das fertige Bild. */
.golden-circle.is-animated .gc-ring, .golden-circle.is-animated .gc-text { opacity: 0; }
.golden-circle.is-animated.is-visible .gc-ring { animation: gc-grow .7s cubic-bezier(.2, .8, .2, 1) forwards; }
.golden-circle.is-animated.is-visible .gc-text { animation: gc-fade .5s ease-out forwards; }
.golden-circle.is-animated.is-visible .gc-text--warum { animation-delay: .45s; }
.golden-circle.is-animated.is-visible .gc-ring--wie { animation-delay: .9s; }
.golden-circle.is-animated.is-visible .gc-text--wie { animation-delay: 1.35s; }
.golden-circle.is-animated.is-visible .gc-ring--was { animation-delay: 1.8s; }
.golden-circle.is-animated.is-visible .gc-text--was { animation-delay: 2.25s; }
@keyframes gc-grow { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes gc-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .golden-circle.is-animated .gc-ring, .golden-circle.is-animated .gc-text { opacity: 1; animation: none !important; } }
.artikel-text h4 { font-size: 1.15rem; line-height: 1.35; margin: clamp(2.25rem, 4.5vw, 3rem) 0 .6rem; }
/* Grafiken der Leistungsseiten im Artikel (CI-Film, Ökosystem): so breit wie der Inhaltsbereich der Seite, mittig über der Textspalte */
.artikel-breit { --breit: min(var(--inhalt-breite), calc(100vw - 2 * var(--rand-seite))); width: var(--breit); margin: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(2.5rem, 5vw, 3.5rem) calc((100% - var(--breit)) / 2); overflow-x: clip; }
/* Zweispaltige Tabelle passt auch am Handy ohne seitliches Scrollen (Website-Check: Tabelle „Aufgaben (Gartner)“ lesbar) */
.artikel-tabelle-zwei { min-width: 0; }
.artikel-tabelle-zwei th, .artikel-tabelle-zwei td { width: 50%; }
/* bis 600 px: jede Zeile als Block (Aufgabe fett, darunter das Angebot); die ARIA-Rollen im HTML halten die Tabelle für Screenreader zusammen */
@media (max-width: 600px) {
  .artikel-tabelle-zwei, .artikel-tabelle-zwei tbody, .artikel-tabelle-zwei tr, .artikel-tabelle-zwei th, .artikel-tabelle-zwei td { display: block; width: auto; }
  .artikel-tabelle-zwei thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .artikel-tabelle-zwei tr { padding: 12px 0; border-bottom: 1px solid var(--farbe-rahmen); }
  .artikel-tabelle-zwei tr:first-child { border-top: 1.5px solid var(--farbe-dunkel); }
  .artikel-tabelle-zwei th, .artikel-tabelle-zwei td { padding: 0; border: 0; }
  .artikel-tabelle-zwei td { margin-top: 4px; }
}
@media (max-width: 600px) { .golden-circle .gc-sub { font-size: 22px; } } /* skaliert mit der Grafik: bei 320 px Breite sonst unter 8 px */
.kein-trennen { hyphens: none; -webkit-hyphens: none; } /* „Website“ im Titel nicht als „Web-site“ trennen */
/* Kennzahlen als Kacheln im Artikel (Blog 2027, Teil 3): große Zahl in Anton, Aussage, Quelle; eine Kachel blau hervorgehoben */
.zahlen-grafik > .meta { margin: 0 0 14px; }
.zahlen-kacheln { list-style: none; padding: 0 !important; margin: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px; }
.zahlen-kacheln li { margin: 0; display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1.5px solid var(--farbe-dunkel); border-radius: 20px; background: var(--farbe-weiss); }
.zahlen-kacheln b { font-family: var(--schrift-ueberschrift); font-weight: 400; font-size: clamp(2.4rem, 5vw, 3rem); line-height: 1.15; }
.zahlen-kacheln span { font-size: 15px; line-height: 1.45; }
.zahlen-kacheln small { margin-top: auto; font-family: var(--schrift-meta); font-size: 12px; letter-spacing: .04em; color: var(--farbe-gedaempft); }
.zahlen-kacheln .zahl-blau { background: var(--farbe-primaer); border-color: var(--farbe-primaer); color: var(--farbe-weiss); }
.zahlen-kacheln .zahl-blau small { color: var(--farbe-weiss); } /* Weiß auf var(--farbe-primaer): 5,4 : 1 */
.zahlen-grafik figcaption { margin-top: 14px; }
/* Hervorgehobene Checkliste „Wie Sie sich vorbereiten“ */
.vorbereiten { margin: clamp(2.5rem, 5vw, 3.5rem) 0; padding: clamp(24px, 4vw, 40px); background: var(--farbe-creme); border-radius: 24px; }
.vorbereiten > .meta { margin: 0 0 6px; }
.artikel-text .vorbereiten h3 { margin-top: 0; }
.vorbereiten .checkliste { margin-bottom: 0 !important; }
/* am Handy: Zahl links, Aussage und Quelle rechts – kompakt, ohne enge Spalten */
@media (max-width: 600px) { .zahlen-kacheln { gap: 10px; } .zahlen-kacheln li { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 16px; border-radius: 16px; } .zahlen-kacheln b { grid-row: span 2; font-size: 2rem; } .zahlen-kacheln small { margin-top: 0; } }
/* Lange Wörter (z. B. Barrierefreiheitsstärkungsgesetz) sprengen bei 320 px sonst Checkliste und FAQ: Spalten dürfen schrumpfen, Wörter umbrechen */
.checkliste, .artikel-faq { grid-template-columns: minmax(0, 1fr); }
.artikel-text .checkliste li, .faq-eintrag summary, .faq-antwort { overflow-wrap: break-word; }
@media (max-width: 600px) { .vorbereiten { padding: 20px 16px; border-radius: 18px; } .vorbereiten .checkliste li { padding-left: 42px; } .vorbereiten .checkliste li::before { width: 30px; height: 30px; font-size: 15px; } }
.zahlen-kacheln span, .zahlen-kacheln small { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 600px) { .zahlen-kacheln li { grid-template-columns: 4.4rem minmax(0, 1fr); gap: 4px 12px; } .zahlen-kacheln b { font-size: 1.75rem; } }
.faq-eintrag summary { overflow-wrap: anywhere; }
/* Fußnoten im Artikel (Belege am Ende, Anna 19.10.2026): kleine hochgestellte Ziffer, springt zur Quelle */
sup.fn { font-size: .62em; line-height: 0; vertical-align: super; margin-left: 1px; }
.artikel-text sup.fn a { font-family: var(--schrift-meta); text-decoration: none; color: var(--farbe-primaer); padding: 0 1px; }
.artikel-text sup.fn a:hover, .artikel-text sup.fn a:focus-visible { text-decoration: underline; }
ol.quellen { padding-left: 1.8em !important; }
ol.quellen li { scroll-margin-top: calc(var(--kopf-hoehe) + 16px); }
ol.quellen li:target { background: var(--farbe-creme); border-radius: 6px; }

/* ---------- Landingpage Website-Check (/website-check/, Anna 24.10.2026) ----------
   Eigener Kopf nur mit Logo und kleiner Fuß (Impressum, Datenschutz); Prüfpunkte und Fragen erzeugt werkzeuge/website-check.py */
.wc [id] { scroll-margin-top: calc(var(--kopf-hoehe) + 16px); }
.wc-punkte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wc-punkt { background: var(--farbe-hellgrau); border-radius: 24px; padding: 24px; }
.wc-nr { display: block; font-family: var(--schrift-ueberschrift); font-size: 40px; line-height: 1.15; color: var(--farbe-primaer); margin: 0 0 8px; }
.wc-punkt h3 { margin: 0 0 6px; font-size: 1.25rem; line-height: 1.2; }
.wc-punkt p { margin: 0; color: var(--farbe-gedaempft); }
/* Hero: Was, Wie, Warum auf einen Blick (Anna 25.10.2026) */
.wc-kurz { display: grid; gap: 10px; margin: 0 0 28px; max-width: 62ch; }
.wc-kurz > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; align-items: baseline; border-top: var(--rahmen) solid var(--farbe-rahmen); padding-top: 10px; }
.wc-kurz dt { font-family: var(--schrift-meta); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--farbe-gedaempft); }
.wc-kurz dd { margin: 0; }
@media (max-width: 600px) { .wc-kurz > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
/* Wahl im Formular: Fachgespräch ja/nein (freiwillig, nie vorausgewählt) */
.wc-haekchen { margin: 16px 0 0; }
.wc-haekchen label { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.4; cursor: pointer; }
.wc-haekchen input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--farbe-primaer); }
/* Schluss-Aufruf in Website-Check-Blau */
.schluss-karte.schluss-blau { background: var(--farbe-primaer); }
.schluss-karte.schluss-blau .meta { color: var(--farbe-weiss); }
.schluss-karte.schluss-blau .meta::before { background: var(--farbe-weiss); }
.wc-liste { grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
.wc-berechtigung { max-width: 68ch; font-size: 15px; line-height: 1.5; margin: 16px 0 12px; }
.wc-faq-gruppe { max-width: 1200px; margin: 48px auto 16px; font-size: clamp(24px, 2.5vw, 32px); line-height: 1.2; }
.wc-faq h2 + .wc-faq-gruppe { margin-top: 0; }
.sticky-rechner.sticky-check { padding: 14px 22px; }
/* Landingpage Website-Check: statt des Kostenrechner-Knopfs aus dem Fuß nur der Knopf zum Formular (am Handy) */
body:has(.sticky-check) .sticky-rechner:not(.sticky-check) { display: none; }
@media (min-width: 768px) { .sticky-check { display: none; } }
@media (min-width: 1200.02px) { .wc-punkte { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Website-Check Entwurf 2 (Anna 26.10.2026): Hero zentriert, Bühne mit Laptop und Porträt, drei Anker-Karten,
   Abschnitte mit Bild daneben, drei Wege, Formular als Pop-up, mehr Weißraum zwischen den Abschnitten */
.wc .rv-abschnitt { padding-top: clamp(96px, 12vw, 160px); }
.wc .wc-faq { margin-top: clamp(96px, 12vw, 160px); }
.wc-hero { text-align: center; padding: clamp(24px, 3vw, 40px) var(--rand-seite) 0; }
.wc-hero .meta { justify-content: center; }
.wc-titel { font-size: clamp(38px, 5vw, 80px); line-height: 1.2; hyphens: manual; margin: 0 auto 24px; max-width: 16ch; }
.wc-hero .rv-intro { max-width: 46ch; margin-left: auto; margin-right: auto; }
.wc-hero .rv-knopf { justify-content: center; }
.wc-zeile { font-size: 15px; color: var(--farbe-gedaempft); margin: 12px 0 0; }
/* GMX-Muster (Anna 26.10.2026): Icon über der Dachzeile, Medienfläche 16:9 unter dem Knopf, Häkchen-Reihe darunter */
.wc-hero-icon { display: block; width: 88px; height: 88px; margin: 0 auto 8px; mix-blend-mode: multiply; }
.wc-video { max-width: 960px; aspect-ratio: 16 / 9; margin: 48px auto 0; border-radius: 32px; background: var(--farbe-creme); display: grid; place-items: center; overflow: hidden; }
.wc-video .wc-buehne { margin: 0 auto; }
.wc-haken { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; max-width: 960px; margin: 24px auto 0; padding: 0; font-weight: 600; }
.wc-haken li { display: flex; align-items: center; gap: 8px; }
.wc-haken li::before { content: "✓" / ""; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--farbe-primaer); color: var(--farbe-weiss); font-size: 13px; }
.wc-buehne { position: relative; width: 500px; max-width: 100%; margin: 56px auto 0; padding-right: 120px; box-sizing: content-box; }
.wc-geraet { position: relative; width: 500px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 24px; }
.wc-geraet .kb-szene { scale: calc(500 / var(--sb)); }
.wc-person { position: absolute; right: 0; bottom: -32px; width: 200px; margin: 0; text-align: left; }
.wc-person img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 20px; border: 6px solid var(--farbe-weiss); }
.wc-person figcaption { margin-top: 8px; font-family: var(--schrift-meta); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--farbe-gedaempft); }
.wc-person figcaption strong { display: block; font-family: var(--schrift-text); font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--farbe-dunkel); }
.wc-anker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1200px; margin: clamp(96px, 10vw, 144px) auto 0; padding: 0 var(--rand-seite); }
.wc-anker a { display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; padding: 28px; border-radius: 24px; background: var(--farbe-creme); color: var(--farbe-dunkel); text-decoration: none; transition: translate .3s; }
.wc-anker a:hover { translate: 0 -4px; }
@media (prefers-reduced-motion: reduce) { .wc-anker a, .wc-anker a:hover { transition: none; translate: none; } }
.wc-anker img { width: 96px; height: 96px; mix-blend-mode: multiply; }
.wc-anker-frage { font-family: var(--schrift-ueberschrift); font-size: 1.6rem; line-height: 1.2; text-transform: uppercase; }
.wc-anker-text { color: var(--farbe-gedaempft); }
.wc-anker-pfeil { font-size: 1.4rem; color: var(--farbe-primaer); }
.wc-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.wc-bild { margin: 0; }
.wc-bild img { display: block; width: 100%; height: auto; border-radius: 24px; }
.wc-bild-quadrat { max-width: 560px; justify-self: start; }
.wc-bild-quadrat img { aspect-ratio: 1; object-fit: cover; }
/* Golden Circle größer; die Bildunterschrift mit Jahr im Bild wird abgeschnitten und als Text darunter gesetzt (Anna 26.10.2026) */
.wc-spalten-bild { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.wc-bild-kreis img { aspect-ratio: 1200 / 730; object-fit: cover; object-position: top; }
.wc-bild-kreis figcaption { margin-top: 8px; text-align: right; font-family: var(--schrift-meta); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--farbe-gedaempft); }
/* Hero: Icon bis Buttons sitzen im ersten Bildschirm mittig (Anna 26.10.2026) */
@media (min-width: 768px) and (min-height: 640px) {
  .wc-hero { padding-top: 0; }
  .wc-hero-oben { min-height: calc(100svh - var(--kopf-hoehe) - var(--leiste-hoehe, 44px)); display: flex; flex-direction: column; justify-content: center; }
}
/* Navigation mittig auf allen Seiten (Anna 26.10.2026 Website-Check, seit 10.11.2026 überall) */
@media (min-width: 1024.02px) {
  body:has(main.wc) .kopf { position: sticky; }
  .kopf-nav > ul { position: absolute; left: 50%; transform: translateX(-50%); }
}
/* Abschlussbox der Website-Check-Seite zentriert */
.wc .preis-schluss .schluss-karte { text-align: center; }
.wc .preis-schluss .schluss-karte .meta { justify-content: center; }
.wc-wege { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1000px; }
.wc-wege li { border: 1.5px solid var(--farbe-rahmen); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; }
.wc-wege h3 { font-size: 1.5rem; line-height: 1.2; margin: 0 0 8px; }
.wc-wege p:last-child { margin-bottom: 0; margin-top: auto; }
.wc-wege li > p:not(:last-child), .wc-wege li > p:only-of-type { margin-top: 0; }
.wc-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 32px; background: transparent; }
.wc-dialog::backdrop { background: rgb(14 16 17 / .6); }
.wc-schnell-karte { position: relative; background: var(--farbe-creme); border-radius: 32px; padding: clamp(24px, 5vw, 44px); }
.wc-dialog .anfrage-felder { grid-template-columns: minmax(0, 1fr); }
.wc-zu-form { position: absolute; top: 16px; right: 16px; margin: 0; }
.wc-zu { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--farbe-weiss); font-size: 26px; line-height: 1; cursor: pointer; }
/* Danke-Seite: Text links, Porträt rechts (Anna 26.10.2026) */
.wc-danke { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 320px); gap: clamp(32px, 6vw, 96px); align-items: center; }
.wc-danke .wc-titel { margin-left: 0; }
.wc-danke-bild { margin: 0; }
.wc-danke-bild img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 24px; }
.wc-danke-bild figcaption { margin-top: 12px; font-family: var(--schrift-meta); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--farbe-gedaempft); }
.wc-danke-bild figcaption strong { display: block; font-family: var(--schrift-text); font-size: 18px; letter-spacing: 0; text-transform: none; color: var(--farbe-dunkel); }
@media (max-width: 767.98px) { .wc-danke { grid-template-columns: minmax(0, 1fr); } .wc-danke-bild { max-width: 220px; } }
/* ohne JavaScript steht das Formular als Karte in der Seite */
html:not(.js) .wc-dialog, .ohne-dialog .wc-dialog { display: block; position: static; width: auto; max-width: 640px; margin: 96px auto 0; }
html:not(.js) .wc-zu-form, .ohne-dialog .wc-zu-form { display: none; }
@media (max-width: 900px) {
  .wc-video { aspect-ratio: auto; padding: 32px 0 56px; }
  .wc-spalten { grid-template-columns: minmax(0, 1fr); }
  .wc-anker, .wc-wege { grid-template-columns: minmax(0, 1fr); }
  .wc-buehne { width: 400px; padding-right: 90px; }
  .wc-geraet { width: 400px; }
  .wc-geraet .kb-szene { scale: calc(400 / var(--sb)); }
  .wc-person { width: 150px; }
}
@media (max-width: 600px) {
  .wc-video { aspect-ratio: auto; padding: 24px 0; border-radius: 24px; }
  .wc-haken { flex-direction: column; align-items: flex-start; width: fit-content; }
  .wc-punkte { grid-template-columns: minmax(0, 1fr); }
  .wc-buehne { width: 256px; padding-right: 0; padding-bottom: 40px; }
  .wc-geraet { width: 256px; }
  .wc-geraet .kb-szene { scale: calc(256 / var(--sb)); }
  .wc-person { width: 110px; right: 8px; bottom: 0; }
  .wc-person figcaption { display: none; }
}

/* ---------- Landingpages (Website-Check, KI-Arbeits-Setup) – Lead-Design 07.11.2026 ----------
   Ziel Conversion: Formular sofort sichtbar, eine Aussage pro Abschnitt, das Produkt selbst zeigen (Prüfbericht, Cockpit),
   große Typografie statt Stockfotos. Nur Weiß, Schwarz, Blau; keine großen schwarzen Flächen (Branding-Richtlinien 10.10.2026). */
.lp [id] { scroll-margin-top: calc(var(--kopf-hoehe) + 16px); }
.lp-abschnitt { max-width: var(--inhalt-breite); margin: 0 auto; padding: clamp(96px, 12vw, 168px) var(--rand-seite) 0; }
.lp .preis-h2 { font-size: clamp(30px, 3.8vw, 52px); line-height: 1.15; max-width: 24ch; margin: 8px 0 16px; }
.lp-hero { max-width: var(--inhalt-breite); margin: 0 auto; padding: clamp(24px, 3.5vw, 48px) var(--rand-seite) 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 24px clamp(32px, 5vw, 80px); align-items: start; }
.lp-hero-kopf { grid-column: 1 / -1; }
.lp-titel { font-size: clamp(40px, 5.4vw, 84px); line-height: 1.15; max-width: 24ch; margin: 8px 0 0; hyphens: manual; }
.lp-hero .rv-intro { max-width: 38ch; font-size: clamp(18px, 1.6vw, 22px); margin-bottom: 24px; }
.lp-buehne { position: relative; padding-top: 8px; }
.lp-buehne .wc-buehne { margin: 0 auto; }
.lp-haken { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 20px 0 0; padding: 0; font-weight: 600; font-size: 16px; }
.lp-haken li { display: flex; align-items: center; gap: 8px; }
.lp-haken li::before { content: "✓" / ""; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--farbe-primaer); color: var(--farbe-weiss); font-size: 13px; flex: none; }
.lp-zeile { font-size: 15px; color: var(--farbe-gedaempft); margin: 12px 0 0; }
/* Formular-Karte direkt im ersten Bildschirm */
.lp-form-karte { background: var(--farbe-weiss); border: 1.5px solid var(--farbe-rahmen); border-radius: 24px; padding: clamp(20px, 3vw, 32px); box-shadow: 0 14px 40px rgba(14, 16, 17, .08); max-width: 620px; }
.lp-form-karte h2 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; margin: 0 0 12px; }
.lp-form-karte .anfrage-felder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lp-form-karte .anfrage-knoepfe { margin: 16px 0 0; }
.lp-form-karte .anfrage-knoepfe .button { width: 100%; justify-content: center; }
.lp-form-karte .wc-berechtigung { font-size: 13px; line-height: 1.45; color: var(--farbe-gedaempft); margin: 12px 0 0; max-width: none; }
.lp-form-karte .anfrage-hinweis { margin-top: 10px; font-size: 13px; }
.lp-form-karte textarea { min-height: 96px; }
.lp-felder-eins { grid-template-columns: minmax(0, 1fr) !important; }
/* Große Zahl als Aussage (statt Stimmungsbild) */
.lp-zahl-band { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; border-top: 1.5px solid var(--farbe-dunkel); padding-top: 32px; }
.lp-zahl { font-family: var(--schrift-ueberschrift); font-size: clamp(110px, 17vw, 250px); line-height: .9; margin: 0; letter-spacing: -.01em; }
.lp-zahl-text h2 { font-size: clamp(36px, 5vw, 72px); line-height: 1.15; margin: 0 0 16px; }
.lp-zahl-text h2 span { color: var(--farbe-primaer); }
.lp-zahl-text p { font-size: clamp(18px, 1.6vw, 22px); max-width: 40ch; margin: 0 0 12px; }
.lp-quelle { font-size: 13px; color: var(--farbe-gedaempft); margin: 16px 0 0; max-width: 80ch; }
.lp-quelle a { color: inherit; }
.lp-zwei.lp-bekommen { align-items: start; }
.lp-mockup { margin: clamp(40px, 6vw, 80px) 0 0; }
.lp-mockup img { display: block; width: 100%; height: auto; }
.lp-mockup figcaption { font-size: 14px; color: var(--farbe-gedaempft); margin-top: 16px; text-align: center; }
.lp-mockup figcaption a { color: var(--farbe-dunkel); }
.lp-quellen { max-width: var(--inhalt-breite); margin: -64px auto 0; padding: 0 var(--rand-seite) 48px; }
/* Prüfbericht zeigen */
.lp-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
/* Stufen als Bauhaus-Grundformen (keine Ampelfarben: kein Rot, Gelb, Grün) */
.lp-stufe { display: inline-flex; align-items: center; gap: 8px; font-family: var(--schrift-meta); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.lp-stufe::before { content: ""; width: 14px; height: 14px; flex: none; box-sizing: border-box; }
.lp-stufe-ok::before { border: 2px solid var(--farbe-dunkel); border-radius: 50%; }
.lp-stufe-klein::before { border-radius: 50%; background: linear-gradient(90deg, var(--farbe-primaer) 50%, transparent 50%); border: 2px solid var(--farbe-primaer); }
.lp-stufe-erheblich::before { border-radius: 50%; background: var(--farbe-dunkel); }
.lp-stufe-dringend::before { background: var(--farbe-dunkel); }
.lp-legende { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 16px 0 0; padding: 0; }
/* Erzählung in großen Zeilen */
.lp-zeilen { list-style: none; margin: 32px 0 0; padding: 0; max-width: 980px; }
.lp-zeilen li { font-size: clamp(22px, 2.6vw, 36px); line-height: 1.3; font-weight: 600; padding: 20px 0; border-top: 1.5px solid var(--farbe-rahmen); display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; }
.lp-zeilen li img { width: 48px; height: 48px; mix-blend-mode: multiply; margin-top: 2px; }
.lp-zeilen li span { color: var(--farbe-gedaempft); font-weight: 400; }
.lp-kern { font-family: var(--schrift-ueberschrift); text-transform: uppercase; font-size: clamp(30px, 4vw, 56px); line-height: 1.15; margin: 48px 0 0; max-width: 22ch; }
.lp-kern span { color: var(--farbe-primaer); }
/* Karten mit Clay-Icon */
.lp-karten { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-karten li { background: var(--farbe-hellgrau); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 8px; }
.lp-karten img { width: 88px; height: 88px; mix-blend-mode: multiply; margin: -8px 0 4px -8px; }
.lp-karten h3 { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.lp-karten p { margin: 0; color: var(--farbe-gedaempft); }
/* Preis */
.lp-preis { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: 32px; }
.lp-preis-karte { border: var(--rahmen) solid var(--farbe-dunkel); border-radius: 32px; padding: clamp(24px, 4vw, 44px); }
.lp-preis-betrag { font-family: var(--schrift-ueberschrift); font-size: clamp(64px, 8vw, 112px); line-height: 1; margin: 8px 0 4px; }
.lp-preis-betrag small { display: block; font-family: var(--schrift-text); font-size: 16px; font-weight: 600; margin-top: 8px; color: var(--farbe-gedaempft); }
.lp-pilot { display: block; background: var(--farbe-creme); color: var(--farbe-dunkel); border-radius: 12px; padding: 12px 16px; font-size: 15px; line-height: 1.45; margin: 16px 0 0; }
.lp .preis-h2.lp-h2-breit { max-width: none; }
.lp-preis-karte .button { width: 100%; justify-content: center; }
.lp-liste { list-style: none; margin: 0 0 24px; padding: 0; }
.lp-liste li { position: relative; padding: 10px 0 10px 30px; border-bottom: 1px solid var(--farbe-rahmen); }
.lp-liste li::before { content: "✓" / ""; position: absolute; left: 0; top: 10px; color: var(--farbe-primaer); font-weight: 700; }
.lp-liste.lp-ohne li::before { content: "–" / ""; color: var(--farbe-gedaempft); }
.lp-liste-titel { font-family: var(--schrift-meta); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--farbe-gedaempft); margin: 0 0 4px; }
/* Person und Stimme */
.lp-person { display: grid; grid-template-columns: minmax(200px, 340px) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.lp-person figure { margin: 0; }
.lp-person figure img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 24px; }
.lp-person figcaption { margin-top: 10px; font-family: var(--schrift-meta); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--farbe-gedaempft); }
.lp-zitat { margin: 32px 0 0; padding: 24px 0 0; border-top: 1.5px solid var(--farbe-dunkel); max-width: 56ch; }
.lp-zitat p { font-size: clamp(20px, 2vw, 26px); line-height: 1.4; margin: 0 0 12px; }
.lp-zitat footer { font-size: 15px; color: var(--farbe-gedaempft); }
.lp-zitat footer strong { color: var(--farbe-dunkel); }
.lp-kennzahlen { display: flex; flex-wrap: wrap; gap: 24px 48px; margin: 24px 0 0; padding: 0; list-style: none; }
.lp-kennzahlen b { display: block; font-family: var(--schrift-ueberschrift); font-size: clamp(40px, 4vw, 56px); line-height: 1.1; color: var(--farbe-primaer); }
.lp-kennzahlen span { font-size: 15px; color: var(--farbe-gedaempft); }
/* Anfrage-Abschnitt unten */
.lp-anfrage { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.lp-anfrage .lp-form-karte { max-width: none; }
.lp .preis-schluss .schluss-karte { text-align: center; }
.lp .preis-schluss .schluss-karte .meta { justify-content: center; }
.lp .faq { margin-top: clamp(96px, 12vw, 168px); }
@media (max-width: 1024px) {
  .lp-hero, .lp-zwei, .lp-preis, .lp-anfrage { grid-template-columns: minmax(0, 1fr); }
  .lp-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-buehne { max-width: 640px; }
}
@media (max-width: 767.98px) {
  .lp-hero { padding-top: 12px; gap: 16px; }
  .lp-hero .rv-intro { font-size: 17px; margin-bottom: 16px; }
  .lp-form-karte { padding: 18px; }
  .lp-form-karte h2 { font-size: 20px; margin-bottom: 8px; }
  .lp-form-karte .wc-haekchen { margin-top: 12px; }
  .lp-form-karte .wc-haekchen label { font-size: 15px; }
  .lp-form-karte .wc-berechtigung { font-size: 12px; margin-top: 8px; }
  .lp-form-karte .anfrage-knoepfe { margin-top: 12px; }
  .lp-form-karte .anfrage-felder { grid-template-columns: minmax(0, 1fr); }
  .lp-zahl-band { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .lp-karten { grid-template-columns: minmax(0, 1fr); }
  .lp-person { grid-template-columns: minmax(0, 1fr); }
  .lp-person figure { max-width: 260px; }
  .lp-zeilen li { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
  .lp-zeilen li img { width: 36px; height: 36px; }
  .lp-bericht li { grid-template-columns: minmax(0, 1fr); }
}
/* KI-Arbeits-Setup (Anna 12.11.2026): Inhalt bündig mit Logo und Menü, Überschriften über die ganze Breite,
   Ablauf als Zeitleiste quer wie auf der Profilseite, Preiskarte mit mehr Luft um den Pilotpreis */
.lp-breit .lp-hero, .lp-breit .lp-abschnitt { max-width: none; }
.lp-breit .preis-h2 { max-width: none; }
.lp-hoffnung .lp-kern { max-width: 30ch; }
.lp-breit > .lp-abschnitt:last-child { padding-bottom: clamp(96px, 12vw, 168px); }
/* „Lieber direkt?“ unter dem Formular (Anna 12.11.2026, nach Vorbild pappelbaum-design.de) */
.lp-breit .lp-direkt { padding-top: clamp(64px, 8vw, 112px); }
.lp-direkt-karten { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.lp-direkt-karten li { background: var(--farbe-hellgrau); border-radius: 24px; padding: 28px; }
.lp-direkt-karten img { display: block; width: 48px; height: 48px; margin: 0 0 20px; }
.lp-direkt-karten h3 { margin: 0 0 8px; font-family: var(--schrift-text); text-transform: none; font-size: 1.25rem; line-height: 1.3; }
.lp-direkt-karten h3 a { color: var(--farbe-dunkel); }
.lp-direkt-karten p { margin: 0; color: var(--farbe-gedaempft); }
@media (max-width: 900px) { .lp-direkt-karten { grid-template-columns: minmax(0, 1fr); } }
.lp-breit .lp-karten img { width: 64px; height: 64px; mix-blend-mode: normal; margin: 0 0 16px; }
.lp-breit .lp-abschnitt .zl-quer { padding: 0; margin-top: 40px; }
.lp-breit .lp-abschnitt .zl-quer::before { left: 0; right: 0; }
.lp-breit .lp-preis-betrag { margin-bottom: 0; }
.lp-breit .lp-pilot { margin: 28px 0 32px; }
.lp-breit .lp-preis-karte .hinweis-klein { font-size: 14px; line-height: 1.5; margin-top: 20px; }
@media (max-width: 900px) {
  .lp-breit .lp-abschnitt .zl-quer { padding-left: 72px; }
  .lp-breit .lp-abschnitt .zl-quer::before { left: 27px; right: auto; }
}
/* Einstieg „Hoffnung ist keine Strategie.“ (Anna 12.11.2026, aus dem LinkedIn-Post) */
.lp-breit .lp-hoffnung .preis-h2 { font-size: clamp(44px, 7.4vw, 120px); line-height: 1.12; margin-bottom: 32px; }
.lp-hoffnung-text { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); border-top: 1.5px solid var(--farbe-dunkel); padding-top: 24px; }
.lp-hoffnung-text p { margin: 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; }
/* Preiskarte quer: links Preis und Button, rechts was enthalten ist; darunter „Nicht enthalten“ */
.lp-breit .lp-preis-quer { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); margin-top: 32px; }
.lp-preis-rechts .lp-liste { margin: 0; }
.lp-preis-ohne { margin-top: 40px; max-width: 760px; }
@media (max-width: 1024px) { .lp-breit .lp-preis-quer { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767.98px) { .lp-hoffnung-text { grid-template-columns: minmax(0, 1fr); } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }


/* ---------- Landingpage Marken-Regelwerk (/marken-regelwerk/, 07.11.2026) ----------
   Fotos von Unsplash, als Verlaufsumsetzung (gradient map) in Schwarz und Markenblau – so wirken unterschiedliche Fotos wie eine Serie.
   Auf dunklem Grund: weiße Buttons und weiße Punkte (kein Blau auf Schwarz). Bewegung: Hero zoomt einmal 5 s, bei „Bewegung reduzieren“ nicht. */
.mr { overflow-x: clip; }
.mr-hero { position: relative; display: flex; align-items: flex-end; min-height: min(88vh, 860px); color: var(--farbe-weiss); background: var(--farbe-dunkel); overflow: hidden; }
.mr-hero-bild, .mr-band-bild { position: absolute; inset: 0; margin: 0; }
.mr-hero-bild img, .mr-band-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mr-hero-bild img { object-position: 62% 50%; animation: mr-zoom 5s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes mr-zoom { from { transform: scale(1.07); } to { transform: scale(1); } }
.mr-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--schleier-stark) 0%, var(--schleier-mittel) 42%, var(--schleier-leer) 72%), linear-gradient(0deg, var(--schleier-mittel) 0%, var(--schleier-leer) 45%); pointer-events: none; }
.mr-hero-text { position: relative; z-index: 1; width: 100%; max-width: var(--inhalt-breite); margin: 0 auto; padding: 120px var(--rand-seite) clamp(56px, 9vh, 104px); box-sizing: content-box; }
.mr-titel { font-family: var(--schrift-ueberschrift); font-weight: 400; text-transform: uppercase; font-size: clamp(54px, 8.4vw, 132px); line-height: 1.15; letter-spacing: .005em; margin: 0; }
.mr-zeile { display: block; }
.mr-dach { display: flex; align-items: center; gap: 10px; font-family: var(--schrift-meta); font-size: 14px; font-weight: 500; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; color: var(--farbe-gedaempft-invers); margin: 0 0 20px; }
.mr-dach::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--farbe-weiss); flex: none; }
.mr-hero-lead { font-size: clamp(18px, 1.55vw, 22px); line-height: 1.55; max-width: 30em; color: var(--farbe-weiss); margin: 28px 0 0; }
.mr-knoepfe { display: flex; flex-wrap: wrap; gap: 12px 16px; margin: 36px 0 0; }
.mr .button.mr-button-hell { background: var(--farbe-weiss); color: var(--farbe-dunkel); border-color: var(--farbe-weiss); }
.mr .button.mr-button-hell:hover { background: var(--farbe-hellgrau-2); border-color: var(--farbe-hellgrau-2); }
.mr .button.mr-button-umriss { background: transparent; color: var(--farbe-weiss); border-color: var(--farbe-weiss); }
.mr .button.mr-button-umriss:hover { background: var(--farbe-weiss); color: var(--farbe-dunkel); }
.mr .button:focus-visible { outline: 3px solid var(--farbe-weiss); outline-offset: 3px; }
.mr-haken { margin-top: 32px; padding: 0 var(--rand-seite); }

.mr-abschnitt { max-width: var(--inhalt-breite); margin: 0 auto; padding: clamp(96px, 12vw, 168px) var(--rand-seite) 0; box-sizing: content-box; }
.mr-gross { font-family: var(--schrift-ueberschrift); font-weight: 400; text-transform: uppercase; font-size: clamp(38px, 5.4vw, 76px); line-height: 1.15; margin: 0 0 28px; max-width: 16ch; }
.mr-text { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.6; max-width: 32em; margin: 0 0 18px; }
.mr-text-breit { max-width: 40em; }
.mr-pointe { font-weight: 700; font-size: clamp(22px, 2vw, 28px); margin-top: 28px; }
.mr-hakt { list-style: none; margin: 32px 0 0; padding: 28px 0 0; border-top: 1.5px solid var(--farbe-dunkel); display: grid; gap: 14px; max-width: 32em; }
.mr-hakt li { position: relative; padding-left: 30px; line-height: 1.5; color: var(--farbe-gedaempft); }
.mr-hakt li::before { content: "×" / ""; position: absolute; left: 0; top: -2px; font-size: 22px; line-height: 1; color: var(--farbe-dunkel); }
.mr-alltag { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.mr-foto { margin: 0; border-radius: 28px; overflow: hidden; background: var(--farbe-dunkel); }
.mr-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mr-foto-hoch { aspect-ratio: 4 / 5; }
.mr-foto-hoch img { object-position: 55% 50%; }

.mr-band { position: relative; display: grid; place-items: center; min-height: min(78vh, 760px); margin-top: clamp(96px, 12vw, 168px); padding: 96px var(--rand-seite); color: var(--farbe-weiss); background: var(--farbe-dunkel); overflow: hidden; text-align: center; }
.mr-band::after { content: ""; position: absolute; inset: 0; background: var(--schleier-mittel); pointer-events: none; }
.mr-band-text { position: relative; z-index: 1; font-family: var(--schrift-ueberschrift); font-weight: 400; text-transform: uppercase; font-size: clamp(36px, 5.6vw, 84px); line-height: 1.15; max-width: 18ch; margin: 0; }
.mr-band-text span { display: block; color: var(--farbe-gedaempft-invers); }

.mr-drei { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mr-teil { background: var(--farbe-hellgrau); border-radius: 28px; padding: 36px 32px 40px; }
.mr-teil-nr { display: block; font-family: var(--schrift-ueberschrift); font-size: 56px; line-height: 1.15; color: var(--farbe-primaer); margin-bottom: 28px; }
.mr-teil .meta { margin-bottom: 8px; }
.mr-teil h3 { font-size: 24px; line-height: 1.3; margin: 0 0 12px; }
.mr-teil p:last-child { margin: 0; line-height: 1.55; color: var(--farbe-gedaempft); }
.mr-dazu { margin: 28px 0 0; font-weight: 600; }

/* Beispiel: erfundene Firma; Farben der Firma als Variablen am Element (wie Kundenfarben auf Projektseiten) */
.mr-beispiel { margin-top: 56px; background: var(--farbe-hellgrau); border-radius: 36px; padding: clamp(16px, 3vw, 40px); }
.mr-b-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; background: var(--m-blau); color: var(--farbe-weiss); border-radius: 24px 24px 0 0; padding: 22px 28px; }
.mr-b-firma { margin: 0; font-family: "Inter Bauer", var(--schrift-text); font-weight: 800; font-size: 20px; }
.mr-b-firma span { font-weight: 400; opacity: .8; }
.mr-b-hinweis { margin: 0; font-family: var(--schrift-meta); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; border: 1.5px solid var(--farbe-weiss); border-radius: 999px; padding: 4px 12px; }
.mr-b-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--farbe-rahmen); border-radius: 0 0 24px 24px; overflow: hidden; box-shadow: var(--schatten-weich); }
.mr-b-feld { background: var(--farbe-weiss); padding: 32px 28px; font-family: "Inter Bauer", var(--schrift-text); color: var(--m-blau); }
.mr-b-feld-breit { grid-column: 1 / -1; }
.mr-b-titel { font-family: var(--schrift-meta); font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--farbe-gedaempft); margin: 0 0 20px; }
.mr-b-farben { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mr-b-farben li { font-size: 13px; line-height: 1.4; color: var(--farbe-gedaempft); }
.mr-b-farben i { display: block; aspect-ratio: 1; border-radius: 16px; background: var(--f); border: 1.5px solid var(--farbe-rahmen); margin-bottom: 10px; }
.mr-b-farben b { display: block; color: var(--m-blau); font-size: 15px; }
.mr-b-farben small { display: block; margin-top: 4px; font-size: 13px; }
.mr-b-regel { margin: 20px 0 0; font-size: 15px; line-height: 1.5; color: var(--farbe-gedaempft); }
.mr-b-aa { margin: 0; font-size: clamp(88px, 10vw, 140px); line-height: 1; font-weight: 800; letter-spacing: -.03em; }
.mr-b-schriftname { margin: 4px 0 16px; font-weight: 600; }
.mr-b-liste { margin: 0; padding-left: 18px; line-height: 1.7; color: var(--farbe-dunkel); }
.mr-b-ton { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mr-b-ja, .mr-b-nein { margin: 0; border-radius: 18px; padding: 20px 22px; font-size: 18px; line-height: 1.5; }
.mr-b-ja { background: var(--m-grau); color: var(--m-blau); }
.mr-b-nein { border: 1.5px dashed var(--farbe-grau); color: var(--farbe-gedaempft); }
.mr-b-nein .mr-b-zitat { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.mr-b-zitat { display: block; }
.mr-b-ja > span:first-child, .mr-b-nein > span:first-child, .mr-b-marke { display: block; font-family: var(--schrift-meta); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; text-decoration: none; }
.mr-b-vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mr-b-anzeige { margin: 0; }
.mr-b-anzeige figcaption { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--farbe-dunkel); }
.mr-b-marke { display: inline-block; margin: 0 8px 0 0; font-weight: 700; color: var(--farbe-dunkel); }
.mr-b-post { aspect-ratio: 4 / 5; border-radius: 18px; padding: 28px 26px; display: flex; flex-direction: column; overflow: hidden; }
.mr-b-post p { margin: 0; }
.mr-b-anzeige-ja .mr-b-post { background: var(--m-blau); color: var(--farbe-weiss); }
.mr-b-anzeige-ja .mr-b-post-dach { font-size: 14px; font-weight: 600; opacity: .8; }
.mr-b-anzeige-ja .mr-b-post-titel { margin-top: auto; font-weight: 800; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; hyphens: manual; }
.mr-b-anzeige-ja .mr-b-post-text { margin-top: 12px; font-size: 15px; opacity: .85; }
.mr-b-anzeige-ja .mr-b-post-knopf { margin-top: 24px; align-self: flex-start; background: var(--m-kupfer); color: var(--farbe-weiss); border-radius: 999px; padding: 10px 18px; font-weight: 700; font-size: 15px; }
.mr-b-anzeige-nein .mr-b-post { background: var(--m-falsch-1); color: var(--m-falsch-2); text-align: center; justify-content: space-around; font-family: Georgia, "Times New Roman", serif; }
.mr-b-anzeige-nein .mr-b-post-dach { font-family: var(--schrift-meta); font-size: 15px; color: var(--farbe-weiss); }
.mr-b-anzeige-nein .mr-b-post-titel { font-family: Impact, "Arial Narrow", sans-serif; font-size: clamp(26px, 3vw, 40px); line-height: 1.15; font-style: italic; }
.mr-b-anzeige-nein .mr-b-post-text { font-size: 17px; font-style: italic; color: var(--farbe-weiss); }
.mr-b-anzeige-nein .mr-b-post-knopf { align-self: center; border: 3px dotted var(--m-falsch-2); padding: 6px 14px; font-size: 14px; text-transform: uppercase; }
.mr-b-ki { background: var(--farbe-dunkel); color: var(--farbe-weiss); }
.mr-b-ki .mr-b-titel, .mr-b-ki .mr-b-regel { color: var(--farbe-gedaempft-invers); }
.mr-b-anweisung { font-family: var(--schrift-meta); font-size: 15px; line-height: 1.65; border-left: 2px solid var(--farbe-weiss); padding: 4px 0 4px 22px; }
.mr-b-anweisung p { margin: 0 0 10px; }
.mr-b-anweisung p:last-child { margin: 0; }

.mr-ablauf-kopf { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: end; }
.mr-ablauf-kopf .mr-foto { aspect-ratio: 3 / 2; }
.mr-karten { margin-top: 48px; }
.mr-grenzen { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 48px; margin-top: 40px; padding-top: 28px; border-top: 1.5px solid var(--farbe-dunkel); line-height: 1.6; }
.mr-grenzen p { margin: 0; }
.mr-ich { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.mr-ich-bild { margin: 0; }
.mr-ich-bild img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 28px; }
.mr-fragen .faq-liste { margin-top: 40px; }

.mr-schluss { position: relative; margin-top: clamp(96px, 12vw, 168px); padding: clamp(80px, 10vw, 140px) var(--rand-seite); color: var(--farbe-weiss); background: var(--farbe-dunkel); overflow: hidden; }
.mr-schluss::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--schleier-stark) 0%, var(--schleier-mittel) 60%, var(--schleier-mittel) 100%); pointer-events: none; }
.mr-schluss-innen { position: relative; z-index: 1; max-width: var(--inhalt-breite); margin: 0 auto; display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: clamp(40px, 6vw, 96px); align-items: center; }
.mr-schluss-titel { text-align: left; }
.mr-schluss-karte { background: var(--farbe-weiss); color: var(--farbe-dunkel); border-radius: 28px; padding: clamp(24px, 3vw, 40px); }
.mr-schluss-karte .anfrage-form { margin: 0; }

@media (prefers-reduced-motion: reduce) { .mr-hero-bild img { animation: none; } }
@media (max-width: 1024px) {
  .mr-hero::after { background: linear-gradient(0deg, var(--schleier-stark) 0%, var(--schleier-mittel) 60%, var(--schleier-leer) 100%), linear-gradient(90deg, var(--schleier-mittel) 0%, var(--schleier-leer) 80%); }
  .mr-drei { grid-template-columns: 1fr; }
  .mr-schluss-innen { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .mr-alltag, .mr-ablauf-kopf, .mr-ich { grid-template-columns: 1fr; }
  .mr-ich-bild { max-width: 360px; }
  .mr-b-raster, .mr-b-ton, .mr-grenzen { grid-template-columns: 1fr; }
  .mr-b-feld-breit { grid-column: auto; }
  .mr-b-farben { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
  .mr-hero { min-height: 92svh; }
  .mr-hero-bild img { object-position: 50% 40%; }
  .mr-hero::after { background: linear-gradient(0deg, var(--schleier-stark) 0%, var(--schleier-mittel) 55%, var(--schleier-leer) 85%); }
  .mr-hero-text { padding-top: 96px; }
  .mr-b-vergleich { grid-template-columns: 1fr; }
  .mr-b-post { max-width: 360px; }
  .mr-band { min-height: 60svh; }
}
@media (max-width: 400px) {
  .mr-titel { font-size: 46px; }
  .mr-b-feld { padding: 24px 18px; }
  .mr-knoepfe .button { width: 100%; text-align: center; box-sizing: border-box; }
}
/* Tippflächen mindestens 44 px hoch (WCAG 2.5.8; Prüfer 07.11.2026) */
.mr-schluss-karte .anfrage-knoepfe .textlink, .mr-grenzen .textlink { display: inline-block; padding: 12px 0; }
/* Echtes Projekt unter dem erfundenen Beispiel (07.11.2026) */
.mr-echt { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; margin-top: 20px; padding: 24px 28px; border: 1.5px solid var(--farbe-rahmen); border-radius: 24px; color: var(--farbe-dunkel); text-decoration: none; transition: border-color .2s; }
.mr-echt:hover { border-color: var(--farbe-dunkel); }
.mr-echt:focus-visible { outline: 2px solid var(--farbe-primaer); outline-offset: 3px; }
.mr-echt-farben { display: flex; }
.mr-echt-farben i { width: 44px; height: 44px; border-radius: 50%; background: var(--f); border: 3px solid var(--farbe-weiss); }
.mr-echt-farben i + i { margin-left: -12px; }
.mr-echt-text { display: grid; gap: 4px; }
.mr-echt-text .meta { margin: 0; }
.mr-echt-titel { font-weight: 700; font-size: 18px; }
.mr-echt-link { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
@media (max-width: 767.98px) { .mr-echt { grid-template-columns: 1fr; } }

/* ---------- Startseite: Hero „Bauhaus-Bühne“ (Anna, freigegeben 09.11.2026) ---------- */

/* ---------- Aufbau: links Text, rechts Bühne ---------- */
.bb-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 32px clamp(32px, 5vw, 80px);
  box-sizing: border-box; margin: 0; /* volle Breite wie Kopf und übrige Abschnitte, bündig mit dem Logo (Anna 09.11.2026) */
  min-height: calc(100svh - var(--kopf-hoehe) - var(--leiste-hoehe, 44px));
  padding: clamp(16px, 3vh, 40px) var(--rand-seite) clamp(32px, 5vh, 64px); text-align: left; }
.bb-hero .meta { justify-content: flex-start; }
.bb-hero .bb-titel { font-size: clamp(48px, 8.4vw, 150px); line-height: 1.15; white-space: nowrap; margin: 8px 0 0; }
.bb-hero .bb-titel > span { display: block; }
.bb-hero .bb-h1 { max-width: 26ch; margin: 24px 0 0; font-size: clamp(22px, 1.9vw, 30px); line-height: 1.3; }
.bb-hero .bb-knoepfe { justify-content: flex-start; margin-top: 28px; }
.bb-fakten .hero-fakten { max-width: none; margin: 36px 0 0; }
.bb-fakten .fakten > div { padding: 14px 12px; text-align: left; }
.bb-fakten .fakten > div:first-child { padding-left: 0; }
.bb-fakten .fakten dt { font-size: clamp(28px, 2.6vw, 40px); }
.bb-fakten .fakten dd { font-size: 13px; }

/* ---------- Bühne: Creme als Plakatgrund, Boden als feine Linie, Wort am Rand ---------- */
.bb-buehne { position: relative; width: 100%; max-width: 620px; aspect-ratio: 1; justify-self: end; container-type: inline-size;
  background: var(--farbe-creme); border-radius: 24px; isolation: isolate; max-width: 760px; }
.bb-boden { position: absolute; left: 5%; right: 5%; top: 86%; border-top: 1.5px solid var(--farbe-dunkel); }
.bb-rand { position: absolute; left: 2.6%; top: 50%; margin: 0; writing-mode: vertical-rl; rotate: 180deg; translate: 0 -50%;
  font: 500 11px/1 var(--schrift-meta); letter-spacing: .16em; text-transform: uppercase; color: var(--farbe-gedaempft); }

/* ---------- Fünf Leistungen als Formen ---------- */
.bb-formen { list-style: none; margin: 0; padding: 0; }
.bb-f { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); z-index: 2; margin: 0; }
.bb-f a { display: block; color: var(--farbe-dunkel); text-decoration: none; border-radius: 4px; }
.bb-form { display: block; transition: translate .3s cubic-bezier(.2, .8, .2, 1); }
.bb-kreis .bb-form { width: 22cqw; aspect-ratio: 1; border-radius: 50%; background: var(--bb-blau); }
.bb-quadrat .bb-form { width: 16cqw; aspect-ratio: 1; background: var(--bb-rot); rotate: -8deg; }
.bb-halbkreis .bb-form { width: 26cqw; aspect-ratio: 2 / 1; border-radius: 999px 999px 0 0; background: var(--bb-pink); }
.bb-halbkreis-rosa .bb-form { width: 8cqw; aspect-ratio: 1 / 2; border-radius: 999px 0 0 999px; background: var(--bb-rosa); }
.bb-dreieck .bb-form { width: 19cqw; aspect-ratio: 1; background: var(--bb-gelb); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
/* Beschriftung als redaktionelle Zeile: Linie + Name, schwarz auf Creme */
.bb-name { position: absolute; width: max-content; max-width: 34cqw; font: 600 clamp(12px, 2.5cqw, 15px)/1.25 var(--schrift-text); }
.bb-n-unten .bb-name { top: calc(100% + 10px); padding-top: 5px; border-top: 1.5px solid var(--farbe-dunkel); }
/* Formen auf dem Boden: Name unter der Bodenlinie (die Linie ist schon da) */
.bb-n-boden .bb-name { top: calc(100% + 12px); }
.bb-n-mitte .bb-name { left: 50%; translate: -50% 0; text-align: center; }
.bb-n-links .bb-name { left: 0; }
.bb-n-rechts .bb-name { right: 0; text-align: right; }
.bb-f a:hover .bb-form, .bb-f a:focus-visible .bb-form { translate: 0 -6px; }
.bb-f a:hover .bb-name, .bb-f a:focus-visible .bb-name { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.bb-f a:focus-visible { outline: 2px solid var(--farbe-dunkel); outline-offset: 6px; }

/* ---------- Figur (Schlemmer, Konstruktion wie im Blog-Titelbild) ---------- */
.bb-figur { --arm-l: 145deg; --arm-r: -145deg; --bein-l: 8deg; --bein-r: -8deg; --ax: -9px; --ay: 0px;
  position: absolute; left: 50%; bottom: 13.4%; height: 64%; aspect-ratio: 380 / 450; translate: -50% 0; z-index: 1;
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 12px; }
.bb-figur:focus-visible { outline: 2px solid var(--farbe-dunkel); outline-offset: 4px; }
.bb-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bb-glied { transform-box: view-box; transform-origin: 0 0; transition: transform .5s cubic-bezier(.34, 1.3, .5, 1); }
.bb-arm-l { transform: rotate(var(--arm-l)); }
.bb-arm-r { transform: rotate(var(--arm-r)); }
.bb-bein-l { transform: rotate(var(--bein-l)); }
.bb-bein-r { transform: rotate(var(--bein-r)); }
.bb-auge { transform-box: view-box; transform: translate(var(--ax), var(--ay)); transition: transform .12s ease-out; }

/* Ausruf als Pointe: knallhart Schwarz-Weiß in Anton */
.bb-ausruf { position: absolute; left: 50%; top: 7%; translate: -50% 0; margin: 0; z-index: 3; pointer-events: none; }
.bb-ausruf span { display: inline-block; background: var(--farbe-dunkel); color: var(--farbe-weiss); font: 400 9cqw/1 var(--schrift-ueberschrift);
  letter-spacing: .02em; padding: .14em .24em .1em; rotate: -6deg; }

/* ---------- Auftritt: Formen fallen auf die Bühne, die Figur baut sich zusammen (zusammen unter 3 s, danach Ruhe) ---------- */
@media (prefers-reduced-motion: no-preference) {
  :where(.js) .bb-f { animation: bb-fallen .9s cubic-bezier(.34, 1.45, .5, 1) calc(.15s + var(--i) * .12s) both; }
  :where(.js) .bb-teil { animation: bb-bauen .7s cubic-bezier(.34, 1.3, .5, 1) both; }
  :where(.js) .bb-t1 { animation-delay: .8s; }
  :where(.js) .bb-t2 { animation-delay: .95s; }
  :where(.js) .bb-t3 { animation-delay: 1.1s; }
  :where(.js) .bb-t4 { animation-delay: 1.25s; }
  :where(.js) .bb-t5 { animation-delay: 1.4s; }
  :where(.js) .bb-ausruf span { animation: bb-pop .5s cubic-bezier(.34, 1.6, .5, 1) 1.9s both; }
  :where(.js) .bb-ausruf span.bb-neu { animation: bb-pop .45s cubic-bezier(.34, 1.6, .5, 1) both; }
}
@keyframes bb-fallen { from { translate: 0 -70cqw; opacity: 0; } 25% { opacity: 1; } }
@keyframes bb-bauen { from { translate: 0 -260px; opacity: 0; } 30% { opacity: 1; } }
@keyframes bb-pop { from { scale: 0; } }
@media (prefers-reduced-motion: reduce) {
  .bb-glied, .bb-auge, .bb-form { transition: none; }
}

/* Kleine Bühne (Handy bis 400 px): Randwort weg, damit es keine Beschriftung berührt */
@container (max-width: 380px) { .bb-rand { display: none; } }
/* Kleine Bühne: Namen rechts schmaler (umbrechen), damit sie die Hand der Figur nicht berühren */
@container (max-width: 420px) { .bb-n-rechts:not(.bb-n-boden) .bb-name { max-width: 26cqw; } }
/* Sehr kleine Bühne (320-px-Handys): Quadrat etwas höher, rosa Halbkreis etwas tiefer, damit die Namen frei stehen */
@container (max-width: 300px) { .bb-quadrat { --y: 17% !important; } .bb-halbkreis-rosa { --y: 49% !important; } .bb-halbkreis-rosa .bb-form { width: 7cqw; } .bb-n-boden .bb-name { max-width: none; } .bb-dreieck .bb-form { width: 16cqw; } .bb-dreieck { --y: 78% !important; } }

/* ---------- Tablet quer bis 1024 px: zwei Spalten bleiben, etwas enger ---------- */
@media (max-width: 1024px) {
  .bb-hero { gap: 24px 32px; min-height: 0; padding-top: 24px; }
  .bb-hero .bb-titel { font-size: clamp(44px, 6.6vw, 68px); }
  .bb-hero .bb-h1 { font-size: clamp(19px, 2.4vw, 24px); }
}

/* ---------- Handy: Titel, Bühne, H1, Buttons untereinander ---------- */
@media (max-width: 767.98px) {
  .bb-hero { grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 0; padding-top: 12px; }
  .bb-text { display: contents; }
  .bb-meta { order: 1; }
  .bb-titel { order: 2; }
  .bb-buehne { order: 3; justify-self: center; margin: 20px 0 4px; width: min(100%, 52svh); }
  .bb-h1 { order: 4; }
  .bb-knoepfe { order: 5; }
  .bb-fakten { order: 6; }
  .bb-hero .bb-titel { font-size: calc((100vw - 2 * var(--rand-seite)) / 6.4); }
  .bb-hero .bb-h1 { font-size: clamp(20px, 4.6vw, 26px); }
}
@media (max-width: 600px) {
  .bb-fakten .fakten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bb-fakten .fakten > div { padding: 12px 8px; }
  .bb-fakten .fakten dd { font-size: 12px; }
}

/* Startseite: Schmerzpunkte, Ergebnisse, Ablauf quer, Ehrliche Antworten (Anna, 09.11.2026) */
.haken-unter { font-size: clamp(18px, 1.4vw, 22px); line-height: 1.45; max-width: 46ch; margin: 20px 0 0; }
.haken { padding-bottom: 96px; }
.haken .sektionskopf .gr-h2, .ablauf-start .gr-h2, .ehrlich .gr-h2 { margin-top: 12px; line-height: 1.15; }
.haken-karten { list-style: none; margin: 0; padding: 0 var(--rand-seite); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.haken-karte { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 28px; border: 1.5px solid var(--farbe-dunkel); border-radius: 20px; background: var(--farbe-weiss); }
.haken-nr { position: absolute; top: 24px; right: 28px; font-family: var(--schrift-meta); font-size: 14px; color: var(--farbe-grau); }
.haken-karte h3 { font-size: clamp(20px, 1.5vw, 24px); line-height: 1.25; margin: 0 0 10px; }
.haken-karte p { margin: 0 0 16px; line-height: 1.55; }
.haken-nutzen { padding-top: 16px; border-top: 1.5px solid var(--farbe-grau-hell); font-weight: 600; }
.haken-nutzen .meta { display: block; margin-bottom: 6px; font-weight: 400; }
.haken-karte .textlink { margin-top: auto; }
.intro-frei { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-weight: 600; }
.intro-frei-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--farbe-primaer); flex: none; }
.ergebnisse { padding-bottom: 96px; }
.erg-zahlen { margin: 0; padding: 0 var(--rand-seite); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.erg-zahlen > div { border-top: 1.5px solid var(--farbe-dunkel); padding-top: 20px; }
.erg-zahlen dt { font-family: var(--schrift-ueberschrift); font-size: clamp(56px, 7vw, 112px); line-height: 1; }
.erg-zahlen dd { margin: 12px 0 0; line-height: 1.5; max-width: 32ch; }
.ergebnisse > p { padding: 32px var(--rand-seite) 0; margin: 0; }
.ablauf-start { padding-bottom: 96px; background: var(--farbe-hellgrau); }
.zl-quer { list-style: none; margin: 0; padding: 0 var(--rand-seite); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; position: relative; }
.zl-quer::before { content: ""; position: absolute; left: var(--rand-seite); right: var(--rand-seite); top: 28px; height: 1.5px; background: var(--farbe-dunkel); }
.zl-quer li { position: relative; }
.zlq-nr { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--farbe-dunkel); color: var(--farbe-weiss); font-weight: 700; margin-bottom: 20px; }
.zl-quer li:first-child .zlq-nr { background: var(--farbe-primaer); }
.zl-quer h3 { font-size: clamp(20px, 1.5vw, 24px); line-height: 1.25; margin: 8px 0 10px; }
.zl-quer p.gedaempft { margin: 0; line-height: 1.55; }
.ehrlich-mehr { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; max-width: 1200px; margin: 40px auto 0; }
.ehrlich > .meta, .ehrlich > .gr-h2 { max-width: 1200px; margin-left: auto; margin-right: auto; }
.ehrlich > .gr-h2 { margin-bottom: 40px; }
@media (max-width: 1200px) { .haken-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {

  .zl-quer { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-left: calc(var(--rand-seite) + 72px); }
  .zl-quer::before { left: calc(var(--rand-seite) + 27px); right: auto; top: 0; bottom: 0; width: 1.5px; height: auto; }
  .zl-quer li .zlq-nr { position: absolute; left: -72px; top: 0; margin: 0; }
}
@media (max-width: 767.98px) { .haken-karten { grid-template-columns: minmax(0, 1fr); gap: 16px; } .haken-karte { padding: 22px; } }

/* Problem- und Branchenseiten (werkzeuge/fuer-wen-seiten.py, Anna 10.11.2026) */
.fw-kopf { padding: 120px var(--rand-seite) 80px; }
.fw-h1 { margin: 16px 0 0; max-width: 18ch; line-height: 1.15; hyphens: manual; }
.fw-knoepfe { display: flex; flex-wrap: wrap; gap: 12px 16px; margin: 36px 0 0; }
.fw-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 80px; padding: 0 var(--rand-seite) 96px; align-items: start; }
.fw-zwei .gr-h3 { margin: 12px 0 20px; }
.fw-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fw-liste li { position: relative; padding-left: 32px; line-height: 1.5; }
.fw-liste li::before { content: ""; position: absolute; left: 0; top: .35em; width: 14px; height: 14px; border-radius: 50%; background: var(--farbe-dunkel); }
.fw-kosten { font-size: clamp(20px, 1.8vw, 28px); line-height: 1.4; margin: 12px 0 0; font-weight: 600; }
.zl-quer.zl-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.haken-karten.fw-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.haken-karten.fw-zwei-k { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fw-nutzen { padding-top: 0; }
.fw-beleg { padding: 0 var(--rand-seite) 96px; }
.fw-beleg-box { background: var(--farbe-dunkel); color: var(--farbe-weiss); border-radius: 24px; padding: clamp(28px, 4vw, 56px); max-width: 900px; }
.fw-beleg-box .gr-h3 { margin: 12px 0 16px; }
.fw-beleg-box p { line-height: 1.55; max-width: 60ch; }
.fw-beleg-box .textlink, .fw-beleg-box .meta { color: var(--farbe-weiss); }
.fw-leistungen { padding: 96px var(--rand-seite) 0; }
.fw-leistungen .gr-h3 { margin: 12px 0 24px; }
.fw-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.fw-chips a { display: inline-block; padding: 10px 18px; border: 1.5px solid var(--farbe-dunkel); border-radius: 999px; text-decoration: none; color: var(--farbe-dunkel); font-weight: 600; }
.fw-chips a:hover, .fw-chips a:focus-visible { background: var(--farbe-dunkel); color: var(--farbe-weiss); }
.fw-quelle { padding: 20px var(--rand-seite) 0; margin: 0; font-size: 14px; color: var(--farbe-gedaempft); }
@media (max-width: 1024px) { .haken-karten.fw-drei { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .fw-zwei { grid-template-columns: minmax(0, 1fr); } .zl-quer.zl-drei { grid-template-columns: minmax(0, 1fr); } .fw-kopf { padding-top: 72px; } }
@media (max-width: 767.98px) { .haken-karten.fw-zwei-k { grid-template-columns: minmax(0, 1fr); } }
.ehrlich > .meta { text-align: center; }
.prozess-kompakt .zl-quer { padding: 0; margin-top: 32px; }
.prozess-kompakt .zl-quer::before { left: 0; right: 0; }
@media (max-width: 900px) { .prozess-kompakt .zl-quer { padding-left: 72px; } .prozess-kompakt .zl-quer::before { left: 27px; } }

/* Korrekturen Anna 10.11.2026: Karten wie ein Kartenspiel (Bube, Dame, König, Ass), Zeilen bündig, FAQ in zwei unabhängigen Spalten */
.haken .sektionskopf .haken-unter { max-width: none; }
.haken-start { grid-auto-rows: auto; }
.haken-start .haken-karte { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-items: start; padding-bottom: 44px; }
.haken-start .haken-karte .ik-icon { margin-bottom: 20px; }
.haken-start .haken-karte .textlink { margin-top: 8px; align-self: end; justify-self: start; }
.haken-rang { position: absolute; top: 18px; right: 22px; font-family: var(--schrift-ueberschrift); font-size: 34px; line-height: 1; color: var(--farbe-dunkel); }
.haken-rang-unten { top: auto; bottom: 14px; transform: rotate(180deg); color: var(--farbe-primaer); }
.haken-karte:nth-child(odd) .haken-rang-unten { color: var(--farbe-dunkel); }
.faq-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 24px; align-items: start; }
.faq-spalte { display: grid; gap: 16px; align-content: start; }
@media (max-width: 767.98px) { .faq-spalten { grid-template-columns: minmax(0, 1fr); } }
.ehrlich + .dk { margin-top: 112px; }
.haken-rang { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.haken-rang::after { content: ""; width: 14px; height: 14px; background: currentColor; }
.haken-karte:nth-child(1) .haken-rang::after { border-radius: 50%; }
.haken-karte:nth-child(3) .haken-rang::after { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.haken-karte:nth-child(4) .haken-rang::after { height: 7px; border-radius: 14px 14px 0 0; }
.fw-paket { padding: 0 var(--rand-seite) 96px; }
.fw-paket-box { border: 1.5px solid var(--farbe-dunkel); border-radius: 24px; padding: clamp(28px, 4vw, 56px); max-width: 900px; }
.fw-paket-box .gr-h3 { margin: 12px 0 24px; }
.fw-preis { margin: 32px 0 8px; }
.fw-preis-zahl { font-family: var(--schrift-ueberschrift); font-size: clamp(40px, 5vw, 72px); line-height: 1; }
.fw-preis .lsx-netto { font-size: 18px; }
/* Karten abstrakter (Anna 10.11.2026: Bube, Dame, König, Ass zu plakativ): nur die Bauhaus-Form in zwei Ecken */
.haken-rang { gap: 0; font-size: 0; top: 24px; }
.haken-rang::after { width: 20px; height: 20px; }
.haken-karte:nth-child(4) .haken-rang::after { height: 10px; border-radius: 20px 20px 0 0; }
.haken-rang-unten { top: auto; bottom: 20px; }
.ehrlich + .dk { margin-top: 160px; }
@media (max-width: 767.98px) { .ehrlich + .dk { margin-top: 96px; } }
/* Hero der Für-wen-Seiten mit Illustration rechts (Anna 10.11.2026) */
.fw-kopf-bild { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px 64px; align-items: center; }
.fw-kopf-bild .fw-h1 { max-width: 16ch; }
.fw-bild { margin: 0; }
.fw-bild img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .fw-kopf-bild { grid-template-columns: minmax(0, 1fr); } .fw-bild { max-width: 520px; } }
/* Karten wie Fragekarten eines Kartenspiels (Vorlagen Anna 10.11.2026): oben das Problem auf Weiß, unten die Lösung auf Blau */
.haken-start .haken-karte { grid-row: span 4; padding: 28px 28px 0; overflow: hidden; border-radius: 24px; border-width: 2px; }
.haken-start .haken-nutzen { display: flex; flex-direction: column; align-self: stretch; margin: 20px -28px 0; padding: 24px 28px 28px; border-top: 0; background: var(--farbe-primaer); color: var(--farbe-weiss); }
.haken-start .haken-nutzen p { margin: 0 0 20px; font-weight: 600; }
.haken-start .haken-nutzen .meta { color: var(--farbe-weiss); }
.haken-start .haken-nutzen .meta::before { background: var(--farbe-weiss); }
.haken-start .haken-nutzen .textlink { margin-top: auto; color: var(--farbe-weiss); border-color: var(--farbe-weiss); align-self: flex-start; }
.haken-start .haken-karte .textlink:focus-visible { outline-color: var(--farbe-weiss); }
.fw-kopf-bild .fw-h1 { max-width: none; font-size: clamp(40px, 4.6vw, 84px); }
/* Karten zweifarbig wie Fragekarten (Vorlagen Anna 10.11.2026): oben Problem auf Creme, unten Lösung auf Blau, je eine kleine Illustration */
.haken-start .haken-karte { background: var(--farbe-creme); border: 0; }
.hk-bild { display: block; width: 120px; height: 72px; margin-bottom: 20px; }
.haken-start .haken-nutzen .hk-loesung { margin-bottom: 18px; }
/* Leistungsseiten: „Was Sie davon haben“ und „Für Sie, wenn“ (Anna 10.11.2026) */
.lsx-gewinn { padding: 64px var(--rand-seite) 0; }
.lsx-gewinn-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 64px; align-items: start; }
.lsx-gewinn .gr-h3 { margin: 12px 0 24px; }
.lsx-gewinn-liste { list-style: none; counter-reset: g; margin: 0; padding: 0; display: grid; gap: 16px; }
.lsx-gewinn-liste li { counter-increment: g; position: relative; padding: 0 0 16px 56px; border-bottom: 1.5px solid var(--farbe-grau-hell); font-size: clamp(18px, 1.4vw, 22px); line-height: 1.45; }
.lsx-gewinn-liste li::before { content: counter(g, decimal-leading-zero); position: absolute; left: 0; top: 2px; font-family: var(--schrift-meta); font-size: 15px; color: var(--farbe-primaer); }
.lsx-fuer { background: var(--farbe-creme); border-radius: 24px; padding: 28px; }
.lsx-fuer ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.lsx-fuer a { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--farbe-weiss); border-radius: 14px; color: var(--farbe-dunkel); text-decoration: none; font-weight: 600; }
.lsx-fuer a:hover, .lsx-fuer a:focus-visible { background: var(--farbe-dunkel); color: var(--farbe-weiss); }
@media (max-width: 900px) { .lsx-gewinn-raster { grid-template-columns: minmax(0, 1fr); } }
/* Selbsttest und KI-Zeitrechner (Anna 10.11.2026) */
.st { padding: 0 var(--rand-seite) 96px; }
.st-form { display: grid; gap: 14px; max-width: 900px; }
.st-frage { margin: 0; padding: 20px 24px; border: 1.5px solid var(--farbe-grau-hell); border-radius: 18px; }
.st-frage.st-fehlt { border-color: var(--farbe-dunkel); }
.st-frage legend { padding: 0 8px; margin-left: -8px; font-weight: 600; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.4; }
.st-nr { font-family: var(--schrift-meta); font-size: 14px; color: var(--farbe-primaer); margin-right: 6px; }
.st-wahl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.st-wahl label { position: relative; }
.st-wahl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.st-wahl label { display: inline-flex; padding: 8px 16px; border: 1.5px solid var(--farbe-dunkel); border-radius: 999px; font-weight: 600; cursor: pointer; }
.st-wahl label:has(input:checked) { background: var(--farbe-dunkel); color: var(--farbe-weiss); }
.st-wahl label:has(input:focus-visible) { outline: 3px solid var(--farbe-primaer); outline-offset: 2px; }
.st-ergebnis { max-width: 900px; margin-top: 48px; padding: clamp(24px, 4vw, 48px); background: var(--farbe-creme); border-radius: 24px; }
.st-ergebnis:focus { outline: none; }
.st-ergebnis .gr-h3 { margin: 12px 0 24px; }
.st-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.st-liste a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, 30%) auto; gap: 16px; align-items: center; padding: 14px 18px; background: var(--farbe-weiss); border-radius: 14px; color: var(--farbe-dunkel); text-decoration: none; font-weight: 600; }
.st-oben a { outline: 2px solid var(--farbe-primaer); }
.st-balken { height: 10px; border-radius: 5px; background: var(--farbe-grau-hell); overflow: hidden; }
.st-balken i { display: block; height: 100%; width: var(--wert, 0); background: var(--farbe-primaer); transition: width .6s; }
.st-link { font-size: 15px; white-space: nowrap; }
.st-weiter { display: flex; flex-wrap: wrap; gap: 12px 16px; margin: 28px 0 0; }
@media (max-width: 767.98px) { .st-liste a { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
.kr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: start; }
.kr-form { display: grid; gap: 22px; }
.kr-form label, .kr-form legend { display: grid; gap: 8px; font-weight: 600; }
.kr-form input[type="number"] { font: inherit; padding: 12px 16px; border: 1.5px solid var(--farbe-dunkel); border-radius: 12px; max-width: 200px; }
.kr-form input[type="range"] { accent-color: var(--farbe-primaer); width: 100%; }
.kr-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.kr-form fieldset label { display: flex; gap: 10px; align-items: center; font-weight: 500; }
.kr-form output { font-weight: 400; color: var(--farbe-gedaempft); }
.kr-ergebnis { padding: clamp(24px, 4vw, 48px); background: var(--farbe-creme); border-radius: 24px; }
.kr-zahl { margin: 12px 0 0; font-family: var(--schrift-ueberschrift); font-size: clamp(56px, 7vw, 112px); line-height: 1; }
.kr-zahl small { display: block; font-family: var(--schrift-text); font-size: 18px; font-weight: 600; margin-top: 8px; }
.kr-zahl-klein { font-size: clamp(36px, 4vw, 56px); margin-top: 24px; }
@media (max-width: 900px) { .kr { grid-template-columns: minmax(0, 1fr); } }
.haken-test { margin: 16px 0 0; }
/* Brotkrumen auf Unterseiten (werkzeuge/brotkrumen.py, Anna 10.11.2026) */
.bk-nav { padding: 32px var(--rand-seite) 0; }
.bk-nav .brotkrumen { margin: 0; }
.bk-nav + .fw-kopf { padding-top: 48px; }
.st-hinweis { margin: 0; font-weight: 600; min-height: 1em; }
.kr-wert { margin: -14px 0 0; color: var(--farbe-gedaempft); }
.kr-form > label[for] { margin-bottom: -14px; }


/* Startseiten-Hero mit Spiel (Anna 10.11.2026): Hero zentriert, darunter das Spiel freistehend wie beim Dino-Spiel (nur Bodenlinie, kein Rahmen),
   Figur läuft durch Leipzig (Baustellen, Autos, Bäume), kurze Demo vorab, dann Start-Button. */
.sp-hero { text-align: center; padding: 72px var(--rand-seite) 48px; }
.sp-titel { font-family: var(--schrift-ueberschrift); text-transform: uppercase; font-size: clamp(48px, 8.4vw, 150px); line-height: 1.05; margin: 12px 0 20px; }
.sp-hero h1 { font-family: var(--schrift-text); text-transform: none; letter-spacing: 0; font-size: clamp(20px, 2vw, 30px); line-height: 1.35; font-weight: 500; max-width: 34ch; margin: 0 auto 28px; }
.sp-hero .hero-knoepfe { display: flex; flex-wrap: wrap; gap: 12px 16px; justify-content: center; margin: 0 0 24px; }
.spiel { max-width: 1400px; margin: 0 auto; }
.spiel-buehne { position: relative; }
.spiel canvas { display: block; width: 100%; height: auto; aspect-ratio: 960 / 290; cursor: pointer; touch-action: manipulation; }
.spiel canvas:focus-visible { outline: 3px solid var(--farbe-primaer); outline-offset: 4px; border-radius: 8px; }
.spiel-meldung { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); margin: 0; padding: 10px 20px; background: var(--farbe-dunkel); color: #fff; border-radius: 999px; font-weight: 600; font-size: clamp(15px, 1.3vw, 20px); pointer-events: none; white-space: nowrap; }
.spiel-meldung[hidden] { display: none; }
.spiel-start { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); font-size: clamp(18px, 1.6vw, 24px); padding: 1rem 2rem; }
.spiel-start[hidden] { display: none; }
.spiel-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.spiel-leistungen { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.spiel-leistungen a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border: 1.5px solid var(--farbe-grau-hell); border-radius: 999px; color: var(--farbe-gedaempft); text-decoration: none; font-weight: 600; font-size: 15px; transition: border-color .3s, color .3s, transform .3s; }
.spiel-leistungen i { width: 18px; height: 18px; background: var(--f); opacity: .4; transition: opacity .3s; }
.spiel-leistungen .ist-gesammelt a { border-color: var(--farbe-dunkel); color: var(--farbe-dunkel); transform: scale(1.06); }
.spiel-leistungen .ist-gesammelt i { opacity: 1; }
.sl-kreis { border-radius: 50%; } .sl-halb { border-radius: 18px 18px 0 0; height: 9px !important; } .sl-dreieck { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.spiel-knoepfe { display: flex; gap: 8px; }
.spiel-knoepfe button { font: inherit; font-weight: 600; font-size: 15px; padding: 6px 14px; border: 1.5px solid var(--farbe-dunkel); border-radius: 999px; background: #fff; cursor: pointer; }
.spiel-knoepfe button[aria-pressed="true"] { background: var(--farbe-dunkel); color: #fff; }
.spiel-sieg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(255,255,255,.94); text-align: center; padding: 12px; }
.spiel-sieg[hidden] { display: none; }
.spiel-sieg p { margin: 0; font-weight: 600; }
.spiel-sieg .gross { font-family: var(--schrift-ueberschrift); font-size: clamp(32px, 4vw, 64px); line-height: 1.1; }
.spiel-sieg .knoepfe { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.spiel-hilfe { margin: 10px 0 0; font-size: 15px; color: var(--farbe-gedaempft); text-align: left; }
/* herausfliegende Leistung: steigt aus dem Block bis in die Schrift */
.spiel-flug { position: absolute; z-index: 50; pointer-events: none; transform: translate(-50%, 0); padding: 6px 12px 6px 34px; background: #fff; border: 2px solid var(--farbe-dunkel); border-radius: 999px; font-weight: 700; font-size: 16px; white-space: nowrap; animation: spiel-flug 1.5s cubic-bezier(.2,.7,.3,1) forwards; }
.spiel-flug::before { content: ""; position: absolute; left: 8px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--f); }
.spiel-flug-kreis::before { border-radius: 50%; } .spiel-flug-halbkreis::before { height: 9px; margin-top: -4px; border-radius: 18px 18px 0 0; } .spiel-flug-dreieck::before { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
@keyframes spiel-flug { 0% { opacity: 0; transform: translate(-50%, 0) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -40px) scale(1.1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -260px) rotate(-6deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .spiel-flug { animation-duration: .01s; } }
@media (max-width: 767.98px) { .spiel canvas { aspect-ratio: 960 / 360; } .spiel-sieg .gross { font-size: 28px; } .spiel-meldung { white-space: normal; width: 86%; text-align: center; } }
  .sp-fakten { max-width: 980px; margin: 40px auto 0; text-align: left; }
/* Spiel Fassung 3 (Anna 10.11.2026): Chips mit Abstand und hellgrauer Linie, Icon-Buttons, kleinere Hilfe */
.spiel-leistungen { gap: 10px 14px; }
.spiel-leistungen a, .spiel-leistungen .ist-gesammelt a { border-color: var(--farbe-grau-hell); }
.spiel-hilfe { font-size: 13px; line-height: 1.5; }
.spiel-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0 !important; border: 1.5px solid var(--farbe-grau-hell) !important; border-radius: 50% !important; background: var(--farbe-weiss) !important; color: var(--farbe-dunkel) !important; cursor: pointer; }
.spiel-icon svg { width: 22px; height: 22px; }
.spiel-icon:hover, .spiel-icon:focus-visible { border-color: var(--farbe-dunkel) !important; }
.spiel-icon[data-ton][aria-pressed="false"] .ton-an, .spiel-icon[data-ton][aria-pressed="true"] .ton-aus { display: none; }
.spiel-icon[data-pause][aria-pressed="false"] .icon-play, .spiel-icon[data-pause][aria-pressed="true"] .icon-pause { display: none; }
.spiel-leistungen a, .spiel-leistungen .ist-gesammelt a { border: 1px solid var(--farbe-hellgrau-2); }
.spiel-icon { border: 1px solid var(--farbe-hellgrau-2) !important; }
.spiel-sieg { background: rgba(255, 255, 255, .96); }
/* Leistungs-Chips gut lesbar (Anna 10.11.2026); gesammelt: Creme-Fläche */
.spiel-leistungen a { color: var(--farbe-dunkel); }
.spiel-leistungen i { opacity: 1; }
.spiel-leistungen .ist-gesammelt a { background: var(--farbe-creme); transform: none; }
/* Ende des Spiels (Anna 10.11.2026): Game over, Ergebnis groß, Rekord, Play again als runder schwarzer Play-Button */
.spiel-sieg { gap: 6px; }
.spiel-ende-meta { justify-content: center; }
.spiel-endgeld { font-family: var(--schrift-ueberschrift); font-size: clamp(40px, 5vw, 72px) !important; line-height: 1; margin: 6px 0 !important; }
.spiel-rekord { color: var(--farbe-gedaempft); font-size: 15px; min-height: 1em; }
.spiel-nochmal { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; padding: 0; border: 0; background: none; font: inherit; font-family: var(--schrift-ueberschrift); text-transform: uppercase; font-size: 18px; letter-spacing: .04em; color: var(--farbe-dunkel); cursor: pointer; }
.spiel-nochmal-kreis { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--farbe-dunkel); color: var(--farbe-weiss); transition: transform .2s; }
.spiel-nochmal-kreis svg { width: 30px; height: 30px; margin-left: 4px; }
.spiel-nochmal:hover .spiel-nochmal-kreis, .spiel-nochmal:focus-visible .spiel-nochmal-kreis { transform: scale(1.08); }
.spiel-nochmal:focus-visible { outline: 3px solid var(--farbe-primaer); outline-offset: 4px; border-radius: 12px; }
@media (max-width: 767.98px) { .spiel-endgeld { font-size: 34px !important; } .spiel-nochmal-kreis { width: 56px; height: 56px; } }
@media (max-width: 767.98px) { .spiel-sieg { position: relative; inset: auto; padding: 16px 0; background: var(--farbe-weiss); } }
/* Ende kompakt neben dem Play-again-Button, damit alles im Spielfeld Platz hat */
.spiel-sieg { flex-direction: row; gap: 24px 48px; flex-wrap: wrap; }
.spiel-ende-text { display: grid; gap: 4px; text-align: left; }
.spiel-ende-text .meta { justify-content: flex-start; }
.spiel-sieg .gross { font-size: clamp(26px, 3vw, 48px); }
.spiel-endgeld { font-size: clamp(28px, 3.2vw, 52px) !important; margin: 4px 0 !important; }
.spiel-endgeld .spiel-rekord { font-family: var(--schrift-text); font-size: 15px; font-weight: 600; vertical-align: middle; margin-left: 10px; }
.spiel-nochmal { margin-top: 0; }
@media (max-width: 767.98px) { .spiel-sieg { flex-direction: column; } .spiel-ende-text { text-align: center; } .spiel-ende-text .meta { justify-content: center; } }
/* Ende lässt die Anzeige oben frei, damit man das Ergebnis oben rechts lesen kann */
@media (min-width: 768px) { .spiel-sieg { inset: 16% 0 0 0; background: rgba(255, 255, 255, .9); } }
/* Zähler in den Lösungs-Chips (Anna 12.11.2026): wie oft die Lösung im Spiel ergriffen wurde; ersetzt die Formen oben rechts im Spiel */
.spiel-leistungen .sl-zahl { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin: 0 -6px 0 2px; padding: 0 6px; border-radius: 999px; background: var(--farbe-dunkel); color: var(--farbe-weiss); font-size: 13px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.spiel-leistungen .sl-zahl[hidden] { display: none; }
/* Spielen-Button rechts neben der Figur, damit die Demo dahinter sichtbar bleibt (Anna 12.11.2026) */
.spiel-start { left: 74%; top: 40%; }
.spiel-meldung { top: 2%; }
@media (max-width: 767.98px) { .spiel-start { left: 76%; top: 64%; padding: .55rem 1rem; font-size: 15px; white-space: nowrap; } .spiel-meldung { font-size: 13px; padding: 6px 12px; } }

/* ===== Startseite 12.11.2026 (Anna): Köpfe mittig, „Wo es gerade hakt“ schlanker, Projekte als Kacheln, LinkedIn-Leiste ===== */
.sk-mitte { text-align: center; }
.sk-mitte > * { margin-left: auto; margin-right: auto; }
/* Wo es gerade hakt: nur Titel und blauer Nutzen je Karte; Selbsttest-Link mittig unter den Karten */
.haken-start .haken-karte { grid-row: span 2; padding-top: 32px; }
.haken-start .haken-karte h3 { margin-bottom: 0; }
.haken-test-unten { margin: 40px var(--rand-seite) 0; text-align: center; text-wrap: balance; }
/* Am Handy bricht der Link um: Unterstreichung nur unter dem Text, nicht über die ganze Breite */
.haken-test-unten .textlink { display: inline; line-height: 1.6; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Projekte: große Kacheln, Titelbild füllt die Fläche, Kunde und Schlagzeile unten auf einem Verlauf in der Hausfarbe */
.start-projekte .referenz-rahmen { padding-bottom: 40px; }
.pg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.pg-karte { position: relative; display: block; border-radius: 28px; overflow: hidden; color: var(--farbe-weiss); text-decoration: none; isolation: isolate; }
.pg-karte.pg-hell { color: var(--farbe-dunkel); }
.pg-karte:focus-visible { outline: 3px solid var(--farbe-primaer); outline-offset: 4px; }
.pg-bild .pc { aspect-ratio: 4 / 3; border-radius: 0; transition: transform .6s ease; }
.pg .pc-desktop { top: 7%; bottom: 22%; border-radius: 12px; }
.pg .pc-handy { top: 13%; }
.pg-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: block; padding: 14% 112px 36px 40px; background: linear-gradient(to top, var(--pc-farbe) 30%, color-mix(in srgb, var(--pc-farbe) 75%, transparent) 62%, transparent); }
.pg-kunde { display: block; margin-bottom: 8px; font-size: clamp(15px, 1.2vw, 18px); }
.pg-titel { margin: 0; font-family: var(--schrift-ueberschrift); font-weight: 400; font-size: clamp(30px, 3.2vw, 52px); line-height: 1.15; letter-spacing: .5px; text-transform: uppercase; }
.pg-pfeil { position: absolute; right: 32px; bottom: 36px; z-index: 5; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--farbe-weiss); color: var(--farbe-dunkel); font-size: 1.3rem; transition: transform .3s ease; }
.pg-hell .pg-pfeil { background: var(--farbe-dunkel); color: var(--farbe-weiss); }
.pg-karte:hover .pc { transform: scale(1.03); }
.pg-karte:hover .pg-pfeil { transform: translateX(4px); }
.pg-karte:hover .pc-desktop img, .pg-karte:hover .pc-handy img { object-position: 50% 100%; }
.start-projekte .ref-alle { margin: 0; text-align: center; }
@media (prefers-reduced-motion: reduce) { .pg-bild .pc, .pg-pfeil { transition: none; } .pg-karte:hover .pc { transform: none; } }
@media (max-width: 1024px) { .pg { gap: 20px; } .pg-text { padding: 18% 88px 26px 26px; } .pg-pfeil { right: 22px; bottom: 26px; width: 46px; height: 46px; } }
@media (max-width: 767.98px) { .pg { grid-template-columns: minmax(0, 1fr); } .pg-bild .pc { aspect-ratio: 4 / 3.4; } .pg-text { padding: 16% 76px 22px 22px; } .pg-pfeil { right: 18px; bottom: 22px; width: 42px; height: 42px; font-size: 1.1rem; } .pg-titel { font-size: clamp(26px, 7.4vw, 34px); } }
/* LinkedIn: Leiste mit den eigenen Beiträgen, Bild im Hochformat, unten Datum und LinkedIn-Zeichen */
.li-abschnitt { padding-bottom: 96px; background: var(--farbe-creme); }
.li-ks { padding: 0 var(--rand-seite); }
.li-ks .ks-spur { gap: 20px; padding: 4px; margin: -4px; }
.li-ks .ks-spur > .li-karte { flex: 0 0 clamp(250px, 22vw, 320px); scroll-snap-align: start; }
.li-karte { display: flex; flex-direction: column; overflow: hidden; border: 2px solid transparent; border-radius: 24px; background: var(--farbe-weiss); color: var(--farbe-dunkel); text-decoration: none; transition: border-color .2s ease; }
.li-karte:hover { border-color: var(--farbe-primaer); }
.li-karte:focus-visible { outline: 3px solid var(--farbe-primaer); outline-offset: 2px; }
.li-karte img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.li-fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; font-size: 15px; }
.li-datum { display: inline-flex; align-items: center; gap: 8px; }
.li-datum svg { width: 18px; height: 18px; flex: none; }
.li-zeichen { width: 26px; height: 26px; flex: none; }
.li-alle { margin: 36px 0 0; text-align: center; }
@media (max-width: 767.98px) { .li-ks { padding: 0 var(--rand-seite-mobil); } .li-ks .ks-spur > .li-karte { flex-basis: 74%; } .li-abschnitt { padding-bottom: 64px; } .li-ks .ks-punkte { display: none; } }
/* Selbsttest: Formular und Ergebnis mittig */
.st-form, .st-ergebnis { margin-left: auto; margin-right: auto; }
.st-form > p, .st-hinweis { text-align: center; }
.st-ergebnis > .meta, .st-ergebnis > .gr-h3 { text-align: center; }
.st-weiter { justify-content: center; }
/* LinkedIn-Karten: Bezugsrahmen für den unsichtbaren Screenreader-Text, sonst ragt er aus der Leiste und die Seite lässt sich seitlich verschieben (12.11.2026) */
.li-karte { position: relative; }

/* Hero-Spiel (Anna 12.11.2026): Standbild beim Ankommen, Card rechts mit Überschrift und Spielen-Button; nach „Spielen“ erklärt
   ein Intro in der Card das Spiel. Die Card ersetzt die schwarzen Hinweise, die wie Buttons aussahen. Kein Geld mehr oben rechts. */
.spiel-karte { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; background: var(--farbe-weiss); border: 1px solid var(--farbe-hellgrau-2); border-radius: 24px; padding: 28px; }
.spiel-karte[hidden] { display: none; }
.spiel-karte p { margin: 0; }
.spiel-karte-schritt[hidden], .spiel-karte-text[hidden] { display: none; }
.spiel-karte-titel { font-family: var(--schrift-ueberschrift); text-transform: uppercase; font-size: clamp(26px, 2.2vw, 36px); line-height: 1.15; }
.spiel-karte-text { font-size: 17px; line-height: 1.5; }
.spiel-karte .spiel-start { position: static; transform: none; margin-top: 8px; font-size: 18px; padding: .8rem 1.6rem; white-space: nowrap; }
@media (min-width: 1024.02px) { .spiel-karte { position: absolute; right: 2%; top: 50%; transform: translateY(-50%); width: min(380px, 38%); } }
@media (max-width: 1024px) { .spiel-karte { margin-top: 14px; padding: 22px; } }
.spiel-leistungen .sl-zahl.sl-null { background: var(--farbe-hellgrau-2); color: var(--farbe-dunkel); }

/* Problem-Karten der Startseite wie hingelegte Karten (Anna 12.11.2026, Vorlage Kacheln auf zwetschke.de): leicht gedreht, überlappend */
.haken-gelegt { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0; max-width: 1320px; margin: 0 auto; padding-top: 24px; padding-bottom: 32px; }
.haken-gelegt .haken-karte { --dreh: 0deg; --hoch: 0px; position: relative; margin: 0 -10px; transform: translateY(var(--hoch)) rotate(var(--dreh)); transition: transform .4s cubic-bezier(.2,.7,.3,1); box-shadow: 0 24px 40px -28px rgba(14, 16, 17, .45); }
.haken-gelegt .haken-karte:nth-child(1) { --dreh: -5deg; --hoch: 12px; z-index: 1; }
.haken-gelegt .haken-karte:nth-child(2) { --dreh: 3deg; --hoch: -8px; z-index: 2; }
.haken-gelegt .haken-karte:nth-child(3) { --dreh: -2deg; --hoch: 16px; z-index: 3; }
.haken-gelegt .haken-karte:hover, .haken-gelegt .haken-karte:focus-within { --dreh: 0deg; --hoch: -6px; z-index: 5; }
@media (max-width: 1200px) { .haken-karten.haken-gelegt { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .haken-karten.haken-gelegt { grid-template-columns: minmax(0, 1fr); row-gap: 20px; max-width: 560px; } .haken-gelegt .haken-karte { margin: 0; } .haken-gelegt .haken-karte:nth-child(n) { --dreh: 1.5deg; --hoch: 0px; } .haken-gelegt .haken-karte:nth-child(even) { --dreh: -1.5deg; } }
@media (prefers-reduced-motion: reduce) { .haken-gelegt .haken-karte { transition: none; } }
/* Gelegte Karten: dicke weiße Innenkante, damit sie sich voneinander abheben (Anna 12.11.2026) */
.haken-gelegt .haken-karte { border: 6px solid var(--farbe-weiss); }

/* Entwurf Startseite nach Content-Strategie (Anna 12.11.2026): Kernkompetenzen mit Retainer hervorgehoben, Branchen-Galerie,
   Ablauf als Satz im Intro, Blog als Zeile unter LinkedIn, Abschluss mit Gesicht */
.ls-kern .ls-hervor .ls-bild { background: var(--farbe-creme); box-shadow: inset 0 0 0 4px var(--farbe-dunkel); }
.ls-kern .ls-hervor .meta { margin-top: 8px; }
.ls-kern .ls-hervor .ls-karte-titel { margin-top: 0; }
.ls-weitere { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin: -24px 0 0; padding: 0 var(--rand-seite); }
.intro-ablauf { margin: 0 0 16px; max-width: 52ch; }
.br-start { padding: 96px var(--rand-seite); }
.br-kopf { max-width: 640px; margin-bottom: 40px; }
.br-kopf p:last-child { margin: 12px 0 0; font-size: clamp(18px, 1.45vw, 22px); }
.br-galerie { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.br-kachel { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 0 0 24px; text-decoration: none; color: inherit; }
.br-bild { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 24px; background: var(--farbe-creme); }
.br-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.br-kachel:hover .br-bild img { transform: scale(1.03); }
.br-name { font-family: var(--schrift-ueberschrift); text-transform: uppercase; font-size: clamp(24px, 2vw, 32px); line-height: 1.15; margin-top: 12px; padding-right: 56px; }
.br-text { color: var(--farbe-gedaempft); }
.br-kachel:focus-visible { outline: 3px solid var(--farbe-primaer); outline-offset: 6px; border-radius: 24px; }
.br-weitere { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; margin: 24px 0 0; }
.li-blog { text-align: center; margin: 32px 0 0; padding: 0 var(--rand-seite); }
.wz-person { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 0 auto 36px; text-align: left; }
.wz-person img { width: 88px; height: 88px; border-radius: 50%; }
.wz-person p { margin: 0; line-height: 1.6; }
@media (max-width: 1024px) { .br-galerie { grid-template-columns: minmax(0, 1fr); max-width: 560px; } .br-start { padding: 64px var(--rand-seite); } }
@media (max-width: 767.98px) { .wz-person { flex-direction: column; text-align: center; } .ls-weitere { margin-top: -8px; } }
/* Korrekturen Anna 12.11.2026 (2): Card links, Spielregel hervorgehoben; Problem-Karten auf Schwarz mit doppelt dicker weißer Kante */
@media (min-width: 1024.02px) { .spiel-karte { right: auto; left: 2%; } }
.spiel-karte-regel { margin: 4px 0 0 !important; padding: 10px 14px; border-radius: 12px; background: var(--farbe-creme); font-weight: 700; font-size: 17px; line-height: 1.45; }
.spiel-karte-regel[hidden] { display: none; }
.haken-schwarz { background: var(--farbe-dunkel); color: var(--farbe-weiss); padding-top: 96px; padding-bottom: 96px; }
.haken-schwarz > .sektionskopf .gr-h2, .haken-schwarz > .sektionskopf .meta { color: var(--farbe-weiss); }
.haken-schwarz .haken-test .textlink { color: var(--farbe-weiss); border-color: var(--farbe-weiss); }
.haken-gelegt .haken-karte { border-width: 12px; box-shadow: none; }
@media (max-width: 767.98px) { .haken-gelegt .haken-karte { border-width: 8px; } }
.haken-schwarz > .sektionskopf .meta::before { background: var(--farbe-weiss); }
@media (min-width: 900.02px) { .weg-ziel .gr-h2 { max-width: none; font-size: clamp(3rem, 7.4vw, 9rem); } .wz-zeile { display: block; white-space: nowrap; } }
@media (min-width: 900.02px) { .weg-ziel .gr-h2.wz-eine { max-width: none; white-space: nowrap; font-size: clamp(3rem, 7.4vw, 9rem); } }
/* Über mich (Anna 12.11.2026): Überschrift in der linken Spalte, rechte Spalte beginnt oben auf derselben Höhe; Abstand vor „So arbeite ich“ */
.profil-zweispaltig .profil-wer-kopf { padding: 0 0 32px; }
#so-arbeite-ich { margin-top: 96px; padding-top: 96px; }
/* Leistungen der Startseite: Bauhaus-Formen statt Clay-Icons, kleiner, vier nebeneinander (Anna 12.11.2026) */
.ls-kern { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 32px; }
.ls-kern .ls-bild { aspect-ratio: 3 / 2; }
.ls-kern .ls-karte .ls-bild img { width: 34%; mix-blend-mode: normal; }
.ls-kern .ls-karte-titel { font-size: clamp(24px, 1.9vw, 32px); }
@media (max-width: 1024px) { .ls-kern { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599.98px) { .ls-kern { grid-template-columns: minmax(0, 1fr); } }
/* Mega-Menü Branchen (Anna 12.11.2026): wie Leistungen, rechts das KI-Arbeits-Setup als Angebot */
.mm-branchen .mm-bereiche { grid-template-columns: minmax(0, 1fr); }
.mm-branchen .mm-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
/* Branchen-Raster nach dem Muster von IT Sonix (Anna 12.11.2026): oben links Text, daneben große Kachel, darunter Kacheln;
   bei sechs Branchen: 1 groß, 3 klein, 1 groß, 1 klein */
.br-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.br-raster > li { min-width: 0; }
.br-raster > li:nth-child(2), .br-raster > li:nth-child(6) { grid-column: span 2; }
.br-raster > li:nth-child(4):last-child { grid-column: span 2; }
.br-kopf { align-self: start; padding: 8px 24px 0 0; }
.br-kopf .gr-h2 { font-size: clamp(36px, 3.4vw, 56px); line-height: 1.12; margin: 12px 0 16px; }
.br-kopf p { margin: 0 0 16px; font-size: 18px; line-height: 1.5; }
.br-kachel { position: relative; display: block; height: 100%; min-height: 300px; overflow: hidden; border-radius: 24px; background: var(--farbe-creme); color: var(--farbe-dunkel); text-decoration: none; isolation: isolate; }
.br-kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 30%; padding: 16px 16px 72px; transition: transform .4s; }
.br-kachel:hover img { transform: scale(1.03); }
.br-name { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: block; padding: 48px 88px 24px 28px; font-family: var(--schrift-ueberschrift); text-transform: uppercase; font-size: clamp(22px, 1.8vw, 30px); line-height: 1.15; background: linear-gradient(to top, var(--farbe-creme) 55%, transparent); }
.br-pfeil { position: absolute; right: 24px; bottom: 22px; z-index: 3; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--farbe-dunkel); color: var(--farbe-weiss); font-size: 22px; transition: transform .3s; }
.br-kachel:hover .br-pfeil { transform: translateX(4px); }
.br-kachel:focus-visible { outline: 3px solid var(--farbe-primaer); outline-offset: 4px; }
@media (min-width: 1024.02px) { .br-kopf .gr-h2 { white-space: nowrap; } }
@media (max-width: 1024px) { .br-raster { grid-template-columns: minmax(0, 1fr); } .br-raster > li:nth-child(n) { grid-column: auto; } .br-kopf { padding: 0; } .br-kachel { min-height: 0; aspect-ratio: 5 / 4; } }
@media (prefers-reduced-motion: reduce) { .br-kachel img, .br-pfeil { transition: none; } }
.br-raster .br-kopf { max-width: none; margin: 0; }
.haken-schwarz .haken-karte h3 { color: var(--farbe-dunkel); }
.intro-gruss-text p { margin: 0; } .intro-gruss-text .intro-frei { margin-top: 12px; }
/* Korrekturen Anna 12.11.2026 (3) */
/* Leistungen: drei nebeneinander, Form klein unten links in der Fläche, eine Zeile Text */
.ls-kern { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ls-kern .ls-bild { aspect-ratio: 16 / 9; place-items: end start; padding: 28px; }
.ls-kern .ls-karte .ls-bild img { width: 64px; height: 64px; }
.ls-kern .ls-karte:hover .ls-bild img { translate: 0 -6px; }
/* Intro: mehr Luft zwischen Foto und Text, „Mehr über mich“ in der Textspalte */
.intro-gruss { gap: 32px; align-items: flex-start; }
.intro-gruss-text .intro-mehr { margin-top: 20px; }
/* Branchen-Mosaik: Kopf und zwei Kacheln, dann drei, dann der Rest aufgeteilt; Bild links */
.br-raster > li:nth-child(2), .br-raster > li:nth-child(6), .br-raster > li:nth-child(4):last-child { grid-column: auto; }
@media (min-width: 1024.02px) { .br-raster > li:nth-child(7):nth-last-child(2) { grid-column: span 2; } } /* nur mehrspaltig: sonst entsteht am Handy eine zweite, schmale Spalte (Anna 13.11.2026) */
.br-kachel img { object-position: 0 30%; }
.br-raster-schlicht > li:nth-child(n) { grid-column: auto; }
.br-weitere-branchen { padding: 0 var(--rand-seite) 120px; }
.br-weitere-branchen .gr-h3 { margin: 8px 0 32px; }
/* Häufige Fragen: einspaltig, mittig, ohne weiße Fläche; Plus wird beim Öffnen zum X */
.faq-liste.faq-spalten, .faq-liste.faq-einspaltig { display: flex; flex-direction: column; gap: 0; max-width: 880px; margin-left: auto; margin-right: auto; }
.faq-spalten .faq-spalte { display: contents; }
.faq-eintrag { background: transparent; border: 0; border-bottom: 1.5px solid var(--farbe-dunkel); border-radius: 0; }
.faq-liste .faq-eintrag:first-child { border-top: 1.5px solid var(--farbe-dunkel); }
.faq-spalten .faq-spalte + .faq-spalte .faq-eintrag:first-child { border-top: 0; } /* sonst doppelte Linie in der Mitte (Anna 13.11.2026) */
.faq-eintrag summary { padding: 24px 4px; text-align: left; }
.faq-eintrag summary::after { content: "+"; width: auto; height: auto; border: 0; font-size: 34px; font-weight: 300; line-height: 1; transform: rotate(0); transition: transform .3s cubic-bezier(.2,.7,.3,1); }
.faq-eintrag[open] summary::after { transform: rotate(45deg); }
.faq-eintrag .faq-antwort { padding: 0 4px 24px; text-align: left; }
/* Branchenseiten: Sprungmarken, Einleitung, Einwand */
.br-sprung { padding: 0 var(--rand-seite) 48px; }
.br-sprung ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.br-sprung a { display: inline-block; padding: 8px 16px; border: 1.5px solid var(--farbe-dunkel); border-radius: 999px; color: inherit; text-decoration: none; font-weight: 600; }
.br-sprung a:hover, .br-sprung a:focus-visible { background: var(--farbe-dunkel); color: var(--farbe-weiss); }
.br-einleitung { max-width: 62ch; margin: 16px auto 0; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.55; }
.br-einwand { background: var(--farbe-creme); border-radius: 24px; padding: 32px; }
[id="herausforderungen"], [id="website"], [id="referenz"], [id="vorgehen"], [id="fragen"] { scroll-margin-top: calc(var(--kopf-hoehe) + 24px); }
.br-kurz { max-width: 880px; margin: 0 auto 48px; padding: 28px 32px; border-left: 4px solid var(--farbe-primaer); background: var(--farbe-hellgrau); border-radius: 0 20px 20px 0; } .br-kurz p:last-child { margin: 8px 0 0; font-size: 18px; line-height: 1.55; }
/* Branchenseiten: Foto über die volle Breite, blau eingefärbt (Anna 12.11.2026: „mehr Bildwelt“, Inspiration Duoton in Blau) */
.br-foto { position: relative; margin: 0 var(--rand-seite) 64px; border-radius: 28px; overflow: hidden; aspect-ratio: 12 / 5; background: var(--farbe-dunkel); isolation: isolate; }
.br-foto img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.br-foto::after { content: ""; position: absolute; inset: 0; background: var(--farbe-primaer); mix-blend-mode: color; pointer-events: none; }
.br-foto figcaption { position: absolute; right: 16px; bottom: 12px; z-index: 2; padding: 2px 10px; border-radius: 999px; background: rgba(14, 16, 17, .6); color: var(--farbe-weiss); font-size: 12px; }
@media (max-width: 767.98px) { .br-foto { aspect-ratio: 4 / 3; margin-bottom: 40px; } }
.br-einleitung { margin-left: 0; }
.faq-liste.faq-spalten, .faq-liste.faq-einspaltig { align-items: stretch; } .faq-liste .faq-eintrag { width: 100%; }
/* Fuß mit allen wichtigen Links (Anna 12.11.2026): Kontakt, Leistungen, Branchen, Studio */
@media (min-width: 1024.02px) { .fuss-spalten { grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) and (max-width: 1024px) { .fuss-spalten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Flipcards „Wo es gerade hakt“ (Anna 12.11.2026, nach Vorbild pappelbaum-design.de): vorne das Problem, hinten die Lösung.
   Dreht sich beim Drüberfahren, mit Tastatur (Fokus auf dem Link der Rückseite) und per Tippen am Handy; keine Beschriftung
   („zu didaktisch“, Anna). Rückseite ruhig: Hinweis oben, Aussage groß, Link unten über feiner Linie, kleines Bild oben rechts.
   Ohne JavaScript und bei „Bewegung reduzieren“ ohne Drehung. */
.haken-start .hk-flip { display: block; grid-row: auto; padding: 0; overflow: visible; background: var(--farbe-weiss); }
.hk-innen { position: relative; height: 100%; }
.hk-vorne { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 32px; background: var(--farbe-creme); border-radius: 12px; min-height: 300px; }
.hk-nr { font-family: var(--schrift-meta); font-size: 13px; letter-spacing: .08em; color: var(--farbe-grau); }
.haken-start .hk-flip h3 { margin: 0; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.15; }
.hk-zeichen { position: absolute; right: 24px; bottom: 24px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(14, 16, 17, .18); color: var(--farbe-dunkel); font-size: 17px; line-height: 1; }
.haken-start .hk-flip .hk-hinten { position: relative; display: flex; flex-direction: column; margin: 0; padding: 32px; border-radius: 12px; min-height: 300px; }
.haken-start .hk-flip .hk-hinten .hk-bild { position: absolute; top: 28px; right: 28px; width: 56px; height: 34px; margin: 0; }
.haken-start .hk-flip .hk-hinten .meta { margin: 0 0 20px; padding-right: 72px; font-size: 12px; opacity: .85; }
.haken-start .hk-flip .hk-hinten p { margin: 0 0 28px; font-size: clamp(18px, 1.35vw, 21px); line-height: 1.4; font-weight: 500; }
.haken-start .hk-flip .hk-hinten .textlink { margin-top: auto; align-self: stretch; padding-top: 16px; border: 0; border-top: 1px solid rgba(255, 255, 255, .4); font-weight: 600; text-decoration: none; }
:where(.js) .hk-innen { display: grid; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
:where(.js) .hk-vorne, :where(.js) .hk-hinten { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
:where(.js) .hk-hinten { transform: rotateY(180deg); }
:where(.js) .hk-flip.gedreht .hk-innen, :where(.js) .hk-flip:focus-within .hk-innen { transform: rotateY(180deg); }
@media (hover: hover) { :where(.js) .hk-flip:hover .hk-innen { transform: rotateY(180deg); } }
html:not(.js) .hk-zeichen { display: none; }
@media (prefers-reduced-motion: reduce) { :where(.js) .hk-innen { transition: none; } }
/* Inhaltsverzeichnis „Leistung im Überblick“ nach dem Vorbild IT Sonix (Anna 12.11.2026): graue Spur, eine aktive weiße Pille */
.anker { padding: 0 var(--rand-seite) 72px; }
.anker-titel { margin: 0 0 24px; font-family: var(--schrift-ueberschrift); text-transform: uppercase; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.15; }
.anker-spur { list-style: none; margin: 0; padding: 8px; display: flex; gap: 4px; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; background: var(--farbe-hellgrau-2); border-radius: 999px; box-shadow: 0 22px 36px -28px rgba(14, 16, 17, .45); }
.anker-spur::-webkit-scrollbar { display: none; }
.anker-spur a { display: block; padding: 14px 28px; border-radius: 999px; color: var(--farbe-dunkel); text-decoration: none; font-weight: 500; letter-spacing: .02em; white-space: nowrap; transition: background .25s, box-shadow .25s; }
.anker-spur a:hover { background: rgba(255, 255, 255, .6); }
.anker-spur a.aktiv { background: var(--farbe-weiss); box-shadow: 0 4px 14px rgba(14, 16, 17, .12); }
.anker-spur a:focus-visible { outline: 3px solid var(--farbe-primaer); outline-offset: -3px; }
@media (max-width: 767.98px) { .anker { padding-bottom: 48px; } .anker-spur a { padding: 10px 18px; font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .anker-spur a { transition: none; } }
/* Branchen-Kacheln (Anna 12.11.2026): Bild und Text berühren sich nie, kein Verlauf */
.br-kachel { display: flex; flex-direction: column; }
.br-kachel img { position: static; inset: auto; flex: 1 1 auto; min-height: 0; width: 100%; height: auto; aspect-ratio: 5 / 3; padding: 24px 24px 0; object-position: 0 100%; }
.br-name { position: static; padding: 20px 88px 28px 28px; background: none; }
@media (max-width: 1024px) { .br-kachel { aspect-ratio: auto; } }
/* „Weitere Branchen“ als Mosaik: Kopf an erster Stelle, Größen wechseln (Anna 12.11.2026) */
.br-weitere-branchen { padding-top: 24px; }
@media (min-width: 1024.02px) {
  .br-raster.br-mosaik > li:nth-child(n) { grid-column: auto; }
  .br-raster.br-mosaik > li:nth-child(2), .br-raster.br-mosaik > li:nth-child(6), .br-raster.br-mosaik > li:nth-child(9) { grid-column: span 2; }
}
/* Branchenseiten: Foto neben der Liste, „Bei Bedarf“, Projekte wie auf der Startseite */
.br-website { align-items: center; }
.br-foto-spalte { margin: 0; aspect-ratio: 4 / 3; }
.br-bedarf { margin: 24px 0 0; font-size: 18px; line-height: 1.5; }
.br-bedarf .meta { display: block; margin-bottom: 6px; }
.br-herausforderung .br-einleitung { margin-left: auto; margin-right: auto; text-align: center; }
.br-stimmen { margin-top: 48px; }
.br-kachel img { aspect-ratio: auto; height: clamp(200px, 20vw, 280px); flex: none; }
.br-herausforderung + .br-website { padding-top: 112px; }
@media (max-width: 767.98px) { .br-herausforderung + .br-website { padding-top: 64px; } }
/* Korrekturen Anna 13.11.2026 */
.anker-spur { position: relative; } /* Bezug für offsetLeft: sonst schiebt die Leiste das erste Wort aus dem Bild */
.br-stimmen-eine { display: block; max-width: 880px; margin-left: auto; margin-right: auto; }
.br-stimmen-eine .stimme { width: 100%; }
.zl-ausstieg { display: inline-block; margin-top: 16px; padding: 6px 14px; border-radius: 999px; background: var(--farbe-primaer); color: var(--farbe-weiss); font-size: 14px; font-weight: 600; }
/* Projekt-Cards (Anna 13.11.2026): Mockup frei oben, Text darunter im schwarzen Bereich, kein Verlauf über dem Bild */
.pg-karte { background: var(--pc-farbe); display: flex; flex-direction: column; }
.pg-bild .pc { aspect-ratio: 16 / 10; }
.pg .pc-desktop { top: 9%; bottom: 4%; }
.pg .pc-handy { top: 15%; bottom: 0; }
.pg-text { position: static; padding: 8px 112px 36px 40px; background: none; }
@media (max-width: 1024px) { .pg-text { padding: 6px 88px 26px 26px; } }
@media (max-width: 767.98px) { .pg-bild .pc { aspect-ratio: 16 / 11; } .pg-text { padding: 4px 76px 22px 22px; } }
.br-stimmen-eine { columns: auto; }
/* Eine Referenz mit Kennzahlen daneben (Anna 13.11.2026): gleiche Höhe, große Zahlen, die hochzählen */
.br-ref { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: stretch; padding: 0 var(--rand-seite); }
.br-ref .referenz-rahmen { padding: 0; margin: 0; min-width: 0; }
.br-ref .pg { grid-template-columns: minmax(0, 1fr); height: 100%; }
.br-ref .pg > li, .br-ref .pg-karte { height: 100%; }
.br-zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr 1fr; gap: 0 32px; padding: 36px 40px; border-radius: 28px; background: var(--farbe-creme); min-width: 0; }
.br-zahlen-titel { grid-column: 1 / -1; margin: 0 0 8px; font-family: var(--schrift-meta); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--farbe-grau); }
.br-zahl { display: flex; flex-direction: column; justify-content: flex-end; margin: 0; padding: 20px 0; border-top: 1.5px solid var(--farbe-dunkel); font-size: 16px; line-height: 1.4; }
.br-zahl strong { display: block; margin-bottom: 8px; font-family: var(--schrift-ueberschrift); font-weight: 400; font-size: clamp(64px, 7.5vw, 128px); line-height: .95; font-variant-numeric: tabular-nums; }
.br-zahl small { font-size: .38em; letter-spacing: .02em; }
@media (max-width: 1024px) { .br-ref { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599.98px) { .br-zahlen { padding: 28px 24px; gap: 0 20px; } .br-zahl strong { font-size: clamp(48px, 16vw, 72px); } }
/* Mega-Menü (Anna 13.11.2026): Inhaltsbreite wie die Seite, „Weitere Leistungen“ als Zeile unten, Karten ruhig wie bei Apple */
.mm-innen { max-width: none; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 56px; }
.mm-bereiche-leistungen { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 0 56px; }
.mm-weitere-zeile { grid-column: 1 / -1; align-self: end; margin-top: 24px; }
.kopf-nav .mm-weitere-zeile .mm-weitere { display: flex; flex-wrap: wrap; gap: 0 40px; border-top: var(--rahmen) solid var(--farbe-rahmen); }
.kopf-nav .mm-weitere-zeile .mm-weitere a { border-top: 0; padding: 14px 0 0; }
.mm-karte.mm-karte-dunkel { gap: 0; padding: 36px; justify-content: flex-start; }
.mm-karte-icon { width: 80px; height: 80px; border-radius: 20px; background: var(--farbe-creme); padding: 12px; margin-bottom: 40px; }
.mm-karte-dunkel .meta { margin: auto 0 10px; }
.mm-karte-dunkel .mm-karte-titel { margin: 0 0 16px; }
.mm-karte-dunkel > span:not([class]) { line-height: 1.55; margin: 0 0 28px; }
.mm-karte-dunkel .button { margin-top: 0; }
@media (min-width: 1024.02px) and (max-width: 1200px) { .mm-innen { gap: 32px; } .mm-bereiche-leistungen { gap: 0 32px; } }