/*
 * dachfensterinfo — Markenbild "Warm Editorial" fuer die Django-Anwendung.
 *
 * Quelle aller Werte ist CORPORATE-IDENTITY.md aus dem Brand-Kit. Nichts hier
 * ist frei gewaehlt; wer einen Wert aendert, aendert ihn dort zuerst.
 *
 * Die Anwendung laeuft auf Bootstrap 5.3. Statt dessen Klassen zu ersetzen --
 * das haette jede Vorlage angefasst -- werden hier die Bootstrap-eigenen
 * CSS-Variablen ueberschrieben. Dadurch traegt auch Markup, das spaeter
 * hinzukommt, automatisch das Markenbild.
 *
 * Reihenfolge: erst Schriften, dann Token, dann Bootstrap-Anbindung, dann
 * einzelne Bausteine.
 */

/* ------------------------------------------------------------------ *
 * Schriften -- selbst gehostet, wie die CI es verlangt (DSGVO, kein
 * Google-CDN). Dieselben Dateien liefert auch der WordPress-Teil aus.
 * ------------------------------------------------------------------ */

@font-face {
    font-family: "Public Sans";
    src: url("../fonts/public-sans-400.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Public Sans";
    src: url("../fonts/public-sans-500.woff2") format("woff2");
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Public Sans";
    src: url("../fonts/public-sans-600.woff2") format("woff2");
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Public Sans";
    src: url("../fonts/public-sans-700.woff2") format("woff2");
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Newsreader";
    src: url("../fonts/newsreader-400.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Newsreader";
    src: url("../fonts/newsreader-500.woff2") format("woff2");
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Newsreader";
    src: url("../fonts/newsreader-600.woff2") format("woff2");
    font-weight: 600; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------------------ *
 * Marken-Token (CI Abschnitt 3 und 4)
 * ------------------------------------------------------------------ */

:root {
    --dfi-creme:            #FAF6EF;   /* Seitenhintergrund   */
    --dfi-surface:          #FFFDF9;   /* Karten, Panels      */
    --dfi-tinte:            #2B2622;   /* Text, dunkle Baender */
    --dfi-muted:            #6F665C;   /* Sekundaertext       */
    --dfi-terrakotta:       #C26A3A;   /* einzige Akzentfarbe */
    --dfi-terrakotta-hell:  #F4EDE2;   /* sanfte Baender      */
    --dfi-terrakotta-hover: #A9572D;   /* Knopf im Hover      */
    --dfi-rahmen:           #EFE7DB;   /* Linien, 1px-Rahmen  */
    --dfi-amber:            #E0A04A;   /* Waerme, Sommer      */
    --dfi-slate:            #3D5A73;   /* zweite Datenreihe   */

    /* Ampel-Skala -- ausschliesslich fuer Wertungen (CI Abschnitt 3) */
    --dfi-ampel-schlecht:   #B5482A;
    --dfi-ampel-mittel:     #D89A5B;
    --dfi-ampel-gut:        #4F7D4A;

    --dfi-serif: "Newsreader", Georgia, "Times New Roman", serif;
    --dfi-sans:  "Public Sans", -apple-system, system-ui, "Segoe UI", sans-serif;

    /* Radien (CI Abschnitt 5 und Grafik-Styleguide Abschnitt 1) */
    --dfi-radius-karte:  14px;
    --dfi-radius-panel:  12px;
    --dfi-radius-knopf:   9px;
    --dfi-radius-chip:    6px;
}

/* ------------------------------------------------------------------ *
 * Bootstrap auf die Marke stellen
 * ------------------------------------------------------------------ */

:root {
    --bs-body-bg:          var(--dfi-creme);
    --bs-body-color:       var(--dfi-tinte);
    --bs-body-font-family: var(--dfi-sans);
    --bs-body-font-size:   1.0625rem;   /* CI: Basis 1,0625rem */
    --bs-body-line-height: 1.6;
    --bs-emphasis-color:   var(--dfi-tinte);
    --bs-secondary-color:  var(--dfi-muted);
    --bs-border-color:     var(--dfi-rahmen);
    --bs-border-radius:    var(--dfi-radius-panel);
    --bs-link-color:       var(--dfi-terrakotta);
    --bs-link-hover-color: var(--dfi-terrakotta-hover);
    --bs-link-color-rgb:       194, 106, 58;
    --bs-link-hover-color-rgb: 169,  87, 45;
}

body {
    background: var(--dfi-creme);
    color: var(--dfi-tinte);
    font-family: var(--dfi-sans);
}

/* Ueberschriften in Newsreader (CI Abschnitt 4). Die Vorlagen benutzen
   teilweise Bootstraps fs-Klassen statt echter Ueberschriften -- deshalb
   sind die mit aufgefuehrt. */
h1, h2, h3, h4, h5, h6,
.fs-1, .fs-2, .fs-3 {
    font-family: var(--dfi-serif);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.12;
    color: var(--dfi-tinte);
}

/* H3 laeuft laut CI in Public Sans 700. */
h3, h4, h5, h6 {
    font-family: var(--dfi-sans);
    font-weight: 700;
    letter-spacing: normal;
    line-height: 1.3;
}

.text-muted, .text-secondary { color: var(--dfi-muted) !important; }

/* Eyebrow-Label (CI Abschnitt 4) */
.dfi-eyebrow {
    font-family: var(--dfi-sans);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--dfi-terrakotta);
}

/* Sektionsbreite 1200 px, Padding 48 px Desktop / 24 px Mobil
   (CI Abschnitt 5). */
.container, .container-fluid {
    max-width: 1200px;
    padding-inline: 24px;
}
@media (min-width: 768px) {
    .container, .container-fluid { padding-inline: 48px; }
}
/* Innen liegende Container erben die Breite, sollen aber nicht erneut
   einruecken -- sonst summiert sich das Padding auf. */
.container .container,
.container .container-fluid { padding-inline: 0; max-width: none; }

/* ------------------------------------------------------------------ *
 * Kopfzeile mit Wortmarke
 * ------------------------------------------------------------------ */

.dfi-kopf {
    border-bottom: 1px solid var(--dfi-rahmen);
}

.dfi-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;                       /* CI: Signet + Wortmarke ~10px */
    text-decoration: none;
}
.dfi-logo:hover { text-decoration: none; }

.dfi-logo img { height: 30px; width: 30px; }   /* CI: Header-Signet ~30px */

.dfi-wortmarke {
    font-family: var(--dfi-serif);
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    color: var(--dfi-tinte);
}
.dfi-wortmarke b {
    font-weight: 600;
    color: var(--dfi-terrakotta);
}

/* ------------------------------------------------------------------ *
 * Knoepfe (CI Abschnitt 5): gefuellt Terrakotta auf Creme, Radius 9px.
 * Die Vorlagen benutzen btn-primary und btn-dark nebeneinander; beide
 * fuehren hier zum selben Marken-Knopf.
 * ------------------------------------------------------------------ */

.btn {
    --bs-btn-border-radius: var(--dfi-radius-knopf);
    font-family: var(--dfi-sans);
    font-weight: 600;
    border-radius: var(--dfi-radius-knopf);
}

.btn-primary, .btn-dark, .btn-primary.btn-dark {
    --bs-btn-bg:            var(--dfi-terrakotta);
    --bs-btn-border-color:  var(--dfi-terrakotta);
    --bs-btn-color:         var(--dfi-surface);
    --bs-btn-hover-bg:      var(--dfi-terrakotta-hover);
    --bs-btn-hover-border-color: var(--dfi-terrakotta-hover);
    --bs-btn-hover-color:   var(--dfi-surface);
    --bs-btn-active-bg:     var(--dfi-terrakotta-hover);
    --bs-btn-active-border-color: var(--dfi-terrakotta-hover);
    --bs-btn-focus-shadow-rgb: 194, 106, 58;
}

/* Sekundaer = Outline (CI Abschnitt 5) */
.btn-outline-dark {
    --bs-btn-color:        var(--dfi-tinte);
    --bs-btn-border-color: var(--dfi-rahmen);
    --bs-btn-hover-bg:     var(--dfi-terrakotta-hell);
    --bs-btn-hover-border-color: var(--dfi-terrakotta);
    --bs-btn-hover-color:  var(--dfi-tinte);
}

/* Knoepfe ohne eigene Variante (in den Vorlagen nur `class="btn"`)
   bekommen die Outline-Form, damit sie nicht unsichtbar wirken. */
.btn:not([class*="btn-"]):not(.navbar-toggler) {
    border: 1px solid var(--dfi-rahmen);
    color: var(--dfi-tinte);
    background: var(--dfi-surface);
}
.btn:not([class*="btn-"]):not(.navbar-toggler):hover {
    background: var(--dfi-terrakotta-hell);
    border-color: var(--dfi-terrakotta);
}

/* ------------------------------------------------------------------ *
 * Karten (CI Abschnitt 5): Surface, 1px Rahmen, Radius 12-16px,
 * dezenter weicher Schatten, Bildzoom im Hover hoechstens 1.03.
 * ------------------------------------------------------------------ */

.card {
    --bs-card-bg:           var(--dfi-surface);
    --bs-card-border-color: var(--dfi-rahmen);
    --bs-card-border-radius: var(--dfi-radius-karte);
    background: var(--dfi-surface);
    border: 1px solid var(--dfi-rahmen);
    border-radius: var(--dfi-radius-karte);
    box-shadow: 0 1px 2px rgba(43, 38, 34, .04), 0 8px 24px rgba(43, 38, 34, .05);
    overflow: hidden;
}

.card-title {
    font-family: var(--dfi-serif);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.card img { transition: transform .25s ease; }
.card:hover img { transform: scale(1.03); }

/* Freistehende Bilder (Typenschild-Foto) tragen dieselbe Rundung wie
   Karten -- sonst ist das Foto das einzige eckige Element der Seite. */
.dfi-bild {
    border-radius: var(--dfi-radius-karte);
    border: 1px solid var(--dfi-rahmen);
    display: block;
}

/* ------------------------------------------------------------------ *
 * Tabellen -- Zahlenwerte laut CI in Newsreader.
 * ------------------------------------------------------------------ */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--dfi-tinte);
    --bs-table-border-color: var(--dfi-rahmen);
    --bs-table-hover-bg: var(--dfi-terrakotta-hell);
    --bs-table-hover-color: var(--dfi-tinte);
}

