/* Ostgrat Expedition Parka. Seitenstil. Die Engine-Klassen (.sc-*, [data-sc-*])
   bleiben unangetastet; hier stehen Marke, Bühnen, Profil, Querschnitt und Etikett.
   Ein Radius auf der ganzen Seite: 6px. Ein Akzent: Signal-Orange. */
:root {
  --eis:      #E8EDF1;
  --eis-2:    #D3DCE3;
  --reif:     #F4F7F9;
  --stahl:    #8796A5;
  --schiefer: #4A5867;
  --nacht:    #1C2530;
  --orange:   #FF5B1F;
  --r: 6px;

  --sc-canvas:     var(--eis);
  --sc-surface:    var(--reif);
  --sc-ink:        var(--nacht);
  --sc-ink-soft:   var(--schiefer);
  --sc-accent:     var(--orange);
  --sc-accent-ink: var(--nacht);
  --sc-font-display: "Big Shoulders Display", system-ui, sans-serif;
  --sc-font-text:    "Work Sans", system-ui, sans-serif;
  --sc-font-mono:    "Work Sans", system-ui, sans-serif;
  --sc-shadow-color: 208 30% 22%;
  color-scheme: light;
}
html { background: var(--eis); scrollbar-color: var(--stahl) var(--eis); }
body { font-family: var(--sc-font-text); background: var(--eis); color: var(--nacht); }
::selection { background: var(--orange); color: var(--nacht); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: var(--r); }
input { caret-color: var(--orange); }
.sc-grain { opacity: .035; }

/* Anzeige-Schrift: schmal, schwer, aufrecht, wie Beschriftung an einer Hütte. */
.sc-display {
  font-family: var(--sc-font-display);
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 0.98;
  text-wrap: balance;
  text-transform: none;
}
.sc-display--xl { font-size: clamp(3rem, 1.6rem + 5.4vw, 7rem); }
.sc-display--lg { font-size: clamp(2.2rem, 1.3rem + 2.8vw, 4.2rem); line-height: 1; }
.sc-body { font-size: var(--sc-t-lg); line-height: 1.55; color: var(--schiefer); }
@media (max-width: 700px) {
  .sc-display--xl { font-size: clamp(2.6rem, 1.4rem + 7vw, 3.6rem); }
  .sc-display--lg { font-size: clamp(2rem, 1.3rem + 4vw, 2.6rem); }
  .sc-body { font-size: 1.04rem; }
}

/* ---------- Kopf: zwei kleine Eis-Plaketten ---------- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px var(--sc-gutter); pointer-events: none;
}
.kopf a {
  pointer-events: auto; text-decoration: none; color: var(--nacht);
  background: color-mix(in oklab, var(--eis) 92%, transparent);
  border-radius: var(--r); padding: 9px 14px;
  box-shadow: 0 1px 0 rgb(255 255 255 / .7) inset, 0 6px 18px -10px hsl(var(--sc-shadow-color) / .5);
}
.kopf__marke { font: 900 20px/1 var(--sc-font-display); letter-spacing: .14em; }
.kopf__link {
  font-weight: 600; font-size: var(--sc-t-sm);
  text-decoration: underline !important; text-underline-offset: 4px; text-decoration-thickness: 1.5px !important;
  text-decoration-color: var(--orange) !important;
}

/* ---------- Knopf: orange, dunkle Schrift, Mosaik mit Lichtstreif ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px; border-radius: var(--r); border: 0;
  font: 600 1rem/1 var(--sc-font-text); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.knopf:active { transform: translateY(1px); }
.knopf--voll { position: relative; overflow: hidden; isolation: isolate; color: var(--nacht); background: var(--orange); }
.knopf--voll::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .34) 50%, transparent 65%) -200% 0 / 200% 100% no-repeat,
    repeating-linear-gradient(90deg, rgb(28 37 48 / .07) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg, rgb(28 37 48 / .07) 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: #FF7240; } }
@media (prefers-reduced-motion: reduce) { .knopf--voll::before { animation: none; } }

/* ---------- Talboden (Hero) ---------- */
.tal { position: relative; height: 100svh; min-height: 560px; overflow: clip; background: var(--eis); }
/* Die Platte ist größer als der Schirm, damit der Gipfel bei 72 % der Breite
   steht und die Jacke ihn nicht verdeckt. */
