/* ============================================================
   M&K Software & Marketing — Designsystem
   ------------------------------------------------------------
   Farbe   — Logo-Navy als Akzent, Stahlblau (das „&" der
             Bildmarke) für Links und Details, kühles Papier
             als Grund.
   Schrift — EINE Familie für alles: Inter, die Standard-
             Grotesk moderner Oberflächen. Liegt in fonts/ und
             lädt von der eigenen Domain (DSGVO). Hierarchie
             entsteht über Größe, Gewicht und Laufweite —
             nicht über einen zweiten Schriftschnitt.
             Große Überschriften laufen bewusst enger
             (negatives letter-spacing): so sitzt eine Grotesk
             im Großen kompakt statt auseinandergezogen.
   Fläche  — weiße Karten mit 1-px-Linie. Kein Glas, keine
             Verläufe, keine Deko-Effekte, keine Wasserzeichen.
   Light/Dark theme via html[data-theme]
   ============================================================ */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f6f6f3;
  --ink: #16203a;
  --muted: #5a6377;
  --accent: #0d2a55;
  --accent-hover: #123a75;
  --accent-soft: rgba(13, 42, 85, 0.07);
  --steel: #3d639f;
  --on-accent: #ffffff;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --border: rgba(22, 32, 58, 0.12);
  --track: rgba(22, 32, 58, 0.05);
  --shadow: 0 1px 2px rgba(16, 24, 44, 0.04);
  --shadow-hover: 0 14px 34px rgba(13, 42, 85, 0.10);
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 9px;
  --radius-pill: 999px;
  --max-w: 1120px;
  /* Beide Variablen zeigen bewusst auf denselben Stack: Titel und
     Fließtext teilen sich eine Familie. --font-display bleibt als
     Name erhalten, damit klar ist, welche Stellen Titel sind. */
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html[data-theme="dark"] {
  --bg: #0c1322;
  --ink: #e8ebf3;
  --muted: #96a1ba;
  --accent: #bccfef;
  --accent-hover: #d3e0f7;
  --accent-soft: rgba(188, 207, 239, 0.10);
  --steel: #8fadde;
  --on-accent: #0c1322;
  --surface: #121b2e;
  --surface-strong: #16213a;
  --border: rgba(232, 235, 243, 0.13);
  --track: rgba(232, 235, 243, 0.06);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-hover: 0 14px 34px rgba(0, 0, 0, 0.4);
}

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

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: clip;              /* clip any stray horizontal bleed at the root */
  overscroll-behavior-x: none;  /* no sideways rubber-band / wobble on mobile */
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease, color 0.3s ease;
}

/* (Der frühere „bg-blobs"-Hintergrund ist entfernt — der Grund ist
   schlichtes Papier, die Aufmerksamkeit gehört dem Inhalt.) */

/* ---------- Glass primitives ---------- */

.glass {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* ---------- Header ---------- */

/* Ruhige, volle Leiste statt schwebender Glas-Pille: Papiergrund,
   1-px-Linie unten, Inhalt bündig zur Inhaltsspalte (plus Luft). */

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 680;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.04em;
  line-height: 1.1;
}
.main-nav a.active { color: var(--ink); background: var(--track); }

/* Aufklappmenü „Leistungen".
   Die vier Leistungsseiten standen bisher nur im Fußbereich. Sie sind die
   Seiten, die Anfragen bringen sollen — ein Link im Kopfbereich jeder Seite
   wiegt deutlich schwerer. Die Links liegen immer im Quelltext, das Menü
   blendet sie nur visuell ein; :focus-within hält es per Tastatur bedienbar. */
.nav-group { position: relative; display: flex; align-items: center; }
.nav-group > .nav-group-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: none;
  font: inherit;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 8px 8px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color 0.25s, background 0.25s;
}
.nav-group > .nav-group-btn svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s;
}
.nav-group:hover > .nav-group-btn,
.nav-group:focus-within > .nav-group-btn,
.nav-group.open > .nav-group-btn { color: var(--ink); background: var(--track); }
.nav-group:hover > .nav-group-btn svg,
.nav-group:focus-within > .nav-group-btn svg,
.nav-group.open > .nav-group-btn svg { transform: rotate(180deg); }
.nav-group:hover .nav-menu,
.nav-group:focus-within .nav-menu,
.nav-group.open .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .nav-menu, .nav-group > .nav-group-btn svg { transition: none; }
}

.theme-toggle {
  border: none;
  background: var(--track);
  border-radius: var(--radius-pill);
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink);
  flex-shrink: 0;
  transition: background 0.25s;
}
.theme-toggle:hover { background: var(--border); }
.theme-toggle svg { width: 18px; height: 18px; stroke: currentColor; }
.theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* Benutzer-Icon (Userbereich) — ganz rechts in der Kopfzeile */
.nav-user.is-in {
  background: var(--accent);
  color: var(--on-accent);
}

