/* ============================================================
   derbrill – Design Tokens
   Farben, Layout-Maße, Klammer-Geometrie und Schrift.
   ============================================================ */

/* Good Times — Schrift der großen Headlines, self-hosted (enthält Ö, Ü, Ä). */
@font-face {
  font-family: "Good Times";
  src: url("../fonts/GoodTimes.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Farben ------------------------------------------------
     Anteile am Composite in Klammern.                          */
  --db-blue:        #114182; /* Primärblau, Flächen + Kachel "Freiheit"   (46 %) */
  --db-white:       #ffffff; /*                                           (30 %) */
  --db-navy-deep:   #162D4C; /* Kachel "Klarer Kurs"                      (1,4 %) */
  --db-navy-violet: #252C5D; /* Kachel "Weitblick" + Icon "Erfahrung"     (1,6 %) */
  --db-grey-light:  #E9E9EE; /* Kachel "Erfahren" (helle Kachel)          (1,4 %) */

  /* NICHT verwenden: #ADAFC3 belegt 19 % der Fläche, ist aber nur
     der Platzhalter-Grauton der leeren Bildrahmen im PSD.       */

  /* --- Layout ------------------------------------------------ */
  --db-design-width: 1440px; /* Canvas-Breite des Entwurfs */
  --db-container:    1200px; /* 4 × 279 + 3 × 28 = 1200 (siehe Raster-Hinweis) */
  --db-gap:            28px; /* Grundabstand, im Entwurf 28–30 px */
  --db-col:           279px; /* Kachelbreite */

  /* --- Klammer ("Bracket") ----------------------------------- */
  /* Aufbau in Entwurfs-Pixeln: dünner Balken 10 | Lücke 10 | dicker Balken 26
     Gesamtbreite 46 px. Höhen im Entwurf: 70 px (klein), 233 px, 267 px (groß). */
  --db-bracket-thin:   10px;
  --db-bracket-gap:    10px;
  --db-bracket-thick:  26px;
  --db-bracket-width:  46px;

  /* --- Typografie --------------------------------------------
     Headlines: Good Times. Fließtext: system-nahe Grotesk.      */
  --db-font-display:  "Bahnschrift", "DIN Alternate", system-ui, sans-serif;
  --db-font-headline: "Good Times", "Bahnschrift", "DIN Alternate", system-ui, sans-serif;
  --db-font-body:    "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, sans-serif;
}

/* ============================================================
   Sektionen – y-Grenzen aus dem Composite (Entwurfs-Pixel)
   ------------------------------------------------------------
      0 –  110   Navigation            (blau)
    111 –  791   Banner                  (Foto links + blaues Panel rechts), 681 px hoch
    792 – 1205   Intro "seit 2002"     (blau), 414 px hoch
   1206 – 1760   "Leinen los!"         (weiß), Kacheln bei y 1383–1661
   1761 – 2441   "Volle Freiheit voraus" (blau links + Foto rechts), 681 px hoch
   2442 – 2858   "Wir setzen die Segel" (blau), 417 px hoch
   2859 – 3500   Footer                (weiß), 641 px hoch
   ============================================================ */

/* ============================================================
   Bildrahmen (Platzhalter-Geometrie aus dem PSD)
   ------------------------------------------------------------
   Banner-Foto:     x   0–706, y  111– 791   →  707 × 681  (≈ 1,038 : 1)
   Leuchtturm:    x 720–1439, y 1761–2441  →  720 × 681  (≈ 1,057 : 1)
   Beide praktisch quadratisch – für <img> ein aspect-ratio von 1/1
   mit object-fit: cover ist die pragmatische Umsetzung.
   ============================================================ */

/* ============================================================
   Kachelraster "Leinen los!" – gemessene Ist-Werte
   ------------------------------------------------------------
   Kachel 1  x  103–382  (280 px)  #162D4C  Klarer Kurs   Icon: Kompass
   Kachel 2  x  412–689  (278 px)  #E9E9EE  Erfahren      Icon: Schild
   Kachel 3  x  720–998  (279 px)  #252C5D  Weitblick     Icon: Leuchtturm
   Kachel 4  x 1027–1305 (279 px)  #114182  Freiheit      Icon: Schloss
   Zeile     y 1383–1661 (279 px)  → Kacheln sind quadratisch

   Raster-Hinweis: Die Breiten schwanken um ±1 px, die Lücken um 28–30 px,
   und der Block sitzt nicht mittig (links 103, rechts 134). Das ist
   Handarbeit im Layout, kein Raster. Sauber wäre:
   Container 1200 px, zentriert, 4 Spalten à 279 px, gap 28 px.
   ============================================================ */

.db-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--db-gap);
  max-width: var(--db-container);
  margin-inline: auto;
}
.db-tile { aspect-ratio: 1 / 1; }

/* ============================================================
   Klammer als CSS – keine Bilddatei nötig
   ------------------------------------------------------------
   Aufbau: senkrechte "Spine" + kurze waagerechte Arme, mit Lücke
   abgesetzt (KEIN Doppelbalken!). Gemessen im Raster:
     Spine 10 px | Lücke 10 px | Arm 26 px lang, 7 px dick.
     Arme sitzen bündig an Ober-/Unterkante.

     .db-bracket           →  [   volle Klammer: Spine + Arm oben + unten
     .db-bracket--end      →  ⌋   Spine rechts, nur unterer Arm (nach links)
     im .h-clamped:  Opening  →  ⌈   (unterer Arm ausgeblendet, siehe index.html)
   ============================================================ */
.db-bracket {
  --_h: 70px;
  --_arm-h: 7px;
  position: relative;
  width: var(--db-bracket-width);
  height: var(--_h);
  flex: none;
  /* die senkrechte Spine (links), volle Höhe */
  background: linear-gradient(currentColor 0 0)
              left / var(--db-bracket-thin) 100% no-repeat;
}
/* die beiden waagerechten Arme, um Spine + Lücke nach rechts eingerückt */
.db-bracket::before,
.db-bracket::after {
  content: "";
  position: absolute;
  left: calc(var(--db-bracket-thin) + var(--db-bracket-gap));
  width: var(--db-bracket-thick);
  height: var(--_arm-h);
  background: currentColor;
}
.db-bracket::before { top: 0; }
.db-bracket::after  { bottom: 0; }

/* Schließende Klammer ⌋ : Spine nach rechts, nur der untere Arm (nach links) */
.db-bracket--end { background-position: right; }
.db-bracket--end::before { content: none; }
.db-bracket--end::after {
  left: auto;
  right: calc(var(--db-bracket-thin) + var(--db-bracket-gap));
}