/* ============================================================
   SG Webdesign — Static Site Stylesheet
   Klassen-Präfix bewusst semantisch gehalten (kein Framework).
   ============================================================ */

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-dark);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* Entfernt die 300ms-Verzoegerung durch Doppeltipp-Zoom auf Touchgeraeten und
   setzt das Antippen-Highlight bewusst, statt es dem Browser zu ueberlassen. */
a, button, summary, label, input[type="checkbox"], input[type="radio"], select {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(242, 140, 40, 0.18);
}
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--color-accent); color: #fff; }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Die Kopfleiste ist sticky. Ohne diesen Abstand landet ein Sprungziel
   (z. B. "Zum Inhalt springen") genau unter der Leiste und ist verdeckt.
   68px Leiste + etwas Luft. */
:target, #main, [id] { scroll-margin-top: 84px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--color-accent); color: var(--color-dark); padding: 10px 16px; border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

/* ── Layout ────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: var(--container-narrow); }

section { padding: var(--section-y) 0; }
.sec--dark  { background: var(--color-dark);  color: var(--color-white); }
.sec--cream { background: var(--color-cream); }
.sec--white { background: var(--color-white); }
.sec--tight { padding: var(--space-8) 0; }
/* Grosse Abschnitte bekommen mehr Luft als kleine — sonst liest sich die Seite
   als gleichfoermige Liste. */
.sec--lg    { padding: var(--section-y-lg) 0; }

.text-center { text-align: center; }
.mt-lg { margin-top: var(--space-8); }

/* ── Typografie ────────────────────────────────────────────── */
h1, h2, h3, h4 { line-height: var(--lh-snug); font-weight: 700; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: 800; }
h2 { font-size: var(--fs-h2); letter-spacing: var(--ls-h2); font-weight: 800; }
h3 { font-size: var(--fs-h3); }

/* Fliesstext: verhindert einzelne Woerter auf der letzten Zeile ("Schusterjungen").
   Reine Fortschreibung — wo der Browser es nicht kennt (Firefox, Stand 2026-07),
   wird die Eigenschaft ignoriert und der Text bricht wie bisher um.
   Quelle: modern-web-guidance, improve-text-layout-and-legibility. */
p, li, dd, blockquote { text-wrap: pretty; }

/* Eyebrow bewusst NICHT mehr orange: Der Akzent war vorher auf Buttons,
   Ueberschriften, Haken, Zahlen, Links und Eyebrows gleichzeitig und hatte
   dadurch keine Signalwirkung mehr. Orange ist ab jetzt der Handlungsfarbe
   vorbehalten. Das Eyebrow markiert sich stattdessen ueber einen kurzen Strich. */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-xxs); font-weight: 700; letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--color-gray-6);
  margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: ""; width: 28px; height: 2px; background: var(--color-accent); flex-shrink: 0;
}
.section-head--center .eyebrow { justify-content: center; }
.sec--dark .eyebrow { color: var(--on-dark-text); }

.section-head { max-width: var(--measure); margin-bottom: var(--space-12); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-bottom: var(--space-4); }
.section-head p { color: var(--color-gray-6); font-size: var(--fs-body); }
.sec--dark .section-head h2 { color: #fff; }
.sec--dark .section-head p  { color: var(--on-dark-text); }

.lead { font-size: 17px; color: var(--color-gray-6); line-height: 1.75; }
.sec--dark .lead { color: var(--on-dark-text); }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: var(--fs-sm); font-weight: 600;
  padding: 15px 30px; border-radius: var(--radius-md);
  border: 2px solid transparent; cursor: pointer;
  min-height: 48px;
  transition: background var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
}
/* Textfarbe dunkel statt weiss: 7.4:1 statt 2.45:1 auf dem Akzent (WCAG AA). */
.btn--primary { background: var(--color-accent); color: var(--color-dark); border-color: var(--color-accent); }
.btn--primary:hover { background: var(--color-accent-dk); border-color: var(--color-accent-dk); color: var(--color-dark); }

.btn--outline { background: transparent; color: var(--color-accent-text); border-color: var(--color-accent); }
.btn--outline:hover { background: var(--color-accent); color: var(--color-dark); }

