/* ==========================================================================
   SAKHLY — öffentliche Website (statisch). Eine Stildatei für DE/EN/ES.
   Palette: Teal-Familie (Marke #0f6d6b) auf kühlem Fast-Weiß mit leichter
   Teal-Neigung; semantische Ampel NUR in der Wohnungsakte-Vorschau.
   Schrift: System-Humanist-Sans (Fließtext), System-Monospace (Labels/Zahlen)
   — keine externen Font-CDNs (CSP-sicher, kein stiller Fallback).
   ========================================================================== */

:root {
  --ground:    #f5f8f7;
  --surface:   #ffffff;
  --surface-2: #eef4f2;
  --ink:       #11201f;
  --ink-soft:  #41524f;
  --ink-mute:  #5f716e;
  --line:      #d8e4e1;
  --line-soft: #e7efed;
  --brand:     #0F4F4C;   /* SAKHLY Tiefpetrol (freigegebenes Brand Kit) */
  --brand-ink: #0A3331;
  --brand-wash:#e4ece9;
  --brand-glow:#0F4F4C1a;
  /* SAKHLY Brand-Palette */
  --cream:     #F7F3EA;
  --cream-2:   #F3E6D0;
  --orange:    #FF7A00;
  --orange-ink:#E86F00;
  --sage:      #6F7C78;
  /* semantische Sicherheit (nur Datenkontext) */
  --ok:   #1f7a4d;
  --warn: #b8791a;
  --risk: #b4442f;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, "Liberation Mono", monospace;

  --maxw: 1140px;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(16,40,38,.04), 0 10px 30px -18px rgba(16,40,38,.28);
  --shadow-lg: 0 2px 6px rgba(16,40,38,.06), 0 30px 60px -32px rgba(16,40,38,.4);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--ground);
  line-height: 1.62;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; margin: 0; font-weight: 800; }
h1 { font-size: clamp(2.1rem, 1.3rem + 3.3vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.3rem); }
h3 { font-size: 1.14rem; font-weight: 700; letter-spacing: -0.01em; }
p  { margin: 0; }
a  { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; }

/* Skip link — offscreen until focused (keyboard a11y, no inline handlers) */
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; }
.skip-link:focus { left: 10px; }

.eyebrow {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 600;
  margin: 0 0 .7rem;
}

.lede { font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); color: var(--ink-soft); max-width: 60ch; }

/* ---- Brandmark: Häuschen + Wortmarke (gestapelt) ---- */
.brand { display: inline-flex; align-items: center; gap: .55em; text-decoration: none; color: var(--brand); }
.brand:hover { text-decoration: none; }
.brand__mark { width: 38px; height: 41px; flex: none; display: block; }
/* Freigegebenes SAKHLY-Logo als Bild-Lockup (hell = Petrol, Footer = inverse Creme-Variante).
   Höhe steuert die Darstellung, Seitenverhältnis 3:1 bleibt über width:auto erhalten. */
.brand__img { height: 44px; width: auto; display: block; }
.site-footer .brand__img { height: 40px; }
@media (max-width: 560px) { .brand__img { height: 38px; } .site-footer .brand__img { height: 36px; } }
/* „SAKHLY" + Häuschen bleiben in Größe und Position unverändert.
   „PROPERTY SOFTWARE" = Original-Brand-Kit-Proportion: 0,25× der SAKHLY-Größe
   (1,42rem × 0,25 = 0,355rem), Laufweite .34em (6/18 im Brand-Kit-Wortmark),
   Gewicht 400. Damit ist die Zeile ~0,95× SAKHLY-Breite → exakt mittig unter
   „SAKHLY", kein Überhang (gemessen mit echten Schriftbreiten). */
.brand__tx { display: inline-flex; flex-direction: column; line-height: 1; }
.brand__name { font-weight: 800; font-size: 1.42rem; letter-spacing: .02em; color: var(--brand); }
.brand__sub { font-family: var(--mono); font-weight: 400; font-size: .355rem; letter-spacing: .34em;
              text-transform: uppercase; color: var(--brand); opacity: .78; margin-top: .5em;
              text-align: center; white-space: nowrap; }
