/* ==========================================================================
   DeskLane Studio — Unterseiten im Agentur-Design „Papier & Petrol" (01.11.2026)
   Gilt fuer products, about, contact, 404, thank-you/danke und legal/*.
   Dieselben Tokens, dieselbe Kopf- und Fusszeile, dieselbe Typografie wie die
   Startseite (assets/css/home.css) — aber ruhiger: kein Intro, kein Laufband,
   kein Mauszeiger-Ersatz, nur kurze Auftritte beim Hereinscrollen.
   home.css bleibt bewusst eigenstaendig: die Startseite laedt nur home.css,
   die Unterseiten nur site.css. Der geteilte Sockel steht deshalb zweimal da,
   dafuer kann keine Aenderung an den Unterseiten die Startseite kippen.
   Schrift selbst gehostet (Instrument Sans, SIL OFL — assets/fonts/OFL.txt).
   ========================================================================== */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap;
  src: url("../fonts/instrument-sans-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: "Instrument Sans";
  font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap;
  src: url("../fonts/instrument-sans-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;
}

/* --- Tokens (identisch zur Startseite) ----------------------------------- */
:root {
  color-scheme: light;
  --paper:      #f3ece0;
  --paper-2:    #ebe1d1;
  --paper-3:    #e2d6c3;
  --ink:        #142120;          /* auf Papier 14.9:1 */
  --ink-soft:   #3e4c4a;          /* 8.6:1 */
  --ink-faint:  #5b6563;          /* 5.4:1 */
  --rule:       rgba(20,33,32,.14);
  --petrol:     #2e6e6e;          /* auf Papier 5.2:1 */
  --petrol-2:   #245858;
  --deep:       #0d2223;
  --deep-2:     #123031;
  --mint:       #7fc9c4;          /* auf --deep 9.1:1 */
  --on-deep:    #eef3ef;
  --on-deep-2:  #a9c3bf;          /* auf --deep 8.4:1 */
  --copper:     #b4683b;
  --copper-ink: #94522c;          /* auf Papier 5.0:1 */

  --f: "Instrument Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --t-sm:   clamp(.8125rem, .79rem + .1vw, .875rem);
  --t-base: clamp(1rem, .97rem + .15vw, 1.0938rem);
  --t-lg:   clamp(1.125rem, 1.04rem + .4vw, 1.375rem);
  --t-xl:   clamp(1.375rem, 1.18rem + .9vw, 1.875rem);
  --t-d2:   clamp(2.4rem, 1.4rem + 4.4vw, 5.6rem);
  --t-d1:   clamp(2.8rem, 1.5rem + 5.6vw, 6.4rem);

  --gut:  clamp(1.25rem, .6rem + 3vw, 3.5rem);
  --sec:  clamp(4.5rem, 3rem + 7vw, 9rem);
  --maxw: 1440px;
  --hd-h: 72px;

  --e-out:  cubic-bezier(.16, 1, .3, 1);
  --e-io:   cubic-bezier(.76, 0, .24, 1);
  --d-fast: .35s; --d-mid: .7s; --d-slow: 1.2s;

  /* Alte Abstands-Token: die Unterseiten tragen style=-Attribute mit --s4
     bis --s7 und --line-strong. Werte bleiben, damit kein Layout springt. */
  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 3rem;   --s8: 4rem;
  --s9: 6rem;   --s10: 8rem;
  --line-strong: rgba(20,33,32,.28);
}

/* --- Basis ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hd-h) + 1rem); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f); font-size: var(--t-base); line-height: 1.65;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, address, blockquote { margin: 0; padding: 0; }
address { font-style: normal; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
strong { font-weight: 600; }
::selection { background: var(--petrol); color: var(--paper); }
[data-theme="dark"] ::selection { background: var(--mint); color: var(--deep); }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 4px; border-radius: 2px; }
[data-theme="dark"] :focus-visible { outline-color: var(--mint); }
html { scrollbar-color: var(--petrol) var(--paper-2); }
input { caret-color: var(--copper); }

.skip-link {
  position: fixed; left: 1rem; top: -4rem; z-index: 1000;
  padding: .75rem 1.1rem; background: var(--ink); color: var(--paper);
  border-radius: 999px; font-weight: 600; text-decoration: none; transition: top var(--d-fast) var(--e-out);
}
.skip-link:focus { top: 1rem; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.ico { width: 1.15em; height: 1.15em; flex: none; transition: transform var(--d-mid) var(--e-out); }

/* Feinkorn wie auf der Startseite — gibt dem Papier dieselbe Materialitaet. */
.grain {
  position: fixed; inset: 0; z-index: 900; pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Knoepfe -------------------------------------------------------------- */
.btn {
  --bg: transparent; --fg: var(--ink); --bd: currentColor;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 44px; padding: .7em 1.25em; border: 1px solid var(--bd); border-radius: 999px;
  background: var(--bg); color: var(--fg); font: 600 var(--t-sm)/1 var(--f); letter-spacing: .005em;
  text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate; white-space: nowrap;
  transition: color var(--d-mid) var(--e-out), border-color var(--d-mid) var(--e-out), transform var(--d-fast) var(--e-out);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--fill, var(--petrol)); transform: translateY(101%);
  transition: transform var(--d-mid) var(--e-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn:hover .ico { transform: rotate(45deg); }
.btn:active { transform: scale(.98); }
.btn--lg { min-height: 56px; padding: 1em 1.6em; font-size: var(--t-base); }
.btn--solid, .btn--primary { --bg: var(--ink); --fg: var(--paper); --bd: var(--ink); --fill: var(--petrol); }
.btn--solid:hover, .btn--primary:hover { --bd: var(--petrol); }
.btn--line, .btn--ghost { --fg: var(--ink); --bd: var(--rule); --fill: var(--ink); }
.btn--line:hover, .btn--ghost:hover { --fg: var(--paper); }
.btn--mint { --bg: var(--mint); --fg: var(--deep); --bd: var(--mint); --fill: var(--on-deep); }
.btn--line-light { --fg: var(--on-deep); --bd: rgba(238,243,239,.3); --fill: var(--on-deep); }
.btn--line-light:hover { --fg: var(--deep); }
/* btn--bare war der Textlink in den Produktzeilen — jetzt der Pfeil-Link. */
.btn--bare {
  border: 0; border-radius: 0; padding: .6em 0; min-height: 0; overflow: visible;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - .35em) / 0 1px no-repeat;
  color: var(--copper-ink); transition: background-size var(--d-mid) var(--e-out), color var(--d-mid) var(--e-out);
}
.btn--bare::before { display: none; }
.btn--bare:hover, .btn--bare:focus-visible { background-size: 100% 1px; color: var(--ink); }
.btn--bare::after { content: " ↗"; font-weight: 400; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45em; font-weight: 600; font-size: var(--t-sm);
  text-decoration: none; padding-block: .6em;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - .35em) / 0 1px no-repeat;
  transition: background-size var(--d-mid) var(--e-out);
}
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow:hover .ico { transform: rotate(45deg); }

/* --- Kopfzeile (identisch zur Startseite) -------------------------------- */
.hd {
  position: fixed; inset: 0 0 auto; z-index: 500; height: var(--hd-h);
  color: var(--ink); transition: color var(--d-mid) var(--e-out), transform var(--d-mid) var(--e-out);
}
.hd::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--rule); opacity: 0;
  transition: opacity var(--d-mid) var(--e-out), background-color var(--d-mid) var(--e-out);
}
.hd.is-scrolled::before { opacity: 1; }
.hd.is-dark { color: var(--on-deep); }
.hd.is-dark::before { background: color-mix(in srgb, var(--deep) 78%, transparent); border-color: rgba(238,243,239,.12); }
.hd__inner {
  height: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem;
}
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; font-weight: 600; letter-spacing: -.01em; }
.brand img { width: 34px; height: 34px; border-radius: 8px; }
.hd__chapter {
  justify-self: center; font-size: var(--t-sm); color: currentColor; opacity: .7;
  overflow: hidden; height: 1.4em; line-height: 1.4em; white-space: nowrap;
}
.nav ul { display: flex; align-items: center; gap: clamp(.9rem, 1.6vw, 1.9rem); }
.nav a:not(.btn) { text-decoration: none; font-size: var(--t-sm); font-weight: 500; position: relative; padding-block: .6em; }
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .25em; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform var(--d-mid) var(--e-out);
}
.nav a:not(.btn):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.hd.is-dark .btn--solid, .hd.is-dark .btn--primary { --bg: var(--on-deep); --fg: var(--deep); --bd: var(--on-deep); --fill: var(--mint); }
.lang { display: inline-flex; align-items: baseline; gap: .35rem; font-size: var(--t-sm); }
.lang__item[aria-current] { font-weight: 700; }
.lang__sep { opacity: .4; }
.nav-toggle {
  display: none; align-items: center; gap: .6rem; min-height: 44px; padding: 0 .2rem;
  background: none; border: 0; color: inherit; font: 600 var(--t-sm) var(--f); cursor: pointer;
}
.nav-toggle__bars, .nav-toggle__bars::before { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform var(--d-mid) var(--e-out); }
.nav-toggle__bars { position: relative; transform: translateY(-3px); }
.nav-toggle__bars::before { content: ""; position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { transform: translateY(0) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(-6px) rotate(-90deg); }

@media (max-width: 1060px) {
  .hd__chapter { display: none; }
  .hd__inner { grid-template-columns: 1fr auto; }
  .nav-toggle:not([hidden]) { display: inline-flex; }
  .nav-toggle:not([hidden]) + .nav {
    position: fixed; inset: 0; z-index: -1; display: grid; align-content: center;
    padding: calc(var(--hd-h) + 2rem) var(--gut) 3rem; background: var(--deep); color: var(--on-deep);
    clip-path: inset(0 0 100% 0); visibility: hidden;
    transition: clip-path var(--d-slow) var(--e-io), visibility 0s var(--d-slow);
  }
  .nav-toggle:not([hidden]) + .nav.is-open { clip-path: inset(0); visibility: visible; transition: clip-path var(--d-slow) var(--e-io); }
  .nav-toggle:not([hidden]) + .nav ul { flex-direction: column; align-items: flex-start; gap: .2rem; }
  .nav-toggle:not([hidden]) + .nav a:not(.btn) { font-size: clamp(1.8rem, 8vw, 3rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.15; }
  .nav-toggle:not([hidden]) + .nav .lang { margin: 1.5rem 0 1rem; font-size: 1.1rem; }
  .nav-toggle:not([hidden]) + .nav .btn--solid,
  .nav-toggle:not([hidden]) + .nav .btn--primary { --bg: var(--mint); --fg: var(--deep); --bd: var(--mint); min-height: 56px; font-size: 1rem; padding: 1em 1.6em; }
  .hd.nav-open { color: var(--on-deep); }
  .hd.nav-open::before { opacity: 0; }
  .nav-toggle[hidden] + .nav ul { flex-wrap: wrap; gap: .5rem 1rem; }
}

/* --- Seitenraster --------------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.section { padding: var(--sec) 0; }
.section--tight { padding: calc(var(--sec) * .65) 0; }
.section--tint { background: var(--paper-2); }
/* Erster Abschnitt liegt hinter der fixierten Kopfzeile — Luft dafuer. */
main > .section:first-child, main > .notfound:first-child { padding-top: calc(var(--hd-h) + clamp(2.5rem, 7vw, 6rem)); }

.display, .page-title {
  font-size: var(--t-d2); font-weight: 600; line-height: .99; letter-spacing: -.04em;
  text-wrap: balance;
}
/* Lange deutsche Woerter ("abhandengekommen") sprengen auf 393 px sonst die
   Zeile und damit die Seitenbreite. Trennung per Sprache, Notbremse per Umbruch. */
h1, h2, h3, .notfound__code { overflow-wrap: break-word; hyphens: auto; }

/* --- Seitenkopf ----------------------------------------------------------- */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: var(--t-sm); color: var(--ink-faint); margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.crumbs a { color: var(--copper-ink); text-decoration: none; font-weight: 600;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--d-mid) var(--e-out); }
.crumbs a:hover { background-size: 100% 1px; }
.crumbs span[aria-hidden] { opacity: .45; }

.head {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 1.5rem 5vw; align-items: end;
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem); margin-bottom: clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--rule);
}
.head__idx {
  grid-column: 1 / -1; font-size: var(--t-sm); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--copper-ink); margin-bottom: .4rem;
}
.head h1, .head h2 {
  font-size: var(--t-d1); font-weight: 600; line-height: .97; letter-spacing: -.042em;
  max-width: 20ch; text-wrap: balance;
}
.head h2 { font-size: clamp(2rem, 1.1rem + 2.8vw, 3.6rem); }
.head__aside { color: var(--ink-soft); font-size: var(--t-lg); line-height: 1.5; max-width: 42ch; }
.head__aside p + p { margin-top: .8rem; }
.lead { font-size: var(--t-lg); line-height: 1.5; color: var(--ink-soft); max-width: 48ch; }
.fineprint { font-size: var(--t-sm); color: var(--ink-faint); max-width: 62ch; }
.fineprint a, .lead a { color: var(--copper-ink); }
[data-theme="dark"] .fineprint { color: var(--on-deep-2); }
[data-theme="dark"] .fineprint a { color: var(--mint); }
@media (max-width: 860px) {
  .head { grid-template-columns: 1fr; align-items: start; }
  .head h1, .head h2 { max-width: 24ch; }
}

