/*
Theme Name: Gutenberg Custom Theme
Theme URI: https://sarman-energy.de/
Author: HAL2000 und wodo
Author URI: https://sarman-energy.de/
Description: Sarman Energy Thema mit Gutenberg-Unterstützung
Version: 1.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gutenberg-custom-theme
*/

/* ==================== */
/* CSS VARIABLEN - Zentrale Steuerung aller Designelemente */
/* ==================== */
:root {
    /* Primärfarben - Hauptakzentfarbe des Themes */
    --color-primary: #00b0d7;        /* Hauptakzentfarbe */
    --color-primary-dark: #008ca7;   /* Dunklere Variante für Hover-Effekte */
    --color-primary-light: #33c0df;  /* Hellere Variante für Highlights */
    
    /* Textfarben - Hierarchie der Textfarben */
    --color-text: #333333;           /* Primäre Textfarbe (fast schwarz) */
    --color-text-light: #666666;     /* Sekundäre Textfarbe für weniger wichtige Texte */
    --color-text-lighter: #999999;   /* Tertiäre Textfarbe für Platzhalter etc. */
    
    /* Hintergrundfarben - Hintergrundfarben für verschiedene Bereiche */
    --color-bg: #ffffff;             /* Haupt-Hintergrundfarbe (Weiß) */
    --color-bg-dark: #f5f5f5;        /* Leicht dunklerer Hintergrund für Boxen */
    --color-bg-darker: #e0e0e0;      /* Noch dunkler für spezielle Hintergründe */
    
    /* Header/Footer - Spezifische Farben für Kopf- und Fußzeile */
    --color-header-bg: #ffffff;      /* Hintergrundfarbe Header (Weiß) */
    --color-footer-bg: #ffffff;      /* Hintergrundfarbe Footer (Weiß) */
    --color-footer-text: #000000;    /* Textfarbe im Footer (Grau) */
    
    /* Links - Farben für verschiedene Link-Zustände */
    --color-link: #000000;           /* Standard-Linkfarbe (Schwarz) */
    --color-link-hover: #000000;     /* Linkfarbe beim Hovern (Schwarz) */
    --color-link-visited: #000000;   /* Linkfarbe für besuchte Links (Grau) */
    
    /* Border/Farben - Farben für Rahmen und Schatten */
    --color-border: #dddddd;         /* Standard-Rahmenfarbe (Hellgrau) */
    --color-shadow: rgba(0, 0, 0, 0.1); /* Standard-Schattenfarbe (transparentes Schwarz) */
    
    /* Systemfarben - Farben für Statusmeldungen etc. */
    --color-success: #4CAF50;        /* Erfolgsfarbe (Grün) */
    --color-warning: #FF9800;        /* Warnfarbe (Orange) */
    --color-error: #F44336;          /* Fehlerfarbe (Rot) */
    
    /* Abstände - Konsistente Abstände im gesamten Theme */
    --spacing-xs: 0.25rem;           /* Extra kleiner Abstand (4px) */
    --spacing-sm: 0.5rem;            /* Kleiner Abstand (8px) */
    --spacing-md: 1rem;              /* Mittlerer Abstand (16px) */
    --spacing-lg: 2rem;              /* Großer Abstand (32px) */
    --spacing-xl: 4rem;              /* Extra großer Abstand (64px) */
    
    /* Schriftgrößen - Konsistente Typografie-Skala */
    --font-size-sm: 0.875rem;        /* Kleine Schrift (14px) */
    --font-size-base: 1rem;          /* Basis-Schriftgröße (16px) */
    --font-size-lg: 1.125rem;        /* Große Schrift (18px) */
    --font-size-xl: 1.25rem;         /* Extra große Schrift (20px) */
    --font-size-2xl: 1.5rem;         /* 2x große Schrift (24px) */
    --font-size-3xl: 1.875rem;       /* 3x große Schrift (30px) */
}

/* ==================== */
/* CSS RESET & GRUNDLAGEN - Zurücksetzen der Browser-Standardstyles */
/* ==================== */

/* Box-Sizing für alle Elemente setzen - sorgt für konsistente Box-Berechnung */
*, *::before, *::after {
    box-sizing: border-box; /* Padding und Border werden in Width/Height eingerechnet */
}

