/* ==========================================================================
   evosystems · MarkX™ — Design-System
   Farbwelt: Bronzegold aus dem MarkX-Schriftzug des Logos, dunkles Anthrazit
   ========================================================================== */

/* Selbst gehostete Fonts (SIL OFL, Lizenzen in /assets/fonts/) */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-italic-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Manrope (variabel, 200-800) fuer die Ueberschriften */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-var-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-var-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Sanfte Seitenwechsel (Chrome/Edge/Safari; Firefox: normaler Wechsel) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

:root {
  --bg: #1c1c1c;
  --bg-2: #232323;
  --bg-3: #2a2a2a;
  --panel: #333333;
  --panel-2: #3d3d3d;
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(234, 169, 63, 0.42);
  /* Bronzegold-Familie, aus dem MarkX-Schriftzug des Logos gesampelt */
  --gold: #eaa93f;
  --gold-bright: #f7c463;
  --copper: #d2862a;
  /* Chips (Eyebrow, Card-Tags): transluzenter Bronze-Tint mit Haarlinie
     statt der frueheren deckenden Braunflaeche. */
  --chip-bg: rgba(234, 169, 63, 0.10);
  --chip-line: rgba(234, 169, 63, 0.34);
  --chip-text: #f7c463;
  --yellow: #f2b645;
  --on-yellow: #1a1a1a;
  --head-soft: #e8e3d5;
  --text: #dedede;
  --muted: #b0b0b0;
  --dim: #8a8a8a;
  --serif: "Fraunces", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  /* Ueberschriften: Manrope, selbst gehostet (SIL OFL) – identisch auf allen Geraeten. */
  --display: "Manrope", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --sans: "Lato", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  /* Direkt aus dem MarkX-Schriftzug im Logo gesampelt: senkrechter Verlauf,
     helles Amber-Gold oben -> tiefes Bronze unten. */
  --markx-top: #f2b645;
  --markx-mid: #d2862a;
  --markx-deep: #8a4a04;
  --grad-markx: linear-gradient(180deg, #e8ab40 0%, #f2b645 16%, #eda23a 36%, #d2862a 56%, #b06d10 76%, #8a4a04 100%);
  /* Schrift: derselbe Verlauf, unten bei #b06d10 abgefangen — das originale
     #8a4a04 kaeme auf dem dunklen Grund nur auf 2.5:1. */
  --grad-head: linear-gradient(180deg, #f7c463 0%, #f2b645 22%, #e09a33 50%, #c47c1c 78%, #b06d10 100%);
  /* Flaechen (Buttons, Chips, Flags): heller gehalten, damit die dunkle
     Beschriftung darauf ihren Kontrast behaelt. */
  --grad-gold: linear-gradient(180deg, #f9d07a 0%, #f2b645 45%, #d2862a 100%);
  /* Luft unter der letzten Zeile von h1/h2, siehe Kommentar bei den
     Ueberschriften. Gemessen fehlen 0.059em, 0.08em gibt Reserve. */
  --descender-fix: 0.08em;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  --r: 0px;
  --wrap: 1180px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: clip;
}

/* Die drei warmen Ambient-Lichtquellen (body::before) sind entfallen. Sie
   stammten aus der Zeit, als der Hintergrund flaches Anthrazit war; seit
   Partikelnetz und Bronze-Typo lagen sie als goldener Nebel darueber. */

/* film grain — inline SVG noise, no external request */
html::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  z-index: 70;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: rgba(210, 134, 42, 0.35); color: #fff; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
html { scrollbar-width: thin; scrollbar-color: rgba(234, 169, 63, 0.25) var(--bg); }

/* thin double gold frame, fixed, like the poster border */
body::after {
  content: "";
  position: fixed;
  inset: 10px;
  pointer-events: none;
  border: 1px solid rgba(214, 164, 110, 0.28);
  outline: 1px solid rgba(214, 164, 110, 0.12);
  outline-offset: 3px;
  z-index: 60;
}
@media (max-width: 720px) { body::after { display: none; } }

main, header.site, footer.site-footer { position: relative; z-index: 1; }

img { max-width: 100%; display: block; }
a { color: var(--gold-bright); text-decoration: none; }
a:hover { color: #fff; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
@media (max-width: 640px) { .wrap { padding: 0 18px; } }

.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--gold);
  color: #232323; padding: 8px 16px; z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Typography ---------- */

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.16; letter-spacing: -0.02em; color: var(--head-soft); text-wrap: balance; }
/* Gamma: Seiten- und Abschnittsueberschriften im Goldverlauf, Card-Titel cremeweiss */
h1, h2 {
  background: var(--grad-head);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Unterlaengen (g, j, p, y, Q) der LETZTEN Zeile wurden abgeschnitten:
   line-height 1.16 ist knapper als die Inhaltsflaeche von Manrope (1.37em),
   dadurch ragt die Unterlaenge rund 0.059em unter die Elementbox – und
   background-clip:text malt nur innerhalb dieser Box. Innere Zeilen waren nie
   betroffen, weil deren Unterlaengen in die naechste Zeilenbox fallen.
   Der Innenabstand schafft den fehlenden Platz. Er wird bewusst NICHT ueber
   einen kleineren Aussenabstand ausgeglichen: benachbarte Aussenabstaende
   fallen zusammen (max der positiven Werte), ein reduzierter Wert wird also
   verschluckt, sobald das folgende Element selbst einen oberen Abstand hat --
   der Ausgleich griff dann mal und mal nicht. Lieber ueberall dieselben
   ~3-6px mehr Luft unter der Ueberschrift als unvorhersehbare Spruenge.
   Bei inline-.gold-text aendert padding die Zeilenhoehe ohnehin nicht. */
h1, h2, .gold-text { padding-bottom: var(--descender-fix); }

h1 { font-size: clamp(2.1rem, 6.5vw, 4.4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); letter-spacing: -0.005em; }
h3 { font-size: 1.25rem; line-height: 1.3; }
/* Manrope hat keinen echten Kursivschnitt – Hervorhebung laeuft ueber das Gewicht,
   sonst wuerde der Browser eine schiefgestellte Fassung faelschen. */
h1 em, h2 em { font-style: normal; font-weight: 300; }

/* Derselbe senkrechte Verlauf wie die Ueberschriften. Der fruehere waagerechte
   Shimmer ist entfallen: er wuerde den senkrechten Verlauf ueberfahren. */
.gold-text {
  background: var(--grad-head);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h1.gold-text, .hero .gold-text { filter: drop-shadow(0 0 40px rgba(210, 134, 42, 0.26)); }

/* Gamma-Eyebrow: kompakter Chip, getoent statt deckend */
.kicker {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chip-text);
  background: var(--chip-bg);
  border: 1px solid var(--chip-line);
  padding: 6px 14px;
  margin-bottom: 20px;
}

.lead { font-size: 1.14rem; color: var(--muted); max-width: 46em; }
/* Der globale margin-Reset laesst aufeinanderfolgende Absaetze sonst zusammenkleben */
.lead + .lead { margin-top: 14px; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

/* ornament divider ◆ */
.orn {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  color: var(--gold); margin: 0 auto;
}
.orn::before, .orn::after { content: ""; height: 1px; width: min(180px, 26vw); background: linear-gradient(90deg, transparent, var(--line-strong)); }
.orn::after { background: linear-gradient(270deg, transparent, var(--line-strong)); }

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

header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(26, 26, 26, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 74px; }
.brand { display: flex; align-items: baseline; gap: 10px; font-family: var(--display); }
/* align-self, weil .brand die Textteile an der Grundlinie ausrichtet – die
   Marke soll dagegen auf der Mitte der Wortmarke sitzen. */
.brand-mark { height: 36px; width: auto; flex: none; align-self: center; }
.brand .evo {
  font-size: 1.45rem; font-weight: 700; letter-spacing: 0.04em;
  background: var(--grad-head); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand .dia { color: var(--copper); font-size: 0.7rem; transform: translateY(-3px); }
.brand .product { font-size: 0.95rem; color: var(--muted); letter-spacing: 0.12em; }
/* Unter 380px reicht die Zeile fuer Marke + Wortmarke + "MarkX™" + Burger nicht
   mehr: .brand wird gestaucht und "MarkX™" laeuft unter den Button. Der
   Produktzusatz weicht, die Bildmarke bleibt. */
@media (max-width: 380px) { .brand .dia, .brand .product { display: none; } }

.links { display: flex; gap: 30px; }
/* Die Bildmarke verbreitert .brand um 36px. Ohne den engeren Abstand hier
   wuerde die Leiste erst ab ~985px einzeilig passen und der Burger muesste
   bis 1000px hoch. */
@media (max-width: 1240px) {
  .links { gap: 17px; }
  .links a { font-size: 0.9rem; letter-spacing: 0; }
  .lang-switch { gap: 10px; padding-left: 14px; }
}
.links a {
  font-family: var(--sans); font-size: 0.95rem; letter-spacing: 0.02em; white-space: nowrap;
  color: var(--muted); padding: 6px 0; border-bottom: 1px solid transparent;
}
.links a:hover { color: var(--gold-bright); }
.links a[aria-current="page"] { color: var(--gold-bright); border-bottom-color: var(--gold); }

.lang-switch { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; margin-left: 4px; padding-left: 20px; border-left: 1px solid var(--line-strong); }
.lang-switch a, .lang-switch .lang-current {
  font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 0; border-bottom: 1px solid transparent;
}
.lang-switch a { color: var(--muted); }
.lang-switch a:hover { color: var(--gold-bright); }
.lang-switch .lang-current { color: var(--gold-bright); border-bottom-color: var(--gold); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line-strong); color: var(--gold);
  font-size: 1.3rem; padding: 4px 12px; border-radius: 0; cursor: pointer;
}

/* 1080: mit Sprachumschalter passt die deutsche Leiste (auch kompakt ab
   1240px) erst ab 1070px in eine Zeile. Darunter Burger statt Umbruch -
   iPad quer (1024px) bekommt also das Menue, groessere iPads die Leiste. */
@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .links {
    display: none; position: absolute; top: 74px; left: 0; right: 0;
    flex-direction: column; gap: 0; background: var(--bg-2);
    border-bottom: 1px solid var(--line); padding: 12px 28px 20px;
  }
  .links.open { display: flex; }
  .links { box-shadow: 0 24px 40px rgba(0, 0, 0, 0.5); }
  .links a { padding: 14px 0; border-bottom: 1px solid rgba(214, 164, 110,0.08); font-size: 1.05rem; }
  .lang-switch { border-left: none; padding-left: 0; margin-left: 0; margin-top: 10px; }
}

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

.hero { padding: clamp(70px, 10vw, 130px) 0 clamp(60px, 8vw, 100px); position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px; align-items: center; }
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-grid > *, .split > *, .grid > *, .steps > * { min-width: 0; }
@media (max-width: 720px) {
  h1, h2, h3 { hyphens: auto; }
  h1 { font-size: clamp(1.9rem, 8.5vw, 4.8rem); }
}

.hero h1 { margin: 10px 0 22px; }
.hero .lead strong { color: var(--text); }

.hero-logo { position: relative; display: grid; place-items: center; }
.hero-logo img { width: min(420px, 80vw); height: auto; border-radius: 0; }
/* Kein Schein um das Logo: der frueher hier liegende Radialverlauf
   (.hero-logo::before) und das drop-shadow liessen es unscharf wirken.
   Das Artwork bringt seinen Bloom selbst mit. Ein box-shadow darf hier
   nicht zurueckkommen — er wuerde bei dem transparenten PNG ein Rechteck
   um die Bildbox zeichnen. */

/* Hero-Keyvisual als Rasterbild (anders als .hero-logo, das ein freigestelltes
   PNG traegt). Der Grund des Artworks ist reines Schwarz und damit dunkler als
   --bg, deshalb Haarlinie und Schatten wie bei den uebrigen Bildern der Seite —
   so liest sich die Flaeche als gerahmtes Motiv und nicht als Fehler.
   Es steht neben dem Lead-Absatz, nicht neben dem ganzen Hero: eine Spalte
   ueber die volle Hero-Hoehe wuerde die Ueberschrift stauchen und "MarkX™-"
   allein umbrechen lassen. --visual gibt die Kantenlaenge vor; sie ist so
   gewaehlt, dass die Bildhoehe ungefaehr der Hoehe des Textblocks entspricht. */
.lead-split {
  --visual: 300px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--visual);
  gap: 44px;
  align-items: stretch;
}
.lead-split .lead { max-width: none; }
/* Das Bild ist absolut positioniert und traegt damit nichts zur Zeilenhoehe
   bei: die Reihe wird allein vom Textblock aufgespannt, das Bild nimmt mit
   height:100% genau diese Hoehe und leitet seine Breite aus dem quadratischen
   Seitenverhaeltnis ab. Eine feste Breite koennte das nicht leisten — bei
   1180px passten 200px, bei 900px 300px, weil der Text mit schmalerer Spalte
   hoeher wird. Das margin-top spiegelt das des Lead-Absatzes, sonst waere die
   Reihe 20px hoeher als der Text. */
.hero-visual { position: relative; margin: 20px 0 0; }
.hero-visual img {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  /* Deckel: ohne ihn wuerde das globale img{max-width:100%} bei hohem Text die
     Breite auf die Spalte klemmen, waehrend die Hoehe stehen bleibt — das Bild
     wuerde verzerrt. Lieber etwas niedriger als der Text als verzogen. */
  max-height: var(--visual);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
@media (max-width: 1080px) { .lead-split { --visual: 260px; gap: 34px; } }
@media (max-width: 820px) {
  .lead-split { grid-template-columns: 1fr; gap: 0; }
  .hero-visual { position: static; margin-top: 30px; }
  .hero-visual img {
    position: static; transform: none;
    height: auto; max-height: none; width: min(320px, 100%);
  }
}

.cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin: 30px 0 14px; }
@media (max-width: 520px) {
  .cta-row { flex-direction: column; }
  .cta-row .btn, .cta-band .btn { display: block; width: 100%; text-align: center; }
  .price-card .btn { text-align: center; }
}

.btn {
  display: inline-block; font-family: var(--sans); font-size: 0.97rem; font-weight: 700; letter-spacing: 0.01em;
  padding: 14px 28px; border-radius: 0; border: 1px solid transparent;
  position: relative; overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-gold {
  background: var(--grad-gold); color: #1a1a1a; font-weight: 700;
  box-shadow: 0 8px 28px rgba(210, 134, 42, 0.35);
}
.btn-gold::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
  transform: translateX(-120%);
}
.btn-gold:hover::after { transition: transform 0.7s var(--ease); transform: translateX(120%); }
.btn-gold:hover { color: #000; box-shadow: 0 0 30px rgba(210, 134, 42, 0.4), 0 10px 34px rgba(210, 134, 42, 0.4); }
/* Gamma-Sekundaerbutton: weisse Kontur auf transparentem Grund */
.btn-ghost { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); color: #fff; }

.note { font-family: var(--sans); font-weight: 700; color: var(--text); font-size: 0.95rem; letter-spacing: 0.02em; }

/* ---------- Sections ---------- */

section { padding: clamp(72px, 10vw, 130px) 0; }
/* Transluzent statt --bg-2, damit das Partikelnetz auch hier durchscheint.
   Ueber --bg ergibt 2.5% Weiss praktisch denselben Ton wie vorher (#232323). */
section.alt { background: rgba(255, 255, 255, 0.025); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-head { max-width: 760px; margin-bottom: 46px; }
.sec-head.center { margin-left: auto; margin-right: auto; }
.sec-head h2 { margin-bottom: 14px; }

/* ---------- Cards ---------- */

.grid { display: grid; gap: 22px; }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid.c3, .grid.c4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; } }

/* Gamma-Card: flaches Neutralgrau, eckig, linke Goldleiste als Signatur */
.card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
  padding: 30px 28px 30px 32px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.card::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #f9d07a, #c47c1c);
}
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(249, 208, 122, 0.09), transparent 60%);
  transition: opacity 0.35s var(--ease);
}
.card:hover::before { opacity: 1; }
.card:hover {
  transform: translateY(-4px);
  background: var(--panel-2);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}
