/* ==========================================================================
   KREILLER – Stylesheet für Abteilungs- und Allgemeinseiten
   Design: Dieter Rams (klar & funktional) · Farben/Schrift nach Styleguide 01/2025

   ABLAGE:  /media/templates/site/cassiopeia/css/kreiller-seiten.css
   EINBINDEN in templates/cassiopeia/index.php vor </head>:
     <link rel="stylesheet" href="<?php echo $this->baseurl; ?>/media/templates/site/cassiopeia/css/kreiller-seiten.css">

   VERWENDUNG: Ein Joomla-Artikel pro Seite. Der Artikel-Body enthält NUR
   den Inhalt (kein Header/Footer – das liefert Cassiopeia). Äußere Klasse:
     <div class="k-page k-page--arbeitsschutz"> ... </div>
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. SCHRIFT – Inter selbst hosten (DSGVO: kein Google-Fonts-CDN-Request)
   woff2 von fonts.google.com/specimen/Inter laden, Pfad anpassen, aktivieren.
   -------------------------------------------------------------------------- */
/*
@font-face {
  font-family: "Inter";
  src: url("/media/templates/site/cassiopeia/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
*/

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
.k-page {
  /* Ground */
  --k-bg: #ffffff;
  --k-surface: #f4f4f4;
  --k-text: #1a1a1a;
  --k-divider: rgba(26, 26, 26, 0.15);

  /* KREILLER Hausfarbe Blau – Pantone 300 C / RAL 5015 */
  --k-primary: #2a6bb7;
  --k-primary-600: #245a99;
  --k-primary-100: #eaf1fa;

  /* Gold (Claim, Rahmen) und Neutral */
  --k-gold: #ba9a68;
  --k-grey: #999999;

  /* Abteilungsfarbe – per Modifier gesetzt, Default = Hausfarbe */
  --k-dept: var(--k-primary);

  /* Typografie */
  --k-font: "Inter", system-ui, -apple-system, sans-serif;
  --k-text-sm: 0.875rem;
  --k-text-base: 1rem;
  --k-text-lg: 1.125rem;
  --k-text-xl: 1.5rem;
  --k-text-2xl: 1.875rem;
  --k-text-3xl: 2.25rem;

  /* Spacing (4px-Basis) */
  --k-2: 0.5rem;
  --k-3: 0.75rem;
  --k-4: 1rem;
  --k-6: 1.5rem;
  --k-8: 2rem;
  --k-12: 3rem;
  --k-16: 4rem;

  --k-radius: 0;              /* KREILLER-Printmaterialien: harte Ecken */
  --k-maxw: 1280px;
}

@media (min-width: 768px) {
  .k-page {
    --k-text-2xl: 2.5rem;
    --k-text-3xl: 3.5rem;
  }
}

