/* =====================================================================
   KGS FOOTER — Mobile Feinschliff
   ---------------------------------------------------------------------
   Beim Durchmessen aller Seiten fiel auf: index.html hat einen mobilen
   Feinschliff des Footers bekommen (eigener @media-480-Block mit
   kleinerem Logo, straffen Abstaenden, engerem Innenrand), die uebrigen
   zehn Seiten nicht. Gemessen bei 390px:

     index.html        Footer 1280px, Logo 90px,  Innenbreite 362px
     alle anderen      Footer 1360px, Logo 140px, Innenbreite 342px

   Damit war der Abschluss der Startseite ein anderer als der aller
   Unterseiten - genau das, was die Wiedererkennung bricht.

   Zusaetzlich war der Footer auf Mobil mit rund drei Bildschirmhoehen
   zu lang fuer einen Abschluss. Die Linklisten laufen deshalb ab 600px
   zweispaltig: aus 14 Zeilen "Coaching" werden 7, aus 10 Zeilen
   "Informationen" werden 5. Struktur, Reihenfolge und Inhalt bleiben
   unveraendert.

   Zur Spezifitaet: die Footer-Styles stehen in einem <style>-Block im
   <footer>, also NACH diesem Stylesheet, und assets/css/style.css setzt
   einzelne Werte mit !important. Der Praefix "html body" hebt die
   Regeln hier ueber die Seitenregeln; wo style.css !important nutzt,
   steht es auch hier.
   ===================================================================== */

@media (max-width: 768px) {
    html body .master-footer {
        padding-top: 80px;
    }
    html body .footer-grid-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 36px !important;
        padding: 0 20px 40px !important;
    }
    html body .footer-logo-wrapper {
        width: 110px;
        height: 110px;
        margin: 0 auto 20px auto;
    }
    html body .footer-logo-img { width: 75%; }
    html body .footer-brand-text {
        margin: 0 auto 20px auto !important;
        font-size: .88rem;
    }
    html body .footer-col :is(h3,h4) {
        justify-content: center;
        margin-bottom: 18px !important;
    }
    html body .footer-col :is(h3,h4)::before { display: none; }
    html body .footer-links li { margin-bottom: 12px !important; }
    html body .footer-links a { font-size: .85rem; }
    html body .social-matrix { justify-content: center; }
    html body .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
        padding: 20px 16px !important;
    }
    html body .footer-bottom p,
    html body .footer-bottom a { font-size: .72rem; }
    html body .legal-links { gap: 18px; flex-wrap: wrap; justify-content: center; }
    html body .footer-cta-box { padding: 40px 20px; }
}

/* Zweispaltige Linklisten: halbiert die Hoehe der beiden langen Spalten,
   ohne einen einzigen Link zu entfernen. */
@media (max-width: 768px) {
    html body .footer-col .footer-links {
        columns: 2;
        column-gap: 16px;
    }
    html body .footer-col .footer-links li {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
    }
    /* Die Social-Spalte bleibt einspaltig - dort stehen Symbole,
       keine Textzeilen. */
    html body .footer-col .social-matrix { columns: auto; }
}

@media (max-width: 480px) {
    html body .master-footer { padding-top: 72px !important; }
    html body .footer-grid-container {
        gap: 28px !important;
        padding: 0 14px 32px !important;
    }
    html body .footer-logo-wrapper {
        width: 90px;
        height: 90px;
        margin: 0 auto 16px auto;
    }
    html body .footer-logo-img { width: 70%; }
    html body .footer-brand-text {
        font-size: .82rem;
        line-height: 1.7;
        margin: 0 auto 16px auto !important;
    }
    html body .footer-col :is(h3,h4) {
        font-size: .78rem;
        margin-bottom: 14px !important;
    }
    html body .footer-links li { margin-bottom: 10px !important; }
    html body .footer-links a { font-size: .82rem; }
    html body .social-orb { width: 44px; height: 44px; }
}


