/* ==========================================================================
   Caspar Container — Shop-Template
   Aufbau: 1 Tokens · 2 Basis · 3 Layout · 4 Kopfbereich · 5 Komponenten
           6 Startseite · 7 Shop · 8 Produkt · 9 Warenkorb/Kasse · 10 Konto
           11 Inhaltsseiten · 12 Fußbereich · 13 Overlays · 14 Responsive
   ========================================================================== */

/* 1 · Tokens ------------------------------------------------------------- */
:root {
  --nebel: #F1F4F8;        /* Seitenhintergrund, Nordsee-Dunst */
  --papier: #FFFFFF;
  --tiefsee: #0A1A33;      /* Text, dunkle Flächen */
  --tiefsee-2: #22324D;
  --hafen: #1E3448;        /* sekundär, Links */
  --stahl: #66748C;        /* gedämpfter Text */
  --linie: #D9E0EA;
  --linie-2: #E8EDF3;
  --signal: #E2062C;       /* RAL 1003 Signalgelb – Aktion */
  --signal-d: #B4001F;
  --rost: #B7273A;         /* Warnung / gebraucht */
  --gruen: #2E7D4F;        /* verfügbar */
  --rot: #B3261E;

  --f-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-text: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;
  --r-s: 3px; --r-m: 6px;
  --breite: 1240px;
  --kopf-h: 76px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --wellblech: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 6px, rgba(3,6,12,.08) 6px 9px, rgba(255,255,255,0) 9px 14px);
}

/* 2 · Basis -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-h) + 16px); }
body {
  margin: 0; background: var(--nebel); color: var(--tiefsee);
  font-family: var(--f-text); font-size: 17px; line-height: 1.55;
  font-variation-settings: "wdth" 100; -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--hafen); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--tiefsee); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 800; line-height: .95; margin: 0 0 var(--s4); letter-spacing: -.005em; }
h1 { font-size: clamp(48px, 6.6vw, 100px); overflow-wrap: break-word; }
h2 { font-size: clamp(40px, 4.8vw, 68px); }
h3 { font-size: 30px; line-height: 1; }
h4 { font-size: 22px; line-height: 1.05; }
p { margin: 0 0 var(--s4); }
.lead { font-size: 20px; line-height: 1.5; max-width: 34em; color: var(--tiefsee-2); }
.leise { color: var(--stahl); }
.zahl { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--signal); color: var(--tiefsee); }

/* 3 · Layout ------------------------------------------------------------- */
.wrap { width: min(100% - 40px, var(--breite)); margin-inline: auto; }
.sektion { padding-block: var(--s9); }
.sektion--eng { padding-block: var(--s8); }
.sektion--dunkel { background: var(--tiefsee); color: #F1F4F8; }
.sektion--dunkel a { color: var(--signal); }
.sektion--weiss { background: var(--papier); }
.kopfzeile { display: grid; grid-template-columns: 1fr auto; gap: var(--s5); align-items: end; margin-bottom: var(--s7); }
.kopfzeile p { max-width: 36em; margin: 0; }
.raster { display: grid; gap: var(--s5); }
.raster-2 { grid-template-columns: repeat(2, 1fr); }
.raster-3 { grid-template-columns: repeat(3, 1fr); }
.raster-4 { grid-template-columns: repeat(4, 1fr); }
.seitenkopf { padding: var(--s8) 0 var(--s7); border-bottom: 1px solid var(--linie); background: var(--papier); }
.seitenkopf h1 { font-size: clamp(48px, 6vw, 84px); margin-bottom: var(--s3); }
.brotkrumen { font-size: 14px; color: var(--stahl); margin-bottom: var(--s4); display: flex; flex-wrap: wrap; gap: 6px; }
.brotkrumen a { color: var(--stahl); }
.brotkrumen span[aria-hidden] { opacity: .6; }

/* 4 · Kopfbereich -------------------------------------------------------- */
.infoleiste { background: var(--tiefsee); color: #BFCADB; font-size: 13.5px; }
.infoleiste .wrap { display: flex; justify-content: space-between; gap: var(--s4); padding-block: 8px; }
.infoleiste a { color: #fff; text-decoration: none; }
.infoleiste .rechts { display: flex; gap: var(--s5); }
.infoleiste .gruen-punkt::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #5BD18B; margin-right: 8px; box-shadow: 0 0 0 3px rgba(91,209,139,.2); vertical-align: 1px; }

.kopf { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--linie); }
.kopf .wrap { height: var(--kopf-h); display: flex; align-items: center; gap: var(--s5); }
.kopf .marke img { height: 40px; width: auto; }
.hauptnav { display: flex; gap: 2px; margin-left: var(--s3); }
.hauptnav > a, .hauptnav > .mit-menue > button {
  display: block; padding: 10px 14px; border: 0; background: none; cursor: pointer;
  font-weight: 600; font-size: 15.5px; color: var(--tiefsee); text-decoration: none; border-radius: var(--r-s);
}
.hauptnav > a:hover, .hauptnav > .mit-menue > button:hover, .hauptnav [aria-current="page"] { background: var(--nebel); }
.hauptnav [aria-current="page"] { box-shadow: inset 0 -3px 0 var(--signal); border-radius: 0; background: none; }
.mit-menue { position: relative; }
.mit-menue > button::after { content: ""; display: inline-block; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-3px) rotate(45deg); margin-left: 9px; transition: transform .2s; }
.mit-menue[data-offen] > button::after { transform: translateY(0) rotate(-135deg); }
.megamenue {
  position: absolute; top: calc(100% + 14px); left: -12px; width: 640px; background: var(--papier);
  border: 1px solid var(--linie); border-radius: var(--r-m); box-shadow: 0 24px 60px -20px rgba(10,26,51,.35);
  display: grid; grid-template-columns: 1.1fr 1fr; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .2s var(--ease);
}
.mit-menue[data-offen] .megamenue { opacity: 1; visibility: visible; transform: none; }
.megamenue .spalte { padding: var(--s5); }
.megamenue .spalte + .spalte { background: var(--nebel); border-left: 1px solid var(--linie); }
.megamenue h4 { font-size: 18px; margin-bottom: var(--s3); color: var(--stahl); font-family: var(--f-text); font-weight: 600; }
.megamenue a { display: flex; justify-content: space-between; gap: var(--s3); padding: 9px 0; color: var(--tiefsee); text-decoration: none; border-bottom: 1px solid var(--linie-2); font-weight: 500; }
.megamenue a small { color: var(--stahl); font-weight: 400; }
.megamenue a:hover { color: var(--hafen); }

.suche { flex: 1; max-width: 400px; margin-left: auto; position: relative; }
.suche input {
  width: 100%; height: 44px; padding: 0 44px 0 16px; border: 1px solid var(--linie); border-radius: var(--r-s);
  background: var(--nebel); font-size: 15px; transition: border-color .15s, background .15s;
}
.suche input:focus { outline: none; border-color: var(--tiefsee); background: #fff; }
.suche button { position: absolute; right: 4px; top: 4px; width: 36px; height: 36px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: var(--tiefsee); }
.suchvorschlag {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--linie);
  border-radius: var(--r-m); box-shadow: 0 20px 50px -20px rgba(10,26,51,.4); display: none; max-height: 420px; overflow: auto; z-index: 60;
}
.suchvorschlag[data-offen] { display: block; }
.suchvorschlag a { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--s3); align-items: center; padding: 10px 14px; text-decoration: none; color: var(--tiefsee); border-bottom: 1px solid var(--linie-2); }
.suchvorschlag a:hover, .suchvorschlag a[aria-selected="true"] { background: var(--nebel); }
.suchvorschlag .mini-svg { height: 30px; }
.suchvorschlag strong { display: block; font-size: 15px; }
.suchvorschlag small { color: var(--stahl); }
.suchvorschlag .preis { font-weight: 700; font-size: 15px; }
.suchvorschlag mark { background: rgba(226,6,44,.35); color: inherit; padding: 0 1px; }
.suchvorschlag .leer { padding: 18px; color: var(--stahl); font-size: 15px; }
.suchvorschlag .alle { display: block; padding: 12px 14px; font-weight: 600; text-align: center; grid-template-columns: none; }