.tal__berg {
  --pw: max(130vw, 230svh);
  position: absolute; top: calc(50svh - var(--pw) * 0.2827 + 6svh);
  left: calc(74vw - var(--pw) * 0.633); width: var(--pw);
}
.tal__berg img { width: 100%; height: auto; max-width: none; }
.tal__schleier { /* Eis-Scrim nur oben links, wo der Text steht; Geschwister der Copy */
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(232 237 241 / .95) 0%, rgb(232 237 241 / .9) 30%, rgb(232 237 241 / .55) 40%, rgb(232 237 241 / 0) 50%);
}
.tal__jacke {
  position: absolute; left: 41vw; bottom: -10svh; height: 88svh; aspect-ratio: 1000 / 1564;
  filter: drop-shadow(0 28px 34px hsl(var(--sc-shadow-color) / .35));
}
.tal__jacke img { width: 100%; height: 100%; max-width: none; }
.tal__text { position: absolute; z-index: 2; left: var(--sc-gutter); top: clamp(6rem, 17svh, 11rem); width: min(36rem, 38vw); }
.tal__text h1 { max-width: 11ch; }
.tal__text .sc-body { margin-top: var(--sc-5); max-width: 30ch; color: var(--nacht); }
.tal__text .knopf { margin-top: var(--sc-6); }
@media (max-width: 860px) {
  .tal__berg { --pw: max(300vw, 200svh); left: calc(78vw - var(--pw) * 0.633); top: calc(30svh - var(--pw) * 0.2827); }
  .tal__schleier { background: linear-gradient(rgb(232 237 241 / .95) 0%, rgb(232 237 241 / .86) 42%, rgb(232 237 241 / 0) 66%); }
  .tal__text { top: 84px; width: auto; right: var(--sc-gutter); }
  .tal__text h1 { max-width: 12ch; }
  .tal__jacke { left: 50%; translate: -50% 0; height: 52svh; bottom: -6svh; }
}
@media (max-height: 700px) and (max-width: 860px) {
  .tal__text { top: 70px; }
  .tal__text .sc-body { margin-top: var(--sc-3); }
  .tal__text .knopf { margin-top: var(--sc-4); min-height: 48px; }
  .tal__jacke { height: 42svh; }
}

/* ---------- Bühnen (Aufstieg, Gipfelnacht) ---------- */
.buehne { background: var(--eis-2); }
.platten { position: absolute; inset: 0; overflow: hidden; }
.platte {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 62% 30%;
  transform-origin: 66% 30%; will-change: opacity, transform;
}
.platte[data-platte="b"] { opacity: 0; }
.buehne--gipfel .platte[data-platte="b"] { object-position: 66% 40%; }
.schnee { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.nebel {
  position: absolute; inset: -10% -30%; z-index: 4; pointer-events: none; opacity: 0;
  background:
    radial-gradient(40% 30% at 20% 40%, rgb(244 247 249 / .95), transparent 70%),
    radial-gradient(45% 35% at 55% 55%, rgb(232 237 241 / .95), transparent 72%),
    radial-gradient(40% 30% at 85% 35%, rgb(244 247 249 / .9), transparent 70%),
    radial-gradient(60% 40% at 50% 85%, rgb(211 220 227 / .95), transparent 75%),
    linear-gradient(rgb(232 237 241 / .7), rgb(232 237 241 / .7));
  will-change: opacity, transform;
}
.sturm {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, #2A3542, #1C2530 60%, #33404E);
}
/* Scrim nur oben links unter der Copy; Geschwister des Textblocks. */
.buehne__scrim {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(110% 120% at 0% 0%, rgb(232 237 241 / .96) 0%, rgb(232 237 241 / .92) 50%, rgb(232 237 241 / 0) 80%);
}
.buehne__text {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--sc-gutter); top: clamp(5.5rem, 14svh, 9rem);
  width: min(34rem, 44vw); display: grid;
}
.buehne__text > * { grid-area: 1 / 1; }
.buehne__text .sc-body { margin-top: var(--sc-4); max-width: 34ch; color: var(--nacht); }