/* --- Fliesstext ----------------------------------------------------------- */
.prose { max-width: 62ch; }
/* Mehrere Seiten tragen beide Klassen an einem Element. Dann gewinnt die
   Lesebreite, aber der Satz bleibt an der linken Kante des Seitenrasters —
   sonst steht der Text mittig und der Seitenkopf darueber linksbuendig. */
.container.prose { max-width: calc(62ch + 2 * var(--gut)); margin-left: 0; margin-right: auto; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 {
  font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.4rem); font-weight: 600; letter-spacing: -.03em;
  line-height: 1.1; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.2rem;
  border-top: 1px solid var(--rule); max-width: 28ch; text-wrap: balance;
}
.prose h3 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; margin-top: 2rem; }
.prose h4 { font-size: var(--t-base); font-weight: 700; margin-top: 1.5rem; }
.prose p, .prose li { color: var(--ink-soft); }
.prose p strong, .prose li strong { color: var(--ink); }
.prose a { color: var(--copper-ink); font-weight: 500; }
.prose a:hover { color: var(--ink); }
.prose ul, .prose ol { display: grid; gap: .7rem; }
.prose ul > li { position: relative; padding-left: 1.5rem; }
.prose ul > li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--copper);
}
.prose ol { counter-reset: p; }
.prose ol > li { position: relative; padding-left: 2rem; counter-increment: p; }
.prose ol > li::before {
  content: counter(p, decimal-leading-zero); position: absolute; left: 0; top: 0;
  font-size: var(--t-sm); font-weight: 700; color: var(--copper-ink); font-variant-numeric: tabular-nums;
}
.prose table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.prose th, .prose td { text-align: left; padding: .8rem 1rem .8rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose th { font-weight: 700; color: var(--ink); }
.prose td { color: var(--ink-soft); }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

/* --- Produktzeilen (products) -------------------------------------------- */
.rows { display: grid; border-top: 1px solid var(--ink-faint); }
.row {
  display: grid; grid-template-columns: clamp(120px, 13vw, 190px) minmax(0, 1fr) auto;
  gap: 1.5rem clamp(1.5rem, 3vw, 3rem); align-items: center;
  padding: clamp(1.5rem, 3vw, 2.4rem) 0; border-bottom: 1px solid var(--rule);
  transition: background-color var(--d-mid) var(--e-out);
}
.row:hover { background: color-mix(in srgb, var(--paper-3) 55%, transparent); }
.row__fig { margin: 0; border-radius: 5px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(20,33,32,.09), 0 18px 36px -22px rgba(20,33,32,.4); }
.row__fig img { width: 100%; height: auto; }
.row__fig--type {
  display: grid; place-content: center; aspect-ratio: 636/900; background: var(--petrol); color: var(--paper);
  font-size: clamp(.9rem, 1.1vw, 1.1rem); font-weight: 600; line-height: 1.5; text-align: center; letter-spacing: -.01em;
}
.row__body { display: grid; gap: .55rem; align-content: center; }
.row__tag {
  justify-self: start; font-size: var(--t-sm); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--copper-ink);
}
.row__body h3 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.row__body p { color: var(--ink-soft); max-width: 56ch; }
.row__act { justify-self: end; }
@media (max-width: 760px) {
  .row { grid-template-columns: clamp(92px, 26vw, 140px) minmax(0, 1fr); gap: 1rem 1.2rem; align-items: start; }
  .row__act { grid-column: 2; justify-self: start; }
}

