/* app/design/frontend/Oktoberfestartikel/CustomTheme/web/css/styles.css */

/* Reset CSS */
body, figure, h1, h2, h3, p {
    margin: 0;
    padding: 0;
}

/* Hintergrundbild für die gesamte Seite */
body {
    background-image: url('../images/backg.jpg'); /* Verweis auf das Bild im Web-Ordner */
    background-size: cover; /* Bild soll den gesamten Bildschirm abdecken */
    background-position: center; /* Das Bild wird zentriert */
    background-repeat: no-repeat; /* Das Bild wird nicht wiederholt */
    height: 100vh; /* Die Höhe des Hintergrunds soll 100% der Bildschirmhöhe einnehmen */
}

/* Stil für den Login-Link */
.login-link {
    display: inline-block; /* Sicherstellen, dass der Link als Block angezeigt wird */
    padding: 6px 12px; /* Polsterung ähnlich wie bei den anderen Links */
    background-color: rgba(0, 0, 0, 0.4); /* Hintergrundfarbe für Lesbarkeit */
    color: #ffffff; /* Textfarbe */
    text-decoration: none; /* Keine Unterstreichung */
    border-radius: 4px; /* Abgerundete Ecken */
    font-size: 0.85rem; /* Schriftgröße wie bei den anderen Links */
    font-weight: 500; /* Fettgedruckt */
    margin-right: 10px; /* Abstand zu anderen Links */
    transition: background-color 0.3s ease; /* Sanfter Übergang bei Hover */
}

/* Hover-Effekt für Login-Link */
.login-link:hover {
    background-color: rgba(255, 255, 102, 0.8); /* Gelblich, hebt sich ab */
    color: #003f5e; /* Invertierte Textfarbe */
}


/* Header mit Bild */
.page-header { 
    background-image: url('../images/header.jpg'); /* Pfad zu deinem Bild */ 
    background-size: cover; /* Bild immer den Container füllen */
    background-position: center; /* Bild zentrieren */
    background-repeat: no-repeat; 
    width: 100%; 
    padding: 10px 20px; /* Innenabstand für Logo / Navigation */ 
    box-sizing: border-box; 
    /* color: #ffffff; */
    position: relative;
}

/* Label für den Sprache-Switcher */
.switcher-language .switcher-label span {
    color: #ffffff; /* Weiß für das "Sprache"-Label */
}

/* Der Trigger-Button für den aktuellen Sprachtext */
.switcher-language .switcher-trigger .view-default span {
    color: #ffffff; /* Weiß für den aktuellen Sprachtext (z. B. Deutsch) */
}

/* Optionen im Dropdown (d.h., die verfügbaren Sprachen) */
.switcher-language .switcher-dropdown .switcher-option a {
    color: #ffffff; /* Weiß für den Text der Sprachoptionen */
}

/* Hover-Effekt für die Optionen im Dropdown */
.switcher-language .switcher-dropdown .switcher-option a:hover {
    color: #007bff; /* Blau für den Text im Hover-Zustand */
    background-color: #f1f1f1; /* Hellgrau für Hintergrund im Hover */
}

/* Das Logo unsichtbar machen, aber den Link beibehalten */
.page-header .logo {
    display: block; /* Sicherstellen, dass der Container des Logos angezeigt wird */
    width: 100%; /* Logo-Container auf 100% der Breite setzen */
    height: 100%; /* Logo-Container auf 100% der Höhe setzen */
    position: relative; /* Positionierung für das Hintergrundbild */
}

.page-header .logo img {
    visibility: hidden; /* Das Bild unsichtbar machen */
    background-repeat: no-repeat; /* Wiederholung des Bildes verhindern */
}

/* Anpassen der Position des Login-Links im Header */
.page-header .header.content .login-link {
    margin-left: 20px; /* Etwas Abstand nach links */
}

/* MiniCart Position und Anordnung */
.page-header .header.content .minicart-wrapper {
    display: inline-block;
    vertical-align: middle;
    margin-left: 20px; /* Abstand zum Login-Link */
}

/* Top-Links wie Buttons */
.panel.wrapper a {
    display: inline-block;
    color: #ffffff;               /* Textfarbe */
    text-decoration: none;
    padding: 6px 12px;            /* wie Button */
    margin-left: 10px;            /* Abstand zwischen Links */
    border-radius: 4px;           /* abgerundete Ecken */
    background-color: rgba(0,0,0,0.4); /* leicht dunkler Hintergrund für Lesbarkeit */
    box-shadow: 0 2px 4px rgba(0,0,0,0.4); /* leichter Schatten */
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 0.85rem;
}

