/* ==========================================================================
   Theme "Aira" (boxed, bildgeführt)
   Wird von ALLEN Seiten nach css/style.css geladen und ist komplett auf
   body.theme-aira gescoped. Die Regeln zu .hero-aira greifen nur auf der
   Startseite, weil nur sie diesen Hero besitzt.

   Leitidee "boxed": Die Seite liegt auf einem ruhigen Greige-Grund, alle
   Inhalte sitzen in abgesetzten, weichen Boxen mit großzügigen Radien.
   ========================================================================== */

body.theme-aira {
  --color-bg: #EBE8E2;           /* Seitengrund HINTER den Boxen */
  --color-surface: #FFFFFF;      /* Box-Fläche */
  --color-bg-alt: #F6F4F0;       /* zweite Box-Fläche */
  --color-dark: #1E1F1B;
  --color-text: #24251F;
  --color-text-muted: #70706A;
  --color-border: #E6E3DB;
  --color-accent: #F7C600;
  --color-accent-light: #FFF6D8;
  --color-accent-dark: #7A5C00;

  --radius: 30px;
  --radius-sm: 18px;
  --radius-pill: 999px;
  --shadow-soft: 0 34px 70px -44px rgba(28, 28, 22, 0.42);
  --box-gap: 16px;
  /* Waagerechte Einrueckung des Inhalts INNERHALB einer Box. Gilt auch fuer
     freistehende Container (Brotkrumen, Unterreiter), damit alles buendig
     steht. An einer Stelle aendern reicht. */
  --box-inset: 46px;

  background: var(--color-bg);
  padding: 0 var(--box-gap) var(--box-gap);
}
@media (max-width: 720px) {
  body.theme-aira { --box-inset: 24px; }
}
@media (max-width: 640px) {
  body.theme-aira { --box-gap: 10px; --radius: 24px; }
}

/* ---------- Typografie: luftiger, leichter ---------- */
body.theme-aira h1,
body.theme-aira h2 { font-weight: 500; letter-spacing: -0.035em; }
body.theme-aira h2 { font-size: clamp(1.9rem, 3.3vw, 2.7rem); line-height: 1.08; }
body.theme-aira .lede { font-size: 1.1rem; line-height: 1.65; }
body.theme-aira .eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--color-text-muted);
}
body.theme-aira .section-head { margin-bottom: 46px; }

/* ---------- Kopfbereich: schlanke Leiste + schwebende Navigation ---------- */
body.theme-aira .top-bar {
  background: transparent;
  color: var(--color-text-muted);
  padding-top: 4px;
}
body.theme-aira .top-bar a { color: var(--color-text); }
body.theme-aira .top-bar .container { padding-top: 14px; padding-bottom: 12px; }

body.theme-aira header.site-header {
  top: var(--box-gap);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: 0 18px 40px -30px rgba(28, 28, 22, 0.5);
  margin-bottom: var(--box-gap);
}
@media (max-width: 640px) {
  body.theme-aira header.site-header { border-radius: var(--radius-sm); }
}
body.theme-aira .header-inner { padding-top: 12px; padding-bottom: 12px; }
body.theme-aira .mega-menu { border-radius: var(--radius); box-shadow: var(--shadow-soft); }
body.theme-aira .mega-menu-side { border-radius: var(--radius-sm); }

/* ==========================================================================
   Boxed-Layout: jeder Abschnitt ist eine eigene, abgerundete Box
   ========================================================================== */
