/* LichtRaum LRM. Designsprache "Kantenlicht": dunkler Raum, leuchtende Flächen, Rand mit LED-Punkten. Siehe DESIGN.md. */
@font-face { font-family: 'Archivo'; src: url(/assets/fonts/archivo-latin-wdth-normal.woff2) format('woff2'); font-weight: 400 800; font-stretch: 100% 125%; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, 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-wdth-normal.woff2) format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; src: url(/assets/fonts/source-sans-3-latin-wght-normal.woff2) format('woff2'); font-weight: 200 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Sans 3'; src: url(/assets/fonts/source-sans-3-latin-ext-wght-normal.woff2) format('woff2'); font-weight: 200 900; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --nacht: #141517; --graphit: #1c1e21; --stahl: #272a2e; --linie: #383c42;
  --text: #e9eaec; --leise: #a7acb3; --licht: #f1f2f3; --tinte: #15171a; --tinte-leise: #4a4f57;
  --glut: #ffd79a; --kalt: #cfe3ff;
  --lk: 255 214 153;
  --kopf: 'Archivo', 'Arial Narrow', system-ui, sans-serif; --fliess: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px; --s6: 64px; --s7: 104px;
  --rand: clamp(16px, 4vw, 40px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--nacht); color: var(--text); font: 400 18px/1.62 var(--fliess); overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--glut); text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--glut); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--licht); color: var(--tinte); padding: 8px 16px; z-index: 100; }
.skip:focus { left: 8px; }
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--rand); }
h1, h2, h3 { font-family: var(--kopf); font-stretch: 112%; margin: 0 0 var(--s3); line-height: 1.12; color: #fff; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 5.2vw, 4rem); font-weight: 700; font-stretch: 118%; line-height: 1.04; letter-spacing: -.012em; }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.5rem); font-weight: 650; letter-spacing: -.006em; }
h3 { font-size: 1.2rem; font-weight: 650; font-stretch: 105%; }
p { margin: 0 0 var(--s3); }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.32rem); color: #d4d7db; max-width: 60ch; }
.klein { font-size: .92rem; color: var(--leise); }
section { padding-block: var(--s6); }
@media (min-width: 900px) { section { padding-block: var(--s7); } }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; background: var(--licht); color: var(--tinte); font: 650 .98rem/1.2 var(--kopf); font-stretch: 108%; text-decoration: none; border: 1px solid var(--licht); border-radius: 2px; cursor: pointer; transition: box-shadow .25s, background .25s, color .25s; }
.knopf:hover { color: var(--tinte); background: #fff; box-shadow: 0 10px 28px -10px rgb(var(--lk) / .75); }
.knopf-linie { background: transparent; color: #fff; border-color: rgb(255 255 255 / .45); }
.knopf-linie:hover { background: rgb(255 255 255 / .08); color: #fff; border-color: rgb(var(--lk)); box-shadow: none; }
.knopf-klein { min-height: 40px; padding: 8px 16px; font-size: .9rem; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s4); }
.pfeil { font-family: var(--kopf); font-stretch: 105%; font-weight: 600; text-decoration: none; color: var(--glut); }
.pfeil::after, .aw-liste a::after, .z-pfeil::after { content: ""; display: inline-block; width: 1em; height: 1em; margin-left: .45em; vertical-align: -.14em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='square'%3E%3Cpath d='M3 12h17M13 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='square'%3E%3Cpath d='M3 12h17M13 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .25s cubic-bezier(.16,1,.3,1); }
.pfeil:hover::after, .aw-liste a:hover::after, .zeile a:hover .z-pfeil::after { transform: translateX(4px); }
.pfeil:hover { color: #fff; }

/* Kopf */
.hinweisleiste { background: var(--glut); color: var(--tinte); font-size: .95rem; text-align: center; padding: 8px 0; }
.hinweisleiste p { margin: 0; } .hinweisleiste a { color: var(--tinte); font-weight: 700; }
.kopf { position: sticky; top: 0; z-index: 50; background: var(--nacht); border-bottom: 1px solid var(--linie); }
.kopf-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 72px; }
.marke img { width: 160px; height: auto; }
@media (min-width: 900px) { .marke img { width: 193px; } }
.hauptnav ul { display: flex; gap: var(--s4); list-style: none; margin: 0; padding: 0; }
.hauptnav a:not(.knopf) { color: var(--text); text-decoration: none; font: 600 .95rem var(--kopf); font-stretch: 105%; padding: 6px 0; border-bottom: 2px solid transparent; }
.hauptnav a:not(.knopf):hover, .hauptnav a[aria-current] { border-bottom-color: rgb(var(--lk)); color: #fff; }
.menu-knopf { display: none; }
@media (min-width: 900px) { .hauptnav { display: flex; align-items: center; gap: var(--s5); } }
@media (max-width: 899px) {
  .menu-knopf { display: inline-flex; align-items: center; gap: 10px; background: none; color: #fff; border: 1px solid var(--linie); padding: 8px 14px; font: 600 .95rem var(--kopf); cursor: pointer; min-height: 44px; }
  .menu-strich, .menu-strich::before, .menu-strich::after { display: block; width: 20px; height: 2px; background: #fff; position: relative; }
  .menu-strich::before, .menu-strich::after { content: ""; position: absolute; left: 0; } .menu-strich::before { top: -6px; } .menu-strich::after { top: 6px; }
  .hauptnav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--nacht); border-bottom: 1px solid var(--linie); padding: var(--s3) var(--rand) var(--s4); }
  .hauptnav.offen { display: block; } .hauptnav ul { flex-direction: column; gap: 0; } .hauptnav li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--stahl) !important; font-size: 1.1rem; }
  .hauptnav .knopf { margin-top: var(--s3); width: 100%; }
}
.krumen { padding-top: var(--s3); font-size: .88rem; color: var(--leise); } .krumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; padding: 0; }
.krumen li + li::before { content: "/"; margin-right: 10px; color: var(--linie); } .krumen a { color: var(--leise); }

