/*
Theme Name: My Office – Mein Büro
Theme URI: https://www.myoffice.space/
Author: TrueNode
Description: Block-Theme der My-Office-Website. Design-System (Wix-Live-Parität): Akzent Magenta (#e6007e) + Orange (#f39200) wie die Live-Marke, Signatur-Gradient Magenta→Orange, helle Inhaltsflächen, dunkler Footer wie Live, minimal gerundete Buttons (ohne Kanten-Pixel), Logo-Gradient beim Scrollen, laufende Logo-Marquee, Sprachwahl DE/EN im Header, Home-Schritte als absteigende Treppe (1 oben/3 unten, Scroll-Stagger), echte Wix-Städte-Icons als PNG (Hover-Reveal), Expertise als 4 schwebende Kacheln in C-Form über dem Bild (nur Desktop, ohne Bewegung), Angebote-Pills ohne Kanten-Pixel + Suchen-Button bündig zu den Feldern, About mit echtem Vorstellungsvideo (kein Autoplay), Mobile-Menü klappt sauber aus dem Header aus (X-Icon). Design-System lebt vollständig in dieser Datei; theme.json bleibt bewusst minimal.
Version: 0.4.22
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: myoffice
*/

:root {
  /* ---- Brand: Magenta (primär) + Orange (sekundär) — My-Office-Live-Marke ---- */
  --brand: #e6007e;        /* Magenta — Hauptakzent (wie Live) */
  --brand-deep: #c00069;   /* dunkleres Magenta für Hover/Kontrast */
  --brand-soft: #ff63ad;   /* helles Magenta */
  --orange: #f39200;       /* Orange — Sekundärakzent (wie Live) */
  --orange-soft: #ffb347;
  /* Signatur-Gradient (Magenta → Orange) */
  --grad: linear-gradient(96deg, var(--brand) 0%, var(--orange) 100%);
  --grad-soft: linear-gradient(120deg, #ffe9f4 0%, #fff3e2 100%);

  /* Legacy-Aliase: alte Regeln nutzen --blue/--amber → zeigen auf die Marke */
  --blue: var(--brand);
  --blue-deep: var(--brand-deep);
  --amber: var(--orange);
  --amber-soft: var(--orange-soft);

  /* ---- Neutrals — NUR HELL ---- */
  --heading: #15171f;      /* Überschriften / starke Texte */
  --ink: #15171f;          /* Legacy-Alias: wird als Textfarbe genutzt (nie als Fläche) */
  --text: #2a2e3a;         /* Fließtext */
  --muted: #6b7180;        /* Sekundärtext */
  --line: #ececf1;         /* Hairlines */
  --bg: #ffffff;           /* Seitenhintergrund */
  --bg-soft: #faf8fc;      /* alternierende Sektionen (sehr helles Getöntes) */
  --card: #ffffff;
  --tint: #ffe9f4;         /* helles Magenta-Tint */
  --tint-2: #fff3e2;       /* helles Orange-Tint */

  /* Type */
  --font-display: "Sora", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Shape — dezent gerundet */
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 10px 36px rgba(20, 22, 31, 0.06);
  --shadow-lift: 0 22px 54px rgba(20, 22, 31, 0.12);

  --header-h: 76px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container { width: min(1180px, 92%); margin-inline: auto; }

/* ---------- Typography ---------- */

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; letter-spacing: -0.02em; color: var(--heading); }

.display {
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  font-weight: 700;
  /* Lange, leerzeichenlose Tokens (z. B. onOffice-Objekttitel „ARBEITEN|PROVISIONSFREI")
     bei großer Display-Schrift sonst breiter als der Viewport → horizontaler Overflow, der
     die ganze (Detail-)Seite auf Mobile sprengt. anywhere bricht NUR, wenn ein Wort sonst
     überliefe (normale Titel unberührt). PO 2026-06-30. */
  overflow-wrap: anywhere;
}

.h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: 700; }
.h3 { font-size: 1.35rem; font-weight: 600; }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}
.kicker::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--orange);
  border-radius: 2px;
}

.lead { font-size: 1.15rem; color: var(--muted); max-width: 60ch; }

.section { padding: clamp(4rem, 9vw, 7rem) 0; }
.section.soft { background: var(--bg-soft); }
.section-head { max-width: 680px; margin-bottom: clamp(2.2rem, 5vw, 3.5rem); }
.section-head .lead { margin-top: 0.9rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .kicker { justify-content: center; }
.section-head.center .kicker::before { display: none; }

/* Wort als Gradient hervorheben */
.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 1.8rem;
  border-radius: 9px;            /* nur minimale Abrundung (PO-Feedback) */
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  border: 0;                     /* kein transparenter 1px-Rand → keine farbigen Kanten-Pixel (Gradient-Wrap) */
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, filter 0.25s ease;
  background: var(--grad);
  background-clip: padding-box;  /* Gradient endet exakt an der Kante, kein Border-Box-Überlauf */
  color: #fff;
  box-shadow: 0 10px 26px rgba(230, 0, 126, 0.28);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(230, 0, 126, 0.36); filter: brightness(1.03); }

.btn .arrow { transition: transform 0.25s ease; }
.btn:hover .arrow { transform: translateX(4px); }

.btn-light {
  background: #fff;
  color: var(--brand);
  box-shadow: 0 10px 26px rgba(20, 22, 31, 0.12);
}
.btn-light:hover { box-shadow: 0 16px 34px rgba(20, 22, 31, 0.18); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: none;
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.22); box-shadow: none; }

.btn-outline {
  background: transparent;
  color: var(--brand);
  border: 1px solid rgba(230, 0, 126, 0.4);
  box-shadow: none;
}
.btn-outline:hover { background: rgba(230, 0, 126, 0.06); box-shadow: none; }

.btn-small { padding: 0.6rem 1.25rem; font-size: 0.85rem; }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled,
.site-header.solid {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px rgba(20, 22, 31, 0.05);
}
.site-header.on-dark:not(.scrolled) { color: #fff; }

.nav-wrap { display: flex; align-items: center; gap: 1.5rem; }

/* Logo: weiße Wortmarke (Maske) → wird beim Scrollen markenfarbig */
.logo { display: flex; align-items: center; margin-right: auto; }  /* schiebt Nav + Sprachwahl nach rechts */
.logo-mark {
  display: block;
  width: 132px;
  height: 42px;
  background: #fff;
  -webkit-mask: url(assets/img/logo.png) left center / contain no-repeat;
  mask: url(assets/img/logo.png) left center / contain no-repeat;
  transition: background 0.3s ease;
}
.site-header.scrolled .logo-mark,
.site-header.solid .logo-mark,
.site-header:not(.on-dark) .logo-mark { background: var(--grad); }  /* Logo als Gradient (beim Scrollen) */

.main-nav { display: flex; align-items: center; gap: 1.7rem; }
.main-nav > a:not(.btn) {
  font-size: 0.92rem;
  font-weight: 500;
  opacity: 0.85;
  position: relative;
  padding: 0.3rem 0;
}
.main-nav > a:not(.btn):hover { opacity: 1; }
.main-nav > a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--grad);
  border-radius: 2px;
  transition: width 0.25s ease;
}
.main-nav > a:not(.btn):hover::after,
.main-nav > a.active::after { width: 100%; }
.main-nav > a.active { opacity: 1; font-weight: 600; color: var(--brand); }
.site-header.on-dark:not(.scrolled) .main-nav > a.active { color: #fff; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  /* Markenfarbe explizit: die Striche sind currentColor, und ein <button> erbt color
     NICHT vom Header → ohne das fiel currentColor auf die UA-Button-Farbe (blau auf
     Mobile) zurück. Über dem dunklen Video-Hero bleibt das Icon weiß (.on-dark-Regel). */
  color: var(--brand);
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 24px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ---------- Sprachwahl (DE / EN) ---------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 600;
  color: inherit;          /* weiß über dem Video-Hero, dunkel auf hellem Header */
  flex: none;
}
.lang-switch .lang-globe { opacity: 0.8; flex: none; }
.lang-switch .lang {
  opacity: 0.62;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.1rem;
  transition: opacity 0.25s ease, color 0.25s ease;
}
.lang-switch a.lang:hover { opacity: 1; }
.lang-switch .lang.current { opacity: 1; color: var(--brand); }
.lang-switch .lang-sep { opacity: 0.4; font-weight: 400; }
/* Über dem dunklen Video-Hero: aktive Sprache weiß statt magenta */
.site-header.on-dark:not(.scrolled) .lang-switch .lang.current { color: #fff; }

/* ⏸️ TEMPORÄR AUSGEBLENDET (PO 2026-07-01, TN-PR-0002): Die DE/EN-Sprachwahl ist vorerst
   deaktiviert und kommt später wieder (mit dem EN-Launch). NICHT das Markup entfernen —
   zum Reaktivieren genügt es, diese eine Regel zu löschen. Vermerkt für Dianas Agenten in
   en-uebersetzung-plan.md + agent/context/site-map.md. */
.lang-switch { display: none; }

/* ---------- Hero (Home, Video) ---------- */

.hero {
  position: relative;
  color: #fff;
  overflow: hidden;
  background: #1b1d26; /* Fallback hinter dem Video, bis es lädt */
  min-height: clamp(560px, 86vh, 820px);
  display: flex;
  align-items: center;
  /* Content „etwas nach oben": weniger Luft oben, mehr unten → der zentrierte
     Block rutscht spürbar über die Mitte (PO-Feedback Home-Hero). */
  padding: calc(var(--header-h) + clamp(1.5rem, 4vw, 3rem)) 0 clamp(5.5rem, 12vw, 9rem);
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Reiner dunkler Scrim zur Textlesbarkeit — KEINE Marken-Färbung mehr (PO-Feedback
   2026-06-25: Hero-Video nur dunkel tönen, kein Magenta/Orange-Layer darüber). */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(20, 12, 22, 0.42) 0%, rgba(20, 12, 22, 0.28) 45%, rgba(20, 12, 22, 0.5) 100%);
  pointer-events: none;
}
.hero > .container { position: relative; z-index: 2; }
.hero-inner { max-width: 760px; }

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
  margin-bottom: 1.6rem;
}
.badge-pill .pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange-soft);
  box-shadow: 0 0 0 0 rgba(255, 180, 61, 0.6);
  animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 180, 61, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(255, 180, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 180, 61, 0); }
}

