/* =========================================================
   widget-bridge.css — WordPress-Kontext-Angleichungen (zeus-pack-ewh)

   Vier Aufgaben, bewusst in dieser Reihenfolge:

   1. GESCOPTE RESETS — der Prototyp brachte seine Basis als ungelayertes
      Preflight mit Spezifität 0 mit (`*{box-sizing}`, `body{font/color}`).
      Im Pack werden diese Grundwerte auf `.zeus-section` gehoben und
      AUSSCHLIESSLICH als `:where(.zeus-section) :where(…)` geschrieben —
      Spezifität 0,0,1. Ein Reset mit `.zeus-section :is(…)` (0,1,1) würde
      jede Komponentenklasse (0,1,0) schlagen und alle Klassen-Margins
      nullen (girocard-Lesson 2026-08-05, v1.0.2-Regression). Ebenso wenig
      dürfen die Grundwerte in ein natives `@layer`: gelayertes CSS verliert
      in der Cascade IMMER gegen ungelayertes Vendor-CSS.

   2. CONTAINER-BREITEN (Projekt-Sonderweg 2, INDEX.md) — der Prototyp nutzt
      `max-w-site` (1400) / `max-w-wide` (1650) plus drei lokale Breiten;
      `zeus_container_width` kennt nur vier Stufen. Jedes Widget fährt
      deshalb `container_width: full` + eine `ewh-w-*`-Klasse.

   3. BUTTON-PANZER (G12) — hello-elementor & Co. laden eine reset.css NACH
      der Pack-CSS und treffen `button` mit (0,1,0). Eine Komponentenklasse
      `.cta-primary` wiegt genauso viel und verliert über die Reihenfolge.
      `button.cta-primary` (0,1,1) gewinnt. Die vier CTA-Klassen, `.pill`,
      `.share-btn` und `.ewh-play` treten als `<button>` auf; `.cta-primary`,
      `.cta-secondary`, `.cta-circle`, `.cta-cine` und `.share-btn`
      zusätzlich als `<a>` — beide Varianten stehen deshalb nebeneinander.

   4. BILD-COVER-PANZER (G12) — Elementors frontend.min.css setzt ungelayert
      `.elementor img{height:auto}` (0,1,1, lädt NACH der Pack-CSS) und
      klobbert jede Cover-Regel mit füllender Höhe. Betroffen sind die drei
      CSS-getriebenen Cover-Fälle des Packs; alle übrigen Bilder tragen
      `w-full h-full object-cover` direkt als Utility am `<img>` und brauchen
      keinen Panzer.

   KEIN `!important` in dieser Datei: die EWH-Instanz ist Greenfield, ein
   Theme mit ID-Selektor-Klobbern (girocard-Fall) ist hier nicht belegt.
   Sollte der Deploy es zeigen, gehört `!important` gezielt an die
   betroffene Regel — nicht vorsorglich an alle.
   ========================================================= */


/* =========================================================
   1 — GESCOPTE RESETS (Spezifität 0,0,1 · ungelayert)
   ========================================================= */

/* Ersetzt das globale `*{box-sizing:border-box}` des Prototyps. Ohne diese
   Regel rechnen alle `px-*`/`p-*`-Utilities ADDITIV zur Breite — Spalten und
   Karten würden systematisch zu breit. */
:where(.zeus-section),
:where(.zeus-section) :where(*),
:where(.zeus-section) :where(*)::before,
:where(.zeus-section) :where(*)::after {
	box-sizing: border-box;
}

/* Ersetzt die Grundwerte aus `body{}` des Prototyps (Schrift, Textfarbe,
   Kantenglättung). Bewusst als reine Fallback-Ebene: JEDE `.h1-display`,
   `.lead`, `.h-cine`-Regel aus ewh-theme.css gewinnt dagegen. Der
   Seitenhintergrund (`background: var(--page)`) wandert NICHT mit — er wird
   pro Section über die `surface`-SELECT (`bg-page|card|surface|section`)
   gesetzt, ein Bridge-Wert würde jede abweichende Fläche überdecken. */