.card > * { position: relative; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 0.99rem; }
.card .tag {
  display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--chip-text); background: var(--chip-bg);
  border: 1px solid var(--chip-line); border-radius: 0;
  padding: 4px 11px; margin-bottom: 16px;
}

.card .num {
  font-family: var(--display); font-size: 1rem; color: var(--copper);
  letter-spacing: 0.1em; display: block; margin-bottom: 10px;
}

/* feature list inside cards */
.card ul, .price-card ul { list-style: none; margin-top: 14px; }
.card ul li, .price-card ul li {
  padding: 7px 0 7px 26px; position: relative; color: var(--muted); font-size: 0.97rem;
  border-bottom: 1px solid rgba(214, 164, 110, 0.08);
}
.card ul li:last-child, .price-card ul li:last-child { border-bottom: none; }
.card ul li::before, .price-card ul li::before {
  content: "◆"; position: absolute; left: 2px; top: 8px; font-size: 0.55rem; color: var(--copper);
}
.price-card ul li.off { color: var(--dim); }
.price-card ul li.off::before { content: "—"; top: 7px; font-size: 0.8rem; }

/* ---------- Frage-Kacheln (Der Einstieg) ----------
   Native <details class="card qa-card">: klappt ohne JS auf, ist per
   Tastatur bedienbar und der Antworttext steht fuer Suchmaschinen im DOM. */

