/* =====================================================================
   RheinPrintPack – Design-System (Stand 20.10.2026, nach rheinprintpack.de)
   Tiefblau + Kupfer auf kühlem Hellgrau, Archivo (Display) + Inter (Text),
   Mono-Versalien in Kupfer als Vorzeilen, kantige Karten mit Haarlinie.
   Signatur-Element: die live gerenderte 3D-Verpackungsszene im Hero.
   ===================================================================== */

/* ---------- Schriften (lokal, variabel) ---------- */
@font-face { font-family: 'Archivo'; src: url('/assets/fonts/Archivo-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; src: url('/assets/fonts/Archivo-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/Inter-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/Inter-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Tokens ----------
   Die alten Variablennamen bleiben (Konfigurator, Verwaltung, Konto nutzen sie) – die Werte sind die neue Marke. */
:root {
  --blau: #0E3A53;           /* Markenblau: Hero, Bänder, FAQ, Überschriften-Akzent */
  --blau-2: #0A2C40;
  --blau-3: #16506E;
  --blau-hell: #E7EEF3;
  --blau-aktiv: #1D7FBF;     /* aktiver Menüpunkt / Sprache */
  --kupfer: #B4661F;         /* Akzent: Vorzeilen, Linien, Icons */
  --kupfer-2: #A85E1F;       /* Primär-Knopf */
  --kupfer-hell: #F5E8D8;
  --gruen: #2F6349; --gruen-hell: #E3EDE7;
  --nacht: #12212B;          /* Kopf, Fuß, Verwaltung (= Logo-Grund) */
  --nacht-2: #0B1A23;        /* Topbar */

  --kraft: var(--kupfer);
  --kraft-hell: var(--kupfer-hell);
  --kraft-tief: var(--kupfer-2);
  --papier: #F2F4F3;         /* Seitengrund */
  --papier-dunkel: #EDF0EF;  /* Flächen 2 */
  --weiss: #FFFFFF;
  --tinte: var(--blau);
  --tinte-tief: var(--nacht);
  --tinte-hell: var(--blau-3);
  --folie: var(--kupfer);
  --text: #15222A;
  --text-2: #59696F;
  --text-3: #8A979C;
  --text-hell: #C6DAE6;
  --linie: #E1E5E3;
  --linie-2: #D2D8D6;
  --ok: #2F6349; --warn: #9A6A12; --fehler: #B3261E; --info: #16506E;
  --schrift-display: 'Archivo', 'Inter', system-ui, sans-serif;
  --schrift-text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --schrift-mono: ui-monospace, 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', 'Liberation Mono', monospace;
  --rand: clamp(16px, 4vw, 40px);
  --breite: 1200px;
  --radius: 2px;
  --radius-gross: 2px;
  --schatten: 0 18px 40px -22px rgba(14, 58, 83, .35);
  --schatten-klein: 0 1px 0 rgba(21, 34, 42, .04);
  --kopf-hoehe: 72px;
  --topbar-hoehe: 40px;
  --uebergang: 200ms cubic-bezier(.2, .7, .3, 1);
}

/* ---------- Reset & Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--schrift-text); color: var(--text); background: var(--papier); line-height: 1.6; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--schrift-display); color: var(--text); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.65rem, 3vw, 2.35rem); }
h3 { font-size: 1.12rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
a { color: var(--blau); text-underline-offset: .15em; }
a:hover { color: var(--kupfer-2); }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 600; }
small { font-size: .82em; }
address { font-style: normal; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--kupfer); outline-offset: 3px; }
[hidden] { display: none !important; }
.mono { font-family: var(--schrift-mono); font-size: .82em; letter-spacing: .02em; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--blau); color: #fff; padding: .6rem 1rem; z-index: 200; }
.skip:focus { left: 8px; }
.huelle { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.platzhalter { background: #FFF1A8; padding: 0 .3em; border-radius: 2px; }
.ico { width: 1em; height: 1em; flex: none; }

/* ---------- Topbar ---------- */
.topbar { background: var(--nacht-2); color: #9FBACB; font-size: .8rem; }
.topbar__zeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--topbar-hoehe); }
.topbar__links, .topbar__rechts { display: flex; align-items: center; gap: 1.4rem; }
.topbar a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.topbar a:hover { color: var(--kupfer-hell); }
.topbar__info { display: inline-flex; align-items: center; gap: .45rem; }
.topbar .ico { width: 14px; height: 14px; opacity: .75; }
.topbar__marke { color: #9FBACB; }
.topbar__sozial { display: flex; align-items: center; gap: .4rem; }
.topbar__sozial a { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); justify-content: center; }
.topbar__sozial a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.topbar__sozial .ico { width: 13px; height: 13px; opacity: 1; }
.topbar__sozial .topbar__wa { width: auto; border-radius: 14px; padding: 0 .65rem 0 .5rem; gap: .35rem; border-color: rgba(37, 211, 102, .55); color: #8FE3AE; font-size: .75rem; }
.topbar__sozial .topbar__wa .ico { color: #25D366; }
@media (max-width: 1100px) { .topbar__sozial a:not(.topbar__wa) { display: none; } }
@media (max-width: 900px) { .topbar__info--zeit, .topbar__marke { display: none; } }
@media (max-width: 440px) { .topbar .topbar__mail { display: none; } }

/* ---------- Kopf / Navigation ---------- */
.kopf { position: sticky; top: 0; z-index: 100; color: #E9EEF1; }
/* Hintergrund auf dem Pseudo-Element, NICHT auf dem Header selbst: ein backdrop-filter am Header macht ihn zum Containing Block
   fuer das position:fixed-Burgermenue (Menue haette nur die Hoehe der Kopfzeile, Mobil-Bug 13.09.2026). */
.kopf::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--nacht); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.kopf__zeile { display: flex; align-items: stretch; justify-content: space-between; min-height: var(--kopf-hoehe); gap: 1rem; }
.kopf__logo { display: flex; align-items: center; flex-shrink: 0; } /* Logo nie zusammendruecken (breite Bildschirme: Menue-Abstaende wachsen mit) */
.kopf__logo img { width: auto; height: 46px; display: block; }
.nav { display: flex; align-items: stretch; gap: clamp(.8rem, 2vw, 1.6rem); }
.nav__liste { display: flex; list-style: none; align-items: stretch; }
.nav__liste > li { display: flex; position: relative; }
.nav__liste > li > a { display: flex; align-items: center; gap: .3rem; text-decoration: none; font-family: var(--schrift-display); font-weight: 600; font-size: .86rem; color: #E9EEF1; padding: 0 clamp(.45rem, .8vw, .8rem); transition: background var(--uebergang); white-space: nowrap; }
.nav__liste > li > a:hover, .nav__liste > li.hat-mega:hover > a, .nav__liste > li.ist-offen > a { background: rgba(255, 255, 255, .06); color: #fff; }
.nav__liste > li > a[aria-current="page"] { background: var(--blau-aktiv); color: #fff; }
.nav__pfeil { width: 13px; height: 13px; opacity: .7; transition: transform var(--uebergang); }
.hat-mega:hover > a .nav__pfeil, .hat-mega:focus-within > a .nav__pfeil, .hat-mega.ist-offen > a .nav__pfeil { transform: rotate(180deg); }
.nav__auf { display: none; }

/* ---------- Mega-Menü (Desktop: Hover/Fokus, Touch: Tipp) ---------- */
.mega { position: absolute; top: 100%; left: 50%; z-index: 120; width: min(720px, calc(100vw - 2 * var(--rand))); transform: translateX(calc(-50% + var(--mega-verschub, 0px))); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 230px; gap: 0 1.8rem; padding: 1.6rem 1.8rem; background: var(--weiss); color: var(--text); border-top: 3px solid var(--blau-aktiv); box-shadow: 0 34px 70px -24px rgba(6, 26, 38, .45); visibility: hidden; opacity: 0; transition: opacity 160ms ease, visibility 0s linear 160ms; }
.mega--mini { width: 260px; grid-template-columns: minmax(0, 1fr); padding: 1rem 1.4rem; }
.hat-mega:hover > .mega, .hat-mega:focus-within > .mega, .hat-mega.ist-offen > .mega { visibility: visible; opacity: 1; transition-delay: 0s; }
.mega__spalte { display: flex; flex-direction: column; min-width: 0; }
.mega__link { display: block; padding: .5rem 0; border-bottom: 1px solid var(--linie); color: var(--text-2); text-decoration: none; font-size: .86rem; line-height: 1.35; }
.mega__link:hover { color: var(--blau); padding-left: .25rem; transition: padding var(--uebergang); }
.mega__promo { background: var(--nacht); color: #C6D3DA; padding: 1.3rem; display: flex; flex-direction: column; gap: .5rem; align-self: stretch; }
.mega__promo .ico { width: 26px; height: 26px; color: #E09A5A; }
.mega__promo h4 { color: #fff; font-size: 1rem; margin: .2rem 0 0; }
.mega__promo p { font-size: .82rem; line-height: 1.5; margin: 0 0 auto; }
.mega__knopf { background: #fff; border-color: #fff; color: var(--blau); margin-top: 1rem; align-self: flex-start; }
.mega__knopf:hover { background: var(--kupfer-hell); border-color: var(--kupfer-hell); }
.mega__wa { display: inline-flex; align-items: center; gap: .4rem; color: #8FE3AE; font-size: .78rem; text-decoration: none; margin-top: .3rem; }
.mega__wa .ico { width: 15px; height: 15px; color: #25D366; }
.mega__wa:hover { color: #fff; text-decoration: underline; }
.nav__werkzeuge { display: flex; align-items: center; gap: .5rem; }
.sprache { font-family: var(--schrift-mono); font-size: .72rem; display: flex; gap: 2px; align-items: center; }
.sprache a { text-decoration: none; color: #9FB0BA; padding: .25rem .4rem; line-height: 1.2; }
.sprache a[aria-current="true"] { color: #fff; background: var(--blau-aktiv); }
.sprache span { display: none; }
.nav__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; color: #E9EEF1; }
.nav__icon:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav__zaehler { position: absolute; top: 3px; right: 1px; background: var(--kupfer); color: #fff; font-family: var(--schrift-mono); font-size: .62rem; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px; }
.nav .knopf--primaer { color: #fff; }
.nav__cta { align-self: center; }
.burger { display: none; align-self: center; width: 44px; height: 44px; border: 0; background: none; padding: 9px; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; }
.burger span { display: block; height: 2px; background: #E9EEF1; transition: transform var(--uebergang), opacity var(--uebergang); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1120px) { .nav__cta { display: none; } }
@media (max-width: 960px) {
  .burger { display: flex; }
  /* Off-Canvas per clip-path statt translateX: erzeugt keinen horizontalen Scrollbereich */
  .nav { position: fixed; inset: var(--kopf-hoehe) 0 0 0; background: var(--nacht); flex-direction: column; align-items: stretch; padding: 1rem var(--rand) 2rem; gap: 1.5rem; clip-path: inset(0 0 0 100%); visibility: hidden; transition: clip-path 300ms cubic-bezier(.2, .7, .3, 1), visibility 0s 300ms; overflow: auto; z-index: 99; }
  .nav.ist-offen { clip-path: inset(0); visibility: visible; transition-delay: 0s; }
  .nav__liste { flex-direction: column; }
  .nav__liste > li { flex-wrap: wrap; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .nav__liste > li > a { padding: .95rem .8rem; font-size: 1.1rem; flex: 1; }
  .nav__pfeil { display: none; }
  .nav__auf { display: grid; place-items: center; width: 52px; min-height: 52px; border: 0; border-left: 1px solid rgba(255, 255, 255, .1); background: none; color: #E9EEF1; cursor: pointer; }
  .nav__auf .ico { width: 18px; height: 18px; transition: transform var(--uebergang); }
  .nav__auf[aria-expanded="true"] .ico { transform: rotate(180deg); }
  /* Akkordeon: Mega-Menü als Block im Burger-Menü (kein Hover auf Touch) */
  .mega, .mega--mini { position: static; transform: none; width: 100%; display: none; grid-template-columns: minmax(0, 1fr); gap: 0; padding: .4rem .8rem 1rem; background: rgba(255, 255, 255, .04); border-top: 0; box-shadow: none; visibility: visible; opacity: 1; transition: none; color: #DCE9F0; }
  .hat-mega:hover > .mega, .hat-mega:focus-within > .mega { display: none; }
  .hat-mega.ist-offen > .mega { display: grid; }
  .mega__link { color: #DCE9F0; border-bottom-color: rgba(255, 255, 255, .08); font-size: .98rem; padding: .7rem 0; }
  .mega__link:hover { color: #fff; }
  .mega__promo { margin-top: 1rem; }
  .nav__werkzeuge { flex-wrap: wrap; gap: 1rem; }
  .nav__cta { display: inline-flex; flex-basis: 100%; justify-content: center; }
}

/* ---------- WhatsApp ---------- */
.wa-knopf { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 90; display: inline-flex; align-items: center; gap: .55rem; height: 52px; padding: 0 1.1rem 0 .9rem; border-radius: 26px; background: #25D366; color: #06331A; font-family: var(--schrift-display); font-weight: 700; font-size: .88rem; text-decoration: none; box-shadow: 0 12px 30px -10px rgba(6, 51, 26, .55); transition: transform var(--uebergang), box-shadow var(--uebergang); }
.wa-knopf .ico { width: 24px; height: 24px; }
.wa-knopf:hover { transform: translateY(-2px); color: #06331A; box-shadow: 0 16px 34px -10px rgba(6, 51, 26, .65); }
.seite-kfg .wa-knopf { display: none; }
@media (max-width: 640px) { .wa-knopf { width: 54px; height: 54px; padding: 0; justify-content: center; } .wa-knopf span { display: none; } .wa-knopf .ico { width: 27px; height: 27px; } }
@media print { .wa-knopf { display: none; } }
.knopf--whatsapp .ico { width: 18px; height: 18px; }
.knopfreihe .knopf--whatsapp { margin-top: 0; }

/* ---------- Brotkrumen ---------- */
.krumen { background: var(--weiss); border-bottom: 1px solid var(--linie); font-size: .8rem; color: var(--text-2); }
.krumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: .7rem 0; }
.krumen li + li::before { content: '/'; margin-right: .5rem; color: var(--text-3); }
.krumen a { color: var(--text-2); text-decoration: none; }
.krumen a:hover { color: var(--blau); }
.krumen [aria-current] { color: var(--text); font-weight: 600; }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .78rem 1.35rem; min-height: 46px; border-radius: 0; border: 1px solid var(--linie-2); background: var(--weiss); color: var(--blau); font-family: var(--schrift-display); font-weight: 600; font-size: .92rem; letter-spacing: .01em; text-decoration: none; cursor: pointer; line-height: 1.2; transition: background var(--uebergang), color var(--uebergang), border-color var(--uebergang); max-width: 100%; }
.knopf:hover { border-color: var(--blau); color: var(--blau); }
.knopf__pfeil { transition: transform var(--uebergang); }
.knopf:hover .knopf__pfeil { transform: translateX(3px); }
.knopf--primaer, .knopf--kraft { background: var(--kupfer-2); border-color: var(--kupfer-2); color: #fff; }
.knopf--primaer:hover, .knopf--kraft:hover { background: #8F4E17; border-color: #8F4E17; color: #fff; }
.knopf--blau { background: var(--blau); border-color: var(--blau); color: #fff; }
.knopf--blau:hover { background: var(--blau-2); border-color: var(--blau-2); color: #fff; }
.knopf--rahmen { background: var(--weiss); }
.knopf--hell { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .35); color: #fff; }
.knopf--hell:hover { background: #fff; border-color: #fff; color: var(--blau); }
.knopf--klein { padding: .5rem .9rem; min-height: 40px; font-size: .84rem; }
.knopf--gross { padding: .95rem 1.6rem; font-size: 1rem; min-height: 54px; }
.knopf--whatsapp { border-color: #25D366; color: #128C4A; font-size: .88rem; margin-top: .6rem; background: transparent; }
.knopf--whatsapp:hover { background: #25D366; color: #fff; border-color: #25D366; }
.knopf--gefahr { border-color: var(--fehler); color: var(--fehler); }
.knopf--gefahr:hover { background: var(--fehler); color: #fff; }
.knopf[disabled] { opacity: .5; pointer-events: none; }
.knopf--block { width: 100%; }
.knopfreihe { display: flex; gap: .7rem; flex-wrap: wrap; }
@media (max-width: 34rem) { .knopf { white-space: normal; } }

/* ---------- Hinweise ---------- */
.hinweis { padding: .8rem 0; font-weight: 600; }
.hinweis--ok { background: var(--gruen-hell); color: var(--ok); }
.hinweis--fehler { background: #FBE6E4; color: var(--fehler); }
.hinweis--info { background: var(--blau-hell); color: var(--info); }
.feld-fehler { color: var(--fehler); font-size: .85rem; margin: .2rem 0 0; }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.abschnitt--papier { background: var(--papier); }
.abschnitt--weiss { background: var(--weiss); }
.abschnitt--tinte { background: var(--blau); color: var(--text-hell); }
.abschnitt--tinte h2, .abschnitt--tinte h3 { color: #fff; }
.abschnitt__kopf { max-width: 680px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.abschnitt__kopf h2::after { content: ''; display: block; width: 44px; height: 3px; background: var(--kupfer); margin-top: 1.1rem; }
.abschnitt__kopf--mitte { margin-inline: auto; text-align: center; }
.abschnitt__kopf--mitte h2::after { margin-inline: auto; }
.abschnitt__kopf--zeile { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.abschnitt__kopf--zeile > div { max-width: 680px; }
.abschnitt__text { font-size: 1.02rem; color: var(--text-2); margin: 0; }
.abschnitt--tinte .abschnitt__text { color: var(--text-hell); }
.vorzeile { font-family: var(--schrift-mono); color: var(--kupfer); text-transform: uppercase; letter-spacing: .22em; font-size: .72rem; font-weight: 600; margin-bottom: .9rem; }
.vorzeile--hell { color: #E09A5A; }

/* ---------- Hero mit 3D-Szene (Signatur) ---------- */
.hero { position: relative; background: var(--blau); color: var(--text-hell); overflow: hidden; isolation: isolate; }
.hero::before { content: ''; position: absolute; z-index: -1; width: 720px; height: 720px; right: -160px; top: -260px; background: radial-gradient(closest-side, rgba(180, 102, 31, .42), rgba(180, 102, 31, 0)); pointer-events: none; }
.hero::after { content: ''; position: absolute; z-index: -1; inset: auto 0 0 0; height: 40%; background: linear-gradient(180deg, rgba(10, 44, 64, 0), rgba(10, 44, 64, .55)); pointer-events: none; }
.hero__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1rem, 3vw, 3rem); align-items: center; min-height: min(640px, calc(100dvh - var(--kopf-hoehe) - var(--topbar-hoehe))); padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3.5rem, 6vw, 5rem); }
.hero h1 { color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin-bottom: 1.2rem; max-width: 13em; }
.hero__text { font-size: clamp(1rem, 1.3vw, 1.12rem); max-width: 34em; margin-bottom: 1.8rem; color: var(--text-hell); }
.hero__chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin-top: 1.6rem; }
.hchip { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .8rem; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); color: #DCE9F0; font-size: .8rem; }
.hchip .ico { width: 13px; height: 13px; color: #E09A5A; }
.hchip--hell { background: var(--papier-dunkel); border-color: var(--linie); color: var(--text); }
.hchip--hell .ico { color: var(--kupfer); }
.hero__buehne { position: relative; aspect-ratio: 1 / 1; width: 100%; max-height: 600px; }
.hero__buehne canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
/* Kamera geht nah an eine Verpackung: angeschnittene Nachbarn am Buehnenrand weich ausblenden statt hart abschneiden */
.hero__buehne canvas { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 8%, #000 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 8%, #000 100%); mask-composite: intersect; }
.hero__poster { position: absolute; inset: 6% 6% 10%; width: 88%; height: 84%; object-fit: cover; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); transition: opacity 600ms; }
.hero__buehne.ist-3d .hero__poster { opacity: 0; pointer-events: none; }
.hero__etikett { position: absolute; z-index: 2; left: 50%; bottom: -.4rem; margin: 0; transform: translateX(-50%); display: flex; align-items: center; gap: .6rem; white-space: nowrap; font-family: var(--schrift-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #E09A5A; }
.hero__etikett b { color: #fff; font-weight: 600; letter-spacing: .06em; }
.hero__punkte { position: absolute; left: 0; right: 0; bottom: 1.6rem; display: flex; justify-content: center; gap: .5rem; z-index: 5; pointer-events: none; }
.hero__punkte > * { pointer-events: auto; } /* nur die Balken klickbar, die Leiste selbst verdeckt nichts */
.hero__punkt { width: 30px; height: 30px; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; }
.hero__punkt::before { content: ''; width: 26px; height: 3px; background: rgba(255, 255, 255, .25); transition: background var(--uebergang); }
.hero__punkt[aria-pressed="true"]::before { background: var(--blau-aktiv); }
.hero__punkt:hover::before { background: rgba(255, 255, 255, .6); }
@media (max-width: 900px) {
  .hero__raster { grid-template-columns: 1fr; min-height: 0; padding-bottom: 4.5rem; }
  .hero__buehne { max-width: 520px; margin-inline: auto; aspect-ratio: 5 / 4; }
}

/* ---------- Produktkarten ---------- */
.produkte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.9rem, 1.8vw, 1.4rem); list-style: none; }
@media (max-width: 900px) { .produkte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .produkte { grid-template-columns: 1fr; } }
.produkt-karte { background: var(--weiss); border: 1px solid var(--linie); display: flex; flex-direction: column; transition: border-color var(--uebergang), box-shadow var(--uebergang); position: relative; }
.produkt-karte:hover { border-color: var(--linie-2); box-shadow: var(--schatten); }
.produkt-karte__bild { aspect-ratio: 4 / 3; overflow: hidden; background: var(--papier-dunkel); display: block; }
.produkt-karte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms; }
.produkt-karte:hover .produkt-karte__bild img { transform: scale(1.035); }
.produkt-karte__text { padding: 1.1rem 1.2rem 1.25rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.produkt-karte h3 { font-size: 1.08rem; margin: 0; }
.produkt-karte h3 a { text-decoration: none; color: var(--text); }
.produkt-karte h3 a::after { content: ''; position: absolute; inset: 0; } /* ganze Karte klickbar */
.produkt-karte p { margin: 0; color: var(--text-2); font-size: .86rem; line-height: 1.5; }
.produkt-karte__preis { color: var(--kupfer) !important; margin-top: auto !important; padding-top: .7rem; font-size: .7rem !important; text-transform: uppercase; letter-spacing: .1em; }
.produkt-karte .knopf { align-self: flex-start; margin-top: .6rem; position: relative; z-index: 1; }

/* Filter-Leiste (Produktübersicht) */
.pfilter { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.6rem; scroll-margin-top: calc(var(--kopf-hoehe) + 16px); }
.pfilter button { border: 1px solid var(--linie-2); background: var(--weiss); color: var(--text); font-family: var(--schrift-display); font-weight: 600; font-size: .8rem; padding: .5rem .85rem; min-height: 40px; cursor: pointer; }
.pfilter button:hover { border-color: var(--blau); }
.pfilter button[aria-pressed="true"] { background: var(--blau); border-color: var(--blau); color: #fff; }

/* ---------- Icon-Raster („Warum direkt beim Hersteller", Branchen) ---------- */
.vorteile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; border-top: 1px solid var(--linie); border-left: 1px solid var(--linie); background: var(--weiss); }
@media (max-width: 860px) { .vorteile { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .vorteile { grid-template-columns: 1fr; } }
.vorteile li { padding: 1.6rem 1.5rem 1.7rem; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.vorteile .ico { width: 28px; height: 28px; color: var(--kupfer); margin-bottom: 1rem; }
.vorteile h3 { font-size: 1.02rem; margin-bottom: .45rem; }
.vorteile p { margin: 0; color: var(--text-2); font-size: .88rem; line-height: 1.55; }
.branchen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; }
@media (max-width: 860px) { .branchen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .branchen { grid-template-columns: 1fr; } }
.branchen li { background: var(--weiss); border: 1px solid var(--linie); padding: 1.3rem 1.3rem 1.35rem; }
.branchen .ico { width: 24px; height: 24px; color: var(--kupfer); margin-bottom: .8rem; }
.branchen h3 { font-size: .98rem; margin-bottom: .3rem; }
.branchen p { margin: 0; color: var(--text-2); font-size: .84rem; }

/* ---------- Ablauf in vier Schritten ---------- */
.prozess { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 2rem; list-style: none; }
@media (max-width: 900px) { .prozess { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .prozess { grid-template-columns: 1fr; } }
.prozess__schritt { position: relative; padding-top: 1.1rem; }
.prozess__schritt::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--linie-2); }
.prozess__schritt::after { content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 40%; background: var(--kupfer); }
.prozess__nr { color: var(--kupfer); display: block; margin-bottom: .55rem; position: absolute; top: -1.7rem; font-size: .72rem; }
.prozess { padding-top: 1.7rem; }
.prozess__schritt h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.prozess__schritt p { margin: 0; font-size: .88rem; color: var(--text-2); }

/* ---------- Bild + Text ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split--umgekehrt > :first-child { order: 2; }
@media (max-width: 860px) { .split--umgekehrt > :first-child { order: 0; } }
.split__bild { border: 1px solid var(--linie); background: var(--weiss); padding: 6px; }
.split__bild img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.split h2::after { content: ''; display: block; width: 44px; height: 3px; background: var(--kupfer); margin-top: 1.1rem; }
.split p:not(.vorzeile) { color: var(--text-2); }
.haken { list-style: none; display: grid; gap: .7rem; margin: 1.2rem 0 1.6rem; }
.haken li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: .7rem; font-size: .95rem; color: var(--text); }
.haken .ico { width: 16px; height: 16px; color: var(--gruen); margin-top: .25rem; }
.quadrate { list-style: none; display: grid; gap: 0; margin: 1rem 0 1.4rem; }
.quadrate li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--linie); color: var(--text-2); font-size: .95rem; }
.quadrate li::before { content: ''; width: 8px; height: 8px; background: var(--kupfer); margin-top: .5rem; }

/* ---------- CTA-Band ---------- */
.band { background: var(--blau); color: var(--text-hell); padding: clamp(2.6rem, 5vw, 3.6rem) 0; position: relative; overflow: hidden; }
.band::before { content: ''; position: absolute; width: 520px; height: 520px; left: -220px; bottom: -330px; background: radial-gradient(closest-side, rgba(180, 102, 31, .3), rgba(180, 102, 31, 0)); pointer-events: none; }
.band__zeile { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; flex-wrap: wrap; position: relative; }
.band h2 { color: #fff; margin: 0; max-width: 18em; font-size: clamp(1.45rem, 2.6vw, 2rem); }
.band .vorzeile { margin-bottom: .7rem; }
.band p { margin: .6rem 0 0; max-width: 40em; }

/* ---------- Konfigurator-Teaser ---------- */
.teaser { background: var(--weiss); padding: clamp(3.5rem, 7vw, 6rem) 0; }
.teaser__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 860px) { .teaser__raster { grid-template-columns: 1fr; } }
.teaser h2::after { content: ''; display: block; width: 44px; height: 3px; background: var(--kupfer); margin-top: 1.1rem; }
.teaser p:not(.vorzeile) { color: var(--text-2); }
.teaser__schritte { list-style: none; display: grid; gap: 0; margin: 1.4rem 0 1.8rem; border-top: 1px solid var(--linie); }
.teaser__schritte li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: baseline; padding: .8rem 0; border-bottom: 1px solid var(--linie); font-weight: 500; }
.teaser__schritte span { color: var(--kupfer); font-family: var(--schrift-mono); font-size: .75rem; }
.teaser__bild { position: relative; border: 1px solid var(--linie); padding: 6px; background: var(--weiss); }
.teaser__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.teaser__logo-chip { position: absolute; left: 1.2rem; top: 1.2rem; background: var(--blau); color: #fff; padding: .4rem .7rem; font-size: .7rem; letter-spacing: .1em; }

/* ---------- Veredelungen ---------- */
.veredelung { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; }
@media (max-width: 860px) { .veredelung { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .veredelung { grid-template-columns: 1fr; } }
.veredelung__karte { background: var(--weiss); border: 1px solid var(--linie); padding: 1.3rem; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: .2rem 1rem; align-content: start; }
.veredelung__karte h3 { margin: 0; font-size: 1rem; align-self: end; }
.veredelung__karte p { margin: 0; color: var(--text-2); font-size: .86rem; grid-column: 2; }
.veredelung__muster { width: 48px; height: 48px; grid-row: span 2; background: var(--kupfer); position: relative; }
.veredelung__karte--f1 .veredelung__muster { background: conic-gradient(#00AEEF, #EC008C, #FFF200, #231F20, #00AEEF); }
.veredelung__karte--f2 .veredelung__muster { background: linear-gradient(135deg, #F1D27A, #B8923F 45%, #F6E3A1 60%, #8C6A22); }
.veredelung__karte--f3 .veredelung__muster { background: var(--papier-dunkel); box-shadow: inset 3px 3px 6px rgba(0, 0, 0, .16), inset -3px -3px 6px #fff; }
.veredelung__karte--f4 .veredelung__muster { background: var(--blau); }
.veredelung__karte--f5 .veredelung__muster { background: linear-gradient(135deg, var(--blau-3), var(--blau) 50%, #fff 51%, var(--blau) 56%); }
.veredelung__karte--f6 .veredelung__muster::after { content: ''; position: absolute; inset: 12px; background: linear-gradient(135deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .1)); }

/* ---------- FAQ ---------- */
.faq-raster { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 860px) { .faq-raster { grid-template-columns: 1fr; } }
.faq-raster .abschnitt__kopf { position: sticky; top: calc(var(--kopf-hoehe) + 1.5rem); margin-bottom: 0; }
@media (max-width: 860px) { .faq-raster .abschnitt__kopf { position: static; } }
.faq__liste { display: grid; gap: .55rem; }
.faq__eintrag { background: var(--blau); border-radius: 10px; overflow: hidden; }
.faq__eintrag summary { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; min-height: 56px; cursor: pointer; font-family: var(--schrift-display); font-weight: 600; font-size: .95rem; color: #fff; list-style: none; }
.faq__eintrag summary::-webkit-details-marker { display: none; }
.faq__eintrag summary::after { content: '+'; margin-left: auto; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--blau); display: grid; place-items: center; font: 700 18px/1 var(--schrift-text); transition: transform .25s; }
.faq__eintrag[open] summary::after { transform: rotate(45deg); }
.faq__eintrag summary:focus-visible { outline: 3px solid var(--kupfer); outline-offset: -3px; }
.faq__eintrag p { margin: 0; padding: 1rem 1.2rem 1.2rem; background: var(--weiss); color: var(--text-2); font-size: .94rem; border: 1px solid var(--linie); border-top: 0; border-radius: 0 0 10px 10px; }

/* ---------- Ansprechpartner ---------- */
.mensch { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 860px) { .mensch { grid-template-columns: 1fr; } }
.mensch h2::after { content: ''; display: block; width: 44px; height: 3px; background: var(--kupfer); margin-top: 1.1rem; }
.mensch p:not(.vorzeile) { color: var(--text-2); }
.kontaktliste { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--linie); }
.kontaktliste li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: .8rem; padding: .9rem 0; border-bottom: 1px solid var(--linie); }
.kontaktliste .ico { width: 20px; height: 20px; color: var(--kupfer); justify-self: center; }
.kontaktliste small { display: block; color: var(--text-3); font-family: var(--schrift-mono); text-transform: uppercase; letter-spacing: .12em; font-size: .64rem; }
.kontaktliste a { text-decoration: none; font-weight: 600; color: var(--text); }
.kontaktliste a:hover { color: var(--kupfer-2); }

/* ---------- Zahlen ---------- */
.zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; list-style: none; }
@media (max-width: 760px) { .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.zahlen li { background: var(--weiss); border: 1px solid var(--linie); padding: 1.3rem 1.4rem; }
.zahlen strong { display: block; font-family: var(--schrift-display); font-size: 2.1rem; color: var(--blau); line-height: 1; margin-bottom: .4rem; letter-spacing: -.03em; }
.zahlen span { color: var(--text-2); font-size: .86rem; }

/* ---------- Innenseiten ---------- */
.seitenkopf { background: var(--blau); color: var(--text-hell); position: relative; overflow: hidden; isolation: isolate; }
.seitenkopf::before { content: ''; position: absolute; z-index: -1; width: 560px; height: 560px; right: -180px; top: -260px; background: radial-gradient(closest-side, rgba(180, 102, 31, .36), rgba(180, 102, 31, 0)); }
.seitenkopf__raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding: clamp(2.5rem, 5vw, 4rem) 0; }
.seitenkopf__raster--ohne { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 860px) { .seitenkopf__raster { grid-template-columns: 1fr; } }
.seitenkopf h1 { color: #fff; font-size: clamp(2rem, 3.8vw, 2.9rem); max-width: 18em; }
.seitenkopf__text { font-size: 1.04rem; color: var(--text-hell); max-width: 44em; margin-bottom: 0; }
.seitenkopf .knopfreihe { margin-top: 1.6rem; }
.seitenkopf__bild { border: 1px solid rgba(255, 255, 255, .14); padding: 6px; background: rgba(255, 255, 255, .04); }
.seitenkopf__bild img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.prosa { max-width: 72ch; }
.prosa h2 { font-size: 1.45rem; margin-top: 2.2rem; }
.prosa h3 { font-size: 1.12rem; margin-top: 1.6rem; }
.prosa ul, .prosa ol { padding-left: 1.3rem; margin-bottom: 1em; }
.prosa li { margin-bottom: .3em; }
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 860px) { .zweispaltig { grid-template-columns: 1fr; } }
.werte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; list-style: none; }
@media (max-width: 900px) { .werte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .werte { grid-template-columns: 1fr; } }
.werte li { background: var(--weiss); padding: 1.4rem 1.3rem; border: 1px solid var(--linie); border-top: 3px solid var(--kupfer); }
.werte h3 { font-size: 1rem; margin-bottom: .35rem; }
.werte p { margin: 0; color: var(--text-2); font-size: .88rem; }
.grundsaetze { list-style: none; display: grid; gap: 0; counter-reset: g; border-top: 1px solid var(--linie); }
.grundsaetze li { padding: .95rem 0 .95rem 3rem; position: relative; counter-increment: g; border-bottom: 1px solid var(--linie); }
.grundsaetze li::before { content: counter(g, decimal-leading-zero); position: absolute; left: 0; top: 1.05rem; font-family: var(--schrift-mono); color: var(--kupfer); font-size: .75rem; }
.zertkarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; }
@media (max-width: 900px) { .zertkarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.zertkarten li { background: var(--weiss); border: 1px solid var(--linie); padding: 1.3rem; }
.zertkarten strong { display: inline-block; font-family: var(--schrift-mono); font-size: .78rem; letter-spacing: .06em; color: var(--blau); border: 1px solid var(--blau); padding: .3rem .55rem; margin-bottom: .8rem; }
.zertkarten span { display: block; font-size: .88rem; color: var(--text-2); }

/* Produktdetail */
.pd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .pd { grid-template-columns: 1fr; } }
.galerie__haupt { background: var(--weiss); border: 1px solid var(--linie); aspect-ratio: 1 / 1; overflow: hidden; display: block; width: 100%; padding: 0; cursor: zoom-in; }
.galerie__haupt img { width: 100%; height: 100%; object-fit: cover; }
.galerie__daumen { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; list-style: none; margin-top: .6rem; }
.galerie__daumen button { display: block; width: 100%; padding: 0; border: 1px solid var(--linie); background: var(--weiss); cursor: pointer; aspect-ratio: 1 / 1; overflow: hidden; }
.galerie__daumen button[aria-current="true"] { outline: 2px solid var(--blau-aktiv); outline-offset: -2px; }
.galerie__daumen img { width: 100%; height: 100%; object-fit: cover; }
.pd__info h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.pd__teaser { color: var(--text-2); font-size: 1.04rem; }
.pd__chips { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 1.2rem 0 1.6rem; }
.pd__info .kasten { margin-top: 1.8rem; }
.kasten { background: var(--weiss); border: 1px solid var(--linie); padding: 1.3rem; }
.kasten h3 { font-size: 1rem; margin-bottom: .7rem; }
.kasten--tinte { background: var(--blau); color: #fff; border-color: var(--blau); }
.kasten--tinte h3 { color: #fff; }
.spez { display: grid; grid-template-columns: auto 1fr; gap: 0; font-size: .9rem; margin: 0; }
.spez dt, .spez dd { padding: .5rem 0; border-bottom: 1px solid var(--linie); }
.spez dt { color: var(--text-2); }
.spez dd { margin: 0; padding-left: 1rem !important; font-family: var(--schrift-mono); font-size: .82rem; text-align: right; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; }
.chips li { background: var(--weiss); border: 1px solid var(--linie); padding: .35rem .75rem; font-size: .84rem; }
.material-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; }
@media (max-width: 760px) { .material-karten { grid-template-columns: 1fr; } }
.material-karten li { padding: 1.3rem; border: 1px solid var(--linie); background: var(--weiss); }
.material-karten .farbe { width: 100%; height: 56px; margin-bottom: .9rem; border: 1px solid rgba(0, 0, 0, .06); }
.material-karten h3 { font-size: 1rem; margin-bottom: .3rem; }
.material-karten p { margin: 0; color: var(--text-2); font-size: .88rem; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(11, 26, 35, .92); display: grid; place-items: center; padding: 3rem 1rem; }
.lightbox img { max-width: min(1100px, 100%); max-height: 100%; object-fit: contain; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.lightbox button { position: absolute; width: 48px; height: 48px; border: 0; background: rgba(255, 255, 255, .1); color: #fff; font-size: 1.6rem; cursor: pointer; }
.lightbox button:hover { background: rgba(255, 255, 255, .22); }
.lightbox__zu { top: 1rem; right: 1rem; }
.lightbox__vor { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__zurueck { left: 1rem; top: 50%; transform: translateY(-50%); }

/* Formulare */
.formular { display: grid; gap: 1rem; }
.formular__zeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 640px) { .formular__zeile { grid-template-columns: 1fr; } }
.feld { display: grid; gap: .3rem; }
.feld label, .feld > span { font-weight: 600; font-size: .86rem; }
.feld input, .feld select, .feld textarea { width: 100%; padding: .65rem .8rem; border: 1px solid var(--linie-2); border-radius: 0; background: var(--weiss); min-height: 46px; }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--blau); outline: 2px solid rgba(14, 58, 83, .15); outline-offset: 0; }
.feld textarea { min-height: 130px; resize: vertical; }
.feld.ist-fehler input, .feld.ist-fehler textarea, .feld.ist-fehler select { border-color: var(--fehler); }
.feld--check { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; font-weight: 400; }
.feld--check input { width: 20px; height: 20px; min-height: 0; margin-top: .15rem; flex-shrink: 0; accent-color: var(--blau); }
.feld--radio { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.feld--radio label { display: inline-flex; gap: .4rem; align-items: center; font-weight: 400; }
.feld--radio input { width: 18px; height: 18px; min-height: 0; accent-color: var(--blau); }
.formular .knopf { justify-self: start; }
.honig { position: absolute; left: -9999px; }
.kontakt-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; list-style: none; margin-bottom: 1.5rem; }
@media (max-width: 520px) { .kontakt-karten { grid-template-columns: 1fr; } }
.kontakt-karten li { background: var(--weiss); padding: 1.2rem; border: 1px solid var(--linie); }
.kontakt-karten .mono { color: var(--kupfer); text-transform: uppercase; letter-spacing: .14em; font-size: .64rem; }
.kontakt-karten strong { display: block; font-size: 1.02rem; margin: .25rem 0; font-family: var(--schrift-display); }
.kontakt-karten span:last-child { font-size: .84rem; color: var(--text-2); }
.kontakt-karten a { text-decoration: none; }

/* ---------- Fuß ---------- */
.fuss { background: var(--nacht); color: #9FB0BA; padding: clamp(3rem, 6vw, 4.5rem) 0 1.6rem; font-size: .88rem; }
.fuss__raster { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 2.5rem; }
@media (max-width: 960px) { .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .fuss__raster { grid-template-columns: 1fr; } }
.fuss__logo { width: 160px; height: auto; margin-bottom: 1.2rem; display: block; }
.fuss__ueber p { line-height: 1.65; max-width: 30em; }
.fuss__zert { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin-top: 1rem; }
.fuss__zert li { font-family: var(--schrift-mono); font-size: .66rem; letter-spacing: .04em; color: #DCE9F0; border: 1px solid rgba(255, 255, 255, .28); padding: .3rem .5rem; }
.fuss__titel { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 1rem; }
.fuss__liste { list-style: none; display: grid; gap: .5rem; }
.fuss__liste a, .fuss__adresse a { color: #DCE9F0; text-decoration: none; }
.fuss__liste a:hover, .fuss__adresse a:hover { color: #fff; text-decoration: underline; }
.fuss__adresse { line-height: 1.7; }
.fuss__adresse p { margin: 0 0 .9rem; }
.fuss__klein { display: block; font-family: var(--schrift-mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .16em; color: #6F8592; margin-bottom: .15rem; }
.fuss__unten { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 3rem; padding-top: 1.4rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: .78rem; }
.fuss__unten nav { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.fuss__unten a { color: #DCE9F0; text-decoration: none; }
.fuss__unten a:hover { color: #fff; }

/* ---------- Reveal-System ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 650ms cubic-bezier(.2, .7, .3, 1), transform 650ms cubic-bezier(.2, .7, .3, 1); }
.reveal.ist-sichtbar { opacity: 1; transform: none; }
.reveal-gruppe > .reveal:nth-child(2) { transition-delay: 70ms; }
.reveal-gruppe > .reveal:nth-child(3) { transition-delay: 140ms; }
.reveal-gruppe > .reveal:nth-child(4) { transition-delay: 210ms; }
.reveal-gruppe > .reveal:nth-child(5) { transition-delay: 280ms; }
.reveal-gruppe > .reveal:nth-child(6) { transition-delay: 350ms; }
.reveal-gruppe > .reveal:nth-child(n+7) { transition-delay: 420ms; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .knopf, .produkt-karte, .produkt-karte__bild img, .hero__poster { transition: none; }
}

/* ---------- Gemeinsame Bausteine (Konfigurator, Anfrage, Konto) ---------- */
.kfg__dl { display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; margin: 0; font-size: .88rem; }
.kfg__dl dt { color: var(--text-2); }
.kfg__dl dd { margin: 0; text-align: right; }
.kfg__dl .ist-summe { font-weight: 700; color: var(--blau); border-top: 1px solid var(--linie); padding-top: .35rem; }
.kfg__dl--liste dd { text-align: left; }
.kfg__dl--liste { grid-template-columns: auto 1fr; }
.kfg__klein { font-size: .75rem; color: var(--text-2); margin: .6rem 0 0; }
.kfg__link { border: 0; background: none; color: var(--blau); text-decoration: underline; cursor: pointer; padding: .2rem 0; font-size: .85rem; }
.kfg__share { width: 100%; font-family: var(--schrift-mono); font-size: .7rem; padding: .4rem; border: 1px solid var(--linie); }

/* ---------- Anfrageliste (Listen-Layout) ---------- */
.korb { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
@media (max-width: 960px) { .korb { grid-template-columns: 1fr; } }
.korb__liste { display: grid; gap: 1rem; }
.korb__position { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 1rem; background: var(--weiss); border: 1px solid var(--linie); padding: 1rem; align-items: start; }
@media (max-width: 640px) { .korb__position { grid-template-columns: 96px minmax(0, 1fr); } .korb__summe { grid-column: 2; } }
.korb__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--papier-dunkel); }
.korb__titel { font-size: 1.08rem; margin-bottom: .2rem; }
.korb__spez { color: var(--text-2); font-size: .72rem; margin-bottom: .4rem; }
.korb__aktionen { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.korb__menge { display: flex; gap: .5rem; align-items: center; font-size: .85rem; }
.korb__menge input { width: 90px; padding: .45rem .5rem; border: 1px solid var(--linie-2); font-family: var(--schrift-mono); min-height: 40px; }
.korb__summe { font-size: 1.02rem; color: var(--blau); font-weight: 700; }
.anfrage__seite { position: sticky; top: calc(var(--kopf-hoehe) + 1rem); }
.anfrage__kurzliste { list-style: none; display: grid; gap: .6rem; margin-bottom: 1rem; }
.anfrage__kurzliste li { display: grid; grid-template-columns: 56px 1fr auto; gap: .6rem; align-items: center; font-size: .85rem; }
.anfrage__kurzliste img { width: 56px; height: 42px; object-fit: cover; background: var(--papier-dunkel); }
.kasten.ist-fehler { border-color: var(--fehler); }

/* ---------- Kundenkonto ---------- */
.konto { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
@media (max-width: 860px) { .konto { grid-template-columns: 1fr; } }
.konto__nav { list-style: none; display: grid; gap: .2rem; background: var(--weiss); border: 1px solid var(--linie); padding: .5rem; position: sticky; top: calc(var(--kopf-hoehe) + 1rem); }
@media (max-width: 860px) { .konto__nav { position: static; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }
.konto__nav a { display: block; padding: .6rem .8rem; text-decoration: none; font-weight: 600; font-size: .9rem; }
.konto__nav a:hover { background: var(--papier); }
.konto__nav a[aria-current="page"] { background: var(--blau); color: #fff; }
.konto__inhalt { display: grid; gap: 1.2rem; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--weiss); }
.tabelle th, .tabelle td { padding: .7rem .8rem; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: middle; }
.tabelle th { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); background: var(--papier-dunkel); }
.tabelle tr:hover td { background: #F7F9F8; }
.tabelle a { text-decoration: none; font-weight: 600; }
.tabelle-huelle { overflow-x: auto; margin-inline: calc(-1 * var(--rand)); padding-inline: var(--rand); }
.status { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-family: var(--schrift-mono); background: var(--papier-dunkel); color: var(--text); white-space: nowrap; }
.status--neu { background: var(--blau-hell); color: var(--info); }
.status--abgeschlossen, .status--bezahlt, .status--gewonnen { background: var(--gruen-hell); color: var(--ok); }
.status--storniert, .status--verloren, .status--abgelehnt { background: #FBE6E4; color: var(--fehler); }
.status--offen { background: var(--papier-dunkel); }
.designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; list-style: none; }
.designs li { background: var(--weiss); border: 1px solid var(--linie); overflow: hidden; display: grid; }
.designs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--papier-dunkel); }
.designs .designs__text { padding: .8rem .9rem; display: grid; gap: .3rem; font-size: .85rem; }
.designs h3 { font-size: 1rem; margin: 0; }
.designs .designs__aktionen { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: .3rem; }
.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; list-style: none; }
.kpi li { background: var(--weiss); border: 1px solid var(--linie); padding: 1rem 1.1rem; }
.kpi strong { display: block; font-family: var(--schrift-mono); font-size: 1.5rem; color: var(--blau); }
.kpi span { font-size: .8rem; color: var(--text-2); }

/* ---------- Druck ---------- */
@media print {
  .topbar, .kopf, .fuss, .burger, .hinweis, .band { display: none !important; }
  body { background: #fff; }
}

/* ===== Anfrageliste (20.10.2026) ===== */
.anfrage__info { margin: .5rem 0 0; font-size: .72rem; color: var(--text-2); }
.anfrage__preis { font-family: var(--schrift-display); font-size: .95rem; color: var(--kupfer-2); white-space: nowrap; }
.anfrage .korb__liste > .knopf { justify-self: start; margin-top: .4rem; }
.anfrage__form .feld small { display: block; margin-top: .25rem; }
.anfrage__form .feld--check span { font-size: .82rem; font-weight: 400; }
.anfrage__leer { max-width: 520px; }
.anfrage__danke { max-width: 760px; }
.anfrage__ablauf { counter-reset: schritt; list-style: none; padding: 0; margin: 1.6rem 0; display: grid; gap: .7rem; }
.anfrage__ablauf li { counter-increment: schritt; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); align-items: baseline; }
.anfrage__ablauf li::before { content: counter(schritt, decimal-leading-zero); font-family: var(--schrift-mono); color: var(--kupfer); font-size: .8rem; }
.anfrage__kurz { margin-bottom: 1.4rem; }
.kfg__pv { margin-top: 1rem; padding: 1rem 1.1rem 1rem 1.2rem; background: var(--kupfer-hell); border-left: 3px solid var(--kupfer); font-size: .86rem; }
.kfg__pv strong { display: block; font-family: var(--schrift-display); color: var(--text); font-size: .98rem; margin-bottom: .25rem; }
.kfg__pv p { margin: 0; color: var(--text-2); }

/* Topbar schmal (Handy): links Telefon + WhatsApp als gleiche Knoepfe, rechts Sprache */
@media (max-width: 560px) {
  .topbar { font-size: .76rem; }
  .topbar__zeile { gap: .5rem; justify-content: flex-start; }
  .topbar__links, .topbar__rechts { gap: .5rem; }
  .topbar__rechts { margin-left: auto; }
  .topbar__links > a:first-child, .topbar__sozial .topbar__wa { height: 28px; border-radius: 14px; padding: 0 .7rem 0 .55rem; gap: .35rem; width: auto; }
  .topbar__links > a:first-child { border: 1px solid rgba(255, 255, 255, .22); }
  .topbar__links > a:first-child .ico { opacity: 1; color: var(--kupfer-hell); }
  .topbar__links > a:first-child strong { font-weight: 600; letter-spacing: .01em; }
  .topbar__wa span { display: inline; }
}

/* Link-artiger Knopf (POST-Formulare fuer Abmelden etc.) */
.linkknopf{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}

/* ===================== Katalog wie rheinprintpack.de (20.10.2026): Mega-Menü mit 5 Kategorien, Kategorien, Produktanfrage, Produktion, Blog ===================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Navigation: Startseite, Unternehmen, 5 Kategorien, Konfigurator, Kontakt (passt ab 1181 px in eine Zeile, CTA erst ab 1441 px) */
.nav__liste > li > a { font-size: .84rem; padding: 0 clamp(.38rem, .62vw, .7rem); }
.mega--kat { width: min(960px, calc(100vw - 2 * var(--rand))); grid-template-columns: repeat(3, minmax(0, 1fr)) 230px; }
.mega--kat.mega--1 { width: min(520px, calc(100vw - 2 * var(--rand))); grid-template-columns: minmax(0, 1fr) 230px; }
.mega--kat.mega--2 { width: min(740px, calc(100vw - 2 * var(--rand))); grid-template-columns: repeat(2, minmax(0, 1fr)) 230px; }
.mega__link--alle { color: var(--kupfer-2); font-family: var(--schrift-display); font-weight: 600; border-bottom: 0; }
/* „Jetzt gestalten“ nur im Handy-Menue: am Desktop steht „Konfigurator“ im Menue, der Knopf wuerde die Zeile sprengen und das Logo verdraengen */
@media (min-width: 1181px) { .nav__cta { display: none; } }
@media (min-width: 1181px) and (max-width: 1300px) { .nav { gap: .5rem; } .nav__liste > li > a { padding: 0 .32rem; font-size: .82rem; } }
/* Burger schon ab 1180 px (9 Menüpunkte); script.js prüft weiter 960 px – Klick/Akkordeon funktionieren unabhängig davon */
@media (max-width: 1180px) {
  .burger { display: flex; }
  .nav { position: fixed; inset: var(--kopf-hoehe) 0 0 0; background: var(--nacht); flex-direction: column; align-items: stretch; padding: 1rem var(--rand) 2rem; gap: 1.5rem; clip-path: inset(0 0 0 100%); visibility: hidden; transition: clip-path 300ms cubic-bezier(.2, .7, .3, 1), visibility 0s 300ms; overflow: auto; z-index: 99; }
  .nav.ist-offen { clip-path: inset(0); visibility: visible; transition-delay: 0s; }
  .nav__liste { flex-direction: column; }
  .nav__liste > li { flex-wrap: wrap; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .nav__liste > li > a { padding: .95rem .8rem; font-size: 1.1rem; flex: 1; }
  .nav__pfeil { display: none; }
  .nav__auf { display: grid; place-items: center; width: 52px; min-height: 52px; border: 0; border-left: 1px solid rgba(255, 255, 255, .1); background: none; color: #E9EEF1; cursor: pointer; }
  .nav__auf .ico { width: 18px; height: 18px; transition: transform var(--uebergang); }
  .nav__auf[aria-expanded="true"] .ico { transform: rotate(180deg); }
  .mega, .mega--mini, .mega--kat, .mega--kat.mega--1, .mega--kat.mega--2 { position: static; transform: none; width: 100%; display: none; grid-template-columns: minmax(0, 1fr); gap: 0; padding: .4rem .8rem 1rem; background: rgba(255, 255, 255, .04); border-top: 0; box-shadow: none; visibility: visible; opacity: 1; transition: none; color: #DCE9F0; }
  .hat-mega:hover > .mega, .hat-mega:focus-within > .mega { display: none; }
  .hat-mega.ist-offen > .mega { display: grid; }
  .mega__link { color: #DCE9F0; border-bottom-color: rgba(255, 255, 255, .08); font-size: .98rem; padding: .7rem 0; }
  .mega__link:hover { color: #fff; }
  .mega__link--alle { color: #E09A5A; }
  .mega__promo { margin-top: 1rem; }
  .nav__werkzeuge { flex-wrap: wrap; gap: 1rem; }
  .nav__cta { display: inline-flex; flex-basis: 100%; justify-content: center; }
}
/* Produktraster mit 4 Spalten (Kategorien, Übersicht) + Füllkachel für die letzte Reihe */
.produkte--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .produkte--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .produkte--vier { grid-template-columns: 1fr; } }
.produkte--vier .produkt-karte h3 { font-size: 1rem; }
.produkt-fuell { grid-column: span var(--rest, 4); background: var(--blau); color: var(--text-hell); padding: 1.6rem 1.5rem; display: flex; flex-direction: column; justify-content: center; gap: .5rem; min-height: 200px; }
.produkt-fuell h3 { color: #fff; font-size: 1.15rem; margin: 0; }
.produkt-fuell p:not(.vorzeile) { color: #BBD2DE; font-size: .9rem; margin: 0 0 .6rem; }
.produkt-fuell .knopf { align-self: flex-start; }
@media (max-width: 1100px) { .produkt-fuell { grid-column: 1 / -1; } }
.kat-gruppe { scroll-margin-top: calc(var(--kopf-hoehe) + 16px); }
.kat-gruppe + .kat-gruppe { margin-top: clamp(3rem, 6vw, 4.5rem); }
.pfilter__link { border: 1px solid var(--linie-2); background: var(--weiss); color: var(--text); font-family: var(--schrift-display); font-weight: 600; font-size: .82rem; padding: .55rem .85rem; text-decoration: none; display: inline-flex; gap: .45rem; align-items: center; }
.pfilter__link span { color: var(--kupfer); font-size: .7rem; }
.pfilter__link:hover { border-color: var(--blau); color: var(--blau); }
.kat__anzahl { color: var(--kupfer); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; margin: 0; }
.kat__andere { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.kat__andere a { text-decoration: none; }
.kat__andere a:hover { border-color: var(--blau); }
/* Startseite: Kategorie-Kacheln (5 + Konfigurator = 3 x 2) */
.katkacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; }
@media (max-width: 900px) { .katkacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .katkacheln { grid-template-columns: 1fr; } }
.katkachel { position: relative; min-height: 260px; background: var(--blau); color: var(--text-hell); overflow: hidden; isolation: isolate; display: flex; align-items: flex-end; }
.katkachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 600ms; }
.katkachel::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 44, 64, .05) 20%, rgba(10, 44, 64, .92) 100%); }
.katkachel:hover img { transform: scale(1.04); }
.katkachel__text { padding: 1.3rem 1.4rem 1.4rem; }
.katkachel h3 { margin: 0 0 .35rem; font-size: 1.25rem; }
.katkachel h3 a { color: #fff; text-decoration: none; }
.katkachel h3 a::after { content: ''; position: absolute; inset: 0; }
.katkachel p:not(.vorzeile) { margin: 0; font-size: .86rem; color: #D5E2EA; }
.katkachel .vorzeile { margin-bottom: .35rem; }
.katkachel--kfg { background: var(--nacht); }
.katkachel--kfg::before { background: radial-gradient(closest-side at 80% 10%, rgba(180, 102, 31, .38), rgba(180, 102, 31, 0)); }
.katkachel--kfg .ico { width: 34px; height: 34px; color: #E09A5A; margin-bottom: .8rem; }
/* Produktseite: Angebot anfordern (Menge + Notiz -> Anfrageliste), Downloads */
.pd-anfrage { margin-top: 1.4rem; }
.pd-anfrage__text { font-size: .9rem; color: var(--text-2); margin: 0 0 .9rem; }
.pd-anfrage .feld { margin-bottom: .8rem; }
.pd-anfrage .knopf .ico { width: 18px; height: 18px; }
.pd-anfrage__ok { margin: .8rem 0 0; padding: .7rem .9rem; background: var(--kupfer-hell); font-size: .9rem; }
.pd-anfrage__ok a { font-weight: 600; }
.downloads { list-style: none; border-top: 1px solid var(--linie); }
.downloads li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--linie); }
.downloads .ico { width: 22px; height: 22px; color: var(--kupfer); }
.downloads small { display: block; color: var(--text-3); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
/* Anfrageliste: Produktanfragen ohne Design */
.anfrage__notiz { display: block; margin: .5rem 0 .2rem; }
.anfrage__notiz span { display: block; font-size: .78rem; color: var(--text-2); margin-bottom: .25rem; }
.anfrage__notiz textarea { width: 100%; }
.anfrage__mehr { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.anfrage__neu { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.anfrage__neu select { min-height: 44px; max-width: 100%; min-width: 0; flex: 1 1 220px; }
.anfrage__leer .anfrage__neu { margin-top: 1rem; }
/* Produktion: Maschinentabelle, Ablauf in 6 Schritten */
.maschinen { width: 100%; border-collapse: collapse; background: var(--weiss); font-size: .92rem; min-width: 560px; }
.maschinen th, .maschinen td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.maschinen thead th { font-family: var(--schrift-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--kupfer); border-bottom: 2px solid var(--blau); }
.maschinen tbody th { font-family: var(--schrift-display); }
.ablauf6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; list-style: none; }
@media (max-width: 1000px) { .ablauf6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ablauf6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ablauf6 li { background: var(--weiss); border: 1px solid var(--linie); border-top: 3px solid var(--kupfer); padding: 1rem 1.1rem 1.2rem; font-family: var(--schrift-display); font-weight: 600; }
.ablauf6 span { display: block; color: var(--kupfer); font-size: .72rem; margin-bottom: .4rem; font-weight: 400; }
.werte--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.werte--eins { grid-template-columns: 1fr; margin-top: 1.2rem; }
@media (max-width: 480px) { .werte--zwei { grid-template-columns: 1fr; } }
.prozess__nr-inline { display: block; color: var(--kupfer); font-size: .72rem; margin-bottom: .6rem; }
/* Blog */
.blogkarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.9rem, 1.8vw, 1.4rem); list-style: none; }
@media (max-width: 900px) { .blogkarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .blogkarten { grid-template-columns: 1fr; } }
.blogkarte { background: var(--weiss); border: 1px solid var(--linie); display: flex; flex-direction: column; position: relative; }
.blogkarte:hover { border-color: var(--linie-2); box-shadow: var(--schatten); }
.blogkarte__bild { aspect-ratio: 16 / 10; overflow: hidden; display: block; background: var(--blau); }
.blogkarte__bild img { width: 100%; height: 100%; object-fit: cover; }
.blogkarte__text { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.blogkarte h3 { font-size: 1.04rem; margin: 0; line-height: 1.3; }
.blogkarte h3 a { color: var(--text); text-decoration: none; }
.blogkarte h3 a::after { content: ''; position: absolute; inset: 0; }
.blogkarte p { margin: 0; color: var(--text-2); font-size: .86rem; }
.blogkarte__mehr { margin-top: auto; padding-top: .6rem; color: var(--kupfer-2); font-family: var(--schrift-display); font-weight: 600; font-size: .84rem; }
.beitrag { max-width: 820px; }
.beitrag__cover { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 2rem; background: var(--blau); }
.beitrag__text { max-width: none; }
.beitrag__text p, .beitrag__text li { color: var(--text-2); }
.beitrag__text b, .beitrag__text strong { color: var(--text); }
.beitrag__cta { margin-top: 2.4rem; }
/* Unsichtbare Mega-Panels (visibility:hidden, absolut) dürfen keinen horizontalen Scrollbereich erzeugen; sichtbare hält script.js im Fenster */
.kopf { overflow-x: clip; }

/* ===== Startseite: Slider wie rheinprintpack.de (5 Bilder), ruhiger, filmischer Wechsel =====
   Ablauf je Wechsel: altes Bild dreht sich weich weg (0,9 s) → neues Bild dreht sich aus der Tiefe herein (1,4 s, Start 0,7 s)
   → Text Zeile fuer Zeile → Bild steht mit langsamer Kamerafahrt (Gesamtdauer je Bild: --hdauer, 6,5 s). */
.hslider { display: grid; }
.hslide { grid-area: 1 / 1; visibility: hidden; pointer-events: none; transition: visibility 0s linear .95s; }
.hslide.ist-aktiv { visibility: visible; pointer-events: auto; transition: none; z-index: 1; }
.hero__titel { color: #fff; font-size: clamp(2rem, 4.2vw, 3.3rem); margin-bottom: 1.2rem; max-width: 13em; line-height: 1.08; }
.hero__bild { position: relative; width: 100%; max-width: 560px; justify-self: end; aspect-ratio: 1 / .92; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.hero__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hslide .hero__bild { opacity: 0; transform: perspective(1600px) rotateY(-22deg) rotateZ(3deg) translateX(60px) scale(.86); filter: blur(4px); will-change: transform, opacity, filter; }
.hslide.ist-aktiv .hero__bild { animation: hbildRein 1.4s cubic-bezier(.22, 1, .36, 1) .7s both; }
.hslide.war-aktiv .hero__bild { animation: hbildRaus .9s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes hbildRein {
  0% { opacity: 0; transform: perspective(1600px) rotateY(-22deg) rotateZ(3deg) translateX(60px) scale(.86); filter: blur(4px); }
  45% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: perspective(1600px) rotateY(0) rotateZ(0) translateX(0) scale(1); filter: blur(0); }
}
@keyframes hbildRaus {
  0% { opacity: 1; transform: perspective(1600px) rotateY(0) rotateZ(0) translateX(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: perspective(1600px) rotateY(18deg) rotateZ(-3deg) translateX(-60px) scale(1.08); filter: blur(3px); }
}
/* waehrend das Bild steht: langsame Kamerafahrt */
.hslide.ist-aktiv .hero__bild img { animation: hzoom var(--hdauer, 6.5s) cubic-bezier(.25, .1, .25, 1) .9s both; }
@keyframes hzoom { from { transform: scale(1.04) rotate(0); } to { transform: scale(1.11) rotate(.5deg); } }
/* Text: Zeilen gleiten nacheinander von unten herein, beim Gehen sanft nach oben weg */
.hslide .hero__text-spalte > * { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .9s cubic-bezier(.22, 1, .36, 1); }
.hslide.ist-aktiv .hero__text-spalte > * { opacity: 1; transform: none; }
.hslide.ist-aktiv .hero__text-spalte > :nth-child(1) { transition-delay: .85s; }
.hslide.ist-aktiv .hero__text-spalte > :nth-child(2) { transition-delay: .97s; }
.hslide.ist-aktiv .hero__text-spalte > :nth-child(3) { transition-delay: 1.09s; }
.hslide.ist-aktiv .hero__text-spalte > :nth-child(4) { transition-delay: 1.21s; }
.hslide.ist-aktiv .hero__text-spalte > :nth-child(5) { transition-delay: 1.33s; }
.hslide.war-aktiv .hero__text-spalte > * { opacity: 0; transform: translateY(-12px); transition-duration: .5s; transition-delay: 0s; }
/* Fortschritt im aktiven Punkt */
.hslider .hero__punkt { position: relative; }
.hslider .hero__punkt[aria-pressed="true"]::before { background: rgba(255, 255, 255, .25); }
.hslider .hero__punkt[aria-pressed="true"]::after { content: ''; position: absolute; left: 2px; top: 50%; height: 3px; margin-top: -1.5px; width: 26px; background: var(--blau-aktiv); transform-origin: left; animation: hfortschritt var(--hdauer, 6.5s) linear both; }
.hslider.ist-pausiert .hero__punkt[aria-pressed="true"]::after { animation-play-state: paused; }
@keyframes hfortschritt { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 900px) { .hero__bild { justify-self: center; max-width: 520px; } }
@media (prefers-reduced-motion: reduce) {
  .hslide .hero__bild, .hslide .hero__text-spalte > * { transition: none; animation: none !important; transform: none; filter: none; }
  .hslide.ist-aktiv .hero__bild { opacity: 1; }
  .hslide:not(.ist-aktiv) { opacity: 0; }
  .hslide.ist-aktiv .hero__bild img, .hslider .hero__punkt::after { animation: none; }
}

/* ===== Startseite: kleiner 3D-Konfigurator-Abschnitt ===== */
.kfgband__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.kfgband__text p:not(.vorzeile) { color: var(--text-2); max-width: 34em; }
.kfgband__liste { list-style: none; margin: 1rem 0 1.6rem; padding: 0; display: grid; gap: .5rem; }
.kfgband__liste li { display: flex; gap: .5rem; align-items: flex-start; }
.kfgband__liste svg { color: var(--kupfer); flex: none; margin-top: .2rem; }
.kfgband__kasten { position: relative; background: var(--blau); padding: 1rem 1rem 4rem; }
.kfgband__buehne { aspect-ratio: 4 / 3; max-height: 400px; margin: 0 auto; }
.kfgband__buehne .hero__poster { inset: 8%; width: 84%; height: 84%; }
.kfgband__buehne .hero__etikett { bottom: -1.7rem; }
.kfgband__punkte { position: absolute; left: 0; right: 0; bottom: .3rem; display: flex; justify-content: center; gap: .4rem; }
@media (max-width: 900px) { .kfgband__raster { grid-template-columns: 1fr; } }

/* ===== Kundenkonto: Anmelden / Registrieren ===== */
.auth { background: var(--papier); }
.auth__huelle { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 360px); gap: clamp(1.5rem, 4vw, 3.5rem); justify-content: center; align-items: start; }
.auth__karte { background: #fff; border: 1px solid var(--linie); border-top: 3px solid var(--kupfer); padding: clamp(1.5rem, 4vw, 2.4rem); }
.auth__karte h1 { font-size: clamp(1.6rem, 3vw, 2rem); margin: .2rem 0 1.2rem; }
.auth__tabs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--linie); margin-bottom: 1.2rem; }
.auth__tabs a { text-align: center; padding: .7rem .5rem; text-decoration: none; color: var(--text-2); font-weight: 600; font-size: .92rem; }
.auth__tabs a[aria-selected="true"] { background: var(--blau); color: #fff; }
.auth__form { display: grid; gap: 1rem; }
.auth__feld { display: grid; gap: .4rem; }
.auth__feld > span:first-child { font-weight: 600; font-size: .92rem; }
.auth__feld small { font-weight: 400; color: var(--text-2); }
.auth__feld input, .auth__pw input { width: 100%; font: inherit; font-size: 1rem; padding: .85rem 1rem; border: 1.5px solid #CBD3D0; border-radius: 2px; background: #FBFCFB; color: var(--text); transition: border-color .15s, box-shadow .15s, background .15s; }
.auth__feld input::placeholder { color: #9AA6A3; }
.auth__feld input:hover { border-color: #A9B4B1; }
.auth__feld input:focus { outline: none; border-color: var(--blau-aktiv); background: #fff; box-shadow: 0 0 0 3px rgba(29, 127, 191, .15); }
.auth__feld.ist-fehler input { border-color: var(--fehler); }
.auth__pw { position: relative; display: block; }
.auth__pw input { padding-right: 3rem; }
.auth__auge { position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); width: 2.4rem; height: 2.4rem; border: 0; background: none; cursor: pointer; opacity: .55; font-size: 1.05rem; }
.auth__auge:hover { opacity: 1; }
.auth__code { font-family: var(--schrift-mono) !important; font-size: 1.9rem !important; letter-spacing: .5em; text-align: center; padding: .7rem !important; }
.auth__meldung { padding: .75rem 1rem; background: var(--blau-hell, #E2EEF6); color: var(--blau); border-left: 3px solid var(--blau-aktiv); font-size: .92rem; margin: 0 0 1rem; }
.auth__meldung--fehler { background: #FBE7E5; color: #8C1D18; border-left-color: var(--fehler); }
.auth__text { color: var(--text-2); font-size: .95rem; margin: 0 0 1rem; }
.auth__klein { font-size: .88rem; margin: .2rem 0 0; }
.auth__neu { font-size: .88rem; margin-top: 1rem; color: var(--text-2); }
.auth__unten { border-top: 1px solid var(--linie); margin: 1.5rem 0 0; padding-top: 1rem; font-size: .92rem; }
.auth__schritte { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; padding: 0; margin: 0 0 1.2rem; counter-reset: s; }
.auth__schritte li { counter-increment: s; font-size: .78rem; color: var(--text-2); border-top: 3px solid var(--linie); padding-top: .4rem; }
.auth__schritte li::before { content: counter(s) ". "; font-family: var(--schrift-mono); }
.auth__schritte li[aria-current="step"] { color: var(--text); font-weight: 700; border-top-color: var(--kupfer); }
.auth__vorteile { padding-top: 2.2rem; }
.auth__vorteile h2 { font-size: 1.2rem; margin-bottom: 1rem; }
.auth__vorteile ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.auth__vorteile li { padding-left: 1.6rem; position: relative; color: var(--text-2); }
.auth__vorteile li::before { content: '✓'; position: absolute; left: 0; color: var(--kupfer); font-weight: 700; }
@media (max-width: 860px) { .auth__huelle { grid-template-columns: minmax(0, 1fr); } .auth__vorteile { padding-top: 0; } }
/* Kundenkonto innen */
.konto__abmelden button { background: none; border: 0; padding: .55rem .9rem; font: inherit; color: var(--text-2); cursor: pointer; }
.konto__abmelden button:hover { color: var(--kupfer); }
.konto__kopfzeile { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.konto__kopfzeile h2 { margin: 0; }
.konto__designs { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.konto__designs a { display: grid; gap: .3rem; text-decoration: none; color: var(--text); font-size: .88rem; }
.konto__designs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--papier); border: 1px solid var(--linie); }
.anfrage__konto { font-size: .84rem; background: var(--blau-hell); color: var(--blau); padding: .6rem .75rem; margin: 0 0 1rem; line-height: 1.45; }
.anfrage__konto a { color: inherit; font-weight: 600; }

/* Schnellanfrage: Briefumschlag in der Kopfleiste (nur Handy) + Dialog */
.topbar__brief { display: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); background: none; color: #fff; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.topbar__brief .ico { width: 14px; height: 14px; opacity: 1; color: var(--kupfer-hell); }
.topbar__brief:hover, .topbar__brief:focus-visible { background: rgba(255, 255, 255, .1); }
@media (max-width: 560px) {
  .topbar__brief { display: inline-flex; }
  .topbar .topbar__mail { display: none; }
  .topbar__sozial { gap: .5rem; }
}
@media (max-width: 420px) { .topbar__wa span { display: none; } .topbar__sozial .topbar__wa { padding: 0; width: 28px; justify-content: center; } }
.schnell { border: 0; padding: 0; width: min(560px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); box-shadow: 0 24px 70px rgba(10, 26, 35, .35); color: var(--text); }
.schnell::backdrop { background: rgba(10, 26, 35, .55); backdrop-filter: blur(2px); }
.schnell[open] { animation: schnell-rein .22s ease-out; }
@keyframes schnell-rein { from { opacity: 0; transform: translateY(12px); } }
.schnell__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.3rem 1.4rem 1rem; background: var(--blau); color: #fff; }
.schnell__kopf .vorzeile { color: var(--kupfer-hell); margin: 0 0 .25rem; }
.schnell__kopf h2 { margin: 0; font-size: 1.45rem; color: #fff; }
.schnell__zu { background: none; border: 0; color: #fff; font-size: 1.8rem; line-height: 1; width: 40px; height: 40px; margin: -.4rem -.6rem 0 0; cursor: pointer; opacity: .8; }
.schnell__zu:hover { opacity: 1; }
.schnell__inhalt, .schnell__danke { padding: 1.2rem 1.4rem 1.4rem; }
.schnell__intro { margin: 0 0 1rem; color: var(--text-2); font-size: .92rem; }
.schnell__zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .9rem; }
.schnell .feld { margin-bottom: .8rem; }
.schnell textarea { resize: vertical; }
.schnell .feld--check span { font-size: .8rem; font-weight: 400; }
.schnell__fehler { background: #F6E1DE; color: #8A2A1F; padding: .55rem .75rem; font-size: .86rem; margin: 0 0 .8rem; }
.schnell__alternativ { text-align: center; font-size: .85rem; color: var(--text-2); margin: .8rem 0 0; }
.schnell__alternativ a { color: var(--blau); font-weight: 600; }
.schnell__danke { text-align: center; padding: 2rem 1.4rem; }
.schnell__haken { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--gruen-hell); color: var(--gruen); font-size: 1.6rem; font-weight: 700; margin-bottom: .6rem; }
.schnell__danke h3 { margin: 0 0 .4rem; }
.schnell__danke p { color: var(--text-2); margin: 0 0 1.2rem; }
@media (max-width: 560px) {
  .schnell { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; }
  .schnell[open] { animation-name: schnell-hoch; }
  @keyframes schnell-hoch { from { transform: translateY(40px); opacity: .4; } }
  .schnell__zeile { grid-template-columns: 1fr; }
}

/* Kundenkonto: einzelnes Angebot */
.kangebot__zurueck { margin: 0 0 .8rem; font-size: .9rem; }
.kangebot__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.kangebot__kopf .vorzeile { margin: 0 0 .25rem; }
.kangebot__kopf h2 { font-size: 1.15rem; margin: 0; }
.kangebot__hinweis { padding: .75rem 1rem; margin: 0 0 1.2rem; font-size: .9rem; }
.kangebot__positionen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.kangebot__pos { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--linie); }
.kangebot__pos--alt { opacity: .72; }
.kangebot__bild { width: 72px; height: 72px; object-fit: contain; background: var(--papier); border: 1px solid var(--linie); }
.kangebot__nr { width: 72px; height: 72px; display: grid; place-items: center; background: var(--papier); color: var(--text-2); }
.kangebot__text p { margin: .25rem 0 0; font-size: .86rem; color: var(--text-2); }
.kangebot__alt { font-size: .72rem; background: var(--kupfer-hell); color: var(--kupfer-2); padding: .1rem .4rem; margin-left: .3rem; }
.kangebot__zahlen { display: flex; gap: 1.4rem; margin: 0; text-align: right; }
.kangebot__zahlen dt { font-size: .72rem; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; }
.kangebot__zahlen dd { margin: .15rem 0 0; white-space: nowrap; }
.kangebot__summen { margin: 1rem 0 0 auto; border-collapse: collapse; min-width: min(100%, 340px); }
.kangebot__summen td { padding: .3rem 0; }
.kangebot__summen td:last-child { text-align: right; padding-left: 1.5rem; white-space: nowrap; }
.kangebot__brutto td { border-top: 2px solid var(--text); padding-top: .55rem; font-weight: 700; font-size: 1.05rem; }
.kangebot__aktionen { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: flex-end; margin-top: 1.4rem; }
.kangebot__aktionen form { margin: 0; }
@media (max-width: 640px) {
  .kangebot__pos { grid-template-columns: 56px minmax(0, 1fr); }
  .kangebot__bild, .kangebot__nr { width: 56px; height: 56px; }
  .kangebot__zahlen { grid-column: 1 / -1; justify-content: space-between; text-align: left; }
  .kangebot__aktionen { flex-direction: column; } .kangebot__aktionen .knopf { width: 100%; justify-content: center; }
}

/* Kundenkonto: Newsletter-Kasten (Einwilligung bleibt aktiv), Passwort */
.konto-nl { border-left: 4px solid var(--kupfer); background: linear-gradient(135deg, #fff 60%, var(--kupfer-hell)); }
.konto-nl h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
.konto-nl--an { border-left-color: var(--gruen); background: var(--gruen-hell); }
.konto-nl--an h2 { color: var(--gruen); }
.konto-nl__punkte { margin: 0 0 .8rem; padding-left: 1.2rem; }
.konto-nl__punkte li { margin: .2rem 0; }
.konto-nl__einw { font-size: .8rem; margin: 0 0 .8rem; }
.kanfragen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.kanfrage { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .8rem .2rem; border-bottom: 1px solid var(--linie); text-decoration: none; color: var(--text); }
.kanfrage:hover { background: var(--papier); }
.kanfrage__bild { width: 56px; height: 56px; object-fit: contain; background: var(--papier); border: 1px solid var(--linie); display: grid; place-items: center; color: var(--text-3); }
.kanfrage__text { display: grid; gap: .15rem; min-width: 0; }
.kanfrage__text small { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanfrage__h3 { font-size: .95rem; margin: 1.2rem 0 .4rem; }
.kanfrage__notiz { background: var(--papier); padding: .8rem 1rem; margin: 0; font-size: .92rem; }
@media (max-width: 640px) { .kanfrage { grid-template-columns: 48px minmax(0, 1fr); } .kanfrage__status { grid-column: 2; } .kanfrage__bild { width: 48px; height: 48px; } }

/* Cookie-Einwilligung (wie rheinprintpack.de) */
.cc { position: fixed; z-index: 90; left: 50%; bottom: 1rem; width: min(720px, calc(100vw - 2rem)); transform: translate(-50%, 20px); opacity: 0; transition: opacity .25s, transform .25s; background: #fff; color: var(--text); border: 1px solid var(--linie); box-shadow: 0 18px 50px rgba(10, 26, 35, .28); padding: 1.3rem 1.4rem 1.3rem; }
.cc.ist-offen { opacity: 1; transform: translate(-50%, 0); }
.cc__titel { font-size: 1.1rem; margin: 0 0 .55rem; }
.cc__text { font-size: .9rem; color: var(--text-2); margin: 0 0 1rem; line-height: 1.55; }
.cc__text a { color: var(--text-2); text-decoration: underline; }
.cc__wahl { display: grid; gap: .5rem; margin: 0 0 1rem; padding: .8rem 1rem; background: var(--papier); }
.cc__kat { display: flex; align-items: center; gap: .6rem; font-size: .92rem; cursor: pointer; }
.cc__kat input { width: 18px; height: 18px; accent-color: var(--kupfer-2); }
.cc__knoepfe { display: flex; gap: .7rem; flex-wrap: wrap; }
.cc__knoepfe .knopf { padding: .6rem 1.1rem; font-size: .9rem; }
.fuss__cookies { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.fuss__cookies:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .cc { bottom: 0; width: 100vw; border-left: 0; border-right: 0; padding: 1.2rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
  .cc__knoepfe { flex-direction: column; }
  .cc__knoepfe .knopf { width: 100%; justify-content: center; }
}
@media print { .cc { display: none !important; } }
/* Schwebender WhatsApp-Knopf (52 px + 16 px Abstand) darf die Rechtslinks unten im Fuss nicht verdecken */
body:has(.wa-knopf) .fuss__unten { padding-bottom: 84px; }

/* Farbwunsch aus dem Konfigurator (Anfrage) */
.farbwunsch { white-space: nowrap; }
.farbwunsch i { display: inline-block; width: .8em; height: .8em; border: 1px solid rgba(0,0,0,.25); border-radius: 50%; vertical-align: -.05em; margin-right: .25em; }

/* Anzahlung im Kundenkonto-Angebot */
.kangebot__anzahlung td { padding-top: .5rem; font-weight: 600; }