/* ==========================================================================
   style.css – Wietzke AI
   Design-Tokens, Header/Menü, Hero-Skelett, Sektionen, Footer, Rechtsseiten.
   Konvention: Code Englisch, Kommentare Deutsch.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design-Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Farben – flach, weiß, typografisch */
  --color-bg: #ffffff;
  --color-text: #111111;
  --color-text-muted: #6b6b6b;
  --color-dark: #111111;
  --color-on-dark: #ffffff;
  --color-line: #e6e6e6;

  /* Radien */
  --radius-card: 6px;
  --radius-pill: 999px;

  /* --font-sans: siehe fonts.css (Schrift-Stack + optionale @font-face) */

  /* Typo-Stufen (Referenz: 1420 px Breite → H1 = 72 px, Fließtext 18 px) */
  /* Headline: nach Breite (Referenz 5.07vw), auf kurzen 16:9-Viewports zusätzlich nach Höhe gedeckelt,
     damit der Hero auf eine Bildschirmhöhe passt (beim Referenz-Seitenverhältnis 1.37 greift 7svh nicht). */
  --step-h1: clamp(2.6rem, min(5.07vw, 7svh), 5.5rem);
  --step-sub: clamp(1rem, 1.27vw, 1.25rem);
  --step-link: clamp(0.8125rem, 1vw, 0.9375rem);
  --step-body: 1.0625rem;
  --step-small: 0.8125rem;
  --step-h2: clamp(2rem, 3.2vw, 2.5rem);

  /* Seitenränder */
  --page-pad: clamp(1rem, 2.4vw, 2.5rem);

  /* Kartengeometrie (Vorbild: Pitch 20,85 % vw, Breite 20,14 % vw, Höhe 5:6).
     Basis-Einheit u = min(100vw, 137vh): auf breiten/flachen Screens (16:9)
     werden die Karten kleiner, damit die Mittelkarte ≤ 34 % der Höhe bleibt. */
  --u: min(100vw, 137vh);
  --u: min(100vw, 137svh);
  --pitch: calc(var(--u) * 0.2085);
  --card-w: calc(var(--u) * 0.2014);
  --card-h: calc(var(--u) * 0.2417);
  --card-gap: calc(var(--u) * 0.0071);
  /* Höhe des Band-Bereichs: Platz für die an den Rändern höher werdenden
     Karten des 3D-Karussells (≈ +25 %). */
  --band-h: calc(var(--card-h) * 1.25);

  /* Service-Karten auf der Startseite (gleiche Größe wie die Mittelkarte) */
  --svc-w: var(--card-w);
  --svc-h: var(--card-h);

  /* Hero-Rhythmus (Vorbild: Headline-Oberkante ≈ 9,7 %, Bandmitte ≈ 60,5 %,
     Beschreibung ≈ 88 %, Links ≈ 94 % der Viewport-Höhe) */
  --hero-top: max(9.7vh, 4.5rem);
  --hero-top: max(9.7svh, 4.5rem);
  --hero-bottom: clamp(1.5rem, 5vh, 4rem);
  --hero-bottom: clamp(1.5rem, 5svh, 4rem);
  --hero-gap-min: 2rem;

  /* Topbar */
  --btn-round: clamp(40px, 3.4vw, 52px);
  --pill-h: 30px;
  --topbar-pad-y: clamp(14px, 1.75vh, 22px);
  --topbar-pad-y: clamp(14px, 1.75svh, 22px);
  --topbar-pad-x: clamp(16px, 2.4vw, 40px);
}

/* Kleine Viewports: größere Karten (≈ 2 Karten sichtbar, Pitch ≈ 52 vw) */
/* Kurze, breite Viewports (z. B. 1440×810, 1920×1080): Mindestlücken und Fußabstand im Hero
   verkleinern, damit Beschreibung und Links noch in die erste Bildschirmhöhe passen. */
@media (min-width: 768px) and (max-height: 880px) {
  :root {
    --hero-gap-min: 1.25rem;
    --hero-bottom: 1.25rem;
  }
}