/* --- Kontaktkarten -------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(1.2rem, 2.5vw, 2rem); }
.contact-card {
  display: grid; gap: .9rem; align-content: start;
  padding: clamp(1.5rem, 3vw, 2.4rem); border-radius: 10px;
  background: var(--paper-2); border: 1px solid var(--rule);
}
.section--tint .contact-card { background: var(--paper); }
.contact-card h2 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.contact-card p { color: var(--ink-soft); }
.contact-card__mail { font-size: clamp(1.1rem, .9rem + .8vw, 1.6rem); font-weight: 600; letter-spacing: -.02em; word-break: break-word; }
.contact-card__mail a { color: var(--petrol); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: color var(--d-mid) var(--e-out); }
.contact-card__mail a:hover { color: var(--ink); }
.contact-card .btn-row { margin-top: .4rem; }

/* --- Frage und Antwort ---------------------------------------------------- */
.qa { display: grid; border-top: 1px solid var(--ink-faint); }
.qa > div, .qa__item { display: grid; gap: .5rem; padding: clamp(1.3rem, 2.6vw, 2.1rem) 0; border-bottom: 1px solid var(--rule); }
.qa h3 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; max-width: 34ch; }
.qa p { color: var(--ink-soft); max-width: 62ch; }
@media (min-width: 861px) {
  .qa > div, .qa__item { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1.5rem 4vw; align-items: start; }
}

