/* =========================================================
   BRANDING & GRAFIKDESIGN (Phase L4 · 2026-10-10) – /leistungen/branding/ (Seite 1485)
   Markup: inc/branding/render.php, Verhalten: assets/js/br-v2.js. Präfix .mr-br-.
   Baut auf global.css (Tokens, Buttons), layout.css (Icon-System) und home-v2.css (.mr-hv2,
   Bewertung, Akzent) auf. Signature „Markensystem": Bausteine + Anwendungen, Farbwelt umschaltbar.
   Keine Pfeile, Unterstreichung nur bei Inline-Links, Hover dezent, reduced motion statisch.
========================================================= */

.mr-br {
  --br-gutter: 20px;
  --br-max: 1240px;
  --br-space: clamp(64px, 7.5vw, 112px);
  --br-radius: 22px;
  --br-line: rgba(255, 255, 255, .1);
  --br-card: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
  --br-text: #c9d3e8;
  --br-muted: #8f9bb4;
  --br-blue: #8fb6ff;
  --br-green: #6ee7c8;
  --br-ease: cubic-bezier(.22, 1, .36, 1);
  font-family: "Inter", var(--mr-font-body, Arial, sans-serif);
  background: var(--mr-bg, #070b16);
  color: var(--br-text);
}
@media (min-width: 768px) { .mr-br { --br-gutter: 28px; } }
@media (min-width: 1200px) { .mr-br { --br-gutter: 40px; } }

/* global.css setzt overflow-x:hidden auf html/body; clip schneidet ohne Scroll-Container ab */
body.mr-br-page { overflow-x: clip; }

.mr-br *,
.mr-br *::before,
.mr-br *::after { box-sizing: border-box; }
.mr-br :is(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; }
.mr-br :is(ul, ol) { padding: 0; list-style: none; }
.mr-br :is(h1, h2, h3, h4) { font-family: "Inter", var(--mr-font-body, Arial, sans-serif); color: #fff; text-transform: none; }
.mr-br img { display: block; max-width: 100%; height: auto; }
.mr-br a { text-decoration: none; }
.mr-br a:focus-visible,
.mr-br button:focus-visible,
.mr-br summary:focus-visible { outline: 2px solid var(--br-blue); outline-offset: 3px; border-radius: 8px; }
.mr-br a.text-link-inline { color: var(--hv2-link, #8fb6ff); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(143, 182, 255, .4); text-underline-offset: 3px; }
.mr-br a.text-link-inline:hover,
.mr-br a.text-link-inline:focus-visible { color: #fff; text-decoration-color: currentColor; }

.mr-br-wrap { width: min(calc(100% - var(--br-gutter) * 2), var(--br-max)); margin-inline: auto; }
.mr-br-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.mr-br-ico { flex: none; width: 20px; height: 20px; }

/* ---------- Typografie ---------- */
.mr-br p { font-size: clamp(1rem, .97rem + .12vw, 1.0625rem); line-height: 1.65; }
.mr-br-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px !important;
  color: #9fc2ff;
  font-size: .78rem !important;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.3 !important;
  text-transform: uppercase;
}
.mr-br-eyebrow::before { content: ""; flex: none; width: 22px; height: 2px; border-radius: 2px; background: var(--mr-gradient-primary); }
@media (max-width: 479px) { .mr-br-eyebrow { font-size: .72rem !important; letter-spacing: .1em; } }

.mr-br-h1 { max-width: 15em; font-size: clamp(2.1rem, 1.25rem + 2.6vw, 3.5rem); font-weight: 700; line-height: 1.06; letter-spacing: -.034em; text-wrap: balance; }
.mr-br-h2 { max-width: 20em; font-size: var(--hv2-h2, clamp(1.9rem, 1.3rem + 1.9vw, 3rem)); font-weight: 700; line-height: 1.1; letter-spacing: -.028em; text-wrap: balance; }
.mr-br-h3 { font-size: clamp(1.12rem, 1.05rem + .3vw, 1.3rem); font-weight: 650; line-height: 1.28; letter-spacing: -.012em; }
.mr-br-h4 { font-size: 1.06rem; font-weight: 650; line-height: 1.3; letter-spacing: -.01em; }
.mr-br-lead { max-width: 36rem; margin-top: 22px !important; font-size: clamp(1.04rem, .98rem + .25vw, 1.17rem) !important; line-height: 1.62 !important; color: var(--br-text); }
.mr-br-intro { max-width: 46rem; margin-top: 16px !important; color: var(--br-text); }
.mr-br-micro { margin-top: 16px !important; color: var(--br-muted); font-size: .92rem !important; line-height: 1.5 !important; }
.mr-br-note { margin-top: 22px !important; color: var(--br-muted); font-size: .94rem !important; }

.mr-br-head { max-width: 780px; margin-bottom: clamp(32px, 4vw, 52px); }
.mr-br-head--center { margin-inline: auto; text-align: center; }
.mr-br-head--center .mr-br-eyebrow { justify-content: center; }
.mr-br-head--center .mr-br-h2,
.mr-br-head--center .mr-br-intro { margin-inline: auto; }

/* ---------- Buttons (Grundstil aus global.css a.mr-btn-primary / a.mr-btn-secondary) ---------- */
.mr-br-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.mr-br a.mr-br-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  font-size: .98rem;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
}
.mr-br a.mr-br-btn > * { position: relative; z-index: 2; }
@media (max-width: 599px) {
  .mr-br-ctas { flex-direction: column; align-items: stretch; }
  .mr-br a.mr-br-btn { width: 100%; }
}
@media (max-width: 379px) { .mr-br a.mr-br-btn { padding: 0 16px; font-size: .93rem; } }

/* ---------- Abschnitte ---------- */
.mr-br-sec { position: relative; padding-block: var(--br-space); background: var(--mr-bg, #070b16); }
.mr-br-sec--soft {
  background: radial-gradient(circle at 88% 0%, rgba(124, 60, 255, .09), transparent 42%), var(--mr-bg-soft, #0d1424);
  border-block: 1px solid rgba(255, 255, 255, .05);
}
.mr-br [id] { scroll-margin-top: 110px; }

.mr-br-checks { display: grid; gap: 12px; }
.mr-br-checks li { display: flex; gap: 12px; line-height: 1.5; color: var(--br-text); font-size: clamp(.98rem, .96rem + .1vw, 1.04rem); }
.mr-br-checks .mr-br-ico { width: 19px; height: 19px; margin-top: 2px; color: var(--br-green); }
.mr-br-checks strong { color: #fff; font-weight: 650; }
.mr-br-checks--sm { gap: 8px; margin-top: 16px !important; }
.mr-br-checks--sm li { font-size: .94rem; }
.mr-br-checks--sm .mr-br-ico { width: 17px; height: 17px; }

/* =========================================================
   HERO
========================================================= */
.mr-hv2-hero.mr-br-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(112px, 8.6vw, 140px);
  padding-bottom: clamp(56px, 5.6vw, 88px);
  background: var(--mr-gradient-dark);
}
.mr-hv2-hero.mr-br-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(143, 182, 255, .22), transparent); pointer-events: none; }
.mr-br-hero__grid { display: grid; gap: clamp(40px, 5vw, 56px); align-items: center; }
.mr-br-hero__text,
.mr-br-hero__visual { min-width: 0; }
@media (min-width: 1025px) {
  .mr-br-hero__grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); column-gap: clamp(40px, 5vw, 80px); }
}
@media (max-width: 767px) {
  .mr-hv2-hero.mr-br-hero { padding-top: 32px; padding-bottom: 48px; }
}

.mr-br-trust { display: grid; justify-items: start; gap: 16px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--br-line); }
/* Google-Bewertung (.mr-hv2-rating): Gestaltung nur zentral in layout.css (Phase Q2.3) */
.mr-br-press { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.mr-br-press__label { color: var(--br-muted); font-size: .72rem !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mr-br-press__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.mr-br-press__logos a { display: block; }
.mr-br-press__logos img { width: auto; height: 18px; max-width: 112px; object-fit: contain; filter: brightness(0) invert(1); opacity: .58; transition: opacity var(--mr-transition); }
.mr-br-press__logos a:hover img { opacity: 1; }

/* =========================================================
   SIGNATURE „MARKENSYSTEM" (beispielhafte Marke, Farbwelt umschaltbar)
========================================================= */
.mr-br-sys,
.mr-br-screens,
.mr-br-sheet {
  --b1: #2f7cff;
  --b2: #00d4ff;
  --b3: #eef2fb;
  --bink: #0c1630;
  --bfont: "Inter", Arial, sans-serif;
}
.mr-br-sys[data-palette="warm"] { --b1: #d9573f; --b2: #f2b34b; --b3: #fbf3ea; --bink: #2b1a14; --bfont: Georgia, "Times New Roman", serif; }
.mr-br-sys[data-palette="natur"] { --b1: #2f8f6b; --b2: #a5d46f; --b3: #eef5ee; --bink: #13241c; --bfont: "Trebuchet MS", "Segoe UI", sans-serif; }

.mr-br-sys {
  position: relative;
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid rgba(143, 182, 255, .2);
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)), rgba(9, 14, 28, .7);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35), 0 0 70px rgba(47, 124, 255, .1);
}
.mr-br-sys__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }
.mr-br .mr-br-sys__title { color: #fff; font-size: .9rem !important; font-weight: 650; letter-spacing: .01em; }
.mr-br-sys__switch { display: none; gap: 6px; padding: 4px; border: 1px solid var(--br-line); border-radius: 999px; background: rgba(255, 255, 255, .04); }
.mr-br-sys.is-ready .mr-br-sys__switch { display: inline-flex; }
.mr-br-sys__opt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--br-text);
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--mr-transition), color var(--mr-transition), border-color var(--mr-transition);
}
.mr-br-sys__opt:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.mr-br-sys__opt[aria-pressed="true"] { color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .16); }
.mr-br-sys__dot { width: 12px; height: 12px; border-radius: 50%; }
.mr-br-sys__dot--klar { background: linear-gradient(135deg, #2f7cff 50%, #00d4ff 50%); }
.mr-br-sys__dot--warm { background: linear-gradient(135deg, #d9573f 50%, #f2b34b 50%); }
.mr-br-sys__dot--natur { background: linear-gradient(135deg, #2f8f6b 50%, #a5d46f 50%); }

/* Bausteine */
.mr-br-sys__kit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mr-br-kit {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  min-height: 112px;
  padding: 14px 10px 30px;
  border: 1px solid var(--br-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .035);
}
.mr-br .mr-br-kit__label { position: absolute; left: 0; right: 0; bottom: 10px; color: var(--br-muted); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.mr-br-mark { display: block; width: 34px; height: 34px; }
.mr-br-mark__a { fill: var(--b1); transition: fill .35s ease; }
.mr-br-mark__b { fill: var(--b2); opacity: .9; mix-blend-mode: screen; transition: fill .35s ease; }
.mr-br-kit__word { color: #fff; font-family: var(--bfont); font-size: .82rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.mr-br-kit--color { grid-template-columns: repeat(3, auto); gap: 6px; }
.mr-br-sw { width: 24px; height: 40px; border-radius: 8px; transition: background .35s ease; }
.mr-br-sw--1 { background: var(--b1); }
.mr-br-sw--2 { background: var(--b2); }
.mr-br-sw--3 { background: var(--b3); }
.mr-br-kit__aa { color: #fff; font-family: var(--bfont); font-size: 2.3rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; transition: font-family .2s; }
.mr-br-shapes { position: relative; display: block; width: 52px; height: 40px; }
.mr-br-shapes i { position: absolute; display: block; transition: background .35s ease, border-color .35s ease; }
.mr-br-shapes i:nth-child(1) { left: 0; top: 4px; width: 22px; height: 22px; border-radius: 6px; background: var(--b1); }
.mr-br-shapes i:nth-child(2) { left: 18px; top: 14px; width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--b2); }
.mr-br-shapes i:nth-child(3) { right: 0; top: 0; width: 12px; height: 12px; border-radius: 3px; background: var(--b3); }

/* Anwendungen */
.mr-br-sys__apps { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .9fr); gap: 10px; margin-top: 10px; align-items: end; }
.mr-br-app { display: grid; gap: 8px; min-width: 0; }
.mr-br .mr-br-app__label { color: var(--br-muted); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mr-br-app__frame,
.mr-br-app__paper,
.mr-br-app__square { position: relative; overflow: hidden; border-radius: 12px; background: var(--b3); box-shadow: 0 14px 30px rgba(0, 0, 0, .3); transition: background .35s ease; }
.mr-br-app__frame { padding: 8px 10px 12px; aspect-ratio: 4 / 3; }
.mr-br-app__dots { display: flex; gap: 4px; margin-bottom: 8px; }
.mr-br-app__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(12, 22, 48, .2); }
.mr-br-app__nav { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.mr-br-app__nav .mr-br-mark { width: 16px; height: 16px; margin-right: auto; }
.mr-br-app__nav i { width: 14%; height: 4px; border-radius: 2px; background: rgba(12, 22, 48, .22); }
.mr-br-app__hero { display: grid; gap: 6px; }
.mr-br-l { display: block; width: 70%; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--bink) 28%, transparent); }
.mr-br-l--h { width: 82%; height: 9px; background: var(--bink); transition: background .35s ease; }
.mr-br-l--h2 { width: 58%; height: 9px; background: var(--b1); transition: background .35s ease; }
.mr-br-l--s { width: 44%; }
.mr-br-app__btn { display: block; width: 38%; height: 12px; margin-top: 4px; border-radius: 999px; background: var(--b1); transition: background .35s ease; }
.mr-br-app__paper { display: grid; align-content: center; gap: 6px; aspect-ratio: 85 / 55; padding: 12px; border-left: 6px solid var(--b1); }
.mr-br-app__paper .mr-br-mark { width: 20px; height: 20px; }
.mr-br-app__name { color: var(--bink); font-family: var(--bfont); font-size: .74rem; font-weight: 700; line-height: 1.1; }
.mr-br-app__square { display: grid; align-content: end; gap: 6px; aspect-ratio: 1; padding: 12px; }
.mr-br-app__square .mr-br-mark { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; }
.mr-br-app__blob { position: absolute; left: -18%; top: -22%; width: 90%; aspect-ratio: 1; border-radius: 50%; background: var(--b2); opacity: .55; transition: background .35s ease; }
.mr-br-app__square .mr-br-l,
.mr-br-app__square .mr-br-mark { position: relative; z-index: 1; }
.mr-br-app__square .mr-br-mark { position: absolute; }
.mr-br .mr-br-sys__cap { margin-top: 14px; color: var(--br-muted); font-size: .84rem; line-height: 1.5; }

@media (max-width: 599px) {
  .mr-br-sys__kit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mr-br-sys__apps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mr-br-app--web { grid-column: 1 / -1; }
  .mr-br-app__frame { aspect-ratio: 16 / 9; }
  .mr-br-sys__switch { width: 100%; justify-content: space-between; }
  .mr-br-sys__opt { flex: 1; justify-content: center; }
}

/* =========================================================
   MEHR ALS EIN LOGO
========================================================= */
.mr-br-compare { display: grid; gap: 16px; }
@media (min-width: 900px) { .mr-br-compare { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; } }
.mr-br-compare__col { padding: clamp(22px, 2.6vw, 34px); border: 1px solid var(--br-line); border-radius: var(--br-radius); background: var(--br-card); }
.mr-br-compare__col--on { border-color: rgba(143, 182, 255, .28); background: linear-gradient(150deg, rgba(47, 124, 255, .13), rgba(124, 60, 255, .07) 60%, rgba(0, 212, 255, .04)); }
.mr-br .mr-br-compare__tag { margin-bottom: 18px !important; color: var(--br-muted); font-size: .75rem !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mr-br .mr-br-compare__col--on .mr-br-compare__tag { color: var(--br-green); }
.mr-br-checks--off .mr-br-ico { color: #7d88a3; }
.mr-br-checks--off strong { color: #dfe5f2; }

/* =========================================================
   LEISTUNGSBEREICHE
========================================================= */
.mr-br-areas { display: grid; gap: 16px; }
@media (min-width: 640px) { .mr-br-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1150px) { .mr-br-areas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mr-br-area {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 28px);
  border: 1px solid var(--br-line);
  border-radius: var(--br-radius);
  background: var(--br-card);
  transition: border-color var(--mr-transition), transform var(--mr-transition);
}
.mr-br-area:hover { border-color: rgba(143, 182, 255, .3); transform: translateY(-2px); }
.mr-br-area .mr-svc-icon { margin-bottom: 18px; }
.mr-br-area > p { margin-top: 8px !important; color: var(--br-text); }
.mr-br-area__link { color: #fff; }
.mr-br-area__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mr-br-area__link:focus-visible { outline: none; }
.mr-br-area:has(.mr-br-area__link:focus-visible) { outline: 2px solid var(--br-blue); outline-offset: 3px; }

/* =========================================================
   STRATEGIE
========================================================= */
.mr-br-split { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1025px) { .mr-br-split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(48px, 6vw, 96px); } }
.mr-br-split .mr-br-head { margin-bottom: 0; }
.mr-br-result { display: grid; gap: 6px; margin-top: 28px; padding: 20px 22px; border: 1px solid rgba(110, 231, 200, .28); border-radius: 18px; background: rgba(110, 231, 200, .06); }
.mr-br .mr-br-result__tag { color: var(--br-green); font-size: .75rem !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mr-br-result p:last-child { color: #e4ebf7; }
.mr-br-result--file { grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.mr-br-result--file .mr-br-ico { width: 24px; height: 24px; margin-top: 2px; color: var(--br-green); }
.mr-br-result--file > div,
.mr-br-result--file > .mr-elx-w > div { display: grid; gap: 6px; }

.mr-br-qs { display: grid; gap: 0; border-top: 1px solid var(--br-line); }
.mr-br-q { display: grid; grid-template-columns: 52px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--br-line); }
.mr-br-q__num,
.mr-br-step__num,
.mr-br-spec__num {
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .08em;
  background: linear-gradient(100deg, #5b9bff, #2fd8ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #8fb6ff;
}
.mr-br-q__num { padding-top: 2px; }
.mr-br-q p { margin-top: 4px !important; color: var(--br-text); }

/* =========================================================
   LOGO & IDENTITÄT: Gestaltungs-Handbuch (helles Blatt)
========================================================= */
.mr-br-spec {
  padding: clamp(20px, 3vw, 44px);
  border: 1px solid var(--mr-surface-light-edge, rgba(255, 255, 255, .5));
  border-radius: 26px;
  background: var(--mr-surface-light-grad, linear-gradient(165deg, #eef1f8, #e3e8f2));
  color: #2a3550;
  box-shadow: var(--mr-surface-light-shadow, 0 30px 80px rgba(0, 0, 0, .35));
}
.mr-br-spec__head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 8px !important; padding-bottom: 14px; border-bottom: 2px solid #0c1630; color: #0c1630; font-size: .74rem !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.mr-br-spec__list { display: grid; }
@media (min-width: 900px) { .mr-br-spec__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); } }
.mr-br-spec__row { display: grid; grid-template-columns: 44px 1fr; gap: 4px 14px; padding: 20px 0; border-bottom: 1px solid var(--mr-surface-light-line, #d2d9e7); }
.mr-br-spec__num { grid-row: span 2; padding-top: 3px; background: linear-gradient(100deg, #1d5ad6, #6b3fc9); -webkit-background-clip: text; background-clip: text; color: #1d5ad6; }
.mr-br .mr-br-spec__title { color: #0c1630; font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.mr-br .mr-br-spec__row p { color: #46526d; font-size: .98rem; }

/* =========================================================
   DIGITAL + PRINT (Text + Visual)
========================================================= */
.mr-br-media { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1025px) {
  .mr-br-media { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(48px, 6vw, 96px); }
  .mr-br-media--flip .mr-br-media__visual { order: -1; }
}
.mr-br-media__text,
.mr-br-media__visual { min-width: 0; }
.mr-br-media .mr-br-head { margin-bottom: 28px; }
.mr-br-tiles { display: grid; gap: 12px; }
@media (min-width: 600px) { .mr-br-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mr-br-tile { padding: 20px; border: 1px solid var(--br-line); border-radius: 18px; background: var(--br-card); }
.mr-br-tile p { margin-top: 6px !important; color: var(--br-text); font-size: .96rem !important; }
.mr-br-checks--print li span { color: var(--br-text); }

/* Digitale Flächen */
.mr-br-screens { position: relative; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; max-width: 520px; margin-inline: auto; }
.mr-br-screen { position: relative; overflow: hidden; display: grid; align-content: start; gap: 8px; padding: 12px; border-radius: 14px; background: var(--b3); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.mr-br-screen--web { grid-row: span 2; }
.mr-br-screen__banner { display: block; aspect-ratio: 16 / 8; margin-bottom: 4px; border-radius: 8px; background: linear-gradient(135deg, var(--b1), var(--b2)); }
.mr-br-screen__icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.mr-br-screen__icons i { aspect-ratio: 1; border-radius: 10px; border: 2px solid var(--b1); background: color-mix(in srgb, var(--b1) 8%, transparent); }
.mr-br-screen--post { aspect-ratio: 1; align-content: end; }
.mr-br-screen--story { aspect-ratio: 4 / 5; align-content: end; }
.mr-br-screen .mr-br-l,
.mr-br-screen .mr-br-app__btn { position: relative; z-index: 1; }
.mr-br-screen .mr-br-app__btn { width: 56%; }

/* Druckbogen mit Schnittmarken */
.mr-br-sheet { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center; max-width: 520px; margin-inline: auto; padding: clamp(26px, 4vw, 40px); border-radius: 18px; background: var(--mr-surface-light-grad, linear-gradient(165deg, #eef1f8, #e3e8f2)); box-shadow: 0 30px 70px rgba(0, 0, 0, .4); }
.mr-br-crop { position: absolute; width: 18px; height: 18px; border-color: #7a869f; border-style: solid; border-width: 0; }
.mr-br-crop--tl { top: 10px; left: 10px; border-top-width: 1px; border-left-width: 1px; }
.mr-br-crop--tr { top: 10px; right: 10px; border-top-width: 1px; border-right-width: 1px; }
.mr-br-crop--bl { bottom: 10px; left: 10px; border-bottom-width: 1px; border-left-width: 1px; }
.mr-br-crop--br { bottom: 10px; right: 10px; border-bottom-width: 1px; border-right-width: 1px; }
.mr-br-sheet__flyer { position: relative; overflow: hidden; display: grid; align-content: end; gap: 7px; aspect-ratio: 1 / 1.414; padding: 14px; border-radius: 4px; background: #fff; box-shadow: 0 10px 26px rgba(12, 22, 48, .18); }
.mr-br-sheet__flyer .mr-br-l { position: relative; z-index: 1; }
.mr-br-sheet__cards { display: grid; gap: 14px; }
.mr-br-sheet__card { display: grid; align-content: center; gap: 6px; aspect-ratio: 85 / 55; padding: 12px; border-radius: 4px; background: #fff; box-shadow: 0 10px 22px rgba(12, 22, 48, .16); border-left: 5px solid var(--b1); }
.mr-br-sheet__card--back { place-items: center; border-left: 0; background: var(--b1); }
.mr-br-sheet__mark { display: block; width: 20px; height: 20px; border-radius: 6px; background: var(--b1); box-shadow: 8px 8px 0 -2px var(--b2); }
.mr-br-sheet__card--back .mr-br-sheet__mark { background: #fff; box-shadow: 8px 8px 0 -2px var(--b2); }

/* =========================================================
   MARKE + WEBSITE
========================================================= */
.mr-br-duo { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1025px) { .mr-br-duo { grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr); gap: clamp(48px, 6vw, 96px); } }
.mr-br-duo .mr-br-head { margin-bottom: 26px; }
.mr-br-case { display: grid; gap: 10px; padding: clamp(24px, 3vw, 34px); border: 1px solid rgba(143, 182, 255, .24); border-radius: 26px; background: linear-gradient(150deg, rgba(47, 124, 255, .14), rgba(124, 60, 255, .08)); }
.mr-br .mr-br-case__tag { color: #9fc2ff; font-size: .75rem !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mr-br .mr-br-case__name { color: #fff; font-size: 1.35rem !important; font-weight: 700; letter-spacing: -.015em; line-height: 1.2 !important; }
.mr-br-case__text { color: var(--br-text); }
.mr-br-case__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px !important; }
.mr-br-case__chips li { padding: 5px 11px; border: 1px solid var(--br-line); border-radius: 999px; color: #c8d4ff; font-size: .78rem; font-weight: 650; line-height: 1.3; }
.mr-br-case__link { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 44px; margin-top: 4px; color: var(--br-blue) !important; font-weight: 700; transition: color var(--mr-transition); }
.mr-br-case__link .mr-br-ico { width: 16px; height: 16px; }
.mr-br-case__link:hover { color: #fff !important; }

/* =========================================================
   REFERENZEN (Mosaik)
========================================================= */
.mr-br-works { display: grid; gap: 16px; }
@media (min-width: 640px) { .mr-br-works { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1025px) {
  .mr-br-works { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .mr-br-work--wide { grid-column: 1 / -1; }
}
.mr-br-work figure { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--br-line); border-radius: var(--br-radius); background: var(--br-card); }
.mr-br-work__media { flex: 1; min-height: 0; overflow: hidden; background: #0b1222; }
.mr-br-work__media img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 639px) { .mr-br-work__media img { aspect-ratio: 4 / 3; } }
.mr-br-work__plate { display: grid; place-items: center; min-height: 200px; padding: 32px; background: var(--mr-surface-plate, #e3e7ef); }
.mr-br-work__plate img.mr-br-work__logo { width: min(100%, 360px); height: auto; aspect-ratio: auto; object-fit: contain; }
.mr-br-work figcaption { display: grid; gap: 4px; padding: 18px 20px 20px; }
.mr-br-work figcaption strong { color: #fff; font-size: 1.04rem; font-weight: 650; }
.mr-br-work figcaption span { color: var(--br-text); font-size: .94rem; line-height: 1.5; }
.mr-br .mr-br-work__kind { color: #b9c6ff !important; font-size: .74rem !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mr-br-works + .mr-br-ctas { justify-content: center; }

/* =========================================================
   ABLAUF
========================================================= */
.mr-br-steps { display: grid; gap: 14px; counter-reset: none; }
@media (min-width: 640px) { .mr-br-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1025px) { .mr-br-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.mr-br-step { position: relative; padding: 24px 22px; border: 1px solid var(--br-line); border-radius: var(--br-radius); background: var(--br-card); }
.mr-br-step__num { display: inline-block; margin-bottom: 14px; }
.mr-br-step p { margin-top: 8px !important; color: var(--br-text); font-size: .96rem !important; }
@media (min-width: 640px) and (max-width: 1024px) { .mr-br-step:last-child { grid-column: 1 / -1; } }

/* =========================================================
   UMFANG
========================================================= */
.mr-br .mr-br-scopes__label { margin-bottom: 14px !important; color: var(--br-muted); font-size: .75rem !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mr-br-scopes { display: grid; gap: 14px; }
@media (min-width: 640px) { .mr-br-scopes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1150px) { .mr-br-scopes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mr-br-scope { padding: clamp(22px, 2.4vw, 28px); border: 1px solid var(--br-line); border-radius: var(--br-radius); background: var(--br-card); }
.mr-br-scope > p { margin-top: 8px !important; color: var(--br-text); font-size: .96rem !important; }
.mr-br-band { display: grid; gap: 18px; align-items: center; margin-top: clamp(28px, 3.5vw, 44px); padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(143, 182, 255, .2); border-radius: var(--br-radius); background: linear-gradient(135deg, rgba(47, 124, 255, .14), rgba(124, 60, 255, .1) 60%, rgba(0, 212, 255, .06)); }
@media (min-width: 900px) { .mr-br-band { grid-template-columns: 1fr auto; gap: 32px; } }
.mr-br-band .mr-br-ctas { margin-top: 0; }
.mr-br .mr-br-band__title { margin-bottom: 6px !important; color: #fff; font-size: clamp(1.15rem, 1.05rem + .5vw, 1.45rem) !important; font-weight: 700; line-height: 1.25 !important; }

/* =========================================================
   FAQ
========================================================= */
.mr-br-faq__list { display: grid; gap: 10px; max-width: 900px; }
.mr-br-faq__item { border: 1px solid var(--br-line); border-radius: 18px; background: var(--br-card); transition: border-color var(--mr-transition); }
.mr-br-faq__item[open] { border-color: rgba(143, 182, 255, .28); }
.mr-br-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 16px 20px; cursor: pointer; list-style: none; }
.mr-br-faq__item summary::-webkit-details-marker { display: none; }
.mr-br .mr-br-faq__q { font-size: 1.02rem; font-weight: 650; line-height: 1.35; }
.mr-br-faq__mark { position: relative; flex: none; width: 28px; height: 28px; border: 1px solid var(--br-line); border-radius: 50%; }
/* Plus/Minus exakt mittig (Phase Q2.2): gerade Maße (12 × 2 px im 28-px-Feld) und inset/margin:auto
   statt translate(-50%), sonst landen die Balken auf halben Pixeln und wirken versetzt. */
.mr-br-faq__mark::before,
.mr-br-faq__mark::after { content: ""; position: absolute; inset: 0; width: 12px; height: 2px; margin: auto; border-radius: 2px; background: #b9c6ff; transition: transform var(--mr-transition); }
.mr-br-faq__mark::after { transform: rotate(90deg); }
.mr-br-faq__item[open] .mr-br-faq__mark::after { transform: rotate(0deg); }
.mr-br-faq__a { padding: 0 20px 20px; }
.mr-br-faq__a p { color: var(--br-text); }

/* =========================================================
   ABSCHLUSS / MIKE
========================================================= */
.mr-br-final { background: radial-gradient(circle at 20% 0%, rgba(47, 124, 255, .18), transparent 50%), var(--mr-bg, #070b16); }
.mr-br-mike { display: grid; gap: 28px; align-items: center; padding: clamp(24px, 4vw, 56px); border: 1px solid rgba(143, 182, 255, .2); border-radius: 30px; background: var(--br-card); }
@media (min-width: 768px) { .mr-br-mike { grid-template-columns: 220px 1fr; gap: clamp(32px, 4vw, 56px); } }
.mr-br-mike__media { width: 168px; aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; background: #0d1424; }
@media (min-width: 768px) { .mr-br-mike__media { width: 220px; } }
.mr-br-mike__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.mr-br .mr-br-mike__name { margin-top: 22px !important; color: #fff; font-size: 1.15rem !important; font-weight: 700; line-height: 1.25 !important; }
.mr-br .mr-br-mike__role { color: var(--br-muted); font-size: .92rem !important; }
.mr-br-mike .mr-br-ctas { margin-top: 22px; }

/* =========================================================
   BEWEGUNG / DRUCK
========================================================= */
@media (prefers-reduced-motion: reduce) {
  .mr-br *,
  .mr-br *::before,
  .mr-br *::after { transition: none !important; animation: none !important; }
  .mr-br-area:hover,
  .mr-br a.mr-br-btn:hover { transform: none !important; }
}
@media print {
  .mr-br-sys__switch,
  .mr-br-ctas { display: none !important; }
}