/* SLLR Global · ERP Holzbau – Marketing-Website (seit Ausbau 28: hell, SaaS-Optik mit Glasflächen – siehe Block am Dateiende) */
/* ---------------------------------------------------------------- Schriften (Ausbau 22): selbst gehostet, kein Abruf bei Dritten.
   Inter ist eine variable Schrift (eine Datei für 300/400/500); IBM Plex Mono je Gewicht eine Datei. Lizenz: fonts/LIZENZ.txt.
   Die wichtigste Datei (inter-latin.woff2) wird im <head> jeder Seite vorgeladen. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500 500; font-display: swap; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); 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; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500 500; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); 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: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2'); 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; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2'); 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: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2'); 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; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2'); 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; }
/* Ersatzschrift mit den Maßen von Inter: solange Inter lädt, steht der Text schon in gleicher Breite und Höhe –
   beim Wechsel springt nichts (im Blog gemessen: Schlagwörter und Einleitung brachen neu um). */
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'), local('Helvetica'); size-adjust: 107.4%; ascent-override: 90.2%; descent-override: 22.48%; line-gap-override: 0%; }
:root {
  color-scheme: light;
  --bg: #fff;
  --bg-2: rgba(244, 246, 249, 0.72); /* durchscheinend: der Farbverlauf des Hintergrunds bleibt sichtbar */
  --bg-3: #eef1f5;
  --panel: rgba(255, 255, 255, 0.6);
  --ink: #12161c;
  --ink-2: #47505c;
  --ink-3: #5c6572; /* ≥ 4,5:1 auf Weiß und auf den getönten Flächen */
  --line: rgba(18, 24, 38, 0.14);
  --line-2: rgba(18, 24, 38, 0.08);
  --accent: #2563d9;
  --accent-2: #1d4fb8;
  --good: #1f8a5b;
  --warn: #a86400;
  --font: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --max: 1280px;
  --pad: clamp(20px, 4vw, 64px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
::selection { background: var(--ink); color: var(--bg); }
h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; }
p { margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.label b { color: var(--accent); font-weight: 500; }
.lead { font-size: clamp(18px, 2vw, 22px); color: var(--ink-2); line-height: 1.5; max-width: 62ch; }
.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
.mono { font-family: var(--mono); }

/* ---------------------------------------------------------------- Raster-Hintergrund */
.grid-bg {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-2) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0.9), transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0.9), transparent 75%);
}
.noise {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- Navigation */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: 64px;
  border-bottom: 1px solid transparent;
  transition: background 0.4s, border-color 0.4s;
}
.nav.scrolled { background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--line-2); }
.nav .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.brand span:last-child { color: var(--ink-3); }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a { font-size: 13px; color: var(--ink-2); transition: color 0.2s; position: relative; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--ink); }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px; border: 1px solid var(--line); border-radius: 2px;
  font-size: 13px; letter-spacing: 0.02em; color: var(--ink);
  transition: border-color 0.25s, background 0.25s, transform 0.25s var(--ease);
  white-space: nowrap;
}
.btn:hover { border-color: var(--ink); background: rgba(255,255,255,0.04); }
.btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn.primary:hover { background: #fff; transform: translateY(-1px); }
.btn .arr { font-family: var(--mono); transition: transform 0.25s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.burger { display: none; width: 40px; height: 40px; border: 1px solid var(--line); background: none; color: var(--ink); cursor: pointer; border-radius: 2px; }
@media (max-width: 860px) {
  .nav-links { position: fixed; top: 64px; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background: rgba(0,0,0,0.96); border-bottom: 1px solid var(--line); padding: 8px var(--pad) 16px; display: none; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; font-size: 16px; width: 100%; border-bottom: 1px solid var(--line-2); }
  .nav-links a.active::after { display: none; }
  .nav-links .btn { margin-top: 12px; border: 1px solid var(--line); }
  .burger { display: inline-flex; align-items: center; justify-content: center; }
}

/* ---------------------------------------------------------------- Hero */
.hero { position: relative; min-height: 100vh; min-height: min(100svh, 1080px); display: flex; align-items: flex-end; padding: 140px 0 80px; overflow: hidden; }
.hero .wrap { position: relative; z-index: 2; width: 100%; }
.hero h1 { font-size: clamp(40px, 7.2vw, 104px); font-weight: 500; max-width: 14ch; letter-spacing: -0.035em; }
.hero h1 em { font-style: normal; color: var(--ink-3); }
/* Suchbegriff-Zeile als Teil der Hauptüberschrift (für Suchmaschinen), optisch weiter die kleine Kennzeile */
.hero h1 .h1-eyebrow { display: block; width: max-content; max-width: calc(100vw - 2 * var(--pad)); margin-bottom: 18px; font-weight: 400; line-height: 1.7; }
.hero .lead { margin-top: 28px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.hero-meta { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.hero-meta div { display: grid; gap: 4px; }
.hero-meta .v { font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
@media (max-width: 860px) { .hero { padding-top: 110px; } }

/* ---------------------------------------------------------------- Sektionen */
section { position: relative; padding: clamp(80px, 10vw, 150px) 0; }
section.tight { padding: clamp(48px, 6vw, 90px) 0; }
.sec-head { display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: start; margin-bottom: clamp(36px, 5vw, 72px); }
.sec-head h2 { font-size: clamp(30px, 4.2vw, 58px); font-weight: 500; max-width: 22ch; letter-spacing: -0.03em; }
.sec-head .lead { margin-top: 20px; }
@media (max-width: 860px) { .sec-head { grid-template-columns: 1fr; gap: 12px; } }
.rule { height: 1px; background: var(--line-2); }
.hr-full { border: 0; border-top: 1px solid var(--line-2); margin: 0; }

/* Karten */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); }
.cards.two { grid-template-columns: repeat(2, 1fr); }
.cards.four { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--bg); padding: 28px 26px 30px; position: relative; overflow: hidden; transition: background 0.3s; min-height: 220px; display: flex; flex-direction: column; gap: 14px; }
.card:hover { background: var(--bg-3); }
.card::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
.card:hover::before { transform: scaleX(1); }
.card .idx { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.16em; }
.card h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.card p { color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
.card .tags { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--ink-3); border: 1px solid var(--line-2); padding: 3px 7px; border-radius: 2px; }
@media (max-width: 1000px) { .cards, .cards.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cards, .cards.two, .cards.four { grid-template-columns: 1fr; } .card { min-height: 0; } }

/* Prinzipien: zweispaltig */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.principle { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 28px 0; border-top: 1px solid var(--line-2); }
.principle:last-child { border-bottom: 1px solid var(--line-2); }
.principle .n { font-family: var(--mono); font-size: 12px; color: var(--ink-3); padding-top: 6px; }
.principle h3 { font-size: 22px; font-weight: 400; margin-bottom: 8px; }
.principle p { color: var(--ink-2); font-size: 15px; }
.sticky { position: sticky; top: 96px; }

/* Zahlen */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.stat { padding: 32px 24px 32px 0; border-right: 1px solid var(--line-2); }
.stat:last-child { border-right: 0; }
.stat .num { font-size: clamp(38px, 5vw, 64px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat .num small { font-size: 0.45em; color: var(--ink-3); margin-left: 4px; letter-spacing: 0; }
.stat .label { margin-top: 12px; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(2) { border-right: 0; } }

/* Architekturdiagramm */
.diagram { border: 1px solid var(--line-2); background: var(--bg-2); padding: clamp(16px, 3vw, 40px); }
.diagram svg { width: 100%; height: auto; }
.diagram text { font-family: var(--mono); font-size: 11px; fill: var(--ink-2); letter-spacing: 0.06em; }
.diagram .t-title { fill: var(--ink); font-size: 12.5px; font-family: var(--font); letter-spacing: 0; }
.diagram .t-dim { fill: var(--ink-3); font-size: 10px; }
.diagram .box { fill: rgba(255,255,255,0.02); stroke: var(--line); stroke-width: 1; }
.diagram .box.hot { stroke: var(--accent); }
.diagram .zone { fill: none; stroke: var(--line-2); stroke-dasharray: 4 4; }
.diagram .flow { fill: none; stroke: var(--ink-3); stroke-width: 1; }
.diagram .flow.secure { stroke: var(--accent); stroke-dasharray: 6 6; animation: dash 1.6s linear infinite; }
.diagram .flow.blocked { stroke: var(--warn); stroke-dasharray: 2 5; }
@keyframes dash { to { stroke-dashoffset: -24; } }
.legend { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 16px; }
.legend span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; }
.legend i { width: 22px; height: 0; border-top: 1px solid var(--ink-3); }
.legend i.secure { border-top: 1px dashed var(--accent); }
.legend i.blocked { border-top: 1px dotted var(--warn); }

/* Bewegungs-Ledger (Live-Tabelle) */
.ledger { border: 1px solid var(--line-2); background: var(--bg-2); font-family: var(--mono); font-size: 12px; overflow: hidden; }
.ledger .row { display: grid; grid-template-columns: 90px 1fr 110px 90px 90px; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line-2); color: var(--ink-2); align-items: center; }
.ledger .row.head { color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.12em; font-size: 10px; }
.ledger .row.new { animation: rowin 0.7s var(--ease); }
@keyframes rowin { from { opacity: 0; transform: translateY(-8px); background: rgba(91,156,246,0.12); } to { opacity: 1; transform: none; } }
.ledger .q { text-align: right; font-variant-numeric: tabular-nums; }
.ledger .q.neg { color: var(--warn); }
.ledger .q.pos { color: var(--good); }
.ledger .sum { display: flex; justify-content: space-between; padding: 12px 16px; color: var(--ink); background: rgba(255,255,255,0.02); }
@media (max-width: 640px) { .ledger .row { grid-template-columns: 70px 1fr 70px; } .ledger .row > :nth-child(3), .ledger .row > :nth-child(4) { display: none; } }


/* Whitepaper-Liste */
.papers { display: grid; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); }
.paper { background: var(--bg); display: grid; grid-template-columns: 120px 1fr auto; gap: 28px; align-items: center; padding: 30px 28px; transition: background 0.3s; }
.paper:hover { background: var(--bg-3); }
.paper .no { font-family: var(--mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.14em; }
.paper h3 { font-size: 22px; font-weight: 400; }
.paper p { color: var(--ink-2); font-size: 14.5px; margin-top: 8px; max-width: 70ch; }
.paper .meta { margin-top: 12px; display: flex; gap: 18px; flex-wrap: wrap; }
.paper .meta span { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.1em; }
.paper.locked .no::after { content: ' · gesperrt'; color: var(--ink-3); }
.access { margin-top: 28px; padding: 24px 28px; border: 1px solid var(--line-2); background: var(--bg-2); max-width: 78ch; }
.access .label { margin-bottom: 10px; }
.access p:last-child { color: var(--ink-2); font-size: 15px; }
.access b { color: var(--ink); font-weight: 500; }
.access a { color: var(--ink); border-bottom: 1px solid var(--line); }
@media (max-width: 760px) { .paper { grid-template-columns: 1fr; gap: 14px; } }

/* Seitenkopf (Unterseiten) */
.page-head { padding: 160px 0 60px; border-bottom: 1px solid var(--line-2); }
.page-head h1 { font-size: clamp(38px, 6vw, 84px); font-weight: 500; letter-spacing: -0.035em; max-width: 16ch; }
.page-head .lead { margin-top: 24px; }
.toc { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 36px; }
.toc a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid transparent; padding-bottom: 3px; }
.toc a:hover { color: var(--ink); border-color: var(--ink); }

/* Detailblöcke */
.detail { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(28px, 5vw, 80px); padding: clamp(40px, 6vw, 80px) 0; border-top: 1px solid var(--line-2); }
.detail:first-of-type { border-top: 0; }
.detail h3, .detail h2:not(.label) { font-size: clamp(24px, 3vw, 36px); font-weight: 500; letter-spacing: -0.02em; }
.detail .label { margin-bottom: 14px; }
.detail h2.label { font-weight: 400; line-height: 1.6; } /* Bereichsname als Überschrift, optisch weiter Kennzeile */
.detail p { color: var(--ink-2); margin-bottom: 14px; font-size: 15.5px; }
.detail ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.detail li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: 15px; }
.detail li::before { content: ''; position: absolute; left: 0; top: 11px; width: 10px; height: 1px; background: var(--accent); }
.detail li b { color: var(--ink); font-weight: 500; }
.detail table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 8px; }
.detail th, .detail td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line-2); vertical-align: top; color: var(--ink-2); }
.detail th { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; }
.detail td:first-child { color: var(--ink); }
@media (max-width: 860px) { .detail { grid-template-columns: 1fr; } }
code { font-family: var(--mono); font-size: 0.9em; color: var(--accent-2); }

