/* Halvard Abyss 300. Seitenstil. Die Engine-Klassen (.sc-*, [data-sc-*]) bleiben
   unangetastet; hier stehen Marke, Wasser, Uhr und die eigenen Bühnen. */
:root {
  --sc-canvas:     #03070A;
  --sc-surface:    #0A161C;
  --sc-ink:        #EAF4F3;
  --sc-ink-soft:   #B2CCCF;
  --sc-accent:     #8EF0B8;
  --sc-accent-ink: #04140C;
  --sc-font-display: "Saira", system-ui, sans-serif;
  --sc-font-text:    "IBM Plex Sans", system-ui, sans-serif;
  --sc-font-mono:    "Saira", system-ui, sans-serif;
  --sc-shadow-color: 200 60% 2%;
  --sc-r-sm: 4px;
  --wasser: #0B5A6E;     /* setzt abstieg.js aus der Tiefe */
  --kopf-h: 76px;
  color-scheme: dark;
}
html { background: var(--sc-canvas); scrollbar-color: #2C4A52 var(--sc-canvas); }
body { font-family: var(--sc-font-text); background: transparent; color: var(--sc-ink); }
main { position: relative; z-index: 2; }
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 4px; }
input, select { caret-color: var(--sc-accent); }

/* Anzeige-Schrift: Saira schmal und kräftig. Heller Text auf dunkel bekommt
   eine Stufe mehr Gewicht und etwas mehr Laufweite. */
.sc-display {
  font-family: var(--sc-font-display);
  font-variation-settings: "wdth" 74;
  font-weight: 640;
  letter-spacing: -0.008em;
  line-height: 1.02;
  text-transform: none;
}
.sc-display--xl { font-size: clamp(3rem, 1.6rem + 5.6vw, 7.2rem); line-height: .98; }
.sc-display--lg { font-size: clamp(2.1rem, 1.3rem + 3vw, 4.2rem); }
.sc-body { color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.62; letter-spacing: .006em; }
.sc-lede { font-family: var(--sc-font-display); font-variation-settings: "wdth" 80; font-weight: 560; font-size: var(--sc-t-xl); line-height: 1.2; }
@media (max-width: 700px) {
  .sc-display--xl { font-size: clamp(2.5rem, 1.4rem + 7vw, 3.6rem); }
  .sc-display--lg { font-size: clamp(1.9rem, 1.2rem + 3.6vw, 2.6rem); }
  .sc-body { font-size: 1.04rem; }
}