/* =====================================================================
   PREMIUM-FINALE — mobile Gestaltung
   ---------------------------------------------------------------------
   Bis hierher war der mobile Footer korrekt, aber nüchtern: vier
   zentrierte Textblöcke ohne Material, ohne Trennung, ohne Bewegung.
   Die goldene Linie neben den Spaltenüberschriften ist auf Mobile
   ausgeblendet (sie säße links neben zentriertem Text), damit fehlte
   auch das letzte gestalterische Element.

   Projektregel 8 verlangt für den Footer ein bewusst gestaltetes
   Premium-Finale, Regel 9 ein sauber eingebundenes Logo, Regel 20
   mindestens eine dauerhaft laufende ruhige Bewegung. Das wird hier
   nachgeholt - mit den Mitteln des Hauses: Haarlinien, Goldakzente,
   weiche Auren, ruhige Bewegungen.
   ===================================================================== */
@media (max-width: 768px) {

    /* ── Der Footer beginnt bewusst: eine Lichtkante, die zu den Rändern
       hin ausblendet, statt einer durchgehenden grauen Linie. ── */
    html body .master-footer { border-top-color: transparent !important; }
    html body .master-footer::before {
        content: '';
        position: absolute; top: 0; left: 0; right: 0; height: 1px;
        z-index: 3; pointer-events: none;
        background: linear-gradient(90deg,
            rgba(202,138,4,0) 0%, rgba(202,138,4,.42) 28%,
            rgba(229,184,59,.62) 50%, rgba(202,138,4,.42) 72%, rgba(202,138,4,0) 100%);
    }

    /* ── Aura hinter dem Logo: gibt dem Kopf des Footers Tiefe, ohne ein
       weiteres Element im Markup. Liegt hinter dem Logo (z-index 0). ── */
    html body .footer-logo-wrapper::before {
        content: '';
        position: absolute; top: 50%; left: 50%;
        width: 210%; height: 210%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: radial-gradient(circle, rgba(202,138,4,.16) 0%, rgba(202,138,4,.05) 42%, transparent 70%);
        z-index: 0; pointer-events: none;
        animation: kgsFooterAura 9s ease-in-out infinite;
    }
    @keyframes kgsFooterAura {
        0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(.94); }
        50%      { opacity: 1;  transform: translate(-50%, -50%) scale(1.06); }
    }

    /* ── Spaltenüberschriften: statt des ausgeblendeten Strichs zwei
       kurze Haarlinien, die nach außen auslaufen. ── */
    html body .footer-col :is(h3,h4) {
        position: relative;
        display: flex; align-items: center; gap: 14px;
        color: #F5F0E4 !important;
        letter-spacing: 2.6px !important;
    }
    html body .footer-col :is(h3,h4)::before,
    html body .footer-col :is(h3,h4)::after {
        content: '' !important;
        display: block !important;
        flex: 1 1 0;
        max-width: 64px;
        height: 1px;
        background: linear-gradient(90deg, rgba(202,138,4,0), rgba(202,138,4,.55));
    }
    html body .footer-col :is(h3,h4)::after {
        background: linear-gradient(90deg, rgba(202,138,4,.55), rgba(202,138,4,0));
    }

    /* ── Die drei Linkspalten werden zu ruhigen Flächen statt frei
       schwebender Listen. Die Markenspalte bleibt offen, sie trägt
       Logo und Text. ── */
    html body .footer-col:not(:first-child) {
        padding: 24px 18px 20px;
        border-radius: 20px;
        border: 1px solid rgba(202,138,4,.13);
        background:
            radial-gradient(120% 90% at 50% 0%, rgba(202,138,4,.07), transparent 62%),
            linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.012));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    }

    /* ── Links bekommen einen feinen Goldpunkt als Marke ── */
    html body .footer-links a {
        position: relative;
        padding-left: 13px;
        color: #B7B0A6 !important;
        letter-spacing: .2px;
    }
    html body .footer-links a::before {
        content: '';
        position: absolute; left: 0; top: 50%;
        width: 4px; height: 4px; margin-top: -2px;
        border-radius: 50%;
        background: rgba(202,138,4,.45);
        transition: background .35s ease, box-shadow .35s ease;
    }
    html body .footer-links a:hover,
    html body .footer-links a:focus-visible { color: #E5B83B !important; }
    html body .footer-links a:hover::before,
    html body .footer-links a:focus-visible::before {
        background: #E5B83B;
        box-shadow: 0 0 8px rgba(229,184,59,.75);
    }

    /* ── Social-Orbs: Goldring und versetztes Dauerleuchten ── */
    html body .social-orb {
        border-color: rgba(202,138,4,.28) !important;
        animation: kgsFooterOrb 7s ease-in-out infinite;
    }
    html body .social-matrix a:nth-child(2) { animation-delay: 1.1s; }
    html body .social-matrix a:nth-child(3) { animation-delay: 2.2s; }
    html body .social-matrix a:nth-child(4) { animation-delay: 3.3s; }
    @keyframes kgsFooterOrb {
        0%, 100% { box-shadow: 0 0 0 rgba(202,138,4,0); }
        46%      { box-shadow: 0 0 16px rgba(202,138,4,.28); }
    }

    /* ── Abschlussleiste: ausblendende Haarlinie statt harter Kante ── */
    html body .footer-bottom {
        position: relative;
        border-top-color: transparent !important;
    }
    html body .footer-bottom::before {
        content: '';
        position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
        background: linear-gradient(90deg, rgba(202,138,4,0), rgba(202,138,4,.3), rgba(202,138,4,0));
    }

    @media (prefers-reduced-motion: reduce) {
        html body .footer-logo-wrapper::before,
        html body .social-orb { animation: none !important; }
    }
}

