/* D14 Werrewerk · Unterseiten · unterseite.css v0.15 · Stand 2026-10-11
   Ein Stil für alle sieben Unterseiten, im Look der Startseite (Farben, Archivo, Messing-Gold aus seite.css).
   Breiten-Staffel einer Leseseite: Kopf, Fuß und Bänder randlos · Raster weit · Fließtext auf einer Lesespalte (65 Zeichen).
   Fließtext ab 16 px; kleinste Schrift (Etiketten, Tabellenkopf, Legende) 14 px, ab 1900 px Fensterbreite 16 px. */

.unter { --u-lese: 65ch; font-size: 17px; line-height: 1.6; padding-top: var(--kopf); }
.unter :where(h1, h2, h3) { font-family: Archivo, sans-serif; font-weight: 700; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
.unter p { margin: 0; }
.unter a { color: var(--messing); text-underline-offset: 4px; }
.unter a:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 4px; }
.unter a.knopf { color: var(--auf-messing); }
.unter .kopf__nav a { color: var(--text); }
.unter .kopf__nav a[aria-current="page"], .unter .kopf__nav a:hover { color: var(--messing); }
.unter .kopf__marke { color: var(--messing); }

/* ---- Kopfbild: ruhiger Ausschnitt aus dem Bestand, abgedunkelt, Text links unten ---- */
.u-kopf { position: relative; overflow: hidden; background-color: var(--grund); min-height: clamp(300px, 50svh, 780px); display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(14px, 2svh, 28px);
  padding: clamp(40px, 8svh, 120px) var(--rand) clamp(32px, 6svh, 88px);
  isolation: isolate; }
/* Schichten: Bild (eigenes Element, Pfad steht im HTML relativ zur Seite) · darüber der dunkle Verlauf · darüber der Text */
.u-kopf__bild { position: absolute; inset: 0; z-index: -1; background: var(--grund) 60% 50% / cover no-repeat; }
.u-kopf::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(20, 16, 12, .93) 0%, rgba(20, 16, 12, .85) 40%, rgba(20, 16, 12, .34) 74%, rgba(20, 16, 12, .18) 100%),
    linear-gradient(0deg, rgba(20, 16, 12, .6) 0%, rgba(20, 16, 12, 0) 55%); }
.u-kopf--klein { min-height: clamp(200px, 28svh, 420px); }
.u-kopf--voll { min-height: calc(100vh - var(--kopf)); min-height: calc(100svh - var(--kopf)); justify-content: center; }
.u-kopf h1 { font-size: clamp(32px, 4vw, 104px); line-height: 1.04; max-width: 28ch; }
.u-kopf h1 span { display: block; }
.u-einleitung { font-size: clamp(17px, 1.25vw, 28px); line-height: 1.5; max-width: var(--u-lese); color: var(--text); }
.u-mikro { font: 500 clamp(14px, .85vw, 18px)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--messing); }

/* ---- Abschnitte ---- */
.u-abschnitt { padding: clamp(40px, 7svh, 112px) var(--rand); border-top: 1px solid var(--linie); }
.u-abschnitt--flaeche { background: var(--flaeche); }
.u-abschnitt > h2, .u-lese > h2 { font-size: clamp(24px, 2.3vw, 56px); line-height: 1.1; margin-bottom: clamp(16px, 2.4svh, 36px); }
.u-abschnitt h3 { font-size: clamp(19px, 1.45vw, 34px); line-height: 1.2; }
.u-lese { max-width: var(--u-lese); display: grid; gap: 1em; }
.u-lese > h2 { margin-bottom: 0; }
.u-gross { font: 700 clamp(22px, 2.1vw, 52px)/1.2 Archivo, sans-serif; letter-spacing: -.01em; max-width: 30ch; color: var(--text); }
.u-quelle { font-size: 16px; color: var(--leise); }
/* v0.13: Textlinks in Rechtstexten und Quellenzeilen mit mindestens 24 px Tipphöhe (Polsterung, der Zeilenfall bleibt) */
.u-recht a, .u-quelle a { padding-block: 4px; }
.u-liste { margin: 0; padding-left: 1.2em; display: grid; gap: .55em; max-width: var(--u-lese); }
.u-liste li::marker { color: var(--messing); }
.u-hinweis { max-width: var(--u-lese); border-left: 3px solid var(--messing); padding: 14px 18px; background: rgba(212, 168, 83, .08); border-radius: 0 12px 12px 0; }
.u-hinweis--deutlich { font-weight: 600; font-size: 1.1em; }
.u-zitat { margin: 0; max-width: var(--u-lese); font-size: clamp(18px, 1.35vw, 30px); line-height: 1.45; }
.u-weiter { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; }

