/* =============================================================================
   GOLDBERG — das Marken-Modul.   [hausbauteil-quelle]

   Goldberg ist eine eigene Marke unter dem Dach von ZABA & ZINGO: eigene
   Schrift (GailRock), eigene Farbwelt (Gold auf Schwarz), eigenes Emblem.
   Deshalb steht sie hier und nicht in `zz.css` - und deshalb liegt sie als
   MODUL vor und nicht im Kopf einer Seite: die Goldberg-Kachel auf der
   Collection und die Goldberg-Seite rechnen mit denselben Werten.

   WAS DAS HAUS BEISTEUERT und was diese Datei deshalb NICHT nachbaut:
     - die Wortmarke ZABA & ZINGO       -> zz-mark.css (`letter-spacing:-.2em`)
     - die Fussleiste des Hauses        -> zz-fuss.css / zz-fuss.js
   Goldberg traegt seine eigene Wortmarke, aber die MECHANIK des Ausfahrens ist
   dieselbe wie bei ZZ: `.zz-mark--faltbar` mit `--zz-mark-w`. Ein zweites
   Ausfahr-Skript gibt es nicht.
   ============================================================================= */

.gb{
  --gb-grund:#060605;
  --gb-tief:#041004;
  --gb-flaeche:#0c0c0a;
  --gb-gold:#7B5C25;
  --gb-gold-2:#9D7A3D;
  --gb-gold-hell:#c8a565;
  --gb-ink:#E6E7E8;
  --gb-still:#B4B5B6;
  --gb-schwach:rgb(230 231 232 / .46);
  --gb-linie:rgb(157 122 61 / .22);
  --gb-linie-weich:rgb(230 231 232 / .09);

  --gb-display:'GailRock',Arial,sans-serif;
  --gb-max:1280px;
  --gb-pad:clamp(1.25rem,4vw,5rem);
  --gb-kopf:64px;
  --gb-rand:max(var(--gb-pad),calc(50vw - var(--gb-max)/2 + var(--gb-pad)));
}