body.theme-aira main > section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: var(--box-gap);
  padding: 84px 0;
  overflow: hidden;
}
body.theme-aira main > section.section-alt {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
@media (max-width: 720px) {
  body.theme-aira main > section { padding: 54px 0; }
}

/* Innenabstand der Boxen etwas enger führen als die volle Seitenbreite */
body.theme-aira main > section > .container {
  padding-left: var(--box-inset);
  padding-right: var(--box-inset);
}

/* Brotkrumen und Unterreiter liegen auf Unterseiten NICHT in einer Box,
   sondern frei auf dem Seitengrund. Ohne diese Regel starten sie 18px weiter
   links als der Inhalt der Boxen darunter -- ein sichtbarer Versatz. */
body.theme-aira main > .container {
  padding-left: var(--box-inset);
  padding-right: var(--box-inset);
}
body.theme-aira main > .breadcrumb { margin-bottom: 14px; }

/* ==========================================================================
   HERO – Slogan links, große Altbauvilla rechts (mit Zoomfahrt)
   ========================================================================== */
body.theme-aira main > section.hero-aira {
  padding: 0;                       /* Bild soll die Box randlos füllen */
  background: var(--color-surface);
}
.hero-aira-inner {
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  align-items: stretch;
  min-height: 82vh;
}

/* --- linke Spalte: Slogan --- */
.hero-aira-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 76px 56px 76px 62px;
}
/* --------------------------------------------------------------------------
   Hintergrund der linken Hero-Hälfte -- zwei Fassungen, per Klasse am
   <section class="hero-aira"> waehlbar:

   hero-fond-licht     "Lichtspiel": zwei weiche, warme Lichtflecken, die sehr
                       langsam ueber die Flaeche wandern (40 s je Runde). Wie
                       Nachmittagslicht auf einer Wand.
   hero-fond-strahlen  "Sonnenlicht durchs Fenster": drei schraege, sehr helle
                       Lichtbahnen, die kaum merklich driften -- das Motiv des
                       Betriebs, ohne dass man ein Fenster zeichnen muss.

   hero-fond-bild      "Bild weitergefuehrt": das Villenfoto laeuft unscharf
                       hinter dem Text weiter (siehe Fassung 4 unten). AKTIV.
   hero-fond-nacht     Vorschlag A (17.09.): dasselbe unter Anthrazit, Creme-
                       text, goldener Haarlinien-Rahmen.
   hero-fond-glas      Vorschlag B (17.09.): Foto fast scharf, Text auf einer
                       schwebenden Milchglasplatte (backdrop-filter).

   Alles liegt in einem ::before hinter dem Text (z-index 0/1), alles ist
   so leise, dass es die Lesbarkeit nicht beruehrt, und alles steht still,
   wenn "Bewegung reduzieren" gesetzt ist. Ohne eine der Klassen: kein Fond.
   -------------------------------------------------------------------------- */