/* HTML und Body Margins und Paddings entfernen */
html, body {
    margin: 0;  /* Alle Margins entfernen */
    padding: 0; /* Alle Paddings entfernen */
    scroll-behavior: smooth; /* Sanftes Scrollen zu den Links */
}


/* Body-Stile - Grundlegende Seitengestaltung */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; /* System Font Stack für beste Performance */
    line-height: 1.6; /* Komfortable Zeilenhöhe für Lesbarkeit */
    color: var(--color-text); /* Textfarbe von Variable verwenden */
    background-color: var(--color-bg); /* Hintergrundfarbe von Variable verwenden */
    margin: 0; /* Margin sicher auf 0 setzen */
    padding: 0; /* Padding sicher auf 0 setzen */
}

/* Korrigierte bg-image Klasse */


/* Bilder responsive machen - passen sich automatisch der Containerbreite an */
img {
    max-width: 100%; /* Maximale Breite = 100% des Containers */
    height: auto; /* Höhe automatisch anpassen um Verzerrung zu vermeiden */
    display: block; /* Unterstände bei inline-Bildern vermeiden */
}

/* ==================== */
/* TYPOGRAPHIE - Konsistente Textgestaltung */
/* ==================== */

/* Überschriften-Stile mit konsistenter Hierarchie */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0; /* Oberen Abstand entfernen */
    margin-bottom: var(--spacing-md); /* Unteren Abstand mit Variable */
    line-height: 1.3; /* Engere Zeilenhöhe für Überschriften */
    font-weight: 700; /* Fette Schrift für Überschriften */
    color: var(--color-text); /* Textfarbe von Variable verwenden */
}

/* Individuelle Schriftgrößen für jede Überschriftsebene */
h1 { font-size: var(--font-size-3xl); } /* Größte Überschrift */
h2 { font-size: var(--font-size-2xl); } /* Zweitgrößte Überschrift */
h3 { font-size: var(--font-size-xl); }  /* Mittlere Überschrift */
h4 { font-size: var(--font-size-lg); }  /* Kleinere Überschrift */
h5 { font-size: var(--font-size-base); } /* Noch kleinere Überschrift */
h6 { font-size: var(--font-size-sm); }  /* Kleinste Überschrift */

/* Energie. Wir. Sie. 171px und Zeichenabstand -10 */
.monster {
    font-size: 171px;              /* Schriftgröße 17 Pixel */
    letter-spacing: -0.1em;       /* Zeichenabstand -10% (empfohlen) */
	text-transform: uppercase;    /* Transformiert alles zu Großbuchstaben */
	font-weight:800; /* Schrift schön fett */
    /* Alternative: letter-spacing: -1px; */
}

/* Absatz-Abstände */
p {
    margin-bottom: var(--spacing-md); /* Konsistenter Abstand unter Absätzen */
}

/* ==================== */
/* LINKS - Gestaltung aller Link-Zustände */
/* ==================== */

/* Basis-Link-Stil */
a {
    color: var(--color-link); /* Standard-Linkfarbe */
    text-decoration: underline; /* Unterstrichen für klare Erkennbarkeit */
    transition: color 0.3s ease; /* Sanfter Farbübergang bei Zustandsänderung */
}

/* Hover- und Focus-Zustände für Links */
a:hover,
a:focus {
    color: var(--color-link-hover); /* Farbe ändern bei Hover/Focus */
    text-decoration: none; /* Unterstrich entfernen bei Hover/Focus */
}

/* Besuchte Links */
a:visited {
    color: var(--color-link-visited); /* Andere Farbe für besuchte Links */
}

/* ==================== */
/* LAYOUT & CONTAINER - Hauptlayout-Komponenten */
/* ==================== */

/* Haupt-Container für begrenzte Breite und Zentrierung */
.container {
    width: 100%; /* Volle Breite des Eltern-Elements */
    max-width: 1400px; /* Maximale Breite von 1400px */
    margin: 0 auto; /* Automatische Margins für horizontale Zentrierung */
    padding: 0 var(--spacing-md); /* Horizontal Padding für Abstand zu Viewport-Rändern */
}

/* ==================== */
/* HEADER - Kopfzeile der Website */
/* ==================== */

