/* ======================================================================
   CLAUDE: layout.css - Grid, Content-Wrapper, Spacing
   ======================================================================

   CLAUDE: Zweck
   -------
   CLAUDE: Dieses File implementiert das randlose Full-Width-Layout aus dem Lastenheft (Kapitel 2.1)
   CLAUDE: Es stellt ein flexibles Grid-System, Container-Varianten und Utility-Klassen bereit
   CLAUDE: Nutzt CSS-Custom-Properties aus theme.json für Konsistenz

   CLAUDE: Inhalt
   -------
   CLAUDE: 1) CSS Custom Properties (Design Tokens)
   CLAUDE: 2) Full-Width Layout System
   CLAUDE: 3) Container-System (.container, .container-wide, .container-full, .container-none)
   CLAUDE: 4) Grid-System (12/8/4 Spalten, responsive)
   CLAUDE: 5) Section-System (.section, .section-lg, .section-hero, .section-tight, .section-flush)
   CLAUDE: 6) Utility-Klassen für Spacing (mt-, mb-, pt-, pb-, px-, p-)
   CLAUDE: 7) Alignment Utilities (flex, justify-, items-, gap-)
   CLAUDE: 8) Visibility & Display Utilities (hide-mobile, show-desktop, etc.)
   CLAUDE: 9) Width & Max-Width Utilities (.w-full, .max-w-prose)
   CLAUDE: 10) Responsive Layout Modifiers (Mobile-Anpassungen)

   CLAUDE: Verwendung
   ----------
   CLAUDE: Container: <div class="container"> für Standard-Content (750px)
   CLAUDE:            <div class="container-wide"> für breitere Inhalte (1200px)
   CLAUDE:            <div class="container-none"> für Full-Bleed (100vw)
   CLAUDE: Grid:      <div class="grid"><div class="col-6">Half</div><div class="col-6">Half</div></div>
   CLAUDE: Sections:  <section class="section"> für Standard-Padding (64px)
   CLAUDE:            <section class="section-hero"> für Hero-Bereiche (80-160px)
   CLAUDE: Spacing:   <div class="mt-lg mb-xl"> für Margin top large, bottom XL
   CLAUDE: Flex:      <div class="flex justify-center items-center gap-md">

   CLAUDE: Breakpoints
   -----------
   CLAUDE: Mobile:  < 768px  (4-Spalten-Grid)
   CLAUDE: Tablet:  768px - 1023px  (8-Spalten-Grid)
   CLAUDE: Desktop: >= 1024px  (12-Spalten-Grid)
   CLAUDE: Wide:    >= 1280px
   CLAUDE: XL:      >= 1440px

   CLAUDE: Anpassen
   --------
   CLAUDE: - Content-Breiten: Ändere --content-size, --content-wide, --content-full in :root
   CLAUDE: - Spacing-Scale: Ändere --space-* Variablen in :root
   CLAUDE: - Breakpoints: Passe @media-Queries an (aktuell: 768px, 1024px)
   CLAUDE: - Grid-Spalten: Ändere grid-template-columns in .grid

   ====================================================================== */

/* ======================================================================
   CLAUDE: 1) CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   CLAUDE: Diese Variablen greifen die Werte aus theme.json auf und machen sie in CSS wiederverwendbar
   CLAUDE: Ändern: Werte in theme.json anpassen, dann hier synchronisieren
   ====================================================================== */

