/* ==========================================================
   Classic Glanz Gebäudereinigung – Marken-Grundlagen (Web)
   Einbinden:  <link rel="stylesheet" href="/brand/brand.css">
   Schriften liegen lokal in /brand/fonts (DSGVO-konform,
   kein Abruf von Google-Servern).
   ========================================================== */

/* ---------- Schriften ---------- */
@font-face {
  font-family: "Cinzel";
  src: url("fonts/cinzel-variable.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("fonts/jost-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Marken-Tokens ---------- */
:root {
  /* Markenfarben */
  --cg-navy:      #102A43;  /* Hauptfarbe: Überschriften, Header, Footer, Buttons */
  --cg-petrol:    #17799E;  /* zweite Farbe: Links, „GLANZ“, Hover */
  --cg-tuerkis:   #27AFC4;  /* Akzent: Linien, Icons, Hervorhebungen (nicht für Fließtext auf Weiß) */
  --cg-hellgrau:  #F4F7F9;  /* Flächen, Abschnitts-Hintergründe */
  --cg-weiss:     #FFFFFF;

  /* abgeleitete Töne */
  --cg-text:      #3E5468;  /* Fließtext auf Hell */
  --cg-text-mute: #6B7F90;  /* Nebeninfos, Bildunterschriften */
  --cg-linie:     #D6E0E7;  /* Rahmen, Trennlinien */
  --cg-navy-hell: #17344F;  /* Karten auf Navy-Hintergrund */

  /* Schriften */
  --cg-font-display: "Cinzel", Georgia, "Times New Roman", serif;   /* Überschriften, immer Versalien */
  --cg-font-text:    "Jost", "Helvetica Neue", Arial, sans-serif;    /* Fließtext, Navigation, Buttons */

  /* Typo-Skala (fluid, Handy bis Desktop) */
  --cg-h1: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem);
  --cg-h2: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem);
  --cg-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --cg-body: 1.0625rem;
  --cg-small: 0.875rem;

  /* Form */
  --cg-radius: 10px;
  --cg-radius-lg: 16px;
  --cg-shadow: 0 10px 30px rgba(16, 42, 67, 0.10);
}

/* ---------- Basis ---------- */
body {
  font-family: var(--cg-font-text);
  font-size: var(--cg-body);
  line-height: 1.6;
  color: var(--cg-text);
  background: var(--cg-weiss);
}

h1, h2 {
  font-family: var(--cg-font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cg-navy);
  line-height: 1.15;
}
h1 { font-size: var(--cg-h1); }
h2 { font-size: var(--cg-h2); }
h3 {
  font-family: var(--cg-font-text);
  font-weight: 600;
  font-size: var(--cg-h3);
  color: var(--cg-navy);
  line-height: 1.3;
}

a { color: var(--cg-petrol); }
a:hover { color: var(--cg-navy); }

/* kleine Überzeile wie „GEBÄUDEREINIGUNG“ im Logo */
.cg-subline {
  font-family: var(--cg-font-text);
  font-weight: 400;
  font-size: var(--cg-small);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--cg-petrol);
}

/* ---------- Buttons ---------- */
.cg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 0 1.2em;
  font-family: var(--cg-font-text); font-weight: 500; font-size: 1rem;
  border-radius: var(--cg-radius); border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.cg-btn--primary { background: var(--cg-navy); color: var(--cg-weiss); }
.cg-btn--primary:hover { background: var(--cg-petrol); color: var(--cg-weiss); }
.cg-btn--outline { background: transparent; color: var(--cg-navy); border-color: var(--cg-navy); }
.cg-btn--outline:hover { background: var(--cg-navy); color: var(--cg-weiss); }
.cg-btn:focus-visible { outline: 3px solid var(--cg-tuerkis); outline-offset: 2px; }

/* ---------- Logo ---------- */
.cg-logo { display: block; height: auto; }
.cg-logo--header { width: clamp(170px, 22vw, 260px); }   /* Querformat-Logo im Header */
.cg-logo--footer { width: 180px; }                        /* Querformat weiß auf Navy */