/* Ohne align-items: start wuerde eine aufgeklappte Kachel ihre Nachbarn in
   derselben Grid-Zeile mitwachsen lassen. */
.qa-grid { align-items: start; }

/* Kein Padding am details selbst — summary und .qa-a tragen es, damit die
   ganze geschlossene Kachelflaeche klickbar ist und nicht nur der Text. */
.qa-card { padding: 0; }
.qa-card summary {
  list-style: none; cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  min-height: 12em;
  padding: 26px 48px 22px 32px;
  position: relative;
  transition: background 0.25s var(--ease);
}
.qa-card summary::-webkit-details-marker { display: none; }
/* .card hat overflow: hidden — der globale Fokusring mit outline-offset: 3px
   wuerde abgeschnitten, weil die summary die Karte randlos ausfuellt. */
.qa-card summary:focus-visible { outline-offset: -4px; }
.qa-card summary::after {
  content: "◆"; position: absolute; right: 26px; top: 30px;
  color: var(--copper); font-size: 0.6rem; transition: rotate 0.3s var(--ease);
}
.qa-card[open] summary::after { rotate: 135deg; }
.qa-card summary:hover { background: rgba(234, 169, 63, 0.05); }
/* Aufgeklappt traegt die Antwort die Hoehe — sonst klaffte zwischen Frage
   und Hinweiszeile die Luecke aus justify-content: space-between. */