/* --- 404 und Danke -------------------------------------------------------- */
.notfound { padding: calc(var(--hd-h) + clamp(3rem, 9vw, 7rem)) 0 var(--sec); }
.notfound .container { display: grid; gap: 1.2rem; justify-items: start; }
.notfound h1 { font-size: var(--t-d1); font-weight: 600; line-height: .96; letter-spacing: -.045em; max-width: 18ch; text-wrap: balance; }
.notfound__code {
  font-size: clamp(6rem, 24vw, 17rem); font-weight: 600; line-height: .8; letter-spacing: -.07em;
  color: transparent; -webkit-text-stroke: 1.5px var(--petrol); margin: 0 0 .2em;
  font-variant-numeric: tabular-nums;
}
.notfound .head__idx { margin: 0; }
.notfound .btn-row { margin-top: 1rem; }

/* --- Rechtstexte ---------------------------------------------------------- */
.legal-block {
  padding: clamp(1.3rem, 2.6vw, 2rem); border-radius: 10px;
  background: var(--paper-2); border: 1px solid var(--rule);
}
.legal-block > * + * { margin-top: .9rem; }
.legal-block h3 { margin-top: 1.6rem; font-size: var(--t-base); font-weight: 700; letter-spacing: 0; color: var(--ink); }
.legal-block > h3:first-child { margin-top: 0; }
.legal-block p, .legal-block li, .legal-block address { color: var(--ink-soft); }

