/* SiteWarp Canvas — Canvas-Rendering-Korrekturen (Breite + Icons + Hero-Overlay).
   Alles wirkt nur im Canvas-Body und kompensiert Effekte der WordPress-/Multisite-
   Umgebung, die das mitgelieferte Lovable-Design sonst stoeren. */

/* 1) VOLLE BREITE erzwingen — ABER nur die WordPress-Beschraenkung, nicht die des Designs.
   Der Block-Wrapper der Portalseite steht auf "constrained" (begrenzte Breite).
   Dadurch zwaengt WordPress jeden direkten Inhalt in die globale content-size
   (bei Classic-Themes wie Divi z.B. nur ~820px) -> die Seite erscheint als
   schmaler, zentrierter Streifen mit grossen leeren Raendern. Das Lovable-Design
   bringt seine EIGENE Breiten-/Container-Logik mit (Sektionen voll, innen zentrierte
   Spalten ueber Tailwind-Klassen wie max-w-5xl/6xl). Daher die WordPress-Beschraenkung
   aufheben.
   WICHTIG: Elemente, die eine EIGENE Tailwind-Breitenklasse (max-w-*) tragen, AUSNEHMEN
   -> sonst macht das `max-width:none !important` auch Lovables zentrierte Inhaltsspalte
   platt und der Text/die Karten laufen fast bis zum Bildschirmrand (verifiziert:
   max-w-5xl-Spalte sprang von 1024px auf 1361px). Mit dem :not([class*="max-w-"]) bleibt
   jede Design-eigene Breitenbegrenzung erhalten = 1:1 wie im Lovable-Original.
   ZUSAETZLICH :not([class*="container"]) ausnehmen — manche Portale zentrieren ihren Inhalt
   nicht ueber max-w-*, sondern ueber EIGENE Container-Klassen (.section-container,
   .container-narrow, .container) mit eigener max-width. Ohne diese Ausnahme wurden sie
   ebenfalls auf volle Breite gezwungen (Inhalt lief bis zum Bildschirmrand statt zentriert). */
.sw-canvas-body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)):not([class*="max-w-"]):not([class*="container"]) {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 2) DEKO-ICONS sichtbar machen.
   Der Multisite-kses-Filter entfernt beim Speichern/Import das stroke-Attribut der
   inline-SVG-Icons (Lucide-Outline-Icons mit fill:none) -> ohne Strich sind sie
   unsichtbar (leere Kreise). Strich wiederherstellen via currentColor:
   - currentColor = die geerbte Textfarbe des Icon-Kontexts. Das ist EXAKT der
     Mechanismus, den Lovable selbst nutzt (Lucide-Icons haben stroke="currentColor"
     + eine Tailwind-Farbklasse wie text-accent/text-destructive). So bekommt jedes
     Icon automatisch seine ORIGINAL-Farbe zurueck — Akzent, Warn-Rot, Neutral-Dunkel,
     Footer-Hell — pixelgenau wie im Original.
   - WICHTIG: NICHT var(--accent) verwenden. Viele Portale speichern --accent als rohe
     HSL-Komponenten ("190 52% 35%", shadcn/Tailwind-Konvention fuer hsl(var(--accent)))
     -> stroke:var(--accent) ergibt einen UNGUELTIGEN Farbwert -> kein Strich -> Icon
     unsichtbar (verifiziert: 37 von 80 Portalen betroffen). currentColor umgeht das
     formatunabhaengig und ist zugleich farbtreuer (mehrfarbige Icons bleiben mehrfarbig).
   Betrifft nur fill:none-Outline-Icons; gefuellte Grafiken bleiben unberuehrt. */
.sw-canvas-body svg[fill="none"] {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 3) HERO / core-cover-Overlay wiederherstellen.
   Die Isolation entfernt das wp-block-library-CSS, das dem Cover-Overlay
   position:absolute/inset:0 gibt. Ohne das kollabiert der grüne Marken-Overlay auf
   0x0 -> das Hintergrundbild bleibt ungedaempft (zu hell/hart). Hier die noetige
   Cover-Geometrie zuruecksetzen: Bild fuellend darunter, Overlay deckend darueber,
   Inhalt (Text/Buttons) obenauf. */
.sw-canvas-body .wp-block-cover { position: relative; }
.sw-canvas-body .wp-block-cover img.wp-block-cover__image-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.sw-canvas-body .wp-block-cover__background {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.sw-canvas-body .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
}