.hero h1 { color: #fff; }
.hero h1 .grad {
  background: linear-gradient(92deg, #ffd0e8 0%, var(--orange-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero .lead { color: rgba(255, 255, 255, 0.92); margin: 1.4rem 0 2.2rem; max-width: 54ch; }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: 2.6rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.92);
}
.hero-trust span { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero-trust svg { color: var(--orange-soft); flex: none; }

/* Scroll-Indikator */
.hero-scroll {
  position: absolute;
  left: 50%; bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255, 255, 255, 0.85);
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }

/* ---------- Page hero (subpages, hell) ---------- */

.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--grad-soft);
  color: var(--heading);
  padding: calc(var(--header-h) + clamp(3rem, 7vw, 5rem)) 0 clamp(3rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--line);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(620px 420px at 6% -20%, rgba(230, 0, 126, 0.14), transparent 60%),
    radial-gradient(560px 380px at 100% 10%, rgba(243, 146, 0, 0.16), transparent 58%);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero .display { line-height: 1.05; }
.page-hero .lead { color: var(--muted); margin-top: 1rem; }
.breadcrumb {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.2rem;
  display: block;
}
.breadcrumb a:hover { color: var(--brand); }

/* ---------- Stats ---------- */

.stats-band { background: var(--bg-soft); padding: clamp(3rem, 6vw, 4.5rem) 0; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat {
  background: var(--card);
  padding: 1.9rem 1.6rem;
  text-align: center;
}
.stat b {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 700;
  display: block;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat span { font-size: 0.83rem; color: var(--muted); }

/* ---------- Offer cards ---------- */

.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}

.offer-card {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.35s ease;
}
.offer-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lift); }

.offer-media { position: relative; aspect-ratio: 16 / 10.5; overflow: hidden; background: var(--grad-soft); }
.offer-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1); }
.offer-card:hover .offer-media img { transform: scale(1.06); }

.offer-city {
  position: absolute;
  top: 1rem; left: 1rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  color: var(--brand);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(20, 22, 31, 0.1);
}
.offer-price {
  position: absolute;
  bottom: 1rem; right: 1rem;
  background: #fff;
  color: var(--heading);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(20, 22, 31, 0.16);
}
.offer-price small { font-weight: 500; color: var(--muted); font-size: 0.72rem; }

/* "Büro des Monats" featured tag on an offer card (top-right on the media). Rendered by
   mo_render_offer_card() when the card's estate id == the onOffice-flagged object
   (mo_bdm_current_id(), checkbox field ind_2534_Feld_ObjTech114). Styled HERE (theme style.css)
   so it is filemtime cache-busted — the plugin's onoffice-style.css carries a static ?ver and
   would not refresh. Mirrors the .oo-mo-status (Neu / Top Angebot) badge, plus a star. */
