@charset "utf-8";
/* Anfang Optik-Klassen (technik.js): Überschrift mit korrigierter Stufe behält das Aussehen der Designer-Stufe, z. B. <h3 class="h6"> */
.h1 { font-size: 1.6rem; color: #333333; line-height: 120%; text-align: left; font-weight: bold; margin-top: 0.67em; margin-bottom: 0.67em; }
.h2 { font-size: 1.3rem; color: #990000; line-height: 120%; text-align: left; font-weight: bold; margin-top: 0.83em; margin-bottom: 0.83em; }
.h3 { font-size: 1.4rem; color: #333333; line-height: 120%; text-align: left; font-weight: 500; margin-top: 1em; margin-bottom: 1em; }
.h4 { font-size: 1.6rem; color: #333333; line-height: 120%; text-align: center; font-weight: 500; margin-top: 1.33em; margin-bottom: 1.33em; }
.h5 { font-size: 1.5rem; color: #333333; line-height: 120%; text-align: left; font-weight: 300; margin-top: 1.67em; margin-bottom: 1.67em; }
.h6 { font-size: 1.5rem; color: #333333; line-height: 120%; text-align: left; font-weight: 600; margin-top: 2.33em; margin-bottom: 2.33em; }
/* Ende Optik-Klassen */



/* SACHScom – Stylesheet (mobile first). Farben aus dem Logo: Rot #900, Dunkelgrau #333, Grau #666 */

/* ---------- Farben & Grundwerte ---------- */
:root {
  --rot: #990000;            /* Leitfarbe: Buttons, Akzente, Hauptüberschriften – 8,9:1 auf Weiß */
  --rot-dunkel: #6e0000;     /* Hover */
  --rot-hell: #fbf1f1;       /* ganz zarter Rotton für Flächen */
  --dunkel: #333333;         /* Text, Überschriften, Fußzeile – 12,6:1 auf Weiß */
  --grau: #666666;           /* Nebentexte, Dachzeilen – 5,7:1 auf Weiß */
  --grau-hell: #f5f5f5;      /* Abschnittshintergrund */
  --linie: #e2e2e2;
  --weiss: #ffffff;
  --text: #333333;
  --text-grau: #666666;
  --fokus: #990000;
  --fokus-dunkel: #ffd54f;   /* Fokus auf dunklem/rotem Grund */
  --radius: 4px;
  --radius-btn: 3px;
  --schatten: 0 4px 16px rgba(0, 0, 0, 0.08);
  --breite: 75rem;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
[id] { scroll-margin-top: 9.5rem; }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--weiss);
}

img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1em; }

/* ---------- Schrift-Klassen (Hausregel) ---------- */
.schrift1 { font-size: 1.2em; color: #990000; text-align: left; line-height: 1.2; font-weight: bold; }
.schrift2 { font-size: 1.1em; color: #333333; line-height: 1.2; }
.schrift3 { font-size: 1.1em; color: #999; line-height: 1.2; }
.schrift4 { font-size: 1.0em; color: #990000; line-height: 1.0; text-decoration: underline; }
.schrift5 { font-size: 1.0em; color: #FFF; text-align: center; }
.schrift6 { font-size: 1.6em; color: #FFF; text-align: center; }

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

.wrap { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 1rem; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Sprunglink „Zum Inhalt springen“ */
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 1000;
  background: var(--dunkel); color: var(--weiss); padding: 0.75rem 1rem; border-radius: var(--radius);
}
.skip-link:focus { top: 1rem; color: var(--weiss); }

/* ---------- Handy/Tablet: Leiste oben – fixiert ---------- */
/* hell und freundlich wie das Desktop-Menü (20.10.2026, vorher dunkelgrau) */
.mobilleiste { position: sticky; top: 0; z-index: 600; background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--dunkel); border-bottom: 1px solid var(--linie); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }
.mobilleiste__inner { display: flex; align-items: center; gap: 0.5rem; min-height: 56px; }
.mobilleiste__inner > a { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.2s ease; }
.mobilleiste__inner > a:hover { background: var(--grau-hell); }
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-width: 44px; min-height: 44px;
  margin-left: auto; margin-right: -0.25rem; padding: 0 0.9rem 0 0.75rem; font: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer;
  color: var(--dunkel); background: var(--grau-hell); border: 1px solid var(--linie); border-radius: 999px; transition: background 0.2s ease, color 0.2s ease;
}
.nav-toggle::after { content: "Menü"; content: "Menü" / ""; } /* sichtbare Beschriftung, für Screenreader leer (dort liest das sr-only „Menü“) */
.nav-toggle:hover, .nav-toggle[aria-expanded="true"] { background: var(--dunkel); color: var(--weiss); border-color: var(--dunkel); }
.nav-toggle .icon { width: 22px; height: 22px; }
.no-js .nav-toggle { display: none; }

/* ---------- Kopfbereich: Handy = Logo mittig ---------- */
.site-header { background: var(--weiss); }
.header__inner { display: flex; flex-direction: column; align-items: center; padding-top: 1.5rem; padding-bottom: 0.75rem; }
.logo { display: block; }
.logo img { width: min(72vw, 300px); height: auto; }
.kontaktzeile { display: none; }

/* ---------- Navigation Handy ---------- */
#hauptmenue { display: none; }
#hauptmenue.is-open {
  display: block; position: fixed; top: 56px; left: 0; right: 0; z-index: 590;
  max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); overflow-y: auto;
  background: var(--weiss); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); padding: 0 1rem;
}
.no-js #hauptmenue { display: block; width: 100%; }

.nav { list-style: none; margin: 0; padding: 0.25rem 0 1rem; }
.nav li { margin: 0; }
.nav li::marker { content: none; }
.nav__item + .nav__item { border-top: 1px solid var(--linie); }
.nav__link, .nav__toggle {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  font: inherit; font-size: 1rem; font-weight: 600; color: var(--dunkel); text-decoration: none;
  background: none; border: 0; padding: 0.75rem 0.25rem; cursor: pointer; text-align: left; min-height: 44px;
}
.nav__toggle::after {
  content: ""; width: 0.5em; height: 0.5em; margin-left: 0.5rem; flex: 0 0 auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform 0.2s;
}
.nav__toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }
.nav__link:hover, .nav__toggle:hover { color: var(--rot); text-decoration: underline; }
.nav__link[aria-current="page"] { color: var(--rot); }
.subnav { list-style: none; margin: 0; padding: 0 0 0.5rem 1rem; display: none; }
.nav__toggle[aria-expanded="true"] + .subnav { display: block; }
.no-js .subnav { display: block; }
.subnav a { display: block; padding: 0.5rem 0.25rem; font-size: 1rem; color: var(--dunkel); text-decoration: none; min-height: 44px; }
.subnav a:hover { color: var(--rot); text-decoration: underline; }
.nav__cta { display: inline-block; margin-top: 0.75rem; }

/* ---------- Desktop: Logo links, rechts Kontaktzeile + Menü – fixiert ---------- */
@media (min-width: 80em) {
  .mobilleiste { display: none; }
  .site-header { position: sticky; top: 0; z-index: 500; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }
  .header__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; padding-top: 1rem; padding-bottom: 1rem; }
  .logo img { width: 230px; }
  .header__rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; }
  .kontaktzeile { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; font-size: 0.95rem; }
  .kontaktzeile li { margin: 0; }
  .kontaktzeile li::marker { content: none; }
  .kontaktzeile a { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--grau); text-decoration: none; font-size: 0.95rem; }
  .kontaktzeile a:hover { color: var(--rot); text-decoration: underline; }
  .kontaktzeile img { width: 22px; height: 22px; }

  #hauptmenue, .no-js #hauptmenue { display: block; width: auto; }
  .nav { display: flex; align-items: center; gap: 0.1rem; padding: 0; }
  .nav__item, .nav__item + .nav__item { border-top: 0; position: relative; }
  .nav__link, .nav__toggle { width: auto; padding: 0.55rem 0.6rem; color: var(--dunkel); font-weight: 500; white-space: nowrap; }
  .nav__link:hover, .nav__toggle:hover { color: var(--rot); }
  .nav__link[aria-current="page"] {
    color: var(--rot); font-weight: 600; text-decoration: underline; text-decoration-color: var(--rot);
    text-decoration-thickness: 3px; text-underline-offset: 0.45em;
  }
  .subnav {
    position: absolute; top: 100%; left: 0; min-width: 17rem; padding: 0.5rem; z-index: 10;
    background: var(--weiss); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16); border-top: 3px solid var(--rot);
  }
  .nav__item:last-child .subnav, .nav__item:nth-last-child(2) .subnav, .nav__item:nth-last-child(3) .subnav { left: auto; right: 0; }
  .no-js .subnav { display: none; }
  .nav__item:hover > .subnav, .no-js .nav__item:focus-within > .subnav { display: block; }
  .subnav a { padding: 0.5rem 0.75rem; min-height: 0; }
  .subnav a:hover { background: var(--grau-hell); }
  .nav__cta { margin: 0 0 0 0.75rem; padding: 0.85rem 1.4rem; }
}

/* ---------- Buttons ---------- */
.btn, a.btn, a.btn:visited {
  display: inline-block; font: inherit; font-size: 1rem; font-weight: 700; text-decoration: none; text-align: center;
  padding: 0.85rem 1.4rem; border-radius: var(--radius-btn); border: 2px solid var(--rot);
  background: var(--rot); color: var(--weiss); cursor: pointer; min-height: 44px; line-height: 1.3;
}
.btn:hover, a.btn:hover { background: var(--rot-dunkel); border-color: var(--rot-dunkel); color: var(--weiss); text-decoration: underline; }
.btn--outline, a.btn--outline, a.btn--outline:visited { background: var(--weiss); color: var(--rot); }
.btn--outline:hover, a.btn--outline:hover { background: var(--rot); color: var(--weiss); }
.btn-gruppe { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

/* ---------- Abschnitte ---------- */
.section { padding: 3rem 0; }
.section--alt { background: var(--grau-hell); }
.section--cta { background: var(--rot); color: var(--weiss); text-align: center; }
.section--cta a:not(.btn) { color: var(--weiss); }
.section--cta :focus-visible { outline-color: var(--fokus-dunkel); }
.section--cta .btn, .section--cta a.btn:visited { background: var(--weiss); color: var(--rot); border-color: var(--weiss); }
.section--cta .btn:hover { background: var(--dunkel); border-color: var(--dunkel); color: var(--weiss); }
.section--cta .btn-gruppe { justify-content: center; }
.section__intro { max-width: 48rem; }
.section--cta .section__intro { margin-left: auto; margin-right: auto; }
.lead { font-size: 1.15rem; color: var(--text); }

/* Dachzeile */
.kicker { display: block; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rot); margin-bottom: 0.4rem; }

/* Abschnittstitel (Überschriften-Inhalt über Klassen gestaltet, Grundformat kommt aus style_wbs.css) */
.titel { display: block; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); font-weight: 800; line-height: 1.15; color: var(--dunkel); letter-spacing: -0.01em; }

/* h4 ist im Designer-CSS zentriert – für linksbündige Abschnittstitel */
h4.links, .h4.links { text-align: left; }

/* Vorteilszeile im Hero */

/* Haken-Liste */
.haken { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 0.45rem; }
.haken li { margin: 0; padding-left: 1.9rem; position: relative; font-weight: 600; }
.haken li::marker { content: none; }
.haken li::before {
  content: ""; position: absolute; left: 0; top: 0.35em; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--rot) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* ---------- Hero ---------- */
.page-hero { padding: 1rem 0 2.5rem; overflow-x: clip; }
.page-hero__grid { display: grid; gap: 1.75rem; align-items: center; }
.page-hero__grid > .bild img { border-radius: 0; box-shadow: none; }
.hero__slogan { display: block; font-size: clamp(2.3rem, 1.3rem + 4vw, 4rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.015em; margin-bottom: 0.35em; color: var(--dunkel); }
.hero__slogan2 { display: block; font-size: 1.3em; font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; margin-bottom: 0.4em; }
.hero__headline { display: block; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); font-weight: 600; color: var(--text); line-height: 1.35; }