@media (max-width: 767px) {
  :root {
    --pitch: 52vw;
    --card-w: calc(52vw * 0.966);
    --card-h: calc(var(--card-w) * 1.2);
    --card-gap: calc(52vw * 0.034);
    --band-h: calc(var(--card-h) * 1.2);
    /* Service-Karten 2×2: zwei Karten pro Zeile inkl. Seitenrand */
    --svc-w: calc((100vw - 2 * var(--page-pad) - var(--card-gap)) / 2);
    --svc-h: calc(var(--svc-w) * 1.2);
    --hero-gap-min: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   2. Basis / Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--color-bg);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-body);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Scroll-Sperre bei geöffnetem Menü (main.js setzt die Klasse auf <html>) */
html.menu-open,
html.menu-open body {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

button {
  font: inherit;
  color: inherit;
}

/* Nur für Screenreader */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip-Link: erscheint nur bei Tastaturfokus */
.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--color-dark);
  color: var(--color-on-dark);
  border-radius: var(--radius-pill);
  transform: translate(-50%, -300%);
  transition: transform 0.15s ease;
}

.skip-link:focus {
  transform: translate(-50%, 0);
  outline-color: var(--color-dark);
}

/* --------------------------------------------------------------------------
   3. Topbar (absolut über dem Hero, nicht sticky)
   -------------------------------------------------------------------------- */
.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: var(--topbar-pad-y) var(--topbar-pad-x);
  pointer-events: none; /* nur die Bedienelemente selbst sind klickbar */
}

.topbar > * {
  pointer-events: auto;
}

/* Runder dunkler Button links (Monogramm bzw. Zurück-Pfeil) */
/* Logo links im Header (ersetzt auf Wunsch den runden Button; Bild 240×240 für Retina) */
.topbar__logo {
  display: block;
  justify-self: start;
  pointer-events: auto;
  height: calc(var(--btn-round) * 1.4);
  width: calc(var(--btn-round) * 1.4);
  margin-top: calc(var(--btn-round) * -0.12); /* optisch auf Höhe von Menü und Pill zentrieren */
}

.topbar__logo img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Logo ohne Kreis (breites W): feste Maße direkt am Bild, keine Prozentwerte – WebKit (iOS Safari/Chrome)
   löst height:100% in einem Container mit automatischer Breite sonst auf die Originalbreite auf. */
.topbar__logo--wide {
  width: auto;
  height: auto;
  line-height: 0;
  margin-top: calc(var(--btn-round) * -0.02);
}

.topbar__logo--wide img {
  width: auto;
  height: calc(var(--btn-round) * 1.15); /* Desktop ≈ 56 px hoch, ≈ 108 px breit */
  max-width: none;
}

@media (max-width: 767px) {
  .topbar__logo--wide { margin-top: calc(var(--btn-round) * 0.2); }
  .topbar__logo--wide img { height: calc(var(--btn-round) * 0.58); } /* Handy ≈ 23 px hoch, ≈ 44 px breit */
}

.topbar__round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-round);
  height: var(--btn-round);
  border-radius: 50%;
  background: var(--color-dark);
  color: var(--color-on-dark);
  text-decoration: none;
  font-weight: 700;
  font-size: calc(var(--btn-round) * 0.42);
  letter-spacing: -0.02em;
  justify-self: start;
}

.topbar__round svg {
  width: calc(var(--btn-round) * 0.42);
  height: calc(var(--btn-round) * 0.42);
}

.topbar__round:focus-visible {
  outline-offset: 3px;
}

/* Hamburger in der Mitte: zwei dünne Linien */
.topbar__burger {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: var(--pill-h);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  justify-self: center;
  position: relative;
}

.topbar__burger-line {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--color-text);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Geöffnet: Linien werden zum X */
.topbar__burger[aria-expanded="true"] .topbar__burger-line:first-child {
  transform: translateY(3.75px) rotate(45deg);
}

.topbar__burger[aria-expanded="true"] .topbar__burger-line:last-child {
  transform: translateY(-3.75px) rotate(-45deg);
}

/* Dunkle Pille rechts */
.topbar__pill {
  display: inline-flex;
  align-items: center;
  height: var(--pill-h);
  padding: 0 16px;
  border-radius: var(--radius-pill);
  background: var(--color-dark);
  color: var(--color-on-dark);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  justify-self: end;
}

.topbar__pill:hover,
.topbar__round:hover {
  background: #2a2a2a;
}