.oo-mo-bdm-badge {
  position: absolute;
  top: 1rem; right: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  background: var(--grad, linear-gradient(96deg, #e6007e 0%, #f39200 100%));
  color: #fff;
  font-family: var(--font-display, "Sora", "Inter", sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.34rem 0.8rem;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(230, 0, 126, 0.35);
  white-space: nowrap;
}
.oo-mo-bdm-badge svg { flex: none; }
/* if a marketing-status badge (Neu / Top Angebot) is also present, drop it below the BdM tag. */
.offer-media:has(.oo-mo-bdm-badge) .oo-mo-status { top: 3.3rem; }

/* The Home "Top Angebote" cards reuse .oo-mo-grid OUTSIDE the /angebote .oo-estate-list section.
   onoffice-style.css only defines its --mo-* tokens on .oo-estate-list/.oo-mo-detail/…, so on Home
   the .oo-mo-status badge's `background: var(--mo-grad)` / `font-family: var(--mo-display)` resolved
   to nothing → transparent badge, default font. Supply the tokens on .oo-mo-grid here (theme css =
   filemtime cache-bust; --grad is a global :root var). On /angebote .oo-estate-list already provides
   identical values → no change there. PO 2026-06-26. */
.oo-mo-grid {
  --mo-grad: var(--grad);
  --mo-display: var(--font-display, "Sora", "Inter", sans-serif);
}

/* AreaButler "Umgebung" map (estate/myoffice_detail.php) relocated to the very bottom of the
   detail view as a direct child of the .oo-detailview grid (PO 2026-06-26, Diana round 3+4).
   Width = MAIN column only (column 1), NOT full width: the .oo-details-sidebar (contact person)
   is position:sticky and its containing block is the whole grid, so it stays stuck until the grid
   bottom — a full-width (1 / -1) block would sit UNDER that sticky column and the box would overlap
   it on scroll. Column 1 keeps the map the same width as the gallery/free-text blocks above it and
   clear of the sidebar column. Lives HERE (theme style.css = filemtime cache-bust), NOT in
   onoffice-style.css (static ?ver won't refresh after rsync). */
.oo-mo-detail .oo-detailview > .oo-area-butler {
  grid-column: 1;
  margin: 1.4rem 0 0;
  /* Cookie-Consent-Fix (Real Cookie Banner), Mobile-Überlauf:
     Die AreaButler-Umgebungskarte ist vor Einwilligung geblockt; das
     <iframe class="oo-area-butler-iframe"> bleibt im DOM (RCB tauscht nur
     src -> consent-original-src-_) und wird bei NACHTRÄGLICHER Zustimmung per JS
     in einen RCB-Wrapper wieder eingefügt. Dieser dynamisch eingefügte Inhalt
     erbte auf Mobile keine Breitenbegrenzung -> lief rechts über den Seitenrand.
     Beim Laden MIT bereits gesetztem Consent entsteht kein Wrapper -> kein Fehler
     (deckt sich mit dem PO-Befund). min-width:0 lässt dieses Grid-Item unter die
     min-content-Breite eines fix breiten Wrappers schrumpfen, overflow:hidden ist
     die harte Overflow-Grenze. Liegt HIER (filemtime cache-bust), nicht in
     onoffice-style.css (statischer ?ver würde nicht refreshen). */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
/* Jedes (auch per RCB-JS eingefügte) Kind des AreaButler-Blocks auf Containerbreite
   zwingen. NUR .oo-area-butler — NICHT die Leaflet-.oo-detailsmap, deren absolut
   positionierte Kachel-<img> ein max-width:100% zerstören würde. */
.oo-mo-detail .oo-area-butler * {
  max-width: 100%;
  box-sizing: border-box;
}
/* 3 Klassen + !important schlagen onoffice-style.css (.oo-mo-detail .oo-area-butler-iframe,
   2 Klassen) unabhängig von der Ladereihenfolge sowie eine evtl. von RCB inline
   gesetzte Breite. */
.oo-mo-detail .oo-area-butler .oo-area-butler-iframe {
  max-width: 100% !important;
}

/* ============================================================================
   Angebots-Detailseite: gruppierte Eckdaten-Tabelle + Bereich „Ausstattungsmerkmale"
   (CSV-Mapping TN-PR-0002). Liegt HIER (theme style.css = filemtime-cache-bust),
   NICHT in onoffice-style.css (statischer ?ver würde nach rsync nicht refreshen).
   ============================================================================ */

/* Die Detailseite hat KEINEN Hero → die .section-Top-Padding muss den fixierten Header
   (var(--header-h)=76px) selbst freihalten. Auf Mobile fällt clamp(4rem,9vw,7rem) sonst auf
   4rem (64px) < Header → der „ANGEBOT"-Kicker + die H1 rutschen unter den Header. Fix wie bei
   .page-hero: die Header-Höhe einrechnen (Diana 2026-07-01). */
.oo-mo-detail { padding-top: calc(var(--header-h) + clamp(1.75rem, 4vw, 2.5rem)); }

/* Detail-H1: bleibt semantisch <h1>, aber optisch in H2-Größe (Diana 2026-07-01).
   Überschreibt nur die .display-Schriftgröße (clamp …4.6rem) mit der .h2-Größe; die
   overflow-wrap:anywhere-Regel aus .display bleibt aktiv (lange onOffice-Objekttitel mit
   Pipes/„PROVISIONSFREI" brechen weiter sauber um, kein Mobile-Overflow). */
.oo-mo-detail .oo-detailsheadline h1 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }

/* Ansprechpartner-Foto: Kopf komplett zeigen (PO 2026-07-02). Die onOffice-Portraits sind
   Hochformat (≈212×300) mit dem Kopf oben; der zentrierte Cover-Crop aus onoffice-style.css
   schneidet Stirn/Haare ab. object-position:top hält die Bild-Oberkante (Kopf) im runden Avatar,
   dazu leicht vergrößert. Liegt HIER (filemtime-cache-bust); +1 Klasse (.oo-asp) schlägt die
   Basisregel in onoffice-style.css (deren statischer ?ver nach rsync nicht refresht). */
.oo-mo-detail .oo-asp .oo-contact-photo img {
  width: 112px;
  height: 112px;
  object-fit: cover;
  object-position: top center;
}

/* gruppierte Eckdaten-Tabelle (Objekt- / Preis- / Lage- / Platzinformationen) */
.oo-mo-detail .oo-detail-facts { margin: 0 0 2.2rem; }
.oo-mo-detail .oo-detail-facts-group { margin: 0 0 1.6rem; }
.oo-mo-detail .oo-detail-facts-group:last-child { margin-bottom: 0; }
.oo-mo-detail .oo-detail-facts-group h3 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--heading);
  margin: 0 0 0.7rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}
/* FESTE Label-Spalte (nicht max-content): jede Gruppe ist ein eigenes <dl>, daher würde
   max-content die Wertespalte je Gruppe an einer anderen x-Position beginnen lassen → die
   Werte rechts wären gruppenübergreifend NICHT bündig. Eine feste Breite richtet alle Werte
   gruppenübergreifend links bündig aus. */
.oo-mo-detail .oo-detail-facts-group dl {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 0.5rem 1.4rem;
  margin: 0;
  font-size: 0.95rem;
}
.oo-mo-detail .oo-detail-facts-group dt { color: var(--muted); margin: 0; }
.oo-mo-detail .oo-detail-facts-group dd { color: var(--heading); font-weight: 600; margin: 0; }
@media (max-width: 600px) {
  .oo-mo-detail .oo-detail-facts-group dl { grid-template-columns: 9.5rem 1fr; gap: 0.4rem 1rem; }
}

/* Bereich „Ausstattungsmerkmale" — direktes Kind des .oo-detailview-Grids → Hauptspalte
   (grid-column:1, wie „Umgebung"), platziert ÜBER der Karte. */
.oo-mo-detail .oo-detailview > .oo-amenities {
  grid-column: 1;
  min-width: 0;
  margin: 1.6rem 0 0;
}
.oo-mo-detail .oo-amenities h2 { margin: 0 0 1rem; }
.oo-mo-detail .oo-amenities-grid {
  /* Diana 2026-07-01 R2: Tags NICHT gleich breit/hoch, sondern dynamisch = Textbreite (Chips,
     die umbrechen). Ersetzt das feste 3-pro-Reihe-Grid. Jeder Tag ist einzeilig → beim „Alle
     anzeigen" werden die bereits sichtbaren Tags nicht höher (kein grid-auto-rows-Angleich mehr). */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.7rem;
}
.oo-mo-detail .oo-amenity {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0.95rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}
.oo-mo-detail .oo-amenity > svg { flex: none; width: 18px; height: 18px; color: var(--brand); }
/* die ersten 6 sichtbar; .is-extra (ab dem 7.) versteckt → per „Alle anzeigen" eingeblendet */
.oo-mo-detail .oo-amenities-grid .oo-amenity.is-extra { display: none; }
.oo-mo-detail .oo-amenities.is-expanded .oo-amenities-grid .oo-amenity.is-extra { display: flex; }
.oo-mo-detail .oo-amenities-more {
  margin-top: 1.1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--brand);
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 0.6rem 1.2rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.oo-mo-detail .oo-amenities-more:hover { border-color: var(--brand); }
/* (Mobile-Sonderregel entfernt — flex-wrap bricht die Tags dynamisch nach Textbreite um.) */

/* Mobile (≤980px, Grid einspaltig): Reihenfolge gemäß PO-Feedback —
   Ausstattungsmerkmale → Kartenansicht/„Umgebung" → Ansprechpartner. Die Ansprechpartner-
   Box rutscht per `order` ans Ende, damit die Kartenansicht DARÜBER steht (vorher stand die
   Box über der Karte). Greift, weil onoffice-style.css das Grid hier einspaltig macht. */
@media (max-width: 980px) {
  .oo-mo-detail .oo-detailview > .oo-amenities   { order: 20; grid-column: 1; }
  .oo-mo-detail .oo-detailview > .oo-detailsmap  { order: 30; }
  .oo-mo-detail .oo-detailview > .oo-mo-similar  { order: 35; }
  .oo-mo-detail .oo-detailview > .oo-area-butler { order: 40; }
  .oo-mo-detail .oo-details-sidebar              { order: 50; }
}

/* "Büro des Monats" — WIDE, low banner at the top of /angebote (above the search filter,
   PO 2026-06-26 R2). Same look language as the mobile BdM banner (.oom-* @media) — thumb +
   text + CTA pill — but a flat full-width strip, deliberately SHORTER than an offer-card.
   Rendered by mo_bdm_render_angebote_banner(); lives OUTSIDE the 12-per-page grid. Styled
   HERE (theme style.css = filemtime cache-bust), NOT in onoffice-style.css (static ?ver). */
.oo-mo-bdm-strip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin: 0 0 1.6rem;
  padding: 0.7rem 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.oo-mo-bdm-strip:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.oo-mo-bdm-strip-img {
  flex: none; width: 56px; height: 56px;
  border-radius: 10px; overflow: hidden; background: var(--grad-soft);
}
.oo-mo-bdm-strip-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oo-mo-bdm-strip-text { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; flex: 1 1 auto; }
.oo-mo-bdm-strip-kicker {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--brand);
}
.oo-mo-bdm-strip-kicker svg { flex: none; }
.oo-mo-bdm-strip-name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  color: var(--heading); line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.oo-mo-bdm-strip-price { flex: none; font-size: 0.9rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.oo-mo-bdm-strip-cta {
  flex: none; display: inline-flex; align-items: center; gap: 0.34rem;
  font-weight: 700; font-size: 0.9rem; color: #fff;
  background: var(--grad);
  padding: 0.55rem 1.1rem; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(230, 0, 126, 0.28);
}
.oo-mo-bdm-strip-cta .arrow { transition: transform 0.2s ease; }
.oo-mo-bdm-strip:hover .oo-mo-bdm-strip-cta .arrow { transform: translateX(3px); }
@media (max-width: 560px) {
  .oo-mo-bdm-strip { gap: 0.7rem; padding: 0.6rem 0.8rem; flex-wrap: wrap; }
  .oo-mo-bdm-strip-img { width: 46px; height: 46px; }
  .oo-mo-bdm-strip-name { font-size: 0.95rem; white-space: normal; }
  .oo-mo-bdm-strip-price { order: 3; }
  .oo-mo-bdm-strip-cta { order: 4; margin-left: auto; padding: 0.45rem 0.9rem; font-size: 0.82rem; }
}
/* /angebote: Ergebnis-Grid wird beim dynamischen Filtern/Blättern (fetch) kurz gedimmt. */
.oo-mo-loading { opacity: 0.55; pointer-events: none; transition: opacity 0.15s ease; }

/* /angebote – onOffice search form (Stadt-Dropdown). Styled HERE (theme style.css =
   filemtime cache-bust), NOT in onoffice-style.css (static ?ver → would not refresh).
   Two fixes, PO 2026-06-26:

   (a) SINGLE-select Stadt-Dropdown: the dropdown is now a single-choice TomSelect
       (maxItems:1, see myoffice_list.php) — pick one city → filter → close. The chosen
       city shows as plain text in the control (no removable pill); a clear-× resets to
       all cities. The pill rules in onoffice-style.css only target .ts-wrapper.multi, so
       single mode (.ts-wrapper.single) needs its own item styling here.

   (b) iOS focus-zoom guard: mobile Safari zooms INTO any form field whose font-size is
       < 16px on focus — that tap-zoom was breaking the page view on phones. The TomSelect
       inner search input is 0.92rem, so on phones we pin the search-form fields to 16px.
       !important because onoffice-style.css sets 0.92rem unconditionally at equal
       specificity and may load after this file. */
.oo-searchform .ts-wrapper.single .ts-control { padding-right: 2.6rem; cursor: pointer; }
.oo-searchform .ts-wrapper.single .ts-control > .item {
  background: transparent;
  border: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 500;
}
/* It is a dropdown, not a text field: no blinking text caret, pointer cursor (PO 2026-06-26 R4). */
.oo-searchform .ts-wrapper.single .ts-control > input { caret-color: transparent; cursor: pointer; }
/* clear-× : bigger glyph + tap target, and shown ONLY once a city is selected (.has-items) —
   never on the empty placeholder state, not even on hover-while-empty (PO 2026-06-26 R4). */
.oo-searchform .ts-wrapper .clear-button {
  color: var(--muted);
  font-size: 1.45rem;
  line-height: 1;
  width: 1.7rem;
  height: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.oo-searchform .ts-wrapper .clear-button:hover { color: var(--brand); }
.oo-searchform .ts-wrapper:not(.has-items) .clear-button { opacity: 0 !important; pointer-events: none; }
.oo-searchform .ts-wrapper.has-items .clear-button { opacity: 1; }

@media (max-width: 640px) {
  .oo-searchform input,
  .oo-searchform select,
  .oo-searchform .ts-control,
  .oo-searchform .ts-control > input,
  .oo-searchform .ts-wrapper.single .ts-control > .item,
  .oo-searchform .ts-dropdown .option { font-size: 16px !important; }
}

/* TN-T-0064: native numeric search filters (Benötigte Plätze / Max. Kosten/Platz).
   onOffice renders each as <fieldset.oo-searchrange><legend>…</legend>
   <label>Von: <input …__von></label><label>Bis: <input …__bis></label></fieldset>. The inline
   script in myoffice_list.php relabels the legend, strips the Von:/Bis: text and hides the
   unused half (.oo-mo-range-hidden) → each shows ONE clean input, matching the other fields. */
.oo-searchform .oo-searchrange { border: 0; margin: 0; padding: 0; min-width: 0; }
.oo-searchform .oo-searchrange legend {
  display: block; width: 100%; padding: 0; margin: 0 0 0.25rem; float: none;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.oo-searchform .oo-searchrange label { display: block; margin: 0; }
.oo-searchform .oo-mo-range-hidden { display: none !important; }
/* Match the Stadt TomSelect control height (46px) so all 3 filter inputs align on desktop. */
.oo-searchform .oo-searchrange input { box-sizing: border-box; height: 46px; }
/* Diana 2026-07-01: the Objektnummer (ImmoNr) plain-text search input to the SAME 46px as the
   Stadt dropdown (.ts-control) + the range inputs → all filter fields are equally tall + aligned. */
.oo-searchform input[name="objektnr_extern"] { box-sizing: border-box; height: 46px; }

/* /angebote filter bar — Diana 2026-07-01 feedback (TN-PR-0002). Styled HERE (theme style.css
   = filemtime cache-bust), NOT in onoffice-style.css (static ?ver → would not refresh).

   (1) STICKY: keep the filter bar pinned below the fixed header while the results scroll, so it
       stays reachable without scrolling back to the top. No overflow-clipping ancestor sits
       between .oo-searchform and the viewport (html/body/.section/.container all checked), so
       sticky resolves to the page scroll. The form card is opaque (bg + border + shadow) → the
       result cards scroll cleanly underneath it. z-index stays below the site-header (100) and
       the mobile menu (1200), above the result cards (z-index 2). */
.oo-estate-list .oo-searchform {
  position: sticky;
  top: calc(var(--header-h, 76px) + 0.75rem);
  z-index: 20;
}
/* Logged-in editors: the WP admin bar pushes .site-header down (32px desktop / 46px ≤782px, see
   the body.admin-bar .site-header rules) → the sticky offset must match, else the bar tucks under
   the header with no gap (Diana, logged in, saw „kein Abstand zum Header" on desktop). Visitors
   have no admin bar → they keep the plain 0.75rem gap. */
body.admin-bar .oo-estate-list .oo-searchform { top: calc(var(--header-h, 76px) + 0.75rem + 32px); }
@media (max-width: 782px) {
  body.admin-bar .oo-estate-list .oo-searchform { top: calc(var(--header-h, 76px) + 0.75rem + 46px); }
}
/* (2) Objektnummer renders as a <label> that WRAPS its text + input, whereas Stadt is a
       <label> + control as siblings with the .oo-searchformfield's 0.25rem column-gap between
       them. Lay the wrapping label out as the same column so the label→input spacing matches
       Stadt (Diana: „Objektnummer hat weniger Abstand zum Input Feld als Stadt"). */
.oo-searchform label:has(> input[name="objektnr_extern"]) {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: stretch;
}
/* (3) On mobile the two filter fields (Stadt + Objektnummer) share ONE row instead of stacking
       in two. The extra .oo-searchform in the selector out-specifies onoffice-style.css'
       equal-specificity mobile rule (.oo-searchform .oo-searchformfield{flex:1 1 100%}) and its
       :has(select) width bump, regardless of stylesheet load order. flex-basis 45% keeps it at
       two-per-row (future range fields would wrap to a second row, not cram). */
@media (max-width: 640px) {
  .oo-estate-list .oo-searchform .oo-searchformfieldwrap { gap: 0.55rem; }
  .oo-estate-list .oo-searchform .oo-searchformfield,
  .oo-estate-list .oo-searchform .oo-searchformfield:has(select) {
    flex: 1 1 45%;
    min-width: 0;
  }
}

.offer-body { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.offer-body h3 { font-size: 1.2rem; }
.offer-body p { font-size: 0.93rem; color: var(--muted); flex: 1; }

.offer-features { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.3rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}
.chip svg { flex: none; }

.offer-link {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.offer-link .arrow { transition: transform 0.25s ease; }
.offer-card:hover .offer-link .arrow { transform: translateX(4px); }

/* Filtermenü (Angebote) */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: flex-end;   /* Suchen-Button auf einer Linie mit den Eingabefeldern (nicht vertikal mittig) */
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.1rem;
  margin-bottom: 2.2rem;
}
.filter-bar .field { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 200px; }
.filter-bar label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.filter-bar input, .filter-bar select {
  font-family: var(--font-body);
  font-size: 0.92rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  background: var(--bg-soft);
  color: var(--text);
}
.filter-bar input:focus, .filter-bar select:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(230, 0, 126, 0.1); }
.filter-bar .btn { flex: none; padding-top: 0.72rem; padding-bottom: 0.72rem; }  /* Höhe ~ Eingabefeld → bündig in der Zeile */
.filter-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.filter-pill {
  font-size: 0.82rem; font-weight: 600;
  padding: 0.45rem 1rem; border-radius: 999px;
  border: 0;                                       /* kein Rand → kein Gradient-Wrap an den runden Enden (Kanten-Pixel) */
  background: var(--card); color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--line);       /* Ruhe-Kontur als Inset-Shadow → kein Layout-Shift beim Aktivieren */
  background-clip: padding-box;
  cursor: pointer; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.filter-pill.active, .filter-pill:hover { background: var(--grad); color: #fff; box-shadow: none; }

/* ---------- Steps ---------- */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  counter-reset: step;
}
.step-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.4rem 1.9rem 2rem;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.step-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.step-card::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  top: -1.4rem; right: 0.6rem;
  font-family: var(--font-display);
  font-size: 6.4rem;
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(230, 0, 126, 0.16);
  line-height: 1;
  pointer-events: none;
}
.step-icon {
  width: 54px; height: 54px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--grad);
  color: #fff;
  margin-bottom: 1.2rem;
  box-shadow: 0 10px 24px rgba(230, 0, 126, 0.28);
}
.step-card h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.step-card p { font-size: 0.93rem; color: var(--muted); }

/* Scroll-Stagger (nur Desktop): Karten stehen wie ansteigende Stufen versetzt
   und „landen" auf einer Ebene, sobald die Section im Viewport zentriert ist.
   Den Versatz steuert main.js per Inline-transform; hier nur die weiche Bewegung. */
@media (min-width: 1021px) and (prefers-reduced-motion: no-preference) {
  .steps-stagger .step-card { transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s ease; will-change: transform; }
}

/* ---------- Bento (benefits) ---------- */

.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.4rem;
}
.bento-card {
  border-radius: var(--radius);
  padding: 2rem;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.bento-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.bento-card h3 { font-size: 1.2rem; margin: 1rem 0 0.5rem; }
.bento-card p { font-size: 0.93rem; color: var(--muted); }
.bento-card .bicon {
  width: 50px; height: 50px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--tint);
  color: var(--brand);
}
.bento-card.span-7 { grid-column: span 7; }
.bento-card.span-5 { grid-column: span 5; }
.bento-card.span-6 { grid-column: span 6; }
.bento-card.span-4 { grid-column: span 4; }
.bento-card.span-8 { grid-column: span 8; }
.bento-card.span-12 { grid-column: span 12; }