/* Header-Container mit festgelegter Maximalhöhe */
.site-header {
    background-color: var(--color-header-bg); /* Hintergrundfarbe von Variable */
    padding: var(--spacing-sm) 0; /* Vertikales Padding mit Variable */
    box-shadow: 0 2px 5px var(--color-shadow); /* Leichter Schatten für Tiefe */
    position: relative; /* Position für z-index */
    z-index: 100; /* Hoher z-index um über anderen Elementen zu liegen */
    /* Maximale Höhe begrenzen */
    max-height: 125px;    /* Absolute Maximalhöhe in Pixel */
    max-height: 10vh;     /* Relative Maximalhöhe in Viewport-Höhe */
    overflow: hidden;     /* Überstehende Inhalte verstecken */
    display: flex;        /* Flexbox für einfache Ausrichtung */
    align-items: center;  /* Vertikale Zentrierung der Inhalte */
}

/* Header-Inhaltscontainer */
.header-content {
    display: flex; /* Flexbox für horizontale Anordnung */
    justify-content: space-between; /* Inhalte an den Enden verteilen */
    align-items: center; /* Vertikale Zentrierung */
    flex-wrap: wrap; /* Umbruch bei Platzmangel erlauben */
    gap: var(--spacing-md); /* Abstand zwischen Kind-Elementen */
    width: 100%; /* Volle Breite des Headers */
    /* Sicherstellen dass Content immer sichtbar */
    max-height: 100%; /* Nicht höher als Header selbst */
}

/* Logo/Branding-Bereich */
.site-branding h1 {
    font-size: var(--font-size-2xl); /* Große Schrift für Titel */
    margin: 0; /* Margin entfernen */
}

/* Links im Branding-Bereich */
.site-branding a {
    color: var(--color-text); /* Textfarbe von Variable */
    text-decoration: none; /* Keine Unterstreichung */
    font-weight: 700; /* Fette Schrift */
}

/* Hover-Effekt für Branding-Links */
.site-branding a:hover {
    color: var(--color-primary); /* Primärfarbe bei Hover */
}

/* Logo-Bilder anpassen für begrenzte Höhe */
.site-branding img {
    max-height: 60px; /* Maximale Logo-Höhe */
    width: auto; /* Breite automatisch anpassen */
}

/* ==================== */
/* NAVIGATION - Hauptnavigationsmenü */
/* ==================== */

/* Navigations-Container */
.main-navigation {
    max-height: 100%; /* Maximale Höhe begrenzen */
}

/* Ungeordnete Liste der Navigation */
.main-navigation ul {
    display: flex; /* Horizontale Anordnung der Menüpunkte */
    list-style: none; /* Listenpunkte entfernen */
    margin: 0; /* Margin entfernen */
    padding: 0; /* Padding entfernen */
    gap: var(--spacing-lg); /* Abstand zwischen Menüpunkten */
}

/* Einzelne Menüpunkte */
.main-navigation li {
    margin: 0; /* Margin entfernen */
}

/* Navigations-Links */
.main-navigation a {
    color: var(--color-text); /* Textfarbe von Variable */
    text-decoration: none; /* Keine Unterstreichung */
    font-weight: 500; /* Mittlere Schriftstärke */
    padding: var(--spacing-sm) 0; /* Vertikales Padding */
    position: relative; /* Position für Pseudo-Element */
}

/* Hover-, Focus- und aktive Menüpunkte */
.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item a {
    color: var(--color-primary); /* Primärfarbe für aktive Zustände */
}

/* Unterstrich-Effekt unter Links */
.main-navigation a::after {
    content: ''; /* Leeres Pseudo-Element */
    position: absolute; /* Absolute Positionierung */
    bottom: 0; /* Am unteren Rand des Links */
    left: 0; /* Beginn am linken Rand */
    width: 0; /* Start mit 0 Breite */
    height: 2px; /* 2px Höhe */
    background-color: var(--color-primary); /* Primärfarbe */
    transition: width 0.3s ease; /* Sanfte Breiten-Animation */
}

/* Unterstrich bei Hover erweitern */
.main-navigation a:hover::after,
.main-navigation a:focus::after {
    width: 100%; /* Volle Breite des Links */
}

/* ==================== */
/* MAIN CONTENT - Hauptinhaltsbereich */
/* ==================== */

/* Hauptbereich-Container */
.site-main {
    padding: var(--spacing-lg) 0; /* Vertikales Padding */
    min-height: 60vh; /* Minimale Höhe für leere Seiten */
}