.table td:first-child { color: var(--dfi-muted); }
.table tr.fs-3 td    { font-family: var(--dfi-serif); font-weight: 500; }
.table tr.fs-3 td:first-child { color: var(--dfi-tinte); }

/* ------------------------------------------------------------------ *
 * Meldungen. Die Bewertung des Fensters ist eine Wertung -- dafuer ist
 * laut CI die Ampel-Skala vorgesehen, nicht Bootstraps Rot/Gelb/Gruen.
 * ------------------------------------------------------------------ */

.alert {
    border-radius: var(--dfi-radius-panel);
    border-width: 1px;
    border-left-width: 4px;
    font-family: var(--dfi-sans);
}

.alert-danger {
    --bs-alert-bg:     #FBEEEA;
    --bs-alert-border-color: var(--dfi-ampel-schlecht);
    --bs-alert-color:  var(--dfi-ampel-schlecht);
}
.alert-warning {
    --bs-alert-bg:     var(--dfi-terrakotta-hell);
    --bs-alert-border-color: var(--dfi-amber);
    --bs-alert-color:  #7A5320;
}
.alert-success {
    --bs-alert-bg:     #EDF3EC;
    --bs-alert-border-color: var(--dfi-ampel-gut);
    --bs-alert-color:  #35562F;
}
.alert-info {
    --bs-alert-bg:     var(--dfi-terrakotta-hell);
    --bs-alert-border-color: var(--dfi-terrakotta);
    --bs-alert-color:  var(--dfi-tinte);
}
.alert-link { color: inherit; text-decoration: underline; }