/* Abteilungsfarben (Styleguide S.16) */
.k-page--arbeitsschutz  { --k-dept: #f09600; }
.k-page--bauabteilung   { --k-dept: #b4b4b4; }
.k-page--bedachung      { --k-dept: #d2af78; }
.k-page--befestigung    { --k-dept: #a5afb4; }
.k-page--beschlag       { --k-dept: #00a596; }
.k-page--heizung        { --k-dept: #d20019; }
.k-page--installation   { --k-dept: #55aa28; }
.k-page--sanitaer       { --k-dept: #28b4e6; }
.k-page--stahl          { --k-dept: #004b96; }
.k-page--tuer-tor       { --k-dept: #96195a; }
.k-page--werkzeug       { --k-dept: #c8ac00; }
.k-page--dienstleistung { --k-dept: var(--k-primary); }

/* --------------------------------------------------------------------------
   2. BASIS
   -------------------------------------------------------------------------- */
.k-page {
  font-family: var(--k-font);
  color: var(--k-text);
  font-size: var(--k-text-base);
  line-height: 1.6;
}

.k-page *,
.k-page *::before,
.k-page *::after { box-sizing: border-box; }

.k-page h1, .k-page h2, .k-page h3 {
  font-family: var(--k-font);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--k-4);
  color: var(--k-text);
}

.k-page h1 { font-size: var(--k-text-3xl); }
.k-page h2 { font-size: var(--k-text-2xl); }
.k-page h3 { font-size: var(--k-text-lg); }
.k-page p  { margin: 0 0 var(--k-4); }

/* Sektion: Mobile-first, ab 768px zweispaltig wo gewünscht */
.k-section {
  padding: var(--k-12) var(--k-4);
  max-width: var(--k-maxw);
  margin: 0 auto;
}

.k-section--tint {
  background: var(--k-surface);
  max-width: none;
}
.k-section--tint > .k-inner { max-width: var(--k-maxw); margin: 0 auto; }

.k-section--brand {
  background: var(--k-primary);
  color: #fff;
  max-width: none;
}
.k-section--brand > .k-inner { max-width: var(--k-maxw); margin: 0 auto; }
.k-section--brand h2 { color: #fff; }
.k-section--brand p  { color: var(--k-primary-100); }

@media (min-width: 768px) {
  .k-section { padding: var(--k-16) var(--k-8); }
  .k-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--k-12);
    align-items: start;
  }
  .k-split--center { align-items: center; }
  /* Bild rechts / links tauschen ohne Markup-Änderung */
  .k-split--reverse > *:first-child { order: 2; }
}

/* --------------------------------------------------------------------------
   3. HERO
   -------------------------------------------------------------------------- */
.k-hero { padding: var(--k-12) var(--k-4); max-width: var(--k-maxw); margin: 0 auto; }

@media (min-width: 768px) {
  .k-hero {
    padding: var(--k-16) var(--k-8);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--k-16);
    align-items: center;
  }
}

/* Abteilungs-Badge: gefüllte Fläche in Abteilungsfarbe */
.k-badge {
  display: inline-block;
  padding: 5px 12px;
  background: var(--k-dept);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--k-4);
}

.k-hero p { font-size: var(--k-text-lg); max-width: 56ch; }

/* Badge auf hellen Abteilungsfarben (Bauabteilung, Bedachung, Befestigung,
   Sanitär, Werkzeug) braucht dunklen statt weißen Text für Kontrast */
.k-badge--dark { color: var(--k-text); }

/* Zentrierter Kennzahl-Banner auf Kreiller-Blau (z.B. Bauabteilung: >15.000t) */
.k-stat-banner {
  background: var(--k-primary);
  padding: var(--k-8) var(--k-4);
  max-width: none;
}
.k-stat-banner .k-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.k-stat-banner .k-stat__value {
  color: #fff;
  font-size: var(--k-text-3xl);
  margin-bottom: var(--k-2);
}
.k-stat-banner .k-stat__label { color: #dbe6f2; font-size: var(--k-text-sm); }

/* --------------------------------------------------------------------------
   4. EYEBROW-LABEL (mit Quadrat-Stilmittel, Styleguide S.21)
   -------------------------------------------------------------------------- */
.k-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--k-2);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k-dept);
  margin-bottom: var(--k-3);
}
.k-eyebrow::before {
  content: "";
  width: 10px; height: 10px;
  background: currentColor;
  flex-shrink: 0;
}
.k-eyebrow--blue { color: var(--k-primary); }
.k-eyebrow--grey { color: var(--k-grey); }
.k-eyebrow--light { color: #dbe6f2; }
/* Sonderfall Sanitär/Installation: eine Seite, zwei offizielle Abteilungsfarben */
.k-eyebrow--sanitaer { color: #28b4e6; }
.k-eyebrow--installation { color: #55aa28; }

/* --------------------------------------------------------------------------
   5. CHECKLISTE (Kreis-Marker in Abteilungsfarbe)
   -------------------------------------------------------------------------- */
.k-list {
  list-style: none;
  margin: 0 0 var(--k-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--k-4);
}

.k-list li {
  position: relative;
  padding-left: var(--k-6);
}

.k-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.45em;
  width: 12px; height: 12px;
  border: 2px solid var(--k-dept);
  border-radius: 50%;
}

/* Variante: zweispaltig mit Trennlinie (für "Spezialisierte Produkte") */
.k-list--split li {
  padding-bottom: var(--k-4);
  border-bottom: 1px solid var(--k-divider);
}
.k-list--split .k-list__title { font-weight: 600; display: block; }
.k-list--split .k-list__detail { font-size: 0.85rem; opacity: 0.7; display: block; }

@media (min-width: 768px) {
  .k-list--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--k-4) var(--k-12);
  }
}

/* Kategorie-Grid mit dünnen Trennlinien (z.B. Beschlag: Baubeschläge /
   Möbelbeschläge / Sicherheitstechnik) */
.k-cat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--k-divider);
  border: 1px solid var(--k-divider);
}
@media (min-width: 768px) {
  .k-cat-grid { grid-template-columns: repeat(3, 1fr); }
}
.k-cat-grid__item { background: #fff; padding: var(--k-6); }
.k-cat-grid__item h3 { font-size: 1rem; margin-bottom: var(--k-3); }
.k-cat-grid__item p { font-size: 0.85rem; opacity: 0.8; margin: 0; }

/* --------------------------------------------------------------------------
   6. KARTEN (Service, Standorte)
   -------------------------------------------------------------------------- */
.k-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--k-4);
}

@media (min-width: 768px) {
  .k-cards { grid-template-columns: repeat(3, 1fr); }
  .k-cards--2 { grid-template-columns: repeat(2, 1fr); }
}

.k-card {
  border: 1px solid var(--k-divider);
  padding: var(--k-6);
  transition: border-color 0.15s ease;
}
.k-card:hover { border-color: var(--k-primary); }
.k-card h3 { font-size: 1rem; margin-bottom: var(--k-2); }
.k-card p  { font-size: 0.85rem; opacity: 0.75; margin: 0; }

/* Kennzahlen-Kacheln (Über uns) */
.k-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--k-6);
  margin: var(--k-8) 0;
}
@media (min-width: 768px) {
  .k-stats { grid-template-columns: repeat(4, 1fr); }
}
.k-stat__value {
  font-size: var(--k-text-2xl);
  font-weight: 800;
  color: var(--k-primary);
  line-height: 1;
  display: block;
  margin-bottom: var(--k-2);
}
.k-stat__label { font-size: var(--k-text-sm); opacity: 0.75; }