/* CTA */
.cta { border-top: 1px solid var(--line); }
.cta h2 { font-size: clamp(34px, 5vw, 72px); font-weight: 500; letter-spacing: -0.035em; max-width: 16ch; }
.cta .row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }

/* Footer */
footer { border-top: 1px solid var(--line-2); padding: 48px 0 40px; }
footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
footer .fh { font-family: var(--mono); font-size: 11px; line-height: 1.05; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; font-weight: 400; } /* Spaltentitel: bewusst <p>, keine Überschrift */
footer a { display: block; color: var(--ink-2); font-size: 14px; padding: 4px 0; }
footer a:hover { color: var(--ink); }
footer .foot { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line-2); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.1em; }
@media (max-width: 860px) { footer .cols { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------- Animationen */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }
.reveal[data-delay="4"] { transition-delay: 0.4s; }
.lines-draw path, .lines-draw line, .lines-draw polyline { stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.lines-draw.in path, .lines-draw.in line, .lines-draw.in polyline { animation: draw 2.2s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero h1 .w { display: inline-block; opacity: 0; transform: translateY(0.6em); animation: wordin 1s var(--ease) forwards; }
@keyframes wordin { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .reveal, .hero h1 .w { opacity: 1; transform: none; transition: none; animation: none; }
  .diagram .flow.secure, .lines-draw path { animation: none; }
  .lines-draw path, .lines-draw line, .lines-draw polyline { stroke-dashoffset: 0; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- Cookies & Einwilligung (Ausbau 19) */
.cc {
  position: fixed; left: 20px; bottom: 20px; z-index: 90; width: min(440px, calc(100vw - 40px));
  padding: 22px 24px; background: rgba(8, 9, 11, 0.92); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transform: translateY(16px); opacity: 0; transition: transform 0.5s var(--ease), opacity 0.4s;
}
.cc.in { transform: none; opacity: 1; }
.cc .label { margin-bottom: 10px; }
.cc-text { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.cc-text a, .cc-foot a { color: var(--ink); border-bottom: 1px solid var(--line); }
.cc-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.cc-actions .btn { padding: 9px 14px; font-size: 12.5px; cursor: pointer; font-family: var(--font); }
.cc-actions .btn:not(.primary) { background: transparent; }
.cc-link { background: none; border: 0; padding: 8px 4px; color: var(--ink-3); font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.cc-link:hover { color: var(--ink); }
.cc-modal { position: fixed; inset: 0; z-index: 95; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.3s; }
.cc-modal.in { opacity: 1; }
body.cc-open { overflow: hidden; }
.cc-box { width: min(640px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: var(--bg-2); border: 1px solid var(--line); padding: 28px 30px; transform: translateY(10px); transition: transform 0.4s var(--ease); }
.cc-modal.in .cc-box { transform: none; }
.cc-box h3 { font-size: clamp(22px, 3vw, 30px); font-weight: 500; margin: 10px 0 18px; letter-spacing: -0.02em; }
.cc-cat { padding: 16px 0; border-top: 1px solid var(--line-2); }
.cc-cat p { color: var(--ink-2); font-size: 13.5px; margin-top: 8px; line-height: 1.55; }
.cc-switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 15px; }
.cc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cc-knob { width: 38px; height: 20px; border: 1px solid var(--line); border-radius: 20px; position: relative; background: var(--bg-3); transition: background 0.25s, border-color 0.25s; flex: none; }
.cc-knob::after { content: ''; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink-3); transition: transform 0.25s var(--ease), background 0.25s; }
.cc-switch input:checked + .cc-knob { background: var(--accent); border-color: var(--accent); }
.cc-switch input:checked + .cc-knob::after { transform: translateX(18px); background: #fff; }
.cc-switch input:disabled + .cc-knob { opacity: 0.6; }
.cc-switch input:focus-visible + .cc-knob { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.cc-foot { font-size: 12.5px; margin-top: 16px; }
@media (max-width: 560px) { .cc { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 18px; } .cc-box { padding: 22px 18px; } }

/* Datenschutzerklärung */
.legal h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 500; letter-spacing: -0.02em; margin: 44px 0 14px; }
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { color: var(--ink-2); font-size: 15px; line-height: 1.65; }
.legal p { margin-bottom: 12px; max-width: 78ch; }
.legal ul { padding-left: 20px; margin: 0 0 12px; }
.legal a { color: var(--ink); border-bottom: 1px solid var(--line); }
.legal table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 8px 0 16px; }
.legal th, .legal td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line-2); vertical-align: top; color: var(--ink-2); }
.legal th { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; }
.legal td:first-child { color: var(--ink); font-family: var(--mono); font-size: 12.5px; }
.legal .todo { color: var(--warn); }

/* ================================================================ Ausbau 21 – Landingpage / Funnel mit Bildern */
:root { --wood: #9a5a22; --wood-2: #7d4616; --wood-ink: #fff; } /* Kupfer der Marke, auf Weiß ≥ 4,5:1; --wood-2 = dunkler (Hover) */
.btn.cta { background: var(--wood); border-color: var(--wood); color: var(--wood-ink); font-weight: 500; }
.btn.cta:hover { background: var(--wood-2); border-color: var(--wood-2); transform: translateY(-1px); }
.btn.lg { padding: 15px 24px; font-size: 15px; }
@media (max-width: 600px) { .btn.lg { white-space: normal; text-align: left; } }
button.btn { font-family: var(--font); cursor: pointer; background: transparent; }
button.btn.cta { background: var(--wood); }
button.btn:disabled { opacity: 0.55; cursor: default; transform: none; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--wood); outline-offset: 2px; }
@media (max-width: 1040px) {
  .nav-links { position: fixed; top: 64px; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background: rgba(0,0,0,0.96); border-bottom: 1px solid var(--line); padding: 8px var(--pad) 16px; display: none; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; font-size: 16px; width: 100%; border-bottom: 1px solid var(--line-2); }
  .nav-links a.active::after { display: none; }
  .nav-links .btn { margin-top: 12px; border: 1px solid var(--line); justify-content: center; }
  .nav-links .btn.cta { border-color: var(--wood); }
  .burger { display: inline-flex; align-items: center; justify-content: center; }
}

.ticks { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.ticks li { position: relative; padding-left: 24px; font-size: 14px; color: #d5d9df; }
.ticks li::before { content: ''; position: absolute; left: 0; top: 5px; width: 12px; height: 7px; border-left: 2px solid var(--wood); border-bottom: 2px solid var(--wood); transform: rotate(-45deg); }

/* Bildrahmen: Browserfenster und Handy */
.frame { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #1c2127; box-shadow: 0 40px 120px -30px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.03); }
.frame-bar { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #14181d; border-bottom: 1px solid var(--line-2); }
.frame-bar i { width: 9px; height: 9px; border-radius: 50%; background: #3a424d; }
.frame-bar span { margin-left: 10px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frame img { width: 100%; height: auto; }
.phone { width: 100%; max-width: 250px; border: 6px solid #2a3038; border-radius: 28px; overflow: hidden; background: #1c2127; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.9); }
.phone img { width: 100%; height: auto; }
.photo { position: relative; overflow: hidden; border: 1px solid var(--line-2); border-radius: 6px; background: var(--bg-3); }
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* Produktblick unter dem Hero */
.peek { padding: 0 0 clamp(60px, 8vw, 110px); }
.peek .stage { position: relative; margin-top: -130px; z-index: 3; }
.peek .phone { position: absolute; right: clamp(-10px, 2vw, 40px); bottom: -36px; width: 19%; min-width: 130px; }
@media (max-width: 760px) { .peek .stage { margin-top: -70px; } .peek .phone { width: 25%; min-width: 0; bottom: -24px; right: 8px; border-width: 4px; border-radius: 18px; } }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); margin-top: clamp(64px, 8vw, 96px); }
.fact { background: var(--bg); padding: 24px 22px; }
.fact .num { font-size: clamp(30px, 3.6vw, 46px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--wood); }
.fact p { margin-top: 10px; color: var(--ink-2); font-size: 14px; line-height: 1.45; }
@media (max-width: 860px) { .facts { grid-template-columns: repeat(2, 1fr); } }

/* Abschnittskopf, kundennah */
.head { max-width: 780px; margin-bottom: clamp(32px, 5vw, 60px); }
.head + .feature { padding-top: 0; }
.head.center { margin-left: auto; margin-right: auto; text-align: center; }
.head.center .lead { margin-left: auto; margin-right: auto; }
.head .label b { color: var(--wood); }
.head h2 { font-size: clamp(30px, 4.2vw, 54px); font-weight: 500; letter-spacing: -0.03em; margin-top: 14px; }
.head .lead { margin-top: 18px; }

/* Probleme */
.pains { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: stretch; }
.pains > * { min-width: 0; }
.pain-list { display: grid; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); }
.pain { background: var(--bg); padding: 24px 24px 26px; display: grid; grid-template-columns: 44px 1fr; gap: 18px; }
.pain svg { width: 30px; height: 30px; stroke: var(--wood); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.pain h3 { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; }
.pain p { color: var(--ink-2); font-size: 14.5px; margin-top: 6px; line-height: 1.55; }
.pains .photo { min-height: 320px; }
.pains .photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 22px 20px; background: linear-gradient(to top, rgba(0,0,0,0.88), transparent); font-size: 17px; line-height: 1.4; color: var(--ink); }
@media (max-width: 900px) { .pains { grid-template-columns: 1fr; } .pains .photo { min-height: 240px; aspect-ratio: 16 / 10; } }

/* Zielgruppen als Bildkarten */
.segs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.seg { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px; padding: 22px; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; isolation: isolate; }
.seg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.seg::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.82) 42%, rgba(0,0,0,0.14) 80%); transition: background 0.4s; }
.seg:hover img { transform: scale(1.05); }
.seg:hover { border-color: var(--wood); }
.seg .idx { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--wood); }
.seg h3 { font-size: 22px; font-weight: 500; margin-top: 8px; letter-spacing: -0.01em; line-height: 1.15; }
.seg p { color: #c9ced6; font-size: 14px; margin-top: 10px; line-height: 1.5; }
.seg .more { margin-top: 14px; font-size: 13px; color: var(--ink); display: inline-flex; gap: 8px; }
.seg .more .arr { font-family: var(--mono); transition: transform 0.25s var(--ease); }
.seg:hover .more .arr { transform: translateX(4px); }
@media (max-width: 1100px) { .segs { grid-template-columns: repeat(2, 1fr); } .seg { min-height: 340px; } }
@media (max-width: 600px) { .segs { grid-template-columns: 1fr; } .seg { min-height: 300px; } }

/* Funktionen: Bild und Text im Wechsel */
.feature { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; padding: clamp(36px, 5vw, 70px) 0; }
.feature + .feature { border-top: 1px solid var(--line-2); }
.feature.flip .media { order: 2; }
.feature .media { position: relative; min-width: 0; }
.feature .media .phone { position: absolute; right: -14px; bottom: -28px; width: 26%; min-width: 110px; }
.feature .media .inset { position: absolute; left: -14px; bottom: -28px; width: 38%; aspect-ratio: 4 / 3; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.9); border-color: var(--line); }
.feature .label b { color: var(--wood); }
.feature h3 { font-size: clamp(26px, 3.2vw, 40px); font-weight: 500; letter-spacing: -0.025em; margin-top: 12px; line-height: 1.1; }
.feature .txt > p { color: var(--ink-2); margin-top: 16px; font-size: 16.5px; line-height: 1.6; }
.checks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 11px; }
.checks li { position: relative; padding-left: 28px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.checks li b { color: var(--ink); font-weight: 500; }
.checks li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px; border-left: 2px solid var(--wood); border-bottom: 2px solid var(--wood); transform: rotate(-45deg); }
.feature .txt .btn { margin-top: 24px; }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; } .feature.flip .media { order: 0; } .feature .media { margin-bottom: 26px; } .feature .media .phone { right: 6px; } .feature .media .inset { left: 6px; } }

/* Einblick: Reiter mit Screenshots */
.tour-tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 26px; }
.tour-tabs button { font-family: var(--font); font-size: 13.5px; color: var(--ink-2); background: transparent; border: 1px solid var(--line-2); border-radius: 40px; padding: 9px 16px; cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; }
.tour-tabs button:hover { color: var(--ink); border-color: var(--line); }
.tour-tabs button[aria-selected="true"] { color: var(--wood-ink); background: var(--wood); border-color: var(--wood); }
.tour-stage { max-width: 1120px; margin: 0 auto; }
.tour-stage img { transition: opacity 0.35s; }
.tour-stage img.swap { opacity: 0; }
.tour-cap { max-width: 720px; margin: 22px auto 0; text-align: center; color: var(--ink-2); font-size: 15.5px; min-height: 3.2em; }
.tour-cap b { color: var(--ink); font-weight: 500; }

/* Bildband */
.band { position: relative; padding: clamp(110px, 16vw, 220px) 0; overflow: hidden; isolation: isolate; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; z-index: -2; }
.band::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.8) 45%, rgba(0,0,0,0.3) 100%); }
.band h2 { font-size: clamp(32px, 5vw, 68px); font-weight: 500; letter-spacing: -0.035em; max-width: 16ch; }
.band h2 em { font-style: normal; color: var(--wood); }
.band .lead { margin-top: 22px; color: #d5d9df; }
.band.shade::after { background: rgba(0,0,0,0.82); }
.band .label b, .demo .label b { color: var(--wood); }

/* Schritte */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: step; }
.step { position: relative; padding: 26px 22px 28px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--bg); }
.step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--wood); color: var(--wood); font-family: var(--mono); font-size: 14px; margin-bottom: 18px; }
.step h3 { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.step p { color: var(--ink-2); font-size: 14.5px; margin-top: 8px; line-height: 1.55; }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } }

/* Sicherheit kompakt */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); }
.trust > div { background: rgba(8,9,11,0.86); padding: 26px 22px 28px; }
.trust svg { width: 28px; height: 28px; stroke: var(--wood); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.trust h3 { font-size: 18px; font-weight: 500; margin-top: 16px; }
.trust p { color: var(--ink-2); font-size: 14px; margin-top: 8px; line-height: 1.55; }
@media (max-width: 1000px) { .trust { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .trust { grid-template-columns: 1fr; } }

/* FAQ */
.faq { max-width: 860px; margin: 0 auto; border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 4px; font-size: clamp(17px, 2vw, 20px); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--mono); font-size: 20px; color: var(--wood); transition: transform 0.3s var(--ease); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 4px 24px; color: var(--ink-2); font-size: 15.5px; line-height: 1.65; max-width: 72ch; }
.faq details a { color: var(--ink); border-bottom: 1px solid var(--line); }

/* Demo-Anfrage (Funnel) */
.demo { position: relative; isolation: isolate; overflow: hidden; border-top: 1px solid var(--line); }
.demo > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.demo::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,0.93) 0%, rgba(0,0,0,0.84) 50%, rgba(0,0,0,0.7) 100%); }
.demo-grid { display: grid; grid-template-columns: 1fr minmax(0, 560px); gap: clamp(32px, 6vw, 90px); align-items: start; }
.demo h2 { font-size: clamp(32px, 4.6vw, 62px); font-weight: 500; letter-spacing: -0.035em; max-width: 14ch; margin-top: 12px; }
.demo .lead { margin-top: 20px; color: #d5d9df; }
.next { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 18px; counter-reset: nx; max-width: 46ch; }
.next li { position: relative; padding-left: 50px; color: #c9ced6; font-size: 15px; line-height: 1.5; }
.next li b { display: block; color: var(--ink); font-weight: 500; font-size: 16px; }
.next li::before { counter-increment: nx; content: counter(nx); position: absolute; left: 0; top: 2px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--wood); color: var(--wood); display: grid; place-items: center; font-family: var(--mono); font-size: 13px; }
@media (max-width: 960px) { .demo-grid { grid-template-columns: 1fr; } }
.funnel { background: rgba(12,14,17,0.94); border: 1px solid var(--line); border-radius: 10px; padding: clamp(22px, 3vw, 34px); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 40px 120px -30px rgba(0,0,0,0.9); }
.funnel-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.funnel-progress .bar { flex: 1; height: 3px; background: var(--line-2); border-radius: 3px; overflow: hidden; }
.funnel-progress .bar i { display: block; height: 100%; width: 33.3%; background: var(--wood); transition: width 0.5s var(--ease); }
.funnel-progress span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-3); text-transform: uppercase; white-space: nowrap; }
.funnel fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.funnel legend { padding: 0; font-size: clamp(20px, 2.4vw, 25px); letter-spacing: -0.015em; line-height: 1.2; margin-bottom: 18px; }
.funnel .sub { font-size: 14.5px; color: var(--ink-2); margin: 22px 0 10px; }
.funnel [hidden] { display: none !important; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt { position: relative; display: flex; align-items: flex-end; min-height: 96px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; cursor: pointer; isolation: isolate; font-size: 15px; font-weight: 500; line-height: 1.2; transition: border-color 0.2s; }
.opt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.opt::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.35)); transition: background 0.2s; }
.opt.plain { align-items: center; justify-content: center; min-height: 54px; grid-column: 1 / -1; font-weight: 400; color: var(--ink-2); }
.opt.plain::after { background: transparent; }
.opt input, .chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt:hover, .opt:has(input:checked) { border-color: var(--wood); }
.opt:has(input:checked)::after { background: linear-gradient(to top, rgba(40,24,4,0.92), rgba(227,165,92,0.28)); }
.opt:has(input:focus-visible), .chips label:has(input:focus-visible) { outline: 2px solid var(--wood); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; padding: 9px 14px; border: 1px solid var(--line); border-radius: 40px; font-size: 14px; color: var(--ink-2); cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; user-select: none; }
.chips label:hover { color: var(--ink); border-color: var(--ink-3); }
.chips label:has(input:checked) { background: var(--wood); border-color: var(--wood); color: var(--wood-ink); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field span { font-size: 13px; color: var(--ink-2); }
.field span i { font-style: normal; color: var(--wood); }
.field input, .field textarea { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 4px; padding: 12px 13px; color: var(--ink); font: inherit; font-size: 16px; transition: border-color 0.2s; }
.field input:hover, .field textarea:hover { border-color: var(--ink-3); }
.field textarea { resize: vertical; min-height: 84px; }
.field input.bad, .field textarea.bad { border-color: #e06c5a; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent-line { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin-top: 16px; cursor: pointer; }
.consent-line input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--wood); }
.consent-line a { color: var(--ink); border-bottom: 1px solid var(--line); }
.funnel-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; }
.funnel-actions .back { background: none; border: 0; color: var(--ink-3); font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; padding: 10px 4px; }
.funnel-actions .back:hover { color: var(--ink); }
.funnel-msg { margin-top: 16px; padding: 12px 14px; border: 1px solid #e06c5a; border-radius: 4px; font-size: 14px; color: #f0b8ae; line-height: 1.5; }
.funnel-msg a { color: var(--ink); border-bottom: 1px solid var(--line); }
.funnel-note { margin-top: 14px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.funnel-done { text-align: center; padding: 26px 6px 14px; }
.funnel-done svg { width: 58px; height: 58px; stroke: var(--wood); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin: 0 auto 18px; }
.funnel-done h3 { font-size: 26px; font-weight: 400; letter-spacing: -0.02em; }
.funnel-done p { color: var(--ink-2); margin-top: 12px; font-size: 15.5px; }
@media (max-width: 520px) { .fields { grid-template-columns: 1fr; } .opt { min-height: 84px; font-size: 14px; } }

/* Mobile CTA-Leiste */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(0,0,0,0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform 0.4s var(--ease); }
.sticky-cta.show { transform: none; }
.sticky-cta .btn { width: 100%; justify-content: center; padding: 14px 18px; font-size: 15px; }
@media (max-width: 760px) { .sticky-cta { display: block; } body.has-sticky footer { padding-bottom: 96px; } body.has-sticky .cc { bottom: 78px; } }

/* Unterseiten: Seitenkopf mit Foto, Bilder in Detailblöcken */
.page-head.has-img { position: relative; isolation: isolate; overflow: hidden; }
.page-head.has-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.page-head.has-img::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,0.93) 0%, rgba(0,0,0,0.78) 45%, rgba(0,0,0,0.4) 100%), linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0) 30%, rgba(0,0,0,0.6) 100%); }
.page-head.has-img .lead { color: #d5d9df; }
.page-head.has-img .toc a { color: #c2c7cf; }
.detail .photo { margin-top: 22px; aspect-ratio: 3 / 2; }
.detail .frame { margin-top: 22px; }
.detail .frame + p, .detail .photo + p { margin-top: 14px; }
.shot-link { display: block; cursor: zoom-in; }
.credit { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-3); margin-top: 8px; }
.credit a { border-bottom: 1px solid var(--line-2); }
.cta .btn.cta + .btn { background: transparent; }

/* Bildnachweis */
.credits { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.credits figure { margin: 0; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; background: var(--bg-2); }
.credits img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.credits figcaption { padding: 14px 16px 16px; font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.credits figcaption b { display: block; color: var(--ink); font-weight: 500; margin-bottom: 4px; overflow-wrap: anywhere; }
.credits a { color: var(--ink); border-bottom: 1px solid var(--line); }

/* Großansicht für Screenshots */
.lightbox { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,0.92); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; opacity: 0; transition: opacity 0.25s; }
.lightbox.in { opacity: 1; }
.lightbox img { max-width: min(1440px, 100%); max-height: 100%; border: 1px solid var(--line); border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  .seg img, .tour-stage img, .sticky-cta, .funnel-progress .bar i, .lightbox { transition: none; }
}

/* Einwilligungsbanner am Desktop rechts unten – links verdeckte es beim ersten Besuch die Schaltflächen im Hero */
@media (min-width: 761px) { .cc { left: auto; right: 20px; } }

/* ---------------------------------------------------------------- Ausbau 22 (Integration): Fußzeile mit fünf Spalten
   (Marke · Produkt · Lösungen nach Aufgabe · Wissen · Rechtliches). Ersetzt die Vier-Spalten-Regel weiter oben. */
footer .cols { grid-template-columns: 1.5fr 1.15fr 1.25fr 1.2fr 1fr; }
@media (max-width: 1100px) { footer .cols { grid-template-columns: repeat(4, 1fr); } footer .cols > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 860px) { footer .cols { grid-template-columns: 1fr 1fr; } }
/* Ausbau 30: Zeile „Weitere Themen“ (Long-Tail-Seiten) unter den Spalten */
footer .more-topics { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; gap: 2px 22px; }
footer .more-topics .fh { flex-basis: 100%; margin-bottom: 8px; }
/* Long-Tail-Seiten: Bildschirmfoto unter dem Abschnitt „Lösung“, Verweise „Vertiefung“, Themenübersicht auf loesungen.html */
.lt-shot { margin: 56px auto 0; max-width: 1040px; }
.lt-more { margin-top: 28px; color: var(--ink-2); font-size: 15px; line-height: 1.9; }
.lt-more a, .lt-topics a { color: var(--ink); border-bottom: 1px solid var(--line); }
.lt-topics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; }
.lt-topics h3 { font-size: 15px; margin: 0 0 10px; }
.lt-topics a { display: table; margin: 0 0 8px; font-size: 15px; }
@media (max-width: 1100px) { .lt-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* minmax(0, 1fr): mit „1fr 1fr“ durften die Spalten nicht unter ihren Inhalt schrumpfen – „Werkzeugverwaltung mit QR-Code“ machte die Seite am Handy 406 px breit (10.10.) */
@media (max-width: 600px) { .lt-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; } .lt-shot { margin-top: 36px; } .lt-topics a { padding: 6px 0; margin-bottom: 4px; overflow-wrap: anywhere; } }

/* ================================================================ Ausbau 22 – Responsive (Handy ≤ 600 · Tablet 601–1040 · Desktop)
   Vollbild-Menü, Tippflächen ≥ 44 px, Fließtext ≥ 16 px auf dem Handy, kürzere Seiten durch wischbare Kartenreihen und
   einklappbare Listen, kompaktes Einwilligungsbanner. Prüfung: tools/e2e/website-responsive.mjs */

/* Tippflächen */
.brand { min-height: 44px; }
.burger { width: 44px; height: 44px; flex: none; font-size: 20px; line-height: 1; }
@media (max-width: 1180px), (pointer: coarse) {
  .nav-links { gap: 12px; }
  .nav-links a:not(.btn) { padding: 12px 8px; }
  .nav-links a.active::after { left: 8px; right: 8px; bottom: 6px; }
  .nav-links .btn { min-height: 44px; margin-left: 8px; }
  .toc { gap: 4px 20px; }
  .toc a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding-bottom: 0; }
  footer a { display: flex; align-items: center; min-height: 44px; padding: 0; }
  .cc-actions .btn, .cc-link, .tour-tabs button, .funnel-actions .back { min-height: 44px; }
  .chips label { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Menü als Vollbild (Handy und Tablet hochkant). Solange es offen ist, trägt die Kopfzeile keinen Weichzeichner:
   backdrop-filter würde die fest positionierte Liste auf die Höhe der Kopfzeile einsperren. */
@media (max-width: 1040px) {
  .nav.menu-open { background: #000; border-color: var(--line-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
  html.menu-open { overflow: hidden; }
  .nav-links { bottom: 0; align-items: stretch; flex-wrap: nowrap; gap: 0; padding: 8px var(--pad) calc(28px + env(safe-area-inset-bottom)); background: #000; border-bottom: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .nav-links a:not(.btn) { display: flex; align-items: center; min-height: 58px; padding: 0; font-size: 19px; color: var(--ink); }
  .nav-links a.active:not(.btn) { color: var(--wood); }
  .nav-links .btn { min-height: 54px; margin: 18px 0 0; font-size: 16px; }
  .nav-links .btn + .btn { margin-top: 10px; }
}
@media (max-width: 1040px) and (max-height: 500px) {
  .nav-links a:not(.btn) { min-height: 46px; font-size: 17px; }
  .nav-links .btn { min-height: 46px; margin-top: 12px; }
}
@media (max-width: 400px) { .brand { gap: 10px; font-size: 11px; letter-spacing: 0.1em; white-space: nowrap; } }

/* Sprungmarken als wischbare Reihe von Feldern */
@media (max-width: 760px) {
  .toc { flex-wrap: nowrap; gap: 8px; margin: 24px calc(-1 * var(--pad)) 0; padding: 2px var(--pad); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .toc::-webkit-scrollbar { display: none; }
  .toc a { flex: none; padding: 0 14px; border: 1px solid var(--line); border-radius: 40px; white-space: nowrap; background: rgba(0, 0, 0, 0.35); }
  .legal table, .detail table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .legal th, .legal td, .detail th, .detail td { min-width: 104px; }
}

/* Lange Listen in den Detailblöcken: auf dem Handy zuerst zwei Punkte, der Rest per Knopf (js/site.js) */
.fold-toggle { display: none; }

@media (max-width: 600px) {
  section { padding: 56px 0; }
  section.tight { padding: 40px 0; }
  .band { padding: 76px 0; }
  .page-head { padding: 116px 0 40px; }
  /* lange Einzelwörter („Datenschutzerklärung“) waren breiter als das Gerät */
  .page-head h1 { font-size: clamp(29px, 8.4vw, 38px); overflow-wrap: anywhere; }
  .peek { padding-bottom: 48px; }
  .head, .sec-head { margin-bottom: 28px; }
  .detail { padding: 36px 0; }

  /* Fließtext */
  .card p, .pain p, .step p, .trust p, .fact p, .seg p, .paper p, .principle p, .access p:last-child, .detail p, .detail li,
  .checks li, .tour-cap, .legal p, .legal li, .faq details > div, .next li, .funnel .sub, .funnel-done p { font-size: 16px; }
  .fact { padding: 20px 16px; }
  .pain { grid-template-columns: 36px 1fr; gap: 14px; padding: 20px 18px 22px; }
  /* Mindesthöhe + Seitenverhältnis erzwangen 384 px Breite – auf schmalen Handys wurde die ganze Seite dadurch breiter als das Gerät */
  .pains .photo { min-height: 0; }

  /* Kartenreihen zum Wischen: die nächste Karte schaut ein Stück herein */
  .segs, .steps, .trust, .cards.four {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px;
    margin-inline: calc(-1 * var(--pad)); padding: 2px var(--pad) 8px; scroll-padding-inline: var(--pad);
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    background: none; border: 0;
  }
  .segs::-webkit-scrollbar, .steps::-webkit-scrollbar, .trust::-webkit-scrollbar, .cards.four::-webkit-scrollbar, .tour-tabs::-webkit-scrollbar { display: none; }
  .segs > *, .steps > *, .trust > *, .cards.four > * { scroll-snap-align: start; }
  .segs > .reveal, .steps > .reveal, .trust > .reveal, .cards.four > .reveal { opacity: 1; transform: none; transition: none; }
  .trust > div, .cards.four > .card { border: 1px solid var(--line-2); border-radius: 6px; }
  .seg { min-height: 320px; }
  .tour-tabs { flex-wrap: nowrap; justify-content: flex-start; margin-inline: calc(-1 * var(--pad)); padding: 2px var(--pad); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tour-tabs button { flex: none; }

  .detail ul.folded > li:nth-child(n + 3) { display: none; }
  .fold-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; padding: 0; background: none; border: 0; color: var(--wood); font: inherit; font-size: 15px; cursor: pointer; }
  .fold-toggle::after { content: '+'; font-family: var(--mono); font-size: 17px; }
  .fold-toggle[aria-expanded="true"]::after { content: '–'; }

  /* Einwilligungsbanner kompakt */
  .cc { padding: 14px 16px; }
  .cc .label { margin-bottom: 6px; }
  .cc-text { font-size: 13px; line-height: 1.45; }
  .cc-actions { gap: 8px; margin-top: 12px; }
  .cc-actions .btn { flex: 1 1 auto; justify-content: center; }
}
/* Das Banner rückt erst nach oben, wenn die CTA-Leiste wirklich eingeblendet ist – beim ersten Blick verdeckte es sonst die Schaltfläche im Hero */
@media (max-width: 760px) {
  .cc { transition: transform 0.5s var(--ease), opacity 0.4s, bottom 0.3s var(--ease); }
  body.has-sticky .cc { bottom: 12px; }
  body.has-sticky:has(.sticky-cta.show) .cc { bottom: 78px; }
}
/* Handy quer: Banner breit und flach statt hoch */
@media (max-height: 500px) and (orientation: landscape) {
  .cc { left: auto; right: 12px; bottom: 12px; width: min(640px, calc(100vw - 24px)); padding: 12px 16px; }
  .cc .label { display: none; }
  .cc-text { font-size: 12.5px; line-height: 1.4; }
  .cc-actions { margin-top: 8px; }
}

/* ===================================================================== Ausbau 23: Handlungsaufforderungen */
/* CTA-Band am Ende jeder Seite (in der Fußzeile, damit Blog und Publikationen es mitbekommen). Seiten mit eigenem
   Abschnitt #demo (Startseite mit Formular, Landingpages mit Schluss) brauchen es nicht. */
.cta-band { padding: 8px 0 48px; margin-bottom: 44px; border-bottom: 1px solid var(--line-2); }
.cta-band .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: end; }
.cta-band h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.12; margin-top: 10px; max-width: 22ch; letter-spacing: -0.02em; }
.cta-band .dim { margin-top: 14px; max-width: 52ch; font-size: 16px; }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
footer .cta-band-actions a.btn { display: inline-flex; padding: 13px 20px; font-size: 15px; }
footer .cta-band-actions a.btn:not(.cta) { color: var(--ink); }
.btn.ghost { border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { border-color: var(--line-2); color: var(--ink); }
body:has(#demo) .cta-band { display: none; }
@media (max-width: 900px) {
  .cta-band .wrap { grid-template-columns: 1fr; gap: 22px; }
  .cta-band-actions { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .cta-band-actions { flex-direction: column; align-items: stretch; }
  footer .cta-band-actions a.btn { justify-content: center; min-height: 48px; }
}
footer .sticky-cta a.btn { display: flex; color: var(--wood-ink); }
@media (max-width: 760px) { footer { padding-bottom: 96px; } }

/* Hinweis am Desktop (rechts unten, nur ab 1041 px, einmal je Sitzung) */
.nudge { position: fixed; right: 24px; bottom: 24px; z-index: 55; width: 320px; padding: 20px 20px 18px; background: rgba(10, 11, 13, 0.96); border: 1px solid var(--line-2); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55); transform: translateY(16px); opacity: 0; transition: transform 0.35s var(--ease), opacity 0.35s var(--ease); }
.nudge.in { transform: none; opacity: 1; }
.nudge[hidden] { display: none; }
.nudge .label { font-size: 10.5px; }
.nudge-title { font-size: 18px; line-height: 1.25; margin-top: 8px; color: var(--ink); font-weight: 500; }
.nudge .dim { font-size: 14px; margin-top: 6px; }
footer .nudge a.btn { display: inline-flex; margin-top: 14px; color: var(--wood-ink); padding: 11px 16px; font-size: 14px; }
.nudge-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; font-size: 14px; }
.nudge-x:hover { color: var(--ink); }
@media (max-width: 1040px) { .nudge { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .nudge { transition: none; } }
@media print { .cta-band, .sticky-cta, .nudge { display: none !important; } }

/* ===================================================================== Ausbau 24: Logo SLLR Global */
.brand .logo { display: block; height: 42px; width: auto; flex: none; }
.brand .logo-lg { height: 64px; }
.brand .logo + span { color: var(--ink-3); }
/* Logo-Bild des Auftraggebers + Schriftzug direkt daneben (02.10.) */
.brand span.wordmark { color: var(--ink); font-family: var(--font); font-size: 19px; font-weight: 500; letter-spacing: 0.02em; text-transform: none; }
.brand .logo-lg + span.wordmark { font-size: 24px; }
@media (max-width: 400px) { .brand .logo { height: 36px; } }
@media print { .brand .logo { filter: invert(1) hue-rotate(180deg); } }

/* ===================================================================== Ausbau 25: mehr Ruhe in der Bewegung (02.10.)
   Seitenwechsel als Überblendung (View Transitions, wo der Browser es kann), Fotos blenden weich ein,
   Bildbänder mit leichter Parallaxe, Hero-Foto mit langsamem Zoom, Fortschrittslinie unter der Navigation,
   Bildstreifen „Holzbau in Deutschland“. Alles aus bei „Bewegung reduzieren“. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.26s var(--ease) both; }
::view-transition-new(root) { animation: vt-in 0.46s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
.nav { view-transition-name: site-nav; }

.js-motion img.fade-img { opacity: 0; transition: opacity 0.9s var(--ease); }
.js-motion img.fade-img.is-loaded { opacity: 1; }
.seg img, .hb-tile img { will-change: transform; }

.js-parallax .band > img { top: -9%; bottom: auto; height: 118%; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

.scroll-progress { position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 120; background: var(--wood); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; opacity: 0.85; }

/* Bildstreifen „Holzbau in Deutschland“ */
.hb { padding: clamp(70px, 9vw, 120px) 0 clamp(60px, 8vw, 100px); border-top: 1px solid var(--line-2); overflow: hidden; }
.hb .head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; }
.hb .head > div { max-width: 62ch; }
.hb-ctrl { display: flex; gap: 14px; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.hb-ctrl a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.hb-ctrl button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink-2); background: transparent; border: 1px solid var(--line); border-radius: 40px; padding: 8px 14px; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.hb-ctrl button:hover, .hb-ctrl button:focus-visible { color: var(--ink); border-color: var(--wood); }
.hb-gallery { margin-top: 40px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
.hb-track { display: flex; gap: 18px; width: max-content; padding: 4px 0; animation: hb-scroll 70s linear infinite; }
.hb-gallery:hover .hb-track, .hb-gallery:focus-within .hb-track, .hb.paused .hb-track { animation-play-state: paused; }
@keyframes hb-scroll { to { transform: translate3d(calc(-50% - 9px), 0, 0); } }
.hb-tile { position: relative; flex: none; width: clamp(230px, 24vw, 320px); aspect-ratio: 4 / 5; margin: 0; overflow: hidden; border: 1px solid var(--line-2); background: var(--bg-2); }
.hb-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), opacity 0.9s var(--ease); }
.hb-tile:hover img { transform: scale(1.06); }
.hb-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,0.88) 100%); pointer-events: none; }
.hb-tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 0 18px 18px; }
.hb-tile figcaption b { display: block; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.hb-tile figcaption span { display: block; margin-top: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #c2c7cf; }
.hb-tile figcaption b::before { content: ''; display: block; width: 22px; height: 2px; margin-bottom: 12px; background: var(--wood); transition: width 0.6s var(--ease); }
.hb-tile:hover figcaption b::before { width: 44px; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .js-motion img.fade-img { opacity: 1; transition: none; }
  .js-parallax .band > img { top: 0; height: 100%; transform: none; }
  .scroll-progress { display: none; }
  .hb-gallery { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scroll-snap-type: x mandatory; }
  .hb-track { animation: none; }
  .hb-tile { scroll-snap-align: start; }
  .hb-track [aria-hidden="true"], .hb-ctrl button { display: none; }
}
@media print { .scroll-progress, .hb-ctrl button { display: none; } .hb-track { animation: none; flex-wrap: wrap; width: auto; } }

/* ===================================================================== Ausbau 28: helles SaaS-Design mit „Liquid Glass“
   Weißer Grund mit weichem Farbverlauf (.grid-bg), darauf durchscheinende Glasflächen: Navigation als schwebende
   Leiste, Karten, Formulare, Hinweise. Glas = halbtransparentes Weiß + Weichzeichner + Lichtkante oben.
   Die Farb-Tokens stehen oben in :root; dieser Block ersetzt die dunklen Flächen, Verläufe und Schatten der Blöcke davor.
   Text auf Fotos steht jetzt auf einer Glasfläche (dunkle Schrift) statt auf einer schwarzen Abdunklung. */
:root {
  --glass: rgba(255, 255, 255, 0.62);
  --glass-strong: rgba(255, 255, 255, 0.8);
  --glass-edge: rgba(255, 255, 255, 0.85);
  --glass-blur: blur(22px) saturate(1.6);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(18, 24, 38, 0.03), 0 0 0 1px rgba(18, 24, 38, 0.05), 0 18px 44px -20px rgba(30, 41, 59, 0.24);
  --glass-shadow-lg: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 1px rgba(18, 24, 38, 0.05), 0 40px 90px -34px rgba(30, 41, 59, 0.38);
  --r: 22px;
  --r-sm: 14px;
  --gp: clamp(12px, 3vw, 36px); /* Überstand der Glasfläche hinter Text auf Fotos */
}
body { background: #fbfaf8; }
::selection { background: rgba(154, 90, 34, 0.2); color: var(--ink); }
.grid-bg {
  -webkit-mask-image: none; mask-image: none; background-size: auto;
  background-image:
    radial-gradient(64vw 60vh at 8% -4%, rgba(227, 165, 92, 0.3), transparent 64%),
    radial-gradient(56vw 58vh at 96% 4%, rgba(96, 165, 250, 0.26), transparent 64%),
    radial-gradient(60vw 60vh at 84% 102%, rgba(52, 211, 153, 0.17), transparent 64%),
    radial-gradient(52vw 56vh at 0% 92%, rgba(167, 139, 250, 0.15), transparent 64%),
    radial-gradient(40vw 40vh at 50% 46%, rgba(255, 214, 165, 0.14), transparent 70%);
}
.noise { display: none; }

/* Schrift: kräftigere Überschriften, Kennzeilen in der Grundschrift */
h1, h2, h3, h4 { line-height: 1.1; }
.hero h1, .page-head h1, .sec-head h2, .head h2, .band h2, .demo h2, .cta h2, .cta-band h2, .feature h3, .detail h3, .detail h2:not(.label),
.legal h2, .cc-box h3, .blog-head h1, .blog-post-head h1, .blog-cta-box h2, .pub-head h1, .pub-body h2 { font-weight: 500; }
.stat .num, .fact .num { font-weight: 400; }
.label { font-family: var(--font); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; }
.head .label, .feature .label, .demo .label, .band .label { color: var(--wood); }
.label b { color: var(--wood); }

/* Schaltflächen: Kapseln aus Glas */
.btn { border-radius: 999px; background: var(--glass); border-color: var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(18, 24, 38, 0.05); font-weight: 500; }
.btn:hover { border-color: rgba(18, 24, 38, 0.3); background: #fff; }
button.btn { background: var(--glass); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.primary:hover { background: #000; }
.btn.cta, button.btn.cta { background: linear-gradient(180deg, #a86326, #8f5220); border-color: #8f5220; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 24px -10px rgba(143, 82, 32, 0.6); }
.btn.cta:hover, button.btn.cta:hover { background: linear-gradient(180deg, #96571f, #7d4616); border-color: #7d4616; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--glass); }
.cta .btn.cta + .btn, .cc-actions .btn:not(.primary) { background: var(--glass); }
.burger { border-radius: 999px; background: var(--glass); }

/* Navigation: schwebende Glasleiste */
.nav { height: 76px; padding-top: 10px; background: none; border: 0; }
.nav.scrolled { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav .wrap { width: calc(100% - 24px); max-width: 1240px; height: 58px; padding: 0 10px 0 18px; border-radius: 999px; background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); transition: background 0.3s, box-shadow 0.3s; }
.nav.scrolled .wrap { background: var(--glass-strong); }
.nav-links a.active::after { height: 2px; border-radius: 2px; background: var(--wood); }
.nav-links .btn { padding: 9px 16px; }
.brand .logo { height: 38px; padding: 6px; box-sizing: border-box; border-radius: 10px; background: #0d0f12; } /* Marke ist hell – auf Weiß trägt sie ein dunkles Feld wie das Favicon */
.brand .logo-lg { height: 60px; padding: 9px; border-radius: 15px; }
@media (max-width: 400px) { .brand .logo { height: 36px; } }
@media print { .brand .logo { filter: none; } }
@media (max-width: 1040px) {
  .nav.menu-open { background: #fff; }
  .nav.menu-open .wrap { background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav-links { top: 76px; background: #fff; }
  .nav-links .btn { padding: 11px 18px; }
}

/* Hero der Startseite: zentriert, Produktbild darunter */
.hero.saas { display: block; min-height: 0; padding: clamp(132px, 15vw, 176px) 0 0; text-align: center; overflow: visible; }
.hero.saas h1 { font-size: clamp(36px, 5.4vw, 72px); max-width: 17ch; margin: 0 auto; letter-spacing: -0.035em; text-wrap: balance; }
.hero.saas h1 em { color: var(--wood); }
.hero.saas h1 .h1-eyebrow { width: fit-content; max-width: 100%; margin: 0 auto 26px; padding: 8px 16px; border-radius: 999px; background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); color: var(--ink-2); letter-spacing: 0.04em; text-transform: none; font-size: 13px; line-height: 1.5; }
.hero.saas h1 .h1-eyebrow b { color: var(--wood); }
.hero.saas .lead { margin: 24px auto 0; max-width: 58ch; }
.hero.saas .hero-cta { justify-content: center; margin-top: 32px; }
.hero.saas .ticks { justify-content: center; margin-top: 24px; }
/* Text im ersten Bildschirm blendet per CSS ein, nicht erst wenn js/site.js geladen ist (sonst wartet das größte Element auf das Skript) */
.hero.saas .reveal { opacity: 1; transform: none; transition: none; animation: hero-in 0.7s var(--ease) both; }
.hero.saas .reveal[data-delay="2"] { animation-delay: 0.12s; }
.hero.saas .reveal[data-delay="3"] { animation-delay: 0.2s; }
.hero.saas .reveal[data-delay="4"] { animation-delay: 0.28s; }
@keyframes hero-in { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) { .hero.saas .reveal { animation: none; } }
.ticks li { color: var(--ink-2); }
@media (max-width: 600px) { .hero.saas h1 .h1-eyebrow { border-radius: 18px; } .hero.saas .hero-cta .btn { flex: 1 1 100%; justify-content: center; text-align: center; } }

/* Bildrahmen: Glasrand um die Bildschirmfotos */
.frame { padding: 8px; border: 0; border-radius: var(--r); background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow-lg); }
.frame-bar { height: 26px; padding: 0 8px 6px; background: none; border: 0; }
.frame-bar i { background: rgba(18, 24, 38, 0.16); }
.frame > img, .frame > a > img, .frame img { border-radius: var(--r-sm); }
.phone { border: 6px solid rgba(255, 255, 255, 0.86); background: #fff; box-shadow: 0 0 0 1px rgba(18, 24, 38, 0.08), 0 30px 70px -24px rgba(30, 41, 59, 0.5); }
.photo { border: 0; border-radius: var(--r); box-shadow: 0 0 0 1px rgba(18, 24, 38, 0.06), 0 24px 60px -30px rgba(30, 41, 59, 0.35); }
.feature .media .inset { border: 5px solid rgba(255, 255, 255, 0.86); border-radius: 18px; box-shadow: 0 24px 60px -24px rgba(30, 41, 59, 0.5); }
.peek .stage { margin-top: clamp(44px, 6vw, 72px); }
.peek .stage::before { content: ''; position: absolute; inset: 6% -4% -6%; z-index: -1; border-radius: 50%; filter: blur(70px); background: radial-gradient(closest-side at 28% 50%, rgba(227, 165, 92, 0.42), transparent), radial-gradient(closest-side at 74% 46%, rgba(96, 165, 250, 0.34), transparent); pointer-events: none; }
@media (max-width: 760px) { .peek .stage { margin-top: 40px; } .peek .phone { border-width: 4px; } }

/* Karten und Raster: einzelne Glaskarten statt Haarlinien-Raster */
.cards, .facts, .trust, .papers, .pain-list { gap: 14px; background: none; border: 0; }
.card, .fact, .trust > div, .paper, .pain, .step, .access, .credits figure {
  background: var(--glass); border: 0; border-radius: var(--r); box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.card, .paper { transition: background 0.3s, transform 0.4s var(--ease), box-shadow 0.3s; }
.card:hover, .paper:hover { background: #fff; transform: translateY(-3px); }
.card::before { display: none; }
.card .idx { color: var(--wood); }
.tag { border-radius: 999px; padding: 3px 9px; background: rgba(255, 255, 255, 0.6); }
.fact .num { color: var(--wood); }
.diagram, .ledger { border: 0; border-radius: var(--r); background: var(--glass); box-shadow: var(--glass-shadow); }
.diagram .box { fill: rgba(255, 255, 255, 0.6); }
.ledger .sum { background: rgba(18, 24, 38, 0.03); }
.toc { gap: 8px; }
.toc a, .page-head.has-img .toc a { padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--glass); color: var(--ink-2); font-family: var(--font); font-size: 13.5px; letter-spacing: 0; text-transform: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); }
.toc a:hover, .page-head.has-img .toc a:hover { background: #fff; color: var(--ink); border-color: var(--line); }
@media (max-width: 600px) { .trust > div, .cards.four > .card { border: 0; border-radius: var(--r); } .segs, .steps, .trust, .cards.four { padding-top: 6px; padding-bottom: 26px; } }

/* Module im Überblick (Startseite) */
.mods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mod { display: grid; grid-template-columns: 40px 1fr; gap: 4px 14px; align-content: start; padding: 20px 20px 22px; border-radius: var(--r); background: var(--glass); box-shadow: var(--glass-shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); transition: background 0.3s, transform 0.4s var(--ease); }
.mod:hover { background: #fff; transform: translateY(-3px); }
.mod svg { grid-row: span 2; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: rgba(154, 90, 34, 0.1); stroke: var(--wood); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mod h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; align-self: end; }
.mod p { color: var(--ink-2); font-size: 14px; line-height: 1.45; }
@media (max-width: 1100px) { .mods { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .mods { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .mods { grid-template-columns: 1fr; gap: 10px; } .mod { padding: 16px 16px 18px; } .mod p { font-size: 16px; } }

/* Probleme, Zielgruppen, Funktionen */
.pains .photo figcaption, .hb-tile figcaption {
  left: 10px; right: 10px; bottom: 10px; padding: 14px 16px; border-radius: 16px; color: var(--ink);
  background: var(--glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow);
}
.pains .photo figcaption { font-size: 16px; }
.seg { justify-content: flex-start; min-height: 0; padding: 8px 8px 22px; border: 0; border-radius: var(--r); background: var(--glass); box-shadow: var(--glass-shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); transition: background 0.3s, transform 0.4s var(--ease); }
.seg::after { display: none; }
.seg img { position: static; z-index: auto; height: auto; aspect-ratio: 4 / 3; border-radius: var(--r-sm); margin-bottom: 16px; }
.seg > :not(img) { margin-left: 14px; margin-right: 14px; }
.seg:hover { background: #fff; transform: translateY(-3px); }
.seg:hover img { transform: none; }
.seg p { color: var(--ink-2); }
.seg .more { margin-top: auto; padding-top: 16px; color: var(--wood); font-weight: 500; }
.feature + .feature { border-top: 0; }
.tour-tabs button { background: var(--glass); border-color: var(--line-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); }
.tour-tabs button:hover { background: #fff; }
.tour-tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: none; }
.step::before { border: 0; background: rgba(154, 90, 34, 0.1); font-weight: 500; }
.next li { color: var(--ink-2); }
.next li::before { border: 0; background: rgba(154, 90, 34, 0.12); font-weight: 500; }

/* Bildbänder und Seitenköpfe mit Foto: der Text liegt auf einer Glasfläche über dem Bild */
.band::after { background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%); }
.band.shade::after { background: rgba(255, 255, 255, 0.86); }
.band .lead, .demo .lead, .page-head.has-img .lead { color: var(--ink-2); }
.band:not(.shade) .wrap, .page-head.has-img .wrap { position: relative; z-index: 0; }
.band:not(.shade) .wrap::before, .page-head.has-img .wrap::before {
  content: ''; position: absolute; z-index: -1; top: calc(-1 * var(--gp)); bottom: calc(-1 * var(--gp)); left: calc(var(--pad) - var(--gp));
  width: min(calc(100% - 2 * (var(--pad) - var(--gp))), 800px); border-radius: clamp(20px, 3vw, 32px);
  background: var(--glass-strong); backdrop-filter: blur(26px) saturate(1.7); -webkit-backdrop-filter: blur(26px) saturate(1.7); box-shadow: var(--glass-shadow-lg);
}
.band:not(.shade) .wrap > *, .page-head.has-img .wrap > * { max-width: min(100%, calc(800px - 2 * var(--gp))); }
/* Überschriften mit eigener Breite im style-Attribut (max-width: 22ch) ragten sonst über die Glasfläche hinaus */
.page-head.has-img .wrap > h1 { max-width: min(100%, calc(800px - 2 * var(--gp))) !important; }
.page-head { padding-top: 172px; border-bottom: 0; }
.page-head.has-img { padding-bottom: calc(60px + var(--gp)); }
.page-head.has-img::after { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 150px); }
@media (max-width: 600px) { .page-head { padding-top: 124px; } .page-head.has-img { padding-bottom: calc(40px + var(--gp)); } }

/* FAQ */
.faq { border-top: 0; display: grid; gap: 10px; }
.faq details { border: 0; border-radius: 18px; padding: 0 20px; background: var(--glass); box-shadow: var(--glass-shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.faq details[open] { background: var(--glass-strong); }
.faq summary { padding: 20px 0; }
.faq details > div { padding: 0 0 22px; }

/* Demo-Anfrage, Formulare */
.demo::after { background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.76) 50%, rgba(255, 255, 255, 0.5) 100%); }
.funnel { background: var(--glass-strong); border: 0; border-radius: 26px; backdrop-filter: blur(26px) saturate(1.7); -webkit-backdrop-filter: blur(26px) saturate(1.7); box-shadow: var(--glass-shadow-lg); }
.funnel-progress .bar { background: rgba(18, 24, 38, 0.1); }
.opt { border-radius: var(--r-sm); color: #fff; }
.opt.plain { color: var(--ink-2); background: rgba(255, 255, 255, 0.6); }
.opt:has(input:checked) { box-shadow: 0 0 0 2px var(--wood); }
.opt:has(input:checked)::after { background: linear-gradient(to top, rgba(60, 34, 8, 0.92), rgba(154, 90, 34, 0.3)); }
.chips label { background: rgba(255, 255, 255, 0.6); }
.chips label:hover { background: #fff; }
.field input, .field textarea { background: rgba(255, 255, 255, 0.78); border-radius: 12px; box-shadow: inset 0 1px 2px rgba(18, 24, 38, 0.05); }
.field input:focus, .field textarea:focus { background: #fff; border-color: var(--wood); }
.field input.bad, .field textarea.bad { border-color: #c2412d; }
.funnel-msg { border-color: #c2412d; border-radius: 12px; color: #9a2c1b; background: rgba(194, 65, 45, 0.06); }

/* Schwebende Flächen: CTA-Leiste, Hinweis, Einwilligung, Großansicht */
.sticky-cta { background: var(--glass-strong); border-top: 0; box-shadow: 0 -1px 0 rgba(18, 24, 38, 0.06), 0 -18px 40px -24px rgba(30, 41, 59, 0.3); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.nudge, .cc { background: var(--glass-strong); border: 0; border-radius: var(--r); box-shadow: var(--glass-shadow-lg); backdrop-filter: blur(26px) saturate(1.7); -webkit-backdrop-filter: blur(26px) saturate(1.7); }
.cc-modal { background: rgba(18, 24, 38, 0.32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cc-box { background: #fff; border: 0; border-radius: 26px; box-shadow: var(--glass-shadow-lg); }
.cc-knob { background: rgba(18, 24, 38, 0.08); }
.cc-knob::after { background: #fff; box-shadow: 0 1px 3px rgba(18, 24, 38, 0.3); }
.lightbox { background: rgba(18, 22, 28, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lightbox img { border: 0; border-radius: var(--r-sm); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.6); }

/* Bildstreifen */
.hb { border-top: 0; }
.hb-tile { border: 0; border-radius: var(--r); box-shadow: 0 0 0 1px rgba(18, 24, 38, 0.06), 0 22px 50px -28px rgba(30, 41, 59, 0.4); }
.hb-tile::after { display: none; }
.hb-tile figcaption span { color: var(--ink-2); }
.hb-tile figcaption b::before { display: none; }
.hb-track { padding: 6px 0 34px; }
.hb-ctrl button { background: var(--glass); }

/* Fußzeile */
footer { border-top: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7) 120px); }
.cta-band { padding: 0; margin-bottom: 56px; border-bottom: 0; }
.cta-band .wrap { width: calc(100% - 2 * var(--pad)); max-width: calc(var(--max) - 2 * var(--pad)); padding: clamp(24px, 4vw, 44px); border-radius: clamp(22px, 3vw, 32px); background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); }
.credits figure { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .card, .paper, .seg, .mod { transition: none; } .card:hover, .paper:hover, .seg:hover, .mod:hover { transform: none; } }
@media print { .grid-bg { display: none; } body { background: #fff; } }
/* Rechtstexte: Inhaltsverzeichnis mit Tippfläche, breite Tabellen rollen in ihrem Rahmen statt die Seite zu verbreitern */
.legal-toc summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ===================================================================== Hero-Animation „Holzrahmenbau“ (03.10., 3D seit 04.10.)
   Erzeugt von tools/website/hero-anim.mjs – dort werden die Bauteile als Körper perspektivisch projiziert und schattiert;
   im Browser bleibt es ein SVG ohne JavaScript. Links entsteht ein Haus mit Satteldach (Schwellen, Ständer, Rähm, Fenster,
   Sparren, Lattung, Richtbaum), rechts zwei Geschosse aus Wandelementen am Kran mit Balkenlagen.
   Jedes Teil hat eine eigene, einmalige Animation; sein Startpunkt --s (Anteil an 26 s) wird zur Verzögerung, davor ist
   es unsichtbar, danach bleibt es stehen. Start 0,5 s nach dem ersten Bild – rein per CSS. So arbeitet der Browser immer
   nur an den wenigen Teilen, die sich gerade bewegen (die erste Fassung rechnete je Bild alle Teile neu: ~50 % Last).
   Die Wiederholung macht js/site.js: nach dem Richtbaum ausblenden (.hf-out), zurücksetzen (.hf-reset), von vorn.
   Ohne JavaScript läuft der Aufbau einmal und bleibt stehen; bei „Bewegung reduzieren“ steht das fertige Bild. */
.hero.saas { isolation: isolate; }
.hero-anim { position: absolute; inset: 0 0 -34px; z-index: 0; pointer-events: none; overflow: hidden; }
.hf { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.9; transition: opacity 0.4s; }
.hf.hf-out { opacity: 0; transition: opacity 1.4s; }
/* 3D (04.10.): Flächen der Hölzer – oben hell, dem Licht zugewandt mittel, im Schatten dunkel; Bodenplatte hf-s* */
.hf-f1, .hf-f2, .hf-f3, .hf-s1, .hf-s2, .hf-s3 { stroke: rgba(122, 70, 24, 0.5); stroke-width: 0.6; stroke-linejoin: round; }
.hf-f1 { fill: #f3dcbb; }
.hf-f2 { fill: #e6bd8b; }
.hf-f3 { fill: #cf9a62; }
.hf-s1, .hf-s2, .hf-s3 { stroke: rgba(18, 24, 38, 0.16); }
.hf-s1 { fill: rgba(255, 255, 255, 0.72); }
.hf-s2 { fill: rgba(226, 230, 238, 0.8); }
.hf-s3 { fill: rgba(204, 210, 222, 0.8); }
.hf-p { fill: rgba(250, 236, 214, 0.62); stroke: rgba(154, 90, 34, 0.35); stroke-width: 1; stroke-dasharray: 3 4; }
.hf-w { fill: rgba(96, 165, 250, 0.14); stroke: rgba(18, 24, 38, 0.38); stroke-width: 1; }
.hf-l, .hf-k { fill: none; }
.hf-l { stroke: rgba(154, 90, 34, 0.6); stroke-width: 2.4; }
.hf-k { stroke: rgba(18, 24, 38, 0.3); stroke-width: 1.1; }
.hf-kat { fill: rgba(18, 24, 38, 0.38); }
.hf-tree path { fill: rgba(31, 138, 91, 0.2); stroke: rgba(31, 138, 91, 0.75); stroke-width: 1.2; stroke-linejoin: round; }
.hf-tree .hf-band { fill: none; stroke: rgba(194, 65, 45, 0.7); }
.hf-rope { fill: none; stroke: rgba(18, 24, 38, 0.4); stroke-width: 1.2; opacity: 0; }
circle.hf-rope { fill: rgba(18, 24, 38, 0.4); }
.hf-rise { transform-box: fill-box; }
.hf-rise { transform-origin: 50% 100%; }
.hf-draw { stroke-dasharray: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hf-rise, .hf-in, .hf-draw, .hf-fade, .hf-drop { animation: var(--d, 1.9s) cubic-bezier(0.25, 1, 0.5, 1) calc(var(--s, 0) * 26s + 0.5s) both; }
  .hf-rise { animation-name: hf-rise; }
  .hf-in { animation-name: hf-in; }
  .hf-draw { animation-name: hf-draw; }
  .hf-fade { animation-name: hf-fade; }
  .hf-drop { animation-name: hf-drop; }
  .hf-rope { animation: hf-rope 0.9s linear calc(var(--r, 0.5) * 26s + 0.5s) both; }
  .hf.is-off * { animation-play-state: paused; }
  .hf.hf-reset * { animation: none !important; }
}
@keyframes hf-rise { from { transform: scaleY(0); } }
@keyframes hf-in { from { opacity: 0; transform: translate(var(--tx, 0), var(--ty, -30px)); } }
@keyframes hf-draw { from { stroke-dashoffset: 1; } }
@keyframes hf-fade { from { opacity: 0; } }
@keyframes hf-drop { 0% { transform: translateY(-330px); opacity: 0; } 10% { opacity: 1; } }
@keyframes hf-rope { from { opacity: 1; } to { opacity: 0; } }
/* Schmale Fenster: der Text füllt die Breite – die Zeichnung tritt zurück; am Handy nur die Giebelwand, größer */
@media (max-width: 1100px) { .hf { opacity: 0.5; } }
@media (max-width: 760px) { .hf { opacity: 0.36; width: 1100px; max-width: none; left: -34px; right: auto; } .hf-right { display: none; } }
@media (max-width: 1100px) { .hf.hf-out { opacity: 0; } }
@media print { .hero-anim { display: none; } }

/* ===================================================================== Rechtstexte (AGB, Datenschutz): Inhaltsverzeichnis neben dem Text
   Die Seiten kommen aus tools/website/legal-pages.mjs; bis 03.10. hatten .legal-layout/.legal-toc keine eigenen Regeln. */
.legal-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.legal-toc { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow: auto; overscroll-behavior: contain; padding: 18px 18px 12px; border-radius: var(--r); background: var(--glass); box-shadow: var(--glass-shadow); }
.legal-toc .label { margin-bottom: 10px; }
.legal-toc details { border-top: 1px solid var(--line-2); }
.legal-toc summary { list-style: none; justify-content: space-between; gap: 10px; font-size: 14px; line-height: 1.35; color: var(--ink); }
.legal-toc summary::-webkit-details-marker { display: none; }
.legal-toc summary::after { content: '+'; flex: none; font-family: var(--mono); font-size: 16px; color: var(--wood); }
.legal-toc details[open] summary::after { content: '–'; }
.legal-toc ol { list-style: none; margin: 0 0 12px 2px; padding: 0; border-left: 1px solid var(--line); }
.legal-toc ol a { display: block; padding: 5px 0 5px 12px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.legal-toc a:hover { color: var(--wood); }
.legal-meta { margin-top: 14px; font-size: 16px; color: var(--ink-3); }
.legal-note { padding: 12px 16px; border-radius: var(--r-sm); background: rgba(168, 100, 0, 0.08); }
.legal-doc h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; margin: 30px 0 10px; }
.legal-doc h2, .legal-doc h3, .legal-doc [id] { scroll-margin-top: 96px; }
.legal-doc h2 { padding-top: 26px; border-top: 1px solid var(--line-2); }
.legal-doc h2:first-of-type { padding-top: 0; border-top: 0; }
@media (max-width: 960px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { position: static; max-height: none; }
  .legal-toc ol a { padding: 11px 0 11px 12px; font-size: 15px; }
}
@media print { .legal-toc { display: none; } .legal-layout { display: block; } }

/* ===================================================================== Ausbau 32: Handy (10.10.)
   Auftrag: Website am Handy aufräumen. (1) Keine Hero-Animation auf Handys – die Zeichnung lief dort hinter dem Text
   und kostete Akku; der SVG-Block bleibt im HTML, wird aber nicht gezeichnet (js/site.js wartet auf animationend des
   Richtbaums – ohne Darstellung kommt kein Ereignis, die Wiederholung bleibt stumm). (2) Erster Bildschirm: das
   Einwilligungsbanner ist kompakt, und die CTA-Leiste bleibt unten versteckt, solange das Banner offen ist – vorher
   nahmen beide zusammen gut ein Drittel des Bildschirms ein. (3) Sprungmarken-Reihe im Seitenkopf läuft weich aus
   statt am Kartenrand hart abzuschneiden. (4) App-Bilder: das Handy-Bild ist auf dem Handy größer, das Desktop-Bild
   tritt zurück (auf 390 px war keines von beiden lesbar). (5) Abstände/Schriftgrößen im Seitenkopf und Hero. */
@media (max-width: 760px), (max-height: 500px) and (orientation: landscape) {
  .hero-anim { display: none; }
}
@media (max-width: 600px) {
  /* Hero: enger an die Kopfzeile, Lead schmaler, Haken als Liste untereinander */
  .hero.saas { padding-top: 112px; }
  .hero.saas h1 { font-size: clamp(32px, 9vw, 40px); line-height: 1.08; }
  .hero.saas h1 .h1-eyebrow { margin-bottom: 18px; padding: 7px 14px; font-size: 12.5px; }
  .hero.saas .lead { margin-top: 18px; font-size: 17px; line-height: 1.5; }
  .hero.saas .hero-cta { margin-top: 24px; gap: 10px; }
  .hero.saas .ticks { margin-top: 22px; flex-direction: column; align-items: flex-start; gap: 8px; width: max-content; max-width: 100%; margin-inline: auto; }
  .hero.saas .ticks li { font-size: 14.5px; }
  .peek .stage { margin-top: 30px; }
  .peek .phone { width: 34%; right: 2px; bottom: -18px; }
  .facts { margin-top: 44px; }

  /* Seitenkopf: weniger Luft über dem Titel, Chips laufen am rechten Rand aus */
  .page-head { padding-top: 108px; }
  .page-head .lead { margin-top: 16px; font-size: 17px; line-height: 1.5; }
  .page-head .toc { margin-top: 22px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .page-head .toc a { min-height: 44px; }
  .page-head .hero-cta { margin-top: 24px; gap: 10px; }
  .page-head .hero-cta .btn { flex: 1 1 100%; justify-content: center; text-align: center; }

  /* App-Bilder in den Funktionsblöcken: Handy-Bild groß, Desktop-Rahmen als Hintergrund */
  .feature .media { margin-bottom: 34px; }
  .feature .media .phone { width: 42%; min-width: 0; right: 0; bottom: -24px; border-width: 4px; border-radius: 20px; }
  .feature .media .phone[style*="left"] { left: 0 !important; }
  .feature .media .inset { width: 44%; left: 0; bottom: -24px; }
  .feature .media .frame .frame-bar span { font-size: 10px; }

  /* Einwilligungsbanner kompakt: Überschrift und „Einstellungen“ in einer Zeile, zwei Knöpfe nebeneinander */
  .cc { left: 10px; right: 10px; bottom: 10px; width: auto; padding: 12px 14px 12px; }
  .cc .label { margin: 0; padding-right: 96px; font-size: 10.5px; line-height: 1.5; }
  .cc-text { margin-top: 6px; font-size: 12.5px; line-height: 1.4; }
  .cc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
  .cc-actions .btn { min-height: 44px; padding: 8px 10px; font-size: 13px; }
  /* „Einstellungen“ steht oben rechts neben der Überschrift (der Knopf liegt im HTML in .cc-actions) */
  .cc-actions .cc-link { position: absolute; top: 4px; right: 8px; min-height: 44px; min-width: 44px; padding: 4px 6px; font-size: 10.5px; }
  /* Solange das Banner offen ist, bleibt die CTA-Leiste unten versteckt – zwei feste Flächen zugleich waren zu viel */
  body:has(.cc.in) .sticky-cta.show { transform: translateY(110%); }
  body.has-sticky:has(.cc.in) .cc { bottom: 10px; }
}

/* ===== Ausbau 33: Startseite nach Cloud-Anbieter-Muster – weniger Text, mehr Fläche ===== */
.mods.compact { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.mods.compact .mod { grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 0 12px; padding: 16px 16px; }
.mods.compact .mod svg { grid-row: auto; }
.mods.compact .mod h3 { align-self: center; font-size: 15.5px; hyphens: auto; overflow-wrap: anywhere; }
@media (max-width: 1200px) { .mods.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .mods.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .mods.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .mods.compact .mod { grid-template-columns: 32px minmax(0, 1fr); padding: 12px; gap: 0 10px; } .mods.compact .mod svg { width: 32px; height: 32px; padding: 7px; } .mods.compact .mod h3 { font-size: 14.5px; } }
.cards.brief .card { min-height: 0; padding: 22px 24px 24px; }
.cards.brief .card h3 { font-size: 18px; }
.brief [data-blog-teaser-list] .card p { display: none; }

/* ===== Ausbau 34: mehr Handlungsaufforderungen auf der Startseite ===== */
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 28px; }
.cta-row.center { justify-content: center; margin-top: clamp(28px, 4vw, 44px); }
.feature .txt .cta-row { margin-top: 22px; }
.band .cta-row { margin-top: 26px; }
.cta-strip { margin-top: clamp(36px, 5vw, 56px); padding: 24px 28px; border-radius: 22px; background: var(--glass-strong); box-shadow: var(--glass-shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; }
.cta-strip p { font-size: clamp(17px, 2vw, 21px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; max-width: 34ch; }
.cta-strip .cta-row { margin-top: 0; }
@media (max-width: 600px) { .cta-row .btn { flex: 1 1 auto; justify-content: center; white-space: normal; text-align: center; } .cta-strip { padding: 20px 18px; } }