/* "dark"-Variante → helles, getöntes Highlight */
.bento-card.dark {
  background: var(--tint-2);
  border-color: rgba(243, 146, 0, 0.22);
}
.bento-card.dark .bicon { background: rgba(243, 146, 0, 0.16); color: var(--orange); }

/* "accent"-Variante → Marken-Gradient (bunt, nicht dunkel) */
.bento-card.accent {
  background: var(--grad);
  border: none;
  color: #fff;
}
.bento-card.accent h3 { color: #fff; }
.bento-card.accent p { color: rgba(255, 255, 255, 0.9); }
.bento-card.accent .bicon { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* ---------- Unsere Expertise: 4 schwebende Kacheln in C-Form über dem Bild (Desktop, ohne Bewegung) ---------- */
/* PO 2026-07-02: Die Karten liegen als Flex-Spalte IM Fluss und definieren damit die
   Section-Höhe (kein fixes min-height mehr → Section deutlich kompakter). Ein gleichmäßiger
   `gap` erzeugt ÜBERALL denselben Abstand — unabhängig von der (unterschiedlichen) Kartenhöhe;
   damit ist die untere Karte genauso weit von der darüber entfernt wie alle anderen. Das Bild
   liegt absolut dahinter und ist oben WIE unten um den Überstand eingerückt, sodass die OBERSTE
   und die UNTERSTE Karte je ein Stück über die Bildkante ragen (symmetrisch). */
.expertise-grid {
  position: relative;        /* Bezug für das absolut platzierte Bild */
}
/* Bild rechts/mittig; top/bottom um den Karten-Überstand (2rem) eingerückt → Karte 1 ragt oben,
   Karte 4 ragt unten über die Bildkante hinaus. */
.expertise-media {
  position: absolute;
  top: 2rem; bottom: 2rem; right: 0;
  left: 19%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--grad-soft);
}
.expertise-media img { width: 100%; height: 100%; object-fit: cover; }

/* Vier Kacheln als Flex-Spalte über dem Bild: gleichmäßiger Abstand; oben und unten nach rechts
   eingerückt (Karte 1 + 4), die beiden mittleren ganz links → die Öffnung des „C" zeigt nach
   rechts. Die Kacheln schweben (Lift-Schatten), bewegen sich aber NICHT (PO: Animation aus). */
.expertise-cards {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;                 /* PO 2026-07-02: Karten etwas näher aneinander + überall GLEICHER Abstand */
}
.expertise-cards .bento-card {
  margin: 0;
  width: 40%;                /* PO 2026-07-01: Karten etwas breiter (war 33%) → mehr Platz für größeren Text */
  display: grid;             /* Icon links, Text rechts */
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
  align-items: center;
  padding: 1.3rem 1.6rem;    /* etwas mehr Innenabstand zum größeren Inhalt */
  box-shadow: var(--shadow-lift);
}
.expertise-cards .bento-card .bicon { margin: 0; grid-row: 1 / span 2; align-self: center; }
/* PO 2026-07-01: Titel größer + bold, Body wie in den anderen Bereichen (0.93rem) statt der bisher zu kleinen Kartentexte */
.expertise-cards .bento-card h3 { grid-column: 2; margin: 0; font-size: 1.2rem; font-weight: 700; }
.expertise-cards .bento-card p { grid-column: 2; margin: 0.35rem 0 0; font-size: 0.93rem; line-height: 1.5; }
.expertise-cards .bento-card:hover { transform: translateY(-4px); box-shadow: 0 28px 64px rgba(20, 22, 31, 0.2); }

/* C-Form: Karte 1 (oben) + Karte 4 (unten) nach rechts eingerückt, 2 + 3 ganz links → Öffnung rechts. */
.expertise-cards .bento-card:nth-child(1) { margin-left: 18%; }
.expertise-cards .bento-card:nth-child(4) { margin-left: 18%; }

/* ---------- Städte-Karten (Icons erst beim Hover) ---------- */

.cities-band { position: relative; }
.cities-watermark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.5rem, 14vw, 11rem);
  letter-spacing: -0.03em;
  text-align: center;
  line-height: 1;            /* war 0.9 → Glyphen-Oberkante (ä-Umlaut) wurde abgeschnitten */
  padding-top: 0.14em;       /* Gradient-Box deckt jetzt die volle Glyphenhöhe inkl. Umlaut */
  margin-top: -0.14em;       /* Padding optisch ausgleichen, Position bleibt unverändert */
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.1;
  margin-bottom: -2.5rem;
  pointer-events: none;
  user-select: none;
}
.city-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}
.city-card {
  position: relative;
  aspect-ratio: 1 / 0.72;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.city-card .city-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.6vw, 1.2rem);
  color: var(--heading);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.city-card .city-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.city-card .city-icon svg { width: 46px; height: 46px; }