/* ------------------------------------------------------------------ *
 * Formulare
 * ------------------------------------------------------------------ */

.form-control, .form-select {
    background: var(--dfi-surface);
    border: 1px solid var(--dfi-rahmen);
    border-radius: var(--dfi-radius-knopf);
    color: var(--dfi-tinte);
}
.form-control:focus, .form-select:focus {
    border-color: var(--dfi-terrakotta);
    box-shadow: 0 0 0 .2rem rgba(194, 106, 58, .15);
}
.form-label { font-weight: 600; color: var(--dfi-tinte); }

/* ------------------------------------------------------------------ *
 * Abschnittstitel. Die Vorlagen benutzen dafuer `navbar-brand` -- das
 * ist Bootstrap-Fettschrift in Sans. Laut CI gehoeren Abschnittstitel in
 * Newsreader.
 * ------------------------------------------------------------------ */

.navbar-brand {
    font-family: var(--dfi-serif);
    font-weight: 500;
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    color: var(--dfi-tinte);
}

.nav-link { color: var(--dfi-tinte); }
.nav-link:hover, .nav-link:focus { color: var(--dfi-terrakotta); }

/* Der Aufklapper der Debug-Ausgabe steckt in einem h2 und erbte dadurch
   die Serifenschrift. Es ist ein Bedienelement, keine Ueberschrift. */