:root {
  /* CLAUDE: Content-Breiten (aus theme.json) - definiert maximale Lesebreite */
  /* CLAUDE: --content-size: Optimale Lesebreite für Fließtext (68-80 Zeichen) */
  --content-size: 750px;

  /* CLAUDE: --content-wide: Erweiterte Breite für Wide-Alignment Blöcke */
  --content-wide: 1200px;

  /* CLAUDE: --content-full: Maximale Container-Breite für Full-Width-Inhalte */
  --content-full: 1440px;

  /* CLAUDE: Spacing-Scale (aus theme.json custom.spacing) */
  /* CLAUDE: Basis 8px-Grid für konsistente vertikale und horizontale Rhythmen */
  --space-xs: 0.5rem;   /* CLAUDE: 8px - für kleine Abstände (Icons, Inline-Gaps) */
  --space-sm: 1rem;     /* CLAUDE: 16px - Standard-Abstände (Buttons, kleine Gaps) */
  --space-md: 1.5rem;   /* CLAUDE: 24px - Medium-Abstände (Cards, Sektions-Gaps) */
  --space-lg: 2.5rem;   /* CLAUDE: 40px - Large-Abstände (zwischen Content-Blöcken) */
  --space-xl: 4rem;     /* CLAUDE: 64px - XL-Abstände (Sektions-Padding) */
  --space-xxl: 6rem;    /* CLAUDE: 96px - XXL-Abstände (Hero-Sektionen) */

  /* CLAUDE: Responsive Gutter (aus Lastenheft 2.1) */
  /* CLAUDE: clamp() sorgt für fluide Abstände zwischen 16px (Mobile) und 32px (Desktop) */
  --grid-gutter: clamp(1rem, 2vw, 2rem);

  /* CLAUDE: Breakpoints als Custom Properties (nur als Referenz für Media Queries) */
  /* CLAUDE: Diese werden in @media-Queries genutzt, nicht direkt als CSS-Werte */
  --breakpoint-xs: 640px;
  --breakpoint-sm: 768px;
  --breakpoint-md: 1024px;
  --breakpoint-lg: 1280px;
  --breakpoint-xl: 1440px;
}

/* ======================================================================
   CLAUDE: 2) FULL-WIDTH LAYOUT SYSTEM
   CLAUDE: Implementiert das randlose Layout aus Lastenheft 2.1
   CLAUDE: Jede Sektion kann full-bleed (100vw) oder constrained (begrenzt) sein
   ====================================================================== */

/* CLAUDE: Body & Main - Basis für Full-Width-Layout */
/* CLAUDE: Entfernt Standard-Margins, damit Sektionen randlos laufen können */
body {
  /* CLAUDE: margin: 0 entfernt Browser-Default-Margins */
  margin: 0;

  /* CLAUDE: padding: 0 entfernt Browser-Default-Paddings */
  padding: 0;

  /* CLAUDE: overflow-x verhindert horizontales Scrollen bei Full-Width-Elementen */
  overflow-x: hidden;
}

/* CLAUDE: Main-Container - Wrapper für alle Inhalte */
#main-content,
.site-main {
  /* CLAUDE: display: flex ermöglicht flexible Layouts */
  display: flex;

  /* CLAUDE: flex-direction: column stapelt Sektionen vertikal */
  flex-direction: column;

  /* CLAUDE: width: 100% stellt sicher, dass Container volle Breite nutzt */
  width: 100%;
}

/* ======================================================================
   CLAUDE: 3) CONTAINER-SYSTEM
   CLAUDE: Drei Container-Typen für verschiedene Content-Breiten
   CLAUDE: Verwendung: Wrap Content in <div class="container"> bzw. .container-wide/.container-full
   ====================================================================== */

/* CLAUDE: Standard-Container - für Fließtext (750px max) */
.container {
  /* CLAUDE: max-width begrenzt Lesebreite auf optimale 68-80 Zeichen */
  max-width: 1350px;

  /* CLAUDE: margin: 0 auto zentriert Container horizontal */
  margin-left: auto;
  margin-right: auto;

  /* CLAUDE: padding-inline sorgt für Seitenabstände auf schmalen Viewports */
  /* CLAUDE: clamp(1rem, 3vw, 2rem) = mindestens 16px, maximal 32px, fließend */
  padding-inline: clamp(1rem, 3vw, 2rem);

  /* CLAUDE: width: 100% stellt sicher, dass Container auf kleinen Screens voll ausnutzt */
  width: 100%;
}

/* CLAUDE: Wide-Container - für breitere Inhalte (1200px max) */
.container-wide {
  /* CLAUDE: Wie .container, aber mit größerer max-width für Bilder, Galleries etc. */
  max-width: var(--content-wide);
  margin-left: auto;
  margin-right: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
  width: 100%;
}

/* CLAUDE: Full-Container - für maximale Breite (1440px max) */
.container-full {
  /* CLAUDE: Maximale Container-Breite, aber immer noch begrenzt (kein full-bleed) */
  max-width: var(--content-full);
  margin-left: auto;
  margin-right: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
  width: 100%;
}