/* Startseite: Held */
.held { padding-block: var(--s5) var(--s6); background: radial-gradient(90% 70% at 85% 30%, rgb(var(--lk) / .14), transparent 70%); }
.held-in { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 1000px) { .held-in { grid-template-columns: 1fr 1.08fr; gap: var(--s6); } .held { padding-block: var(--s6) var(--s7); } }
.held-lead { font-size: clamp(1.1rem, 1.5vw, 1.28rem); color: #d4d7db; max-width: 52ch; }
.held-zeile { font: 600 clamp(1rem, 1.6vw, 1.2rem) var(--kopf); font-stretch: 112%; color: rgb(var(--lk)); margin: var(--s4) 0 0; }
[data-glut] { box-shadow: 0 1px 0 rgb(255 255 255 / .08) inset, 0 32px 70px -28px rgb(0 0 0 / .75); }
.held-bild { margin: 0; } .held-bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.held-bild figcaption { position: static; font-size: .85rem; color: var(--leise); padding: 10px 0 0; }

/* Regler */
.lichtband { background: var(--graphit); background-image: radial-gradient(110% 120% at 50% 130%, rgb(var(--lk) / .22), transparent 62%); }
.lichtband-in h2 { max-width: 20ch; margin-bottom: var(--s5); }
.regler { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .regler { grid-template-columns: 1.15fr 1fr; align-items: center; gap: var(--s6); } }
.regler-feld { position: relative; aspect-ratio: 16 / 9; background: rgb(var(--lk)); border-radius: 2px; box-shadow: 0 0 0 1px rgb(255 255 255 / .35), 0 0 110px 12px rgb(var(--lk) / .5); transition: background .08s linear; overflow: hidden; }
.regler-licht { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgb(255 255 255 / .22), rgb(0 0 0 / .06) 85%); }
.regler-licht::before, .regler-licht::after { content: ""; position: absolute; left: 0; right: 0; height: 16px; background: radial-gradient(circle, rgb(255 255 255 / .98) 0 2.4px, rgb(255 255 255 / .0) 4px) 0 50% / 20px 16px repeat-x, linear-gradient(rgb(255 255 255 / .5), rgb(255 255 255 / 0)); }
.regler-licht::before { top: 0; } .regler-licht::after { bottom: 0; transform: scaleY(-1); }
.regler-steuer label { display: block; font: 600 .85rem var(--kopf); letter-spacing: .08em; text-transform: uppercase; color: var(--leise); margin-bottom: var(--s2); }
.regler-wert { font: 700 clamp(3rem, 8vw, 5.4rem)/1 var(--kopf); font-stretch: 125%; color: rgb(var(--lk)); margin: 0 0 var(--s3); }
.regler-wert span { font-size: .4em; font-weight: 500; }
.regler input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; border-radius: 2px; background: linear-gradient(90deg, #ff9b3d 0%, #ffd7a0 28%, #fff4e6 50%, #dbeaff 76%, #9fc6ff 100%); outline-offset: 8px; cursor: pointer; }
.regler input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 3px solid var(--nacht); box-shadow: 0 0 0 2px #fff, 0 0 22px rgb(var(--lk) / .9); }
.regler input[type=range]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 3px solid var(--nacht); box-shadow: 0 0 0 2px #fff, 0 0 22px rgb(var(--lk) / .9); }
.regler-skala { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; color: var(--leise); margin: 12px 0 var(--s4); }
.regler-text { color: #d4d7db; max-width: 46ch; }

/* Technik und Datenblatt */
.technik { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 900px) { .technik { grid-template-columns: 1.1fr 1fr; gap: var(--s6); } }
.technik-text p { max-width: 62ch; }
.datenblatt { background: var(--licht); color: var(--tinte); padding: var(--s4); border-radius: 2px; box-shadow: inset 0 1px 0 #fff, 0 30px 100px -30px rgb(var(--lk) / .4); }
@media (min-width: 700px) { .datenblatt { padding: var(--s5); } }
.datenblatt h2, .datenblatt h3 { font: 700 .82rem var(--kopf); letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-leise); margin-bottom: var(--s3); font-stretch: 110%; }
.datenblatt a { color: #6b4a00; } .datenblatt a:hover { color: #000; }
.daten { margin: 0; } .daten > div { display: grid; gap: 2px var(--s4); padding: 12px 0; border-top: 1px solid rgb(0 0 0 / .14); }
@media (min-width: 700px) { .daten > div { grid-template-columns: 200px 1fr; } }
.daten dt { font: 650 .95rem var(--kopf); font-stretch: 100%; color: var(--tinte-leise); } .daten dd { margin: 0; font-size: 1.02rem; }
.datenblatt-breit .daten { columns: 1; }
@media (min-width: 1000px) { .datenblatt-breit .daten { columns: 2; column-gap: var(--s6); } .datenblatt-breit .daten > div { break-inside: avoid; } }

/* Aufbau-Zeilen */
.prinzip { padding-block: var(--s5) var(--s6); }
.prinzip-zeile { display: grid; gap: var(--s4) var(--s6); padding-block: var(--s5); border-top: 1px solid var(--linie); align-items: center; }
@media (min-width: 900px) { .prinzip-zeile { grid-template-columns: 1fr 1fr; } .prinzip-zeile.dreh .pz-text { order: 2; } .prinzip-zeile.dreh .pz-bild { order: 1; } }
.pz-text h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); } .pz-text p { max-width: 50ch; color: #d4d7db; } .pz-bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #fff; }

/* Typenliste */
.produkte-block { background: var(--graphit); }
.block-lead { max-width: 58ch; color: #d4d7db; margin-bottom: var(--s5); }
.typen-gruppe { display: grid; gap: var(--s3) var(--s5); margin-bottom: var(--s6); }
@media (min-width: 900px) { .typen-gruppe { grid-template-columns: 260px 1fr; } }
.typen-kopf h2, .typen-kopf h3 { font-size: 1.5rem; margin-bottom: var(--s2); } .typen-kopf p { color: var(--leise); font-size: .98rem; max-width: 30ch; }
.typen { list-style: none; margin: 0; padding: 0; }
.zeile a { display: grid; grid-template-columns: 88px 1fr; gap: 6px var(--s3); align-items: center; padding: var(--s3) 0; border-top: 1px solid var(--linie); text-decoration: none; color: var(--text); transition: background .25s, padding .25s; }
@media (min-width: 760px) { .zeile a { grid-template-columns: 120px 1fr 190px 90px; gap: var(--s4); padding-inline: var(--s3); margin-inline: calc(var(--s3) * -1); } }
.zeile a:hover { background: linear-gradient(90deg, rgb(var(--lk) / .16), transparent 80%); color: #fff; }
.z-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #fff; }
.z-name strong { display: block; font: 650 1.25rem var(--kopf); font-stretch: 110%; color: #fff; } .z-name span { display: block; color: var(--leise); font-size: .98rem; }
.z-wert { display: none; color: #d4d7db; font-size: .95rem; } .z-pfeil { display: none; font: 600 .9rem var(--kopf); color: var(--glut); text-align: right; }
@media (min-width: 760px) { .z-wert, .z-pfeil { display: block; } }

/* Einsatz */
.einsatz h2 { margin-bottom: var(--s5); }
.einsatz-raster { display: grid; gap: var(--s2); }
@media (min-width: 760px) { .einsatz-raster { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 250px; } .e0 { grid-column: span 2; grid-row: span 2; } }
.einsatz-feld { position: relative; overflow: hidden; min-height: 220px; background: var(--stahl); }
.einsatz-feld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.einsatz-feld:hover img { transform: scale(1.04); }
.einsatz-feld div { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s6) var(--s3) var(--s3); background: linear-gradient(transparent, rgb(10 11 12 / .92)); }
.einsatz-feld h3 { margin: 0 0 4px; font-size: 1.1rem; } .einsatz-feld p { margin: 0; font-size: .95rem; color: #d4d7db; }
.e0 h3 { font-size: 1.6rem; }

/* Projekte */
.projekte { background: var(--graphit); }
.projekte-raster { display: grid; gap: var(--s5) var(--s4); margin-bottom: var(--s5); }
@media (min-width: 760px) { .projekte-raster { grid-template-columns: repeat(3, 1fr); } }
.projekt .foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .projekt h3 { margin-top: var(--s3); } .projekt p { color: #d4d7db; font-size: .98rem; }
.foto { margin: 0; } .foto figcaption { font-size: .88rem; color: var(--leise); padding-top: 8px; }

/* Küche, Anwendungen, Made */
.kueche { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 900px) { .kueche { grid-template-columns: 5fr 7fr; gap: var(--s6); } }
.kueche-bilder { display: grid; gap: var(--s2); } @media (min-width: 600px) { .kueche-bilder { grid-template-columns: 1fr 1fr; } }
.kueche-bilder img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.aw-liste { list-style: none; margin: var(--s4) 0 0; padding: 0; columns: 1; }
@media (min-width: 760px) { .aw-liste { columns: 2; column-gap: var(--s6); } }
.aw-liste li { break-inside: avoid; padding: 14px 0; border-top: 1px solid var(--linie); font: 600 1.1rem var(--kopf); font-stretch: 105%; }
.aw-liste a { color: #fff; text-decoration: none; } .aw-liste a:hover { color: var(--glut); }
.aw-liste a::after { color: var(--glut); }
.made { max-width: 900px; } .made p { font-size: 1.2rem; color: #d4d7db; }

/* Produktseite */
.p-kopf { display: grid; gap: var(--s5); align-items: center; padding-block: var(--s5) var(--s6); }
@media (min-width: 1000px) { .p-kopf { grid-template-columns: 1fr 1.1fr; gap: var(--s6); } }
.p-kopf-bild { margin: 0; } .p-kopf-bild img { width: 100%; max-height: 560px; object-fit: cover; }
.p-preis { margin: var(--s4) 0 0; } .p-preis strong { display: block; font: 700 1.3rem var(--kopf); font-stretch: 110%; } .p-preis span { color: var(--leise); font-size: .95rem; }
.p-farbe { color: var(--leise); font-size: .95rem; }
.p-daten, .p-var, .p-zeichnung, .p-galerie, .p-beispiele, .p-weiter, .p-text { padding-block: var(--s5); }
.p-text { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .p-text { grid-template-columns: 1.7fr 1fr; gap: var(--s6); } .p-anw-solo { grid-column: 1 / -1; } }
.spalte-text { max-width: 68ch; } .spalte-text ul, .spalte-text ol { padding-left: 1.2em; } .spalte-text li { margin-bottom: 6px; } .spalte-text h2 { margin-top: var(--s5); font-size: clamp(1.4rem, 2.4vw, 1.9rem); } .spalte-text h2:first-child { margin-top: 0; }
.p-anw { background: var(--graphit); padding: var(--s4); align-self: start; } .p-anw h2 { font-size: 1.2rem; } .p-anw ul { margin: 0; padding-left: 1.1em; } .p-anw li { margin-bottom: 8px; color: #d4d7db; }
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th, .tabelle td { text-align: left; vertical-align: top; padding: 14px var(--s3) 14px 0; border-top: 1px solid var(--linie); }
.tabelle th { width: 34%; font: 650 1rem var(--kopf); font-stretch: 100%; color: #fff; } .tabelle td { color: #d4d7db; }
@media (max-width: 640px) { .tabelle th, .tabelle td { display: block; width: auto; padding: 4px 0; } .tabelle tr { display: block; padding: 12px 0; border-top: 1px solid var(--linie); } .tabelle th, .tabelle td { border: 0; } }
.zeichnungen { display: grid; gap: var(--s3); } @media (min-width: 700px) { .zeichnungen { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }
.zeichnungen a { display: block; background: #fff; padding: 8px; } .zeichnungen img { width: 100%; height: auto; margin: auto; }
.galerie { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .galerie { grid-template-columns: repeat(3, 1fr); } }
.galerie li { margin: 0; } .galerie img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; background: #fff; } .galerie p { font-size: .85rem; color: var(--leise); margin: 6px 0 0; }
.galerie-klein { grid-template-columns: repeat(3, 1fr); } @media (min-width: 700px) { .galerie-klein { grid-template-columns: repeat(6, 1fr); } .galerie-klein img { aspect-ratio: 1; } }
.galerie-gross { display: block; column-width: 300px; column-gap: var(--s3); } .galerie-gross li { break-inside: avoid; margin-bottom: var(--s3); } .galerie-gross img { aspect-ratio: auto; height: auto; }
.galerie a { display: block; position: relative; } .galerie a:hover img { filter: brightness(1.08); }
.p-verw { padding-block: 0 var(--s5); }
.fragen { padding-block: var(--s5); } .fragen-liste details { border-top: 1px solid var(--linie); padding: 4px 0; } .fragen-liste details:last-child { border-bottom: 1px solid var(--linie); }
.fragen-liste summary { cursor: pointer; padding: 14px 0; font: 600 1.08rem var(--kopf); font-stretch: 100%; list-style: none; display: flex; justify-content: space-between; gap: var(--s3); color: #fff; } .fragen-liste summary::-webkit-details-marker { display: none; }
.fragen-liste summary::after { content: ""; flex: none; width: 20px; height: 20px; margin-top: 3px; background: var(--glut); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpath d='M12 4v16M4 12h16'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpath d='M12 4v16M4 12h16'/%3E%3C/svg%3E") center / contain no-repeat; } .fragen-liste details[open] summary::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpath d='M4 12h16'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpath d='M4 12h16'/%3E%3C/svg%3E"); }
.fragen-liste p { max-width: 70ch; color: #d4d7db; padding-bottom: 12px; }
.fragen-kurz { padding-block: var(--s6); } .fragen-gruppe { padding-block: var(--s4); }

/* Seitenköpfe und Artikel */
.seitenkopf { padding-block: var(--s5) var(--s4); } .seitenkopf.mit-bild { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 1000px) { .seitenkopf.mit-bild { grid-template-columns: 1.1fr 1fr; gap: var(--s6); } }
.seitenkopf-bild { margin: 0; } .seitenkopf-bild img { width: 100%; max-height: 460px; object-fit: cover; }
.abschnitt { padding-block: var(--s5); }
.artikel-kopf { padding-block: var(--s5) var(--s4); } .artikel-meta { color: var(--leise); font-size: .92rem; margin-bottom: var(--s2); }
.artikel-bild { margin-block: var(--s3) var(--s5); } .artikel-bild img { width: 100%; max-height: 520px; object-fit: cover; }
.artikel-raster { display: grid; gap: var(--s6); padding-bottom: var(--s6); } @media (min-width: 1000px) { .artikel-raster { grid-template-columns: 1fr 320px; } }
.artikel-text { max-width: 70ch; } .artikel-text h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-top: var(--s5); } .artikel-text ul { padding-left: 1.2em; } .artikel-text li { margin-bottom: 6px; }
.artikel-text section:first-child h2 { margin-top: 0; }
.quellen ul { padding-left: 1.2em; } .artikel-stand { color: var(--leise); font-size: .9rem; margin-top: var(--s5); }
.artikel-seite { align-self: start; position: sticky; top: 96px; }
.artikel-box { background: var(--licht); color: var(--tinte); padding: var(--s4); box-shadow: 0 30px 80px -30px rgb(var(--lk) / .4); } .artikel-box .knopf { background: var(--tinte); color: #fff; border-color: var(--tinte); }
.ab-titel { font: 700 .82rem var(--kopf); letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--s2); } .artikel-box .ab-titel { color: var(--tinte-leise); }
.verwandt { margin-top: var(--s4); } .verwandt ul { list-style: none; padding: 0; margin: 0; } .verwandt li { padding: 8px 0; border-top: 1px solid var(--linie); }
.rg-gruppe { padding-block: var(--s4); } .rg-liste { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s4); }
@media (min-width: 760px) { .rg-liste { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .rg-liste { grid-template-columns: repeat(3, 1fr); } }
.rg-liste a { display: block; text-decoration: none; color: var(--text); } .rg-liste img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: var(--s3); background: #fff; }
.rg-liste strong { display: block; font: 650 1.15rem var(--kopf); font-stretch: 108%; color: #fff; margin-bottom: 4px; } .rg-liste span span, .rg-liste span { color: var(--leise); font-size: .98rem; } .rg-liste a:hover strong { color: var(--glut); }
.liste { padding-left: 1.2em; } .liste li { margin-bottom: 6px; }
.sitemap-raster { display: grid; gap: var(--s5); } @media (min-width: 900px) { .sitemap-raster { grid-template-columns: repeat(3, 1fr); } }
.rechtstext { max-width: 820px; padding-block: var(--s5) var(--s6); } .rechtstext h2 { font-size: 1.35rem; margin-top: var(--s5); }
.zeit { list-style: none; padding: 0 !important; } .zeit li { display: grid; gap: 4px var(--s4); padding: 14px 0; border-top: 1px solid var(--linie); } @media (min-width: 700px) { .zeit li { grid-template-columns: 150px 1fr; } } .zeit strong { font-family: var(--kopf); color: rgb(var(--lk)); }

/* Abschluss */
.abschluss { background: var(--licht); color: var(--tinte); background-image: linear-gradient(90deg, rgb(var(--lk) / .35), transparent 60%); }
.abschluss-in { display: grid; gap: var(--s4); align-items: center; } @media (min-width: 900px) { .abschluss-in { grid-template-columns: 1.4fr 1fr; } .abschluss-in .knopfreihe { justify-content: flex-end; } }
.abschluss h2 { color: var(--tinte); margin-bottom: var(--s2); } .abschluss p { margin: 0; max-width: 56ch; color: #2d3136; }
.abschluss .knopf { background: var(--tinte); color: #fff; border-color: var(--tinte); } .abschluss .knopf:hover { background: #000; color: #fff; }
.abschluss .knopf-linie { background: transparent; color: var(--tinte); border-color: rgb(0 0 0 / .5); } .abschluss .knopf-linie:hover { background: rgb(0 0 0 / .06); color: #000; box-shadow: none; }

/* Formular und Kontakt */
.kontakt-raster { display: grid; gap: var(--s5); padding-block: var(--s4) var(--s6); } @media (min-width: 1000px) { .kontakt-raster { grid-template-columns: 1.5fr 1fr; gap: var(--s6); } }
.adresse { font-style: normal; line-height: 1.7; } .kontakt-seite { align-self: start; display: grid; gap: var(--s4); }
.formular fieldset { border: 0; padding: 0; margin: 0 0 var(--s5); } .formular legend { font: 700 1.3rem var(--kopf); font-stretch: 110%; padding: 0; margin-bottom: var(--s3); color: #fff; }
.feld { margin-bottom: var(--s3); } .feldreihe { display: grid; gap: 0 var(--s3); } @media (min-width: 640px) { .feldreihe { grid-template-columns: 1fr 1fr; } }
.feld label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .98rem; } .frei { color: var(--leise); font-weight: 400; }
.feld input, .feld select, .feld textarea { width: 100%; min-height: 48px; padding: 12px 14px; background: var(--graphit); color: var(--text); border: 1px solid var(--linie); border-radius: 2px; font: inherit; }
.feld textarea { min-height: 140px; resize: vertical; } .feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--glut); box-shadow: 0 0 0 3px rgb(var(--lk) / .25); }
.feld.ungueltig input, .feld.ungueltig textarea { border-color: #ff8a80; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: var(--s3); } .form-status.fehler { color: #ff9f95; }
.formular-erfolg { background: var(--licht); color: var(--tinte); padding: var(--s5); } .formular-erfolg h2 { color: var(--tinte); }

/* Fuß */
.fuss { background: #0d0e10; padding-top: var(--s6); border-top: 1px solid var(--linie); }
.fuss-raster { display: grid; gap: var(--s5); padding-bottom: var(--s5); } @media (min-width: 900px) { .fuss-raster { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.fuss-h { font: 700 .82rem var(--kopf); letter-spacing: .12em; text-transform: uppercase; color: var(--leise); margin-bottom: var(--s3); }
.fuss ul { list-style: none; padding: 0; margin: 0; } .fuss li { margin-bottom: 8px; } .fuss a { color: var(--text); text-decoration: none; } .fuss a:hover { color: var(--glut); }
.fuss-marke img { width: 170px; margin-bottom: var(--s3); } .fuss-marke p { color: var(--leise); }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); padding-block: var(--s4); border-top: 1px solid var(--stahl); font-size: .92rem; color: var(--leise); } .fuss-unten ul { display: flex; flex-wrap: wrap; gap: var(--s4); } .fuss-unten p { margin: 0; }
.handyleiste { display: none; }
@media (max-width: 760px) { .handyleiste { display: grid; grid-template-columns: 1fr 1.4fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--nacht); border-top: 1px solid var(--linie); } .handyleiste a { padding: 14px; text-align: center; color: #fff; text-decoration: none; font: 650 1rem var(--kopf); } .handyleiste-haupt { background: var(--licht); color: var(--tinte) !important; } body { padding-bottom: 54px; } }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 80; background: rgb(8 9 10 / .94); display: flex; align-items: center; justify-content: center; padding: 24px; } .lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 84vh; width: auto; height: auto; background: #fff0; }
.lb-text { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; color: #d4d7db; font-size: .9rem; padding-inline: 70px; margin: 0; }
.lightbox button { position: absolute; background: rgb(255 255 255 / .1); color: #fff; border: 0; width: 48px; height: 48px; font-size: 1.8rem; cursor: pointer; border-radius: 2px; } .lightbox button:hover { background: rgb(255 255 255 / .22); }
.lb-zu { top: 16px; right: 16px; } .lb-zurueck { left: 12px; top: 50%; } .lb-vor { right: 12px; top: 50%; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

.nw { white-space: nowrap; }
.rechtstext, .spalte-text, .artikel-text, .datenblatt, .adresse { overflow-wrap: anywhere; }

::selection { background: rgb(var(--lk) / .85); color: var(--tinte); }
html { accent-color: rgb(var(--lk)); caret-color: rgb(var(--lk)); scrollbar-color: #3a3e44 var(--nacht); scrollbar-width: thin; }
.lightbox button svg { width: 24px; height: 24px; display: block; margin: auto; }
/* Ein erzählter Moment: das Licht geht an (dunkle Schicht blendet aus, das Bild selbst ist sofort da) */
@keyframes licht-an { from { opacity: .72; } to { opacity: 0; } }
.held-bild { position: relative; } .held-bild::after { content: ""; position: absolute; inset: 0 0 auto 0; aspect-ratio: 3 / 2; background: #0b0c0d; pointer-events: none; animation: licht-an 1.6s cubic-bezier(.16, 1, .3, 1) .15s both; }

/* Held und Produktkopf: größere Fotos, auf dem Handy das Foto zuerst */
.held .wrap, .p-kopf.wrap { max-width: 1360px; }
@media (min-width: 1000px) { .held-in { grid-template-columns: 1fr 1.2fr; } .p-kopf { grid-template-columns: 1fr 1.2fr; } .held-bild img { aspect-ratio: 4 / 3; } }
@media (max-width: 999px) { .held-bild { order: -1; } .held-bild img { aspect-ratio: 16 / 10; } .held-bild::after { aspect-ratio: 16 / 10; } .held { padding-top: var(--s3); } }
@media (min-width: 1000px) { .held-bild::after { aspect-ratio: 4 / 3; } }
.p-kopf h1 { font-size: clamp(1.9rem, 4.2vw, 3.3rem); }
.held-bild figcaption { max-width: 60ch; }
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 400px) { .nw { white-space: normal; } h1 { font-size: 1.75rem; } }