/* =====================================================================
   noovi — GLOBALES DESIGN-SYSTEM (verbindlich für alle Seiten)
   Wird als LETZTES geladen und ist die eine Quelle der Wahrheit.
   Kapitel 2 des Redesign-Briefs. Referenz: noovi.ch.
   ===================================================================== */

:root{
  /* --- Layout / Container --- */
  --container-max: 1280px;
  --container-max-wide: 1360px;
  --gutter: 20px;
  --gutter-md: 32px;
  --gutter-lg: 48px;
  --gutter-xl: 64px;

  /* --- Spacing-Skala --- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  /* Section-Padding (responsiv) */
  --section-pad: clamp(56px, 7vw, 96px);
  --section-pad-lg: clamp(64px, 9vw, 128px);

  /* --- Farben (aus noovi.ch abgeleitet) --- */
  --c-primary:       #498d90;                    /* Marken-Teal ("Grün") */
  --c-primary-dark:  #356d70;                    /* Hover, ~10% dunkler */
  --c-primary-soft:  #eaf3f2;                    /* Tint für Badges/Flächen */
  --c-accent-orange: oklch(0.765 0.175 62.57);   /* Akzent (Slider/Aufpreise/Formular + Haupt-CTA) */
  --c-accent-orange-dark: oklch(0.70 0.175 62.57);
  --c-ink:           #1A1D1B;   /* Fliesstext & Titel */
  --c-ink-muted:     #5A635E;   /* Sekundärtext */
  --c-line:          #E6EBE8;   /* Rahmen/Trennlinien */
  --c-surface:       #FFFFFF;
  --c-surface-alt:   #F7F9F8;   /* alternierender Section-Hintergrund */

  /* --- Radien & Schatten (noovi.ch: runde Cards, weicher Schatten) --- */
  --radius-card: 20px;
  --radius-sm: 12px;
  --radius-btn: 999px;          /* Pill wie noovi.ch */
  --shadow-card: 0 1px 2px rgba(16,24,20,.05), 0 10px 26px rgba(16,24,20,.06);
  --shadow-card-hover: 0 16px 38px rgba(16,24,20,.12);

  /* --- Typo --- */
  --font-sans: 'Exo','Exo 2',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  /* --- Bridge: Alt-Tokens auf die neuen mappen (verhindert Brüche) --- */
  --nv-teal:      #498d90;
  --nv-teal-2:    #498d90;
  --nv-teal-dark: #356d70;
  --nv-orange:    var(--c-accent-orange);
  --nv-line:      var(--c-line);
  --nv-max:       var(--container-max);
  --nv-wide:      var(--container-max-wide);
}

/* =====================================================================
   1) Container — die EINE Inhaltsbreite. Zentriert, mit Luft an den Seiten.
   ===================================================================== */
.noovi-container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
  box-sizing:border-box;
}
@media(min-width:600px){ .noovi-container{ padding-inline:var(--gutter-md); } }
@media(min-width:1024px){ .noovi-container{ padding-inline:var(--gutter-lg); } }
@media(min-width:1440px){ .noovi-container{ padding-inline:var(--gutter-xl); } }
.noovi-container--wide{ max-width:var(--container-max-wide); }

/* =====================================================================
   2) Globale Typografie — eine Skala für ALLE Seiten (clamp).
   Ohne !important: setzt die Basis; seitenspezifische Overrides werden
   in den Migrationsphasen entfernt.
   ===================================================================== */
/* Skala 1:1 an noovi.ch: h1/h2 ~48px, Card-Titel ~40px, Fliesstext ~20–24px */
.noovi-page h1, .noovi-hero h1, .noovi-subpage-hero h1{
  font-size:clamp(36px, 3.6vw, 52px); line-height:1.08; font-weight:600;
}
.noovi-page h2{ font-size:clamp(32px, 3.4vw, 48px); line-height:1.12; font-weight:600; }
.noovi-page h3{ font-size:clamp(24px, 2.4vw, 34px); line-height:1.18; font-weight:600; }
.noovi-page h4{ font-size:clamp(17px, 1.3vw, 18px); line-height:1.40; font-weight:500; }
.noovi-page p{ font-size:clamp(17px, 1.25vw, 20px); line-height:1.60; }
.noovi-lead{ font-size:clamp(19px, 1.6vw, 24px); line-height:1.55; }
.noovi-eyebrow{ font-size:14px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--c-ink-muted); }
/* Lesbare Zeilenlänge für Fliesstext */
.noovi-prose p{ max-width:68ch; }
.noovi-intro{ max-width:60ch; margin-inline:auto; }

/* =====================================================================
   3) Buttons — genau drei Varianten (global).
   Entscheidung: Haupt-CTA orange (wie noovi.ch), sekundär/Links grün.
   ===================================================================== */