.nav-toggle {
  display: none;
  border: none;
  background: var(--track);
  border-radius: var(--radius-pill);
  width: 40px; height: 40px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 17px; height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Barrierefreiheit: nur für Screenreader / Skip-Link (nur bei Tastaturfokus sichtbar) */

.mobile-nav {
  position: fixed;
  top: 76px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  width: min(420px, calc(100% - 32px));
  z-index: 99;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.3s, transform 0.3s, visibility 0s 0.3s;
}
.mobile-nav.open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.3s, transform 0.3s, visibility 0s 0s;
}
.mobile-nav a {
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  transition: background 0.25s;
}
.mobile-nav a:hover { background: var(--track); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
}
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow);
}
.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}
.btn-ghost {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
}
.btn-ghost:hover { transform: translateY(-1px); border-color: var(--steel); }
.btn-wa {
  background: #25d366;
  color: #fff;
  box-shadow: var(--shadow);
}
.btn-wa:hover {
  background: #1fb959;
  transform: translateY(-1px);
}
.btn-sm { padding: 9px 18px; font-size: 0.86rem; }

/* ---------- Layout ---------- */

.section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 96px 24px 0;
}
.section:last-of-type { padding-bottom: 96px; }

.section-head { max-width: 640px; margin-bottom: 48px; }
.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 12px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.4vw, 2.35rem);
  letter-spacing: -0.03em;
  line-height: 1.14;
  margin-bottom: 14px;
}
.section-head p { color: var(--muted); font-size: 1.05rem; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  /* dieselbe Inhaltsbreite wie alle Abschnitte — sonst steht der Kopf
     einen Tick weiter links als die Überschriften darunter */
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 150px 24px 0;
  text-align: left;
  /* Links der Satz, rechts drei echte Kundenseiten — statt Text auf leerer
     Fläche sieht der Besucher sofort, was er bekommt. */
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: 56px;
  align-items: center;
}

/* Kleinzeile mit vorangestelltem Strich (Detail aus der Graf-Seite). */

/* Die drei Arbeitsproben, leicht gefächert und überlappend. */
/* Treppe statt Fächer: jedes Bild bleibt als eigene Website erkennbar,
   die Überlappung reicht nur so weit, dass die Gruppe zusammenhält. */
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.3rem, 4.4vw, 3.5rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
  max-width: 100%;
  margin: 0 0 26px;
}
.hero h1 .grad, .page-hero h1 .grad { color: var(--steel); }
.hero .lede {
  color: var(--muted);
  font-size: 1.14rem;
  max-width: 600px;
  margin: 0 0 34px;
}
.hero-ctas {
  display: flex;
  gap: 12px;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 64px;
}

/* Kennzahlen als ruhige Faktenzeile über einer Linie — keine Kartenbox. */

/* ---------- Cards & grids ---------- */

.card-grid { display: grid; gap: 20px; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  padding: 32px 28px;
  transition: transform 0.35s, box-shadow 0.35s, background 0.3s, border-color 0.3s;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.card .icon {
  display: block;
  background: none;
  margin-bottom: 18px;
}
.card .icon svg { width: 28px; height: 28px; stroke: var(--steel); stroke-width: 1.6; }
.card h3 { font-size: 1.18rem; letter-spacing: -0.01em; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 0.95rem; }
.card ul {
  margin-top: 16px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card ul li {
  font-size: 0.9rem;
  color: var(--muted);
  padding-left: 24px;
  position: relative;
}
.card ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--steel);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center / contain no-repeat;
}

/* Karten-/Textlinks („Mehr ansehen →") — bisher ohne eigene Regel */
.link {
  color: var(--steel);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
}
a.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Industries chips ---------- */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.chip {
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
a.chip { color: var(--ink); text-decoration: none; }
a.chip:hover { color: var(--accent); border-color: var(--steel); }
.buchen-chips { justify-content: center; max-width: 640px; margin: 0 auto 26px; }

/* ---------- Process ---------- */

.process-step { position: relative; padding: 30px 26px; }
/* Die Nummern sind eine echte Abfolge (so läuft jedes Projekt) —
   als schlichte Ziffer gesetzt, nicht als farbiger App-Kreis. */
.process-step .step-status {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin-bottom: 14px;
}
.process-step .step-num {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--steel);
  font-variant-numeric: tabular-nums;
}
.process-step .step-payment {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}
.process-step h3 { font-size: 1.05rem; margin-bottom: 8px; }
.process-step p { color: var(--muted); font-size: 0.9rem; }

/* ---------- Portfolio ---------- */
/* Markenfarben bleiben als Fallback hinter dem Preview-Bild */
.portfolio-body .tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 10px;
}
.portfolio-body .link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
}

/* ---------- Spotlight (hervorgehobenes Projekt) ----------
   Eine Kachel im Raster wird dem stärksten Projekt nicht gerecht: zu klein
   für den Screenshot, zu wenig Platz für das, was daran besonders ist.
   Das Spotlight nimmt deshalb die volle Breite über dem Raster ein — großer
   Shot links, Begründung rechts. */

.spotlight {
  position: relative;
  overflow: hidden;
  padding: 0;
  margin-bottom: 28px;
  display: grid;
  /* Der Shot bekommt die breitere Spalte: bei diesem Verhältnis deckt sich
     seine natürliche Höhe fast mit der Textspalte, der Zuschnitt bleibt
     dadurch minimal. */
  grid-template-columns: 1.35fr 1fr;
  align-items: stretch;
  transition: transform 0.35s, box-shadow 0.35s, background 0.3s, border-color 0.3s;
}
.spotlight:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
/* Akzentkante oben markiert die Kachel als hervorgehoben, ohne Farbe zu
   erfinden, die es im Designsystem nicht gibt. */
.spotlight::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  z-index: 2;
}