.qa-card[open] summary { min-height: 0; gap: 14px; }
.qa-card .qa-q {
  font-size: 1.14rem; line-height: 1.32; margin-bottom: 0;
  /* Engerer Verlauf als --grad-head: dessen dunkles Ende #b06d10 kommt auf
     dem Kartengrund nur auf 3.0:1 und im Hover-Zustand auf 2.6:1. */
  background: linear-gradient(180deg, #f7c463 0%, #e09a33 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.qa-cue {
  font-family: var(--sans); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
}
.qa-card[open] .qa-cue { color: var(--dim); }
/* Beide Beschriftungen liegen im Markup, umgeschaltet wird per CSS — der
   Zustand selbst kommt ueber details/summary schon bei Screenreadern an. */
.qa-card:not([open]) .qa-cue-auf, .qa-card[open] .qa-cue-zu { display: none; }

.qa-a { padding: 0 32px 28px; animation: qaIn 0.45s var(--ease); }
@keyframes qaIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qa-a { animation: none; } }
.qa-pkg { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.qa-pkg h4 { font-size: 1.05rem; }
.qa-price { margin-top: 8px; }
.qa-price strong { font-size: 1.4rem; }
.qa-price span { color: var(--dim); font-size: 0.85rem; }

/* Klickbarer Paketbereich in den Frage-Kacheln */
.qa-pkg-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.qa-pkg-link .qa-pkg {
  cursor: pointer;
  transition: transform 0.2s var(--ease);
}

.qa-pkg-link:hover .qa-pkg {
  transform: translateX(4px);
}

.qa-pkg-link:hover h4 {
  color: var(--gold-bright);
}

/* ---------- Price cards ---------- */

.price-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
  padding: 34px 30px;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.price-card:hover {
  transform: translateY(-5px);
  background: var(--panel-2);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}
.price-card.featured {
  border: 1px solid var(--gold);
  background: #3d2c14;
  box-shadow: 0 0 46px rgba(210, 134, 42, 0.14);
}
.price-card .flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--grad-gold); color: #1a1a1a; font-weight: 700;
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 5px 16px; border-radius: 0; white-space: nowrap;
}
.price-card h3 { font-size: 1.35rem; }
.price-card .for { color: var(--dim); font-size: 0.9rem; font-style: italic; margin: 2px 0 18px; }
.price-card .price { font-family: var(--sans); font-size: 1.9rem; font-weight: 700; color: var(--text); line-height: 1.1; }
.price-card .price small { font-size: 0.95rem; color: var(--muted); font-weight: 400; }
.price-card .sub { color: var(--dim); font-size: 0.85rem; margin-top: 6px; }
.price-card .btn { margin-top: 24px; text-align: center; }
.price-card .spacer { flex: 1; }