/* WordPress Standard-Titel ausblenden für SEO aber zugänglich lassen */
.entry-title,
.page-title,
h1.entry-title {
    position: absolute; /* Absolute Positionierung */
    width: 1px; /* Sehr schmale Breite */
    height: 1px; /* Sehr geringe Höhe */
    padding: 0; /* Kein Padding */
    margin: -1px; /* Negative Margin */
    overflow: hidden; /* Überlauf verstecken */
    clip: rect(0, 0, 0, 0); /* Ausschneiden */
    white-space: nowrap; /* Kein Zeilenumbruch */
    border: 0; /* Kein Rahmen */
}

/* Gutenberg Block-Titel */
.wp-block-post-title {
    font-size: var(--font-size-3xl); /* Große Schrift */
    margin-bottom: var(--spacing-lg); /* Abstand unter dem Titel */
}

/* ==================== */
/* FOOTER - Fußzeile der Website */
/* ==================== */

/* Footer-Container mit festgelegter Maximalhöhe */
.site-footer {
    background-color: var(--color-footer-bg); /* Hintergrundfarbe von Variable */
    color: var(--color-footer-text); /* Textfarbe von Variable */
    padding: var(--spacing-md) 0; /* Vertikales Padding */
    margin-top: var(--spacing-xl); /* Abstand zum Hauptinhalt */
    /* Maximale Höhe begrenzen */
    max-height: 125px;    /* Absolute Maximalhöhe in Pixel */
    max-height: 10vh;     /* Relative Maximalhöhe in Viewport-Höhe */
    overflow: hidden;     /* Überstehende Inhalte verstecken */
}

/* Footer-Inhaltscontainer */
.footer-content {
    display: flex; /* Flexbox für horizontale Anordnung */
    flex-wrap: wrap; /* Umbruch erlauben */
    gap: var(--spacing-md); /* Abstand zwischen Widgets */
    justify-content: space-between; /* Gleichmäßige Verteilung */
    align-items: center; /* Vertikale Zentrierung */
    max-height: 100%; /* Nicht höher als Footer selbst */
}

/* Einzelne Footer-Widgets */
.footer-widget {
    flex: 1; /* Gleiche Breite für alle Widgets */
    min-width: 200px; /* Minimale Breite bevor Umbruch */
    max-height: 100%; /* Höhe begrenzen */
    overflow: hidden; /* Überlauf verstecken */
}

/* Widget-Überschriften */
.footer-widget h3 {
    margin-bottom: var(--spacing-xs); /* Kleiner Abstand unter Überschrift */
    color: var(--color-primary); /* Primärfarbe für Überschriften */
    font-size: var(--font-size-base); /* Basis-Schriftgröße */
}

/* Widget-Listen */
.footer-widget ul {
    list-style: none; /* Listenpunkte entfernen */
    margin: 0; /* Margin entfernen */
    padding: 0; /* Padding entfernen */
}

/* Widget-Listeneinträge */
.footer-widget li {
    margin-bottom: var(--spacing-xs); /* Abstand zwischen Listeneinträgen */
}

/* Widget-Links */
.footer-widget a {
    color: var(--color-footer-text); /* Textfarbe von Variable */
    text-decoration: none; /* Keine Unterstreichung */
}

/* Widget-Link Hover-Effekt */
.footer-widget a:hover {
    color: var(--color-primary); /* Primärfarbe bei Hover */
    text-decoration: underline; /* Unterstreichung bei Hover */
}

/* Footer-Bottom-Bereich für Copyright etc. */
.footer-bottom {
    margin-top: var(--spacing-sm); /* Abstand zum Widget-Bereich */
    text-align: center; /* Zentrierter Text */
    padding-top: var(--spacing-sm); /* Padding oben */
    border-top: 1px solid var(--color-border); /* Obere Rahmenlinie */
    font-size: var(--font-size-sm); /* Kleine Schriftgröße */
}

/* ==================== */
/* GUTENBERG BLOCKS - Spezielle Styles für Block-Editor */
/* ==================== */

/* Gruppen-Blöcke */
.wp-block-group {
    margin-bottom: var(--spacing-lg); /* Abstand unter Gruppen */
}

