/* =========================================================
   LAYOUT – Header-Ergänzungen und Footer (Phase B)
   Wird seitenweit nach global.css geladen.
========================================================= */

/* ---------- Header: Aufbau wie Original (global.css) ---------- */

.mr-header .elementor-button:focus-visible,
.mr-header a:focus-visible {
  outline: 2px solid var(--mr-accent);
  outline-offset: 3px;
}

/* Kollisionsschutz Desktop: Logo und CTA behalten ihre Breite, die Navigation nimmt den Rest
   und bricht nie um. Ab 1024 px abwärts gilt weiterhin das mobile Menü (Popup). */
@media (min-width: 1025px) {
  /* Der Container ist "boxed": die Spalten liegen in .e-con-inner, daher Nachfahren- statt Kind-Selektor */
  .mr-header .mr-header__inner .mr-header__logo.e-con {
    --width: auto;
    flex: 0 0 auto;
  }

  .mr-header .mr-header__inner .mr-header__nav.e-con {
    --width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }

  .mr-header .mr-header__inner .mr-header__cta.e-con {
    --width: auto;
    flex: 0 0 auto;
  }

  .mr-header__nav .elementor-nav-menu--main > .elementor-nav-menu {
    flex-wrap: nowrap;
  }

  .mr-header__nav .elementor-nav-menu > li > .elementor-item,
  .mr-header__cta .elementor-button {
    white-space: nowrap;
  }
}

/* Kleine Laptops: etwas kompakter, damit alle Punkte inkl. Website-Check vollständig passen */
@media (min-width: 1025px) and (max-width: 1279px) {
  .mr-header .mr-header__inner.e-con.e-con-boxed,
  .mr-header .mr-header__inner.e-con > .e-con-inner {
    --gap: 16px;
    --column-gap: 16px;
    gap: 16px;
  }

  .mr-header__logo img {
    max-height: 36px;
  }

  .mr-header__nav .elementor-nav-menu {
    gap: 2px;
  }

  .mr-header__nav .elementor-nav-menu > li > .elementor-item {
    padding: 10px 10px !important;
    font-size: .9rem;
  }

  .mr-header__cta .elementor-button {
    padding-inline: 18px !important;
    font-size: .9rem;
  }
}

/* ---------- Icon-System Leistungen (wiederverwendbar, Shortcode [mr_service_icon]) ----------
   Ein Designsystem für alle Leistungs-Icons (Startseite und später Leistungsseiten).
   Alle Werte stehen zentral als Tokens auf :root; Komponenten ändern nur Tokens, nie Einzelwerte.
   Icons: hellblaue Line-SVGs im 24er Raster, Container: transparenter Blau→Violett-Verlauf.
   Hover/Fokus: Eltern-Element mit .mr-svc-host (oder .mr-hv2-card) – Icon wird heller und minimal größer. */

:root {
  --mr-svc-size: 52px;
  --mr-svc-size-sm: 44px;
  --mr-svc-glyph: 26px;
  --mr-svc-glyph-sm: 22px;
  --mr-svc-stroke: 1.75;
  --mr-svc-radius: 14px;
  --mr-svc-radius-sm: 12px;
  --mr-svc-color: #b9d0ff;
  --mr-svc-bg: linear-gradient(135deg, rgba(47, 124, 255, .22), rgba(124, 60, 255, .18));
  --mr-svc-border: 1px solid rgba(143, 182, 255, .22);
  --mr-svc-glow: 0 8px 24px rgba(47, 124, 255, .12);
  --mr-svc-hover-bg: rgba(255, 255, 255, .07);
  --mr-svc-hover-scale: 1.06;
  --mr-svc-dur: 260ms;
}

