/* Atelier Tamsel. Seitenstil. Die Engine (scrollcraft.css) bleibt unberührt,
   hier stehen nur Tokens und die eigenen Klassen. Radius-System: alles 4px,
   die Lupe ist rund, weil sie eine Lupe ist. */

:root {
  --sc-canvas: #120B08;
  --sc-surface: #1C120D;
  --sc-ink: #F2E7DD;
  --sc-ink-soft: #BFAB9B;
  --sc-accent: #8CC6D8;
  --sc-accent-ink: #0E0907;
  --sc-font-display: "Sofia Sans Condensed", system-ui, sans-serif;
  --sc-font-text: "Reddit Sans", system-ui, sans-serif;
  --sc-font-mono: "Reddit Sans", system-ui, sans-serif;
  --sc-shadow-color: 18 50% 3%;
  --sc-r-sm: 4px;
  --r: 4px;
  --kakao: #3A2218;
  --kopf-h: 64px;
  --reif-global: 0;
}

body { letter-spacing: 0.002em; line-height: 1.66; }
.sc-display { font-weight: 700; line-height: 0.98; letter-spacing: -0.012em; }
.sc-display--xl { font-size: clamp(3.4rem, 2rem + 6.4vw, 8.2rem); }
.sc-display--lg { font-size: clamp(2.6rem, 1.7rem + 3.9vw, 5.4rem); }
.sc-display--md { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.6rem); }
.sc-body { color: var(--sc-ink-soft); font-weight: 400; }
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }

/* ---------- Kopf mit Kurvenblatt ---------- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--kopf-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  padding: 0 var(--sc-gutter);
  background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 92%, transparent) 30%, transparent);
}
.wortmarke {
  font-family: var(--sc-font-display); font-weight: 800; font-size: 1.75rem; line-height: 1;
  text-decoration: none; color: var(--sc-ink); letter-spacing: -0.01em; justify-self: start;
}
.wortmarke small {
  font-family: var(--sc-font-text); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sc-ink-soft); margin-right: 0.3rem; vertical-align: 0.35em;
}
.blatt { position: relative; width: clamp(150px, 26vw, 320px); height: 44px; }
.blatt__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.blatt__raster { stroke: color-mix(in oklab, var(--sc-accent) 14%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.blatt__soll { fill: none; stroke: color-mix(in oklab, var(--sc-ink) 30%, transparent); stroke-width: 1.4; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.blatt__ist { fill: none; stroke: var(--sc-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.blatt__punkte { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.blatt__punkte li { position: absolute; left: 0; top: 0; translate: -50% -50%; }
.blatt__punkte a {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  text-decoration: none; position: relative;
}
.blatt__punkte a::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--sc-canvas); border: 1.5px solid color-mix(in oklab, var(--sc-ink) 55%, transparent);
  transition: background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out), scale 160ms var(--sc-ease-out);
}
.blatt__punkte a.ist-hier::before, .blatt__punkte a.ist-durch::before { border-color: var(--sc-accent); }
.blatt__punkte a.ist-durch::before { background: var(--sc-accent); }
.blatt__punkte span {
  position: absolute; top: 100%; left: 50%; translate: -50% 0;
  white-space: nowrap; font-size: 0.78rem; font-weight: 500; color: var(--sc-ink);
  background: var(--sc-surface); padding: 0.2rem 0.5rem; border-radius: var(--r);
  box-shadow: var(--sc-e2), var(--sc-edge);
  opacity: 0; pointer-events: none; transition: opacity 160ms var(--sc-ease-out);
}
.blatt__punkte a:focus-visible span { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .blatt__punkte a:hover span { opacity: 1; }
  .blatt__punkte a:hover::before { scale: 1.35; }
}
.blatt__stift {
  position: absolute; left: 0; top: 0; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
  background: var(--sc-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-accent) 22%, transparent);
  pointer-events: none; will-change: transform;
}
.ist-bereift .blatt__stift { background: #B9B0A8; box-shadow: 0 0 0 3px rgb(185 176 168 / 0.22); }
.temp {
  justify-self: end; margin: 0; display: flex; align-items: baseline; gap: 0.2rem;
  font-family: var(--sc-font-display); font-weight: 700; font-size: 1.6rem; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--sc-ink);
}
.temp span { font-size: 0.95rem; color: var(--sc-ink-soft); }
.temp__reif {
  font-family: var(--sc-font-text); font-style: normal; font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: #CFC6BE; margin-left: 0.5rem;
  padding: 0.18rem 0.45rem; border: 1px solid rgb(207 198 190 / 0.4); border-radius: var(--r);
}

/* ---------- Tafel (Bild + Reif + Glanz) ---------- */
.tafel { position: relative; }
.tafel img { width: 100%; height: auto; }
.tafel__reif, .tafel__glanz {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url(assets/tafel.webp) center / 100% 100% no-repeat;
          mask: url(assets/tafel.webp) center / 100% 100% no-repeat;
}
.tafel__reif { background: var(--reif-bild, none) center / 100% 100% no-repeat; opacity: var(--reif, 0); }
.tafel--matt { --reif: 0.58; }
.tafel--matt img { filter: saturate(0.5) brightness(0.78) contrast(0.78); }
.tafel--frisch { --reif: var(--reif-global); }
.tafel--frisch img { filter: saturate(calc(1 - var(--reif-global) * 0.5)) brightness(calc(1 - var(--reif-global) * 0.18)); }
.tafel__glanz {
  background: linear-gradient(104deg, transparent 38%, rgb(196 228 240 / 0.34) 47%, rgb(196 228 240 / 0.08) 52%, transparent 60%) 0 0 / 260% 100% no-repeat;
  background-position: calc(var(--glanz-x, 0.5) * 100%) 0;
  mix-blend-mode: screen; opacity: calc((1 - var(--reif-global)) * 0.9);
}