/* CLAUDE: No-Container - für echtes Full-Bleed (100vw) */
/* CLAUDE: Nutzen für Hero, Slider, Full-Width-Images */
.container-none {
  /* CLAUDE: max-width: none entfernt jede Breitenbeschränkung */
  max-width: none;

  /* CLAUDE: width: 100vw = 100% der Viewport-Breite */
  width: 100vw;

  /* CLAUDE: margin-left: calc(...) zieht Element aus Parent-Padding heraus */
  /* CLAUDE: 50% - 50vw berechnet negativen Offset zum Viewport-Rand */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* CLAUDE: padding: 0 entfernt Innen-Abstände für echtes Full-Bleed */
  padding-left: 0;
  padding-right: 0;
}

/* ======================================================================
   CLAUDE: 4) GRID-SYSTEM
   CLAUDE: Responsive 12/8/4-Spalten-Grid aus Lastenheft 2.1
   CLAUDE: Verwendung: <div class="grid"> mit <div class="col-{n}"> Children
   ====================================================================== */

/* CLAUDE: Grid-Container - Basis für alle Grids */
.grid {
  /* CLAUDE: display: grid aktiviert CSS Grid Layout */
  display: grid;

  /* CLAUDE: 12 Spalten auf Desktop (>= 1024px) */
  grid-template-columns: repeat(12, 1fr);

  /* CLAUDE: gap: Abstand zwischen Grid-Items, nutzt fluides Gutter */
  gap: var(--grid-gutter);

  /* CLAUDE: width: 100% stellt sicher, dass Grid volle Container-Breite nutzt */
  width: 100%;
}

/* CLAUDE: Spalten-Klassen für 12-Spalten-Grid (Desktop) */
/* CLAUDE: Verwendung: <div class="col-6"> für halbe Breite etc. */
/* CLAUDE: grid-column: span X - Element nimmt X Spalten ein */

.col-1  { grid-column: span 1; }   /* CLAUDE: 1/12 Breite */
.col-2  { grid-column: span 2; }   /* CLAUDE: 2/12 Breite (1/6) */
.col-3  { grid-column: span 3; }   /* CLAUDE: 3/12 Breite (1/4) */
.col-4  { grid-column: span 4; }   /* CLAUDE: 4/12 Breite (1/3) */
.col-5  { grid-column: span 5; }   /* CLAUDE: 5/12 Breite */
.col-6  { grid-column: span 6; }   /* CLAUDE: 6/12 Breite (1/2) */
.col-7  { grid-column: span 7; }   /* CLAUDE: 7/12 Breite */
.col-8  { grid-column: span 8; }   /* CLAUDE: 8/12 Breite (2/3) */
.col-9  { grid-column: span 9; }   /* CLAUDE: 9/12 Breite (3/4) */
.col-10 { grid-column: span 10; }  /* CLAUDE: 10/12 Breite */
.col-11 { grid-column: span 11; }  /* CLAUDE: 11/12 Breite */
.col-12 { grid-column: span 12; }  /* CLAUDE: 12/12 Breite (volle Breite) */

/* CLAUDE: Tablet-Grid - 8 Spalten (768px - 1023px) */
/* CLAUDE: Ändert Grid auf 8 Spalten für mittlere Bildschirme */
@media (max-width: 1023px) and (min-width: 768px) {
  .grid {
    /* CLAUDE: 8 Spalten auf Tablet */
    grid-template-columns: repeat(8, 1fr);
  }

  /* CLAUDE: Tablet-spezifische Spalten-Klassen */
  /* CLAUDE: Verwende .col-md-X für Tablet-spezifische Breiten */
  .col-md-1  { grid-column: span 1; }
  .col-md-2  { grid-column: span 2; }
  .col-md-3  { grid-column: span 3; }
  .col-md-4  { grid-column: span 4; }
  .col-md-5  { grid-column: span 5; }
  .col-md-6  { grid-column: span 6; }
  .col-md-7  { grid-column: span 7; }
  .col-md-8  { grid-column: span 8; }

  /* CLAUDE: Desktop-Spalten werden auf Tablet automatisch angepasst */
  /* CLAUDE: 12-Spalten-Elemente auf 8 Spalten runterbrechen */
  .col-1, .col-2  { grid-column: span 2; }
  .col-3, .col-4  { grid-column: span 3; }
  .col-5, .col-6  { grid-column: span 4; }
  .col-7, .col-8, .col-9  { grid-column: span 6; }
  .col-10, .col-11, .col-12 { grid-column: span 8; }
}