.btn--on-dark { background: transparent; color: #fff; border-color: #fff; }
.btn--on-dark:hover { background: #fff; color: var(--color-dark); }

.btn--block { width: 100%; }

/* ── Header / Nav ──────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff; border-bottom: 1px solid var(--color-border);
}
.site-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); min-height: 68px;
}
.site-header__brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.site-header__brand img { height: 44px; width: 44px; }
.site-header__brand span {
  font-family: var(--font-logo); font-weight: 500; font-size: var(--fs-sm);
  color: var(--color-dark); white-space: nowrap;
}

.site-nav__list { display: flex; gap: 28px; list-style: none; }
.site-nav__link {
  display: inline-block;
  font-size: 13px; font-weight: 500; color: var(--color-gray-4);
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  transition: color var(--duration-fast) var(--ease-default);
}
.site-nav__link:hover { color: var(--color-accent-text); }
.site-nav__link.is-active { color: var(--color-accent-text); border-bottom-color: var(--color-accent); }

.site-nav__toggle {
  display: none; background: none; border: none; cursor: pointer;
  padding: 8px; color: var(--color-dark);
}
.site-nav__toggle svg { width: 24px; height: 24px; }

/* ── Hero ──────────────────────────────────────────────────── */
.hero { background: var(--color-dark); color: #fff; padding: 128px 0 112px; }
.hero__inner { max-width: 900px; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,0.28);
  font-size: var(--fs-xxs); font-weight: 600; letter-spacing: var(--ls-wide);
  text-transform: uppercase; padding: 7px 16px; border-radius: var(--radius-full);
  margin-bottom: var(--space-8);
}
.hero__badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent); flex-shrink: 0;
}
.hero h1 { color: #fff; margin-bottom: var(--space-8); max-width: 14ch; }
.hero h1 .accent { color: var(--color-accent); }
.hero__text { color: #e6e2da; max-width: var(--measure-narrow); margin-bottom: var(--space-5); line-height: 1.6; font-size: 19px; }
/* Vorher #8a8a8a auf #1a150a — zu schwach fuer eine Zeile, die den Preis nennt. */
.hero__note { color: var(--on-dark-text); font-size: var(--fs-sm); margin-bottom: var(--space-10); }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
/* Die Textspalte darf schmal sein (Zeilenlaenge), Flieszttext und CTAs nicht. */
.hero__text, .hero__note, .hero__ctas, .hero__badge { max-width: none; }
.hero__inner > .hero__text { max-width: var(--measure-narrow); }

/* Kompakter Seiten-Hero (Unterseiten) */
.page-hero { background: var(--color-dark); color: #fff; padding: 72px 0; text-align: center; }
.page-hero h1 { color: #fff; margin-bottom: var(--space-4); }
.page-hero p { color: var(--on-dark-text); max-width: 68ch; margin: 0 auto; line-height: 1.7; }
.page-hero--cream { background: var(--color-cream); color: var(--color-dark); text-align: left; }
.page-hero--cream h1 { color: var(--color-dark); }
.page-hero--cream p { color: var(--color-gray-6); margin: 0; }
/* Das Eyebrow steht standardmaessig in Grau fuer HELLE Hintergruende. In der
   dunklen Kopfzone (Fallstudien, Blogartikel) ergab das nur 3,16:1 statt der
   geforderten 4,5:1 — gefunden beim Kontrast-Durchgang 2026-07-30.
   .sec--dark hatte diese Regel bereits, .page-hero fehlte sie. */
.page-hero .eyebrow, .page-hero .eyebrow a { color: var(--on-dark-text); }

/* ── Stats ─────────────────────────────────────────────────── */
.stats-bar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6);
}
.stat { text-align: center; }
.stat strong {
  display: block; font-size: 44px; font-weight: 800; color: var(--color-dark);
  line-height: 1; letter-spacing: var(--ls-tight); font-variant-numeric: tabular-nums;
}
.stat span {
  display: block; font-size: var(--fs-xs); color: var(--color-gray-6);
  margin-top: var(--space-2); line-height: 1.4;
}

/* ── Karten-Grids ──────────────────────────────────────────── */
.grid { display: grid; gap: var(--space-10) var(--space-10); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Karten ohne Rahmen.
   Vorher war praktisch jede Sektion ein Raster aus umrandeten Boxen mit
   1px-Kante, 6px-Radius und Schatten — das ist das Muster, das eine Seite
   nach Baukasten aussehen laesst. Gruppierung passiert jetzt ueber Weissraum
   und eine Haarlinie oben, wie in einem Satzspiegel. */
.card {
  background: transparent; border: none; border-radius: 0; padding: 0;
  border-top: 2px solid var(--color-dark); padding-top: var(--space-5);
}
.sec--dark .card { border-top-color: rgba(255,255,255,0.35); }
.card--flush { padding: 0; border-top: none; overflow: hidden; }
/* Wo eine echte Flaeche noetig ist (Formular, Hervorhebung). */
.panel {
  background: var(--color-cream); border-radius: var(--radius-lg);
  padding: var(--space-12);
}
.panel--form { max-width: 760px; margin: 0 auto; }

/* Icon + Text nebeneinander */
.benefit { display: flex; gap: 16px; }
.benefit__icon { font-size: 26px; flex-shrink: 0; line-height: 1.2; }
.benefit__title { font-weight: 700; font-size: var(--fs-h3); margin-bottom: var(--space-2); letter-spacing: -0.01em; }
.benefit__text { font-size: var(--fs-sm); color: var(--color-gray-6); line-height: 1.65; }

/* Icon-Karte (Icon oben) */
.icon-card__icon { font-size: 30px; margin-bottom: var(--space-4); line-height: 1; }
.icon-card__title { font-weight: 700; font-size: var(--fs-h3); margin-bottom: var(--space-2); letter-spacing: -0.01em; }
.icon-card__text { font-size: var(--fs-sm); color: var(--color-gray-6); line-height: 1.65; }

/* Bild-Karte (Leistungen) */
.media-card__image { aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-cream); }
.media-card__image img { width: 100%; height: 100%; object-fit: cover; }
.media-card__body { padding: var(--space-5); }
.media-card__title { font-weight: 700; font-size: 15px; margin-bottom: var(--space-2); }
.media-card__text { font-size: 13px; color: var(--color-gray-6); line-height: 1.6; }

/* Referenz-Karte
   Die Mockup-Bilder haben einen deckend weissen Hintergrund (rund 60 % weisse
   Pixel, keine Transparenz). Auf einer cremefarbenen Sektion stand dadurch ein
   harter weisser Kasten mitten in der Flaeche — der Rahmen sah aus wie ein
   Fehler statt wie eine Praesentation.
   Loesung: der Rahmen ist jetzt ABSICHTLICH weiss, mit Radius, Innenabstand und
   feiner Kante. Damit liest er sich als Bildschirm-Passepartout und das Weiss
   der Bilder geht darin auf. Funktioniert auf Creme wie auf Weiss. */
.ref-card__image {
  aspect-ratio: 4 / 3; background: #fff;
  border: 1px solid rgba(26,21,10,0.08);
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-4);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
}
.ref-card__image img { width: 100%; height: 100%; object-fit: contain; }
.ref-card__tag {
  display: inline-block; font-size: var(--fs-xxs); font-weight: 700;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--color-gray-6); margin-bottom: var(--space-2);
}
/* Projektname war orange — damit konkurrierte jede Referenzkachel mit dem CTA.
   Der Name ist eine Ueberschrift, kein Handlungsaufruf. */