/* Der Shot läuft über die volle Spaltenbreite und behält seine Proportion —
   zugeschnitten wird nur unten. Ein Beschnitt an den Seiten würde genau das
   köpfen, was die Kachel zeigen soll: Logo, Überschrift, Aktionsschaltfläche.
   Ist die Textspalte höher als der Shot, füllt der Papierton der gezeigten
   Website den Rest und das Bild läuft weich darin aus. */
.spotlight-media {
  position: relative;
  display: block;
  overflow: hidden;
  background: #f6f2ea;
  border-right: 1px solid var(--border);
}
.spotlight-media img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: top center;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.spotlight:hover .spotlight-media img { transform: scale(1.04); }
.spotlight-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 96px;
  background: linear-gradient(to bottom, rgba(246, 242, 234, 0), #f6f2ea 78%);
  pointer-events: none;
}
/* Unten links statt oben links: oben sitzt im Screenshot das Logo des Kunden,
   und das deckt man in der eigenen Referenz nicht zu. */
.spotlight-badge {
  position: absolute;
  bottom: 18px; left: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: var(--shadow);
}
.spotlight-badge::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.spotlight-body { padding: 38px 36px 34px; display: flex; flex-direction: column; }
.spotlight-body .tag {
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 14px;
}
.spotlight-body h3 {
  font-family: var(--font-display);
  font-weight: 690;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  letter-spacing: -0.03em;
  line-height: 1.18;
  margin-bottom: 10px;
}
.spotlight-lede { color: var(--muted); font-size: 0.98rem; margin-bottom: 18px; }
.spotlight-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 24px;
}
.spotlight-points li {
  font-size: 0.9rem;
  color: var(--muted);
  padding-left: 26px;
  position: relative;
}
.spotlight-points li strong { color: var(--ink); font-weight: 650; }
.spotlight-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--steel);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center / contain no-repeat;
}
.spotlight-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.spotlight-actions .btn { font-size: 0.9rem; padding: 12px 22px; }

@media (max-width: 900px) {
  .spotlight { grid-template-columns: 1fr; }
  .spotlight-media {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .spotlight-media::after { display: none; }   /* gestapelt endet der Shot ohnehin an der Kante */
  .spotlight-body { padding: 30px 26px 28px; }
}
@media (max-width: 480px) {
  .spotlight-actions .btn { width: 100%; }
}

/* ---------- Pricing teaser ---------- */
.price-card .price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.2rem;
  letter-spacing: -0.035em;
  margin: 10px 0 4px;
  font-variant-numeric: lining-nums tabular-nums;
}
.price-card .per { font-size: 0.85rem; color: var(--muted); margin-bottom: 18px; }

.price-cta {
  margin-top: 28px;
  padding: 44px 36px;
  text-align: center;
}
.price-cta h3 { font-family: var(--font-display); font-weight: 690; font-size: 1.55rem; letter-spacing: -0.03em; margin-bottom: 10px; }
.price-cta p { color: var(--muted); max-width: 520px; margin: 0 auto 24px; }

/* ---------- Team ---------- */
/* Long single words (DE names/roles) wrap inside the card instead of pushing
   it wider — keeps both languages within the same footprint. */
/* Badge ohne Silbentrennung — „GESCHÄFTSFÜH-RUNG" sah abgebrochen aus */
/* Initialen im dünnen Ring statt Farbverlaufs-Blase. */

/* ---------- Contact / footer ---------- */

/* Der Abschluss der Seite trägt das Logo-Navy — eine ruhige,
   vollflächige Karte ohne Deko. */
.contact-card {
  position: relative;
  overflow: hidden;
  padding: 60px 40px;
  text-align: center;
  background: #0d2a55;
  border-color: #0d2a55;
}
.contact-card h2 {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.65rem, 3.2vw, 2.2rem);
  letter-spacing: -0.03em;
  color: #ffffff;
  margin-bottom: 12px;
}
.contact-card p { position: relative; z-index: 1; color: rgba(246, 246, 243, 0.75); max-width: 540px; margin: 0 auto 28px; }
.contact-card > div { position: relative; z-index: 1; }
.contact-card .btn-primary { background: #f6f6f3; color: #0d2a55; }
.contact-card .btn-primary:hover { background: #ffffff; }
.contact-meta {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 30px;
  font-size: 0.92rem;
  color: rgba(246, 246, 243, 0.62);
}
.contact-meta a { color: #ffffff; font-weight: 600; text-decoration: none; }
html[data-theme="dark"] .contact-card { background: #10213f; border-color: var(--border); }
/* Mobil: den fixierten „Nach-oben"-Button (unten links) nicht über die
   Footer-Links legen — sonst verdeckt/stiehlt er den Klick auf „Impressum". */

/* ---------- Scroll reveal ---------- */

/* Ein einziges, dezentes Einblenden — keine Flugrichtungen, kein Zoom. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Price calculator (quiz)
   ============================================================ */

.quiz-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 170px 24px 96px;
}
.quiz-header { text-align: center; margin-bottom: 34px; }
.quiz-header h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.85rem, 4.3vw, 2.5rem);
  letter-spacing: -0.035em;
  margin-bottom: 10px;
}
.quiz-header p { color: var(--muted); }

.quiz-progress {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--track);
  overflow: hidden;
  margin-bottom: 12px;
}
.quiz-progress .bar {
  height: 100%;
  width: 0%;
  border-radius: var(--radius-pill);
  background: var(--accent);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.quiz-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 22px;
}