/* CLAUDE: Mobile-Grid - 4 Spalten (<768px) */
/* CLAUDE: Reduziert Grid auf 4 Spalten für kleine Bildschirme */
@media (max-width: 767px) {
  .grid {
    /* CLAUDE: 4 Spalten auf Mobile */
    grid-template-columns: repeat(4, 1fr);

    /* CLAUDE: Kleinerer Gutter auf Mobile (mindestens 12px) */
    gap: clamp(0.75rem, 2vw, 1rem);
  }

  /* CLAUDE: Mobile-spezifische Spalten-Klassen */
  .col-sm-1  { grid-column: span 1; }
  .col-sm-2  { grid-column: span 2; }
  .col-sm-3  { grid-column: span 3; }
  .col-sm-4  { grid-column: span 4; }

  /* CLAUDE: Alle Desktop/Tablet-Spalten werden auf Mobile auf 4 Spalten gestapelt */
  /* CLAUDE: Standard-Verhalten: Volle Breite (4 Spalten) auf Mobile */
  .col-1, .col-2, .col-3, .col-4,
  .col-5, .col-6, .col-7, .col-8,
  .col-9, .col-10, .col-11, .col-12 {
    grid-column: span 4;
  }
}

/* ======================================================================
   CLAUDE: GRID-VARIANTEN (2-, 3-, 4-Spalten)
   CLAUDE: Vordefinierte Grid-Layouts für häufige Anwendungsfälle
   CLAUDE: Verwendung: <div class="grid-4"> für automatisches 4-Spalten-Grid
   ====================================================================== */

/* CLAUDE: .grid-2 - 2-Spalten-Grid (Desktop), 1-Spalte (Mobile) */
/* CLAUDE: Verwendung: Für zweispaltige Layouts (z.B. Text + Bild) */
.grid-2 {
  /* CLAUDE: display: grid aktiviert CSS Grid */
  display: grid;

  /* CLAUDE: 2 Spalten auf Desktop */
  grid-template-columns: repeat(2, 1fr);

  /* CLAUDE: gap: Abstand zwischen Grid-Items */
  gap: var(--grid-gutter);

  /* CLAUDE: width: 100% volle Container-Breite */
  width: 100%;
}

/* CLAUDE: .grid-3 - 3-Spalten-Grid (Desktop), 2-Spalten (Tablet), 1-Spalte (Mobile) */
/* CLAUDE: Verwendung: Für dreispaltige Layouts (z.B. Feature-Cards) */
.grid-3 {
  /* CLAUDE: display: grid aktiviert CSS Grid */
  display: grid;

  /* CLAUDE: 3 Spalten auf Desktop */
  grid-template-columns: repeat(3, 1fr);

  /* CLAUDE: gap: Abstand zwischen Grid-Items */
  gap: var(--grid-gutter);

  /* CLAUDE: width: 100% volle Container-Breite */
  width: 100%;
}

/* CLAUDE: .grid-4 - 4-Spalten-Grid (Desktop), 2-Spalten (Tablet), 1-Spalte (Mobile) */
/* CLAUDE: Verwendung: Für vierspaltige Layouts (z.B. Footer, Produkt-Grid) */
.grid-4 {
  /* CLAUDE: display: grid aktiviert CSS Grid */
  display: grid;

  /* CLAUDE: 4 Spalten auf Desktop */
  grid-template-columns: repeat(4, 1fr);

  /* CLAUDE: gap: Abstand zwischen Grid-Items */
  gap: var(--grid-gutter);

  /* CLAUDE: width: 100% volle Container-Breite */
  width: 100%;
}

/* CLAUDE: Responsive Anpassungen für Grid-Varianten */

