/* Theme "genx" - Design-Tokens fuer die von storefront-base.css gestylten
   Content-Seiten (Produkt/Warenkorb/Checkout/News/Startseite), 1:1
   uebernommen von der Markenfarbe/Schrift der Live-Seite genx-hosting.de
   (siehe tmp/genx/css/styles.css: --primary: #991915; font-family: 'Open
   Sans'). Kopf/Fuss selbst nutzen die eigenen, mitgelieferten Bootstrap-
   Dateien (styles.css/all.min.css/custom.css), nicht diese Variablen -
   siehe layout.blade.php. */
:root {
    --sf-color-bg: #ffffff;
    --sf-color-surface: #f7f2f2;
    --sf-color-text: #2b2b2b;
    --sf-color-text-muted: #6b6b6b;
    --sf-color-border: #e5d9d9;
    --sf-color-primary: #991915;
    --sf-color-primary-contrast: #ffffff;
    --sf-color-accent: #991915;
    --sf-font-body: "Open Sans", Arial, sans-serif;
    --sf-font-heading: "Open Sans", Arial, sans-serif;
    --sf-radius: 6px;
}

/* storefront-base.css setzt .sf-main pauschal auf max-width:1100px/1.5rem
   Padding - das wuerde bei genx aber die volle Breite der Startseiten-
   Abschnitte (Hero-Bild, Kontakt-CTA - beide bewusst randlos wie im
   Original) kaputt machen, da .sf-main dann bereits VOR deren eigenem
   .container-fluid/.full-width einschraenkt. Stattdessen bleibt .sf-main
   selbst randlos (wie der unveraenderte Content-Wrapper im Original), und
   jede NICHT-Startseiten-Content-Seite bekommt ihren eigenen inneren
   .container-fluid-Wrapper (1170px/15px, siehe styles.css) - identisch zum
   Original, wo einzelne Abschnitte selbst entscheiden, ob sie die
   1170px-Breite nutzen oder randlos bleiben. */
.sf-main {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    /* storefront-base.css fuegt hier zusaetzlich padding-top:2rem/
       padding-bottom:3rem/min-height:60vh ein - das schiebt z.B. das
       Hero-Bild der Startseite sichtbar vom Header weg und die
       Kontakt-CTA vom Footer weg, beides im Original randlos direkt
       anschliessend. */
    padding-top: 0;
    padding-bottom: 0;
    min-height: 0;
}

/* Social-Media-Icons im Footer (neu, siehe /admin/einstellungen Tab "CMS") -
   Original stylt nur EIN einzelnes, hartkodiertes Icon
   (".footer-navigation .fa-square-facebook") - hier verallgemeinert auf
   beliebig viele, admin-gepflegte Profile. */
.footer-navigation .social-links {
    margin-top: 30px;
}
.footer-navigation .social-links a {
    display: inline-block;
    margin-right: 20px;
    font-size: 36px;
}
.footer-navigation .social-links a:last-child {
    margin-right: 0;
}

/* Original setzt header{margin-bottom:60px} GLOBAL - das schiebt das
   randlose Hero-Bild der Startseite sichtbar vom Header weg. Fuer genx
   entfernt: der Abstand zum Content kommt stattdessen einheitlich vom
   .container-fluid.y-space-Wrapper jeder Nicht-Startseite (40px oben/unten,
   siehe .sf-main-Regel oben) - die Startseite selbst bleibt dadurch
   tatsaechlich buendig am Header. */
.wrapper header {
    margin-bottom: 0;
}

/* Zahlungsarten-Icons im Footer rechtsbuendig statt linksbuendig - nur die
   Icon-Liste, nicht die Ueberschrift "Zahlungsarten" selbst (bleibt wie die
   anderen Footer-Spalten linksbuendig). */
.footer-navigation .zahlungsarten ul {
    text-align: right;
}

/* Original entfernt footer{margin-top:100px} NUR, wenn .kontakt/
   .office-vorteile ein direktes Geschwisterelement von <footer> ist
   (".kontakt + footer"). In unserer Blade-Struktur liegt .kontakt aber
   innerhalb von <main class="sf-main">, wodurch dieses Original-Selektor
   nie greift - :has() bildet dieselbe Bedingung fuer den neuen Fall nach
   (nur auf Seiten, deren letzter Abschnitt die randlose Kontakt-CTA ist -
   alle anderen Seiten behalten die normalen 100px Abstand zum Footer). */
main:has(> .kontakt) + footer {
    margin-top: 0;
    border-top: none;
}

/* Zahlungsarten-Spalte fuellt die Luecke der weggelassenen Produkte-Spalte
   (3 von 12 Bootstrap-Spalten) auf, damit ihre rechte Kante bis zum echten
   Zeilenende reicht - sonst endet sie 3 Spalten vor der rechten Kante von
   Header-Login-Button/Datenschutz-Link. Nur ab derselben Bootstrap-
   "md"-Bruchgrenze (768px) wie .col-md-6 selbst - darunter gilt weiterhin
   .col-sm-12 (100% Breite) unveraendert. NUR wenn die Produkte-Spalte
   tatsaechlich fehlt (".has-produkte" siehe layout.blade.php) - sobald ein
   Menueprofil das zweite Footermenue befuellt und die Produkte-Spalte
   wieder erscheint, ergibt 3+3+6=12 Spalten wieder die urspruengliche
   Original-Aufteilung, die 75%-Ueberbreite waere dann falsch. */
@media (min-width: 768px) {
    .footer-navigation:not(.has-produkte) .zahlungsarten.col-md-6 {
        flex: 0 0 75%;
        max-width: 75%;
    }
}

/* Kopfzeile: Nav muss unterhalb der Kontakt/Support/Kundenlogin-Zeile
   (.meta-info) erscheinen. Im Original ist das KEIN expliziter CSS-Zwang,
   sondern ein Nebeneffekt der schieren Breite des vollen 6-Punkte-Menues
   (Home/Hosting/Webradio/Server/TS3-Server/Cloud) - das passt bei
   ueblichen Desktop-Breiten nicht mehr neben .meta-info auf dieselbe
   Zeile, wodurch der Float automatisch umbricht. Unser Menu hat nur 2-3
   aktive Punkte (Home/News/Warenkorb - die uebrigen sind bewusst
   auskommentiert, siehe layout.blade.php) und ist dadurch schmal genug,
   um NICHT umzubrechen - alles landete faelschlich in einer Zeile.
   "clear: right" erzwingt den Umbruch unter .meta-info unabhaengig von
   der tatsaechlichen Menu-Breite (raeumt nur rechts-floatende Elemente,
   .logo bleibt links stehen und behaelt dieselbe Zeile wie das Menu). */
header .navbar {
    clear: right;
}

/* Seitenmenues (Seitenmenue 1/2, siehe /admin/menuestruktur): die
   generische .sf-content-with-sidebar-Regel in storefront-base.css setzt
   eine eigene max-width:1100px-Zentrierung - passend fuers "default"-Theme,
   dessen .sf-main selbst normalerweise diese Rolle uebernimmt. genx haelt
   .sf-main dagegen bewusst randlos (siehe .sf-main-Regel oben) und laesst
   jede einzelne Content-Seite ihre eigene Breite selbst per
   .container-fluid (1170px) entscheiden - hier daher neutralisiert, damit
   nicht zwei unterschiedlich breite, ineinander verschachtelte Boxen
   entstehen. */
.sf-content-with-sidebar {
    max-width: none;
    padding: 0;
}