/* --- Fusszeile (identisch zur Startseite) -------------------------------- */
.ft { background: var(--deep); color: var(--on-deep); padding: 0 var(--gut) 2rem; overflow: clip; }
.ft__inner { max-width: var(--maxw); margin: 0 auto; border-top: 1px solid rgba(238,243,239,.14); padding-top: clamp(3rem, 6vw, 5rem); }
.ft__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; }
.ft__about p { margin-top: 1rem; max-width: 34ch; color: var(--on-deep-2); }
.ft h2 { font-size: var(--t-sm); font-weight: 600; color: var(--mint); margin-bottom: 1rem; }
.ft ul { display: grid; gap: .2rem; }
.ft ul a { text-decoration: none; display: inline-block; padding: .35rem 0; color: var(--on-deep); }
.ft ul a:hover { color: var(--mint); text-decoration: underline; }
.ft__word {
  margin: clamp(3rem, 6vw, 5rem) 0 1.5rem; font-size: clamp(4.5rem, 21.5vw, 21rem); font-weight: 600;
  letter-spacing: -.065em; line-height: .78; color: var(--deep-2);
  -webkit-text-stroke: 1px rgba(127,201,196,.25); white-space: nowrap;
}
.ft__bottom { font-size: var(--t-sm); color: var(--on-deep-2); max-width: 90ch; }
@media (max-width: 760px) { .ft__grid { grid-template-columns: 1fr; } }