/* --------------------------------------------------------------------------
   6b. WERTE-/INFOKARTEN (farbiger Rahmen oben + getönter Hintergrund)
   Für "Über uns" (Regionale Wertschöpfung/Werte), "Standorte" (Akademie)
   -------------------------------------------------------------------------- */
.k-value-card {
  border-top: 3px solid var(--k-primary);
  background: var(--k-primary-100);
  padding: var(--k-6);
}
.k-value-card--gold { border-top-color: var(--k-gold); background: #f3ece0; }
.k-value-card--plain { background: transparent; padding: var(--k-6) 0 0; }
.k-value-card h3 { font-size: 1.0625rem; margin-bottom: var(--k-2); }
.k-value-card p { font-size: 0.9375rem; opacity: 0.85; margin: 0; }

/* Kennzahlen-Leiste auf Blau (z.B. "Kreiller in Zahlen"), 1px-Trennlinien */
.k-stats-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.2);
}
@media (min-width: 768px) {
  .k-stats-strip { grid-template-columns: repeat(5, 1fr); }
}
.k-stats-strip__item { background: var(--k-primary); padding: var(--k-6) var(--k-3); text-align: center; }
.k-stats-strip .k-stat__value { color: #fff; font-size: var(--k-text-xl); }
.k-stats-strip .k-stat__label { color: #dbe6f2; font-size: 0.8rem; }

/* Tag-Pills (z.B. "Unsere Kunden kommen aus") */
.k-tags { display: flex; gap: var(--k-2); flex-wrap: wrap; }
.k-tags span {
  padding: 8px 16px;
  background: var(--k-primary-100);
  color: var(--k-primary-600);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Standort-/Kontaktkarten mit farbigem linkem/oberem Rand + kleiner Punkt-Liste */
.k-dot-list { display: flex; flex-direction: column; gap: var(--k-2); margin: 0 0 var(--k-4); padding: 0; list-style: none; }
.k-dot-list li { position: relative; padding-left: var(--k-4); font-size: 0.9375rem; }
.k-dot-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--k-primary);
}
.k-dot-list--gold li::before { background: var(--k-gold); }

.k-locations { display: grid; grid-template-columns: 1fr; gap: var(--k-4); }
@media (min-width: 768px) { .k-locations { grid-template-columns: repeat(2, 1fr); } }
.k-locations .k-value-card h3 { margin-bottom: 2px; }
.k-locations .k-value-card .k-addr { font-size: 0.85rem; opacity: 0.7; margin-bottom: var(--k-4); }
.k-locations .k-label-sm {
  display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; opacity: 0.55; margin-bottom: var(--k-2);
}

.k-contact-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; background: var(--k-surface);
  border-left: 3px solid var(--k-primary);
  font-size: 0.875rem; margin-bottom: 10px;
}
.k-contact-row--gold { border-left-color: var(--k-gold); }
.k-contact-row strong { font-weight: 600; }
.k-contact-row span { opacity: 0.7; }

/* Kontaktformular (rein visuell – echte Verarbeitung über Joomla-Formular-
   Erweiterung wie z.B. Breezing Forms / RSForm! oder Kontaktkomponente) */