.city-card .city-icon svg * { stroke: url(#cityGrad); }
/* Echte Wix-Städte-Icons als PNG (Magenta→Orange-Gradient bereits eingebrannt, transparent) */
.city-card .city-icon img { width: 60px; height: 60px; object-fit: contain; display: block; }
.city-card.all { background: var(--grad); border-color: transparent; }
.city-card.all .city-name { color: #fff; }
/* Hover-Reveal (Städtename → Icon) NUR auf echten Hover-Geräten (Desktop/Maus).
   Auf Touch (hover: none) blieb der :hover-Zustand beim ersten Tippen „hängen": Tap 1
   zeigte nur das Icon, erst Tap 2 folgte dem Link (Sticky-Hover-Doppeltap). Hinter
   @media (hover: hover) zeigt Mobile dauerhaft den Namen → ein einzelner Tap navigiert
   direkt. PO 2026-06-30. */
@media (hover: hover) {
  .city-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: transparent; }
  .city-card:hover .city-name { opacity: 0; transform: translateY(-10px); }
  .city-card:hover .city-icon { opacity: 1; transform: scale(1); }
  .city-card.all:hover .city-name { opacity: 1; transform: none; }
}

/* ---------- VLOG / Blog-Bereich (Home) ---------- */

.vlog-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.vlog-videos { display: grid; gap: 1.4rem; }
.video-ph {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--grad);
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
}
.video-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-ph .play {
  position: relative;
  z-index: 2;
  width: 66px; height: 66px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.92);
  color: var(--brand);
  box-shadow: 0 10px 30px rgba(20, 22, 31, 0.25);
  transition: transform 0.25s ease;
}
.video-ph::after { content: ""; position: absolute; inset: 0; background: rgba(20, 12, 22, 0.12); }
.video-ph:hover .play { transform: scale(1.08); }
.video-ph .vlabel { position: absolute; z-index: 2; left: 1rem; bottom: 0.9rem; color: #fff; font-weight: 600; font-size: 0.9rem; }
/* Klick-zum-Abspielen: ein eingebettetes <video> füllt den Kasten; Poster, Play-Button
   und Label werden ausgeblendet, sobald das Video läuft (Logik in assets/js/main.js). */
.video-ph[data-video] { cursor: pointer; }
.video-ph video { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; object-fit: cover; background: #000; border: 0; }
.video-ph.is-playing { cursor: default; }
.video-ph.is-playing::after,
.video-ph.is-playing .play,
.video-ph.is-playing .vlabel,
.video-ph.is-playing img { display: none; }

.blog-list { display: grid; gap: 1.1rem; }
.blog-list-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1.1rem;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.blog-list-card:hover { transform: translateX(5px); box-shadow: var(--shadow-lift); }
.blog-list-card .thumb { width: 96px; height: 96px; overflow: hidden; background: var(--grad-soft); }
.blog-list-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-list-card .meta-row { font-size: 0.72rem; color: var(--brand); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.25rem; }
.blog-list-card h3 { font-size: 0.98rem; line-height: 1.3; padding-right: 1rem; }

/* Blog-CTA: zentriert direkt unter der untersten Blog-Karte */
.blog-cta { text-align: center; margin-top: 1.6rem; }

/* ---------- Blog cards ---------- */

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
/* Kleinere Karten: 3–4 pro Reihe je nach Breite */
.blog-grid.auto { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.4rem; }

.blog-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.35s ease;
}
.blog-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lift); }
.blog-media { aspect-ratio: 16 / 9.5; overflow: hidden; background: var(--grad-soft); }
.blog-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.blog-card:hover .blog-media img { transform: scale(1.06); }
.blog-body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.blog-meta { display: flex; gap: 0.8rem; align-items: center; font-size: 0.74rem; color: var(--muted); }
.blog-meta .cat { color: var(--brand); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.blog-body h3 { font-size: 1.04rem; line-height: 1.35; }
.blog-body p { font-size: 0.88rem; color: var(--muted); flex: 1; }

/* "Mehr laden" (Mobile) — Karten >5 ausblenden, per Button einblenden */
.load-more-wrap { text-align: center; margin-top: 2.4rem; }

/* ---------- Article (blog post) ---------- */

.article { max-width: 760px; margin-inline: auto; }
.article-hero-img {
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0 auto 3rem;
  box-shadow: var(--shadow-lift);
  aspect-ratio: 16 / 8;
  background: var(--grad-soft);
}
.article-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.article h2 { font-size: 1.55rem; margin: 2.4rem 0 0.9rem; }
.article p { margin-bottom: 1.2rem; color: var(--text); }
.article ul, .article ol { margin: 0 0 1.2rem 1.4rem; color: var(--text); }
.article li { margin-bottom: 0.55rem; }
.article .article-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 2rem; }
.article blockquote {
  border-left: 3px solid var(--orange);
  background: var(--bg-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1.2rem 1.5rem;
  margin: 1.6rem 0;
  font-style: italic;
  color: var(--muted);
}

/* ---- Blog-Standard: Hero-Meta (Kategorie + Datum) aus Post-Daten ---- */
.page-hero .blog-meta { margin: 0.5rem 0 1rem; }
.page-hero .blog-meta .wp-block-post-terms,
.page-hero .blog-meta .wp-block-post-date { display: inline-block; margin: 0; font-size: 0.74rem; }
/* Kategorie im Hero = reine Beschriftung, NICHT klickbar (kein Sprung aufs Archiv) */
.page-hero .blog-meta .wp-block-post-terms a { pointer-events: none; cursor: default; color: inherit; text-decoration: none; }

/* ---- Blog-Standard: Medien im Artikel-Body (gilt für ALLE Posts) ----
   Video füllt seinen Kasten und bleibt in der Body-Breite → behebt
   weiß/pink-Blank (kein grad-soft-Wrapper mehr) + Overflow. */
.article .wp-block-video { margin: 2rem 0; max-width: 100%; }
.article video {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  border-radius: var(--radius);
  background: #000;
}
.article .wp-block-image { margin: 2rem 0; }
.article .wp-block-image img { width: 100%; height: auto; border-radius: var(--radius); }
.article figcaption { font-size: 0.85rem; color: var(--muted); text-align: center; margin-top: 0.6rem; }

/* ---------- Split sections (about etc.) ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.split.reverse > .split-media { order: 2; }
.split-media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  aspect-ratio: 4 / 3.4;
  background: var(--grad-soft);
  position: relative;
}
.split-media img { width: 100%; height: 100%; object-fit: cover; }
/* About: echtes Wix-Vorstellungsvideo statt Bild (16:9, Klick-Teaser → Poster + Play, startet erst beim Klick) */
.split-media.split-video { aspect-ratio: 16 / 9; background: #000; box-shadow: var(--shadow-lift); }
.split-media video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
/* Der äußere .split-video ist der 16:9-Rahmen; das innere .video-ph (Poster + Play-Button)
   füllt ihn nur, ohne eigenen Rahmen/Schatten (sonst doppelte Rundung). */
.split-media.split-video .video-ph { aspect-ratio: auto; height: 100%; border-radius: 0; box-shadow: none; }
.split-body .lead { margin: 1rem 0 1.4rem; }
.split-body p { color: var(--muted); margin-bottom: 1rem; }

.check-list { list-style: none; margin: 1.4rem 0 0; display: grid; gap: 0.8rem; }
.check-list li { display: flex; gap: 0.8rem; align-items: flex-start; font-size: 0.97rem; }
.check-list svg { flex: none; margin-top: 0.2rem; color: var(--brand); }
.check-list b { font-family: var(--font-display); font-weight: 600; }

/* ---------- Feature-Icons (About: Grauton statt Natur-BG) ---------- */

.feature-band { background: var(--bg-soft); border-radius: var(--radius); padding: clamp(2rem, 5vw, 3rem); }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.feature-item { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.feature-item .ficon {
  width: 64px; height: 64px;
  border-radius: 16px;
  display: grid; place-items: center;
  background: #eceef3;          /* Grauton statt Natur-Hintergrund */
  color: #8b8f9c;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.feature-item:hover .ficon { background: var(--grad); color: #fff; transform: translateY(-4px); }  /* Gradient beim Hover */
.feature-item h3 { font-size: 1.05rem; }
.feature-item p { font-size: 0.9rem; color: var(--muted); max-width: 32ch; }

/* Profilbild-Platzhalter (Diana / Founder) */
.avatar-ph {
  width: 100%; height: 100%;
  display: grid;
  place-items: center;
  background: var(--grad-soft);
}
.avatar-ph .initials {
  font-family: var(--font-display);
  font-size: 5.5rem;
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- CTA banner ---------- */

.cta-banner {
  position: relative;
  background: var(--grad);
  color: #fff;
  border-radius: calc(var(--radius) + 4px);
  padding: clamp(3rem, 7vw, 5rem) clamp(1.8rem, 6vw, 5rem);
  overflow: hidden;
  text-align: center;
}
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(540px 340px at 15% 110%, rgba(255, 255, 255, 0.22), transparent 60%),
    radial-gradient(480px 320px at 90% -10%, rgba(255, 255, 255, 0.18), transparent 55%);
}
.cta-banner > * { position: relative; z-index: 2; }
.cta-banner h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.7rem); max-width: 18ch; margin-inline: auto; }
.cta-banner p { color: rgba(255, 255, 255, 0.92); margin: 1rem auto 2rem; max-width: 52ch; }
.cta-banner .hero-ctas { justify-content: center; }

/* ---------- Forms ---------- */

.form-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.8rem, 4vw, 2.8rem);
}
.form-card > .btn { margin-top: 1.4rem; }   /* Abstand Absende-Button ↔ letztes Feld */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 0.82rem; font-weight: 600; color: var(--text); }
.form-field input,
.form-field textarea,
.form-field select {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  background: var(--bg-soft);
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  resize: vertical;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(230, 0, 126, 0.12);
}
.form-note { font-size: 0.78rem; color: var(--muted); margin-top: 0.9rem; }

