/* =========================================================
   TOKEN-UEBERSICHT  (Stellschrauben -> client_config.json: "design")
   ---------------------------------------------------------
   Fonts
     --font-heading       Ueberschriften                 "Montserrat", sans-serif
     --font-body          Fliesstext, Inputs             "Montserrat", sans-serif
   Farben
     --color-text         Fliesstext + Links             #585858
     --color-heading      Ueberschriften                 #585858
     --color-bg           Seitenhintergrund              #ffffff
     --color-accent       Buttons (Rand/Text + Fuellung) #585858
     --color-accent-text  Text auf gefuelltem Button     #ffffff
     --color-hover        Hover/Active ueberall          #129990
     --color-muted        Sekundaertext (Service-Kicker) #6b6b6b
     --color-surface      Karten/Kacheln (Service)       #f5f4f0
     --color-border       Trennlinien                    #dddddd
     --color-footer-bg    Footer + Kontaktformular       #f6f6f6
     --color-tile-text    Thumbnail-Titel + Subtitel     #ffffff
   Form
     --radius             Eckenradius (Buttons)          4px
     --radius-media       Eckenradius Inhalts-/Kachelbilder 4px
   Typo
     --heading-transform     Versalien der h2-h6-Labels  uppercase
     --heading-letterspacing Laufweite der h2-h6-Labels  0.2em

   Defaults = HTML5UP-Original -> ohne "design"-Block aendert sich nichts.
   Regel: Tokens nur auf BESTEHENDE Selektoren mappen, kein Layout aendern.
   ========================================================= */

/* =========================================================
   Design-Tokens — zentrale Stellschrauben fuer das Erscheinungsbild.

   - Wird NACH main.css geladen (gewinnt daher bei gleicher Spezifitaet).
   - Die :root-Defaults unten entsprechen EXAKT dem HTML5UP-Original.
     Ohne "design"-Block in client_config.json aendert sich also NICHTS.
   - Pro Kundin ueberschreibt base.html einzelne Werte via :root
     (aus cfg.design) -> nur die gesetzten Tokens wirken, der Rest
     faellt auf diese Defaults zurueck.
   ========================================================= */

:root {
  --font-body: "Montserrat", sans-serif;
  --font-heading: "Montserrat", sans-serif;
  --font-nav: var(--font-body);   /* Navigation (Service-Layout). Default = Fliesstext-Font. Per client_config "design.fonts.nav" ueberschreibbar. */

  --color-text: #585858;        /* Fliesstext + Links (Grundfarbe) */
  --color-heading: #585858;     /* Ueberschriften (erben im Original den Textton) */
  --color-bg: #ffffff;          /* Seitenhintergrund */

  --color-accent: #585858;      /* Buttons: Outline-Rand/-Text + Primary-Fuellung */
  --color-accent-text: #ffffff; /* Textfarbe auf gefuelltem Primary-Button */

  --color-muted: #6b6b6b;       /* Sekundaertext, z.B. Service-Kicker */
  --color-surface: #f5f4f0;     /* Karten-/Kachelflaechen im Service-Layout */
  --color-border: #dddddd;      /* Trennlinien */

  --radius: 4px;                /* Eckenradius (Buttons) */
}

/* --- Mapping auf die bestehenden HTML5UP-Selektoren --- */

body {
  background-color: var(--color-bg);
}

body, input, select, textarea {
  color: var(--color-text);
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.section-heading {
  color: var(--color-heading);
  font-family: var(--font-heading);
}

/* Outline-Button (Standard) */
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
  box-shadow: inset 0 0 0 2px var(--color-accent);
  color: var(--color-accent) !important;
  border-radius: var(--radius);
}

/* Gefuellter Primary-Button */
input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary,
.button.primary {
  background-color: var(--color-accent) !important;
  color: var(--color-accent-text) !important;
}

/* =========================================================
   Erweiterung: Hover-Look, Footer-Hintergrund, Thumbnail-Text
   (Defaults = HTML5UP-Original -> ohne design-Block keine Aenderung)
   ========================================================= */

:root {
  --color-hover: #129990;       /* EIN konsistenter Hover/Active-Ton ueberall */
  --color-footer-bg: #f6f6f6;   /* Hintergrund Footer + Kontaktformular */
  --color-tile-text: #ffffff;   /* Titel + Subtitel auf Projekt-Thumbnails */
}

/* Hover/Active — vereinheitlicht und konfigurierbar */
a:hover {
  color: var(--color-hover) !important;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
  color: var(--color-hover) !important;
  box-shadow: inset 0 0 0 2px var(--color-hover);
}

input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active,
button:active,
.button:active {
  background-color: var(--color-hover);
}

input[type="submit"].primary:hover,
input[type="reset"].primary:hover,
input[type="button"].primary:hover,
button.primary:hover,
.button.primary:hover,
input[type="submit"].primary:active,
input[type="reset"].primary:active,
input[type="button"].primary:active,
button.primary:active,
.button.primary:active {
  background-color: var(--color-hover) !important;
  color: var(--color-accent-text) !important;
}

.footer-links a:hover,
.copyright a:hover {
  color: var(--color-hover) !important;
}

/* Footer-/Kontakt-Hintergrund */
#footer {
  background-color: var(--color-footer-bg);
}

/* Projekt-Thumbnails: Titel + Subtitel (Overlay auf dem Bild) */
.tiles article > a,
.tiles article > a:hover {
  color: var(--color-tile-text) !important;
}

/* Formular-Felder: Fokus-Rand an den Hover-Ton koppeln (statt fixem Pink) */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
  border-bottom-color: var(--color-hover);
  box-shadow: inset 0 -1px 0 0 var(--color-hover);
}

input[type="checkbox"]:focus + label:before,
input[type="radio"]:focus + label:before {
  border-color: var(--color-hover);
  box-shadow: 0 0 0 1px var(--color-hover);
}


/* Social-Icons (FOLLOW): Hover-Rand + Glyph an den Hover-Ton koppeln */
.icon.style2:hover {
  color: var(--color-hover) !important;
  border-color: var(--color-hover);
}

/* Header: Subtitel in derselben Farbe wie der Titel (statt fixem Grau #666) */
#header .site-title .subheading {
  color: var(--color-heading);
}


/* =========================================================
   Erweiterung 2: Heading-Stil (Versalien/Laufweite) + Medien-Radius
   Defaults = HTML5UP-Original -> ohne design-Block keine Aenderung.

   - heading_transform / heading_letterspacing wirken auf h2-h6
     (die HTML5UP-"Kicker"-Labels). h1 (grosse Headline) bleibt unberuehrt.
   - radius_media steuert die Eckenrundung von Inhalts- und Kachelbildern.
     Avatare/Profilbilder (border-radius:100%) bleiben separat und rund.
   ========================================================= */

:root {
  --heading-transform: uppercase;   /* Versalien der h2-h6-Labels */
  --heading-letterspacing: 0.2em;   /* Laufweite der h2-h6-Labels */
  --radius-media: 4px;              /* Eckenradius Inhalts-/Kachelbilder */
}

/* Heading-Labels: Versalien + Laufweite konfigurierbar (h1 ausgenommen) */
h2, h3, h4, h5, h6 {
  text-transform: var(--heading-transform);
  letter-spacing: var(--heading-letterspacing);
}

/* Medien-Radius: Inhalts- und Kachelbilder inkl. Hover-Overlay */
.image,
.image img,
.tiles article > .image,
.tiles article > .image img,
.tiles article > a {
  border-radius: var(--radius-media);
}