/* ==========================================================================
   Haut „Klinker" — Kalkweiß dominant, Umbra als Band, Fahnenblau als Akzent.

   Gebaut für Siebelt Hoffmeyer in Aurich, und bewusst als Gegenstück zu
   „Nachtblau": jene Haut ist dunkel dominant, diese hell. Der Grund ist ein
   gekalktes Weiß mit Ockerstich, wie es an ostfriesischen Klinkerwänden
   liegt; die Bühne erscheint nur in schmalen Bändern, nie als ganze Fläche.

   Zwei Dinge unterscheiden sie von jeder anderen Haut der Sammlung:

   * **Serifen im Display.** Alle übrigen Häute setzen Jost. Hier steht ein
     Systemserif — kein zusätzlicher Fontdownload, und der einzige Weg, eine
     Seite auf den ersten Blick anders aussehen zu lassen, ohne die Farbe zu
     ändern. Passt zu einem Betrieb von 1974, dessen Ausstellungsschild in
     Fraktur gemalt ist.
   * **Umbra und Blau.** Warmes Braun mit einem kühlen Blau als Gegenfarbe;
     „Ziegel" paart Braun mit Petrol, „Sandstein" Braun mit Rot.

   Passt zu Handwerk mit langer Geschichte, Ausstellungsräumen, Fachhandel.
   ========================================================================== */
:root {
  /* Grün — die Bühne. Umbra, wie feuchter Klinker im Schatten. */
  --c-green: #43302a;
  --c-green-2: #564038;
  --c-green-deep: #2e211c;

  /* Papier — gekalktes Weiß mit Ockerstich */
  --c-paper: #f8f4ec;
  --c-paper-2: #efe8dc;
  --c-sand: #e2d7c5;
  --c-white: #ffffff;

  /* Tinte */
  --c-ink: #241a16;
  --c-muted: #6d5f56;
  --c-faint: #9c8d81;

  /* Akzent: das Blau der Fahnen vor dem Haus */
  --c-red: #1d5b8f;

  --on-green: rgba(248, 244, 236, 0.78);
  --line: rgba(36, 26, 22, 0.14);
  --line-strong: rgba(36, 26, 22, 0.32);
  --line-light: rgba(248, 244, 236, 0.22);

  /* Typografie — Jans Revision Nr. 1 vom 24.08.2026: die Systemserife
     („schlechte Font") fliegt raus, Jost übernimmt wie in den übrigen
     Häuten. Die Serifen-Idee war mein Unterscheidungsversuch — die
     Unterscheidung leisten seither Machart und Haut. */
  --font-display: "Jost", "Futura", "Century Gothic", sans-serif;
  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;

  --t-display: clamp(2.4rem, 1.4rem + 4.6vw, 5rem);     --lh-display: 1.05;
  --t-h2: clamp(1.65rem, 1.3rem + 1.9vw, 2.8rem);       --lh-h2: 1.12;
  --t-h3: clamp(1.08rem, 1rem + 0.45vw, 1.3rem);        --lh-h3: 1.32;
  --t-body: clamp(1rem, 0.96rem + 0.25vw, 1.07rem);     --lh-body: 1.74;
  --t-small: 0.9125rem;
  --t-micro: 0.74rem;

  --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-6: 3rem;
  --section-y: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  --head-gap: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  --wrap-max: 73rem;
  --wrap-x: clamp(1.25rem, 4vw, 3rem);

  /* Kanten schwächer gerundet als in den warmen Häuten — die Serifen
     brauchen gerade Kanten, sonst wirkt die Seite weich. */
  --radius-s: 0.25rem;
  --radius-m: 0.45rem;
  --radius-l: clamp(0.5rem, 1vw, 0.7rem);
  --radius-pill: 999px;

  --duration-fast: 160ms;
  --duration-normal: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --papier-rgb: 248, 244, 236;
  --buehne-rgb: 67, 48, 42;
  --c-sand-text: #6a5a49;
  --c-on-stage: var(--c-paper);
  --schatten-rgb: 46, 33, 28;
}

/* Revision Nr. 21 (Runde 4): Bento statt Kapitelzeilen. */
.bento { display: grid; gap: clamp(0.9rem, 1.6vw, 1.5rem); }
@media (min-width: 60rem) {
  .bento {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .bento-gross { grid-row: 1 / 3; }
}
.bento article {
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--c-white);
  border: 1px solid var(--line);
}
.bento-nr {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-red);
}
.bento h3 {
  margin-top: 0.6rem;
  font-size: clamp(1.25rem, 1.1rem + 0.9vw, 1.8rem);
  line-height: 1.2;
}
.bento p:not(.bento-nr) {
  margin-top: 0.6rem;
  font-size: var(--t-small);
  color: var(--c-muted);
  max-width: 52ch;
}
.bento .btn { margin-top: 1.1rem; }

/* Großes Feld: Bild oben, Text auf hellem Sockel darunter. */
.bento-gross { display: flex; flex-direction: column; }
.bento-gross > img { width: 100%; flex: 1; min-height: 16rem; object-fit: cover; }
.bento-lage { padding: clamp(1.4rem, 1.2rem + 1.2vw, 2.2rem); }

/* Querfeld: Text links, Bild rechts. */
.bento-quer { display: grid; }
@media (min-width: 40rem) {
  .bento-quer { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr); }
}
.bento-quer > div { padding: clamp(1.4rem, 1.2rem + 1.2vw, 2rem); }
.bento-quer > img { width: 100%; height: 100%; min-height: 11rem; object-fit: cover; }

/* Textfeld auf Sandton. */
.bento-text { padding: clamp(1.4rem, 1.2rem + 1.2vw, 2rem); background: var(--c-paper-2); }

/* Revision Nr. 23 (Runde 6): haus-regen.webp zeigte mit dem
   28-%-Hochzuschnitt nur Himmel und Fahnen — das Gebäude sitzt in der
   unteren Bildhälfte. */
.head-media--hoch .frame img[src*="haus-regen"] { object-position: center 68%; }

/* Revision Nr. 22: zweispaltiger Fließtext unter kurzer Überschrift. */
.spaltentext { display: grid; gap: 1rem 3rem; margin-top: 1.5rem; }
@media (min-width: 56rem) { .spaltentext { grid-template-columns: 1fr 1fr; } }
.spaltentext p { font-size: var(--t-small); color: var(--c-muted); max-width: 58ch; }
.spaltentext + .actions { margin-top: 1.6rem; }