.quiz-stage {
  position: relative;
  min-height: 480px;
}

.q-card {
  position: absolute;
  inset: 0 0 auto 0;
  padding: 38px 34px;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.3s ease, border-color 0.3s ease;
}
.q-card.enter-right { transform: translateX(80px); opacity: 0; }
.q-card.enter-left  { transform: translateX(-80px); opacity: 0; }
.q-card.exit-left   { transform: translateX(-80px); opacity: 0; pointer-events: none; }
.q-card.exit-right  { transform: translateX(80px); opacity: 0; pointer-events: none; }

.q-card h2 {
  font-size: 1.35rem;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}
.q-card .q-hint { font-size: 0.88rem; color: var(--muted); margin-bottom: 24px; }

.q-options { display: flex; flex-direction: column; gap: 12px; }
.q-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  cursor: pointer;
  transition: transform 0.25s, border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.q-option:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
.q-option.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.q-option .check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  transition: all 0.25s;
}
.q-option.selected .check {
  border-color: var(--accent);
  background: var(--accent);
}
.q-option.selected .check::after {
  content: "";
  width: 10px; height: 10px;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center / contain no-repeat;
  background: var(--on-accent);
}

.q-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
}
.q-back {
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  transition: background 0.25s, color 0.25s;
}
.q-back:hover { background: var(--track); color: var(--ink); }
.q-back[disabled] { opacity: 0; pointer-events: none; }

/* ---------- Result ---------- */

.result-prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 26px 0;
}
.result-prices.single { grid-template-columns: 1fr; }
.result-price-tile {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px 22px;
  text-align: center;
}
.result-price-tile .label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.result-price-tile .value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: -0.03em;
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
}
.result-price-tile .unit { font-size: 0.82rem; color: var(--muted); margin-top: 4px; }

.result-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.result-summary .pill {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
}
.result-note {
  font-size: 0.84rem;
  color: var(--muted);
  margin-bottom: 26px;
}
.result-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* Online-Direktbuchung: 10-%-Rabatt-Box im Ergebnis */
.online-deal {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 20px;
  padding: 18px 20px;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.online-deal .deal-badge {
  flex-shrink: 0;
  font-weight: 800;
  font-size: 1rem;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
}
.online-deal .deal-body { flex: 1; min-width: 220px; }
.online-deal .deal-title { font-weight: 700; }
.online-deal .deal-text {
  color: var(--muted);
  font-size: 0.86rem;
  margin-top: 3px;
}
.online-deal .deal-price { margin-top: 8px; font-size: 0.95rem; }
.online-deal .deal-price s { color: var(--muted); }
.online-deal .deal-price strong {
  color: var(--accent);
  font-size: 1.15rem;
  margin-left: 8px;
}
.online-deal .deal-cta { white-space: nowrap; }
@media (max-width: 640px) {
  .online-deal .deal-cta { width: 100%; justify-content: center; display: inline-flex; }
}

/* Fertige-Vorlage-Angebot im Preisrechner-Ergebnis (Handyshop/Lokal) */
.template-offer { margin-top: 14px; border-style: dashed; }
.template-offer .deal-badge { background: color-mix(in srgb, #22c55e 18%, transparent); color: #16a34a; }
.template-offer .deal-price strong { margin-left: 0; }
.template-ctas { margin-top: 4px; flex-wrap: wrap; }
.template-ctas .btn { flex: 1 1 auto; }

/* ---------- WhatsApp chat widget ---------- */

.wa-widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  /* Der unsichtbare Container überspannt Popup + FAB und darf darunterliegende
     Buttons/Links nicht blockieren — klickbar sind nur FAB und offenes Popup. */
  pointer-events: none;
}
.wa-popup.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity 0.3s, transform 0.3s, visibility 0s 0s, background 0.3s ease, border-color 0.3s ease; }

/* ---------- Page hero (subpages) ---------- */

.page-hero {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 180px 24px 0;
  /* Linksbündig wie der Startseiten-Hero: vorher war die Startseite links
     und alle 15 Unterseiten zentriert — beim Blättern fiel der Wechsel auf. */
  text-align: left;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 3rem);
  letter-spacing: -0.038em;
  line-height: 1.1;
  margin-bottom: 16px;
}
.page-hero p { color: var(--muted); font-size: 1.1rem; max-width: 600px; margin: 0; }

/* ---------- Header-Logo (dreht sich beim Hover) ---------- */

/* ---------- Angebots-Formular (Preisrechner) ---------- */

