/* ============================================================
   DCL Space — 1:1 design-system stylesheet
   Recreates the "UI - Desktop" mockups (design/.../uploads).
   One family: Public Sans. Warm canvas, ink type, rare lime+violet.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Neutrals — warm */
  --ink: #262633;
  --ink-soft: #413E3E;
  --muted: #838383;
  --line: #E1E1E1;
  --line-warm: #ECEAEA;
  --surface: #F9F9F8;
  --bg: #F3F2F1;
  --white: #FFFFFF;
  /* Accents */
  --violet: #9D6EFF;
  --violet-vivid: #9747FF;
  --violet-soft: #B795FF;
  --violet-pale: #E2E4F9;
  --lime: #D6FD7E;
  --lime-pale: #E3F5B1;
  /* Geometry */
  --maxw: 1440px;
  --pad: 28px;
  --radius-pill: 999px;
  --radius-card: 22px;
  --radius-panel: 16px;
  --radius-section: 16px;
  --dash: #C0C0C0;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--line-warm); } /* full-width grey backdrop; rounded panels reveal it in the corner seams */
body {
  font-family: 'Public Sans', -apple-system, Helvetica, Arial, sans-serif;
  color: var(--ink);
  /* Full-bleed bands run edge-to-edge in their own colour; the grey backdrop
     shows only in the rounded-corner seams (Figma look, taken to the edge). */
  background: var(--line-warm);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.6;
}
::selection { background: var(--lime); color: var(--ink); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- Layout ---------- */
/* Full-bleed bands: every top-level band (nav, hero, section, footer) runs
   edge-to-edge in its own colour. A centred 1440 canvas (.dcl-wrap) holds the
   content, grid and shapes at native size — nothing scales; the sides are just
   painted with the band's colour instead of white. 28px gutter lives inside the
   canvas (var(--pad)), matching the Figma frame. */
.dcl-wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { padding: 96px 0; border-bottom: 1px solid var(--line); background: var(--bg); }
.section--tight { padding-top: 64px; padding-bottom: 64px; }
/* section background tones (per Figma) */
.section.s-white { background-color: #fff; }
.section.s-soft { background-color: #ECEAEA; }
.section.s-canvas { background-color: var(--bg); }
/* Stacked rounded panels (Figma "layered cards"). Bands carry rounded corners, and
   each band that rounds its TOP is pulled up by the radius so it overlaps the band
   above; being later in the DOM it paints on top, so its rounded corners sit on that
   band — revealing the band's own colour, not the grey backdrop — and cover the
   previous band's rounded bottom + hairline. Removes the grey notch where sections
   meet (e.g. the FAQ panel between a white section and the violet footer). */
/* Round only the TOP corners — the edge that's revealed as the card sits on the
   band above. Bottom corners stay square so they fully fill behind the next
   band's rounded top (no backdrop peeking through at the corners) or sit flush
   on the grey below. */
.hero { border-radius: 0; }
.section.s-white,
.section.dotgrid-dark { border-radius: var(--radius-section) var(--radius-section) 0 0; border-bottom: none; }
body > section, body > footer { position: relative; }
.section.s-white,
.section.dotgrid-dark { margin-top: calc(-1 * var(--radius-section)); }
.dotgrid { /* hero texture lives on .hero::before below; no-op elsewhere */ }

/* ---------- Typography ---------- */
.display {
  font-size: clamp(46px, 6vw, 84px);
  line-height: 0.98; font-weight: 500; letter-spacing: -0.02em; margin: 0;
}
.h2 { font-size: clamp(34px, 3.6vw, 50px); line-height: 1.04; font-weight: 500; letter-spacing: -0.018em; margin: 0; }
.h3 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; font-weight: 500; letter-spacing: -0.01em; margin: 0; }
.lead { font-size: 19px; line-height: 1.55; color: var(--ink-soft); margin: 0; max-width: 62ch; }
.body { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.caption { font-size: 14px; line-height: 1.5; color: var(--muted); }

/* ---------- Eyebrows & pills ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  height: 24px; padding: 0 11px; border-radius: 8px; line-height: 1;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  background: #FFFFFD; color: var(--muted); border: 1px solid #EDEDED;
}
.eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--lime); display: inline-block; }
.eyebrow.is-ink { background: var(--ink); color: #fff; }
.eyebrow.is-ink::before { background: var(--lime); }
.eyebrow.is-violet { background: var(--violet-pale); color: var(--ink); }
.eyebrow.is-violet::before { background: var(--violet); }
.eyebrow.is-num { background: var(--lime-pale); }
.eyebrow.is-num::before { display: none; }
.eyebrow.is-pale { background: var(--lime-pale); color: var(--ink); }
.eyebrow.is-pale::before { background: var(--ink); }
.eyebrow.is-plain { background: transparent; padding: 0; }
.eyebrow.is-light { background: rgba(255,255,255,0.92); color: var(--ink); }
.eyebrow.is-light::before { background: var(--lime); }

.pill {
  display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
}
.pill.live { background: var(--lime); color: var(--ink); }
.pill.beta { background: var(--ink); color: #fff; }
.pill.idee { background: var(--violet-pale); color: var(--ink); }

/* ---------- Buttons ---------- */
/* Buttons — Figma: Public Sans 13px / 400 / -3%, 1px border, full pill.
   Header buttons are 48px tall; the hero buttons are the larger 59px variant. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 13px; font-weight: 400; letter-spacing: -0.03em; line-height: 1;
  height: 48px; padding: 0 24px; border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer; transition: all .18s ease; white-space: nowrap;
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #15151f; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: #fff; }
.btn-tertiary { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn-tertiary:hover { background: var(--ink); color: #fff; }

.circle-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: var(--radius-pill);
  border: 1.5px dashed var(--dash); color: var(--ink); font-size: 18px; flex: none;
  transition: all .18s ease; cursor: pointer;
}
.circle-arrow:hover { border-color: var(--ink); transform: translateX(2px); }
.cta-group { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cta-group .btn { height: 59px; padding: 0 30px; } /* hero buttons are the larger variant */

/* "Mitmachen / Space erkunden" button = pill + arrow as one component (per Figma).
   They sit flush. On hover both turn violet, the dashed circle fills solid and
   glides to the left of the pill — a smooth swap driven by transforms. The slide
   distances (--pw = pill width, --aw = arrow width) are set per-pair in JS so the
   motion is exact for any label. The tertiary button lives outside .cta-pair, so
   it never triggers the rollover. */
.cta-pair { display: inline-flex; align-items: center; }
.cta-pair .btn-primary,
.cta-pair .circle-arrow {
  transition: background-color .4s ease, border-color .4s ease, color .4s ease,
              transform .45s cubic-bezier(.65, 0, .35, 1);
}
.cta-pair .circle-arrow { position: relative; z-index: 2; margin-left: -1px; }
.cta-pair:hover .btn-primary {
  background: var(--violet);
  transform: translateX(var(--aw, 52px));
}
.cta-pair:hover .circle-arrow {
  background: var(--violet); border-color: var(--violet); border-style: solid; color: #fff;
  transform: translateX(calc(-1 * var(--pw, 160px)));
}

/* ---------- Navbar ---------- */
.dcl-nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 16px max(var(--pad), calc(50% - var(--maxw) / 2 + var(--pad)));
  background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); /* white nav (Figma) */
  border-bottom: 1px solid var(--line);
}
.logo-mark { display: grid; grid-template-columns: repeat(3, 9px); grid-template-rows: repeat(3, 9px); gap: 3px; }
.logo-mark i { width: 9px; height: 9px; display: block; }
.logo-mark i.k { background: var(--ink); }
.logo-mark i.v { background: var(--violet); }
.logo-lockup { display: flex; align-items: center; gap: 13px; }
.logo-img { height: 54px; width: auto; display: block; }
.logo-img[src*="dcl_logo_new"] { height: 28px; }
.logo-word { display: flex; align-items: baseline; gap: 9px; }
.logo-word b { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.logo-word span { font-size: 8.5px; line-height: 1.25; font-weight: 500; letter-spacing: 0.02em; }
.nav-links { display: flex; gap: 34px; font-size: 17px; font-weight: 500; }
.nav-links a { color: var(--ink); }
.nav-links a.muted { color: var(--muted); }
.nav-links a:hover { color: var(--violet); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-actions .btn { padding: 0 22px; } /* 48px tall (from .btn), ≈136px wide */
.nav-lang { position: relative; font-size: 15px; color: var(--muted); cursor: pointer; }
.nav-lang-menu { position: absolute; top: 100%; right: 0; margin-top: 8px; min-width: 84px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px;
  display: none; flex-direction: column; box-shadow: 0 8px 22px rgba(38,38,51,0.12); z-index: 200; }
.nav-lang:hover .nav-lang-menu, .nav-lang:focus-within .nav-lang-menu { display: flex; }
.nav-lang-menu a { padding: 7px 12px; border-radius: 6px; font-size: 14px; color: var(--ink); }
.nav-lang-menu a:hover { background: var(--bg); }

/* Tools ("Werkzeuge") dropdown in the main nav — mirrors .nav-lang. */
.nav-tools { position: relative; cursor: pointer; }
.nav-tools-label { color: var(--muted); }
.nav-tools:hover .nav-tools-label, .nav-tools:focus-within .nav-tools-label { color: var(--violet); }
.nav-tools-menu { position: absolute; top: 100%; left: 0; margin-top: 8px; min-width: 216px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px;
  display: none; flex-direction: column; box-shadow: 0 8px 22px rgba(38,38,51,0.12); z-index: 200; }
.nav-tools:hover .nav-tools-menu, .nav-tools:focus-within .nav-tools-menu { display: flex; }
.nav-tools-menu a { padding: 8px 12px; border-radius: 6px; font-size: 15px; color: var(--ink); white-space: nowrap; }
.nav-tools-menu a:hover { background: var(--bg); color: var(--violet); }

/* ---------- Hero ---------- */
.hero { padding: 64px 0 80px; position: relative; overflow: hidden; background: var(--bg); }
/* 1:1 hero background: #ECEAEA panels + white@55% grid + #F9F9F8 dots.
   Design canvas is 1440 wide → scale the whole composition to the hero width
   so the full panel mosaic stays visible at any viewport. */
.hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  /* Centred 1440 canvas: the grid layer tracks the centred content column, so
     the hero colour bleeds full-width while the grid + tiles stay centred at
     native size (never scaled). The fixed -86px y-offset lands the first
     horizontal line on the eyebrow's bottom edge (Figma: eyebrow = grid line 1). */
  top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(var(--maxw), 100%);
  background: url(../imag/hero-grid.svg) left -86px no-repeat;
  background-size: 1440px auto;
}
.hero > * { position: relative; z-index: 1; }
.hero .eyebrow { margin-bottom: 26px; }
.hero .display { margin-bottom: 28px; max-width: 20ch; }
.hero .lead { margin-bottom: 36px; }

/* Home hero — 1:1 type & rhythm from "UI - Desktop - Home v1.0" (1440 canvas):
   h1 Public Sans 400 · 76px · 105% · -5%  ·  lead 18/27px · -2%
   heading box 1091×240 @top 217, lead 503px wide @top ~645 → ~188px gap,
   CTA row bottom-right, bottom-aligned with the lead. */
.hero.dotgrid .eyebrow { margin-bottom: 40px; }
.hero.dotgrid .display {
  font-weight: 400;
  font-size: clamp(40px, 5.28vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.05em;
  max-width: min(1085px, 100%); /* spans 4 grid columns → right edge on vertical line 5 */
  margin-bottom: clamp(56px, 13vw, 188px);
}
.hero.dotgrid .lead {
  font-size: 18px;
  line-height: calc(27 / 18);
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 503px;
  margin-bottom: 0;
}

/* ---------- Two column "Was ist X" ---------- */
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.twocol .h2 { max-width: 16ch; }

/* ---------- Numbered steps ---------- */
.steps { display: flex; flex-direction: column; }
.step { display: grid; grid-template-columns: 90px 1fr 72px; gap: 28px; align-items: start;
  padding: 40px 0; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step .num { font-size: 13px; font-weight: 600; color: var(--violet); }
.step h3 { font-size: clamp(30px, 3.2vw, 44px); font-weight: 500; letter-spacing: -0.015em; line-height: 1.05; margin: 0 0 10px; }
.step p { margin: 0; color: var(--ink-soft); font-size: 15px; max-width: 64ch; }
.step .step-icon { width: 56px; height: 56px; color: var(--ink); opacity: .85; justify-self: end; }
.step .step-icon svg { width: 100%; height: 100%; }

/* ---------- Workflow ("Wie der Space funktioniert") — Figma Modul 2 ----------
   Eyebrow alone in the left gutter; heading, body, CTA and the numbered steps
   are offset into the right content column (left col ≈ 353px on the 1440 canvas).
   The steps carry the background grid: horizontal dividers + a vertical line at
   the number/title boundary (Figma line @x530). */
#workflow .dcl-wrap { display: grid; grid-template-columns: 353px 1fr; align-items: start; column-gap: 0; }
#workflow .eyebrow { grid-column: 1; grid-row: 1; margin: 0; justify-self: start; }
#workflow .twocol { grid-column: 2; grid-row: 1; display: block; }
#workflow .twocol > .h2 { margin-bottom: 28px; }
#workflow .steps { grid-column: 2; grid-row: 2; position: relative; margin-top: 48px; }
#workflow .steps::before { content: ""; position: absolute; top: 0; bottom: 0; left: 150px; border-left: 1px solid var(--line); }
#workflow .step { grid-template-columns: 150px 1fr 56px; column-gap: 0; }
#workflow .step > div { padding-left: 24px; }

/* ---------- "In Space" / Werkzeuge intro — same right-offset as the workflow:
   eyebrow in the left gutter, heading/body/CTA offset into the content column
   (aligns with the bento's 2nd column ≈ x377); the bento spans full width. */
#werkzeuge .dcl-wrap { display: grid; grid-template-columns: 353px 1fr; align-items: start; column-gap: 0; position: relative; z-index: 1; }
#werkzeuge .dcl-wrap > .eyebrow { grid-column: 1; grid-row: 1; margin: 0; justify-self: start; }
#werkzeuge .dcl-wrap > :nth-child(2) { grid-column: 2; grid-row: 1; }
#werkzeuge .dcl-wrap > .bento { grid-column: 1 / -1; grid-row: 2; }
/* Big section headings (workflow + In Space) — Public Sans 400 / 70px / 105% / -5% (Figma). */
#workflow .twocol > .h2,
#werkzeuge .h2 { font-size: clamp(38px, 4.86vw, 70px); font-weight: 400; line-height: 1.05; letter-spacing: -0.05em; }
/* In Space background grid — 4-column lines (≈345px) aligned to the bento, plus
   horizontal lines. Lives on a centred 1440 layer so it stays centred at native
   size while the s-soft colour bleeds full-width. */
#werkzeuge { position: relative; }
#werkzeuge::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(var(--maxw), 100%);
  background-image:
    repeating-linear-gradient(to right, rgba(255,255,255,0.55) 0 1px, transparent 1px 345px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.55) 0 1px, transparent 1px 304px);
  background-position: 28px 0, 0 96px;
}

/* ---------- Feature rows (surface cards, alternating) ---------- */
.feature-row {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center;
  background: #F4F3F2; border: 1px solid var(--line-warm);
  border-radius: var(--radius-panel); padding: 48px; margin-bottom: 20px;
}
.feature-row .mock { min-height: 360px; align-self: stretch; }
.feature-row.flip .feature-text { order: 2; }
.feature-text .eyebrow.is-num { margin-bottom: 16px; }
.feature-text h3 { font-size: 30px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 12px; }
.feature-text p { color: var(--ink-soft); margin: 0 0 16px; }
.feature-text ul { list-style: none; padding: 0; margin: 0; }
.feature-text li { position: relative; padding-left: 20px; margin: 6px 0; color: var(--ink-soft); font-size: 15px; }
.feature-text li::before { content: "•"; position: absolute; left: 0; color: var(--violet); font-weight: 700; }

/* ---------- Mockup placeholder panel ---------- */
.mock {
  border-radius: var(--radius-panel);
  background: linear-gradient(135deg, #EFEFF0, #FBFBFB, #D4D4D6);
  box-shadow: 0 18px 40px rgba(38,38,51,0.10);
  min-height: 340px; display: flex; align-items: flex-end; padding: 16px;
}
.mock .tag { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--muted); }

/* ---------- Product screenshots (real images filling a .mock slot) ---------- */
.shot {
  width: 100%;
  border-radius: var(--radius-panel);
  box-shadow: 0 18px 40px rgba(38,38,51,0.10);
  display: block;
}
.feature-row .shot { align-self: center; }
.shot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; }
.shot-pair .shot { box-shadow: 0 14px 30px rgba(38,38,51,0.10); }

/* ---------- Bento tool cards (square cards, diagonal staircase) ---------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: start; }
.b-cal { grid-column: 2; grid-row: 1; }
.b-mcc { grid-column: 4; grid-row: 1; }
.b-pln { grid-column: 1; grid-row: 2; }
.b-bls { grid-column: 3; grid-row: 2; }
.b-com { grid-column: 2; grid-row: 3; }
.tool-card {
  border-radius: var(--radius-card); padding: 24px; aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; overflow: hidden;
}
.tool-card .card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.tool-card .plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  border: 1.5px dashed rgba(38,38,51,0.5); font-size: 20px;
}
.tool-card .card-body { margin-top: auto; }
.tool-card h3 { font-size: 26px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 10px; }
.tool-card p { font-size: 14px; line-height: 1.5; margin: 0; }
.tool-card.lime { background: var(--lime); color: var(--ink); }
.tool-card.violet { background: var(--violet); color: var(--ink); }
.tool-card.ink { background: var(--ink); color: #fff; }
.tool-card.ink .plus { border-color: rgba(255,255,255,0.4); color: #fff; }
.tool-card.surface { background: var(--white); border: 1px solid var(--line); color: var(--ink); }
.tool-card.lime-pale { background: var(--lime-pale); color: var(--ink); }
.tool-card.lavender { background: var(--violet-pale); color: var(--ink); }
/* badges sit on every card as a translucent-white pill with dark text (per Figma) */
.tool-card .pill { background: rgba(255,255,255,0.65); color: var(--ink); }
.tool-card .plus.solid { background: var(--lime); border: none; }

/* ---------- FAQ (dark section) ---------- */
.faq { background: var(--ink); color: #fff; border-bottom: none; }
.dotgrid-dark { background-color: var(--ink); }
/* product hero layout */
.prod-hero { display: grid; grid-template-columns: 1fr 1.08fr; gap: 56px; align-items: center; min-height: 520px; }
.prod-hero .mock { min-height: 440px; }
@media (max-width: 980px){ .prod-hero { grid-template-columns: 1fr; } }
.faq-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.faq-intro .eyebrow.is-ink { margin-bottom: 20px; }
.faq-intro h2 { color: #fff; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid rgba(255,255,255,0.14); padding: 22px 0; }
.faq-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.14); }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; font-size: 18px; font-weight: 500; }
.faq-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--lime); color: var(--ink); font-size: 20px; flex: none; }
.faq-a { color: rgba(255,255,255,0.72); font-size: 15px; line-height: 1.6; max-width: 60ch; margin-top: 14px; display: none; }
.faq-item.open .faq-a { display: block; }

/* ---------- Footer (violet plane) ---------- */
.dcl-footer {
  background: var(--violet); color: #fff;
  border-radius: var(--radius-section) var(--radius-section) 0 0;
  padding: 56px 0 40px; margin-top: calc(-1 * var(--radius-section)); /* overlap the band above (layered cards) */
}
.footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 48px; }
.footer-logo .logo-mark i.v { background: #fff; }
.footer-logo b { font-size: 22px; font-weight: 700; color: #fff; }
.footer-logo-img { height: 42px; width: auto; display: block; }
.footer-logo-img[src*="dcl_logo_new"] { height: 36px; }
.footer-main { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; width: min(680px, 58%); margin-left: auto; }
.footer-line { font-size: 38px; line-height: 1.08; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.footer-line .fl-1 { color: var(--white); }
.footer-cols { display: flex; gap: 64px; }
.footer-cols h4 { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; margin: 0 0 14px; }
.footer-cols a { display: block; font-size: 15px; line-height: 2; color: #fff; }
.footer-cols a:hover { opacity: 0.8; }
.footer-copy { margin-top: 48px; font-size: 12px; letter-spacing: 0.06em; opacity: 0.55; text-transform: uppercase; }

/* ---------- Hilfezentrum hero (lime, gutter eyebrow + decorative panels) ---------- */
.hz-hero { position: relative; overflow: hidden; background: var(--lime); border-bottom: none;
  padding: 256px 0 150px; }
.hz-hero .hz-panel { position: absolute; background: linear-gradient(135deg, #EFEFF0, #FBFBFB, #E6E6E8); }
/* Panels are anchored to the centred 1440 canvas (offsets measured from its
   left/right edge) so they stay put while the lime band bleeds full-width. */
.hz-hero .hz-panel.top { top: 0; left: calc(50% - var(--maxw) / 2 + 230px); width: 864px; height: 132px; border-radius: 0 0 var(--radius-panel) var(--radius-panel); }
.hz-hero .hz-panel.right { top: 205px; right: calc((100% - var(--maxw)) / 2 - 36px); width: 232px; height: 470px; border-radius: var(--radius-panel); }
.hz-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 200px 1fr; align-items: start; }
.hz-hero-grid > .eyebrow { margin-top: 16px; }
.hz-hero-main .display { font-size: clamp(54px, 6.95vw, 100px); margin: 0 0 22px; }
.hz-hero-main .lead { color: var(--ink); margin-bottom: 128px; }

/* ---------- Forms (underlined) ---------- */
.dcl-form { max-width: 560px; display: flex; flex-direction: column; }
.field { border-bottom: 1px solid var(--dash); padding: 18px 2px; display: flex; flex-direction: column; }
.field label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  border: none; background: transparent; font-family: inherit; font-size: 16px; color: var(--ink);
  outline: none; padding: 4px 0; resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: var(--violet); }
.consent { display: flex; gap: 12px; align-items: flex-start; margin: 24px 0 28px; }
.consent input { width: 18px; height: 18px; accent-color: var(--violet); margin-top: 2px; flex: none; }
.consent span, .consent label { font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ---------- Glossar / video cards (Hilfezentrum) ---------- */
.term-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.term-card { background: var(--violet-pale); border-radius: var(--radius-panel); padding: 24px; }
.term-card.solid { background: var(--violet); color: #fff; }
.term-card.lime { background: var(--lime); color: var(--ink); }
.term-card.lime-pale { background: var(--lime-pale); color: var(--ink); }
.term-card h4 { letter-spacing: -0.01em; }
.term-card h4 { font-size: 19px; font-weight: 600; margin: 0 0 8px; }
.term-card p { font-size: 14px; line-height: 1.5; margin: 0; color: var(--ink-soft); }
.term-card.solid p { color: rgba(255,255,255,0.85); }
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.video-card .thumb { position: relative; border-radius: var(--radius-panel); background: linear-gradient(135deg,#EFEFF0,#D4D4D6); aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; }
.video-card .play { width: 56px; height: 56px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--ink); }
.video-card h4 { font-size: 16px; font-weight: 600; margin: 14px 0 4px; }
.video-card p { font-size: 13px; color: var(--muted); margin: 0; }

/* ---------- Dark chips (Hilfezentrum hero filters) ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 12px; }
.chip { padding: 11px 18px; border-radius: var(--radius-pill); background: var(--ink); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.chip:hover { background: #15151f; }

/* ---------- Hilfe-Center hub grid (Hilfezentrum) ---------- */
.hub-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line);
  border-radius: var(--radius-panel); overflow: hidden; background: var(--surface); }
.hub-card { display: flex; flex-direction: column; padding: 48px; min-height: 260px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); background: var(--surface); }
.hub-card:nth-child(2n) { border-right: none; }
.hub-card:nth-child(n+5) { border-bottom: none; }
.hub-card.head { background: #fff; }
.hub-card h3 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 500; letter-spacing: -0.01em; margin: 0 0 14px; line-height: 1.1; }
.hub-card.head h3 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.04; }
.hub-card p { margin: 0; color: var(--ink-soft); max-width: 38ch; }
a.hub-card .circle-arrow { margin-top: auto; }
.circle-arrow.solid { border-style: solid; border-color: var(--line); }
a.hub-card:hover { background: #fff; }
a.hub-card:hover .circle-arrow.solid { border-color: var(--ink); }

/* ---------- Community list (Hilfezentrum) ---------- */
.comm-list { display: flex; flex-direction: column; }
.comm-item { padding: 28px 0; border-top: 1px solid var(--line); }
.comm-item:last-child { border-bottom: 1px solid var(--line); }
.comm-item h3 { color: var(--violet); font-size: 28px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 8px; }
.comm-item p { margin: 0; color: var(--ink-soft); font-size: 15px; max-width: 52ch; }

/* ---------- Filter pills (dark) ---------- */
.filter-row { display: flex; flex-wrap: wrap; gap: 10px; }
.filter-pill { padding: 9px 18px; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.85); font-size: 14px; font-weight: 500; cursor: pointer; }
.filter-pill.active { background: var(--lime); color: var(--ink); border-color: var(--lime); }

/* ---------- Per-tool accent theme (violet tools, e.g. Planung der Planung) ---------- */
.t-violet .eyebrow.is-num { background: var(--violet-pale); }
.t-violet .faq-toggle { background: var(--violet); color: #fff; }
.t-violet .step .num { color: var(--violet); }
.t-violet .feature-text li::before { color: var(--violet); }

/* ---------- Wide principle cards (MCC Kernprinzipien) ---------- */
.wide-card {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start;
  background: #F4F3F2; border: 1px solid var(--line-warm);
  border-radius: var(--radius-panel); padding: 40px; margin-bottom: 20px;
}
.wide-card h3 { font-size: 30px; font-weight: 500; letter-spacing: -0.01em; margin: 0; max-width: 16ch; }
.wide-card p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.7; }

/* ---------- Mobile nav: hamburger + full-screen menu ---------- */
/* Hamburger lives in .dcl-nav; hidden on desktop, shown ≤980 (see media block). */
.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px;
  background: transparent; border: none; cursor: pointer; color: var(--ink); flex: none;
}
.nav-toggle span { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px; }

/* Full-screen overlay menu (dark, per Figma "Home menu"). */
.dcl-menu {
  position: fixed; inset: 0; z-index: 300;
  background: var(--ink); color: #fff;
  display: flex; flex-direction: column;
  padding: 16px var(--pad) 36px; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.dcl-menu.is-open { opacity: 1; visibility: visible; transform: none; }
body.menu-open { overflow: hidden; }

.dcl-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 30px; }
.dcl-menu-head .logo-img { height: 30px; }
.dcl-menu-head-right { display: flex; align-items: center; gap: 18px; }
.dcl-menu .nav-lang { color: rgba(255,255,255,0.75); }
.dcl-menu-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -10px;
  background: transparent; border: none; color: #fff; cursor: pointer;
}

.dcl-menu-list { display: flex; flex-direction: column; }
.dcl-menu-list a {
  display: flex; align-items: center; gap: 13px;
  font-size: 23px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.2;
  color: #fff; padding: 15px 0;
}
.dcl-menu-list a.is-active::before {
  content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--lime); flex: none;
}
.dcl-menu-list a:hover { color: var(--violet-soft); }

.dcl-menu-actions { display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 36px; }
.dcl-menu-actions .btn { width: 100%; height: 54px; font-size: 15px; }
.dcl-menu-actions .btn-tertiary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); }
.dcl-menu-actions .btn-tertiary:hover { background: #fff; color: var(--ink); border-color: #fff; }
/* primary (Login) is normally dark-on-light; on the dark overlay use the violet
   accent so it stays visible and reads as the primary action. */
.dcl-menu-actions .btn-primary { background: var(--violet); color: #fff; }
.dcl-menu-actions .btn-primary:hover { background: var(--violet-soft); }

/* "In Space" carousel arrows — only rendered/visible at phone width (≤640). */
.bento-nav { display: none; gap: 44px; justify-content: center; margin-top: 28px; }
.bento-arrow {
  width: 56px; height: 40px; background: transparent; border: none; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--ink);
}
.bento-arrow:hover { color: var(--violet); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .nav-actions { display: none; }
  .nav-toggle { display: inline-flex; }
  :root { --pad: 28px; }
  .nav-links { display: none; }
  .twocol, .feature-row, .faq-grid, .term-grid, .video-grid, .wide-card, .prod-hero { grid-template-columns: 1fr; }
  /* workflow collapses to a single column; reset the desktop row pinning so the
     eyebrow stacks ABOVE the title instead of landing in the same cell (overlap). */
  #workflow .dcl-wrap { grid-template-columns: 1fr; }
  #workflow .eyebrow { margin-bottom: 24px; grid-row: auto; }
  #workflow .twocol, #workflow .steps { grid-column: 1; grid-row: auto; }
  #workflow .step { grid-template-columns: 56px 1fr; }
  #workflow .steps::before { left: 56px; }
  #workflow .step > div { padding-left: 20px; }
  /* werkzeuge intro collapses to single column too; reset row pinning so the
     eyebrow stacks above the intro and bento (no overlap). */
  #werkzeuge .dcl-wrap { grid-template-columns: 1fr; }
  #werkzeuge .dcl-wrap > .eyebrow { margin-bottom: 24px; grid-row: auto; }
  #werkzeuge .dcl-wrap > :nth-child(2) { grid-column: 1; grid-row: auto; }
  #werkzeuge .dcl-wrap > .bento { grid-row: auto; }
  /* bento: two columns of square cards on small screens */
  .bento { grid-template-columns: 1fr 1fr; }
  .b-cal, .b-mcc, .b-pln, .b-bls, .b-com { grid-column: auto; grid-row: auto; }
  .hub-grid { grid-template-columns: 1fr; }
  .hub-card { border-right: none; }
  .hub-card:nth-child(n+5) { border-bottom: 1px solid var(--line); }
  .hub-card:last-child { border-bottom: none; }
  .hub-card { padding: 32px; min-height: 0; }
  .feature-row.flip .feature-text { order: 0; }
  .footer-main { width: auto; margin-left: 0; }
  .footer-cols { gap: 40px; }
  .hz-hero { padding-top: 110px; }
  .hz-hero-grid { grid-template-columns: 1fr; gap: 20px; }
  .hz-hero .hz-panel { display: none; }
}

/* ---------- Phone (≤640): tighter rhythm + "In Space" swipe carousel ---------- */
@media (max-width: 640px) {
  :root { --pad: 20px; }
  .section { padding: 64px 0; }
  .hero { padding: 36px 0 52px; }
  .hz-hero { padding: 96px 0 72px; }

  /* "In Space" tool cards become a horizontal scroll-snap carousel (Figma).
     Overrides the ≤980 two-column grid above (this block comes later). */
  .bento {
    display: flex; grid-template-columns: none; gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad);
    scrollbar-width: none;
  }
  .bento::-webkit-scrollbar { display: none; }
  .bento .tool-card {
    flex: 0 0 82%; scroll-snap-align: center; aspect-ratio: auto; min-height: 470px;
  }
  .bento-nav { display: flex; }
}