/* ---------- Raster & Karten ---------- */
.karte { background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); padding: 1.5rem; border-top: 4px solid var(--rot); }
.karte p:last-child { margin-bottom: 0; }
.karte h5, .karte .h5 { margin-top: 0.25rem; margin-bottom: 0.75rem; }
/* Inhaber-Foto: vollständig zeigen (kein Beschnitt) und nicht größer als das Original darstellen, damit es scharf bleibt */
.bild.bild--inhaber { max-width: 30rem; justify-self: center; width: 100%; }
.bild.bild--inhaber > img { aspect-ratio: 762 / 672; object-fit: contain; width: 100%; max-width: 762px; }
.zweispaltig { display: grid; gap: 2rem; align-items: center; }
.bild { margin: 0; }
.bild img { border-radius: var(--radius); box-shadow: var(--schatten); width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Merksatz */

/* Zitat unter dem Bild */
.zitat { margin: 1.25rem 0 0; padding: 1.25rem 1.5rem; border-left: 5px solid var(--rot); background: var(--weiss); border-radius: 0 var(--radius) var(--radius) 0; box-shadow: var(--schatten); }
.zitat blockquote { margin: 0; }
.zitat p { font-size: 1.15rem; font-style: italic; margin-bottom: 0.5rem; }
.zitat figcaption { font-weight: 600; color: var(--text-grau); }
.zitat figcaption::before { content: "– "; }

/* ---------- Leistungen im Überblick (Karten mit Bild) ---------- */
.leistung__text h5, .leistung__text .h5 { margin: 0 0 0.7rem; text-align: left; hyphens: manual; font-weight: 700; font-size: 1.3rem; color: var(--dunkel); }

/* ---------- Kundenstimmen (Google-Bewertungen) ---------- */
.stimmen { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.stimme { margin: 0; background: var(--weiss); padding: 1.5rem; border-radius: var(--radius); box-shadow: var(--schatten); display: flex; flex-direction: column; }
.stimme__sterne { color: var(--rot); font-size: 1.15rem; letter-spacing: 0.15em; margin-bottom: 0.5rem; }
.stimme blockquote { margin: 0 0 1rem; flex: 1; }
.stimme blockquote p { margin: 0; }
.stimme figcaption { font-weight: 700; color: var(--dunkel); }
.stimme figcaption > span { display: block; font-weight: 400; font-size: 0.9rem; color: var(--text-grau); }
.echtheit { font-size: 0.9rem; color: var(--text-grau); margin-top: 1rem; }

/* ---------- Referenzen (Galerie) ---------- */
.hinweis { font-size: 0.95rem; color: var(--text-grau); margin-top: 1rem; }

/* ---------- Bildvorschau (js/main.js) ---------- */
html:has(.lightbox[open]) { overflow: hidden; }
.lightbox { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--weiss); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgba(20, 20, 20, 0.85); }
.lightbox :focus-visible { outline: 3px solid var(--fokus-dunkel); outline-offset: 3px; }
.lightbox__figur { margin: 0; width: 100%; height: 100%; padding: 4.5rem 1rem 6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; }
.lightbox__bild { max-width: min(100%, 1100px); max-height: 100%; width: auto; height: auto; min-height: 0; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
.lightbox__text { max-width: 60rem; text-align: center; font-size: 0.95rem; color: #eee; background: rgba(20, 20, 20, 0.85); padding: 0.4rem 0.9rem; border-radius: 6px; }
.lightbox__knopf { position: absolute; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; background: var(--rot); color: var(--weiss); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.lightbox__knopf:hover { background: var(--weiss); color: var(--rot); }
.lightbox__schliessen { top: 1rem; right: 1rem; }
.lightbox__zurueck { bottom: 1.25rem; left: calc(50% - 60px); }
.lightbox__weiter { bottom: 1.25rem; right: calc(50% - 60px); }
@media (min-width: 48em) {
  .lightbox__figur { padding: 4rem 6rem 3rem; }
  .lightbox__zurueck { bottom: auto; top: 50%; left: 1.5rem; transform: translateY(-50%); }
  .lightbox__weiter { bottom: auto; top: 50%; right: 1.5rem; transform: translateY(-50%); }
}

/* ---------- Regionen ---------- */
.regionen-links { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.regionen-links li { margin: 0; }
.regionen-links li::marker { content: none; }
.regionen-links a { display: inline-block; padding: 0.45rem 0.9rem; border: 2px solid var(--linie); border-radius: var(--radius-btn); background: var(--weiss); color: var(--dunkel); text-decoration: none; font-size: 0.95rem; }
.regionen-links a:hover { border-color: var(--rot); color: var(--rot); text-decoration: underline; }

/* ---------- FAQ (akkordion.css + Feinschliff) ---------- */
.faq .acc { margin: 0 0 0.5rem; min-width: 0; }   /* akkordion.css setzt 300px Mindestbreite – auf schmalen Handys zu breit */
.faq .acc .panel { padding-left: 1rem; padding-right: 1rem; }
.faq .acc label { font-weight: 600; }
.faq .acc label:nth-child(odd)::after { color: var(--rot); }

/* ---------- Kontaktformular ---------- */
.formular { display: grid; gap: 1.1rem; background: var(--weiss); color: var(--text); padding: 1.5rem; border-radius: var(--radius); box-shadow: var(--schatten); text-align: left; max-width: 48rem; margin: 0 auto; }
.formular label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.formular .pflicht { font-weight: 400; color: var(--text-grau); }
.formular input, .formular textarea { width: 100%; font: inherit; color: var(--text); padding: 0.7rem 0.8rem; border: 2px solid #8a8a8a; border-radius: 4px; background: var(--weiss); }
.formular textarea { min-height: 9rem; resize: vertical; }
.formular input:focus-visible, .formular textarea:focus-visible { outline: 3px solid var(--fokus); outline-offset: 1px; border-color: var(--dunkel); }
.formular .feld-hinweis { font-size: 0.95rem; color: var(--text-grau); margin: 0.3rem 0 0; }
.formular .datenschutz-hinweis { font-size: 0.95rem; margin: 0; }
.formular .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.section--cta .formular .btn { background: var(--rot); color: var(--weiss); border-color: var(--rot); }
.section--cta .formular .btn:hover { background: var(--rot-dunkel); border-color: var(--rot-dunkel); }
.section--cta .formular :focus-visible { outline-color: var(--fokus); }
.section--cta .formular a:not(.btn) { color: var(--rot); }

/* ---------- Fußzeile ---------- */
.site-footer { background: var(--dunkel); color: #e6e6e6; padding: 3rem 0 1.5rem; }
.site-footer a, .site-footer a:visited { color: var(--weiss); }
.site-footer a:hover { color: var(--weiss); text-decoration-thickness: 2px; }
.site-footer :focus-visible { outline-color: var(--fokus-dunkel); }
.footer__grid { display: grid; gap: 2rem; }
.footer__titel { color: var(--weiss); font-size: 1.15rem; margin-bottom: 0.75rem; padding-bottom: 0.4rem; border-bottom: 3px solid var(--rot); display: inline-block; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.4rem; }
.site-footer li::marker { content: none; }
.footer__social { display: flex; gap: 0.9rem; }
.footer__unten { border-top: 1px solid rgba(255, 255, 255, 0.25); margin-top: 2rem; padding-top: 1.25rem; font-size: 0.95rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; }

/* ---------- Tablet ---------- */
@media (min-width: 40em) {
  .stimmen { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .formular .zwei-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
}

/* ---------- Desktop ---------- */
@media (min-width: 64em) {
  .section { padding: 4.5rem 0; }
  .zweispaltig { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  .page-hero { padding: 2.5rem 0 4rem; }
  .page-hero__grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
  /* Bild läuft bis an den rechten Bildschirmrand */
  .page-hero__grid > .bild { margin-right: calc((min(100vw, var(--breite)) - 100vw) / 2 - 1rem); align-self: stretch; }
  .page-hero__grid > .bild img { height: 100%; min-height: 26rem; aspect-ratio: auto; }
  /* Gespiegelte Variante: Bild links bis an den Bildschirmrand (Hausregel) */
  .page-hero--bild-links .page-hero__grid > .bild { order: -1; margin-right: 0; margin-left: calc((min(100vw, var(--breite)) - 100vw) / 2 - 1rem); }
  .footer__grid { grid-template-columns: 1.3fr 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* =====================================================================
   Gestaltung (gewählter Entwurf B): großes Bild mit hellem Textfeld, runde Buttons mit Pfeil
   ===================================================================== */
:root { --radius: 14px; --radius-btn: 999px; --schatten: 0 8px 28px rgba(0, 0, 0, 0.09); }

/* Kopf: Kontaktzeile klein und hell, aktive Seite rot */
@media (min-width: 80em) {
  .kontaktzeile { font-size: 0.9rem; gap: 1.4rem; }
  .kontaktzeile img { width: 20px; height: 20px; }
  .nav__link[aria-current="page"] { font-weight: 500; text-decoration-thickness: 2px; }
  .nav__cta { padding: 0.75rem 1.4rem; }
}

/* Runde Buttons mit Pfeil */
.btn, a.btn, a.btn:visited { padding: 0.9rem 1.6rem; font-weight: 600; }
.btn--pfeil::before { content: "→"; display: inline-block; margin-right: 0.55rem; transition: transform 0.2s; }
.btn--pfeil:hover::before { transform: translateX(3px); }

/* ==========================================================================
   Hero „Schon heute bereit für die KI-Suche von morgen“ (20.10.2026)
   Handy: Bild oben, Text darunter. Desktop: Bild über die volle Breite, Text links auf weißem Verlauf,
   Enrico rechts frei. Hervorgehoben: Webdesign, Top bei Google, Vorreiter KI-Sichtbarkeit (GEO), 20+ Jahre.
   ========================================================================== */
.hero-k { position: relative; overflow: hidden; background: linear-gradient(180deg, #ffffff 0%, var(--grau-hell) 100%); }
.hero-k__bild { position: relative; margin: 0; }
.hero-k__bild img { width: 100%; height: clamp(16rem, 62vw, 28rem); object-fit: cover; object-position: 78% top; }
.hero-k__siegel { position: absolute; right: 0.9rem; top: 0.9rem; z-index: 2; display: grid; place-items: center; align-content: center; width: 5.6rem; height: 5.6rem; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #5c5f65 0%, #2a2c30 78%); color: var(--weiss); text-align: center; font-size: 0.68rem; font-weight: 700; line-height: 1.15; letter-spacing: 0.03em; text-transform: uppercase;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22); animation: siegel-schweben 6s ease-in-out infinite; }
.hero-k__siegel b { display: block; font-size: 2rem; line-height: 1; letter-spacing: -0.02em; text-transform: none; }
.hero-k__siegel sup { font-size: 0.55em; vertical-align: super; color: #ff5a5a; }
@keyframes siegel-schweben { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-6px) rotate(-2deg); } }
.hero-k__inhalt { position: relative; z-index: 1; padding-top: 1.6rem; padding-bottom: 2.4rem; }
/* Stichpunkte links im Bild – nur wenn das Bild über dem Text steht (Handy bis 1023 px), damit die freie Wand nicht „nackt“ wirkt */
.hero-k__bildpunkte { display: none; }
@media (max-width: 63.99em) {
  .hero-k__bildpunkte { display: grid; gap: 0.7rem; position: absolute; z-index: 2; left: max(1rem, 4vw); top: 50%; transform: translateY(-50%); width: min(21rem, 46%); margin: 0; padding: 0; list-style: none; }
  .hero-k__bildpunkte li { display: flex; align-items: center; gap: 0.7rem; margin: 0; padding: 0.75rem 1.1rem 0.75rem 0.75rem; border-radius: 14px;
    background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
    font-size: clamp(1rem, 0.75rem + 1vw, 1.2rem); font-weight: 800; line-height: 1.25; color: var(--dunkel);
    opacity: 0; animation: bildpunkt-ein 0.7s ease forwards; }
  .hero-k__bildpunkte li:nth-child(2) { animation-delay: 0.15s; }
  .hero-k__bildpunkte li:nth-child(3) { animation-delay: 0.3s; }
  .hero-k__bildpunkte li::marker { content: none; }
  .hero-k__bildpunkte li::before { content: ""; flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 50%;
    background: var(--rot) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 58% no-repeat; }
}
/* kleine Handys: kompaktere Stichpunkte, damit sie neben Enrico auf die freie Wand passen */
@media (max-width: 35.99em) {
  .hero-k__bild img { object-position: 70% top; } /* Enrico weiter nach rechts, mehr freie Wand links für die Stichpunkte */
  .hero-k__bildpunkte { gap: 0.4rem; left: 0.6rem; width: 50%; }
  .hero-k__siegel { top: auto; bottom: 0.6rem; right: 0.6rem; width: 4.6rem; height: 4.6rem; font-size: 0.56rem; } /* unten rechts auf dem Schreibtisch, nicht vor dem Gesicht */
  .hero-k__siegel b { font-size: 1.6rem; }
  .hero-k__bildpunkte li { gap: 0.45rem; padding: 0.45rem 0.6rem 0.45rem 0.45rem; border-radius: 10px; font-size: clamp(0.72rem, 0.45rem + 1.3vw, 0.9rem); line-height: 1.2; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); }
  .hero-k__bildpunkte li::before { width: 1.35rem; height: 1.35rem; }
}
@keyframes bildpunkt-ein { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-k__bildpunkte li { animation: none; opacity: 1; } }

/* stilisierte KI-Suchanfrage über der Überschrift */
.hero-k__suche { display: flex; align-items: center; gap: 0.6rem; width: fit-content; max-width: 100%; margin: 0 0 1.3rem; padding: 0.45rem 1rem 0.45rem 0.45rem; background: var(--weiss);
  border: 1px solid var(--linie); border-radius: 22px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); font-size: 0.95rem; color: var(--grau); }
.hero-k__suche-label { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--dunkel); color: var(--weiss); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; }
.hero-k__suche-label svg { fill: currentColor; animation: funkeln 2.4s ease-in-out infinite; }
@keyframes funkeln { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(1.18) rotate(12deg); opacity: 0.8; } }
.hero-k__frage { position: relative; min-width: 0; line-height: 1.35; padding-right: 3px; border-right: 2px solid var(--grau); animation: frage-cursor 1.1s steps(1) infinite; }
@keyframes frage-cursor { 50% { border-right-color: transparent; } }

/* Überschrift: Motto groß (nur „KI-Suche“ rot), „Webdesign in Leipzig & Halle“ in Grau */
.hero-k h1 { margin: 0 0 1rem; }
.hero-k .hero-k__motto { display: block; margin: 0 0 0.3em; font-size: clamp(2.1rem, 1.15rem + 3.3vw, 3.85rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; text-transform: none; color: var(--dunkel); }
.hero-k__marker { color: var(--rot); background: linear-gradient(transparent 70%, rgba(224, 0, 16, 0.16) 70%, rgba(224, 0, 16, 0.16) 94%, transparent 94%) no-repeat; background-size: 100% 100%; }
.hero-k .hero__slogan { font-size: clamp(1.35rem, 1rem + 1.15vw, 1.95rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; color: #555555; margin: 0 0 0.12em; }
.hero-k .hero__headline { font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem); font-weight: 600; line-height: 1.35; color: var(--dunkel); }
.hero-k__lead { max-width: 36rem; margin: 0 0 1.4rem; font-size: 1.05rem; line-height: 1.6; color: var(--text); }

/* drei Säulen: Webdesign · Google · KI – weiße Karten mit rotem Rand oben, Hover wie Abschnitt „Das Problem“ */
/* zweiter Knopf in Grau statt Rot */
.hero-k .btn--outline { color: var(--dunkel); border-color: var(--dunkel); }
.hero-k .btn--outline:hover { color: var(--weiss); background: var(--dunkel); border-color: var(--dunkel); }

@media (min-width: 64em) {
  /* bildschirmfüllend: ganze Fensterhöhe abzüglich Menüleiste (7,75rem) – mehr Platz, wirkt übersichtlicher */
  .hero-k { display: flex; align-items: center; min-height: calc(100vh - 7.75rem); min-height: calc(100svh - 7.75rem); background: var(--grau-hell); }
  .hero-k__bild { position: absolute; inset: 0; }
  .hero-k__bild img { height: 100%; object-position: 64% top; } /* Enrico rechts neben der Textspalte; „top“: Kopf wird nie angeschnitten */
  .hero-k__bild::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.94) 42%, rgba(255, 255, 255, 0.55) 54%, rgba(255, 255, 255, 0) 63%); }
  .hero-k__siegel { right: auto; left: 60%; top: 13%; width: 7.6rem; height: 7.6rem; font-size: 0.78rem; } /* links neben Enrico – rechts sitzt der eye-able-Knopf */
  .hero-k__siegel b { font-size: 2.8rem; }
  /* Größen wachsen/schrumpfen mit der Fensterhöhe (vh) – so passt alles auf einen Bildschirm, auch bei 1333 × 650 */
  .hero-k__inhalt { padding-top: min(3rem, 4vh); padding-bottom: min(3.4rem, 4.5vh); }
  .hero-k__suche { margin-bottom: min(1.8rem, 3vh); }
  .hero-k h1 { margin-bottom: min(2rem, 3vh); }
  .hero-k .hero-k__motto { margin-bottom: 0.3em; font-size: clamp(2.2rem, min(3.3vw, 6.4vh), 3.85rem); }
  .hero-k .hero__slogan { font-size: clamp(1.3rem, min(1rem + 1.15vw, 4vh), 1.95rem); }
  .hero-k__text { max-width: min(44rem, 54vw); }
  /* Tipp-Effekt der KI-Frage nur am Desktop (eine Zeile) */
  .hero-k__suche { border-radius: 999px; }
  .hero-k__frage { display: inline-block; white-space: nowrap; overflow: hidden; }
  .hero-k__frage { animation: frage-tippen 7s steps(56) 0.6s infinite both, frage-cursor 1.1s steps(1) infinite; }
}
@keyframes frage-tippen { 0% { max-width: 0; } 45%, 88% { max-width: 40rem; } 100% { max-width: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hero-k__siegel, .hero-k__suche-label svg, .hero-k__saeule--ki .hero-k__symbol svg, .hero-k__frage { animation: none !important; }
  .hero-k__frage { max-width: none !important; }
}

/* Einleitung unter dem Hero */
/* Abschnitt 2: Überschrift über die ganze Breite, nicht so fett (20.10.2026) */
.intro-ki__titel { margin: 0 0 2rem; font-size: clamp(1.35rem, 1rem + 1.1vw, 1.8rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; color: var(--dunkel); text-align: left; }
@media (min-width: 64em) { .intro-ki__titel { margin-bottom: 2.75rem; } }
@media (min-width: 30em) { .intro-ki__titel .nowrap { white-space: nowrap; } }
/* vierter, hervorgehobener Punkt in der Erfahrungs-Karte */

/* Zweiter Block mit runden Bildecken */
@media (min-width: 64em) {
  .page-hero--bild-links .page-hero__grid > .bild img { min-height: 30rem; border-radius: 0 var(--radius) var(--radius) 0; }
}
.page-hero--bild-links .hero__slogan2 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem); color: var(--dunkel); }

/* Weiche Flächen und Karten */
.section--alt { background: #f7f7f7; }
.karte { border-top: 0; }
.karte h5::before, .karte .h5::before { content: ""; display: block; width: 2.5rem; height: 4px; border-radius: 4px; background: var(--rot); margin-bottom: 0.9rem; }
.bild img, .galerie__link, .stimme, .karte, .formular, .zitat, .merksatz { border-radius: var(--radius); }
.regionen-links a { border-radius: 999px; }

/* Abschluss: dunkle Fläche statt rot – Buttons bleiben rot */
.section--cta { background: var(--dunkel); }
.section--cta .btn, .section--cta a.btn:visited { background: var(--rot); color: var(--weiss); border-color: var(--rot); }
.section--cta .btn:hover { background: var(--weiss); color: var(--rot); border-color: var(--weiss); }


/* =====================================================================
   Abschnitt „Warum wir? Der Unterschied …“ – helle, freundliche Bühne mit roten Akzenten und Effekten
   ===================================================================== */
.unterschied h4, .unterschied .h4 { color: var(--dunkel); }
.unterschied__kicker {
  display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem;
  font-size: 0.95rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rot);
}
.unterschied__kicker::before, .unterschied__kicker::after { content: ""; width: 2.25rem; height: 3px; border-radius: 3px; background: var(--rot); }

.unterschied__raster { display: grid; gap: 1.25rem; margin-top: 2.75rem; }
.vorteil {
  position: relative; overflow: hidden; padding: 2rem 1.6rem 1.8rem; border-radius: var(--radius);
  background: var(--weiss); border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.07);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, opacity 0.7s ease;
}
/* rote Linie oben an der Karte – immer sichtbar, beim Überfahren etwas kräftiger */
.vorteil::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #990000, #e00010, #ff5a5a); transition: height 0.3s ease;
}
/* Abheben + leuchtender roter Rand */
.vorteil:hover, .vorteil:focus-within {
  transform: translateY(-8px); border-color: rgba(224, 0, 16, 0.55);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(224, 0, 16, 0.35);
}
.vorteil:hover::before, .vorteil:focus-within::before { height: 6px; }
.vorteil__nr {
  position: absolute; top: 0.6rem; right: 1.1rem; font-size: 3.6rem; font-weight: 900; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(51, 51, 51, 0.16); transition: -webkit-text-stroke-color 0.35s ease;
}
.vorteil:hover .vorteil__nr { -webkit-text-stroke-color: rgba(224, 0, 16, 0.75); }
/* Symbol als rote Kugel – angelehnt an den Punkt im Logo */
.vorteil__symbol {
  display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; color: var(--weiss);
  background: radial-gradient(circle at 32% 28%, #ff5a5a 0%, #e00010 38%, #990000 100%);
  box-shadow: 0 8px 18px rgba(153, 0, 0, 0.28); transition: transform 0.35s ease;
}
.vorteil:hover .vorteil__symbol { transform: rotate(-8deg) scale(1.08); }
.vorteil h5, .vorteil .h5 { color: var(--dunkel); font-weight: 700; font-size: 1.25rem; line-height: 1.3; margin: 1.25rem 0 0.75rem; text-align: left; }
.vorteil p { color: var(--text-grau); margin: 0; }

.unterschied__merksatz {
  margin: 3.5rem auto 0; max-width: 56rem; text-align: center; color: var(--dunkel);
  font-size: clamp(1.35rem, 1rem + 1.5vw, 2.1rem); font-weight: 800; line-height: 1.3;
}
.unterschied__merksatz span { color: var(--rot); background: linear-gradient(transparent 72%, rgba(224, 0, 16, 0.16) 72%); }

/* Einblenden beim Scrollen (nur mit JavaScript, siehe js/effekte.js) */
.js-effekte .effekt-einblenden { opacity: 0; transform: translateY(28px); }
.js-effekte .effekt-einblenden.ist-sichtbar { opacity: 1; transform: none; }
.js-effekte .effekt-einblenden.ist-sichtbar:hover, .js-effekte .effekt-einblenden.ist-sichtbar:focus-within { transform: translateY(-8px); }
.js-effekte .unterschied__merksatz.effekt-einblenden { transition: opacity 0.8s ease, transform 0.8s ease; }
.js-effekte .unterschied__merksatz.effekt-einblenden.ist-sichtbar:hover { transform: none; }
.unterschied__raster .vorteil:nth-child(2) { transition-delay: 0.08s; }
.unterschied__raster .vorteil:nth-child(3) { transition-delay: 0.16s; }
.unterschied__raster .vorteil:nth-child(4) { transition-delay: 0.24s; }
.unterschied__raster .vorteil:hover { transition-delay: 0s; }

@media (min-width: 40em) { .unterschied__raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .unterschied__raster { grid-template-columns: repeat(4, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .js-effekte .effekt-einblenden { opacity: 1; transform: none; }
  .vorteil:hover, .vorteil:focus-within { transform: none; }
}

/* Kundenstimmen: roter Balken oben + Abheben und Leuchtrand beim Überfahren (wie „Warum wir?“) */
.stimme {
  position: relative; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.06);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.stimme::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #990000, #e00010, #ff5a5a); transition: height 0.3s ease;
}
.stimme:hover, .stimme:focus-within {
  transform: translateY(-8px); border-color: rgba(224, 0, 16, 0.55);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(224, 0, 16, 0.35);
}
.stimme:hover::before, .stimme:focus-within::before { height: 6px; }
@media (prefers-reduced-motion: reduce) { .stimme:hover, .stimme:focus-within { transform: none; } }
.stimmen + p { margin-top: 1.75rem; }

/* Einleitung: Erfahrungs-Karte rechts – gleich hoch wie der Text links */
/* „20+“ als rote Kugel – angelehnt an den Punkt im Logo */
/* Ziel-Band am Kartenende statt Buttons */

/* =====================================================================
   Abschnitt „Hand aufs Herz“ – kraftvoller: Schlagzeile, Störer, Warnkarten, rotes Fazit
   ===================================================================== */
.problem__markiert { color: var(--rot); background: linear-gradient(transparent 64%, rgba(224, 0, 16, 0.16) 64%, rgba(224, 0, 16, 0.16) 94%, transparent 94%); }
/* „Keine Anfragen. Keine Neukunden. Kein Umsatz.“ als große Schlagzeile mit roten Kreuzen */
.problem__folgen span::before, .problem__gruende li::before {
  content: ""; flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  box-shadow: 0 4px 10px rgba(153, 0, 0, 0.3);
}
.problem__folgen span::before, .problem__gruende li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E"), radial-gradient(circle at 32% 28%, #ff5a5a 0%, #e00010 38%, #990000 100%);
  background-size: 58%, cover; background-position: center; background-repeat: no-repeat;
}

/* Bild mit Störer „Seite 4 bei Google?“ */
@keyframes stoerer-schweben { 0%, 100% { transform: rotate(-10deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(-6px); } }

/* Die vier Gründe als Warnkarten */
.problem__gruende { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 1rem; }
.problem__gruende li {
  position: relative; overflow: hidden; margin: 0; display: flex; align-items: center; gap: 0.9rem;
  padding: 1.35rem 1.25rem 1.2rem; background: var(--weiss); border-radius: var(--radius);
  border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.07);
  font-weight: 700; color: var(--dunkel); line-height: 1.35;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, opacity 0.7s ease;
}
.problem__gruende li::marker { content: none; }
.problem__gruende li::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #990000, #e00010, #ff5a5a); transition: height 0.3s ease; }
.problem__gruende li:hover {
  transform: translateY(-6px); border-color: rgba(224, 0, 16, 0.55);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(224, 0, 16, 0.35);
}
.problem__gruende li:hover::after { height: 6px; }
.js-effekte .problem__gruende li.effekt-einblenden.ist-sichtbar:hover { transform: translateY(-6px); }
.problem__gruende li:nth-child(2) { transition-delay: 0.08s; }
.problem__gruende li:nth-child(3) { transition-delay: 0.16s; }
.problem__gruende li:nth-child(4) { transition-delay: 0.24s; }
.problem__gruende li:hover { transition-delay: 0s; }

/* Rotes Fazit-Band */

@media (min-width: 40em) { .problem__gruende { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) {
  .problem__gruende { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .problem__gruende li:hover { transform: none; } }

/* =====================================================================
   Kundenstimmen als eigener Abschnitt + Google-Siegel
   ===================================================================== */
.kundenstimmen { background: var(--weiss); }
.kundenstimmen__kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; }
.kundenstimmen__kopf .titel { display: block; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); }
.kundenstimmen__kopf .unterschied__kicker { display: flex; width: max-content; }
.google-siegel {
  display: inline-flex; align-items: center; gap: 0.9rem; padding: 0.85rem 1.3rem 0.85rem 1rem;
  background: var(--weiss); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--radius); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08);
}
.google-g { flex: 0 0 auto; width: 2.75rem; height: 2.75rem; }
.google-siegel__text { display: flex; flex-direction: column; line-height: 1.2; }
.google-siegel__titel { font-weight: 700; color: var(--dunkel); font-size: 0.95rem; }
.google-siegel__wert { display: flex; align-items: center; gap: 0.45rem; font-size: 1.35rem; }
.google-siegel__wert strong { color: var(--dunkel); }
.google-sterne { color: #FBBC04; letter-spacing: 0.06em; font-size: 1.3rem; }
h4 + .google-siegel, .h4 + .google-siegel { margin-top: 0.25rem; }
/* Sterne in den Karten im bekannten Google-Gelb, dazu das kleine „G“ */
.stimme__sterne { color: #FBBC04; }
.stimme figcaption > span { display: flex; align-items: center; gap: 0.35rem; }
.stimme__branche { font-size: 0.95rem; font-weight: 600; color: var(--rot); }
/* Erfolgsnachweis unter dem Namen: Domain-Link + Google-Platzierung */
.stimme__erfolg { margin: 0.9rem 0 0; padding-top: 0.85rem; border-top: 1px solid rgba(0, 0, 0, 0.08); font-weight: 400; display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; }
.stimme__link { font-family: inherit; font-size: 0.95rem; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(153, 0, 0, 0.4); text-underline-offset: 0.2em; word-break: break-word; }
/* :link/:visited mitnehmen, sonst gewinnt a:visited aus style_wbs.css und besuchte Links sehen anders aus */
.stimme__link, .stimme__link:link, .stimme__link:visited { color: var(--rot); }
.stimme__link:hover, .stimme__link:focus-visible { color: var(--dunkel); text-decoration-color: currentColor; }
.stimme__ranking { display: inline-flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem 0.8rem 0.5rem 0.55rem; border-radius: 10px; background: rgba(224, 0, 16, 0.07); color: var(--rot); font-size: 0.88rem; font-weight: 700; line-height: 1.35; }
.stimme__ranking::before {
  content: ""; flex: 0 0 auto; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / 62% no-repeat, radial-gradient(circle at 32% 28%, #ff5a5a 0%, #e00010 38%, #990000 100%);
}
.stimme figcaption > span::before { content: ""; width: 1rem; height: 1rem; flex: 0 0 auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* =====================================================================
   Referenzen als Karten: Bild (Lightbox), Branche, Name, Kurztext, Link
   ===================================================================== */
.referenzen { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.referenzen li::marker { content: none; }
.referenz {
  position: relative; margin: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--weiss); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: var(--radius);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.07);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, opacity 0.7s ease;
}
.referenz::before { content: ""; position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #990000, #e00010, #ff5a5a); transition: height 0.3s ease; }
.referenz:hover, .referenz:focus-within {
  transform: translateY(-8px); border-color: rgba(224, 0, 16, 0.55);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(224, 0, 16, 0.35);
}
.referenz:hover::before, .referenz:focus-within::before { height: 6px; }
.referenz:nth-child(4n+2) { transition-delay: 0.08s; }
.referenz:nth-child(4n+3) { transition-delay: 0.16s; }
.referenz:nth-child(4n+4) { transition-delay: 0.24s; }
.referenz:hover, .referenz:focus-within { transition-delay: 0s; }
.referenz__bild { display: block; overflow: hidden; cursor: zoom-in; background: var(--grau-hell); }
.referenz__bild img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 357; object-fit: cover; transition: transform 0.4s ease; }
.referenz:hover .referenz__bild img { transform: scale(1.05); }
.referenz__bild:focus-visible { outline: 3px solid var(--fokus); outline-offset: -3px; }
.referenz__inhalt { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 1.25rem 1.25rem 1.4rem; }
.referenz__branche { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rot); }
.referenz__name { margin: 0.35rem 0 0; font-size: 1.12rem; font-weight: 800; line-height: 1.3; color: var(--dunkel); }
.referenz__text { margin: 0.6rem 0 1.1rem; font-size: 0.95rem; line-height: 1.6; color: var(--text-grau); }
/* :link/:visited mitnehmen, sonst gewinnt a:visited aus style_wbs.css */
.referenz__link, .referenz__link:link, .referenz__link:visited {
  margin-top: auto; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1.1rem;
  border: 2px solid var(--rot); border-radius: 999px; font-family: inherit; font-size: 0.92rem; font-weight: 700;
  color: var(--rot); text-decoration: none; transition: background 0.25s ease, color 0.25s ease;
}
.referenz__link::after { content: "→"; transition: transform 0.25s ease; }
/* Google-Platzierung hervorgehoben (wie bei den Kundenstimmen) */
.referenz__ranking {
  display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.8rem 0 0.2rem; padding: 0.65rem 0.9rem 0.65rem 0.65rem;
  border-radius: 10px; background: rgba(224, 0, 16, 0.07); border-left: 4px solid var(--rot);
  color: var(--rot); font-size: 0.95rem; font-weight: 700; line-height: 1.4;
}
.referenz__ranking::before {
  content: ""; flex: 0 0 auto; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / 62% no-repeat, radial-gradient(circle at 32% 28%, #ff5a5a 0%, #e00010 38%, #990000 100%);
}
.referenz__ranking--treue::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 62% no-repeat, radial-gradient(circle at 32% 28%, #ff5a5a 0%, #e00010 38%, #990000 100%);
}
.referenz__text + .referenz__text { margin-top: -0.4rem; }
.referenz__text strong { color: var(--dunkel); }
.referenz__text em { color: var(--dunkel); }
.referenz__link:hover, .referenz__link:focus-visible { background: var(--rot); color: var(--weiss); }
.referenz__link:hover::after { transform: translateX(3px); }
@media (min-width: 40em) { .referenzen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .referenzen { gap: 2rem; } .referenz__inhalt { padding: 1.6rem 1.9rem 1.9rem; } }
@media (prefers-reduced-motion: reduce) {
  .referenz:hover, .referenz:focus-within, .js-effekte .referenz.effekt-einblenden.ist-sichtbar:hover { transform: none; }
  .referenz:hover .referenz__bild img { transform: none; }
}
/* Abschnittstitel Referenzen wie Kundenstimmen: Kicker + große Zeile (Span bleibt laut Hausregel) */
#referenzen .unterschied__kicker { display: flex; width: max-content; }
.hero__headline.referenzen__titel { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 800; line-height: 1.15; color: var(--dunkel); }

/* =====================================================================
   Abschnitt „Warum Unternehmen … auf SACHScom setzen“ – stärker hervorgehoben
   ===================================================================== */
/* Siegel darf am Rand nicht seitlich überlaufen */

/* Die vier Gründe als nummerierte Vorteilszeilen */
.warum__gruende { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: 0.9rem; }
.warum__gruende li {
  position: relative; margin: 0; display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.1rem 1.25rem; background: var(--weiss); border-radius: var(--radius);
  border: 1px solid rgba(0, 0, 0, 0.06); border-left: 5px solid var(--rot);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.07); line-height: 1.5;
  transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.7s ease;
}
.warum__gruende li::marker { content: none; }
.warum__gruende li:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.11); }
.js-effekte .warum__gruende li.effekt-einblenden.ist-sichtbar:hover { transform: translateX(6px); }
.warum__gruende li:nth-child(2) { transition-delay: 0.08s; }
.warum__gruende li:nth-child(3) { transition-delay: 0.16s; }
.warum__gruende li:nth-child(4) { transition-delay: 0.24s; }
.warum__gruende li:hover { transition-delay: 0s; }
.warum__nr {
  flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
  color: var(--weiss); font-weight: 800; font-size: 0.95rem;
  background: radial-gradient(circle at 32% 28%, #ff5a5a 0%, #e00010 38%, #990000 100%);
  box-shadow: 0 6px 14px rgba(153, 0, 0, 0.28);
}
.warum__inhalt { color: var(--text-grau); }
.warum__inhalt strong { display: block; font-size: 1.12rem; color: var(--dunkel); margin-bottom: 0.15rem; }
/* Zielgruppe als Schlagwörter */
.warum__tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.warum__tags li {
  margin: 0; padding: 0.4rem 0.95rem; border-radius: 999px; background: var(--weiss);
  border: 1px solid rgba(153, 0, 0, 0.35); color: var(--rot); font-weight: 700; font-size: 0.92rem;
}
.warum__tags li::marker { content: none; }
/* Foto mit „20+ Jahre“-Siegel */
@media (prefers-reduced-motion: reduce) { .js-effekte .warum__gruende li.effekt-einblenden.ist-sichtbar:hover { transform: none; } }

/* Hinweis im Regionen-Abschnitt: wofür die Ortslinks da sind */
.regionen-hinweis {
  position: relative; max-width: 52rem; margin: 1.25rem 0 1.5rem; padding: 1rem 1.25rem 1rem 3.6rem;
  background: var(--weiss); border-left: 5px solid var(--rot); border-radius: var(--radius);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.07); font-size: 0.98rem; line-height: 1.6;
}
.regionen-hinweis strong { color: var(--rot); }
.regionen-hinweis::before {
  content: "i"; position: absolute; left: 1rem; top: 1rem; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: grid; place-items: center; color: var(--weiss); font-weight: 800; font-style: italic; font-family: Georgia, serif;
  background: radial-gradient(circle at 32% 28%, #ff5a5a 0%, #e00010 38%, #990000 100%);
}

/* Copyright-Zeile als Abschluss ganz unten (nach dem Regionen-Abschnitt) */
.site-footer--abschluss { padding: 1.25rem 0; }
.site-footer--abschluss .footer__unten { border-top: 0; margin-top: 0; padding-top: 0; }

/* Qualifikation unter dem Inhaber-Zitat, farblich abgesetzt */
.zitat__qualifikation { display: block; margin-top: 0.3rem; color: var(--rot); font-weight: 700; }

/* Rechte Spalte: Foto + Zitat + Buttons */
.warum__rechts .bild.bild--inhaber { max-width: none; }
/* Beide Buttons nebeneinander in der 30rem-Spalte (Desktop) */
/* Zwischen 1024 und 1200 px liegt die Spalte am Rand: Siegel weniger weit hinausschieben */

/* WhatsApp-Button im CTA: gleiche Hausfarbe, WhatsApp-Icon statt Pfeil */
.btn--whatsapp, a.btn--whatsapp { display: inline-flex; align-items: center; gap: 0.55rem; }
.btn--whatsapp img { width: 1.4rem; height: 1.4rem; flex: 0 0 auto; }

/* =====================================================================
   UNTERSEITEN – Bausteine (Hero, Abschnittstitel, Raster, Rechtstexte, Kontakt)
   ===================================================================== */
/* Hero der Unterseiten: Text links, Bild rechts bis an den Rand (wie vorlage.html) */
.page-hero--unterseite { background: var(--grau-hell); }
.page-hero--unterseite h1 { margin: 0 0 1rem; }
.page-hero--unterseite h1 .kicker, .seitenkopf h1 .kicker { margin-bottom: 0.6rem; }
.page-hero--unterseite h1 .hero__slogan2, .seitenkopf h1 .hero__slogan2 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem); color: var(--dunkel); line-height: 1.12; margin: 0; }
.page-hero--unterseite .lead { margin-top: 1rem; }
.page-hero--unterseite .haken { margin-top: 1rem; }
@media (min-width: 64em) {
  .page-hero--unterseite { padding: 0; }
  .page-hero--unterseite .page-hero__text { padding: 3.5rem 0; }
  .page-hero--unterseite .page-hero__grid > .bild img { min-height: 30rem; border-radius: var(--radius) 0 0 var(--radius); }
}

/* Seitenkopf ohne Bild (Rechtstexte, Meldungen) */
.seitenkopf { background: var(--grau-hell); padding: 2.75rem 0 2.25rem; }
.seitenkopf h1 { margin: 0; }
.seitenkopf .lead { max-width: 52rem; margin: 1rem 0 0; }
.seitenkopf--meldung { padding: 4rem 0; }

/* Abschnittstitel mit Dachzeile */
.abschnitt-titel { text-align: left; margin: 0 0 1.25rem; }
.abschnitt-titel .unterschied__kicker { display: flex; width: max-content; max-width: 100%; }
.abstand-oben { margin-top: 1.25rem; }
.hinweis-zeile { margin-top: 1.75rem; }
.mehr-link { margin-top: 1.75rem; font-weight: 600; }
.mehr-link a { color: var(--rot); }
.unter-referenzen { margin: 2.75rem 0 0; font-weight: 700; color: var(--dunkel); }
.zentriert-knoepfe { justify-content: center; margin-top: 2.25rem; }

/* Karten-Raster mit 2 oder 3 Spalten */
@media (min-width: 64em) {
  .unterschied__raster.raster-3 { grid-template-columns: repeat(3, 1fr); }
  .unterschied__raster.raster-2 { grid-template-columns: repeat(2, 1fr); }
}
.abschnitt-titel + .unterschied__raster { margin-top: 1.75rem; }

/* Ablauf / Schritte (nutzt die nummerierten Zeilen aus „Warum wir“) */
.warum__gruende.schritte { margin-top: 1.5rem; }
@media (min-width: 64em) { .warum__gruende.schritte { grid-template-columns: repeat(2, 1fr); } }

/* Warnkarten mit beliebiger Anzahl */
@media (min-width: 64em) { .problem__gruende.gruende-auto { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } }

/* Haken-Listen mit Fließtext */
.haken--text { gap: 0.7rem; }
.haken--text li { font-weight: 400; }
.haken--text li strong { font-weight: 700; color: var(--dunkel); }
.haken--luftig { gap: 1rem; }

/* Kleine Referenzauswahl (Webdesign-Seite) */
@media (min-width: 64em) { .referenzen.referenzen--klein { grid-template-columns: repeat(3, 1fr); } }

/* SEO-Fallbeispiele */
.zweispaltig.ergebnisse { align-items: start; }
.bild--screenshot img { aspect-ratio: auto; object-fit: contain; border: 1px solid var(--linie); }
.bild--screenshot figcaption { margin-top: 0.6rem; font-size: 0.95rem; color: var(--text-grau); }
.ergebnis-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.ergebnis-liste li {
  position: relative; margin: 0; padding: 0.85rem 1rem 0.85rem 3.1rem; background: var(--weiss); color: var(--rot);
  border-radius: var(--radius); border-left: 4px solid var(--rot); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.07); font-weight: 600; line-height: 1.45;
}
.ergebnis-liste li::marker { content: none; }
.ergebnis-liste li::before {
  content: ""; position: absolute; left: 0.95rem; top: 0.95rem; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / 62% no-repeat, radial-gradient(circle at 32% 28%, #ff5a5a 0%, #e00010 38%, #990000 100%);
}
.ergebnis-liste strong { display: block; color: var(--dunkel); font-weight: 800; }

/* Social Media: Symbolband */
.symbolband { margin: 2.75rem 0 0; }
.symbolband img { width: 100%; height: auto; }

/* Stellenangebote */
.rahmen { margin-top: 2.25rem; padding: 1.25rem 1.5rem; background: var(--grau-hell); border-left: 5px solid var(--rot); border-radius: var(--radius); }
.rahmen > strong { display: block; color: var(--dunkel); font-size: 1.1rem; }
.rahmen .haken { margin-top: 0.75rem; }
.zweispaltig.bewerben { align-items: start; }
.bild-unterschrift { margin-top: 0.75rem; text-align: center; color: var(--text-grau); }

/* Onlineshops: Referenzkarten ohne Bild */

/* Barrierefreiheit: bekannte Barrieren */
.barrieren { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.9rem; }
.barrieren li { margin: 0; padding: 1rem 1.25rem; background: var(--weiss); border-left: 5px solid var(--grau); border-radius: var(--radius); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06); color: var(--text-grau); transition: opacity 0.7s ease, transform 0.7s ease; }
.barrieren li::marker { content: none; }
.barrieren strong { display: block; color: var(--dunkel); }
@media (min-width: 48em) { .barrieren { grid-template-columns: 1fr 1fr; } }
.js-effekte .barrieren li.effekt-einblenden.ist-sichtbar:hover { transform: none; }

/* Regionsseiten: typische Suchbegriffe als Suchfeld-Pillen */
.suchbegriffe__lupe { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23990000' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.8-4.8'/%3E%3C/svg%3E") center / contain no-repeat; }
.regionen-gruppen { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
@media (min-width: 48em) { .regionen-gruppen { grid-template-columns: 1fr 1fr; } }
.regionen-gruppen .vorteil h5, .regionen-gruppen .vorteil .h5 { margin-top: 0; }
.regionen-gruppen .regionen-links { margin-top: 0.75rem; }
.nachbarn { margin: 2rem auto 0; font-size: 0.98rem; max-width: 52rem; }
.nachbarn span { font-weight: 700; }

/* Kontakt */
.kontaktwege .vorteil h5, .kontaktwege .vorteil .h5 { margin-top: 1rem; }
.kontaktweg__wert { font-weight: 700; color: var(--dunkel) !important; font-size: 1.08rem; margin-bottom: 0.4rem !important; overflow-wrap: anywhere; }
.kontaktwege .vorteil p + p { margin-top: 0.4rem; }
.kontaktwege a { color: var(--rot); }

/* Zwei-Klick-Karte (Google Maps erst nach Klick) */
.zweispaltig.anfahrt { align-items: stretch; }
.karte-zweiklick { position: relative; min-height: 22rem; border-radius: var(--radius); overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(135deg, #eef0f2 0%, #dfe4e8 100%); box-shadow: var(--schatten); }
.karte-zweiklick::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.75) 2px, transparent 2px), linear-gradient(90deg, rgba(255, 255, 255, 0.75) 2px, transparent 2px), linear-gradient(35deg, transparent 47%, rgba(255, 255, 255, 0.9) 47%, rgba(255, 255, 255, 0.9) 53%, transparent 53%);
  background-size: 52px 52px, 52px 52px, 100% 100%; }
.karte-zweiklick__hinweis { position: relative; max-width: 28rem; margin: 1rem; padding: 1.75rem 1.5rem; background: rgba(255, 255, 255, 0.95); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); }
.karte-zweiklick__hinweis .vorteil__symbol { margin: 0 auto 0.75rem; }
.karte-zweiklick__hinweis p { font-size: 0.95rem; color: var(--text-grau); }
.karte-zweiklick__hinweis p strong { color: var(--dunkel); font-size: 1.05rem; }
.karte-zweiklick__hinweis a { color: var(--rot); }
.karte-zweiklick iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.karte-zweiklick.ist-geladen::before { display: none; }

/* Rechtstexte (Impressum, AGB, Datenschutz) */
.rechtstext .wrap { max-width: 58rem; }
.rechtstext h2, .rechtstext .h2 { font-size: 1.45rem; color: var(--rot); margin: 2.25rem 0 0.75rem; }
.rechtstext h3, .rechtstext .h3 { font-size: 1.15rem; font-weight: 700; color: var(--dunkel); margin: 1.6rem 0 0.5rem; }
.rechtstext p, .rechtstext li { overflow-wrap: anywhere; }
.rechtstext a { color: var(--rot); }
.inhaltsverzeichnis { background: var(--grau-hell); border-left: 5px solid var(--rot); padding: 1.25rem 1.5rem; border-radius: var(--radius); margin-bottom: 2rem; }
.inhaltsverzeichnis p { margin-bottom: 0.5rem; }
.inhaltsverzeichnis ol { margin: 0; padding-left: 1.5rem; columns: 2 17rem; column-gap: 2.5rem; }
.inhaltsverzeichnis li { margin-bottom: 0.3rem; break-inside: avoid; }
.bildnachweise { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.bildnachweise li { display: flex; gap: 0.85rem; align-items: center; margin: 0; font-size: 0.92rem; color: var(--text-grau); line-height: 1.4; }
.bildnachweise li::marker { content: none; }
.bildnachweise img { width: 120px; height: 80px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; box-shadow: var(--schatten); }

/* Links in Inhaltsbereichen in der Seitenschrift (Designer-CSS setzt sonst Arial) */
.section a:not(.btn), .seitenkopf a:not(.btn), .page-hero a:not(.btn) { font-family: inherit; }
/* Letzter dunkler CTA-Block vor dem dunklen Footer: feine Trennlinie */
main > .section--cta:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.18); padding-bottom: 3.5rem; }
/* Breites Bildband (z. B. Büro mit www.sachscom.de) */
/* Schmale Handys (320 px): lange Wörter umbrechen, Dachzeilen dürfen umbrechen */
.zweispaltig > * { min-width: 0; }
.abschnitt-titel .unterschied__kicker { width: fit-content; }
.warum__gruende li, .warum__inhalt, .vorteil, .problem__gruende li { min-width: 0; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }.page-hero--unterseite h1 .hero__slogan2, .seitenkopf h1 .hero__slogan2, .titel { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
@media (max-width: 23.99em) { .page-hero--unterseite h1 .hero__slogan2, .seitenkopf h1 .hero__slogan2 { font-size: 1.65rem; } }.rechtstext h2, .rechtstext h3, .inhaltsverzeichnis li, .rechtstext .h2, .rechtstext .h3 { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }.zweispaltig .warum__gruende.schritte { grid-template-columns: 1fr; }
/* Onlineshop-Referenzen: ganze Shop-Ansicht zeigen (Screenshot im Breitformat) */
.referenzen--shops .referenz__bild img { aspect-ratio: 2000 / 975; object-fit: cover; object-position: top center; }

/* =====================================================================
   Webdesign: „Warum wir unseren Code selbst schreiben“ – Code-Fenster + Vergleich
   ===================================================================== */
.code-fenster {
  margin: 0; border-radius: var(--radius); overflow: hidden; background: #1f2328; color: #e6e6e6;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.code-fenster__leiste { display: flex; align-items: center; gap: 0.45rem; padding: 0.75rem 1rem; background: #2b3036; }
.code-fenster__leiste span { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: #5b6168; }
.code-fenster__leiste span:first-child { background: #e00010; }
.code-fenster__leiste em { margin-left: 0.6rem; font-style: normal; font-size: 0.85rem; color: #aab1b9; font-family: var(--schrift); }
.code-fenster pre {
  margin: 0; padding: 1.25rem 1.25rem 1.5rem; overflow-x: auto; white-space: pre;
  font-family: Consolas, "SFMono-Regular", Menlo, monospace; font-size: clamp(0.78rem, 0.7rem + 0.3vw, 0.95rem); line-height: 1.85;
}
.c-nr { display: inline-block; width: 1.6rem; margin-right: 0.9rem; text-align: right; color: #5f6872; user-select: none; }
.c-k { color: #ff8a80; }
.c-a { color: #f1c27d; }
.c-s { color: #a8d8a0; }
.c-cursor { display: inline-block; width: 0.55em; height: 1.1em; margin-left: 0.15em; vertical-align: -0.2em; background: #e00010; animation: code-cursor 1.1s steps(1) infinite; }
@keyframes code-cursor { 50% { opacity: 0; } }

.vergleich { display: grid; gap: 1.25rem; margin-top: 3rem; align-items: stretch; }
.vergleich__karte { position: relative; margin: 0; padding: 1.75rem 1.6rem; border-radius: var(--radius); background: var(--weiss); transition: opacity 0.7s ease, transform 0.7s ease; }
.vergleich__karte ul { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.8rem; }
.vergleich__karte li { position: relative; margin: 0; padding-left: 2.2rem; line-height: 1.45; }
.vergleich__karte li::marker { content: none; }
.vergleich__karte li::before { content: ""; position: absolute; left: 0; top: 0.05em; width: 1.45rem; height: 1.45rem; border-radius: 50%; }
.vergleich__titel { margin: 0; font-size: 1.2rem; font-weight: 800; line-height: 1.3; }
/* links: Baukasten – bewusst blass */
.vergleich__karte--alt { border: 1px dashed #c9c9c9; background: #fbfbfb; color: var(--text-grau); }
.vergleich__karte--alt .vergleich__titel { color: var(--grau); }
.vergleich__karte--alt li { text-decoration: line-through; text-decoration-color: rgba(102, 102, 102, 0.45); }
.vergleich__karte--alt li::before {
  background: #9a9a9a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center / 58% no-repeat;
}
/* rechts: SACHScom – hervorgehoben */
.vergleich__karte--neu { color: var(--dunkel); font-weight: 600; border: 1px solid rgba(224, 0, 16, 0.25); box-shadow: 0 22px 44px rgba(0, 0, 0, 0.12); overflow: hidden; }
.vergleich__karte--neu::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #990000, #e00010, #ff5a5a); }
.vergleich__karte--neu .vergleich__titel { color: var(--rot); }
.vergleich__karte--neu li::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 62% no-repeat, radial-gradient(circle at 32% 28%, #ff5a5a 0%, #e00010 38%, #990000 100%);
  box-shadow: 0 4px 10px rgba(153, 0, 0, 0.25);
}
.vergleich__vs {
  justify-self: center; align-self: center; display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%;
  color: var(--weiss); font-weight: 900; font-size: 1.05rem; letter-spacing: 0.02em;
  background: radial-gradient(circle at 32% 28%, #ff5a5a 0%, #e00010 38%, #990000 100%); box-shadow: 0 10px 22px rgba(153, 0, 0, 0.3);
}
.js-effekte .vergleich__karte.effekt-einblenden.ist-sichtbar:hover { transform: none; }
.code-vorteil .unterschied__merksatz { margin-top: 3rem; }
@media (min-width: 48em) { .vergleich { grid-template-columns: 1fr auto 1fr; } }
@media (min-width: 64em) {
  .code-vorteil { padding: 5rem 0; }
  .code-fenster { transform: perspective(1400px) rotateY(-6deg); }
  .vergleich__karte--neu { transform: scale(1.03); }
  .js-effekte .vergleich__karte--neu.effekt-einblenden.ist-sichtbar { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { .c-cursor { animation: none; } }

/* Webdesign: Foto mit darübergelegtem Code-Fenster, die Zeilen „tippen“ sich nacheinander ein */
.code-bild { position: relative; margin: 0 0 1rem; }
.code-bild > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); box-shadow: var(--schatten); }
.code-bild .code-fenster { position: relative; width: 92%; margin: -4rem 0 0 auto; transform: none; }
.code-bild pre { font-size: clamp(0.72rem, 0.66rem + 0.25vw, 0.86rem); line-height: 1.75; padding: 1rem 1.1rem 1.2rem; }
.c-zeile { display: block; min-height: 1.75em; }
.js-effekte .code-bild.effekt-einblenden.ist-sichtbar:hover { transform: none; }
@media (min-width: 64em) {
  .code-vorteil .zweispaltig { margin-bottom: 3rem; }
  .code-bild { margin: 0; }
  .code-bild .code-fenster { position: absolute; left: -2.5rem; bottom: -2.75rem; width: 72%; margin: 0; transform: perspective(1400px) rotateY(6deg); }
}
.js-effekte .code-bild .c-zeile { clip-path: inset(0 100% 0 0); }
.js-effekte .code-bild.ist-sichtbar .c-zeile { animation-duration: 10s; animation-timing-function: steps(26, end); animation-iteration-count: infinite; }
@keyframes tippen-1 { 0%, 0% { clip-path: inset(0 100% 0 0); } 7%, 93% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
.js-effekte .code-bild.ist-sichtbar .c-zeile--1 { animation-name: tippen-1; }
@keyframes tippen-2 { 0%, 9% { clip-path: inset(0 100% 0 0); } 16%, 93% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
.js-effekte .code-bild.ist-sichtbar .c-zeile--2 { animation-name: tippen-2; }
@keyframes tippen-3 { 0%, 18% { clip-path: inset(0 100% 0 0); } 25%, 93% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
.js-effekte .code-bild.ist-sichtbar .c-zeile--3 { animation-name: tippen-3; }
@keyframes tippen-4 { 0%, 27% { clip-path: inset(0 100% 0 0); } 34%, 93% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
.js-effekte .code-bild.ist-sichtbar .c-zeile--4 { animation-name: tippen-4; }
@keyframes tippen-5 { 0%, 36% { clip-path: inset(0 100% 0 0); } 43%, 93% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
.js-effekte .code-bild.ist-sichtbar .c-zeile--5 { animation-name: tippen-5; }
@keyframes tippen-6 { 0%, 45% { clip-path: inset(0 100% 0 0); } 52%, 93% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
.js-effekte .code-bild.ist-sichtbar .c-zeile--6 { animation-name: tippen-6; }
@keyframes tippen-7 { 0%, 54% { clip-path: inset(0 100% 0 0); } 61%, 93% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
.js-effekte .code-bild.ist-sichtbar .c-zeile--7 { animation-name: tippen-7; }
@keyframes tippen-8 { 0%, 63% { clip-path: inset(0 100% 0 0); } 70%, 93% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
.js-effekte .code-bild.ist-sichtbar .c-zeile--8 { animation-name: tippen-8; }
@media (prefers-reduced-motion: reduce) {
  .js-effekte .code-bild .c-zeile, .js-effekte .code-bild.ist-sichtbar .c-zeile { clip-path: none; animation: none; }
}@media (min-width: 64em) {
  .code-vorteil .zweispaltig { margin-bottom: 5rem; }
  .code-bild .code-fenster { left: -1.75rem; bottom: -3rem; width: 66%; }
}

/* Webdesign: Leistungen als Kacheln mit Symbol */
.leistungskacheln { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; }
.leistungskachel {
  position: relative; overflow: hidden; margin: 0; display: flex; align-items: center; gap: 1rem; min-height: 6.25rem;
  padding: 1.35rem 1.4rem 1.2rem; background: var(--weiss); border-radius: var(--radius);
  border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.07);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, opacity 0.7s ease;
}
.leistungskachel::marker { content: none; }
.leistungskachel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #990000, #e00010, #ff5a5a); transition: height 0.3s ease; }
.leistungskachel .vorteil__symbol { flex: 0 0 auto; width: 3.1rem; height: 3.1rem; }
.leistungskachel__text { flex: 1 1 auto; min-width: 0; font-weight: 700; color: var(--dunkel); line-height: 1.35; font-size: 1.05rem; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.leistungskachel__link { flex: 0 0 auto; align-self: flex-end; font-size: 0.85rem; font-weight: 700; color: var(--rot) !important; text-decoration: none; white-space: nowrap; }
.leistungskachel__link::after { content: " →"; }
.leistungskachel__link::before { content: ""; position: absolute; inset: 0; }   /* ganze Kachel klickbar */
.leistungskachel:hover, .leistungskachel:focus-within { transform: translateY(-6px); border-color: rgba(224, 0, 16, 0.45); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(224, 0, 16, 0.3); }
.leistungskachel:hover::before, .leistungskachel:focus-within::before { height: 6px; }
.leistungskachel:hover .vorteil__symbol { transform: rotate(-8deg) scale(1.08); }
.leistungskachel--link .leistungskachel__text { padding-bottom: 1.1rem; }
.leistungskachel--link .leistungskachel__link { position: absolute; right: 1.2rem; bottom: 0.9rem; }
.js-effekte .leistungskachel.effekt-einblenden.ist-sichtbar:hover, .js-effekte .leistungskachel.effekt-einblenden.ist-sichtbar:focus-within { transform: translateY(-6px); }
.leistungskacheln .leistungskachel:nth-child(3n+2) { transition-delay: 0.08s; }
.leistungskacheln .leistungskachel:nth-child(3n+3) { transition-delay: 0.16s; }
.leistungskacheln .leistungskachel:hover { transition-delay: 0s; }
@media (min-width: 40em) { .leistungskacheln { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .leistungskacheln { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .leistungen-kacheln { padding: 5rem 0; } }
@media (prefers-reduced-motion: reduce) { .leistungskachel:hover, .leistungskachel:focus-within, .js-effekte .leistungskachel.effekt-einblenden.ist-sichtbar:hover { transform: none; } }
/* Vergleich: Baukasten-Karte dunkel und edel, Schrift weiß (Nutzer: ging vorher unter) */
.vergleich__karte--alt {
  border: 0; color: rgba(255, 255, 255, 0.88);
  background: linear-gradient(145deg, #3d4046 0%, #2a2c30 100%);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.18);
}
.vergleich__karte--alt .vergleich__titel { color: var(--weiss); }
.vergleich__karte--alt li { text-decoration-color: rgba(255, 255, 255, 0.55); }
.vergleich__karte--alt li::before { background-color: #6c7077; }

/* Webdesign: „Für wen & wo“ – Zielgruppen + Karte „Wo wir arbeiten“ */
.zielgruppe-region { background: var(--weiss); }
.zweispaltig.zielgruppe-region__raster { align-items: center; }
.zielgruppe-region__tags { margin-top: 1.25rem; }
.zielgruppe-region__tags li { font-size: 0.98rem; padding: 0.45rem 1rem; }
.wo-karte {
  position: relative; overflow: hidden; padding: 2rem 1.75rem 1.75rem; border-radius: var(--radius); background: var(--weiss);
  border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 22px 44px rgba(0, 0, 0, 0.12); transition: opacity 0.7s ease, transform 0.7s ease;
}
.wo-karte::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #990000, #e00010, #ff5a5a); }
.wo-karte__zeile { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.wo-karte__zeile .vorteil__symbol { flex: 0 0 auto; width: 3.2rem; height: 3.2rem; }
.wo-karte__zeile p { margin: 0; line-height: 1.25; }
.wo-karte__klein { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rot); margin-bottom: 0.2rem; }
.wo-karte__zeile strong { font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); font-weight: 800; color: var(--dunkel); }
.wo-karte__text { margin: 1.25rem 0 0.6rem; color: var(--text-grau); font-size: 0.98rem; }
.wo-karte__orte { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.wo-karte__orte li { margin: 0; padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--grau-hell); color: var(--dunkel); font-size: 0.9rem; font-weight: 600; }
.wo-karte__orte li::marker { content: none; }
.js-effekte .wo-karte.effekt-einblenden.ist-sichtbar:hover { transform: none; }
@media (min-width: 64em) { .zielgruppe-region { padding: 5rem 0; } .zweispaltig.zielgruppe-region__raster { grid-template-columns: 1.1fr 0.9fr; } }

/* Kontakt: Spruch „Ein Gespräch kostet Sie nichts …“ als dunkles Banner */
.js-effekte .spruch.effekt-einblenden.ist-sichtbar:hover { transform: none; }
/* Kontakt: Spruch im Stil des Hinweis-Kastens, Sprechblase statt „i“ */
.hinweis--spruch { margin: 2.5rem 0 0; max-width: none; font-size: 1.15rem; transition: opacity 0.7s ease, transform 0.7s ease; }
.hinweis--spruch::before {
  content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20.5l1.4-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E") center / 58% no-repeat, radial-gradient(circle at 32% 28%, #ff5a5a 0%, #e00010 38%, #990000 100%);
}
.js-effekte .hinweis--spruch.effekt-einblenden.ist-sichtbar:hover { transform: none; }

/* Onlineshops: „Vertrauen entscheidet – in Sekunden“ mit tickender Stoppuhr */
.zweispaltig.vertrauen__raster { align-items: center; }
.stoppuhr { margin: 0; display: grid; justify-items: center; gap: 1rem; text-align: center; transition: opacity 0.8s ease, transform 0.8s ease; }
.stoppuhr svg { width: clamp(10rem, 8rem + 8vw, 14rem); height: auto; filter: drop-shadow(0 18px 30px rgba(153, 0, 0, 0.22)); }
.stoppuhr__knopf { fill: #990000; }
.stoppuhr__rand { fill: none; stroke: #e00010; stroke-width: 7; }
.stoppuhr__blatt { fill: var(--weiss); }
.stoppuhr__striche line { stroke: var(--dunkel); stroke-width: 2.4; stroke-linecap: round; }
.stoppuhr__zeiger line { stroke: #e00010; stroke-width: 3.2; stroke-linecap: round; }
.stoppuhr__zeiger circle { fill: #990000; }
.stoppuhr__zeiger { transform-box: view-box; transform-origin: 60px 76px; animation: stoppuhr-tick 12s steps(60) infinite; }
@keyframes stoppuhr-tick { to { transform: rotate(360deg); } }
.stoppuhr figcaption { max-width: 22rem; font-size: clamp(1.25rem, 1rem + 0.9vw, 1.6rem); font-weight: 800; line-height: 1.25; color: var(--dunkel); }
.js-effekte .stoppuhr.effekt-einblenden.ist-sichtbar:hover { transform: none; }
.vergleich--ohne-strich .vergleich__karte--alt li { text-decoration: none; }
.vertrauen .vergleich { margin-top: 3.5rem; }
@media (min-width: 64em) { .vertrauen { padding: 5rem 0; } .zweispaltig.vertrauen__raster { grid-template-columns: 1.3fr 0.7fr; } }
@media (prefers-reduced-motion: reduce) { .stoppuhr__zeiger { animation: none; } }
/* Stoppuhr: Gehäuse in edlem Dunkelgrau, weißes Zifferblatt, rote Zeiger */
.stoppuhr svg { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.25)); }
.stoppuhr__knopf { fill: #3a3d42; }
.stoppuhr__rand { stroke: #2f3237; stroke-width: 8; }
.stoppuhr__blatt { fill: var(--weiss); }
.stoppuhr__striche line { stroke: #3a3d42; }
.stoppuhr__zeiger line { stroke: #e00010; }
.stoppuhr__zeiger circle { fill: #e00010; }

/* Unterseiten-Hero: linke Seite freundlicher und übersichtlicher */
.page-hero--unterseite h1 .kicker {
  display: inline-flex; align-items: center; gap: 0.55rem; width: fit-content; max-width: 100%;
  padding: 0.4rem 0.95rem; margin-bottom: 1.1rem; border-radius: 999px; background: var(--weiss);
  color: var(--rot); font-size: 0.78rem; letter-spacing: 0.08em; line-height: 1.3; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}
.page-hero--unterseite h1 .kicker::before { content: ""; flex: 0 0 auto; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #e00010; box-shadow: 0 0 0 3px rgba(224, 0, 16, 0.15); }
.page-hero--unterseite h1 .hero__slogan2 { font-size: clamp(1.85rem, 1.2rem + 1.8vw, 2.7rem); line-height: 1.15; }
.page-hero--unterseite .lead { max-width: 36rem; margin-top: 1.1rem; font-size: 1.1rem; line-height: 1.7; color: #555; }
.page-hero--unterseite .haken {
  max-width: 36rem; margin-top: 1.5rem; padding: 1.15rem 1.35rem; gap: 0.65rem;
  background: var(--weiss); border-radius: var(--radius); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.07);
}
.page-hero--unterseite .haken li { font-weight: 600; color: var(--dunkel); }
.page-hero--unterseite .btn-gruppe { margin-top: 1.75rem; }
.page-hero--unterseite .btn-gruppe .btn { padding: 0.8rem 1.35rem; font-size: 1rem; }@media (min-width: 64em) { .page-hero--unterseite .page-hero__grid { grid-template-columns: 1.15fr 0.85fr; } }
.page-hero--unterseite .btn-gruppe .btn { padding: 0.75rem 1.2rem; font-size: 0.95rem; }

/* Seitenkopf der Rechtstexte (Impressum, AGB, Datenschutz, Barrierefreiheit, Danke/Fehler) im selben freundlichen Stil */
.seitenkopf h1 .kicker {
  display: inline-flex; align-items: center; gap: 0.55rem; width: fit-content; max-width: 100%;
  padding: 0.4rem 0.95rem; margin-bottom: 1.1rem; border-radius: 999px; background: var(--weiss);
  color: var(--rot); font-size: 0.78rem; letter-spacing: 0.08em; line-height: 1.3; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}
.seitenkopf h1 .kicker::before { content: ""; flex: 0 0 auto; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #e00010; box-shadow: 0 0 0 3px rgba(224, 0, 16, 0.15); }
.seitenkopf h1 .hero__slogan2 { font-size: clamp(1.85rem, 1.2rem + 1.8vw, 2.7rem); line-height: 1.15; }
.seitenkopf .lead { max-width: 44rem; font-size: 1.1rem; line-height: 1.7; color: #555; }
.seitenkopf .btn-gruppe .btn { padding: 0.75rem 1.2rem; font-size: 0.95rem; }

/* Einleitungstext im Kopfbereich als weiße Karte (Seiten ohne Haken-Liste) */
.lead.lead--karte {
  max-width: 36rem; padding: 1.15rem 1.35rem; background: var(--weiss);
  border-radius: var(--radius); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.07);
}
.seitenkopf .lead.lead--karte { max-width: 44rem; }

/* Social Media: Bild links, Leistungen rechts als Kacheln untereinander */
.zweispaltig.social-leistungen__raster { align-items: stretch; }
.social-leistungen__bild img { height: 100%; min-height: 22rem; aspect-ratio: auto; object-fit: cover; }
.leistungskacheln.leistungskacheln--spalte { grid-template-columns: 1fr; gap: 0.75rem; margin-top: 1.5rem; }
.leistungskacheln--spalte .leistungskachel { min-height: 0; padding: 1rem 1.2rem 0.9rem; }
.leistungskacheln--spalte .leistungskachel .vorteil__symbol { width: 2.7rem; height: 2.7rem; }
.leistungskacheln--spalte + .btn-gruppe { justify-content: flex-start; margin-top: 1.5rem; }
.leistungskacheln--spalte .leistungskachel:hover, .leistungskacheln--spalte .leistungskachel:focus-within,
.js-effekte .leistungskacheln--spalte .leistungskachel.effekt-einblenden.ist-sichtbar:hover { transform: translateX(6px); }
.leistungskacheln--spalte .leistungskachel:nth-child(n) { transition-delay: 0s; }
.leistungskacheln--spalte .leistungskachel:nth-child(2) { transition-delay: 0.06s; }
.leistungskacheln--spalte .leistungskachel:nth-child(3) { transition-delay: 0.12s; }
.leistungskacheln--spalte .leistungskachel:nth-child(4) { transition-delay: 0.18s; }
.leistungskacheln--spalte .leistungskachel:nth-child(5) { transition-delay: 0.24s; }
@media (min-width: 64em) { .social-leistungen { padding: 5rem 0; } }
@media (prefers-reduced-motion: reduce) { .leistungskacheln--spalte .leistungskachel:hover { transform: none; } }

/* Über uns – Geschichte: großes 20+-Siegel mit Zeitstrahl, Merk-Kasten */
.zweispaltig.geschichte__raster { align-items: center; }
.geschichte__wissen {
  margin: 1.5rem 0 0; padding: 1.1rem 1.35rem; background: var(--weiss); border-left: 5px solid var(--rot);
  border-radius: var(--radius); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.07); font-size: 1.1rem; line-height: 1.6;
}
.geschichte__wissen strong { color: var(--rot); }
.geschichte__jahre {
  position: relative; overflow: hidden; display: grid; justify-items: center; text-align: center; gap: 0.6rem;
  padding: 2.25rem 1.75rem 2rem; background: var(--weiss); border-radius: var(--radius); box-shadow: 0 22px 44px rgba(0, 0, 0, 0.12);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.geschichte__jahre::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #990000, #e00010, #ff5a5a); }
.geschichte__siegel {
  margin: 0; width: 10rem; height: 10rem; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--weiss); background: radial-gradient(circle at 32% 28%, #ff5a5a 0%, #e00010 38%, #990000 100%); box-shadow: 0 16px 34px rgba(153, 0, 0, 0.35);
}
.geschichte__zahl { display: flex; align-items: flex-start; font-size: 4rem; font-weight: 900; line-height: 1; letter-spacing: -0.02em; }
.geschichte__zahl span { font-size: 0.5em; margin-left: 0.05em; }
.geschichte__einheit { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 0.2rem; }
.geschichte__unterzeile { margin: 0.75rem 0 0; color: var(--text-grau); }
.geschichte__unterzeile strong { display: block; font-size: 1.35rem; font-weight: 800; color: var(--dunkel); }
.zeitstrahl { list-style: none; padding: 0; margin: 1.25rem 0 0; width: 100%; max-width: 20rem; text-align: left; position: relative; }
.zeitstrahl::before { content: ""; position: absolute; left: 0.55rem; top: 0.7rem; bottom: 0.7rem; width: 2px; background: linear-gradient(#c9c9c9, #e00010); }
.zeitstrahl li { position: relative; margin: 0; padding: 0.35rem 0 0.35rem 2rem; font-weight: 600; color: var(--dunkel); }
.zeitstrahl li::marker { content: none; }
.zeitstrahl li::before { content: ""; position: absolute; left: 0.15rem; top: 0.75rem; width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--weiss); border: 2px solid #9a9a9a; }
.zeitstrahl li:last-child { color: var(--rot); }
.zeitstrahl li:last-child::before { border-color: #e00010; background: #e00010; box-shadow: 0 0 0 4px rgba(224, 0, 16, 0.18); }
.js-effekte .geschichte__jahre.effekt-einblenden.ist-sichtbar:hover { transform: none; }
@media (min-width: 64em) { .geschichte { padding: 5rem 0; } .zweispaltig.geschichte__raster { grid-template-columns: 1.25fr 0.75fr; } }

/* Kopfbereich der Unterseiten klar vom folgenden (ebenfalls grauen) Abschnitt absetzen */
.page-hero--unterseite, .seitenkopf { background: #eceef1; border-bottom: 1px solid #dfe2e6; box-shadow: inset 0 -12px 24px -20px rgba(0, 0, 0, 0.18); }

/* Über uns – Kernaussage „Unser Anspruch“ gestaffelt im Kasten */
.anspruch-kern {
  position: relative; margin: 0.5rem 0 1.5rem; padding: 1.5rem 1.6rem 1.4rem; background: var(--weiss);
  border-left: 6px solid var(--rot); border-radius: var(--radius); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.anspruch-kern p { margin: 0 0 0.6rem; color: var(--text-grau); font-size: 1.05rem; }
.anspruch-kern p:last-child { margin-bottom: 0; }
.anspruch-kern__gross { font-size: clamp(1.3rem, 1rem + 1vw, 1.65rem) !important; font-weight: 800; line-height: 1.3; color: var(--dunkel) !important; }
.anspruch-kern__gross span { color: var(--rot); background: linear-gradient(transparent 64%, rgba(224, 0, 16, 0.14) 64%, rgba(224, 0, 16, 0.14) 94%, transparent 94%); }
.anspruch-kern__rot { font-weight: 700; color: var(--rot) !important; font-size: 1.12rem !important; }
.js-effekte .anspruch-kern.effekt-einblenden.ist-sichtbar:hover { transform: none; }

/* Überschriften am Desktop nicht mehr automatisch trennen (nur auf schmalen Handys) */
@media (min-width: 40em) { .titel, .page-hero--unterseite h1 .hero__slogan2, .seitenkopf h1 .hero__slogan2 { -webkit-hyphens: manual; hyphens: manual; } }
/* Über uns – Slogan „Denn gute Ergebnisse sind die stärkste Empfehlung.“ */
.haltung__slogan { max-width: 44rem; margin-top: 2rem; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem); transition: opacity 0.7s ease, transform 0.7s ease; }
.js-effekte .haltung__slogan.effekt-einblenden.ist-sichtbar:hover { transform: none; }
.zielgruppe-region.zielgruppe-region--grau { background: #f7f7f7; }
.zielgruppe-region--grau .warum__tags li { background: var(--weiss); }
/* Referenzseite: Webseiten-Karten wie auf der Startseite zweispaltig (lange Texte) */
/* Kopfbild ungeschnitten in natürlicher Größe (kleine Quellbilder bleiben scharf) */
@media (min-width: 64em) {
  .page-hero--unterseite .page-hero__grid > .bild.page-hero__bild--ganz { align-self: center; margin-right: 0; }
  .page-hero--unterseite .page-hero__grid > .bild.page-hero__bild--ganz img { height: auto; min-height: 0; max-width: 600px; margin-left: auto; border-radius: var(--radius); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12); }
}/* Referenzseite: Tischlerei-Bild hat genug Auflösung – bis an den rechten Rand, aber ungeschnitten */
@media (min-width: 64em) {
  .page-hero--unterseite .page-hero__grid > .bild.page-hero__bild--ganz { margin-right: calc((min(100vw, var(--breite)) - 100vw) / 2 - 1rem); }
  .page-hero--unterseite .page-hero__grid > .bild.page-hero__bild--ganz img { max-width: none; width: 100%; border-radius: var(--radius) 0 0 var(--radius); }
}
/* Onlineshops – Schulung & Support: Punkte als weiße Karten mit Symbol, Support-Karte, Bild mit Plaketten */
.schulung { padding: 4rem 0; }
.zweispaltig.schulung__raster { align-items: center; }
.schulung__intro { font-size: 1.08rem; line-height: 1.7; }
.schulung__ikon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--rot-hell); color: var(--rot); }
.schulung__ikon svg { width: 1.35rem; height: 1.35rem; }
.schulung__ikon--rot { background: var(--rot); color: var(--weiss); }
.schulung__punkte { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.75rem; }
.schulung__punkte li { margin: 0; display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.15rem; background: var(--weiss); border-radius: var(--radius); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06); line-height: 1.45; transition: opacity 0.7s ease, transform 0.7s ease; }
.schulung__punkte li::marker { content: none; }
.schulung__punkte li strong { color: var(--dunkel); }
.schulung__support { display: flex; align-items: flex-start; gap: 1rem; margin-top: 1.5rem; padding: 1.25rem 1.35rem; background: var(--weiss); border-left: 5px solid var(--rot); border-radius: var(--radius); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.07); }
.schulung__support p { margin: 0 0 0.5rem; }
.schulung__support strong { color: var(--rot); }
.schulung__kontakt { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 0 !important; }
.section .schulung__kontakt a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.95rem 0.45rem 0.55rem; border-radius: 999px; background: var(--grau-hell); color: var(--dunkel); font-weight: 700; font-size: 0.95rem; text-decoration: none; transition: background 0.2s ease; }
.section .schulung__kontakt a:hover { background: #e9e9e9; text-decoration: underline; }
.schulung__kontakt img { width: 22px; height: 22px; }
.schulung__bild { position: relative; }
.schulung__bild::before { content: ""; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; border: 2px solid rgba(153, 0, 0, 0.18); border-radius: calc(var(--radius) + 4px); z-index: 0; }
.schulung__bild img { position: relative; z-index: 1; aspect-ratio: 4 / 3; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12); }
.schulung__plakette { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.6rem 1.1rem 0.6rem 0.6rem; background: var(--weiss); border-radius: 999px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14); color: var(--dunkel); font-size: 0.98rem; line-height: 1.2; }
.schulung__plakette strong { color: var(--rot); }
.schulung__plakette .schulung__ikon { width: 2.4rem; height: 2.4rem; }
.schulung__plakette .schulung__ikon svg { width: 1.2rem; height: 1.2rem; }
.schulung__plakette--oben { top: 1rem; left: 1rem; }
.schulung__plakette--unten { bottom: 1rem; right: 1rem; }
@media (max-width: 47.99em) { .schulung__bild { margin-top: 0.5rem; } .schulung__bild::before { display: none; } }
@media (min-width: 64em) {
  .schulung { padding: 5rem 0; }
  .zweispaltig.schulung__raster { grid-template-columns: 1.05fr 0.95fr; gap: 4.5rem; }
  .schulung__plakette--oben { top: 1.75rem; left: -1.75rem; }
  .schulung__plakette--unten { bottom: 1.75rem; right: -1.75rem; }
}
/* Schulung: Bild am Desktop quadratisch, damit es neben der langen Textspalte nicht verloren wirkt */
@media (min-width: 64em) { .schulung__bild img { aspect-ratio: 1 / 1; object-position: 38% center; } }

/* ================= Städteseiten (Layout 10/2026): Ansprechpartner, Branchen-Kacheln, Such-Fenster ================= */
.page-hero__bild img[src*="staedte-arbeitsplatz"] { object-position: 55% 60%; }
.page-hero__bild img[src*="referenzen-ludley"] { object-position: 68% 50%; }   /* Monitor, Tablet und Smartphone im Bild halten */
.zweispaltig.ort-raster { align-items: center; }
/* Ansprechpartner-Karte */
.ansprechpartner { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2rem 1.75rem 1.75rem; background: var(--weiss); border-radius: var(--radius); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.09); border-top: 5px solid var(--rot); transition: opacity 0.7s ease, transform 0.7s ease; }
.js-effekte .ansprechpartner.effekt-einblenden.ist-sichtbar:hover { transform: none; }
.ansprechpartner__foto { width: 8.5rem; height: 8.5rem; border-radius: 50%; object-fit: cover; border: 4px solid var(--weiss); box-shadow: 0 0 0 2px rgba(153, 0, 0, 0.25), 0 10px 24px rgba(0, 0, 0, 0.14); margin-bottom: 1rem; }
.ansprechpartner__klein { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rot); }
.ansprechpartner__name { display: block; margin-top: 0.2rem; font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.65rem); font-weight: 800; color: var(--dunkel); }
.ansprechpartner__rolle { display: block; margin-top: 0.25rem; color: var(--grau); font-size: 0.95rem; }
.ansprechpartner__text { margin: 1rem 0 0; color: var(--dunkel); }
.ansprechpartner__kontakt { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 1rem 0 0; }
.section .ansprechpartner__kontakt a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem 0.5rem 0.6rem; border-radius: 999px; background: var(--grau-hell); color: var(--dunkel); font-weight: 700; font-size: 0.95rem; text-decoration: none; transition: background 0.2s ease; }
.section .ansprechpartner__kontakt a:hover { background: #e9e9e9; text-decoration: underline; }
.ansprechpartner__kontakt img { width: 22px; height: 22px; }
/* Branchen als Kacheln */
.branchen-kacheln { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.85rem; }
.branchen-kacheln li { margin: 0; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; background: var(--weiss); border-radius: var(--radius); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06); font-weight: 600; color: var(--dunkel); line-height: 1.4; min-width: 0; overflow-wrap: break-word; transition: opacity 0.7s ease, transform 0.7s ease; }
.branchen-kacheln li::marker { content: none; }
.branchen-kacheln__ikon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: var(--rot-hell); color: var(--rot); }
.branchen-kacheln__ikon svg { width: 1.4rem; height: 1.4rem; }
@media (min-width: 48em) { .branchen-kacheln { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .branchen-kacheln { grid-template-columns: repeat(4, 1fr); } .branchen-kacheln li { flex-direction: column; align-items: flex-start; padding: 1.4rem 1.3rem; } }
/* Such-Fenster */
.suchfenster { margin: 0; background: var(--weiss); border-radius: var(--radius); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.1); overflow: hidden; transition: opacity 0.7s ease, transform 0.7s ease; }
.js-effekte .suchfenster.effekt-einblenden.ist-sichtbar:hover { transform: none; }
.suchfenster__leiste { display: flex; gap: 0.4rem; padding: 0.75rem 1rem; background: #f1f2f4; border-bottom: 1px solid var(--linie); }
.suchfenster__leiste span { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #d4d6da; }
.suchfenster__leiste span:first-child { background: var(--rot); }
.suchfenster__feld { display: flex; align-items: center; gap: 0.7rem; margin: 1.25rem 1.25rem 0.5rem; padding: 0.85rem 1.1rem; border: 1px solid #dfe1e5; border-radius: 999px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); font-size: 1.05rem; font-weight: 600; color: var(--dunkel); min-width: 0; }
.suchfenster__eingabe { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suchfenster__cursor { flex: 0 0 auto; width: 2px; height: 1.2em; background: var(--rot); animation: suchcursor 1.1s steps(1) infinite; }
@keyframes suchcursor { 50% { opacity: 0; } }
.suchfenster__liste { list-style: none; padding: 0 0 0.5rem; margin: 0 1.25rem; }
.suchfenster__liste li { margin: 0; display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.5rem; border-bottom: 1px solid #f0f0f0; color: var(--dunkel); min-width: 0; overflow-wrap: anywhere; }
.suchfenster__liste li:last-child { border-bottom: 0; }
.suchfenster__liste li::marker { content: none; }
.suchfenster__liste .suchbegriffe__lupe { opacity: 0.55; }
.suchfenster figcaption { padding: 0.75rem 1.25rem; background: var(--grau-hell); color: var(--grau); font-size: 0.9rem; text-align: center; }
@media (prefers-reduced-motion: reduce) { .suchfenster__cursor { animation: none; } }
@media (min-width: 64em) {
  .zweispaltig.ort-raster { grid-template-columns: 1.2fr 0.8fr; gap: 4rem; }
  .zweispaltig.ort-raster--bezug { grid-template-columns: 1.2fr 0.8fr; }
}
/* Branchen-Kacheln auf weißem Abschnitt: feiner Rand, damit sie sich abheben */
.section:not(.section--alt) .branchen-kacheln li { border: 1px solid var(--linie); }

/* Regionenseiten: Bildband (früheres Startseiten-Kopfbild) mit Merksatz links im hellen Textfeld */
.ort-band { position: relative; background: var(--grau-hell); overflow: hidden; }
.ort-band__bild { display: block; width: 100%; height: 15rem; object-fit: cover; object-position: 80% center; }
.ort-band__wrap { padding-top: 1.75rem; padding-bottom: 2.25rem; }
.ort-band__feld .unterschied__merksatz { margin: 0; text-align: left; max-width: none; }
@media (min-width: 64em) {
  .ort-band__bild { height: clamp(24rem, 32vw, 30rem); object-position: 75% center; }
  .ort-band__wrap { position: absolute; inset: 0; display: flex; align-items: center; padding-top: 0; padding-bottom: 0; }
  .ort-band__feld { width: min(40rem, 52%); padding: 2.25rem 2.5rem; background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-left: 6px solid var(--rot); border-radius: var(--radius); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1); }
  .ort-band__feld .unterschied__merksatz { font-size: clamp(1.35rem, 0.9rem + 1vw, 1.9rem); }
}


/* =====================================================================
   Startseite – Kontaktbereich (20.10.2026): rote Info-Karte links, weiße Formular-Karte rechts
   ===================================================================== */
.section .kontakt-k__weg, .section a.kontakt-k__weg:visited { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0.9rem; border-radius: 14px; background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22); color: var(--weiss); font-weight: 700; text-decoration: none; transition: background 0.25s ease, transform 0.25s ease; }
.section .kontakt-k__weg:hover { background: rgba(255, 255, 255, 0.2); transform: translateX(4px); }
/* Formular-Karte */
.kontakt-k .formular { max-width: none; margin: 0; padding: 0; background: transparent; box-shadow: none; border-radius: 0; gap: 1.05rem; }
.kontakt-k .formular label { color: var(--dunkel); }
.kontakt-k .formular input, .kontakt-k .formular textarea { padding: 0.8rem 0.95rem; border: 1.5px solid #cfd2d6; border-radius: 12px; background: #fbfbfc; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.kontakt-k .formular input:hover, .kontakt-k .formular textarea:hover { border-color: #9a9ea4; }
.kontakt-k .formular input:focus, .kontakt-k .formular textarea:focus { background: var(--weiss); border-color: var(--rot); box-shadow: 0 0 0 4px rgba(153, 0, 0, 0.12); }
.kontakt-k .formular input:focus-visible, .kontakt-k .formular textarea:focus-visible { outline: 3px solid var(--fokus); outline-offset: 1px; }
.kontakt-k .formular .btn { background: var(--rot); color: var(--weiss); border-color: var(--rot); }
.kontakt-k .formular .btn:hover { background: var(--rot-dunkel); border-color: var(--rot-dunkel); }
.kontakt-k .formular a:not(.btn) { color: var(--rot); }
.kontakt-k .formular :focus-visible { outline-color: var(--fokus); }
.js-effekte .kontakt-k .effekt-einblenden.ist-sichtbar:hover { transform: none; }

/* =====================================================================
   Startseite – Abschnitt 2 (20.10.2026): Aussage links, Erfahrungs-Karte rechts – klar und übersichtlich
   ===================================================================== */
.intro-k { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.intro-k .intro-ki__titel { padding-bottom: 1.1rem; border-bottom: 1px solid var(--linie); }
.intro-k__raster { display: grid; gap: 2.25rem; align-items: center; }
.intro-k__aussage { margin: 0 0 1.1rem; font-size: clamp(1.35rem, 1.05rem + 1vw, 1.8rem); font-weight: 800; line-height: 1.3; color: var(--dunkel); }
.intro-k__aussage span { display: block; color: var(--rot); }
.intro-k__text > p:not(.intro-k__aussage) { margin: 0 0 1.5rem; font-size: 1.1rem; line-height: 1.7; color: var(--text); max-width: 36rem; }
/* Ziele als Ablauf mit Pfeilen */
.intro-k__ziele { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.7rem; }
.intro-k__ziele li { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.5rem 1rem; border-radius: 999px; background: var(--grau-hell); border: 1px solid var(--linie);
  font-size: 0.95rem; font-weight: 700; color: var(--dunkel); }
.intro-k__ziele li::marker { content: none; }
.intro-k__ziele li + li::before { content: ""; position: absolute; left: -1.15rem; top: 50%; width: 0.5rem; height: 0.5rem; border-top: 2px solid var(--rot); border-right: 2px solid var(--rot); transform: translateY(-50%) rotate(45deg); } /* Pfeil zwischen den Zielen */
.intro-k__ziele li:last-child { background: var(--rot); border-color: var(--rot); color: var(--weiss); }

/* Erfahrungs-Karte */
.js-effekte .intro-k__karte.effekt-einblenden.ist-sichtbar:hover { transform: none; }
/* KI-Kasten in der linken Textspalte unter den Zielen (21.10.2026) – etwas größer als in der Karte */
@media (min-width: 64em) {
  .intro-k { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .intro-k__raster { grid-template-columns: 1.05fr 0.95fr; gap: 4rem; }
}


/* =====================================================================
   Startseite – „Das Problem“ (3. Entwurf 20.10.2026): Vergleich heute vs. mit SACHScom (Baustein .vergleich)
   ===================================================================== */
.prob-v { background: linear-gradient(180deg, #f6f8fb 0%, #ffffff 70%); } /* hell und frisch statt Grau */
.prob-v__kopf h3, .prob-v__kopf .h3 { text-align: left; margin-bottom: 1rem; }
/* 21.10.2026: Überschrift über die volle Breite („Problem und Lösung“) */
.prob-v__titel { margin: 0 0 2.25rem; text-align: left; }
.prob-v__titel .unterschied__kicker { display: flex; width: max-content; max-width: 100%; margin-left: 0; margin-right: 0; }
.prob-v__titel .titel { display: block; max-width: none; text-wrap: balance; }
.prob-v__bild { position: relative; margin: 0; transition: opacity 0.7s ease, transform 0.7s ease; }
.prob-v__bild img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 22px; box-shadow: 0 24px 50px rgba(20, 30, 50, 0.16); }
.prob-v__plakette { position: absolute; left: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: 0.6rem; max-width: calc(100% - 2rem); padding: 0.6rem 1rem 0.6rem 0.6rem;
  background: rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 999px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14); font-size: 0.95rem; font-weight: 700; color: var(--dunkel); }
.prob-v__plakette span { flex: 0 0 auto; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--rot); color: var(--weiss); font-weight: 900; }
.js-effekte .prob-v__bild.effekt-einblenden.ist-sichtbar:hover { transform: none; }
.prob-v .titel { font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.7rem); }

/* ==========================================================================
   Startseite 21.10.2026: schlanker Hero („Webseiten, die gefunden werden …“) + Zahlen-Balken
   (übernommen aus „Sachscom 2“)
   ========================================================================== */
/* --- Hero: Hauptsatz, Unterzeile, zwei Knöpfe --- */
.hero-k--schlank .hero-k__inhalt { padding-bottom: 4.5rem; }
.hero-k--schlank h1 { margin: 0 0 1.25rem; }
/* Ortszeile über dem Hauptsatz (lokale Suche: Leipzig, Halle) */
.hero-k--schlank .hero-k__ort { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.9rem; font-size: 0.9rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: #555555; }
.hero-k--schlank .hero-k__ort::before { content: ""; flex: none; width: 2rem; height: 2px; background: var(--dunkel); }
/* Rot im Hero nur zweimal: Wort „gefunden“ und Haupt-Knopf */
.hero-k--schlank .hero-k__marker { background: none; }
.hero-k--schlank .hero-k__motto { display: block; margin: 0; font-size: clamp(2.3rem, 1.2rem + 3.8vw, 4.3rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.025em; text-transform: none; color: var(--dunkel); }
.hero-k--schlank .hero-k__lead { max-width: 34rem; margin: 0 0 0.5rem; font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem); line-height: 1.55; color: #444444; }
.hero-k--schlank .hero-k__lead strong { color: var(--dunkel); }
.hero-k--schlank .btn-gruppe { margin-top: 1.75rem; }
@media (min-width: 64em) {
  .hero-k--schlank .hero-k__inhalt { padding-top: 3rem; padding-bottom: 6rem; }
  .hero-k--schlank .hero-k__motto { font-size: clamp(2.6rem, min(4.1vw, 7.6vh), 4.6rem); }
  .hero-k--schlank .hero-k__text { max-width: min(42rem, 52vw); }
}

/* --- Zahlen-Balken: Karte ragt in den Hero hinein --- */
.warum-s { position: relative; z-index: 2; padding: 0 0 4rem; }
.zahlen { position: relative; display: grid; gap: 1.5rem; margin-top: -2.75rem; padding: 1.75rem 1.4rem; background: var(--weiss); border: 1px solid var(--linie); border-radius: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08); }
.zahlen__titel { margin: 0; font-size: 1.45rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: var(--dunkel); text-align: left; }
.zahlen__titel .kicker { margin-bottom: 0.3rem; font-size: 0.85rem; }
.warum-s .kicker { color: #666666; }
.zahlen__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1rem; }
.zahl { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; }
.zahl::marker { content: none; }
.zahl__wert { display: flex; align-items: baseline; font-size: clamp(2.5rem, 1.7rem + 2.6vw, 3.7rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--dunkel); font-variant-numeric: tabular-nums; }
/* Wort statt Zahl: zwei Zeilen in halber Zahlengröße = genau so hoch wie die Zahlen, damit die Texte darunter auf einer Linie bleiben */
.zahl__wert--wort { display: block; font-size: calc(clamp(2.5rem, 1.7rem + 2.6vw, 3.7rem) / 2); letter-spacing: -0.01em; }
.zahl__zusatz { font-size: 0.6em; margin-left: 0.05em; color: #9a9a9a; }
.zahl__stern { font-size: 0.55em; margin-left: 0.15em; color: #fbbc04; }
.zahl__text { font-size: 0.95rem; line-height: 1.4; color: var(--grau); }
@media (min-width: 48em) {
  .zahlen { grid-template-columns: 13rem 1fr; align-items: center; gap: 2rem; padding: 2.25rem 2.5rem; }
  .zahlen__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
  .zahl { padding-left: 1.5rem; border-left: 1px solid var(--linie); }
}
@media (min-width: 64em) { .zahlen { margin-top: -4.5rem; } }

/* ==========================================================================
   21.10.2026: KI-Karte rechts im Abschnitt „Top Google-Platzierung …“ + KI-Demo über die volle Breite
   ========================================================================== */
/* --- KI-Karte --- */
.js-effekte .ki-karte.effekt-einblenden.ist-sichtbar:hover { transform: none; }
/* KI-Suchanfrage (früher im Hero) als Überschrift der KI-Karte – darf umbrechen, Cursor blinkt, kein Tipp-Effekt */

/* --- Oberer Teil: Suchleiste, Aussage, Text + Ziele links, Google-Bild rechts (so hoch wie die Textspalte) --- */
@media (min-width: 64em) {
  .intro-k__raster--geteilt { grid-template-columns: 1.05fr 0.95fr; align-items: stretch; gap: 4rem; }
  .intro-k__raster--geteilt .intro-k__rechts, .intro-k__raster--geteilt .prob-v__bild { display: flex; flex-direction: column; height: 100%; }
  .intro-k__raster--geteilt .prob-v__bild img { flex: 1 1 auto; height: 100%; min-height: 20rem; aspect-ratio: auto; }
}
/* KI-Duo unten: Überschrift über die volle Breite, darunter Chatfenster | Ziel von GEO */
.ki-demo__titel { margin: 3.5rem 0 0; font-size: clamp(1.7rem, 1.15rem + 1.8vw, 2.6rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; color: var(--dunkel); text-align: left; }
.ki-demo__titel span { color: var(--rot); }
/* breite Bildschirme: ganzer Satz in einer Zeile über beiden Containern */
@media (min-width: 80em) { .ki-demo__titel { font-size: 2.35rem; white-space: nowrap; } }
.ki-demo__titel + .ki-demo { margin-top: 1.75rem; }
/* KI-Suchanfrage als dezente, schmale Suchleiste über „Die meisten Unternehmens-Webseiten …“ (linke Spalte) */
.hero-k__suche.ki-suchleiste { width: 100%; max-width: 36rem; margin: 0 0 1.25rem; padding: 0.35rem 1rem 0.35rem 0.35rem; border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05); font-size: 0.92rem; }
.ki-suchleiste .hero-k__suche-label { padding: 0.22rem 0.65rem; font-size: 0.74rem; }
.hero-k__suche.ki-suchleiste, .hero-k .hero-k__suche.ki-suchleiste { border-radius: 16px; } /* die Frage bricht je nach Breite in zwei Zeilen um */
/* Frage darf umbrechen (sonst schnitt der CSS-Tipp-Effekt „… sichtbar?“ ab); Tippen übernimmt js/effekte.js, Cursor blinkt */
.ki-suchleiste .hero-k__frage { display: inline; white-space: normal; overflow: visible; max-width: none; animation: frage-cursor 1.1s steps(1) infinite; }
@media (min-width: 64em) { .ki-demo__titel { margin-top: 4.5rem; } .ki-demo__titel + .ki-demo { margin-top: 2rem; } }
@media (min-width: 48em) { .ki-demo.ki-demo--duo { grid-template-columns: 1.15fr 0.85fr; } }
@media (min-width: 64em) { .ki-demo.ki-demo--duo { grid-template-columns: 1.2fr 0.8fr; gap: 1.75rem; } }

/* --- KI-Trio: drei helle Container nebeneinander (Text | animierte KI-Antwort | Ziel von GEO) --- */
.ki-demo { display: grid; gap: 1.25rem; margin: 3rem 0 0; }
.ki-demo__box { position: relative; margin: 0; border-radius: 18px; }
.ki-demo .ki-karte { padding: 1.6rem 1.5rem 1.5rem; }
.ki-demo .ki-karte__titel { font-size: clamp(1.35rem, 1.05rem + 0.9vw, 1.7rem); }
.ki-demo .ki-karte > p { font-size: 0.98rem; line-height: 1.6; margin-bottom: 1rem; }
.ki-demo .ki-karte__punkte { gap: 0.55rem; font-size: 0.95rem; }
.ki-demo .ki-karte__punkte li { padding-left: 2rem; }
.ki-demo .ki-karte__punkte li::before { width: 1.4rem; height: 1.4rem; }
.ki-demo .ki-karte .btn-gruppe { margin-top: 1.25rem; }
/* Mitte: Chatfenster */
.ki-demo__chat { display: flex; flex-direction: column; }
.ki-demo__fenster { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--weiss); border: 1px solid var(--linie); border-radius: 18px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.09); }
.ki-demo__leiste { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.9rem; background: #fafafa; border-bottom: 1px solid var(--linie); }
.ki-demo__ampel { display: flex; gap: 0.35rem; }
.ki-demo__ampel i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #d4d4d4; }
.ki-demo__name { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--dunkel); color: var(--weiss); font-size: 0.78rem; font-weight: 700; }
.ki-demo__name svg, .ki-demo__avatar svg { fill: currentColor; }
.ki-demo__verlauf { flex: 1; display: grid; gap: 0.9rem; align-content: start; min-height: 14.5rem; padding: 1.1rem 0.9rem 0.9rem; }
.ki-demo__frage { justify-self: end; max-width: 90%; margin: 0; padding: 0.65rem 0.9rem; border-radius: 16px 16px 4px 16px; background: var(--dunkel); color: var(--weiss); font-size: 0.95rem; line-height: 1.45; }
.ki-demo__tippt { display: none; }
.ki-demo__antwort { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; }
.ki-demo__avatar { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--dunkel); color: var(--weiss); box-shadow: 0 0 0 4px var(--grau-hell); }
.ki-demo__blase { padding: 0.75rem 0.9rem; border-radius: 4px 16px 16px 16px; background: var(--grau-hell); }
.ki-demo__blase p { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.ki-demo__blase mark { padding: 0 0.15em; color: var(--rot); font-weight: 800; background: linear-gradient(transparent 60%, rgba(153, 0, 0, 0.18) 60%) no-repeat; background-size: 100% 100%; }
.ki-demo__blase .ki-demo__quelle { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.6rem; padding: 0.15rem 0.65rem; border: 1px solid #d6d6d6; border-radius: 999px; background: var(--weiss); font-size: 0.8rem; color: #555555; white-space: nowrap; }
.ki-demo__quelle svg, .ki-demo__senden svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ki-demo__eingabe { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0 0.9rem 0.9rem; padding: 0.4rem 0.4rem 0.4rem 0.95rem; border: 1px solid #d6d6d6; border-radius: 999px; font-size: 0.88rem; color: #767676; }
.ki-demo__eingabe-text { min-height: 1.5em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ki-demo__senden { display: grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: #d9d9d9; color: var(--weiss); transition: background 0.3s; }
.ki-demo__text { margin-top: 0.7rem; font-size: 0.82rem; line-height: 1.45; color: var(--grau); text-align: center; }
.ki-demo__nochmal { display: inline-block; margin: 0.4rem 0 0; padding: 0.2rem 0.8rem; border: 1.5px solid var(--rot); border-radius: 999px; background: var(--weiss); color: var(--rot); font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: background 0.2s, color 0.2s; }
.ki-demo__nochmal:hover { background: var(--rot); color: var(--weiss); }
/* Rechts: Ziel von GEO – zarter Rotton, weiße Plaketten */
.ki-demo__seite { display: flex; flex-direction: column; justify-content: center; padding: 1.6rem 1.5rem; background: linear-gradient(160deg, var(--rot-hell) 0%, #ffffff 100%); border: 1px solid rgba(153, 0, 0, 0.12); }
.ki-demo__kicker { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.5rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grau); }
.ki-demo__kicker::before { content: ""; width: 1.6rem; height: 2px; background: var(--rot); }
.ki-demo__aussage { margin: 0 0 1.25rem; font-size: clamp(1.35rem, 1.05rem + 0.9vw, 1.7rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--dunkel); text-wrap: balance; }
.ki-demo__aussage span { display: block; color: var(--rot); }
.ki-demo__plaketten { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.ki-demo__plakette { display: flex; align-items: center; gap: 0.7rem; margin: 0; padding: 0.65rem 0.85rem; border-radius: 12px; background: var(--weiss); border: 1px solid rgba(0, 0, 0, 0.06); color: var(--dunkel); font-size: 0.95rem; font-weight: 700; line-height: 1.3; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); }
.ki-demo__plakette::marker { content: none; }
.ki-demo__plakette span { display: grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--rot); color: var(--weiss); font-size: 0.85rem; }
@media (min-width: 48em) {
  .ki-demo { grid-template-columns: 1fr 1fr; }
  .ki-demo .ki-karte { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  .ki-demo { grid-template-columns: 1fr 1.08fr 0.92fr; align-items: stretch; gap: 1.5rem; margin-top: 3.5rem; }
  .ki-demo .ki-karte { grid-column: auto; }
}

/* Ablauf (nur mit JavaScript): Frage tippt sich ein → wird gesendet → KI „denkt“ → Antwort → Quelle.
   „Das Ziel von GEO“ mit den Plaketten steht fest (ohne Animation, Nutzerwunsch 21.10.2026). */
.ki-demo--aktiv .ki-demo__frage, .ki-demo--aktiv .ki-demo__antwort, .ki-demo--aktiv .ki-demo__quelle { opacity: 0; transform: translateY(12px); }
.ki-demo--aktiv .ki-demo__blase mark { background-size: 0% 100%; }
.ki-demo--aktiv .ki-demo__eingabe-text.ist-tippend { color: var(--dunkel); }
.ki-demo--aktiv .ki-demo__eingabe-text.ist-tippend::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -0.15em; background: var(--rot); animation: ki-cursor 0.8s steps(1) infinite; }
.ki-demo--aktiv.ist-tippend-senden .ki-demo__senden { background: var(--rot); }
.ki-demo--gesendet .ki-demo__frage { opacity: 1; transform: none; transition: opacity 0.45s ease, transform 0.45s ease; }
.ki-demo--denkt .ki-demo__tippt { display: flex; gap: 0.35rem; width: fit-content; margin: -0.2rem 0 0 2.6rem; padding: 0.6rem 0.85rem; border-radius: 4px 16px 16px 16px; background: var(--grau-hell); }
.ki-demo--denkt .ki-demo__tippt i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #9a9a9a; animation: ki-punkt 1s ease-in-out infinite; }
.ki-demo--denkt .ki-demo__tippt i:nth-child(2) { animation-delay: 0.15s; }
.ki-demo--denkt .ki-demo__tippt i:nth-child(3) { animation-delay: 0.3s; }
.ki-demo--antwort .ki-demo__tippt { display: none; }
.ki-demo--antwort .ki-demo__antwort { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.5s ease; }
.ki-demo--antwort .ki-demo__blase mark { background-size: 100% 100%; transition: background-size 0.7s ease 0.45s; }
.ki-demo--quelle .ki-demo__quelle { opacity: 1; transform: none; transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes ki-punkt { 0%, 100% { opacity: 0.35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes ki-cursor { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ki-demo--aktiv .ki-demo__frage, .ki-demo--aktiv .ki-demo__antwort, .ki-demo--aktiv .ki-demo__quelle { opacity: 1; transform: none; }
  .ki-demo--aktiv .ki-demo__blase mark { background-size: 100% 100%; }
}

/* ==========================================================================
   21.10.2026: Problem und Lösung – Bildband + zwei Karten (Problem | Pfeil | Lösung), aus „Sachscom 2“ abgeleitet;
   Lösung bewusst WEISS mit animierter roter Linie oben (Nutzer: Rot nicht so aufdringlich)
   ========================================================================== */
.pl { position: relative; z-index: 1; display: grid; align-items: stretch; }
.pl__spalte { position: relative; overflow: hidden; padding: 1.75rem 1.4rem; border-radius: 22px; background: var(--weiss); }
.pl__spalte--problem { border: 1px solid var(--linie); box-shadow: 0 18px 40px rgba(20, 30, 50, 0.08); }
.pl__spalte--loesung { border: 1px solid rgba(153, 0, 0, 0.14); box-shadow: 0 26px 56px rgba(20, 30, 50, 0.14); }
/* rote Linie oben – läuft beim Einblenden von links nach rechts */
.pl__spalte--loesung::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, #6e0000 0%, var(--rot) 45%, #d42020 100%); transform-origin: left; }
.js-effekte .pl__spalte--loesung::before { transform: scaleX(0); transition: transform 1.1s cubic-bezier(.22, .61, .36, 1) 0.5s; }
.js-effekte .pl__spalte--loesung.ist-sichtbar::before { transform: scaleX(1); }
.pl__titel { margin: 0 0 1.1rem; font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); font-weight: 800; line-height: 1.2; color: var(--dunkel); text-align: left; text-wrap: balance; }
.pl__etikett { display: block; width: fit-content; margin-bottom: 0.8rem; padding: 0.3rem 0.8rem; border-radius: 999px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; background: #ececec; color: #444444; }
.pl__spalte--loesung .pl__etikett { background: var(--rot); color: var(--weiss); }
.pl__liste { list-style: none; margin: 0; padding: 0; }
.pl__liste li { position: relative; margin: 0; padding: 0.8rem 0 0.8rem 2.5rem; line-height: 1.45; border-bottom: 1px solid var(--linie); }
.pl__liste li::marker { content: none; }
.pl__liste li::before { content: ""; position: absolute; left: 0; top: 0.72rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; }
.pl__spalte--problem li { color: #4a4a4a; }
.pl__spalte--problem li::before { background: #eeeeee url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center / 55% no-repeat; }
.pl__spalte--loesung li { color: var(--dunkel); }
.pl__spalte--loesung li::before { background: var(--rot) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 60% no-repeat; }
.pl__fazit { margin: 1.4rem 0 0; font-size: 1.1rem; font-weight: 800; line-height: 1.35; color: var(--dunkel); }
.pl__spalte--loesung .pl__fazit { color: var(--rot); }
.pl__pfeil { position: relative; z-index: 2; display: grid; place-items: center; width: 3.6rem; height: 3.6rem; margin: -1.1rem auto; border-radius: 50%; background: var(--weiss); color: var(--rot); border: 1px solid var(--linie); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15); transform: rotate(90deg); }
.pl__pfeil svg { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.js-effekte .pl__spalte.effekt-einblenden.ist-sichtbar:hover { transform: none; }
.js-effekte .pl__spalte--loesung.effekt-einblenden { transition-delay: 0.15s; }
@media (min-width: 64em) {
  .pl { grid-template-columns: 1fr auto 1fr; }
  .pl__spalte { padding: 2.5rem 2.25rem; }
  .pl__pfeil { align-self: center; margin: 0 -1.8rem; transform: none; }
}
/* Kontrast: Problem bewusst blass und grau, Lösung hell, größer, mit Rot */
.pl__spalte--problem { background: #f4f5f7; border-color: #e6e8ec; box-shadow: none; }
.pl__spalte--problem .pl__titel { color: #555555; }
.pl__spalte--problem li { color: #6b6b6b; border-bottom-color: #e3e5e9; }
.pl__spalte--problem li strong { color: #444444; }
.pl__spalte--problem li::before { background-color: #e1e3e7; }
.pl__spalte--loesung li strong { color: var(--rot); }
.pl__fazit { display: flex; align-items: center; gap: 0.65rem; padding: 0.8rem 1rem; border-radius: 12px; }
.pl__fazit-zeichen { display: grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; font-size: 1rem; font-weight: 900; }
.pl__spalte--problem .pl__fazit { background: #e8eaee; color: #555555; }
.pl__spalte--problem .pl__fazit-zeichen { background: #b8bcc4; color: var(--weiss); }
.pl__spalte--loesung .pl__fazit { background: var(--rot-hell); color: var(--rot); }
.pl__spalte--loesung .pl__fazit-zeichen { background: var(--rot); color: var(--weiss); }
@media (min-width: 64em) {
  .pl__spalte--problem { transform: scale(0.97); }
  .pl__spalte--loesung { transform: scale(1.03); }
  .js-effekte .pl__spalte--problem.effekt-einblenden.ist-sichtbar, .js-effekte .pl__spalte--problem.effekt-einblenden.ist-sichtbar:hover { transform: scale(0.97); }
  .js-effekte .pl__spalte--loesung.effekt-einblenden.ist-sichtbar, .js-effekte .pl__spalte--loesung.effekt-einblenden.ist-sichtbar:hover { transform: scale(1.03); }
}
/* 21.10.2026: „Alles aus einer Hand“ schlank – Geräte-Bild nur angedeutet im Hintergrund über die volle Breite,
   Überschrift zentriert, Leistungen als Buttons nebeneinander, darunter CTA */
.section.leist-k { position: relative; background: var(--trenner), var(--weiss); }   /* 23.10.2026: Hintergrundbild (Geräte) auf Nutzer-Wunsch entfernt – weiß mit Trenner wie alle Abschnitte */
@media (min-width: 64em) { .section.leist-k { padding-top: 6rem; padding-bottom: 6rem; } }
.leist-k__inhalt { position: relative; max-width: 68rem; text-align: center; }
.leist-k h4, .leist-k .h4 { margin: 0 0 1.75rem; text-align: center; }
.leist-k__knoepfe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.75rem; text-align: left; }
@media (min-width: 40em) { .leist-k__knoepfe { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .leist-k__knoepfe { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.leist-k__knoepfe li { margin: 0; padding: 0; }
.leist-k__knoepfe li::marker { content: none; }
.leist-k__knopf, a.leist-k__knopf, a.leist-k__knopf:visited { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 3.4rem; padding: 0.8rem 1.2rem; background: var(--weiss); border: 1.5px solid rgba(153, 0, 0, 0.25); border-radius: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05); color: var(--dunkel); font-weight: 700; text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s, color 0.2s; }
.leist-k__knopf::after { content: "→"; color: var(--rot); transition: transform 0.2s; }
.leist-k__knopf:hover, .leist-k__knopf:focus-visible { border-color: var(--rot); box-shadow: 0 10px 24px rgba(153, 0, 0, 0.12); color: var(--rot); transform: translateY(-2px); }
.leist-k__knopf:hover::after { transform: translateX(3px); }
.leist-k__cta { margin-top: 2.25rem; }
.leist-k__cta .btn { font-size: 1.05rem; box-shadow: 0 12px 28px rgba(153, 0, 0, 0.22); }
/* 21.10.2026: Kundenstimmen auf der Startseite als drei Container nebeneinander */
@media (min-width: 64em) { .stimmen.stimmen--drei { grid-template-columns: repeat(3, 1fr); } }
/* 21.10.2026: Referenzen der Startseite wie in „Sachscom 2“ – ein Fallbeispiel mit Bild + aufgeräumte Ergebnisliste */
.ref-k .unterschied__kicker { display: flex; width: max-content; max-width: 100%; }
.hero__headline.ref-k__titel { max-width: 44rem; margin: 0 0 2.5rem; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.9rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--dunkel); text-wrap: balance; }
.ref-k__titel span { color: var(--rot); }
.ref-k__unter { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.4rem; font-size: 0.95rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grau); }
.ref-k__unter::after { content: ""; flex: 1; height: 1px; background: var(--linie); }
.refs2 { display: grid; gap: 2.5rem; margin: 0 0 2.5rem; }
.ref-gross { margin: 0; overflow: hidden; background: var(--weiss); border: 1px solid var(--linie); border-radius: 18px; transition: opacity 0.7s ease, transform 0.7s ease; }
.js-effekte .ref-gross.effekt-einblenden.ist-sichtbar:hover { transform: none; }
.ref-gross__bild { display: block; cursor: zoom-in; background: var(--grau-hell); }
.ref-gross__bild img { display: block; width: 100%; height: auto; }
.ref-gross__text { padding: 1.4rem 1.5rem 1.6rem; border-top: 1px solid var(--linie); }
.ref-gross__etikett { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--grau); }
.ref-gross__name { margin: 0.25rem 0 0.6rem; font-size: 1.5rem; font-weight: 800; line-height: 1.2; color: var(--dunkel); }
.ref-gross__text > p:not(.ref-gross__name) { margin: 0 0 1rem; line-height: 1.6; }
.ref-gross__link, .ref-gross__link:visited { font-size: 0.95rem; font-weight: 700; color: var(--dunkel); text-underline-offset: 4px; }
.ref-gross__link::after { content: " ↗"; }
.ref-liste__kopf { display: none; }
.ref-liste ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.ref-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "firma platz" "such such"; gap: 0.35rem 1rem; align-items: center; margin: 0; padding: 1.05rem 0; border-bottom: 1px solid var(--linie); }
.ref-liste li::marker { content: none; }
.ref-liste__firma { grid-area: firma; display: flex; flex-direction: column; min-width: 0; }
.ref-liste__firma a, .ref-liste__firma a:visited { font-size: 1.05rem; font-weight: 800; line-height: 1.3; color: var(--dunkel); text-decoration: underline; text-decoration-color: #c4c4c4; text-underline-offset: 4px; }
.ref-liste__firma a:hover { text-decoration-color: currentColor; }
.ref-liste__branche { font-size: 0.85rem; color: var(--grau); }
.ref-liste__suchwort { grid-area: such; display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; color: #444444; }
.ref-liste__suchwort::before { content: ""; flex: 0 0 auto; width: 0.95rem; height: 0.95rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23707070' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.8-4.8'/%3E%3C/svg%3E") center / contain no-repeat; }
.ref-liste__platz { grid-area: platz; justify-self: end; padding: 0.25rem 0.7rem; border-radius: 999px; background: #e6f4ea; color: #0d652d; font-size: 0.82rem; font-weight: 800; white-space: nowrap; }
@media (min-width: 48em) {
  .ref-liste__kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 5.5rem; gap: 1rem; margin: 0; padding: 0 0 0.6rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--grau); }
  .ref-liste__kopf span:last-child { text-align: right; }
  .ref-liste li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 5.5rem; grid-template-areas: "firma such platz"; padding: 1.15rem 0; }
}
@media (min-width: 64em) {
  .refs2 { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3.5rem; align-items: center; }
}/* Suchbegriffe: Umbruch nur zwischen den Begriffen; Suchbegriff-Spalte breiter */
.ref-liste__suchwort { align-items: flex-start; }
.ref-liste__suchwort::before { margin-top: 0.25rem; }
.ref-liste__begriffe { line-height: 1.45; }
.ref-liste__begriffe > span { white-space: nowrap; }
@media (min-width: 48em) {
  .ref-liste__kopf, .ref-liste li { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr) 5.5rem; }
}
/* 21.10.2026: Kontaktbereich der Startseite wie in „Sachscom 2“ – Kopf zentriert, Formular | dunkler Steckbrief */
.kontakt-duo { padding: 4.5rem 0 5rem; background: linear-gradient(180deg, var(--weiss) 0%, var(--grau-hell) 100%); }
.kontakt-duo__kopf { max-width: 52rem; margin: 0 auto 2.75rem; text-align: center; }
.kontakt-duo__kopf .kicker { margin-bottom: 0.6rem; color: var(--grau); }
.kontakt-duo__kopf > p { max-width: 42rem; margin: 0 auto; font-size: 1.08rem; line-height: 1.6; color: #444444; }
.schrift6.kontakt-duo__haupttitel { display: block; margin: 0 0 1rem; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.9rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--dunkel); text-align: center; text-wrap: balance; }
.kontakt-duo__haupttitel span { color: var(--rot); }
.kontakt-duo__raster { display: grid; gap: 2rem; align-items: start; }
.kontakt-duo__titel { margin: 0 0 1rem; font-size: 1.45rem; font-weight: 800; line-height: 1.2; color: var(--dunkel); text-align: left; }
.kontakt-duo .formular { max-width: none; margin: 0; padding: 1.75rem 1.4rem; border: 1px solid var(--linie); border-radius: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08); }
@media (min-width: 64em) {
  .kontakt-duo__raster { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2.5rem; }
  .kontakt-duo .formular { padding: 2.25rem; }
  .steckbrief { margin-top: 2.6rem; }
}
.steckbrief { position: relative; overflow: hidden; padding: 1.75rem 1.4rem; border-radius: 20px; color: var(--weiss); background: linear-gradient(160deg, #2f2f2f 0%, #1d1d1d 100%); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22); }
.steckbrief__kopf { display: flex; align-items: center; gap: 1.1rem; }
.steckbrief__foto { flex: 0 0 auto; width: clamp(4.75rem, 22vw, 6.25rem); height: clamp(4.75rem, 22vw, 6.25rem); border-radius: 50%; object-fit: cover; border: 3px solid var(--weiss); }
.steckbrief__rolle { display: block; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #bdbdbd; }
.steckbrief__name { margin: 0.15rem 0 0.1rem; font-size: 1.7rem; font-weight: 800; line-height: 1.1; color: var(--weiss); text-align: left; }
.steckbrief__untertitel { margin: 0; color: #d6d6d6; }
.steckbrief__fakten { margin: 1.5rem 0 0; }
.steckbrief__fakten > div { display: grid; gap: 0.2rem; padding: 0.7rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.13); }
@media (min-width: 30em) { .steckbrief__fakten > div { grid-template-columns: minmax(7.5rem, 32%) 1fr; gap: 0.9rem; } }
.steckbrief__fakten dt { padding-top: 0.15rem; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #bdbdbd; }
.steckbrief__fakten dd { margin: 0; line-height: 1.45; }
.steckbrief a:focus-visible { outline: 3px solid var(--fokus-dunkel); outline-offset: 2px; }
@media (min-width: 48em) { .steckbrief { padding: 2.25rem; } }.steckbrief__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.steckbrief__liste li { position: relative; margin: 0; padding-left: 1rem; line-height: 1.45; }
.steckbrief__liste li::marker { content: none; }
.steckbrief__liste li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #e05252; }/* Kontakt-Kopf linksbündig, Kontaktdaten als helle Knöpfe darunter; Steckbrief ohne Zitat/Kontaktknöpfe */
.kontakt-duo__kopf { max-width: none; margin: 0 0 2.75rem; text-align: left; }
.kontakt-duo__kopf .kicker { display: flex; width: max-content; max-width: 100%; }
.schrift6.kontakt-duo__haupttitel { max-width: 46rem; text-align: left; }
.kontakt-duo__kopf > p { max-width: 46rem; margin: 0; }
.kontakt-duo__wege { display: flex; flex-wrap: wrap; gap: 0.75rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.kontakt-duo__wege li { margin: 0; }
.kontakt-duo__wege li::marker { content: none; }
.kontakt-duo__wege a, .kontakt-duo__wege a:visited { display: inline-flex; align-items: center; gap: 0.65rem; padding: 0.45rem 1.1rem 0.45rem 0.45rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--weiss); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05); color: var(--dunkel); font-weight: 700; text-decoration: none; transition: border-color 0.2s, color 0.2s; }
.kontakt-duo__wege a:hover { border-color: var(--rot); color: var(--rot); text-decoration: underline; }
.kontakt-duo__wege img { width: 2rem; height: 2rem; }
.steckbrief__fakten > div:last-child { border-bottom: 0; }/* Kontakt-Kopf: Überschrift und Text über die gesamte Breite */
.schrift6.kontakt-duo__haupttitel, .kontakt-duo__kopf > p { max-width: none; text-wrap: wrap; }/* Formular-Karte und Steckbrief gleich lang (Desktop) */
@media (min-width: 64em) {
  .kontakt-duo__raster { align-items: stretch; }
  .kontakt-duo__formular { display: flex; flex-direction: column; }
  .kontakt-duo__formular .formular { flex: 1 1 auto; align-content: start; }
}
/* 21.10.2026: FAQ der Startseite übersichtlicher – links Kopf mit Knöpfen, rechts Fragen in Themengruppen als Karten */
.faq-k { background: var(--grau-hell); }
.faq-k__raster { display: grid; gap: 2rem; }
.faq-k__kopf .kicker { color: var(--grau); }
.faq-k__titel { margin: 0 0 1rem; font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.3rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--dunkel); text-align: left; text-wrap: balance; }
.faq-k__kopf > p { margin: 0 0 1.5rem; line-height: 1.6; color: #444444; }
.faq-k__knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.faq-k__mehr { margin: 1.5rem 0 0; font-weight: 700; }
.faq-k__mehr a, .faq-k__mehr a:visited { color: var(--rot); text-underline-offset: 4px; }
.faq-k__mehr a::after { content: " →"; }
.faq-k__liste { display: grid; gap: 1.75rem; }
.faq-k__gruppentitel { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.75rem; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grau); }
.faq-k__gruppentitel::after { content: ""; flex: 1; height: 1px; background: var(--linie); }
.faq-k .acc { margin: 0 0 0.6rem; overflow: hidden; background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04); transition: border-color 0.2s, box-shadow 0.2s; }
.faq-k .acc:hover { border-color: #cfcfcf; }
.faq-k .acc:has(input.open:checked) { border-color: rgba(153, 0, 0, 0.35); box-shadow: 0 10px 26px rgba(153, 0, 0, 0.08); }
.faq-k .acc .choice { grid-template-columns: 1fr auto; }
/* Geschlossen: „+“ sitzt in der Frage selbst (Klick öffnet). Geöffnet: „–“ im Schließen-Feld daneben (Klick schließt). */
.faq-k .acc label { border-bottom: 0; background: transparent; font-size: 1.02rem; font-weight: 700; line-height: 1.35; }
.faq-k .acc label:nth-child(odd) { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; }
.faq-k .acc label:nth-child(odd)::after { content: "+"; float: none; flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; margin: 0; border-radius: 50%; background: var(--rot-hell); color: var(--rot); font-size: 1.2rem; font-weight: 700; line-height: 1; }
.faq-k .acc label.close { display: none; }
.faq-k .acc input.open:checked ~ label { background: transparent; color: var(--rot); }
.faq-k .acc input.open:checked ~ label:nth-child(odd) { padding-right: 0; }
.faq-k .acc input.open:checked ~ label:nth-child(odd)::after { display: none; }
.faq-k .acc input.open:checked ~ label.close { display: flex; align-items: center; padding: 1rem 1.25rem 1rem 0.75rem; }
.faq-k .acc input.open:checked ~ label.close::after { content: "–"; float: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--rot); color: var(--weiss); font-size: 1.2rem; font-weight: 700; line-height: 1; }
.faq-k .acc .panel { background: transparent; padding-left: 1.25rem; padding-right: 1.25rem; }
.faq-k .acc input.open:checked ~ .panel { padding: 0 1.25rem 1.25rem; }
.faq-k .acc .panel p { margin: 0; color: #444444; }
@media (min-width: 64em) {
  .faq-k__raster { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 3.5rem; align-items: start; }
  .faq-k__kopf { position: sticky; top: 8rem; }
  .faq-k__knoepfe { flex-direction: column; align-items: flex-start; }
}
/* 21.10.2026: Kopf ALLER Unterseiten (auch Rechtliches/404/Danke) mit hellem Weiß-Blaugrau-Verlauf wie auf der Startseite
   (Farben aus dem Hero-Bild der Startseite) statt flachem Grau. Die Startseite (.hero-k) bleibt unverändert. */
.page-hero--unterseite, .seitenkopf { background: linear-gradient(100deg, #ffffff 0%, #fbfcfd 28%, #eef3f6 52%, #dfe8ee 78%, #d6e1e8 100%); border-bottom-color: #d9e2e8; }
/* 21.10.2026: Kundenlogin-Seite (Ordner Kundenlogin, www.sachscom-kunde.de/start/) – Passwort-Karte | Ansprechpartner */
.page-hero.login-k { padding: 2.5rem 0 3.5rem; }
.login-k__raster { display: grid; gap: 2rem; align-items: stretch; }
.login-k__karte { padding: 1.75rem 1.4rem; background: var(--weiss); border: 1px solid var(--linie); border-radius: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08); }
.login-k__text { margin: 0 0 1.5rem; font-size: 1.08rem; line-height: 1.6; color: #444444; }
.login-k__formular { display: grid; gap: 0.5rem; max-width: 30rem; }
.login-k__formular label { font-weight: 700; }
.login-k__feld { display: flex; gap: 0.5rem; }
.login-k__feld input { flex: 1 1 auto; min-width: 0; padding: 0.8rem 0.9rem; border: 2px solid #8a8a8a; border-radius: 10px; background: var(--weiss); color: var(--text); font: inherit; font-size: 1.1rem; letter-spacing: 0.02em; }
.login-k__feld input:focus-visible { outline: 3px solid var(--fokus); outline-offset: 1px; border-color: var(--dunkel); }
.login-k__feld input[aria-invalid="true"] { border-color: var(--rot); }
.login-k__zeigen { flex: none; padding: 0 1rem; border: 2px solid var(--linie); border-radius: 10px; background: var(--grau-hell); color: var(--dunkel); font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; }
.login-k__zeigen:hover { border-color: #bdbdbd; }
.no-js .login-k__zeigen { display: none; }
.login-k__hinweis { margin: 0; font-size: 0.9rem; color: var(--grau); }
.login-k__meldung { margin: 0; min-height: 1.4em; color: var(--rot); font-weight: 700; }
.login-k__meldung:empty { min-height: 0; }
.login-k__formular .btn { margin-top: 0.5rem; }
.login-k__hilfe { margin: 1.75rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--linie); line-height: 1.6; }
.login-k__zurueck { margin: 0.75rem 0 0; font-weight: 700; }
.login-k__zurueck a, .login-k__zurueck a:visited { color: var(--rot); text-underline-offset: 4px; }
.login-k__zurueck a::before { content: "← "; }
.login-k__kontakt dd a, .login-k__kontakt dd a:visited { color: var(--weiss); text-underline-offset: 3px; }
.login-k__kontakt dd a:hover { color: #ffd2d2; }
.login-k__kontakt .steckbrief__fakten > div:last-child { border-bottom: 0; }
@media (min-width: 48em) { .login-k__karte { padding: 2.5rem; } }
@media (min-width: 64em) {
  .page-hero.login-k { padding: 4rem 0 5rem; }
  .login-k__raster { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 2.5rem; }
}.steckbrief.login-k__kontakt { margin-top: 0; }   /* Abstand aus dem Kontaktbereich der Startseite hier nicht */.login-k__raster { grid-template-columns: minmax(0, 1fr); }   /* Handy: Spalte nie breiter als der Bildschirm */
@media (min-width: 64em) { .login-k__raster { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }
/* 22.10.2026: Kundenseite nach dem Login (Kundenlogin/<code>002.htm, erzeugt mit kundenseite.js) – Entwurf + Abnahme-Ablauf */
.kunde-k__start { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin: 0 0 2.25rem; padding: 1.25rem 1.4rem;
  background: linear-gradient(120deg, var(--rot-hell) 0%, #ffffff 100%); border: 1px solid #f1dcdc; border-radius: 16px; }
.kunde-k__knopf { font-size: 1.1rem; }
.kunde-k__adresse { margin: 0; min-width: 0; font-size: 0.92rem; color: var(--grau); overflow-wrap: anywhere; }
.login-k__karte .kunde-k__titel { margin: 0 0 1rem; text-align: left; font-size: 1.35rem; font-weight: 800; color: var(--dunkel); }
.kunde-schritte { display: grid; gap: 0.85rem; margin: 0 0 1.75rem; padding: 0; list-style: none; }
.kunde-schritte li { display: flex; gap: 1rem; align-items: flex-start; margin: 0; padding: 1rem 1.15rem; background: var(--weiss);
  border: 1px solid var(--linie); border-radius: 14px; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.kunde-schritte li::marker { content: none; }
.kunde-schritte li:hover { border-color: #e3bcbc; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06); transform: translateY(-2px); }
.kunde-schritte__nr { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--rot); color: var(--weiss); font-weight: 800; font-size: 1.05rem; box-shadow: 0 6px 14px rgba(153, 0, 0, 0.22); }
.kunde-schritte strong { display: block; font-size: 1.05rem; color: var(--dunkel); }
.kunde-schritte p { margin: 0.25rem 0 0; line-height: 1.55; color: #444444; }
.kunde-schritte__link, .kunde-schritte__link:visited { display: inline-block; margin-top: 0.15rem; font-weight: 700; color: var(--rot); text-underline-offset: 4px; }
.kunde-schritte__link::before { content: "↓ "; }
.login-k__karte .kunde-k__wichtig { margin: 0; max-width: none; }
/* Passwortfeld ragte auf schmalen Handys (320–375 px) aus der Karte: Raster-Spalte darf schrumpfen */
.login-k__formular { grid-template-columns: minmax(0, 1fr); }
/* Kundenseite: Ansprechpartner-Karte am Desktop nur so hoch wie ihr Inhalt, bleibt beim Scrollen stehen */
@media (min-width: 64em) { .kunde-k .login-k__kontakt { align-self: start; position: sticky; top: 7rem; } }
@media (prefers-reduced-motion: reduce) { .kunde-schritte li, .kunde-schritte li:hover { transition: none; transform: none; } }
/* 22.10.2026: Text links, Bild rechts (SEO „Das Problem“, Onlineshop „Ihre Vorteile“) – Bilder 08 und 011 aus dem Impressum */
.zweispaltig.text-bild { align-items: center; }
.text-bild .abschnitt-titel, .text-bild .section__intro { text-align: left; margin-left: 0; margin-right: 0; }
.text-bild .unterschied__kicker { margin-left: 0; margin-right: 0; }
.text-bild__bild img { border-radius: 18px; box-shadow: 0 20px 44px rgba(0, 0, 0, 0.12); aspect-ratio: auto; }   /* Bild ungeschnitten (23.10.: Kopf wurde sonst abgeschnitten) */
@media (min-width: 64em) { .zweispaltig.text-bild { grid-template-columns: 1.15fr 0.85fr; gap: 4rem; } }
/* 23.10.2026: Dreier-Container SEO & GEO „Das Problem“ – Text | Bild | „Das Ziel von GEO“ (Karte wie auf der Startseite) */
.text-bild-drei { display: grid; gap: 1.5rem; align-items: stretch; }
.text-bild-drei > * { min-width: 0; }
.text-bild-drei__text { align-self: center; }
.text-bild-drei .abschnitt-titel, .text-bild-drei .section__intro { text-align: left; margin-left: 0; margin-right: 0; }
.text-bild-drei .unterschied__kicker { margin-left: 0; margin-right: 0; }
.text-bild-drei .section__intro { margin-bottom: 0; }
.text-bild-drei__bild { position: relative; margin: 0; }
.text-bild-drei__bild img { display: block; width: 100%; height: 100%; min-height: 17rem; aspect-ratio: auto; object-fit: cover; object-position: 50% 25%;
  border-radius: 18px; box-shadow: 0 20px 44px rgba(0, 0, 0, 0.12); }
.text-bild-drei__ziel { box-shadow: 0 20px 44px rgba(153, 0, 0, 0.08); transition: opacity 0.7s ease, transform 0.5s ease, box-shadow 0.3s ease; }
.text-bild-drei__ziel:hover { box-shadow: 0 28px 56px rgba(153, 0, 0, 0.14); }
.text-bild-drei__ziel .ki-demo__plakette { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05); }
@media (min-width: 48em) {
  .text-bild-drei { grid-template-columns: 1fr 1fr; }
  .text-bild-drei__text { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  .text-bild-drei { grid-template-columns: 1.1fr 0.9fr 1fr; gap: 2rem; }
  .text-bild-drei__text { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { .text-bild-drei__ziel { transition: none; } }
/* 23.10.2026: Satz „Wenn Ihre Kunden die KI fragen, lautet die Antwort: Sie.“ Wort für Wort (js/effekte.js, data-woerter) */
.woerter-bereit .wort { display: inline-block; opacity: 0; transform: translateY(0.4em); filter: blur(5px);
  transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease; transition-delay: calc(var(--i) * 95ms + 150ms); }
.woerter-an .wort { opacity: 1; transform: none; filter: none; }
.ki-demo__aussage .wort { color: inherit; }   /* Wörter behalten die Farbe ihrer Zeile (sonst greift .ki-demo__aussage span = rot) */
.woerter-bereit .wort--ziel { position: relative; isolation: isolate; transform: scale(0.4);
  transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease; transition-delay: calc(var(--i) * 95ms + 450ms); }
.woerter-an .wort--ziel { transform: none; }
.woerter-bereit .wort--ziel::after { content: ""; position: absolute; z-index: -1; left: -0.12em; right: -0.12em; bottom: 0.04em; height: 0.36em;
  border-radius: 4px; background: rgba(153, 0, 0, 0.18); transform: scaleX(0); transform-origin: left center;
  transition: transform 0.45s ease; transition-delay: calc(var(--i) * 95ms + 1000ms); }
.woerter-an .wort--ziel::after { transform: scaleX(1); }
/* 23.10.2026: Kopf der Seite SEO & GEO – Erfahrung sichtbar machen: Kennzahlen unter dem Text + Plakette auf dem Bild */
.hero-zahlen { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.hero-zahlen li { position: relative; overflow: hidden; margin: 0; padding: 0.75rem 0.9rem 0.65rem; background: var(--weiss);
  border: 1px solid var(--linie); border-radius: 14px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06); }
.hero-zahlen li::marker { content: none; }
.hero-zahlen li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #990000, #e00010, #ff5a5a); }
.hero-zahlen__wert { display: block; font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.85rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--rot); white-space: nowrap; }
.hero-zahlen__stern { margin-left: 0.12em; font-size: 0.75em; color: #FBBC04; }
.hero-zahlen__text { display: block; margin-top: 0.3rem; font-size: 0.84rem; font-weight: 600; line-height: 1.3; color: var(--dunkel); }
.page-hero--erfahrung .haken { margin-top: 0.85rem; }
.page-hero--erfahrung .page-hero__bild { position: relative; }
.page-hero__plakette { position: absolute; z-index: 1; left: 1.25rem; top: 1.25rem; display: flex; align-items: center; gap: 0.8rem;
  max-width: min(25rem, calc(100% - 2.5rem)); margin: 0; padding: 0.8rem 1.15rem 0.8rem 0.8rem; background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
  font-size: 0.9rem; line-height: 1.4; color: var(--text); }
.page-hero__plakette strong { display: block; font-size: 1.02rem; color: var(--dunkel); }
.page-hero__plakette-symbol { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--rot); color: var(--weiss);
  box-shadow: 0 0 0 5px rgba(153, 0, 0, 0.12); }
@media (max-width: 29.99em) {
  .hero-zahlen { gap: 0.5rem; }
  .hero-zahlen li { padding: 0.85rem 0.6rem 0.7rem; }
  .hero-zahlen__text { font-size: 0.76rem; }
  .page-hero__plakette { font-size: 0.82rem; }
}
/* Handy/Tablet hochkant: Plakette unter dem (flachen) Bild, leicht überlappend – verdeckt das Bild nicht */
@media (max-width: 63.99em) { .page-hero__plakette { position: relative; left: auto; top: auto; bottom: auto; max-width: none; margin: -2rem 0.75rem 0; } }

/* 23.10.2026: Kopfbild Webdesign (Laptop vor Backsteinwand) – Laptop im Bildfeld halten */
.page-hero__bild img[src*="webdesign-laptop-wand"] { object-position: 64% 50%; }

/* 23.10.2026: FAQ im Startseiten-Aufbau auf allen Seiten – folgt sie auf einen grauen Abschnitt, wird sie weiß (keine zwei grauen Flächen hintereinander) */
/* (frühere Sonderregel FAQ nach grauem Abschnitt – entfällt, alle Flächen weiß mit Trennlinie) */
/* 23.10.2026: FAQ-Untergliederungen freundlicher – statt grauer Großbuchstaben mit Linie ein zartrotes Etikett mit Symbol
   (1 Ihr Nutzen = Aufwärtspfeil, 2 Leistungen & Technik = Code, 3 Zusammenarbeit = Personen) */
.faq-k__gruppentitel { display: inline-flex; align-items: center; gap: 0.65rem; margin: 0 0 0.9rem; padding: 0.4rem 1.1rem 0.4rem 0.4rem;
  border-radius: 999px; background: linear-gradient(90deg, var(--rot-hell) 0%, #ffffff 100%); border: 1px solid rgba(153, 0, 0, 0.12);
  box-shadow: 0 6px 16px rgba(153, 0, 0, 0.06); font-size: 1rem; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--dunkel); }
.faq-k__gruppentitel::after { content: none; }
.faq-k__gruppentitel::before { content: ""; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--rot) center / 1.05rem no-repeat;
  box-shadow: 0 0 0 4px rgba(153, 0, 0, 0.08); }
.faq-k__gruppe:nth-child(1) .faq-k__gruppentitel::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M14 7h7v7'/%3E%3C/svg%3E"); }
.faq-k__gruppe:nth-child(2) .faq-k__gruppentitel::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 7-5 5 5 5M16 7l5 5-5 5'/%3E%3C/svg%3E"); }
.faq-k__gruppe:nth-child(3) .faq-k__gruppentitel::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6'/%3E%3Cpath d='M16 5a3 3 0 0 1 0 6'/%3E%3Cpath d='M21 20c0-2.6-1.6-4.8-3.9-5.6'/%3E%3C/svg%3E"); }
/* 23.10.2026: freundlichere Abschnittsflächen statt Grau (Nutzer) – heller Blauschimmer aus den Farben des Kopfbereichs,
   läuft nach unten weich in Weiß aus. Gilt für alle abwechselnden Abschnitte, FAQ, „Für wen & wo“ (grau) und das Ortsband. */
.section--alt, .zielgruppe-region.zielgruppe-region--grau, .faq-k, .ort-band {
  /* Weiß mit feiner, seitlich auslaufender Trennlinie oben (Nutzer 23.10.2026).
     Vorher getestet: Blauschimmer radial rgba(214, 225, 232, 0.55) + linear #eef4f8 → #fff; Creme #faf5ec passte nicht zur Seite. */
  background: var(--trenner), var(--weiss); }
/* (Regel für FAQ nach grauem Abschnitt entfällt – alle Flächen sind jetzt weiß mit Trennlinie) */
/* Trennlinie auch über normalen weißen Abschnitten, die auf einen Abschnitt folgen (sonst fehlte sie an jeder zweiten Grenze).
   Nur Abschnitte ohne eigene Gestaltung (class="section") bzw. „Für wen & wo“ – Startseite bleibt unberührt. */
main .section + [class="section"], main .section + .section.zielgruppe-region, main .ort-band + [class="section"], main .ort-band + .section {
  background: var(--trenner), var(--weiss); }
/* 23.10.2026: Abschnitts-Trenner deutlicher – kräftigere, seitlich auslaufende Linie mit rotem Punkt (wie im Logo) und weißem Ring in der Mitte */
:root {
  --trenner: radial-gradient(circle, var(--rot) 0 7.5px, #ffffff 8px 13.5px, transparent 14px) center 0 / 28px 28px no-repeat,
    linear-gradient(90deg, rgba(195, 204, 213, 0) 0%, #c3ccd5 18%, #c3ccd5 82%, rgba(195, 204, 213, 0) 100%) center 13.5px / min(75rem, 92%) 1px no-repeat,
    linear-gradient(180deg, rgba(236, 241, 245, 0.9) 0, rgba(255, 255, 255, 0) 5.5rem) center 14px / 100% 5.5rem no-repeat;   /* zarter Schatten unter der Linie */
}
/* 23.10.2026: Kopf der Unterseiten senkrecht verlaufend (oben Blaugrau, unten Weiß) – geht nahtlos in den Abschnitts-Trenner über.
   Vorher waagerecht 100deg Weiß → #d6e1e8 mit Unterkante + innerem Schatten (ergab mit dem Trenner eine doppelte Linie). */
/* (Nutzer 23.10.: unten früher weiß, dann „noch mehr weiß“ – ab 40% rein weiß; ursprünglich #dce6ed 0 / #e9eff4 35% / #f7f9fb 78% / #fff 100%, wirkte an hohen Köpfen unten noch grau) */
.page-hero--unterseite, .seitenkopf { background: linear-gradient(180deg, #dce6ed 0%, #edf2f5 15%, #f9fbfc 28%, #ffffff 40%); border-bottom: 0; box-shadow: none; }
.page-hero--unterseite + .section, .seitenkopf + .section { background: var(--trenner), var(--weiss); }
/* 23.10.2026: Kopfbild endet bündig auf der Trennlinie (Linie liegt 13,5px unter der Abschnittskante, Punkt braucht oben Platz) –
   Bild ragt dafür 13,5px in den nächsten Abschnitt, untere linke Ecke eckig, damit die Linie sauber anschließt (Nutzer) */
@media (min-width: 64em) {
  .page-hero--unterseite:has(+ .section:not(.section--cta)) .page-hero__grid > .bild:not(.page-hero__bild--ganz) { position: relative; z-index: 1; margin-bottom: -13.5px; }
  .page-hero--unterseite:has(+ .section:not(.section--cta)) .page-hero__grid > .bild:not(.page-hero__bild--ganz) img { border-bottom-left-radius: 0; }
}
/* 23.10.2026: Trenner (Linie + roter Punkt + zarter Verlauf) auch auf der Startseite – ab „Problem und Lösung“ (Nutzer).
   Oberhalb (Kopf, Zahlen, Top Google/KI-Duo) bleibt die eigene Gestaltung. */
main .prob-v, main .kundenstimmen, main .ref-k, main .kontakt-duo { background: var(--trenner), var(--weiss); }
/* („Alles aus einer Hand“: Sonderregeln für das Hintergrundbild entfallen – Bild am 23.10.2026 entfernt) */

/* 23.10.2026: Nach dunklen Flächen (Footer, dunkler Abschluss-Aufruf) keine Trennlinie – der Farbwechsel grenzt schon deutlich ab (Nutzer) */
.site-footer + .section, main .section--cta + .section, main .section--cta + [class="section"] { background: var(--weiss); }
/* 23.10.2026: Impressum – kurze Angaben (Adresse … Berufshaftpflicht) als Karten nebeneinander, damit rechts keine leere Fläche bleibt (Nutzer).
   Erzeugt von rest.js (div.impressum-raster > div.impressum-karte); lange Texte ab Verbraucherschlichtung bleiben volle Breite. */
.impressum-raster { display: grid; gap: 1rem; margin: 0.5rem 0 1rem; }
.impressum-karte { background: var(--weiss); border: 1px solid #e3e8ed; border-radius: var(--radius); padding: 1.1rem 1.35rem 0.6rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05); min-width: 0; }
.rechtstext .impressum-karte h2, .rechtstext .impressum-karte .h2 { font-size: 1.2rem; margin: 0 0 0.6rem; }
.impressum-karte p { margin: 0 0 0.6rem; }
@media (min-width: 40em) { .impressum-raster { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }

/* 23.10.2026: Formular – Felder nebeneinander stehen auf gleicher Höhe, auch wenn eine Beschriftung zweizeilig umbricht
   (Zeilen Beschriftung | Feld | Hinweis über subgrid; ältere Browser zeigen es wie bisher) */
@media (min-width: 40em) {
  @supports (grid-template-rows: subgrid) {
    .formular .zwei-felder { grid-template-rows: auto auto auto; row-gap: 0; }
    .formular .zwei-felder > div { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
    .formular .zwei-felder > div > label { align-self: end; }
  }
}

/* 23.10.2026: Startseite – Zahlen-Balken (20 Jahre, 400 Kunden …) gleich beim Aufruf sichtbar (Nutzer):
   Kopf nicht mehr fensterhoch, sondern Fensterhöhe minus Kopfzeile (7,75rem) minus sichtbarer Teil des Balkens (8rem) */
@media (min-width: 64em) {
  .hero-k.hero-k--schlank { min-height: calc(100vh - 15.75rem); min-height: calc(100svh - 15.75rem); }
  .hero-k--schlank .hero-k__inhalt { padding-top: 2.5rem; padding-bottom: 5.5rem; }
}

/* 23.10.2026: Über uns – Kopf rein weiß (kein Verlauf), darunter der Zahlen-Balken der Startseite, der von unten in den Kopf ragt (Nutzer).
   Der Balken (section.warum-s) kommt per seiten.js direkt aus index.html; Textspalte unten mit Platz, damit der Balken die Knöpfe nicht verdeckt. */
.page-hero--unterseite.page-hero--weiss { background: var(--weiss); }
@media (min-width: 64em) {
  .page-hero--mit-zahlen .page-hero__text { padding-bottom: 6.5rem; }
}