:where(.zeus-section) {
	font-family: 'Figtree', system-ui, sans-serif;
	color: var(--ink, #1d1d1b);
	-webkit-font-smoothing: antialiased;
}


/* =========================================================
   2 — CONTAINER-BREITEN (Sonderweg 2)
   ---------------------------------------------------------
   Die Breiten sind die BRUTTO-Werte des Prototyps: dort sitzt `px-6 md:px-10`
   INNERHALB der `max-w-*`-Box (`<div class="max-w-site mx-auto px-6 md:px-10">`),
   und `container_pad` (24/40/40) sitzt im Zeus-Modell ebenfalls innen am
   `.zeus-section-inner`. Beide Modelle stimmen damit überein — die
   girocard-Korrektur „Inner-max-width = Contentbreite + 2×container_pad"
   gilt hier NICHT (dort lag das Padding außen an der Section).
   ========================================================= */
.zeus-section.ewh-w-site > .zeus-section-inner { max-width: 1400px; margin-inline: auto; }
.zeus-section.ewh-w-wide > .zeus-section-inner { max-width: 1650px; margin-inline: auto; }
.zeus-section.ewh-w-1240 > .zeus-section-inner { max-width: 1240px; margin-inline: auto; }
.zeus-section.ewh-w-1160 > .zeus-section-inner { max-width: 1160px; margin-inline: auto; }
.zeus-section.ewh-w-820 > .zeus-section-inner  { max-width:  820px; margin-inline: auto; }


/* =========================================================
   3 — BUTTON-PANZER (G12)
   Sollwerte 1:1 aus assets/css/ewh-theme.css.
   ========================================================= */

/* ---- .cta-primary (Pill mit Pfeil-Kreis) ---- */
a.cta-primary,
button.cta-primary {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 9px 9px 9px 26px;
	background: var(--vital, #c61533);
	color: #fff;
	border-radius: 9999px;
	font-family: 'Figtree', sans-serif;
	font-weight: 600;
	font-size: 16.5px;
	letter-spacing: -.005em;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color .3s var(--ease-std), transform .3s var(--ease-std), box-shadow .3s var(--ease-std);
}
a.cta-primary.is-light,
button.cta-primary.is-light { background: #fff; color: var(--ink, #1d1d1b); }

/* ---- .cta-secondary (Textlink mit Unterkante) ---- */
a.cta-secondary,
button.cta-secondary {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0 6px;
	background: transparent;
	color: #000;
	font-family: 'Figtree', sans-serif;
	font-weight: 600;
	font-size: 16.5px;
	letter-spacing: -.005em;
	text-decoration: none;
	border: 0;
	border-bottom: 2px solid var(--vital, #c61533);
	border-radius: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: gap .3s var(--ease-std), color .3s var(--ease-std);
}
a.cta-secondary.is-light,
button.cta-secondary.is-light { color: #fff; }

/* ---- .cta-circle (nackter Pfeil-Kreis auf Link-Karten) ---- */
a.cta-circle,
button.cta-circle {
	width: 36px;
	height: 36px;
	border-radius: 9999px;
	background: var(--vital, #c61533);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	padding: 0;
	border: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: transform .3s var(--ease-std);
}

/* ---- .cta-cine (heller Pill-CTA auf den Kino-Flächen) ---- */
a.cta-cine,
button.cta-cine {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 9px 9px 9px 26px;
	border-radius: 9999px;
	font: 600 16px/1 'Figtree', sans-serif;
	text-decoration: none;
	background: var(--offwhite, #f5f2ee);
	color: var(--ink, #1d1d1b);
	border: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: transform .5s var(--ease-cine), background-color .5s;
}
a.cta-cine.ghost,
button.cta-cine.ghost {
	background: transparent;
	color: var(--offwhite, #f5f2ee);
	border: 1px solid rgba(245, 242, 238, .32);
}

/* ---- .share-btn (Artikel-Kopf: drei <a> + der Kopieren-<button>) ---- */
a.share-btn,
button.share-btn {
	width: 42px;
	height: 42px;
	border-radius: 9999px;
	border: 1px solid var(--stone-200, #e5e5e5);
	background: var(--card, #ffffff);
	color: var(--ink, #1d1d1b);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	text-decoration: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color .25s var(--ease-std), color .25s var(--ease-std), transform .25s var(--ease-std);
}
/* Kurze Quittung nach dem Kopieren (ewh-anim.js setzt `is-done`). */
button.share-btn.is-done { border-color: var(--vital, #c61533); color: var(--vital, #c61533); }

/* ---- .pill (Themenfilter, ausschließlich <button>) ---- */
button.pill {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 0 18px;
	border-radius: 9999px;
	border: 1px solid var(--stone-200, #e5e5e5);
	background: var(--page, #fafafa);
	color: var(--ink, #1d1d1b);
	font: 500 15px/1 'Figtree', sans-serif;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: all .25s var(--ease-std);
}
button.pill.is-active {
	background: var(--vital, #c61533);
	border-color: var(--vital, #c61533);
	color: #fff;
}

/* ---- .ewh-play (Play-Fläche im Video-Hero) ----
   Hat bewusst KEINE eigene Optik in ewh-theme.css — die Erscheinung kommt
   vom inneren `<span>` (Tailwind). Der Panzer stellt nur sicher, dass der
   Host-Button-Reset dem Element weder Fläche noch Rahmen noch Padding
   unterschiebt; die absolute Positionierung bleibt bei den Utilities. */
a.ewh-play,
button.ewh-play {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

/* ---- Mobile-Menü-Toggle (nackter <button>, Attribut-Panzer) ----
   Der Toggle trägt keine Komponentenklasse, nur Utilities. Genau an so einem
   fehlenden Panzer hing im Formeta-Pilot ein kaputtes Mobile-Menü. Die ID
   `mobile-menu-toggle` bleibt unangetastet (Attribut-Parität, ewh_header.spec.md);
   `data-ewh-menu-toggle` kommt als Panzer-Anker dazu. */
button[data-ewh-menu-toggle] {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	color: inherit;
	line-height: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}


/* =========================================================
   4 — BILD-COVER-PANZER (G12)
   Höhenwerte identisch zur Quellregel in ewh-theme.css, außerhalb jedes
   @media-Blocks — sonst greift der Panzer genau dort nicht, wo er zählt.
   ========================================================= */
.zeus-section .card-image-wrap img { height: 100%; }
.zeus-section .cine-img { height: 100%; }
.zeus-section .hero-slide .hs-img { height: 100%; }


/* =========================================================
   5 — CONTAINER-GAP-PANZER (Section-Stacking)
   Elementor-Container sind `display:flex; flex-direction:column` und ziehen
   ihren Widget-Abstand aus `--widgets-spacing-row/-column` (frontend.min.css:
   `--row-gap: var(--widgets-spacing-row, 20px)`). Jedes Zeus-Widget ist hier
   eine vollflächige `<section>` mit eigener Fläche (bg-page/-card/-surface/
   -section) — der 20px-Gap wird deshalb als heller Streifen sichtbar,
   überall dort wo die Fläche wechselt (24 Stellen, 2026-08-21). Der Prototyp
   kennt keinen Widget-Abstand: die Sections steuern ihr Spacing selbst über
   Trait_Section_Spacing (padding, nicht margin).

   PANZER nötig (0,2,0): Das Elementor-Kit schreibt die Defaults in post-5.css
   als `.elementor-element{--widgets-spacing:20px 20px;…}` — Spezifität (0,1,0),
   exakt wie ein blankes `.e-con`, lädt aber NACH der Pack-CSS und gewinnt
   damit über die Reihenfolge. `.elementor-element.e-con` (0,2,0) schlägt die
   Kit-Regel; ein pro Container in Elementor GESETZTER Gap landet in
   post-<ID>.css mit (0,3,0) und behält weiterhin Vorrang. Anders als in
   zeus-pack-formeta-dental reicht ein blankes `.e-con` hier nicht.
   ========================================================= */
.elementor-element.e-con {
  --widgets-spacing: 0px 0px;
  --widgets-spacing-row: 0px;
  --widgets-spacing-column: 0px;
}


/* =========================================================
   6 — DISPLAY-UTILITY-PANZER

   Die CTA-Komponentenklassen setzen ihr `display` selbst
   (`.elementor-widget .cta-primary{display:inline-flex}` in ewh-theme.css,
   Spezifität 0,2,0). Tailwinds Display-Utilities stehen mit dem
   `important`-Präfix auf exakt derselben Spezifität — und ewh-theme.css lädt
   NACH pack-tailwind.css. Bei Gleichstand gewinnt die spätere Datei, also die
   Komponente: `hidden` an einem `.cta-primary` blieb wirkungslos (belegt am
   21.08.2026 am Kopf-CTA, der mobil trotz `hidden` sichtbar war).

   Diese Datei lädt als letzte der drei. Ein knapper Nachzug der
   Display-Utilities stellt die erwartete Rangfolge wieder her: Wer an ein
   Element eine Display-Utility schreibt, meint sie auch. Bewusst nur
   `display` — Farben, Rahmen und Abstände bleiben Sache der Komponente.
   ========================================================= */
.elementor-widget .hidden { display: none; }
.elementor-widget .block { display: block; }
.elementor-widget .inline-flex { display: inline-flex; }
.elementor-widget .flex { display: flex; }

@media (min-width: 640px) {
	.elementor-widget .sm\:hidden { display: none; }
	.elementor-widget .sm\:block { display: block; }
	.elementor-widget .sm\:inline-flex { display: inline-flex; }
	.elementor-widget .sm\:flex { display: flex; }
}

@media (min-width: 768px) {
	.elementor-widget .md\:hidden { display: none; }
	.elementor-widget .md\:block { display: block; }
	.elementor-widget .md\:inline-flex { display: inline-flex; }
	.elementor-widget .md\:flex { display: flex; }
}

@media (min-width: 1024px) {
	.elementor-widget .lg\:hidden { display: none; }
	.elementor-widget .lg\:block { display: block; }
	.elementor-widget .lg\:inline-flex { display: inline-flex; }
	.elementor-widget .lg\:flex { display: flex; }
}


/* =========================================================
   7 — STICKY HEADER + MOBILE CTA-LEISTE

   Sticky lag bisher auf der <section> INNERHALB des Widgets. Das kann nicht
   wirken: Ein sticky Element klebt nur im Kasten seines Elternteils, und
   Elementors Location-Wrapper `<header class="elementor-location-header">`
   ist exakt so hoch wie die Kopfleiste selbst (101 px gemessen) — es gibt
   keinen Scrollweg. Die Eigenschaft gehört deshalb an den Wrapper.
   ========================================================= */
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Burger: 24px-Icon in einer Tapfläche unter 20px war zu klein für den Daumen.
   Icon 28px + Polsterung ergibt die empfohlenen 44px. */
.elementor-widget button[data-ewh-menu-toggle] {
	padding: 8px;
	margin: -8px;
	line-height: 0;
}
.elementor-widget button[data-ewh-menu-toggle] svg {
	width: 28px;
	height: 28px;
}

/* Mobile CTA-Leiste: seitenweit am unteren Rand, volle Breite, ohne Rundung.
   `env(safe-area-inset-bottom)` hält den Balken auf iPhones über der
   Home-Indicator-Leiste. Ab 640px verschwindet sie — dort trägt die
   Kopfleiste den CTA wieder. */
.ewh-mobile-cta {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 90;
	display: flex;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	background: var(--vital, #c61533);
}
.ewh-mobile-cta > a {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 56px;
	padding: 0 20px;
	border-radius: 0;
	background: var(--vital, #c61533);
	color: #fff;
	font: 600 16.5px/1 'Figtree', sans-serif;
	letter-spacing: -.005em;
	text-decoration: none;
}
.ewh-mobile-cta .cta-arrow {
	width: 32px;
	height: 32px;
	border-radius: 9999px;
	background: #fff;
	color: var(--vital, #c61533);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

/* Die fixierte Leiste liegt über dem Seitenende — Freiraum schaffen, sonst
   verdeckt sie Footer-Inhalte. */
body.ewh-has-mobile-cta {
	padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 640px) {
	.ewh-mobile-cta { display: none; }
	body.ewh-has-mobile-cta { padding-bottom: 0; }
}
