/* Selbst gehostete Schriften statt Google Fonts CDN — vermeidet die
   Übertragung der Besucher-IP an Google bei jedem Seitenaufruf.

   Satoshi (Fontshare, kostenlos auch für kommerzielle Nutzung, Variable
   Font mit eigenem Kursiv-Schnitt) trägt Überschriften, Fließtext und UI.
   Der echte Kursiv-Schnitt ist wichtig, weil der rotierende Teil der
   Hero-Überschrift kursiv gesetzt ist: ohne ihn würde der Browser die
   Schrägstellung nur rechnerisch erzeugen, was an großen Schriftgraden
   sichtbar schlechter aussieht.

   Montserrat bleibt als direkter Rückfall in der Schriftfamilien-Liste, weil
   der Logo-Schriftzug in dieser Form gezeichnet ist. */
@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/satoshi-variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/satoshi-variable-italic.woff2') format('woff2');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/montserrat-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Schwarz als Grundton (explizite Vorgabe), Blau-Verlauf aus dem echten
     Logo entnommen (Pixel-Sampling): helles Glanzblau #e3b341 für Text/
     Icons/Links auf Schwarz (6.5:1 Kontrast), dunkleres Blau #9a7324 für
     Flächen mit weißer Schrift darauf (Buttons). Fläche/Karten sind einen
     Hauch heller als der Seitenhintergrund, sonst gäbe es auf Schwarz
     keine Tiefe. */
  /* Grundton ist neutrales Schwarz, nicht das frühere Dunkelblau. Die
     beiden Flächenwerte behalten nur noch eine kaum wahrnehmbare kühle
     Spur (Blau drei Stufen über Rot), damit Karten sich vom Grund abheben,
     ohne dass wieder ein Blaustich entsteht. */
  --bg: #000000;
  --surface: #0d0d10;
  --surface-raised: #17171b;
  --text: #f5f7fa;
  --text-muted: #99a2b5;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --brand: #e3b341;
  --brand-strong: #9a7324;
  --brand-dim: rgba(227, 179, 65, 0.14);
  --brand-glow: rgba(227, 179, 65, 0.35);
  /* Das Material, fuenf Stufen wie im Logo. Waagerecht und doppelt breit,
     damit der Glanz wandern kann, ohne dass die Flaeche ihre Farbe verliert. */
  --gold-sheen: linear-gradient(100deg,
    #9a6a18 0%, #c9972f 14%, #f3dc8c 24%, #fff6dd 30%, #f3dc8c 36%,
    #d9ab42 48%, #a8741d 62%, #c9972f 80%, #9a6a18 100%);
  /* Das Silber der Wortmarke TEMPUS aus der Logodatei, in denselben Stufen
     waagerecht: #ACB2B9 ueber #EAEBEF nach #FEFEFE. */
  --silber-sheen: linear-gradient(100deg,
    #acb2b9 0%, #d7dade 16%, #eaebef 28%, #fefefe 38%, #f2f3f6 50%,
    #dcdfe4 64%, #b9bfc7 82%, #acb2b9 100%);
  /* Gold auf hellem Grund. Der normale Verlauf ist dort unbrauchbar: sein
     helles Ende (#fff6dd) kommt auf Weiss auf 1,1:1. Diese Fassung bleibt
     zwischen #6e4c13 und #b07f20, also zwischen 6,9:1 und 3,6:1. */
  --gold-sheen-hell: linear-gradient(100deg,
    #6e4c13 0%, #8a6520 22%, #b07f20 48%, #96691c 72%, #6e4c13 100%);
  --font-body: 'Satoshi', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Satoshi', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
  --ok: #4ade80;
  --ok-bg: rgba(74, 222, 128, 0.12);
  --warn: #fbbf24;
  --warn-bg: rgba(251, 191, 36, 0.12);
  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, 0.12);
  --muted-badge: #8a93a3;
  --muted-badge-bg: rgba(255, 255, 255, 0.06);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Ein gemeinsamer Container für die ganze Seite, wie bei Webflow oder Wix
     Studio: --container ist die Inhaltsbreite, --gutter der Abstand zum
     Fensterrand. Header, Hero, Sektionen, Banner und Fußzeile richten sich
     alle danach aus, damit die linke Kante des Logos und die rechte Kante des
     Menüs exakt die Kanten des Inhalts darunter sind. Vorher benutzten diese
     fünf Bereiche fünf verschiedene Breiten. */
  --container: 1180px;
  --gutter: 32px;
  /* Maßstab des Phone-Mockups und die daraus folgende Höhe seines
     Platzhalters (624 px Grundhöhe mal Maßstab). Beides als Variable, damit
     es nur eine Quelle gibt: als getrennte Regeln überschrieb die
     Desktop-Höhe die Handy-Höhe, weil sie im Stylesheet später steht. */
  --phone-scale: 0.55;
  --phone-h: 344px;
  /* Button-System. Alle Schaltflächen teilen Radius, Bewegungsdauer und
     Fokus-Ring; sie unterscheiden sich nur in Größe und Farbe. Die Höhen
     liegen überall bei mindestens 44 Pixeln, dem Mindestmaß für ein sicher
     treffbares Ziel auf dem Touchscreen. */
  --btn-radius: 999px;
  --btn-dur: 0.18s;
  --btn-dur-press: 0.08s;
}

@media (max-width: 760px) {
  :root { --gutter: 24px; --phone-scale: 0.5; --phone-h: 260px; }
}

* { box-sizing: border-box; }

::selection { background: var(--brand); color: #050505; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .page-title {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: #f3d481; }

button, .btn { font-family: inherit; cursor: pointer; }

/* ---------- Scroll-Reveal (dezent: Inhalt kommt leicht von unten +
   Fade-in beim Scrollen; respektiert prefers-reduced-motion) ---------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Topbar ---------- */

/* Schwebende Leiste statt durchgehendem Band (Vorbild Majestic Marketing,
   Bens Vorgabe vom 20.10.2026).

   Der Trick steckt im Aussenmass: die Leiste zieht sich um genau ihre eigene
   Polsterung nach aussen, deshalb liegt die linke Kante des Logos exakt auf
   der Container-Kante des Inhalts darunter. Ohne diese Rechnung stuende das
   Logo um die Polsterung eingerueckt und die Hausregel zum Seitenraster waere
   verletzt. */
.topbar {
  --bar-pad: 10.5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  /* Das Logo steht 22 px hoch in einer 48 px hohen Zeile, die der Knopf
     rechts vorgibt. Oben und unten bleiben dadurch 13 px Polsterung plus
     13 px Zentrierung, zusammen 26 px. Damit links derselbe Abstand entsteht,
     bekommt die Leiste vorne 13 px mehr Polsterung und wird um genau diese
     13 px weiter nach aussen gezogen. Die Kante des Logos bleibt so auf der
     Container-Kante des Inhalts, nur der Rand der Leiste wandert. */
  --bar-lead: 8px;  /* 10,5 + 8 senkrecht, also auch links 8 Vorlauf */
  margin-left: max(
    calc(var(--gutter) - var(--bar-pad) - 1px - var(--bar-lead)),
    calc((100% - var(--container)) / 2 - var(--bar-pad) - 1px - var(--bar-lead))
  );
  margin-right: max(
    calc(var(--gutter) - var(--bar-pad) - 1px),
    calc((100% - var(--container)) / 2 - var(--bar-pad) - 1px)
  );
  padding: var(--bar-pad);
  padding-left: calc(var(--bar-pad) + var(--bar-lead));
  background: rgba(13, 13, 16, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  border-radius: 999px;
  position: sticky;
  top: 14px;
  z-index: 10;
}

.brand-header { margin: 0; display: flex; align-items: center; }
.brand-mark { display: inline-flex; align-items: center; gap: 10px; }
/* Kleiner als vorher (26 px), Bens Vorgabe. Mit 22 px bleibt die Uhr noch
   klar erkennbar, darunter verliert sie ihre Zeiger. */
.brand-mark-logo { height: 22px; width: auto; display: block; }
.brand-mark-suffix { font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; color: var(--text-muted); padding-left: 10px; border-left: 1px solid var(--border); margin-left: 2px; }

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

.topbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.nav-link {
  position: relative;
  padding: 8px 4px;
  margin: 0 10px;
  border-radius: 4px;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.92rem;
  transition: color 0.25s var(--ease);
}
/* Kein Unterstrich mehr (Bens Vorgabe 20.10.2026): beim Ueberfahren erscheint
   eine Umrandung wie bei einem Knopf, die geoeffnete Unterseite steht einfach
   in Weiss. Der Rahmen liegt schon unsichtbar an, sonst wuerde die Zeile beim
   Ueberfahren um zwei Pixel springen. */
.nav-link { border: 1px solid transparent; }
.topbar .nav-link:not(.nav-link-cta) { padding: 6px 16px; border-radius: 999px; }
.topbar .nav-link:not(.nav-link-cta) { isolation: isolate; }
/* Die geöffnete Seite läuft im Gold-Verlauf der Knöpfe, die übrigen im
   Silber der Wortmarke TEMPUS. Beide von links nach rechts, beide im selben
   Ausschnitt wie der Knopf: background-size 230 Prozent, Position 60. Beim
   Gold ist das Lesbarkeit und nicht Geschmack, denn der volle Verlauf läuft
   an beiden Enden ins Dunkle: sichtbar sind so #f3dc8c bis etwa #9f6e1a, auf
   Schwarz 13,5:1 bis 4,6:1, während das dunkle Ende (#9a6a18) bei 4,4:1 und
   damit unter der Grenze läge.

   background-clip: text gehört nur auf das Element, das den Text selbst
   trägt. Die Verweise enthalten genau einen Textknoten, deshalb ist es hier
   sicher; bei einer Überschrift mit Kindelementen entstünde Geisterschrift. */
.topbar .nav-link:not(.nav-link-cta) {
  background-image: var(--silber-sheen);
  background-size: 230% 100%;
  background-position: 60% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-position 650ms var(--ease), border-color 0.25s var(--ease);
}
/* Beim Überfahren wandert der Glanz einmal durch, genau wie beim Knopf. */
@media (hover: hover) {
  .topbar .nav-link:not(.nav-link-cta):hover { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .topbar .nav-link:not(.nav-link-cta) { transition: border-color 0.25s var(--ease); }
}
/* Blase: eine runde Fuellung, die aus der Mitte aufgeht. Innen am dichtesten,
   nach aussen laeuft sie weich aus, damit keine harte Kante entsteht. Sie
   liegt hinter dem Text (z-index -1 im eigenen Stapel), nicht darueber. */
.topbar .nav-link:not(.nav-link-cta)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(135% 155% at 50% 50%,
    rgba(255, 255, 255, 0.17) 0%,
    rgba(255, 255, 255, 0.08) 44%,
    rgba(255, 255, 255, 0.02) 76%,
    rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  transform: scale(0.68);
  transition: opacity 240ms var(--ease), transform 340ms var(--ease);
}
.topbar .nav-link:not(.nav-link-cta):hover {
  color: var(--text);
  text-decoration: none;
  border-color: rgba(255, 255, 255, 0.14);
}
.topbar .nav-link:not(.nav-link-cta):hover::before { opacity: 1; transform: scale(1); }
.topbar .nav-link:not(.nav-link-cta):active::before { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .topbar .nav-link:not(.nav-link-cta)::before { transition: opacity 240ms var(--ease); transform: none; }
  .topbar .nav-link:not(.nav-link-cta):hover::before,
  .topbar .nav-link:not(.nav-link-cta):active::before { transform: none; }
}
/* Die geoeffnete Seite steht im hellsten Stueck des Verlaufs statt in Weiss.
   Diese Regel muss hinter der Verlaufs-Regel stehen: gleiche Spezifitaet,
   also entscheidet die Reihenfolge. */
.topbar .nav-link.active:not(.nav-link-cta) {
  color: transparent;
  background-image: var(--gold-sheen);
  background-position: 36% 0;
}
.nav-link.active { color: var(--text); }
.nav-link-cta {
  /* Sichtbar 38 px hoch, antippbar bleiben 44. Die Untergrenze fuer eine
     Tippflaeche gilt fuer die Flaeche, nicht fuer das, was man sieht:
     ::before zieht sie unsichtbar drei Pixel nach oben und unten. So wird
     der Knopf flacher, ohne dass er auf dem Handy schwerer zu treffen ist. */
  position: relative;
  padding: 6px 24px;
  min-height: 38px;
  box-sizing: border-box;
  border-radius: var(--btn-radius);
  color: #140d02;
  background-image: var(--gold-sheen);
  background-size: 230% 100%;
  background-position: 60% 0;
  text-shadow: 0 1px 0 rgba(255, 248, 228, 0.35);
  font-weight: 600;
  /* .nav-link bringt margin: 0 10px mit. Rechts muss der Knopf buendig mit
     dem Inhalt abschliessen, deshalb hier ausdruecklich auf 0. */
  margin-left: 8px;
  margin-right: 0;
  transition: background var(--btn-dur) var(--ease), color var(--btn-dur) var(--ease), transform var(--btn-dur) var(--ease), box-shadow var(--btn-dur) var(--ease);
}
.nav-link-cta::after { content: none; }
.nav-link-cta::before { content: ''; position: absolute; inset: -3px 0; }
.nav-link-cta:hover { background-position: 0% 0; color: #140d02; transform: scale(1.04); }
.nav-link-cta:active {
  background-image: var(--gold-sheen);
  background-size: 230% 100%;
  background-position: 88% 0;
  background-color: transparent;
  color: #140d02;
  transform: scale(0.97);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45);
  transition-duration: var(--btn-dur-press);
}
/* Auf der geoeffneten Seite behaelt der Knopf das Material und steht nur im
   hellsten Stueck des Verlaufs. Vorher setzte hier die Kurzform "background"
   das Verlaufsbild zurueck, und der Knopf war flaches Gold. */
.nav-link-cta.active {
  color: #140d02;
  background-image: var(--gold-sheen);
  background-size: 230% 100%;
  background-position: 36% 0;
}

.nav-collapsible { display: contents; }
.nav-toggle {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  /* Sichtbar 38, antippbar 44, gleiche Rechnung wie beim Knopf daneben. */
  width: 38px;
  height: 38px;
  padding: 0;
  margin-left: 4px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  transition: border-color var(--btn-dur) var(--ease), background var(--btn-dur) var(--ease), color var(--btn-dur) var(--ease), transform var(--btn-dur) var(--ease);
}
.nav-toggle:hover { border-color: var(--brand); background: rgba(227, 179, 65, 0.18); color: #f3d481; }
.nav-toggle:active {
  border-color: transparent;
  background-image: var(--gold-sheen);
  background-size: 230% 100%;
  background-position: 88% 0;
  background-color: transparent;
  color: #140d02;
  transform: scale(0.94);
  transition-duration: var(--btn-dur-press);
}
.nav-toggle::before { content: ''; position: absolute; inset: -3px; }
.nav-toggle svg { width: 18px; height: 18px; }
@media (max-width: 700px) {
  .topbar { position: relative; border-radius: 24px; flex-wrap: nowrap; --bar-pad: 10px; --bar-lead: 6px; }
  /* Kleiner, sonst passt die Zeile aus Logo, Knopf und Menueknopf nicht in
     375 px und die Leiste bricht um. */
  .brand-mark-logo { height: 18px; }
  .nav-link-cta { padding: 6px 18px; margin-left: 0; }
  .topbar-actions { flex-wrap: nowrap; gap: 6px; }
  .topbar:has(.nav-collapsible.is-open) { border-radius: 26px 26px 0 0; }
  .nav-toggle { display: inline-flex; }
  .nav-collapsible {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: -1px;
    right: -1px;
    padding: 4px 20px 14px;
    /* Deckend, nicht glasig. Ein backdrop-filter im Kind einer Flaeche, die
       selbst schon einen hat, bleibt wirkungslos: die Ueberschrift der Hero
       schimmerte dadurch mitten durch das Menue. */
    background: #0a0a0c;
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 26px 26px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s var(--ease), opacity 0.25s var(--ease);
  }
  .nav-collapsible.is-open { max-height: 280px; opacity: 1; }
  .nav-collapsible .nav-link { margin: 0; padding: 12px 4px; border-bottom: 1px solid var(--border); }
  .nav-collapsible .nav-link:last-child { border-bottom: none; }
}

.admin-nav-actions .nav-link { padding: 8px 14px; margin: 0; border-radius: 999px; border: 1px solid var(--border); }
.admin-nav-actions .nav-link::after { content: none; }
.admin-nav-actions .nav-link:hover { border-color: var(--border-strong); }
.admin-nav-actions .nav-link.active { background: var(--surface-raised); color: var(--text); border-color: var(--border-strong); }

.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--brand);
  color: #050505;
  font-size: 0.7rem;
  font-weight: 700;
  margin-left: 2px;
}

.nav-form { display: inline; }
.link-btn {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  margin: 0;
  background: none;
  border: none;
  padding: 8px 12px;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--text-muted);
  border-radius: 999px;
  transition: color 0.2s var(--ease);
}
.link-btn:hover { color: var(--text); }

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

.main { max-width: 780px; margin: 0 auto; padding: 40px 20px 80px; }
.main-wide { max-width: 1180px; margin: 0 auto; padding: 40px 20px 80px; }

.page-title { font-size: 1.7rem; font-weight: 700; margin: 0 0 20px; }

/* ---------- Forms ---------- */

form label { display: block; font-weight: 600; margin: 16px 0 6px; font-size: 0.88rem; color: var(--text-muted); }

input:not([type]), input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="date"], input[type="datetime-local"],
input[type="month"], input[type="time"], input[type="url"], input[type="search"],
select, textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.98rem;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  accent-color: var(--brand);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}

