/* CMZ Digital – Website
   Werte aus branding/tokens.css (Markenhandbuch v1.0). Bei Änderungen dort auch hier anpassen. */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --cmz-tuerkis: #0E7C7B;
  --cmz-tuerkis-hell: #14A39F;
  --cmz-anthrazit: #14181D;
  --cmz-grau: #5B6470;
  --cmz-grau-hell: #9AA3AE;
  --cmz-hellgrau: #F3F5F6;
  --cmz-weiss: #FFFFFF;

  --bg: var(--cmz-weiss);
  --bg-alt: var(--cmz-hellgrau);
  --text: var(--cmz-anthrazit);
  --text-muted: var(--cmz-grau);
  --accent: var(--cmz-tuerkis);
  --accent-contrast: var(--cmz-weiss);
  --block: var(--cmz-anthrazit);
  --block-soft: #E4E8EB;
  --line: #E3E6E9;
  --line-strong: #C9D0D6;

  --font: "Manrope", Arial, sans-serif;
  --fs-h1: clamp(2.5rem, 1.9rem + 2.6vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --fs-h3: 1.25rem;
  --fs-eyebrow: 0.8125rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-small: 0.875rem;

  --radius: 4px;
  --max: 1160px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --section: clamp(4.5rem, 3rem + 5vw, 8rem);
  --header-h: 4.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--cmz-anthrazit);
    --bg-alt: #1B2026;
    --text: var(--cmz-weiss);
    --text-muted: var(--cmz-grau-hell);
    --accent: var(--cmz-tuerkis-hell);
    --accent-contrast: var(--cmz-anthrazit);
    --block: var(--cmz-weiss);
    --block-soft: #2C343D;
    --line: #2C343D;
    --line-strong: #3A444F;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-weight: 700; margin: 0; letter-spacing: -0.015em; }
h1 { font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.025em; }
h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.02em; }
h3 { font-size: var(--fs-h3); line-height: 1.3; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.25rem; }
.lead { font-size: var(--fs-lead); color: var(--text-muted); max-width: 36rem; }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-small); }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-contrast); padding: 0.75rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--accent); color: var(--accent-contrast);
  font: inherit; font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer;
  padding: 0.85rem 1.35rem; border-radius: var(--radius); border: 2px solid var(--accent);
  transition: filter 0.15s;
}
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--text); filter: none; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: color-mix(in srgb, var(--bg) 97%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 100%; }
.logo { display: block; flex: 0 0 auto; margin-left: -0.3rem; }
.logo img { height: 3.1rem; width: auto; }
.logo .logo-dark { display: none; }
@media (prefers-color-scheme: dark) { .logo .logo-light { display: none; } .logo .logo-dark { display: block; } }
.nav { display: flex; align-items: center; gap: 2rem; }
.nav > ul { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav a:not(.btn) { color: var(--text); text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.nav a:not(.btn):hover { color: var(--accent); }
.nav .btn { padding: 0.6rem 1rem; font-size: 0.95rem; }
.menu { display: none; }
@media (max-width: 900px) {
  .nav > ul, .nav > .btn { display: none; }
  .menu { display: block; position: relative; }
  .menu summary { list-style: none; cursor: pointer; font-weight: 600; font-size: 0.95rem; padding: 0.55rem 0.9rem; border: 1px solid var(--line-strong); border-radius: var(--radius); }
  .menu summary::-webkit-details-marker { display: none; }
  .menu ul { position: absolute; right: 0; top: calc(100% + 0.5rem); min-width: 15rem; list-style: none; margin: 0; padding: 0.5rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(20,24,29,.14); }
  .menu li a { display: block; padding: 0.7rem 0.8rem; color: var(--text); text-decoration: none; font-weight: 500; }
  .menu li a.btn { display: flex; margin-top: 0.4rem; color: var(--accent-contrast); }
}

/* Sections */
.section { padding: var(--section) 0; }
.section.alt { background: var(--bg-alt); }
.section-head { max-width: 40rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.section-head h2 + p { margin-top: 1.1rem; }

/* ───────── Story: Raster → Website → Geräte ───────── */
.story { position: relative; height: 430vh; }
.story-inner { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); overflow: hidden; }
.story-inner > .wrap { height: 100%; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; }
.captions { position: relative; height: 100%; }
.caption { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
.caption .lead { margin-top: 1.4rem; }
.caption h1 { max-width: 12ch; }
.caption h2 { max-width: 14ch; font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); line-height: 1.05; letter-spacing: -0.025em; }
.caption .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }
.caption .region { margin-top: 1.75rem; font-size: var(--fs-small); color: var(--text-muted); display: flex; gap: 0.5rem; align-items: flex-start; max-width: 30rem; }
.caption .region svg { width: 1.1rem; height: 1.1rem; color: var(--accent); flex: 0 0 auto; margin-top: 0.15rem; }
.devices { display: flex; gap: 0.5rem; margin-top: 2rem; list-style: none; padding: 0; }
.devices li { font-size: var(--fs-small); font-weight: 600; padding: 0.4rem 0.8rem; border-radius: var(--radius); border: 1px solid var(--line-strong); color: var(--text-muted); transition: background .25s, color .25s, border-color .25s; }
.devices li.on { background: var(--text); border-color: var(--text); color: var(--bg); }
.scroll-hint { position: absolute; left: max(var(--gutter), calc((100% - var(--max)) / 2)); bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem; font-size: var(--fs-small); color: var(--text-muted); }
.scroll-hint span { display: block; width: 1px; height: 2.5rem; background: var(--line-strong); position: relative; overflow: hidden; }
.scroll-hint span::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--accent); animation: hint 1.8s ease-in-out infinite; }
@keyframes hint { to { top: 100%; } }

.stage { position: relative; width: 100%; height: min(78%, 40rem); }
.stage > * { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.stage .b { width: 100px; height: 100px; transform-origin: 0 0; }
.stage .frame { border: 2px solid var(--line-strong); background: var(--bg); }
.stage .chrome { background: var(--bg-alt); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 6px; padding-left: 12px; overflow: hidden; }
.stage .chrome i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); display: block; flex: 0 0 auto; }