.form-success {
  display: none;
  background: rgba(26, 178, 106, 0.1);
  border: 1px solid rgba(26, 178, 106, 0.35);
  color: #157a4a;
  border-radius: var(--radius-sm);
  padding: 1rem 1.3rem;
  font-size: 0.92rem;
  margin-top: 1.1rem;
}
.form-success.visible { display: block; }

/* ---------- Contact info cards ---------- */

.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 2rem; align-items: start; }
.info-stack { display: grid; gap: 1.1rem; }

/* onPointment-Terminfindung (Kontaktseite): das eingebettete Widget innerhalb der
   Seitenbreite halten — der .container begrenzt auf --max, hier zusätzlich alles
   Injizierte (iframe/Widget) auf volle Breite kappen, damit nichts überläuft. */
.onpointment-embed { width: 100%; max-width: 100%; }
.onpointment-embed iframe,
.onpointment-embed > * { max-width: 100%; }

/* ---- onPointment (Terminbuchung /kontakt/) — on-brand (TN-T-0062-05) ----
   Das Widget rendert im Light-DOM (Vue/PrimeVue, kein Shadow-DOM/iframe) und liest
   PrimeVue-Theme-Variablen (--p-primary-*) + onOffice-Vars (--oo-color-*). Wir setzen
   die Primärfarbe auf Marken-Magenta. Höhere Spezifität als die vom Widget zur Laufzeit
   in <head> injizierten Regeln: in-place-UI über `.onpointment-embed .booking-area`,
   teleportierte Overlays (Kalender-Popup, an <body> gehängt) über `body .vue-teleported`.
   Die paar !important-Fallbacks sichern die sichtbaren Akzente, falls eine Variable nicht
   via var() ausgelesen wird. */
.onpointment-embed .booking-area,
body .vue-teleported {
  --p-primary-color: var(--brand);
  --p-primary-500: var(--brand);
  --p-primary-600: var(--brand-deep);
  --p-primary-700: var(--brand-deep);
  --p-primary-dark-color: var(--brand-deep);
  --p-primary-hover-color: var(--brand-deep);
  --p-primary-active-color: var(--brand-deep);
  --p-primary-contrast-color: #fff;
  --p-highlight-background: var(--grad-soft);
  --p-highlight-color: var(--brand-deep);
  --oo-color-contrast-primary: var(--brand);
  --oo-color-lighten-primary-40: var(--brand-soft);
}
/* Sichtbare Akzente hart auf Marke (Fallback): gefüllte Buttons + ausgewählter Kalendertag. */
.onpointment-embed .booking-area .p-button:not(.p-button-text):not(.p-button-outlined):not(.p-button-link),
body .vue-teleported .p-button:not(.p-button-text):not(.p-button-outlined):not(.p-button-link) {
  background: var(--grad) !important;       /* Marken-Gradient wie alle .btn auf der Seite */
  background-clip: padding-box;
  border: 0 !important;
  color: #fff !important;
  border-radius: 9px !important;            /* leicht abgerundet, wie .btn (PO/Diana 2026-06-26) */
  padding: 0.95rem 1.8rem !important;       /* selbe Höhe wie die Seiten-Buttons */
  font-weight: 600;
  box-shadow: 0 10px 26px rgba(230, 0, 126, 0.28);
}
/* Hover EXACTLY like the site .btn: keep the gradient, just lift + brighten — never
   flip to a solid magenta (PO/Diana 2026-06-26: "use the general button like everywhere"). */
.onpointment-embed .booking-area .p-button:not(.p-button-text):not(.p-button-outlined):not(.p-button-link):hover,
body .vue-teleported .p-button:not(.p-button-text):not(.p-button-outlined):not(.p-button-link):hover {
  background: var(--grad) !important;
  border: 0 !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(230, 0, 126, 0.36) !important;
  filter: brightness(1.03);
}
.onpointment-embed .booking-area .p-datepicker-day-selected,
.onpointment-embed .booking-area .p-datepicker-day.p-highlight,
body .vue-teleported .p-datepicker-day-selected,
body .vue-teleported .p-datepicker-day.p-highlight {
  background: var(--brand) !important;
  color: #fff !important;
}
/* Eingabefelder wie in den onOffice-Formularen (.oo-form): heller Rahmen, weiche Ecke,
   Magenta-Fokusring — gilt für die Kontaktfelder im letzten Buchungsschritt (PO/Diana 2026-06-26). */
.onpointment-embed .booking-area input:not([type="checkbox"]):not([type="radio"]),
.onpointment-embed .booking-area textarea,
.onpointment-embed .booking-area .p-inputtext,
.onpointment-embed .booking-area .p-textarea,
body .vue-teleported input:not([type="checkbox"]):not([type="radio"]),
body .vue-teleported .p-inputtext {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  box-shadow: none;
}
.onpointment-embed .booking-area input:not([type="checkbox"]):not([type="radio"]):focus,
.onpointment-embed .booking-area textarea:focus,
.onpointment-embed .booking-area .p-inputtext:focus,
body .vue-teleported input:not([type="checkbox"]):not([type="radio"]):focus,
body .vue-teleported .p-inputtext:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(230, 0, 126, 0.10);
}
/* Verlinkungen in Magenta */
.onpointment-embed .booking-area a,
body .vue-teleported a { color: var(--brand); }
.onpointment-embed .booking-area a:hover,
body .vue-teleported a:hover { color: var(--brand-deep); }
/* Kalender-Links „Heute" / „Löschen" (PrimeVue-Text-Buttons, sonst blau) → Marken-Magenta. */
.onpointment-embed .p-datepicker-today-button,
.onpointment-embed .p-datepicker-clear-button,
.onpointment-embed .booking-area .p-button-link,
body .vue-teleported .p-button-link { color: var(--brand) !important; }
/* PO/Diana 2026-06-26: Berater-Name („Diana Heumüller") + Service-Titel („Beratung") + Prompt
   („Datum und Uhrzeit auswählen") ausblenden — es gibt nur eine Beraterin/einen Service, das
   Widget steht ohnehin direkt auf dem Kalender. onPointment bietet dafür keine Embed-Option;
   die Klassen sind onPointment-eigen → fällt ein Widget-Update sie um, erscheint nur wieder der
   Text (kein Funktionsbruch). div:has(> .sub-type-title) = die Kopfzeile mit Name + Service. */
.onpointment-embed div:has(> .sub-type-title),
.onpointment-embed .c-booking__prompt { display: none !important; }
.info-card {
  display: flex;
  gap: 1.1rem;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.2rem 1.4rem;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease;
}
.info-card:hover { transform: translateX(5px); }
.info-card .bicon { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--tint-2); color: var(--orange); }
.info-card b { font-family: var(--font-display); font-size: 0.95rem; display: block; }
.info-card span { font-size: 0.88rem; color: var(--muted); }

/* ---------- Press ---------- */

.press-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.press-item {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.press-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.press-media { aspect-ratio: 16 / 11; overflow: hidden; background: var(--grad-soft); }
.press-media img { width: 100%; height: 100%; object-fit: cover; }
.press-body { padding: 1.4rem 1.6rem 1.7rem; }
.press-item .meta { font-size: 0.78rem; color: var(--brand); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.press-item h3 { font-size: 1.1rem; margin: 0.5rem 0 0.3rem; line-height: 1.35; }
.press-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--brand);
}

/* ---------- Logos-Band (Firmenlogos, gleiche Höhe) ---------- */

.logos-band { padding: clamp(2.5rem, 5vw, 3.5rem) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.logos-head { text-align: center; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.8rem; }
.logos-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(2rem, 6vw, 4rem); }
.logos-row img, .logos-row .logo-ph {
  height: 34px;                 /* alle auf gleiche Höhe */
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.logos-row img:hover, .logos-row .logo-ph:hover { filter: grayscale(0); opacity: 1; }
.logo-ph {
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  color: var(--heading); letter-spacing: -0.02em; padding: 0 0.4rem;
}

/* Laufende Logo-Leiste (Marquee, echte Logos — wie Live) */
.logos-marquee {
  overflow: hidden;
  position: relative;
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logos-track {
  display: flex;
  align-items: center;
  gap: clamp(2.8rem, 7vw, 5.5rem);
  width: max-content;
  padding-block: 0.6rem;        /* vertikale Luft → Logos werden nie vom Overflow beschnitten */
  animation: logos-scroll 34s linear infinite;
}
.logos-marquee:hover .logos-track { animation-play-state: paused; }
.logos-track img {
  height: 46px;                 /* feste, einheitliche Box … */
  width: 150px;                 /* … jedes Logo wird mittig vollständig eingepasst (kein Beschnitt) */
  object-fit: contain;
  object-position: center;
  flex: none;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.logos-track img:hover { filter: grayscale(0); opacity: 1; }
@keyframes logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Legal pages ---------- */

.legal { max-width: 760px; }
.legal h2 { font-size: 1.3rem; margin: 2.2rem 0 0.8rem; }
.legal p { margin-bottom: 1rem; color: var(--text); }
.legal .note {
  background: var(--tint-2);
  border: 1px solid rgba(243, 146, 0, 0.35);
  border-radius: var(--radius-sm);
  padding: 1rem 1.3rem;
  font-size: 0.88rem;
  color: #8a5b07;
  margin-bottom: 2rem;
}

/* ---------- Footer (DUNKEL wie Wix Live — Sitemap / Kontakt / Eure Nachricht) ---------- */

.site-footer {
  background: #1c1d22;
  color: rgba(255, 255, 255, 0.72);
  padding: clamp(3.5rem, 7vw, 5rem) 0 2rem;
  position: relative;
  border-top: none;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* Sitemap · Angebote · Kontakt (Footer-Formular entfernt, PO/Diana 2026-06-26) */
  gap: clamp(2rem, 4vw, 3.2rem);
  padding-bottom: 2.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-col h4 {
  color: #fff;
  font-size: 1.05rem;
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 1.1rem;
}
.footer-col ul { list-style: none; display: grid; gap: 0.6rem; font-size: 0.92rem; color: rgba(255, 255, 255, 0.62); }
.footer-col ul a:hover { color: var(--brand-soft); }
.footer-col p { font-size: 0.92rem; color: rgba(255, 255, 255, 0.62); margin-bottom: 0.4rem; }
.footer-col p a:hover { color: var(--brand-soft); }
.footer-form .form-grid { gap: 0.8rem; }
/* Feldbezeichnungen heller (PO: zu dunkel → helleres Grau) */
.footer-form .form-field label { color: rgba(255, 255, 255, 0.62); }
.footer-form input, .footer-form textarea {
  font-family: var(--font-body); font-size: 0.9rem;
  padding: 0.7rem 0.9rem; border-radius: var(--radius-sm);
  border: 1.5px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: #fff; width: 100%;
}
.footer-form input::placeholder, .footer-form textarea::placeholder { color: rgba(255, 255, 255, 0.45); }
.footer-form input:focus, .footer-form textarea:focus { outline: none; border-color: var(--brand); background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 4px rgba(230, 0, 126, 0.18); }
/* Absenden-Button mit klarem Abstand zum Eingabefeld (PO: zu nah dran) */
.footer-form .btn { margin-top: 1.4rem; }
/* Legal-Hinweis wie auf der Kontaktseite */
.footer-form .form-note { font-size: 0.78rem; color: rgba(255, 255, 255, 0.5); margin-top: 0.9rem; }
.footer-form .form-note a { color: rgba(255, 255, 255, 0.72); text-decoration: underline; }
.footer-form .form-note a:hover { color: var(--brand-soft); }
.footer-social { display: flex; gap: 0.7rem; margin-top: 1.4rem; }
.footer-social a {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.7);
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.footer-social a:hover { background: var(--grad); color: #fff; border-color: transparent; transform: translateY(-3px); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.6rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}
.footer-bottom .footer-mark { width: 110px; height: 30px; background: #fff; -webkit-mask: url(assets/img/logo.png) left center / contain no-repeat; mask: url(assets/img/logo.png) left center / contain no-repeat; }
.footer-bottom .legal-links { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center; }
.footer-bottom a:hover { color: #fff; }
/* Real-Cookie-Banner-Widerruf-Link „Cookie-Einstellungen" ([rcb-consent type="change"]) —
   neutralisiert RCBs Button-Styling, damit er exakt wie Impressum/Datenschutz daneben aussieht.
   TDDSG-Widerruf „so einfach wie die Einwilligung", KEINE schwebende Bubble (PO 2026-06-28). */
.footer-bottom .legal-links .rcb-sc-link {
  display: inline; color: inherit; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; line-height: inherit; text-decoration: none; cursor: pointer; box-shadow: none;
}
.footer-bottom .legal-links .rcb-sc-link:hover { color: #fff; background: none; }

/* ---------- Reveal animations ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1020px) {
  .offer-grid, .blog-grid, .steps-grid, .feature-grid { grid-template-columns: 1fr 1fr; }
  .bento-card { grid-column: span 6 !important; }
  /* Mobil: normaler Fluss – Bild über den Kacheln (mit Abstand), Karten als 2×2-Raster, keine Bewegung.
     Hebt die Desktop-C-Form (absolut positioniertes Bild + Karten) wieder auf. */
  .expertise-grid { position: static; display: grid; gap: 1.8rem; min-height: 0; }
  .expertise-media {
    position: static; inset: auto; width: 100%; aspect-ratio: 16 / 10;
  }
  .expertise-cards {
    position: static; width: 100%;
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem;
  }
  .expertise-cards .bento-card {
    position: static; inset: auto; width: auto; margin-left: 0;  /* Desktop-C-Einrückung (nth-child) zurücksetzen */
    display: block; grid-column: auto !important;
    animation: none; transform: none; padding: 2rem; box-shadow: var(--shadow);
  }
  .expertise-cards .bento-card .bicon { margin-bottom: 1rem; }
  .expertise-cards .bento-card h3 { margin: 1rem 0 0.5rem; font-size: 1.2rem; }
  .expertise-cards .bento-card p { font-size: 0.93rem; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .city-grid { grid-template-columns: repeat(3, 1fr); }
  .vlog-layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-form { grid-column: 1 / -1; }
  .contact-grid, .split, .press-list { grid-template-columns: 1fr; }
  .split.reverse > .split-media { order: 0; }
}

@media (max-width: 720px) {
  /* Mobile-Menü klappt SAUBER aus dem Header nach unten aus (kein Hereinfahren von ganz
     oben über den Header): es sitzt direkt unter dem Header und wird per Fade + kurzem
     Slide eingeblendet, statt von -130 % über die Leiste zu fahren. */
  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    flex-direction: column;
    align-items: flex-start;
    padding: 1.2rem 6% 1.6rem;
    gap: 1.2rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transform-origin: top center;
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1), visibility 0s linear 0.28s;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(20, 22, 31, 0.12);
    color: var(--text);
  }
  .main-nav.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1), visibility 0s;
  }
  .main-nav > a:not(.btn) { color: var(--text); }
  /* Im weißen Dropdown muss der aktive Link markenfarbig bleiben (nicht weiß-auf-weiß wie über dem Video-Hero) */
  .main-nav > a.active,
  .site-header.on-dark:not(.scrolled) .main-nav > a.active { color: var(--brand); }
  .nav-toggle { display: flex; }
  /* Hamburger → sauberes X: äußere Striche kreuzen sich, mittlerer Strich verschwindet komplett */
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-header.on-dark:not(.scrolled) .nav-toggle { color: #fff; }

  /* Mobile-Hero: niedriger + Content höher, sodass er den Hero voll ausfüllt
     (PO-Feedback). Statt fixer 820px füllt der Hero den sichtbaren Bereich,
     der Content sitzt direkt unter dem Header, der Scroll-Pfeil entfällt. */
  .hero {
    min-height: clamp(480px, 88svh, 660px);
    align-items: flex-start;
    padding-top: calc(var(--header-h) + 1.6rem);
    padding-bottom: 2.4rem;
  }
  .hero-inner { max-width: 100%; }
  .hero h1 { font-size: clamp(2.4rem, 10vw, 3.1rem); }
  .hero .lead { margin: 1rem 0 1.6rem; }
  .hero-trust { margin-top: 1.8rem; gap: 0.7rem 1.4rem; }
  .hero-scroll { display: none; }

  .offer-grid, .blog-grid, .steps-grid, .feature-grid { grid-template-columns: 1fr; }
  .blog-grid.auto { grid-template-columns: 1fr; }
  .bento-card { grid-column: span 12 !important; }
  .expertise-cards { grid-template-columns: 1fr; }   /* 4 Kacheln stapeln auf Mobile */
  .form-grid { grid-template-columns: 1fr; }
  /* Angebote-Filter: Felder + Suchen-Button voll gestapelt (Button nicht „mittig auf der Karte") */
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar .btn { width: 100%; justify-content: center; }
  .city-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  /* Blog-Pagination steuert jetzt main.js per data-step (9er-Schritte, alle Viewports) */
}

/* ========================================================================
   Office of the Month — Bubble + Popup (global, unten links, nach 30 s)
   ======================================================================== */
.oom {
  --oom-size: 168px;             /* Desktop-Durchmesser der Bubble (Werbespace — PO 2026-06-25: größer) */
  position: fixed;
  right: clamp(1rem, 3vw, 1.6rem);  /* PO 2026-06-25: Desktop jetzt unten RECHTS statt links */
  bottom: clamp(1rem, 3vw, 1.6rem);
  z-index: 1200;
  display: none;                 /* per JS sichtbar geschaltet */
}
.oom.is-visible { display: block; }
/* Auf Folgeseiten bereits gezeigt → sofort sichtbar ohne Einblend-Pop, nur leichtes Schweben */
.oom.oom-instant .oom-bubble { animation: oom-float 4s ease-in-out infinite; }

/* X-Button: nur auf Mobile (Banner) sichtbar — Desktop schließt über das Popup-X */
.oom-banner-close { display: none; }
/* Banner-Texte/CTA: nur auf Mobile sichtbar (Desktop = reine Kreis-Bubble) */
.oom-banner-text, .oom-banner-cta { display: none; }

/* Kreis-Bubble */
.oom-bubble {
  position: relative;
  width: var(--oom-size); height: var(--oom-size);
  border-radius: 50%;
  border: 3px solid #fff;
  padding: 0;
  cursor: pointer;
  overflow: visible;
  background: var(--grad);
  box-shadow: 0 16px 40px rgba(20, 22, 31, 0.30);
  animation: oom-in 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) both, oom-float 4s ease-in-out 0.6s infinite;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.oom-bubble:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 18px 40px rgba(20, 22, 31, 0.34); }
.oom-bubble-img { position: absolute; inset: 3px; border-radius: 50%; overflow: hidden; }
.oom-bubble-img img { width: 100%; height: 100%; object-fit: cover; }
.oom-bubble-tag {
  position: absolute;
  z-index: 2;                    /* Tag über dem Bild und dem Pulse-Ring */
  left: -10px; top: -12px;       /* PO 2026-06-25: Bubble unten rechts → Tag nach innen (links) statt zum Bildschirmrand */
  background: #fff;
  color: var(--brand);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 0.34rem 0.55rem;
  border-radius: 11px;
  box-shadow: 0 6px 16px rgba(20, 22, 31, 0.2);
}
/* Pulsierender Ring um die Bubble (dezenter Hinweis) — ganz nach hinten,
   hinter Bild und Tag (PO: Pulse-Radius darf den Tag nicht überlagern). */
.oom-bubble { isolation: isolate; }
.oom-bubble::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -3px;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(230, 0, 126, 0.45);
  animation: oom-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes oom-in { from { opacity: 0; transform: translateY(24px) scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes oom-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes oom-pulse { 0% { box-shadow: 0 0 0 0 rgba(230, 0, 126, 0.45); } 70% { box-shadow: 0 0 0 16px rgba(230, 0, 126, 0); } 100% { box-shadow: 0 0 0 0 rgba(230, 0, 126, 0); } }

/* Popup-Karte über der Bubble */
.oom-popup {
  position: absolute;
  right: 0; left: auto; bottom: calc(var(--oom-size) + 0.9rem);  /* PO 2026-06-25: öffnet rechtsbündig über der Bubble */
  width: min(420px, calc(100vw - 2.4rem));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 26px 60px rgba(20, 22, 31, 0.28);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.96);
  transform-origin: right bottom;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1), visibility 0s linear 0.28s;
}
.oom-popup.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1), visibility 0s; }
.oom-popup-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--grad-soft); }
.oom-popup-media img { width: 100%; height: 100%; object-fit: cover; }
.oom-close {
  position: absolute;
  top: 0.6rem; right: 0.6rem;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--heading);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(20, 22, 31, 0.18);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  z-index: 2;
}
.oom-close:hover { background: var(--brand); color: #fff; transform: rotate(90deg); }
.oom-popup-body { padding: 1.3rem 1.4rem 1.5rem; }
.oom-kicker {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand);
}
.oom-popup-body h2 { font-size: 1.36rem; margin: 0.55rem 0 0.2rem; }
.oom-city { font-size: 0.86rem; font-weight: 600; color: var(--muted); margin-bottom: 0.6rem; }
.oom-desc { font-size: 0.92rem; color: var(--muted); margin-bottom: 0.95rem; }
.oom-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.1rem; }
.oom-meta span {
  font-size: 0.78rem; font-weight: 600; color: var(--text);
  background: var(--bg-soft); border: 1px solid var(--line);
  padding: 0.32rem 0.75rem; border-radius: 999px;
}
.oom-cta { width: 100%; justify-content: center; padding-top: 0.8rem; padding-bottom: 0.8rem; }