.hero-aira-copy { position: relative; overflow: hidden; }
.hero-aira-copy > * { position: relative; z-index: 1; }
.hero-aira-copy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Fassung 1: Lichtspiel */
.hero-fond-licht .hero-aira-copy::before {
  background:
    radial-gradient(ellipse 60% 55% at 20% 25%, rgba(247, 198, 0, 0.16), transparent 70%),
    radial-gradient(ellipse 55% 60% at 85% 80%, rgba(120, 100, 40, 0.10), transparent 70%),
    linear-gradient(160deg, #ffffff 0%, #f7f5ef 60%, #f1eee6 100%);
  background-size: 160% 160%, 160% 160%, 100% 100%;
  animation: heroLicht 40s ease-in-out infinite alternate;
}
@keyframes heroLicht {
  0%   { background-position: 0% 0%, 100% 100%, 0 0; }
  100% { background-position: 100% 60%, 0% 20%, 0 0; }
}

/* Fassung 2: Sonnenlicht durchs Fenster */
.hero-fond-strahlen .hero-aira-copy::before {
  background:
    linear-gradient(115deg,
      transparent 0%, transparent 18%,
      rgba(247, 198, 0, 0.11) 22%, rgba(247, 198, 0, 0.11) 30%, transparent 34%,
      transparent 44%,
      rgba(247, 198, 0, 0.08) 48%, rgba(247, 198, 0, 0.08) 55%, transparent 59%,
      transparent 70%,
      rgba(247, 198, 0, 0.06) 74%, rgba(247, 198, 0, 0.06) 78%, transparent 82%),
    linear-gradient(180deg, #ffffff 0%, #f8f6f1 100%);
  background-size: 180% 100%, 100% 100%;
  animation: heroStrahlen 36s ease-in-out infinite alternate;
}
@keyframes heroStrahlen {
  0%   { background-position: 0% 0, 0 0; }
  100% { background-position: 100% 0, 0 0; }
}

/* Fassung 3: "Anthrazit & Gold" -- die edle.
   Dunkler, tiefer Grund (Anthrazit mit leichtem Verlauf), Text in Creme, ein
   feiner goldener Haarlinien-Rahmen mit grosszuegigem Abstand wie eine
   Gravur, und darueber ein sehr langsamer Lichtschimmer (eine helle Bahn,
   die alle 18 s einmal diagonal durchlaeuft -- wie Licht auf gebuerstetem
   Metall). Der gelbe Marker hinter "Frankfurts" bleibt: Gelb auf Anthrazit
   ist der staerkste Kontrast, den die Seite hat. */
.hero-fond-anthrazit .hero-aira-copy::before {
  background:
    radial-gradient(ellipse 70% 60% at 30% 20%, rgba(247, 198, 0, 0.07), transparent 70%),
    linear-gradient(155deg, #23241f 0%, #1b1c1a 55%, #161714 100%);
}
/* Goldrahmen + Schimmer in einem zweiten Pseudo-Element */
.hero-fond-anthrazit .hero-aira-copy::after {
  content: "";
  position: absolute;
  inset: 26px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(247, 198, 0, 0.28);
  border-radius: calc(var(--radius) - 12px);
  background: linear-gradient(115deg,
    transparent 0%, transparent 40%,
    rgba(255, 255, 255, 0.045) 48%, rgba(255, 255, 255, 0.075) 50%, rgba(255, 255, 255, 0.045) 52%,
    transparent 60%, transparent 100%);
  background-size: 260% 100%;
  animation: heroSchimmer 18s ease-in-out infinite;
}
@keyframes heroSchimmer {
  0%   { background-position: 110% 0; }
  55%  { background-position: -10% 0; }
  100% { background-position: -10% 0; }
}
/* Text und Bedienelemente auf dunklem Grund */
.hero-fond-anthrazit .hero-aira-copy { color: #f4f2ec; }
.hero-fond-anthrazit .hero-aira h1,
.hero-fond-anthrazit .hero-aira-copy h1 { color: #faf8f2; }
.hero-fond-anthrazit .hero-aira-sub { color: rgba(244, 242, 236, 0.86); }
.hero-fond-anthrazit .hero-aira-tag {
  color: var(--color-accent);
  background: rgba(247, 198, 0, 0.10);
  border: 1px solid rgba(247, 198, 0, 0.28);
}
.hero-fond-anthrazit .hero-aira-trust li { color: rgba(244, 242, 236, 0.72); }
.hero-fond-anthrazit .hero-aira-trust li::before {
  background: rgba(247, 198, 0, 0.14);
  border-color: var(--color-accent);
}
.hero-fond-anthrazit .btn-outline { border-color: rgba(244, 242, 236, 0.55); color: #f4f2ec; }
.hero-fond-anthrazit .btn-outline:hover { background: #f4f2ec; color: var(--color-dark); }
/* Innenabstand etwas groesser, damit der Goldrahmen Luft zum Text hat */
.hero-fond-anthrazit .hero-aira-copy { padding: 88px 72px 88px 78px; }
@media (max-width: 900px) {
  .hero-fond-anthrazit .hero-aira-copy { padding: 64px 40px 56px; }
  .hero-fond-anthrazit .hero-aira-copy::after { inset: 16px; }
}

/* Fassung 4: "Bild weitergefuehrt" -- AKTIV seit 17.09.2026.
   Das Villenfoto der rechten Haelfte laeuft hinter dem Text weiter, aber
   stark weichgezeichnet (blur 22px) und unter einem weissen Schleier, der
   links (unter dem Text) dichter ist als rechts (am Uebergang zum scharfen
   Bild). Der Fond macht dieselbe Kamerafahrt wie das Bild rechts (airaZoom),
   damit beide Haelften wie eine Aufnahme wirken. Das Bild ist 200% breit
   und linksbuendig gesetzt: Die linke Haelfte des Motivs liegt links, die
   rechte zeigt das <img> -- so setzt sich das Motiv ueber die Spalte fort.
   Genutzt wird die 800px-Fassung: fuer 22px Unschaerfe reicht das, und sie
   ist 150 KB statt 700. Rand von -40px, damit der Blur keinen hellen Saum
   an den Kanten zeigt. */
.hero-fond-bild .hero-aira-copy::before {
  inset: -40px;
  background:
    url("../img/extern/pexels-photo-35758725-7902b682-w800.jpg") left 52% / 200% auto no-repeat,
    #f4f2ec;
  filter: blur(24px) saturate(1.02);
  animation: airaZoom 18s ease-in-out infinite alternate;
  transform-origin: 56% 46%;
}
.hero-fond-bild .hero-aira-copy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Schleier bewusst duenn (17.09.: "noch etwas transparenter, edler"):
     unter dem Text 48 %, am Uebergang zum scharfen Bild nur noch 16 %.
     Dazu ein Hauch Warmweiss von oben, damit das Motiv nicht grau wirkt. */
  background:
    linear-gradient(180deg, rgba(255, 252, 244, 0.22) 0%, transparent 45%),
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.48) 0%,
      rgba(255, 255, 255, 0.40) 60%,
      rgba(255, 255, 255, 0.16) 100%);
}

/* Fassung 5 (Vorschlag A, 17.09.2026): "Abendlicht" -- das Villenfoto
   laeuft wie in Fassung 4 unscharf weiter, aber unter einem tiefen
   Anthrazit-Schleier; Text in Creme, ein goldener Haarlinien-Rahmen wie
   eine Gravur. Der Rahmen und der Schleier teilen sich das ::after: Der
   Rahmen ist die Box selbst, der Schleier ihr Hintergrund plus ein riesiger
   Schlagschatten ohne Weichzeichnung, der den Rest der Spalte fuellt
   (overflow: hidden schneidet ihn an der Spalte ab). */
.hero-fond-nacht .hero-aira-copy::before {
  inset: -40px;
  background:
    url("../img/extern/pexels-photo-35758725-7902b682-w800.jpg") left 52% / 200% auto no-repeat,
    #1b1c1a;
  filter: blur(20px) saturate(1.05);
  animation: airaZoom 18s ease-in-out infinite alternate;
  transform-origin: 56% 46%;
}
.hero-fond-nacht .hero-aira-copy::after {
  content: "";
  position: absolute;
  inset: 26px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(247, 198, 0, 0.30);
  border-radius: calc(var(--radius) - 12px);
  background: linear-gradient(160deg, rgba(24, 25, 22, 0.56) 0%, rgba(24, 25, 22, 0.68) 100%);
  box-shadow: 0 0 0 600px rgba(24, 25, 22, 0.62);
}
.hero-fond-nacht .hero-aira-copy { color: #f4f2ec; padding: 88px 72px 88px 78px; }
.hero-fond-nacht .hero-aira-copy h1 { color: #faf8f2; }
.hero-fond-nacht .hero-aira-sub { color: rgba(244, 242, 236, 0.86); }
.hero-fond-nacht .hero-aira-tag {
  color: var(--color-accent);
  background: rgba(247, 198, 0, 0.10);
  border: 1px solid rgba(247, 198, 0, 0.28);
}
.hero-fond-nacht .hero-aira-trust li { color: rgba(244, 242, 236, 0.72); }
.hero-fond-nacht .hero-aira-trust li::before {
  background: rgba(247, 198, 0, 0.14);
  border-color: var(--color-accent);
}
.hero-fond-nacht .btn-outline { border-color: rgba(244, 242, 236, 0.55); color: #f4f2ec; }
.hero-fond-nacht .btn-outline:hover { background: #f4f2ec; color: var(--color-dark); }
@media (max-width: 900px) {
  .hero-fond-nacht .hero-aira-copy { padding: 64px 40px 56px; }
  .hero-fond-nacht .hero-aira-copy::after { inset: 16px; }
}

/* Fassung 6 (Vorschlag B, 17.09.2026): "Glas" -- das Foto laeuft fast
   scharf weiter (nur 6px Unschaerfe), und der Text liegt auf einer
   schwebenden Milchglasplatte: backdrop-filter zeichnet weich, was hinter
   der Platte liegt, eine weisse Haarlinie und ein tiefer, weicher Schatten
   heben sie vom Foto ab. Wie eine Glasscheibe vor der Fassade -- das
   Produkt des Betriebs als Gestaltungsmittel. */
.hero-fond-glas .hero-aira-copy::before {
  inset: -30px;
  background:
    url("../img/extern/pexels-photo-35758725-7902b682-w800.jpg") left 52% / 200% auto no-repeat,
    #e9e6de;
  filter: blur(6px) saturate(1.05);
  animation: airaZoom 18s ease-in-out infinite alternate;
  transform-origin: 56% 46%;
}
.hero-fond-glas .hero-aira-copy::after {
  content: "";
  position: absolute;
  inset: 34px 30px 34px 34px;
  z-index: 0;
  pointer-events: none;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.66) 0%, rgba(255, 255, 255, 0.50) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow:
    0 40px 80px -40px rgba(20, 20, 18, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.hero-fond-glas .hero-aira-copy { padding: 86px 76px 86px 80px; }
@media (max-width: 900px) {
  .hero-fond-glas .hero-aira-copy { padding: 62px 44px 58px; }
  .hero-fond-glas .hero-aira-copy::after { inset: 18px; border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-aira-copy::before,
  .hero-aira-copy::after { animation: none !important; }
}

.hero-aira-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  background: var(--color-accent-light);
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  margin-bottom: 30px;
}
.hero-aira-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* Der vollständige Slogan steht als eine Einheit in der H1 */
.hero-aira h1 {
  font-size: clamp(1.85rem, 3.15vw, 2.9rem);
  line-height: 1.14;
  letter-spacing: -0.032em;
  font-weight: 500;
  color: var(--color-dark);
  margin: 0 0 22px;
  max-width: 19ch;
  text-wrap: balance;
}

/* weicher gelber Marker hinter dem Ortsbezug – als Hintergrund gezeichnet,
   damit er zuverlässig hinter den Buchstaben liegt (kein z-index nötig) */
.hero-aira h1 em {
  font-style: normal;
  white-space: nowrap;
  background-image: linear-gradient(
    transparent 54%,
    rgba(247, 198, 0, 0.48) 54%,
    rgba(247, 198, 0, 0.48) 86%,
    transparent 86%
  );
}

.hero-aira-sub {
  font-size: 1.18rem;
  line-height: 1.65;
  color: var(--color-text);
  max-width: 44ch;
  margin: 0;
}
.hero-aira .btn-row { margin-top: 32px; }

/* Vertrauensleiste unter den Buttons */
.hero-aira-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin: 40px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--color-border);
}
.hero-aira-trust li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.86rem;
  color: var(--color-text-muted);
}
.hero-aira-trust li::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 50%;
  background: var(--color-accent-light);
  border: 1.5px solid var(--color-accent);
}

/* --- rechte Spalte: großes Bild mit langsamer Zoomfahrt --- */
.hero-aira-media {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-alt);
  min-height: 82vh;
  /* Box-Radius rechts sauber mitnehmen */
  border-radius: 0 var(--radius) var(--radius) 0;
}
.hero-aira-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  /* Kamerafahrt: von 1,02 auf 1,26 in 18 s -- auf Wunsch kraeftiger als die
     erste Fassung (1,16 in 24 s). Die Fahrt zieht leicht nach links oben,
     damit sie nicht wie ein reines Aufblasen wirkt. */
  animation: airaZoom 18s ease-in-out infinite alternate;
  transform-origin: 56% 46%;
}
@keyframes airaZoom {
  0%   { transform: scale(1.02) translate3d(0, 0, 0); }
  100% { transform: scale(1.26) translate3d(-2.6%, -3.4%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-aira-media img { animation: none; transform: scale(1.02); }
}

/* Bildunterschrift als schwebende Karte im Bild */
.hero-aira-badge {
  position: absolute;
  left: 26px;
  bottom: 26px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-sm);
  padding: 14px 20px;
  box-shadow: 0 20px 40px -24px rgba(20, 20, 16, 0.55);
  max-width: calc(100% - 52px);
}
.hero-aira-badge .badge-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-dark);
}
.hero-aira-badge .badge-txt {
  font-size: 0.80rem;
  line-height: 1.35;
  color: var(--color-text-muted);
}
.hero-aira-media .photo-credit {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 2;
  font-size: 0.66rem;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(20, 20, 16, 0.42);
  padding: 5px 11px;
  border-radius: var(--radius-pill);
}

@media (max-width: 980px) {
  .hero-aira-inner { grid-template-columns: 1fr; min-height: 0; }
  .hero-aira-copy { padding: 56px 28px 44px; }
  .hero-aira h1 { max-width: 22ch; }
  .hero-aira-media {
    min-height: 420px;
    border-radius: 0 0 var(--radius) var(--radius);
  }
}

/* ==========================================================================
   Komponenten im Aira-Look
   ========================================================================== */
body.theme-aira .card,
body.theme-aira .review-card {
  border-radius: var(--radius-sm);
  border-color: var(--color-border);
  background: var(--color-surface);
}
body.theme-aira .section-alt .card,
body.theme-aira .section-alt .review-card { background: var(--color-surface); }
body.theme-aira .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}
body.theme-aira .product-card .photo-frame { border-radius: 0; }
body.theme-aira .photo-frame,
body.theme-aira .visual-frame { border-radius: var(--radius-sm); }

body.theme-aira .answer-block {
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
}

body.theme-aira .facts-strip {
  background: var(--color-accent-light);
  border-color: transparent;
  border-radius: var(--radius-sm);
}

body.theme-aira .rating-banner {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 22px 26px;
}

body.theme-aira .video-frame { border-radius: var(--radius-sm); }

/* CTA: das dunkle Band IST die Box – keine weiße Box darum herum */
body.theme-aira main > section.section-cta {
  background: transparent;
  border: 0;
  padding: 0;
  overflow: visible;
}
body.theme-aira main > section.section-cta > .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
body.theme-aira .cta-band {
  border-radius: var(--radius);
  background: var(--color-dark);
  padding: 60px 56px;
}
@media (max-width: 720px) {
  body.theme-aira .cta-band { padding: 40px 26px; }
}

/* Footer als eigene, abgesetzte Box */
body.theme-aira footer.site-footer {
  background: var(--color-dark);
  border-radius: var(--radius);
  padding: 62px 0 24px;
}
body.theme-aira footer.site-footer > .container {
  padding-left: var(--box-inset);
  padding-right: var(--box-inset);
}

/* Wizard & Cookie-Hinweis passend abgerundet */
body.theme-aira .wizard-modal { border-radius: var(--radius); }
body.theme-aira .cookie-banner { border-radius: var(--radius-sm); }