/* ============================================================================
   AssetIdent Landing Page — Design-System-Styles
   Quelle: assetident-projekte-design (verbindliches App-Designsystem)
   Stand: 2026-10-02 (v3)
   ========================================================================== */

:root {
  /* Markenblau = Dunkelblau des Logos (Logo-Paket 2026-10-16), Hover und Fläche wie in der App, die übrigen Töne mit derselben Verschiebung von Farbton und Sättigung abgeleitet, die dunklen auch der Helligkeit */
  --blue: #4572b7; --blue-hover: #3b63a0; --blue-dark: #345c99;
  --navy: #283864;
  --blue-soft: #eef2f8; --blue-line: #ccdaef; --blue-on-dark: #94b2de;
  --ink: #1A1A1A; --text: #374151; --muted: #4B5563; --faint: #6B7280; --ghost: #8A93A3; --ghost2: #9CA3AF;
  --line: #E5E7EB; --line-soft: #F0F2F5; --bg-soft: #FAFBFC; --bg-gray: #F3F4F6;
  --track: #EDEFF3; --field: #D8DCE3;
  --danger: #C0392B; --danger-deep: #9F2D20; --danger-soft: #FBEDEA; --danger-line: #EBC4BE;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(64px, 9vw, 120px);
  --display: 'Space Grotesk', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; scroll-snap-type: y proximity; }