/* ---------- Tafel mit Querschnitt (Signatur) ---------- */
.tafel {
  position: absolute; z-index: 21; right: var(--sc-gutter); top: clamp(5.5rem, 14svh, 9rem);
  width: clamp(250px, 22vw, 330px);
  padding: 14px 14px 12px; border-radius: var(--r);
  background: color-mix(in oklab, var(--eis) 94%, transparent);
  box-shadow: 0 1px 0 rgb(255 255 255 / .8) inset, 0 18px 40px -24px hsl(var(--sc-shadow-color) / .7);
  isolation: isolate; overflow: hidden;
}
.tafel::before { /* feines Punktraster in der Fläche, nach unten ausgeblendet */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgb(28 37 48 / .07) 1px, transparent 1.3px); background-size: 12px 12px;
  mask-image: linear-gradient(#000, transparent 80%);
}
.tafel__schnitt svg { display: block; width: 100%; height: auto; }
.tafel__arbeit { margin: 10px 0 6px; font-size: var(--sc-t-sm); color: var(--schiefer); }
.tafel__arbeit b { color: var(--nacht); font-weight: 700; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tafel__werte { margin: 0; display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.tafel__werte > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 0 4px; border-top: 1px solid rgb(28 37 48 / .1); }
.tafel__werte dt { font-size: var(--sc-t-sm); color: var(--schiefer); }
.tafel__werte dd { margin: 0; text-align: right; font-size: var(--sc-t-sm); }
.tafel__werte dd b { font: 800 1.35rem/1 var(--sc-font-display); letter-spacing: .01em; }
.tafel__werte small { display: block; font-size: .78rem; color: var(--schiefer); }
.tafel__fuss { margin: 6px 0 0; font-size: .78rem; line-height: 1.4; color: var(--schiefer); }

/* Schnitt-Zeichnung */
.schnitt__haut { fill: rgb(255 91 31 / .16); }
.schnitt__daune { fill: var(--reif); }
.schnitt__stoff { fill: none; stroke: var(--orange); stroke-width: 4; stroke-linejoin: round; }
.schnitt__futter { fill: none; stroke: var(--schiefer); stroke-width: 3; }
.schnitt__steg { stroke: var(--stahl); stroke-width: 1.5; stroke-dasharray: 3 3; }
.schnitt__flocke { fill: #fff; stroke: var(--stahl); stroke-width: 1; }
.schnitt__wind { stroke: var(--nacht); stroke-width: 2; stroke-linecap: round; }
.schnitt__naht { fill: var(--schiefer); }
[data-aktiv="aussen"] .schnitt__stoff { stroke-width: 6; }
[data-aktiv="futter"] .schnitt__futter { stroke: var(--nacht); stroke-width: 4.5; }
[data-aktiv="daune"] .schnitt__flocke { stroke: var(--schiefer); }

/* ---------- Höhenprofil im Bild, mit wanderndem Punkt ---------- */
.profil {
  position: absolute; z-index: 21;
  left: var(--sc-gutter); right: calc(var(--sc-gutter) + clamp(250px, 22vw, 330px) + 3rem);
  top: 52svh; bottom: 10svh;
}
.profil__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.profil__flaeche { fill: url(#profil-verlauf); }
.profil__hof { fill: none; stroke: rgb(232 237 241 / .9); stroke-width: 7; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.profil__linie { fill: none; stroke: var(--nacht); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; opacity: .8; }
.profil__weg { fill: none; stroke: var(--orange); stroke-width: 3.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 0 1; }
.profil__punkt {
  position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 0 4px var(--eis), 0 4px 12px -2px hsl(var(--sc-shadow-color) / .6);
  will-change: left, top;
}
.profil__marke {
  position: absolute; transform: translate(14px, calc(-100% - 14px));
  padding: 6px 12px 8px; border-radius: var(--r); white-space: nowrap;
  background: var(--eis); color: var(--nacht);
  font: 600 1rem/1 var(--sc-font-text); font-variant-numeric: tabular-nums;
  box-shadow: 0 10px 24px -14px hsl(var(--sc-shadow-color) / .8);
}
.profil__marke b { font: 900 clamp(2.4rem, 1.6rem + 2.4vw, 3.8rem)/1 var(--sc-font-display); letter-spacing: .005em; }
.profil__marke small { display: block; margin-top: 4px; font-size: .8rem; color: var(--schiefer); font-weight: 500; }
.profil__marke.ist-links { transform: translate(calc(-100% - 14px), calc(-100% - 14px)); }
.profil__marke.ist-unten { transform: translate(14px, 16px); }
.profil__marke.ist-links.ist-unten { transform: translate(calc(-100% - 14px), 16px); }
.profil__wp {
  position: absolute; transform: translate(-50%, 14px);
  font-size: .8rem; font-weight: 600; color: var(--nacht); text-decoration: none; white-space: nowrap;
  background: rgb(232 237 241 / .9); padding: 4px 8px; border-radius: var(--r);
  transition: background-color 160ms var(--sc-ease-out);
}
.profil__wp::before { content: ""; position: absolute; left: 50%; top: -14px; width: 1.5px; height: 12px; background: var(--nacht); }
.profil__wp span { font-weight: 400; color: var(--schiefer); }
.profil__wp.ist-erreicht { box-shadow: inset 0 -2px 0 var(--orange); }
@media (hover: hover) and (pointer: fine) { .profil__wp:hover { background: var(--reif); } }

/* Gipfelnacht: im Sturm wird der Scrim dunkel nicht gebraucht, die Copy bleibt dunkel auf Eis. */

/* ---------- Bühnen am Handy: Text oben, Tafel Mitte rechts, Profil unten ---------- */
@media (max-width: 860px) {
  .platte { object-position: 64% 30%; }
  .buehne__scrim { background: linear-gradient(rgb(232 237 241 / .96) 0%, rgb(232 237 241 / .9) 30svh, rgb(232 237 241 / 0) 44svh); }
  .buehne__text { top: 72px; right: var(--sc-gutter); width: auto; }
  .buehne__text .sc-body { margin-top: var(--sc-2); font-size: .98rem; line-height: 1.45; }
  .tafel {
    top: auto; bottom: 37svh; left: var(--sc-gutter); right: var(--sc-gutter); width: auto;
    display: grid; grid-template-columns: 42% 1fr; column-gap: 12px; align-items: center; padding: 8px 10px;
  }
  .tafel__schnitt { grid-row: 1 / span 2; }
  .tafel__arbeit { grid-column: 2; margin: 0 0 2px; font-size: .76rem; line-height: 1.3; }
  .tafel__werte { grid-column: 2; }
  .tafel__werte > div { padding: 2px 0; }
  .tafel__werte > .tafel__wind, .tafel__fuss { display: none; }
  .tafel__werte dt { font-size: .76rem; }
  .tafel__werte dd b { font-size: 1.05rem; }
  .tafel__werte small { font-size: .68rem; }
  .tafel--gross { display: block; padding: 14px; }
  .tafel--gross .tafel__fuss { display: block; }
  .profil { left: var(--sc-gutter); right: var(--sc-gutter); top: 67svh; bottom: 5svh; }
  .profil__marke b { font-size: 2.2rem; }
  .profil__marke small { font-size: .74rem; }
  .profil__wp { font-size: .72rem; padding: 3px 6px; }
  .profil__wp span { display: none; }
  .profil__wp { transform: translate(-50%, calc(-100% - 14px)); }
  .profil__marke.ist-unten { transform: translate(14px, 56px); }
  .profil__marke.ist-links.ist-unten { transform: translate(calc(-100% - 14px), 56px); }
  .profil__wp::before { top: auto; bottom: -14px; }
}
@media (max-height: 700px) and (max-width: 860px) {
  .buehne__text { top: 64px; }
  .buehne__text .sc-body { font-size: .9rem; line-height: 1.4; }
  .buehne__text .sc-display--lg { font-size: 1.8rem; }
}

/* ---------- Lager drei (dunkler Anker, Ruhe) ---------- */
.lager {
  background: var(--nacht); color: var(--eis);
  padding-block: clamp(2.5rem, 6vw, 6rem) clamp(4rem, 9vw, 9rem);
}
.lager .sc-display { color: var(--eis); letter-spacing: .005em; }
.lager .sc-body { color: #AEBBC7; line-height: 1.65; letter-spacing: .005em; }
.lager__raster {
  display: grid; gap: clamp(1.5rem, 3.5vw, 3.5rem);
  grid-template-columns: 0.95fr 1.05fr;
  grid-template-areas: "bild text" "bild schnitt" "bild warnung";
  align-items: start;
}
.lager__bild { grid-area: bild; margin: 0; position: sticky; top: 10svh; }
.lager__bild img { width: 100%; height: auto; border-radius: var(--r); }
.lager__text { grid-area: text; padding-top: var(--sc-6); }
.lager__schnitt { grid-area: schnitt; }
.vorzeile { font-size: var(--sc-t-sm); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #AEBBC7; }
.tafel--gross { position: relative; inset: auto; width: auto; padding: 20px 20px 16px; color: var(--nacht); box-shadow: 0 1px 0 rgb(255 255 255 / .8) inset, 0 18px 30px -18px rgb(8 12 18 / .7); }
.schichten { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: s; }
.schichten li { font-size: var(--sc-t-sm); line-height: 1.5; color: var(--schiefer); padding-top: 10px; border-top: 1px solid rgb(28 37 48 / .12); }
.schichten b { display: block; color: var(--nacht); font: 800 1.3rem/1.1 var(--sc-font-display); letter-spacing: .01em; margin-bottom: 2px; }
.tafel__fuss--hell { margin-top: 12px; }
.lager__warnung {
  grid-area: warnung; margin: 0; max-width: 46ch;
  font: 700 clamp(1.4rem, 1rem + 1.2vw, 2rem)/1.2 var(--sc-font-display); letter-spacing: .01em; color: var(--eis);
  padding-left: 18px; position: relative;
}
.lager__warnung::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 1px; background: var(--orange); }
@media (max-width: 860px) {
  .lager__raster { grid-template-columns: 1fr; grid-template-areas: "text" "bild" "schnitt" "warnung"; }
  .lager__bild { position: relative; top: 0; }
  .lager__text { padding-top: 0; }
}

/* ---------- Details (pan) ---------- */
.details {
  background-color: var(--eis);
  background-image:
    linear-gradient(rgb(28 37 48 / .05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(28 37 48 / .05) 1px, transparent 1px);
  background-size: 32px 32px;
  display: flex; align-items: center;
}
.leiste { gap: clamp(2rem, 4vw, 4.5rem); padding-inline: var(--sc-gutter); align-items: center; }
.detail { flex: 0 0 auto; width: clamp(16rem, 24vw, 22rem); }
.detail--kopf { width: clamp(18rem, 30vw, 28rem); }
.detail--kopf .sc-body { margin-top: var(--sc-4); }
.detail h3 { margin: 18px 0 6px; font: 800 2.1rem/1 var(--sc-font-display); letter-spacing: .01em; }
.detail p { margin: 0; color: var(--schiefer); line-height: 1.55; max-width: 32ch; }
.detail__bild { width: 100%; height: auto; aspect-ratio: 240 / 200; overflow: visible;
  border-top: 1px solid rgb(28 37 48 / .18); border-bottom: 1px solid rgb(28 37 48 / .18); padding-block: 10px; }
.detail__bild path {
  fill: none; stroke: var(--nacht); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--zug, 1));
}
.detail__bild path.duenn { stroke-width: 1.2; stroke: var(--schiefer); }
.detail__bild path.akzent { stroke: var(--orange); stroke-width: 3; }
.detail--schluss { width: clamp(16rem, 24vw, 22rem); }
.detail__gross { font: 900 clamp(4rem, 3rem + 4vw, 7rem)/0.9 var(--sc-font-display); color: var(--nacht) !important; margin-bottom: 10px !important; }
@media (max-width: 860px) {
  .detail { width: 74vw; }
  .detail--kopf { width: 80vw; }
  .detail h3 { font-size: 1.8rem; }
}

/* ---------- Etikett (Schluss) ---------- */
.schluss { background: var(--eis); padding-block: clamp(3rem, 6vw, 6rem) clamp(2rem, 4vw, 3rem); }
.schluss__raster {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem);
  grid-template-areas: "jacke etikett" "fuss fuss"; align-items: center;
}
.schluss__jacke { grid-area: jacke; margin: 0; justify-self: center; width: min(100%, 30rem);
  filter: drop-shadow(0 26px 30px hsl(var(--sc-shadow-color) / .3)); }
.schluss__jacke img { width: 100%; height: auto; }
.etikett {
  grid-area: etikett; position: relative; max-width: 30rem; rotate: -1deg;
  padding: 30px 30px 24px; border-radius: var(--r);
  background-color: var(--reif);
  background-image:
    repeating-linear-gradient(0deg, rgb(28 37 48 / .035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgb(28 37 48 / .025) 0 1px, transparent 1px 4px);
  box-shadow: 0 1px 0 #fff inset, 0 22px 40px -26px hsl(var(--sc-shadow-color) / .8);
}
.etikett::before { /* Naht ringsum */
  content: ""; position: absolute; inset: 9px; border: 1.5px dashed rgb(28 37 48 / .35); border-radius: 3px; pointer-events: none;
}
.etikett__marke { margin: 0; font: 900 1.4rem/1 var(--sc-font-display); letter-spacing: .3em; }
.etikett__name { margin: 6px 0 0; font: 800 clamp(2.4rem, 1.6rem + 2vw, 3.4rem)/1 var(--sc-font-display); }
.etikett__daten { margin: 18px 0 0; display: grid; gap: 0; }
.etikett__daten > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid rgb(28 37 48 / .14); font-size: var(--sc-t-sm); }
.etikett__daten dt { color: var(--schiefer); }
.etikett__daten dd { margin: 0; font-weight: 600; text-align: right; }
.etikett__groessen { border: 0; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.etikett__groessen legend { font-size: var(--sc-t-sm); font-weight: 600; margin-bottom: 8px; padding: 0; }
.etikett__groessen label { position: relative; }
.etikett__groessen input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.etikett__groessen span {
  display: inline-grid; place-items: center; min-width: 48px; height: 44px; padding: 0 10px;
  border-radius: var(--r); border: 1.5px solid rgb(28 37 48 / .3); font-weight: 600;
  transition: border-color 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
.etikett__groessen input:checked + span { border-color: var(--nacht); background: var(--nacht); color: var(--eis); }
.etikett__groessen input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .etikett__groessen label:hover span { border-color: var(--nacht); } }
.feld { margin-top: 18px; display: grid; gap: 6px; }
.feld label { font-size: var(--sc-t-sm); font-weight: 600; }
.feld input {
  height: 48px; padding: 0 12px; border-radius: var(--r); border: 1.5px solid rgb(28 37 48 / .4);
  background: #fff; color: var(--nacht);
}
.feld input:focus-visible { border-color: var(--nacht); }
.feld__fehler { color: #A3300A; font-size: .85rem; }
.etikett .knopf { margin-top: 18px; width: 100%; }
.etikett__hinweis { margin: 12px 0 0; font-size: .85rem; color: var(--schiefer); }
.etikett.ist-gesendet .etikett__hinweis { color: var(--nacht); font-weight: 600; }
.fuss {
  grid-area: fuss; display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap;
  padding-top: 18px; border-top: 1px solid rgb(28 37 48 / .14);
  font-size: .85rem; color: var(--schiefer);
}
.fuss__marke { font: 900 1rem/1 var(--sc-font-display); letter-spacing: .2em; color: var(--nacht); }
@media (max-width: 860px) {
  .schluss__raster { grid-template-columns: 1fr; grid-template-areas: "jacke" "etikett" "fuss"; }
  .schluss__jacke { width: min(70vw, 18rem); }
  .etikett { rotate: -0.6deg; padding: 24px 20px 20px; }
}

/* ---------- Ruhe: vollständiger, stiller Zustand ---------- */
@media (prefers-reduced-motion: reduce) {
  .platte { transform: none !important; }
  .schnee { display: none; }
  .nebel { transform: none !important; }
  .detail__bild path { stroke-dashoffset: 0; }
}