/* Hover-Effekt */
.panel.wrapper a:hover {
    background-color: rgba(0,0,0,0.8); /* Gelblich, hebt sich ab */
    color: #003f5e;                           /* Text invertiert */
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

/* 1. "Produkte vergleichen" Link ausblenden */
.panel.wrapper .link.compare {
    display: none !important;
}

/* Strich unter Panel unsichtbar machen, Hover intakt */
.panel.wrapper::after,
.panel.wrapper .panel.header::after {
    content: "";
    display: block;             /* Pseudo-Element bleibt für Höhe */
    height: 0 !important;       /* Höhe = 0 → Linie verschwindet */
    background: transparent !important; /* Hintergrund unsichtbar */
    border: 0 !important;       /* Border entfernen */
    box-shadow: none !important; /* Shadow entfernen */
    pointer-events: none;       /* Hoverbereich nicht blockieren */
}

/* Stil für das "Willkommen"-Textstück */
.panel.wrapper .header.links .greet.welcome span.not-logged-in {
    display: inline-block;
    padding: 5px 12px;        /* Innenabstand wie ein kleiner Button */
    background-color: rgba(0,0,0,0.4); /* gelblich-transparent */
    color: #ffffff;            /* dunkelblau, guter Kontrast */
    border-radius: 4px;        /* abgerundete Ecken */
    font-weight: bold;         /* etwas stärker hervorgehoben */
    font-size: 0.9em;          /* passend zu den Links */
    margin-left: 10px;         /* Abstand zu vorherigem Link */
    vertical-align: middle;    /* schön auf Linie mit Links */
}

/* Schriftfarbe des "Erweiterte Suche"-Links anpassen */
.header .block-search .action.search,
.header .block-search .search-label,
.header .block-search .label,
.header .block-search a {
    color: #003f5e !important; /* Dunkelblau */
}

/* Navigation */
.page-header .header.content nav {
    display: inline-block;
    vertical-align: middle;
    margin-left: 20px;
}

/* Links im Header */
.page-header .header.content a {
    color: #ffffff;
    text-decoration: none;
}

.page-header .header.content .minicart-wrapper a {
    color: rgba(0,0,0,0.8);
}


/* Navigation-Stil */
.nav-menu {
    list-style: none;
    padding: 0;
}

.nav-menu li {
    display: inline-block;
    margin-right: 10px;
}

/* Page Footer */
.page-footer {
    background-color: #003f5e; /* Blau, volle Breite */
    color: #ffffff;
    padding: 40px 0 20px 0; /* Oben und unten Abstand */
}

/* Innerer Wrapper für Zentrierung */
.page-footer .footer-inner {
    max-width: 1200px;   /* optional, an deine Content-Breite anpassen */
    margin: 0 auto;      /* zentriert */
    padding: 0 20px;
}

.page-footer .footer-columns {
    display: flex;
    justify-content: center;  /* Gesamtblock zentrieren */
    align-items: center;      /* vertikal mittig */
    flex-wrap: wrap;          /* für mobile Ansicht */
    margin: 0 auto 20px;
}

/* Jede Spalte bekommt festen Innenabstand rechts oder links */
.footer-column {
    display: flex;
    flex-direction: column;
    justify-content: center;  /* Text vertikal mittig in der Spalte */
    text-align: left;         /* Text linksbündig */
    padding: 0 50px;          /* Abstand zur anderen Spalte */
}

.footer-column h4 {
    margin-bottom: 15px;
    font-weight: bold;
    color: #ffffff;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: 5px;
}

.footer-column ul li a {
    color: #ffffff;
    text-decoration: none;
}

.footer-column ul li a:hover {
    color: #ffff66;
}

.page-footer .copyright {
    text-align: center;
    color: #ffffff;
    font-size: 0.9em;

    margin: 0;          /* WICHTIG */
    padding: 10px 0 0;  /* nur oben etwas Luft, unten 0 */
    border-top: none;
}

.page-footer .footer.content {
    padding-bottom: 0;   /* ENTFERNT den Leerraum */
}

/* Optional: Weitere benutzerdefinierte Stile */