/* ==========================================================================
   ILLUMOR — pages.css
   --------------------------------------------------------------------------
   Seitenlayout: Bausteine, die nur auf einzelnen Seiten vorkommen und
   deshalb nicht in components.css gehören — Seitenkopf, Galerie, Rechtstext.
   Reihenfolge: nach components.css einbinden.
   ========================================================================== */

/* ==========================================================================
   1 · SEITENKOPF (Unterseiten)
   ========================================================================== */
.page-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(4rem, 9vw, 7rem) clamp(2rem, 5vw, 3.5rem);
  border-block-end: 1px solid var(--edge-subtle);
}
.page-head__in { display: grid; gap: var(--sp-4); max-width: 46rem; }
.page-head p { color: var(--ink-secondary); font-size: var(--t-body-lg); }

/* Eine einzelne Röhre am rechten Rand — weit weg von der Textspalte. */
.page-head__tube {
  position: absolute;
  inset-block: -20%;
  inset-inline-end: -6%;
  width: min(42%, 28rem);
  z-index: var(--z-deco);
  color: var(--tube-core);
  opacity: 0.6;
  pointer-events: none;
  filter: var(--tube-stroke-lg);
}
[data-theme="light"] .page-head__tube,
.theme-light .page-head__tube { opacity: 0.16; }
.page-head__tube svg { width: 100%; height: auto; }
@media (max-width: 47.99rem) { .page-head__tube { display: none; } }

/* ==========================================================================
   2 · GALERIE (arbeiten.html)
   --------------------------------------------------------------------------
   Spalten statt Raster. Die Motive sind gemischt — Hochformat, Querformat,
   9:16-Reels — und in einem Raster mit festen Zeilen entstehen dabei
   zwangsläufig Löcher und Beschnitt. Mit CSS-Spalten behält jedes Bild sein
   eigenes Seitenverhältnis, und die Wand schließt trotzdem.
   ========================================================================== */
.gallery {
  columns: 2;
  column-gap: var(--sp-4);
}
@media (min-width: 48rem) { .gallery { columns: 3; } }
@media (min-width: 72rem) { .gallery { columns: 4; } }

.gallery > * {
  break-inside: avoid;
  margin-block-end: var(--sp-4);
}
/* Kein Beschnitt in der Galerie: die Höhe kommt aus dem Bild selbst. */
.gallery .figure__frame { aspect-ratio: auto; }
.gallery .figure__frame img { height: auto; }

.gallery__empty {
  column-span: all;
  padding-block: var(--sp-12);
  text-align: center;
  color: var(--ink-tertiary);
}

/* ==========================================================================
   3 · RECHTSTEXT
   --------------------------------------------------------------------------
   Reine Lesetypografie: kein Glow, keine Karte, keine Deko. Rechtstexte
   müssen ohne jede Anstrengung lesbar sein.
   ========================================================================== */
.legal { max-width: var(--w-prose); }
.legal h2 {
  font-size: var(--t-h3);
  margin-block: var(--sp-12) var(--sp-4);
}
.legal h2:first-child { margin-block-start: 0; }
.legal h3 {
  font-family: var(--f-text);
  font-size: var(--t-body);
  font-weight: 600;
  margin-block: var(--sp-6) var(--sp-2);
}
.legal p,
.legal li { color: var(--ink-secondary); line-height: var(--lh-relaxed); }
.legal p { margin-block-end: var(--sp-4); max-width: 68ch; }
.legal ul { display: grid; gap: var(--sp-2); padding-inline-start: var(--sp-5); list-style: disc; }
.legal ul li::marker { color: var(--ink-tertiary); }
.legal a { color: var(--ink-primary); text-underline-offset: 0.2em; }

/* Definitionsliste für Firmendaten */
.def-list { display: grid; gap: var(--sp-3); margin-block-end: var(--sp-6); }
@media (min-width: 40rem) {
  .def-list { grid-template-columns: minmax(10rem, 14rem) 1fr; gap: var(--sp-3) var(--sp-6); }
}
.def-list dt { font-size: var(--t-body-sm); color: var(--ink-tertiary); }
.def-list dd { margin: 0; color: var(--ink-primary); }

/* ==========================================================================
   4 · PLATZHALTER-MARKIERUNG
   --------------------------------------------------------------------------
   Sichtbar, nicht dezent. Was hier steht, darf nicht versehentlich live
   gehen — die Markierung ist eine Warnung, kein Stilmittel.
   ========================================================================== */
.ph {
  display: inline-block;
  padding: 0.1em 0.5em;
  border-radius: var(--r-xs);
  font-family: var(--f-text);
  font-size: 0.875em;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--c-900);
  background: var(--c-warn);
}
.ph-note {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  margin-block-end: var(--sp-10);
  border-radius: var(--r-md);
  border-inline-start: 3px solid var(--c-warn);
  background: var(--surface-raised);
  font-size: var(--t-body-sm);
  color: var(--ink-secondary);
}
.ph-note svg { width: 1.25rem; height: 1.25rem; color: var(--c-warn); }
.ph-note strong { color: var(--ink-primary); }

/* ==========================================================================
   5 · SPLIT — Text neben Bild (Über-Sektion)
   ========================================================================== */
.split {
  display: grid;
  gap: var(--sp-10);
  align-items: center;
}
@media (min-width: 64rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: var(--sp-16); }
  .split--flip > :first-child { order: 2; }
}
.split__copy { display: grid; gap: var(--sp-5); max-width: 40rem; }

/* ==========================================================================
   6 · 404
   ========================================================================== */
.notfound {
  min-height: 60vh;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: var(--sp-5);
}

/* Styleguide */
.sg-pair {
  display: grid;
  gap: var(--sp-6);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--edge-subtle);
}
@media (min-width: 60rem) { .sg-pair { grid-template-columns: 1fr 1fr; gap: 0; } }
.sg-pair > * {
  background: var(--surface-base);
  color: var(--ink-primary);
  padding: var(--sp-8);
  display: grid;
  gap: var(--sp-5);
  align-content: start;
}
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: var(--sp-3); }
.sg-swatch { display: grid; gap: var(--sp-2); font-size: var(--t-caption); color: var(--ink-tertiary); }
.sg-swatch i {
  display: block;
  height: 3.5rem;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--edge-subtle);
}
.sg-grid-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: var(--sp-4); }
.sg-icon { display: grid; justify-items: center; gap: var(--sp-2); font-size: 0.6875rem; color: var(--ink-tertiary); text-align: center; }
.sg-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.sg-label { font-size: var(--t-caption); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--ink-tertiary); }