.ref-card__name { font-weight: 700; font-size: var(--fs-h3); color: var(--color-dark); margin-bottom: var(--space-2); letter-spacing: -0.01em; }
.ref-card__text { font-size: var(--fs-sm); color: var(--color-gray-6); line-height: 1.65; margin-bottom: var(--space-4); }
.ref-card__link { font-size: var(--fs-sm); font-weight: 600; color: var(--color-accent-text); }
.ref-card__link:hover { color: var(--color-accent-dk); text-decoration: underline; }

/* ── Prozess (4 Schritte) ──────────────────────────────────────
   Statt vier orangefarbener Kreise in vier umrandeten Kaesten: grosse,
   gesetzte Ziffern ueber einer Haarlinie. Die Nummer traegt die Struktur,
   nicht der Rahmen. */
.step { border-top: 2px solid var(--color-dark); padding-top: var(--space-4); }
.step__num {
  font-size: 40px; font-weight: 800; line-height: 1;
  color: var(--color-dark); letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-4); font-variant-numeric: tabular-nums;
}
.step__title { font-weight: 700; font-size: var(--fs-body); margin-bottom: var(--space-2); }
.step__text { font-size: var(--fs-xs); color: var(--color-gray-6); line-height: 1.65; margin-bottom: var(--space-3); }
.step__badge { font-size: var(--fs-xxs); color: var(--color-gray-6); font-weight: 600; letter-spacing: 0.04em; }

/* Nummerierter Ablauf ohne Karte (Kontakt) */
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-10); max-width: 860px; margin: 0 auto; }
.flow__item { text-align: left; border-top: 2px solid var(--color-dark); padding-top: var(--space-4); }
.flow__num {
  font-size: 40px; font-weight: 800; line-height: 1;
  color: var(--color-dark); letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-4); font-variant-numeric: tabular-nums;
}
.flow__title { font-weight: 700; font-size: var(--fs-body); margin-bottom: var(--space-2); }
.flow__text { font-size: var(--fs-sm); color: var(--color-gray-6); line-height: 1.65; }

/* ── Split-Layouts ─────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 240px; gap: var(--space-12); align-items: center; }
.split--start { align-items: start; }
.split--media-first { grid-template-columns: 240px 1fr; }
.split__media { border-radius: 6px; overflow: hidden; aspect-ratio: 5 / 6; }
.split__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.checklist { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-8); }
.checklist li { display: flex; gap: 12px; font-size: var(--fs-sm); line-height: 1.55; }
.checklist li::before { content: "✓"; color: var(--color-accent); font-weight: 700; flex-shrink: 0; }
.sec--dark .checklist li { color: #e6e2da; }

/* Gegenstueck zur Haken-Liste: "dafuer bin ich der Falsche".
   Bewusst ein neutraler Strich statt eines roten Kreuzes — die Liste grenzt ab,
   sie warnt nicht. Ein rotes X neben "Onlineshops" liest sich wie ein Verbot. */
.checklist--no li::before { content: "–"; color: var(--color-gray-6); }

/* Verweis-Karte: eine Karte, die als Ganzes ein Link ist (Leistungsuebersicht).
   Der Pfeil ist aria-hidden — er ist Dekoration, der Linktext steht im Titel. */
.card--link {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  transition: transform var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
}
.card--link:hover, .card--link:focus-visible { transform: translateY(-2px); border-color: var(--color-accent); }
.card__more {
  margin-top: auto; padding-top: var(--space-4);
  font-size: var(--fs-xs); font-weight: 600; color: var(--color-accent-text);
}

/* Ratgeber-Artikel: laengerer Fliesstext. Zeilenlaenge ueber container--narrow
   begrenzt — ab etwa 75 Zeichen findet das Auge den Zeilenanfang schlechter. */
