/* D14 Werrewerk · Der Betrieb · betrieb.css v0.14 · Stand 2026-10-11
   Die hellen Abschnitte: Gebaute Küchen (Station 3), Handwerk und Zusagen (Station 5), Ausstellung (Station 6) auf der Startseite,
   dazu Werkstatt, Ausstellung und die drei Küchen auf den Unterseiten /studio/ und /kuechen/.
   Papier- und Kalkton als Gegengewicht zum dunklen Werkzeugteil; Akzent bleibt Messing-Gold, Schriften wie überall.
   Breiten-Staffel einer Leseseite: Farbflächen randlos · Raster aus drei und vier Bildern weit · Fließtext auf einer Lesespalte.
   Alle Regeln beginnen mit .hell, damit sie auf den Unterseiten vor den Grundregeln von unterseite.css gelten. */

.hell {
  --papier: #f3ede2;
  --kalk: #e8dfcf;
  --tinte: #1d1813;
  --tinte-leise: #594f44;
  --eiche: #7d5c30;
  --strich: rgba(29, 24, 19, .18);
  background: var(--papier); color: var(--tinte); font-size: clamp(17px, .95vw, 23px); line-height: 1.55;
}
.hell .hell--kalk, .hell.hell--kalk { background: var(--kalk); }
.hell .betrieb { padding: clamp(56px, 10svh, 150px) var(--rand); }
.hell :where(h2, h3) { font-family: Archivo, sans-serif; font-weight: 700; margin: 0; text-wrap: balance; }
.hell p { margin: 0; }
.hell img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; background: var(--kalk); }

.hell .betrieb__titel { font-size: clamp(30px, 3.3vw, 84px); line-height: 1.06; letter-spacing: -.02em; max-width: 22ch; }
.hell .betrieb__titel::before { content: ""; display: block; width: clamp(44px, 3.4vw, 84px); height: 3px; background: var(--messing); margin-bottom: clamp(16px, 1.6vw, 34px); }
.hell .betrieb__unter { margin-top: clamp(12px, 1.8svh, 26px); font-size: clamp(18px, 1.3vw, 30px); line-height: 1.45; max-width: 44ch; color: var(--tinte-leise); }

.hell .textlink { color: var(--tinte); font-weight: 600; text-decoration: underline; text-decoration-color: var(--messing); text-decoration-thickness: 2px; text-underline-offset: 6px;
  min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.hell .textlink:hover { text-decoration-color: var(--tinte); }
.hell a:focus-visible { outline: 2px solid var(--tinte); outline-offset: 4px; border-radius: 4px; }

/* ---- Station 3: drei gebaute Küchen, Bild oben, Angaben darunter. Kein Kasten: das Bild trägt. ---- */
.hell .gebaut__reihe { list-style: none; margin: clamp(28px, 5svh, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(6, auto); gap: 0 clamp(20px, 2.4vw, 64px); }
.hell .gebaut__kueche { display: grid; grid-template-rows: subgrid; grid-row: span 6; min-width: 0; }   /* Bild · Titel · drei Angaben · Satz: je Zeile über alle drei Küchen auf einer Höhe */
.hell .gebaut__kueche h3 { margin-top: clamp(16px, 1.4vw, 30px); font-size: clamp(22px, 1.7vw, 42px); line-height: 1.15; letter-spacing: -.01em; }
.hell .gebaut__daten { display: contents; }
.hell .gebaut__kueche h3 { padding-bottom: clamp(12px, 1vw, 22px); border-bottom: 1px solid var(--strich); }
.hell .werk__daten { margin: 0; border-top: 1px solid var(--strich); }
.hell :is(.gebaut__daten, .werk__daten) div { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 12px; padding: .55em 0; border-bottom: 1px solid var(--strich); }
.hell :is(.gebaut__daten, .werk__daten) dt { color: var(--tinte-leise); }
.hell :is(.gebaut__daten, .werk__daten) dd { margin: 0; font-weight: 500; }
.hell .gebaut__preis dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.hell .gebaut__preis [data-preis], .hell .gebaut__preis [data-zahl] { white-space: nowrap; }
.hell .gebaut__preis small { font-size: 16px; font-weight: 400; color: var(--tinte-leise); white-space: nowrap; }
.hell .gebaut__satz { margin-top: clamp(14px, 1.1vw, 24px); font-size: clamp(17px, 1.15vw, 27px); line-height: 1.45; max-width: 40ch; }
.hell .gebaut__fuss { margin-top: clamp(44px, 8svh, 120px); padding-top: clamp(24px, 4svh, 56px); border-top: 1px solid var(--strich);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 48px; }
.hell .gebaut__weiter { font: 700 clamp(28px, 3.3vw, 84px)/1.08 Archivo, sans-serif; letter-spacing: -.02em; color: var(--tinte); text-decoration: none; text-wrap: balance; }
.hell .gebaut__weiter span { display: inline-block; color: var(--eiche); transition: transform .25s; }
.hell .gebaut__weiter:hover span { transform: translateY(.12em); }

/* ---- Station 5: vier Nahaufnahmen, darunter drei Schritte als Zeile mit Ziffern ---- */
.hell .handwerk__reihe { list-style: none; margin: clamp(28px, 5svh, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 4svh, 56px) clamp(16px, 1.8vw, 48px); }
.hell .handwerk__kachel h3 { margin-top: clamp(14px, 1.2vw, 26px); font-size: clamp(20px, 1.45vw, 36px); line-height: 1.2; }
.hell .handwerk__kachel p { margin-top: .4em; max-width: 36ch; }
.hell .handwerk__schritte { list-style: none; margin: clamp(48px, 8svh, 120px) 0 0; padding: clamp(24px, 4svh, 52px) 0 0; border-top: 1px solid var(--strich);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(20px, 2.4vw, 64px); }
.hell .handwerk__schritte li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(14px, 1.2vw, 28px); align-items: start; }
.hell .handwerk__nr { font: 700 clamp(44px, 4.2vw, 108px)/.86 Archivo, sans-serif; color: var(--eiche); letter-spacing: -.03em; }
.hell .handwerk__schritte h3 { font-size: clamp(20px, 1.45vw, 36px); line-height: 1.2; }
.hell .handwerk__schritte p { margin-top: .3em; color: var(--tinte-leise); }
.hell .handwerk__mehr { margin-top: clamp(16px, 2.4svh, 32px); }

/* ---- Zusagen: ruhige Liste mit Haken auf Kalk, Überschrift links, Lesespalte rechts ---- */
.hell .zusagen { padding: clamp(48px, 8svh, 120px) var(--rand); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: clamp(20px, 3vw, 80px); align-items: start; }
.hell .zusagen__titel { font-size: clamp(26px, 2.4vw, 60px); line-height: 1.1; letter-spacing: -.015em; max-width: 12ch; }
.hell .zusagen__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.6svh, 40px) clamp(24px, 3vw, 72px); font-size: clamp(18px, 1.15vw, 27px); line-height: 1.45; }
.hell .zusagen__liste li { position: relative; padding-left: 2.1em; max-width: 34ch; }
.hell .zusagen__liste li::before { content: ""; position: absolute; left: 0; top: .1em; width: 1.35em; height: 1.35em; border-radius: 50%; background: var(--messing)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.6 3.6 7.4-8' fill='none' stroke='%231a140d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 78% no-repeat; }