.kopf-aktionen { display: flex; gap: 4px; }
.symbolknopf { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; border-radius: var(--r-s); color: var(--tiefsee); cursor: pointer; text-decoration: none; }
.symbolknopf:hover { background: var(--nebel); }
.symbolknopf .zaehler { position: absolute; top: 3px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--signal); color: var(--tiefsee); font-size: 11.5px; font-weight: 700; display: grid; place-items: center; }
.symbolknopf .zaehler:empty, .symbolknopf .zaehler[data-null] { display: none; }
.symbolknopf.puls .zaehler { animation: puls .5s var(--ease); }
@keyframes puls { 40% { transform: scale(1.45); } }
.menueknopf { display: none; }

/* 5 · Komponenten -------------------------------------------------------- */
.knopf {
  --bg: var(--tiefsee); --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px; border: 2px solid var(--bg); background: var(--bg); color: var(--fg);
  font-weight: 650; font-size: 16px; text-decoration: none; border-radius: var(--r-s); cursor: pointer;
  transition: background .15s, color .15s, transform .1s;
}
.knopf:hover { --bg: var(--tiefsee-2); color: var(--fg); }
.knopf:active { transform: translateY(1px); }
.knopf--signal { --bg: var(--signal); --fg: var(--tiefsee); }
.knopf--signal:hover { --bg: #FF4059; }
.knopf--rahmen { background: transparent; color: var(--tiefsee); }
.knopf--rahmen:hover { background: var(--tiefsee); color: #fff; }
.sektion--dunkel .knopf--rahmen { color: #fff; border-color: rgba(255,255,255,.5); }
.sektion--dunkel .knopf--rahmen:hover { background: #fff; color: var(--tiefsee); }
.knopf--klein { height: 40px; padding: 0 16px; font-size: 14.5px; }
.knopf--voll { width: 100%; }
.knopf[disabled] { opacity: .45; cursor: not-allowed; }
.textlink { font-weight: 600; color: var(--tiefsee); text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; }

.feld { display: grid; gap: 6px; margin-bottom: var(--s4); }
.feld label, .feld .label { font-size: 14.5px; font-weight: 600; }
.feld .hilfe { font-size: 13.5px; color: var(--stahl); }
.eingabe, .feld input:not([type=checkbox]):not([type=radio]), .feld select, .feld textarea {
  width: 100%; height: 50px; padding: 0 14px; border: 1px solid var(--linie); border-radius: var(--r-s); background: #fff; font-size: 16px;
}
.feld textarea { height: auto; min-height: 130px; padding: 12px 14px; resize: vertical; }
.feld select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2312313F' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center; padding-right: 40px; }
.feld input:focus, .feld select:focus, .feld textarea:focus, .eingabe:focus { outline: none; border-color: var(--tiefsee); box-shadow: 0 0 0 3px rgba(226,6,44,.35); }
.feld.fehler input, .feld.fehler select { border-color: var(--rot); }
.feld .fehlertext { display: none; color: var(--rot); font-size: 13.5px; }
.feld.fehler .fehlertext { display: block; }
.feldreihe { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s4); }
.feldreihe--3 { grid-template-columns: 1fr 2fr 1fr; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; cursor: pointer; margin-bottom: var(--s3); }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--tiefsee); flex: none; }

.wahlkarte { position: relative; display: block; cursor: pointer; }
.wahlkarte input { position: absolute; opacity: 0; }
.wahlkarte .innen { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s4); align-items: center; padding: 18px 20px; border: 1px solid var(--linie); border-radius: var(--r-m); background: #fff; transition: border-color .15s, box-shadow .15s; }
.wahlkarte .innen::before { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--linie); transition: .15s; }
.wahlkarte input:checked + .innen { border-color: var(--tiefsee); box-shadow: inset 0 0 0 1px var(--tiefsee); }
.wahlkarte input:checked + .innen::before { border: 6px solid var(--tiefsee); }
.wahlkarte input:focus-visible + .innen { outline: 3px solid var(--signal); }
.wahlkarte strong { display: block; }
.wahlkarte small { color: var(--stahl); font-size: 14px; }
.wahlkarte .preis { font-weight: 700; white-space: nowrap; }
.wahlliste { display: grid; gap: 10px; }

.marke-zustand { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 20px; font-size: 13px; font-weight: 600; background: var(--nebel); color: var(--tiefsee); white-space: nowrap; }
.marke-zustand[data-z="neu"] { background: #DCEFE3; color: #1F5C39; }
.marke-zustand[data-z="cw"] { background: #E4ECF6; color: #24497A; }
.marke-zustand[data-z="wwt"] { background: #FBE5E9; color: #8D1727; }
.marke-zustand[data-z="spezial"] { background: #FDE3E7; color: #78001A; }
.bestand { font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.bestand::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gruen); }
.bestand[data-knapp]::before { background: var(--signal-d); }
.bestand[data-leer]::before { background: var(--rot); }

.tabelle { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.tabelle th, .tabelle td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--linie-2); vertical-align: top; }
.tabelle th { font-weight: 600; color: var(--stahl); font-size: 14px; }
.tabelle td.r, .tabelle th.r { text-align: right; }
.tabelle tbody tr:hover { background: rgba(236,238,242,.6); }

.hinweis { padding: 16px 18px; border-left: 4px solid var(--signal); background: #FFE8EB; border-radius: 0 var(--r-s) var(--r-s) 0; font-size: 15.5px; }
.hinweis--info { border-color: var(--hafen); background: #E6EEF2; }

.menge { display: inline-grid; grid-template-columns: 40px 52px 40px; height: 48px; border: 1px solid var(--linie); border-radius: var(--r-s); background: #fff; }
.menge button { border: 0; background: none; cursor: pointer; font-size: 20px; }
.menge button:hover { background: var(--nebel); }
.menge input { border: 0; text-align: center; width: 100%; font-weight: 600; -moz-appearance: textfield; }
.menge input::-webkit-inner-spin-button { -webkit-appearance: none; }

.akkordeon details { border-bottom: 1px solid var(--linie); }
.akkordeon summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; position: relative; font-weight: 600; font-size: 19px; }
.akkordeon summary::-webkit-details-marker { display: none; }
.akkordeon summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: linear-gradient(currentColor,currentColor) center/14px 2px no-repeat, linear-gradient(currentColor,currentColor) center/2px 14px no-repeat; transition: transform .25s var(--ease); }
.akkordeon details[open] summary::after { transform: rotate(45deg); }
.akkordeon .antwort { padding: 0 0 24px; max-width: 46em; color: var(--tiefsee-2); }

.reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--linie); margin-bottom: var(--s5); overflow-x: auto; }
.reiter button { border: 0; background: none; padding: 14px 18px; font-weight: 600; cursor: pointer; color: var(--stahl); border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.reiter button[aria-selected="true"] { color: var(--tiefsee); border-bottom-color: var(--signal); }
[role="tabpanel"][hidden] { display: none; }

.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 140%); background: var(--tiefsee); color: #fff; padding: 14px 20px; border-radius: var(--r-m); display: flex; gap: 14px; align-items: center; z-index: 200; transition: transform .35s var(--ease); box-shadow: 0 20px 40px -12px rgba(3,6,12,.4); font-size: 15px; }
.toast[data-sichtbar] { transform: translate(-50%, 0); }
.toast a { color: var(--signal); font-weight: 600; }

/* Container-Zeichnung (SVG aus JS) */
.cz { width: 100%; height: auto; overflow: visible; }

/* Produktkarte als Datenblatt */
.produkte { display: grid; grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
.pk { background: #fff; display: flex; flex-direction: column; position: relative; }
.pk .bildfeld { aspect-ratio: 16/10; background: linear-gradient(180deg, #F6F8FB, #E6ECF3); display: grid; place-items: center; padding: 26px 22px 14px; position: relative; overflow: hidden; }
.pk .bildfeld::after { content: ""; position: absolute; left: 0; right: 0; bottom: 14px; height: 1px; background: var(--linie); }
.pk .bildfeld svg { transition: transform .35s var(--ease); position: relative; z-index: 1; }
.pk:hover .bildfeld svg { transform: translateY(-4px); }
.pk .oben { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; z-index: 2; }
.pk .groesse { font-family: var(--f-display); font-weight: 800; font-size: 22px; color: var(--stahl); }
.pk .text { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pk h3 { font-size: 25px; margin: 0; }
.pk h3 a { color: inherit; text-decoration: none; }
.pk h3 a::after { content: ""; position: absolute; inset: 0; }
.pk dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 4px 0 0; font-size: 13px; }
.pk dl div { background: var(--nebel); padding: 7px 9px; }
.pk dt { color: var(--stahl); }
.pk dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.pk .pk-fuss { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; align-items: end; gap: 10px; }
.pk .preis strong { font-family: var(--f-display); font-size: 32px; font-weight: 800; line-height: 1; display: block; }
.pk .preis small { color: var(--stahl); font-size: 13px; }
.pk .inwk { position: relative; z-index: 3; width: 46px; height: 46px; border-radius: var(--r-s); border: 0; background: var(--signal); cursor: pointer; display: grid; place-items: center; color: var(--tiefsee); transition: background .15s; }
.pk .inwk:hover { background: var(--tiefsee); color: var(--signal); }

/* 6 · Startseite --------------------------------------------------------- */
.held { position: relative; padding: var(--s8) 0 var(--s8); background: var(--papier); overflow: hidden; border-bottom: 1px solid var(--linie); }
.held-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s7); align-items: start; }
.held h1 { margin-bottom: var(--s5); font-size: clamp(46px, 5.4vw, 86px); }
.held h1 .zeile { display: block; overflow: hidden; }
.held h1 .zeile > span { display: block; transform: translateY(105%); animation: hoch .9s var(--ease) forwards; }
.held h1 .zeile:nth-child(2) > span { animation-delay: .08s; }
.held h1 .zeile:nth-child(3) > span { animation-delay: .16s; }
@keyframes hoch { to { transform: none; } }
.held .lead { margin-bottom: var(--s6); }
.held .aktionen { display: flex; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s6); }
.held-fakten { display: flex; gap: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--linie); font-size: 15px; color: var(--tiefsee-2); }
.held-fakten strong { display: block; font-size: 15px; color: var(--tiefsee); }

/* Signatur: Kran-Konfigurator */
.kai { position: relative; background: var(--tiefsee); border-radius: var(--r-m); color: #F1F4F8; overflow: hidden; }
.kai-buehne { position: relative; height: 380px; }
.kai-buehne .himmel { position: absolute; inset: 0; background:
    radial-gradient(120% 80% at 80% 0%, rgba(30,52,72,.55), transparent 60%),
    linear-gradient(180deg, #132848, #0A1A33 70%); }
.kai-buehne .wasser { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 2px, transparent 2px 9px), #0E2733; }
.kai-buehne .pier { position: absolute; left: 0; right: 0; bottom: 64px; height: 22px; background: #3A5361; border-top: 3px solid #465D81; }
.kai-buehne .pier::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background: repeating-linear-gradient(90deg, #E2062C 0 18px, #0A1A33 18px 36px); opacity: .9; }
.kai-kran { position: absolute; left: 0; right: 0; top: 0; bottom: 86px; pointer-events: none; }
.kai-kran svg { width: 100%; height: 100%; }
.kai-last { position: absolute; left: 50%; bottom: 86px; transform: translateX(-50%); width: var(--lw, 300px); transition: width .7s var(--ease); }
.kai-last .seil { position: absolute; left: 50%; bottom: 100%; width: 2px; height: 400px; margin-left: -1px; background: linear-gradient(180deg, transparent, #9DABC2 30%); transform-origin: bottom; }
.kai-last .spreader { position: absolute; left: -4%; right: -4%; bottom: calc(100% - 2px); height: 10px; background: #E2062C; border-radius: 2px; }
.kai-last .seil, .kai-last .spreader { transition: opacity .4s .9s; }
.kai[data-gelandet] .kai-last .seil, .kai[data-gelandet] .kai-last .spreader { opacity: 0; }
.kai-last .box { animation: absenken 1.5s .35s var(--ease) both; }
@keyframes absenken { from { transform: translateY(-230px); } to { transform: none; } }
.kai-last.wechsel .box { animation: ruck .45s var(--ease); }
@keyframes ruck { 30% { transform: translateY(-14px); } 70% { transform: translateY(2px); } }
.kai-pos { position: absolute; bottom: 12px; left: 18px; z-index: 2; font-size: 13px; color: #9DABC2; line-height: 1.4; }
.kai-pos strong { color: #fff; font-weight: 600; display: block; font-size: 14px; }
.kai-steuerung { padding: 20px 22px 22px; display: grid; gap: 18px; background: #06122A; }
.groessenwahl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.groessenwahl button { height: 54px; border: 1px solid rgba(255,255,255,.18); background: transparent; color: #fff; border-radius: var(--r-s); cursor: pointer; font-family: var(--f-display); font-weight: 800; font-size: 24px; transition: .15s; }
.groessenwahl button small { font-family: var(--f-text); font-size: 12px; font-weight: 500; opacity: .7; display: block; margin-top: -2px; }
.groessenwahl button:hover { border-color: rgba(255,255,255,.5); }
.groessenwahl button[aria-pressed="true"] { background: var(--signal); color: var(--tiefsee); border-color: var(--signal); }
.kai-daten { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 14px; align-items: end; }
.kai-daten div { font-size: 13px; color: #9DABC2; }
.kai-daten b { display: block; color: #fff; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kai-daten .preis b { font-family: var(--f-display); font-weight: 800; font-size: 34px; color: var(--signal); line-height: 1; }

.bestandsband { background: var(--nebel); padding: var(--s6) 0 var(--s7); }
.tafel { display: grid; grid-template-columns: auto 1fr; gap: var(--s6); align-items: center; }
.tafel h2 { font-size: 30px; margin: 0; }
.tafel ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
.tafel li { background: #fff; padding: 14px 16px; font-size: 14px; }
.tafel li b { display: block; font-family: var(--f-display); font-size: 30px; font-weight: 800; line-height: 1; margin-bottom: 4px; font-variant-numeric: tabular-nums; }

.kategorien { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 300px 260px; gap: var(--s4); }
.kat { position: relative; overflow: hidden; border-radius: var(--r-m); color: #fff; text-decoration: none; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s5); isolation: isolate; }
.kat:first-child { grid-row: span 2; }
.kat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--ease); }
.kat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,26,51,0) 30%, rgba(10,26,51,.88)); }
.kat:hover img { transform: scale(1.04); }
.kat h3 { font-size: 38px; margin: 0 0 6px; }
.kat:first-child h3 { font-size: 56px; }
.kat p { margin: 0; color: #D5DDE9; font-size: 15.5px; max-width: 26em; }
.kat .ab { position: absolute; top: var(--s5); right: var(--s5); background: var(--signal); color: var(--tiefsee); font-weight: 700; padding: 6px 12px; border-radius: var(--r-s); font-size: 14.5px; }

.route { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--s8); align-items: center; }
.route-karte { position: relative; background: #06122A; border-radius: var(--r-m); padding: var(--s4); }
.route-karte svg { width: 100%; height: auto; }
.route-karte .lauf { stroke-dasharray: 6 7; animation: lauf 1.6s linear infinite; }
@keyframes lauf { to { stroke-dashoffset: -26; } }
.standorte { display: grid; gap: var(--s4); margin-top: var(--s6); }
.standort { display: grid; grid-template-columns: 56px 1fr; gap: var(--s4); padding: var(--s5); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-m); }
.standort .symbol { width: 56px; height: 56px; border-radius: var(--r-s); background: rgba(226,6,44,.12); display: grid; place-items: center; color: var(--signal); }
.standort h3 { font-size: 26px; margin-bottom: 4px; color: #fff; }
.standort p { margin: 0; color: #AAB6C8; font-size: 15.5px; }

.rechner { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: #fff; border: 1px solid var(--linie); border-radius: var(--r-m); overflow: hidden; }
.rechner form { padding: var(--s6); }
.rechner .ergebnis { padding: var(--s6); background: var(--tiefsee); color: #F1F4F8; display: flex; flex-direction: column; background-image: var(--wellblech); }
.rechner .ergebnis .betrag { font-family: var(--f-display); font-size: 88px; font-weight: 900; line-height: .9; color: var(--signal); margin: var(--s3) 0 var(--s4); font-variant-numeric: tabular-nums; }
.rechner .ergebnis dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: 15px; margin: 0 0 var(--s5); }
.rechner .ergebnis dt { color: #9DABC2; }
.rechner .ergebnis dd { margin: 0; }
.rechner .ergebnis .leise { color: #9DABC2; font-size: 14px; margin-top: auto; }

.ablauf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: s; border-top: 2px solid var(--tiefsee); }
.ablauf li { padding: var(--s5) var(--s5) 0 0; counter-increment: s; position: relative; }
.ablauf li::before { content: counter(s); font-family: var(--f-display); font-weight: 900; font-size: 64px; line-height: 1; display: block; margin: 0 0 var(--s4); color: var(--tiefsee); -webkit-text-stroke: 0; }
.ablauf li:not(:last-child)::after { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; background: var(--signal); border-radius: 50%; }
.ablauf li:last-child::after { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; background: var(--tiefsee); border-radius: 50%; }
.ablauf h3 { font-size: 26px; margin-bottom: 8px; }
.ablauf p { font-size: 15.5px; color: var(--tiefsee-2); }

.zustaende { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--linie); }
.zustaende th, .zustaende td { padding: 18px 20px; border-bottom: 1px solid var(--linie-2); text-align: left; vertical-align: top; font-size: 15.5px; }
.zustaende thead th { background: var(--nebel); font-size: 14px; color: var(--stahl); font-weight: 600; }
.zustaende td:first-child { width: 220px; }
.zustaende td:first-child strong { display: block; font-family: var(--f-display); font-size: 24px; font-weight: 800; margin-top: 8px; }

.einsatz { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
.einsatz article { border-top: 1px solid var(--linie); padding-top: var(--s4); }
.einsatz h3 { font-size: 26px; }
.einsatz p { font-size: 15.5px; color: var(--tiefsee-2); }

.abschluss { background: var(--signal); }
.abschluss .wrap { display: grid; grid-template-columns: 1fr auto; gap: var(--s6); align-items: center; padding-block: var(--s8); }
.abschluss h2 { margin: 0; max-width: 14em; }
.abschluss .aktionen { display: flex; gap: var(--s3); flex-wrap: wrap; }
.abschluss .knopf--rahmen { border-color: var(--tiefsee); }

/* 7 · Shop --------------------------------------------------------------- */
.shop-layout { display: grid; grid-template-columns: 270px 1fr; gap: var(--s6); align-items: start; padding-block: var(--s6) var(--s9); }
.filter { position: sticky; top: calc(var(--kopf-h) + 20px); background: #fff; border: 1px solid var(--linie); border-radius: var(--r-m); }
.filter-kopf { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--linie); }
.filter-kopf h2 { font-size: 24px; margin: 0; }
.filter-kopf button { border: 0; background: none; color: var(--hafen); font-size: 14px; cursor: pointer; text-decoration: underline; }
.filter fieldset { border: 0; margin: 0; padding: 16px 18px; border-bottom: 1px solid var(--linie-2); }
.filter legend { font-weight: 650; font-size: 15px; padding: 0; margin-bottom: 10px; }
.filter .check { margin-bottom: 8px; font-size: 14.5px; }
.filter .check small { margin-left: auto; color: var(--stahl); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips label { cursor: pointer; }
.chips input { position: absolute; opacity: 0; }
.chips span { display: block; padding: 7px 12px; border: 1px solid var(--linie); border-radius: var(--r-s); font-weight: 600; font-size: 14px; }
.chips input:checked + span { background: var(--tiefsee); color: #fff; border-color: var(--tiefsee); }
.chips input:focus-visible + span { outline: 3px solid var(--signal); }
.preisspanne { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.preisspanne input { height: 42px; padding: 0 10px; border: 1px solid var(--linie); border-radius: var(--r-s); width: 100%; font-size: 14.5px; }
.shop-leiste { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); margin-bottom: var(--s4); flex-wrap: wrap; }
.shop-leiste .anzahl { font-size: 15px; color: var(--stahl); }
.shop-leiste .anzahl b { color: var(--tiefsee); }
.shop-leiste select { height: 42px; border: 1px solid var(--linie); border-radius: var(--r-s); padding: 0 36px 0 12px; background: #fff; }
.aktive-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s4); }
.aktive-filter button { border: 1px solid var(--linie); background: #fff; border-radius: 20px; padding: 5px 12px; font-size: 13.5px; cursor: pointer; }
.aktive-filter button::after { content: " ×"; color: var(--stahl); }
.leer-zustand { padding: var(--s8) var(--s5); text-align: center; background: #fff; border: 1px dashed var(--linie); border-radius: var(--r-m); }
.leer-zustand h3 { font-size: 34px; }
.seitenzahlen { display: flex; gap: 6px; justify-content: center; margin-top: var(--s6); }
.seitenzahlen a, .seitenzahlen span { min-width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--linie); border-radius: var(--r-s); text-decoration: none; color: var(--tiefsee); background: #fff; font-weight: 600; }
.seitenzahlen [aria-current] { background: var(--tiefsee); color: #fff; border-color: var(--tiefsee); }
.filter-oeffnen { display: none; }

/* 8 · Produkt ------------------------------------------------------------ */
.produkt { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s7); padding-block: var(--s5) var(--s8); align-items: start; }
.galerie { position: sticky; top: calc(var(--kopf-h) + 20px); }
.galerie .haupt { aspect-ratio: 4/3; background: linear-gradient(180deg, #fff, #E6ECF3); border: 1px solid var(--linie); border-radius: var(--r-m); display: grid; place-items: center; overflow: hidden; position: relative; }
.galerie .haupt > svg { width: 82%; }
.galerie .haupt img { width: 100%; height: 100%; object-fit: cover; }
.galerie .haupt .masslinie { position: absolute; left: 9%; right: 9%; bottom: 12%; font-size: 13px; color: var(--stahl); text-align: center; border-top: 1px solid var(--stahl); padding-top: 6px; }
.galerie .daumen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.galerie .daumen button { aspect-ratio: 4/3; border: 1px solid var(--linie); border-radius: var(--r-s); background: #fff; padding: 0; overflow: hidden; cursor: pointer; display: grid; place-items: center; }
.galerie .daumen button[aria-current="true"] { border-color: var(--tiefsee); box-shadow: inset 0 0 0 1px var(--tiefsee); }
.galerie .daumen img { width: 100%; height: 100%; object-fit: cover; }
.galerie .daumen svg { width: 80%; }
.p-info h1 { font-size: clamp(44px, 4.6vw, 70px); margin-bottom: var(--s3); }
.p-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; font-size: 14.5px; color: var(--stahl); margin-bottom: var(--s5); }
.p-preis { padding: var(--s5) 0; border-block: 1px solid var(--linie); margin-bottom: var(--s5); display: flex; justify-content: space-between; align-items: end; gap: var(--s4); flex-wrap: wrap; }
.p-preis .netto { font-family: var(--f-display); font-size: 64px; font-weight: 900; line-height: .9; }
.p-preis .brutto { color: var(--stahl); font-size: 14.5px; margin-top: 6px; }
.p-optionen h2 { font-family: var(--f-text); font-size: 16px; font-weight: 650; margin: var(--s5) 0 var(--s3); }
.farben { display: flex; gap: 10px; flex-wrap: wrap; }
.farben label { cursor: pointer; display: grid; justify-items: center; gap: 4px; font-size: 12.5px; color: var(--stahl); }
.farben input { position: absolute; opacity: 0; }
.farben i { width: 44px; height: 44px; border-radius: var(--r-s); display: block; box-shadow: inset 0 0 0 1px rgba(3,6,12,.15); background-image: var(--wellblech); }
.farben input:checked + i { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tiefsee); }
.farben input:focus-visible + i { outline: 3px solid var(--signal); outline-offset: 4px; }
.extras { display: grid; gap: 8px; }
.extras label { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--linie); border-radius: var(--r-s); background: #fff; cursor: pointer; font-size: 15px; }
.extras input { width: 18px; height: 18px; accent-color: var(--tiefsee); }
.extras b { font-weight: 600; }
.p-kauf { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); margin: var(--s5) 0 var(--s4); }
.p-kauf .knopf { height: 50px; }
.p-vorteile { list-style: none; padding: 0; margin: var(--s5) 0 0; display: grid; gap: 10px; font-size: 15px; }
.p-vorteile li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.p-vorteile svg { color: var(--gruen); margin-top: 2px; }
.liefer-check { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: var(--s4); padding: var(--s4); background: #fff; border: 1px solid var(--linie); border-radius: var(--r-m); }
.liefer-check p { grid-column: 1 / -1; margin: 0; font-size: 14.5px; }
.liefer-check input { height: 44px; padding: 0 12px; border: 1px solid var(--linie); border-radius: var(--r-s); }
.p-details { padding-bottom: var(--s9); }
.p-details .panel { background: #fff; border: 1px solid var(--linie); border-radius: var(--r-m); padding: var(--s6); }
.spezifikation { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s7); }

/* 9 · Warenkorb & Kasse -------------------------------------------------- */
.wk-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--s6); align-items: start; padding-block: var(--s6) var(--s9); }
.wk-liste { background: #fff; border: 1px solid var(--linie); border-radius: var(--r-m); }
.wk-pos { display: grid; grid-template-columns: 150px 1fr auto auto; gap: var(--s5); align-items: center; padding: var(--s5); border-bottom: 1px solid var(--linie-2); }
.wk-pos:last-child { border-bottom: 0; }
.wk-pos .bild { background: var(--nebel); border-radius: var(--r-s); padding: 14px; }
.wk-pos h3 { font-size: 24px; margin-bottom: 4px; }
.wk-pos h3 a { color: inherit; text-decoration: none; }
.wk-pos .optionen { font-size: 14px; color: var(--stahl); }
.wk-pos .betrag { font-weight: 700; font-size: 18px; text-align: right; min-width: 110px; }
.wk-pos .entfernen { border: 0; background: none; color: var(--stahl); font-size: 13.5px; text-decoration: underline; cursor: pointer; padding: 0; margin-top: 8px; }
.summe { background: #fff; border: 1px solid var(--linie); border-radius: var(--r-m); padding: var(--s5); position: sticky; top: calc(var(--kopf-h) + 20px); }
.summe h2 { font-size: 30px; }
.summe dl { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin: 0 0 var(--s4); font-size: 15.5px; }
.summe dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.summe .gesamt { border-top: 2px solid var(--tiefsee); padding-top: 14px; margin-top: 4px; font-weight: 700; font-size: 19px; }
.summe .gutschein { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: var(--s4); }
.summe .gutschein input { height: 42px; padding: 0 12px; border: 1px solid var(--linie); border-radius: var(--r-s); }
.summe .zahlarten { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--s4); }
.summe .zahlarten span { font-size: 12px; font-weight: 600; padding: 4px 8px; border: 1px solid var(--linie); border-radius: var(--r-s); color: var(--stahl); }
.summe-pos { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; font-size: 14.5px; padding: 10px 0; border-bottom: 1px solid var(--linie-2); }
.summe-pos .bild { background: var(--nebel); padding: 6px; border-radius: var(--r-s); }

.schritte { list-style: none; padding: 0; margin: 0 0 var(--s6); display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: k; }
.schritte li { counter-increment: k; padding: 12px 0; border-top: 3px solid var(--linie); font-size: 14.5px; font-weight: 600; color: var(--stahl); }
.schritte li::before { content: counter(k) " "; font-family: var(--f-display); font-size: 20px; font-weight: 800; margin-right: 4px; }
.schritte li[data-aktiv] { border-color: var(--signal); color: var(--tiefsee); }
.schritte li[data-fertig] { border-color: var(--tiefsee); color: var(--tiefsee); }
.kasse-block { background: #fff; border: 1px solid var(--linie); border-radius: var(--r-m); padding: var(--s6); margin-bottom: var(--s4); }
.kasse-block h2 { font-size: 34px; display: flex; justify-content: space-between; align-items: baseline; }
.kasse-block h2 button { font-family: var(--f-text); font-size: 14px; font-weight: 500; border: 0; background: none; color: var(--hafen); text-decoration: underline; cursor: pointer; }
.kasse-block[data-zu] > :not(h2):not(.zusammenfassung) { display: none; }
.kasse-block .zusammenfassung { display: none; font-size: 15px; color: var(--tiefsee-2); }
.kasse-block[data-zu] .zusammenfassung { display: block; }
.kundentyp { display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--linie); border-radius: var(--r-s); margin-bottom: var(--s5); overflow: hidden; }
.kundentyp label { cursor: pointer; }
.kundentyp input { position: absolute; opacity: 0; }
.kundentyp span { display: block; padding: 10px 22px; font-weight: 600; font-size: 15px; }
.kundentyp input:checked + span { background: var(--tiefsee); color: #fff; }
.nur-gewerbe { display: none; }
form[data-gewerbe] .nur-gewerbe { display: block; }
.rechtstext { font-size: 13.5px; color: var(--stahl); margin-top: var(--s3); }

.bestaetigung { text-align: center; padding-block: var(--s8) var(--s9); max-width: 760px; margin: 0 auto; }
.bestaetigung .stempel { width: 120px; height: 120px; margin: 0 auto var(--s5); border: 4px solid var(--gruen); border-radius: 50%; display: grid; place-items: center; color: var(--gruen); transform: rotate(-8deg); animation: stempel .5s var(--ease) both; }
@keyframes stempel { from { transform: rotate(-8deg) scale(1.6); opacity: 0; } }
.bestaetigung .nummer { font-family: var(--f-display); font-size: 40px; font-weight: 800; letter-spacing: .02em; }
.bestaetigung .naechste { text-align: left; margin-top: var(--s6); }

/* 10 · Konto ------------------------------------------------------------- */
.auth { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - var(--kopf-h) - 34px); }
.auth .bildseite { position: relative; color: #fff; display: flex; align-items: flex-end; padding: var(--s7); isolation: isolate; }
.auth .bildseite img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.auth .bildseite::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,26,51,.2), rgba(10,26,51,.9)); z-index: -1; }
.auth .bildseite h2 { max-width: 10em; }
.auth .formseite { display: grid; place-items: center; padding: var(--s7) var(--s5); background: #fff; }
.auth .formseite > div { width: min(100%, 440px); }
.konto-layout { display: grid; grid-template-columns: 250px 1fr; gap: var(--s6); padding-block: var(--s6) var(--s9); align-items: start; }
.konto-nav { background: #fff; border: 1px solid var(--linie); border-radius: var(--r-m); padding: 8px; position: sticky; top: calc(var(--kopf-h) + 20px); }
.konto-nav a { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-s); text-decoration: none; color: var(--tiefsee); font-weight: 550; font-size: 15.5px; }
.konto-nav a:hover { background: var(--nebel); }
.konto-nav a[aria-current="page"] { background: var(--tiefsee); color: #fff; }
.konto-panel { background: #fff; border: 1px solid var(--linie); border-radius: var(--r-m); padding: var(--s6); margin-bottom: var(--s4); }
.konto-panel h2 { font-size: 36px; }
.kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linie); border: 1px solid var(--linie); margin-bottom: var(--s5); }
.kennzahlen div { background: #fff; padding: var(--s4) var(--s5); font-size: 14.5px; color: var(--stahl); }
.kennzahlen b { display: block; font-family: var(--f-display); font-size: 40px; color: var(--tiefsee); font-weight: 800; line-height: 1.05; }
.status { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 13px; font-weight: 600; background: var(--nebel); white-space: nowrap; }
.status[data-s="neu"] { background: #E4ECF6; color: #24497A; }
.status[data-s="bezahlt"] { background: #FDE3E7; color: #78001A; }
.status[data-s="bereit"] { background: #E9E3F6; color: #4B3786; }
.status[data-s="unterwegs"] { background: #FBE5E9; color: #8D1727; }
.status[data-s="zugestellt"] { background: #DCEFE3; color: #1F5C39; }
.status[data-s="storniert"] { background: #F7DEDC; color: #8C1D18; }
.verlauf { list-style: none; padding: 0; margin: var(--s4) 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.verlauf li { position: relative; padding-top: 26px; font-size: 13.5px; color: var(--stahl); }
.verlauf li::before { content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 3px; background: var(--linie); }
.verlauf li::after { content: ""; position: absolute; top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 3px solid var(--linie); }
.verlauf li[data-ok]::before { background: var(--tiefsee); }
.verlauf li[data-ok]::after { background: var(--tiefsee); border-color: var(--tiefsee); }
.verlauf li[data-jetzt]::after { background: var(--signal); border-color: var(--tiefsee); }
.verlauf li[data-ok], .verlauf li[data-jetzt] { color: var(--tiefsee); font-weight: 600; }
.verlauf small { display: block; font-weight: 400; color: var(--stahl); }
.adressen { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
.adressen address { font-style: normal; padding: var(--s5); border: 1px solid var(--linie); border-radius: var(--r-m); font-size: 15.5px; line-height: 1.6; }
.adressen address b { display: block; margin-bottom: 4px; }

/* 11 · Inhaltsseiten ----------------------------------------------------- */
.bildband { position: relative; height: 460px; overflow: hidden; color: #fff; display: flex; align-items: flex-end; isolation: isolate; }
.bildband img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.bildband::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,26,51,.15), rgba(10,26,51,.85)); z-index: -1; }
.bildband .wrap { padding-bottom: var(--s7); }
.bildband h1 { max-width: 11em; }
.bildband p { max-width: 36em; font-size: 19px; color: #D6DFEA; }
.fakten-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
.fakten-raster div { background: #fff; padding: var(--s5); }
.fakten-raster b { display: block; font-family: var(--f-display); font-size: 36px; font-weight: 800; line-height: 1; margin-bottom: 6px; }
.fakten-raster span { font-size: 14.5px; color: var(--stahl); }
.karte-einbettung { border: 1px solid var(--linie); border-radius: var(--r-m); overflow: hidden; background: #fff; }
.karte-einbettung iframe { width: 100%; height: 380px; border: 0; display: block; }
.karte-einbettung .unter { padding: var(--s4) var(--s5); display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; font-size: 15px; }
.fahrzeuge { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.fahrzeug { background: #fff; border: 1px solid var(--linie); border-radius: var(--r-m); padding: var(--s5); }
.fahrzeug svg { height: 74px; width: auto; margin-bottom: var(--s4); color: var(--tiefsee); }
.fahrzeug h3 { font-size: 28px; }
.fahrzeug ul { padding-left: 18px; margin: 0; font-size: 15px; color: var(--tiefsee-2); }
.checkliste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; }
.checkliste li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; font-size: 16px; }
.checkliste li::before { content: ""; width: 22px; height: 22px; border-radius: var(--r-s); background: var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%2312313F' stroke-width='2.2'/%3E%3C/svg%3E") center no-repeat; margin-top: 2px; }
.rechtsseite { display: grid; grid-template-columns: 240px 1fr; gap: var(--s7); padding-block: var(--s7) var(--s9); align-items: start; }
.rechtsseite nav { position: sticky; top: calc(var(--kopf-h) + 20px); display: grid; gap: 4px; }
.rechtsseite nav a { padding: 10px 14px; border-radius: var(--r-s); text-decoration: none; color: var(--tiefsee); font-weight: 550; }
.rechtsseite nav a:hover { background: #fff; }
.rechtsseite article { background: #fff; border: 1px solid var(--linie); border-radius: var(--r-m); padding: var(--s7); max-width: 820px; }
.rechtsseite section + section { margin-top: var(--s7); padding-top: var(--s7); border-top: 1px solid var(--linie); }
.rechtsseite h2 { font-size: 46px; }
.rechtsseite h3 { font-size: 24px; margin-top: var(--s5); }
.platzhalter { background: #FDE3E7; padding: 0 4px; border-radius: 2px; font-weight: 600; }
.kontakt-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--s7); padding-block: var(--s7) var(--s9); align-items: start; }
.kontaktwege { display: grid; gap: var(--s4); }
.kontaktweg { padding: var(--s5); background: #fff; border: 1px solid var(--linie); border-radius: var(--r-m); }
.kontaktweg h3 { font-size: 24px; margin-bottom: 6px; }
.kontaktweg p { margin: 0; font-size: 15.5px; }
.kontaktweg a { font-weight: 600; }

/* 12 · Fußbereich -------------------------------------------------------- */
.fuss { background: var(--tiefsee); color: #AAB6C8; font-size: 15px; }
.fuss a { color: #F1F4F8; text-decoration: none; }
.fuss a:hover { color: var(--signal); }
.fuss-oben { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr; gap: var(--s6); padding-block: var(--s8) var(--s7); }
.fuss h3 { font-family: var(--f-text); font-size: 15px; font-weight: 650; color: #fff; margin-bottom: var(--s4); }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fuss address { font-style: normal; line-height: 1.6; }
.fuss address + address { margin-top: var(--s4); }
.fuss address b { color: #fff; font-weight: 600; display: block; }
.fuss .marke img { height: 44px; width: auto; margin-bottom: var(--s5); }
.newsletter { display: grid; grid-template-columns: 1fr auto; margin-top: var(--s3); }
.newsletter input { height: 46px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; padding: 0 12px; border-radius: var(--r-s) 0 0 var(--r-s); }
.newsletter input::placeholder { color: #8799B7; }
.newsletter button { border: 0; background: var(--signal); color: var(--tiefsee); font-weight: 650; padding: 0 16px; border-radius: 0 var(--r-s) var(--r-s) 0; cursor: pointer; }
.fuss-unten { border-top: 1px solid rgba(255,255,255,.12); }
.fuss-unten .wrap { display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding-block: var(--s5); font-size: 14px; }
.fuss-unten nav { display: flex; gap: var(--s5); flex-wrap: wrap; }
.fuss-wellen { height: 14px; background: var(--wellblech), var(--tiefsee-2); }

/* 13 · Overlays ---------------------------------------------------------- */
.schleier { position: fixed; inset: 0; background: rgba(10,26,51,.5); z-index: 90; opacity: 0; visibility: hidden; transition: .25s; }
.schleier[data-offen] { opacity: 1; visibility: visible; }
.schublade { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: #fff; z-index: 100; transform: translateX(102%); transition: transform .35s var(--ease); display: flex; flex-direction: column; }
.schublade[data-offen] { transform: none; }
.schublade-kopf { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--linie); }
.schublade-kopf h2 { font-size: 30px; margin: 0; }
.schublade-inhalt { flex: 1; overflow: auto; padding: 8px 22px; }
.schublade-fuss { padding: 18px 22px; border-top: 1px solid var(--linie); display: grid; gap: 10px; background: var(--nebel); }
.schublade-fuss .zeile { display: flex; justify-content: space-between; font-weight: 700; font-size: 18px; }
.mini-pos { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--linie-2); align-items: center; font-size: 14.5px; }
.mini-pos .bild { background: var(--nebel); padding: 8px; border-radius: var(--r-s); }
.mini-pos b { display: block; font-size: 15.5px; }
.mini-pos button { border: 0; background: none; color: var(--stahl); cursor: pointer; text-decoration: underline; font-size: 13px; padding: 0; }
.mobilmenue { position: fixed; inset: 0 0 0 auto; width: min(360px, 88%); background: #fff; z-index: 100; transform: translateX(102%); transition: transform .35s var(--ease); padding: 20px; overflow: auto; }
.mobilmenue[data-offen] { transform: none; }
.mobilmenue nav a { display: block; padding: 14px 4px; border-bottom: 1px solid var(--linie-2); font-weight: 600; font-size: 18px; color: var(--tiefsee); text-decoration: none; }

/* 14 · Responsive -------------------------------------------------------- */
.suche-mobil { display: none !important; }
@media (max-width: 1100px) {
  .hauptnav { display: none; }
  .menueknopf { display: grid; }
  .held-raster, .route { grid-template-columns: 1fr; }
  .fuss-oben { grid-template-columns: 1fr 1fr; }
  .fuss-oben > div:first-child { grid-column: 1 / -1; }
  .tafel { grid-template-columns: 1fr; }
  .produkt { grid-template-columns: 1fr; }
  .galerie { position: static; }
  .einsatz, .raster-4, .fakten-raster { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  :root { --kopf-h: 64px; }
  body { font-size: 16px; }
  .sektion { padding-block: var(--s8); }
  .infoleiste .rechts { display: none; }
  .infoleiste { font-size: 12.5px; }
  .suche { order: 3; position: absolute; left: 20px; right: 20px; top: calc(var(--kopf-h) + 6px); max-width: none; display: none; }
  .kopf[data-suche] .suche { display: block; }
  .suche-mobil { display: grid !important; }
  .kopf-aktionen { margin-left: auto; }
  .kopf .marke img { height: 34px; }
  .kopfzeile, .rechner, .shop-layout, .wk-layout, .konto-layout, .kontakt-layout, .rechtsseite, .auth, .abschluss .wrap { grid-template-columns: 1fr; }
  .raster-2, .raster-3, .fahrzeuge, .spezifikation, .checkliste, .adressen { grid-template-columns: 1fr; }
  .kategorien { grid-template-columns: 1fr 1fr; grid-template-rows: 260px 200px 200px; }
  .kat:first-child { grid-column: 1 / -1; grid-row: auto; }
  .tafel ul { grid-template-columns: repeat(2, 1fr); }
  .ablauf { grid-template-columns: 1fr 1fr; gap: var(--s5) 0; }
  .kai-daten { grid-template-columns: repeat(2, 1fr); }
  .kai-buehne { height: 300px; }
  .filter { position: fixed; inset: 0 auto 0 0; width: min(340px, 90%); z-index: 100; border-radius: 0; transform: translateX(-102%); transition: transform .35s var(--ease); overflow: auto; }
  .filter[data-offen] { transform: none; }
  .filter-oeffnen { display: inline-flex; }
  .summe, .konto-nav, .rechtsseite nav { position: static; }
  .wk-pos { grid-template-columns: 90px 1fr; }
  .wk-pos .betrag { text-align: left; }
  .feldreihe, .feldreihe--3 { grid-template-columns: 1fr; }
  .schritte li { font-size: 0; }
  .schritte li::before { font-size: 20px; }
  .verlauf { grid-template-columns: 1fr; gap: 12px; }
  .verlauf li::before { display: none; }
  .verlauf li { padding: 0 0 0 26px; }
  .auth .bildseite { min-height: 240px; }
  .rechtsseite article { padding: var(--s5); }
  .kennzahlen { grid-template-columns: 1fr; }
  .tabelle-scroll { overflow-x: auto; }
}
@media (max-width: 540px) {
  .kategorien, .einsatz, .raster-4, .fakten-raster, .ablauf { grid-template-columns: 1fr; }
  .groessenwahl button { font-size: 20px; }
  .held-fakten { flex-direction: column; gap: var(--s3); }
  .p-preis .netto { font-size: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Ergänzungen */
.faq-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s7); }
@media (max-width: 860px) { .faq-raster { grid-template-columns: 1fr; gap: var(--s4); } }
.filter-zu { display: none; }
@media (max-width: 860px) { .filter-zu { display: grid; } }
.kasse-block:not([data-zu]) h2 button { display: none; }
.kasse-block[data-zu] { opacity: .9; }
.kasse-block[data-zu]:not([data-erledigt]) h2 button { display: none; }
.summe dl { column-gap: 0; }
.summe dd { padding-left: 12px; }