/* ---------- Das Wasser ---------- */
.wasser {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--wasser);
}
.wasser::after { /* nach unten dunkler, wie echtes Wasser */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 20%, rgb(1 6 10 / .38));
}
.wasser__platte {
  position: absolute; inset: 0; opacity: var(--platte, 0);
  background: url("assets/platte40.webp") center top / cover no-repeat;
}
.wasser__strahlen { /* Sonnenstrahlen von oben, verschwinden mit der Tiefe */
  position: absolute; inset: -10% -20% 30% -20%; opacity: var(--strahlen, 0);
  background:
    repeating-conic-gradient(from 168deg at 52% -18%, rgb(190 240 245 / .00) 0deg 2.2deg, rgb(190 240 245 / .10) 3deg 4.4deg, rgb(190 240 245 / 0) 5.4deg 8deg);
  mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / .5) 45%, transparent 85%);
  animation: strahlen 14s var(--sc-ease-in-out) infinite alternate;
}
@keyframes strahlen { to { transform: translateX(3%) rotate(1.2deg); } }
.teilchen { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.sc-grain { z-index: 3; }

/* ---------- Kopf: Wortmarke, Tauchcomputer, Tiefenskala ---------- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  padding: 12px var(--sc-gutter) 0;
  background: linear-gradient(rgb(2 8 12 / .72), rgb(2 8 12 / .28) 75%, transparent);
}
.kopf__zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.wortmarke {
  font: 700 19px/1 var(--sc-font-display); font-variation-settings: "wdth" 118;
  letter-spacing: .28em; color: var(--sc-ink); text-decoration: none;
}
.computer {
  margin: 0; display: flex; align-items: baseline; gap: 18px;
  font: 500 13px/1 var(--sc-font-display); font-variation-settings: "wdth" 90;
  letter-spacing: .04em; color: var(--sc-ink-soft); font-variant-numeric: tabular-nums;
}
.computer__tiefe { color: var(--sc-ink); font-size: 14px; }
.computer__tiefe b { font-size: 24px; font-weight: 650; color: var(--sc-accent); display: inline-block; min-width: 3ch; text-align: right; }
.skala { position: relative; margin-top: 10px; height: 34px; }
.skala__linie {
  position: absolute; left: 0; right: 0; top: 6px; height: 8px;
  background:
    repeating-linear-gradient(90deg, rgb(234 244 243 / .34) 0 1px, transparent 1px 2%) 0 100% / 100% 4px no-repeat,
    linear-gradient(rgb(234 244 243 / .34), rgb(234 244 243 / .34)) 0 100% / 100% 1px no-repeat;
}
.skala__welle { /* das linke Ende: die Wasseroberfläche */
  position: absolute; left: -2px; top: -6px; width: 26px; height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10'%3E%3Cpath d='M1 6 Q4.5 1 8 6 T15 6 T22 6' fill='none' stroke='%23B2CCCF' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat;
}
.skala__marke {
  position: absolute; top: -2px; left: 0; width: 3px; height: 14px; border-radius: 1px;
  background: var(--sc-accent); translate: calc(var(--tiefe-pos, 0) * (100vw - 2 * var(--sc-gutter)) - 1px) 0;
}
.skala__stopps { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.skala__stopps li { position: absolute; top: 0; left: calc(var(--pos) * 100%); }
.skala__stopps a {
  position: absolute; top: 0; left: 0; translate: -50% 0; display: block;
  padding: 14px 6px 2px; min-width: 28px; text-align: center; text-decoration: none;
  font: 500 12px/1 var(--sc-font-text); letter-spacing: .02em; color: var(--sc-ink-soft); white-space: nowrap;
  transition: color 160ms var(--sc-ease-out);
}
.skala__stopps li:first-child a { translate: 0 0; text-align: left; padding-left: 0; }
.skala__stopps li:last-child a { translate: -100% 0; text-align: right; padding-right: 0; }
.skala__stopps a::before { /* Strich auf der Skala für jeden Stopp */
  content: ""; position: absolute; top: 4px; left: 50%; width: 1px; height: 8px; background: var(--sc-ink-soft);
}
.skala__stopps li:first-child a::before { left: 0; }
.skala__stopps li:last-child a::before { left: auto; right: 0; }
.skala__stopps a.ist-hier { color: var(--sc-ink); }
@media (hover: hover) and (pointer: fine) { .skala__stopps a:hover { color: var(--sc-accent); } }

.stopp {
  position: absolute; left: 50%; top: calc(100% + 10px); translate: -50% 0;
  width: max-content; max-width: calc(100vw - 2 * var(--sc-gutter));
  margin: 0; padding: 10px 14px; border-radius: 4px;
  background: rgb(3 12 16 / .9); border: 1px solid rgb(142 240 184 / .45);
  font-size: var(--sc-t-sm); line-height: 1.45; color: var(--sc-ink);
}
.stopp b { color: var(--sc-accent); font-weight: 600; }
.stopp span { font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
  .computer { gap: 10px; font-size: 12px; }
  .computer__zeit { display: none; }
  .computer__tiefe b { font-size: 20px; }
  .wortmarke { font-size: 16px; letter-spacing: .22em; }
  .skala__stopps a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .skala__stopps a { padding: 12px 0 0; min-width: 32px; height: 30px; }
  .skala__stopps li:first-child a::before, .skala__stopps li:last-child a::before { left: 50%; right: auto; }
  .skala__stopps li:first-child a { translate: -50% 0; }
  .skala__stopps li:last-child a { translate: -50% 0; }
  .skala__stopps li:first-child a { left: 6px; }
  .skala__stopps li:last-child a { left: -6px; }
}

/* ---------- Knopf ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 24px; border-radius: 4px;
  font: 600 1rem/1 var(--sc-font-text); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  color: var(--sc-ink); border: 1.5px solid rgb(234 244 243 / .6);
  background: rgb(3 12 16 / .35);
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out);
}
.knopf:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { border-color: var(--sc-accent); background: rgb(142 240 184 / .12); }
}
.knopf--voll {
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--sc-accent-ink); background: var(--sc-accent); border-color: var(--sc-accent);
}
.knopf--voll::before { /* feines Mosaik, ein Lichtstreif läuft darüber */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .42) 50%, transparent 65%) -200% 0 / 200% 100% no-repeat,
    repeating-linear-gradient(90deg, rgb(0 30 20 / .08) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg, rgb(0 30 20 / .08) 0 1px, transparent 1px 6px);
  animation: streif 4.8s var(--sc-ease-in-out) infinite;
}
@keyframes streif { 0%, 55% { background-position: -200% 0, 0 0, 0 0; } 100% { background-position: 200% 0, 0 0, 0 0; } }
@media (hover: hover) and (pointer: fine) { .knopf--voll:hover { background: #A6F5C8; } }

/* ---------- Hero ---------- */
.held { max-width: min(46rem, 52vw); }
.held h1 { max-width: 11ch; text-shadow: 0 1px 3px rgb(2 20 28 / .45), 0 2px 26px rgb(2 20 28 / .8); }
.held__sub { margin-top: var(--sc-5); max-width: 38ch; color: var(--sc-ink); }
.held .knopf { margin-top: var(--sc-6); }
#oberflaeche .sc-scrim--lead {
  background: radial-gradient(48% 46% at 18% 58%, rgb(2 22 32 / .5), transparent 72%), linear-gradient(to top right,
    rgb(2 22 32 / .95) 0%, rgb(2 22 32 / .86) 34%, rgb(2 22 32 / .5) 56%, transparent 78%);
}
.sinkend { /* die Uhr sinkt neben der Kamera mit */
  position: absolute; z-index: 2; right: 7vw; top: 50%;
  width: min(30vw, 46vh); aspect-ratio: 420 / 520;
  translate: 0 calc(-62% + var(--sc-p, 0) * 22vh);
  rotate: calc(-9deg + var(--sc-p, 0) * 14deg);
  filter: drop-shadow(0 30px 40px rgb(1 20 30 / .45)) saturate(.85);
}

/* ---------- Farben (pan) ---------- */
.farben { display: flex; align-items: center; }
.leiste { gap: clamp(1rem, 2.4vw, 2rem); padding: calc(var(--kopf-h) + 2rem) var(--sc-gutter) 2rem; align-items: stretch; }
.glied {
  position: relative; flex: 0 0 clamp(17rem, 25vw, 23rem);
  padding: 1.4rem 1.4rem 1.2rem; border-radius: 6px; overflow: hidden;
  background: rgb(2 14 20 / .58); border: 1px solid rgb(234 244 243 / .1);
  box-shadow: inset 0 1px 0 rgb(234 244 243 / .07), var(--sc-e2);
  backdrop-filter: blur(4px);
}
.glied::before { /* Punktraster in der Fläche, zur Ecke ausgeblendet */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgb(234 244 243 / .07) 1px, transparent 1.3px); background-size: 16px 16px;
  mask-image: radial-gradient(100% 70% at 100% 0%, #000, transparent 75%);
}
.glied--kopf, .glied--schluss { background: none; border: 0; box-shadow: none; backdrop-filter: none; flex-basis: clamp(18rem, 34vw, 30rem); align-self: center; padding-left: 0; }
.glied--kopf::before, .glied--schluss::before { display: none; }
.glied--kopf .sc-body { margin-top: var(--sc-4); }
.glied--schluss { flex-basis: clamp(16rem, 26vw, 22rem); }
.glied h3 { margin: 1.1rem 0 .3rem; font: 640 1.7rem/1 var(--sc-font-display); font-variation-settings: "wdth" 76; }
.glied p { margin: 0; color: var(--sc-ink-soft); line-height: 1.55; }
.glied__tiefe { margin-top: .8rem !important; font: 500 13px/1 var(--sc-font-display) !important; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.glied__tiefe b { color: var(--sc-ink); font-weight: 600; }
.probe { display: grid; grid-template-columns: 1fr 1fr; height: clamp(7rem, 22vh, 11rem); border-radius: 4px; overflow: hidden; }
.probe i { display: block; }
.probe__oben { background: rgb(var(--farbe)); }
.probe__unten { background: rgb(var(--farbe)); position: relative; }
.probe__unten::after { content: ""; position: absolute; inset: 0; border-left: 1px solid rgb(234 244 243 / .35); }
.glied--lume .probe__unten { box-shadow: inset 0 0 28px rgb(142 240 184 / .6); }

/* ---------- Bühnen ---------- */
.buehne { background: transparent; }
.luenette__text, .abyss__text {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--sc-gutter); top: calc(var(--kopf-h) + clamp(2.5rem, 11vh, 7rem));
  width: min(34rem, 42vw); display: grid;
}
.luenette__text > div, .abyss__text > div { grid-area: 1 / 1; }
.luenette__text .sc-body, .abyss__text .sc-body { margin-top: var(--sc-4); max-width: 36ch; }
.raste {
  grid-area: 2 / 1; margin: clamp(1.5rem, 5vh, 3rem) 0 0; display: flex; align-items: baseline; gap: 10px;
  font: 500 13px/1 var(--sc-font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink-soft);
  font-variant-numeric: tabular-nums;
}
.raste b { font-size: 40px; font-weight: 600; color: var(--sc-ink); letter-spacing: 0; min-width: 3ch; text-align: right; }
.luenette__uhr {
  position: absolute; z-index: 2; right: max(var(--sc-gutter), 6vw); top: 50%; translate: 0 -46%;
  height: min(78vh, 48vw); aspect-ratio: 420 / 520;
  filter: drop-shadow(0 40px 60px rgb(1 12 20 / .55));
}

.abyss__uhr {
  position: absolute; z-index: 2; left: 58%; top: 54%; translate: -50% -50%;
  height: min(84vh, 64vw); aspect-ratio: 420 / 520;
}
.abyss__text h2, .abyss__text .sc-body { text-shadow: 0 1px 18px rgb(2 6 10 / .9); }
.lume-zahl { color: var(--sc-accent); font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgb(142 240 184 / .45); }
.abyss__text b { color: var(--sc-ink); font-variant-numeric: tabular-nums; }
.abyss__fuss {
  position: absolute; z-index: var(--sc-z-copy); left: var(--sc-gutter); bottom: clamp(1.2rem, 4vh, 2.4rem); margin: 0;
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
}

/* ---------- Die Uhr (SVG-Ebenen) ---------- */
.uhr { width: 100%; height: 100%; overflow: visible; }
.uhr .m { opacity: var(--licht, 1); }
.uhr .lm { fill: var(--lume-fill, #DCE9DF); }
.uhr .gl { fill: #8EF0B8; opacity: var(--glow, 0); }
.uhr .luenette-ebene { transition: none; }
.uhr text { font-family: var(--sc-font-display); font-variation-settings: "wdth" 100; }

/* ---------- Gehäuse (flow) ---------- */
.gehaeuse { padding-block: clamp(5rem, 12vw, 10rem); }
.gehaeuse__raster { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.gehaeuse__text { max-width: 40rem; }
.daten { margin: var(--sc-6) 0 0; border-top: 1px solid var(--sc-hairline); }
.daten > div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--sc-4); padding: 12px 0; border-bottom: 1px solid var(--sc-hairline); }
.daten dt { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.daten dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.profil { margin: 0; position: sticky; top: 22vh; }
.profil svg { width: 100%; height: auto; overflow: visible; }
.profil path { fill: none; stroke: var(--sc-ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.profil__band path { stroke: var(--sc-ink-soft); stroke-dasharray: 3 5; }
.profil__fein { stroke-width: .9 !important; stroke: var(--sc-ink-soft) !important; }
.profil__mass path { stroke: var(--sc-accent); stroke-width: 1.1; }
.profil__mass .profil__pfeil { fill: var(--sc-accent); stroke: none; }
.profil text { fill: var(--sc-accent); font: 600 15px var(--sc-font-display); letter-spacing: .04em; }
.profil figcaption { margin-top: var(--sc-5); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; max-width: 40ch; }
@media (max-width: 900px) {
  .gehaeuse__raster { grid-template-columns: 1fr; }
  .profil { position: static; }
  .daten > div { grid-template-columns: 7rem 1fr; }
}

/* ---------- Schreibtafel (Schluss) ---------- */
.tafel { position: relative; padding-top: clamp(4rem, 9vw, 8rem); padding-bottom: 2rem; }
.tafel__raster { position: relative; display: grid; grid-template-columns: 1fr minmax(22rem, 34rem); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.tafel__kopf { padding-top: 2rem; }
.tafel__licht { /* der Kegel einer Tauchlampe auf der Tafel */
  position: absolute; right: -10%; top: -20%; width: 70%; height: 140%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(200 236 230 / .12), transparent 70%);
}
.schreibtafel {
  --blei: #3A4448;
  position: relative; margin: 0; padding: 1.8rem 2rem 1.4rem;
  border-radius: 18px; rotate: -1.4deg;
  background:
    repeating-linear-gradient(0deg, transparent 0 33px, rgb(40 60 66 / .09) 33px 34px),
    linear-gradient(160deg, #F3F2EA, #E3E4DA);
  color: #1E2A2E;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), 0 3px 6px rgb(0 0 0 / .3), 0 30px 60px -12px rgb(0 0 0 / .6);
}
.schreibtafel__loch { position: absolute; left: 18px; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: #0A1418; box-shadow: inset 0 1px 2px rgb(0 0 0 / .7); }
.schreibtafel__leine { position: absolute; left: 23px; top: -60px; width: 4px; height: 70px; border-radius: 2px; background: linear-gradient(#1E2B30, #33464C); rotate: 8deg; }
.blei { font-family: "Caveat", cursive; font-weight: 600; color: var(--blei); }
.blei--titel { display: block; margin: 0 0 .6rem 1.4rem; font-size: 2.1rem; line-height: 1; }
.protokoll { margin: 0; }
.protokoll > div { display: grid; grid-template-columns: 10rem 1fr; align-items: baseline; gap: 1rem; padding: 2px 0; }
.protokoll dt { font-size: var(--sc-t-sm); color: #4A585C; }
.protokoll dd { margin: 0; font-size: 1.6rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.vormerkung { margin-top: 1rem; padding-top: .9rem; border-top: 1.5px dashed rgb(40 60 66 / .35); }
.vormerkung__titel { margin: 0 0 .8rem; font: 650 1.35rem/1 var(--sc-font-display); font-variation-settings: "wdth" 80; color: #10191C; }
.feld { display: grid; gap: 4px; margin-bottom: 9px; }
.feld label { font-size: var(--sc-t-sm); font-weight: 600; color: #1E2A2E; }
.feld input, .feld select {
  height: 42px; padding: 0 12px; border-radius: 4px;
  font: 500 1rem var(--sc-font-text); color: #10191C; caret-color: #0B6A4A;
  background: rgb(255 255 255 / .7); border: 1px solid #7B898C;
  transition: border-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.feld input:focus, .feld select:focus { outline: none; border-color: #0B6A4A; box-shadow: 0 0 0 3px rgb(11 106 74 / .25); }
.feld__hilfe { font-size: var(--sc-t-xs); color: #4A585C; }
.feld__hilfe.ist-fehler { color: #A3341F; }
.schreibtafel :focus-visible { outline-color: #0B6A4A; }
.vormerkung .knopf { width: 100%; margin-top: 4px; color: #04140C; }
.vormerkung .knopf--voll { background: #8EF0B8; border-color: #3F9C6E; }
.vormerkung__hinweis { margin: 10px 0 0; font-size: var(--sc-t-xs); color: #4A585C; line-height: 1.5; }
.vormerkung.ist-gesendet .vormerkung__hinweis { color: #0B5A3C; font-weight: 600; }
.fuss {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: clamp(1.5rem, 3vw, 2.5rem); padding-block: 1rem; border-top: 1px solid var(--sc-hairline);
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
}
.fuss__marke { font: 700 13px/1 var(--sc-font-display); font-variation-settings: "wdth" 118; letter-spacing: .28em; color: var(--sc-ink); }
@media (max-width: 900px) {
  .tafel__raster { grid-template-columns: 1fr; }
  .tafel__kopf { padding-top: 0; }
  .schreibtafel { padding: 2rem 1.2rem 1.4rem; rotate: -.8deg; }
  .protokoll > div { grid-template-columns: 8.2rem 1fr; gap: .6rem; }
  .protokoll dd { font-size: 1.5rem; }
}

/* ---------- Handy ---------- */
@media (max-width: 860px) {
  :root { --kopf-h: 70px; }
  .held { max-width: none; }
  .held h1 { max-width: 10ch; }
  #oberflaeche .sc-scrim--lead {
    background: linear-gradient(to top, rgb(2 22 32 / .95) 0%, rgb(2 22 32 / .86) 40%, rgb(2 22 32 / .55) 58%, transparent 80%);
  }
  .sinkend { right: 50%; translate: 50% calc(-88% - var(--sc-p, 0) * 8vh); top: 40%; width: min(46vw, 30vh); }
  .luenette__text, .abyss__text { width: auto; right: var(--sc-gutter); top: auto; bottom: clamp(1.5rem, 5vh, 3rem); }
  .luenette__text h2, .abyss__text h2 { hyphens: auto; }
  .luenette__uhr { right: 50%; translate: 50% 0; top: calc(var(--kopf-h) + 1.2rem); height: min(44vh, 100vw); }
  .abyss__uhr { left: 50%; top: calc(var(--kopf-h) + 1rem); translate: -50% 0; height: min(46vh, 108vw); }
  .abyss__fuss { display: none; }
  .raste { margin-top: 1rem; }
  .raste b { font-size: 30px; }
}
@media (max-width: 420px) {
  .luenette__text .sc-display--lg, .abyss__text .sc-display--lg { font-size: 1.75rem; }
  .luenette__text .sc-body, .abyss__text .sc-body { font-size: .98rem; line-height: 1.5; margin-top: .6rem; }
}
@media (max-height: 700px) and (max-width: 860px) {
  .luenette__uhr { height: 36vh; }
  .abyss__uhr { height: 38vh; }
}

@media (prefers-reduced-motion: reduce) {
  .knopf--voll::before, .wasser__strahlen { animation: none; }
  .sinkend { translate: 0 -50%; rotate: 0deg; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
  .sinkend { translate: 50% -80%; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .sinkend { width: min(40vw, 24vh); }
  #oberflaeche .sc-scrim--lead {
    background: linear-gradient(to top, rgb(2 22 32 / .96) 0%, rgb(2 22 32 / .9) 50%, rgb(2 22 32 / .6) 68%, transparent 88%);
  }
}