/*
Theme Name: KoSch Sozialwerk – App-Design
Theme URI: https://kosch-sozialwerk.de
Author: KoSch Holding GmbH
Template: kosch-sozialwerk
Description: Webseite im Design der KoSch-App. Kind-Theme von „KoSch Sozialwerk“: alle Funktionen des Basis-Themes bleiben aktiv (u. a. Kontaktformular über die Hub-Anbindung); Gerüst und Bausteine (assets/app/kapp.css, inc/kapp-ui.php) sind auf allen KoSch-Webseiten identisch, diese Datei setzt nur die Farben des Sozialwerks.
Version: 1.0.0
Text Domain: kosch-sozialwerk
*/

/* Farb-Tokens KoSch Sozialwerk – aus der bisherigen assets/css/site.css (--blue, --blue-dark, --blue-soft, --orange, --ink, --muted, --line, --surface). */
:root {
  --d-bg: #f6f9fc;
  --d-surface-2: #f1f6fb;
  --d-text: #152536;
  --d-text-2: #5b6875;
  --d-accent: #194d85;
  --d-accent-hover: #0e3158;
  --d-on-accent: #ffffff;
  --d-accent-text: #194d85;
  --d-accent-soft: #eaf2fa;
  --d-accent-soft-strong: #c9dced;
  --d-accent-2: #f5a623;
  --d-focus: #194d85;
  --d-rail: #f5a623;
  --d-logo-h: 64px;
  --d-logo-h-mobile: 48px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --d-bg: #121820;
    --d-surface-2: color-mix(in srgb, #1a2332 70%, #2a3545);
    --d-text: #e0e4e8;
    --d-text-2: color-mix(in srgb, #8899aa 72%, #e0e4e8);
    --d-accent: #789bc8;
    --d-accent-hover: #9fb8d8;
    --d-on-accent: #0b2b4f;
    --d-accent-text: #9fb8d8;
    --d-accent-soft: rgba(91, 133, 188, 0.18);
    --d-accent-soft-strong: rgba(91, 133, 188, 0.3);
    --d-focus: #789bc8;
    --d-rail: #f7b847;
  }
}

/* 14.11.2026 Logofamilie 2026-11: Logos haben eine eigene Fassung „dunkel“ – keine helle Unterlage. */
:root { --d-logo-h: 34px; --d-logo-h-mobile: 28px; }
@media (prefers-color-scheme: dark) { :root { --d-logo-plate: transparent; --d-logo-pad: 0; } }
.kapp-footer__brand img { height: auto; width: min(100%, 380px); }
.kapp-media--logo .kapp-logo img { width: min(100%, 440px); height: auto; }

/* Slogan-Pflicht 14.11.2026: Kopf-Logo = Vollfassung mit Slogan und Zusatzzeile */
.kapp-brand img { height: 78px !important; width: auto; max-width: min(78vw, 440px) !important; padding: 0 !important; background: none !important; }
.kapp-nav__brand img { height: auto !important; width: min(100%, 320px) !important; }
@media (max-width: 720px) {
  .kapp-brand img { height: auto !important; width: min(74vw, 330px) !important; max-width: none !important; }
}