/* ---------- Bühnen allgemein ---------- */
.buehne { background: transparent; }
.marmor { position: absolute; inset: -12% 0; pointer-events: none; }
.marmor::before {
  content: ""; position: absolute; inset: 0;
  background: url(assets/marmor.webp) center / cover no-repeat;
  transform: scaleX(-1); opacity: 0.5;
  -webkit-mask-image: radial-gradient(85% 75% at 70% 50%, #000 30%, transparent 85%);
          mask-image: radial-gradient(85% 75% at 70% 50%, #000 30%, transparent 85%);
}

/* ---------- Lupe ---------- */
.lupe { margin: 0; position: absolute; }
.lupe canvas {
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #23150F, #0D0806 72%);
  box-shadow: var(--sc-e3), inset 0 0 0 1px color-mix(in oklab, var(--sc-accent) 38%, transparent),
              0 0 0 8px color-mix(in oklab, var(--sc-canvas) 70%, transparent),
              0 0 0 9px color-mix(in oklab, var(--sc-ink) 14%, transparent);
}
.lupe figcaption { margin-top: 1.1rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); text-align: center; }

/* ---------- 1 Matt ---------- */
.matt__tafel { position: absolute; right: -15vw; top: 12vh; width: min(64vw, 1020px); }
.matt__tafel .tafel { transform: rotate(-7deg); filter: drop-shadow(0 30px 40px rgb(5 2 1 / 0.6)); }
.lupe--matt { right: 9vw; top: 30vh; width: clamp(200px, 25vw, 380px); }
.matt__scrim { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 62% at 0% 100%, color-mix(in oklab, var(--sc-canvas) 92%, transparent) 30%, color-mix(in oklab, var(--sc-canvas) 55%, transparent) 62%, transparent 85%); }
.matt__text { position: absolute; left: var(--sc-gutter); bottom: clamp(3rem, 11vh, 8rem); max-width: min(44rem, 46vw); z-index: var(--sc-z-copy); }
.matt__text .sc-body { margin-top: 1.4rem; max-width: 34ch; font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink); }