.article-text { font-size: 17px; line-height: 1.7; color: var(--color-gray-3); margin-bottom: var(--space-4); }
.article-text:last-child { margin-bottom: 0; }
.article-text strong { color: var(--color-dark); }
.article-meta { font-size: var(--fs-xs); color: var(--color-gray-6); margin-top: var(--space-3); }

/* Kundenstimme in Fallstudien. Wird nur gerendert, wenn wirklich ein Zitat
   vorliegt — ein leerer Zitatblock waere schlimmer als keiner. */
.quote {
  border-left: 3px solid var(--color-accent);
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  margin: 0; max-width: 70ch;
}
.quote p { font-size: 20px; line-height: 1.55; color: var(--color-dark); margin-bottom: var(--space-3); }
.quote cite { font-style: normal; font-size: var(--fs-xs); color: var(--color-gray-6); }

.badge-row { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-6); }
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; color: var(--color-gray-4);
  border: 1px solid var(--color-border);
  font-size: var(--fs-xs); font-weight: 600; padding: 7px 14px; border-radius: var(--radius-full);
}
.badge::before { content: "✓"; }

/* ── Preise ────────────────────────────────────────────────── */
.price-tabs {
  display: flex; justify-content: center; width: fit-content;
  margin: 0 auto var(--space-8); background: var(--color-border);
  border-radius: var(--radius-md); overflow: hidden;
}
.price-tab {
  padding: 9px 22px; font-size: var(--fs-xs); font-weight: 600;
  border: none; background: transparent; color: var(--color-gray-6); cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
}
.price-tab:hover { color: var(--color-dark); }
.price-tab.is-active { background: var(--color-accent); color: var(--color-dark); }

.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); align-items: start; }
.price-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: 6px;
  padding: var(--space-6); position: relative; display: flex; flex-direction: column; height: 100%;
}
.price-card.is-popular { border: 2px solid var(--color-accent); }
.price-card__badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--color-accent); color: #fff; font-size: 10px; font-weight: 700;
  padding: 3px 14px; border-radius: var(--radius-full); white-space: nowrap;
}
.price-card__tier {
  font-size: var(--fs-xxs); font-weight: 700; letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--color-gray-6); margin-bottom: var(--space-2);
}
.price-card__name { font-weight: 700; font-size: var(--fs-h3); margin-bottom: var(--space-2); letter-spacing: -0.01em; }
.price-card__text { font-size: var(--fs-xs); color: var(--color-gray-6); line-height: 1.65; margin-bottom: var(--space-5); }
.price-card__amount { font-size: 48px; font-weight: 800; color: var(--color-dark); line-height: 1; letter-spacing: var(--ls-tight); }
.price-card__amount .prefix { font-size: var(--fs-xs); font-weight: 600; color: var(--color-gray-9); display: block; }
.price-card__amount .currency { font-size: 18px; }
.price-card__note { font-size: var(--fs-xxs); color: var(--color-gray-9); margin: 6px 0 var(--space-4); }
.price-card__features { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-bottom: var(--space-5); }
.price-card__features li { display: flex; gap: 8px; font-size: 13px; color: var(--color-gray-4); }
.price-card__features li::before { content: "✓"; color: var(--color-accent); font-weight: 700; flex-shrink: 0; }
/* Nicht enthaltene Leistungen bleiben optisch zurueckgenommen, muessen aber
   lesbar sein: gray-9 (#999) ergab auf Weiss nur 2,85:1 statt 4,5:1.
   gray-6 (#666) liegt bei 5,74:1 und wirkt weiterhin abgesetzt. */
.price-card__features li.is-excluded { color: var(--color-gray-6); }
.price-card__features li.is-excluded::before { content: "–"; color: var(--color-gray-6); }
/* In den schmalen Preisspalten brach der lange CTA-Text auf zwei Zeilen und
   riss die Karten unterschiedlich hoch. Kleinere Schrift und engere Polsterung
   nur hier, nicht global. */
.price-card__cta { margin-top: auto; }
.price-card__cta .btn { padding: 13px 16px; font-size: var(--fs-xs); }
.price-card__footnote { font-size: 10px; color: var(--color-gray-9); text-align: center; margin-top: var(--space-3); }

.price-note { text-align: center; font-size: 13px; color: var(--color-gray-6); margin-top: var(--space-8); }

/* ── FAQ (Accordion) ───────────────────────────────────────── */
.faq { max-width: var(--container-narrow); margin: 0 auto; }
/* Auf den Landingpages sind Ueberschriften linksbuendig — ein mittig gesetzter
   FAQ-Block bricht dort die Blattkante. */
.faq--left { margin-left: 0; }
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) 0; font-weight: 700; font-size: var(--fs-body); cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; color: var(--color-accent); font-size: 22px; font-weight: 400;
  line-height: 1; flex-shrink: 0; transition: transform var(--duration-fast) var(--ease-default);
}
.faq__item[open] summary::after { content: "–"; }
.faq__item summary:hover { color: var(--color-accent); }
.faq__answer { padding: 0 0 var(--space-4); font-size: var(--fs-sm); color: var(--color-gray-6); line-height: 1.7; max-width: 68ch; }