/* Ohne JS oder mit reduzierter Bewegung: ruhige Version */
.no-js .stage { display: none; }
:is(.no-js, .reduced) .story { height: auto; }
:is(.no-js, .reduced) .story .story-inner { position: relative; top: 0; height: auto; overflow: visible; padding: clamp(3rem, 2rem + 4vw, 6rem) 0; }
:is(.no-js, .reduced) .story .captions { height: auto; }
:is(.no-js, .reduced) .story .caption { position: static; transform: none; }
:is(.no-js, .reduced) .story .caption + .caption { display: none; }
:is(.no-js, .reduced) .story .stage { height: 22rem; }
:is(.no-js, .reduced) .story .scroll-hint { display: none; }

@media (max-width: 900px) {
  .story { height: 400vh; }
  .story-inner > .wrap { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; padding-top: 1.5rem; padding-bottom: 1.5rem; gap: 1rem; }
  .captions { height: 19rem; }
  .caption { top: 0; transform: none; }
  .caption h1 { font-size: clamp(2.1rem, 1.5rem + 3vw, 2.75rem); }
  .caption h2 { font-size: clamp(1.75rem, 1.3rem + 2.5vw, 2.25rem); }
  .caption .lead { margin-top: 1rem; font-size: 1rem; }
  .caption .actions { margin-top: 1.25rem; }
  .caption .actions .btn { padding: 0.7rem 1rem; font-size: 0.95rem; }
  .caption .region { display: none; }
  .devices { margin-top: 1.25rem; }
  .stage { height: 100%; max-height: 28rem; }
  .scroll-hint { display: none; }
  :is(.no-js, .reduced) .story .stage { height: 16rem; }
  :is(.no-js, .reduced) .story .captions { height: auto; }
}
@media (max-width: 900px) and (max-height: 700px) {
  .captions { height: 16.5rem; }
  .caption .lead { display: none; }
}