/* =========================================================
   DESIGNREGEL LINKS & ICONS (verbindlich für alle neuen Seiten, seit 2026-10-07)
   - Keine freistehenden oder dekorativen Pfeile (→ ↗ › ») als Interaktionsmuster.
   - Buttons: kein Zusatzpfeil. Interaktion über Lift, Farb-/Verlaufswechsel, Glow.
   - Telefon: Telefon-Icon + Nummer. Booking/Erstgespräch: Kalender-Icon + Text oder nur Button.
   - Textlinks: animierte Unterstreichung + leichte Farbänderung (.mr-hv2-link).
   - Richtungsicons nur, wenn nötig: kleines Chevron (interne Ziel-Karten) oder
     External-Link-Icon (externe Ziele, z. B. Referenz-Websites). Nicht automatisch überall.
   - Pfeile nur, wenn sie semantisch etwas erklären (z. B. Problem → Lösung).
   Icons als Masken-Tokens (Farbe = currentColor über background-color).

   LINK-SYSTEM / UNTERSTREICHUNG (seit 2026-10-07, zentral hier):
   - Unterstreichung NUR für echte Inline-Links im Fließtext (.text-link-inline bzw. Links
     in Text-Editor-Absätzen, Listen, FAQ-Antworten): 1px, dezente Farbe, keine Sweep-Animation.
   - KEINE Unterstreichung bei Buttons, Pills, Badges, Icon-Links, Telefon-/Booking-Links in
     CTA-Bereichen, Karten- und Standort-Links, Navigation, Footer, Referenzkarten, Overlays,
     externen Projektlinks (.pill-link, .card-link, .cta-link, .nav-link, .footer-link,
     Elementor-Widgets mit .mr-hv2-link). Stattdessen je Komponente eines davon:
     Farbwechsel, Icon-Farbe, Border/Background, minimaler Lift, leichter Glow.
========================================================= */
:root {
  --mr-ico-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 1.1 4.2 2 2 0 0 1 3.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L7 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
  --mr-ico-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");
  --mr-ico-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  --mr-ico-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E");
  --mr-link-line: rgba(143, 182, 255, .35);
  --mr-link-dur: 320ms;
  --mr-link-hover: #b9c6ff;
}

.text-link-inline {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--mr-link-line);
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}

.text-link-inline:hover,
.text-link-inline:focus-visible {
  text-decoration-color: currentColor;
}

.pill-link,
.card-link,
.cta-link,
.nav-link,
.footer-link,
.mr-hv2-link a,
.elementor-location-header a,
.elementor-location-footer a {
  text-decoration: none !important;
}

@media (max-width: 767px) {
  :root {
    --mr-svc-size: var(--mr-svc-size-sm);
    --mr-svc-glyph: var(--mr-svc-glyph-sm);
    --mr-svc-radius: var(--mr-svc-radius-sm);
  }
}

.mr-svc-icon {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--mr-svc-size);
  height: var(--mr-svc-size);
  border-radius: var(--mr-svc-radius);
  color: var(--mr-svc-color);
  line-height: 1;
  background: var(--mr-svc-bg);
  border: var(--mr-svc-border);
  box-shadow: var(--mr-svc-glow);
}

/* Nur Linien, nie gefüllt – auch falls andere Regeln SVGs einfärben */
.mr-svc-icon svg,
.mr-svc-icon svg * {
  fill: none !important;
  stroke: currentColor !important;
}

/* Aufhellung bei Hover/Fokus als eigene Ebene, damit nur opacity animiert wird */
.mr-svc-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--mr-svc-hover-bg);
  opacity: 0;
  transition: opacity var(--mr-svc-dur) ease;
  pointer-events: none;
}

.mr-svc-icon svg {
  display: block;
  width: var(--mr-svc-glyph);
  height: var(--mr-svc-glyph);
  margin: 0;
  stroke-width: var(--mr-svc-stroke);
  transition: transform var(--mr-svc-dur) cubic-bezier(.2, .7, .2, 1);
}

/* Gemeinsamer Hover/Fokus für jeden Icon-Träger (nur echte Maus, kein Touch-Hover) */
@media (hover: hover) and (pointer: fine) {
  :is(.mr-svc-host, .mr-hv2-card):hover .mr-svc-icon::after { opacity: 1; }
  :is(.mr-svc-host, .mr-hv2-card):hover .mr-svc-icon svg { transform: scale(var(--mr-svc-hover-scale)); }
}

