/* ==========================================================================
   Landingpage – Ergänzungen zu styles.css
   Wird NACH styles.css eingebunden und überschreibt nur das Nötigste.
   ========================================================================== */

/* styles.css reserviert oben Platz fuer zwei Elemente, die es hier nicht
   mehr gibt: ab 1200px fuer die feste Hauptnavigation (6.25rem), darunter
   fuer die fixierte Quickbar (3.125rem). Beide sind entfernt, der Platz
   waere sonst eine leere Flaeche ueber dem Logo. */
#pageWrap {
    padding-top: 0;
}

/* Sanftes Scrollen zu den Sprungmarken der Teaser-Kacheln */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Sprungziele nicht unter die fixierte Quickbar (mobil) rutschen lassen.
   Weitere eigene Sprungmarken hier einfach ergaenzen. */
#content,
#footer {
    scroll-margin-top: 4.25rem;
}

@media (min-width: 75em) {
    #content,
    #footer {
        scroll-margin-top: 1.5rem;
    }
}

/* Quickbar enthält nur noch die Telefonnummer – linksbündig ausrichten */
@media (max-width: 74.9375em) {
    #quickbar {
        justify-content: flex-start;
    }
}

/* --------------------------------------------------------------------------
   Kopfbereich: zwei Logos nebeneinander (Reinwald | Kilb Vetter)
   -------------------------------------------------------------------------- */

/* WICHTIG: In styles.css blendet die Regel
       body:not(.index) #header>.row>.col:last-child { display: none }
   die rechte Kopfspalte unterhalb 1200px aus – dort stand frueher nur ein
   dekorativer Kasten. Jetzt steht dort das KVE-Logo und muss sichtbar
   bleiben.

   Die Gegenregel braucht mindestens die gleiche Spezifitaet (1 ID + 4
   Klassen; das .index in :not() zaehlt mit). Sie haengt bewusst an der
   Klasse .brandCol statt an :last-child, damit sie auch dann noch greift,
   wenn spaeter weitere Spalten in die Row kommen. */
body:not(.index) #header > .row > .col.brandCol,
body:not(.index) #header > .row > .col:last-child.brandCol {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 1.625rem;
    padding-top: 0;
}

@media (min-width: 40em) {
    body:not(.index) #header > .row > .col.brandCol,
    body:not(.index) #header > .row > .col:last-child.brandCol {
        align-items: flex-start;
        text-align: left;
        margin-bottom: 0;
    }
}

#header > .row > .col.brandCol > .branding {
    margin: 0 0 1.125rem;
}

/* Die Klasse .nonFluid setzt in styles.css "width: auto !important", die
   Logos werden also in natuerlicher Groesse ausgegeben. Das Reinwald-Logo
   ist 337px breit, sein Container .branding aber nur 260px – auf schmalen
   Displays lief es rechts aus dem Layout und wurde von #pageWrap
   (overflow:hidden) abgeschnitten. max-width faengt das ab. */
#header .branding img {
    max-width: 100%;
    height: auto;
}

/* Die Telefonnummer der rechten Spalte erbt in styles.css Regeln, die auf
   den früheren Dekokasten zugeschnitten waren – hier vereinheitlichen. */
#header > .row > .col.brandCol > .phone,
#header > .row > .col:last-child > .phone {
    display: inline-block;
    margin-left: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
    color: #184296;
    text-decoration: none;
}

#header > .row > .col.brandCol > .phone:hover,
#header > .row > .col.brandCol > .phone:focus {
    color: #94c21f;
}

/* KVE-Logo im Kopfbereich vergroessern. Die Datei liegt nur in 170x78px
   vor, wird hier also auf ca. 130% hochskaliert – mehr wuerde sichtbar
   unscharf. Fuer eine Darstellung auf Augenhoehe mit dem Reinwald-Logo
   (337x101px) waere eine groessere Datei oder ein SVG noetig.
   Das !important ist noetig, weil .nonFluid in styles.css seinerseits
   "width: auto !important" setzt. */
#header .branding.brandingKve img {
    width: 13.75rem !important;
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   Kundenmitteilung: etwas groesserer Fliesstext als die Basis (16px/26px)
   -------------------------------------------------------------------------- */

.kundenText p {
    font-size: 1.125rem;
    line-height: 1.75rem;
    margin-bottom: 1rem;
}