/* ---- Bild und Text nebeneinander: Ausstellung, Werkstatt, die drei Küchen auf /kuechen/ ---- */
.hell .zweispalt { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 110px); align-items: center; }
.hell .zweispalt--rechts .zweispalt__bild { order: 2; }
.hell .zweispalt--rechts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.hell .zweispalt__text { display: grid; gap: clamp(14px, 2svh, 26px); max-width: 56ch; }
.hell .zweispalt__text > p { max-width: 52ch; }
.hell .zeiten { padding-top: clamp(14px, 2svh, 24px); border-top: 1px solid var(--strich); font-weight: 600; }
.hell .zeiten span { white-space: nowrap; }   /* umbrochen wird nur an den Trennpunkten */
.hell .werk__satz { font: 700 clamp(20px, 1.5vw, 36px)/1.3 Archivo, sans-serif; letter-spacing: -.005em; max-width: 30ch; }
.hell .werk__teil h3 { font: 600 16px/1.3 Inter, sans-serif; color: var(--tinte-leise); margin-bottom: .3em; }
.hell + .hell > .betrieb { border-top: 1px solid var(--strich); }

@media (max-width: 1199px) {
  .hell .handwerk__reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hell .zusagen { grid-template-columns: minmax(0, 1fr); }
  .hell .zusagen__titel { max-width: none; }
}
@media (max-width: 999px) {
  .hell .zweispalt, .hell .zweispalt--rechts { grid-template-columns: minmax(0, 1fr); }
  .hell .zweispalt--rechts .zweispalt__bild { order: 0; }
}
@media (max-width: 899px) {
  .hell .gebaut__reihe { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: clamp(40px, 7svh, 64px) 0; }
  .hell .gebaut__kueche { display: block; }
  .hell .gebaut__daten { display: block; margin: 0; }
  .hell :is(.gebaut__daten, .werk__daten) div { grid-template-columns: 6.4em minmax(0, 1fr); }
  .hell .handwerk__schritte { grid-template-columns: minmax(0, 1fr); }
  .hell .handwerk__nr { min-width: .7em; }
  .hell .gebaut__fuss { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 599px) {
  .hell .handwerk__reihe { grid-template-columns: minmax(0, 1fr); }
  .hell .zusagen__liste { grid-template-columns: minmax(0, 1fr); }
  .hell .zusagen__liste li { max-width: none; }
}
@media (min-width: 1900px) { .hell .gebaut__preis small, .hell .werk__teil h3 { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .hell .gebaut__weiter span { transition: none; } }
/* /kuechen/: der Zusatz zum Preisrahmen steht als eigene Zeile darunter und darf umbrechen */
.hell .werk__daten .gebaut__preis small { display: block; white-space: normal; }