/* Bei geöffnetem Menü bleiben nur Hamburger (X) und Overlay sichtbar */
html.menu-open .topbar__round,
html.menu-open .topbar__pill {
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   4. Menü-Overlay (Vollbild, weiß)
   -------------------------------------------------------------------------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--color-bg);
  overflow-y: auto;
  padding: calc(var(--topbar-pad-y) * 2 + var(--pill-h)) var(--page-pad) var(--page-pad);
}

.menu[hidden] {
  display: none;
}

/* Hauptnavigation füllt die flexible Zeile und zentriert ihre Liste vertikal */
.menu__primary {
  display: grid;
  align-content: center;
}

.menu__main {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.25em;
  text-align: center;
}

.menu__main a {
  display: inline-block;
  padding: 0.1em 0.2em;
  font-size: clamp(2.25rem, 6.5vw, 5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.menu__main a:hover,
.menu__main a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.08em;
}

.menu__small {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding-top: 2rem;
  font-size: var(--step-small);
}

/* --------------------------------------------------------------------------
   5. Hero-Skelett (Startseite UND Referenzen – identische Struktur)
   Zeilen: [Platz für Topbar][Headline+Subline][flex][Band][flex][Text+Links][Rand]
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  grid-template-rows:
    var(--hero-top)
    auto
    minmax(var(--hero-gap-min), 1fr)
    auto
    minmax(var(--hero-gap-min), 1fr)
    auto
    var(--hero-bottom);
  /* Auf sehr hohen/schmalen Viewports (Tablet hochkant) nicht auf volle Höhe
     strecken, sonst schwebt das Band in leerem Raum. */
  /* minmax(0, 1fr): breiter Inhalt (Karussell-Track) darf die Spalte nicht aufweiten */
  grid-template-columns: minmax(0, 1fr);
  min-height: min(100vh, 95vw);
  min-height: min(100svh, 95vw);
  text-align: center;
  background: var(--color-bg);
}

.hero__intro {
  grid-row: 2;
  padding: 0 var(--page-pad);
}

.hero__title {
  font-size: var(--step-h1);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-text);
  text-wrap: balance;
}

.hero__sub {
  margin-top: clamp(0.75rem, 1.9vh, 1.5rem);
  margin-top: clamp(0.75rem, 1.9svh, 1.5rem);
  font-size: var(--step-sub);
  line-height: 1.4;
  color: #333333;
  text-wrap: balance;
}

/* Das Band: nimmt Karussell (referenzen.html) oder Service-Karten (index.html)
   auf. Inhalt wird vertikal zentriert; horizontal wird abgeschnitten, damit
   die Seite niemals seitlich scrollt. */
.hero__band {
  grid-row: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--band-h);
  width: 100%;
  min-width: 0; /* overflow: clip erzeugt keinen Scroll-Container → min-width explizit 0 */
  overflow-x: clip;
  overflow-y: visible;
}

.hero__outro {
  grid-row: 6;
  padding: 0 var(--page-pad);
}

.hero__desc {
  max-width: clamp(20rem, 46vw, 44rem);
  margin: 0 auto;
  font-size: var(--step-sub);
  line-height: 1.5;
  color: var(--color-text);
  text-wrap: balance;
}

.hero__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2vw;
  margin-top: clamp(1rem, 2.5vh, 1.75rem);
  margin-top: clamp(1rem, 2.5svh, 1.75rem);
  font-size: var(--step-link);
  line-height: 1.5;
}

.hero__links a {
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   6. Service-Karten im Hero-Band der Startseite (flach, kein 3D)
   -------------------------------------------------------------------------- */
.services {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--card-gap);
  width: 100%;
  padding: 0 var(--page-pad);
}

.services__item {
  flex: 0 0 auto;
}

.services__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: var(--svc-w);
  height: var(--svc-h);
  padding: clamp(0.9rem, 1.3vw, 1.4rem);
  border-radius: var(--radius-card);
  background: var(--svc-bg, linear-gradient(160deg, #cbbca8, #5b4d40));
  color: var(--color-on-dark);
  text-align: left;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.25s ease;
}

.services__card:hover {
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .services__card,
  .services__card:hover {
    transition: none;
    transform: none;
  }
}

/* Warme/neutrale Verläufe; die dunkle Seite liegt unten (weiße Schrift, AA) */
.services__card--1 {
  --svc-bg: linear-gradient(165deg, #dccab5 0%, #a68b70 45%, #5e4a39 100%);
}

.services__card--2 {
  --svc-bg: linear-gradient(165deg, #c9d2d6 0%, #7d8d95 45%, #3e4b53 100%);
}

.services__card--3 {
  --svc-bg: linear-gradient(165deg, #d9d2c6 0%, #9b9082 45%, #4d453c 100%);
}

.services__card--4 {
  --svc-bg: linear-gradient(165deg, #c5cfbd 0%, #7e8f78 45%, #3f4c41 100%);
}

.services__label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.92;
}

.services__title {
  font-size: clamp(1.05rem, 1.55vw, 1.5rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   7. Karussell – FALLBACK-Styles (ohne carousel.css/carousel.js)
   In einer Cascade-Layer, damit die Engine (carousel.css, ungelayert) jede
   dieser Regeln ohne Spezifitäts-Kampf überschreibt. Ohne JS erscheinen die
   Karten als flache, zentrierte Reihe; Überstand wird vom Band abgeschnitten.
   -------------------------------------------------------------------------- */
@layer carousel-fallback {
  .carousel {
    width: 100%;
    min-width: 0;
    overflow-x: clip;
    overflow-y: visible;
  }

  .carousel__track {
    display: flex;
    justify-content: center;
    gap: var(--card-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
    height: var(--card-h);
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
  }

  .carousel__item {
    flex: 0 0 auto;
    width: var(--card-w);
    height: var(--card-h);
  }

  .carousel__card {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-card);
    overflow: hidden;
    text-decoration: none;
  }

  .carousel__card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
  }

  .carousel__card:focus-visible {
    outline-offset: 2px;
  }
}

/* --------------------------------------------------------------------------
   8. Sektionen unterhalb des Heros
   -------------------------------------------------------------------------- */
.section {
  padding: clamp(4rem, 10vh, 8rem) var(--page-pad);
}

.section + .section {
  border-top: 1px solid var(--color-line);
}

.section__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.section__head {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
}

.section__title {
  font-size: var(--step-h2);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.section__lead {
  margin-top: 1rem;
  font-size: 1.125rem;
  color: var(--color-text-muted);
  max-width: 40rem;
}

.eyebrow {
  display: block;
  margin-bottom: 0.75rem;
  font-size: var(--step-small);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Leistungen: 4 Textblöcke, 2 Spalten */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem) clamp(2rem, 5vw, 5rem);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}

@media (max-width: 767px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.block__title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.block p {
  margin-top: 0.75rem;
  color: #333333;
}

/* Ablauf: nummerierte Schritte */
.step {
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-line);
}

.step__num {
  display: block;
  margin-bottom: 1.25rem;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Referenzen-Teaser: Mini-Karten */
.mini {
  display: block;
  text-decoration: none;
}

.mini__img {
  aspect-ratio: 5 / 6;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  object-fit: cover;
}

.mini__title {
  margin-top: 1rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.mini__text {
  margin-top: 0.35rem;
  color: var(--color-text-muted);
  font-size: 1rem;
}

.section__more {
  margin-top: clamp(2rem, 5vh, 3rem);
  font-weight: 500;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-dark);
  color: var(--color-on-dark);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover {
  background: #2a2a2a;
}

/* Kontakt */
.contact__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}

.contact__mail {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.contact__note {
  margin-top: 1.5rem;
  font-size: var(--step-small);
  color: var(--color-text-muted);
  max-width: 40rem;
}

/* Projektliste (referenzen.html#projekte) */
.projects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
}

@media (max-width: 1023px) {
  .projects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  .projects {
    grid-template-columns: minmax(0, 1fr);
  }
}

.project {
  scroll-margin-top: 6rem; /* Anker aus dem Karussell landen nicht unter dem Rand */
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-line);
}

.project__num {
  display: block;
  font-size: var(--step-small);
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
}

.project__title {
  margin-top: 0.5rem;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.project__cat {
  margin-top: 0.35rem;
  font-size: 1rem;
  color: var(--color-text-muted);
}

.project__text {
  margin-top: 0.75rem;
  color: #333333;
}

/* --------------------------------------------------------------------------
   8b. Leistungen (Dienstleistungskatalog, siehe LEISTUNGSKATALOG.md)
   Vier Blöcke in zwei Spalten. Bewusst OHNE Nummerierung: eine Folge 01–04
   läse sich wie ein Programm, das man komplett durchlaufen und bezahlen muss.
   Reihenfolge Design → Beratung → Automatisierung → Optimierung, damit
   „KI-Beratung“ und „KI-Optimierung“ nicht nebeneinander stehen.
   -------------------------------------------------------------------------- */
.leistungen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* drei Leistungen als Karten (Vorbild kiberatung.de, 12.09.2026) */
  gap: 1.25rem;
}

@media (max-width: 899px) {
  .leistungen { grid-template-columns: minmax(0, 1fr); }
}

.leistung {
  display: flex;
  flex-direction: column;
  scroll-margin-top: 6rem;
  padding: clamp(1.6rem, 2.4vw, 2.1rem) clamp(1.4rem, 2vw, 1.9rem) clamp(1.8rem, 2.6vw, 2.3rem);
  border: 1px solid #e8e5df;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(51, 39, 28, 0.04), 0 12px 32px rgba(51, 39, 28, 0.05);
}

.leistung__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #f1efe9;
  color: var(--color-text);
}

.leistung__kicker {
  margin-top: 1.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.leistung__name {
  margin-top: 0.55rem;
  font-size: clamp(1.45rem, 1.9vw, 1.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.leistung__text {
  margin-top: 1.1rem;
  line-height: 1.6;
  color: rgba(51, 39, 28, 0.88);
}

/* Liste sitzt in allen Karten auf gleicher Höhe (nach unten geschoben) */
.leistung__list {
  margin: auto 0 0;
  padding: 2rem 0 0;
  list-style: none;
  display: grid;
  gap: 0.65rem;
  font-size: 0.95rem;
  color: rgba(51, 39, 28, 0.88);
}

.leistung__list li {
  position: relative;
  padding-left: 1.6rem;
}

.leistung__list li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.45em;
  width: 0.55rem;
  height: 0.28rem;
  border-left: 2px solid var(--color-text);
  border-bottom: 2px solid var(--color-text);
  transform: rotate(-45deg);
}

/* display:grid schlaegt die Browser-Regel [hidden]{display:none}. Ohne diese
   Zeile bleibt das Formular nach erfolgreichem Absenden sichtbar stehen. */

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding: 2rem var(--page-pad);
  border-top: 1px solid var(--color-line);
  font-size: var(--step-small);
  color: var(--color-text-muted);
}

.footer__nav {
  display: flex;
  gap: 1.5rem;
}

.footer a {
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   10. Rechtsseiten (Impressum, Datenschutz)
   -------------------------------------------------------------------------- */
.legal {
  max-width: 46rem;
  margin: 0 auto;
  padding: calc(var(--hero-top) + 1.5rem) var(--page-pad) clamp(4rem, 10vh, 7rem);
}

.legal h1 {
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.legal__intro {
  margin-top: 1rem;
  color: var(--color-text-muted);
}

.legal section {
  margin-top: clamp(2rem, 4vh, 3rem);
}

.legal h2 {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.legal p,
.legal address,
.legal li {
  margin-top: 0.75rem;
  color: #333333;
  font-style: normal;
}

.legal ul {
  list-style: disc;
  padding-left: 1.25rem;
}

/* Platzhalter, die der Inhaber ersetzen muss – deutlich markiert */
.ph {
  background: #fff3b0;
  color: var(--color-text);
  padding: 0 0.25em;
  border-radius: 3px;
}

/* ── Kontaktformular (#kontakt) ───────────────────────────────────────────── */

.kontakt {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* Fehlerhafte Felder erst markieren, wenn wirklich geprüft wurde – nicht,
   während jemand noch tippt. main.js setzt dafür .kontakt__form--geprueft. */

/* Honigtopf: aus dem Blickfeld schieben statt display:none – Bots erkennen
   ausgeblendete Felder, ein weggeschobenes füllen sie eher aus. */

.kontakt__note {
  margin: 1.5rem 0 0;
  font-size: var(--step-small);
  color: var(--color-text-muted);
}

@media (max-width: 899px) {
  .kontakt {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 599px) {
  .kontakt__form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   10. Landing (11.09.2026): erster Bildschirm nach Vorbild kiberatung.de.
       Kopfzeile mit mittiger Nav-Pille, Badge, große Headline mit kursivem
       Serifen-Akzent, Text, zwei Buttons, Vertrauenszeile, vier Kacheln.
   -------------------------------------------------------------------------- */
.topbar__nav {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: var(--pill-h);
  padding: 0 0.5rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
}
.topbar__nav a {
  padding: 0 0.9rem;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  line-height: calc(var(--pill-h) - 2px);
  border-radius: var(--radius-pill);
}
.topbar__nav a:hover { background: #f1efeb; }
.topbar__burger { grid-column: 2; }
.topbar__pill { grid-column: 3; }
@media (min-width: 900px) { .topbar__burger { display: none; } }
@media (max-width: 899px) { .topbar__nav { display: none; } }
html.menu-open .topbar__nav { visibility: hidden; }

.landing {
  /* Erster Bildschirm füllt die Fensterhöhe: die Leistungen beginnen erst unterhalb der Falz (Rob, 13.09.2026) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(100vh, 1100px);
  min-height: min(100svh, 1100px);   /* auf sehr hohen Monitoren nicht endlos strecken */
  padding: calc(var(--topbar-pad-y) * 2 + var(--pill-h) + clamp(1.5rem, 4vh, 3rem)) var(--page-pad) clamp(2rem, 5vh, 3.5rem);
  text-align: center;
  background: var(--color-bg);
}
.landing__inner { width: 100%; position: relative; z-index: 1; }
.landing { position: relative; overflow: hidden; }
/* Freisteller links unten (Vorbild acquisition.com): sitzt direkt links neben der Kachelreihe, mit dem unteren Rand bündig */
.landing__person {
  position: absolute;
  bottom: 0;
  left: max(0px, calc(50% - 450px - 285px));   /* direkt links neben der Kachelreihe, nie angeschnitten */
  height: clamp(400px, 44vh, 520px);
  display: none;
  pointer-events: none;
}
.landing__person img { height: 100%; width: auto; display: block; }
@media (min-width: 1440px) { .landing__person { display: block; } }
.landing__inner { max-width: 1100px; margin: 0 auto; }

.landing__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
  background: #faf9f7;
}

.landing__title {
  margin: clamp(1.2rem, 3vh, 2rem) auto 0;
  max-width: 14ch;
  font-size: clamp(2.9rem, 7.3vw, 6.8rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--color-text);
  text-wrap: balance;
}
.landing__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
  letter-spacing: -0.01em;
  padding-right: 0.06em;
}

.landing__sub {
  max-width: 38rem;
  margin: clamp(1.2rem, 3vh, 2rem) auto 0;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.5;
  color: var(--color-text-muted);
  text-wrap: balance;
}

.landing__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1rem;
  margin-top: clamp(1.5rem, 3.5vh, 2.25rem);
}
.landing__cta .btn { min-height: 3.25rem; padding: 0 1.75rem; font-size: 1rem; }
.landing__cta .btn span { margin-left: 0.4rem; }
.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid rgba(51, 39, 28, 0.28);
}
.btn--ghost:hover { background: #f6f4f1; }

.landing__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.75rem;
  margin: clamp(1.5rem, 3.5vh, 2.25rem) auto 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.landing__trust li::before { content: "✓"; margin-right: 0.45rem; font-weight: 700; color: var(--color-text); }

.landing__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* drei Leistungen seit 12.09.2026 */
  gap: 1rem;
  max-width: 900px;
  margin: clamp(2rem, 5vh, 3.25rem) auto 0;
  padding: 0;
  list-style: none;
}
.landing__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  height: 100%;
  padding: 1.35rem 1rem 1.3rem;
  border: 1px solid var(--color-line);
  border-radius: 18px;
  background: #f8f7f4;
  color: var(--color-text);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.landing__tile:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(51, 39, 28, 0.08); }
.landing__tile svg { color: var(--color-text); margin-bottom: 0.15rem; }
.landing__tile strong { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; }
.landing__tile span { font-size: 0.85rem; line-height: 1.4; color: var(--color-text-muted); }

/* Referenzen-Band unter dem Landing: kein Vollbild-Zwang, kleinerer Kopfabstand, Titel eine Stufe kleiner als das Landing */
.hero--referenzen { --hero-top: clamp(2.5rem, 7vh, 5rem); --hero-bottom: clamp(2.5rem, 7vh, 5rem); min-height: 0; }
.hero--referenzen .hero__title { font-size: clamp(2.2rem, 4.4vw, 4rem); }

@media (max-width: 640px) {
  .landing__tiles { grid-template-columns: 1fr; gap: 0.6rem; }
  .landing__tile { flex-direction: row; text-align: left; align-items: flex-start; padding: 1rem 1.1rem; }
  .landing__tile svg { flex: 0 0 22px; margin-top: 0.1rem; }
  .landing__tile strong { display: block; }
  .landing__tile span { display: block; }
  .landing__tile { display: grid; grid-template-columns: 22px 1fr; column-gap: 0.8rem; row-gap: 0.15rem; }
  .landing__tile svg { grid-row: 1 / span 2; }
  .landing__trust { flex-direction: column; gap: 0.35rem; }
}

/* --------------------------------------------------------------------------
   11. Wort-Effekte im Landing (landing.js, ?effekt=1..4) – Vergleich 11.09.2026
   -------------------------------------------------------------------------- */
.landing__word-live { display: inline-block; white-space: nowrap; }
/* 2 Fallblatt: jeder Buchstabe eine Klappe mit Trennlinie in der Mitte */
.flap { display: inline-block; perspective: 320px; }
.flap__in { display: inline-block; position: relative; transform-origin: 50% 50%; backface-visibility: hidden; }
.flap__in::after { content: ""; position: absolute; left: 0; right: 0; top: 52%; height: 1px; background: rgba(255, 255, 255, 0.55); pointer-events: none; }
.flap--leer { width: 0; }
/* 3 Chrom: Silberverlauf im Wort, wandernder Lichtreflex */
html[data-effekt="3"] .landing__word-live,
html[data-effekt="5"] .landing__word-live {   /* 5 = Chrom ohne Wortwechsel */
  padding: 0 0.06em;
  background: linear-gradient(110deg, #6d7275 0%, #b9bdc0 18%, #eef0f1 36%, #9a9ea1 48%, #4a4f52 60%, #c9cdd0 78%, #7b8083 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 4.5s ease-in-out infinite;
}
@keyframes sheen { 0% { background-position: 110% 0; } 100% { background-position: -110% 0; } }
/* 4 W-Linie: SVG über dem Logo, Bild währenddessen unsichtbar */
.topbar__logo--wide { position: relative; }
.topbar__logo--wide img { transition: opacity .5s ease; }
.topbar__logo--wide img.is-hidden { opacity: 0; }
.logo-draw { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { html[data-effekt="3"] .landing__word-live, html[data-effekt="5"] .landing__word-live { animation: none; } }
/* Sequenz-Modus (?effekt=alle): kleines Label unter der Headline */
.landing__effektlabel { margin: 0.9rem auto 0; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }

/* --------------------------------------------------------------------------
   12. Ablauf (Prozess-Karten) und Kontakt ohne Formular – 12.09.2026
   -------------------------------------------------------------------------- */
.section--prozess { background: #faf9f7; }
.section__head--wide { max-width: 52rem; }
.section__head .landing__badge { margin-bottom: 1.1rem; }
.akzent { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.08em; letter-spacing: -0.01em; }

.prozess {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.prozess__schritt {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.4rem 1.6rem;
  border: 1px solid var(--color-line);
  border-radius: 20px;
  background: #fff;
}
.prozess__kopf { display: flex; align-items: center; gap: 0.75rem; color: var(--color-text); }
.prozess__nr { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; color: var(--color-text-muted); }
.prozess__pfeil { margin-left: auto; font-size: 1.25rem; line-height: 1; color: var(--color-text-muted); }
.prozess__schritt:last-child .prozess__pfeil { visibility: hidden; }
.prozess__titel { margin-top: 1.35rem; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.prozess__text { margin-top: 0.6rem; font-size: 0.95rem; line-height: 1.55; }
.prozess__tags { display: grid; justify-items: start; gap: 0.45rem; margin: auto 0 0; padding: 1.1rem 0 0; list-style: none; }   /* je Tag eine Zeile, in allen Karten gleich */
.prozess__tags li { font-size: 0.76rem; font-weight: 600; padding: 0.35rem 0.7rem; border: 1px solid var(--color-line); border-radius: 999px; background: #f8f7f4; color: var(--color-text); }
@media (max-width: 1023px) { .prozess { grid-template-columns: repeat(2, minmax(0, 1fr)); } .prozess__pfeil { display: none; } }
@media (max-width: 599px) { .prozess { grid-template-columns: 1fr; } }

.kontakt__buttons { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.5rem; }
.kontakt__btn svg { margin-right: 0.55rem; flex: 0 0 auto; }
.kontakt__btn span { margin-left: 0.35rem; }
.kontakt__note { margin-top: 1.25rem; font-size: 0.9rem; color: var(--color-text-muted); }
@media (max-width: 599px) { .kontakt__buttons { flex-direction: column; align-items: stretch; } .kontakt__btn { justify-content: center; } }

/* Zentrierter Abschnittskopf (Leistungen, 12.09.2026) */
.section__head--center { margin-left: auto; margin-right: auto; max-width: 52rem; text-align: center; }
.section__head--center .section__lead { margin-left: auto; margin-right: auto; max-width: 40rem; }
.leistungen__hinweis { margin: 1.5rem 0 0; text-align: center; font-size: 0.9rem; color: var(--color-text-muted); }

/* --------------------------------------------------------------------------
   13. Feste Button-Leiste am Handy-Rand + Tap-Ziele (13.09.2026)
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: none;
  gap: 0.6rem;
  padding: 0.6rem var(--page-pad) calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--color-line);
  transform: translateY(110%);
  transition: transform .25s ease;
}
.sticky-cta__btn { flex: 1 1 0; justify-content: center; min-height: 3rem; }
@media (max-width: 767px) {
  .sticky-cta { display: flex; }
  .sticky-cta.is-visible { transform: translateY(0); }
  html.menu-open .sticky-cta { display: none; }
  /* Tap-Ziele: mindestens 44 px */
  .topbar__pill { height: 40px; padding: 0 18px; }
  .footer__nav a { display: inline-block; padding: 0.7rem 0.5rem; }
  .menu__main a { display: block; padding: 0.5rem 0; }
}
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }

/* --------------------------------------------------------------------------
   14. Über mich + Referenz (13.09.2026, vorerst Platzhalter-Foto und Blindtext)
   -------------------------------------------------------------------------- */
.ueber { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.ueber__foto { margin: 0; }
.ueber__foto img { display: block; width: 100%; height: auto; border-radius: 20px; border: 1px solid var(--color-line); }
.ueber__text .section__title { margin-top: 0.6rem; }
.ueber__rolle { margin-top: 0.4rem; font-weight: 500; color: var(--color-text-muted); }
.ueber__absatz { margin-top: 1rem; max-width: 36rem; line-height: 1.6; }
.ueber__fakten { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; font-size: 0.95rem; }
.ueber__fakten li { position: relative; padding-left: 1.6rem; }
.ueber__fakten li::before { content: ""; position: absolute; left: 0.1rem; top: 0.45em; width: 0.55rem; height: 0.28rem; border-left: 2px solid var(--color-text); border-bottom: 2px solid var(--color-text); transform: rotate(-45deg); }
.referenz { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 2rem; padding: 1.25rem; border: 1px solid var(--color-line); border-radius: 18px; background: #f8f7f4; }
.referenz__bild { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; border-radius: 10px; background: #e6e3db; color: var(--color-text-muted); font-size: 0.8rem; text-align: center; padding: 0.5rem; }
.referenz__kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
.referenz__titel { margin-top: 0.3rem; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.referenz__text p { margin-top: 0.5rem; font-size: 0.93rem; line-height: 1.5; }
.kontakt__person { margin: -0.5rem 0 1.25rem; color: var(--color-text-muted); }
@media (max-width: 899px) {
  .ueber { grid-template-columns: 1fr; }
  .ueber__foto { max-width: 340px; }
}
@media (max-width: 599px) { .referenz { grid-template-columns: 1fr; } .referenz__bild { aspect-ratio: 16 / 9; } }

/* Unterseite: erste Sektion beginnt unter dem absoluten Header */
.section--first { padding-top: calc(var(--topbar-pad-y) * 2 + var(--pill-h) + clamp(2.5rem, 6vh, 4.5rem)); }