.btn-primary, .btn-secondary, .btn-text{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:52px; padding-inline:28px; border-radius:var(--radius-btn);
  font-family:var(--font-sans); font-size:16px; font-weight:600; line-height:1;
  text-decoration:none; cursor:pointer; border:1.5px solid transparent;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.btn-primary{ background:var(--c-accent-orange); color:#1A1D1B; }
.btn-primary:hover{ background:var(--c-accent-orange-dark); color:#1A1D1B; }
.btn-secondary{ background:var(--c-surface); color:var(--c-primary); border-color:var(--c-primary); }
.btn-secondary:hover{ background:var(--c-primary); color:#fff; }
.btn-text{ height:auto; padding:0; border:0; background:none; color:var(--c-primary); font-weight:600; }
.btn-text .arrow, .btn-text::after{ transition:transform .25s ease; }
.btn-text:hover{ color:var(--c-primary-dark); }
.btn-text:hover .arrow{ transform:translateX(4px); }
@media(max-width:600px){ .btn-primary,.btn-secondary{ height:48px; } }

/* Alt-Button-Klassen auf das System heben (sofortige Vereinheitlichung) */
.noovi-btn{ transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .25s ease !important; }
.noovi-btn-orange{ background:var(--c-accent-orange) !important; color:#1A1D1B !important; border-color:var(--c-accent-orange) !important; }
.noovi-btn-orange:hover{ background:var(--c-accent-orange-dark) !important; color:#1A1D1B !important; }
.noovi-btn-teal, .noovi-nav-demo{ color:var(--c-primary) !important; border-color:var(--c-primary) !important; }
.noovi-btn-teal:hover, .noovi-nav-demo:hover{ background:var(--c-primary) !important; color:#fff !important; }
/* Democall-Button im Header: Schrift beim Hover WEISS (schlägt die Menü-Hover-Regel header nav a:hover) */
header nav a.noovi-nav-demo:hover, header nav a.noovi-nav-demo:focus,
.noovi-nav a.noovi-nav-demo:hover, a.noovi-nav-demo:hover, a.noovi-nav-demo:focus{ background:var(--c-primary-dark) !important; border-color:var(--c-primary-dark) !important; color:#fff !important; }
header nav a.noovi-nav-demo:hover *, .noovi-nav a.noovi-nav-demo:hover *{ color:#fff !important; }

/* =====================================================================
   4) Card — noovi.ch-Stil: rund, KEIN Rahmen, weicher Schatten.
   ===================================================================== */
.noovi-card{
  background:var(--c-surface);
  border:0;
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  padding:32px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.noovi-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card-hover); }
@media(max-width:600px){ .noovi-card{ padding:24px; } }

/* Gleich hohe Karten in Grids */
.noovi-card-grid{
  display:grid; gap:32px;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  align-items:stretch;
}
@media(max-width:900px){ .noovi-card-grid{ gap:24px; } }
@media(max-width:600px){ .noovi-card-grid{ gap:20px; grid-template-columns:1fr; } }

/* =====================================================================
   5) Section-Grundlagen + alternierende Hintergründe
   ===================================================================== */
.noovi-sec{ padding-block:var(--section-pad); }
.noovi-sec--lg{ padding-block:var(--section-pad-lg); }
.noovi-sec--alt{ background:var(--c-surface-alt); }
.noovi-sec--white{ background:var(--c-surface); }
.noovi-sec-head{ margin-bottom:var(--space-7); }

/* =====================================================================
   6) Globale Komponenten — Floating-CTAs + Anker-Offset (Sticky-Header)
   ===================================================================== */
/* Anker-Links landen nicht unter dem Sticky-Header */
html{ scroll-padding-top:110px; }

/* Kontakt-Widget unten rechts: noovi-Icon-Button öffnet Kanal-Panel (Demo/WhatsApp/Anruf). */
.noovi-contact{ position:fixed; right:24px; bottom:24px; z-index:9990; }
.noovi-contact-fab{ position:relative; width:66px; height:66px; border-radius:999px; border:0; padding:0; cursor:pointer; background:#fff; overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,.28); transition:transform .2s ease, box-shadow .2s ease; }
.noovi-contact-fab:hover{ transform:translateY(-2px); box-shadow:0 16px 38px rgba(0,0,0,.32); }
.noovi-contact-avatar{ width:100%; height:100%; object-fit:contain; padding:14px; background:#fff; display:block; }
.noovi-contact-dot{ position:absolute; top:7px; right:7px; width:14px; height:14px; border-radius:50%; background:#25D366; border:2px solid #fff; }
.noovi-contact-x{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:var(--c-primary-dark); color:#fff; }
.noovi-contact.is-open .noovi-contact-avatar, .noovi-contact.is-open .noovi-contact-dot{ display:none; }
.noovi-contact.is-open .noovi-contact-x{ display:flex; }

.noovi-contact-panel{ position:absolute; right:0; bottom:82px; width:344px; max-width:calc(100vw - 40px); background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 26px 64px rgba(16,24,20,.30); opacity:0; transform:translateY(14px) scale(.98); transform-origin:bottom right; pointer-events:none; transition:opacity .2s ease, transform .25s var(--nv-ease, ease); }
.noovi-contact.is-open .noovi-contact-panel{ opacity:1; transform:none; pointer-events:auto; }
.noovi-contact-head{ background:linear-gradient(135deg,#1a3f40,#2f5d5f); color:#fff; padding:20px 22px; }
.noovi-contact-head strong{ display:block; font-size:19px; font-weight:700; }
.noovi-contact-head span{ display:block; font-size:14px; color:rgba(255,255,255,.7); margin-top:2px; }
.noovi-contact-row{ display:flex; align-items:center; gap:14px; padding:15px 18px; text-decoration:none; color:#1A1D1B; border-top:1px solid #eef1f0; transition:background .15s ease; }
.noovi-contact-row:hover{ background:#f5f8f7; }
.noovi-contact-ic{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; flex:0 0 auto; }
.noovi-contact-ic.ic-cal{ background:#eef0ff; color:#4b62d6; }
.noovi-contact-ic.ic-wa{ background:#e6f8ec; color:#1ea952; }
.noovi-contact-ic.ic-tel{ background:#e7f0ff; color:#2f6fed; }
.noovi-contact-ic.ic-msg{ background:#eef1f3; color:#54606c; }
.noovi-contact-tx{ display:flex; flex-direction:column; line-height:1.25; }
.noovi-contact-tx strong{ font-size:16.5px; font-weight:700; }
.noovi-contact-tx small{ font-size:13.5px; color:#5A635E; }
.noovi-contact-arr{ margin-left:auto; color:#b6c0bd; font-size:22px; }
body.has-app-banner .noovi-contact{ bottom:88px; }
@media(max-width:640px){
	.noovi-contact{ right:16px; bottom:16px; }
	.noovi-contact-fab{ width:58px; height:58px; }
}

/* Footer-Fixes (Figma-Footer beibehalten): Legal-Links in der Bottom-Bar + Abstand */
.noovi-ftr{ margin-top:clamp(48px, 6vw, 80px); }
.noovi-ftr-legal{ display:inline-flex; gap:18px; justify-content:flex-end; align-items:center; }
.noovi-ftr-legal a{ color:#8fa3a3; font-size:13px; text-decoration:none; }
.noovi-ftr-legal a:hover{ color:#fff; }
@media(max-width:640px){ .noovi-ftr-legal{ justify-content:center; gap:16px; } }

/* =====================================================================
   7) Phase 2 — Startseite: Hero auf Container-Breite (behebt "klebt links")
   ===================================================================== */
body.home .noovi-hero-grid{ max-width:var(--container-max) !important; margin-inline:auto !important; }
/* Haupt-Sections konsequent auf eine Breite zentrieren */
.noovi-page .nv35-testimonials .noovi-container, .noovi-page .noovi-widget .noovi-container{ max-width:var(--container-max) !important; }

/* =====================================================================
   8) Globale Konsistenz — Karten, Hover, Sektions-Rhythmus, Downloads
   ===================================================================== */
/* EIN Karten-Look site-weit: rund, kein Rahmen, weicher Schatten (noovi.ch) */
.noovi-feature-card, .noovi-info-card, .noovi-ratgeber-card, .noovi-int-card,
.noovi-post-card, .noovi-vergleich-card, .nv35-story-card{
  border:0 !important; border-radius:20px !important; background:#fff;
  box-shadow:0 1px 2px rgba(16,24,20,.05), 0 10px 26px rgba(16,24,20,.06) !important;
  transition:transform .25s ease, box-shadow .25s ease !important;
}
.noovi-feature-card:hover, .noovi-info-card:hover, .noovi-ratgeber-card:hover,
.noovi-int-card:hover, .noovi-post-card:hover{
  transform:translateY(-3px) !important; box-shadow:0 16px 38px rgba(16,24,20,.12) !important;
}
/* Keine doppelten Rahmen (Box-in-Box) innerhalb von Karten */
.noovi-feature-card > *, .noovi-info-card > *, .noovi-info-card .noovi-info-text{ border:0 !important; background:transparent !important; }

/* App-Store/Google-Play-Badges überall gleich (Reihenfolge/Grösse/Abstand) */
.noovi-app-badges{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:18px; }
.noovi-app-badges img{ height:44px !important; width:auto !important; }

/* Textlänge in Karten begrenzen, damit Höhen nicht auseinanderlaufen */
.noovi-ratgeber-card h3, .noovi-post-card h3{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.noovi-ratgeber-card p, .noovi-post-card p{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Grüne Akzente statt Orange ausserhalb der drei erlaubten Stellen (Titel/Links/Icons) */
.noovi-int-card a:not(.noovi-btn), a.noovi-int-link{ color:var(--c-primary) !important; }

/* =====================================================================
   9) Phase 4 — Preise (Rechner-Feinschliff)
   ===================================================================== */
.noovi-calc-eyebrow{ display:block; font-size:14px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:#64748b; }
.noovi-calc-planline{ display:flex; align-items:center; gap:10px; margin-top:4px; }
.noovi-calc-planline strong{ font-size:24px; font-weight:700; color:var(--c-primary); }
.noovi-calc-badge{ background:var(--c-primary-soft); color:var(--c-primary-dark); font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; }
.noovi-calc-plansub{ color:#64748b; font-size:14px; margin-top:2px; }
.noovi-plan.is-selected{ border-color:var(--c-primary) !important; box-shadow:0 12px 30px rgba(73,141,144,.18) !important; }
@media(max-width:900px){ .noovi-addon-list{ grid-template-columns:repeat(2,1fr) !important; } }
@media(max-width:560px){ .noovi-addon-list{ grid-template-columns:1fr !important; } }

/* "Eigene App"-Section: weisse Card statt dunkel */
.noovi-whitelabel{ background:#fff !important; border:0 !important; box-shadow:0 1px 2px rgba(16,24,20,.05),0 10px 26px rgba(16,24,20,.06) !important; }
.noovi-whitelabel *{ color:#1A1D1B !important; }
.noovi-whitelabel .noovi-wl-lead, .noovi-whitelabel p, .noovi-whitelabel .noovi-plan-feat li, .noovi-whitelabel .noovi-plan-per{ color:#334155 !important; }
.noovi-whitelabel .noovi-wl-amt{ color:#0f172a !important; }
.noovi-whitelabel .noovi-wl-once{ color:#64748b !important; }
.noovi-whitelabel .noovi-plan-feat li::before{ border-color:var(--c-primary) !important; }
.noovi-whitelabel .noovi-wl-cta{ background:var(--c-accent-orange) !important; color:#1A1D1B !important; }

/* =====================================================================
   10) Phase 5 — Team
   ===================================================================== */
.noovi-team-grid{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:32px !important; justify-items:stretch !important; }
.noovi-team-photo{ aspect-ratio:4/5; overflow:hidden; border-radius:16px; }
.noovi-team-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.noovi-team-body{ display:flex; flex-direction:column; }
.noovi-team-body h3{ order:1; margin:8px 0 0 !important; }
.noovi-team-role{ order:2; margin:4px 0 0 !important; color:var(--c-ink-muted); }
.noovi-team-body > :not(h3):not(.noovi-team-role){ order:3; margin-top:12px; }
@media(max-width:900px){ .noovi-team-grid{ grid-template-columns:repeat(2,1fr) !important; } }
@media(max-width:600px){ .noovi-team-grid{ grid-template-columns:1fr !important; } }
/* Team-Karten ohne Rahmen/Karten-Schatten – nur Foto + Text wie noovi.ch */
.noovi-team-card{ background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; overflow:visible !important; }
/* Ein einziges linksbündiges Grid (keine separate, zentrierte zweite Reihe) */
.noovi-team-grid.second-row{ max-width:none !important; grid-template-columns:repeat(3,1fr) !important; margin-top:0 !important; }

/* =====================================================================
   11) Phase 5 — Schnittstellen: grüne Akzente, kompaktere Karten, Suche
   ===================================================================== */
.noovi-int-grid{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)) !important; gap:16px !important; }
.noovi-int-card{ padding:20px 16px !important; text-align:center; border-radius:16px !important; }
.noovi-int-name{ color:var(--c-primary) !important; font-weight:700 !important; }
.noovi-int-desc{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--c-ink-muted); font-size:14px; }
.noovi-int-more{ color:var(--c-primary) !important; font-weight:600; }
.noovi-int-card:hover .noovi-int-more{ color:var(--c-primary-dark) !important; }
/* Live-Suche über der Liste */
.noovi-int-search{ display:block; width:100%; max-width:420px; margin:0 auto 26px; height:46px; border:1.5px solid var(--c-line); border-radius:999px; padding:0 20px; font-size:15px; font-family:var(--font-sans); outline:0; }
.noovi-int-search:focus{ border-color:var(--c-primary); box-shadow:0 0 0 3px rgba(73,141,144,.15); }
.noovi-int-card.is-hidden{ display:none !important; }
.noovi-int-empty{ text-align:center; color:var(--c-ink-muted); margin:10px 0; }

/* Startseite Showcase: Bild grösser auf Desktop, damit die (eingebrannten) Labels ohne Zoom lesbar sind */
@media(min-width:1024px){
	.noovi-home-showcase .noovi-home-bigimg{ width:100% !important; max-width:1080px !important; height:auto !important; margin-inline:auto !important; display:block !important; }
}

/* Marquee-CTA-Link auf der dunklen Partner-Section gut lesbar */
.nv35-partners .noovi-marquee-cta a{ color:#fff !important; }
.nv35-partners .noovi-marquee-cta a:hover{ color:var(--c-accent-orange) !important; }

/* Startseite Showcase: 4 Feature-Label-Overlays mit Hover-Zoom (Desktop/Tablet) */
.noovi-home-showcase{ position:relative; }
.noovi-fl{ position:absolute; z-index:3; display:flex; align-items:center; gap:10px; background:#fff; border-radius:14px; padding:9px 13px; box-shadow:0 8px 24px rgba(16,24,20,.16); transition:transform .25s ease, box-shadow .25s ease, opacity .25s ease; transform-origin:center; max-width:232px; }
.noovi-fl-ic{ width:36px; height:36px; flex:0 0 auto; border-radius:10px; background:var(--c-primary-soft); color:var(--c-primary); display:grid; place-items:center; }
.noovi-fl-ic svg{ width:20px; height:20px; }
.noovi-fl-tx{ display:flex; flex-direction:column; }
.noovi-fl-t{ font-weight:700; font-size:14.5px; color:#1A1D1B; line-height:1.15; }
.noovi-fl-d{ font-size:12px; color:#5A635E; line-height:1.2; margin-top:2px; }
.noovi-home-showcase:hover .noovi-fl{ opacity:.5; }
.noovi-home-showcase .noovi-fl:hover{ opacity:1 !important; transform:scale(1.07); box-shadow:0 18px 42px rgba(16,24,20,.24); z-index:5; }
.noovi-home-showcase .noovi-fl:hover .noovi-fl-d{ font-size:13px; }
@media(max-width:820px){ .noovi-fl{ display:none !important; } }

/* Startseiten-Hero: Geräte-Showcase transparent auf Petrol (kein weisser Hintergrund, dezenter Schlagschatten) */
.noovi-hero-showcase{ background:transparent !important; box-shadow:none !important; border:0 !important; }
.noovi-hero-showcase img{ width:100% !important; height:auto !important; display:block; filter:drop-shadow(0 22px 42px rgba(0,0,0,.28)); }

/* =====================================================================
   12) Grosse Typo-Blöcke wie noovi.ch (Info-Cards / Hero-Copy)
   Info-Card-Titel ~40px, Fliesstext ~24px – das war der Haupt-Grund,
   warum die Seite „kleiner“ als das Original wirkte.
   ===================================================================== */
.noovi-page .noovi-info-card h3{ font-size:clamp(28px, 2.9vw, 40px) !important; line-height:1.1 !important; font-weight:600 !important; }
.noovi-page .noovi-info-card p{ font-size:clamp(18px, 1.55vw, 24px) !important; line-height:1.5 !important; }
.noovi-page .noovi-info-card .noovi-eyebrow{ font-size:clamp(15px, 1.15vw, 18px) !important; }
/* Hero: Titel etwas grösser, Lead-Absatz gut lesbar (noovi.ch-Gefühl) */
.noovi-page .noovi-hero-copy p{ font-size:clamp(18px, 1.4vw, 22px) !important; line-height:1.55 !important; }
.noovi-page .noovi-hero-trust{ font-size:clamp(15px, 1.1vw, 17px) !important; }
/* Section-Überschriften (Video/Partner/FAQ) auf volle 48px wie Original */
.noovi-page .noovi-section-head h2{ font-size:clamp(32px, 3.4vw, 48px) !important; line-height:1.12 !important; }

/* Partner-Laufband: Logos gross + farbig, doppelt so schnell, KEINE Hover-Effekte
   ausser einer minimalen Anhebung (zur Orientierung), kein Pause-on-Hover. */
/* 1:1 wie noovi.ch: weisse, abgerundete Kachel (bg weiss, radius 24px, px16/py8),
   Logo in voller Farbe, object-contain, ~160px breit; kein Schatten/Rand. */
body .nv35-partners .noovi-marquee-track .noovi-logo-pill{ flex:0 0 192px !important; width:192px !important; height:82px !important; background:#fff !important; border:0 !important; border-radius:24px !important; padding:8px 16px !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; display:flex !important; align-items:center !important; justify-content:center !important; }
body .nv35-partners .noovi-marquee-track .noovi-logo-pill img{ max-height:100% !important; max-width:100% !important; width:auto !important; height:auto !important; object-fit:contain !important; filter:none !important; opacity:1 !important; }
/* Hover: nur leichte Anhebung, weisse Kachel bleibt */
body .nv35-partners .noovi-marquee-track .noovi-logo-pill:hover{ transform:translateY(-2px) !important; box-shadow:none !important; background:#fff !important; }
body .nv35-partners .noovi-marquee-track .noovi-logo-pill:hover img{ filter:none !important; opacity:1 !important; }
/* Laufband läuft beim Hover weiter (nicht mehr anhalten) */
body .nv35-partners .noovi-marquee:hover .noovi-marquee-track{ animation-play-state:running !important; }
@media(min-width:1024px){
	.noovi-page .nv35-partners .noovi-marquee-track{ animation-duration:8s !important; }
	.noovi-page .nv35-partners .noovi-marquee-row-2 .noovi-marquee-track{ animation-duration:9s !important; }
}
@media(max-width:1023px){
	.noovi-page .nv35-partners .noovi-marquee-track{ animation-duration:12s !important; }
}
@media(prefers-reduced-motion:reduce){
	.noovi-page .nv35-partners .noovi-marquee-track{ animation:none !important; }
}
/* „Alle Schnittstellen ansehen" – grösser & gut sichtbar */
.noovi-page .noovi-marquee-cta a, .nv35-partners .noovi-marquee-cta .btn-text{ font-size:19px !important; font-weight:600 !important; }
.noovi-marquee-cta{ margin-top:26px !important; }

/* =====================================================================
   16) Section-Abstände straffen (war ~90–120px → zu viel Scrollen).
   ===================================================================== */
.noovi-page .noovi-section{ padding-top:64px !important; padding-bottom:64px !important; }
.noovi-page .nv35-partners{ padding-top:58px !important; padding-bottom:52px !important; }
.noovi-page .nv35-testimonials{ padding-top:60px !important; padding-bottom:60px !important; }
.noovi-page .nv35-widget{ padding-top:60px !important; padding-bottom:64px !important; }
.noovi-page .nv35-faq{ padding-top:60px !important; padding-bottom:64px !important; }
.noovi-page .nv35-demo-cta{ padding-top:60px !important; padding-bottom:72px !important; }
.noovi-page .nv35-video-section{ padding-top:56px !important; padding-bottom:40px !important; }
@media(max-width:768px){
	.noovi-page .noovi-section, .noovi-page .nv35-partners, .noovi-page .nv35-testimonials,
	.noovi-page .nv35-widget, .noovi-page .nv35-faq, .noovi-page .nv35-demo-cta{ padding-top:44px !important; padding-bottom:44px !important; }
}

/* =====================================================================
   17) „Funktionen & Branchen"-Widget 1:1 an noovi.ch:
   heller Hintergrund, KEINE Card-Box, grosse Typo, grosses Bild,
   Chips grau mit Teal-Aktiv + dezentem Hover (Unterstrich) + Press-Scale.
   ===================================================================== */
/* Section bleibt petrol wie die Nachbarn (KEIN weisser Block); nur die Box weg */
.noovi-page .noovi-widget .noovi-widget-intro h2{ color:#ffffff !important; }
.noovi-page .noovi-widget .noovi-widget-intro p{ color:rgba(255,255,255,.85) !important; }
/* Die frosted-glass Box um das Widget entfernen (der „weisse transparente Hintergrund") */
.noovi-page .noovi-widget .noovi-widget-layout{ background:transparent !important; border:0 !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; padding:0 !important; }

/* SOLIDE weisse Card wie noovi.ch: dunkler Text, grosses Bild, weicher Schatten */
.noovi-page .noovi-widget .noovi-widget-card{
	min-height:0 !important; background:#ffffff !important; border:0 !important;
	box-shadow:0 20px 50px rgba(0,0,0,.16) !important; border-radius:22px !important; padding:44px !important;
	grid-template-columns:1fr 1fr !important; gap:40px !important; align-items:center !important; color:#1A1D1B !important;
}
.noovi-page .noovi-widget .noovi-widget-copy h3{ font-size:clamp(26px,2.4vw,32px) !important; font-weight:500 !important; color:#1A1D1B !important; margin:0 0 20px !important; line-height:1.15 !important; }
.noovi-page .noovi-widget .noovi-widget-copy p{ font-size:20px !important; line-height:1.5 !important; font-weight:400 !important; color:#3a423e !important; margin:0 0 28px !important; }
/* Bild gross wie im Original (~300px) */
.noovi-page .noovi-widget .noovi-widget-media{ display:flex !important; align-items:center !important; justify-content:center !important; }
.noovi-page .noovi-widget .noovi-widget-media img{ max-width:300px !important; width:100% !important; height:auto !important; }
.noovi-page .noovi-widget .noovi-media-fallback svg{ width:150px !important; height:150px !important; color:#1A1D1B !important; }

/* Chips wie noovi.ch: helle graue Pills, aktiver Chip Teal, dezenter Unterstrich-Hover */
/* Chips wie noovi.ch: Standard = dezenter grüner Hintergrund + weisse Schrift */
.noovi-page .noovi-widget .noovi-chip{ background:rgba(73,141,144,.45) !important; color:#ffffff !important; border:0 !important; border-radius:16px !important; padding:8px 16px !important; font-size:16px !important; font-weight:500 !important; text-shadow:none !important; transition:background-color .2s ease, color .2s ease, text-shadow .2s ease, transform .15s ease !important; }
/* Hover: nur etwas kräftigerer Hintergrund, KEIN oranger Text-Glow, Schrift weiss */
.noovi-page .noovi-widget .noovi-chip:hover{ background:rgba(73,141,144,.6) !important; color:#ffffff !important; text-decoration:none !important; text-shadow:none !important; }
.noovi-page .noovi-widget .noovi-chip:active{ transform:scale(.98) !important; }
/* Angewählt: weisser Hintergrund, schwarze Schrift, KEIN oranger Text-Glow */
.noovi-page .noovi-widget .noovi-chip.active{ background:#ffffff !important; color:#111111 !important; text-decoration:none !important; box-shadow:0 4px 14px rgba(0,0,0,.10) !important; text-shadow:none !important; }
.noovi-page .noovi-widget .noovi-chip.active:hover{ background:#ffffff !important; color:#111111 !important; }

@media(max-width:768px){
	.noovi-page .noovi-widget .noovi-widget-card{ grid-template-columns:1fr !important; gap:24px !important; padding:30px 24px !important; }
	.noovi-page .noovi-widget .noovi-widget-media img{ max-width:240px !important; }
}

/* =====================================================================
   18) Sticky-Header wie noovi.ch: obere Leiste („Von Handwerkern…") fährt
   beim Scrollen weg, die Navigation bleibt sichtbar.
   ===================================================================== */
.noovi-topbar{ transition:height .28s ease, opacity .2s ease, padding .28s ease, border-width .28s ease !important; overflow:hidden !important; }
body.noovi-scrolled .noovi-topbar{ height:0 !important; min-height:0 !important; padding-top:0 !important; padding-bottom:0 !important; opacity:0 !important; border-bottom-width:0 !important; }

/* =====================================================================
   13) Startseiten-Hero 1:1 an noovi.ch: H1 48px (schlägt die 36px-Kappung),
   Text-Spalte breiter (nicht 410px), Geräte-Bild etwas kleiner/rechtsbündig.
   ===================================================================== */
@media(min-width:1000px){
	body.home .noovi-hero-grid{ max-width:1400px !important; grid-template-columns:minmax(0,600px) minmax(0,1fr) !important; column-gap:8px !important; align-items:center !important; margin-inline:auto !important; overflow:visible !important; }
	/* Text im Vordergrund + volle Spaltenbreite, damit die Titelzeile nie abgeschnitten wird */
	body.home .noovi-hero-copy{ min-width:0 !important; padding-top:0 !important; position:relative !important; z-index:3 !important; }
	body.home .noovi-hero-copy h1{ font-size:48px !important; line-height:1.08 !important; font-weight:500 !important; }
	/* Titelzeilen nie umbrechen (Wechselwort + „Software für Schweizer") */
	body.home .noovi-hero-copy h1 .noovi-typewriter{ white-space:nowrap !important; }
	body.home .noovi-hero-copy p{ font-size:clamp(18px,1.35vw,21px) !important; line-height:1.55 !important; }
	/* Geräte-Bild grösser + etwas nach links gezogen (hinter dem Text), näher an „Zeitsparend." */
	body.home .noovi-hero-visual{ width:100% !important; position:relative !important; z-index:1 !important; overflow:visible !important; }
	body.home .noovi-hero-visual .noovi-device-composition{ max-width:840px !important; width:calc(100% + 60px) !important; margin-left:-60px !important; margin-right:0 !important; }
	/* Store-Badges kleiner */
	body.home .noovi-app-badges img{ height:38px !important; width:auto !important; }
}

/* =====================================================================
   14) Überschriften fix 48px auf Desktop (wie noovi.ch – NICHT fluid).
   Die Theme-Regeln setzen viele h2 als clamp(), die bei ~1200px auf
   ~41–46px schrumpfen. Hier fix auf 48px, um 1:1 zu noovi.ch zu sein.
   ===================================================================== */
@media(min-width:1000px){
	.noovi-page h1{ font-size:48px !important; line-height:1.1 !important; }
	/* Fliesstext generell ~20px wie noovi.ch (nicht kleiner runterskalieren) */
	.noovi-page p{ font-size:20px !important; line-height:1.6 !important; }
	.noovi-page h2,
	.noovi-page .noovi-section-head h2,
	.noovi-page .nv35-partners h2,
	.noovi-page .nv35-testimonials h2,
	.noovi-page .noovi-widget-intro h2,
	.noovi-page .nv35-widget h2,
	.noovi-page .noovi-faq h2,
	.noovi-page .nv35-faq .noovi-section-head h2,
	.noovi-page .noovi-widget h2{ font-size:48px !important; line-height:1.14 !important; }
	/* CTA-Karten-Titel bleiben etwas kleiner als Sektionen */
	.noovi-page .nv35-demo-cta .noovi-cta-card h2, .noovi-page .noovi-cta-card h2{ font-size:44px !important; }
	/* Info-Card-Titel fix 40px wie noovi.ch */
	.noovi-page .noovi-info-card h3{ font-size:40px !important; }
}
@media(min-width:1000px) and (max-width:1200px){
	/* etwas kompakter, aber weiterhin nah an 48px */
	.noovi-page h2, .noovi-page .noovi-section-head h2, .noovi-page .nv35-partners h2,
	.noovi-page .nv35-testimonials h2, .noovi-page .noovi-widget-intro h2,
	.noovi-page .nv35-widget h2, .noovi-page .noovi-faq h2, .noovi-page .noovi-widget h2{ font-size:44px !important; }
	.noovi-page h1{ font-size:46px !important; }
}

/* =====================================================================
   15) Feinschliff: Hero höher, App-Badges näher ans Bild, Card-Eyebrow-
   Abstand, Akzent-Span („90 Sekunden"), sanftes Einblenden beim Scrollen.
   ===================================================================== */
/* „90 Sekunden" orange wie noovi.ch */
.noovi-accent-orange{ color:var(--c-accent-orange) !important; }

@media(min-width:1000px){
	/* Hero höher ansetzen; Bild ist der Startpunkt (Spalten oben ausrichten) */
	body.home .noovi-hero{ padding-top:34px !important; }
	body.home .noovi-hero-grid{ align-items:start !important; }
	/* App-Badges (iOS/Android) gehören zum Bild → näher heranziehen */
	body.home .noovi-hero-visual{ justify-content:flex-start !important; }
	body.home .noovi-hero-visual .noovi-app-badges{ margin-top:-46px !important; }
}

/* Info-Cards: mehr Luft zwischen Eyebrow und Titel (überall gleich) */
.noovi-page .noovi-info-card .noovi-eyebrow{ display:block !important; margin-bottom:16px !important; }

/* Sanftes Einblenden beim Scrollen – nimmt die Steifheit raus */
.noovi-reveal{ opacity:0; transform:translateY(26px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); will-change:opacity,transform; }
.noovi-reveal.is-in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .noovi-reveal{ opacity:1 !important; transform:none !important; transition:none !important; } }

/* =====================================================================
   19) Footer grösser wie noovi.ch (viel Platz nutzen) + 4-Spalten-Grid
   (die „Rechtliches"-Spalte wurde entfernt; Legal bleibt in der Bottom-Bar).
   ===================================================================== */
@media(min-width:981px){
	.noovi-ftr .noovi-ftr-grid{ grid-template-columns:1.15fr .8fr 1.4fr 2.2fr .82fr !important; gap:32px 30px !important; align-items:start !important; }
}
/* Branchen/Funktionen: alle Einträge, luftig wie noovi.ch.
   Branchen 2-spaltig, Funktionen 3-spaltig (20 Einträge → ausgewogene Höhe). */
.noovi-ftr .noovi-ftr-col--links2 a{ font-size:20px !important; }
@media(min-width:1200px){
	.noovi-ftr .noovi-ftr-col--links2 ul{ column-count:2; column-gap:26px; }
	.noovi-ftr .noovi-ftr-col--links3 ul{ column-count:3 !important; column-gap:26px; }
	.noovi-ftr .noovi-ftr-col--links2 li, .noovi-ftr .noovi-ftr-col--links3 li{ break-inside:avoid; }
}
@media(min-width:981px) and (max-width:1199px){
	.noovi-ftr .noovi-ftr-col--links2 ul{ column-count:2; column-gap:20px; }
	.noovi-ftr .noovi-ftr-col--links3 ul{ column-count:2 !important; column-gap:20px; }
}
/* Footer-Accordion: Desktop = statische Spalte (JS hält [open]), Mobile = einklappbar */
.noovi-ftr .noovi-ftr-acc{ margin:0; }
.noovi-ftr .noovi-ftr-acc-sum{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.noovi-ftr .noovi-ftr-acc-sum::-webkit-details-marker{ display:none; }
.noovi-ftr .noovi-ftr-acc-sum h3{ margin:0 0 16px !important; }
.noovi-ftr .noovi-ftr-acc-ic{ display:none; }
@media(min-width:981px){
	.noovi-ftr .noovi-ftr-acc-sum{ cursor:default; }
}
@media(max-width:980px){
	.noovi-ftr .noovi-ftr-acc{ border-bottom:1px solid rgba(255,255,255,.12); }
	.noovi-ftr .noovi-ftr-acc-sum h3{ font-size:21px !important; margin:0 !important; padding:14px 0 !important; }
	.noovi-ftr .noovi-ftr-col h3{ font-size:22px !important; }
	.noovi-ftr .noovi-ftr-acc-ic{ display:block; width:11px; height:11px; border-right:2px solid #cdd9d9; border-bottom:2px solid #cdd9d9; transform:rotate(45deg); transition:transform .2s ease; margin-bottom:6px; flex:0 0 auto; }
	.noovi-ftr .noovi-ftr-acc[open] .noovi-ftr-acc-ic{ transform:rotate(-135deg); margin-top:6px; margin-bottom:0; }
	.noovi-ftr .noovi-ftr-col--links2 ul, .noovi-ftr .noovi-ftr-col--links3 ul{ column-count:1 !important; padding-bottom:10px; }
}
@media(min-width:641px) and (max-width:980px){
	.noovi-ftr .noovi-ftr-grid{ grid-template-columns:1fr 1fr 1fr !important; gap:32px !important; }
	.noovi-ftr .noovi-ftr-brand{ grid-column:1 / -1 !important; }
}
/* Überschriften 1:1 wie noovi.ch: 32px / 600 */
.noovi-ftr .noovi-ftr-col h3{ font-size:32px !important; font-weight:600 !important; line-height:1.15 !important; margin:0 0 20px !important; letter-spacing:0 !important; }
.noovi-ftr .noovi-ftr-acc-sum h3{ font-size:32px !important; font-weight:600 !important; line-height:1.15 !important; }
/* Links 1:1 wie noovi.ch: 20px / 400 */
.noovi-ftr .noovi-ftr-col ul a, .noovi-ftr .noovi-ftr-col li a{ font-size:20px !important; font-weight:400 !important; line-height:1.4 !important; }
.noovi-ftr .noovi-ftr-col li{ margin:5px 0 !important; }
.noovi-ftr .noovi-ftr-claim{ font-size:17px !important; line-height:1.6 !important; max-width:320px !important; }
.noovi-ftr .noovi-ftr-util-contact a.noovi-ftr-ico-line{ font-size:16px !important; }
.noovi-ftr .noovi-ftr-util-apps img{ height:44px !important; }
.noovi-ftr .noovi-ftr-soc svg{ width:22px !important; height:22px !important; }
.noovi-ftr .noovi-ftr-bottom{ font-size:15px !important; }
.noovi-ftr .noovi-ftr-legal a{ font-size:15px !important; }
/* Logo, Social & Google-Rating deutlich grösser */
.noovi-ftr .noovi-ftr-logo-img{ height:90px !important; max-width:400px !important; }
.noovi-ftr .noovi-ftr-social{ grid-template-columns:repeat(3,48px) !important; gap:12px !important; }
.noovi-ftr .noovi-ftr-soc{ width:48px !important; height:48px !important; }
.noovi-ftr .noovi-ftr-soc svg{ width:24px !important; height:24px !important; }
.noovi-ftr .noovi-grating{ font-size:17px !important; padding:10px 16px !important; gap:10px !important; }
.noovi-ftr .noovi-grating-g{ width:28px !important; height:28px !important; }
.noovi-ftr .noovi-grating-g svg{ width:18px !important; height:18px !important; }
.noovi-ftr .noovi-grating-stars{ font-size:18px !important; }
.noovi-ftr .noovi-grating strong{ font-size:18px !important; }
/* Support-Block mit Öffnungszeiten */
.noovi-ftr .noovi-ftr-support{ margin-top:22px; }
.noovi-ftr .noovi-ftr-support h4{ font-size:22px !important; font-weight:600 !important; color:#fff !important; margin:0 0 10px !important; }
.noovi-ftr .noovi-ftr-hours{ color:#cdd9d9 !important; font-size:16px !important; line-height:1.95 !important; }
.noovi-ftr .noovi-ftr-hours span{ display:inline-block; min-width:82px; color:#fff; font-weight:500; }
@media(max-width:560px){ .noovi-ftr .noovi-ftr-logo-img{ height:48px !important; } }

/* =====================================================================
   20) Detailseiten-Feinschliff: Rahmen-Ausrichtung, Badges links, grössere
   Body-Schrift, grössere Video-Facade – bündig zum Content-Container.
   ===================================================================== */
/* Hero-Content exakt auf Container-Breite bringen (war 1160 vs 1200) */
.noovi-page .noovi-subpage-hero-grid{ max-width:var(--container-max) !important; margin-inline:auto !important; padding-inline:var(--gutter) !important; box-sizing:border-box; }
@media(min-width:600px){ .noovi-page .noovi-subpage-hero-grid{ padding-inline:var(--gutter-md) !important; } }
@media(min-width:1024px){ .noovi-page .noovi-subpage-hero-grid{ padding-inline:var(--gutter-lg) !important; } }
@media(min-width:1440px){ .noovi-page .noovi-subpage-hero-grid{ padding-inline:var(--gutter-xl) !important; } }
.noovi-page .noovi-subpage-hero{ padding-left:0 !important; padding-right:0 !important; }

/* App-Badges im Hero linksbündig (nicht zentriert) */
.noovi-page .noovi-subpage-hero .noovi-app-badges{ justify-content:flex-start !important; }

/* Body-/Inhaltstext grösser (mind. wie Startseiten-Kacheln) */
.noovi-page .noovi-info-text{ font-size:clamp(19px,1.35vw,21px) !important; line-height:1.7 !important; }
.noovi-page .noovi-info-text p{ font-size:inherit !important; line-height:1.7 !important; }
.noovi-page .noovi-info-text li{ font-size:clamp(18px,1.25vw,20px) !important; }
.noovi-page .noovi-feature-card p{ font-size:clamp(17px,1.2vw,19px) !important; line-height:1.6 !important; }
.noovi-page .noovi-subpage-hero p{ font-size:clamp(19px,1.5vw,22px) !important; }

/* Video-Facade im Funktions-Hero grösser (näher an noovi.ch) */
@media(min-width:1000px){
	.single-funktion .noovi-subpage-hero-grid{ grid-template-columns:minmax(0,1fr) minmax(0,620px) !important; column-gap:clamp(32px,4vw,48px) !important; align-items:center !important; }
	.single-funktion .noovi-subpage-hero .noovi-device-composition{ max-width:100% !important; width:100% !important; }
	.single-funktion .noovi-subpage-hero .nv35-video-card{ width:100% !important; max-width:100% !important; }
}

/* =====================================================================
   21) Navigation + Mega-Menü 1:1 an noovi.ch (Top-Nav 20px, Dropdown 18px,
   breites Panel, Hover-Öffnung) + bessere Lesbarkeit der Fliesstexte.
   ===================================================================== */
@media(min-width:1051px){
	.noovi-menu-link.noovi-menu-link{ font-size:20px !important; font-weight:500 !important; gap:8px !important; }
	.noovi-caret{ font-size:14px !important; }
	.noovi-dropdown{ width:min(1120px, calc(100vw - 48px)) !important; padding:30px 34px 26px !important; border-radius:0 0 16px 16px !important; }
	.noovi-dropdown-grid{ grid-template-columns:repeat(3, 1fr) !important; gap:8px 40px !important; }
	.noovi-dropdown-link{ font-size:18px !important; font-weight:500 !important; min-height:36px !important; padding:8px 10px !important; gap:12px !important; }
}

/* Fliesstext auf Detailseiten: lesbare Zeilenlänge + Luft, damit lange Texte
   nicht als „Wand" wirken. */
.noovi-page .noovi-info-text{ max-width:72ch; margin-inline:auto; }
.noovi-page .noovi-info-text p{ margin:0 0 1.15em !important; }
.noovi-page .noovi-info-text h2, .noovi-page .noovi-info-text h3{ margin-top:1.5em !important; margin-bottom:.5em !important; }
.noovi-page .noovi-info-text ul, .noovi-page .noovi-info-text ol{ margin:0 0 1.15em 1.1em; }

/* =====================================================================
   Sektion 23 – Mega-Menü Item-Grösse 1:1 wie noovi.ch (18px).
   Nötig, weil noovi-consolidated.css die Items via doppelter Klasse
   (.noovi-dropdown-link.noovi-dropdown-link{15px}) kleiner erzwingt.
   Höhere Spezifität (0,3,x) + spätere Ladereihenfolge gewinnt – nur Desktop. */
@media(min-width:1051px){
	.noovi-dropdown .noovi-dropdown-link.noovi-dropdown-link{ font-size:18px !important; line-height:1.5 !important; min-height:40px !important; }
}

/* =====================================================================
   Sektion 22 – Header-Feinschliff
   ===================================================================== */
/* #2 GAP-Fix: Mega-Menü immer bündig unter der Nav öffnen – auch wenn die
   Topbar beim Scrollen (body.noovi-scrolled) auf height:0 einklappt.
   top:100% = Unterkante des sticky <header>, passt sich beiden Zuständen an. */
body .noovi-dropdown{ top:100% !important; }

/* #3 Zentrierung: Topbar-Inhalt (Help-Center/Login) im selben zentrierten
   Container wie die Nav halten, sonst läuft er bei starkem Zoom/breiten
   Viewports an den Bildschirmrand statt gemittet zu bleiben. */
/* Topbar: VOLLBREITE orange Linie (durchgezogen wie noovi.ch), aber Inhalt
   (Text + Help-Center/Login) auf Container-Breite eingerückt. Full-bleed-Bar-
   Trick: 100% breit, seitliches Padding = (100% - 1240)/2, Border spannt komplett. */
.noovi-topbar{ max-width:none !important; width:100% !important; margin:0 !important; box-sizing:border-box !important;
	padding-left:max(26px, calc((100% - 1240px) / 2)) !important;
	padding-right:max(26px, calc((100% - 1240px) / 2)) !important;
	border-bottom:1.5px solid var(--nv-orange) !important; }
body.noovi-scrolled .noovi-topbar{ border-bottom-width:0 !important; }
/* Help-Center / Login grösser (16px wie Original) + Slash-Trenner dazwischen */
.noovi-topbar-links{ font-size:16px !important; align-items:center !important; gap:0 !important; }
.noovi-topbar-links a{ font-size:16px !important; font-weight:500 !important; padding:0 4px !important; }
.noovi-topbar-links a + a::before{ content:"|"; color:rgba(73,141,144,.7); margin:0 12px 0 8px; font-weight:400; }
/* alte Trennlinie (border-left) entfernen, falls vorhanden */
.noovi-topbar-login{ border-left:0 !important; padding-left:4px !important; }

/* =====================================================================
   Sektion 24 – Globale Typo-Skala 1:1 wie noovi.ch (Desktop).
   noovi.ch (gemessen live): Section-Titel h2 48px/600, Unter-/Kartentitel
   h3 40px/600, FLIESSTEXT/Lead durchgängig 24px/500, FAQ-Frage 24px.
   Bisher war der Fliesstext staging-weit nur 18–20px → hier auf 24px.
   Spezifischere Komponenten (Testimonials, Widget-Cards, Eyebrows) haben
   eigene Regeln und bleiben unberührt. Nur ≥1000px, damit Mobile schlank bleibt. */
@media(min-width:1000px){
	/* Hero-Lead */
	.noovi-page .noovi-hero-copy p,
	body.home .noovi-hero-copy p{ font-size:24px !important; line-height:1.45 !important; }
	/* Allgemeiner Fliesstext */
	.noovi-page p{ font-size:24px !important; line-height:1.5 !important; }
	.noovi-lead{ font-size:24px !important; line-height:1.5 !important; }
	/* Detailseiten-Fliesstext */
	.noovi-page .noovi-info-text,
	.noovi-page .noovi-info-text p,
	.noovi-page .noovi-info-text li{ font-size:24px !important; line-height:1.6 !important; }
	/* FAQ: Frage 24px, Antwort 20px – wie Original */
	.noovi-faq-item summary,
	.nv35-faq .noovi-faq-item summary{ font-size:24px !important; }
	.noovi-faq-item p{ font-size:20px !important; line-height:1.55 !important; }
}

/* =====================================================================
   Sektion 25 – Neuer Footer (.nvf) nach Design-Handoff „Moderner Website
   Footer". High-fidelity: Farben/Typo/Abstände 1:1 aus der Referenz.
   Ersetzt den alten .noovi-ftr Footer. ===================================== */
.nvf{ background:#17292b !important; color:#e6eeed; padding:0 clamp(20px,5vw,80px); width:100%; box-sizing:border-box; margin-top:clamp(56px,7vw,96px); font-family:'Exo 2',system-ui,sans-serif; }
.nvf *{ box-sizing:border-box; }
.nvf-inner{ max-width:1280px; margin:0 auto; }
.nvf a{ color:#b9cbc9; text-decoration:none; transition:color .15s ease, background-color .15s ease, border-color .15s ease; }
.nvf a:hover{ color:#ffffff; }

/* CTA-Band */
.nvf-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; padding:52px 0 48px; border-bottom:1px solid rgba(255,255,255,.1); }
.nvf-cta-txt{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.nvf-cta-title{ margin:0 !important; font-family:'Exo 2',sans-serif; font-size:clamp(26px,3vw,38px) !important; font-weight:700 !important; line-height:1.15 !important; color:#fff !important; }
.nvf-cta-sub{ margin:0 !important; font-size:18px !important; color:#a9bfbd !important; line-height:1.5 !important; }
.nvf-cta-btns{ display:flex; flex-wrap:wrap; gap:12px; }
.nvf-btn{ display:inline-flex; align-items:center; height:52px; padding:0 28px; border-radius:999px; font-weight:600; font-size:16px; }
.nvf-btn--primary{ background:#E8883A; color:#17292b !important; }
.nvf-btn--primary:hover{ background:#f29b52; color:#17292b !important; }
.nvf-btn--ghost{ border:1px solid rgba(255,255,255,.28); color:#fff !important; }
.nvf-btn--ghost:hover{ background:rgba(255,255,255,.08); color:#fff !important; }

/* Hauptgrid */
.nvf-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:48px 40px; padding:64px 0 56px; }
.nvf-brand{ display:flex; flex-direction:column; gap:24px; min-width:0; grid-column:span 2; }
.nvf-logo{ width:min(320px,100%); height:auto; display:block; }
.nvf-claim{ margin:0 !important; font-size:17px !important; line-height:1.55 !important; color:#a9bfbd !important; max-width:320px; }
.nvf-rating{ display:inline-flex; align-items:center; gap:10px; align-self:flex-start; height:50px; padding:0 20px 0 12px; border-radius:999px; border:1px solid rgba(255,255,255,.28); color:#fff !important; }
.nvf-rating:hover{ border-color:#fff; }
.nvf-rating-g{ width:30px; height:30px; border-radius:50%; background:#fff; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.nvf-rating-stars{ color:#F5B400; letter-spacing:1px; font-size:16px; line-height:1; }
.nvf-rating-val{ font-weight:700; font-size:18px; color:#fff; }
.nvf-social{ display:flex; flex-wrap:wrap; gap:10px; }
.nvf-soc{ width:48px; height:48px; border-radius:10px; background:rgba(255,255,255,.08); display:inline-flex; align-items:center; justify-content:center; color:#fff !important; }
.nvf-soc:hover{ background:rgba(73,141,144,.45); color:#fff !important; }
.nvf-soc svg{ width:22px; height:22px; fill:currentColor; }

/* Link-Spalten */
.nvf-col{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.nvf-col--fn{ grid-column:span 2; }
.nvf-col-title{ margin:0 0 12px !important; font-family:'Exo 2',sans-serif; font-size:22px !important; font-weight:700 !important; color:#fff !important; line-height:1.2 !important; letter-spacing:0 !important; }
.nvf-col-title--sub{ margin:26px 0 12px !important; }
.nvf-col a, .nvf-fn-grid a{ font-size:16px !important; line-height:1.4 !important; color:#b9cbc9 !important; font-weight:400 !important; }
.nvf-col a:hover, .nvf-fn-grid a:hover{ color:#fff !important; }
.nvf-fn-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px 28px; }

/* Support-/App-Zeile */
.nvf-support{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px 40px; padding:36px 0; border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); align-items:center; }
.nvf-support-contact{ display:flex; flex-direction:column; gap:8px; }
.nvf-support-title{ font-family:'Exo 2',sans-serif; font-size:22px; font-weight:700; color:#fff; }
.nvf-support-lines{ display:flex; flex-wrap:wrap; gap:6px 20px; font-size:16px; }
.nvf-support-lines a{ color:#fff !important; font-weight:600; }
.nvf-hours{ display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:15px; color:#a9bfbd; align-self:center; }
.nvf-hours-label{ color:#e6eeed; font-weight:500; }
.nvf-apps{ display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-start; }
.nvf-apps img{ height:44px; width:auto; display:block; border-radius:7px; }

/* Legal-Zeile */
.nvf-legal{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; padding:24px 0 30px; font-size:13px; color:#8fa6a4; }
.nvf-legal-left{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; }
.nvf-legal-swiss{ display:inline-flex; align-items:center; gap:7px; }
.nvf-flag{ width:14px; height:14px; border-radius:3px; background:#d52b1e; display:inline-grid; place-items:center; color:#fff; font-size:11px; font-weight:700; line-height:1; }
.nvf-legal-links{ display:flex; flex-wrap:wrap; gap:18px; }
.nvf-legal-links a{ color:#8fa6a4 !important; }
.nvf-legal-links a:hover{ color:#fff !important; }

@media(max-width:600px){
	.nvf-cta{ padding:40px 0 36px; }
	.nvf-grid{ gap:36px 28px; padding:44px 0 40px; }
	.nvf-brand, .nvf-col--fn{ grid-column:1 / -1; }
	.nvf-legal{ justify-content:flex-start; }
}

/* Footer-Spalten: Desktop voll ausgelistet; Mobile als Accordion (einklappbar),
   Inhalte als anklickbare Chips mit feinem Rahmen im 2-spaltigen Raster. */
.nvf-facc{ display:flex; flex-direction:column; gap:12px; }
.nvf-facc > summary{ list-style:none; }
.nvf-facc > summary::-webkit-details-marker{ display:none; }
.nvf-facc > summary::marker{ content:''; }
@media(min-width:601px){
	/* Desktop: kein Toggle, immer offen. */
	.nvf-facc > summary{ cursor:default; pointer-events:none; }
}
@media(max-width:600px){
	.nvf-grid--top{ gap:0 !important; }
	.nvf-facc{ display:grid !important; grid-template-columns:1fr 1fr; gap:10px; align-content:start; border-top:1px solid rgba(255,255,255,.12); padding:2px 0; }
	.nvf-facc > summary{ grid-column:1 / -1; display:flex !important; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; padding:15px 2px; margin:0 !important; }
	.nvf-facc > summary::after{ content:''; width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .2s ease; flex:0 0 auto; margin-right:4px; opacity:.8; }
	.nvf-facc[open] > summary::after{ transform:rotate(-135deg); }
	.nvf-facc[open]{ padding-bottom:16px; }
	.nvf-facc > .nvf-fn-grid{ grid-column:1 / -1; }
	.nvf-fn-grid{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; }
	/* Anklickbare Chips mit feinem Rahmen */
	.nvf-facc > a,
	.nvf-fn-grid a{
		border:1px solid rgba(255,255,255,.24) !important;
		border-radius:10px !important;
		padding:11px 13px !important;
		display:flex !important;
		align-items:center !important;
		justify-content:flex-start !important;
		text-align:left !important;
		font-size:14px !important;
		line-height:1.25 !important;
		min-height:44px !important;
	}
	.nvf-facc > a:hover, .nvf-fn-grid a:hover,
	.nvf-facc > a:active, .nvf-fn-grid a:active{ border-color:rgba(255,255,255,.55) !important; background:rgba(255,255,255,.06) !important; }
}

/* =====================================================================
   Sektion 26 – Mehr Luft zwischen Hero/App-Badges und „90 Sekunden"-Section. */
.noovi-page .nv35-video-section{ padding-top:112px !important; }
@media(max-width:768px){
	.noovi-page .nv35-video-section{ padding-top:64px !important; }
}

/* =====================================================================
   Sektion 29 – Detailseiten (Funktion/Branche) an noovi.ch + Body angleichen:
   h1 fix 48px (statt clamp bis 55/60), Hero-Lead 24px, und Hero-Content
   bündig zum Body-Container (Section 24px + Gutter). */
@media(min-width:1000px){
	.noovi-page .noovi-subpage-hero h1{ font-size:48px !important; line-height:1.08 !important; font-weight:600 !important; }
	.noovi-page .noovi-subpage-hero p{ font-size:24px !important; line-height:1.5 !important; }
	.noovi-page .noovi-subpage-hero-grid{ padding-inline:72px !important; }
}
@media(min-width:1440px){
	.noovi-page .noovi-subpage-hero-grid{ padding-inline:88px !important; }
}
@media(min-width:600px) and (max-width:999px){
	.noovi-page .noovi-subpage-hero-grid{ padding-inline:56px !important; }
}

/* =====================================================================
   Sektion 28 – EINHEITLICHER Container auf ALLEN Seiten (1:1 wie noovi.ch).
   noovi.ch: jede Content-Section 1280px zentriert, identische Ränder links/
   rechts. Vorher kappten Module unterschiedlich (Info-Card 1060, Widget 1120,
   Testimonials 1180, Feature/Preis/Whitelabel 1160 …) → ungleiche Ränder.
   Alle Section-Wrapper füllen jetzt den EINEN .noovi-container (1280). */
@media(min-width:1000px){
	/* Section-Container einheitlich 1280 zentriert */
	.noovi-page .nv35-testimonials .noovi-container,
	.noovi-page .noovi-widget .noovi-container,
	.noovi-page .noovi-faq .noovi-container{ max-width:var(--container-max) !important; margin-inline:auto !important; }
	/* Innere Content-Module füllen den Container (gleiche Kanten überall) */
	.noovi-page .noovi-info-stack,
	.noovi-page .noovi-widget-layout,
	.noovi-page .nv35-testimonial-grid,
	.noovi-page .noovi-feature-grid,
	.noovi-page .noovi-price-panel,
	.noovi-page .noovi-whitelabel{ max-width:none !important; width:100% !important; margin-inline:auto !important; }
}

/* =====================================================================
   Sektion 27 – Hero-Proportionen 1:1 wie noovi.ch (weniger überfüllt).
   Original: Container 1280, Text/Bild ~50/50, Bild ~624px, schöner Rand.
   Vorher: Grid 1400 breit + Bild bis 840px mit -60px Overhang → zu eng. */
@media(min-width:1000px){
	body.home .noovi-hero{ padding-left:clamp(24px,4vw,48px) !important; padding-right:clamp(24px,4vw,48px) !important; }
	/* Bildspalte breiter (Bild ~20% grösser); unten-rechts verankert → wächst nach oben/links, nicht nach unten */
	body.home .noovi-hero-grid{ max-width:1280px !important; grid-template-columns:minmax(0,1fr) minmax(0,1.32fr) !important; column-gap:40px !important; align-items:center !important; margin-inline:auto !important; }
	body.home .noovi-hero-visual{ justify-content:flex-end !important; align-self:start !important; }
	body.home .noovi-hero-visual .noovi-device-composition{ max-width:none !important; width:100% !important; margin-left:auto !important; margin-right:-28px !important; }
	/* Dezenter Zoom NUR wenn direkt auf dem Bild (nicht auf der Fläche/Badges) */
	body.home .noovi-hero-visual .noovi-device-composition img{ transition:transform .4s ease !important; transform-origin:top right; }
	body.home .noovi-hero-visual .noovi-device-composition img:hover{ transform:scale(1.07) !important; }
}

/* =====================================================================
   Sektion 30 – Footer WEISS (1:1 wie noovi.ch), Header-Logo im Footer,
   kein Petrol-Streifen über dem Footer, oranger Fade am Kontakt-Widget. */
/* Streifen weg: die margin-top am Footer zeigte den flachen Body-Petrol
   (andere Farbe als der Verlauf im Content). Footer schliesst bündig an. */
.nvf{ margin-top:0 !important; background:#ffffff !important; color:#1a1d1b !important; }
.nvf a{ color:#3a423e; }
.nvf a:hover{ color:#17292b; }
/* Header-Logo im Footer (petrol) statt weissem Wortmark */
.nvf .nvf-logo{ width:auto !important; height:80px !important; max-width:360px !important; display:block; }
/* Spaltentitel + Links dunkel */
.nvf .nvf-col-title{ color:#17292b !important; }
.nvf .nvf-col a, .nvf .nvf-fn-grid a{ color:#3a423e !important; }
.nvf .nvf-col a:hover, .nvf .nvf-fn-grid a:hover{ color:#17292b !important; }
.nvf .nvf-claim{ color:#5b6763 !important; }
/* Google-Rating Pille auf hell */
.nvf .nvf-rating{ border-color:rgba(0,0,0,.2) !important; color:#17292b !important; }
.nvf .nvf-rating:hover{ border-color:#17292b !important; }
.nvf .nvf-rating-val{ color:#17292b !important; }
/* Social-Icons: helle Kachel, dunkles Icon, Petrol-Hover */
.nvf .nvf-soc{ background:rgba(0,0,0,.06) !important; color:#17292b !important; }
.nvf .nvf-soc:hover{ background:#498D90 !important; color:#ffffff !important; }
/* Support-/App-Zeile: Trennlinien dunkel */
.nvf .nvf-support{ border-top-color:rgba(0,0,0,.12) !important; border-bottom-color:rgba(0,0,0,.12) !important; }
.nvf .nvf-support-title{ color:#17292b !important; font-size:26px !important; margin-bottom:6px !important; }
/* Telefon + Mail untereinander, gleich gross, mit klickbarem Icon */
.nvf .nvf-support-lines{ display:flex !important; flex-direction:column !important; gap:12px !important; align-items:flex-start !important; }
.nvf .nvf-support-lines a{ display:inline-flex !important; align-items:center !important; gap:10px !important; color:#17292b !important; font-size:18px !important; font-weight:600 !important; }
.nvf .nvf-support-lines a:hover{ color:#498D90 !important; }
.nvf .nvf-support-lines a:hover .nvf-support-ico{ color:#498D90 !important; }
.nvf .nvf-support-ico{ display:inline-flex !important; color:#498D90 !important; flex:0 0 auto; }
.nvf .nvf-hours{ color:#5b6763 !important; }
.nvf .nvf-hours-label{ color:#17292b !important; }
/* Gratis-Support in der Brand-Spalte (unter Google-Rating), Zeiten | Kontakt nebeneinander */
.nvf .nvf-brand-support{ display:flex !important; flex-direction:column !important; gap:14px !important; margin-top:16px !important; }
.nvf .nvf-brand-support .nvf-support-title{ font-size:20px !important; font-weight:700 !important; color:#17292b !important; margin:0 !important; }
.nvf .nvf-brand-support .nvf-support-row{ display:flex !important; gap:28px !important; flex-wrap:wrap !important; align-items:flex-start !important; }
.nvf .nvf-brand-support .nvf-hours{ display:grid !important; grid-template-columns:auto auto !important; gap:6px 14px !important; font-size:14px !important; color:#5b6763 !important; align-content:start !important; }
.nvf .nvf-brand-support .nvf-hours .nvf-hours-label{ font-weight:700 !important; color:#17292b !important; }
.nvf .nvf-brand-support .nvf-support-lines{ display:flex !important; flex-direction:column !important; gap:8px !important; align-items:flex-start !important; }
.nvf .nvf-brand-support .nvf-support-lines a{ display:inline-flex !important; align-items:center !important; gap:9px !important; color:#17292b !important; font-size:15px !important; font-weight:700 !important; }
.nvf .nvf-brand-support .nvf-support-lines a:hover{ color:#498D90 !important; }
.nvf .nvf-brand-support .nvf-support-lines a:hover .nvf-support-ico{ color:#498D90 !important; }
.nvf .nvf-brand-support .nvf-support-ico{ display:inline-flex !important; color:#498D90 !important; flex:0 0 auto !important; }
.nvf .nvf-brand-support .nvf-apps{ display:flex !important; gap:12px !important; flex-wrap:wrap !important; margin-top:20px !important; }
.nvf .nvf-brand-support .nvf-apps img{ height:40px !important; width:auto !important; }
/* Legal-Zeile */
.nvf .nvf-legal{ color:#6b756f !important; }
.nvf .nvf-legal-links a{ color:#8a938f !important; }
.nvf .nvf-legal-links a:hover{ color:#17292b !important; }

/* Hero-Titel kräftiger (Exo 600) wie noovi.chs Titel – vorher 500 (zu dünn). */
body.home .noovi-hero-copy h1,
body.home .noovi-hero-copy h1 .noovi-typewriter{ font-weight:600 !important; }

/* =====================================================================
   Sektion 31 – Verbindliche Titel-Hierarchie 1:1 wie noovi.ch, auf ALLEN
   Seiten: nur H1/H2 (48px), H3 (40px), Text (24px), Sekundär (20px).
   Alle Titel Exo 600 (fett) – keine dünnen/uneinheitlichen Gewichte mehr. */
@media(min-width:1000px){
	/* H1 + H2 = 48px / 600 */
	.noovi-page h1, .noovi-hero h1, .noovi-subpage-hero h1,
	body.home .noovi-hero-copy h1{ font-size:48px !important; font-weight:600 !important; }
	.noovi-page h2,
	.noovi-page .nv35-widget h2, .noovi-page .noovi-widget h2,
	.noovi-page .noovi-faq h2, .noovi-page .nv35-faq .noovi-section-head h2,
	.noovi-page .nv35-testimonials h2,
	.noovi-page .nv35-demo-cta h2{ font-size:48px !important; font-weight:600 !important; line-height:1.12 !important; }
	/* H3 (grosse Section-Untertitel) = 40px / 600 */
	.noovi-page .noovi-info-card h3,
	.noovi-page .noovi-section > .noovi-container > h3,
	.noovi-page .noovi-section-head h3{ font-size:40px !important; font-weight:600 !important; line-height:1.1 !important; }
	/* Alle übrigen Titel ebenfalls fett (600), Grösse bleibt komponentenspezifisch */
	.noovi-page h1, .noovi-page h2, .noovi-page h3, .noovi-page h4{ font-weight:600 !important; }
}

/* Kontakt-Widget unten rechts: leichter oranger Fade rundherum, damit es
   auch auf dem weissen Footer sichtbar bleibt. */
.noovi-contact-fab, .noovi-contact .noovi-contact-fab{
	box-shadow:0 0 0 3px rgba(232,136,58,.30), 0 6px 18px rgba(232,136,58,.45), 0 2px 8px rgba(0,0,0,.15) !important;
}

/* =====================================================================
   Sektion 32 – Hero-Bild auf Mobile/Tablet sichtbar halten.
   Bug: unter 1050px blendete das CSS das Desktop-Geräte-Bild aus und wollte
   ein „noovi-hero-mobimg" zeigen, das im Markup gar nicht existiert → Bild
   verschwand komplett. Fix: echtes Geräte-Bild mobil zeigen (Bild zuerst). */
@media(max-width:1050px){
	body.home .noovi-hero-visual .noovi-device-composition,
	body.home .noovi-hero-visual .noovi-device-composition img{ display:block !important; width:100% !important; height:auto !important; }
	body.home .noovi-hero-visual .noovi-device-composition{ max-width:560px !important; margin:0 auto !important; }
	body.home .noovi-hero-visual img.noovi-hero-mobimg{ display:none !important; }
}

/* =====================================================================
   Sektion 33 – Header-Restruktur: Funktionen · Branchen · Preise · Wissen · Über uns.
   Schnittstellen & Integrationen als eigener Abschnitt im Funktionen-Menü,
   neues kompaktes „Wissen"-Dropdown. */
@media(min-width:1051px){
	/* Schnittstellen-Abschnitt im Funktionen-Dropdown */
	.noovi-dropdown--funktionen .noovi-dd-schnitt{ margin-top:20px !important; padding-top:18px !important; border-top:1px solid #e6ecec !important; }
	.noovi-dd-schnitt-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid #e6ecec; }
	.noovi-dd-schnitt-title{ font-size:18px !important; font-weight:600 !important; color:#17292b !important; }
	.noovi-dd-schnitt-all{ font-size:15px !important; font-weight:600 !important; color:var(--c-primary, #498d90) !important; text-decoration:none !important; white-space:nowrap; }
	.noovi-dd-schnitt-all:hover{ color:var(--c-accent-orange, #E8883A) !important; }
	.noovi-dd-schnitt-links{ display:flex; flex-wrap:wrap; gap:10px 12px; }
	.noovi-dd-schnitt-links a{ font-size:16px !important; font-weight:500 !important; color:#33413f !important; text-decoration:none !important; padding:8px 16px !important; border:1px solid #e0e7e7 !important; border-radius:999px !important; background:#f6f9f9 !important; transition:all .15s ease; }
	.noovi-dd-schnitt-links a:hover{ border-color:var(--c-primary,#498d90) !important; color:var(--c-primary,#498d90) !important; background:#fff !important; }
	.noovi-dd-schnitt-links a.noovi-dd-schnitt-more{ background:transparent !important; border-style:dashed !important; }

	/* „Wissen"-Dropdown: kompakt, direkt unter dem Menüpunkt */
	.noovi-menu-item:has(.noovi-dropdown--wissen){ position:relative; }
	.noovi-dropdown--wissen{ left:0 !important; right:auto !important; transform:none !important; width:360px !important; max-width:calc(100vw - 48px) !important; padding:14px !important; }
	.noovi-dd-wissen{ display:flex; flex-direction:column; gap:2px; }
	.noovi-dd-wissen-item{ display:flex; flex-direction:column; gap:2px; padding:11px 14px !important; border-radius:10px !important; text-decoration:none !important; transition:background .15s ease; }
	.noovi-dd-wissen-item:hover{ background:rgba(73,141,144,.08) !important; }
	.noovi-dd-wissen-t{ font-size:17px !important; font-weight:600 !important; color:#17292b !important; }
	.noovi-dd-wissen-d{ font-size:14px !important; color:#6b7773 !important; }
}

/* =====================================================================
   Sektion 34 – Header-Fixes: Dropdown-Clipping, Reihenfolge, Wissen-Gruppierung.
   - Dropdowns dürfen NICHT clippen (vorher max-height + overflow:visible →
     letzte Elemente ohne weissen Hintergrund). Weisser Kasten wächst mit. */
@media(min-width:1051px){
	.noovi-dropdown{ max-height:none !important; overflow:visible !important; }

	/* Wissen-Dropdown flush (li volle Nav-Höhe → kein Versatz/GAP) */
	.noovi-menu-item:has(.noovi-dropdown--wissen){ align-self:stretch; }
	.noovi-menu-item:has(.noovi-dropdown--wissen) > .noovi-menu-link{ display:flex; align-items:center; height:100%; }
	/* „Vergleiche"-Untertitel + kompakte Vergleich-Items */
	.noovi-dd-wissen-sub{ font-size:13px !important; font-weight:700 !important; letter-spacing:.06em; text-transform:uppercase; color:#8a938f !important; margin:12px 14px 4px !important; padding-top:12px !important; border-top:1px solid #eef2f2; }
	.noovi-dd-wissen-item.noovi-dd-wissen-cmp{ padding:8px 14px !important; }
	.noovi-dd-wissen-cmp .noovi-dd-wissen-t{ font-size:16px !important; font-weight:500 !important; }
}

/* =====================================================================
   Sektion 35 – Funktionen-Dropdown: KI-Items als normale (orange akzentuierte)
   Grid-Einträge, engeres Raster (Zeilen näher zusammen), Branchen ohne Umbruch. */
@media(min-width:1051px){
	/* Menü darf volle Breite nutzen (JS-820px-Zwang entfernt) */
	.noovi-dropdown--funktionen{ width:min(1120px, calc(100vw - 48px)) !important; max-width:none !important; }
	/* Kompakteres Raster: Zeilen deutlich näher (Funktionen + Branchen synchron) */
	.noovi-dropdown--funktionen .noovi-dropdown-grid,
	.noovi-dropdown--branchen .noovi-dropdown-grid{ gap:2px 40px !important; }
	.noovi-dropdown .noovi-dropdown-link.noovi-dropdown-link{ min-height:0 !important; padding:6px 10px !important; line-height:1.3 !important; }
	/* KI-Funktionen: normales Grid-Item, orange akzentuiert. WICHTIG: Gradient-Text
	   aufheben (-webkit-text-fill-color), sonst ist der Text unsichtbar. */
	.noovi-dropdown-grid .noovi-ki-highlight,
	.noovi-dropdown-grid .noovi-ki-highlight:link{ background:transparent !important; background-image:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important; color:var(--c-accent-orange,#E8883A) !important; -webkit-text-fill-color:var(--c-accent-orange,#E8883A) !important; font-weight:600 !important; }
	.noovi-dropdown-grid .noovi-ki-highlight .noovi-dd-ico,
	.noovi-dropdown-grid .noovi-ki-highlight .noovi-dd-ico svg,
	.noovi-dropdown-grid .noovi-ki-highlight .noovi-dd-ico svg *{ color:var(--c-accent-orange,#E8883A) !important; -webkit-text-fill-color:var(--c-accent-orange,#E8883A) !important; fill:var(--c-accent-orange,#E8883A) !important; }
	.noovi-dropdown-grid .noovi-ki-highlight:hover{ background:rgba(232,136,58,.10) !important; color:var(--c-accent-orange,#E8883A) !important; -webkit-text-fill-color:var(--c-accent-orange,#E8883A) !important; }
	.noovi-dropdown-grid .noovi-ki-badge{ background:var(--c-accent-orange,#E8883A) !important; color:#fff !important; -webkit-text-fill-color:#fff !important; margin-left:8px; }
	/* Branchen: keine Zweizeiler – Labels immer einzeilig */
	.noovi-dropdown--branchen .noovi-dropdown-link{ white-space:nowrap !important; }
}

/* =====================================================================
   Sektion 36 – „Funktionen"-Titel über dem Raster (wie Schnittstellen-Titel)
   + EINHEITLICHER Hover in allen Header-Menüs: oranger Unterstrich statt Fläche. */
@media(min-width:1051px){
	.noovi-dropdown--funktionen .noovi-dd-fn-head,
	.noovi-dropdown--branchen .noovi-dd-fn-head{ margin:0 0 14px !important; padding-bottom:12px !important; border-bottom:1px solid #e6ecec !important; }

	/* Hover überall: oranges LEUCHTEN direkt auf den Buchstaben (Text-Glow),
	   Textfarbe bleibt gleich, kein Ring, keine Fläche, kein Unterstrich. */
	.noovi-dropdown .noovi-dropdown-link.noovi-dropdown-link:hover,
	.noovi-dropdown .noovi-dropdown-link.noovi-dropdown-link:focus,
	.noovi-dropdown--wissen .noovi-dd-wissen-item:hover .noovi-dd-wissen-t{
		background:transparent !important;
		box-shadow:none !important;
		text-decoration:none !important;
		text-shadow:0 0 8px rgba(232,136,58,.9), 0 0 2px rgba(232,136,58,.7) !important;
	}
	.noovi-dropdown--wissen .noovi-dd-wissen-item:hover{ background:transparent !important; box-shadow:none !important; }
	/* Text-/Iconfarbe beim Hover unverändert (dunkel) */
	.noovi-dropdown .noovi-dropdown-link:hover{ color:#17292b !important; -webkit-text-fill-color:#17292b !important; }
	/* KI-Funktionen: Text bleibt orange, Glow ebenfalls */
	.noovi-dropdown-grid .noovi-ki-highlight:hover{ color:#E8883A !important; -webkit-text-fill-color:#E8883A !important; text-shadow:0 0 8px rgba(232,136,58,.6) !important; }
}

/* =====================================================================
   Sektion 37 – Top-Nav: Hover/offen = Noovi-Grün (statt orange), Klick ohne
   Sprung, Caret als grösserer Chevron (dreht beim Öffnen → zeigt „offen"). */
@media(min-width:1051px){
	.noovi-site-header .noovi-menu-link:hover,
	.noovi-menu-item:hover .noovi-menu-link{ color:#498d90 !important; }
	/* Klick/Fokus färbt NICHT grün und zeigt keinen Fokus-Kasten (nur Hover ist grün). */
	.noovi-site-header .noovi-menu-link:focus,
	.noovi-site-header .noovi-menu-link:focus-visible{ color:inherit !important; outline:none !important; }
	.noovi-menu-link[href="#"]{ cursor:pointer; }

	/* Caret = Chevron (grösser, wie noovi.ch), erbt Linkfarbe */
	.noovi-menu-link .noovi-caret{
		display:inline-block !important; width:9px !important; height:9px !important; font-size:0 !important;
		border:0 !important; border-right:2.5px solid currentColor !important; border-bottom:2.5px solid currentColor !important;
		transform:rotate(45deg) !important; margin:-4px 0 0 3px !important;
		transition:transform .2s ease, margin .2s ease;
	}
	.noovi-menu-item:hover .noovi-caret{ transform:rotate(-135deg) !important; margin:2px 0 0 3px !important; }
}
/* Footer-Link-Hover nicht orange (Konsolidated-Regel übersteuern) */
.nvf a:hover{ color:#17292b !important; }

/* =====================================================================
   Sektion 38 – Funktionen & Branchen 100% identisch: gleiche Panel-Breite
   (Konsolidated setzte Branchen auf 780, Funktionen auf 1120) + gleiches Raster.
   Klick öffnet/schliesst (is-open), Hover öffnet weiterhin. */
@media(min-width:1051px){
	.noovi-dropdown--funktionen,
	.noovi-dropdown--branchen{ width:min(960px, calc(100vw - 48px)) !important; max-width:none !important; }
	.noovi-dropdown--funktionen .noovi-dropdown-grid,
	.noovi-dropdown--branchen .noovi-dropdown-grid{ grid-template-columns:repeat(3, 1fr) !important; column-gap:20px !important; row-gap:2px !important; }
	/* Untermenüs öffnen NUR per Hover (Klick ist deaktiviert). Immer nur das
	   gehoverte Menü ist offen → keine Überlappung. */
	.noovi-site-header .noovi-menu-item:hover > .noovi-dropdown{ display:block !important; }
}

/* =====================================================================
   Sektion 39 – Branchen-Dropdown mit echten (avif) Branchen-Icons +
   CTA-Zeile zwischen Video und „Von Handwerkern für Handwerker". */
@media(min-width:1051px){
	.noovi-dropdown--branchen .noovi-dd-ico--img{ width:28px !important; height:28px !important; display:inline-flex !important; align-items:center; justify-content:center; flex:0 0 auto; }
	.noovi-dropdown--branchen .noovi-dd-ico--img img{ width:26px; height:26px; object-fit:contain; display:block; }
}
.noovi-cta-line{ text-align:center; padding:24px 24px 8px; }
.noovi-cta-line .noovi-section-head{ margin:0 auto; }
.noovi-cta-line .noovi-section-head h2{ color:#ffffff !important; }

/* =====================================================================
   Sektion 40 – avif-Icons in BEIDEN Dropdowns + Branche/Funktion-Umschalter
   invertieren (aktiver Tab = Noovi-Grün, inaktiv = hell). Gilt überall. */
@media(min-width:1051px){
	.noovi-dropdown--funktionen .noovi-dd-ico--img{ width:28px !important; height:28px !important; display:inline-flex !important; align-items:center; justify-content:center; flex:0 0 auto; }
	.noovi-dropdown--funktionen .noovi-dd-ico--img img{ width:26px; height:26px; object-fit:contain; display:block; }
}
/* Umschalter: aktiver Tab grün, inaktiv hell (vorher umgekehrt) */
.noovi-widget-tabs button{ background:#eef4f4 !important; color:#17292b !important; }
.noovi-widget-tabs button.active{ background:#498d90 !important; color:#ffffff !important; }

/* =====================================================================
   Sektion 42 – Hero-Titel „Software für Schweizer" einzeilig +
   solide (schwarze) Funktions-Icons wie bei den Branchen. */
body.home .noovi-hero-copy h1 .noovi-hero-l1{ white-space:nowrap !important; }
@media(min-width:1051px){
	.noovi-dropdown--funktionen .noovi-dd-ico--solid{ width:28px !important; height:28px !important; display:inline-flex !important; align-items:center; justify-content:center; flex:0 0 auto; color:#111 !important; }
	.noovi-dropdown--funktionen .noovi-dd-ico--solid svg{ width:24px !important; height:24px !important; display:block; }
	/* KI-Funktionen: Icon orange */
	.noovi-dropdown--funktionen .noovi-ki-highlight .noovi-dd-ico--solid{ color:#E8883A !important; }
}

/* =====================================================================
   Sektion 41 – Header bei knapper Breite (z. B. 110% Zoom): „Über uns"
   einzeilig, Menüpunkte etwas kompakter, CTA-Buttons mit Luft (nicht angedockt). */
.noovi-menu-link{ white-space:nowrap !important; }
@media(min-width:1051px) and (max-width:1340px){
	.noovi-site-header .noovi-menu{ column-gap:14px !important; }
	.noovi-site-header .noovi-menu-link{ font-size:17px !important; }
	.noovi-site-header .noovi-nav-actions{ gap:10px !important; margin-left:14px !important; }
	.noovi-site-header .noovi-nav-btn{ padding-left:16px !important; padding-right:16px !important; }
}

/* =====================================================================
   Sektion 44 – Feinschliff:
   1) Hero-Bild: ab ~110% Zoom KEINE Hover-Vergrösserung mehr
      (JS setzt body.noovi-zoom-hi ab Zoom >= 108%).
   2) Democall-Button in der Demo-CTA-Karte = solides Grün (wie andere Seiten).
   3) Widget-Button „Mehr erfahren": beim Hover orange LEUCHTEN am Text,
      nicht die ganze Fläche orange füllen. */
body.noovi-zoom-hi .noovi-hero-visual .noovi-device-composition img:hover{ transform:none !important; }

.noovi-cta-card .noovi-btn-teal,
.noovi-cta-card a.noovi-btn-teal{ background:var(--c-primary,#498d90) !important; color:#fff !important; border-color:var(--c-primary,#498d90) !important; }
.noovi-cta-card .noovi-btn-teal:hover{ background:var(--c-primary-dark,#3c777a) !important; color:#fff !important; }

.noovi-widget-card .noovi-btn-outline-dark,
.noovi-widget-card .noovi-btn-outline-dark:focus{
	background:transparent !important; background-color:transparent !important;
	color:#1A1D1B !important;
	border:1px solid #1A1D1B !important;
	box-shadow:none !important; transform:none !important; text-shadow:none !important;
}
.noovi-widget-card .noovi-btn-outline-dark:hover{
	background:#FCE9CF !important; background-color:#FCE9CF !important;
	color:#1A1D1B !important;
	border-color:var(--c-accent-orange,#E8883A) !important;
	box-shadow:0 0 10px rgba(232,136,58,.45) !important; transform:none !important;
}

/* =====================================================================
   Sektion 45 – Dropdowns kompakter, damit sie (inkl. Schnittstellen)
   auch bei 100–120% Zoom auf einen Screen passen; Sicherheitsnetz:
   falls doch zu hoch -> im Dropdown selbst scrollen (Menü bleibt offen).
   Plus: Funktions-Icons leuchten beim Hover orange wie die Buchstaben. */
@media(min-width:1051px){
	.noovi-dropdown{ padding:14px 30px 16px !important; max-height:calc(100vh - 58px) !important; overflow-y:auto !important; overscroll-behavior:contain !important; }
	.noovi-dropdown .noovi-dropdown-link.noovi-dropdown-link{ padding:3px 10px !important; line-height:1.2 !important; min-height:0 !important; }
	.noovi-dropdown--funktionen .noovi-dropdown-grid,
	.noovi-dropdown--branchen .noovi-dropdown-grid{ row-gap:0 !important; }
	.noovi-dropdown--funktionen .noovi-dd-fn-head,
	.noovi-dropdown--branchen .noovi-dd-fn-head{ margin:0 0 8px !important; padding-bottom:8px !important; }
	.noovi-dropdown--funktionen .noovi-dd-schnitt{ margin-top:12px !important; padding-top:12px !important; }
	.noovi-dd-schnitt-head{ margin-bottom:8px !important; padding-bottom:8px !important; }
	.noovi-dropdown--wissen .noovi-dd-wissen-item{ padding-top:6px !important; padding-bottom:6px !important; }
	.noovi-dropdown--wissen .noovi-dd-wissen-sub{ margin-top:8px !important; margin-bottom:4px !important; }

	/* Icons bleiben beim Hover schwarz (kein oranges Leuchten) – nur der Text glüht. */
	.noovi-dropdown--funktionen .noovi-dropdown-link:hover .noovi-dd-ico--solid,
	.noovi-dropdown--funktionen .noovi-dropdown-link:hover .noovi-dd-ico--solid svg,
	.noovi-dropdown--funktionen .noovi-dropdown-link:hover .noovi-dd-ico--solid svg *{
		color:#111 !important; fill:#111 !important; filter:none !important;
	}
}

/* =====================================================================
   Sektion 46 – KI-Funktionen: KEIN Orange, sondern ein eigener „KI"-Look –
   violett→cyan Farbverlauf im Text + zweifarbiges Leuchten am Sparkle-Icon.
   Überschreibt alle Orange-Regeln (auch beim Hover). */
/* KEIN Gradient/Glow (das machte den Text unscharf) – stattdessen ein
   klares, sattes Violett + fette Schrift, damit KI sich sauber abhebt. */
.noovi-dropdown-grid a.noovi-ki-highlight,
.noovi-dropdown-grid a.noovi-ki-highlight:link,
.noovi-dropdown-grid a.noovi-ki-highlight:visited,
.noovi-dropdown-grid a.noovi-ki-highlight:focus{
	background:transparent !important; background-image:none !important;
	-webkit-background-clip:border-box !important; background-clip:border-box !important;
	color:#6D28D9 !important; -webkit-text-fill-color:#6D28D9 !important;
	font-weight:700 !important; text-shadow:none !important; filter:none !important;
}
/* Hover: kräftigeres Violett, weiterhin scharf (kein Glow) */
.noovi-dropdown-grid a.noovi-ki-highlight:hover{
	color:#7C3AED !important; -webkit-text-fill-color:#7C3AED !important;
	text-shadow:none !important; filter:none !important;
}
.noovi-dropdown--funktionen a.noovi-ki-highlight .noovi-dd-ico--solid,
.noovi-dropdown--funktionen a.noovi-ki-highlight .noovi-dd-ico--solid svg,
.noovi-dropdown--funktionen a.noovi-ki-highlight .noovi-dd-ico--solid svg *,
.noovi-dropdown--funktionen a.noovi-ki-highlight:hover .noovi-dd-ico--solid,
.noovi-dropdown--funktionen a.noovi-ki-highlight:hover .noovi-dd-ico--solid svg,
.noovi-dropdown--funktionen a.noovi-ki-highlight:hover .noovi-dd-ico--solid svg *{
	color:#6D28D9 !important; fill:#6D28D9 !important; filter:none !important;
}

/* =====================================================================
   Sektion 47 – Umschalter (Branchen/Funktionen): aktiver Tab = neutral hell,
   schwarze Schrift, KEIN oranger Rahmen. Container ohne orange Umrandung. */
.noovi-page .nv35-widget .noovi-widget-tabs,
.noovi-page .noovi-widget .noovi-widget-tabs,
.noovi-widget-tabs{ border-color:rgba(255,255,255,.22) !important; box-shadow:none !important; }
.noovi-page .nv35-widget .noovi-widget-tabs button.active,
.noovi-page .nv35-widget .noovi-widget-tabs button[aria-selected="true"],
.noovi-page .noovi-widget .noovi-widget-tabs button.active,
.noovi-page .noovi-widget .noovi-widget-tabs button[aria-selected="true"],
.noovi-widget-tabs button.active,
.noovi-widget-tabs button[aria-selected="true"]{
	background:#ffffff !important; color:#111111 !important;
	box-shadow:none !important;
	position:relative !important; z-index:2 !important;
}

/* =====================================================================
   Sektion 48 – Detailseiten-Hero (Funktion & Branche) responsiv.
   Ziel: Das Hero-Video/-Bild darf nie in den Text laufen.
   • ≥1025px: zweispaltig, Video-Spalte schrumpft mit (kein fixes 500px-Overlap).
   • ≤1024px (u.a. 100–125% Zoom / Mobile): gestapelt & zentriert – zuerst der
     komplette linke Textblock (H1, Text, Buttons, Badges) mittig, dann Video/Bild. */
/* CTA-Buttons in allen Content-Boxen (Funktion/Branche/Ratgeber/Schnittstellen/Vergleiche) IMMER mittig */
.noovi-seo-rich .wp-block-buttons,
.noovi-seo-rich-inner .wp-block-buttons,
.noovi-seopage .noovi-legal .wp-block-buttons{ display:flex !important; justify-content:center !important; flex-wrap:wrap !important; gap:14px !important; }
.noovi-seo-rich .wp-block-buttons > *,
.noovi-seo-rich-inner .wp-block-buttons > *{ margin:0 !important; }

@media(min-width:1025px){
	.single-funktion .noovi-subpage-hero-grid,
	.single-branche .noovi-subpage-hero-grid{ align-items:start !important; }
	.single-funktion .noovi-subpage-hero-grid{ grid-template-columns:minmax(0,1fr) minmax(0,500px) !important; column-gap:clamp(28px,3.4vw,56px) !important; }
	.single-funktion .noovi-device-composition.noovi-has-video,
	.single-funktion .noovi-device-composition{ width:100% !important; max-width:500px !important; margin:0 0 0 auto !important; }
}
/* Gleicher Titel-Abstand zum Header auf ALLEN Detailseiten (Funktion = Branche). */
.single-funktion .noovi-subpage-hero,
.single-branche .noovi-subpage-hero{ padding-top:40px !important; }
.single-funktion .noovi-subpage-hero h1,
.single-branche .noovi-subpage-hero h1{ margin-top:0 !important; }
@media(max-width:1024px){
	.single-funktion .noovi-subpage-hero-grid,
	.single-branche .noovi-subpage-hero-grid{
		display:flex !important; flex-direction:column !important;
		align-items:center !important; text-align:center !important; gap:16px !important;
	}
	.single-funktion .noovi-subpage-hero-grid > div:first-child,
	.single-branche .noovi-subpage-hero-grid > div:first-child{
		display:block !important; order:1 !important; width:100% !important; max-width:680px !important; text-align:center !important; margin:0 auto !important;
	}
	.single-funktion .noovi-subpage-hero-grid .noovi-hero-actions,
	.single-branche .noovi-subpage-hero-grid .noovi-hero-actions{ justify-content:center !important; }
	.single-funktion .noovi-subpage-hero .noovi-app-badges,
	.single-branche .noovi-subpage-hero .noovi-app-badges{ justify-content:center !important; }
	.single-funktion .noovi-subpage-hero-grid .noovi-device-composition,
	.single-branche .noovi-subpage-hero-grid .noovi-device-composition{
		order:2 !important; display:block !important; width:100% !important; max-width:560px !important; margin:6px auto 0 !important; float:none !important;
	}
}

/* =====================================================================
   Sektion 58 – Mobile-Feinschliff Detailseiten:
   • Funktions-Video vertikal mittig zwischen der Trust-Zeile
     ("Über 1'000 KMUs …") und dem folgenden Text (symmetrische Abstände).
   • Branchen-Badges mehr Abstand zum Branchen-Foto. */
@media(max-width:1024px){
	.single-funktion .noovi-subpage-hero{ padding-bottom:0 !important; }
	.single-funktion .noovi-subpage-hero-grid{ gap:22px !important; }
	.single-funktion .noovi-subpage-hero-grid .noovi-device-composition,
	.single-funktion .noovi-subpage-hero-grid .noovi-device-composition.noovi-has-video{ margin:0 auto !important; }
	.single-funktion .noovi-subpage-hero + section{ padding-top:22px !important; }
	.single-branche .noovi-subpage-hero .noovi-branche-visual{ gap:28px !important; }
}

/* =====================================================================
   Sektion 49 – Content-Box der Detailseiten (.noovi-seo-rich):
   volle Breite (bündig mit H1/Video), eigener Titel, einheitliche Typo,
   Listenpunkte wie Fliesstext. */
.single-funktion .noovi-seo-rich .noovi-seo-rich-inner,
.single-branche .noovi-seo-rich .noovi-seo-rich-inner{ max-width:none !important; padding:34px clamp(24px,3vw,48px) !important; }
.noovi-seo-rich-title{ font-size:clamp(30px,3.4vw,44px) !important; font-weight:600 !important; letter-spacing:-.02em !important; line-height:1.12 !important; margin:0 0 20px !important; color:#ffffff !important; }
.noovi-seo-rich-inner, .noovi-seo-rich-inner p, .noovi-seo-rich-inner li{
	font-family:inherit !important; font-size:18px !important; line-height:1.7 !important; color:#e6eeee !important;
}
.noovi-seo-rich-inner h2{ font-family:inherit !important; font-size:24px !important; font-weight:600 !important; color:#ffffff !important; margin:26px 0 10px !important; }
.noovi-seo-rich-inner h3{ font-family:inherit !important; font-size:20px !important; font-weight:600 !important; color:#ffffff !important; margin:20px 0 8px !important; }
.noovi-seo-rich-inner ul, .noovi-seo-rich-inner ol{ padding-left:1.3em !important; margin:10px 0 !important; }
.noovi-seo-rich-inner li{ margin:5px 0 !important; }
.noovi-seo-rich-inner a{ color:var(--c-accent-orange,#E8883A) !important; }

/* =====================================================================
   Sektion 50 – Preise-Seite: Kontraste vereinheitlichen (kein Weiss-auf-Weiss,
   kein Dunkel-auf-Dunkel). Rechner = weisse Karte + dunkle Schrift,
   Whitelabel = weisse Karte + dunkle Schrift (wie die Plan-Karten). */
.noovi-price-hero .noovi-calc{
	background:#ffffff !important; border:1px solid #e6ecec !important; border-radius:18px !important;
	box-shadow:0 10px 30px rgba(16,24,20,.08) !important;
}
/* Whitelabel als dunkle Highlight-Karte (Premium-Look): petrol + oranger Akzent/Glow, weisse Schrift. */
.noovi-price-hero .noovi-whitelabel{
	background:#12312e !important;
	border:1px solid rgba(232,136,58,.55) !important; border-radius:20px !important;
	box-shadow:0 0 0 1px rgba(232,136,58,.30), 0 0 32px rgba(232,136,58,.22), 0 20px 54px rgba(0,0,0,.38) !important;
	margin-top:64px !important;
}
.noovi-price-hero .noovi-whitelabel .noovi-wl-app{ display:block !important; }
.noovi-price-hero .noovi-whitelabel,
.noovi-price-hero .noovi-whitelabel *{ color:#ffffff !important; }
.noovi-price-hero .noovi-whitelabel .noovi-plan-feat li,
.noovi-price-hero .noovi-whitelabel .noovi-wl-lead,
.noovi-price-hero .noovi-whitelabel p{ color:#dbe7e6 !important; }
.noovi-price-hero .noovi-whitelabel .noovi-plan-name{ color:#ffffff !important; }
.noovi-price-hero .noovi-whitelabel .noovi-wl-amt{ color:#ffffff !important; }
.noovi-price-hero .noovi-whitelabel .noovi-wl-once,
.noovi-price-hero .noovi-whitelabel .noovi-plan-per{ color:rgba(255,255,255,.72) !important; }
/* CTA im Whitelabel = noovi-grün (nur „Kostenlos testen" bleibt orange) */
.noovi-price-hero .noovi-whitelabel .noovi-wl-cta{ background:var(--c-primary,#498d90) !important; color:#ffffff !important; }
.noovi-price-hero .noovi-whitelabel .noovi-wl-cta:hover{ background:var(--c-primary-dark,#3c777a) !important; color:#ffffff !important; }

/* =====================================================================
   Sektion 51 – Über-uns Team-Karten: weisse Karten wie noovi.ch.
   Reihenfolge: Rolle (klein/grau) → Name (fett/dunkel) → Zitat. */
.noovi-team-card{
	background:#ffffff !important; border:1px solid #e6ecec !important;
	border-radius:18px !important; box-shadow:0 10px 30px rgba(16,24,20,.08) !important;
	overflow:hidden !important; padding:14px !important;
}
.noovi-team-card .noovi-team-photo{ aspect-ratio:4/5 !important; border-radius:12px !important; overflow:hidden !important; }
.noovi-team-card .noovi-team-photo img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:50% 12% !important; display:block !important; }
.noovi-team-card .noovi-team-body{ padding:14px 6px 4px !important; }
.noovi-team-card .noovi-team-role{ order:1 !important; margin:0 0 3px !important; color:#5c6b6b !important; font-size:13px !important; font-weight:600 !important; }
.noovi-team-card .noovi-team-body h3{ order:2 !important; margin:0 0 8px !important; color:#111111 !important; font-size:19px !important; font-weight:700 !important; }
.noovi-team-card .noovi-team-body > p,
.noovi-team-card .noovi-team-body > :not(h3):not(.noovi-team-role){ order:3 !important; margin-top:0 !important; color:#334155 !important; font-size:15px !important; line-height:1.55 !important; }
.noovi-team-card .noovi-team-link{ color:var(--c-primary,#498d90) !important; }
.noovi-team-card .noovi-team-link svg{ vertical-align:middle; }

/* =====================================================================
   Sektion 52 – Navigation DEFINITIV nur per Hover öffnen.
   Klick/Fokus (:focus-within) oder .is-open dürfen ein Dropdown NIE fixieren.
   Standard = geschlossen (!important schlägt jede Fokus-/is-open-Regel),
   nur das aktuell gehoverte Menü ist offen → keine Überlappung, kein Hängen. */
@media(min-width:1051px){
	.noovi-site-header .noovi-menu-item > .noovi-dropdown,
	.noovi-site-header .noovi-menu-item.is-open > .noovi-dropdown,
	.noovi-site-header .noovi-menu-item:focus-within > .noovi-dropdown{ display:none !important; }
	.noovi-site-header .noovi-menu-item:hover > .noovi-dropdown{ display:block !important; }
}

/* =====================================================================
   Sektion 53 – Vergleichsseiten: kurze Intro, echte Vergleichstabelle
   (weiss, noovi-Spalte dezent petrol), Beispiel-Karten. Mobile = gestapelt. */
.noovi-cmp-intro{ font-size:19px !important; line-height:1.6 !important; color:#e6eeee !important; max-width:760px !important; margin:0 0 26px !important; }
.noovi-cmp-table{ margin:0 0 8px !important; }
.noovi-cmp-table table{ width:100% !important; border-collapse:separate !important; border-spacing:0 !important; background:#fff !important; border-radius:16px !important; overflow:hidden !important; box-shadow:0 10px 30px rgba(16,24,20,.10) !important; }
.noovi-cmp-table th, .noovi-cmp-table td{ padding:14px 18px !important; text-align:left !important; font-size:15.5px !important; line-height:1.5 !important; vertical-align:top !important; border-bottom:1px solid #eef2f2 !important; color:#1f2b2b !important; }
.noovi-cmp-table thead th{ background:#f3f7f7 !important; font-weight:700 !important; font-size:15px !important; }
.noovi-cmp-table tbody td:first-child, .noovi-cmp-table thead th:first-child{ font-weight:700 !important; color:#14262a !important; }
.noovi-cmp-table td:last-child, .noovi-cmp-table th:last-child{ background:rgba(73,141,144,.10) !important; }
.noovi-cmp-table thead th:last-child{ background:rgba(73,141,144,.20) !important; color:#17403f !important; }
.noovi-cmp-table tr:last-child td{ border-bottom:0 !important; }
.noovi-cmp-table a{ color:#E8883A !important; }

.noovi-cmp-example{ margin:30px 0 0 !important; }
.noovi-cmp-example h2{ text-align:center !important; margin:0 0 6px !important; }
.noovi-cmp-cards{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:20px !important; margin-top:18px !important; }
.noovi-cmp-card{ background:#fff !important; border:1px solid #e6ecec !important; border-radius:16px !important; padding:22px !important; box-shadow:0 8px 24px rgba(16,24,20,.08) !important; }
.noovi-cmp-card h3{ margin:0 0 10px !important; font-size:18px !important; color:#14262a !important; }
.noovi-cmp-card ol{ margin:0 !important; padding-left:1.2em !important; }
.noovi-cmp-card li{ color:#334155 !important; font-size:15.5px !important; line-height:1.7 !important; }
.noovi-cmp-card--noovi{ border-color:rgba(73,141,144,.5) !important; box-shadow:0 10px 26px rgba(73,141,144,.18) !important; }
.noovi-cmp-card a{ color:#E8883A !important; }

@media(max-width:760px){
	.noovi-cmp-table thead{ display:none !important; }
	.noovi-cmp-table table, .noovi-cmp-table tbody, .noovi-cmp-table tr, .noovi-cmp-table td{ display:block !important; width:100% !important; }
	.noovi-cmp-table table{ background:transparent !important; box-shadow:none !important; }
	.noovi-cmp-table tr{ margin:0 0 16px !important; border:1px solid #e6ecec !important; border-radius:14px !important; overflow:hidden !important; background:#fff !important; }
	.noovi-cmp-table td{ border-bottom:1px solid #eef2f2 !important; }
	.noovi-cmp-table td:first-child{ background:#f3f7f7 !important; font-weight:700 !important; }
	.noovi-cmp-table td:last-child{ background:rgba(73,141,144,.10) !important; }
	.noovi-cmp-table td[data-label]::before{ content:attr(data-label); display:block; font-size:12px; font-weight:700; color:#5c6b6b; margin-bottom:4px; text-transform:uppercase; letter-spacing:.03em; }
	.noovi-cmp-cards{ grid-template-columns:1fr !important; }
}

/* =====================================================================
   Sektion 54 – EINHEITLICHE Section-Abstände auf ALLEN Seiten.
   Ein Standardwert: Header→erste Section, Section→Section, letzte Section→Footer. */
:root{ --nv-sec:64px; }
@media(max-width:768px){ :root{ --nv-sec:40px; } }
.noovi-page .noovi-section,
.noovi-page .nv35-video-section,
.noovi-page .noovi-cta-line,
.noovi-page .nv35-partners,
.noovi-page .nv35-testimonials,
.noovi-page .nv35-faq,
.noovi-page .nv35-demo-cta,
.noovi-page .noovi-hero,
.noovi-page .noovi-subpage-hero,
.noovi-page .noovi-price-hero,
.noovi-page .noovi-about-hero{ padding-top:var(--nv-sec) !important; padding-bottom:var(--nv-sec) !important; }
/* seopage-Hero (Ratgeber/Schnittstellen/Vergleiche) sitzt in erster Section – gleicher Abstand */
.noovi-seopage .noovi-page-hero{ margin-top:0 !important; }

/* =====================================================================
   Sektion 55 – Detailseiten-Hero (Funktion/Branche): CTA-Buttons + Google-Rating
   + Trust-Zeile im Freiraum zwischen Titel und Content – überall gleich. */
.noovi-subpage-hero .noovi-hero-actions{ margin-top:22px !important; display:flex; flex-wrap:wrap; gap:14px; }
.noovi-subpage-hero .noovi-hero-rating{ display:inline-flex !important; align-items:center; gap:9px; margin-top:18px; padding:8px 15px; border-radius:999px; border:1px solid rgba(255,255,255,.30); background:rgba(255,255,255,.06); color:#fff !important; text-decoration:none !important; width:max-content; max-width:100%; transition:border-color .15s, background .15s; }
.noovi-subpage-hero .noovi-hero-rating:hover{ border-color:#fff; background:rgba(255,255,255,.12); }
.noovi-subpage-hero .noovi-hero-rating-g{ display:inline-flex; background:#fff; border-radius:50%; padding:2px; }
.noovi-subpage-hero .noovi-hero-rating-stars{ color:#FBBC05; letter-spacing:1px; font-size:15px; }
.noovi-subpage-hero .noovi-hero-rating-val{ color:#fff !important; font-weight:700; }
.noovi-subpage-hero .noovi-hero-rating-txt{ color:rgba(255,255,255,.8); font-size:14px; }
.noovi-subpage-hero .noovi-hero-trust{ margin-top:16px; color:rgba(255,255,255,.85); font-size:15px; }

/* =====================================================================
   Sektion 56 – Branchen-Hero: echtes Foto (statt schwarzem Icon) + App-Badges. */
.noovi-subpage-hero .noovi-branche-visual{ display:flex !important; flex-direction:column; gap:16px; align-self:start; }
.noovi-subpage-hero .noovi-branche-photo{ border-radius:18px !important; overflow:hidden !important; aspect-ratio:3/2 !important; width:100% !important; max-width:none !important; margin:0 !important; box-shadow:0 16px 44px rgba(0,0,0,.25) !important; }
.noovi-subpage-hero .noovi-branche-photo img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
.noovi-page .noovi-subpage-hero .noovi-branche-badges{ display:flex !important; gap:14px; flex-wrap:wrap; align-items:center; justify-content:center !important; margin:0 !important; width:100% !important; }
.noovi-subpage-hero .noovi-branche-badges img{ height:46px !important; width:auto !important; }
@media(max-width:1024px){
	.single-branche .noovi-subpage-hero-grid .noovi-branche-visual{ order:2 !important; width:100% !important; max-width:560px !important; margin:6px auto 0 !important; }
	.single-branche .noovi-subpage-hero-grid .noovi-branche-badges{ justify-content:center !important; }
}
@media(max-width:768px){
	.single-branche .noovi-subpage-hero-grid .noovi-branche-visual,
	.single-branche .noovi-subpage-hero-grid .noovi-branche-photo{ display:block !important; }
}

/* =====================================================================
   Sektion 57 – Mobile: klareres Hero-Bild (ohne Sprechblasen) +
   Scroll-Lock bei offenem Hamburger-Menü. */
.noovi-hero-mobimg{ display:none; }
@media(max-width:768px){
	body.home .noovi-hero-visual img.noovi-hero-deskimg{ display:none !important; }
	body.home .noovi-hero-visual img.noovi-hero-mobimg{ display:block !important; width:100% !important; height:auto !important; max-width:none !important; margin:0 !important; }
	/* Hero-Bild zuoberst, gross, mit Seitenrand (nicht randberührend); danach Text, dann Badges. */
	body.home .noovi-hero-grid{ display:flex !important; flex-direction:column !important; }
	body.home .noovi-hero-visual{ display:contents !important; }
	body.home .noovi-hero-visual .noovi-device-composition{ order:-1 !important; width:100% !important; max-width:none !important; margin:0 -14px 10px !important; padding-inline:0 !important; box-sizing:border-box !important; }
	body.home .noovi-hero-copy{ order:1 !important; text-align:center !important; }
	body.home .noovi-hero-copy h1,
	body.home .noovi-hero-copy .noovi-typewriter,
	body.home .noovi-hero-copy p,
	body.home .noovi-hero-trust{ text-align:center !important; }
	body.home .noovi-hero-actions{ justify-content:center !important; }
	body.home .noovi-hero-visual .noovi-app-badges{ order:2 !important; margin-top:14px !important; justify-content:center !important; }
}
/* Hintergrund-Scroll sperren, wenn Mobile-Menü offen ist; nur das Menü scrollt. */
body.noovi-nav-open{ overflow:hidden !important; }
.noovi-mobile-nav{ overflow-y:auto !important; -webkit-overflow-scrolling:touch; overscroll-behavior:contain !important; }
/* Offenes Menü fix unter dem Header verankern – überall sichtbar, egal wie weit
   gescrollt wurde. --noovi-navtop = Header-Höhe (per JS gesetzt). */
/* Menü startet bei top:0 (Hintergrund füllt hinter dem Header), Header-Höhe nur als
   padding-top -> kein sichtbarer Gap oben, egal ob Topbar ein-/ausgeblendet ist. */
.noovi-mobile-nav.is-open{ position:fixed !important; left:0 !important; right:0 !important; top:0 !important; z-index:99998 !important; max-height:100dvh !important; padding-top:calc(var(--noovi-navtop, 69px) + 6px) !important; box-sizing:border-box !important; background:#fff !important; }
/* Wichtig: Der Scroll-Lock (body overflow:hidden) bricht position:sticky, dadurch
   verschwindet der Header. Solange das Menü offen ist, Header daher fix oben halten. */
body.noovi-nav-open .noovi-site-header{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; z-index:99999 !important; }

/* Kontakt-Widget als echtes Modal: über allem (auch über Header), mit Backdrop + Scroll-Lock. */
.noovi-contact.is-open{ z-index:100001 !important; }
.noovi-contact-backdrop{ position:fixed; inset:0; background:rgba(12,24,22,.5); opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; z-index:1; }
.noovi-contact.is-open .noovi-contact-backdrop{ opacity:1; visibility:visible; }
.noovi-contact .noovi-contact-panel{ z-index:3; }
.noovi-contact .noovi-contact-fab{ z-index:3; }
body.noovi-modal-open{ overflow:hidden !important; }

/* =====================================================================
   Sektion 59 – Testzugang: animierter Ablauf.
   Die Schritte leuchten nacheinander auf (Anmelden -> Zugangsdaten ->
   30 Tage testen -> selbst entscheiden), Verbindungslinien fuellen sich,
   der letzte Schritt feiert mit Herz ("im besten Fall fuer noovi"). */
.noovi-tz-steps .noovi-tz-line{ display:none !important; }
/* statische Vorab-Hervorhebung des 3. Schritts entfernen – Animation uebernimmt */
.noovi-tz-steps li:nth-child(3) .noovi-tz-ico{ background:rgba(255,255,255,.10) !important; border-color:rgba(255,255,255,.55) !important; box-shadow:none !important; }

.noovi-tz-ico{ transition:background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease !important; }
.noovi-tz-ico > svg{ transition:opacity .3s ease, transform .3s ease; }
.noovi-tz-step-t{ transition:color .3s ease; }

/* Check-Badge unten rechts am Icon */
.noovi-tz-check{ position:absolute; right:-4px; bottom:-4px; width:22px; height:22px; border-radius:999px; background:#2FBF71; color:#fff; display:grid; place-items:center; transform:scale(0); opacity:0; transition:transform .3s cubic-bezier(.2,1.3,.5,1), opacity .25s ease; box-shadow:0 3px 8px rgba(0,0,0,.28); }
.noovi-tz-check svg{ width:13px !important; height:13px !important; }

/* AKTIV: orange, groesser, pulsierend */
.noovi-tz-steps li.is-active .noovi-tz-ico{ background:var(--nv-orange) !important; border-color:var(--nv-orange) !important; color:#fff !important; transform:scale(1.14); animation:nooviTzPulse 1.2s ease-in-out infinite; }

/* ERLEDIGT: orange gefuellt + gruener Haken */
.noovi-tz-steps li.is-done .noovi-tz-ico{ background:var(--nv-orange) !important; border-color:var(--nv-orange) !important; color:#fff !important; box-shadow:0 8px 22px rgba(240,140,20,.35); }
.noovi-tz-steps li.is-done .noovi-tz-check{ transform:scale(1); opacity:1; }
.noovi-tz-steps li.is-done .noovi-tz-step-t{ color:#fff; }
/* Verbindungslinie faerbt sich, sobald der Schritt erledigt ist */
.noovi-tz-steps li.is-done::after{ background:var(--nv-orange) !important; }

@keyframes nooviTzPulse{ 0%,100%{ box-shadow:0 10px 26px rgba(240,140,20,.45);} 50%{ box-shadow:0 12px 32px rgba(240,140,20,.8);} }

/* Finaler Schritt: Herz statt Icon beim Feiern */
.noovi-tz-ico-heart{ position:absolute; inset:0; margin:auto; width:24px !important; height:24px !important; opacity:0; transform:scale(.4); color:var(--nv-orange); transition:opacity .35s ease, transform .35s cubic-bezier(.2,1.4,.5,1); }
.noovi-tz-final-step.is-celebrate .noovi-tz-ico{ background:#fff !important; border-color:#fff !important; box-shadow:0 12px 32px rgba(240,140,20,.6) !important; transform:scale(1.14); }
.noovi-tz-final-step.is-celebrate .noovi-tz-ico-decide{ opacity:0; transform:scale(.4); }
.noovi-tz-final-step.is-celebrate .noovi-tz-ico-heart{ opacity:1; transform:scale(1); animation:nooviTzHeart 1s ease-in-out infinite; }
.noovi-tz-final-step.is-celebrate .noovi-tz-check{ opacity:0 !important; transform:scale(0) !important; }
.noovi-tz-final-step .noovi-tz-step-t small{ transition:color .3s ease, opacity .3s ease; }
.noovi-tz-final-step.is-celebrate .noovi-tz-step-t small{ color:var(--nv-orange); opacity:1 !important; font-weight:700; }
@keyframes nooviTzHeart{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.2);} }

@media(prefers-reduced-motion: reduce){
	.noovi-tz-steps li .noovi-tz-ico{ animation:none !important; }
}

/* =====================================================================
   Sektion 60 – Startseite-Hero: App-Badges klickbar halten.
   Das Hero-Bild (mit Hover-Zoom) überlappte die App-Badges und fing die
   Klicks ab. Badges kommen per z-index über das Bild. */
body.home .noovi-hero-visual .noovi-app-badges{ position:relative !important; z-index:6 !important; }
body.home .noovi-hero-visual .noovi-app-badges a{ position:relative !important; z-index:6 !important; pointer-events:auto !important; }
body.home .noovi-hero-visual .noovi-device-composition{ z-index:2 !important; }

/* =====================================================================
   Sektion 61 – Mobile-Feinschliff Detailseiten (Override, hohe Spezifität):
   • Funktions-Video symmetrisch (weiter nach unten, näher zum Text darunter).
   • Branchen-Badges klar unter dem Foto (margin:0!important aus Sek.56 überschreiben). */
@media(max-width:1024px){
	body.single-funktion .noovi-subpage-hero{ padding-bottom:0 !important; }
	body.single-funktion .noovi-subpage-hero-grid{ gap:34px !important; }
	body.single-funktion .noovi-subpage-hero + section{ padding-top:34px !important; }
	body.single-branche .noovi-subpage-hero .noovi-branche-visual{ display:flex !important; flex-direction:column !important; }
	body.single-branche .noovi-subpage-hero .noovi-branche-badges{ margin-top:34px !important; }
}

/* =====================================================================
   Sektion 62 – Footer Desktop: "noovi" und "Vergleiche" stehen wie früher in
   EINER Spalte (Wrapper .nvf-colgroup), damit die Anordnung sauber bleibt:
   Brand · [noovi+Vergleiche] · Branchen · Funktionen. Auf Mobile löst sich der
   Wrapper auf (display:contents) → beide werden eigene Accordions. */
.nvf-colgroup{ display:flex; flex-direction:column; gap:26px; min-width:0; }
/* Wichtig: <details> gruppiert seinen Inhalt (::details-content) – dadurch flossen
   die Footer-Links nebeneinander. Ab Tablet die Links als Blöcke untereinander. */
@media(min-width:601px){
	.nvf-facc > a{ display:block !important; }
	.nvf-facc > a + a{ margin-top:12px !important; }
}
@media(min-width:1000px){
	.nvf-grid--top{ grid-template-columns:repeat(6,1fr) !important; align-items:start !important; }
	.nvf-grid--top .nvf-brand{ grid-column:span 2 !important; }
	.nvf-grid--top .nvf-col--fn{ grid-column:span 2 !important; }
	.nvf-grid--top .nvf-fn-grid{ grid-template-columns:repeat(2,1fr) !important; }
}
@media(min-width:601px) and (max-width:999px){
	.nvf-grid--top{ grid-template-columns:repeat(3,1fr) !important; align-items:start !important; }
	.nvf-grid--top .nvf-brand{ grid-column:1 / -1 !important; }
	.nvf-grid--top .nvf-col--fn{ grid-column:auto !important; }
}
@media(max-width:600px){
	.nvf-colgroup{ display:contents !important; }
}

/* =====================================================================
   Sektion 63 – Legal-Zeile (heller Footer) hübscher: feine Trennlinie oben,
   echtes Schweizer Kreuz, dezente Trenner zwischen den Rechtstexten,
   mobil sauber zentriert gestapelt. */
.nvf .nvf-legal{ display:flex !important; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 28px; margin-top:26px !important; padding:20px 0 4px !important; border-top:1px solid rgba(0,0,0,.10) !important; font-size:13.5px !important; color:#6b756f !important; }
.nvf .nvf-legal-left{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.nvf .nvf-legal-swiss{ display:inline-flex; align-items:center; gap:8px; }
.nvf .nvf-legal-swiss::before{ content:''; width:1px; height:14px; background:rgba(0,0,0,.16); margin-right:6px; }
.nvf .nvf-flag{ width:15px !important; height:15px !important; border-radius:3px !important; background:#d52b1e !important; position:relative; font-size:0 !important; flex:0 0 auto; }
.nvf .nvf-flag::before, .nvf .nvf-flag::after{ content:'' !important; position:absolute; background:#fff; border-radius:1px; }
.nvf .nvf-flag::before{ left:50%; top:3px; bottom:3px; width:3px; transform:translateX(-50%); }
.nvf .nvf-flag::after{ top:50%; left:3px; right:3px; height:3px; transform:translateY(-50%); }
.nvf .nvf-legal-links{ display:flex; flex-wrap:wrap; gap:0 !important; }
.nvf .nvf-legal-links a{ color:#6b756f !important; padding:4px 14px !important; position:relative; transition:color .15s ease; }
.nvf .nvf-legal-links a:first-child{ padding-left:0 !important; }
.nvf .nvf-legal-links a + a::before{ content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:13px; background:rgba(0,0,0,.16); }
.nvf .nvf-legal-links a:hover{ color:#17292b !important; }
@media(max-width:600px){
	.nvf .nvf-legal{ flex-direction:column; align-items:center; text-align:center; gap:14px; }
	.nvf .nvf-legal-left{ flex-direction:column; align-items:center; gap:10px; }
	.nvf .nvf-legal-swiss::before{ display:none; }
}

/* =====================================================================
   Sektion 64 – Ratgeber/Karten-Grid: alle Kacheln einheitlich hoch.
   Gleiche Zeilenhöhe (grid-auto-rows:1fr), Karten füllen die Zelle, CTA unten. */
.noovi-card-grid{ align-items:stretch !important; grid-auto-rows:1fr !important; }
.noovi-card-grid > *{ height:100% !important; }
.noovi-card--media{ display:flex !important; flex-direction:column !important; height:100% !important; }
.noovi-card--media .noovi-card-cta{ margin-top:auto !important; }