.k-form { display: flex; flex-direction: column; gap: var(--k-4); }
.k-form label {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; opacity: 0.55;
}
.k-form input, .k-form textarea {
  font-family: inherit; font-size: 0.9375rem;
  padding: 12px 14px; border: 1px solid var(--k-divider);
  border-radius: var(--k-radius);
}

/* Abteilungs-Übersichtskarten (Kachel mit Icon, farbiger oberer Rand) */
.k-dept-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--k-4); }
@media (min-width: 768px) { .k-dept-grid { grid-template-columns: repeat(4, 1fr); } }
.k-dept-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--k-divider);
  border-top: 3px solid var(--k-primary);
  overflow: hidden; transition: box-shadow 0.15s ease;
}
.k-dept-card:hover { box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.k-dept-card img { display: block; width: 100%; height: auto; }
.k-dept-card__label {
  padding: var(--k-3) var(--k-4);
  font-weight: 700; font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   6c. ANSPRECHPARTNER / TEAM
   -------------------------------------------------------------------------- */
.k-team-location {
  font-family: var(--k-font);
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  background: var(--k-primary);
  padding: 10px var(--k-4);
  margin: var(--k-8) 0 var(--k-4);
}
.k-team-location:first-of-type { margin-top: 0; }

.k-team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--k-6) var(--k-4);
  margin-bottom: var(--k-4);
}
@media (min-width: 640px) {
  .k-team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .k-team-grid { grid-template-columns: repeat(3, 1fr); }
}

.k-team-card { display: flex; gap: var(--k-4); align-items: flex-start; }

.k-team-card__photo {
  width: 76px; height: 76px; flex: none;
  border-radius: 50%;
  background: var(--k-surface);
  border: 1px dashed var(--k-divider);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; color: var(--k-grey); text-align: center;
  overflow: hidden;
}
.k-team-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.k-team-card__name { font-weight: 700; font-size: 0.9375rem; margin-bottom: 2px; }
.k-team-card__role { font-size: 0.8rem; opacity: 0.7; margin-bottom: 6px; }
.k-team-card__meta { font-size: 0.8125rem; line-height: 1.5; }
.k-team-card__meta a { color: var(--k-text); }
.k-team-card__meta a:hover { color: var(--k-primary); }

.k-team-general {
  margin-top: var(--k-4);
  padding: var(--k-4);
  background: var(--k-surface);
  font-size: 0.875rem;
  display: grid;
  gap: var(--k-2);
}
.k-team-general strong { display: inline-block; min-width: 90px; }

/* --------------------------------------------------------------------------
   7. BUTTONS
   -------------------------------------------------------------------------- */
.k-btn {
  display: inline-block;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  padding: 14px 26px;
  border: 1px solid var(--k-primary);
  background: var(--k-primary);
  color: #fff;
  border-radius: var(--k-radius);
  transition: background 0.15s ease;
}
.k-btn:hover { background: var(--k-primary-600); color: #fff; text-decoration: none; }

.k-btn--outline { background: #fff; color: var(--k-primary); }
.k-btn--outline:hover { background: var(--k-primary-100); color: var(--k-primary); }

.k-btn-row { display: flex; gap: var(--k-3); flex-wrap: wrap; margin-top: var(--k-6); }

/* --------------------------------------------------------------------------
   8. BILDER & PLATZHALTER
   -------------------------------------------------------------------------- */
.k-img { width: 100%; height: auto; display: block; }

/* Platzhalter, solange keine echten Fotos eingepflegt sind */
.k-img-placeholder {
  width: 100%;
  min-height: 240px;
  background: var(--k-surface);
  border: 1px dashed var(--k-divider);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--k-4);
  font-size: var(--k-text-sm);
  color: var(--k-grey);
}

/* Marken-Logo-Leiste */
.k-brands {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--k-4);
  align-items: center;
}
@media (min-width: 768px) {
  .k-brands { grid-template-columns: repeat(5, 1fr); }
}
.k-brands img { max-width: 100%; height: auto; display: block; }

/* Abteilungs-Kacheln ("Weitere Fachabteilungen") */
.k-depts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--k-3);
}
@media (min-width: 768px) {
  .k-depts { grid-template-columns: repeat(6, 1fr); }
}
.k-depts a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--k-2);
  border: 1px solid var(--k-divider);
  transition: transform 0.12s ease;
}
.k-depts a:hover { transform: translateY(-2px); }
.k-depts img { width: 100%; height: auto; display: block; }