/* Logo-Varianten auf dunklem Grund (Footer / Hero) */
.on-dark .brand, .on-dark .brand__name, .on-dark .brand__sub { color: #fff; }
.on-dark .brand__mark .mk-stroke { stroke: #fff; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  font: inherit; font-weight: 650; line-height: 1;
  padding: .82em 1.25em; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, transform .05s, box-shadow .15s;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 8px 20px -10px var(--brand); }
.btn-primary:hover { background: var(--brand-ink); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface); border-color: var(--brand); color: var(--brand-ink); }
.btn-lg { padding: .95em 1.5em; font-size: 1.02rem; }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
/* Orange Marken-CTA (Pill) + heller Umriss-Button für dunkle Flächen */
.btn-orange { background: var(--orange); color: #fff; border-radius: 999px; box-shadow: 0 10px 26px -12px var(--orange); }
.btn-orange:hover { background: var(--orange-ink); color: #fff; }
.btn-pill { border-radius: 999px; }
.btn-on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-on-dark:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px -20px rgba(16,40,38,.5); }
.nav { display: flex; align-items: center; gap: 1.1rem; min-height: 66px; }
.nav__links { display: flex; align-items: center; gap: 1.35rem; margin-left: auto; }
.nav__links a.navlink { color: var(--ink-soft); font-weight: 550; font-size: .97rem; }
.nav__links a.navlink:hover { color: var(--brand-ink); text-decoration: none; }
.nav__actions { display: flex; align-items: center; gap: .6rem; }
/* "Login/Anmelden" erscheint nur im mobilen Hamburger-Menü — auf Desktop deckt das der
   Anmelden-Button (.btn-ghost) im Header ab. */
.navlink--login { display: none; }

.lang {
  display: inline-flex; align-items: center; gap: .1rem;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .04em;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface);
}
.lang a { padding: .4em .62em; color: var(--ink-mute); text-transform: uppercase; }
.lang a:hover { background: var(--surface-2); text-decoration: none; color: var(--brand-ink); }
.lang a[aria-current="true"] { background: var(--brand); color: #fff; }

.menu-toggle { display: none; }

/* ==========================================================================
   Marken-Hero (freigegebenes Brand Kit): vertikaler Creme→Petrol-Verlauf,
   Text links (weiß), Gebäude rechts, Vorteilsreihe mit orangen Trennstrichen.
   ========================================================================== */
.hero-shell {
  position: relative;
  /* Gleichmäßiger, horizontal ebener, vertikal weicher Verlauf (brand-tokens.css) */
  background: linear-gradient(180deg,
    var(--cream) 0%, var(--cream-2) 11%, #B7C4AD 23%, #397E73 40%, var(--brand) 60%, #004A46 100%);
}
.site-header--hero {
  position: static; background: transparent; backdrop-filter: none; border-bottom: 0; box-shadow: none;
}
.hero--brand { padding: clamp(2.2rem, 1.4rem + 4vw, 4.4rem) 0 clamp(2.6rem, 1.6rem + 4vw, 4.6rem); }
/* Textzentrierter Hero (kein Gebäude mehr in der Hero-Sektion) */
.hero--brand .hero__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.hero--brand .hero__copy { color: #fff; max-width: 760px; width: 100%; }
.hero__h1 { color: #fff; font-size: clamp(1.5rem, 6vw, 3.3rem); line-height: 1.08; hyphens: manual; text-wrap: balance; }
.accent-line { width: 128px; height: 6px; border-radius: 999px; margin: 1.2rem auto 1.4rem;
               background: var(--orange); box-shadow: 0 4px 14px -4px var(--orange); }
.hero__lede-d { font-size: clamp(1.06rem, 1rem + .5vw, 1.3rem); color: rgba(255,255,255,.92);
                max-width: 54ch; margin-inline: auto; }

/* Vorteilsreihe */
.benefits { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0;
            margin: 1.9rem auto .4rem; }
.benefit { display: flex; align-items: center; gap: .62em; padding: .2rem 1.25rem; color: #fff;
           border-left: 2px solid var(--orange); text-align: left; }
.benefit:first-child { padding-left: 0; border-left: 0; }
.benefit__ic { width: 30px; height: 30px; flex: none; color: #fff; }
.benefit__ic svg { width: 30px; height: 30px; }
.benefit__tx { font-weight: 650; font-size: .96rem; line-height: 1.18; }
.hero--brand .hero__cta { margin-top: 2rem; justify-content: center; }

/* Architektur-Motiv: großes, dezentes Hintergrundmotiv im hellen Folgebereich.
   url() wird relativ zur Stildatei (/assets/) aufgelöst → gilt für DE/EN/ES. */
.section--motif { position: relative; overflow: hidden; }
.section--motif > * { position: relative; z-index: 1; }
.section--motif::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -3%; bottom: -5%; width: min(660px, 54%); aspect-ratio: 560 / 620;
  background: url(sakhly-architecture.svg) right bottom / contain no-repeat;
  opacity: .12;
}

/* ==========================================================================
   Architektur-/Markenbereich (Variante A: Gebäude rechts, Text links) —
   heller, großzügiger Bereich direkt unter dem Hero.
   ========================================================================== */
.arch { background: var(--cream); padding: clamp(3rem, 1.8rem + 5vw, 5.6rem) 0;
        position: relative; overflow: hidden; }
.arch__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem, 1rem + 2.6vw, 3.2rem);
              align-items: center; }
.arch__copy .eyebrow { color: var(--brand); }
.arch__copy h2 { color: var(--brand-ink); font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem); }
.arch__copy p { color: var(--ink-soft); font-size: clamp(1.04rem, 1rem + .45vw, 1.24rem);
                max-width: 44ch; margin-top: 1rem; }
/* Architekturmotiv: zusammenhängendes Original-Architekturfoto (4:3, ohne Himmel/Text per
   Zuschnitt). Als saubere, hochwertige Bildfläche dargestellt — abgerundete Ecken + dezenter
   Schatten. KEINE Freistellung, KEINE Transparenzmaske, KEINE weichen Kanten/Vernebelung. */
.arch__media { position: relative; }
.arch__img { display: block; width: 100%; height: auto; border-radius: 16px;
  box-shadow: 0 20px 44px -26px rgba(16,40,38,.5), 0 3px 10px -5px rgba(16,40,38,.22); }

/* Kurzer Software-Einblick (eine ruhige Vorschau, keine Kachel-Ansammlung) */
.glimpse { text-align: center; }
.glimpse .akte { max-width: 560px; margin: 2rem auto 0; text-align: left; }

/* ---- Hero (Alt-Variante, weiterhin für andere Seiten verfügbar) ---- */
.hero { padding: clamp(2.6rem, 1rem + 7vw, 5.5rem) 0 clamp(2rem, 1rem + 4vw, 3.6rem); }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.8rem, 1rem + 3vw, 3.4rem); align-items: center; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.7rem; }
.hero__note { margin-top: 1rem; font-size: .88rem; color: var(--ink-mute); display: flex; align-items: center; gap: .5em; }
.hero__note svg { width: 1.05em; height: 1.05em; color: var(--brand); flex: none; }
.trust-row { display: flex; flex-wrap: wrap; gap: 1.1rem 1.6rem; margin-top: 2.2rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft); }
.trust-row .ti { display: flex; align-items: center; gap: .55em; font-size: .9rem; color: var(--ink-soft); }
.trust-row .ti svg { width: 1.15em; height: 1.15em; color: var(--brand); flex: none; }

/* ---- Wohnungsakte-Mock (Hero + Band) ---- */
.akte {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden; font-size: .9rem;
}
.akte__bar { display: flex; align-items: center; gap: .5rem; padding: .7rem .95rem; border-bottom: 1px solid var(--line-soft); background: var(--surface-2); }
.akte__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.akte__title { font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; color: var(--ink-mute); margin-left: .3rem; }
.akte__body { padding: 1.05rem 1.1rem 1.2rem; display: grid; gap: .85rem; }
.akte__obj { font-weight: 750; font-size: 1.02rem; display: flex; align-items: center; gap: .5em; }
.akte__obj svg { width: 1.1em; height: 1.1em; color: var(--brand); }
.akte__row { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem;
             padding: .6rem .75rem; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--ground); }
.akte__row .lbl { color: var(--ink-soft); }
.akte__row .lbl small { display: block; font-size: .78rem; color: var(--ink-mute); }
.akte__row .val { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.akte__hist { display: flex; align-items: center; gap: .45em; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.akte__hist .arw { color: var(--brand); }
.akte__hist .old { color: var(--ink-mute); text-decoration: line-through; }
.akte__src { font-size: .78rem; color: var(--ink-mute); display: flex; align-items: center; gap: .4em; }
.akte__src svg { width: 1em; height: 1em; color: var(--brand); flex: none; }
.chip { display: inline-flex; align-items: center; gap: .4em; font-family: var(--mono); font-size: .72rem;
        letter-spacing: .03em; font-weight: 600; padding: .2em .6em; border-radius: 999px; }
.chip::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: currentColor; }
.chip-ok   { color: var(--ok);   background: #e5f3ec; }
.chip-warn { color: var(--warn); background: #f6eddc; }
.chip-risk { color: var(--risk); background: #f6e3de; }

/* ---- Sections ---- */
.section { padding: clamp(3rem, 1.5rem + 5vw, 5.2rem) 0; }
.section--tint { background: var(--surface); border-block: 1px solid var(--line-soft); }
.section__head { max-width: 62ch; margin-bottom: 2.4rem; }
.section__head.center { margin-inline: auto; text-align: center; }

/* ---- Feature grid ---- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.feature {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.4rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .6rem;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.section--tint .feature { background: var(--ground); }
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--brand); }
.feature__ic { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px;
               background: var(--brand-wash); color: var(--brand-ink); margin-bottom: .3rem; }
.feature__ic svg { width: 22px; height: 22px; }
.feature h3 { margin-bottom: .1rem; }
.feature p { color: var(--ink-soft); font-size: .96rem; }

/* ---- Steps ---- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; counter-reset: step; }
.step { position: relative; padding-top: 1.2rem; border-top: 2px solid var(--line); }
.step__n { font-family: var(--mono); font-size: .8rem; font-weight: 700; color: var(--brand); letter-spacing: .05em; }
.step h3 { margin: .5rem 0 .35rem; }
.step p { color: var(--ink-soft); font-size: .96rem; }

/* ---- KI band ---- */
.kiband { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 1rem + 3vw, 3.2rem); align-items: center; }
.kilist { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: .8rem; }
.kilist li { display: flex; gap: .7rem; align-items: flex-start; font-size: .98rem; color: var(--ink-soft); }
.kilist svg { width: 1.2em; height: 1.2em; color: var(--brand); flex: none; margin-top: .18em; }
.kilist b { color: var(--ink); font-weight: 650; }
.notebox {
  margin-top: 1.5rem; display: flex; gap: .75rem; align-items: flex-start;
  background: var(--brand-wash); border: 1px solid #bfddd6; border-radius: var(--radius-sm);
  padding: .9rem 1rem; font-size: .9rem; color: var(--brand-ink);
}
.notebox svg { width: 1.2em; height: 1.2em; flex: none; margin-top: .15em; }

/* ---- Security ---- */
.secgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 2.2rem; margin-top: 1.5rem; }
.secitem { display: flex; gap: .75rem; align-items: flex-start; }
.secitem svg { width: 1.3em; height: 1.3em; color: var(--brand); flex: none; margin-top: .15em; }
.secitem h3 { font-size: 1.02rem; margin-bottom: .15rem; }
.secitem p { color: var(--ink-soft); font-size: .92rem; }

/* ---- CTA band ---- */
.cta {
  background: linear-gradient(135deg, var(--brand-ink), var(--brand));
  color: #fff; border-radius: 20px; padding: clamp(2.2rem, 1rem + 5vw, 3.6rem);
  text-align: center; box-shadow: var(--shadow-lg);
}
.cta h2 { color: #fff; }
.cta p { color: #e4f1ee; max-width: 52ch; margin: .8rem auto 0; }
.cta .hero__cta { justify-content: center; margin-top: 1.8rem; }
.cta .btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.07); }
.cta .btn-ghost:hover { background: rgba(255,255,255,.16); border-color: #fff; color: #fff; }
.cta .btn-primary { background: #fff; color: var(--brand-ink); }
.cta .btn-primary:hover { background: #eef4f2; color: var(--brand-ink); }

/* ---- Footer ---- */
.site-footer { background: var(--ink); color: #c7d4d1; padding: 3rem 0 2rem; font-size: .92rem; }
.site-footer .brand { color: #fff; }
.site-footer .brand .m { background: #fff; color: var(--brand-ink); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.foot-grid h4 { font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
                color: #8ba39f; margin: 0 0 .8rem; font-weight: 600; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.foot-grid a { color: #c7d4d1; }
.foot-grid a:hover { color: #fff; }
.foot-note { max-width: 44ch; color: #8ba39f; margin-top: .9rem; font-size: .86rem; }
.foot-bottom { border-top: 1px solid #22413e; padding-top: 1.4rem; display: flex; flex-wrap: wrap;
               justify-content: space-between; gap: 1rem; color: #8ba39f; font-size: .84rem; }
.foot-bottom .lang { background: transparent; border-color: #2c4b47; }
.foot-bottom .lang a { color: #8ba39f; }
.foot-bottom .lang a[aria-current="true"] { background: #2c4b47; color: #fff; }
.tag { font-family: var(--mono); color: var(--warn); font-size: .8rem; }

/* ---- Reveal ---- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---- Responsive ---- */
@media (max-width: 920px) {
  .hero__grid, .kiband { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  .features, .steps, .secgrid { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  /* Architekturbereich: Text zuerst (mittig), Motiv kompakt in voller Breite darunter */
  .arch__grid { grid-template-columns: 1fr; gap: 0; }
  .arch__copy { text-align: center; }
  .arch__copy p { margin-inline: auto; }   /* Beschreibung als zentrierte Spalte (max-width 44ch) */
  .arch__media { margin-top: 1.5rem; }
}
@media (max-width: 560px) {
  /* Marken-Hero mobil: jede Vorteils-Gruppe (Icon + Text) als Ganzes exakt
     mittig auf derselben Achse; einzeilig; kurze, zentrierte orange Trennlinien */
  .benefits { flex-direction: column; align-items: center; gap: 0; width: 100%; }
  .benefit { justify-content: center; width: 100%; padding: .95rem 0 .15rem;
             border-left: 0; position: relative; }
  .benefit:first-child { padding-top: 0; }
  .benefit:not(:first-child)::before {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 130px; height: 2px; border-radius: 2px; background: var(--orange);
  }
  .benefit__tx br { display: none; }
  /* Mittlere Zeile („Einfach und effizient") ein kleines Stück nach links,
     sodass ihr Blitz exakt mit dem Schild der unteren Zeile fluchtet.
     Nur der Inhalt (Icon+Text) wird verschoben; die zentrierte Trennlinie
     (::before) bleibt unverändert. Obere und untere Zeile bleiben wie sie sind. */
  .benefit:nth-child(2) { padding-right: 1.06rem; }
  /* Architektur-Motiv mobil: mittig unten, kleiner und noch dezenter */
  .section--motif::before { right: 50%; transform: translateX(50%); bottom: 0;
                            width: min(420px, 86%); opacity: .08; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .nav__links { display: none; }
  /* Mobil hat .nav__links (mit margin-left:auto) keine Wirkung mehr, weil ausgeblendet.
     Damit Demo-Button + Hamburger wie vorgesehen am rechten Rand sitzen, rückt die
     Aktions-Gruppe selbst nach rechts. Nur Positionskorrektur — Logo/Abstände unberührt. */
  .nav__actions { margin-left: auto; }
  .nav__links.open {
    display: flex; flex-direction: column; align-items: flex-start; gap: .4rem;
    position: absolute; top: 66px; left: 0; right: 0; margin: 0;
    background: var(--surface); border-bottom: 1px solid var(--line); padding: 1rem 22px 1.3rem;
    box-shadow: var(--shadow);
  }
  .nav__links.open .lang { margin-top: .4rem; }
  /* Login klar sichtbar im aufgeklappten Menü (eigener, deutlicher CTA → Kundenanwendung) */
  .nav__links.open .navlink--login {
    display: inline-flex; align-items: center; justify-content: center; width: 100%;
    margin: .2rem 0 .1rem; padding: .62rem 1rem; border: 1px solid var(--brand);
    border-radius: 10px; color: var(--brand); font-weight: 650;
  }
  .nav__links.open .navlink--login:hover { background: var(--brand); color: #fff; text-decoration: none; }
  .menu-toggle { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-left: auto;
                 background: var(--surface); border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
  .menu-toggle svg { width: 20px; height: 20px; color: var(--ink); }
  .nav__actions .btn-ghost { display: none; }
  .features, .steps, .secgrid, .foot-grid { grid-template-columns: 1fr; }
  .hero__cta .btn { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   Rechtstexte (Impressum / Datenschutz) — eigene, ruhige Lesespalte.
   ========================================================================== */
.legal-wrap { max-width: 820px; }
.legal { padding: clamp(2.2rem, 1.2rem + 3vw, 3.6rem) 0 clamp(2.4rem,1.5rem+3vw,4rem); }
.legal .eyebrow { margin-bottom: .5rem; }
.legal h1 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); margin-bottom: .6rem; }
.legal h2 { font-size: 1.28rem; margin: 2.2rem 0 .7rem; padding-top: 1.1rem; border-top: 1px solid var(--line-soft); }
.legal h2:first-of-type { border-top: 0; padding-top: 0; }
.legal h3 { font-size: 1.02rem; margin: 1.2rem 0 .3rem; }
.legal p, .legal li { color: var(--ink-soft); font-size: .99rem; }
.legal p + p { margin-top: .7rem; }
.legal ul { margin: .5rem 0 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
.legal a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 2px; }
.legal .lead { color: var(--ink); font-size: 1.05rem; }
/* Einleitung Rechtsseiten: drei echte Absätze, harmonische (nicht übertriebene) Abstände, auch mobil. */
.legal .legal-intro { color: var(--ink); font-size: 1.05rem; margin: 0 0 1.1rem; }
.legal .legal-intro p { color: inherit; font-size: inherit; margin: 0; }
.legal .legal-intro p + p { margin-top: .35rem; }
.legal .updated { font-family: var(--mono); font-size: .8rem; color: var(--ink-mute); margin-top: .4rem; }

/* Betreiber-/Rollen-Kasten */
.legal dl.meta { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.3rem;
                 background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
                 padding: 1.1rem 1.2rem; margin: 1rem 0; }
.legal dl.meta dt { font-family: var(--mono); font-size: .78rem; letter-spacing: .03em; text-transform: uppercase;
                    color: var(--ink-mute); align-self: start; }
.legal dl.meta dd { margin: 0; color: var(--ink); }
@media (max-width: 560px){ .legal dl.meta { grid-template-columns: 1fr; gap: .15rem 0; }
  .legal dl.meta dd { margin-bottom: .6rem; } }

/* Rollen-Hinweis (Verantwortlicher vs. Auftragsverarbeiter) */
.rolebox { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; margin: 1rem 0; }
.rolebox .role { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand);
                 border-radius: var(--radius-sm); padding: 1rem 1.1rem; }
.rolebox .role h3 { margin: 0 0 .35rem; color: var(--ink); }
.rolebox .role p { font-size: .92rem; }
@media (max-width: 700px){ .rolebox { grid-template-columns: 1fr; } }

/* Unterauftragsverarbeiter-Tabelle */
.legal .tablewrap { overflow-x: auto; margin: 1rem 0; }
.legal table { border-collapse: collapse; width: 100%; font-size: .9rem; min-width: 560px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: .6rem .7rem; border-bottom: 1px solid var(--line-soft); }
.legal thead th { font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase;
                  color: var(--ink-mute); background: var(--surface-2); }

/* „zur Bestätigung" — sichtbare, neutrale Markierung fehlender Angaben (vor Go-Live zu ersetzen) */
.confirm { display: inline; background: #f6eddc; color: var(--warn); border: 1px dashed #d9b773;
           border-radius: 6px; padding: .05em .45em; font-family: var(--mono); font-size: .85em; }
.confirm::before { content: "zur Bestätigung: "; font-weight: 700; text-transform: none; }
.confirm.en::before { content: "to confirm: "; }
.confirm.es::before { content: "por confirmar: "; }

.legal .backlink { display: inline-flex; align-items: center; gap: .4em; margin-top: 2.4rem; font-size: .92rem; }