.accordion-button {
    font-family: var(--dfi-sans);
    font-weight: 600;
    font-size: .95rem;
    color: var(--dfi-muted);
    background: transparent;
}
.accordion-button:not(.collapsed) {
    color: var(--dfi-tinte);
    background: var(--dfi-terrakotta-hell);
    box-shadow: none;
}
.accordion-item {
    background: transparent;
    border: 1px solid var(--dfi-rahmen);
    border-radius: var(--dfi-radius-panel);
}

/* Bootstraps `bg-light` ist ein blaeuliches Weiss und faellt auf Creme
   sofort auf. Auf Surface umgestellt. */
.bg-light {
    background-color: var(--dfi-surface) !important;
    border: 1px solid var(--dfi-rahmen);
}

/* ------------------------------------------------------------------ *
 * Ladeanzeige und leere Uebersicht
 * ------------------------------------------------------------------ */

.spinner-border { color: var(--dfi-terrakotta); }

/* Der Puls auf der leeren Uebersicht lief in #FF6D4A -- ein Rot, das es
   in der Palette nicht gibt. Jetzt Terrakotta, gleiche Bewegung. */
.wrapper { display: flex; justify-content: center; align-items: center; }

.pulse {
    width: 70px;
    height: 70px;
    background-color: var(--dfi-surface);
    border-radius: 50%;
    position: relative;
    animation: dfi-puls 3s linear infinite;
}

.pulse i {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    cursor: pointer;
    color: var(--dfi-terrakotta);
}

@keyframes dfi-puls {
      0% { box-shadow: 0 0  0  0px rgba(194, 106, 58, .55), 0 0 0  0px rgba(194, 106, 58, .55); }
     40% { box-shadow: 0 0  0 50px rgba(194, 106, 58,   0), 0 0 0  0px rgba(194, 106, 58, .55); }
     80% { box-shadow: 0 0  0 50px rgba(194, 106, 58,   0), 0 0 0 30px rgba(194, 106, 58,   0); }
    100% { box-shadow: 0 0  0  0px rgba(194, 106, 58,   0), 0 0 0 30px rgba(194, 106, 58,   0); }
}