/* ---------- 2 Sechs Formen ---------- */
.formen { padding-block: clamp(5rem, 10vw, 10rem) clamp(4rem, 8vw, 8rem); }
.formen__raster { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.formen__kopf { position: sticky; top: calc(var(--kopf-h) + 3rem); }
.formen__kopf .sc-body { font-size: var(--sc-t-lg); line-height: 1.55; }
.formen__liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sc-hairline); }
.formen__liste li {
  display: grid; grid-template-columns: 72px 7rem 1fr; grid-template-areas: "bild name temp" "bild notiz notiz";
  column-gap: 1.2rem; row-gap: 0.15rem; align-items: center;
  padding: 1.15rem 0.9rem; border-bottom: 1px solid var(--sc-hairline); position: relative;
}
.formen__liste svg { grid-area: bild; width: 72px; height: 48px; stroke: color-mix(in oklab, var(--sc-ink) 60%, transparent); stroke-width: 2.2; stroke-linecap: round; fill: none; }
.formen__liste b { grid-area: name; font-family: var(--sc-font-display); font-weight: 700; font-size: 1.6rem; line-height: 1; }
.formen__liste span { grid-area: temp; font-variant-numeric: tabular-nums; color: var(--sc-ink); font-size: var(--sc-t-sm); }
.formen__liste em { grid-area: notiz; font-style: normal; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.formen__liste .ist-v {
  background:
    radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--sc-accent) 16%, transparent) 1px, transparent 1.4px) 0 0 / 12px 12px,
    color-mix(in oklab, var(--sc-accent) 7%, var(--sc-canvas));
  border-radius: var(--r);
}
.formen__liste .ist-v svg { stroke: var(--sc-accent); }
.formen__liste .ist-v b { color: var(--sc-accent); }
.formen__liste .ist-v em { color: var(--sc-ink); }

/* ---------- 3 Die Kurve ---------- */
.lupe--kurve { left: max(var(--sc-gutter), 5vw); top: 50%; translate: 0 -46%; width: min(68svh, 42vw); }
.kurve__karte { position: absolute; right: var(--sc-gutter); top: calc(var(--kopf-h) + 4vh); width: min(560px, 44vw); }
.kurve__grad { margin: 0 0 0.4rem; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(3rem, 2rem + 3vw, 5.4rem); line-height: 0.9; font-variant-numeric: tabular-nums; color: var(--sc-ink); }
.kurve__svg { width: 100%; height: auto; overflow: visible; }
.kurve__achsen path { fill: none; stroke: color-mix(in oklab, var(--sc-ink) 26%, transparent); stroke-width: 1; }
.kurve__achsen text { fill: var(--sc-ink-soft); font: 500 13px var(--sc-font-text); font-variant-numeric: tabular-nums; }
.kurve__ziel { stroke: color-mix(in oklab, var(--sc-accent) 40%, transparent); stroke-dasharray: 4 5; stroke-width: 1; fill: none; }
.kurve__soll { fill: none; stroke: color-mix(in oklab, var(--sc-ink) 26%, transparent); stroke-width: 1.5; stroke-dasharray: 3 4; }
.kurve__ist { fill: none; stroke: var(--sc-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.kurve__punkt { fill: var(--sc-accent); stroke: var(--sc-canvas); stroke-width: 3; }
.kurve__text { position: absolute; right: var(--sc-gutter); bottom: clamp(2.5rem, 9vh, 6rem); width: min(520px, 44vw); height: 15rem; }
.kurve__text > div { position: absolute; left: 0; right: 0; bottom: 0; }
.kurve__text .sc-body { margin-top: 0.9rem; }

/* ---------- 4 Glanz ---------- */
.glanz { padding-block: clamp(4rem, 9vw, 9rem); }
.glanz__raster { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.glanz__bild { position: relative; aspect-ratio: 1700 / 740; }
.glanz__bild > .tafel, .glanz__wisch { position: absolute; inset: 0; }
.glanz__bild .tafel { filter: drop-shadow(0 26px 36px rgb(5 2 1 / 0.55)); }
.reif-hinweis {
  margin-top: 1.6rem; padding: 1rem 1.1rem; border-radius: var(--r); color: var(--sc-ink); font-size: var(--sc-t-sm);
  background:
    radial-gradient(circle at 1px 1px, rgb(207 198 190 / 0.12) 1px, transparent 1.4px) 0 0 / 10px 10px,
    #221813;
  box-shadow: var(--sc-e1), var(--sc-edge);
}
.reif-hinweis a { color: var(--sc-accent); font-weight: 600; }

/* ---------- 5 Knack ---------- */
.knack__grund { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 42%, #24160F, transparent 70%); }
.bruch {
  --wx: 0px; --wy: 0px;
  position: absolute; left: 50%; top: 50%; width: min(68vw, 940px); aspect-ratio: 1700 / 740;
  transform: translate(calc(-50% + var(--wx)), calc(-50% + var(--wy)));
  perspective: 1500px; z-index: 2;
}
.haelfte { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 50%; will-change: transform; }
.haelfte__flaeche { position: absolute; inset: 0; }
.haelfte__flaeche .tafel { filter: drop-shadow(0 22px 30px rgb(5 2 1 / 0.55)); }
.haelfte__kante {
  position: absolute; top: 2.5%; height: 95%; width: 4.6%;
  background: url(assets/bruchflaeche.webp) center / cover no-repeat;
}
.haelfte--l .haelfte__kante { left: 50%; transform-origin: 0 50%; transform: rotateY(90deg); }
.haelfte--r .haelfte__kante { left: 45.4%; transform-origin: 100% 50%; transform: rotateY(-90deg); }
.ist-bereift .haelfte__kante { filter: grayscale(0.7) brightness(1.25) contrast(0.7); }
.riss { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.riss path { fill: none; stroke: rgb(214 236 244 / 0.85); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.knack__wort {
  position: absolute; left: 50%; bottom: 100%; margin: 0; translate: -50% 0; padding-bottom: 0.06em;
  font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(3.4rem, 1.8rem + 6vw, 8rem); line-height: 0.9;
  letter-spacing: -0.02em; color: var(--sc-ink); opacity: 0; pointer-events: none; white-space: nowrap;
}
[data-wort-reif], [data-reif] { display: none; }
.ist-bereift [data-wort-reif], .ist-bereift [data-reif] { display: inline; }
.ist-bereift h2[data-reif] { display: block; }
.ist-bereift [data-wort-glatt], .ist-bereift [data-glatt] { display: none; }
.ist-bereift [data-wort-reif] { color: #CFC6BE; font-weight: 600; }
.splitter { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.knack__nah { position: absolute; right: var(--sc-gutter); bottom: clamp(2.5rem, 9vh, 6rem); width: min(320px, 24vw); margin: 0; z-index: 4; }
.knack__nah img { width: 100%; height: auto; border-radius: var(--r); box-shadow: var(--sc-e3), var(--sc-edge); }
.knack__nah figcaption { margin-top: 0.6rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.ist-bereift .knack__nah { visibility: hidden; }
.knack__text { position: absolute; left: var(--sc-gutter); bottom: clamp(2.5rem, 9vh, 6rem); width: min(560px, 46vw); height: 13rem; z-index: 4; }
.knack__text > div { position: absolute; left: 0; right: 0; bottom: 0; }
.knack__text .sc-body { margin-top: 0.9rem; }
.knack__satz { font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink) !important; }

/* ---------- 6 Atelier ---------- */
.atelier { padding-block: clamp(4rem, 9vw, 10rem); }
.atelier__raster { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(2rem, 6vw, 7rem); align-items: center; }
.atelier__bild { margin: 0; }
.atelier__bild img { width: 100%; height: auto; border-radius: var(--r); box-shadow: var(--sc-e3), var(--sc-edge); }
.atelier__text .sc-stack { margin-top: 2rem; }
.angebot { margin: 2rem 0 0; border-top: 1px solid var(--sc-hairline); }
.angebot div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--sc-hairline); }
.angebot dt { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.2; }
.angebot dd { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.6; }

/* ---------- 7 Deine Tafel ---------- */
.marmor--still { inset: 0; }
.marmor--still::before { opacity: 0.36; transform: none; -webkit-mask-image: radial-gradient(70% 70% at 30% 50%, #000 20%, transparent 80%); mask-image: radial-gradient(70% 70% at 30% 50%, #000 20%, transparent 80%); }
.rueckseite { position: absolute; left: max(var(--sc-gutter), 5vw); top: 50%; width: min(48vw, 680px); translate: 0 -54%; rotate: -3deg; }
.rueckseite__svg { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgb(5 2 1 / 0.65)); overflow: visible; }
.rs__rand { fill: none; stroke: rgb(10 5 3 / 0.55); stroke-width: 2; }
.rs__praegung { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rs__praegung--tief { stroke: #0B0604; stroke-width: 4.2; transform: translate(1.2px, 1.6px); }
.rs__praegung--hoch { stroke: rgb(255 214 190 / 0.22); stroke-width: 3.4; transform: translate(-0.8px, -1px); }
.rs__praegung--mitte { stroke: #2C1912; stroke-width: 3.2; }
.rs__marke, .rs__datum { font-family: var(--sc-font-display); font-weight: 800; }
.rs__marke { font-size: 30px; }
.rs__datum { font-size: 15px; font-weight: 700; font-family: var(--sc-font-text); }
.rs__marke--tief, .rs__datum--tief { fill: #0B0604; transform: translate(1px, 1.3px); }
.rs__marke--hoch, .rs__datum--hoch { fill: #2E1B13; stroke: rgb(255 214 190 / 0.14); stroke-width: 0.6; }
.rueckseite__reif {
  position: absolute; inset: 1%; border-radius: 6px; pointer-events: none;
  background: var(--reif-bild, none) center / 100% 100%; opacity: var(--reif-global);
}
.tafel__text { position: absolute; right: var(--sc-gutter); top: 50%; translate: 0 -56%; width: min(30rem, 38vw); z-index: var(--sc-z-copy); }
.tafel__mehr { margin-top: 1.4rem; }
.tafel__mehr .sc-body + .sc-body { margin-top: 0.8rem; }
[data-kurve-bericht] { color: var(--sc-ink); }
.knopf {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: 1.8rem; display: inline-flex; align-items: center; gap: 0.6rem;
  font: 600 1rem/1 var(--sc-font-text); color: var(--sc-accent-ink); background: var(--sc-accent);
  border: 0; border-radius: var(--r); padding: 1rem 1.5rem; cursor: pointer;
  box-shadow: var(--sc-e2), inset 0 1px 0 rgb(255 255 255 / 0.35);
  transition: translate 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.knopf::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgb(14 9 7 / 0.07) 0 1px, transparent 1px 6px),
              repeating-linear-gradient(0deg, rgb(14 9 7 / 0.07) 0 1px, transparent 1px 6px);
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 50%, transparent 70%);
          mask-image: linear-gradient(100deg, transparent 30%, #000 50%, transparent 70%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  animation: fegen 4.6s var(--sc-ease-in-out) infinite;
}
@keyframes fegen { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
.knopf:active { translate: 0 1px; }
@media (hover: hover) and (pointer: fine) { .knopf:hover { box-shadow: var(--sc-e3), inset 0 1px 0 rgb(255 255 255 / 0.35); } }
.knopf.ist-vorgemerkt { background: color-mix(in oklab, var(--sc-accent) 55%, var(--sc-surface)); }
.tafel__hinweis { margin: 0.9rem 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.fuss {
  position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); bottom: 1.1rem; z-index: var(--sc-z-copy);
  display: flex; gap: 1.2rem; align-items: baseline; font-size: 0.82rem; color: var(--sc-ink-soft);
}
.fuss__marke { font-family: var(--sc-font-display); font-weight: 800; font-size: 1.15rem; color: var(--sc-ink); }

/* ---------- Tablet / Handy ---------- */
@media (max-width: 860px) {
  .formen__raster, .glanz__raster, .atelier__raster { grid-template-columns: 1fr; }
  .formen__kopf { position: static; }
  .matt__tafel { right: -24vw; top: 14svh; width: 120vw; }
  .lupe--matt { right: 7vw; top: 30svh; width: min(52vw, 260px); }
  .lupe--matt figcaption { display: none; }
  .matt__text { max-width: none; right: var(--sc-gutter); bottom: clamp(2rem, 7svh, 4rem); }

  .buehne--kurve { --lupe: min(40svh, 62vw); }
  .lupe--kurve { left: var(--sc-gutter); top: calc(var(--kopf-h) + 1svh); translate: none; width: var(--lupe); }
  .lupe--kurve figcaption { text-align: left; margin-top: 0.6rem; font-size: 0.8rem; }
  .kurve__karte { left: var(--sc-gutter); right: var(--sc-gutter); top: calc(var(--kopf-h) + 2svh); width: auto; }
  .kurve__grad { font-size: clamp(2rem, 9vw, 3rem); text-align: right; }
  .kurve__svg { margin-top: calc(var(--lupe) - 1.2rem); }
  .kurve__achsen text { font-size: 22px; }
  .kurve__achsen text:last-child { display: none; }
  .kurve__ist { stroke-width: 4; }
  .kurve__text { left: var(--sc-gutter); width: auto; bottom: clamp(1.5rem, 5svh, 3rem); height: 12rem; }

  .bruch { width: 92vw; top: 38%; }
  .knack__text { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; bottom: clamp(1.5rem, 5svh, 3rem); height: 11rem; }
  .knack__nah { top: calc(var(--kopf-h) + 1rem); bottom: auto; width: 34vw; }
  .knack__nah figcaption { font-size: 0.72rem; }

  .rueckseite { left: 50%; top: calc(var(--kopf-h) + 2svh); translate: -50% 0; width: 86vw; rotate: -2deg; }
  .tafel__text { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; top: auto; bottom: 4.2rem; translate: none; }
  .fuss { flex-direction: column; gap: 0.1rem; font-size: 0.72rem; bottom: 0.7rem; line-height: 1.35; }
  .fuss__marke { display: none; }
}
@media (max-width: 600px) {
  :root { --kopf-h: 56px; }
  .kopf { gap: 0.6rem; }
  .wortmarke { font-size: 1.45rem; }
  .wortmarke small { display: none; }
  .temp { font-size: 1.3rem; }
  .temp__reif { display: none; }
  .blatt { width: 46vw; }
  .sc-display--xl { font-size: clamp(2.9rem, 13vw, 3.6rem); }
  .sc-display--lg { font-size: clamp(2.3rem, 10vw, 3rem); }
  .sc-display--md { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .matt__text .sc-body { font-size: var(--sc-t-base); }
  .formen__liste li { grid-template-columns: 56px 5.6rem 1fr; column-gap: 0.8rem; padding: 0.95rem 0.6rem; }
  .formen__liste svg { width: 56px; height: 38px; }
  .angebot div { grid-template-columns: 1fr; gap: 0.2rem; }
  .tafel__mehr .sc-body { font-size: 0.95rem; line-height: 1.5; }
  .tafel__mehr { margin-top: 0.8rem; }
  .knopf { margin-top: 1rem; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .knack__nah { display: none; }
  .tafel__mehr .sc-body:nth-of-type(2) { display: none; }
  .buehne--kurve { --lupe: min(38svh, 58vw); }
  .kurve__svg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .knopf::after { animation: none; }
  .blatt__punkte a::before, .knopf { transition: none; }
}