/* CLAUDE: Tablet (768px - 1023px) */
@media (max-width: 1023px) {
  /* CLAUDE: .grid-2 bleibt 2-spaltig auf Tablet */

  /* CLAUDE: .grid-3 wird 2-spaltig auf Tablet */
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* CLAUDE: .grid-4 wird 2-spaltig auf Tablet */
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* CLAUDE: Mobile (<768px) */
@media (max-width: 767px) {
  /* CLAUDE: .grid-2 wird 1-spaltig auf Mobile */
  .grid-2 {
    grid-template-columns: 1fr;
    gap: clamp(0.75rem, 2vw, 1rem);
  }

  /* CLAUDE: .grid-3 wird 1-spaltig auf Mobile */
  .grid-3 {
    grid-template-columns: 1fr;
    gap: clamp(0.75rem, 2vw, 1rem);
  }

  /* CLAUDE: .grid-4 wird 1-spaltig auf Mobile */
  .grid-4 {
    grid-template-columns: 1fr;
    gap: clamp(0.75rem, 2vw, 1rem);
  }
}

/* ======================================================================
   CLAUDE: 5) SECTION-SYSTEM
   CLAUDE: Wiederverwendbare Sektionen mit Padding und optionalen Hintergründen
   CLAUDE: Verwendung: <section class="section"> oder .section-lg/.section-hero
   ====================================================================== */

/* CLAUDE: Standard-Section - Basis-Padding */
.section {
  /* CLAUDE: padding-block: vertikaler Innenabstand (oben/unten) */
  /* CLAUDE: Nutzt --space-xl (64px) für großzügige Sektions-Abstände */
  padding-block: var(--space-xl);

  /* CLAUDE: width: 100% stellt sicher, dass Sektion volle Breite nutzt */
  width: 100%;
}

/* CLAUDE: Large-Section - Größeres Padding für wichtige Sektionen */
.section-lg {
  /* CLAUDE: Erhöhtes Padding (96px) für Hero, Featured Content etc. */
  padding-block: var(--space-xxl);
  width: 100%;
}

/* CLAUDE: Hero-Section - Maximales Padding für Hero-Bereiche */
.section-hero {
  /* CLAUDE: Sehr großes Padding mit clamp() für responsive Anpassung */
  /* CLAUDE: Mindestens 80px, maximal 160px, fließend */
  padding-block: clamp(5rem, 10vw, 10rem);
  width: 100%;
}

/* CLAUDE: Tight-Section - Reduziertes Padding für kompakte Bereiche */
.section-tight {
  /* CLAUDE: Kleineres Padding (40px) für kompakte Sektionen */
  padding-block: var(--space-lg);
  width: 100%;
}

/* CLAUDE: No-Padding-Section - Kein Padding für Full-Bleed-Content */
.section-flush {
  /* CLAUDE: Entfernt alle Paddings für nahtlose Übergänge */
  padding: 0;
  width: 100%;
}

/* ======================================================================
   CLAUDE: 6) UTILITY-KLASSEN FÜR SPACING
   CLAUDE: Margin und Padding Utilities basierend auf der Spacing-Scale
   CLAUDE: Verwendung: .mt-lg (margin-top large), .p-xl (padding all sides XL)
   ====================================================================== */

/* CLAUDE: Margin-Top Utilities */
.mt-0   { margin-top: 0; }                    /* CLAUDE: Kein Margin oben */
.mt-xs  { margin-top: var(--space-xs); }      /* CLAUDE: 8px Margin oben */
.mt-sm  { margin-top: var(--space-sm); }      /* CLAUDE: 16px Margin oben */
.mt-md  { margin-top: var(--space-md); }      /* CLAUDE: 24px Margin oben */
.mt-lg  { margin-top: var(--space-lg); }      /* CLAUDE: 40px Margin oben */
.mt-xl  { margin-top: var(--space-xl); }      /* CLAUDE: 64px Margin oben */
.mt-xxl { margin-top: var(--space-xxl); }     /* CLAUDE: 96px Margin oben */

/* CLAUDE: Margin-Bottom Utilities */
.mb-0   { margin-bottom: 0; }                 /* CLAUDE: Kein Margin unten */
.mb-xs  { margin-bottom: var(--space-xs); }   /* CLAUDE: 8px Margin unten */
.mb-sm  { margin-bottom: var(--space-sm); }   /* CLAUDE: 16px Margin unten */
.mb-md  { margin-bottom: var(--space-md); }   /* CLAUDE: 24px Margin unten */
.mb-lg  { margin-bottom: var(--space-lg); }   /* CLAUDE: 40px Margin unten */
.mb-xl  { margin-bottom: var(--space-xl); }   /* CLAUDE: 64px Margin unten */
.mb-xxl { margin-bottom: var(--space-xxl); }  /* CLAUDE: 96px Margin unten */

/* CLAUDE: Margin-Inline (horizontal) Utilities */
.mx-auto { margin-inline: auto; }             /* CLAUDE: Zentriert horizontal */
.mx-0    { margin-inline: 0; }                /* CLAUDE: Kein Margin links/rechts */
.mx-xs   { margin-inline: var(--space-xs); }  /* CLAUDE: 8px Margin links/rechts */
.mx-sm   { margin-inline: var(--space-sm); }  /* CLAUDE: 16px Margin links/rechts */
.mx-md   { margin-inline: var(--space-md); }  /* CLAUDE: 24px Margin links/rechts */
.mx-lg   { margin-inline: var(--space-lg); }  /* CLAUDE: 40px Margin links/rechts */

/* CLAUDE: Padding-Top Utilities */
.pt-0   { padding-top: 0; }                   /* CLAUDE: Kein Padding oben */
.pt-xs  { padding-top: var(--space-xs); }     /* CLAUDE: 8px Padding oben */
.pt-sm  { padding-top: var(--space-sm); }     /* CLAUDE: 16px Padding oben */
.pt-md  { padding-top: var(--space-md); }     /* CLAUDE: 24px Padding oben */
.pt-lg  { padding-top: var(--space-lg); }     /* CLAUDE: 40px Padding oben */
.pt-xl  { padding-top: var(--space-xl); }     /* CLAUDE: 64px Padding oben */
.pt-xxl { padding-top: var(--space-xxl); }    /* CLAUDE: 96px Padding oben */

/* CLAUDE: Padding-Bottom Utilities */
.pb-0   { padding-bottom: 0; }                /* CLAUDE: Kein Padding unten */
.pb-xs  { padding-bottom: var(--space-xs); }  /* CLAUDE: 8px Padding unten */
.pb-sm  { padding-bottom: var(--space-sm); }  /* CLAUDE: 16px Padding unten */
.pb-md  { padding-bottom: var(--space-md); }  /* CLAUDE: 24px Padding unten */
.pb-lg  { padding-bottom: var(--space-lg); }  /* CLAUDE: 40px Padding unten */
.pb-xl  { padding-bottom: var(--space-xl); }  /* CLAUDE: 64px Padding unten */
.pb-xxl { padding-bottom: var(--space-xxl); } /* CLAUDE: 96px Padding unten */

/* CLAUDE: Padding-Inline (horizontal) Utilities */
.px-0   { padding-inline: 0; }                /* CLAUDE: Kein Padding links/rechts */
.px-xs  { padding-inline: var(--space-xs); }  /* CLAUDE: 8px Padding links/rechts */
.px-sm  { padding-inline: var(--space-sm); }  /* CLAUDE: 16px Padding links/rechts */
.px-md  { padding-inline: var(--space-md); }  /* CLAUDE: 24px Padding links/rechts */
.px-lg  { padding-inline: var(--space-lg); }  /* CLAUDE: 40px Padding links/rechts */
.px-xl  { padding-inline: var(--space-xl); }  /* CLAUDE: 64px Padding links/rechts */

/* CLAUDE: All-Sides Padding */
.p-0    { padding: 0; }                       /* CLAUDE: Kein Padding */
.p-xs   { padding: var(--space-xs); }         /* CLAUDE: 8px Padding auf allen Seiten */
.p-sm   { padding: var(--space-sm); }         /* CLAUDE: 16px Padding auf allen Seiten */
.p-md   { padding: var(--space-md); }         /* CLAUDE: 24px Padding auf allen Seiten */
.p-lg   { padding: var(--space-lg); }         /* CLAUDE: 40px Padding auf allen Seiten */
.p-xl   { padding: var(--space-xl); }         /* CLAUDE: 64px Padding auf allen Seiten */

/* ======================================================================
   CLAUDE: 7) ALIGNMENT UTILITIES
   CLAUDE: Text-Alignment und Flexbox-Alignment Helpers
   CLAUDE: Verwendung: .text-center, .flex-center, .items-center etc.
   ====================================================================== */

/* CLAUDE: Text-Alignment */
.text-left   { text-align: left; }    /* CLAUDE: Text linksbündig */
.text-center { text-align: center; }  /* CLAUDE: Text zentriert */
.text-right  { text-align: right; }   /* CLAUDE: Text rechtsbündig */

/* CLAUDE: Flexbox Container */
.flex {
  /* CLAUDE: display: flex aktiviert Flexbox-Layout */
  display: flex;
}

/* CLAUDE: Flex Direction */
.flex-row    { flex-direction: row; }          /* CLAUDE: Horizontal (Standard) */
.flex-col    { flex-direction: column; }       /* CLAUDE: Vertikal */
.flex-wrap   { flex-wrap: wrap; }              /* CLAUDE: Umbruch erlauben */

/* CLAUDE: Justify Content (Horizontal Alignment in Flex) */
.justify-start   { justify-content: flex-start; }   /* CLAUDE: Links ausrichten */
.justify-center  { justify-content: center; }       /* CLAUDE: Zentriert ausrichten */
.justify-end     { justify-content: flex-end; }     /* CLAUDE: Rechts ausrichten */
.justify-between { justify-content: space-between; }/* CLAUDE: Gleichmäßig verteilt mit Abstand */
.justify-around  { justify-content: space-around; } /* CLAUDE: Gleichmäßig verteilt mit Rand */

/* CLAUDE: Align Items (Vertical Alignment in Flex) */
.items-start   { align-items: flex-start; }  /* CLAUDE: Oben ausrichten */
.items-center  { align-items: center; }      /* CLAUDE: Vertikal zentrieren */
.items-end     { align-items: flex-end; }    /* CLAUDE: Unten ausrichten */
.items-stretch { align-items: stretch; }     /* CLAUDE: Volle Höhe */

/* CLAUDE: Gap Utilities für Flexbox/Grid */
.gap-xs  { gap: var(--space-xs); }   /* CLAUDE: 8px Abstand zwischen Items */
.gap-sm  { gap: var(--space-sm); }   /* CLAUDE: 16px Abstand zwischen Items */
.gap-md  { gap: var(--space-md); }   /* CLAUDE: 24px Abstand zwischen Items */
.gap-lg  { gap: var(--space-lg); }   /* CLAUDE: 40px Abstand zwischen Items */
.gap-xl  { gap: var(--space-xl); }   /* CLAUDE: 64px Abstand zwischen Items */

/* CLAUDE: Kombinierte Flex-Center Utility (horizontal + vertikal zentriert) */
.flex-center {
  /* CLAUDE: display: flex aktiviert Flexbox */
  display: flex;
  /* CLAUDE: justify-content: center zentriert horizontal */
  justify-content: center;
  /* CLAUDE: align-items: center zentriert vertikal */
  align-items: center;
}

/* ======================================================================
   CLAUDE: 8) VISIBILITY & DISPLAY UTILITIES
   CLAUDE: Responsive Show/Hide und Display-Helpers
   CLAUDE: Verwendung: .hide-mobile, .show-desktop, .block, .inline-block
   ====================================================================== */

/* CLAUDE: Display Utilities */
.block        { display: block; }         /* CLAUDE: Block-Element */
.inline-block { display: inline-block; }  /* CLAUDE: Inline-Block */
.inline       { display: inline; }        /* CLAUDE: Inline-Element */
.hidden       { display: none; }          /* CLAUDE: Verstecken */

/* CLAUDE: Responsive Visibility - Hide auf Mobile */
@media (max-width: 767px) {
  .hide-mobile {
    /* CLAUDE: Versteckt Element auf Mobile (<768px) */
    display: none !important;
  }
}

/* CLAUDE: Responsive Visibility - Hide auf Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .hide-tablet {
    /* CLAUDE: Versteckt Element auf Tablet (768px-1023px) */
    display: none !important;
  }
}