@font-face{font-family:'GailRock';src:url('/_shared/goldberg/fonts/gail-rock-extralight.woff') format('woff');font-weight:200;font-display:swap}
@font-face{font-family:'GailRock';src:url('/_shared/goldberg/fonts/gail-rock-light.woff') format('woff');font-weight:300;font-display:swap}
@font-face{font-family:'GailRock';src:url('/_shared/goldberg/fonts/gail-rock-regular.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'GailRock';src:url('/_shared/goldberg/fonts/gail-rock-medium.woff') format('woff');font-weight:500;font-display:swap}
@font-face{font-family:'GailRock';src:url('/_shared/goldberg/fonts/gail-rock-semibold.woff') format('woff');font-weight:600;font-display:swap}
@font-face{font-family:'GailRock';src:url('/_shared/goldberg/fonts/gail-rock-bold.woff') format('woff');font-weight:700;font-display:swap}

body.gb{
  font-family:var(--zz-sans);
  background:var(--gb-grund);
  color:var(--gb-ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.gb a{color:inherit;text-decoration:none}
/* `height:auto` ist NICHT optional. Die Motive tragen `width`/`height` als
   Attribut (gegen den Sprung beim Laden). Ohne diese Zeile setzt das CSS nur
   die Breite, und die Hoehe bleibt beim Attributwert stehen - das Wappen stand
   150 px breit und 1152 px hoch in der Seite. Gemessen, nicht vermutet. */
.gb img{display:block;max-width:100%;height:auto}
.gb-wrap{max-width:var(--gb-max);margin-inline:auto;padding-inline:var(--gb-pad)}

/* ------------------------------------------------------------- Das Emblem */
.gb-emblem{
  display:inline-block;
  background:linear-gradient(160deg,var(--gb-gold-2),var(--gb-gold));
  -webkit-mask:url(/_shared/goldberg/img/goldberg-mark-dark.svg) center/contain no-repeat;
  mask:url(/_shared/goldberg/img/goldberg-mark-dark.svg) center/contain no-repeat;
}

/* ----------------------------------------------------------- Die Wortmarke */
/* Goldberg laeuft auf GailRock Bold. Die AUSFAHRT ist dieselbe Mechanik wie
   bei ZABA & ZINGO - `zz-mark.js` misst, `zz-mark.css` bewegt. Diese Datei
   setzt nur Schrift und Sperrung; das Verhalten liegt beim Haus. */
.gb-wort{
  font-family:var(--gb-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  line-height:1;
  color:var(--gb-ink);
  white-space:nowrap;
}
.gb-wort.zz-mark--faltbar{letter-spacing:.06em}

/* Der Ausfahr-Ausloeser: das Emblem. Es steht vorn, die Schrift kommt dahinter
   heraus - deshalb ist der Knopf eine Zeile aus Emblem plus Mantelstueck. */
.gb-ausfahrt{
  display:inline-flex;align-items:center;gap:var(--zz-s-3);
  background:none;border:0;padding:0;cursor:pointer;
  min-height:44px;                          /* R28b */
  color:inherit;
}
.gb-ausfahrt:focus-visible{outline:2px solid var(--gb-gold-hell);outline-offset:6px}
.gb-ausfahrt .gb-emblem{flex:0 0 auto}

/* ------------------------------------------------------------ Kopfleiste */
.gb-kopf{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:var(--zz-s-4);
  padding:var(--zz-s-2) var(--gb-rand);
  /* DECKEND, nicht verlaufend. Der weiche Verlauf sah im Stand schoen aus und
     liess beim Rollen die grosse Hero-Wortmarke DURCH die Leiste scheinen -
     dann stand hinter dem Logo etwas, und genau das ist verboten
     (Gesetz 3 der Marke, Operator 2026-08-24). */
  background:var(--gb-grund);
  border-block-end:1px solid var(--gb-linie-weich);
}
.gb-kopf .gb-emblem{width:26px;height:26px}
.gb-kopf .gb-wort{font-size:1.1875rem}
.gb-nav{
  display:none;gap:var(--zz-s-5);align-items:center;
  font-family:var(--zz-sans);
  font-size:0.875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gb-still);font-weight:600;
}
.gb-nav a{transition:color var(--zz-t-fast) var(--zz-ease);min-height:44px;display:inline-flex;align-items:center}
.gb-nav a:hover{color:var(--gb-gold-hell)}
.gb-nav a:focus-visible{outline:2px solid var(--gb-gold-hell);outline-offset:3px}
.gb-nav .gb-haus{color:var(--gb-ink)}
@media (min-width:840px){ .gb-nav{display:flex} }

/* ----------------------------------------------------------------- Hero */
.gb-hero{
  position:relative;min-height:100dvh;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:#000 url('/_shared/goldberg/img/bg-mountain.jpg') center/cover no-repeat;
}
.gb-hero::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 50% 12%,rgb(123 92 37 / .18),transparent 60%),
    linear-gradient(180deg,rgb(6 6 5 / .55) 0%,rgb(6 6 5 / .25) 38%,rgb(6 6 5 / .82) 86%,var(--gb-grund) 100%);
}
.gb-hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,rgb(255 255 255 / .025) 0,rgb(255 255 255 / .025) 1px,transparent 1px,transparent 3px);
  mix-blend-mode:overlay;opacity:.5;
}
.gb-hero__in{
  position:relative;z-index:2;width:100%;max-width:var(--gb-max);margin-inline:auto;
  padding:0 var(--gb-pad) clamp(3rem,8vh,6rem);
}
/* GEMESSEN, NICHT GESCHAETZT (2026-08-24): mit der ausgefahrenen Wortmarke lief
   das Blatt bei 360 px auf 374 px - Emblem 58 + Abstand 12 + GOLDBERG 284 +
   Rand 20. Eingefahren war alles in Ordnung, und genau deshalb faellt so ein
   Fehler beim Ansehen nicht auf: er entsteht erst NACH dem Klick. Die
   Untergrenzen sind so gesetzt, dass die ausgefahrene Marke bei 360 px passt;
   `max-width` ist das Netz darunter, falls eine laengere Marke dazukommt. */
.gb-hero .gb-ausfahrt{max-width:100%}
.gb-hero .gb-ausfahrt .gb-emblem{width:clamp(44px,8vw,88px);height:clamp(44px,8vw,88px)}
.gb-hero .gb-wort{font-size:clamp(2.5rem,13vw,10rem);line-height:.86;letter-spacing:.01em}

.gb-eyebrow{
  font-family:var(--zz-sans);
  font-size:0.875rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gb-gold-2);font-weight:600;
  display:flex;align-items:center;gap:var(--zz-s-3);
  margin-block:var(--zz-s-5) var(--zz-s-3);
}
.gb-eyebrow::before{content:'';width:26px;height:1px;background:currentColor;flex:0 0 auto}
.gb-lede{margin-block-start:var(--zz-s-4);max-width:34rem;font-size:clamp(1rem,1.5vw,1.18rem);color:var(--gb-still);text-wrap:pretty}
.gb-lede strong{color:var(--gb-ink);font-weight:600}
.gb-tagline{
  margin-block-start:var(--zz-s-3);
  font-family:var(--gb-display);font-weight:500;
  font-size:clamp(1rem,1.4vw,1.15rem);letter-spacing:.3em;text-transform:uppercase;
  color:var(--gb-gold-hell);
}