/* ---------- Tables ---------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; font-size: 0.97rem; min-width: 640px; }
th, td { text-align: left; padding: 14px 18px; border-bottom: 1px solid rgba(214, 164, 110, 0.12); }
thead th {
  font-family: var(--display); color: var(--gold); font-size: 0.8rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  background: rgba(234, 169, 63, 0.07);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(234, 169, 63, 0.04); }
td strong { color: var(--gold-bright); }
td { color: var(--muted); }
td:first-child { color: var(--text); }

/* ---------- Split layout ---------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }
.split img { border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--shadow); }

/* Breites Diagramm ueber die volle Wrap-Breite. In einer .split-Spalte waeren
   die Beschriftungen im Bild nur noch ~9px hoch und damit unlesbar. */
.diagram { margin: 0; }
.diagram a { display: block; border-radius: var(--r); }
.diagram a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.diagram img { width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--shadow); }
.diagram figcaption { margin-top: 14px; font-size: 0.92rem; color: var(--muted); }
.split + .diagram { margin-top: 50px; }

/* ---------- Gruenderkarten (ueber-uns) ---------- */

.founders { gap: 30px; }
/* Waagerechte Karte: Foto randlos links, Text rechts. Die Goldleiste von .card
   liegt dadurch auf der Fotokante — als Signatur gewollt. */
.person { padding: 0; display: grid; grid-template-columns: 210px minmax(0, 1fr); }
.person-photo {
  width: 100%; height: 100%;
  /* cover, weil die Zelle so hoch wird wie der Text daneben; ohne object-fit
     wuerde das 4:5-Foto verzerrt. Bildmitte etwas nach oben, damit bei hohem
     Text die Augen im Bild bleiben und nicht der Anzug. */
  object-fit: cover; object-position: 50% 22%;
}
.person-body { padding: 28px 28px 30px 30px; align-self: center; }
/* Zweiter Steckbrief-Absatz: am Desktop rechts unter dem ersten (Foto ueber
   beide Zeilen), auf dem Handy in voller Breite unter dem Foto */
.person:has(.person-extra) { grid-template-rows: auto 1fr; }
.person:has(.person-extra) .person-photo { grid-row: 1 / span 2; }
.person:has(.person-extra) .person-body { align-self: end; padding-bottom: 0; }
.person-extra { grid-column: 2; padding: 14px 28px 30px 30px; }
/* hyphens:none gegen die globale Regel fuer h3 unter 720px – die trennte
   "Andre-as Rothmann". Personennamen werden nicht getrennt. */