.offer-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* pin the column so a wide control can't blow it past the card */
  gap: 18px;
  margin: 22px 0 6px;
  text-align: left;
}
.q-field {
  display: grid;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
}
.q-field[hidden] { display: none !important; }
.q-field input,
.q-field textarea {
  font: inherit;
  font-weight: 500;
  color: var(--ink);
  background: var(--track);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  outline: none;
  resize: vertical;
  width: 100%;      /* fill the field, never the control's intrinsic size */
  min-width: 0;     /* let it shrink below content width on narrow screens */
  transition: border-color 0.2s ease, background 0.2s ease;
}
.q-field input::placeholder,
.q-field textarea::placeholder { color: var(--muted); opacity: 0.7; }
.q-field input:focus,
.q-field textarea:focus { border-color: var(--accent); }
.q-field input.invalid,
.q-field textarea.invalid { border-color: #e5484d; }
.q-error {
  display: none;
  color: #e5484d;
  font-size: 0.9rem;
  margin: 12px 0 0;
}
.q-error.show { display: block; }

/* Leere/ungültige Pflichtfelder nach Absende-Versuch sichtbar machen */

/* ---------- Zufriedenheitsgarantie-Badge ---------- */

/* ---------- Erfolgs-Karte nach Absenden ---------- */
.q-card.success { text-align: center; }
.success-icon {
  width: 66px;
  height: 66px;
  margin: 6px auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
}
.success-icon svg { width: 34px; height: 34px; stroke: var(--accent); fill: none; }

/* ---------- Responsive ---------- */

/* The full 6-item nav only fits comfortably on wide screens; below that the
   hamburger menu (which carries every link) takes over. */
@media (max-width: 1240px) {
  .nav-toggle { display: flex; }
}
@media (max-width: 980px) {
  /* Unter dieser Breite bleibt für zwei Spalten zu wenig übrig: der Satz
     steht dann oben, die Arbeitsproben darunter. */
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 130px; }
}
@media (max-width: 960px) {
  .cols-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  /* Die festen Zeilenumbrüche in den Überschriften sind für breite Schirme
     gesetzt; am Handy zerhacken sie den Satz ("Webdesign aus / Wien — /
     Websites, die …"). Dort bricht der Text besser von selbst um. */
  .hero h1 br, .page-hero h1 br, .quiz-header h1 br { display: none; }
  .cols-3, .cols-2 { grid-template-columns: 1fr; }
  .hero { padding-top: 120px; gap: 32px; }
  /* Am Handy wären drei gestapelte Seiten zu klein zum Erkennen — dort
     steht die aufwendigste Arbeit allein und in voller Breite. */
  .section { padding-top: 72px; }
  .brand > span:last-child { display: none; }
  .header-actions .btn { display: none; }
  .theme-toggle, .nav-toggle { width: 36px; height: 36px; }
  .q-card { padding: 28px 22px; }
  .result-prices { grid-template-columns: 1fr; }
  .quiz-stage { min-height: 560px; }
}

/* ---------- Termin buchen (booking form) ---------- */
.booking-grid .full { grid-column: 1 / -1; }
.q-field select {
  font: inherit;
  font-weight: 500;
  color: var(--ink);
  background: var(--track);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  outline: none;
  width: 100%;   /* a long <option> must not stretch the select past its column */
  min-width: 0;
  transition: border-color 0.2s ease;
}
.q-field select:focus { border-color: var(--accent); }

/* ---------- Legal pages (Impressum / Datenschutz / AGB) ---------- */
.legal { max-width: 780px; margin: 0 auto; padding: 34px 34px 30px; text-align: left; }
.legal h2 { font-size: 1.2rem; margin: 30px 0 8px; }
.legal h2:first-of-type { margin-top: 4px; }
.legal p, .legal li { color: var(--muted); line-height: 1.75; }
.legal ul { margin: 8px 0 10px 20px; }
.legal a { color: var(--accent); }
.legal strong { color: var(--ink); }
.legal .legal-meta { font-size: 0.9rem; margin-top: 6px; }
.legal-back { display: inline-block; margin-top: 28px; color: var(--accent); font-weight: 600; text-decoration: none; }
.legal-back:hover { text-decoration: underline; }

/* ============================================================
   Kundenbereich (Client area)
   ============================================================ */
.portal { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
/* The attribute [hidden] must win over .btn/.section display rules inside the portal */
.portal [hidden], .portal-modal-overlay[hidden], .portal-modal [hidden] { display: none !important; }
.portal .page-hero { padding-left: 0; padding-right: 0; }

/* ---------- Login ---------- */
#loginForm .btn-primary { width: 100%; margin-top: 4px; }

/* ---------- Dashboard ---------- */
.portal-tab.active { color: var(--accent); background: var(--accent-soft); border-color: var(--border); }
.panel-empty { color: var(--muted); text-align: center; padding: 44px 10px; border: 1px dashed var(--border); border-radius: var(--radius-md); }

/* Karten-Grid */

/* Info-Formular */
.info-form .full { grid-column: 1 / -1; }
.info-form .btn { grid-column: 1 / -1; justify-self: start; }

/* Konto */

/* Veröffentlichen-Leiste */

/* Checkbox */
.q-check { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.92rem; cursor: pointer; }
.q-check input { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; }

/* Karten-Editor (Modal) */
.portal-modal-overlay.open { opacity: 1; }
.portal-modal-overlay.open .portal-modal { transform: none; }

/* Toast */
.portal-toast.show { opacity: 1; transform: translate(-50%, 0); }
.portal-toast.error { background: #e5484d; color: #fff; }
@media (max-width: 560px) {
  .portal-publishbar .btn { width: 100%; }
}

/* ============================================================
   Verhalten beim Scrollen (js/effects.js) — bewusst wenig.
   ============================================================ */

/* ---------- Header beim Scrollen: nur ein leiser Schatten ---------- */
.site-header.scrolled { box-shadow: 0 10px 30px rgba(13, 42, 85, 0.07); }
html[data-theme="dark"] .site-header.scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }

.page-hero, .quiz-wrap { position: relative; }

/* ---------- Schlichter „Nach oben"-Knopf ---------- */
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }

/* ============================================================
   Kundenbereich — Projekt-Portal
   ============================================================ */

