/* =====================================================================
   GrowCologne – Layout
   Rahmen 2000 (.gc-frame), Inhalt 1440 inkl. Rand 22/32 (.gc-wrap), Abschnittsrhythmus (.gc-sec),
   Abschnittsköpfe, Helfer, Elementor-Brücke für Container.
   Quelle: content/pages/dummies/v4-klar-mit-stickern.html. Breakpoints wie im Dummy:
   481 · 721 · 1024 · 1440 · 2001 (Kit: Mobil 720, Tablet 1023, Laptop 1439, Breitbild 2000).

   Schreibweise: Jede Regel beginnt mit `html:root body` (Spezifität +0,1,2). Grund: Das
   Elementor-Kit stylt Links, Buttons und Überschriften mit `.elementor-kit-N a`, `… a:hover`,
   `… button:hover`, `… h2` (bis 0,2,1), Healfio/Bootstrap mit `a:hover`, `h2`, `blockquote:before`.
   Mit dem Präfix liegt jede Ein-Klassen-Regel (0,2,2) sicher darüber – unabhängig von der
   Ladereihenfolge – und bleibt unter Elementors Element-Regeln
   (`.elementor-N .elementor-element.elementor-element-x …`, ab 0,3,0): Was im Editor am Element
   eingestellt wird, gewinnt weiterhin. Kein `!important` nötig. Eigene Ergänzungen bitte mit
   demselben Präfix schreiben.

   Laptop-Höhen (`(min-width:1024px) and (max-height:800px/720px)`): die H1-Größe steht als
   Variable in tokens.css; die Regeln für Hero und Mega-Menü stehen in components.css direkt
   hinter ihrem Baustein (sie müssen nach dessen Grundregeln kommen, sonst verlieren sie).
   ===================================================================== */

/* ---------- Geltungsbereich: alles mit einer gc-Klasse, nichts Globales ---------- */
html:root body :where([class*="gc-"],[class*="gc-"] *),
html:root body :where([class*="gc-"],[class*="gc-"] *)::before,
html:root body :where([class*="gc-"],[class*="gc-"] *)::after{box-sizing:border-box}

/* ---------- Rahmen, Inhalt, Helfer, Abschnitte ---------- */
html:root body .gc-wrap{width:100%;max-width:var(--gc-wrap);margin-inline:auto;padding-inline:var(--gc-gut)}
html:root body .gc-frame{position:relative;max-width:var(--gc-frame);margin-inline:auto}
/* Nur für Screenreader. `!important` wie im Dummy: die Hilfsklasse muss jede position-Regel eines Bausteins schlagen (kein Healfio-Bezug). */
html:root body .gc-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
html:root body .gc-nb{white-space:nowrap}
html:root body .gc-sec{padding-block:var(--gc-sec)}
html:root body .gc-sec-head{display:grid;gap:var(--gc-s2);margin-bottom:clamp(32px,1.4rem + 2.4vw,72px)}
html:root body .gc-sec-head-copy{display:grid;gap:var(--gc-s2)}
html:root body .gc-head-cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
@media (min-width:1024px){
	html:root body .gc-sec-head.gc-split{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gc-cgap);align-items:end}
	html:root body .gc-sec-head.gc-split>:first-child{grid-column:1/8}
	html:root body .gc-sec-head.gc-split>:last-child{grid-column:8/-1;justify-self:stretch}
	html:root body .gc-head-cta{justify-content:flex-end}
	html:root body .gc-beratung .gc-sec-head.gc-split{grid-template-columns:minmax(0,1fr);row-gap:var(--gc-s3)}
	html:root body .gc-beratung .gc-sec-head.gc-split>*{grid-column:auto}
	html:root body .gc-beratung .gc-head-cta{justify-content:flex-start}
}
@media (min-width:1440px){
	html:root body .gc-beratung .gc-sec-head.gc-split{grid-template-columns:repeat(12,minmax(0,1fr))}
	html:root body .gc-beratung .gc-sec-head.gc-split>:first-child{grid-column:1/9}
	html:root body .gc-beratung .gc-sec-head.gc-split>:last-child{grid-column:9/-1;flex-direction:column;align-items:flex-end;gap:10px}
}

/* ---------- Ergänzungen zum Dummy (dort globale html/body-Regeln, hier an gc-Klassen gebunden) ---------- */
/* Sprungziele landen unter dem klebenden Header (Dummy: html{scroll-padding-top}) */
html:root body .gc-sec,
html:root body :is(.gc-cc-strip,.gc-cc),
html:root body .gc-hero{scroll-margin-top:calc(var(--gc-hdr) + 16px)}
/* Gedrehte Sticker, Bänder und angeschnittene Fotos dürfen nie waagerecht scrollen (Dummy: html/body{overflow-x:clip}).
   `clip` statt `hidden`: senkrecht bleibt alles sichtbar, position:sticky funktioniert weiter. */
