/* CLAUDE: ======================================================================
   EDITOR.CSS – Gutenberg Editor & Block Styles
   Zweck: Styles für Gutenberg-Blöcke im Frontend & Editor
   Ziel: ≤200 Zeilen
   ====================================================================== */

/* CLAUDE: ======================================================================
   0) ENTRY-CONTENT WRAPPER
   CLAUDE: Begrenzt Standard-Content auf Lesebreite, erlaubt aber Full-Width
   ====================================================================== */

/* CLAUDE: .entry-content – Hauptcontainer für Gutenberg-Content */
/* CLAUDE: Direktes Child-Element von .site-wrapper */
.entry-content {
  /* CLAUDE: width: 100% – volle Breite für alignfull */
  width: 100%;

  /* CLAUDE: display: flex + flex-direction: column für vertikalen Stack */
  display: flex;
  flex-direction: column;

  /* CLAUDE: align-items: center – zentriert alle Blöcke horizontal */
  align-items: center;
}

/* CLAUDE: .entry-content > * – Alle direkten Child-Elemente (Gutenberg-Blöcke) */
/* CLAUDE: Begrenzt Standard-Blöcke auf Lesebreite */
.entry-content > * {
  /* CLAUDE: max-width: var(--content-size) – 750px Lesebreite */
  max-width: var(--content-size);

  /* CLAUDE: width: 100% – volle Breite bis max-width */
  width: 100%;

  /* CLAUDE: padding-inline: clamp(...) – Seitenabstände auf schmalen Screens */
  padding-inline: clamp(1rem, 3vw, 2rem);
}

/* CLAUDE: ======================================================================
   1) GUTENBERG ALIGNMENT (FULL-WIDTH & WIDE)
   CLAUDE: Ermöglicht Blöcken, Container-Breite zu überschreiben
   ====================================================================== */

/* CLAUDE: .alignfull – Volle Viewport-Breite (100vw) für Blöcke */
/* CLAUDE: Verwendung: Für Hero-Sektionen, Farbblöcke, Full-Width-Images */
/* CLAUDE: Ändern: Für andere Max-Breite max-width anpassen */
.entry-content > .alignfull {
  /* CLAUDE: width: 100vw – volle Viewport-Breite */
  width: 100vw;

  /* CLAUDE: max-width: 100vw – begrenzt auf Viewport (verhindert overflow) */
  max-width: 100vw;

  /* CLAUDE: margin-left: 0 – überschreibt .entry-content > * Zentrierung */
  margin-left: 0;
  margin-right: 0;

  /* CLAUDE: padding-inline: 0 – kein Padding, volle Breite */
  padding-inline: 0;

  /* CLAUDE: align-self: stretch – nimmt volle Breite ein */
  align-self: stretch;
}

/* CLAUDE: .alignwide – Erweiterte Breite (1200px) für Blöcke */
/* CLAUDE: Verwendung: Für breitere Inhalte ohne Full-Bleed */
/* CLAUDE: Ändern: Für andere Wide-Breite --content-wide in theme.json anpassen */
.entry-content > .alignwide {
  /* CLAUDE: max-width: var(--content-wide) – begrenzt auf Wide-Breite (1200px) */
  max-width: var(--content-wide);

  /* CLAUDE: width: 100% – volle Breite bis max-width */
  width: 100%;

  /* CLAUDE: padding-inline: 0 – kein zusätzliches Padding, nutzt volle Wide-Breite */
  /* CLAUDE: Ändern: Falls Padding gewünscht, clamp(1rem, 3vw, 2rem) nutzen */
  padding-inline: 0;
}

/* CLAUDE: .aligncenter – Zentriert Blöcke (Bilder, Tabellen, etc.) */
.aligncenter {
  /* CLAUDE: margin: auto – zentriert horizontal */
  margin-left: auto;
  margin-right: auto;

  /* CLAUDE: display: block – Block-Element für margin: auto */
  display: block;
}

/* CLAUDE: ======================================================================
   2) GUTENBERG BLOCK BACKGROUNDS (FULL-WIDTH)
   CLAUDE: Styles für Blöcke mit Hintergrundfarbe (.has-background)
   ====================================================================== */