/* ---- Kernzahl (Preise) ---- */
.u-kernzahl { display: grid; gap: 8px; }
.u-kernzahl strong { font: 700 clamp(44px, 6vw, 150px)/1 Archivo, sans-serif; color: var(--messing); letter-spacing: -.02em; }
.u-kernzahl p { font-size: clamp(18px, 1.35vw, 30px); max-width: var(--u-lese); }

/* ---- Raster: Karten (Grundformen, Posten, Schritte) ---- */
.u-raster { display: grid; gap: clamp(16px, 1.6vw, 36px); grid-template-columns: repeat(var(--u-spalten, 3), minmax(0, 1fr)); margin-top: clamp(20px, 3svh, 44px); }
.u-raster--2 { --u-spalten: 2; }
.u-raster--4 { --u-spalten: 4; }
.u-raster--5 { --u-spalten: 5; }
.u-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; padding: clamp(18px, 1.6vw, 34px); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.u-abschnitt--flaeche .u-karte { background: var(--grund); }
.u-karte p { max-width: var(--u-lese); }
.u-karte b { color: var(--messing); font-weight: 600; }
.u-passt { font: 500 16px/1.45 var(--mono); color: var(--text); }
.u-nr { font: 500 16px/1 var(--mono); color: var(--messing); border: 1px solid var(--messing); width: 2.3em; height: 2.3em; border-radius: 50%; display: grid; place-items: center; flex: none; }
.u-verhindert { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--linie); color: var(--text); }

/* ---- Grundriss (Zeichnung aus plan.mjs; Farben wie in „Ihr Raum“, raum.css) ---- */
.u-plan { background: var(--grund); border-radius: 12px; padding: 12px; display: flex; justify-content: center; align-items: center; min-height: 200px;
  --boden: #2a231c; --stein: #8f8478; --steinkante: #c2b6a5; }
.u-abschnitt--flaeche .u-plan { background: var(--flaeche); }
.u-plan svg { display: block; max-width: 100%; height: auto; }
.u-plan .p-boden, .u-plan .p-schnitt { fill: var(--boden); }
.u-plan .p-wand, .u-plan .p-fenster, .u-plan .p-tuer { fill: none; stroke: var(--text); }
.u-plan .p-zeile { fill: var(--stein); stroke: var(--steinkante); }
.u-plan .p-sym { fill: none; stroke: #1d1813; }
.u-plan .p-hoch { fill: #4a433b; stroke: #c2b6a5; }
.u-plan .p-kuehl { fill: #e9e1d4; stroke: #1d1813; }
.u-plan .p-dreieck { fill: rgba(212, 168, 83, .10); stroke: var(--messing); }
.u-plan .p-mass { stroke: var(--leise); }
.u-plan .p-text { fill: var(--leise); font-family: var(--mono); }
.u-legende { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: clamp(16px, 2svh, 28px) 0 0; padding: 0; list-style: none; font-size: 16px; color: var(--leise); }
.u-legende li { display: flex; align-items: center; gap: 8px; }
.u-legende svg { width: 30px; height: 18px; flex: none; }

/* ---- Tabellen: am Rechner Tabelle, am Handy je Zeile eine Karte (kein waagerechtes Scrollen) ---- */
.u-tabelle { width: 100%; max-width: 1500px; border-collapse: collapse; margin-top: clamp(16px, 2.4svh, 32px); font-variant-numeric: tabular-nums; }
.u-tabelle caption { text-align: left; color: var(--leise); font-size: 16px; padding-bottom: 10px; }
.u-tabelle th, .u-tabelle td { text-align: left; padding: 14px 18px 14px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.u-tabelle thead th { font: 500 14px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--leise); }
.u-tabelle tbody th { font: 700 1.1em/1.3 Archivo, sans-serif; }
.u-tabelle td { font-family: var(--mono); font-size: .95em; }
.u-tabelle td.u-wort { font-family: inherit; }
.u-marke { display: inline-block; font: 500 14px/1 var(--mono); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--linie); color: var(--text); }
.u-marke--belegt { border-color: var(--messing); color: var(--messing); }
.u-posten { list-style: none; margin: clamp(14px, 2svh, 24px) 0 0; padding: 0; max-width: 720px; }
.u-posten li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--linie); }
.u-posten li span:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.u-posten li.u-summe { border-bottom: 0; padding-top: 16px; font: 700 clamp(20px, 1.6vw, 36px)/1.2 Archivo, sans-serif; color: var(--messing); }
.u-posten li.u-summe span:last-child { font-family: Archivo, sans-serif; }

/* ---- Zwei Spalten: Tabelle der Sätze links, Rechenbeispiel rechts (darunter am Handy) ---- */
.u-zwei { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 72px); align-items: start; margin-top: clamp(16px, 2.4svh, 32px); }
.u-zwei .u-tabelle { margin-top: 0; }
.u-beispiel .u-posten { margin-top: 4px; max-width: none; }
@media (max-width: 1199px) { .u-zwei { grid-template-columns: minmax(0, 1fr); } }

/* ---- Fünf Schritte (Studio): je Schritt eine Zeile über die Breite, am Handy gestapelt ---- */
.u-schritte { list-style: none; margin: 0; padding: 0; }
.u-schritte li { display: grid; grid-template-columns: auto minmax(11ch, .55fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: 8px clamp(16px, 2.4vw, 56px); align-items: start;
  padding: clamp(18px, 2.6svh, 34px) 0; border-top: 1px solid var(--linie); }
.u-schritte li:first-child { border-top: 0; padding-top: 0; }
.u-schrittname { font-size: clamp(20px, 1.6vw, 38px); line-height: 1.2; padding-top: .1em; }
.u-schritte .u-verhindert { margin: 0; padding: 0 0 0 16px; border-top: 0; border-left: 2px solid var(--messing); }
.u-schritte b { color: var(--messing); font-weight: 600; }
@media (max-width: 899px) {
  .u-schritte li { grid-template-columns: auto minmax(0, 1fr); }
  .u-schritte li > p:not(.u-nr) { grid-column: 1 / -1; }
}

/* ---- Bildreihe (Studio) ---- */
.u-bildreihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 32px); margin: clamp(24px, 4svh, 56px) 0 0; padding: 0; list-style: none; }
.u-bildreihe img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; background: var(--flaeche); }
.u-bildreihe figcaption, .u-bildreihe span { display: block; margin-top: 10px; color: var(--leise); font-size: 16px; }

/* ---- Schlussband: ein Satz, ein Knopf ---- */
.u-band { padding: clamp(48px, 9svh, 150px) var(--rand); display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 3.4svh, 48px); text-align: center;
  background: var(--flaeche); border-top: 1px solid var(--messing); }
.u-band h2 { font-size: clamp(28px, 3.2vw, 88px); line-height: 1.08; max-width: 22ch; }
.u-band small { font-size: 16px; color: var(--leise); }
.u-band small a { color: var(--text); }
/* Der eine Knopf, der zu RAVARO führt: Orange gehört RAVARO (wie im Schluss der Startseite) */
.unter a.knopf--ravaro { background: #FF7716; color: #0A0B0D; }

/* ---- Recht: lange Lesespalte ---- */
.u-recht { display: grid; gap: clamp(24px, 3.4svh, 44px); }
.u-recht section { display: grid; gap: .8em; max-width: var(--u-lese); }
.u-recht h2 { font-size: clamp(20px, 1.5vw, 34px); line-height: 1.2; }
.u-recht address { font-style: normal; }

.u-links { display: flex; flex-wrap: wrap; gap: 12px 16px; margin: 0; padding: 0; list-style: none; }
.u-links a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border: 1px solid var(--messing); border-radius: 999px; text-decoration: none; font-weight: 600; }
.u-links li:first-child a { background: var(--messing); color: var(--auf-messing); }

/* ---- Handy ---- */
@media (max-width: 1199px) { .u-raster--5 { --u-spalten: 3; } .u-raster--4 { --u-spalten: 2; } }
@media (max-width: 899px) {
  .u-raster, .u-raster--2, .u-raster--4, .u-raster--5 { --u-spalten: 1; }
  .u-bildreihe { grid-template-columns: minmax(0, 1fr); }
  .u-kopf::after { background: linear-gradient(0deg, rgba(20, 16, 12, .96) 0%, rgba(20, 16, 12, .88) 55%, rgba(20, 16, 12, .62) 100%); }
  .u-tabelle, .u-tabelle tbody, .u-tabelle tr, .u-tabelle th, .u-tabelle td { display: block; }
  .u-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .u-tabelle tr { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px; padding: 16px; margin-bottom: 12px; }
  .u-abschnitt--flaeche .u-tabelle tr { background: var(--grund); }
  .u-tabelle th, .u-tabelle td { border-bottom: 0; padding: 4px 0; }
  .u-tabelle tbody th { padding-bottom: 8px; font-size: 1.2em; }
  .u-tabelle td[data-kopf] { display: flex; justify-content: space-between; gap: 16px; border-top: 1px dashed var(--linie); padding: 8px 0; }
  .u-tabelle td[data-kopf]::before { content: attr(data-kopf); font-family: Inter, sans-serif; color: var(--leise); }
  .u-tabelle td[data-kopf] { text-align: right; } .u-tabelle td[data-kopf]::before { text-align: left; }
  /* v0.19: Die Kopfleiste ist auf allen Seiten gleich (seite.css): erste Zeile Marke · Termin · Menü, zweite Zeile die zwei Werkzeuge.
     Der lange Knopf „Ihren Raum planen“ ist weg, die Wortmarke steht darum auch hier in einer Zeile. */
}
@media (max-width: 479px) {
  .unter .kopf__menue { font-size: 0; gap: 0; padding: 0 13px; min-width: 44px; justify-content: center; }   /* v0.15: 44 statt 42 px breit */
}

/* ===== v0.19 · Eigene Seiten der zwei Werkzeuge (/kueche-gestalten/, /raum-planen/): das Werkzeug füllt den ersten Bildschirm ===== */
.unter #umgestalten .ed-gross { font-family: Archivo, sans-serif; }
.unter #umgestalten a.ed-weiter { color: var(--messing); }
.u-band a.u-band__termin { color: var(--text); font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; }
.u-band a.u-band__termin:hover { color: var(--messing); }
@media (max-width: 899px) {
  /* Handy: Bild, Überschrift und Musterkoffer im ersten Bildschirm; das Bild klebt, Stein und Preis rollen darunter durch */
  .unter #umgestalten .buehne { height: 36svh; min-height: 220px; }
  .unter #umgestalten .ed-auftakt { padding: 16px 16px 2px; }
  .unter #umgestalten .ed-kicker { display: none; }
  .unter #umgestalten .ed-gross { font-size: 26px; }
  .unter #umgestalten .ed-unter { font-size: 16px; margin-top: 6px; }
  .unter #umgestalten .leiste { padding-top: 10px; gap: 18px; }
}

/* ---- Breiter Schirm: kleinste Schrift 15 px, Fließtext größer ---- */
@media (min-width: 1900px) {
  .unter { font-size: 21px; }
  .u-quelle, .u-legende, .u-tabelle caption, .u-tabelle thead th, .u-marke, .u-bildreihe span, .u-band small { font-size: 16px; }
  .u-passt, .u-nr { font-size: 17px; }
  .u-legende svg { width: 36px; height: 22px; }
  .u-tabelle th, .u-tabelle td { padding: 18px 28px 18px 0; }
}
@media (prefers-reduced-motion: reduce) { .unter * { transition: none !important; scroll-behavior: auto !important; } }

/* Zahlen mit Einheit brechen nicht um (sonst steht ein einzelnes „m.“ in der nächsten Zeile) */
.unter [data-zahl] { white-space: nowrap; }
@media (max-width: 899px) { .u-tabelle td[data-kopf] [data-zahl] { white-space: normal; } }
/* v0.19 · 320 px: „Lieferung und Montage“ (Zahlenstelle, darum nowrap) drückte die Preisseite auf 337 px Breite; die Kopfleiste lief dadurch
   über den Rand (bekannt als „Menüknopf ragt 2 px hinaus“). Namen der Posten dürfen umbrechen, die Beträge nicht. */
.u-posten li > span:first-child [data-zahl] { white-space: normal; }
/* v0.19 · Kopfknöpfe gegen die Linkfarbe der Unterseiten (.unter a) absichern */
.unter a.kopf__weg { color: var(--messing); text-decoration: none; }
.unter a.kopf__weg--haupt { color: var(--auf-messing); }
.unter a.knopf--leise { color: var(--text); }