/* Bild-Blöcke */
.wp-block-image {
    margin-bottom: var(--spacing-md); /* Abstand unter Bildern */
}

/* Button-Blöcke */
.wp-block-button__link {
    background-color: var(--color-primary); /* Hintergrundfarbe */
    color: white; /* Textfarbe */
    padding: var(--spacing-sm) var(--spacing-md); /* Innenabstand */
    text-decoration: none; /* Keine Unterstreichung */
    border-radius: 4px; /* Abgerundete Ecken */
    border: none; /* Kein Rahmen */
    cursor: pointer; /* Zeiger-Cursor */
    transition: background-color 0.3s ease; /* Farbübergang */
}

/* Button Hover-Effekt */
.wp-block-button__link:hover {
    background-color: var(--color-primary-dark); /* Dunklere Farbe bei Hover */
}

/* Wide Alignment für Blöcke */
.alignwide {
    margin-left: -50px; /* Negative Margin für Breite */
    margin-right: -50px; /* Negative Margin für Breite */
    max-width: calc(100% + 100px); /* Erweiterte Maximalbreite */
}

/* Full Width Alignment für Blöcke */
.alignfull {
    margin-left: calc(50% - 50vw); /* Zentrierung für volle Breite */
    margin-right: calc(50% - 50vw); /* Zentrierung für volle Breite */
    max-width: 100vw; /* Volle Viewport-Breite */
    width: 100vw; /* Volle Viewport-Breite */
}

/* ==================== */
/* ACCESSIBILITY - Barrierefreiheit verbessern */
/* ==================== */

/* Screen Reader Only Text - Für unsichtbaren aber zugänglichen Text */
.screen-reader-text {
    border: 0; /* Kein Rahmen */
    clip: rect(1px, 1px, 1px, 1px); /* Ausschneiden */
    clip-path: inset(50%); /* Clip-Path für modernere Browser */
    height: 1px; /* Minimale Höhe */
    margin: -1px; /* Negative Margin */
    overflow: hidden; /* Überlauf verstecken */
    padding: 0; /* Kein Padding */
    position: absolute !important; /* Absolute Positionierung */
    width: 1px; /* Minimale Breite */
    word-wrap: normal !important; /* Wortumbruch normal */
}

/* Screen Reader Text beim Fokus sichtbar machen */
.screen-reader-text:focus {
    background-color: var(--color-bg-dark); /* Hintergrundfarbe */
    border-radius: 3px; /* Abgerundete Ecken */
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); /* Schatten für Kontrast */
    clip: auto !important; /* Clip aufheben */
    clip-path: none; /* Clip-Path aufheben */
    color: var(--color-text); /* Textfarbe */
    display: block; /* Block-Element */
    font-size: var(--font-size-sm); /* Kleine Schrift */
    font-weight: bold; /* Fette Schrift */
    height: auto; /* Automatische Höhe */
    left: 5px; /* Position von links */
    line-height: normal; /* Normale Zeilenhöhe */
    padding: var(--spacing-sm) var(--spacing-md); /* Innenabstand */
    text-decoration: none; /* Keine Unterstreichung */
    top: 5px; /* Position von oben */
    width: auto; /* Automatische Breite */
    z-index: 100000; /* Sehr hoher z-index */
}

/* Focus Styles für alle interaktiven Elemente */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--color-primary); /* Outline in Primärfarbe */
    outline-offset: 2px; /* Abstand vom Element */
}

/* Spezielle Focus Styles für Buttons */
button:focus {
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-primary); /* Konzentrische Schatten */
}

/* Skip Link für Tastaturnavigation */
.skip-link {
    position: absolute; /* Absolute Positionierung */
    top: -40px; /* Initially off-screen */
    left: 6px; /* Position von links */
    background: var(--color-primary); /* Hintergrundfarbe */
    color: white; /* Textfarbe */
    padding: var(--spacing-sm); /* Innenabstand */
    text-decoration: none; /* Keine Unterstreichung */
    z-index: 1000; /* Hoher z-index */
}

/* Skip Link beim Fokus einblenden */
.skip-link:focus {
    top: 0; /* Am oberen Rand einblenden */
}

/* ==================== */
/* FORMULARE - Styles für Formularelemente */
/* ==================== */

/* Alle Formularelemente */
input,
textarea,
select {
    font-size: var(--font-size-base); /* Basis-Schriftgröße */
    width: 100%; /* Volle Breite */
    padding: var(--spacing-sm); /* Innenabstand */
    border: 1px solid var(--color-border); /* Rahmen */
    border-radius: 4px; /* Abgerundete Ecken */
    margin-bottom: var(--spacing-md); /* Abstand nach unten */
}

/* Focus States für Formularelemente */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary); /* Rahmenfarbe bei Focus */
    box-shadow: 0 0 0 1px var(--color-primary); /* Schatten bei Focus */
}

/* Formular-Labels */
label {
    display: block; /* Block-Element */
    margin-bottom: var(--spacing-xs); /* Abstand nach unten */
    font-weight: bold; /* Fette Schrift */
}

/* ==================== */
/* RESPONSIVE DESIGN - Anpassungen für mobile Geräte */
/* ==================== */

/* Basis-Styles für alle Geräte */
body {
    background-color: #f5f5f5; /* Standard-Hintergrund */
    color: #333; /* Standard-Schriftfarbe */
}

a {
    color: #0066cc; /* Standard-Linkfarbe */
    text-decoration: none;
}

.monster {
    max-width: 300px; /* Standard-Größe für Desktop */
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Tablet und kleiner (max-width: 768px) */
@media (max-width: 768px) {
    /* Weißer Hintergrund auf Mobilgeräten */
    body {
        background-color: #ffffff;
    }
    
    /* Immer schwarze Schrift und Links auf Mobilgeräten */
    body, p, h1, h2, h3, h4, h5, h6, div, span {
        color: #000000 !important;
    }
    
    a, a:visited, a:hover, a:active, a:focus {
        color: #000000 !important;
    }
    
    /* Monster in maximaler Größe auf Mobilgeräten */
    .monster {
        max-width: 100%;
        width: 90vw; /* 90% der Viewport-Breite für bessere Darstellung */
        height: auto;
        max-height: 50vh; /* Begrenzung der Höhe auf 50% des Viewports */
        margin: 1rem auto;
        object-fit: contain; /* Bild proportional skalieren */
    }
    
    /* Schriftgrößen an Viewport anpassen */
    html {
        font-size: 16px;
    }
    
    body {
        font-size: calc(14px + 0.5vw); /* Dynamische Schriftgröße */
        line-height: calc(1.4 + 0.3vw); /* Dynamischer Zeilenabstand */
    }
    
    h1 {
        font-size: calc(20px + 1.5vw);
    }
    
    h2 {
        font-size: calc(18px + 1.2vw);
    }
    
    h3 {
        font-size: calc(16px + 1vw);
    }
    
    /* Variablen für kleinere Bildschirme anpassen */
    :root {
        --spacing-md: 0.75rem; /* Kleinerer mittlerer Abstand */
        --spacing-lg: 1.5rem;  /* Kleinerer großer Abstand */
    }
    
    /* Container anpassen */
    .container {
        padding: 0 var(--spacing-sm); /* Kleineres Padding */
    }
    
    /* Header Layout ändern */
    .header-content {
        flex-direction: column; /* Vertikale Anordnung */
        text-align: center; /* Zentrierter Text */
        gap: var(--spacing-sm); /* Kleinerer Abstand */
    }
    
    /* Navigation anpassen */
    .main-navigation ul {
        flex-direction: column; /* Vertikale Menüpunkte */
        gap: var(--spacing-sm); /* Kleinerer Abstand */
        margin-top: var(--spacing-md); /* Abstand nach oben */
    }
    
    /* Unterstrich-Effekt auf mobilen Geräten ausblenden */
    .main-navigation a::after {
        display: none; /* Nicht anzeigen */
    }
    
    /* Footer Layout ändern */
    .footer-content {
        flex-direction: column; /* Vertikale Anordnung */
        gap: var(--spacing-md); /* Mittlerer Abstand */
    }
    
    /* Footer Widgets anpassen */
    .footer-widget {
        min-width: 100%; /* Volle Breite */
    }
    
    /* Wide Alignment auf mobilen Geräten zurücksetzen */
    .alignwide {
        margin-left: 0; /* Margin zurücksetzen */
        margin-right: 0; /* Margin zurücksetzen */
        max-width: 100%; /* Normale Maximalbreite */
    }
}

/* Sehr kleine Geräte (max-width: 480px) */
@media (max-width: 480px) {
    /* Schriftgrößen weiter anpassen für sehr kleine Geräte */
    body {
        font-size: calc(13px + 0.8vw);
    }
    
    h1 {
        font-size: calc(18px + 2vw);
    }

	a {
        color: #000000;
    }
    
    /* Header anpassen */
    .site-header {
        max-height: 80px; /* Kleinere Maximalhöhe */
        max-height: 12vh; /* Kleinere relative Höhe */
    }
    
    /* Branding anpassen */
    .site-branding h1 {
        font-size: var(--font-size-xl); /* Kleinere Schrift */
    }
    
    /* Navigation anpassen */
    .main-navigation ul {
        gap: var(--spacing-sm); /* Kleinerer Abstand */
    }
    
    /* Monster auf sehr kleinen Geräten optimieren */
    .monster {
        width: 95vw; /* Noch etwas breiter auf sehr kleinen Geräten */
        max-height: 45vh; /* Etwas weniger Höhe */
    }
}

/* Hochformat-Optimierung (max-width: 768px und height > width) */
@media (max-width: 768px) and (orientation: portrait) {
    .monster {
        width: 80vw;
        max-height: 40vh; /* Weniger Höhe im Hochformat */
    }
}

/* Querformat-Optimierung (max-width: 768px und width > height) */
@media (max-width: 768px) and (orientation: landscape) {
    .monster {
        width: 60vw;
        max-height: 60vh; /* Mehr Höhe im Querformat */
    }
}

/* ==================== */
/* REDUCED MOTION - Für Benutzer mit Motion Sensitivity */
/* ==================== */
@media (prefers-reduced-motion: reduce) {
    /* Alle Animationen und Übergänge deaktivieren */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important; /* Extrem kurze Animation */
        animation-iteration-count: 1 !important; /* Nur eine Iteration */
        transition-duration: 0.01ms !important; /* Extrem kurze Übergänge */
        scroll-behavior: auto !important; /* Sofortiges Scrollen */
    }
    
    /* Navigations-Unterstrich Animation deaktivieren */
    .main-navigation a::after {
        transition: none; /* Keine Übergänge */
    }
}

/* ==================== */
/* ADMIN BAR ANPASSUNG - Anpassungen für WordPress Admin Bar */
/* ==================== */
@media (min-width: 783px) {
    /* Header unter Admin Bar positionieren */
    .admin-bar .site-header {
        top: 32px; /* Abstand nach unten für Admin Bar */
    }
}

/* Skip Link unter Admin Bar positionieren */
.admin-bar .skip-link:focus {
    top: 32px; /* Unter der Admin Bar einblenden */
}

/* ==================== */
/* UTILITY CLASSES - Hilfsklassen für schnelle Anpassungen */
/* ==================== */
.text-center { text-align: center; } /* Text zentrieren */
.text-left { text-align: left; } /* Text links ausrichten */
.text-right { text-align: right; } /* Text rechts ausrichten */

.mt-0 { margin-top: 0; } /* Kein oberer Margin */
.mb-0 { margin-bottom: 0; } /* Kein unterer Margin */
.mt-1 { margin-top: var(--spacing-sm); } /* Kleiner oberer Margin */
.mb-1 { margin-bottom: var(--spacing-sm); } /* Kleiner unterer Margin */
.mt-2 { margin-top: var(--spacing-md); } /* Mittlerer oberer Margin */
.mb-2 { margin-bottom: var(--spacing-md); } /* Mittlerer unterer Margin */

.hidden { display: none; } /* Element ausblenden */
.visually-hidden { 
    /* Wie screen-reader-text aber ohne Focus-Stil */
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* ==================== */
/* DARK MODE SUPPORT - Unterstützung für Dark Mode */
/* ==================== */
@media (prefers-color-scheme: dark) {
    :root {
        --color-text: #ffffff; /* Weißer Text */
        --color-bg: #1a1a1a; /* Dunkler Hintergrund */
        --color-header-bg: #2d2d2d; /* Dunkler Header */
        --color-footer-bg: #2d2d2d; /* Dunkler Footer */
        --color-border: #444444; /* Dunkler Rahmen */
        --color-shadow: rgba(255, 255, 255, 0.1); /* Heller Schatten */
    }
}