/* --- Bewegung: dosiert, Ausgangszustaende nur mit html.motion ------------- */
.motion .split-line { overflow: clip; padding-bottom: .06em; margin-bottom: -.06em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
  .grain { display: none; }
}

/* --- Inhaltsverzeichnis der Rechtstexte ---------------------------------- */
.toc { padding: clamp(1.1rem, 2.2vw, 1.6rem) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.prose .toc__title { margin-top: 0; padding-top: 0; border-top: 0; max-width: none; font-size: var(--t-sm); font-weight: 700; letter-spacing: 0; color: var(--ink); }
.prose .toc ol { margin-top: .8rem; gap: .35rem; columns: 2 18rem; column-gap: 2.5rem; display: block; }
.prose .toc ol > li { break-inside: avoid; margin-bottom: .35rem; }
.prose .toc a { text-decoration: none; }
.prose .toc a:hover { text-decoration: underline; text-underline-offset: .2em; }
.prose h3[id] { scroll-margin-top: calc(var(--hd-h, 72px) + 1.5rem); }

/* ==========================================================================
   Runde 4 (02.11.2026) — Design-Stapel: gleiche Regeln wie die Startseite.
   ========================================================================== */
:root { --d-ui: .26s; --e-ui: cubic-bezier(.23, 1, .32, 1); }

/* Bedienelemente reagieren unter 300 ms. */
.btn { transition: color var(--d-ui) var(--e-ui), border-color var(--d-ui) var(--e-ui), transform .16s var(--e-ui); }
.btn::before { transition: transform .32s var(--e-ui); }
.ico { transition: transform var(--d-ui) var(--e-ui); }
.nav a:not(.btn)::after { transition: transform var(--d-ui) var(--e-ui); }
.hd { transition: color var(--d-ui) var(--e-ui), transform .4s var(--e-ui); }
.row { transition: background-color var(--d-ui) var(--e-ui); }

/* Hover-Effekte nur mit echtem Mauszeiger. */
@media (hover: none), (pointer: coarse) {
  .btn:hover::before { transform: translateY(101%); }
  .btn:hover .ico { transform: none; }
  .btn--line:hover, .btn--ghost:hover { --fg: var(--ink); }
  .row:hover { background: transparent; }
}

/* Keine gesperrten Mini-Versalien ueber Ueberschriften und an Produktzeilen. */
.head__idx, .row__tag {
  text-transform: none; letter-spacing: 0; font-weight: 600; font-size: var(--t-base);
}

/* Seitenkopf: Ueberschrift hoechstens drei Zeilen, Begleittext steht auf
   ihrer Hoehe statt unten in einer leeren Haelfte. */
.head { align-items: center; }
.head h1 { font-size: clamp(2.6rem, 1.3rem + 4vw, 5.6rem); line-height: .98; max-width: 16ch; }
@media (max-width: 860px) { .head h1 { font-size: clamp(2.4rem, 10.5vw, 3.4rem); } }