.person-body h3 { margin-bottom: 4px; hyphens: none; }
/* .person mitschreiben: .card p ist spezifischer als .person-role und wuerde
   sonst Farbe und Schriftgroesse ueberschreiben. */
.person .person-role {
  font-family: var(--sans); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
}
.person .person-bio { color: var(--muted); font-size: 0.99rem; }
/* Platzhalter fuer noch fehlendes Portraitfoto (z.B. bei Kundenzitaten vor
   Foto-Freigabe) - gleiche Zelle wie .person-photo, aber ohne echtes Bild. */
.person-photo.is-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: var(--panel-2); color: var(--dim); text-align: center; padding: 12px;
}
.person-photo.is-placeholder svg { width: 38px; height: 38px; opacity: 0.5; }
.person-photo.is-placeholder span {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
}
/* Deutlich frueher einspaltig als die c2-Regel (640px): schon bei 980px blieben
   neben dem 210px-Foto nur 235px fuer Name, Rolle und Steckbrief, und die Karte
   wuchs von 265 auf 345px Hoehe. .grid.c2 mitschreiben, sonst gewinnt dessen
   hoehere Spezifitaet. */
@media (max-width: 1080px) { .grid.c2.founders { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .person { grid-template-columns: 132px minmax(0, 1fr); }
  .person-body { padding: 22px 22px 24px 24px; }
  .person:has(.person-extra) { grid-template-rows: auto auto; }
  .person:has(.person-extra) .person-photo { grid-row: 1; }
  .person:has(.person-extra) .person-body { align-self: center; padding-bottom: 22px; }
  .person-extra { grid-column: 1 / -1; padding: 18px 22px 24px; border-top: 1px solid var(--line); }
}

/* ---------- Fliesstext-Block ---------- */

/* Laengerer Erzaehltext: eigene Zeilenlaenge, links ausgerichtet. Zentrierter
   Fliesstext ueber viele Zeilen ist schwer zu lesen, weil der Zeilenanfang
   wandert. */
.prose { max-width: 46em; }
/* Steht in derselben Sektion wie die Gruenderkarten. Eine eigene Sektion haette
   130px Innenabstand oben und unten addiert – 260px Leere zwischen Gesichtern
   und Geschichte. */
.founders + .prose { margin-top: 60px; }
.prose p { color: var(--muted); font-size: 1.08rem; }
.prose p + p { margin-top: 16px; }

/* ---------- Steps ---------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; }
.steps.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .steps.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 880px) { .steps { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .steps.four { grid-template-columns: 1fr; } }
.step { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; position: relative; }
.step::before {
  counter-increment: step; content: counter(step, upper-roman);
  font-family: var(--display); color: var(--copper); font-size: 1.1rem; letter-spacing: 0.1em;
  display: block; margin-bottom: 10px;
}
.step h3 { font-size: 1.08rem; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 0.95rem; }

/* path arrow row */
.path { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; justify-content: center; }
.path .p-step {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px 24px; text-align: center; flex: 1 1 200px; max-width: 270px;
}
.path .p-step .t { font-family: var(--display); color: var(--gold-bright); font-weight: 700; }
.path .p-step .d { color: var(--dim); font-size: 0.85rem; margin-top: 4px; }
.path .p-arrow { display: grid; place-items: center; color: var(--copper); font-size: 1.3rem; padding: 0 14px; }
@media (max-width: 880px) { .path { flex-direction: column; align-items: center; } .path .p-arrow { transform: rotate(90deg); padding: 8px 0; } }

/* ---------- Manifest ---------- */

.manifest { max-width: 820px; margin: 0 auto; }
.manifest-item { text-align: center; padding: 26px 0; border-bottom: 1px solid rgba(214, 164, 110, 0.1); }
.manifest-item:last-child { border-bottom: none; }
.manifest-item .no { font-family: var(--display); color: var(--copper); letter-spacing: 0.2em; font-size: 0.95rem; }
.manifest-item h3 { margin: 6px 0 8px; font-size: 1.3rem; }
.manifest-item p { color: var(--muted); max-width: 40em; margin: 0 auto; }

/* ---------- Callout ---------- */

/* Gamma-Callout: leuchtend gelber Block mit dunkler Schrift */
.callout {
  border: none; border-radius: var(--r);
  background: var(--yellow);
  color: var(--on-yellow);
  padding: 24px 28px; margin-top: 34px;
}
.callout p { color: var(--on-yellow); }
.callout strong { color: var(--on-yellow); font-weight: 700; }
.callout a { color: #5c4a08; text-decoration: underline; text-underline-offset: 2px; }
.callout a:hover { color: #000; }

/* ---------- CTA band ---------- */

.cta-band { text-align: center; padding: clamp(70px, 9vw, 110px) 0; }
.cta-band h2 { margin: 18px 0 14px; }
.cta-band .lead { margin: 0 auto 30px; }

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

form .field { margin-bottom: 18px; }
label { display: block; font-size: 0.9rem; letter-spacing: 0.06em; color: var(--gold); margin-bottom: 7px; }
input, textarea, select {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 0; color: var(--text); padding: 13px 15px;
  font-family: var(--sans); font-size: 1rem;
}
input:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(234, 169, 63, 0.15); }
textarea { min-height: 160px; resize: vertical; }
.hp { position: absolute; left: -9999px; }

.field-check { display: flex; align-items: flex-start; gap: 10px; }
.field-check input[type="checkbox"] {
  width: 18px; height: 18px; flex: none; margin-top: 3px;
  accent-color: var(--gold); cursor: pointer;
}
.field-check label {
  margin-bottom: 0; color: var(--muted); font-size: 0.9rem;
  letter-spacing: normal; text-transform: none; cursor: pointer;
}
.field-check label a { color: var(--gold-bright); }

.form-msg { padding: 14px 16px; border-radius: var(--r); margin-bottom: 18px; font-size: 0.95rem; border-left: 3px solid; }
.form-msg.is-success { background: rgba(76, 175, 125, 0.12); border-color: #4caf7d; color: #bfe9d3; }
.form-msg.is-error { background: rgba(226, 87, 76, 0.12); border-color: #e2574c; color: #f3c6c1; }
button.btn[disabled] { opacity: 0.6; cursor: not-allowed; pointer-events: none; }

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

footer.site-footer { border-top: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); padding: 60px 0 40px; margin-top: 0; overflow: hidden; }
.foot-wordmark {
  font-family: var(--display); font-weight: 700; line-height: 0.95;
  font-size: clamp(2.4rem, 12vw, 11rem); letter-spacing: -0.02em;
  text-align: center; user-select: none; pointer-events: none;
  color: transparent; -webkit-text-stroke: 1px rgba(234, 169, 63, 0.16);
  margin: 0 0 50px;
}
@supports not (-webkit-text-stroke: 1px black) { .foot-wordmark { color: rgba(234, 169, 63, 0.07); } }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-grid h4 { font-family: var(--display); font-size: 1.25rem; letter-spacing: 0; text-transform: none; color: var(--gold); margin-bottom: 14px; }
.foot-grid p, .foot-grid a { color: var(--muted); font-size: 0.95rem; display: block; padding: 3px 0; }
.foot-grid a:hover { color: var(--gold-bright); }
.foot-bottom {
  margin-top: 46px; padding-top: 24px; border-top: 1px solid rgba(214, 164, 110, 0.1);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  color: var(--dim); font-size: 0.88rem;
}
.foot-bottom .brandline { font-style: italic; letter-spacing: 0.06em; }

/* ---------- Reveal on scroll ---------- */

.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal.in { opacity: 1; transform: none; }

/* hero entrance on load */
.hero .kicker, .hero h1, .hero .lead, .hero .cta-row, .hero .note, .hero-logo {
  opacity: 0; transform: translateY(26px);
  animation: rise 0.9s var(--ease) forwards;
}
.hero h1 { animation-delay: 0.1s; }
.hero .lead { animation-delay: 0.22s; }
.hero .cta-row { animation-delay: 0.34s; }
.hero .note { animation-delay: 0.46s; }
.hero-logo { animation-delay: 0.25s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero .kicker, .hero h1, .hero .lead, .hero .cta-row, .hero .note, .hero-logo { animation: none; opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Mono accents ---------- */

.mono { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.08em; color: var(--gold); }

/* ---------- Hintergrund-Canvas (Agenten-Nervensystem) ---------- */

/* Fixe Ebene ueber die volle Viewport-Breite (auch 3440px) hinter dem gesamten
   Inhalt — dadurch ist der Sternen-Hintergrund auf jeder Sektion identisch. */
.bg-net {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none;
}
.hero { position: relative; }
.hero .wrap { position: relative; z-index: 1; }

/* ---------- Trust-Block ---------- */

.trust-band {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(234, 169, 63, 0.05), transparent);
}
.trust-band h2 { max-width: 22em; }
/* Siegel neben der Aussage, die es belegt. Der Flex-Container traegt den
   Abstand nach unten, sonst wuerde der von .sec-head doppelt zaehlen. */
.trust-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap; margin-bottom: 46px;
}
.trust-head .sec-head { margin-bottom: 0; }
.eu-seal {
  width: clamp(104px, 12vw, 152px); height: auto; flex: none;
  /* Nur ein dunkler Schatten zum Absetzen — die Siegelfarben bleiben
     unangetastet, ein gedaempftes Guetesiegel waere sinnlos. */
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.5));
}
@media (max-width: 640px) {
  .trust-head { justify-content: center; text-align: center; gap: 28px; }
  .trust-head .sec-head { text-align: left; }
}
.trust-item h3 { font-size: 1.05rem; margin-bottom: 8px; }
.trust-item p { color: var(--muted); font-size: 0.95rem; }
.trust-item .mono { display: block; margin-bottom: 10px; }

/* ---------- Editorial-Index (Dienstleistungen) ---------- */

.index-list { border-top: 1px solid var(--line); }
.index-item { border-bottom: 1px solid var(--line); }
.index-item summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 26px;
  padding: 30px 6px;
  transition: background 0.3s var(--ease), padding 0.3s var(--ease);
}
.index-item summary::-webkit-details-marker { display: none; }
.index-item summary:hover { background: rgba(234, 169, 63, 0.04); padding-left: 16px; }
.index-item .no { font-family: var(--mono); font-size: 0.85rem; color: var(--copper); }
.index-item .name {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(1.4rem, 3.4vw, 2.4rem); color: var(--gold-bright); line-height: 1.15;
}
.index-item .name small { display: block; font-family: var(--sans); font-size: 0.82rem; font-weight: 400; color: var(--dim); letter-spacing: 0.08em; margin-top: 6px; }
.index-item .p {
  font-family: var(--display); font-weight: 600; font-size: clamp(1.2rem, 2.6vw, 1.9rem);
  background: var(--grad-head); -webkit-background-clip: text; background-clip: text; color: transparent;
  white-space: nowrap;
}
.index-item .p small { display: block; font-family: var(--sans); font-size: 0.72rem; color: var(--dim); -webkit-text-fill-color: var(--dim); text-align: right; margin-top: 4px; }
.index-body { overflow: hidden; }
.index-body-inner {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px;
  padding: 6px 6px 36px;
}
.index-body h4 { font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.index-body p, .index-body li { color: var(--muted); font-size: 0.95rem; }
.index-body ul { list-style: none; }
.index-body li { padding: 5px 0 5px 22px; position: relative; }
.index-body li::before { content: "◆"; position: absolute; left: 0; top: 7px; font-size: 0.5rem; color: var(--copper); }
.index-item[open] summary { background: rgba(234, 169, 63, 0.05); }
.index-item[open] .index-body-inner { animation: idxIn 0.5s var(--ease); }
@keyframes idxIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 780px) {
  .index-item summary { grid-template-columns: auto 1fr; }
  .index-item .p { grid-column: 2; justify-self: start; white-space: normal; }
  .index-item .p small { text-align: left; }
  .index-body-inner { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- FAQ ---------- */

/* Gamma-FAQ: nummerierte Spalte links, Frage als cremefarbene Serife */
.faq { counter-reset: faq; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel);
  margin-bottom: 14px; overflow: hidden;
  position: relative; padding-left: 58px;
}
.faq details::before {
  counter-increment: faq; content: counter(faq);
  position: absolute; left: 0; top: 0; bottom: 0; width: 58px;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.22);
  font-family: var(--display); font-size: 1.5rem; color: var(--muted);
}
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 24px;
  font-family: var(--display); font-weight: 700; color: var(--head-soft); font-size: 1.08rem; letter-spacing: -0.01em;
  position: relative; padding-right: 54px;
  transition: background 0.25s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "◆"; position: absolute; right: 24px; top: 50%; translate: 0 -50%;
  color: var(--copper); font-size: 0.6rem; transition: rotate 0.3s var(--ease);
}
.faq details[open] summary::after { rotate: 135deg; }
.faq summary:hover { background: rgba(234, 169, 63, 0.05); }
.faq .a { padding: 0 24px 22px; color: var(--muted); font-size: 0.97rem; }
.faq .a p + p { margin-top: 10px; }