html:root body .gc-sec,
html:root body .gc-hero,
html:root body .gc-tape-wrap,
html:root body :is(.gc-cc-strip,.gc-cc),
html:root body :is(.gc-ftr,.gc-footer){overflow-x:clip}
/* Platz für die feste Aktionsleiste (< 1024px). `gc-has-actionbar` kann das MU-Plugin per body_class setzen;
   `:has()` deckt den Fall ohne Klasse ab (zwei Regeln, damit ein Browser ohne :has() die erste behält). */
@media (max-width:1023px){
	html:root body.gc-has-actionbar{padding-bottom:calc(var(--gc-abh) + env(safe-area-inset-bottom))}
	html:root body:has(.gc-actionbar){padding-bottom:calc(var(--gc-abh) + env(safe-area-inset-bottom))}
}
/* Das hidden-Attribut gewinnt gegen display-Regeln der Bausteine (z. B. .gc-ml-chips, .gc-hours-hol) */
html:root body [class*="gc-"][hidden],
html:root body [data-hint-only][hidden]{display:none}

/* =====================================================================
   Elementor-Brücke: Container
   Eine CSS-Klasse am Container landet auf dem `.e-con`-Element. Boxed-Container haben zusätzlich
   ein inneres `.e-con-inner` (dort begrenzt Elementor die Inhaltsbreite).
   - `.gc-wrap` am Container (volle Breite oder boxed): Inhaltsbox 1440 inkl. Rand, zentriert.
   - `.gc-sec` / `.gc-frame` / `.gc-cc-strip` am Boxed-Container: Fläche läuft durch, der Inhalt
     bekommt Rand 22/32 und endet bei 1440 inkl. Rand (wie `.gc-sec > .gc-wrap` im Dummy).
   - `.gc-sec` setzt den Abschnittsabstand selbst → im Editor oben/unten 0 lassen.
   - `.gc-dark` färbt Text weiß und gibt dem Container die Grundfläche Regalgrün (Widget-Farben siehe
     components.css, Brücke).
   In echtem Elementor auf der Musterseite geprüft (P4); Header/Footer-Vorlagen folgen in P5.
   ===================================================================== */
html:root body :is(.gc-sec,.gc-frame,.gc-cc-strip,.gc-cc).e-con-boxed{padding-inline:var(--gc-gut)}
/* `.gc-dark` am Container: Regalgrün als Grundfläche. Im Dummy bringt jeder dunkle Abschnitt seine eigene
   Fläche mit; ein Elementor-Container hat keine. Bewusst ohne das Präfix `html:root body` und mit :where():
   Spezifität (0,1,0), damit eine im Editor gesetzte Hintergrundfarbe oder ein Bild gewinnt. */
:where(.e-con).gc-dark{background-color:var(--gc-nacht)}
html:root body :is(.gc-sec,.gc-frame,.gc-cc-strip,.gc-cc).e-con-boxed>.e-con-inner{max-width:calc(var(--gc-wrap) - 2*var(--gc-gut))}

/* Elementors „Ausblenden auf …“ muss gegen display-Regeln der gc-Bausteine gewinnen (deren Präfix ist stärker
   als `.elementor .elementor-hidden-*`). Breiten = Kit-Breakpoints 720/1023/1439/2000. Im Editor nicht, dort
   zeigt Elementor ausgeblendete Elemente absichtlich an. Doppeltes Attribut = nur Spezifität. */
@media (max-width:720px){
	html:root body:not(.elementor-editor-active) [class*="gc-"][class*="gc-"].elementor-hidden-mobile{display:none}
}
@media (min-width:721px) and (max-width:1023px){
	html:root body:not(.elementor-editor-active) [class*="gc-"][class*="gc-"].elementor-hidden-tablet{display:none}
}
@media (min-width:1024px) and (max-width:1439px){
	html:root body:not(.elementor-editor-active) [class*="gc-"][class*="gc-"].elementor-hidden-laptop{display:none}
}
@media (min-width:1440px) and (max-width:1999px){
	html:root body:not(.elementor-editor-active) [class*="gc-"][class*="gc-"].elementor-hidden-desktop{display:none}
}
@media (min-width:2000px){
	html:root body:not(.elementor-editor-active) [class*="gc-"][class*="gc-"].elementor-hidden-widescreen{display:none}
}