/* CLAUDE: Responsive Visibility - Hide auf Desktop */
@media (min-width: 1024px) {
  .hide-desktop {
    /* CLAUDE: Versteckt Element auf Desktop (>=1024px) */
    display: none !important;
  }
}

/* CLAUDE: Show only auf bestimmten Breakpoints */
.show-mobile  { display: none; }  /* CLAUDE: Standardmäßig versteckt */
.show-tablet  { display: none; }  /* CLAUDE: Standardmäßig versteckt */
.show-desktop { display: none; }  /* CLAUDE: Standardmäßig versteckt */

@media (max-width: 767px) {
  .show-mobile {
    /* CLAUDE: Zeigt Element nur auf Mobile */
    display: block !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .show-tablet {
    /* CLAUDE: Zeigt Element nur auf Tablet */
    display: block !important;
  }
}

@media (min-width: 1024px) {
  .show-desktop {
    /* CLAUDE: Zeigt Element nur auf Desktop */
    display: block !important;
  }
}

/* ======================================================================
   CLAUDE: 9) WIDTH & MAX-WIDTH UTILITIES
   CLAUDE: Schnelle Breiten-Kontrolle für Elemente
   CLAUDE: Verwendung: .w-full, .w-auto, .max-w-prose
   ====================================================================== */

/* CLAUDE: Width Utilities */
.w-full  { width: 100%; }       /* CLAUDE: Volle Breite */
.w-auto  { width: auto; }       /* CLAUDE: Automatische Breite */
.w-fit   { width: fit-content; }/* CLAUDE: Breite nach Content */

/* CLAUDE: Max-Width Utilities (basierend auf Content-Größen) */
.max-w-prose { max-width: var(--content-size); }      /* CLAUDE: Max 750px (Lesebreite) */
.max-w-wide  { max-width: var(--content-wide); }      /* CLAUDE: Max 1200px */
.max-w-full  { max-width: var(--content-full); }      /* CLAUDE: Max 1440px */
.max-w-none  { max-width: none; }                     /* CLAUDE: Keine Begrenzung */

/* ======================================================================
   CLAUDE: 10) RESPONSIVE LAYOUT MODIFIERS
   CLAUDE: Mobile-First Adjustments für Sections und Grid
   CLAUDE: Verwendung: Automatische Anpassungen bei Media Queries
   ====================================================================== */

/* CLAUDE: Section Padding auf Mobile reduzieren */
@media (max-width: 767px) {
  .section,
  .section-lg,
  .section-hero {
    /* CLAUDE: Reduziert vertikales Padding auf Mobile für kompaktere Darstellung */
    padding-block: clamp(2rem, 6vw, 4rem);
  }

  .section-tight {
    /* CLAUDE: Noch kleineres Padding für tight sections auf Mobile */
    padding-block: var(--space-md);
  }
}

/* CLAUDE: Container auf sehr schmalen Displays (< 375px) */
@media (max-width: 374px) {
  .container,
  .container-wide,
  .container-full {
    /* CLAUDE: Kleinerer Seitenabstand auf sehr schmalen Displays */
    padding-inline: 1rem;
  }
}

/* ======================================================================
   CLAUDE: 11) PAGE-SPECIFIC STYLES
   CLAUDE: Spezifische Layout-Regeln für einzelne Seiten-Templates
   ====================================================================== */

/* CLAUDE: Ratgeber-Seite (#ratgeber-page) */
/* CLAUDE: 50px Abstand zum Header (oben) + 50px Abstand links für Überschrift */
/* CLAUDE: Ändern: margin-top für anderen Abstand zum Header anpassen */
/* CLAUDE: Ändern: padding-left für anderen linken Abstand anpassen */

/* CLAUDE: Main-Container der Ratgeber-Seite - Abstand zum Header */
#ratgeber-page {
  /* CLAUDE: margin-top: 50px - Abstand zwischen Site-Header und Ratgeber-Content */
  /* CLAUDE: Wichtig: Dieser Abstand ist zwischen Header und Main-Element */
  margin-top: 50px !important;
}

/* CLAUDE: Page-Header auf Ratgeber-Seite - linker Abstand für Überschrift */
#ratgeber-page .page-header {
  /* CLAUDE: padding-left: 50px - Überschrift hat 50px Abstand vom linken Rand */
  padding-left: 50px !important;

  /* CLAUDE: margin: 0 - Reset alle Margins, da Abstände via Padding gesteuert werden */
  margin-top: 0 !important;
  margin-bottom: clamp(32px, 5vw, 64px);

  /* CLAUDE: text-align: left - Überschrift linksbündig */
  text-align: left;
}

/* CLAUDE: Page-Title auf Ratgeber-Seite - sichtbar machen (auf anderen Seiten versteckt) */
#ratgeber-page .page-title {
  /* CLAUDE: display: block !important überschreibt global versteckten .entry-title */
  display: block !important;

  /* CLAUDE: margin: 0 - keine zusätzlichen Margins auf der Überschrift selbst */
  margin: 0;
}