/* CLAUDE: .has-background – Gutenberg-Klasse für Blöcke mit Hintergrundfarbe */
/* CLAUDE: Fügt Padding hinzu, damit Text nicht am Rand klebt */
/* CLAUDE: Ändern: Für mehr Padding padding auf var(--space-xl) erhöhen */
.has-background {
  /* CLAUDE: padding: var(--space-lg) – 40px Innenabstand */
  padding: var(--space-lg);
}

/* CLAUDE: .has-background.alignfull – Full-Width-Block mit Hintergrundfarbe */
/* CLAUDE: Erweitert Hintergrund auf volle Breite, Content bleibt zentriert */
/* CLAUDE: Ändern: Für andere Content-Breite max-width anpassen */
.entry-content > .has-background.alignfull {
  /* CLAUDE: padding-block: var(--space-xl) – vertikales Padding (64px) */
  padding-block: var(--space-xl);

  /* CLAUDE: padding-inline: 0 – kein horizontales Padding auf Container */
  padding-inline: 0 !important;

  /* CLAUDE: display: flex + flex-direction: column für Content-Zentrierung */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* CLAUDE: .has-background.alignfull > * – Child-Elemente in Full-Width-Block */
/* CLAUDE: Begrenzt Content-Breite, Hintergrund bleibt full-width */
/* CLAUDE: Ändern: Für andere Content-Breite --content-size anpassen */
.entry-content > .has-background.alignfull > * {
  /* CLAUDE: max-width: var(--content-size) – begrenzt auf 750px */
  max-width: var(--content-size);

  /* CLAUDE: width: 100% – volle Breite bis max-width */
  width: 100%;

  /* CLAUDE: padding-inline: clamp(...) – Seitenabstände auf schmalen Screens */
  padding-inline: clamp(1rem, 3vw, 2rem);
}

/* CLAUDE: .has-background.alignfull > .alignwide – Wide-Content in Full-Width-Block */
/* CLAUDE: Erlaubt Wide-Alignment innerhalb von Full-Width-Background */
.entry-content > .has-background.alignfull > .alignwide {
  /* CLAUDE: max-width: var(--content-wide) – erweitert auf 1200px */
  max-width: var(--content-wide);
}

/* CLAUDE: .has-background.alignfull > .alignfull – Full-Width-Content in Full-Width-Block */
/* CLAUDE: Erlaubt verschachtelte Full-Width-Elemente (z.B. Bilder) */
.entry-content > .has-background.alignfull > .alignfull {
  /* CLAUDE: max-width: none – keine Breitenbeschränkung */
  max-width: none;

  /* CLAUDE: width: 100vw – volle Viewport-Breite */
  width: 100vw;

  /* CLAUDE: padding-inline: 0 – kein Padding */
  padding-inline: 0;
}

/* CLAUDE: ======================================================================
   2.5) WORDPRESS GROUP BLOCK (wp-block-group)
   CLAUDE: Spezielle Styles für Group-Blöcke mit alignfull
   ====================================================================== */

/* CLAUDE: wp-block-group.alignfull – Full-Width Group-Block */
/* CLAUDE: WordPress rendert Group-Blöcke mit innerem Container */
.entry-content > .wp-block-group.alignfull {
  /* CLAUDE: Überschreibt Standard-Padding */
  padding-inline: 0 !important;
}

/* CLAUDE: wp-block-group__inner-container – Innerer Container von Group-Blöcken */
/* CLAUDE: Zentriert Content bei Full-Width-Groups */
.entry-content > .wp-block-group.alignfull > .wp-block-group__inner-container {
  /* CLAUDE: max-width: var(--content-size) – begrenzt auf 750px */
  max-width: var(--content-size);

  /* CLAUDE: width: 100% – volle Breite bis max-width */
  width: 100%;

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

  /* CLAUDE: padding-inline: clamp(...) – Seitenabstände auf schmalen Screens */
  padding-inline: clamp(1rem, 3vw, 2rem);
}

/* CLAUDE: wp-block-group.alignfull.has-background – Group mit Hintergrund */
/* CLAUDE: Vertikales Padding für bessere Lesbarkeit */
.entry-content > .wp-block-group.alignfull.has-background {
  /* CLAUDE: padding-block: var(--space-xl) – vertikales Padding (64px) */
  padding-block: var(--space-xl);
}

/* CLAUDE: ======================================================================
   3) GUTENBERG COLUMNS BLOCK
   CLAUDE: Mehrspaltige Layouts für Gutenberg
   ====================================================================== */

/* CLAUDE: .wp-block-columns – Container für Columns-Block */
/* CLAUDE: Erstellt flexibles Grid-Layout für Spalten */
.wp-block-columns {
  /* CLAUDE: display: flex – aktiviert Flexbox-Layout */
  display: flex;

  /* CLAUDE: gap: var(--grid-gutter) – Abstand zwischen Spalten (16-32px responsive) */
  gap: var(--grid-gutter, clamp(1rem, 2vw, 2rem));

  /* CLAUDE: flex-wrap: wrap – erlaubt Umbruch auf kleinen Screens */
  flex-wrap: wrap;

  /* CLAUDE: align-items: stretch – Spalten gleich hoch */
  align-items: stretch;

  /* CLAUDE: max-width: ENTFERNT – übernimmt Standard 750px von .entry-content > * */
  /* CLAUDE: Damit Grid bündig mit Text ist! */
  /* CLAUDE: Ändern: Für breitere Columns .alignwide-Klasse im Editor setzen */
  max-width: var(--content-size, 750px) !important;

  /* CLAUDE: width: 100% – nutzt volle verfügbare Breite */
  width: 100%;

  /* CLAUDE: padding-inline: clamp(...) – nutzt gleiches Padding wie Text */
  /* CLAUDE: Damit Grid bündig mit Text-Padding ist */
  padding-inline: clamp(1rem, 3vw, 2rem) !important;
}

/* CLAUDE: .wp-block-columns.alignwide – Wide-Alignment für Columns */
/* CLAUDE: Nutzt volle 1200px Breite statt Standard 750px */
/* CLAUDE: Ändern: Im Gutenberg-Editor "Wide Width" Alignment setzen */
.wp-block-columns.alignwide {
  /* CLAUDE: max-width: var(--content-wide) – breitere Spalten (1200px) */
  max-width: var(--content-wide, 1200px) !important;

  /* CLAUDE: padding-inline: 0 – kein Padding bei Wide-Alignment */
  padding-inline: 0 !important;
}

/* CLAUDE: .wp-block-column – Einzelne Spalte */
/* CLAUDE: Flexible Breite, gleich verteilt */
.wp-block-column {
  /* CLAUDE: flex: 1 – Spalten teilen Platz gleichmäßig */
  flex: 1;

  /* CLAUDE: min-width: 0 – verhindert Overflow-Probleme */
  min-width: 0;

  /* CLAUDE: max-width: none – keine Breitenbeschränkung für Spalten */
  max-width: none;
}

/* CLAUDE: Mobile (<768px) – Columns stapeln vertikal */
@media (max-width: 767px) {
  .wp-block-columns {
    /* CLAUDE: flex-direction: column – vertikaler Stack auf Mobile */
    flex-direction: column;

    /* CLAUDE: gap: var(--space-md) – kleinerer Abstand zwischen Spalten */
    gap: var(--space-md);
  }

  .wp-block-column {
    /* CLAUDE: flex: none – keine Flex-Verteilung auf Mobile */
    flex: none;

    /* CLAUDE: width: 100% – volle Breite pro Spalte */
    width: 100%;
  }
}

/* CLAUDE: ======================================================================
   4) GUTENBERG BLOCK SPACING
   CLAUDE: Vertikale Abstände zwischen Blöcken
   ====================================================================== */

/* CLAUDE: .wp-block-* – Basis-Spacing für alle Gutenberg-Blöcke */
/* CLAUDE: Fügt vertikalen Abstand zwischen Blöcken hinzu */
/* CLAUDE: Ändern: Für größere Abstände margin-bottom auf var(--space-xl) erhöhen */
.wp-block-group,
.wp-block-cover,
.wp-block-columns,
.wp-block-media-text,
.wp-block-gallery,
.wp-block-separator {
  /* CLAUDE: margin-bottom: var(--space-lg) – 40px Abstand nach unten */
  margin-bottom: var(--space-lg);
}

/* CLAUDE: Letztes Block-Element – kein Margin-Bottom */
.wp-block-group:last-child,
.wp-block-cover:last-child,
.wp-block-columns:last-child,
.wp-block-media-text:last-child,
.wp-block-gallery:last-child {
  margin-bottom: 0;
}

/* CLAUDE: ======================================================================
   4) GUTENBERG COLOR PALETTE
   CLAUDE: Text- und Hintergrundfarben aus theme.json
   ====================================================================== */

/* CLAUDE: .has-primary-color – Primary-Text-Farbe (Tiefbraun) */
.has-primary-color {
  color: var(--color-umber) !important;
}

/* CLAUDE: .has-primary-background-color – Primary-Hintergrund (Tiefbraun) */
.has-primary-background-color {
  background-color: var(--color-umber) !important;

  /* CLAUDE: color: white – weiße Textfarbe für Kontrast */
  color: #fff;
}

/* CLAUDE: .has-secondary-color – Secondary-Text-Farbe (Mittelbraun) */
.has-secondary-color {
  color: var(--color-brown) !important;
}

/* CLAUDE: .has-secondary-background-color – Secondary-Hintergrund (Mittelbraun) */
.has-secondary-background-color {
  background-color: var(--color-brown) !important;

  /* CLAUDE: color: white – weiße Textfarbe für Kontrast */
  color: #fff;
}

/* CLAUDE: .has-accent-color – Accent-Text-Farbe (Gold) */
.has-accent-color {
  color: var(--color-gold) !important;
}

/* CLAUDE: .has-accent-background-color – Accent-Hintergrund (Gold) */
.has-accent-background-color {
  background-color: var(--color-gold) !important;

  /* CLAUDE: color: var(--color-umber) – Tiefbraun für Kontrast */
  color: var(--color-umber);
}

/* CLAUDE: .has-marble-color – Marble-Text-Farbe (Off-White) */
.has-marble-color {
  color: var(--color-marble) !important;
}

/* CLAUDE: .has-marble-background-color – Marble-Hintergrund (Off-White) */
.has-marble-background-color {
  background-color: var(--color-marble) !important;

  /* CLAUDE: color: var(--color-graphite) – Graphite für Kontrast */
  color: var(--color-graphite);
}

/* CLAUDE: .has-graphite-color – Graphite-Text-Farbe (Dunkelgrau) */
.has-graphite-color {
  color: var(--color-graphite) !important;
}

/* CLAUDE: .has-graphite-background-color – Graphite-Hintergrund (Dunkelgrau) */
.has-graphite-background-color {
  background-color: var(--color-graphite) !important;

  /* CLAUDE: color: white – weiße Textfarbe für Kontrast */
  color: #fff;
}

/* CLAUDE: ======================================================================
   5) GUTENBERG TYPOGRAPHY
   CLAUDE: Font-Sizes aus theme.json
   ====================================================================== */

/* CLAUDE: .has-small-font-size – Kleine Schriftgröße */
.has-small-font-size {
  font-size: clamp(0.875rem, 1vw, 0.9rem) !important;
}

/* CLAUDE: .has-normal-font-size – Normal Schriftgröße */
.has-normal-font-size {
  font-size: clamp(0.9375rem, 1.2vw, 1rem) !important;
}

/* CLAUDE: .has-medium-font-size – Medium Schriftgröße */
.has-medium-font-size {
  font-size: clamp(1rem, 1.5vw, 1.125rem) !important;
}

/* CLAUDE: .has-large-font-size – Large Schriftgröße */
.has-large-font-size {
  font-size: clamp(1.25rem, 2vw, 1.5rem) !important;
}

/* CLAUDE: .has-huge-font-size – Huge Schriftgröße */
.has-huge-font-size {
  font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
}

/* CLAUDE: ======================================================================
   6) GUTENBERG RESPONSIVE (MOBILE)
   CLAUDE: Mobile-Anpassungen für Gutenberg-Blöcke
   ====================================================================== */

/* CLAUDE: Mobile (<768px) – Reduzierte Paddings */
@media (max-width: 767px) {
  /* CLAUDE: .has-background – kleineres Padding auf Mobile */
  .has-background {
    padding: var(--space-md);
  }

  /* CLAUDE: .has-background.alignfull – kleineres vertikales Padding auf Mobile */
  .has-background.alignfull {
    padding-block: var(--space-lg);
  }

  /* CLAUDE: .alignfull > * – kleineres Seitenabstand auf Mobile */
  .has-background.alignfull > * {
    padding-inline: 1rem;
  }
}