/* ── Antwortbox (GEO / LLM-Sichtbarkeit) ───────────────────────
   Ein kurzer, in sich vollstaendiger Absatz direkt unter dem Hero, der die
   Kernfrage der Seite in wenigen Saetzen beantwortet. Genau dieses Format
   zitieren Antwortsysteme, weil es ohne Kontext aus der Seite herausgeloest
   funktioniert. Fuer Menschen ist es die Kurzfassung. */
/* Antwortbox ("Kurz gesagt")
   Zweck: eine in sich vollstaendige Antwort, die Antwortsysteme zitieren koennen.
   Sie muss im Text STEHEN, aber nicht dominieren — Sebastian am 2026-07-29:
   "das sind immer ziemlich viel Text, ich denke das liest keiner".
   Deshalb am 2026-07-30 zurueckgenommen: 19px -> 16px (kleiner als Fliesstext
   statt groesser), Zeilenlaenge 76ch -> 58ch, schmalerer Balken. Der Inhalt
   wurde parallel halbiert (865 -> 510 Woerter ueber alle 17 Kaesten).
   NICHT entfernen: ohne diesen Block faellt die Seite als Zitatquelle fuer
   ChatGPT, Google-KI und Copilot aus — genau das, womit
   /leistungen/seo-ki-sichtbarkeit/ wirbt. */
.answer-box {
  max-width: 58ch; border-left: 2px solid var(--color-accent);
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
}
.answer-box__label {
  font-size: var(--fs-xxs); font-weight: 700; letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--color-gray-6); margin-bottom: var(--space-1);
}
.answer-box__text {
  font-size: 16px; line-height: 1.65; color: var(--color-gray-4);
  text-wrap: pretty;
}

/* ── Einzugsgebiet ─────────────────────────────────────────────
   Bewusst eine schlichte Liste, KEINE verlinkten Staedteseiten. Das
   Strategiepapier nennt massenhafte duenne Standortseiten ausdruecklich als
   Doorway-Risiko. */