textarea { resize: vertical; min-height: 90px; }

/* Datums- und Zeitfelder an die uebrigen Felder angleichen: identische Hoehe
   (box-sizing: border-box gilt global), sichtbares Auswahl-Symbol auf
   dunklem Grund. */
input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"] {
  height: 43px;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
  opacity: 0.7;
  cursor: pointer;
}

input::placeholder, textarea::placeholder { color: #626b7d; }

input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--surface-raised);
  box-shadow: 0 0 0 3px var(--brand-dim);
}

button[type="submit"]:not(.btn):not(.link-btn):not(.icon-btn), .btn-primary {
  margin-top: 20px;
  width: 100%;
  padding: 17px 24px;
  background-image: var(--gold-sheen);
  background-size: 230% 100%;
  background-position: 60% 0;
  color: #140d02;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1.02rem;
  transition: background var(--btn-dur) var(--ease), color var(--btn-dur) var(--ease), transform var(--btn-dur) var(--ease), box-shadow var(--btn-dur) var(--ease);
}
button[type="submit"]:not(.btn):not(.link-btn):not(.icon-btn):hover, .btn-primary:hover {
  background-position: 0% 0;
  color: #140d02;
  transform: scale(1.015);
  box-shadow: 0 0 30px -8px rgba(255, 255, 255, 0.35);
}
button[type="submit"]:not(.btn):not(.link-btn):not(.icon-btn):active, .btn-primary:active {
  background-image: var(--gold-sheen);
  background-size: 230% 100%;
  background-position: 88% 0;
  background-color: transparent;
  color: #140d02;
  transform: scale(0.99);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45);
  transition-duration: var(--btn-dur-press);
}
button[type="submit"]:not(.btn):not(.link-btn):not(.icon-btn):disabled, .btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Flache Knöpfe ohne Fläche (Textaktionen, reine Symbolknöpfe) bekommen
   wenigstens einen Farbwechsel, damit auch sie beim Überfahren und Drücken
   erkennbar reagieren. */
.link-btn:hover, .icon-btn:hover { color: var(--brand); }
.link-btn:active, .icon-btn:active { color: var(--brand-strong); transform: scale(0.96); }
.icon-btn { transition: color var(--btn-dur) var(--ease), transform var(--btn-dur) var(--ease); }

.icon-btn { background: none; border: none; padding: 0; margin: 0; cursor: pointer; }

.hint { color: var(--text-muted); font-size: 0.85rem; margin-top: 10px; }

.flash { padding: 11px 14px; border-radius: 10px; font-weight: 600; margin: 10px 0; font-size: 0.92rem; }
.flash-error { background: var(--danger-bg); color: var(--danger); }
.flash-success { background: var(--ok-bg); color: var(--ok); }

/* ---------- Login ---------- */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(227, 179, 65, 0.14), transparent 70%),
    var(--bg);
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 40px 32px;
}

.login-card .brand-header { justify-content: center; }
.login-card .brand-mark { justify-content: center; width: 100%; }
.login-card .brand-mark-logo { height: 36px; }
.subtitle { text-align: center; color: var(--text-muted); margin: 18px 0 0; font-size: 0.95rem; }
.switch-link { text-align: center; margin-top: 18px; font-size: 0.9rem; color: var(--text-muted); }

/* ---------- Marketing: Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 140px var(--gutter) 120px;
  text-align: center;
  isolation: isolate;
}
.hero-glow {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 640px;
  background: radial-gradient(50% 50% at 50% 30%, rgba(227, 179, 65, 0.22), transparent 70%);
  z-index: -3;
  pointer-events: none;
  animation: glow-breathe 7s ease-in-out infinite;
}
@keyframes glow-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.75; transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-glow { animation: none; }
}
/* Die Hero-Animation ("Vom Chaos zum Fluss", src/views/partials/hero-flow.ejs).
   Das Canvas ist deckend und zeichnet seinen eigenen Hintergrund, weil die
   Nachzieh-Spuren durch Überblenden mit der Hintergrundfarbe entstehen und
   nicht durch Löschen. Die Maske blendet nur oben und unten weich aus, damit
   Partikel am Rand nicht hart abgeschnitten werden. Keine dunkle Ebene mehr
   über der Animation: die Lesbarkeit des Textes wird im Canvas gelöst
   (Abdunkeln in einer Ellipse um den Textblock), sonst wäre die ganze Szene
   flau, wie es beim früheren Trichter der Fall war. */
/* Die Startseiten-Hero braucht unterhalb des Textblocks eine eigene Zone für
   das Animationsband, sonst liegt der Strom wieder hinter der Überschrift.
   Nur diese eine Hero bekommt die Zusatzhöhe, die Unterseiten behalten ihre
   kompakte Variante. */
.hero-with-flow {
  /* Feste Mindesthöhe neben der vh-Angabe: das Phone im Hintergrund ist
     624 px hoch und würde auf flachen Fenstern sonst oben und unten
     abgeschnitten (die Hero hat overflow: hidden). */
  /* Deutlich höher als der Inhalt braucht: nur so passt zwischen Überschrift
     und Fließtext eine Lücke, die das gesamte Gerät freilässt, statt es nur
     halb zu überdecken. */
  min-height: max(860px, 90vh);
  padding-top: 60px;
  padding-bottom: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Ohne min-width: 0 kann ein Flex-Element nicht unter seine Mindestbreite
   schrumpfen. Der rotierende Teil der Überschrift läuft auf nowrap und würde
   dem Element auf schmalen Bildschirmen seine Breite aufzwingen, die Seite
   bekäme eine horizontale Scrollleiste. */
.hero-with-flow .hero-inner { min-width: 0; }

/* Die Lücke zwischen Überschrift und Fließtext macht die ganze Arbeit: weil
   der Inhalt senkrecht zentriert ist, schiebt sie die Überschrift nach oben
   und Text samt Buttons nach unten, beides gleichzeitig. Genau dazwischen
   liegt die Mitte des Phones, die dadurch frei wird. Fließtext und Buttons
   sind zusätzlich kleiner, damit sie weniger verdecken. */
.hero-with-flow .hero-inner p {
  /* Am 21.10.2026 mitgewachsen: unter einer 56-Pixel-Überschrift wirkte der
     alte Wert wie eine Fußnote. Breiter wird er erst ab Laptop-Breite, hier
     bleibt er schmal, damit er das Gerät nicht verdeckt. */
  font-size: clamp(1.05rem, 1.3vw, 1.22rem);
  max-width: 520px;
  margin-top: 0;
  margin-bottom: 34px;
}

/* Ab Laptop-Breite bekommen Überschrift und Fließtext deutlich mehr Platz.
   Die Überschrift passt dadurch in zwei Zeilen statt drei, der erzwungene
   Umbruch nach "Lösungen," entfällt hier (er bleibt für schmale Fenster,
   wo die Zeile sonst ungünstig bricht). */
/* Der erzwungene Umbruch gilt nur noch auf dem Handy, wo die Überschrift
   bewusst dreizeilig sein soll. Darüber bricht sie von selbst und füllt damit
   jede Zeile aus, statt nach "Lösungen," künstlich kurz zu enden. */
@media (min-width: 1180px) {
  .hero-with-flow .hero-inner p { max-width: 760px; }
}

@media (max-width: 760px) {
  /* Auf dem Handy reicht die Höhe nicht, um den Inhalt mittig zu zentrieren
     UND das Gerät freizulassen: bei mittiger Zentrierung verschiebt der
     Größenunterschied zwischen Überschrift oben und Text plus Buttons unten
     die Lücke um gut 130 Pixel, die dann zusätzlich gebraucht würden. Der
     Inhalt setzt hier deshalb oben an, die Lücke wird direkt gesetzt. */
  .hero-with-flow {
    min-height: max(700px, 88vh);
    padding-top: 48px;
    padding-bottom: 48px;
  }
  /* Kleiner als die globale Vorgabe von 2.6rem, damit die Überschrift mit
     zwei Zeilen auskommt. 1.85rem und nicht 2rem: bei 375 px braucht
     "Digitale Lösungen, die" genau 329 px, der Container gibt 327 her. Bei
     2rem rutschte das "die" allein in eine dritte Zeile. */
  .hero-with-flow .hero-inner h1 { font-size: 1.85rem; }
  .hero-with-flow .hero-inner p { font-size: 0.98rem; }
}

/* Das Phone-Mockup als Hintergrundebene, exakt auf der Mitte. Der eigene
   Schwebe-Effekt des Mockups nutzt transform, deshalb übernimmt ein Wrapper
   das Zentrieren: sonst würde die Keyframe-Animation die Positionierung
   überschreiben. Die Abdunklung läuft über filter auf dem Wrapper, damit die
   Innengestaltung des Mockups unverändert bleibt und nur ihre Helligkeit
   sinkt. */
/* Der Platzhalter reserviert die Lücke zwischen Überschrift und Absatz. Seine
   Höhe entspricht der skalierten Höhe des Mockups (624 px mal dem Faktor
   unten), die Ränder sind der Abstand nach oben und unten. Weil er im
   normalen Fluss liegt, verschiebt sich alles automatisch mit, wenn die
   Überschrift bei anderer Fensterbreite mehr oder weniger Zeilen braucht. */
.hero-phone-slot {
  position: relative;
  height: var(--phone-h);
  margin: 30px 0;
}
.hero-phone-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Verkleinert über scale statt über eigene Breiten- und Höhenwerte: das
     Mockup behält damit seine inneren Proportionen, Radien und Schriftgrade
     unverändert, und die Verkleinerung ist eine Zahl statt einem Dutzend
     angepasster Regeln. Ändert sich der Faktor, muss die Höhe des
     Platzhalters darüber mitgeändert werden. */
  transform: translate(-50%, -50%) scale(var(--phone-scale));
  /* Bewusst 0 und nicht negativ: ein negativer Wert wird aus .hero-inner
     heraus in die Ebene des deckenden Canvas gezogen und das Gerät ist dann
     gar nicht mehr zu sehen. Negativ war früher nötig, weil der Text darüber
     lag; seit das Gerät seine eigene Zone zwischen Überschrift und Absatz
     hat, überdeckt es nichts mehr. */
  z-index: 0;
  pointer-events: none;
  /* Gedämpft wird ausschließlich über den Filter, nicht über Deckkraft: das
     Gerät soll dunkel wirken, aber undurchsichtig bleiben. Mit opacity
     darunter schien der Datenfluss durch das Display, das Gerät wirkte wie
     eine Glasscheibe statt wie ein Gegenstand, der vor dem Strom steht.

     0.58 stammt aus der Zeit, als das Display eine weiße Oberfläche zeigte,
     die sonst heller gewesen wäre als die Überschrift. Das Video ist von
     sich aus dunkel: gemessen 19 von 255 im Mittel, 47 in der Spitze. Mit
     0.58 blieben davon 27, also praktisch Schwarz. 0.86 lässt die Gesichter
     durchkommen und hält das Gerät trotzdem hinter der Überschrift zurück. */
  filter: brightness(0.86) saturate(0.95) contrast(1.03);
}
.hero-phone-layer .phone-mockup { margin: 0; }

/* Zusätzlicher dunkler Schleier zwischen Hintergrund und Text. Radial, damit
   er in der Mitte am stärksten wirkt (dort steht der Text auf dem hellsten
   Teil des Phones) und zu den Rändern hin verschwindet, wo die Partikel
   sichtbar bleiben sollen. */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Vertikal über die volle Gerätehöhe, horizontal bewusst schmal: sonst
     wäre der Datenfluss links und rechts vom Phone mitgedimmt, also genau
     das, was sichtbar sein soll. */
  background: radial-gradient(42% 48% at 50% 48%,
    rgba(0, 0, 0, 0.48) 0%,
    rgba(0, 0, 0, 0.24) 54%,
    rgba(0, 0, 0, 0) 82%);
}
@media (max-width: 760px) {
  /* Auf schmalen Bildschirmen füllt das Phone fast die ganze Breite, der
     Fließtext liegt dann direkt auf den Kennzahlen-Zeilen. Der Schleier
     deckt hier deshalb einen deutlich größeren Anteil ab. */
  .hero-veil {
    background: radial-gradient(74% 56% at 50% 48%,
      rgba(0, 0, 0, 0.52) 0%,
      rgba(0, 0, 0, 0.3) 58%,
      rgba(0, 0, 0, 0) 88%);
  }
}

.hero-flow-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 96%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 96%, transparent 100%);
}

.hero-flow-zone { position: relative; }
.data-flow-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 720px;
  opacity: 0.9;
  z-index: -1;
  pointer-events: none;
  /* Fade an beiden Seitenrändern, damit keine Linien-/Knoten-Enden hart am
     Bildschirmrand sichtbar abgeschnitten wirken. Zentriert exakt auf das
     iPhone (via .hero-flow-zone), da die Stränge hinter dem Phone
     zusammen- bzw. auseinanderlaufen sollen. */
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.data-flow-bg-mobile { display: none; }
@media (max-width: 760px) {
  /* Überlappt sonst mit der Hero-Überschrift, sobald der Text auf Mobile umbricht. */
  .data-flow-bg { display: none; }
  .data-flow-bg-mobile {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 720px;
    opacity: 0.9;
    z-index: -1;
    pointer-events: none;
    /* Fade oben/unten, damit die Stränge nicht hart an Text/Buttons
       darüber bzw. der nächsten Section darunter abschneiden. Prozent
       niedriger als beim 600px-Vorgänger, damit bei gleicher Fade-Breite
       in Pixeln mehr vom höheren Canvas sichtbar wird (weiter oben
       startend, weiter unten endend). */
    mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  }
}