/* Auf sehr schmalen Geräten die Innenmaße der Flächen straffen */
@media (max-width: 400px) {
    html body .footer-col:not(:first-child) { padding: 20px 14px 17px; border-radius: 17px; }
    html body .footer-col :is(h3,h4)::before,
    html body .footer-col :is(h3,h4)::after { max-width: 40px; }
}


/* =====================================================================
   RECHTSLINKS IM FOOTER — Sichtbarkeit
   ---------------------------------------------------------------------
   Impressum, Datenschutz, AGB und Widerrufsbelehrung stehen auf allen
   17 Seiten im Footer. Sie waren aber praktisch nicht zu finden:
   #57534E auf #050505 ergibt einen Kontrast von 2,67:1 bei 11,5 bis
   12,5px Schriftgroesse. Lesbar ist ab 4,5:1.

   Fuer Pflichtangaben ist das nicht nur ein Lesbarkeitsproblem: das
   Impressum muss nach § 5 DDG leicht erkennbar und unmittelbar
   erreichbar sein. Ein Link, den man suchen muss, erfuellt das nicht.

   Diese Regeln gelten fuer alle Breiten, nicht nur mobil - der Mangel
   bestand auf dem Bildschirm genauso.

   Zur Spezifitaet: die Footer-Styles stehen in <style>-Bloecken im
   <footer>, also NACH dieser Datei. Der Praefix "html body" hebt die
   Regeln hier darueber.
   ===================================================================== */

/* Die Zeile bekommt eine eigene Flaeche, damit sie als Block gelesen wird */
html body .footer-bottom {
    padding-top: 26px;
    padding-bottom: 26px;
}
html body .footer-bottom p {
    font-size: .76rem;
    color: #9C958C;          /* 6,4:1 statt 2,67:1 */
    letter-spacing: .02em;
}

/* Die Rechtslinks so hell wie die uebrigen Footer-Links, mit Trennern */
html body .legal-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}
html body .legal-links a {
    position: relative;
    padding: 4px 15px;
    font-size: .78rem;
    font-weight: 500;
    color: #C3BCB2 !important;   /* 10,9:1 */
    letter-spacing: .02em;
    text-decoration: none;
    transition: color .3s ease;
}
html body .legal-links a:first-child { padding-left: 0; }
html body .legal-links a::after {
    content: '';
    position: absolute;
    right: 0; top: 50%;
    width: 1px; height: 11px;
    margin-top: -5.5px;
    background: rgba(202,138,4,.32);
}
html body .legal-links a:last-child::after { display: none; }
html body .legal-links a:hover,
html body .legal-links a:focus-visible {
    color: #E5B83B !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 600px) {
    /* Gestapelt reicht die Breite fuer vier Links in einer Zeile nicht;
       die Trenner wuerden dann am Zeilenende haengen. */
    html body .legal-links { justify-content: center; gap: 2px 0; }
    html body .legal-links a { padding: 5px 12px; font-size: .76rem; }
    html body .legal-links a:first-child { padding-left: 12px; }
}