/* ───────── Live-Demo ───────── */
.demo { display: grid; grid-template-columns: 20rem 1fr; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }
.controls { display: grid; gap: 1.75rem; }
.controls fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.controls legend { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.7rem; padding: 0; }
.seg { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: block; padding: 0.55rem 0.9rem; border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: 0.95rem; font-weight: 500; cursor: pointer; background: var(--bg); transition: background .15s, color .15s, border-color .15s; }
.seg input:checked + span { background: var(--text); color: var(--bg); border-color: var(--text); }
.seg input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.swatches { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.swatches label { position: relative; }
.swatches input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.swatches span { display: block; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--bg-alt), 0 0 0 3px transparent; cursor: pointer; transition: box-shadow .15s; }
.swatches input:checked + span { box-shadow: 0 0 0 3px var(--bg-alt), 0 0 0 5px var(--text); }
.swatches input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 5px; }
.switch { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; font-weight: 500; position: relative; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { width: 3rem; height: 1.6rem; border-radius: 1rem; background: var(--line-strong); position: relative; transition: background .2s; flex: 0 0 auto; }
.switch .track::after { content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(1.4rem); }
.switch input:focus-visible + .track { outline: 3px solid var(--accent); outline-offset: 3px; }
.demo-note { font-size: var(--fs-small); color: var(--text-muted); }

/* Die Mini-Website */
.browser { border: 2px solid var(--line-strong); border-radius: 8px; overflow: hidden; background: var(--bg); box-shadow: 0 30px 60px -30px rgba(20,24,29,.35); }
.browser-bar { height: 2.4rem; display: flex; align-items: center; gap: 6px; padding: 0 0.9rem; background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); flex: 0 0 auto; }
.browser-bar .url { margin-left: 0.8rem; font-size: 0.75rem; color: var(--text-muted); background: var(--bg); padding: 0.2rem 0.75rem; border-radius: 3px; flex: 1; max-width: 18rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mini {
  --d-accent: #2F6B4F;
  --d-bg: #FFFFFF; --d-bg2: #F4F4F2; --d-text: #1B1D1F; --d-muted: #5E6368;
  --d-font: "Manrope", Arial, sans-serif; --d-radius: 6px;
  --d-on-accent: #FFFFFF;
  --d-accent-text: var(--d-accent);
  background: var(--d-bg); color: var(--d-text); font-family: var(--d-font);
  font-size: 0.9rem; line-height: 1.55; transition: background .35s, color .35s;
}
.mini.dark { --d-bg: #16191C; --d-bg2: #22272B; --d-text: #F2F3F4; --d-muted: #A4AAB0; --d-accent-text: color-mix(in srgb, var(--d-accent) 55%, white); }
.mini * { transition: background-color .35s, color .35s, border-color .35s; }
.mini-nav { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid color-mix(in srgb, var(--d-text) 10%, transparent); }
.mini-brand { font-weight: 700; font-size: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.mini-brand i { width: 0.9rem; height: 0.9rem; background: var(--d-accent); border-radius: calc(var(--d-radius) / 2); display: block; }
.mini-links { display: flex; gap: 1.1rem; font-size: 0.8rem; color: var(--d-muted); }
.mini-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 1.5rem; padding: 2.25rem 1.5rem 2rem; align-items: center; }
.mini-hero h3 { font-size: clamp(1.35rem, 1rem + 1.2vw, 1.9rem); line-height: 1.1; letter-spacing: -0.015em; }
.mini-hero p { margin-top: 0.75rem; color: var(--d-muted); }
.mini-btn { display: inline-block; margin-top: 1.25rem; background: var(--d-accent); color: var(--d-on-accent); font-weight: 600; font-size: 0.85rem; padding: 0.6rem 1rem; border-radius: var(--d-radius); }
.mini-visual { aspect-ratio: 4 / 3; border-radius: var(--d-radius); overflow: hidden; background: var(--k-sky); }
.mini-visual svg { display: block; width: 100%; height: 100%; }
.mini-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; padding: 0 1.5rem 1.75rem; }
.mini-card { background: var(--d-bg2); border-radius: var(--d-radius); padding: 0.9rem; }
.mini-card .mi-wrap { display: block; font-style: normal; }
.mini-card .mi { display: block; width: 2.4rem; height: 2.4rem; margin-bottom: 0.55rem; }
.mini-card b { display: block; font-size: 0.85rem; }
.mini-card span { display: block; font-size: 0.75rem; color: var(--d-muted); margin-top: 0.2rem; }
/* Stile */
.mini[data-style="klassisch"] { --d-font: Georgia, "Times New Roman", serif; --d-radius: 0px; }
.mini[data-style="klassisch"] .mini-nav { flex-direction: column; gap: 0.5rem; }
.mini[data-style="klassisch"] .mini-hero { grid-template-columns: 1fr; text-align: center; }
.mini[data-style="klassisch"] .mini-hero p { margin-left: auto; margin-right: auto; max-width: 30rem; }
.mini[data-style="klassisch"] .mini-visual { aspect-ratio: 16 / 6; order: -1; }
.mini[data-style="klassisch"] .mini-card { background: transparent; border-top: 2px solid var(--d-accent); border-radius: 0; text-align: center; }
.mini[data-style="klassisch"] .mini-card .mi { margin-left: auto; margin-right: auto; }
.mini[data-style="mutig"] { --d-radius: 18px; }
.mini[data-style="mutig"] .mini-hero { background: var(--d-accent); color: var(--d-on-accent); margin: 1rem 1rem 1.25rem; border-radius: var(--d-radius); padding: 2rem 1.5rem; }
.mini[data-style="mutig"] .mini-hero h3 { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; }
.mini[data-style="mutig"] .mini-hero p { color: color-mix(in srgb, var(--d-on-accent) 82%, transparent); }
.mini[data-style="mutig"] .mini-btn { background: var(--d-on-accent); color: var(--d-accent); }
.mini[data-style="mutig"] .mini-visual { box-shadow: 0 0 0 3px color-mix(in srgb, var(--d-on-accent) 35%, transparent); }
.mini[data-style="mutig"] .mini-card { border: 2px solid var(--d-text); background: transparent; }

@media (max-width: 900px) {
  .demo { grid-template-columns: 1fr; gap: 1.5rem; }
  .demo .browser { order: -1; }
  .controls { grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; }
  .controls fieldset:nth-child(-n+2) { grid-column: 1 / -1; }
  .demo-note { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .mini { font-size: 0.82rem; }
  .mini-links { display: none; }
  .mini-nav { padding: 0.75rem 1rem; }
  .mini-hero { grid-template-columns: 1fr; padding: 1.25rem 1rem; gap: 1rem; }
  .mini-hero p { margin-top: 0.5rem; }
  .mini-btn { margin-top: 0.85rem; }
  .mini-visual { aspect-ratio: 16 / 7; order: -1; }
  .mini[data-style="mutig"] .mini-hero { margin: 0.75rem; padding: 1.25rem 1rem; }
  .mini[data-style="klassisch"] .mini-visual { aspect-ratio: 16 / 6; }
  .mini-cards { padding: 0 1rem 1rem; gap: 0.5rem; }
  .mini-card { padding: 0.6rem; }
  .mini-card span { display: none; }
  .swatches span { width: 2.1rem; height: 2.1rem; }
  .seg span { padding: 0.5rem 0.75rem; font-size: 0.9rem; }
}

/* ───────── Leistungen ───────── */
.services { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem clamp(2rem, 1rem + 4vw, 5rem); }
.service { border-top: 2px solid var(--text); padding-top: 1.75rem; }
.service .glyph { width: 2.25rem; height: 2.25rem; margin-bottom: 1.5rem; color: var(--accent); }
.service h3 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); }
.service > p { margin-top: 0.8rem; color: var(--text-muted); max-width: 30rem; }
.checks { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.checks li { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.85rem; padding: 0.85rem 0; border-top: 1px solid var(--line); }
.checks svg { width: 1.25rem; height: 1.25rem; color: var(--accent); margin-top: 0.2rem; }
.audiences { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem clamp(2rem, 1rem + 4vw, 5rem); margin-top: clamp(4rem, 3rem + 3vw, 6rem); }
.audience { display: grid; grid-template-columns: 4px 1fr; gap: 1.25rem; }
.audience::before { content: ""; background: var(--cmz-tuerkis); }
.audience h3 { font-size: 1.15rem; }
.audience p { margin-top: 0.5rem; color: var(--text-muted); }
@media (max-width: 720px) { .services, .audiences { grid-template-columns: 1fr; } }

/* ───────── Erstes Projekt ───────── */
.project { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.project-media { position: relative; padding: 0 clamp(2rem, 1rem + 4vw, 4.5rem) clamp(2rem, 1rem + 3vw, 3.5rem) 0; }
.project-media figure { margin: 0; background: var(--bg); }
.project-media img { width: 100%; height: auto; }
.shot-desktop { border: 2px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.shot-phone { position: absolute; right: 0; bottom: 0; width: 27%; border: 2px solid var(--line-strong); border-radius: 22px; padding: 5px; box-shadow: 0 24px 48px -24px rgba(20,24,29,.45); }
.shot-phone img { border-radius: 16px; }
.project .checks { margin-top: 1.75rem; }
@media (max-width: 900px) { .project { grid-template-columns: 1fr; } }

/* ───────── Werte ───────── */
.values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(2rem, 1rem + 4vw, 5rem); }
.value { padding: 1.75rem 0 2rem; border-top: 1px solid var(--line-strong); display: grid; grid-template-columns: 10rem 1fr; gap: 1.5rem; }
.value h3 { font-size: 1.35rem; }
.value p { color: var(--text-muted); }
@media (max-width: 900px) { .values { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .value { grid-template-columns: 1fr; gap: 0.5rem; } }

/* ───────── Ablauf (Sticky) ───────── */
.process { background: var(--cmz-anthrazit); color: #fff; }
.process .section-head h2 { color: #fff; }
.process .section-head p { color: var(--cmz-grau-hell); }
.process-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 1rem + 4vw, 5rem); }
.process-pin { position: sticky; top: calc(var(--header-h) + 3rem); align-self: start; display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center; }
.process-num { font-size: clamp(6rem, 4rem + 8vw, 11rem); font-weight: 800; line-height: 0.85; letter-spacing: -0.05em; color: var(--cmz-tuerkis-hell); font-variant-numeric: tabular-nums; min-width: 1ch; }
.process-bar { width: 4px; height: 12rem; background: #2C343D; position: relative; justify-self: start; }
.process-bar i { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--cmz-tuerkis-hell); }
.process-label { grid-column: 1 / -1; font-weight: 600; color: var(--cmz-grau-hell); }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { min-height: 55vh; display: flex; flex-direction: column; justify-content: center; padding: 2rem 0; color: var(--cmz-grau-hell); transition: color .35s; }
.steps li p { color: #808993; transition: color .35s; }
.steps li.on { color: #fff; }
.steps li.on p { color: var(--cmz-grau-hell); }
.steps li:last-child { min-height: 40vh; }
.steps h3 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem); letter-spacing: -0.02em; }
.steps p { margin-top: 0.8rem; max-width: 30rem; font-size: var(--fs-lead); }
.no-js .steps li { color: #fff; }
.no-js .steps li p { color: var(--cmz-grau-hell); }
@media (max-width: 900px) {
  .process-grid { grid-template-columns: 1fr; gap: 0; }
  .process-pin { top: var(--header-h); z-index: 2; background: var(--cmz-anthrazit); grid-template-columns: auto 1fr; gap: 1.25rem; padding: 1rem 0; border-bottom: 1px solid #2C343D; }
  .process-num { font-size: 3.5rem; }
  .process-bar { width: 100%; height: 4px; }
  .process-bar i { height: 100%; width: 0; }
  .process-label { display: none; }
  .steps li { min-height: 45vh; }
}

/* ───────── Kurz erklärt ───────── */
.explain { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
.explain article { border-top: 2px solid var(--text); padding-top: 1.5rem; }
.explain h3 { font-size: 1.2rem; }
.explain p { margin-top: 0.8rem; color: var(--text-muted); }
.explain p + p { margin-top: 0.6rem; }
@media (max-width: 900px) { .explain { grid-template-columns: 1fr; } }

/* ───────── FAQ ───────── */
.faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.faq details { border-top: 1px solid var(--line-strong); }
.faq details:last-child { border-bottom: 1px solid var(--line-strong); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.35rem 0; font-weight: 600; font-size: 1.1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: 0 0 auto; width: 0.85rem; height: 0.85rem; margin-top: 0.35rem; background: linear-gradient(var(--accent), var(--accent)) center / 100% 2px no-repeat, linear-gradient(var(--accent), var(--accent)) center / 2px 100% no-repeat; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 2.5rem 1.5rem 0; color: var(--text-muted); max-width: 40rem; }
.faq details p + p { margin-top: -0.75rem; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } }

/* ───────── Über mich ───────── */
.about { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.mark { aspect-ratio: 1; width: 100%; max-width: 19rem; display: grid; grid-template-columns: 46fr 8fr 46fr; grid-template-rows: 22fr 8fr 31fr 8fr 31fr; }
.mark span:nth-child(1) { grid-column: 1 / 4; grid-row: 1; background: var(--block); }
.mark span:nth-child(2) { grid-column: 1; grid-row: 3 / 6; background: var(--cmz-tuerkis); }
.mark span:nth-child(3) { grid-column: 3; grid-row: 3; background: var(--block); }
.mark span:nth-child(4) { grid-column: 3; grid-row: 5; background: var(--block); }
.about .lead { color: var(--text); margin-top: 1.25rem; }
.about p + p { margin-top: 1rem; }
.about p:last-child { color: var(--text-muted); max-width: 36rem; }
@media (max-width: 720px) { .about { grid-template-columns: 1fr; } }

/* Porträt */
.portrait { position: relative; margin: 0 0 1.5rem 1.5rem; max-width: 26rem; }
.portrait::before { content: ""; position: absolute; left: -1.5rem; bottom: -1.5rem; width: 46%; height: 62%; background: var(--cmz-tuerkis); }
.portrait::after { content: ""; position: absolute; right: 0; top: -1.5rem; width: 54%; height: 0.75rem; background: var(--block); }
.portrait img { position: relative; width: 100%; height: auto; border-radius: var(--radius); }
@media (max-width: 720px) { .portrait { max-width: 20rem; } }

/* ───────── Kontakt ───────── */
.person { display: flex; align-items: center; gap: 1rem; margin-top: 1.75rem; }
.person img { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; }
.person strong { display: block; font-weight: 700; }
.person span { display: block; font-size: var(--fs-small); color: var(--text-muted); }
.contact { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.direct { list-style: none; margin: 2.25rem 0 0; padding: 0; }
.direct li { border-top: 1px solid var(--line); }
.direct li:last-child { border-bottom: 1px solid var(--line); }
.direct a, .direct .item { display: grid; grid-template-columns: 1.4rem 1fr; gap: 1rem; align-items: center; padding: 1rem 0; color: var(--text); text-decoration: none; }
.direct a:hover strong { color: var(--accent); }
.direct svg { width: 1.3rem; height: 1.3rem; color: var(--accent); }
.direct strong { font-weight: 600; display: block; }
.direct .sub { display: block; font-size: var(--fs-small); color: var(--text-muted); }
.form { background: var(--bg-alt); border-radius: var(--radius); padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form .full { grid-column: 1 / -1; }
.field label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.45rem; }
.field .opt { font-weight: 400; color: var(--text-muted); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text); background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 0.75rem 0.85rem;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.check { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.975rem; cursor: pointer; }
.check input { width: 1.2rem; height: 1.2rem; margin: 0.2rem 0 0; accent-color: var(--accent); flex: 0 0 auto; }
.form .hint { font-size: var(--fs-small); color: var(--text-muted); }
.form .btn { justify-self: start; }
.hp { display: none; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; } }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 3rem 0 2.5rem; font-size: var(--fs-small); color: var(--text-muted); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem 3rem; align-items: flex-end; }
.site-footer .logo img { height: 2.6rem; }
.site-footer p { margin-top: 0.75rem; }
.site-footer nav ul { list-style: none; display: flex; gap: 1.5rem; margin: 0; padding: 0; }
.site-footer a { color: var(--text-muted); }

/* Rechtstexte & Danke-Seite */
.legal { padding: clamp(3rem, 2rem + 4vw, 5rem) 0 var(--section); }
.legal .wrap { max-width: calc(46rem + 2 * var(--gutter)); }
.legal h1 { font-size: var(--fs-h2); margin-bottom: 2rem; }
.legal h2 { font-size: 1.25rem; margin: 2.25rem 0 0.75rem; }
.legal p, .legal ul { margin: 0 0 1rem; color: var(--text); }
.legal .todo { background: var(--bg-alt); border-left: 3px solid var(--accent); padding: 0.75rem 1rem; }

/* 404 */
.notfound { padding-top: 1rem; }
.fallen { position: relative; width: 14rem; height: 9rem; margin-bottom: 2.5rem; }
.fallen i { position: absolute; display: block; background: var(--block); }
.fallen i:nth-child(1) { left: 0; top: 2.6rem; width: 9rem; height: 2rem; transform: rotate(-9deg); }
.fallen i:nth-child(2) { left: 1.2rem; top: 5.2rem; width: 6.5rem; height: 3.6rem; background: var(--cmz-tuerkis); transform: rotate(4deg); }
.fallen i:nth-child(3) { left: 8.6rem; top: 0.4rem; width: 3.8rem; height: 2.6rem; transform: rotate(14deg); }
.fallen i:nth-child(4) { left: 8.8rem; top: 5.8rem; width: 3.8rem; height: 2.6rem; transform: rotate(-6deg); }

/* ═════════ Variante B: mehrseitig ═════════ */
.nav a[aria-current="page"] { color: var(--accent); }
.menu li a[aria-current="page"] { color: var(--accent); }
.nav > ul { gap: 1.4rem; }
@media (max-width: 1060px) { .nav > ul, .nav > .btn { display: none; } .menu { display: block; position: relative; }
  .menu summary { list-style: none; cursor: pointer; font-weight: 600; font-size: 0.95rem; padding: 0.55rem 0.9rem; border: 1px solid var(--line-strong); border-radius: var(--radius); }
  .menu summary::-webkit-details-marker { display: none; }
  .menu ul { position: absolute; right: 0; top: calc(100% + 0.5rem); min-width: 15rem; list-style: none; margin: 0; padding: 0.5rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(20,24,29,.14); }
  .menu li a { display: block; padding: 0.7rem 0.8rem; color: var(--text); text-decoration: none; font-weight: 500; }
  .menu li a.btn { display: flex; margin-top: 0.4rem; color: var(--accent-contrast); }
}

/* Seitenkopf der Unterseiten */
.page-hero { padding: clamp(3.5rem, 2rem + 5vw, 6.5rem) 0 clamp(3rem, 2rem + 3vw, 5rem); border-bottom: 1px solid var(--line); }
.page-hero .wrap { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: end; }
.page-hero h1 { max-width: 17ch; }
.page-hero .lead { margin-top: 1.4rem; }
.page-hero .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }
.facts { background: var(--bg-alt); border-radius: var(--radius); padding: 1.5rem 1.6rem; margin: 0; border-top: 4px solid var(--cmz-tuerkis); }
.facts div + div { margin-top: 1rem; }
.facts dt { font-size: var(--fs-small); color: var(--text-muted); }
.facts dd { margin: 0.15rem 0 0; font-weight: 600; }
@media (max-width: 900px) { .page-hero .wrap { grid-template-columns: 1fr; align-items: start; } }

/* Link-Karten zu den Leistungen */
.link-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem clamp(2rem, 1rem + 4vw, 5rem); }
.link-card { display: block; color: var(--text); text-decoration: none; border-top: 2px solid var(--text); padding-top: 1.75rem; }
.link-card .glyph { width: 2.25rem; height: 2.25rem; color: var(--accent); margin-bottom: 1.5rem; }
.link-card h3 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); }
.link-card p { margin-top: 0.8rem; color: var(--text-muted); max-width: 30rem; }
.link-card .more { display: inline-block; margin-top: 1.25rem; font-weight: 600; color: var(--accent); }
.link-card:hover h3, .link-card:focus-visible h3 { color: var(--accent); }
.link-card:hover .more { text-decoration: underline; text-underline-offset: 0.18em; }
@media (max-width: 720px) { .link-cards { grid-template-columns: 1fr; } }

/* Merkmale / Inhalte einer Leistung */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem clamp(1.5rem, 1rem + 2vw, 3rem); }
.feature { border-top: 1px solid var(--line-strong); padding-top: 1.25rem; }
.feature h3 { font-size: 1.15rem; }
.feature p { margin-top: 0.6rem; color: var(--text-muted); }
.feature a { font-weight: 600; }
@media (max-width: 900px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }

/* Kompakter Ablauf (Unterseiten) */
.steps-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; counter-reset: s; }
.steps-row li { counter-increment: s; border-top: 2px solid var(--text); padding-top: 1rem; }
.steps-row li::before { content: counter(s); display: block; font-size: 2.25rem; font-weight: 800; color: var(--accent); line-height: 1; margin-bottom: 0.75rem; }
.steps-row h3 { font-size: 1.1rem; }
.steps-row p { margin-top: 0.5rem; color: var(--text-muted); font-size: 0.975rem; }
@media (max-width: 900px) { .steps-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps-row { grid-template-columns: 1fr; } }

/* Abschluss-Band */
.cta-band { background: var(--cmz-tuerkis); color: #fff; padding: clamp(3rem, 2rem + 3vw, 4.5rem) 0; }
.cta-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.cta-band h2 { color: #fff; max-width: 22ch; }
.cta-band p { margin-top: 0.75rem; color: #fff; max-width: 34rem; }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.cta-band .btn { background: #fff; color: var(--cmz-anthrazit); border-color: #fff; }
.cta-band .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.cta-band .btn-ghost:hover { border-color: #fff; }
.cta-band a:focus-visible { outline-color: #fff; }

/* Startseite: persönlicher Abschluss */
.closing { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.closing .portrait { max-width: 20rem; }
.closing .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.closing .direct { margin-top: 2rem; max-width: 30rem; }
@media (max-width: 720px) { .closing { grid-template-columns: 1fr; } .closing .portrait { max-width: 15rem; } }

/* Projekt-Fallstudie */
.case { display: grid; gap: clamp(3rem, 2rem + 3vw, 5rem); }
.case-step { display: grid; grid-template-columns: 0.42fr 1fr; gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
.case-step .label { font-weight: 700; color: var(--accent); font-size: 0.95rem; }
.case-step h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-top: 0.35rem; }
.case-step p { color: var(--text-muted); }
.case-step p + p { margin-top: 0.8rem; }
.case-media { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.75rem; }
.case-media figure { margin: 0; }
.case-media img { width: 100%; height: auto; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; }
.case-media figcaption { font-size: var(--fs-small); color: var(--text-muted); margin-top: 0.5rem; }
.scores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.75rem; }
.score { border-top: 2px solid var(--cmz-tuerkis); padding-top: 0.75rem; }
.score b { display: block; font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.score span { display: block; margin-top: 0.4rem; font-size: var(--fs-small); color: var(--text-muted); }
@media (max-width: 900px) { .case-step { grid-template-columns: 1fr; } .scores { grid-template-columns: 1fr 1fr; } }

/* ───────── Anfrage-Assistent ───────── */
.wizard-wrap { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
@media (max-width: 900px) { .wizard-wrap { grid-template-columns: 1fr; } }
.progress { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; counter-reset: p; }
.progress li { counter-increment: p; font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); border-top: 4px solid var(--line-strong); padding-top: 0.6rem; }
.progress li::before { content: counter(p) " · "; }
.progress li.done { border-color: var(--accent); color: var(--text); }
.progress li.now { border-color: var(--accent); color: var(--accent); }
@media (max-width: 560px) { .progress li span { display: none; } .progress li::before { content: counter(p); } }
.wizard { background: var(--bg-alt); border-radius: var(--radius); padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); }
.wizard fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.wizard legend { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); font-weight: 700; letter-spacing: -0.015em; padding: 0; margin-bottom: 0.5rem; }
.wizard .hint { color: var(--text-muted); margin-bottom: 1.5rem; }
.js .wizard .step { display: none; }
.js .wizard .step.on { display: block; }
.no-js .wizard .step + .step { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line-strong); }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1.5rem; }
.choices label { position: relative; display: block; }
.choices input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choices span { display: block; height: 100%; padding: 0.9rem 1rem; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; font-weight: 600; transition: border-color .15s, box-shadow .15s; }
.choices span small { display: block; font-weight: 400; color: var(--text-muted); font-size: var(--fs-small); margin-top: 0.2rem; }
.choices input:checked + span { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.choices input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 560px) { .choices { grid-template-columns: 1fr; } }
.wizard .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.wizard .grid2 .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .wizard .grid2 { grid-template-columns: 1fr; } }
.wizard .field + .field { margin-top: 0; }
.wizard-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.wizard-nav .btn-ghost { background: var(--bg); }
.wizard .error { color: #B42318; font-size: var(--fs-small); margin-top: 1rem; }
@media (prefers-color-scheme: dark) { .wizard .error { color: #F97066; } }
.wizard .opt { font-weight: 400; color: var(--text-muted); }
.done-box { background: var(--bg-alt); border-radius: var(--radius); padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); border-top: 4px solid var(--cmz-tuerkis); }
.done-box h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.done-box p { margin-top: 0.8rem; color: var(--text-muted); }
.summary { margin: 1.5rem 0 0; display: grid; grid-template-columns: 11rem 1fr; gap: 0.6rem 1.25rem; }
.summary dt { color: var(--text-muted); font-size: var(--fs-small); padding-top: 0.15rem; }
.summary dd { margin: 0; font-weight: 600; }
@media (max-width: 560px) { .summary { grid-template-columns: 1fr; } .summary dd { margin-bottom: 0.5rem; } }
.aside-box h3 { font-size: 1.1rem; }
.aside-box p { margin-top: 0.5rem; color: var(--text-muted); font-size: 0.975rem; }
.aside-box .person { margin-top: 0; margin-bottom: 1.5rem; }
.aside-box .direct { margin-top: 1.5rem; }

/* Footer mehrseitig */
.site-footer .foot-nav ul { flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.site-footer .foot-cols { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: flex-end; }
.no-js [data-next], .no-js [data-back] { display: none; }
.wizard legend:focus { outline: none; }
.done-box:focus { outline: none; }
.link-cards div.link-card:hover h3 { color: inherit; }
.wizard-wrap > * { min-width: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.nav a.btn[aria-current="page"], .menu li a.btn[aria-current="page"] { color: var(--accent-contrast); }
.section-head h1 + p { margin-top: 1.1rem; }
.aside-box .aside-title { font-size: 1.1rem; letter-spacing: -0.01em; }

/* ───────── Live-Demo: gezeichnete Szenen (Farben hell / dunkel) ───────── */
.mini {
  --k-sky: #CDE6EF; --k-sun: #FFC95C; --k-cloud: #FFFFFF; --k-star: transparent;
  --k-wall: #F4D8C2; --k-wall2: #F8EFE0; --k-wall3: #C3DACF; --k-wallold: #ECE5D8; --k-cwall: #EDEFE9; --k-ceil: #FAF8F4;
  --k-beam: #6F4E39; --k-roof: #B9583D; --k-roof2: #8F4431;
  --k-frame: #FFFFFF; --k-glass: #A7CCD8; --k-lit: #A7CCD8; --k-inside: #FBE3C1; --k-glow: rgba(255,214,140,.5);
  --k-wood: #B97C4B; --k-woodlt: #D8A774; --k-wood2: #8A5535; --k-door: #734529; --k-door2: #F6F3EE;
  --k-stone: #D2C8BB; --k-ground: #E4DBCF; --k-ground2: #CEC1B2; --k-street: #BDB2A5;
  --k-floor: #D9B486; --k-floor2: #C69F72; --k-skirt: #FFFFFF; --k-cloth: #E9EBEC; --k-clothline: #D3D7DA; --k-tape: #E8CF7A;
  --k-leaf: #69A35C; --k-leaf2: #3F7444; --k-flower: #DB4437; --k-pot: #C4693F; --k-basket: #CDA676;
  --k-cream: #FFF6EA; --k-sponge: #EDB46A; --k-berry: #C63A50; --k-choc: #6B3E2B; --k-choc2: #4E2A1C; --k-yolk: #F5B335;
  --k-metal: #2C3136; --k-metal2: #7C858D; --k-can: #DDE1E4; --k-board: #2E3A35; --k-chalk: #EEF0EA; --k-shutter: #4E7E66; --k-brass: #D4A443;
  --k-sand: #E7C9A2; --k-chair2: #E2B887; --k-chair2dk: #C9965F; --k-mustard: #E2A93B; --k-terra: #C8603F; --k-sage: #7FA48F; --k-pink: #F2A7A0;
  --k-curtain: #F1E6D6; --k-shade: #F4E7CF; --k-art: #F6EDE0; --k-shelf: #F3EEE6; --k-paper: #FFFFFF;
  --k-lampglow: transparent; --k-refl: rgba(255,255,255,.35); --k-panel: rgba(0,0,0,.12); --k-sunbeam: rgba(255,244,214,.38); --k-steamc: rgba(40,40,40,.32);
}
.mini.dark {
  --k-sky: #18222F; --k-sun: #F1E7C4; --k-cloud: #253244; --k-star: #F1E7C4;
  --k-wall: #6B5548; --k-wall2: #5A534D; --k-wall3: #3D4E49; --k-wallold: #3B3833; --k-cwall: #2D302D; --k-ceil: #2A2825;
  --k-beam: #2C221B; --k-roof: #5C3126; --k-roof2: #45251D;
  --k-frame: #8F857C; --k-glass: #2B3A4B; --k-lit: #FFC965; --k-inside: #F7C473; --k-glow: rgba(255,206,110,.7);
  --k-wood: #8A5A37; --k-woodlt: #A87B50; --k-wood2: #5C3A24; --k-door: #4A2D1C; --k-door2: #4A4640;
  --k-stone: #4B4540; --k-ground: #3A3531; --k-ground2: #2D2926; --k-street: #262320;
  --k-floor: #6E5137; --k-floor2: #5C432D; --k-skirt: #6C6862; --k-cloth: #4E5255; --k-clothline: #3F4346; --k-tape: #9C8A4E;
  --k-leaf: #477A43; --k-leaf2: #2C5130; --k-flower: #B0392F; --k-pot: #8C4B30; --k-basket: #8C7152;
  --k-metal: #121518; --k-can: #9EA4A9; --k-board: #1D2421; --k-shutter: #34584A;
  --k-sand: #A88E6D; --k-chair2: #A7865F; --k-chair2dk: #8A6B46;
  --k-curtain: #77705F; --k-shade: #FFE3A3; --k-art: #4A453E; --k-shelf: #3E3A35; --k-paper: #E9E6E0;
  --k-lampglow: rgba(255,206,110,.4); --k-refl: rgba(255,255,255,.16); --k-panel: rgba(0,0,0,.2); --k-sunbeam: transparent; --k-steamc: rgba(255,255,255,.45);
}
.k-sky{fill:var(--k-sky)} .k-sun{fill:var(--k-sun)} .k-cloud{fill:var(--k-cloud)} .k-star{fill:var(--k-star)}
.k-wall{fill:var(--k-wall)} .k-wall2{fill:var(--k-wall2)} .k-wall3{fill:var(--k-wall3)} .k-wallold{fill:var(--k-wallold)} .k-cwall{fill:var(--k-cwall)} .k-ceil{fill:var(--k-ceil)}
.k-beam{fill:var(--k-beam)} .k-roof{fill:var(--k-roof)} .k-roof2{fill:var(--k-roof2)}
.k-frame{fill:var(--k-frame)} .k-glass{fill:var(--k-glass)} .k-lit{fill:var(--k-lit)} .k-inside{fill:var(--k-inside)} .k-glow{fill:var(--k-glow)} .k-lampglow{fill:var(--k-lampglow)}
.k-wood{fill:var(--k-wood)} .k-woodlt{fill:var(--k-woodlt)} .k-wood2{fill:var(--k-wood2)} .k-door{fill:var(--k-door)} .k-door2{fill:var(--k-door2)}
.k-stone{fill:var(--k-stone)} .k-ground{fill:var(--k-ground)} .k-ground2{fill:var(--k-ground2)} .k-street{fill:var(--k-street)}
.k-floor{fill:var(--k-floor)} .k-floor2{fill:var(--k-floor2)} .k-skirt{fill:var(--k-skirt)} .k-cloth{fill:var(--k-cloth)} .k-tape{fill:var(--k-tape)}
.k-leaf{fill:var(--k-leaf)} .k-leaf2{fill:var(--k-leaf2)} .k-flower{fill:var(--k-flower)} .k-pot{fill:var(--k-pot)} .k-basket{fill:var(--k-basket)}
.k-cream{fill:var(--k-cream)} .k-sponge{fill:var(--k-sponge)} .k-berry{fill:var(--k-berry)} .k-choc{fill:var(--k-choc)} .k-choc2{fill:var(--k-choc2)} .k-yolk{fill:var(--k-yolk)}
.k-metal{fill:var(--k-metal)} .k-metal2{fill:var(--k-metal2)} .k-can{fill:var(--k-can)} .k-board{fill:var(--k-board)} .k-chalk{fill:var(--k-chalk)} .k-shutter{fill:var(--k-shutter)} .k-brass{fill:var(--k-brass)}
.k-sand{fill:var(--k-sand)} .k-chair2{fill:var(--k-chair2)} .k-chair2dk{fill:var(--k-chair2dk)} .k-mustard{fill:var(--k-mustard)} .k-terra{fill:var(--k-terra)} .k-sage{fill:var(--k-sage)} .k-pink{fill:var(--k-pink)}
.k-curtain{fill:var(--k-curtain)} .k-shade{fill:var(--k-shade)} .k-art{fill:var(--k-art)} .k-shelf{fill:var(--k-shelf)} .k-paper{fill:var(--k-paper);stroke:var(--k-metal2);stroke-width:1.5}
.k-refl{fill:var(--k-refl)} .k-panel{fill:var(--k-panel)} .k-sunbeam{fill:var(--k-sunbeam)} .k-roll{fill:rgba(255,255,255,.28)}
.k-plate{fill:var(--k-paper);stroke:var(--k-clothline);stroke-width:1.5} .k-eggw{fill:#FFFFFF} .k-vase{fill:rgba(255,255,255,.5);stroke:var(--k-metal2);stroke-width:1}
.ka{fill:var(--d-accent)} .ka-dk{fill:color-mix(in srgb, var(--d-accent) 70%, black)} .ka-lt{fill:color-mix(in srgb, var(--d-accent) 28%, var(--d-bg))}
.k-beamline{fill:none;stroke:var(--k-beam);stroke-width:5}
.k-clothline{fill:none;stroke:var(--k-clothline);stroke-width:2;stroke-linecap:round}
.k-curtainline{fill:none;stroke:var(--k-panel);stroke-width:2}
.k-basketline{fill:none;stroke:var(--k-panel);stroke-width:1.5}
.k-string{fill:none;stroke:var(--k-metal);stroke-width:1.2}
.k-ring{fill:none;stroke:var(--k-metal);stroke-width:2}
.k-cupline{fill:none;stroke:var(--k-cream);stroke-width:2}
.k-cupline2{fill:none;stroke:var(--k-cream);stroke-width:1.6}
.k-steam{fill:none;stroke:var(--k-steamc);stroke-width:1.6;stroke-linecap:round}
.k-stem{fill:none;stroke:var(--k-leaf2);stroke-width:1.4;stroke-linecap:round}
.k-score{fill:none;stroke:var(--k-wood2);stroke-width:1.4;stroke-linecap:round}
.k-dome{fill:rgba(255,255,255,.2);stroke:rgba(255,255,255,.85);stroke-width:1.2}
.k-glassjar{fill:rgba(255,255,255,.3);stroke:rgba(255,255,255,.85);stroke-width:1}
.k-pole{fill:none;stroke:var(--k-wood2);stroke-width:4;stroke-linecap:round}
.k-handle{fill:none;stroke:var(--k-metal);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.k-handle2{fill:none;stroke:var(--k-metal2);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.k-handle3{fill:none;stroke:var(--d-accent);stroke-width:3;stroke-linecap:round}
.k-ladder{fill:none;stroke:var(--k-woodlt);stroke-width:6;stroke-linecap:round}
.k-ladderstep{fill:var(--k-woodlt)}
.k-signtext{fill:var(--k-chalk);font:700 12px Georgia, "Times New Roman", serif;letter-spacing:3px}
.mini-visual *, .mini-card .mi * { transition: fill .35s, stroke .35s; }

/* ───────── Gezeichnete Grafiken in Markenfarben (Leistungsseiten, Ratgeber) ───────── */
.art { margin: 0; }
.art svg { width: 100%; height: auto; }
.page-hero.has-art .wrap { grid-template-columns: 1.15fr 0.85fr; align-items: center; }
.page-hero.has-art .hero-art { max-width: 26rem; justify-self: end; width: 100%; }
.page-hero.has-art .facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem 2rem; }
.page-hero.has-art .facts div + div { margin-top: 0; }
@media (max-width: 900px) { .page-hero.has-art .wrap { grid-template-columns: 1fr; } .page-hero.has-art .hero-art { justify-self: start; max-width: 24rem; } }
.explain-art { background: var(--bg-alt); border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-bottom: 1.4rem; }
.g-dev{fill:var(--bg-alt);stroke:var(--line-strong);stroke-width:2}
.g-scr{fill:var(--bg)} .g-blk{fill:var(--block-soft)} .g-acc{fill:var(--accent)} .g-ink{fill:var(--text)}
.g-card{fill:var(--bg);stroke:var(--line-strong);stroke-width:2}
.g-field{fill:var(--bg);stroke:var(--line-strong);stroke-width:1.5}
.g-plot{fill:color-mix(in srgb, var(--accent) 22%, var(--bg))}
.g-dash{fill:none;stroke:var(--text-muted);stroke-width:2;stroke-dasharray:3 5;stroke-linecap:round}
.g-arrow{fill:var(--text-muted)}
.g-stroke{fill:none;stroke:var(--line-strong);stroke-width:2;stroke-linejoin:round}
.g-check{fill:none;stroke:var(--accent-contrast);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.g-txt{fill:var(--text-muted);font:600 11px var(--font)}
.g-txt-b{fill:var(--text);font:700 11.5px var(--font)}
.g-txt-on{fill:var(--accent-contrast);font:700 11px var(--font)}