:is(.mr-svc-host, .mr-hv2-card):has(a:focus-visible) .mr-svc-icon::after { opacity: 1; }
:is(.mr-svc-host, .mr-hv2-card):has(a:focus-visible) .mr-svc-icon svg { transform: scale(var(--mr-svc-hover-scale)); }

@media (prefers-reduced-motion: reduce) {
  .mr-svc-icon::after,
  .mr-svc-icon svg {
    transition: none;
  }
}

/* ---------- Footer ---------- */

.mr-footer.e-con {
  --kit-widget-spacing: 0px;
  padding-top: clamp(64px, 7vw, 104px);
  padding-bottom: 28px;
  background:
    radial-gradient(circle at 10% 0%, rgba(47,124,255,.12), transparent 40%),
    radial-gradient(circle at 92% 20%, rgba(124,60,255,.10), transparent 38%),
    var(--mr-bg, #070b18);
  border-top: 1px solid rgba(255,255,255,.07);
  color: #c9d3e8;
}

.mr-footer .e-con {
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
}

.mr-footer .elementor-widget:not(:last-child) { margin-block-end: 0; }
.mr-footer .elementor-widget-text-editor p { margin: 0; }

.mr-footer__inner.e-con {
  --width: min(calc(100% - (var(--mr-page-gutter) * 2)), var(--mr-container));
  --flex-direction: column;
  --container-widget-width: 100%;
}

.mr-footer__cols.e-con {
  --display: grid;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.25fr);
  gap: clamp(28px, 3.4vw, 56px);
  align-items: start;
}

/* Brand */
.mr-footer__logo img {
  display: block;
  width: auto !important;
  max-width: 170px !important;
  max-height: 44px;
  object-fit: contain;
}

.mr-footer__about {
  margin-top: 18px !important;
  max-width: 330px;
  color: #8f9bb4;
  font-size: .95rem;
  line-height: 1.65;
}

.mr-footer__person {
  margin-top: 18px !important;
  color: #c9d3e8;
  font-size: .92rem;
  line-height: 1.5;
}