/* ---------- Phone-Mockup (App-Vorschau: Liquid-Glass-Projektliste) ---------- */

.liquid-glass {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.15) 80%, rgba(255, 255, 255, 0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.phone-mockup {
  position: relative;
  z-index: 1;
  width: 300px;
  margin: 64px auto 0;
  animation: phone-float 6s ease-in-out infinite;
}
.phone-frame {
  position: relative;
  width: 300px;
  height: 624px;
  background: #0a0a0c;
  border-radius: 44px;
  overflow: hidden;
  animation: phone-data-pulse 1.5s ease-out infinite;
}
/* Leichter blauer Hover-Effekt, exakt alle 1.5s für eine halbe Sekunde —
   synchron zum Takt, in dem Datenpartikel aus hero-data-flow hinterm
   Phone eintreffen (siehe Timing-Kommentar dort). */
@keyframes phone-data-pulse {
  0% {
    box-shadow:
      inset 0 0 0 2px rgba(255, 255, 255, 0.12),
      0 0 0 1px rgba(0, 0, 0, 0.6),
      0 0 0 8px #1a1a1e,
      0 0 0 9px rgba(227, 179, 65, 0.24),
      0 50px 90px -28px rgba(0, 0, 0, 0.75),
      0 0 88px -12px rgba(227, 179, 65, 0.6);
  }
  33%, 100% {
    box-shadow:
      inset 0 0 0 2px rgba(255, 255, 255, 0.08),
      0 0 0 1px rgba(0, 0, 0, 0.6),
      0 0 0 8px #1a1a1e,
      0 0 0 9px rgba(255, 255, 255, 0.06),
      0 50px 90px -28px rgba(0, 0, 0, 0.75),
      0 0 70px -18px var(--brand-glow);
  }
}
.phone-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 22px;
  background: #000;
  border-radius: 0 0 14px 14px;
  z-index: 50;
}

/* ---------- Dashboard im Gerät ----------
   Aufbau von oben: ein querformatiges Video, darunter Verkauf mit zwei
   Kurven, darunter zwei schmale Blöcke nebeneinander und ganz unten ein
   breiter. Keine Kopf- und keine Fußleiste: das Video soll im oberen Drittel
   des Geräts sitzen, eine Kopfzeile würde es nach unten drücken.

   Die Höhen stehen in Pixeln, nicht in Prozent. Der Rahmen ist 624 px hoch
   und auf dem Handy 520, beides feste Werte; ein Prozentsatz würde dieselbe
   Rechnung nur verstecken. Summe: 26 + 180 + 10 + 178 + 10 + 92 + 10 + 82
   + 26 = 614 von 624. */
.phone-dash {
  position: absolute;
  inset: 0;
  padding: 26px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #ffffff;
  color: #2a2f3a;
  text-align: left;
  font-size: 11px;
}

.pd-video {
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
  background: #0a0a0c url("/images/ticketshop-quer-poster.jpg") center/cover no-repeat;
  flex: none;
}
.pd-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) {
  .pd-video video { display: none; }
}

/* Alle Blöcke tragen denselben Grund, denselben Rahmen und denselben Radius.
   Leicht abgerundet, nicht stark: bei 12 px wirkt die Fläche ruhig, ab etwa
   20 px fängt sie an, nach Spielzeug auszusehen. */
.pd-card {
  background: #f4f6f9;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 12px;
  padding: 10px 12px;
  flex: none;
}

.pd-chart { height: 178px; display: flex; flex-direction: column; }
.pd-head { display: flex; align-items: baseline; justify-content: space-between; }
.pd-title { font-weight: 700; font-size: 11.5px; color: #111827; }
.pd-zeit { font-size: 9.5px; font-weight: 600; color: rgba(17, 24, 39, 0.45); }
.pd-werte { display: flex; gap: 18px; margin: 8px 0 2px; }
.pd-werte div { display: flex; flex-direction: column; gap: 1px; }
.pd-wert { font-family: var(--font-heading); font-weight: 700; font-size: 15px; line-height: 1.1; color: #111827; }
.pd-wert--gold { color: var(--brand-strong); }
.pd-label { font-size: 9.5px; font-weight: 600; color: rgba(17, 24, 39, 0.5); }
.pd-graph { display: block; width: 100%; flex: 1; min-height: 0; margin-top: 6px; }
.pd-legende { display: flex; gap: 12px; margin-top: 4px; }
.pd-legende span { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 600; color: rgba(17, 24, 39, 0.55); }
.pd-punkt { width: 7px; height: 2px; border-radius: 2px; background: #9aa4b2; }
.pd-punkt--gold { background: var(--brand-strong); }

.pd-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; height: 92px; flex: none; }
.pd-zwei .pd-card { height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.pd-breit { height: 82px; display: flex; flex-direction: column; justify-content: space-between; }

.pd-ico {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(154, 115, 36, 0.12);
  color: var(--brand-strong);
  flex: none;
}
.pd-ico svg { width: 13px; height: 13px; }
.pd-name { font-weight: 700; font-size: 11px; color: #111827; }
.pd-sub { font-size: 9.5px; font-weight: 600; color: rgba(17, 24, 39, 0.5); }

/* Drei Schritte im breiten Block: der mittlere trägt das Gold, damit klar
   ist, dass hier etwas läuft und nicht nur drei Kästchen stehen. */
.pd-schritte { display: flex; align-items: center; gap: 6px; }
.pd-schritt { flex: 1; height: 6px; border-radius: 3px; background: rgba(15, 23, 42, 0.1); }
.pd-schritt--aktiv { background: var(--brand-strong); }
.pd-kopf { display: flex; align-items: center; gap: 8px; }

@keyframes phone-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  .phone-mockup { animation: none; }
  .phone-frame { animation: none; }
}
@media (max-width: 760px) {
  .phone-mockup { width: 250px; margin-top: 90px; }
  .phone-frame { width: 250px; height: 520px; border-radius: 38px; }
  /* Der kleine Rahmen ist 104 px niedriger. Alle Höhen mit 0,83 skaliert,
     dem Verhältnis 520 zu 624. Summe: 22 + 150 + 8 + 148 + 8 + 77 + 8 + 68
     + 22 = 511 von 520. */
  .phone-dash { padding: 22px 12px; gap: 8px; }
  .pd-video { height: 150px; }
  .pd-chart { height: 148px; }
  .pd-zwei { height: 77px; gap: 8px; }
  .pd-breit { height: 68px; }
  .pd-wert { font-size: 13px; }
}
.flow-node { animation: node-pulse 3.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes node-pulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-node { animation: none; }
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-dim);
  border: 1px solid rgba(227, 179, 65, 0.3);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 28px;
}
.hero-inner { max-width: var(--container); margin: 0 auto; position: relative; }
.hero h1 {
  /* Die Größe ist so gerechnet, dass die längste Überschriftzeile den
     Container fast genau ausfüllt, statt bei fester Größe Luft zu lassen.
     Gemessen: die Zeile ist rund das 13,4-fache der Schriftgröße breit, der
     Container ist Fensterbreite minus zwei Gutter. Daraus folgt der Faktor,
     die Obergrenze greift ab der Breite, ab der --container deckelt. */
  font-size: clamp(1.85rem, calc(7.15vw - 4.6px), 5.3rem);
  margin: 0 0 22px;
  color: var(--text);
  font-weight: 800;
}
.hero h1 .accent { color: var(--brand); font-style: italic; }
.hero-rotator {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  /* Zusätzlich zu overflow: hidden, und zwar zwingend: die Zeilen im Rotator
     tragen den Schimmer über background-clip: text. Diese Bemalung entkommt
     dem reinen overflow-Clipping und die weggeschnittenen Zeilen tauchten
     als Geisterschrift quer über der sichtbaren auf. clip-path schneidet die
     Bemalung selbst ab. */
  clip-path: inset(0);
  /* 1.4em statt 1.2em, und zwar gerechnet, nicht geschätzt. Die Schrift legt
     ihre Grundlinie bei mittiger Ausrichtung auf H/2 + 0.385em unter die
     Oberkante, die Unterlängen reichen 0.249em tiefer. Damit ein g noch ins
     Fenster passt, muss H/2 + 0.634em <= H gelten, also H >= 1.268em. Bei
     1.2em ragten die Unterlängen 0.034em heraus: unten abgeschnitten, und
     nach dem Weiterrücken hingen sie als blaue Stummel oben ins Fenster.
     Die negativen Ränder nehmen den Zuwachs wieder aus dem Zeilenfluss, die
     Überschrift bleibt dadurch exakt so hoch und so gesetzt wie vorher. */
  height: 1.4em;
  margin-block: -0.1em;
  vertical-align: bottom;
  font-size: clamp(1.35rem, calc(8.15vw - 4px), 4.4rem);
}
.hero-rotator-track {
  display: flex;
  flex-direction: column;
  /* 12s bei vier Zeilen, also wieder 3s pro Zeile wie bei den früheren
     dreien. Wird die Zahl der Zeilen geändert, müssen Dauer und Keyframes
     mitwandern, sonst hält jede Zeile unterschiedlich lange. */
  animation: hero-rotate 12s ease-in-out infinite;
}
.hero-rotator-track .accent {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Muss der Fensterhöhe entsprechen: die Keyframes schieben den Stapel um
     Vielfache von 20 Prozent seiner Gesamthöhe, also um genau eine Zeile.
     20 Prozent, weil der Stapel fünf Zeilen hoch ist (vier plus die
     Wiederholung der ersten für den nahtlosen Rücksprung). */
  height: 1.4em;
  line-height: 1.2;
  white-space: nowrap;
  padding-right: 0.15em;
}
@keyframes hero-rotate {
  0%, 22.5% { transform: translateY(0%); }
  25%, 47.5% { transform: translateY(-20%); }
  50%, 72.5% { transform: translateY(-40%); }
  75%, 97.5% { transform: translateY(-60%); }
  100% { transform: translateY(-80%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-rotator-track { animation: none; }
}
.hero p {
  font-size: clamp(1.1rem, 1.45vw, 1.3rem);
  color: var(--text);
  margin: 0 auto 40px;
  max-width: 560px;
}
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
/* Die beiden Knöpfe gleich breit. Sie werden sonst von ihrer Beschriftung
   bestimmt, und die sind unterschiedlich lang: gemessen 278 px für
   "Kostenloses Erstgespräch" gegen 214 px für "Projekte ansehen". Auf dem
   Handy stehen sie untereinander, dort fiel der Versatz von 64 px sofort auf.

   17.5rem liegt knapp über dem längeren der beiden. Wird eine Beschriftung
   länger, muss der Wert mit, sonst laufen sie wieder auseinander. min() statt
   eines festen Werts, damit auf sehr schmalen Geräten (unter 320 px) nichts
   über den Rand hinausragt. */
.hero-actions .btn-cta,
.hero-actions .btn-cta-outline {
  justify-content: center;
  min-width: min(17.5rem, 100%);
}

/* ---------- Buttons ----------
   Eine gemeinsame Grundlage für jede Schaltfläche der Seite, egal ob
   Haupt-Aktion, Umriss-Variante, Kopfzeilen-Knopf, Formular-Knopf oder das
   Hamburger-Symbol. Vorher hatte jede nur einen Hover-Zustand: keine
   Rückmeldung beim Klicken und kein sichtbarer Fokus für alle, die mit der
   Tastatur navigieren. */

.btn-cta,
.btn-cta-outline,
.nav-link-cta,
.btn,
.nav-toggle,
.category-option,
.btn-primary,
.link-btn,
.icon-btn,
button[type="submit"]:not(.btn):not(.link-btn):not(.icon-btn) {
  cursor: pointer;
  user-select: none;
  /* Verhindert die 300-ms-Verzögerung durch die Doppeltipp-Zoomgeste und
     das graue Standard-Aufblitzen beim Antippen. Die Rückmeldung übernimmt
     der eigene Druck-Zustand unten. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Fokus nur bei Tastaturbedienung, nicht bei jedem Mausklick. */
.btn-cta:focus-visible,
.btn-cta-outline:focus-visible,
.nav-link-cta:focus-visible,
.btn:focus-visible,
.nav-toggle:focus-visible,
.btn-primary:focus-visible,
.link-btn:focus-visible,
.icon-btn:focus-visible,
button[type="submit"]:not(.btn):not(.link-btn):not(.icon-btn):focus-visible,
.category-option:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 18px 40px;
  border-radius: var(--btn-radius);
  font-weight: 600;
  font-size: 1.06rem;
  text-decoration: none;
  background-image: var(--gold-sheen);
  background-size: 230% 100%;
  background-position: 60% 0;
  color: #140d02;
  border: none;
  text-shadow: 0 1px 0 rgba(255, 248, 228, 0.35);
  transition: background-position 650ms var(--ease), transform var(--btn-dur) var(--ease), box-shadow var(--btn-dur) var(--ease);
}
/* Drei Stufen, die man ohne Hinsehen auseinanderhält: Markenblau in Ruhe,
   Weiß beim Überfahren, dunkles Blau beim Drücken. Der vorherige Wechsel auf
   ein nur wenig helleres Blau war zu fein, um aufzufallen. Der Knopf bleibt
   dabei an seiner Stelle und wächst nur leicht, weil ein Verschieben unter dem
   Zeiger unruhig wirkt. Das Wachsen ist das zweite Signal neben der Farbe,
   weil Farbe allein nie genügen soll. */
.btn-cta:hover {
  background-position: 0% 0;
  color: #140d02;
  text-decoration: none;
  transform: scale(1.035);
  box-shadow: 0 0 34px -8px rgba(255, 255, 255, 0.4);
}
.btn-cta:active {
  background-image: var(--gold-sheen);
  background-size: 230% 100%;
  background-position: 88% 0;
  background-color: transparent;
  color: #140d02;
  transform: scale(0.985);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45);
  transition-duration: var(--btn-dur-press);
}
.btn-cta-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 17px 39px;
  border-radius: var(--btn-radius);
  font-weight: 600;
  font-size: 1.06rem;
  text-decoration: none;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
  transition: border-color var(--btn-dur) var(--ease), background var(--btn-dur) var(--ease), color var(--btn-dur) var(--ease), transform var(--btn-dur) var(--ease), box-shadow var(--btn-dur) var(--ease);
}
/* Der Umriss-Knopf kippt beim Überfahren komplett um: aus leer mit hellem
   Text wird gefüllt mit dunklem Text. Das ist der deutlichste Wechsel, den
   diese Variante hergibt. */
.btn-cta-outline:hover {
  border-color: transparent;
  background-image: var(--gold-sheen);
  background-size: 230% 100%;
  background-position: 0% 0;
  color: #140d02;
  text-decoration: none;
  transform: scale(1.035);
  box-shadow: 0 0 34px -8px var(--brand-glow);
}
.btn-cta-outline:active {
  border-color: transparent;
  background-image: var(--gold-sheen);
  background-size: 230% 100%;
  background-position: 88% 0;
  background-color: transparent;
  color: #140d02;
  transform: scale(0.985);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45);
  transition-duration: var(--btn-dur-press);
}

/* Bei reduzierter Bewegung entfällt nur das Wachsen und Eindrücken, nicht die
   Rückmeldung selbst: Farbe und Rahmen wechseln weiterhin, Hover und Klick
   bleiben also erkennbar. */
@media (prefers-reduced-motion: reduce) {
  .btn-cta,
  .btn-cta-outline,
  .nav-link-cta,
  .btn,
  .nav-toggle,
  .category-option,
  .view-toggle-option,
  .btn-primary,
  .link-btn,
  .icon-btn,
  button[type="submit"]:not(.btn):not(.link-btn):not(.icon-btn) {
    transition-property: background, border-color, color, box-shadow;
  }
  .btn-cta:hover, .btn-cta:active,
  .btn-cta-outline:hover, .btn-cta-outline:active,
  .nav-link-cta:hover, .nav-link-cta:active,
  .btn:hover, .btn:active, .nav-toggle:active,
  .category-option:hover, .category-option:active,
  .view-toggle-option:hover, .view-toggle-option:active,
  .btn-primary:hover, .btn-primary:active,
  .link-btn:active, .icon-btn:active,
  button[type="submit"]:not(.btn):not(.link-btn):not(.icon-btn):hover, button[type="submit"]:not(.btn):not(.link-btn):not(.icon-btn):active {
    transform: none;
  }
}

/* ---------- Section scaffolding ---------- */

/* Dreistufiges Abstandsmaß statt immer größerer Luft: 88 für eine volle
   Sektion, 56 für eine angeschlossene, getrennt wird zusätzlich über einen
   Wechsel der Hintergrundfläche. */
/* ---------- Maßstab der Abschnitte ----------
   Vergrößert am 21.10.2026 nach den Vorbildern MYKA und Majestic Marketing.
   Dort trägt die Ruhe zwischen den Abschnitten genauso viel wie der Inhalt
   darin: 160 statt 88 Pixel Luft oben und unten auf dem Laptop, und eine
   Überschrift, die mit 56 Pixeln wirklich eine Überschrift ist.

   Als clamp statt als feste Zahl, weil der Abstand sonst auf dem Handy den
   halben Bildschirm frisst: dort bleiben 96 Pixel, erst darüber wächst er
   mit der Fensterbreite mit. */
.section {
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(96px, 11vw, 160px) var(--gutter);
}
.section-tight {
  padding-top: clamp(72px, 8vw, 112px);
  padding-bottom: clamp(72px, 8vw, 112px);
}
/* Augenbraue nach dem Vorbild von Majestic Marketing: ein kurzer Goldstrich,
   dann das Wort. Ruhiger als eine umrandete Pille, und er bindet die
   Beschriftung sichtbar an den Abschnitt, statt sie frei schweben zu lassen.

   Der Strich liegt im selben inline-flex wie der Text, damit beide zusammen
   mittig stehen. Ein Strich links UND rechts sähe aus wie ein Trenner. */
.section-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 20px;
  text-align: center;
}
.section-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-sheen, var(--brand));
  flex: none;
}
/* Links ausgerichtete Abschnitte: dort steht der Strich vor dem Wort am
   linken Rand, nicht in der Mitte. */
.section-eyebrow--links { justify-content: flex-start; text-align: left; }
/* Zeilenhöhe hier enger als im Fließtext: bei dieser Größe reißt 1.6 die
   Zeilen einer zweizeiligen Überschrift sichtbar auseinander. */
.section-title {
  font-size: clamp(2.05rem, 4.2vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  text-align: center;
}
.section-lead {
  color: var(--text-muted);
  text-align: center;
  max-width: 680px;
  margin: 0 auto 64px;
  font-size: clamp(1.08rem, 1.3vw, 1.25rem);
  line-height: 1.6;
}

/* ---------- Editorial service/process rows (statt generischer Karten) ---------- */

.row-list { display: flex; flex-direction: column; overflow: hidden; }
.row-item {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 28px 4px;
  border-top: 1px solid var(--border);
  transition: background 0.3s var(--ease), padding-left 0.3s var(--ease);
  min-width: 0;
}
.row-list .row-item:last-child { border-bottom: 1px solid var(--border); }
.row-item:hover, .row-item.is-scroll-active { background: rgba(255, 255, 255, 0.015); padding-left: 12px; }
.row-index {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--border-strong);
  transition: color 0.3s var(--ease);
}
.row-item:hover .row-index, .row-item.is-scroll-active .row-index { color: var(--brand); }
.row-body { position: relative; min-width: 0; }
.row-body h3 { font-size: 1.3rem; margin: 0 0 10px; }
.row-body h3 .row-arrow {
  display: inline-block;
  margin-left: 8px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  color: var(--brand);
}
.row-item:hover .row-body h3 .row-arrow, .row-item.is-scroll-active .row-body h3 .row-arrow { opacity: 1; transform: translateX(0); }
.row-body p { color: var(--text-muted); margin: 0; max-width: 620px; font-size: 1rem; }
.row-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.row-tag {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.row-item:hover .row-tag, .row-item.is-scroll-active .row-tag { border-color: var(--border-strong); color: var(--text); }

@media (min-width: 720px) {
  .row-item { grid-template-columns: 120px 1fr; align-items: start; padding: 44px 12px; }
  .row-index { font-size: 2rem; }
}

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

.step-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 760px) { .step-grid { grid-template-columns: repeat(3, 1fr); } }
.step-card { background: var(--bg); padding: 36px 30px; transition: background 0.3s var(--ease); }
.step-card:hover, .step-card.is-scroll-active { background: var(--surface); }
.step-number { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; color: var(--brand); margin-bottom: 18px; }
.step-card h3 { font-size: 1.1rem; margin: 0 0 10px; }
.step-card p { color: var(--text-muted); margin: 0; font-size: 1.02rem; }

/* ---------- CTA banner ---------- */

.cta-banner {
  position: relative;
  overflow: hidden;
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin: 0 auto 100px;
  padding: 70px 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  /* Weiss statt des goldenen Scheins auf Schwarz, Bens Vorgabe. Der Kasten
     ist damit der einzige helle Block auf einer dunklen Seite und zieht den
     Blick genau dorthin, wo die Seite ihr Ziel hat. */
  background: #ffffff;
  border-color: #e6e4ea;
  color: #16181d;
  text-align: center;
}
/* Gold auf Weiss nur in der tiefen Fassung: #e3b341 kommt auf Weiss auf
   1,9:1 und waere unlesbar, #8a6520 auf 5,4:1. Flach, nicht als Verlauf,
   weil dessen helles Ende denselben Fehler zurueckholen wuerde. */
.cta-banner h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  margin: 0 0 16px;
  background-image: var(--gold-sheen-hell);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cta-banner p { color: #5b6478; margin: 0 auto 32px; max-width: 620px; }

/* ---------- Ablauf: Prozess-Timeline ---------- */

.process-timeline {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.process-timeline::before {
  content: '';
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 27px;
  width: 2px;
  background: linear-gradient(180deg, var(--brand) 0%, rgba(227, 179, 65, 0.12) 100%);
}
.process-step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 20px; }
.process-step-marker { position: relative; z-index: 1; }
.process-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--brand);
  color: var(--brand);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
}
.process-step-body h3 { font-size: 1.3rem; margin: 0 0 10px; }
.process-step-body > p { color: var(--text-muted); margin: 0 0 18px; font-size: 1rem; max-width: 600px; }
.process-step-list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.process-step-list li { position: relative; padding-left: 22px; color: var(--text-muted); font-size: 0.95rem; }
.process-step-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
}
.process-outcome {
  background: var(--brand-dim);
  border: 1px solid rgba(227, 179, 65, 0.25);
  border-radius: var(--radius);
  padding: 16px 18px;
  max-width: 600px;
}
.process-outcome-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand);
  margin-bottom: 6px;
}
.process-outcome p { margin: 0; color: var(--text); font-size: 0.92rem; }

@media (max-width: 560px) {
  .process-timeline { gap: 40px; }
  .process-step { grid-template-columns: 40px 1fr; gap: 14px; }
  .process-step-number { width: 40px; height: 40px; font-size: 0.92rem; }
  .process-timeline::before { left: 19px; }
}

/* ---------- Projekte: Showcase-Grid ---------- */

.showcase-grid { display: grid; grid-template-columns: 1fr; gap: 44px; }
@media (min-width: 720px) { .showcase-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .showcase-grid { grid-template-columns: repeat(3, 1fr); } }
.showcase-card { display: flex; flex-direction: column; gap: 20px; }
.showcase-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.showcase-frame-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border);
}
.showcase-frame-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.showcase-frame-body { aspect-ratio: 16 / 10; position: relative; }
.showcase-frame-body img { width: 100%; height: 100%; object-fit: cover; display: block; }
.showcase-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(227, 179, 65, 0.08), rgba(227, 179, 65, 0.02));
  color: var(--text-muted);
}
.showcase-placeholder svg { width: 32px; height: 32px; opacity: 0.6; }
.showcase-placeholder span { font-size: 0.82rem; }
.showcase-body { padding: 0 4px; }
.showcase-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand);
  border: 1px solid rgba(227, 179, 65, 0.3);
  background: var(--brand-dim);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 14px;
}
.showcase-body h3 { font-size: 1.25rem; margin: 0 0 10px; }
.showcase-body > p { color: var(--text-muted); margin: 0 0 18px; font-size: 0.96rem; }

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

.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}
@media (min-width: 860px) { .contact-layout { grid-template-columns: 0.85fr 1.15fr; } }
.contact-heading h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 0 0 18px; }
.contact-heading p { color: var(--text-muted); font-size: 1.05rem; max-width: 460px; margin: 0 0 32px; }
.contact-fact { display: flex; gap: 14px; align-items: flex-start; padding: 18px 0; border-top: 1px solid var(--border); }
.contact-fact:last-child { border-bottom: 1px solid var(--border); }
.contact-fact-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); width: 110px; flex-shrink: 0; padding-top: 2px; }
.contact-fact-value { color: var(--text); font-weight: 500; }

.contact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.contact-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.contact-card h3 { font-size: 1.3rem; margin: 0 0 8px; }
.contact-card > p { color: var(--text-muted); margin: 0 0 24px; font-size: 0.95rem; }

/* ---------- Kontaktformular ---------- */

.contact-form { margin-top: 8px; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 520px) { .form-row { grid-template-columns: 1fr 1fr; } }

/* Blaue Umrandung als Akzent (nicht nur bei Fokus) + deutlicher Hover-Effekt,
   speziell für dieses Formular — bewusst kräftiger als die neutralen
   Feldrahmen im internen Admin-Bereich. */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  border-color: rgba(227, 179, 65, 0.35);
}
.contact-form input[type="text"]:hover,
.contact-form input[type="email"]:hover,
.contact-form input[type="tel"]:hover,
.contact-form textarea:hover {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-dim);
}

.category-picker { border: none; margin: 16px 0 0; padding: 0; }
.category-picker legend { font-weight: 600; font-size: 0.88rem; color: var(--text-muted); margin-bottom: 8px; padding: 0; }
.category-options { display: flex; flex-wrap: wrap; gap: 8px; }
.category-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 14px 26px;
  border-radius: var(--btn-radius);
  border: 1px solid rgba(227, 179, 65, 0.35);
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--btn-dur) var(--ease), background var(--btn-dur) var(--ease), color var(--btn-dur) var(--ease), transform var(--btn-dur) var(--ease);
}
.category-option:active {
  border-color: transparent;
  background-image: var(--gold-sheen);
  background-size: 230% 100%;
  background-position: 88% 0;
  background-color: transparent;
  color: #140d02;
  transform: scale(0.97);
  transition-duration: var(--btn-dur-press);
}
.category-option:hover { border-color: var(--brand); background: rgba(227, 179, 65, 0.26); color: #f6e3b4; transform: scale(1.02); }
.category-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.category-option:has(input:checked) {
  background-image: var(--gold-sheen);
  background-size: 230% 100%;
  background-position: 60% 0;
  border-color: transparent;
  color: #140d02;
}
.category-option:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

.message-reveal {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s var(--ease), opacity 0.3s var(--ease), margin 0.35s var(--ease);
}
.contact-form:has(.category-option input:checked) .message-reveal {
  max-height: 240px;
  opacity: 1;
}
/* Kein :has()-Support (sehr seltener Fall): Feld bleibt sicherheitshalber sichtbar. */
@supports not selector(:has(a)) {
  .message-reveal { max-height: none; opacity: 1; }
}

/* ---------- View toggle (Kunden: Tabelle/Pipeline) ---------- */

.view-toggle { display: inline-flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px; margin-bottom: 24px; }
.view-toggle-option { padding: 11px 20px; transition: color var(--btn-dur) var(--ease), background var(--btn-dur) var(--ease), transform var(--btn-dur) var(--ease); border-radius: 999px; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }
.view-toggle-option:hover { background: rgba(227, 179, 65, 0.26); color: #f6e3b4; text-decoration: none; transform: scale(1.02); }
.view-toggle-option:active { background: var(--brand); color: #050505; transform: scale(0.97); }
.view-toggle-option:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.view-toggle-option.active { background: var(--brand); color: #050505; }

/* ---------- Badges (generisch, farb-basiert statt schlüssel-basiert) ----------
   Pipeline-Stufen/Prioritäten sind seit der CRM-Produktisierung (Phase 1,
   siehe CLAUDE.md) editierbare Datenbank-Einträge mit frei wählbarem Label,
   eine feste CSS-Klasse pro Schlüssel (z.B. .pipeline-badge-gewonnen) würde
   also für neue/umbenannte Stufen ins Leere laufen. Jede Stufe/Priorität
   trägt stattdessen eine von 6 festen Farboptionen (color-Spalte), die auf
   genau diese 6 Klassen abgebildet wird. */

.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.badge-color-grau { background: var(--muted-badge-bg); color: var(--muted-badge); }
.badge-color-blau { background: var(--brand-dim); color: var(--brand); }
.badge-color-amber { background: var(--warn-bg); color: var(--warn); }
.badge-color-rot { background: var(--danger-bg); color: var(--danger); }
.badge-color-gruen { background: var(--ok-bg); color: var(--ok); }
.badge-color-lila { background: rgba(167, 139, 250, 0.14); color: #a78bfa; }

/* ---------- Pipeline board (Kanban) ---------- */

.pipeline-board { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 12px; }
.pipeline-column { flex: 0 0 260px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; max-height: 74vh; }
.pipeline-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 0.88rem;
}
.pipeline-column-count { color: var(--text-muted); font-weight: 600; font-size: 0.8rem; }
.pipeline-column-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.pipeline-card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.pipeline-card-name { font-weight: 700; font-size: 0.95rem; color: var(--text); }
.pipeline-card-name:hover { color: var(--brand); }
.pipeline-card-revenue { color: var(--text-muted); font-size: 0.85rem; }
.pipeline-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.pipeline-card .status-select-form select { width: 100%; }

/* ---------- Admin tables ---------- */

.table-wrapper { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }

.admin-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.admin-table th, .admin-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.92rem; vertical-align: middle; }
.admin-table th { color: var(--text-muted); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: rgba(255, 255, 255, 0.015); }
/* Aktionsspalte bleibt eine echte Tabellenzelle (kein display:flex, sonst
   verrutscht der Button bei mehrzeiligen Zeilen). Mehrere Aktionen werden
   rechtsbuendig untereinander gestapelt, damit die Tabelle nicht zu breit
   wird. */
.admin-table td.actions { text-align: right; white-space: nowrap; }
.admin-table td.actions > * { display: flex; justify-content: flex-end; margin: 6px 0 0; }
.admin-table td.actions > :first-child { margin-top: 0; }
.admin-table td.actions form { margin-bottom: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  white-space: nowrap;
  padding: 13px 24px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
  transition: border-color var(--btn-dur) var(--ease), background var(--btn-dur) var(--ease), color var(--btn-dur) var(--ease), transform var(--btn-dur) var(--ease);
}
.btn:hover { border-color: var(--brand); background: rgba(227, 179, 65, 0.3); color: #f6e3b4; text-decoration: none; transform: scale(1.02); }
.btn:active {
  border-color: transparent;
  background-image: var(--gold-sheen);
  background-size: 230% 100%;
  background-position: 88% 0;
  background-color: transparent;
  color: #140d02;
  transform: scale(0.97);
  transition-duration: var(--btn-dur-press);
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-decline { background: rgba(248, 113, 113, 0.12); color: var(--danger); border-color: rgba(248, 113, 113, 0.3); }
.btn-decline:hover { background: rgba(248, 113, 113, 0.2); border-color: var(--danger); }
.btn-secondary { background: transparent; }

.inline-form { display: inline-flex; margin: 0; gap: 8px; flex-wrap: wrap; align-items: center; }

.admin-header-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.admin-header-row .page-title { margin: 0; }
.admin-header-row .btn-cta { padding: 10px 20px; font-size: 0.88rem; }

.stats-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 20px;
  font-size: 0.88rem;
}
.stats-strip-item { color: var(--text); font-weight: 600; }
.stats-strip-item strong { color: var(--brand); font-weight: 700; margin-right: 3px; }
.stats-strip-sep { color: var(--border-strong); }

/* ---------- Kunden / Projekte ---------- */

.breadcrumb { font-size: 0.86rem; color: var(--text-muted); margin-bottom: 18px; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--brand); }

.customer-meta { color: var(--text-muted); margin: -12px 0 26px; }
.customer-meta span { margin-right: 16px; }

.project-card-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
.project-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.project-card:hover { border-color: var(--border-strong); background: var(--surface-raised); }
.project-card-title { font-weight: 600; }
.project-card-meta { color: var(--text-muted); font-size: 0.88rem; }

.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  max-width: 480px;
}
.form-card h3 { margin: 0 0 4px; font-size: 1.05rem; }

/* ---------- Anfragen ---------- */

.request-list { display: flex; flex-direction: column; gap: 14px; }
.request-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; }
.request-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.request-card-name { font-weight: 700; font-size: 1.05rem; margin-bottom: 4px; }
.request-card-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--text-muted); font-size: 0.86rem; }
.category-badge {
  flex-shrink: 0;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--brand);
  background: var(--brand-dim);
  border: 1px solid rgba(227, 179, 65, 0.3);
  border-radius: 999px;
  padding: 5px 13px;
  white-space: nowrap;
}
.request-card-message { color: var(--text); font-size: 0.94rem; line-height: 1.6; margin: 0 0 16px; white-space: pre-wrap; }
.request-card-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border); }
.request-card-date { color: var(--text-muted); font-size: 0.82rem; }
.request-card-actions { display: flex; gap: 10px; }
.request-card-actions form { margin: 0; }

/* ---------- Aufgabenblöcke ---------- */

.task-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 26px; margin-bottom: 20px; }
.task-block-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.task-block-title { font-size: 1.1rem; font-weight: 600; margin: 0; }
.task-block-progress { color: var(--text-muted); font-size: 0.85rem; }

.status-select-form { display: inline-flex; align-items: center; gap: 8px; }
.status-select-form select { width: auto; padding: 6px 10px; font-size: 0.85rem; }
.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}
.status-badge-0 { background: var(--muted-badge-bg); color: var(--muted-badge); }
.status-badge-25, .status-badge-50 { background: var(--warn-bg); color: var(--warn); }
.status-badge-75 { background: var(--brand-dim); color: var(--brand); }
.status-badge-100 { background: var(--ok-bg); color: var(--ok); }

.task-list { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; }
.task-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  transition: border-color 0.2s var(--ease);
}
.task-item:hover { border-color: var(--border-strong); }
.task-item.is-done { opacity: 0.5; }
.task-item.is-done .task-item-title { text-decoration: line-through; }
.task-item-checkbox-form { margin: 0; display: flex; }
.task-item-checkbox-form button { background: none; border: none; padding: 0; cursor: pointer; }
.task-item-title { flex: 1; font-size: 0.95rem; }
.task-item-actions { display: flex; gap: 4px; align-items: center; }
.task-item-actions .btn { padding: 4px 8px; font-size: 0.75rem; }
.task-item-edit-form { display: inline-flex; gap: 6px; margin: 0; }
.task-item-edit-form input { width: 160px; padding: 6px 8px; font-size: 0.85rem; }

.add-task-form { display: flex; gap: 8px; margin: 0; }
.add-task-form input { flex: 1; }

.add-block-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 24px; }
.add-block-form select { width: auto; min-width: 220px; }

.checkbox-icon-done { color: var(--ok); font-size: 1.1rem; line-height: 1; }
.checkbox-icon-open { color: var(--border-strong); font-size: 1.1rem; line-height: 1; }

/* ---------- Rechtliches ---------- */

.legal-page .legal-section { margin-bottom: 28px; }
.legal-page .legal-section h3 { font-size: 1.05rem; margin: 0 0 10px; }
.legal-page .legal-section p { margin: 0 0 10px; color: var(--text-muted); line-height: 1.65; }
.legal-page .legal-section p:last-child { margin-bottom: 0; }
.legal-page .legal-section ul { margin: 0 0 10px; padding-left: 20px; color: var(--text-muted); line-height: 1.65; }
.legal-page .legal-section code {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.9em;
}

/* ---------- Footer ---------- */

/* ---------- Einstellungen (Pipeline-Konfiguration) ---------- */

.settings-section { margin-bottom: 44px; }
.settings-section h3 { font-size: 1.1rem; margin: 0 0 6px; }
.settings-list { list-style: none; margin: 14px 0 18px; padding: 0; }
.settings-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.settings-item:last-child { border-bottom: none; }
.settings-edit-form,
.settings-add-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.settings-edit-form input[type="text"],
.settings-add-fields input[type="text"] { width: 190px; padding: 8px 10px; font-size: 0.9rem; }
.settings-edit-form select,
.settings-add-fields select { width: auto; min-width: 92px; padding: 8px 10px; font-size: 0.9rem; }
.settings-edit-form .badge,
.settings-edit-form .row-tag { flex-shrink: 0; }
.settings-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}
.settings-item-actions .hint { margin: 0 4px 0 0; white-space: nowrap; }
.settings-item-actions form { margin: 0; display: inline-flex; }
.settings-add-form { margin-top: 4px; }
.settings-add-form h4 { margin: 0 0 10px; font-size: 0.95rem; }

/* ============ App-Shell mit linker Seitenleiste ============ */

.app-body { padding-left: 244px; min-height: 100vh; }

.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 244px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 22px 14px 18px;
  z-index: 30;
}
/* Untereinander statt nebeneinander: die Wortmarke baut mit 7,7 zu 1 deutlich
   breiter als die alte, neben ihr blieb fuer "CRM" kein Platz in der 244 px
   schmalen Leiste. Entspricht zugleich der Hausregel fuer den Markenblock:
   erste Zeile die Marke, darunter der Name des Produkts. */
.sidebar-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 6px 10px 20px;
}
.sidebar-brand-logo { height: 22px; width: auto; display: block; }
.sidebar-brand-suffix {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 600;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.sidebar-link:hover { background: var(--surface-raised); color: var(--text); text-decoration: none; }
.sidebar-link.active { background: var(--brand-dim); color: var(--brand); }
.sidebar-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar-badge {
  margin-left: auto;
  background: var(--brand);
  color: #050505;
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}
.sidebar-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-user { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Der Abmelden-Button traegt zusaetzlich .sidebar-link und sieht damit
   exakt aus wie die uebrigen Navigationspunkte (Groesse, Polsterung,
   Position). Hier nur die abweichende Hover-Farbe und der Reset gegen die
   globale Submit-Button-Optik. */
.sidebar-logout {
  width: 100%;
  text-align: left;
  font: inherit;
  font-weight: 600;
}
.sidebar-logout:hover { color: var(--danger); background: var(--surface-raised); }

@media (max-width: 900px) {
  .app-body { padding-left: 0; padding-top: 60px; }
  .sidebar {
    top: 0; left: 0; right: 0; bottom: auto;
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .sidebar-brand { padding: 0 12px 0 4px; flex-shrink: 0; }
  .sidebar-brand-suffix { display: none; }
  .sidebar-nav { flex-direction: row; gap: 2px; }
  .sidebar-link { padding: 8px 10px; white-space: nowrap; font-size: 0.85rem; }
  .sidebar-link span:not(.sidebar-badge) { display: none; }
  .sidebar-link svg { width: 20px; height: 20px; }
  .sidebar-footer {
    margin: 0 0 0 auto;
    padding: 0 0 0 8px;
    border-top: none;
    border-left: 1px solid var(--border);
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
  }
  .sidebar-user { display: none; }
  .sidebar-logout-form { flex-shrink: 0; }
  .sidebar-logout { width: auto; }
}

/* ============ Dashboard ============ */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.kpi-card-label {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  margin: 0 0 10px;
}
.kpi-card-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.9rem;
  letter-spacing: -0.02em;
  line-height: 1;
}
.kpi-card-hint { color: var(--text-muted); font-size: 0.8rem; margin: 8px 0 0; }

.dash-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.dash-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.dash-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.dash-panel-head h3 { margin: 0; font-size: 1.02rem; }
.dash-deal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.dash-deal-row:last-child { border-bottom: none; }
.dash-deal-title { font-weight: 600; font-size: 0.92rem; }
.dash-deal-sub { color: var(--text-muted); font-size: 0.82rem; }
.dash-deal-value { font-weight: 700; white-space: nowrap; }

/* ============ Aktivitaeten-Timeline ============ */

.activity-feed { list-style: none; margin: 0; padding: 0; position: relative; }
/* Zeitachse nur zeichnen, wenn es mindestens einen Eintrag gibt. */
.activity-feed:has(.activity-item)::before {
  content: "";
  position: absolute;
  left: 15px; top: 4px; bottom: 4px;
  width: 2px;
  background: var(--border);
}
.activity-item {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 10px 0;
}
.activity-icon {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
}
.activity-icon svg { width: 15px; height: 15px; }
.activity-body { min-width: 0; }
.activity-title { font-weight: 600; font-size: 0.92rem; }
.activity-meta { color: var(--text-muted); font-size: 0.8rem; margin-top: 2px; }
.activity-meta .activity-type { color: var(--brand); font-weight: 600; }
.activity-feed-empty { color: var(--text-muted); font-size: 0.9rem; padding: 8px 0; }

/* ============ Pipeline-Spalten: Summe + Wahrscheinlichkeit ============ */

.pipeline-column-sum { color: var(--text-muted); font-size: 0.78rem; font-weight: 600; padding: 8px 14px 4px; }
.pipeline-card-prob {
  font-size: 0.78rem;
  color: var(--ok);
  font-weight: 600;
}

/* ============ Eigenes Datumsfeld (statt nativem input[type=date]) ============ */

.datefield { position: relative; }
.datefield-input { padding-right: 42px; }
.datefield-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--text-muted);
}
.datefield-btn svg { width: 17px; height: 17px; }
.datefield-btn:hover { color: var(--brand); background: var(--brand-dim); }

.datefield-pop {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  width: 288px;
  max-width: calc(100vw - 32px);
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
  box-shadow: var(--shadow);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .datefield-pop {
    background: rgba(25, 31, 44, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}
.datefield-pop.datefield-pop-up {
  top: auto;
  bottom: calc(100% + 6px);
}
.datefield-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.datefield-pop-title { font-weight: 700; font-size: 0.92rem; }
.datefield-nav {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  line-height: 1;
}
.datefield-nav:hover { border-color: var(--brand); color: var(--brand); }
.datefield-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.datefield-wd {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  padding-bottom: 4px;
}
.datefield-day {
  aspect-ratio: 1;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
}
.datefield-day:hover { background: var(--surface-raised); }
.datefield-day.is-today { box-shadow: inset 0 0 0 1px var(--border-strong); }
.datefield-day.is-selected { background: var(--brand); color: #050505; font-weight: 700; }
.datefield-pop-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.datefield-link {
  background: none;
  border: none;
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  padding: 4px 6px;
  border-radius: 6px;
}
.datefield-link:hover { background: var(--brand-dim); }

/* ============ Pipeline Drag & Drop ============ */

.pipeline-hint { margin: -8px 0 14px; }
/* Auf dem Board wird nie Text markiert: das Ziehen einer Karte (besonders per
   Touch) loeste sonst staendig eine Textauswahl und auf iOS das Kontextmenue
   aus. Die Kontaktverlinkung auf der Karte bleibt trotzdem antippbar. */
.pipeline-board.dnd-ready,
.pipeline-board.dnd-ready * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.pipeline-board.dnd-ready .pipeline-card {
  cursor: grab;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.pipeline-board.dnd-ready .pipeline-card:active { cursor: grabbing; }
/* Mit aktivem Drag-and-Drop ist das Stufen-Dropdown auf der Karte redundant. */
.pipeline-board.dnd-ready .status-select-form { display: none; }

.pipeline-card.is-dragging-source { opacity: 0.35; }
.pipeline-card.is-saving { opacity: 0.5; pointer-events: none; }
.pipeline-card-ghost {
  position: fixed;
  z-index: 200;
  margin: 0;
  pointer-events: none;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.7);
  transform: rotate(1.5deg);
  opacity: 0.96;
}
body.pipeline-dragging { cursor: grabbing; user-select: none; }
.pipeline-column.is-drop-target {
  border-color: var(--brand);
  background: var(--brand-dim);
}

/* ============ Kompakte Kontaktwege T/E/W in der Kontaktliste ============ */

.admin-table th.col-narrow, .admin-table td.col-narrow { width: 1%; white-space: nowrap; }
.cmethods { display: inline-flex; gap: 5px; }
.cmethod {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}
.cmethod:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.cmethod-empty { color: var(--text-muted); }

/* ============ Loeschen-Steuerelemente ============ */

.header-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.header-actions form { margin: 0; }

.activity-item { padding-right: 30px; }
.activity-del { position: absolute; top: 8px; right: 0; margin: 0; }
.activity-del button[type="submit"] {
  width: 24px; height: 24px;
  padding: 0;
  line-height: 1;
  font-size: 1.1rem;
  background: none;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text-muted);
}
.activity-del button[type="submit"]:hover { color: var(--danger); border-color: var(--danger-bg); background: var(--danger-bg); }

.project-card-wrap { display: flex; align-items: stretch; gap: 10px; }
.project-card-wrap .project-card { flex: 1; }
.project-card-wrap form { margin: 0; display: flex; }
.project-card-wrap .btn-decline { align-self: center; }

/* ============ Aufgaben / To-Dos ============ */

.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
}
.view-toggle-option.active .tab-count { background: rgba(0, 0, 0, 0.25); color: #050505; }
.tab-count-warn { background: var(--danger-bg); color: var(--danger); }
.view-toggle-option.active .tab-count-warn { background: rgba(0, 0, 0, 0.2); color: #050505; }

.sidebar-badge-warn { background: var(--danger); color: #fff; }

.task-filter-form {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.task-filter-form label { margin: 0; }
.task-filter-form select { width: auto; padding: 8px 10px; font-size: 0.88rem; }

.task-list { list-style: none; margin: 0; padding: 0; }
.task-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.task-row:last-child { border-bottom: none; }
.task-check { margin: 0; flex-shrink: 0; }
.task-check-btn {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1.5px solid var(--border-strong);
  border-radius: 6px;
  background: none;
  color: var(--ok);
  font-size: 0.85rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.task-check-btn:hover { border-color: var(--ok); }
.task-row.is-done .task-check-btn { background: var(--ok-bg); border-color: var(--ok); }
.task-row-body { flex: 1; min-width: 0; }
.task-row-main { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.task-row-title { font-weight: 600; font-size: 0.92rem; flex: 1 1 140px; min-width: 100px; }
.task-row.is-done .task-row-title { text-decoration: line-through; color: var(--text-muted); }
.task-row-meta { color: var(--text-muted); font-size: 0.8rem; margin-top: 3px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.task-row-meta .task-meta-part:not(:first-child)::before { content: "· "; margin-right: 4px; color: var(--text-muted); }
.task-row-meta a { color: var(--text-muted); text-decoration: underline; }
.task-row-meta a:hover { color: var(--brand); }
.task-due { color: var(--text); font-weight: 600; }
.task-due.overdue { color: var(--danger); }
.task-due.today { color: var(--warn); }
.task-row-del { margin: 0; flex-shrink: 0; }
.task-row-del .icon-btn { color: var(--text-muted); font-size: 1.05rem; line-height: 1; padding: 2px 4px; border-radius: 6px; }
.task-row-del .icon-btn:hover { color: var(--danger); background: var(--danger-bg); }

/* ---------- Anklickbare Felder in der Aufgabenzeile (Frist, Prioritaet, Projekt) ---------- */

.task-meta-form {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
}
.task-field { position: relative; }

.task-chip-select {
  width: auto;
  max-width: 150px;
  padding: 5px 26px 5px 11px;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 999px;
  border-color: transparent;
  background-color: var(--muted-badge-bg);
  color: var(--muted-badge);
  text-overflow: ellipsis;
}
.task-chip-select.is-empty { font-weight: 500; color: var(--text-muted); }
.task-chip-select:hover { border-color: var(--border-strong); }
.task-chip-select:focus { box-shadow: 0 0 0 3px var(--brand-dim); background-color: var(--muted-badge-bg); }
.task-chip-select.badge-color-grau { background: var(--muted-badge-bg); color: var(--muted-badge); }
.task-chip-select.badge-color-blau { background: var(--brand-dim); color: var(--brand); }
.task-chip-select.badge-color-amber { background: var(--warn-bg); color: var(--warn); }
.task-chip-select.badge-color-rot { background: var(--danger-bg); color: var(--danger); }
.task-chip-select.badge-color-gruen { background: var(--ok-bg); color: var(--ok); }
.task-chip-select.badge-color-lila { background: rgba(167, 139, 250, 0.14); color: #a78bfa; }

.task-field-due .datefield-input {
  width: 112px;
  padding: 5px 24px 5px 11px;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 999px;
  background: var(--muted-badge-bg);
  border-color: transparent;
  color: var(--text);
}
.task-field-due .datefield-input:placeholder-shown { font-weight: 500; color: var(--text-muted); }
.task-field-due .datefield-input:hover { border-color: var(--border-strong); }
.task-field-due .datefield-btn { width: 22px; height: 22px; right: 3px; }
.task-field-due .datefield-btn svg { width: 13px; height: 13px; }

@media (max-width: 640px) {
  .task-row-main { flex-direction: column; align-items: stretch; }
  .task-row-title { flex: none; }
  .task-meta-form { width: 100%; }
  .task-chip-select, .task-field-due .datefield-input { max-width: none; flex: 1; }
}

/* ============ Breite Formular-Karten mit 2-Spalten-Raster ============ */

.form-card-wide { max-width: none; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 24px;
}
.form-grid > div { min-width: 0; }
.form-grid .form-grid-full { grid-column: 1 / -1; }
.form-grid label { margin-top: 14px; }
.form-grid .datefield { width: 100%; }
@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Startseite: Sektions-Baukasten des Relaunches
   --------------------------------------------------------------------------
   Eine Regel gilt durchgehend: keine Sektion, die nur aus Überschrift und
   Absatz besteht. Jede bringt ein Visual mit (Diagramm, Screenshot oder
   Icon). Getrennt werden die Sektionen über einen Wechsel der
   Hintergrundfläche und Haarlinien, nicht über immer mehr Leerraum, wie es
   vorher der Fall war.
   ========================================================================== */

/* ---------- 03 Ausgangslage ---------- */

.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.problem-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
}
.problem-icon {
  width: 40px;
  height: 40px;
  color: var(--brand);
  margin-bottom: 18px;
  display: block;
}
.problem-card h3 { margin: 0 0 10px; font-size: 1.12rem; }
.problem-card p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
@media (max-width: 860px) {
  .problem-grid { grid-template-columns: 1fr; }
}

/* ---------- 04 Leistungen ---------- */

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.service-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.service-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  .service-card, .service-card:hover { transition: none; transform: none; }
}
.service-visual {
  background: linear-gradient(160deg, rgba(227, 179, 65, 0.07), rgba(0, 0, 0, 0));
  border-bottom: 1px solid var(--border);
  padding: 22px 26px;
}
.service-visual svg { display: block; width: 100%; height: auto; }
.service-body { padding: 28px 30px 32px; }
.service-index {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--brand);
  margin-bottom: 8px;
}
.service-body h3 { margin: 0 0 10px; font-size: 1.55rem; letter-spacing: -0.01em; }
.service-claim {
  margin: 0 0 14px;
  font-weight: 600;
  color: var(--text);
  font-size: 1.1rem;
}
.service-body p:last-child { margin: 0; color: var(--text-muted); font-size: 1.02rem; }
@media (max-width: 860px) {
  .service-grid { grid-template-columns: 1fr; }
}

/* ---------- 05 Fallstudie ---------- */

.case-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: start;
}
.case-visual .showcase-frame { margin: 0; }
.case-visual img { display: block; width: 100%; height: auto; }
.case-step { margin-bottom: 22px; }
.case-step-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.case-step p { margin: 0; font-size: 1.05rem; color: var(--text); }
.case-step-result {
  border-left: 2px solid var(--brand);
  padding-left: 16px;
}
.case-step-result .case-step-label { color: var(--brand); }
.case-link { font-weight: 600; font-size: 0.95rem; }
@media (max-width: 860px) {
  .case-layout { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- 06 Ablauf, kompakt ---------- */

.flow-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}
/* Die Verbindungslinie hängt an jedem Schritt statt an der Liste und läuft
   vom eigenen Punkt bis zum Punkt des nächsten Schrittes. So richtet sie sich
   automatisch aus, egal wie viele Schritte es sind. Eine Linie mit festen
   Prozentwerten an der Liste saß daneben. */
.flow-step { position: relative; padding-right: 24px; }
.flow-step:last-child { padding-right: 0; }
.flow-step::after {
  content: "";
  position: absolute;
  left: 21px;
  right: 0;
  top: 7px;
  height: 1px;
  background: var(--border-strong);
}
.flow-step:last-child::after { content: none; }
.flow-step-dot {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--brand);
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
.flow-step h3 { margin: 0 0 8px; font-size: 1.08rem; }
.flow-step p { margin: 0; color: var(--text-muted); font-size: 0.92rem; }
.flow-more { text-align: center; margin: 44px 0 0; font-size: 0.95rem; }
@media (max-width: 860px) {
  .flow-steps { grid-template-columns: 1fr; gap: 26px; }
  .flow-step, .flow-step:last-child { padding: 0 0 0 32px; }
  .flow-step::after {
    left: 7px;
    right: auto;
    top: 21px;
    bottom: -26px;
    width: 1px;
    height: auto;
  }
  .flow-step-dot { position: absolute; left: 0; top: 0; margin-bottom: 0; }
}

/* ---------- 08 Häufige Fragen ---------- */

.faq-list {
  margin: 0 auto;
  border-top: 1px solid var(--border);
}
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 44px 20px 0;
  font-weight: 600;
  font-size: 1.05rem;
  position: relative;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* Eigenes Plus/Minus statt des nativen Dreiecks, damit es zum Rest der
   Seite passt. */
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -6.5px;
  background:
    linear-gradient(var(--brand), var(--brand)) center/13px 1.5px no-repeat,
    linear-gradient(var(--brand), var(--brand)) center/1.5px 13px no-repeat;
  transition: transform 0.25s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); background-size: 13px 1.5px, 0 0; }
.faq-item summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.faq-item p { margin: 0 0 22px; color: var(--text-muted); max-width: 68ch; }
@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after { transition: none; }
}

/* ============ Kontaktliste: Kennzahlen als Filter, Suchleiste ============ */

.contact-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 20px; }
@media (min-width: 1000px) { .contact-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.contact-kpis .kpi-card { padding: 16px 18px; }
.kpi-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--btn-dur) var(--ease), background var(--btn-dur) var(--ease), transform var(--btn-dur) var(--ease);
}
.kpi-card-link:hover { border-color: var(--border-strong); text-decoration: none; }
.kpi-card-link:active { transform: scale(0.98); }
.kpi-card-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.kpi-card-link.is-active { border-color: var(--brand); background: var(--brand-dim); }

.contact-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 8px; }
.contact-toolbar-search { flex: 1 1 280px; min-width: 0; }
.contact-toolbar-field { flex: 0 1 210px; min-width: 0; }
.contact-toolbar-reset { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); text-decoration: underline; }
.contact-toolbar-reset:hover { color: var(--brand); }
.contact-result-count { margin: 0 0 12px; }
.contact-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.contact-pager .hint { margin: 0; }
@media (max-width: 640px) {
  .contact-toolbar-field { flex: 1 1 100%; }
}

/* Kontaktliste: Aktionen nebeneinander, damit lange Listen kompakt bleiben. */
.contact-table td.actions > * { display: inline-flex; margin: 0 0 0 6px; }
.contact-table td.actions > :first-child { margin-left: 0; }
.contact-table td.actions .btn { padding: 8px 12px; font-size: 0.82rem; }
.contact-table th, .contact-table td { padding-left: 12px; padding-right: 12px; }
@media (max-width: 640px) {
  .contact-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .contact-kpis .kpi-card { padding: 12px 14px; }
  .contact-kpis .kpi-card-label { margin-bottom: 6px; font-size: 0.75rem; }
  .contact-kpis .kpi-card-value { font-size: 1.5rem; }
  .contact-kpis .kpi-card-hint { display: none; }
}

/* ============ Verkaufschance: Einmalpreis, Retainer, Gesamtwert ============ */

.opp-total { margin: 10px 0 0; padding: 10px 14px; border: 1px dashed var(--border-strong); border-radius: 10px; font-size: 0.92rem; color: var(--text-muted); }
.opp-total:empty { display: none; }
.opp-total strong { color: var(--text); font-size: 1.02rem; }
.opp-total-detail { color: var(--text-muted); font-size: 0.85rem; }
.opp-value-total { font-weight: 700; white-space: nowrap; }
.opp-value-detail { display: block; margin-top: 2px; color: var(--text-muted); font-size: 0.78rem; font-weight: 500; }
.pipeline-card-revenue .opp-value-detail { display: block; }

/* ============ Auswahlmenues fuer Filter und Sortierung (Haekchen oder Auswahlpunkt) ============ */

