:root {
  --paper: #eef2f5;
  --paper-2: #f7f8f5;
  --surface: #ffffff;
  --surface-muted: #e2e8ee;
  --ink: #0f1e3a;
  --text: #243247;
  --muted: #5a6577;
  --line: rgba(15, 30, 58, 0.12);
  --blue: #2563eb;
  --blue-strong: #1d4ed8; /* Weiß darauf erfüllt AA */
  --blue-grad-end: #2f6ae0;
  --blue-light: #5a94ff;
  --blue-pale: #9dbfff; /* Akzent auf dunklen Flächen */
  --deep: #121a27;
  --deep-2: #0d141e;
  --radius: 14px;
  --maxw: 1120px;
  --header-h: 78px;
  --shadow: 0 24px 70px rgba(15, 30, 58, 0.14);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: "Segoe UI Variable", "Segoe UI", "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

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

/* width/height-Attribute reservieren den Platz, dürfen die Höhe aber nicht fixieren. */
img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

p,
h1,
h2,
h3 {
  overflow-wrap: break-word;
}

p,
h1,
h2,
h3 {
  margin: 0;
}

h1,
h2,
h3 {
  color: var(--ink);
  font-family: "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif;
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1.04;
  word-break: normal;
}

h1 {
  max-width: 18ch;
  font-size: clamp(3rem, 6.2vw, 5rem);
}

h2 {
  font-size: clamp(2.15rem, 4vw, 3.6rem);
}

/*
  Überschriften in schmalen Spalten kleiner – aber nur, solange die Spalten
  existieren. Unter 1000px ist der Kontaktblock einspaltig, dort gilt wieder
  die normale h2-Größe.
*/
@media (min-width: 1001px) {
  .contact-intro h2 {
    font-size: clamp(2rem, 3vw, 2.9rem);
  }
}

h3 {
  font-size: clamp(1.28rem, 2vw, 1.7rem);
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  color: #ffffff;
  background: var(--ink);
  transform: translateY(-125%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(12px);
}

/*
  Kein scroll-margin-top auf den Sektionen: scroll-padding-top am html-Element
  gilt bereits fuer jedes Sprungziel. Beides zusammen addiert sich und schob
  die Ankersprünge um die doppelte Headerhoehe nach unten.
*/

a:focus-visible,
button:focus-visible {
  outline: 3px solid #f4b942;
  outline-offset: 3px;
}

.wrap {
  width: min(var(--maxw), calc(100% - 48px));
  margin: 0 auto;
}

.section-pad {
  padding: clamp(54px, 5.6vw, 84px) 0;
}

.site-header {
  position: fixed;
  z-index: 30;
  top: 0;
  right: 0;
  left: 0;
  color: #ffffff;
  transition: background 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

/*
  Eingeloggt schiebt WordPress das Dokument um die Adminleiste nach unten.
  Der fixierte Header muss mitwandern, sonst überdeckt er sie.
*/
.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

.site-header.is-scrolled,
.site-header.is-open {
  color: var(--ink);
  background: rgba(238, 242, 245, 0.92);
  box-shadow: 0 16px 40px rgba(15, 30, 58, 0.09);
  backdrop-filter: blur(14px);
}

.nav {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo img {
  width: 258px;
  height: auto;
}

.logo-light {
  display: none;
}

.site-header:not(.is-scrolled):not(.is-open) .logo-dark {
  display: none;
}

.site-header:not(.is-scrolled):not(.is-open) .logo-light {
  display: block;
}

.menu {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  font-size: 0.94rem;
  font-weight: 700;
}

.menu > a:not(.btn) {
  position: relative;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}

.menu > a:not(.btn)::after {
  position: absolute;
  content: "";
  right: 0;
  bottom: -8px;
  left: 0;
  height: 2px;
  background: var(--blue-light);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.menu > a:hover::after,
.menu > a:focus-visible::after {
  transform: scaleX(1);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}

.site-header.is-open .nav-toggle span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.site-header.is-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

.site-header.is-open .nav-toggle span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.btn {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 13px 25px;
  font-weight: 800;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
}

.btn-primary {
  color: #ffffff;
  background: linear-gradient(125deg, var(--blue-strong), var(--blue-grad-end));
  box-shadow: 0 12px 32px rgba(29, 78, 216, 0.24);
}

.btn-ghost {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.54);
  background: rgba(255, 255, 255, 0.08);
}

.hero {
  position: relative;
  min-height: min(820px, 90svh);
  display: grid;
  align-items: end;
  overflow: hidden;
  color: #ffffff;
  isolation: isolate;
}

.hero-media,
.hero-shade {
  position: absolute;
  inset: 0;
}

.hero-media {
  z-index: -3;
  background-image: url("../img/hero-designer-desk.webp");
  background-position: center;
  background-size: cover;
}

.hero-shade {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(10, 17, 28, 0.78), rgba(10, 17, 28, 0.42) 52%, rgba(10, 17, 28, 0.08)),
    linear-gradient(0deg, rgba(10, 17, 28, 0.58), rgba(10, 17, 28, 0.02) 60%);
}

.hero-inner {
  padding: 148px 0 74px;
}

.eyebrow,
.section-kicker {
  display: inline-block;
  margin: 0 0 16px;
  color: var(--blue);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero .eyebrow {
  color: var(--blue-pale);
}

.hero h1 {
  color: #ffffff;
}

.hero-lead {
  max-width: 660px;
  margin-top: 26px;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.hero-trust {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
  font-weight: 600;
}

.hero-proof {
  width: min(1040px, 100%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 58px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
}

/*
  Dunkler statt hell getönt: die weiße Kachelfüllung hob den Untergrund um rund
  37 Helligkeitsstufen an und riss in der rechten Kachel – dort ist das Hero-Bild
  am hellsten – die AA-Grenze. Die 1px-Fugen bleiben als helle Linien sichtbar.
*/
.hero-proof div {
  padding: 20px;
  background: rgba(10, 17, 28, 0.28);
}

.hero-proof strong {
  display: block;
  color: #ffffff;
  font-family: inherit;
  font-size: 1.08rem;
  font-weight: 600;
}

.hero-proof span {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.92rem;
}

.positioning {
  background: var(--paper);
}

.positioning-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(34px, 6vw, 82px);
  align-items: center;
}

.positioning-grid > *,
.contact-box > * {
  min-width: 0;
}

.section-head > p:not(.section-kicker),
.positioning-grid > div:last-child > p:not(.section-kicker),
.contact-intro > p:not(.section-kicker) {
  max-width: 720px;
  margin-top: 20px;
  color: var(--muted);
  font-size: clamp(1.03rem, 1.6vw, 1.2rem);
}

/* Karte statt freigestelltem Bild: das Foto hat selbst einen hellen Hintergrund. */
.portrait-panel {
  width: min(380px, 100%);
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.portrait-panel img {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  object-fit: cover;
}

/* Eine Zeile, eine Schrift: Name und Zusatz sind hier gleichrangig. */
.portrait-panel figcaption {
  padding: 16px 6px 4px;
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
}

.usp-list {
  display: grid;
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.usp-list li {
  position: relative;
  padding-left: 32px;
  color: var(--ink);
  font-weight: 700;
}

.usp-list li::before,
.usp-list li::after {
  position: absolute;
  content: "";
  border-radius: 999px;
}

.usp-list li::before {
  top: 3px;
  left: 0;
  width: 20px;
  height: 20px;
  background: rgba(37, 99, 235, 0.12);
}

.usp-list li::after {
  top: 9px;
  left: 6px;
  width: 8px;
  height: 8px;
  background: var(--blue);
}

.services {
  background: var(--paper-2);
}

.section-head {
  max-width: 760px;
  margin-bottom: 46px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.service-card {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.service-card:hover,
.service-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(37, 99, 235, 0.3);
  box-shadow: 0 16px 44px rgba(15, 30, 58, 0.09);
}

/*
  Icons stehen frei wie die Ziffern 01-04 im Ablauf – gleiche Groesse, gleicher
  Abstand, gleiche Farbe. Eine getoente Kachel drumherum wuerde das Zeichen auf
  gut die Haelfte schrumpfen und die beiden Kartentypen wieder auseinanderziehen.
*/
.icon {
  width: clamp(2.8rem, 4vw, 3.8rem);
  height: clamp(2.8rem, 4vw, 3.8rem);
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  color: var(--blue);
}

.icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-card h3,
.package h3,
.step h3 {
  margin-bottom: 12px;
}

/*
  Zwei Zeilen Platz für die Überschrift, auch wenn sie nur eine braucht.
  Sonst startet der Fließtext je nach Titellänge 28px höher oder tiefer und
  die vier Karten stehen nicht in einer Flucht. 2.08em = 2 x line-height 1.04.
*/
.service-card h3 {
  min-height: 2.08em;
}

.service-card p,
.package p,
.step p {
  color: var(--muted);
}

.mini-list {
  display: grid;
  gap: 8px;
  margin: auto 0 0;
  padding: 24px 0 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  list-style: none;
}

.mini-list li {
  position: relative;
  padding-left: 18px;
}

.mini-list li::before {
  position: absolute;
  top: 0.67em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--blue);
  content: "";
  transform: translateY(-50%);
}

/*
  Dunkler Anker in der Seitenmitte, sonst laufen vier helle Sektionen am Stück.
  Bewusst ohne color auf der Sektion: die .step-Karten bleiben helle Flächen und
  würden weiße Schrift erben.
*/
.process {
  background: linear-gradient(180deg, var(--deep), var(--deep-2));
}

.process h2 {
  color: #ffffff;
}

.process .section-kicker {
  color: var(--blue-pale);
}

/*
  Selektor gleicht die Spezifität der hellen Sammelregel weiter oben an, sonst
  gewinnt dort var(--muted) und der Fließtext rendert grau auf Dunkel.
*/
.process .section-head > p:not(.section-kicker) {
  color: rgba(255, 255, 255, 0.7);
}

.references {
  background: var(--paper-2);
}

/* 2x2: vier Referenzen, je eine Leistung. Größere Kacheln als ein Viererraster. */
.case-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.case-card {
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 16px 44px rgba(15, 30, 58, 0.08);
}

/* Bündig zur Kachel: nur oben Abstand, seitlich trägt das Karten-Padding. */
.case-card-body {
  padding-top: clamp(20px, 2.4vw, 26px);
}

.case-label {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.case-card p {
  margin-top: 12px;
  color: var(--muted);
}

/*
  Die Kacheln sind fertige Mockups – Bühne, Licht und Schatten stecken im Bild.
  Hier bleibt nur der Rahmen; keine CSS-Montage mehr.
*/
.case-media {
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.case-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Der Zusatz „(eigenes Projekt)" darf nicht wie ein Kundenname aussehen. */
.case-label em {
  font-style: normal;
  opacity: 0.72;
  text-transform: none;
  letter-spacing: 0.02em;
}

/*
  Reiner Wrapper um das Kachelbild: keine eigene Fläche, kein eigener Abstand.
  Höhe 100 %, damit das Bild weiterhin die 4:3-Fläche von .case-media füllt.
*/
.case-zoom {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: none;
  cursor: zoom-in;
}

.case-zoom img {
  transition: transform 320ms ease;
}

/* Dezenter Hinweis, dass hinter der Kachel mehr steckt. */
.case-zoom:hover img,
.case-zoom:focus-visible img {
  transform: scale(1.03);
}

/*
  Der Fokusrahmen sitzt auf der Kachel statt auf dem Button: dessen eigener
  Rahmen liegt entweder außerhalb und wird von overflow: hidden abgeschnitten
  oder innen unter dem skalierten Bild. Werte wie im übrigen Theme.
*/
.case-media:focus-within {
  outline: 3px solid #f4b942;
  outline-offset: 3px;
}

body.lightbox-open {
  overflow: hidden;
}

/*
  Lightbox: script.js baut das Overlay beim ersten Öffnen. Drei Spalten halten
  Zurück-Taste, Bild und Weiter-Taste auseinander, auch auf schmalen Viewports.
*/
.lightbox {
  position: fixed;
  z-index: 60;
  inset: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(10px, 2vw, 22px);
  padding: clamp(64px, 9vh, 92px) clamp(12px, 3vw, 30px) clamp(20px, 4vh, 40px);
  /* Fast deckend: die helle Sektion darunter schimmerte sonst als Textgeist durch. */
  background: rgba(13, 20, 30, 0.97);
  opacity: 0;
  transition: opacity 220ms ease;
}

.lightbox.is-open {
  opacity: 1;
}

.lightbox-btn {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.54);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
}

.lightbox-btn:hover,
.lightbox-btn:focus-visible {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-btn svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Steht über der Bildzone; den Platz dafür hält der obere Innenabstand frei. */
.lightbox-close {
  position: absolute;
  top: clamp(14px, 2.5vh, 24px);
  right: clamp(12px, 3vw, 30px);
}

.lightbox-figure {
  display: grid;
  justify-items: center;
  gap: 14px;
  min-width: 0;
  margin: 0;
}

/*
  Begrenzt wird allein die Breite; die Höhe folgt über das Seitenverhältnis der
  Datei (4:3). max-width und max-height nebeneinander klemmt der Browser
  unabhängig voneinander und zerrt das Bild in die Breite – die Höhengrenze
  steht deshalb als 4/3 davon in der Breitenformel. Die 240px sind Kopfzone,
  Bildunterschrift und Innenabstand, die neben dem Bild Platz brauchen.
*/
.lightbox-image {
  width: min(100%, 1100px, calc(72svh * 4 / 3), calc((100svh - 240px) * 4 / 3));
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(10, 17, 28, 0.55);
}

.lightbox-caption {
  max-width: 62ch;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.92rem;
  text-align: center;
}

.lightbox-counter {
  display: block;
  margin-bottom: 6px;
  color: var(--blue-pale);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.startpoints {
  color: #ffffff;
  background: linear-gradient(180deg, var(--deep), var(--deep-2));
}

.startpoints h2,
.startpoints h3 {
  color: #ffffff;
}

.startpoints .section-kicker {
  color: var(--blue-pale);
}

.startpoints .section-head > p:not(.section-kicker) {
  color: rgba(255, 255, 255, 0.7);
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  counter-reset: steps;
}

/*
  Helle Karten auf dunklem Grund: Inhalte bleiben dunkel, nur der Rahmen wechselt
  auf ein Weiß-Alpha – var(--line) verschwände im Dunkel.
*/
.step {
  min-height: 240px;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  background: var(--surface);
  counter-increment: steps;
}

.step::before {
  display: block;
  margin-bottom: 24px;
  content: "0" counter(steps);
  font-family: inherit;
  font-size: clamp(2.8rem, 4vw, 3.8rem);
  font-weight: 600;
  line-height: 1;
  background: linear-gradient(120deg, var(--blue-strong), var(--blue-grad-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.package {
  min-height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
}

.package p {
  color: rgba(255, 255, 255, 0.68);
}


.package-tag {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 7px 11px;
  color: var(--blue-pale);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.package-list {
  display: grid;
  gap: 10px;
  margin: 24px 0 30px;
  padding: 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.92rem;
  font-weight: 700;
  list-style: none;
}

.package-list li {
  position: relative;
  padding-left: 20px;
}

.package-list li::before {
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--blue-light);
  content: "";
  transform: translateY(-50%);
}

.package .btn {
  width: 100%;
  margin-top: auto;
  padding-right: 18px;
  padding-left: 18px;
  font-size: 0.92rem;
}

.btn-outline {
  border-color: rgba(255, 255, 255, 0.36);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
}

.package-featured {
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.package-featured h3 {
  color: var(--ink);
}

.package-featured p {
  color: var(--muted);
}

.package-featured .package-tag {
  border-color: rgba(37, 99, 235, 0.18);
  color: var(--blue);
  background: rgba(37, 99, 235, 0.07);
}

.package-featured .package-list {
  color: var(--text);
}

.contact {
  background: var(--paper);
}

.contact-box {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(34px, 6vw, 74px);
  align-items: start;
  padding: clamp(44px, 7vw, 76px);
  border-radius: 20px;
  text-align: left;
  background:
    radial-gradient(520px 320px at 50% 0%, rgba(37, 99, 235, 0.12), transparent),
    var(--surface);
  box-shadow: var(--shadow);
}

.contact-form {
  margin: 0;
  display: grid;
  gap: 16px;
  text-align: left;
}

.direct-contact {
  display: grid;
  gap: 5px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.direct-contact span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.direct-contact a {
  color: var(--blue);
  font-weight: 800;
}

/* Zweiter Kontakt-Slot braucht Abstand zum E-Mail-Block. */
.direct-contact .copy-status + span {
  margin-top: 16px;
}

/* Farbe und Gewicht kommen aus .direct-contact a, wie bei der E-Mail-Adresse. */
.direct-phone {
  justify-self: start;
  min-height: 24px;
}

.copy-email {
  justify-self: start;
  min-height: 24px;
  margin-top: 6px;
  border: 0;
  padding: 4px 0;
  color: var(--text);
  background: transparent;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.contact-form label {
  display: grid;
  gap: 7px;
}

.contact-form label span {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 700;
}

.form-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 13px 15px;
  color: var(--text);
  background: var(--paper-2);
  font: inherit;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.contact-form select:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.contact-form textarea {
  resize: vertical;
}

.contact-form .privacy-check {
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.contact-form .privacy-check input {
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--blue);
}

.contact-form .privacy-check span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.55;
}

.contact-form .privacy-check a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-form .btn {
  justify-self: stretch;
  margin-top: 6px;
}

.contact-form .btn:disabled {
  cursor: wait;
  opacity: 0.72;
}

.form-privacy,
.form-status,
.copy-status {
  color: var(--muted);
  font-size: 0.82rem;
}

.form-status {
  min-height: 1.4em;
  margin-top: -8px;
}

.form-status.is-success,
.copy-status.is-success {
  color: #166534;
  font-weight: 700;
}

.form-status.is-error,
.copy-status.is-error {
  color: #b42318;
  font-weight: 700;
}

.site-footer {
  padding: 34px 0;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
}

.footer-grid {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 26px;
  align-items: center;
}

.footer-logo img {
  width: 196px;
}

.site-footer p,
.site-footer a {
  color: var(--muted);
  font-size: 0.92rem;
}

.site-footer nav {
  display: flex;
  gap: 18px;
}

/* wp_nav_menu() gibt eine Liste aus – die Links bleiben trotzdem in einer Zeile. */
.site-footer nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer nav a {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--blue);
}

/*
  Anders als die statischen Rechtsseiten tragen diese Seiten jetzt den
  Site-Header. Der ist fixiert, also muss der Inhalt darunter beginnen.
*/
.legal-page {
  min-height: 100vh;
  padding: calc(var(--header-h) + 40px) 0 88px;
  background: var(--paper);
}

.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 64px;
}

.legal-header img {
  width: 220px;
}

.legal-back {
  color: var(--blue);
  font-weight: 800;
}

.legal-content {
  max-width: 800px;
}

.legal-content h1 {
  margin-bottom: 30px;
  font-size: clamp(2.7rem, 7vw, 5rem);
}

.legal-content h2 {
  margin-top: 42px;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.legal-content p,
.legal-content li {
  margin-top: 14px;
}

.draft-notice {
  margin-bottom: 34px;
  border: 1px solid rgba(37, 99, 235, 0.24);
  border-radius: var(--radius);
  padding: 22px;
  color: var(--ink);
  background: rgba(37, 99, 235, 0.07);
}

/* Variante für dunkle Sektionen */
.startpoints .draft-notice {
  border-color: rgba(255, 255, 255, 0.26);
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.06);
}

.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 580ms ease, transform 580ms ease;
}

.js .reveal.visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 1000px) {
  /*
    Der Fließtext behält seine 660px, während der Rahmen schrumpft – er ragt
    dadurch bis in das helle Laptop-Display. Der Verlauf endet hier deshalb nicht
    mehr bei 0.08. Unter 780px greift weiter unten die noch dunklere Variante.
  */
  .hero-shade {
    background:
      linear-gradient(90deg, rgba(10, 17, 28, 0.84), rgba(10, 17, 28, 0.64) 52%, rgba(10, 17, 28, 0.54)),
      linear-gradient(0deg, rgba(10, 17, 28, 0.58), rgba(10, 17, 28, 0.02) 60%);
  }

  .service-grid,
  .steps,
  .package-grid,
  .case-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .positioning-grid,
  .contact-box {
    grid-template-columns: 1fr;
  }

  .contact-form {
    max-width: 720px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1080px) {
  body.nav-open {
    overflow: hidden;
  }

  .nav-toggle {
    display: block;
  }

  .menu {
    position: absolute;
    top: var(--header-h);
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 24px 24px;
    color: var(--ink);
    background: rgba(238, 242, 245, 0.98);
    box-shadow: 0 18px 38px rgba(15, 30, 58, 0.1);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }

  .site-header.is-open .menu {
    display: flex;
  }

  /* Nur die Textlinks bekommen Trennlinien – der CTA behält sein Button-Padding. */
  .menu > a:not(.btn) {
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
  }

  .menu > a:not(.btn)::after {
    display: none;
  }

  .menu .btn {
    width: 100%;
    margin-top: 12px;
  }
}

@media (max-width: 780px) {
  :root {
    --header-h: 70px;
  }

  .wrap {
    width: min(var(--maxw), calc(100% - 36px));
  }

  .logo img {
    width: 220px;
  }

  .hero {
    min-height: 90svh;
  }

  .hero-media {
    background-position: 54% center;
  }

  .hero-shade {
    background:
      linear-gradient(90deg, rgba(12, 18, 27, 0.94), rgba(12, 18, 27, 0.72)),
      linear-gradient(0deg, rgba(12, 18, 27, 0.75), rgba(12, 18, 27, 0.06) 54%);
  }

  .hero-inner {
    padding: 126px 0 64px;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .service-grid,
  .steps,
  .package-grid,
  .case-grid {
    grid-template-columns: 1fr;
  }

  .hero-proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-card,
  .step,
  .package {
    min-height: auto;
  }

  .package .btn {
    margin-top: 8px;
  }

  .contact-box {
    padding: 34px 22px;
  }

  .legal-header {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 48px;
  }

  .site-footer nav {
    flex-wrap: wrap;
  }
}

@media (max-width: 460px) {
  .wrap {
    width: auto;
    margin-right: 14px;
    margin-left: 14px;
  }

  h1 {
    font-size: clamp(2.4rem, 11vw, 3.2rem);
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  h2 {
    font-size: clamp(2rem, 11vw, 2.5rem);
  }

  .logo img {
    width: 196px;
  }

  .hero-proof div,
  .contact-box {
    padding-right: 22px;
    padding-left: 22px;
  }

  .hero-proof div {
    padding: 17px 15px;
  }

  .hero-proof span {
    font-size: 0.84rem;
  }

  /*
    Auf dem Handy bekommt das Bild die volle Breite: Zurück und Weiter rutschen
    unter die Bildunterschrift. Flankierend genommen blieben dem Bild bei 360px
    nur rund 236px – weniger, als die Kachel auf der Seite selbst zeigt, und
    damit das Gegenteil dessen, wofür die Lightbox da ist.
  */
  .lightbox {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding-right: 12px;
    padding-left: 12px;
  }

  /* Beide Schaltflächen teilen sich die zweite Zeile, je an einem Rand. */
  .lightbox-figure {
    grid-row: 1;
    grid-column: 1;
  }

  .lightbox-prev {
    grid-row: 2;
    grid-column: 1;
    justify-self: start;
  }

  .lightbox-next {
    grid-row: 2;
    grid-column: 1;
    justify-self: end;
  }

  .lightbox-btn {
    width: 44px;
    height: 44px;
  }
}

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