.place-list {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.place-chip {
  font-size: var(--fs-xs); font-weight: 600; color: var(--color-gray-4);
  background: rgba(255,255,255,0.7); border: 1px solid rgba(26,21,10,0.09);
  padding: 8px 15px; border-radius: var(--radius-full);
}
.place-hint { font-size: var(--fs-xs); color: var(--color-gray-6); max-width: var(--measure); }

/* Ehrlichkeitshinweis: raeumt ein, was NICHT von der Naehe abhaengt. Bewusst
   sichtbar gesetzt statt kleingedruckt — der Absatz ist das Vertrauensargument,
   nicht die Fussnote dazu. */
.honest-note {
  margin-top: var(--space-12); max-width: var(--measure);
  font-size: var(--fs-body); line-height: 1.7; color: var(--color-gray-4);
  border-left: 3px solid var(--color-border); padding-left: var(--space-5);
}

/* ── Hero: 3D-Browserfenster (Signature-Element) ─────────────────
   Komplett aus CSS gebaute Miniatur einer Website in Markenfarben, als
   perspektivisch gekipptes Browserfenster. Nur transform/opacity, keine
   Bilder, keine Bibliothek. Die Neigung ist kraeftig genug, um auf einem
   Screenshot als 3D erkennbar zu sein — das war die Anforderung. */
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px;
  gap: var(--space-16); align-items: center;
}
.hero__visual { perspective: 1200px; }
.browser3d {
  transform: rotateY(-14deg) rotateX(6deg) rotateZ(1deg);
  transform-style: preserve-3d;
  border-radius: 10px; overflow: hidden;
  background: #fff;
  box-shadow: -28px 40px 70px rgba(0, 0, 0, 0.45),
              0 0 0 1px rgba(255, 255, 255, 0.08);
  animation: b3-float 7s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes b3-float {
  from { transform: rotateY(-14deg) rotateX(6deg) rotateZ(1deg) translateY(0); }
  to   { transform: rotateY(-11deg) rotateX(4deg) rotateZ(0.5deg) translateY(-10px); }
}
.browser3d__bar {
  display: flex; align-items: center; gap: 6px;
  background: #ece7db; padding: 9px 12px;
}
.browser3d__dot { width: 9px; height: 9px; border-radius: 50%; background: #cfc7b5; }
.browser3d__dot:first-child { background: var(--color-accent); }
.browser3d__url {
  margin-left: 8px; flex: 1; background: #fff; border-radius: 5px;
  /* gray-9 ergab hier 2,85:1. Der Text ist zwar Teil einer Illustration,
     aber er ist echter Text und wird vorgelesen — also gilt die Regel. */
  font-size: 10px; color: var(--color-gray-6); padding: 3px 10px;
  font-family: var(--font-body);
}
.browser3d__page { padding: 0; }
/* Miniatur-Seite: dieselbe Anatomie wie die echte Seite — dunkler Hero mit
   Akzent-Button, Karten auf Creme, Textzeilen. */
.b3-nav { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #fff; }
.b3-logo { width: 22px; height: 22px; border-radius: 50%; background: var(--color-dark); }
.b3-links { display: flex; gap: 7px; }
.b3-links i { width: 26px; height: 5px; border-radius: 3px; background: #ddd6c6; }
.b3-hero { background: var(--color-dark); padding: 22px 14px 20px; display: flex; flex-direction: column; gap: 9px; }
.b3-line { display: block; border-radius: 3px; }
.b3-line--xl { width: 75%; height: 13px; background: #fff; opacity: 0.95; }
.b3-line--lg { width: 55%; height: 13px; background: var(--color-accent); }
.b3-line--md { width: 60%; height: 8px; background: #d8d2c4; }
.b3-line--sm { width: 40%; height: 8px; background: #e6e1d3; }
.b3-btn { width: 86px; height: 22px; border-radius: 4px; background: var(--color-accent); margin-top: 6px; }
.b3-cards { display: flex; gap: 10px; padding: 16px 14px; background: var(--color-cream); }
.b3-card { flex: 1; height: 52px; border-radius: 5px; background: #fff; border-top: 2px solid var(--color-dark); }
.b3-strip { padding: 14px 14px 18px; background: #fff; display: flex; flex-direction: column; gap: 7px; }

@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .hero__visual { max-width: 360px; }
}
@media (prefers-reduced-motion: reduce) {
  .browser3d { animation: none; }
}

/* ── Aufklappbare Listen (nur Mobil) ─────────────────────────────
   Auf dem Handy stehen die Karten untereinander; ein Abschnitt mit sechs
   Punkten wird dadurch zu einer langen Scroll-Strecke, bevor der naechste
   Abschnitt kommt. Ab vier Punkten sind daher nur die ersten zwei sichtbar,
   der Rest liegt hinter einer Schaltflaeche.

   Wichtig: Das Verstecken haengt an [data-collapsed], und dieses Attribut
   setzt ausschliesslich das Skript. Ohne JavaScript ist alles sichtbar und
   es gibt keine Schaltflaeche — der Inhalt kann also nie unerreichbar
   werden. Auf dem Desktop greift die Regel gar nicht erst. */
@media (max-width: 767px) {
  .collapsible[data-collapsed="true"] > :nth-child(n+3) { display: none; }
}
.more-toggle {
  display: none;
  align-items: center; gap: 9px;
  margin-top: var(--space-6);
  background: transparent; border: 1px solid var(--color-border);
  border-radius: var(--radius-full); cursor: pointer;
  padding: 12px 20px; min-height: 48px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--color-dark);
  transition: border-color var(--duration-fast) var(--ease-default),
              background var(--duration-fast) var(--ease-default);
}
.sec--cream .more-toggle { background: rgba(255,255,255,0.6); border-color: rgba(26,21,10,0.12); }
.sec--dark .more-toggle { color: #fff; border-color: rgba(255,255,255,0.28); }
.more-toggle:hover { border-color: var(--color-accent); }
.more-toggle::after {
  content: ""; width: 8px; height: 8px; flex-shrink: 0;
  border-right: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--duration-fast) var(--ease-default);
}
.more-toggle[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
@media (max-width: 767px) { .more-toggle.is-active { display: inline-flex; } }
@media (prefers-reduced-motion: reduce) { .more-toggle::after { transition: none; } }

/* ── Relaunch-Hinweis + Fallbeispiel ───────────────────────────── */
.relaunch-hint {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap;
  border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-lg); padding: var(--space-6) var(--space-8);
}
.relaunch-hint p { max-width: var(--measure); font-size: var(--fs-sm); }
.sec--cream .relaunch-hint { background: #fff; border-color: rgba(26,21,10,0.08); border-left-color: var(--color-accent); }
.case-text { color: var(--color-gray-4); line-height: 1.7; margin-bottom: var(--space-6); max-width: var(--measure); }
/* Fallbeispiel-Split: das Projektbild traegt hier die halbe Aussage und braucht
   mehr Platz als die schmale Standard-Media-Spalte. */
.split--case { grid-template-columns: 380px 1fr; align-items: center; }
.split--case .ref-card__image { aspect-ratio: 4 / 5; margin-bottom: 0; }
@media (max-width: 767px) {
  .split--case { grid-template-columns: 1fr; }
  .split--case .ref-card__image { max-width: 320px; }
}

/* ── Raeumliche Tiefe (3D) ─────────────────────────────────────
   Bewusst ohne Bibliothek. Three.js/WebGL waeren 150 KB+ und wuerden genau
   das Performance-Argument zerstoeren, das hier verkauft wird.
   Alles hier laeuft ueber transform und opacity — beides wird vom Compositor
   auf der GPU verarbeitet und loest kein Layout und kein Neuzeichnen aus.
   Kosten: 0 zusaetzliche Requests, ~1 KB CSS. */

/* Karten mit echter Tiefe beim Ueberfahren. Die Neigung ist absichtlich klein
   (unter 2 Grad) — mehr wirkt wie ein Spielzeug, nicht wie Handwerk. */
.tilt {
  transform: perspective(900px) translateZ(0);
  transition: transform var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-normal) var(--ease-default);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .tilt:hover {
    transform: perspective(900px) rotateX(2deg) rotateY(-2deg) translateY(-7px) scale(1.015);
    box-shadow: 0 18px 44px rgba(26, 21, 10, 0.14);
  }
  .sec--dark .tilt:hover { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4); }
}

/* Gestaffelte Ebenen im Hero: zwei sehr weiche Farbfelder, die sich beim
   Scrollen unterschiedlich schnell bewegen. Erzeugt Raum ohne ein einziges
   zusaetzliches Byte an Bilddaten. */
.depth-layer {
  position: absolute; border-radius: 50%;
  pointer-events: none; filter: blur(70px); opacity: 0.65;
  will-change: transform;
}
.depth-layer--a {
  width: 460px; height: 460px; top: -140px; right: -110px;
  background: radial-gradient(circle, rgba(242,140,40,0.5), transparent 68%);
}
.depth-layer--b {
  width: 340px; height: 340px; bottom: -150px; left: -90px;
  background: radial-gradient(circle, rgba(242,140,40,0.22), transparent 70%);
}
.hero { position: relative; overflow: hidden; }
.hero > .container { position: relative; z-index: 1; }

/* Wer Bewegung reduziert haben will, bekommt die Seite vollstaendig statisch —
   inklusive der Sichtbarkeit aller Inhalte, die sonst erst beim Scrollen
   eingeblendet werden. Ohne diese Zeile blieben Inhalte unsichtbar. */
@media (prefers-reduced-motion: reduce) {
  .tilt, .tilt:hover { transform: none; box-shadow: none; transition: none; }
  .depth-layer { display: none; }
  /* Verweis-Karten hoben sich beim Hover an, ohne von dieser Regel erfasst zu
     sein (gefunden beim Guidelines-Review 2026-07-29). Die Farbaenderung bleibt
     als Rueckmeldung erhalten — nur die Bewegung faellt weg. */
  .card--link, .card--link:hover, .card--link:focus-visible { transform: none; transition: border-color var(--duration-fast) var(--ease-default); }
}

/* ── CTA-Band ──────────────────────────────────────────────── */
.cta-band { background: var(--color-dark); color: #fff; padding: var(--space-16) 0; text-align: center; }
.cta-band h2 { color: #fff; margin-bottom: var(--space-3); }
.cta-band p { color: var(--on-dark-text); max-width: 56ch; margin: 0 auto var(--space-6); }
.cta-band__note { color: var(--on-dark-muted); font-size: var(--fs-xs); margin-top: var(--space-4); }

.cta-band--split { text-align: left; padding: var(--space-12) 0; }
.cta-band--split .cta-band__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap;
}
.cta-band--split p { margin: 0; }

/* ── Kontaktformular ───────────────────────────────────────── */
/* Das Formular stand vorher als 580px-Spalte mitten in einer weiten weissen
   Flaeche und wirkte dadurch verloren. Jetzt sitzt es auf einer Creme-Flaeche,
   die ihm Kante und Gewicht gibt. */
.contact-form { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-5); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.form-field > label { font-size: var(--fs-xs); font-weight: 600; color: var(--color-dark); }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="url"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea {
  font-size: var(--fs-sm); padding: 13px 14px;
  border: 1px solid #d8d2c4; border-radius: var(--radius-md);
  background: #fff; color: var(--color-dark); width: 100%;
  transition: border-color var(--duration-fast) var(--ease-default);
}
.form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: var(--color-gray-9); }
/* Fokus: vorher "outline: none" mit der Rahmenfarbe als einzigem Indikator.
   Das ist bei 1px Kante kaum wahrnehmbar und faellt bei Tastaturbedienung
   durch. Jetzt eine echte, deutlich sichtbare Fokus-Kontur. */
.form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible {
  border-color: var(--color-accent);
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-gray-4) 50%), linear-gradient(135deg, var(--color-gray-4) 50%, transparent 50%); background-position: calc(100% - 19px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px; }

/* Datenschutz-Einwilligung: eigenes Element statt Fliesstext (S3 aus dem
   Strategiepapier, Kapitel 11). */
.form-consent { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-xs); line-height: 1.55; color: var(--color-gray-4); }
.form-consent input { accent-color: var(--color-accent); margin-top: 2px; flex-shrink: 0; width: 18px; height: 18px; }
.form-consent a { color: var(--color-accent-text); text-decoration: underline; }

.form-options { display: flex; flex-direction: column; gap: var(--space-3); }
.form-options label { display: flex; align-items: flex-start; gap: 11px; font-size: var(--fs-sm); cursor: pointer; line-height: 1.5; }
.form-options input { accent-color: var(--color-accent); margin-top: 2px; flex-shrink: 0; width: 18px; height: 18px; }

.form-honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.form-status { font-size: 13px; min-height: 1.2em; }
.form-status[data-state="success"] { color: #1a7f37; font-weight: 600; }
.form-status[data-state="error"]   { color: #b42318; font-weight: 600; }
.form-note { font-size: var(--fs-xs); color: var(--color-gray-9); }
/* "(optional)" sagt dem Nutzer, dass er ein Feld ueberspringen darf — mit
   2,50:1 war ausgerechnet diese Entlastung am schlechtesten lesbar. */
.form-optional { font-weight: 400; color: var(--color-gray-6); }
/* Formular-Hinweise standen in #999 auf cremefarbenem Grund: 2,50:1, der
   schwaechste Kontrast der Seite. Ausgerechnet dort, wo erklaert wird, dass
   die Budgetangabe unverbindlich ist. */
.form-hint { font-size: var(--fs-xs); color: var(--color-gray-6); line-height: 1.4; }

.contact-intro { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-12); align-items: center; }
/* Der Rahmen richtet sich nach dem Bild, nicht umgekehrt.
   Vorher war er quadratisch (200x200) bei object-fit: cover — dadurch war das
   Foto unten abgeschnitten (Sebastian, 2026-07-29: "da ist mein Bild
   abgeschnitten").
   BEWUSST kein festes aspect-ratio: der erste Anlauf setzte 5/6 nach den
   width/height-Attributen im HTML — die Datei ist aber 800x1135, also 1:1,42.
   Das Bild waere weiterhin um 18 % beschnitten gewesen. Mit height: auto kann
   das gar nicht mehr passieren, auch wenn das Foto spaeter getauscht wird. */
.contact-intro__media { width: 200px; border-radius: 6px; overflow: hidden; }
.contact-intro__media img { width: 100%; height: auto; display: block; }
.contact-intro h1 { font-size: clamp(24px, 3.2vw, 30px); margin-bottom: var(--space-3); }
.contact-intro__lead { color: var(--color-gray-6); font-size: var(--fs-sm); line-height: 1.7; margin-bottom: var(--space-4); }
.contact-intro__mail { font-size: 13px; color: var(--color-gray-6); }
.contact-intro__mail a { color: var(--color-accent-text); font-weight: 600; }
.contact-intro__mail a:hover { text-decoration: underline; }

/* ── Footer ────────────────────────────────────────────────── */
.site-footer { background: var(--color-dark); color: #fff; padding: var(--space-6) 0; }
.site-footer__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
}
.site-footer__links { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.site-footer__links a { font-size: var(--fs-xs); color: #aaa; }
.site-footer__links a:hover { color: var(--color-accent); }
.site-footer__copy { font-size: var(--fs-xs); color: #666; }

/* ── Rechtstexte ───────────────────────────────────────────── */
.legal-body { padding: var(--space-16) 0; }
.legal-body h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: var(--space-6); }
.legal-body h2 { font-size: 22px; margin: var(--space-8) 0 var(--space-3); }
.legal-body h3 { font-size: 17px; margin: var(--space-6) 0 var(--space-2); }
.legal-body p, .legal-body li { color: var(--color-gray-4); font-size: var(--fs-sm); line-height: 1.75; }
.legal-body p { margin-bottom: var(--space-4); }
.legal-body ul, .legal-body ol { margin: 0 0 var(--space-4) var(--space-5); }
.legal-body a { color: var(--color-accent-text); text-decoration: underline; overflow-wrap: anywhere; }
.legal-body table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-6); font-size: 13px; }
.legal-body th, .legal-body td {
  border: 1px solid var(--color-border); padding: 8px 10px; text-align: left; vertical-align: top;
}
.legal-body th { background: var(--color-cream); font-weight: 600; }
.legal-table-wrap { overflow-x: auto; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .site-header__brand span { display: none; }
  .site-nav__list { gap: 20px; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .price-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .split, .split--media-first { grid-template-columns: 1fr; gap: var(--space-8); }
  .split__media { width: 220px; aspect-ratio: 5 / 6; }
  .contact-intro { grid-template-columns: 1fr; gap: var(--space-6); }
}

@media (max-width: 767px) {
  section { padding: var(--section-y-mobile) 0; }
  .hero { padding: 56px 0 48px; }
  .page-hero { padding: 48px 0; }
  .container { padding: 0 20px; }

  /* Mobile-Navigation */
  .site-nav__toggle { display: block; order: 3; }
  .site-header__bar { flex-wrap: wrap; }
  .site-header nav { flex-basis: 100%; order: 4; }
  .site-nav__list {
    display: none; flex-direction: column; gap: 0;
    border-top: 1px solid var(--color-border); padding: var(--space-2) 0 var(--space-4);
  }
  .site-nav__list.is-open { display: flex; }
  .site-nav__link {
    display: block; padding: 11px 0; font-size: 15px;
    border-bottom: none; border-left: 3px solid transparent; padding-left: 12px;
  }
  .site-nav__link.is-active { border-bottom-color: transparent; border-left-color: var(--color-accent); }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .stats-bar { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
  .flow { grid-template-columns: 1fr; gap: var(--space-8); }
  .form-row { grid-template-columns: 1fr; }
  .hero__ctas .btn { width: 100%; }
  .price-tabs { width: 100%; }
  .price-tab { flex: 1; padding: 10px 8px; }
  .cta-band--split .cta-band__inner { flex-direction: column; align-items: flex-start; }
  .site-footer__bar { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .site-footer__links { gap: var(--space-4); }
  .split__media { width: 100%; max-width: 260px; }
  /* aspect-ratio hier NICHT auf 1 zuruecksetzen — sonst waere das Foto auf dem
     Handy wieder quadratisch beschnitten, also genau der behobene Fehler. */
  .contact-intro__media { width: 100%; max-width: 200px; height: auto; }
}

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