/* ---------- Kombi-Box ---------- */

.combo {
  border: 1px solid var(--gold); border-radius: var(--r);
  background: linear-gradient(180deg, #3d2c14, var(--bg-2));
  box-shadow: 0 0 46px rgba(210, 134, 42, 0.14);
  padding: 30px; margin-top: 34px;
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
}
.combo .sum { font-family: var(--display); font-weight: 600; font-size: 1.6rem; color: var(--gold-bright); white-space: nowrap; }
.combo .sum small { display: block; font-family: var(--sans); font-size: 0.78rem; font-weight: 400; color: var(--dim); }
@media (max-width: 720px) { .combo { grid-template-columns: 1fr; } .combo .sum { white-space: normal; } }

/* CTA-Entwaffnungszeile */
.cta-sub { font-family: var(--sans); font-size: 0.85rem; color: var(--dim); margin-top: 14px; letter-spacing: 0.04em; }

/* ---------- Legal pages ---------- */

.legal { max-width: 820px; }
.legal h2 { font-size: 1.3rem; margin: 34px 0 10px; }
.legal p, .legal li { color: var(--muted); }
.legal ul { margin: 10px 0 10px 22px; }
.draft-note {
  border: 1px dashed var(--line-strong); border-radius: 0; padding: 16px 20px;
  color: var(--gold); font-size: 0.92rem; margin-bottom: 30px; background: rgba(234, 169, 63,0.05);
}