section { scroll-snap-align: start; }
.consequences, .scale, .fit, .flow { scroll-snap-align: start; }
html, body { margin: 0; padding: 0; }
body { background: #fff; font-family: 'IBM Plex Sans', system-ui, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; }
/* Fuß am unteren Fensterrand, wenn die Seite kürzer als das Fenster ist (Impressum, 404). Bei langen Seiten steht er wie
   bisher am Ende des Inhalts. width: 100% hält .wrap auf main in voller Breite – mit margin: auto würde ein Flex-Element
   sonst auf seinen Inhalt schrumpfen. */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; width: 100%; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
h1, h2, h3, p { text-wrap: pretty; }
/* Titel der Karten sind h3 (Gliederung für Suchmaschinen und Screenreader), sehen aber aus wie vorher */
h3.story-t, h3.persona-who { margin: 0; }
h3.persona-who { font-weight: normal; }
.msym { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; user-select: none; }

.wrap { max-width: 1240px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.eyebrow { font-family: var(--mono); font-size: 11.5px; color: var(--blue); letter-spacing: 0.06em; margin-bottom: 16px; text-transform: uppercase; }
.h2 { font-family: var(--display); font-size: clamp(30px, 4vw, 46px); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.lead { font-size: 17px; line-height: 1.6; color: var(--muted); margin: 20px 0 0; }
.head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 60px); }
.head.center { margin-left: auto; margin-right: auto; text-align: center; }
.placeholder { border-radius: 8px; background: repeating-linear-gradient(135deg, #E9EDF2 0 9px, #E1E6EC 9px 18px); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11.5px; color: var(--ghost); text-align: center; padding: 8px; }
.bg-gray { background: var(--bg-gray); }
.bg-gray .eyebrow { color: var(--blue-dark); }
.bg-soft { background: var(--bg-soft); border-top: 1px solid var(--line); }
.ring { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--blue); display: flex; align-items: center; justify-content: center; color: var(--blue); flex-shrink: 0; }
.ring .msym { font-size: 20px; }

/* Buttons (Designsystem: 8px-Radius, 40/44px Höhe) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 8px; font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background .12s ease, border-color .12s ease; }
.btn .msym { font-size: 18px; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-hover); color: #fff; }
.btn-ghost { background: #fff; color: var(--blue); border: 1.5px solid var(--blue); font-weight: 500; }
.btn-ghost:hover { background: var(--blue-soft); color: var(--blue); }
.btn-xl { height: 52px; padding: 0 28px; font-size: 16px; }
.btn-xl .msym { font-size: 20px; }

/* Status-Tags (Designsystem: Mono-Tag, Icon/Text statt Farb-Pille) */
.status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; border-radius: 4px; padding: 3px 7px; white-space: nowrap; flex-shrink: 0; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.status-live { color: var(--blue-dark); background: var(--blue-soft); border: 1px solid var(--blue-line); }
.status-live::before { background: var(--blue); }
.status-dev { color: var(--text); background: #fff; border: 1px solid var(--field); }
.status-dev::before { background: var(--navy); }
.status-plan { color: var(--muted); background: var(--bg-gray); border: 1px solid var(--line); }
.status-plan::before { background: var(--ghost2); }

/* Pilot-Banner */
.banner { background: var(--navy); color: #fff; padding: 10px var(--gutter); display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; text-align: center; }
.banner .tag { font-family: var(--mono); font-size: 11px; background: var(--blue); padding: 3px 8px; border-radius: 4px; letter-spacing: 0.04em; }
.banner a { color: var(--blue-line); font-weight: 500; }
.banner a:hover { color: #fff; }

/* Header */
header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.98); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.nav { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); border-radius: 8px; }
.brand:hover { color: var(--ink); }
/* Logo des Designers: 36 px hoch, Breite aus dem Seitenverhältnis (145 px) */
.brand img { width: auto; height: 36px; display: block; flex-shrink: 0; }
.navlinks { display: flex; align-items: center; gap: 28px; font-size: 14.5px; font-weight: 500; }
.navlinks a { color: var(--text); }
.navlinks a:hover { color: var(--blue); }
.nav-right { display: flex; align-items: center; gap: 18px; font-size: 14.5px; font-weight: 500; }

/* Menü-Schalter und Menüfläche (unter 1100 px, nur mit JS) */
.menu-btn { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--field); border-radius: 8px; background: #fff; cursor: pointer; align-items: center; justify-content: center; flex-shrink: 0; }
.menu-btn:hover { background: var(--blue-soft); border-color: var(--blue-line); }
.menu-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.menu-bars, .menu-bars::before, .menu-bars::after { display: block; width: 18px; height: 2px; border-radius: 1px; background: var(--text); transition: transform .15s ease, top .15s ease, background .15s ease; }
.menu-bars { position: relative; }
.menu-bars::before, .menu-bars::after { content: ""; position: absolute; left: 0; }
.menu-bars::before { top: -6px; }
.menu-bars::after { top: 6px; }
.menu-btn[aria-expanded="true"] .menu-bars { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-bars::before { top: 0; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-bars::after { top: 0; transform: rotate(-45deg); }
.mobile-menu { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 10px 28px rgba(17,19,24,0.14); /* Der Kopf klebt: bei niedrigem Fenster (Querformat, Zoom) muss die Fläche selbst scrollen, sonst liegen die unteren Einträge außerhalb. Die genaue Höhe setzt das Skript (der Banner schiebt den Kopf nach unten), das hier ist der Rückfall. */ max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; }
.mobile-menu[hidden] { display: none; }
.mobile-menu-in { max-width: 1240px; margin: 0 auto; padding: 4px var(--gutter) 16px; display: flex; flex-direction: column; }
.mobile-menu a:not(.btn) { display: flex; align-items: center; min-height: 48px; font-size: 16px; font-weight: 500; color: var(--text); border-bottom: 1px solid var(--line-soft); }
.mobile-menu a:not(.btn):hover { color: var(--blue); }
.mobile-menu a:last-child { border-bottom: 0; }
/* Sprachwahl im Kopf: Kürzel der jeweils anderen Sprache, immer sichtbar (auch neben dem Menü-Schalter) */
.nav-lang { color: var(--text); font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: 8px; }
.nav-lang:hover { color: var(--blue); }
.nav-lang:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.nav-back { color: var(--text); display: inline-flex; align-items: center; min-height: 44px; }
.nav-back:hover { color: var(--blue); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 1 Hero */
.hero { padding-top: clamp(56px, 9vw, 120px); padding-bottom: clamp(56px, 8vw, 104px); text-align: center; }
.pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--blue-line); background: var(--blue-soft); color: var(--blue-dark); border-radius: 999px; padding: 6px 14px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; margin-bottom: 26px; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.hero h1 { font-family: var(--display); font-size: clamp(38px, 6.2vw, 74px); font-weight: 600; line-height: 1.04; letter-spacing: -0.02em; margin: 0 auto; max-width: 17ch; text-wrap: balance; }
.hero h1 span { color: var(--ghost); }
.hero-sub { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: var(--muted); max-width: 60ch; margin: 26px auto 0; }
.hero-ctas { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.hero-proof { margin-top: 36px; display: flex; justify-content: center; gap: 10px 28px; flex-wrap: wrap; font-family: var(--mono); font-size: 12.5px; color: var(--faint); }
.hero-proof span { display: inline-flex; align-items: center; gap: 8px; }
.hero-proof .msym { font-size: 18px; color: var(--blue); }

/* 2 Der Schmerzpunkt */
.pain-quote { font-family: var(--display); font-size: clamp(20px, 2.4vw, 27px); font-weight: 600; line-height: 1.32; letter-spacing: -0.01em; color: var(--ink); max-width: 38ch; margin: 0 0 clamp(36px, 5vw, 56px); text-wrap: balance; }
.consequences { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.conseq { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.conseq-t { font-family: var(--display); font-size: 18px; font-weight: 600; margin: 14px 0 8px; line-height: 1.25; }
.conseq-d { font-size: 14.5px; line-height: 1.55; color: var(--muted); }

/* 3 Der Unterschied: Vorher/Nachher */
.turn { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr); gap: clamp(16px, 3vw, 32px); align-items: center; }
.turn-label { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--faint); margin-bottom: 12px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.note-img { aspect-ratio: 4/3; width: 100%; height: auto; object-fit: cover; object-position: center; display: block; }
.note-body { padding: 18px 20px 20px; }
.note-title { font-family: var(--display); font-size: 19px; font-weight: 600; margin: 4px 0 12px; }
.note-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-size: 12.5px; border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; color: var(--text); background: var(--bg-gray); display: inline-flex; align-items: center; gap: 6px; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ghost2); }
.note-missing { margin-top: 14px; font-size: 13.5px; color: var(--danger-deep); display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; }
.note-missing .msym { font-size: 18px; }
.turn-arrow { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--blue); }
.turn-arrow .msym { font-size: 34px; }
.turn-arrow span:last-child { font-family: var(--mono); font-size: 10.5px; color: var(--faint); text-align: center; max-width: 11ch; line-height: 1.35; }
.rec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.rec-cls { font-family: var(--display); font-size: 19px; font-weight: 600; }
.rec-kg { font-family: var(--mono); font-size: 11px; color: var(--faint); display: block; margin-top: 2px; }
.verified { display: inline-flex; align-items: center; gap: 6px; background: var(--blue-soft); color: var(--ink); font-size: 12.5px; font-weight: 600; border-radius: 6px; padding: 5px 10px; }
.verified .msym { font-size: 18px; color: var(--blue); }
.rec-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); font-size: 13.5px; }
.rec-grid div { padding: 10px 20px; border-bottom: 1px solid var(--line-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rec-grid div:nth-child(odd) { font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: 0.06em; text-transform: uppercase; display: flex; align-items: center; }
.rec-grid .src { color: var(--faint); font-size: 11px; font-family: var(--mono); margin-left: 6px; text-transform: none; letter-spacing: 0; }
.rec-grid .rec-na { color: var(--faint); font-style: italic; }
.rec-foot { display: flex; align-items: center; gap: 10px; padding: 12px 20px; font-size: 12.5px; color: var(--faint); }
.conf-bar { flex: 1; max-width: 120px; height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.conf-bar i { display: block; height: 100%; background: var(--blue); }
.turn-note { font-family: var(--mono); font-size: 11.5px; color: var(--ghost); margin-top: 18px; text-align: right; }
.scale { margin-top: clamp(40px, 6vw, 72px); }
.scale-t { text-align: center; font-family: var(--display); font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; margin: 0 0 24px; }

/* Produkt-Mock (Anlagen-Ansicht im App-Design) */
.mock { border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 10px 28px rgba(17,19,24,0.14); overflow: hidden; text-align: left; }
.mock-bar { height: 40px; border-bottom: 1px solid var(--line); background: var(--bg-soft); display: flex; align-items: center; gap: 7px; padding: 0 16px; }
.mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: #E1E6EC; }
.mock-bar span { margin-left: 14px; font-family: var(--mono); font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-main { padding: 18px clamp(14px, 2vw, 24px) 8px; }
.mock-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.mock-head b { font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.mock-head div { display: flex; gap: 8px; align-items: center; }
.mock-count { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.mock-btn { background: var(--blue); color: #fff; border-radius: 8px; padding: 8px 14px; font-size: 12.5px; font-weight: 600; }
.mock-btn.sec { background: #fff; color: var(--text); border: 1px solid var(--field); }
.mock-grid { display: grid; grid-template-columns: 64px minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) 110px 118px; column-gap: 14px; font-size: 12.5px; }
.mock-grid > div { padding: 9px 0; border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.mock-grid .th { font-family: var(--mono); font-size: 10.5px; color: var(--faint); letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 0; border-bottom-color: var(--line); }
.mock-thumb { width: 54px; aspect-ratio: 3/2; border-radius: 6px; background: repeating-linear-gradient(135deg, #E9EDF2 0 5px, #E1E6EC 5px 10px); }
.mock-cls { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-kg { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.mock-type { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.conf { flex-direction: row !important; align-items: center; justify-content: flex-start !important; gap: 8px; }
.conf .conf-bar { max-width: none; }
.conf span { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.st { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; white-space: nowrap; align-self: flex-start; }
.st .msym { font-size: 17px; }
.st-ok { color: var(--ink); }
.st-ok .msym { color: var(--blue); }
.st-draft { color: var(--muted); }
.st-draft .msym { color: var(--ghost2); }
.mock-grid .last { border-bottom: 0; }

/* 4 So läuft's */
.story { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); counter-reset: s; }
.story-step { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.story-step.human { border-color: var(--blue-line); box-shadow: 0 0 0 3px var(--blue-soft); }
.story-top { display: flex; align-items: center; justify-content: space-between; }
.story-n { font-family: var(--mono); font-size: 13px; color: var(--blue); font-weight: 500; }
.story-top .msym { font-size: 24px; color: var(--ghost2); }
.story-step.human .story-top .msym { color: var(--blue); }
.story-t { font-family: var(--display); font-size: 20px; font-weight: 600; line-height: 1.2; }
.story-d { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.story-who { margin-top: auto; font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: 0.06em; padding-top: 12px; border-top: 1px solid var(--line-soft); }

/* 5 Abgrenzung (Marke dunkel: Navy) */
.dark { background: var(--navy); color: #fff; }
.dark .eyebrow { color: var(--blue-on-dark); }
.dark .lead { color: #C6CFE2; }
.nots { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 28px; }
.not { font-family: var(--display); font-size: clamp(18px, 2vw, 22px); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; color: #fff; }
.not .msym { font-size: 22px; color: #F2B3A6; }
.fit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.16); margin-top: clamp(40px, 5vw, 60px); }
.fit > div { padding: 28px 28px 8px 0; }
.fit .msym { font-size: 26px; color: var(--blue-on-dark); }
.fit-t { font-family: var(--display); font-size: 20px; font-weight: 600; margin: 16px 0 10px; }
.fit-d { font-size: 15.5px; line-height: 1.6; color: #C6CFE2; }
.flow { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); gap: 16px; align-items: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: clamp(20px, 3vw, 32px); margin-top: clamp(36px, 5vw, 56px); }
.flow-col-t { font-family: var(--mono); font-size: 11px; color: #9FB0D4; letter-spacing: 0.06em; margin-bottom: 12px; }
.flow-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 10px 12px; font-size: 14px; color: #E7EBF4; margin-bottom: 8px; }
.flow-item:last-child { margin-bottom: 0; }
.flow-item > span:first-child { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.flow-item .msym { font-size: 18px; color: #9FB0D4; }
.flow-arrow { color: #6E7FA3; font-size: 28px; }
.flow-core { background: var(--blue); color: #fff; border-radius: 8px; padding: 24px 20px; text-align: center; }
.flow-core b { font-family: var(--display); font-size: 22px; font-weight: 600; display: block; margin-bottom: 6px; }
.flow-core span { font-size: 13.5px; color: #fff; line-height: 1.5; }
.flow-core .msym { font-size: 30px; color: #fff; display: block; margin-bottom: 10px; }
.dark .status { border: 1px solid transparent; }
.dark .status-live { color: #c2d5ef; background: rgba(69,114,183,.30); }
.dark .status-live::before { background: #c2d5ef; }
.dark .status-dev { color: #D6DEEC; background: rgba(255,255,255,.10); }
.dark .status-dev::before { background: #D6DEEC; }
.dark .status-plan { color: #C6CFE2; background: rgba(255,255,255,.08); }
.dark .status-plan::before { background: #BAC4D8; }

/* 6 Für wen */
.personas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.persona { border: 1px solid var(--line); border-radius: 12px; padding: clamp(22px, 2.6vw, 30px); display: flex; flex-direction: column; gap: 14px; background: #fff; }
.persona.primary { border-color: var(--blue-line); box-shadow: 0 0 0 3px var(--blue-soft); }
.persona-top { display: flex; align-items: center; gap: 12px; }
.persona-icon { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--blue); color: var(--blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.persona-icon .msym { font-size: 22px; }
.persona-who { font-family: var(--mono); font-size: 12px; color: var(--blue-dark); letter-spacing: .03em; }
.persona-pain { font-family: var(--display); font-size: clamp(19px, 2vw, 23px); font-weight: 600; line-height: 1.25; }
.persona-d { font-size: 15px; line-height: 1.55; color: var(--muted); }
.pilot { margin-top: auto; background: var(--bg-gray); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.pilot-top { display: flex; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 11px; color: var(--muted); margin-bottom: 6px; flex-wrap: wrap; }
.pilot-top b { color: var(--blue-dark); font-weight: 500; }
.pilot-t { font-weight: 600; font-size: 14.5px; margin-bottom: 4px; }
.pilot-d { font-size: 14px; line-height: 1.5; color: var(--muted); }


/* 8 Ausblick: Vier Probleme */
.problems { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.problem { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; }
.problem.solved { border-color: var(--blue-line); box-shadow: 0 0 0 3px var(--blue-soft); }
.problem-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.problem-letter { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--blue); color: var(--blue); font-family: var(--mono); font-size: 14px; font-weight: 500; display: flex; align-items: center; justify-content: center; }
.problem-q { font-family: var(--display); font-size: 19px; font-weight: 600; line-height: 1.22; margin: 0 0 8px; }
.problem-a { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0 0 18px; }
.problem ul { list-style: none; margin: auto 0 0; padding: 0; }
.problem li { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; padding: 11px 0; border-top: 1px solid var(--line-soft); font-size: 14px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; hyphens: auto; }

/* 9 Kontakt */
.cta-wrap { padding: var(--section-y) var(--gutter); }
.cta { max-width: 1240px; margin: 0 auto; background: var(--blue); color: #fff; border-radius: 12px; padding: clamp(36px, 6vw, 72px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(32px, 5vw, 64px); align-items: center; }
.cta .eyebrow { color: #fff; }
.cta h2 { font-family: var(--display); font-size: clamp(28px, 3.6vw, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.cta-sub { font-size: 17px; line-height: 1.55; margin: 18px 0 0; max-width: 46ch; }
.cta-list { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.cta-list li { display: flex; gap: 10px; align-items: flex-start; }
.cta-list .msym { font-size: 19px; }
.contact { background: #fff; color: var(--ink); border-radius: 12px; padding: clamp(22px, 3vw, 32px); display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--blue-soft); color: var(--navy); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 22px; font-weight: 600; flex-shrink: 0; }
.contact-info { flex: 1; min-width: 200px; }
.contact-label { font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: 0.04em; margin-bottom: 4px; }
.contact-name { font-family: var(--display); font-size: 20px; font-weight: 600; margin-bottom: 10px; }
.contact-links { display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 13.5px; }
.contact-links a { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.contact-links a:hover { color: var(--blue); }
.contact-links .msym { font-size: 17px; color: var(--blue); }
.contact .btn-primary { width: 100%; justify-content: center; }

/* Kontaktformular (n8n) — Felder wie App-Login im Designsystem */
.cform { flex: 1 1 100%; display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 20px; }
.cform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cfield { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cfield label { font-size: 13px; font-weight: 600; color: var(--text); }
.cfield input { width: 100%; height: 44px; border: 1px solid var(--field); border-radius: 8px; padding: 0 12px; font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; color: var(--ink); outline: none; background: #fff; }
.cfield input:focus { border-color: var(--blue); }
.cfield input[aria-invalid="true"] { border-color: var(--danger); }
.cfield input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--danger-soft); }
.cfield-error { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--danger-deep); }
.cfield-error:empty { display: none; }
/* Köderfeld: aus dem Sichtfeld geschoben statt display:none, damit einfache Bots es noch füllen */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.cform-status { font-size: 13px; line-height: 1.45; }
/* Datenschutzhinweis unter dem Knopf (Informationspflicht beim Erheben, Art. 13 DSGVO) */
.cform-note { font-size: 12.5px; line-height: 1.5; color: var(--faint); margin: 0; }
.cform-note a { text-decoration: underline; text-underline-offset: 2px; }
.cform-status--error { color: var(--danger-deep); }
.cform-status--success { color: var(--blue-dark); }

/* Footer */
footer { border-top: 1px solid var(--line); }
footer .wrap { padding-top: 32px; padding-bottom: 32px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.foot-brand { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--faint); }
.foot-brand img { width: auto; height: 28px; display: block; flex-shrink: 0; }
/* Logo nicht über die Oberfläche speicherbar: Rechtsklick, langes Drücken und Ziehen treffen den Link bzw.
   die Seite darunter, nicht das Bild – kein „Bild speichern unter …“. Der Klick auf das Logo im Kopf bleibt. */
.brand img, .foot-brand img { pointer-events: none; -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
.foot-links { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; font-size: 13.5px; }
.foot-links a { color: var(--faint); }
.foot-links a:hover { color: var(--blue); }
/* Profile von Bau-Rockstars: Inline-SVG übernimmt Farbe und Hover des Links, es wird nichts von den Netzwerken geladen.
   Den Namen trägt aria-label, die Symbole selbst sind für Screenreader ausgeblendet. */
.foot-social { display: inline-flex; align-items: center; gap: 4px; }
.foot-social a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; }
.foot-social svg { width: 18px; height: 18px; display: block; }

/* Häufige Fragen: aufklappbare Liste. Die Antworten stehen im HTML, Suchmaschinen und KI-Suchen lesen sie auch zugeklappt */
/* Direkt unter dem Kontakt: der Kontaktblock bringt schon Abstand mit */
.faq-section { padding-top: clamp(24px, 3vw, 40px); }
.faq { max-width: 860px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 0; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.faq-q { flex: 1 1 auto; min-width: 0; font-family: var(--display); font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; }
.faq-item summary:hover .faq-q { color: var(--blue); }
/* Pfeil per CSS: das lokale Symbol-Font enthält nur die Symbole der übrigen Seite */
.faq-chev { width: 10px; height: 10px; margin: 0 6px 4px 0; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(45deg); flex-shrink: 0; transition: transform .15s ease, margin .15s ease; }
.faq-item[open] .faq-chev { transform: rotate(-135deg); margin: 4px 6px 0 0; }
.faq-a { font-size: 16px; line-height: 1.65; color: var(--text); margin: 0 0 20px; max-width: 70ch; }
@media (prefers-reduced-motion: reduce) { .faq-chev { transition: none; } }

/* BIM World 2026 – Ankündigung mit Trailer, nach der Messe samt Abschnitt #bim-world und assets/video/ entfernen */
.event-video { max-width: 960px; margin: 0 auto; border-radius: 12px; overflow: hidden; background: #0d1426; box-shadow: 0 10px 28px rgba(0,0,0,0.35); }
.event-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.event-video video:focus-visible { outline: 2px solid var(--blue-on-dark); outline-offset: -2px; }

/* Scroll-Reveal (JS setzt opacity/animation; ohne JS sichtbar) */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
  .menu-bars, .menu-bars::before, .menu-bars::after { transition: none; }
}

/* Legal-Seiten (Impressum, Datenschutz) */
.legal { max-width: 800px; padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(56px, 8vw, 104px); overflow-wrap: anywhere; }
.legal h1 { font-family: var(--display); font-size: clamp(32px, 5vw, 48px); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 28px; text-wrap: balance; }
.legal h2 { font-family: var(--display); font-size: clamp(20px, 2.4vw, 24px); font-weight: 600; line-height: 1.25; margin: 40px 0 12px; }
.legal p, .legal li { font-size: 16px; line-height: 1.65; color: var(--text); margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { text-decoration: underline; text-underline-offset: 2px; }
.legal .meta { font-family: var(--mono); font-size: 13px; color: var(--faint); margin: -12px 0 28px; }
.draft-note { border: 1.5px solid var(--danger-line); background: var(--danger-soft); border-radius: 12px; padding: 18px 20px; margin: 0 0 36px; }
.draft-note p, .draft-note li { font-size: 14.5px; line-height: 1.55; color: var(--ink); margin: 0 0 8px; }
.draft-note ul { margin: 8px 0 0; padding-left: 20px; }
.draft-note li:last-child, .draft-note p:last-child { margin-bottom: 0; }
.draft-note a { color: var(--blue-dark); }
.draft-note .draft-t { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--danger-deep); font-weight: 500; margin-bottom: 8px; }
.legal code { font-family: var(--mono); font-size: 0.9em; }
.draft-mark { background: #FFF1B8; color: var(--ink); border-radius: 4px; padding: 1px 5px; font-family: var(--mono); font-size: 0.92em; box-shadow: inset 0 0 0 1px #E3C75A; }

/* 404-Seite */
.notfound { padding-top: clamp(64px, 12vw, 160px); padding-bottom: clamp(72px, 12vw, 176px); }
.notfound h1 { font-family: var(--display); font-size: clamp(32px, 5vw, 48px); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 20px; text-wrap: balance; }
.notfound p { font-size: 17px; line-height: 1.6; color: var(--muted); margin: 0 0 32px; max-width: 52ch; }
.notfound p a { text-decoration: underline; text-underline-offset: 2px; }

/* Grobe Zeiger (Touch): Links im Banner, im Kontaktblock und im Fuß erreichen 44 px Höhe */
@media (pointer: coarse) {
  .foot-links a, .banner a, .contact-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-social a { width: 44px; height: 44px; }
}

/* Responsive */
@media (max-width: 1100px) {
  .navlinks { display: none; }
  .js .menu-btn { display: inline-flex; }
  .story, .problems { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .consequences, .fit { grid-template-columns: 1fr; }
  .turn { grid-template-columns: minmax(0, 1fr); }
  .turn-arrow { flex-direction: row; justify-content: center; }
  .turn-arrow .msym { transform: rotate(90deg); }
  .turn-arrow span:last-child { max-width: none; }
  .flow { grid-template-columns: 1fr; }
  .flow-arrow { transform: rotate(90deg); justify-self: center; }
  .personas { grid-template-columns: 1fr; }
  .col-hide { display: none !important; }
  .mock-grid { grid-template-columns: 64px minmax(0,1.4fr) minmax(0,1fr) 96px 104px; }
}
@media (max-width: 600px) {
  .story, .problems { grid-template-columns: 1fr; }
  .mock-head div .mock-btn.sec { display: none; }
  .mock-grid { grid-template-columns: 54px minmax(0,1fr) 96px; }
  .col-hide-sm { display: none !important; }
  .rec-grid div { padding: 9px 14px; }
  .st { font-size: 11.5px; }
  .st .msym { font-size: 16px; }
  .cform-row { grid-template-columns: 1fr; }
}
@media (max-width: 356px) {
  /* Kleinste Telefone: der große Hero-Knopf darf umbrechen, statt die Seite zu verbreitern */
  .btn-xl { white-space: normal; flex-shrink: 1; max-width: 100%; height: auto; min-height: 52px; padding: 12px 20px; text-align: center; line-height: 1.25; }
}