/* =====================================================================
   RECHTLICHES ALS EIGENE FOOTER-RUBRIK
   ---------------------------------------------------------------------
   Impressum, Datenschutz, AGB und Widerrufsbelehrung standen bisher nur
   in der schmalen Zeile ganz unten. Dort werden sie leicht uebersehen -
   auf 1440px lagen sie 8px unter der Copyright-Zeile am aeussersten
   Rand des Bildes. Sie stehen jetzt zusaetzlich als eigene Rubrik in
   der Spalte "Informationen", wo Besucher sie erwarten. Die Zeile unten
   bleibt bestehen; doppelte Erreichbarkeit ist bei Pflichtangaben
   ausdruecklich erwuenscht.

   html body als Praefix, weil die Seiten ihre Footer-Regeln im eigenen
   <style> nach diesem Stylesheet deklarieren (Projektreferenz 24).
   ===================================================================== */
html body .footer-recht-titel {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

/* Die Rubrik ist nachgeordnet: etwas kleiner und ruhiger als die
   Hauptnavigation darueber, damit die Spalte eine klare Rangfolge hat. */
html body .footer-links.footer-recht li { margin-bottom: 11px; }
html body .footer-links.footer-recht a { font-size: .84rem; }

@media (max-width: 768px) {
    html body .footer-recht-titel { margin-top: 24px; padding-top: 20px; }
    /* Die zweispaltige Darstellung der langen Listen passt hier nicht:
       vier kurze Rechtslinks nebeneinander lesen sich als Stichwortliste
       statt als Rubrik. */
    html body .footer-col .footer-links.footer-recht { columns: 1; }
}

/* =====================================================================
   MOBILER FOOTER: RHYTHMUS UND KANTE
   ---------------------------------------------------------------------
   Zwei Maengel, gemessen bei 509px:
   1. Die Rubrik "Rechtliches" stand einspaltig ueber die volle Breite.
      Vier kurze Woerter belegten 431px Breite und 175px Hoehe - mehr als
      die siebenteilige Coaching-Liste daneben mit 163px. Das brach den
      zweispaltigen Rhythmus der Bloecke darueber.
      Meine fruehere Begruendung ("vier kurze Links nebeneinander lesen
      sich als Stichwortliste") war im zentrierten Mobilfooter falsch.
   2. Die Eintraege waren zentriert. Da jeder Link seinen Goldpunkt 13px
      links traegt, standen die Punkte bei unterschiedlich langen Woertern
      versetzt statt auf einer Linie.
   ===================================================================== */
@media (max-width: 768px) {
    html body .footer-col .footer-links.footer-recht { columns: 2; }

    /* Ueberschriften bleiben zentriert, die Eintraege richten sich in
       ihrer Spalte aus - dadurch bilden die Goldpunkte eine Linie. */
    html body .footer-col .footer-links li { text-align: left; }
    html body .footer-col .footer-links a { display: inline-block; }
}

/* Zwei Feinheiten, die in der Ansicht bei 390px auffielen */
@media (max-width: 768px) {
    /* Zweizeilige Eintraege wie "Zusammenarbeit anfragen": der Goldpunkt
       sass auf halber Hoehe des gesamten Links, also zwischen den beiden
       Zeilen. Er gehoert auf die Grundlinie der ersten Zeile. */
    html body .footer-links a::before {
        top: .62em;
        margin-top: 0;
    }
}

@media (max-width: 600px) {
    /* Die Rechtslinks der Abschlussleiste brechen hier auf zwei Zeilen um.
       Der Trenner nach dem letzten Eintrag einer Zeile blieb dabei stehen
       und hing frei am Zeilenende ("... | AGB |"). Auf schmalen Geraeten
       tragen die Abstaende die Trennung, die Striche entfallen. */
    html body .legal-links a::after { display: none; }
    html body .legal-links { gap: 4px 4px; }
    html body .legal-links a { padding: 6px 14px; }
}