/* ---------- Mobile: aus der Bubble wird ein unten fixierter Banner ----------
   Bleibt sichtbar, bis Diana/Besucher ihn über das X schließt (24-h-Dismiss). */
@media (max-width: 720px) {
  .oom {
    left: 0; right: 0; bottom: 0;
    width: 100%;
    background: var(--card);   /* füllt jede Sub-Pixel-/Safe-Area-Lücke unten → kein Durchscheinen beim Scrollen */
  }
  .oom.is-visible { display: block; }
  /* Banner-Zeile: Thumbnail + Text + CTA, volle Breite, abgesetzt nach oben */
  .oom-bubble {
    width: 100%;
    height: auto;
    border-radius: 0;
    border: 0;
    border-top: 3px solid transparent;
    border-image: var(--grad) 1;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 2.6rem 0.7rem 0.85rem;   /* rechts Platz fürs X */
    padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));   /* iOS Home-Indikator abdecken, bündig unten */
    background: var(--card);
    box-shadow: 0 -10px 30px rgba(20, 22, 31, 0.18);
    animation: oom-banner-in 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) both;
  }
  .oom-bubble:hover { transform: none; box-shadow: 0 -10px 30px rgba(20, 22, 31, 0.18); }
  .oom-bubble::after { display: none; }          /* Pulse-Ring auf Mobile aus */
  .oom-bubble-tag { display: none; }             /* Eck-Badge raus — Text steht im Banner */
  .oom-bubble-img {
    position: relative; inset: auto;
    width: 50px; height: 50px; flex: none;
    border-radius: 12px;
  }
  .oom-banner-text {
    display: flex; flex-direction: column; gap: 0.1rem;
    min-width: 0; flex: 1 1 auto; text-align: left;
  }
  .oom-banner-kicker {
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--brand);
  }
  .oom-banner-name {
    font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
    color: var(--heading); line-height: 1.15;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .oom-banner-price { font-size: 0.78rem; color: var(--muted); }
  .oom-banner-cta {
    display: inline-flex; align-items: center; gap: 0.3rem; flex: none;
    font-weight: 700; font-size: 0.85rem; color: #fff;
    background: var(--grad);
    padding: 0.5rem 0.9rem; border-radius: 999px;
    box-shadow: 0 6px 16px rgba(230, 0, 126, 0.28);
  }
  /* X oben rechts im Banner */
  .oom-banner-close {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; top: 0.5rem; right: 0.5rem; z-index: 3;
    width: 26px; height: 26px;
    border: 0; border-radius: 50%;
    background: var(--bg-soft); color: var(--heading);
    cursor: pointer;
  }
  /* Popup auf Mobile: über dem Banner, volle Breite */
  .oom-popup {
    left: 0.6rem; right: 0.6rem; bottom: calc(100% + 0.6rem);
    width: auto;
  }
}
@keyframes oom-banner-in { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }

/* ========================================================================
   Events (Eventanmeldung) — Karten für aktuelle & vergangene Events
   ======================================================================== */
.events-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.8rem; }
.event-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.35s ease;
}
.event-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lift); }
.event-media { position: relative; aspect-ratio: 16 / 9.5; overflow: hidden; background: var(--grad-soft); }
.event-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1); }
.event-card:hover .event-media img { transform: scale(1.06); }
.event-status {
  position: absolute; top: 1rem; left: 1rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.35rem 0.85rem; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(20, 22, 31, 0.1);
  background: #fff; color: var(--muted);
}
.event-status.upcoming { background: var(--grad); color: #fff; }
.event-body { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.event-date { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; font-weight: 600; color: var(--brand); }
.event-date svg { flex: none; }
.event-body h3 { font-size: 1.3rem; }
.event-body p { font-size: 0.93rem; color: var(--muted); flex: 1; }
.event-meta { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.7rem 0 0.9rem; }
.event-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.9rem; }

/* Eventanmeldung /eventanmeldung/ (TN-T-0075): Desktop-Sonderlayout. Die ersten beiden Karten
   (aktuelles + jüngstes vergangenes Event) bleiben 2 pro Reihe (je halbe Breite); die per
   „Mehr laden" eingeblendeten älteren Rückblicke stehen 3 pro Reihe. NUR Desktop — Tablet/Mobile
   behalten das auto-fit-Verhalten (unverändert). Umsetzung: 6-Spalten-Raster, oben 2×span-3,
   danach span-2 (=3 pro Reihe). nth-child zählt auch ausgeblendete Karten → Zuordnung stabil. */
@media (min-width: 1021px) {
  #eventsGrid { grid-template-columns: repeat(6, 1fr); }
  #eventsGrid > .event-card:nth-child(-n+2) { grid-column: span 3; }
  #eventsGrid > .event-card:nth-child(n+3)  { grid-column: span 2; }
}

/* Eventanmeldung ausgebucht — Toggle (inc/events.php): ausgegrauter CTA + Hinweis statt Formular */
.btn.is-soldout {
  background: var(--bg-soft);
  color: var(--muted);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}
.event-soldout { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; text-align: center; }
.event-soldout-badge {
  display: inline-flex; align-items: center;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.35rem 0.95rem; border-radius: 999px;
  background: var(--bg-soft); color: var(--muted);
}
.event-soldout h3 { font-size: 1.4rem; }
.event-soldout p { color: var(--muted); max-width: 46ch; }

/* ========================================================================
   Foto-Galerie (Event-Detailseite) + Lightbox
   ======================================================================== */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-auto-rows: 200px; gap: 0.9rem; }
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--grad-soft);
  border: 1px solid var(--line);
}
.gallery-item.tall { grid-row: span 2; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1); }
.gallery-item:hover img { transform: scale(1.07); }
.gallery-item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(20, 12, 22, 0.35) 100%);
  opacity: 0; transition: opacity 0.3s ease;
}
.gallery-item:hover::after { opacity: 1; }

.lightbox {
  position: fixed; inset: 0;
  z-index: 1400;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(15, 9, 17, 0.92);
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 86vh; border-radius: var(--radius); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.lightbox-close, .lightbox-nav {
  position: absolute;
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff; cursor: pointer;
  transition: background 0.2s ease;
}
.lightbox-close { top: clamp(1rem, 3vw, 1.8rem); right: clamp(1rem, 3vw, 1.8rem); }
.lightbox-nav.prev { left: clamp(0.6rem, 3vw, 1.8rem); top: 50%; transform: translateY(-50%); }
.lightbox-nav.next { right: clamp(0.6rem, 3vw, 1.8rem); top: 50%; transform: translateY(-50%); }
.lightbox-close:hover, .lightbox-nav:hover { background: var(--brand); }

/* ========================================================================
   Aktuelle Angebote — Tabelle mit Filter (losgelöst von onOffice)
   ======================================================================== */
.offers-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); background: var(--card); }
.offers-table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 0.93rem; }
.offers-table thead th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  padding: 1rem 1.1rem;
  border-bottom: 1.5px solid var(--line);
  white-space: nowrap;
  background: var(--bg-soft);
}
.offers-table tbody td { padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.offers-table tbody tr:last-child td { border-bottom: 0; }
.offers-table tbody tr { transition: background 0.2s ease; }
.offers-table tbody tr:hover { background: var(--bg-soft); }
.offers-table tbody tr:target { background: rgba(230, 0, 126, 0.07); box-shadow: inset 3px 0 0 var(--brand); }
.offers-table .ot-name { font-family: var(--font-display); font-weight: 600; color: var(--heading); }
.offers-table .ot-city { color: var(--muted); }
.offers-table .ot-price { font-family: var(--font-display); font-weight: 700; color: var(--brand); white-space: nowrap; }
.offers-table .ot-price small { color: var(--muted); font-weight: 500; }
.offers-table .offer-link { margin: 0; }
.offers-empty { display: none; padding: 2.5rem 1.2rem; text-align: center; color: var(--muted); }
.offers-empty.is-visible { display: block; }
.offers-count { font-size: 0.85rem; color: var(--muted); margin-top: 1rem; }
.filter-bar .field.reset { flex: none; justify-content: flex-end; }
.btn-reset {
  background: transparent; color: var(--muted); border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); padding: 0.7rem 1.1rem; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 0.85rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.btn-reset:hover { color: var(--brand); border-color: var(--brand); }

/* ---------- WordPress-Anpassungen ---------- */

/* Block-Wrapper neutralisieren, damit das Layout 1:1 greift */
.wp-block-template-part,
.wp-block-post-content { display: contents; }

/* Fixed Header unter der Admin-Bar */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}