@media (min-width: 62em) {
    .kundenText p {
        font-size: 1.1875rem;
        line-height: 1.875rem;
    }
}

/* --------------------------------------------------------------------------
   Kontaktblock: Website und Telefonnummer hervorheben
   -------------------------------------------------------------------------- */

.kontaktBlock p {
    font-size: 1.25rem;
    line-height: 1.875rem;
    margin-bottom: .75rem;
}

/* Der Link uebernimmt bewusst die Schriftgroesse seines Absatzes, damit
   "Website:" und die Adresse dahinter auf einer Linie wirken. Hervorgehoben
   wird nur ueber Schriftschnitt und Farbe. */
.kontaktBlock p a {
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
    font-size: inherit;
    text-decoration: none;
    color: #184296;
    overflow-wrap: break-word;
}

.kontaktBlock p a:hover,
.kontaktBlock p a:focus {
    color: #94c21f;
}

@media (min-width: 62em) {
    .kontaktBlock p {
        font-size: 1.375rem;
    }
}

/* --------------------------------------------------------------------------
   KVE-Infobanner im Inhaltsbereich
   -------------------------------------------------------------------------- */

.kveInfo {
    display: block;
    margin-bottom: 1.625rem;
}

.kveInfo img {
    display: block;
    border: 1px solid #bbb;
}

/* --------------------------------------------------------------------------
   Fusszeile: nur noch die Rechtstext-Links
   -------------------------------------------------------------------------- */

/* Die frühere Zwei-Spalten-Aufteilung (Karte | Kontaktdaten) entfällt.
   Deren Abstände und das display:flex der ersten Spalte zurücksetzen. */
#footer > .row > .col:first-child,
#footer > .row > .col:last-child {
    display: block;
    margin-bottom: 0;
    padding: 0 1.125rem;
}

#footer {
    padding-top: 1.625rem;
}

@media (min-width: 62em) {
    #footer {
        padding-top: 3.125rem;
    }
}

/* WICHTIG: In styles.css sind die Links unterhalb 1200px per
   "display:none" ausgeblendet – dort waren sie früher über das
   Burger-Menü erreichbar. Ohne Navigation müssen sie auf allen
   Breiten sichtbar bleiben (Impressumspflicht). Die Textformatierung
   liegt in styles.css ebenfalls nur ab 1200px vor und wird hier für
   kleine Viewports nachgezogen. */
@media (max-width: 74.9375em) {
    #footer .naviAdd {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    #footer .naviAdd li {
        margin-right: 1rem;
    }

    #footer .naviAdd li a {
        text-decoration: none;
        color: #555;
        text-transform: uppercase;
        font-family: "Montserrat", sans-serif;
        font-size: .8125rem;
    }

    #footer .naviAdd li a:hover,
    #footer .naviAdd li a:focus {
        color: #94c21f;
    }
}

/* ==========================================================================
   Kompaktes Layout ab 1200px Fensterbreite

   Ziel: Die Seite passt auf einem 1920x1080-Monitor ohne Scrollen (nutzbare
   Hoehe im Vollbild ca. 940px). Die Ersparnis wird bewusst auf mehrere
   Stellen verteilt, damit nicht das Infobild allein schrumpfen muss.
   Auf schmaleren Geraeten bleiben die urspruenglichen Abstaende erhalten.
   ========================================================================== */
@media (min-width: 75em) {

    /* Kopfpolster: 74px -> 24px.  Die Gegenregel in styles.css lautet
       "body:not(.index) #header", die Spezifitaet muss mithalten. */
    body:not(.index) #header {
        padding-top: 1.5rem;
    }

    /* Abstand zwischen Brieftext und Bannerzeile: 80px -> 32px */
    .kundenText.distanceBottomSmall {
        margin-bottom: 2rem;
    }

    /* Abstand zwischen Bannerzeile und Fusszeile: 150px -> 32px */
    #kontakt.distanceBottom {
        margin-bottom: 2rem;
    }

    /* Infobild: fuellt sonst die halbe Spalte (774px breit, 444px hoch).
       Auf 480px begrenzt sind es noch rund 275px Hoehe. Der QR-Code im
       Bild bleibt dabei ca. 90px gross und damit scanbar. */
    .kveInfo {
        max-width: 30rem;
        margin-bottom: 0;
    }

    /* Fusszeile: 120px -> 70px */
    #footer {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }
}