/* ---------- Auth: Login/Registrierung umschalten ---------- */
.q-note { font-size: 0.86rem; color: var(--muted); }

/* ---------- Projekt-Kopf + Status ---------- */
.status-badge.progress { background: var(--accent-soft); color: var(--accent); }
.status-badge.live { background: rgba(34, 197, 94, 0.15); color: #16a34a; }

/* ---------- Fortschritts-Stepper ---------- */
.step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; padding: 0 3px; }
.step::before {
  content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px;
  background: var(--border); z-index: 0;
}
.step:first-child::before { display: none; }
.step.done::before, .step.current::before { background: var(--accent); }
.step.done .step-dot { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.step.current .step-dot { background: var(--surface); color: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.step.current .step-label, .step.done .step-label { color: var(--ink); }
@media (max-width: 560px) {
  .step { flex-direction: row; align-items: center; gap: 12px; text-align: left; padding: 5px 0; }
  .step::before { top: -50%; left: 15px; width: 2px; height: 100%; }
}

/* ---------- Nächster Schritt + Support-Zeile ---------- */

/* ---------- Admin-Steuerung ---------- */

/* ---------- Kontingent-Banner ---------- */

/* ---------- Formulare (Änderungen / Marketing) ---------- */

/* ---------- Anfrage-/Aufgaben-Liste ---------- */

/* ---------- Status-Chips (nur Kundenbereich — nicht die Pillen der Startseite,
   deren Basis-Stil oben bei „Industries chips" definiert ist) ---------- */
.portal .chip,
.portal-modal-overlay .chip {
  display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap;
}

/* ---------- Support-Karten ---------- */
.support-ico.wa { background: #25d366; color: #fff; }
.support-ico.mail { background: var(--accent-soft); color: var(--accent); }

/* ============================================================
   KI-Automatisierungen — Shop (ki-automatisierung.html)
   ============================================================ */
.ki-page { max-width: 1120px; margin: 0 auto; padding: 128px 20px 110px; }
.ki-page .page-hero { max-width: 760px; margin: 0 auto 30px; }

/* Bundle-Banner */
.ki-bundle {
  display: flex; align-items: center; gap: 16px; max-width: 900px; margin: 0 auto 40px;
  padding: 16px 20px; border-radius: var(--radius-lg); text-decoration: none; color: var(--on-accent);
  background: var(--accent);
  box-shadow: var(--shadow); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ki-bundle:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.ki-bundle-badge {
  flex-shrink: 0; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em;
  padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.2);
}
.ki-bundle-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ki-bundle-text strong { font-size: 0.98rem; line-height: 1.3; }
.ki-bundle-text small { font-size: 0.83rem; opacity: 0.9; }
.ki-bundle-cta { flex-shrink: 0; font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
@media (max-width: 620px) {
  .ki-bundle { flex-wrap: wrap; }
  .ki-bundle-cta { width: 100%; }
}

/* Katalog */
.ki-cat { margin-bottom: 40px; }
.ki-cat-title {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.ki-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.ki-card {
  display: flex; flex-direction: column; min-width: 0; padding: 22px 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ki-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.ki-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow); }
.ki-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ki-emoji { font-size: 1.6rem; line-height: 1; filter: grayscale(1); opacity: 0.72; }
.ki-card h3 { font-size: 1rem; letter-spacing: -0.01em; margin-bottom: 6px; }
.ki-card > p { font-size: 0.88rem; color: var(--muted); line-height: 1.5; margin-bottom: 16px; flex: 1; }
.ki-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ki-add {
  flex-shrink: 0; border: 1px solid var(--accent); background: transparent; color: var(--accent);
  font: inherit; font-size: 0.82rem; font-weight: 700; padding: 8px 14px; border-radius: var(--radius-pill);
  cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
}
.ki-add:hover { background: var(--accent-soft); }
.ki-card.selected .ki-add { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* Warenkorb / Anfrage */
.ki-cart { max-width: 720px; margin: 46px auto 0; padding: 28px 26px; }
.ki-cart > h2 { font-size: 1.2rem; letter-spacing: -0.015em; margin-bottom: 16px; }
.ki-cart-list { display: grid; gap: 8px; }
.ki-cart-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--track); border: 1px solid var(--border); border-radius: var(--radius-md); }
.ki-cart-emoji { font-size: 1.1rem; flex-shrink: 0; }
.ki-cart-name { flex: 1; min-width: 0; font-weight: 600; font-size: 0.92rem; overflow-wrap: anywhere; }
.ki-cart-price { font-size: 0.82rem; color: var(--muted); white-space: nowrap; }
.ki-cart-remove { flex-shrink: 0; border: none; background: transparent; color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 6px; }
.ki-cart-remove:hover { color: #dc2626; }
.ki-cart-sums { margin: 16px 0 6px; padding: 14px 16px; background: var(--accent-soft); border-radius: var(--radius-md); }
.ki-sum-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.95rem; }
.ki-sum-row + .ki-sum-row { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.ki-sum-row strong { font-size: 1.05rem; }

.ki-form { margin-top: 22px; }
.ki-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
@media (max-width: 560px) { .ki-form-grid { grid-template-columns: 1fr; } }
.ki-form .q-field.full { display: block; margin-bottom: 14px; }
.ki-form #kiSubmit { width: 100%; justify-content: center; }
.ki-form #kiSubmit:disabled { opacity: 0.5; cursor: not-allowed; }
.ki-form-note { margin-top: 12px; font-size: 0.82rem; color: var(--muted); text-align: center; }

/* Sticky Warenkorb-Leiste */
.ki-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 90;
  display: flex; align-items: center; gap: 16px; width: min(680px, calc(100% - 28px));
  padding: 12px 16px; border-radius: var(--radius-pill);
}
.ki-bar-info { flex: 1; min-width: 0; font-size: 0.86rem; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
/* Solange die Leiste sichtbar ist, braucht der Footer Freiraum, damit
   Impressum/Datenschutz/AGB nicht verdeckt und unklickbar sind. */
.ki-bar:not([hidden]) ~ .site-footer { padding-bottom: 104px; }
/* Mobil: Platz für den WhatsApp-Button rechts lassen, sonst verdeckt er den CTA */
@media (max-width: 640px) {
  .ki-bar { left: 14px; transform: none; width: calc(100% - 96px); }
}
@media (max-width: 480px) { .ki-bar-info { font-size: 0.78rem; } .ki-bar { bottom: 12px; } }

/* KI-Zubuchung im Website-Wizard (website-buchen.html, Review-Schritt) */

/* ============================================================
   Website-Vorlagen (vorlagen.html)
   ============================================================ */
.vorlagen-page .page-hero { max-width: 720px; margin: 0 auto 34px; }

/* So funktioniert's */

/* Galerie */

/* Konditionen */

/* Bestellformular */
.vg-order .q-field.full { display: block; margin-bottom: 14px; }

/* ============================================================
   Custom Dropdown (js/main.js) — ersetzt das OS-native
   <select>-Popup, das sich (v.a. unter Windows) nicht stylen
   lässt. Das <select> selbst bleibt sichtbares, fokussierbares
   Steuerelement; nur die aufgeklappte Liste ist ein eigenes,
   themen-konformes Panel.
   ============================================================ */

select:not([multiple]):not([size]) {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6678' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 15px;
  padding-right: 40px;
  cursor: pointer;
}
html[data-theme="dark"] select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2399a1b5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
select.dd-open { border-color: var(--accent) !important; }

.dd-menu {
  position: absolute;
  z-index: 1200;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hover);
  padding: 6px;
  max-height: 290px;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.dd-menu.show { opacity: 1; transform: translateY(0); }
.dd-menu.up { transform: translateY(6px); }
.dd-menu.up.show { transform: translateY(0); }
.dd-menu::-webkit-scrollbar { width: 8px; }
.dd-menu::-webkit-scrollbar-thumb { background: var(--track); border-radius: var(--radius-pill); }
.dd-menu::-webkit-scrollbar-track { background: transparent; }

.dd-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 11px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.dd-opt.hl { background: var(--accent-soft); color: var(--accent); }
.dd-opt[aria-selected="true"] { color: var(--accent); font-weight: 700; }
.dd-opt[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.dd-opt .dd-tick { flex-shrink: 0; width: 16px; height: 16px; stroke: currentColor; opacity: 0; }
.dd-opt[aria-selected="true"] .dd-tick { opacity: 1; }

/* ---------- Custom Datums-/Zeit-Picker ---------- */
/* Natives OS-Popup unterdrücken, eigenes Icon im Feld zeigen */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { display: none; }
input[type="date"], input[type="time"] {
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px 18px; padding-right: 40px;
}
input[type="date"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
input[type="time"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
html[data-theme="dark"] input[type="date"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2399a1b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
html[data-theme="dark"] input[type="time"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2399a1b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
input.dp-open { border-color: var(--accent) !important; }

.dp-menu {
  position: absolute; z-index: 1200;
  background: var(--surface-strong); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-hover);
  padding: 12px; opacity: 0; transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.dp-menu.show { opacity: 1; transform: translateY(0); }
.dp-menu.up { transform: translateY(6px); }
.dp-menu.up.show { transform: translateY(0); }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dp-title { font-weight: 700; font-size: 0.98rem; }
.dp-nav { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border); background: var(--track); color: var(--ink); font-size: 1.15rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.dp-nav:hover { border-color: var(--accent); color: var(--accent); }
.dp-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.dp-dow span { text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--muted); padding: 4px 0; }
.dp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-day { border: none; background: transparent; color: var(--ink); font: inherit; font-size: 0.9rem; aspect-ratio: 1; border-radius: 9px; cursor: pointer; display: grid; place-items: center; }
.dp-day:hover:not(.dis) { background: var(--accent-soft); color: var(--accent); }
.dp-day.today { font-weight: 700; box-shadow: inset 0 0 0 1px var(--border); }
.dp-day.hl:not(.sel) { background: var(--accent-soft); color: var(--accent); }
.dp-day.sel { background: var(--accent); color: #fff; font-weight: 700; }
.dp-day.dis { opacity: 0.32; cursor: default; }
.dp-times { max-height: 264px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 2px; min-width: 148px; }
.dp-times::-webkit-scrollbar { width: 8px; }
.dp-times::-webkit-scrollbar-thumb { background: var(--track); border-radius: var(--radius-pill); }
.dp-slot { padding: 9px 16px; border-radius: 10px; font-size: 0.92rem; color: var(--ink); cursor: pointer; text-align: center; user-select: none; -webkit-user-select: none; }
.dp-slot:hover, .dp-slot.hl { background: var(--accent-soft); color: var(--accent); }
.dp-slot.sel { background: var(--accent); color: #fff; font-weight: 700; }

/* ============================================================
   Portal: Nachrichten (Chat Team ↔ Kunde) + Anfragen-Eingang
   ============================================================ */
.msg-bubble.me {
  align-self: flex-end;
  background: var(--accent-soft);
  border-color: transparent;
}
.msg-bubble.them { align-self: flex-start; }

/* Anfragen-Eingang (Admin) */

/* ============================================================
   Leistungsseiten (Landingpages) + FAQ
   ------------------------------------------------------------
   Bausteine für die Seiten, die auf einzelne Suchanfragen
   antworten ("Website erstellen lassen", "Webdesign Wien" …).
   Nutzt die vorhandenen Karten-/Glass-Stile weiter, ergänzt nur
   Fließtext, Häkchenlisten, Preistabelle und das FAQ-Akkordeon.
   ============================================================ */

/* ---------- Fließtext ---------- */
.lp-prose { max-width: 760px; margin: 0; color: var(--muted); font-size: 1.02rem; line-height: 1.72; }
.lp-prose > * + * { margin-top: 16px; }
.lp-prose h2 { color: var(--ink); font-size: clamp(1.35rem, 3vw, 1.8rem); letter-spacing: -0.02em; margin-top: 34px; }
.lp-prose h3 { color: var(--ink); font-size: 1.12rem; margin-top: 26px; }
.lp-prose strong { color: var(--ink); }
.lp-prose a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-soft); }
.lp-prose a:hover { border-bottom-color: var(--accent); }

/* ---------- Häkchenliste ---------- */
.lp-check { list-style: none; display: grid; gap: 11px; margin: 0; padding: 0; }
.lp-check li { position: relative; padding-left: 30px; color: var(--muted); line-height: 1.6; }
.lp-check li::before {
  /* Dasselbe Häkchen wie in den Karten der Startseite. Vorher aus zwei
     Rändern gebaut (border-left + border-bottom, gedreht) — daraus wurde
     nie ein Haken, sondern ein Winkel; auf acht Seiten sichtbar. */
  content: ""; position: absolute; left: 0; top: 0.34em;
  width: 15px; height: 15px;
  background: var(--steel);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center / contain no-repeat;
}
.lp-check li strong { color: var(--ink); }

/* ---------- Preiszeilen ---------- */
.lp-table { display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.lp-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 15px 18px; align-items: baseline; }
.lp-row + .lp-row { border-top: 1px solid var(--border); }
.lp-row span { color: var(--muted); font-size: 0.95rem; }
.lp-row strong { color: var(--ink); white-space: nowrap; font-size: 1rem; }
.lp-row-head { background: var(--track); }
.lp-row-head span, .lp-row-head strong { color: var(--ink); font-weight: 700; }

/* Auf schmalen Schirmen bleibt für die Beschreibung sonst kaum Platz: Der
   Preis darf nicht umbrechen und nimmt sich seine Breite, die Beschreibung
   wird auf 150 px gequetscht und die Zeile dadurch dreimal so hoch. Unter
   560 px steht der Preis deshalb unter der Beschreibung statt daneben. */
@media (max-width: 560px) {
  .lp-row { grid-template-columns: 1fr; gap: 6px; }
  .lp-row strong { font-size: 1.05rem; }
  .lp-row-head { display: none; }
}

/* ---------- FAQ-Akkordeon ----------
   Die Fragen stehen sichtbar im Markup — der Build liest genau
   diesen Text aus und erzeugt daraus das FAQ-Schema. Wer hier
   Fragen ändert, ändert automatisch auch die Auszeichnung mit. */
.faq-list { display: grid; gap: 12px; max-width: 820px; margin: 0 auto; }
.faq-item {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); padding: 0 20px; transition: border-color 0.25s ease;
}
.faq-item[open] { border-color: var(--steel); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 17px 0; font-weight: 650;
  color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex-shrink: 0; width: 9px; height: 9px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px); transition: transform 0.25s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq-item p { color: var(--muted); line-height: 1.7; padding: 0 0 18px; margin: 0; font-size: 0.97rem; }
.faq-item p + p { padding-top: 0; margin-top: -6px; }
.faq-item a { color: var(--accent); text-decoration: none; }

/* ---------- Ortsbezug unter dem Titel ---------- */
.lp-local {
  display: flex; align-items: flex-start; justify-content: flex-start;
  gap: 7px; margin: 0 0 14px; max-width: 480px; text-align: left;
  color: var(--muted); font-size: 0.88rem;
}
.lp-local svg {
  width: 15px; height: 15px; flex-shrink: 0; margin-top: 0.28em;
  stroke: var(--accent); fill: none; stroke-width: 2;
}

/* ---------- Footer mit Leistungs-Spalten ----------
   Verteilt die interne Verlinkung auf jede Seite: Suchmaschinen
   folgen den Links von überall, Besucher finden die passende
   Leistung ohne Umweg über die Startseite. */

/* Hinweis im Impressum (Gründungsstatus) — abgesetzt, damit er als
   rechtlicher Hinweis erkennbar ist und nicht wie Fließtext wirkt. */
.legal-note {
  border-left: 3px solid var(--accent);
  padding: 12px 0 12px 16px;
  margin: 18px 0;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.65;
  background: var(--accent-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}