/* Regalkonfigurator im Erscheinungsbild der LHV-Website.
 * Wird nach rk/rk.css geladen und überschreibt nur Farben, Schriften und Abstände.
 * Die Website hat ein festes helles Farbschema; deshalb auch bei dunklem System-Thema hell.
 */
:root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
  --bg: #EEF3F0;
  --flaeche: #ffffff;
  --flaeche-2: #F4F7F5;
  --tinte: #132A26;
  --gedaempft: #4C625B;
  --linie: #D3DDD7;
  --linie-stark: #B3C3BB;
  --stahl: #1B4D44;
  --stahl-flaeche: #E2EBE6;
  --traverse: #E09A1B;
  --traverse-dunkel: #7A5205;
  --traverse-flaeche: #FFF3D6;
  --zink: #9FB0A8;
  --gut: #1D6B45;
  --gut-flaeche: #E1F1E8;
  --warn: #7A4A06;
  --warn-flaeche: #FFF3D6;
  --fehler: #A8261E;
  --fehler-flaeche: #FBE5E3;
  --raster: #D3DDD7;
  --schrift-anzeige: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --schrift-text: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --schrift-mass: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --radius: 10px;
  color-scheme: light;
}

/* Seitenkörper gehört der Website */
body { background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: var(--t-md); line-height: 1.6; }

.rk { font-size: 15px; line-height: 1.5; }
.rk h1, .rk h2, .rk h3 { font-family: var(--f-display); font-stretch: 112.5%; letter-spacing: -.005em; }
.rk .mass, .rk .zahl, .rk input[type="number"] { font-variant-numeric: tabular-nums; letter-spacing: 0; }
.rk .etikett { font-family: var(--f-body); text-transform: none; letter-spacing: 0; font-size: 13px; }

/* Breiten wie die übrige Website */
.rk-rahmen .einstieg, .rk-rahmen .werkbank, .rk-rahmen .abschnitt, .rk-rahmen .verwaltung { max-width: var(--wrap); padding-inline: var(--gutter); }
.rk-rahmen .einstieg { padding-block: clamp(28px, 4vw, 48px) 8px; }
.rk-rahmen .einstieg h2 { font-size: var(--t-2xl); }

/* Knöpfe wie auf der Website */
.rk .knopf { border-radius: 999px; padding: 9px 16px; }
.rk .knopf.haupt { background: var(--pine); border-color: var(--pine); color: #fff; }
.rk .knopf.haupt:hover { background: var(--pine-deep); border-color: var(--pine-deep); }
.rk .knopf.gross { padding: 13px 22px; }
.rk .knopf.klein { padding: 5px 12px; }
.rk :focus-visible { outline: 3px solid var(--light); outline-offset: 2px; }

/* Karten etwas ruhiger */
.rk .schritt, .rk .reihe, .rk .zeichnung, .rk .kosten, .rk .anfrage-form { border-radius: var(--radius); }

/* Ruhigere Beschriftungen ohne Versalien, wie auf der übrigen Website */
.rk .schritt-kopf h3 { text-transform: none; letter-spacing: -.005em; font-size: 17px; }
.rk .staender-gruppe, .rk .marke-klein, .rk table.liste th, .rk .status { text-transform: none; letter-spacing: 0; }
.rk .staender-gruppe { font-size: 13px; }
.rk table.liste th { font-family: var(--f-body); font-size: 13px; }
.rk .schritt-nr { color: var(--pine); font-weight: 600; }
.rk input[type="checkbox"], .rk input[type="radio"] { accent-color: var(--pine); }

/* Ladenregal: Lochrückwand, Fußteile, Haken */
.rk-svg .lochwand { fill: #E4EAE6; stroke: #B3C3BB; stroke-width: .6; }
.rk-svg .loch { fill: #9FB0A8; }
.rk-svg .fuss { fill: var(--gedaempft); }
.rk-svg .fuss-seite { fill: var(--gedaempft); opacity: .85; }
.rk-svg .haken { stroke: var(--gedaempft); stroke-width: 1.4; stroke-linecap: round; fill: none; }
.rk-svg .sockelboden { opacity: .85; }
.rk .legende i.legende-loch { background: #E4EAE6 radial-gradient(circle, #9FB0A8 1.2px, transparent 1.6px) 0 0 / 5px 5px; border: 1px solid #B3C3BB; }
.rk .segment button small { display: block; font-weight: 400; font-size: 12px; opacity: .8; }
.rk .legende i.legende-loch { height: 10px; }
.rk .reihe-masse { display: block; max-width: 100%; }
/* Front- und 3D-Ansicht untereinander: die Seitenleiste bleibt unter der festen Kopfzeile der Website */
.rk-rahmen { --rk-kopf-abstand: var(--header-h, 0px); }
.rk .zeichnung-titel { font-family: var(--f-display); font-stretch: 112.5%; font-size: 15px; }
/* Ladenregal: Fachböden und Konsolen in Juraweiß (wie die Tegometall-Teile) */
.rk-svg .fachboden { fill: #F3F1EA; stroke: #93A19B; stroke-width: .8; }
.rk-svg .konsole { fill: #E9E6DD; stroke: #8E9C96; stroke-width: .6; stroke-linejoin: round; }
.rk .legende i.legende-boden { background: #F3F1EA; border: 1px solid #93A19B; height: 8px; }