/* -------------------------------------------------------------- Abschnitt */
.gb-abschnitt{position:relative;padding-block:clamp(4.5rem,11vh,9rem)}
.gb-kicker{
  font-family:var(--zz-sans);
  font-size:0.875rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gb-gold-2);font-weight:600;
  display:flex;align-items:center;gap:var(--zz-s-3);
  margin-block-end:var(--zz-s-5);
}
.gb-kicker::before{content:'';width:22px;height:1px;background:currentColor;flex:0 0 auto}

/* Ueberschriften. R73/R74: die Zeilenzahl ist gemessen, nicht gehofft, und ein
   fester Umbruch gilt nur oberhalb der Breite, fuer die er gesetzt wurde. */
.gb-h2{
  font-family:var(--gb-display);font-weight:200;
  line-height:1.06;letter-spacing:.005em;text-transform:uppercase;
  text-wrap:balance;
}
.gb-h2 em{font-style:normal;color:var(--gb-gold-hell);font-weight:500}
/* Der Manifest-Satz lief bis heute aus seinem Kasten: 3,5rem bei max-width
   18ch ergaben drei Zeilen, von denen die dritte ueber das Raster hinausstand.
   Gemessen passt er bei 26ch und 3rem in ZWEI Zeilen (Operator-Vorgabe). */
/* ZWEI Zeilen, gemessen: "Protection was never supposed" sind 29 Zeichen und
   passten nicht in 26ch - der Satz brach ein drittes Mal. GailRock laeuft
   breit, deshalb 34ch und eine Stufe kleiner. */
.gb-h2--manifest{font-size:clamp(1.6rem,3.2vw,2.6rem);max-width:34ch}
.gb-h2--mittel{font-size:clamp(1.6rem,3.4vw,2.6rem);max-width:22ch}

/* Ein Umbruch, der nur auf breiten Flaechen gilt. Unterhalb faellt er weg und
   der Text bricht von selbst - sonst entstehen Ein-Wort-Zeilen (R74). */
.gb-br{display:none}
@media (min-width:640px){ .gb-br{display:inline} }

/* Manifest */
.gb-manifest{background:linear-gradient(180deg,var(--gb-grund),var(--gb-tief))}
.gb-spalten{display:grid;gap:var(--zz-s-6);margin-block-start:var(--zz-s-6)}
@media (min-width:820px){ .gb-spalten{grid-template-columns:1fr 1fr;gap:var(--zz-s-9)} }
.gb-abschnitt p{color:var(--gb-still);font-size:clamp(1rem,1.3vw,1.1rem);text-wrap:pretty}
.gb-abschnitt p + p{margin-block-start:var(--zz-s-4)}

/* Engineering — auf dem Drahtgitter-Gelaende, das bisher ungenutzt auf dem
   Server lag. Der dunkle Deckel darueber haelt den Textkontrast messbar (R5). */
.gb-technik{
  border-block-start:1px solid var(--gb-linie-weich);
  background:
    linear-gradient(180deg,rgb(6 6 5 / .88),rgb(6 6 5 / .60) 45%,rgb(6 6 5 / .90)),
    #000 url('/_shared/goldberg/img/bg-mountain-02.jpg') center/cover no-repeat;
}
.gb-saeulen{
  display:grid;gap:1px;background:var(--gb-linie-weich);
  border:1px solid var(--gb-linie-weich);margin-block-start:var(--zz-s-6);
}
@media (min-width:780px){ .gb-saeulen{grid-template-columns:repeat(3,1fr)} }
.gb-saeule{background:rgb(6 6 5 / .82);padding:clamp(1.8rem,3vw,2.6rem)}
.gb-saeule__ico{width:38px;height:38px;color:var(--gb-gold-2);margin-block-end:var(--zz-s-4)}
.gb-saeule__ico svg{width:100%;height:100%;display:block}
.gb-saeule h3{
  font-family:var(--gb-display);font-weight:700;
  font-size:clamp(1.15rem,1.8vw,1.4rem);letter-spacing:.04em;text-transform:uppercase;color:var(--gb-ink);
}
.gb-saeule p{margin-block-start:var(--zz-s-2);font-size:1rem}

/* Das Stueck — das Produktmotiv, ganze Breite, mit der Bildunterschrift
   daneben. Bisher lag `artistic.jpg` unbenutzt auf dem Server. */
.gb-stueck{
  border-block:1px solid var(--gb-linie-weich);
  background:var(--gb-grund);padding-block:0;
}
.gb-stueck__raster{display:grid;gap:0}
@media (min-width:900px){ .gb-stueck__raster{grid-template-columns:3fr 2fr;align-items:stretch} }
.gb-stueck__bild{position:relative;min-height:clamp(20rem,52vh,34rem);overflow:hidden}
.gb-stueck__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.gb-stueck__bild::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 60%,rgb(6 6 5 / .55) 100%);
}
.gb-stueck__text{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(2rem,5vw,4rem) var(--gb-pad);
  border-inline-start:1px solid var(--gb-linie-weich);
}

/* Zusammenarbeit */
.gb-collab{
  background:#000;text-align:center;
  border-block:1px solid var(--gb-linie-weich);
}
.gb-collab .gb-kicker{justify-content:center}
/* `.gb-abschnitt p` steht weiter oben und traegt zwei Klassen-Gewichte; diese
   zwei Absaetze sind aber keine Fliesstext-Absaetze. Ohne den Praefix gewann
   die allgemeine Regel und die Zeile "Tactical x Fashion" stand in Lesegroesse
   statt in 5rem. Kein !important - nur die richtige Spezifitaet. */
.gb-abschnitt .gb-collab__x{
  font-family:var(--gb-display);font-weight:200;
  font-size:clamp(2.4rem,7vw,5rem);line-height:1.02;text-transform:uppercase;letter-spacing:.02em;
  color:var(--gb-ink);
}
.gb-collab__x b{font-weight:700;color:var(--gb-gold-hell)}
.gb-collab__x .gb-x{color:var(--gb-gold-2);font-weight:700;padding-inline:.12em}
.gb-collab p{margin:var(--zz-s-5) auto 0;max-width:40rem}
.gb-abschnitt .gb-collab__ref{
  margin-block-start:var(--zz-s-4);
  font-size:0.875rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gb-schwach);font-weight:600;
}

/* Publikum */
.gb-publikum{background:linear-gradient(180deg,var(--gb-tief),var(--gb-grund))}
.gb-publikum__raster{display:grid;gap:var(--zz-s-5);margin-block-start:var(--zz-s-6)}
@media (min-width:780px){ .gb-publikum__raster{grid-template-columns:1fr 1fr} }
.gb-karte{
  border:1px solid var(--gb-linie);
  padding:clamp(1.6rem,2.6vw,2.3rem);
  background:rgb(12 12 10 / .5);
}
.gb-karte__lbl{font-family:var(--zz-sans);font-size:0.875rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gb-gold-2);font-weight:600}
.gb-karte h3{
  font-family:var(--gb-display);font-weight:700;
  font-size:clamp(1.4rem,2.4vw,1.9rem);text-transform:uppercase;letter-spacing:.03em;
  margin-block-start:var(--zz-s-2);line-height:1.05;
}
.gb-karte p{margin-block-start:var(--zz-s-2);font-size:1rem}

/* Aufruf */
.gb-aufruf{text-align:center;background:#000;border-block-start:1px solid var(--gb-linie-weich)}
.gb-aufruf__wappen{width:clamp(96px,14vw,150px);margin:0 auto var(--zz-s-5);opacity:.92}
.gb-aufruf h2{
  font-family:var(--gb-display);font-weight:700;
  font-size:clamp(2rem,5vw,3.4rem);text-transform:uppercase;letter-spacing:.04em;
}
.gb-aufruf p{margin:var(--zz-s-3) auto 0;max-width:34rem}
.gb-knopf{
  display:inline-flex;align-items:center;gap:var(--zz-s-2);
  margin-block-start:var(--zz-s-6);
  padding:var(--zz-s-3) var(--zz-s-5);
  border:1px solid var(--gb-gold-2);
  font-family:var(--zz-sans);
  font-size:0.875rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--gb-ink);white-space:nowrap;      /* R12: eine Zeile */
  min-height:44px;                              /* R28b */
  transition:background var(--zz-t-base) var(--zz-ease),color var(--zz-t-base) var(--zz-ease);
}
.gb-knopf:hover{background:var(--gb-gold-2);color:var(--gb-grund)}
.gb-knopf:focus-visible{outline:2px solid var(--gb-gold-hell);outline-offset:3px}
.gb-knopf__pfeil{transition:transform var(--zz-t-base) var(--zz-ease);display:inline-block}
.gb-knopf:hover .gb-knopf__pfeil{transform:translateX(4px)}

/* Die Signaturzeile ueber der Haus-Fussleiste. Gleicher Aufbau wie auf den
   acht Collection-Seiten, gleicher Wortlaut - nur in den Farben der Marke. */
.gb-signatur{border-block-start:1px solid var(--gb-linie-weich);background:var(--gb-grund);padding:var(--zz-s-6) var(--gb-pad)}
.gb-signatur__in{
  max-width:var(--gb-max);margin-inline:auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--zz-s-3);
  color:var(--gb-still);
}
.gb-signatur .gb-emblem{width:18px;height:18px}
.gb-signatur__zusatz{font-family:var(--zz-sans);font-size:0.875rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500}

@media (prefers-reduced-motion: reduce){
  .gb-knopf,.gb-knopf__pfeil,.gb-nav a{transition-duration:.01ms}
}