.filter-menu { position: relative; }
.filter-menu-trigger {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.98rem;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.filter-menu-trigger::-webkit-details-marker { display: none; }
.filter-menu-trigger::after {
  content: "";
  flex-shrink: 0;
  width: 7px; height: 7px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: translateY(-2px) rotate(45deg);
}
.filter-menu-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-menu-trigger:hover { border-color: var(--border-strong); }
.filter-menu[open] .filter-menu-trigger,
.filter-menu-trigger:focus-visible { outline: none; border-color: var(--brand); background: var(--surface-raised); box-shadow: 0 0 0 3px var(--brand-dim); }
.filter-menu-panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
  box-shadow: var(--shadow);
}
.filter-menu-option {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.filter-menu-option:hover { background: var(--brand-dim); }
.filter-menu-option input[type="radio"] { border-radius: 50%; }
.filter-menu-option input { width: 17px; height: 17px; margin: 0; flex-shrink: 0; accent-color: var(--brand); cursor: pointer; }
.pipeline-toolbar { margin-bottom: 14px; }
.pipeline-toolbar .contact-toolbar-field { flex: 0 1 240px; }

/* Dienstleistungs-Tags in Tabellen: nie mitten im Wort umbrechen, ganze Tags rutschen in die naechste Zeile. */
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tag-list .row-tag { white-space: nowrap; }
.contact-table td.tags-cell { min-width: 150px; }
.contact-table td:first-child { min-width: 150px; }
.contact-table th { letter-spacing: 0.05em; }

/* Zielverfolgung: Strategie-Block über der Aufgabenliste (nur Bens Instanz) */
.zv { display: grid; gap: 16px; margin-bottom: 28px; }
.zv .dash-panel { padding: 18px 20px; min-width: 0; }
.zv-row { display: grid; gap: 16px; }
.zv-row-3 { grid-template-columns: 1fr 1.15fr 1fr; }
.zv-row-2 { grid-template-columns: 1.5fr 1fr; }
.zv-label { margin: 0 0 10px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); }
.zv-sub { margin: 0 0 8px; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
.zv-lead { margin: 0 0 10px; font-size: 0.98rem; font-weight: 600; line-height: 1.45; }
.zv-muted { margin: 4px 0 0; font-size: 0.84rem; color: var(--text-muted); }
.zv-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 0.9rem; line-height: 1.45; color: var(--text); }
.zv-list li::marker { color: var(--text-muted); }
.zv-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.zv-chips li { font-size: 0.8rem; color: var(--text-muted); border: 1px solid var(--border-strong); border-radius: 999px; padding: 4px 10px; }
.zv-skip li { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.3); }
.zv-goal { border-color: var(--brand); background: linear-gradient(160deg, var(--brand-dim), var(--surface) 70%); }
.zv-goal-value { font-family: var(--font-heading); font-size: 2.3rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.zv-goal-label { margin: 8px 0 0; font-weight: 600; }
.zv-check { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 0.84rem; line-height: 1.45; color: var(--text-muted); }
.zv-check b { color: var(--warn); font-weight: 600; }
.zv-solutions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.zv-solution { display: grid; gap: 4px; align-content: start; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-raised); }
.zv-solution b { font-size: 0.95rem; }
.zv-solution span { font-size: 0.85rem; color: var(--text-muted); line-height: 1.45; }
.zv-strat { display: grid; grid-template-columns: 1fr 1.2fr; gap: 18px 24px; }
.zv-strat > div:last-child { grid-column: 1 / -1; }
.zv-channels { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 0.9rem; line-height: 1.45; }
.zv-channels span { color: var(--text-muted); }
.zv-channels li::marker { color: var(--brand); font-weight: 700; }
.zv-edge .zv-lead { color: var(--text); }
.zv-tasks-title { margin: 0 0 12px; font-size: 1.2rem; }
@media (max-width: 1100px) {
  .zv-row-3 { grid-template-columns: 1fr 1fr; }
  .zv-row-3 .zv-goal { grid-column: 1 / -1; }
  .zv-solutions { grid-template-columns: 1fr 1fr; }
  .zv-row-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .zv-row-3, .zv-solutions, .zv-strat { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .view-toggle-option { padding: 10px 13px; }
}

/* ============ Heller Verwaltungsbereich ============
   Alle Seiten mit Seitenleiste (body.app-body) laufen hell, die öffentliche
   Website bleibt dunkel. Fast alles hängt an den Tokens, deshalb werden hier
   zuerst die Farben umgestellt und danach nur die Stellen nachgezogen, die
   feste Farben für den dunklen Grund hatten. */
.app-body {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-raised: #f3f5f8;
  --text: #0f172a;
  --text-muted: #5b6578;
  --border: #e3e7ed;
  --border-strong: #cdd4de;
  /* Dunkleres Gold fuer den hellen Grund: #E3B341 auf Weiss waere 1,9:1
     und damit unlesbar. #8A6520 kommt auf 5,4:1. */
  --brand: #8a6520;
  --brand-strong: #6e4f18;
  --brand-dim: rgba(138, 101, 32, 0.09);
  --brand-glow: rgba(138, 101, 32, 0.28);
  --shadow: 0 16px 36px -18px rgba(15, 23, 42, 0.25);
  --ok: #15803d;
  --ok-bg: rgba(21, 128, 61, 0.1);
  --warn: #b45309;
  --warn-bg: rgba(217, 119, 6, 0.12);
  --danger: #dc2626;
  --danger-bg: rgba(220, 38, 38, 0.09);
  --muted-badge: #5b6578;
  --muted-badge-bg: #eef1f5;
}
.app-body .sidebar { background: #f8f9fb; }
/* Die Wortmarke ist fuer dunkle Flaechen gezeichnet: TEMPUS laeuft in Silber
   aus und waere auf Weiss kaum zu sehen. Vorher drehte hier ein
   invert(1) hue-rotate(180deg) das alte weisse Logo ins Dunkle. Bei der
   Goldfassung ergaebe dieselbe Rechnung Blau, also genau die Farbe, die
   abgeschafft wurde. Deshalb bekommt der Markenblock eine eigene dunkle
   Flaeche, statt die Farben zu verbiegen. */
.app-body .sidebar-brand-logo { filter: none; }
.app-body .sidebar-brand {
  background: #0a0a0c;
  border-radius: 12px;
  padding: 13px 12px;
  margin-bottom: 14px;
}
.app-body .sidebar-brand-suffix { color: #99a2b5; }
.app-body .kpi-card,
.app-body .dash-panel,
.app-body .form-card,
.app-body .pipeline-column { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); }
.app-body .pipeline-column { background: #f8f9fb; }
.app-body .pipeline-card { background: var(--surface); }
.app-body input, .app-body select, .app-body textarea { background: #ffffff; }
.app-body input:focus, .app-body select:focus, .app-body textarea:focus { background: #ffffff; }
.app-body .datefield-pop, .app-body .filter-menu-panel { background: #ffffff; }

/* Knöpfe: weiße Schrift auf Blau, beim Überfahren dunkleres Blau statt Weiß */
.app-body button[type="submit"]:not(.btn):not(.link-btn):not(.icon-btn),
.app-body .btn-primary,
.app-body .btn-cta { color: #ffffff; }
.app-body button[type="submit"]:not(.btn):not(.link-btn):not(.icon-btn):hover,
.app-body .btn-primary:hover,
.app-body .btn-cta:hover { background: var(--brand-strong); color: #ffffff; box-shadow: 0 10px 24px -12px var(--brand-glow); }
.app-body button[type="submit"]:not(.btn):not(.link-btn):not(.icon-btn):active,
.app-body .btn-primary:active,
.app-body .btn-cta:active { background: #0f3f80; color: #ffffff; box-shadow: inset 0 2px 6px rgba(15, 23, 42, 0.3); }
.app-body .btn:hover,
.app-body .view-toggle-option:hover,
.app-body .category-option:hover { background: var(--brand-dim); color: var(--brand-strong); }
.app-body .view-toggle-option:active,
.app-body .view-toggle-option.active,
.app-body .category-option:has(input:checked),
.app-body .datefield-day.is-selected { color: #ffffff; }
.app-body .view-toggle-option.active .tab-count,
.app-body .view-toggle-option.active .tab-count-warn { background: rgba(255, 255, 255, 0.25); color: #ffffff; }
.app-body .sidebar-badge { color: #ffffff; }
.app-body .admin-table tr:hover td,
.app-body .row-item:hover { background: rgba(15, 23, 42, 0.03); }
.app-body .badge-color-lila { background: rgba(124, 58, 237, 0.1); color: #6d28d9; }
.app-body .zv-skip li { text-decoration-color: rgba(15, 23, 42, 0.35); }

/* ============ Scroll-Effekte bei Abschnitten ============
   Hausregel aus CLAUDE.md, portiert aus dem event-webseite-Kern, den MYKA und
   JB Event Service nutzen. Gesteuert von public/js/scroll-effects.js.
   Ohne JavaScript und bei reduzierter Bewegung ist alles sofort scharf und
   voll breit, es wird also nichts versteckt. */

/* Ausbreiten: die Platte startet schmal mit runden Ecken auf dem Ton des
   vorherigen Bereichs und waechst auf die volle Breite. --x laeuft von 0
   nach 1 und kommt aus dem Skript. */
.has-expand [data-expand] {
  clip-path: inset(0 calc((1 - var(--x, 0)) * max(var(--gutter), min(5vw, 72px))) round calc((1 - var(--x, 0)) * 40px));
  will-change: clip-path;
}
/* Ein eingehuellter Abschnitt laeuft ueber die volle Breite, sein Inhalt
   bleibt im Seitenraster. Sonst waere die Platte so schmal wie der Container
   und das Ausbreiten unsichtbar. */
.expand-wrap > .section {
  max-width: none;
  margin-inline: 0;
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
}

/* Unschaerfe: was unter dem Bildschirm liegt, ist weich gezeichnet. */
.has-blur [data-blur-target] {
  filter: blur(8px);
  opacity: 0.35;
  transform: translateY(24px) scale(0.985);
  transition: filter 900ms var(--ease), opacity 900ms var(--ease), transform 900ms var(--ease);
}
.has-blur [data-blur-target].is-sharp { filter: none; opacity: 1; transform: none; }
/* Eigene Ebene nur, solange etwas unscharf ist, sonst leidet das Scrollen. */
.has-blur [data-blur-target]:not(.is-sharp) { will-change: filter, opacity, transform; }

/* ============ Helle Abschnitte ============
   Der Wechsel von Schwarz auf Weiss und zurueck. Er loest zugleich das
   Ausbreiten aus, das Skript erkennt ihn am Helligkeitssprung. Nur Tokens
   umstellen, danach traegt sich der Rest von allein. */
.section-light {
  background: #f6f5f7;
  --bg: #f6f5f7;
  --surface: #ffffff;
  --surface-raised: #eceaef;
  --text: #16181d;
  --text-muted: #5b6478;
  --border: #e1e0e6;
  --border-strong: #c9c7d1;
  /* #E3B341 kommt auf Weiss nur auf 1,9:1 und waere unlesbar. */
  --brand: #8a6520;
  --brand-strong: #6e4f18;
  --brand-dim: rgba(138, 101, 32, 0.1);
  --brand-glow: rgba(138, 101, 32, 0.26);
  color: var(--text);
}
.section-light .section-eyebrow { color: var(--brand); }
.section-light .section-title,
.section-light h2,
.section-light h3 { color: var(--text); }
.section-light p { color: var(--text-muted); }
/* Die Zeichnungen in den Karten sind fuer dunklen Grund gezeichnet. Sie
   behalten deshalb ihre eigene dunkle Buehne, genau wie bei MYKA. */
.section-light .service-visual {
  background: linear-gradient(180deg, #151317 0%, #0c0b0e 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.section-light .service-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(20, 18, 23, 0.05), 0 12px 32px -20px rgba(20, 18, 23, 0.25);
}
.section-light .service-card:hover { background: var(--surface); border-color: var(--border-strong); }
.section-light .step-card { background: var(--surface); border-color: var(--border); }
.section-light .step-card:hover, .section-light .step-card.is-scroll-active { background: var(--surface-raised); }
.section-light .row-item:hover, .section-light .row-item.is-scroll-active { background: rgba(20, 18, 23, 0.03); }
.section-light .row-tag { border-color: var(--border); color: var(--text-muted); }

/* ============ Oberflaechen in den Leistungskarten ============
   Vorbild MYKA: keine Strichzeichnung, sondern eine kleine echte Oberflaeche
   auf heller Flaeche. Gebaut aus HTML statt SVG, damit die Schrift scharf
   bleibt und sich alles mitskaliert.

   Die Inhalte sind schematisch und bewusst ohne Zahlen, die wie ein Beleg
   aussehen koennten. Gold traegt pro Bild genau ein Element. */
.service-visual {
  /* Feste Hoehe, damit alle vier Buehnen gleich hoch sind. Ohne sie bestimmt
     jede Oberflaeche ihre eigene Hoehe und die Karten stehen ungleich. Die
     Oberflaeche sitzt unten auf und laeuft oben aus dem Bild, wie bei MYKA. */
  height: 212px;
  padding: 0 24px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.mock {
  width: 100%;
  max-width: 330px;
  max-height: 100%;
  font-size: 11px;
  line-height: 1.3;
  color: #2a2f3a;
  background: linear-gradient(180deg, #ffffff 0%, #eef0f4 100%);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.5) inset, 0 18px 40px -22px rgba(0, 0, 0, 0.8);
  padding: 12px 12px 16px;
}
.mock-bar { display: flex; align-items: center; gap: 5px; margin-bottom: 10px; }
.mock-dot { width: 7px; height: 7px; border-radius: 50%; background: #cfd3db; flex: none; }
.mock-head { margin-left: 6px; font-weight: 700; letter-spacing: 0.01em; }
.mock-url { flex: 1; height: 9px; border-radius: 999px; background: #e2e5eb; margin-left: 6px; }

.mock-line { height: 7px; border-radius: 999px; background: #d8dce3; display: block; }
.w-45 { width: 45%; } .w-50 { width: 50%; } .w-60 { width: 60%; }
.w-70 { width: 70%; } .w-85 { width: 85%; }

/* 01 Web-App: Liste mit einer hervorgehobenen Zeile */
.mock-rows { display: grid; gap: 6px; }
.mock-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 8px; background: #ffffff;
  border: 1px solid #e6e9ee;
}
.mock-row.is-aktiv { border-color: #e3b341; box-shadow: 0 0 0 2px rgba(227, 179, 65, 0.18); }
.mock-ava { width: 16px; height: 16px; border-radius: 50%; background: #dfe3ea; flex: none; }
.mock-row .mock-line { flex: 1; }
.mock-chip {
  flex: none; padding: 2px 7px; border-radius: 999px;
  background: #eef0f4; color: #6b7384; font-size: 9px; font-weight: 700;
}
.mock-chip--gold { background: linear-gradient(135deg, #f3dc8c, #d9ab42); color: #241803; }

/* 02 Website: Breitbild und Handy nebeneinander */
.mock--web { display: flex; gap: 10px; align-items: flex-end; }
.mock-browser { flex: 1; min-width: 0; }
.mock-page { display: grid; gap: 7px; }
.mock-title { height: 12px; width: 72%; border-radius: 4px; background: #c3c8d2; }
.mock-btn {
  justify-self: start; margin-top: 3px; padding: 5px 11px; border-radius: 999px;
  background: linear-gradient(135deg, #f3dc8c, #d9ab42); color: #241803;
  font-size: 9px; font-weight: 700;
}
.mock-phone {
  flex: none; width: 66px; padding: 10px 8px 12px; display: grid; gap: 6px;
  background: #ffffff; border: 1px solid #e6e9ee; border-radius: 10px 10px 0 0;
}
.mock-notch { width: 22px; height: 4px; border-radius: 999px; background: #dfe3ea; justify-self: center; }
.mock-btn--sm { padding: 4px 8px; font-size: 8px; }

/* 03 Automatisierung: drei Schritte untereinander */
.mock--flow { position: relative; display: grid; gap: 0; }
.mock-flag {
  position: absolute; top: 10px; right: 10px;
  padding: 2px 8px; border-radius: 999px; font-size: 9px; font-weight: 700;
  background: linear-gradient(135deg, #f3dc8c, #d9ab42); color: #241803;
}
.mock-step {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 9px; border-radius: 9px; background: #ffffff;
  border: 1px solid #e6e9ee; font-weight: 600;
}
.mock-step.is-aktiv { border-color: #e3b341; box-shadow: 0 0 0 2px rgba(227, 179, 65, 0.18); }
.mock-ico {
  width: 17px; height: 17px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: #eef0f4; color: #6b7384; font-size: 9px; font-weight: 800;
}
.mock-ico--gold { background: linear-gradient(135deg, #f3dc8c, #d9ab42); color: #241803; }
.mock-pfeil { justify-self: center; width: 1px; height: 12px; background: #d8dce3; }

/* 04 Marketing und Sales: steigende Saeulen */
.mock--chart { display: grid; gap: 10px; }
.mock-kanaele { display: flex; gap: 5px; }
.mock-saeulen { display: flex; align-items: flex-end; gap: 6px; height: 74px; }
.mock-saeulen span {
  flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px;
  background: #d8dce3;
}
.mock-saeulen span.is-gold { background: linear-gradient(180deg, #f3dc8c, #c9972f); }
.mock-achse { display: flex; gap: 6px; }
.mock-achse span { flex: 1; height: 3px; border-radius: 999px; background: #e2e5eb; }

@media (max-width: 760px) {
  .service-visual { padding: 20px 18px 0; }
  .mock { font-size: 10px; }
}

/* ============ Laufband unter der Hero ============
   Übernommen von JB Event Service (.marquee im event-webseite-Kern), dort
   sind es die Anlässe, hier das, was gebaut wird. Die Spur enthält die Liste
   zweimal und wandert um genau 50 Prozent, dadurch ist der Rücksprung
   unsichtbar. Die Maske blendet beide Enden aus, damit die Begriffe nicht
   hart an der Fensterkante abgeschnitten werden. */
.laufband {
  overflow: hidden;
  padding-block: 28px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.laufband-spur {
  display: flex;
  width: max-content;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: laufband 46s linear infinite;
}
.laufband-spur li {
  display: flex;
  align-items: center;
  gap: 40px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}
/* Der Punkt gehört zum Eintrag, nicht zwischen zwei Einträge: so bleibt der
   Rhythmus auch an der Nahtstelle zwischen erster und zweiter Liste gleich. */
.laufband-spur li::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
}
@keyframes laufband { to { transform: translateX(-50%); } }

@media (max-width: 700px) {
  .laufband { padding-block: 20px; }
  .laufband-spur, .laufband-spur li { gap: 28px; }
  .laufband-spur li { font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .laufband-spur { animation: none; }
}

/* ============ Markenband mit Video ============
   Aufbau wie das farbige Band bei night.OS: volle Breite, eine Aussage in der
   Mitte, die Wortmarke unten als Wasserzeichen und am unteren Rand
   angeschnitten. Statt einer Farbfläche läuft hier das Video.

   Der Schleier ist kein glatter Schwarzwert, sondern oben und unten dichter:
   oben, damit die Überschrift steht, unten, damit die Wortmarke nicht mit
   einer hellen Stelle im Bild kollidiert. */
.markenband {
  position: relative;
  overflow: hidden;
  background: #000;
  padding: clamp(56px, 7vw, 100px) var(--gutter) clamp(64px, 7vw, 100px);
  /* Die Hülle, die der Ausbreit-Effekt um das Band legt, trägt den Ton des
     vorherigen Abschnitts, hier also Hell. Bei gebrochenen Pixelhöhen blitzt
     davon eine helle Haarlinie an der Unterkante durch. Ein Pixel negativer
     Außenabstand lässt das Band die Hülle unten überdecken. */
  margin-bottom: -1px;
  text-align: center;
}

.markenband-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Derselbe vollständige Clip wie im Gerät im Hero, Bens ausdrücklicher
     Wunsch: er soll von vorne bis hinten durchlaufen. Er hat zwei dunkle
     Strecken (1,5 bis 2,3 s und 4,0 bis 5,0 s, Mittelwert 2 von 255), die
     hier als kurze Blenden zwischen den Einstellungen lesbar sind. */
  filter: brightness(1.3) saturate(1.1);
}

.markenband-schleier {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.46) 44%, rgba(0,0,0,0.74) 100%),
    radial-gradient(120% 80% at 50% 40%, rgba(0,0,0,0), rgba(0,0,0,0.42) 100%);
}

/* Bens Vorgabe: nicht die volle Breite, aber deutlich mehr als vorher, etwa
   drei Viertel der Kopfleiste. Die Kopfleiste ist --container breit, 75
   Prozent davon sind 885 px. Damit steht die erste Frage auf einer Zeile,
   statt "Website?" allein umzubrechen. */
.markenband-inner {
  position: relative;
  z-index: 1;
  max-width: calc(var(--container) * 0.75);
  margin-inline: auto;
}
.markenband-inner h2 {
  font-size: clamp(1.95rem, 4vw, 3.3rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 18px;
}
.markenband-inner p {
  font-size: clamp(1.02rem, 1.25vw, 1.2rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.86);
  margin: 0 auto 14px;
}
.markenband-inner p:last-child { margin-bottom: 0; }

/* Das Wasserzeichen liegt zwischen Video und Text: über dem Bild, aber hinter
   der Aussage, genau wie bei night.OS. Es sitzt auf der Unterkante des
   Abschnitts. Grossbuchstaben haben keine Unterlängen, deshalb darf die
   Grundlinie bis an den Rand rücken, ohne dass etwas abgeschnitten wird.

   bottom: -0.12em rechnet den halben Durchschuss heraus: bei line-height 1
   liegt die Grundlinie 0,14em über der Kasten-Unterkante, ohne diesen Versatz
   bliebe darunter ein Streifen Luft stehen. */
.markenband-wortmarke {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.12em;
  z-index: 0;
  margin: 0;
  text-align: center;
  font-family: 'Montserrat', var(--font-heading);
  font-weight: 800;
  /* Die Größe setzt das Skript, damit der Zug genau von Rand zu Rand läuft.
     13,5vw ist nur der Rückfall ohne JavaScript, er kommt ungefähr hin.
     overflow-x: clip schneidet den Überstand ab, ohne die Unterlängen zu
     beschneiden: mit hidden wäre auch senkrecht Schluss, und das p wäre
     wieder abgesägt. */
  width: 100%;
  overflow-x: clip;
  overflow-y: visible;
  font-size: 13.5vw;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.14);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
/* Montserrat liegt hier nur aufrecht als Datei vor. Ein vom Browser schräg
   gestelltes Kursiv fiele je nach Browser anders aus, deshalb der Winkel
   ausdrücklich: 12 Grad, gemessen am Schriftzug der Logodatei. */
.markenband-wortmarke em {
  display: inline-block;
  font-style: normal;
  transform: skewX(-12deg);
}

@media (max-width: 760px) {
  .markenband-inner h2 { margin-bottom: 18px; }
}

/* ============ Fußzeile ============
   Aufbau nach dem Vorbild von Majestic Marketing: links die Marke mit einem
   Satz, daneben drei Spalten. Dunkel statt hell, weil Schwarz der Grundton
   der Marke ist. Die Innenkanten folgen dem Seitenraster, der Block läuft
   also über die volle Breite, sein Inhalt bleibt im Raster. */
.site-footer {
  border-top: 1px solid var(--border);
  padding-block: 72px 32px;
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
}
.site-footer-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr 1.2fr;
  gap: 48px 40px;
  align-items: start;
}
.site-footer-logo { height: 26px; width: auto; display: block; margin-bottom: 18px; }
.site-footer-satz {
  margin: 0;
  max-width: 34ch;
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.6;
}

.site-footer-spalte { display: flex; flex-direction: column; gap: 12px; }
.site-footer-kopf {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.site-footer-spalte a {
  color: var(--text-muted);
  font-size: 0.96rem;
  width: fit-content;
  transition: color 200ms var(--ease);
}
.site-footer-spalte a:hover { color: var(--brand); }
.site-footer-anschrift {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.96rem;
  line-height: 1.5;
  white-space: pre-line;
}

.site-footer-schluss {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
  color: var(--text-muted);
}
.site-footer-recht { display: flex; gap: 22px; }
.site-footer-schluss a { color: var(--text-muted); }
.site-footer-schluss a:hover { color: var(--brand); }

@media (max-width: 900px) {
  .site-footer-inner { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .site-footer-marke { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .site-footer { padding-block: 56px 28px; }
  .site-footer-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* Anfragen im Verwaltungsbereich: die Auswahl aus dem Konfigurator. */
.request-card-wahl {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.request-card-wahl li {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
}
.request-card-lage { margin: 10px 0 0; font-size: 0.88rem; color: var(--text-muted); }

/* ============ Anfrage-Konfigurator ============
   Aufbau und Maße eins zu eins vom Konfigurator der MYKA-Webseite
   (client/styles/main.css, Abschnitt "Konfigurator"), nur auf die Tokens
   dieser Seite umgestellt: Gold statt Chrom, Satoshi statt Inter, unsere
   Flächen und Rahmen.

   Alles liegt unter .konfigurator, damit die kurzen Namen (Kachel, Feld,
   Schritt) nicht mit dem Rest der App kollidieren. */
.konfigurator-seite {
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 128px var(--gutter) 96px;
}
.konfigurator-kopf { text-align: center; margin-bottom: 40px; }
.konfigurator-kopf h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}

/* Überschriften im Silber der Wortmarke. background-clip: text gehört nur auf
   das Element, das den Text selbst trägt: steht ein Kindelement darin, bildet
   der Browser die Maske aus allen Glyphen der Nachfahren, auch aus
   weggeschnittenen, und die tauchen als Geisterschrift auf. Der Titel der
   Übersicht trägt deshalb ein eigenes span um den Text, das Zeichen daneben
   bleibt außen vor. */
.konfigurator-kopf h1,
.step__titel,
.silber-text,
.konfigurator--danke h2 {
  background-image: var(--silber-sheen);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.konfigurator-kopf p {
  max-width: 520px;
  margin: 0 auto;
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.6;
}

/* Jede eigene display-Angabe schlaegt das [hidden] des Browsers. Im
   Konfigurator blendet das Skript Schritte, Knoepfe und Zeilen ueber genau
   dieses Attribut aus, deshalb hier einmal zentral festhalten, dass hidden
   auch wirklich hidden heisst. Ohne diese Regel stand "Anfrage senden"
   schon im ersten Schritt neben "Weiter". */
.konfigurator [hidden] { display: none !important; }

/* Die App faerbt jedes label in einem Formular grau ("form label"). Hier sind
   die Kacheln selbst labels, dadurch war ihre ganze Beschriftung grau. Im
   Konfigurator gilt Weiss, grau bleibt nur, was ausdruecklich Beiwerk ist:
   der Zusatz "optional" und die noch offenen Zeilen der Uebersicht. */
.konfigurator label { color: var(--text); }

.konfigurator {
  padding: clamp(1.25rem, 0.8rem + 2vw, 2rem);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 8px);
  background: var(--surface);
}

/* ---------- Fortschritt ---------- */
.konfigurator__fortschritt { margin-bottom: 2rem; }
.konfigurator__fortschritt-text {
  display: flex;
  justify-content: space-between;
  margin: 0 0 0.6rem;
  font-size: 0.875rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.balken { height: 6px; border-radius: 999px; background: var(--surface-raised); overflow: hidden; }
.balken__fuellung {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background-image: var(--gold-sheen);
  background-size: 230% 100%;
  background-position: 60% 0;
  transition: width 400ms var(--ease);
}

.konfigurator__raster { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) {
  .konfigurator__raster { grid-template-columns: minmax(0, 1fr) 320px; gap: 2.5rem; align-items: start; }
}

/* ---------- Schritt ---------- */
.konfigurator .step { margin: 0 0 2.5rem; padding: 0; border: 0; min-width: 0; }
.konfigurator.ist-gestuft .step { margin-bottom: 0; }
.konfigurator .step:focus { outline: none; }
.step__titel { padding: 0; font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); font-weight: 800; letter-spacing: -0.02em; }
.step__hinweis { margin: 0.4rem 0 1.5rem; color: var(--text); font-size: 0.9375rem; }

/* ---------- Kacheln ---------- */
.kacheln { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kacheln--1 { grid-template-columns: 1fr; }
@media (max-width: 719px) {
  /* Zwei breite Kacheln nebeneinander werden unter 720 px zu schmal für
     Zeichen, Beschriftung und Haken in einer Zeile. */
  .kacheln--2 { grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
  .kacheln { grid-template-columns: 1fr; }
}
.kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 120px;
  padding: 1.1rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-raised);
  text-align: center;
  cursor: pointer;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}
/* Unsichtbar, aber nicht display: none, damit das Feld mit der Tastatur
   erreichbar bleibt und sich an Vorleseprogramme meldet. */
.kachel input { position: absolute; opacity: 0; pointer-events: none; }
.kachel__zeichen {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--brand-dim);
  color: var(--brand);
}
.kachel__zeichen .icon { width: 1.3rem; height: 1.3rem; }
.kachel__label { font-size: 0.9375rem; font-weight: 700; line-height: 1.25; }
.kachel__hinweis { font-size: 0.8125rem; color: var(--text); line-height: 1.4; }
.kachel--breit {
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
  min-height: 88px;
  padding: 1rem 1.1rem;
  gap: 0.9rem;
}
.kachel--breit { align-items: center; }
.kachel--breit .kachel__text { display: grid; gap: 0.15rem; flex: 1; }
.kachel--breit .kachel__zeichen { width: 38px; height: 38px; }
.kachel--breit .kachel__zeichen .icon { width: 1.15rem; height: 1.15rem; }
.kachel__haken {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  color: transparent;
  transition: background-color 150ms, border-color 150ms;
}
.kachel__haken .icon { width: 0.9rem; height: 0.9rem; stroke-width: 3; }
@media (hover: hover) {
  .kachel:hover { border-color: rgba(227, 179, 65, 0.45); }
}
.kachel:has(input:checked) { border-color: var(--brand); background: var(--brand-dim); }
.kachel:has(input:checked) .kachel__haken { background: var(--brand); border-color: var(--brand); color: #140d02; }
.kachel:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ---------- Felder ---------- */
.konfigurator .feld { display: grid; gap: 0.45rem; margin-bottom: 1.25rem; min-width: 0; }
.feld__label { font-size: 0.875rem; font-weight: 700; }
.feld__frei { margin-left: 0.35rem; font-weight: 500; color: var(--text-muted); }
.feld__pflicht { color: var(--brand); }
.feld--schmal { max-width: 260px; }
.feld-raster { display: grid; gap: 0 1rem; }
@media (min-width: 640px) {
  .feld-raster { grid-template-columns: 1fr 1fr; }
  .feld--voll { grid-column: 1 / -1; }
}
.konfigurator .eingabe {
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--text);
  font: 500 1rem/1.4 var(--font-body);
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}
.konfigurator .eingabe::placeholder { color: rgba(245, 247, 250, 0.38); }
.konfigurator .eingabe:focus { outline: none; border-color: var(--brand); background: var(--bg); }
.eingabe--flaeche { min-height: 120px; resize: vertical; }
.feld__eingabe--zeichen { position: relative; }
.feld__eingabe--zeichen > .icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  translate: 0 -50%;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--text-muted);
  pointer-events: none;
}
.feld__eingabe--zeichen .eingabe { padding-left: 2.8rem; }

.feld-fehler { margin: 0.5rem 0 0; color: var(--danger); font-size: 0.875rem; font-weight: 600; }
.form-alert {
  margin: 0 0 1.5rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  color: var(--danger);
  font-weight: 600;
}

/* ---------- Knöpfe: Maße wie bei MYKA, Material wie hier ---------- */
.konfigurator .button,
.konfigurator--danke .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.75rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-position 650ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}
.konfigurator .button .icon,
.konfigurator--danke .button .icon { width: 1.05em; height: 1.05em; stroke-width: 2.2; }
.button--primaer {
  background-image: var(--gold-sheen);
  background-size: 230% 100%;
  background-position: 60% 0;
  color: #140d02;
  text-shadow: 0 1px 0 rgba(255, 248, 228, 0.35);
}
@media (hover: hover) {
  .button--primaer:hover { background-position: 0% 0; }
}
.button--ghost { border-color: var(--border-strong); color: var(--text); background: transparent; }
.button--ghost:hover { border-color: var(--brand); color: var(--brand); }
.button--text { background: none; color: var(--text-muted); padding-inline: 0.5rem; }
.button--text:hover { color: var(--text); }
.konfigurator .button:focus-visible,
.konfigurator--danke .button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.konfigurator__nav,
.konfigurator__senden {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1.5rem;
  margin-top: 2rem;
  border-top: 1px solid var(--border);
}
.konfigurator__nav { justify-content: space-between; }
.konfigurator__senden .button--text { margin-left: auto; }
@media (max-width: 520px) {
  .konfigurator__senden .button:not(.button--text) { flex: 1 1 100%; }
}

/* ---------- Übersicht ---------- */
.uebersicht {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
}
@media (min-width: 1024px) {
  .uebersicht { position: sticky; top: 7rem; }
}
.uebersicht__kopf { margin-bottom: 0.5rem; }
.uebersicht__titel { display: flex; align-items: center; gap: 0.5rem; font-size: 1.125rem; margin: 0; }
.uebersicht__titel .icon { width: 1.15rem; height: 1.15rem; color: var(--brand); }
.uebersicht__liste { margin: 0; display: grid; }
.uebersicht__liste div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}
.uebersicht__liste div:last-child { border-bottom: 0; }
.uebersicht__liste dt { color: var(--text); }
.uebersicht__liste dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.uebersicht dd.ist-leer { color: rgba(245, 247, 250, 0.4); font-weight: 500; font-style: italic; }
.uebersicht__notiz { margin: 1rem 0 0; font-size: 0.8125rem; color: var(--text); line-height: 1.5; }

/* ---------- Danke ---------- */
.konfigurator--danke { text-align: center; padding-block: clamp(2rem, 1.5rem + 3vw, 3.5rem); }
.konfigurator--danke h2 { margin: 0 0 0.75rem; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.konfigurator--danke p { color: var(--text); max-width: 30rem; margin: 0 auto 1.75rem; line-height: 1.6; }