.mr-footer__person strong { color: #fff; font-weight: 700; }

.mr-footer__rating { margin-top: 18px !important; }

.mr-footer .mr-footer-socials { margin-top: 20px !important; }

/* Spaltentitel */
.mr-footer__title .elementor-heading-title {
  margin: 0 0 16px;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: .78rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.3;
  color: #9fc2ff !important;
}

/* Linklisten */
.mr-footer__links .elementor-icon-list-items {
  display: grid;
  gap: 2px;
}

.mr-footer__links .elementor-icon-list-item {
  padding: 0 !important;
  margin: 0 !important;
}

.mr-footer__links .elementor-icon-list-item::after { display: none !important; }
.mr-footer__links .elementor-icon-list-icon { display: none !important; }

.mr-footer__links .elementor-icon-list-item a {
  display: inline-block;
  padding: 6px 0;
}

.mr-footer__links .elementor-icon-list-text {
  padding: 0 !important;
  color: #c9d3e8 !important;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.45;
  transition: color var(--mr-transition);
}

.mr-footer__links .elementor-icon-list-item a:hover .elementor-icon-list-text {
  color: #fff !important;
}

.mr-footer__links--more .elementor-icon-list-item:last-child .elementor-icon-list-text {
  color: #8fb6ff !important;
  font-weight: 650;
}

/* Kontakt */
.mr-footer__address {
  color: #c9d3e8;
  font-size: .95rem;
  line-height: 1.6;
  font-style: normal;
}

.mr-footer__address strong { color: #fff; font-weight: 650; }

.mr-footer__address a {
  color: #c9d3e8 !important;
  text-decoration: none !important;
}

.mr-footer__address a:hover { color: #fff !important; }

.mr-footer__address p + p { margin-top: 10px !important; }

.mr-footer__cta { margin-top: 20px !important; }

.mr-footer__cta .elementor-button {
  min-height: 48px;
  padding: 0 22px;
  font-size: .95rem;
  font-weight: 700;
}

/* Rechtsleiste */
.mr-footer__legal.e-con {
  --flex-direction: row;
  --flex-wrap: wrap;
  --align-items: center;
  --justify-content: space-between;
  --row-gap: 12px;
  --column-gap: 24px;
  --container-widget-width: auto;
  margin-top: clamp(48px, 5vw, 72px);
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.mr-footer__copy {
  color: #8f9bb4;
  font-size: .86rem;
  line-height: 1.5;
}

.mr-footer__legal-menu .elementor-nav-menu {
  gap: 4px 22px;
}

.mr-footer__legal-menu .elementor-item {
  padding: 4px 0 !important;
  color: #8f9bb4 !important;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: .86rem;
  font-weight: 500;
}

.mr-footer__legal-menu .elementor-item:hover { color: #fff !important; }
.mr-footer__legal-menu .elementor-item::after { display: none !important; }

.mr-footer a:focus-visible {
  outline: 2px solid var(--mr-accent);
  outline-offset: 3px;
}

@media (max-width: 1199px) {
  .mr-footer__cols.e-con {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mr-footer__brand.e-con { grid-column: 1 / -1; }
  .mr-footer__about { max-width: 560px; }
}

@media (max-width: 767px) {
  .mr-footer.e-con { padding-bottom: 96px; } /* Platz für die mobile Kontaktleiste */

  .mr-footer__cols.e-con {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 24px;
  }

  .mr-footer__contact.e-con { grid-column: 1 / -1; }

  .mr-footer__legal.e-con {
    --flex-direction: column;
    --align-items: flex-start;
  }
}

@media (max-width: 420px) {
  .mr-footer__cols.e-con { grid-template-columns: 1fr; }
}

/* ---------- Footer: Responsive-Feinschliff (Korrekturrunde vor Phase C) ---------- */

/* Tablet: Kontakt als eigene Zeile mit Adresse links und Button rechts */
@media (min-width: 768px) and (max-width: 1199px) {
  .mr-footer__cta .elementor-button { white-space: nowrap; }

  .mr-footer__contact.e-con {
    --display: grid;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 32px;
    align-items: end;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,.08);
  }

  .mr-footer__contact > .mr-footer__title { grid-column: 1 / -1; }
  .mr-footer__contact > .mr-footer__cta { margin-top: 0 !important; }
}

/* Mobil: Marke, dann Linkgruppen untereinander, Kontakt, Rechtliches zuletzt */
@media (max-width: 767px) {
  .mr-footer.e-con { padding-top: 56px; }

  .mr-footer__cols.e-con {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .mr-footer__brand.e-con { padding-bottom: 32px; }

  .mr-footer__col.e-con,
  .mr-footer__contact.e-con {
    padding-block: 24px;
    border-top: 1px solid rgba(255,255,255,.08);
  }

  .mr-footer__about { font-size: 1rem; }

  .mr-footer__title .elementor-heading-title { margin-bottom: 8px; }

  .mr-footer__links .elementor-icon-list-items { gap: 0; }

  .mr-footer__links .elementor-icon-list-item a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 0;
  }

  .mr-footer__links .elementor-icon-list-text { font-size: 1rem; }

  /* Kurze Einträge (Unternehmen) zweispaltig, damit der Footer nicht endlos wird */
  .mr-footer__col:nth-child(3) .mr-footer__links .elementor-icon-list-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }

  .mr-footer__address { font-size: 1rem; }

  .mr-footer__address a {
    display: inline-block;
    padding-block: 8px;
  }

  .mr-footer__cta .elementor-button { width: 100%; }

  .mr-footer__legal.e-con { margin-top: 8px; }

  .mr-footer__copy,
  .mr-footer__legal-menu .elementor-item { font-size: .875rem; }

  .mr-footer__legal-menu .elementor-item {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 359px) {
  .mr-footer__col .mr-footer__links .elementor-icon-list-items {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Footer: zweite, kleinere Gruppe in der Leistungsspalte („Weitere Leistungen") */
.mr-footer__title--sub { margin-top: 22px !important; }
@media (max-width: 767px) {
  .mr-footer__title--sub { margin-top: 16px !important; }
}

/* Phase N: Preis-Hinweis unter den Webdesign-Preisen, Termin-Hinweis im BAFA-Block der KI-Beratung */
.mr-hv2 .elementor-widget-text-editor p.mr-sv-vat { margin: 14px 0 0; color: var(--hv2-muted, #8f9bb4); font-size: .86rem; line-height: 1.5; }
.mr-hv2 .elementor-widget-text-editor p.mr-ki-bafa__next { margin: 14px 0 0; color: var(--hv2-text, #c9d3e8); font-size: .93rem; line-height: 1.55; }

/* Phase N1: Pflichtfelder im Website-Check sichtbar markieren (alle vier Angaben sind Pflicht) */
.cwcf .cwcf__label::after,
.cwcf .cwcf__consent label::after { content: " *"; color: var(--mr-accent, #00d4ff); font-weight: 600; }

/* Phase N1: ruhige Text-CTA in der Seitenmitte (keine neue Band-Sektion) */
.mr-midcta { margin-top: 8px; }
.mr-midcta p { margin: 0; color: var(--hv2-text, #c9d3e8); font-size: 1rem; line-height: 1.6; }
.mr-midcta a { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-weight: 650; text-decoration: none !important; transition: color .2s ease; }
.mr-midcta a::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--mr-ico-calendar) center / contain no-repeat; mask: var(--mr-ico-calendar) center / contain no-repeat; }
.mr-midcta a:hover, .mr-midcta a:focus-visible { color: var(--mr-link-hover, #b9c6ff); }
.mr-loc-midcta, .mr-br-midcta { margin-top: 32px; }
@media (max-width: 767px) { .mr-loc-midcta, .mr-br-midcta { margin-top: 24px; } .mr-midcta a { flex-wrap: nowrap; } }

/* Phase N1: Vertrauenszeile + Telefon auf /leistungen/ (Bewertung aus [mr_google_rating]) */
.mr-svc-trust p { margin: 0; }
.mr-svc-trust { margin-top: 6px; }
.mr-svc-trust .mr-svc-trust__line { margin-top: 12px; color: rgba(255,255,255,.72); font-size: .95rem; line-height: 1.5; }
.mr-svc-trust a[href^="tel:"],
.mr-svc-trust__call a[href^="tel:"] { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.mr-svc-trust a[href^="tel:"]::before,
.mr-svc-trust__call a[href^="tel:"]::before { content: ""; width: 15px; height: 15px; flex: none; background: currentColor; -webkit-mask: var(--mr-ico-phone) center / contain no-repeat; mask: var(--mr-ico-phone) center / contain no-repeat; }
.mr-svc-trust a[href^="tel:"]:hover,
.mr-svc-trust__call a[href^="tel:"]:hover { color: #7ea6ff; }
.mr-svc-trust__call { margin-top: 14px; }
.mr-svc-trust__call p { margin: 0; color: rgba(255,255,255,.72); font-size: .95rem; }

/* =========================================================
   PHASE Q2.2 – DESIGN-TOKENS: HELLE FLÄCHEN IM DARK THEME
   „Premium Light Surface": leicht blau-grau getöntes Off-White statt Reinweiß, mit feiner
   Lichtkante. Genutzt von hellen Blättern/Platten (APPS-Platte, Gestaltungs-Handbuch,
   Druckbogen, Logo-Platten). Textfarben der Komponenten (#2a3550/#46526d) bleiben ≥ 6:1.
========================================================= */
:root {
  --mr-surface-light: #e9edf5;
  --mr-surface-light-grad: linear-gradient(165deg, #eef1f8 0%, #e4e9f2 100%);
  --mr-surface-light-line: #d2d9e7;
  --mr-surface-light-chip: #d9e1f2;
  --mr-surface-light-edge: rgba(255, 255, 255, .55);
  --mr-surface-light-shadow: 0 30px 80px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .7);
  --mr-surface-plate: #e3e7ef;
}

/* =========================================================
   GOOGLE-BEWERTUNG: EINE KOMPONENTE (Phase Q2.3, ersetzt Q2.2)
   Markup: [mr_google_rating variant="default|compact|footer"] (functions.php); [mr_footer_rating]
   liefert variant="footer". Einzige Gestaltungsquelle – Seiten-Styles setzen keine eigenen Varianten.

   Basis   .mr-hv2-rating            [G] 5,0 ★★★★★ aus 18 Bewertungen, eine Zeile, so breit wie nötig
   Modifier --default / --compact / --footer (Footer: etwas knapper, gleiche Schrift)
   Stufen  .is-compact  18 Bewertungen
           .is-tiny     5,0 · 18 Bewertungen (ohne Sterne)
           .is-wrap     Umbruch – nur letzter Ausweg
   Die Stufe setzt mr_google_rating_fit_script() nach der tatsächlich verfügbaren Breite; ohne
   JavaScript gilt die CSS-Vorauswahl (unter 400 px kompakt). Werte kommen aus dem Plugin.
========================================================= */
/* Eltern dürfen schrumpfen (z. B. Elementor-Widget in einer Flex-Zeile), sonst ragt die Pill hinaus */
:root body :has(> a.mr-hv2-rating) { min-width: 0; max-width: 100%; }

:root body a.mr-hv2-rating {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0 !important;
  width: -moz-fit-content;
  width: fit-content !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 36px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 13px 0 8px !important;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .035) !important;
  color: #fff !important;
  font-size: .875rem !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  vertical-align: middle;
  transition: border-color .2s ease, background-color .2s ease;
}
:root body a.mr-hv2-rating:hover { border-color: rgba(143, 182, 255, .3) !important; background: rgba(255, 255, 255, .06) !important; }
:root body a.mr-hv2-rating:focus-visible { outline: 2px solid #8fb6ff; outline-offset: 3px; }
:root body .mr-hv2-rating > * { flex: none; }
:root body .mr-hv2-rating .mr-hv2-rating__logo { display: block !important; width: 20px !important; height: 20px !important; margin: 0 7px 0 0 !important; }
:root body .mr-hv2-rating .mr-hv2-rating__score { margin-right: 6px; color: #fff; font-weight: 700; }
:root body .mr-hv2-rating .mr-hv2-rating__stars { display: block; margin-right: 8px; line-height: 0; }
:root body .mr-hv2-rating .mr-hv2-rating__stars svg { display: block; width: 73px; height: 13px; }
:root body .mr-hv2-rating .mr-hv2-rating__stars .is-on { fill: #fbbc04; }
:root body .mr-hv2-rating .mr-hv2-rating__stars .is-off { fill: rgba(148, 163, 184, .45); }
:root body .mr-hv2-rating .mr-hv2-rating__sep { display: none; margin-right: 6px; color: #8f9bb4; }
:root body .mr-hv2-rating .mr-hv2-rating__count { color: #b4bfd4; font-weight: 400; }

/* Footer: gleiche Komponente, etwas knapper */
:root body a.mr-hv2-rating--footer { padding: 0 12px 0 7px !important; }
:root body .mr-hv2-rating--footer .mr-hv2-rating__logo { margin-right: 6px !important; }
:root body .mr-hv2-rating--footer .mr-hv2-rating__stars { margin-right: 7px; }

/* Stufen */
:root body :is(.mr-hv2-rating--compact, .mr-hv2-rating.is-compact, .mr-hv2-rating.is-tiny) .mr-hv2-rating__aus { display: none; }
:root body .mr-hv2-rating.is-tiny .mr-hv2-rating__stars { display: none; }
:root body .mr-hv2-rating.is-tiny .mr-hv2-rating__sep { display: inline; }
/* Letzter Ausweg: zwei Zeilen – [G] 5,0 Sterne / 18 Bewertungen */
:root body a.mr-hv2-rating.is-wrap { flex-wrap: wrap !important; row-gap: 2px !important; padding-block: 6px !important; border-radius: 14px !important; }
:root body .mr-hv2-rating.is-wrap .mr-hv2-rating__stars { display: block; }
:root body .mr-hv2-rating.is-wrap .mr-hv2-rating__sep { display: none; }
:root body .mr-hv2-rating.is-wrap .mr-hv2-rating__count { flex-basis: 100%; }

@media (max-width: 480px) {
  :root body .mr-hv2-rating .mr-hv2-rating__count { font-size: .84rem; }
}
/* Vorauswahl ohne bzw. vor JavaScript: unter 400 px kompakt */
@media (max-width: 400px) {
  :root body a.mr-hv2-rating:not(.is-auto):not(.is-fitting) .mr-hv2-rating__aus { display: none; }
}

/* =========================================================
   BROWSERFENSTER: EINE KOMPONENTE (zentral seit Phase Q2.5, vorher nur in ref-v2.css)
   Markup: .mr-bw > .mr-bw__bar[aria-hidden] (.mr-bw__dots mit drei <i>, .mr-bw__url, .mr-bw__end)
           + .mr-bw__screen > img (echter Website-Screenshot)
   Genutzt: Referenzen, Case Studies, Über uns, Startseite (Referenzen). Seiten setzen nur
   Kontext (Schatten, Seitenverhältnis), keine eigene Rahmen-Variante.
========================================================= */
.mr-bw { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; background: #0d1424; box-shadow: 0 34px 90px rgba(0, 0, 0, .5), 0 0 0 6px rgba(255, 255, 255, .035); }
.mr-bw__bar { flex: none; display: grid; grid-template-columns: 39px minmax(0, 1fr) 39px; align-items: center; gap: 10px; height: clamp(24px, 2.4vw, 34px); padding: 0 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); background: linear-gradient(180deg, #1a2338, #131b2e); }
.mr-bw__dots { display: flex; gap: 6px; }
.mr-bw__dots i { display: block; width: 9px; height: 9px; border-radius: 50%; background: #f26d6d; }
.mr-bw__dots i:nth-child(2) { background: #f5bf4f; }
.mr-bw__dots i:nth-child(3) { background: #5ccf7a; }
.mr-bw__url { justify-self: center; display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; height: 68%; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .06); border-radius: 999px; background: rgba(255, 255, 255, .07); color: #aeb9d0; font: 500 clamp(9px, .72vw, 11.5px)/1 "Inter", "Helvetica Neue", Arial, sans-serif; letter-spacing: .01em; white-space: nowrap; }
.mr-bw__url svg { flex: none; opacity: .7; }
.mr-bw__url span { overflow: hidden; text-overflow: ellipsis; }
.mr-bw__screen { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #fff; }
.mr-bw__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
@media (max-width: 420px) {
  .mr-bw__bar { grid-template-columns: 33px minmax(0, 1fr) 0; gap: 8px; padding: 0 9px; }
  .mr-bw__dots { gap: 4px; }
  .mr-bw__dots i { width: 7px; height: 7px; }
}

/* =========================================================
   GERÄTERAHMEN TABLET / SMARTPHONE (zentral seit Phase L3.4, Regeln 1:1 aus ref-v2.css)
   Markup: .mr-tb > .mr-tb__screen > img   bzw.   .mr-sp > .mr-sp__screen > img
   Ergänzen das Browserfenster .mr-bw zu Geräte-Bühnen (Referenzen, Case Studies, Ads-Landingpages).
   Größe und Position setzt jeweils die Seite, nie der Rahmen selbst.
========================================================= */
.mr-tb { position: relative; box-sizing: border-box; container-type: inline-size; border: 1px solid rgba(255, 255, 255, .18); border-radius: 8% / 5.8%; background: linear-gradient(160deg, #1b2440, #0b1121); box-shadow: 0 30px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08); }
.mr-tb__screen { overflow: hidden; margin: 4cqw; aspect-ratio: 3 / 4; border-radius: 3cqw; background: #fff; }
.mr-sp { position: relative; box-sizing: border-box; container-type: inline-size; border: 1px solid rgba(255, 255, 255, .18); border-radius: 16% / 7.4%; background: linear-gradient(160deg, #1b2440, #0b1121); box-shadow: 0 30px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08); }
.mr-sp::before { content: ""; position: absolute; top: 3.4%; left: 50%; z-index: 2; width: 30%; height: 2.2%; border-radius: 999px; background: #05070d; transform: translateX(-50%); pointer-events: none; }
.mr-sp__screen { overflow: hidden; margin: 5cqw; aspect-ratio: 9 / 19.5; border-radius: 11cqw; background: #fff; }
.mr-tb__screen img,
.mr-sp__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }