Room2Build · Onepager-Generator

Room2Build Onepager-Generator · Anfrage · Recruiting · Termin

Phase 1 · v1.0

Lade das Markendossier (JSON aus dem Audit-Tool) und den Kampagnen-Slot (JSON pro Kampagne). Validierung läuft automatisch, der fertige Onepager kommt als download-fähige HTML-Datei.

Markendossier (JSON)

Dossier hier hinziehen

oder klicken zum Auswählen · z. B. markendossier_riekert.json

Kampagnen-Slot (JSON)

Slot hier hinziehen

oder klicken zum Auswählen · z. B. kampagne_riekert_vorhang_2026.json

Validierung & Build-Log

Fertig.

—

Look & Farben · live

Berater-Tool für Verkaufsgespräche — wirkt sofort, Inhalte bleiben.

Skin

Primär

—

Sekundär

—

Texte feinjustieren

Klick auf eine Sektion im Preview, um nur deren Felder zu bearbeiten — oder pflege hier die 5 wichtigsten direkt.

Sitzt nicht 100 %? Hier nachjustieren, Vorschau aktualisiert sich automatisch.

Sektionen verwalten

Pflicht-Sektionen sind immer da. Wahl- und Zusatz-Module aktivierst Du hier.

HTML-Datei

Lade die Datei beim Hosting-Anbieter hoch — z.B. ins 10web-Frontend (Page mit Custom-HTML-Block) oder auf Cloudflare Pages.

Tracking-Link für Meta-Ads / Google-Ads

In die Zwischenablage

Diese URL als Ziel-URL der Anzeige nutzen — UTM-Parameter sind vorausgefüllt aus dem Slot.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
<meta name="description" content="{{computed.seo_description}}">
<title>{{computed.seo_title}}</title>
{{#if computed.seo_schema_json}}
<script type="application/ld+json">{{{computed.seo_schema_json}}}</script>
{{/if}}

<script>
window.R2B_TRACKING = {
  meta_pixel_id: "{{dossier.tracking.meta_pixel_id}}",
  gtm_id: "{{dossier.tracking.gtm_id}}",
  kampagnen_id: "{{slot.kampagnen_id}}",
  kunde_slug: "{{slot.kunde_slug}}",
  events: {
    page_view: "PageView",
    view_content: "{{slot.tracking.conversion_event_view}}",
    lead: "{{slot.tracking.conversion_event_lead}}"
  },
  consent_required: true,
  lead_endpoint: "https://leads.room2build.com/v1/submit"
};
</script>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="{{dossier.identitaet.fonts_url}}" rel="stylesheet">
{{#if computed.style_fonts_url}}
<link href="{{computed.style_fonts_url}}" rel="stylesheet">
{{/if}}
{{#if computed.style_fonts_css}}
<style id="r2b-style-fonts-override">{{{computed.style_fonts_css}}}</style>
{{/if}}

<style>
:root {
  --c-primaer: {{dossier.identitaet.farben.primaer}};
  --c-sekundaer: {{dossier.identitaet.farben.sekundaer}};
  --c-text: #1d1c1a;
  --c-bg: #ffffff;
  --c-cream: color-mix(in srgb, var(--c-primaer) 4%, #f6f2eb);
  --c-cream-dark: color-mix(in srgb, var(--c-primaer) 8%, #ede5d6);
  --c-tint: color-mix(in srgb, var(--c-primaer) 12%, transparent);
  --c-stone: #2b2925;
  --c-mute: #6f6a62;
  --c-line: rgba(29, 28, 26, 0.12);
  --font-headline: {{dossier.identitaet.schriften.headline}};
  --font-body: {{dossier.identitaet.schriften.fliesstext}};
  --maxw: 1240px;
  --pad-x: clamp(1.25rem, 4vw, 3rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

h1, h2, h3 { font-family: var(--font-headline); font-weight: 500; letter-spacing: -0.01em; }

.r2b__wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }

.r2b__eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-primaer);
  display: inline-block;
}

.r2b__rule { border-top: 1px solid var(--c-line); margin: 0; }

.r2b__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 1rem 1.6rem;
  background: var(--c-text);
  color: #fff;
  border: 1px solid var(--c-text);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.05s;
}
.r2b__cta:hover { background: var(--c-primaer); border-color: var(--c-primaer); }
.r2b__cta:active { transform: translateY(1px); }
.r2b__cta-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}
.r2b__cta:hover .r2b__cta-arrow { transform: translateX(4px); }

.r2b__cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--c-text);
  text-decoration: none;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--c-text);
  transition: gap 0.25s ease, color 0.2s;
}
.r2b__cta-ghost:hover { gap: 0.85rem; color: var(--c-primaer); border-color: var(--c-primaer); }

/* ============ Sticky Header ============ */
.r2b__nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 1rem var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.25s ease, box-shadow 0.25s, padding 0.25s;
}
.r2b__nav.is-stuck {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 var(--c-line);
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}
.r2b__nav-logo { display: flex; align-items: center; gap: 0.6rem; }
.r2b__nav-logo img { max-height: 36px; width: auto; }
.r2b__nav-logo-text {
  font-family: var(--font-headline);
  font-size: 1.05rem;
  color: var(--c-text);
}
.r2b__nav.is-onhero .r2b__nav-logo-text { color: #fff; }
.r2b__nav-cta {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.6rem 1.2rem;
  background: var(--c-text);
  color: #fff;
  border: none;
  border-radius: 999px;
  text-decoration: none;
}
.r2b__nav.is-onhero .r2b__nav-cta { background: #fff; color: var(--c-text); }

/* Mobile-Header: Logo-Text wegblenden, CTA kompakt — verhindert Überlappung */
@media (max-width: 600px) {
  .r2b__nav { padding: 0.7rem 1rem; }
  .r2b__nav-logo-text { display: none; }
  .r2b__nav-logo img { max-height: 30px; }
  .r2b__nav-cta { padding: 0.5rem 0.9rem; font-size: 0.78rem; max-width: 60vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ============ Hero (full-bleed) ============ */
.r2b__hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
  background: var(--c-stone);
}
.r2b__hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: transform;
  overflow: hidden;
}
.r2b__hero-bg img {
  width: 100%;
  height: 110%;
  object-fit: cover;
  transform: scale(1.06);
}
.r2b__hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.75) 100%);
}
.r2b__hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 8rem 0 4rem;
}
.r2b__hero-eyebrow {
  color: rgba(255,255,255,0.85);
  margin-bottom: 1.5rem;
}
.r2b__hero-title {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 1.02;
  font-weight: 500;
  max-width: 16ch;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.r2b__hero-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  max-width: 38ch;
  color: rgba(255,255,255,0.92);
  margin-bottom: 2.5rem;
  line-height: 1.45;
}
.r2b__hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  margin-bottom: 3rem;
}
.r2b__hero .r2b__cta {
  background: #fff;
  color: var(--c-text);
  border-color: #fff;
}
.r2b__hero .r2b__cta:hover { background: var(--c-primaer); color: #fff; border-color: var(--c-primaer); }
.r2b__hero .r2b__cta-ghost { color: #fff; border-bottom-color: rgba(255,255,255,0.5); }
.r2b__hero .r2b__cta-ghost:hover { color: #fff; border-bottom-color: #fff; }

.r2b__hero-stats {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.r2b__stat {
  font-family: var(--font-headline);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  letter-spacing: -0.01em;
  color: var(--c-primaer);
}
.r2b__hero .r2b__stat { color: #fff; }
.r2b__hero .r2b__stat > span:first-child { color: var(--c-primaer); filter: brightness(1.4); }
.r2b__stat-label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

/* ============ Allgemeine Sektion ============ */
.r2b__sec { padding: clamp(4rem, 9vw, 8rem) 0; position: relative; }
.r2b__sec--cream { background: var(--c-cream); }

.r2b__sec-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 4rem;
  align-items: end;
}
.r2b__sec-head .r2b__eyebrow { margin-bottom: 0.75rem; }
.r2b__sec-title {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.05;
  max-width: 22ch;
  letter-spacing: -0.02em;
}
.r2b__sec-lead {
  font-size: 1.1rem;
  color: var(--c-mute);
  max-width: 48ch;
  line-height: 1.55;
}

/* ============ Spiegel ============ */
.r2b__spiegel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}
.r2b__spiegel-head { padding-right: 0; }
.r2b__spiegel-head h2 {
  font-size: clamp(1.8rem, 3.8vw, 3rem);
  line-height: 1.1;
  max-width: 16ch;
}
.r2b__spiegel-body {
  padding-left: 0;
  border-left: none;
  font-size: 1.15rem;
  line-height: 1.65;
}
.r2b__spiegel-body p + p { margin-top: 1.25rem; }
.r2b__spiegel-body em {
  font-style: normal;
  font-family: var(--font-headline);
  font-size: 1.4rem;
  display: block;
  margin-bottom: 1rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* ============ USP (editorial) ============ */
.r2b__usp { display: flex; flex-direction: column; }
.r2b__usp-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--c-line);
  align-items: start;
}
.r2b__usp-item:last-child { border-bottom: 1px solid var(--c-line); }
.r2b__usp-item:hover { background: var(--c-tint); }
.r2b__usp-num {
  font-family: var(--font-headline);
  font-size: 1.6rem;
  color: var(--c-primaer);
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.r2b__usp-text h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  font-weight: 500;
  margin-bottom: 0.6rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 30ch;
}
.r2b__usp-text p {
  color: var(--c-mute);
  font-size: 1rem;
  max-width: 50ch;
}

/* ============ Referenzen (asymmetrisches Grid) ============ */
.r2b__refs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
.r2b__ref {
  display: grid;
  gap: 1.5rem;
}
.r2b__ref-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
.r2b__ref-pair figure { margin: 0; position: relative; overflow: hidden; }
.r2b__ref-pair img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.r2b__ref-pair figcaption {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  backdrop-filter: blur(2px);
}
.r2b__ref-meta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.r2b__ref-meta h3 {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.25;
  font-weight: 500;
  max-width: 28ch;
  letter-spacing: -0.01em;
}
.r2b__ref-zitat {
  font-family: var(--font-headline);
  font-size: 1.05rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--c-mute);
  border-left: 2px solid var(--c-primaer);
  padding-left: 1rem;
}
.r2b__ref-tags {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-mute);
  font-weight: 500;
  padding-top: 0.5rem;
  border-top: 1px solid var(--c-line);
}

/* ============ Prozess (horizontale Timeline) ============ */
.r2b__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  position: relative;
}
.r2b__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  padding: 2rem 0;
  border-top: 1px solid var(--c-line);
  align-items: start;
}
.r2b__step:last-child { border-bottom: 1px solid var(--c-line); }
.r2b__step-num {
  font-family: var(--font-headline);
  font-size: 1.1rem;
  color: var(--c-primaer);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  padding-top: 0.2rem;
}
.r2b__step h3 {
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}
.r2b__step p { color: var(--c-mute); max-width: 50ch; }

/* ============ Formular ============ */
.r2b__form-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
.r2b__form-intro h2 {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.05;
  max-width: 18ch;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}
.r2b__form-intro p {
  color: var(--c-mute);
  font-size: 1.1rem;
  max-width: 42ch;
  line-height: 1.55;
}
.r2b__form-intro-contact {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line);
  font-size: 0.95rem;
  color: var(--c-mute);
}
.r2b__form {
  display: flex;
  flex-direction: column;
}
.r2b__field {
  position: relative;
  margin-bottom: 1.5rem;
}
.r2b__field label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-mute);
  margin-bottom: 0.6rem;
}
.r2b__field label .req { color: var(--c-primaer); margin-left: 0.2rem; }
.r2b__field input,
.r2b__field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--c-text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--c-line);
  padding: 0.6rem 0;
  transition: border-color 0.2s;
}
.r2b__field input:focus,
.r2b__field textarea:focus {
  outline: none;
  border-color: var(--c-primaer);
}
.r2b__field textarea { min-height: 4rem; resize: vertical; }
.r2b__field--row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.r2b__radios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.r2b__radio {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-size: 0.92rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.r2b__radio input { display: none; }
.r2b__radio:hover { border-color: var(--c-text); }
.r2b__radio:has(input:checked) {
  background: var(--c-text);
  color: #fff;
  border-color: var(--c-text);
}
.r2b__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--c-mute);
  margin-bottom: 2rem;
  line-height: 1.5;
}
.r2b__consent input { width: 1.05rem; height: 1.05rem; margin-top: 0.25rem; flex-shrink: 0; }
.r2b__form-error {
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
  padding: 0.9rem 1.2rem;
  font-size: 0.92rem;
  border-radius: 4px;
  margin-bottom: 1.5rem;
  display: none;
}
.r2b__form-error.is-visible { display: block; }
.r2b__form-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 1.1rem 2rem;
  background: var(--c-text);
  color: #fff;
  border: 1px solid var(--c-text);
  border-radius: 999px;
  align-self: flex-start;
  transition: background 0.2s, border-color 0.2s;
}
.r2b__form-submit:hover { background: var(--c-primaer); border-color: var(--c-primaer); }
.r2b__form-submit:hover .r2b__cta-arrow { transform: translateX(4px); }
.r2b__form-submit:disabled { opacity: 0.5; cursor: wait; }
.r2b__form-success {
  padding: 3rem 0;
  text-align: left;
  display: none;
}
.r2b__form-success.is-visible { display: block; }
.r2b__form-success h3 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--c-primaer);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.r2b__form-success p { color: var(--c-mute); font-size: 1.05rem; }

/* ============ Footer ============ */
.r2b__footer {
  background: var(--c-cream-dark);
  color: var(--c-text);
  padding: 4rem 0 2rem;
  font-size: 0.92rem;
  border-top: 4px solid var(--c-primaer);
}
.r2b__footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}
.r2b__footer-firma {
  font-family: var(--font-headline);
  font-size: 1.4rem;
  margin-bottom: 0.4rem;
  letter-spacing: -0.01em;
}
.r2b__footer-region { color: var(--c-mute); }
.r2b__footer-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.r2b__footer-links a {
  text-decoration: none;
  color: var(--c-text);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.r2b__footer-links a:hover { border-bottom-color: var(--c-text); }
.r2b__footer-hosting {
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line);
  font-size: 0.8rem;
  color: var(--c-mute);
}

/* ============ Cookie-Banner ============ */
.r2b__cookie {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  max-width: 480px;
  margin: 0 auto;
  background: var(--c-text);
  color: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  z-index: 99;
  font-size: 0.92rem;
  line-height: 1.5;
  display: none;
}
.r2b__cookie.is-visible {
  display: block;
  animation: r2bCookieIn 0.3s ease;
}
@keyframes r2bCookieIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.r2b__cookie p { margin-bottom: 1rem; color: rgba(255,255,255,0.85); }
.r2b__cookie a { color: #fff; text-decoration: underline; }
.r2b__cookie-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.r2b__cookie-btn {
  padding: 0.55rem 1rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  border: 1px solid #fff;
  background: #fff;
  color: var(--c-text);
}
.r2b__cookie-btn--ghost { background: transparent; color: #fff; }

/* ============ Reveal-Animation ============ */
.r2b__reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.7, 0.25, 1), transform 0.7s cubic-bezier(0.22, 0.7, 0.25, 1);
}
.r2b__reveal.is-visible { opacity: 1; transform: translateY(0); }
.r2b__reveal--delay-1 { transition-delay: 0.12s; }
.r2b__reveal--delay-2 { transition-delay: 0.24s; }
.r2b__reveal--delay-3 { transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
  .r2b__reveal { opacity: 1; transform: none; transition: none; }
  .r2b__hero-bg img { transform: none; }
}

/* ============ Desktop ============ */
@media (min-width: 720px) {
  .r2b__sec-head { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .r2b__spiegel { grid-template-columns: 1fr 1.4fr; gap: 5rem; }
  .r2b__refs { grid-template-columns: 1fr; gap: 4rem; }
  .r2b__ref--big { grid-template-columns: 1.6fr 1fr; gap: 2.5rem; }
  .r2b__ref--big .r2b__ref-pair { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .r2b__ref--small { grid-template-columns: 1fr 1.4fr; gap: 2.5rem; }
  .r2b__ref--small .r2b__ref-meta { order: -1; }
  .r2b__form-wrap { grid-template-columns: 1fr 1.2fr; gap: 5rem; }
  .r2b__field--row { grid-template-columns: 1fr 1fr; }
  .r2b__footer-grid { grid-template-columns: 1.4fr 1fr; }
}

@media (min-width: 1020px) {
  .r2b__hero-stats { gap: 4rem; }
  .r2b__step { grid-template-columns: 5rem 1fr; gap: 3rem; }
  .r2b__usp-item { grid-template-columns: 5rem 1fr; gap: 3rem; }
}

/* ====================================================================
 * Style-Varianten · Architektur:
 * Hero-bg ist immer absolut positioniert. Splitscreen/Sidebyside
 * setzen einfach `inset: 0 0 0 X%` damit es nur die rechte Hälfte/Drittel
 * füllt. Text-Wrap (hero-inner) bekommt entsprechendes padding-right
 * damit Text nicht überlappt.
 * Mobile (<880px): immer stacked — Bild oben, Text darunter.
 * ==================================================================== */

/* ============ Style-Variante: SPLITSCREEN (50/50) ============ */
@media (min-width: 880px) {
  body.r2b-hero-splitscreen .r2b__hero {
    min-height: 86vh;
    align-items: center;
    background: var(--c-bg);
    color: var(--c-text);
  }
  body.r2b-hero-splitscreen .r2b__hero-bg { inset: 0 0 0 50%; }
  body.r2b-hero-splitscreen .r2b__hero-bg::after {
    background: linear-gradient(90deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 30%);
  }
  body.r2b-hero-splitscreen .r2b__hero-bg img { transform: none; }
  /* Viewport-bezogen: Container 50vw breit, links bündig zum Wrap-Rand,
     rechts strikt vor Bild-Linie, sodass Text nie überlappt */
  body.r2b-hero-splitscreen .r2b__hero-inner {
    max-width: none;
    width: 50vw;
    margin-left: 0;
    margin-right: auto;
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-left: max(var(--pad-x), calc((100vw - var(--maxw)) / 2 + var(--pad-x)));
    padding-right: 2.5rem;
  }
  body.r2b-hero-splitscreen .r2b__hero-title { max-width: 100%; font-size: clamp(2.2rem, 4.5vw, 4.4rem); }
  body.r2b-hero-splitscreen .r2b__hero-sub { max-width: 100%; }
  body.r2b-hero-splitscreen .r2b__hero-eyebrow { color: var(--c-primaer); }
  body.r2b-hero-splitscreen .r2b__hero-title { color: var(--c-text); max-width: 14ch; }
  body.r2b-hero-splitscreen .r2b__hero-sub { color: var(--c-mute); }
  body.r2b-hero-splitscreen .r2b__hero .r2b__cta { background: var(--c-text); color: #fff; border-color: var(--c-text); }
  body.r2b-hero-splitscreen .r2b__hero .r2b__cta:hover { background: var(--c-primaer); border-color: var(--c-primaer); }
  body.r2b-hero-splitscreen .r2b__hero .r2b__cta-ghost { color: var(--c-text); border-bottom-color: var(--c-text); }
  body.r2b-hero-splitscreen .r2b__hero-stats { border-top-color: var(--c-line); }
  body.r2b-hero-splitscreen .r2b__stat { color: var(--c-text); }
  body.r2b-hero-splitscreen .r2b__stat-label { color: var(--c-mute); }
  body.r2b-hero-splitscreen .r2b__nav.is-onhero .r2b__nav-logo-text { color: var(--c-text); }
  body.r2b-hero-splitscreen .r2b__nav.is-onhero .r2b__nav-cta { background: var(--c-text); color: #fff; }
}
@media (max-width: 879px) {
  body.r2b-hero-splitscreen .r2b__hero { min-height: auto; padding-top: 0; }
  body.r2b-hero-splitscreen .r2b__hero-bg { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 10; margin-top: 5rem; }
  body.r2b-hero-splitscreen .r2b__hero-bg img { transform: none; }
  body.r2b-hero-splitscreen .r2b__hero-inner { padding: 3rem 0 4rem; }
}

/* ============ Style-Variante: SIDEBYSIDE (Text 40 / Bild 60) ============ */
@media (min-width: 880px) {
  body.r2b-hero-sidebyside .r2b__hero {
    min-height: 86vh;
    align-items: center;
    background: var(--c-cream);
    color: var(--c-text);
  }
  body.r2b-hero-sidebyside .r2b__hero-bg { inset: 0 0 0 40%; }
  body.r2b-hero-sidebyside .r2b__hero-bg::after {
    background: linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 25%);
  }
  body.r2b-hero-sidebyside .r2b__hero-bg img { transform: none; }
  body.r2b-hero-sidebyside .r2b__hero-inner {
    max-width: none;
    width: 40vw;
    margin-left: 0;
    margin-right: auto;
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-left: max(var(--pad-x), calc((100vw - var(--maxw)) / 2 + var(--pad-x)));
    padding-right: 2rem;
  }
  body.r2b-hero-sidebyside .r2b__hero-title { max-width: 100%; font-size: clamp(2rem, 3.6vw, 3.4rem); }
  body.r2b-hero-sidebyside .r2b__hero-sub { max-width: 100%; }
  body.r2b-hero-sidebyside .r2b__hero-eyebrow { color: var(--c-primaer); }
  body.r2b-hero-sidebyside .r2b__hero-title { color: var(--c-text); font-size: clamp(2.2rem, 4.6vw, 3.8rem); max-width: 12ch; }
  body.r2b-hero-sidebyside .r2b__hero-sub { color: var(--c-mute); max-width: 26ch; }
  body.r2b-hero-sidebyside .r2b__hero .r2b__cta { background: var(--c-text); color: #fff; border-color: var(--c-text); }
  body.r2b-hero-sidebyside .r2b__hero .r2b__cta:hover { background: var(--c-primaer); border-color: var(--c-primaer); }
  body.r2b-hero-sidebyside .r2b__hero .r2b__cta-ghost { color: var(--c-text); border-bottom-color: var(--c-text); }
  body.r2b-hero-sidebyside .r2b__hero-stats { border-top-color: var(--c-line); }
  body.r2b-hero-sidebyside .r2b__stat { color: var(--c-text); }
  body.r2b-hero-sidebyside .r2b__stat-label { color: var(--c-mute); }
  body.r2b-hero-sidebyside .r2b__nav.is-onhero .r2b__nav-logo-text { color: var(--c-text); }
  body.r2b-hero-sidebyside .r2b__nav.is-onhero .r2b__nav-cta { background: var(--c-text); color: #fff; }
}
@media (max-width: 879px) {
  body.r2b-hero-sidebyside .r2b__hero { min-height: auto; padding-top: 0; background: var(--c-cream); }
  body.r2b-hero-sidebyside .r2b__hero-bg { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 10; margin-top: 5rem; }
  body.r2b-hero-sidebyside .r2b__hero-bg img { transform: none; }
  body.r2b-hero-sidebyside .r2b__hero-inner { padding: 3rem 0 4rem; }
}

/* ============ Style-Variante: CENTERED (Text mittig, Bild unten) ============ */
body.r2b-hero-centered .r2b__hero {
  min-height: auto;
  padding: 9rem 0 0;
  background: var(--c-bg);
  color: var(--c-text);
  align-items: center;
  text-align: center;
  flex-direction: column;
}
body.r2b-hero-centered .r2b__hero-bg {
  position: relative;
  inset: auto;
  height: auto;
  margin-top: 3rem;
  aspect-ratio: 21 / 9;
  max-width: 1100px;
  width: calc(100% - 2 * var(--pad-x));
}
body.r2b-hero-centered .r2b__hero-bg::after {
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.25) 100%);
}
body.r2b-hero-centered .r2b__hero-bg img { transform: none; height: 100%; }
body.r2b-hero-centered .r2b__hero-inner { padding: 0; max-width: 920px; margin: 0 auto; text-align: center; }
body.r2b-hero-centered .r2b__hero-inner > * { margin-left: auto; margin-right: auto; }
body.r2b-hero-centered .r2b__hero-eyebrow { color: var(--c-primaer); }
body.r2b-hero-centered .r2b__hero-title { color: var(--c-text); max-width: 18ch; font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: 1.04; }
body.r2b-hero-centered .r2b__hero-sub { color: var(--c-mute); max-width: 48ch; }
body.r2b-hero-centered .r2b__hero-ctas { justify-content: center; }
body.r2b-hero-centered .r2b__hero .r2b__cta { background: var(--c-text); color: #fff; border-color: var(--c-text); }
body.r2b-hero-centered .r2b__hero .r2b__cta:hover { background: var(--c-primaer); border-color: var(--c-primaer); }
body.r2b-hero-centered .r2b__hero .r2b__cta-ghost { color: var(--c-text); border-bottom-color: var(--c-text); }
body.r2b-hero-centered .r2b__hero-stats { display: none; }
body.r2b-hero-centered .r2b__nav.is-onhero .r2b__nav-logo-text { color: var(--c-text); }
body.r2b-hero-centered .r2b__nav.is-onhero .r2b__nav-cta { background: var(--c-text); color: #fff; }

/* ============ Typo-Set: industrial_slab ============ */
body.r2b-typo-industrial_slab { --font-headline: 'Roboto Slab', Georgia, serif; --font-body: 'Inter', -apple-system, sans-serif; }
body.r2b-typo-industrial_slab h1, body.r2b-typo-industrial_slab h2, body.r2b-typo-industrial_slab h3 { font-weight: 700; letter-spacing: -0.02em; }

/* ============ Typo-Set: modern_sans ============ */
body.r2b-typo-modern_sans { --font-headline: 'Inter', -apple-system, sans-serif; --font-body: 'Inter', -apple-system, sans-serif; }
body.r2b-typo-modern_sans h1, body.r2b-typo-modern_sans h2, body.r2b-typo-modern_sans h3 { font-weight: 700; letter-spacing: -0.03em; }
body.r2b-typo-modern_sans .r2b__hero-title { font-weight: 800; }

/* ============ Galerie (Scroll-Snap-Slider mit Filter + Lightbox) ============ */
.r2b__gal-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.r2b__gal-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.r2b__gal-filter button {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.55rem 1.1rem;
  background: transparent;
  border: 1px solid var(--c-line);
  color: var(--c-mute);
  cursor: pointer;
  transition: all .18s ease;
  border-radius: 999px;
}
.r2b__gal-filter button:hover { border-color: var(--c-text); color: var(--c-text); }
.r2b__gal-filter button[aria-pressed="true"] {
  background: var(--c-text);
  color: var(--c-bg);
  border-color: var(--c-text);
}
.r2b__gal-stage { position: relative; }
.r2b__gal-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(70%, 1fr);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
}
.r2b__gal-track::-webkit-scrollbar { display: none; }
.r2b__gal-card {
  scroll-snap-align: start;
  position: relative;
  margin: 0;
  cursor: zoom-in;
  overflow: hidden;
  background: var(--c-cream);
}
.r2b__gal-card[hidden] { display: none; }
.r2b__gal-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.r2b__gal-card:hover img { transform: scale(1.03); }
.r2b__gal-card figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0.7rem 1rem;
  background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0));
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
}
.r2b__gal-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--c-line);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--c-text);
  z-index: 2;
  transition: background .18s ease;
}
.r2b__gal-arrow:hover { background: #fff; }
.r2b__gal-arrow--prev { left: -22px; }
.r2b__gal-arrow--next { right: -22px; }
@media (min-width: 768px) {
  .r2b__gal-track { grid-auto-columns: minmax(38%, 1fr); }
  .r2b__gal-arrow { display: flex; }
}
@media (min-width: 1100px) {
  .r2b__gal-track { grid-auto-columns: minmax(28%, 1fr); }
}

/* ============ Lightbox ============ */
.r2b__lightbox {
  position: fixed;
  inset: 0;
  background: rgba(15, 14, 12, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 2rem;
}
.r2b__lightbox.is-open { display: flex; }
.r2b__lightbox-img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  display: block;
}
.r2b__lightbox-cap {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.85);
  font-family: var(--font-body);
  font-size: 0.9rem;
  text-align: center;
  padding: 0 1rem;
}
.r2b__lightbox-btn {
  position: absolute;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  width: 48px; height: 48px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s ease;
}
.r2b__lightbox-btn:hover { background: rgba(255,255,255,0.22); }
.r2b__lightbox-close { top: 1.5rem; right: 1.5rem; }
.r2b__lightbox-prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.r2b__lightbox-next { right: 1.5rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
  .r2b__lightbox-prev, .r2b__lightbox-next { top: auto; bottom: 4rem; transform: none; }
  .r2b__lightbox-prev { left: 1rem; }
  .r2b__lightbox-next { right: 1rem; }
}

/* ============ Print ============ */
@media print {
  body { font-size: 11pt; }
  .r2b__nav, .r2b__cookie, .r2b__hero-ctas, .r2b__form, .r2b__cta, .r2b__gal-arrow, .r2b__gal-filter, .r2b__lightbox { display: none !important; }
  .r2b__hero { min-height: 0; padding: 2rem 0; color: var(--c-text); background: none; }
  .r2b__hero-bg { display: none; }
  .r2b__sec { padding: 1.5rem 0; page-break-inside: avoid; }
  .r2b__footer { background: none; border-top: 1px solid var(--c-text); }
  .r2b__reveal { opacity: 1; transform: none; }
  .r2b__gal-track { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-flow: row; overflow: visible; }
  .r2b__gal-card[hidden] { display: block; }
}

/* === SHARED SKIN CSS (Sprint 4 P22-24) === */
/* ====================================================================
 * R2B SKIN-SYSTEM · Universal-Portion (Sprint 4 P22-24)
 * Wird in Anfrage/Recruiting/Termin eingefügt — nutzt nur Klassen die
 * in ALLEN 4 Templates existieren.
 * Schwerpunkt: Skin-Background, BG-Toggle, Reveal-Varianten, Image-Hover.
 * ==================================================================== */

/* ---------- BG-Toggle (alle Sektionen) ---------- */
.r2b__sec[data-bg-override="cream"] { background: var(--c-cream); color: var(--c-text); }
.r2b__sec[data-bg-override="stone"] { background: var(--c-stone); color: #fff; }
.r2b__sec[data-bg-override="stone"] .r2b__sec-title,
.r2b__sec[data-bg-override="stone"] .r2b__eyebrow { color: #fff; }
.r2b__sec[data-bg-override="stone"] .r2b__sec-lead { color: rgba(255,255,255,0.7); }
.r2b__sec[data-bg-override="primaer-tint"] { background: color-mix(in srgb, var(--c-primaer) 8%, #fff); color: var(--c-text); }
.r2b__hero[data-bg-override="cream"] { background: var(--c-cream); }
.r2b__hero[data-bg-override="stone"] { background: var(--c-stone); color: #fff; }
.r2b__hero[data-bg-override="stone"] .r2b__hero-title,
.r2b__hero[data-bg-override="stone"] .r2b__hero-sub,
.r2b__hero[data-bg-override="stone"] .r2b__hero-eyebrow { color: #fff; }
.r2b__hero[data-bg-override="stone"] .r2b__hero-sub { color: rgba(255,255,255,0.85); }
.r2b__hero[data-bg-override="primaer-tint"] { background: color-mix(in srgb, var(--c-primaer) 8%, #fff); }

/* ---------- Skin-Schrift + Hero-Background (Universal) ---------- */
body.r2b-skin-industrial .r2b__sec { padding-top: 4.5rem; padding-bottom: 4.5rem; }
body.r2b-skin-industrial .r2b__sec-title { font-weight: 600; }
body.r2b-skin-industrial .r2b__sec--cream { background: color-mix(in srgb, var(--c-primaer) 6%, #fff); }

body.r2b-skin-atelier .r2b__sec { padding-top: 6rem; padding-bottom: 6rem; }
body.r2b-skin-atelier .r2b__sec-title { font-weight: 700; letter-spacing: -0.025em; }
body.r2b-skin-atelier .r2b__sec--cream { background: color-mix(in srgb, var(--c-primaer) 8%, #faf7f1); }

body.r2b-skin-fullbleed .r2b__hero { background: var(--c-stone); }
body.r2b-skin-fullbleed .r2b__hero .r2b__hero-title,
body.r2b-skin-fullbleed .r2b__hero .r2b__hero-sub,
body.r2b-skin-fullbleed .r2b__hero .r2b__hero-eyebrow { color: #fff; }
body.r2b-skin-fullbleed .r2b__sec-title { font-style: italic; font-weight: 500; }

body.r2b-skin-two_tone .r2b__hero { background: var(--c-primaer); }
body.r2b-skin-two_tone .r2b__hero .r2b__hero-title,
body.r2b-skin-two_tone .r2b__hero .r2b__hero-sub,
body.r2b-skin-two_tone .r2b__hero .r2b__hero-eyebrow { color: var(--c-on-primaer, #fff); }
body.r2b-skin-two_tone .r2b__sec-title { font-weight: 700; letter-spacing: -0.025em; }

/* ---------- Reveal-Varianten (Universal) ---------- */
html.r2b-anim body[data-reveal="slide-up"] .r2b__reveal:not(.is-visible) { opacity: 0; transform: translateY(40px); }
body[data-reveal="slide-up"] .r2b__reveal { transition: opacity .6s ease-out, transform .6s ease-out; }
html.r2b-anim body[data-reveal="scale"] .r2b__reveal:not(.is-visible) { opacity: 0; transform: scale(0.96) translateY(10px); }
body[data-reveal="scale"] .r2b__reveal { transition: opacity .9s cubic-bezier(0.22, 1, 0.36, 1), transform .9s cubic-bezier(0.22, 1, 0.36, 1); }
html.r2b-anim body[data-reveal="fade-strong"] .r2b__reveal:not(.is-visible) { opacity: 0; transform: translateY(30px); filter: blur(8px); }
body[data-reveal="fade-strong"] .r2b__reveal { transition: opacity 1.1s ease-out, transform 1.1s ease-out, filter 1.1s ease-out; }
html.r2b-anim body[data-reveal="slide-side"] .r2b__reveal:not(.is-visible) { opacity: 0; transform: translateX(-30px); }
body[data-reveal="slide-side"] .r2b__reveal { transition: opacity .7s ease-out, transform .7s ease-out; }

</style>
</head>
<body class="{{computed.body_class}}" data-reveal="{{computed.reveal_variant}}">

<header class="r2b__nav is-onhero" id="r2b-nav">
  <div class="r2b__nav-logo">
    {{#if dossier.identitaet.logo.primaer}}
    <img src="{{dossier.identitaet.logo.primaer}}" alt="{{dossier.stamm.firma}}" onerror="this.style.display='none';this.nextElementSibling.style.display='inline';">
    <span class="r2b__nav-logo-text" style="display:none;">{{dossier.stamm.firma_kurz}}</span>
    {{else}}
    <span class="r2b__nav-logo-text">{{dossier.stamm.firma_kurz}}</span>
    {{/if}}
  </div>
  <a href="#formular" class="r2b__nav-cta" data-track="cta_click_nav">{{slot.inhalt.cta_primaer}}</a>
</header>

<section class="r2b__hero" data-sektion="hero" id="hero" data-bg-override="{{computed.sektion_bg_hero}}">
  <div class="r2b__hero-bg" data-parallax>
    {{#if computed.hero_image_url}}
    <img src="{{computed.hero_image_url}}" alt="{{computed.hero_image_alt}}" loading="eager">
    {{/if}}
  </div>
  <div class="r2b__wrap r2b__hero-inner">
    <div class="r2b__eyebrow r2b__hero-eyebrow r2b__reveal" data-edit-path="computed.hero_eyebrow">{{computed.hero_eyebrow}}</div>
    <h1 class="r2b__hero-title r2b__reveal r2b__reveal--delay-1" data-edit-path="slot.inhalt.headline">{{slot.inhalt.headline}}</h1>
    <p class="r2b__hero-sub r2b__reveal r2b__reveal--delay-2" data-edit-path="computed.hero_subline">{{computed.hero_subline}}</p>
    <div class="r2b__hero-ctas r2b__reveal r2b__reveal--delay-3">
      <a href="#formular" class="r2b__cta" data-track="cta_click_hero">
        <span data-edit-path="slot.inhalt.cta_primaer">{{slot.inhalt.cta_primaer}}</span>
        <span class="r2b__cta-arrow" aria-hidden="true">→</span>
      </a>
      {{#if slot.inhalt.cta_sekundaer}}
      <a href="#referenzen" class="r2b__cta-ghost" data-track="cta_click_hero_sek">
        <span data-edit-path="slot.inhalt.cta_sekundaer">{{slot.inhalt.cta_sekundaer}}</span>
        <span class="r2b__cta-arrow" aria-hidden="true">↓</span>
      </a>
      {{/if}}
    </div>

{{#if computed.hero_stats}}
    <div class="r2b__hero-stats r2b__reveal r2b__reveal--delay-3">
      {{#each computed.hero_stats}}
      <div class="r2b__stat">
        <span data-count-target="{{this.value}}">{{this.value}}</span>
        <span class="r2b__stat-label">{{this.label}}</span>
      </div>
      {{/each}}
    </div>
    {{/if}}
  </div>
</section>

{{#if computed.spiegel}}
<section class="r2b__sec r2b__sec--cream" data-sektion="spiegel" id="spiegel" data-bg-override="{{computed.sektion_bg_spiegel}}">
  <div class="r2b__wrap r2b__spiegel">
    <div class="r2b__spiegel-head r2b__reveal">
      <span class="r2b__eyebrow" data-edit-path="computed.spiegel.eyebrow">{{#if computed.spiegel.eyebrow}}{{computed.spiegel.eyebrow}}{{else}}Für wen{{/if}}</span>
      <h2 data-edit-path="computed.spiegel.headline">{{computed.spiegel.headline}}</h2>
    </div>
    <div class="r2b__spiegel-body r2b__reveal r2b__reveal--delay-1">
      <em data-edit-path="computed.spiegel.problem">{{computed.spiegel.problem}}</em>
      <p data-edit-path="computed.spiegel.loesung">{{computed.spiegel.loesung}}</p>
    </div>
  </div>
</section>
{{/if}}

{{#if dossier.usp.argumente}}
<section class="r2b__sec" data-sektion="warum" id="warum" data-bg-override="{{computed.sektion_bg_warum}}">
  <div class="r2b__wrap">
    <div class="r2b__sec-head">
      <div class="r2b__reveal">
        <span class="r2b__eyebrow" data-edit-path="computed.warum_eyebrow">{{#if computed.warum_eyebrow}}{{computed.warum_eyebrow}}{{else}}Warum {{dossier.stamm.firma_kurz}}{{/if}}</span>
        <h2 class="r2b__sec-title" data-edit-path="computed.usp_headline">{{computed.usp_headline}}</h2>
      </div>
      <p class="r2b__sec-lead r2b__reveal r2b__reveal--delay-1" data-edit-path="dossier.usp.spitze_satz">{{dossier.usp.spitze_satz}}</p>
    </div>
    <div class="r2b__usp">
      {{#each computed.usp_cards}}
      <div class="r2b__usp-item r2b__reveal">
        <div class="r2b__usp-num">{{this.num}}</div>
        <div class="r2b__usp-text">
          <h3 data-edit-path="computed.usp_cards.__index__.argument">{{this.argument}}</h3>
          {{#if this.beleg}}<p data-edit-path="computed.usp_cards.__index__.beleg">{{this.beleg}}</p>{{/if}}
        </div>
      </div>
      {{/each}}
    </div>
  </div>
</section>
{{/if}}

{{#if computed.galerie_aktiv}}
<section class="r2b__sec" data-sektion="galerie" id="galerie" data-bg-override="{{computed.sektion_bg_galerie}}">
  <div class="r2b__wrap">
    <div class="r2b__sec-head">
      <div class="r2b__reveal">
        <span class="r2b__eyebrow" data-edit-path="computed.galerie.eyebrow">{{computed.galerie.eyebrow}}</span>
        <h2 class="r2b__sec-title" data-edit-path="computed.galerie.headline">{{computed.galerie.headline}}</h2>
      </div>
      {{#if computed.galerie.subline}}<p class="r2b__sec-lead r2b__reveal r2b__reveal--delay-1" data-edit-path="computed.galerie.subline">{{computed.galerie.subline}}</p>{{/if}}
    </div>
    {{#if computed.galerie.has_kategorien}}
    <div class="r2b__gal-head r2b__reveal">
      <div class="r2b__gal-filter" role="tablist" aria-label="Kategorie filtern">
        <button type="button" data-gal-filter="*" aria-pressed="true">Alle</button>
        {{#each computed.galerie.kategorien}}
        <button type="button" data-gal-filter="{{this.id}}" aria-pressed="false">{{this.label}}</button>
        {{/each}}
      </div>
    </div>
    {{/if}}
    <div class="r2b__gal-stage r2b__reveal r2b__reveal--delay-2">
      <button type="button" class="r2b__gal-arrow r2b__gal-arrow--prev" aria-label="Zurück">‹</button>
      <div class="r2b__gal-track" id="r2b-gal-track">
        {{#each computed.galerie.bilder}}
        <figure class="r2b__gal-card" data-gal-cat="{{this.kategorie}}" data-gal-idx="{{this.idx}}" data-gal-src="{{this.src}}" data-gal-cap="{{this.caption_safe}}">
          <img src="{{this.src}}" alt="{{this.alt}}" loading="lazy">
          {{#if this.caption}}<figcaption>{{this.caption}}</figcaption>{{/if}}
        </figure>
        {{/each}}
      </div>
      <button type="button" class="r2b__gal-arrow r2b__gal-arrow--next" aria-label="Weiter">›</button>
    </div>
  </div>
</section>
{{/if}}

{{#if computed.referenzen}}
<section class="r2b__sec r2b__sec--cream" data-sektion="referenzen" id="referenzen" data-bg-override="{{computed.sektion_bg_referenzen}}">
  <div class="r2b__wrap">
    <div class="r2b__sec-head">
      <div class="r2b__reveal">
        <span class="r2b__eyebrow" data-edit-path="computed.referenzen_eyebrow">Aus der Werkstatt</span>
        <h2 class="r2b__sec-title" data-edit-path="computed.referenzen_headline">Arbeiten, an denen wir gemessen werden.</h2>
      </div>
      <p class="r2b__sec-lead r2b__reveal r2b__reveal--delay-1" data-edit-path="computed.referenzen_lead">Eine Auswahl jüngerer Projekte. Bilder, Auftragswerte, Stimmen unserer Kunden.</p>
    </div>
    <div class="r2b__refs">
      {{#each computed.referenzen}}
      <article class="r2b__ref r2b__reveal {{this.layout_class}}">
        <div class="r2b__ref-pair {{#if this.has_vorher_nachher}}r2b__ref-pair--double{{else}}r2b__ref-pair--single{{/if}}">
          {{#if this.has_vorher_nachher}}
          <figure>
            <img src="{{this.bilder.vorher}}" alt="Vorher: {{this.titel}}" loading="lazy">
            <figcaption>Vorher</figcaption>
          </figure>
          <figure>
            <img src="{{this.bilder.nachher}}" alt="Nachher: {{this.titel}}" loading="lazy">
            <figcaption>Nachher</figcaption>
          </figure>
          {{else}}
          <figure>
            <img src="{{this.bilder.hauptbild}}" alt="{{this.titel}}" loading="lazy">
          </figure>
          {{/if}}
        </div>
        <div class="r2b__ref-meta">
          <h3>{{this.titel}}</h3>
          {{#if this.kunden_zitat}}<blockquote class="r2b__ref-zitat">„{{this.kunden_zitat}}"</blockquote>{{/if}}
          {{#if this.has_meta}}
          <div class="r2b__ref-tags">
            {{#if this.auftragswert_fmt}}<span>{{this.auftragswert_fmt}}</span>{{/if}}
            {{#if this.auftragsdauer_fmt}}<span>{{this.auftragsdauer_fmt}}</span>{{/if}}
          </div>
          {{/if}}
        </div>
      </article>
      {{/each}}
    </div>
  </div>
</section>
{{/if}}

<section class="r2b__sec" data-sektion="prozess" id="prozess" data-bg-override="{{computed.sektion_bg_prozess}}">
  <div class="r2b__wrap">
    <div class="r2b__sec-head">
      <div class="r2b__reveal">
        <span class="r2b__eyebrow" data-edit-path="computed.prozess.eyebrow">{{#if computed.prozess.eyebrow}}{{computed.prozess.eyebrow}}{{else}}Wie wir arbeiten{{/if}}</span>
        <h2 class="r2b__sec-title" data-edit-path="computed.prozess.headline">{{computed.prozess.headline}}</h2>
      </div>
      <p class="r2b__sec-lead r2b__reveal r2b__reveal--delay-1" data-edit-path="computed.prozess.lead">{{#if computed.prozess.lead}}{{computed.prozess.lead}}{{else}}Vier Schritte, kein Versteckspiel. Sie wissen jederzeit, wo Ihr Auftrag steht.{{/if}}</p>
    </div>
    <div class="r2b__steps">
      {{#each computed.prozess.schritte}}
      <div class="r2b__step r2b__reveal">
        <div class="r2b__step-num">{{this.num}}</div>
        <div>
          <h3 data-edit-path="computed.prozess.schritte.__index__.titel">{{this.titel}}</h3>
          <p data-edit-path="computed.prozess.schritte.__index__.text">{{this.text}}</p>
        </div>
      </div>
      {{/each}}
    </div>
  </div>
</section>

<section class="r2b__sec r2b__sec--cream" data-sektion="formular" id="formular" data-bg-override="{{computed.sektion_bg_formular}}">
  <div class="r2b__wrap r2b__form-wrap">
    <div class="r2b__form-intro r2b__reveal">
      <span class="r2b__eyebrow" data-edit-path="computed.formular_eyebrow">{{#if computed.formular_eyebrow}}{{computed.formular_eyebrow}}{{else}}Anfrage{{/if}}</span>
      <h2 data-edit-path="computed.formular_headline">{{#if computed.formular_headline}}{{computed.formular_headline}}{{else}}{{slot.inhalt.cta_primaer}}{{/if}}</h2>
      <p data-edit-path="computed.form_subline">{{computed.form_subline}}</p>
      <div class="r2b__form-intro-contact">
        Lieber direkt anrufen? <br>
        {{dossier.stamm.firma_kurz}}, {{dossier.stamm.region}}
      </div>
    </div>

<form class="r2b__form r2b__reveal r2b__reveal--delay-1" id="r2b-form" novalidate>
      <div class="r2b__form-error" id="form-error" role="alert"></div>

<div class="r2b__field">
        <label for="f-name">Name <span class="req">*</span></label>
        <input type="text" id="f-name" name="name" required minlength="2" autocomplete="name">
      </div>

<div class="r2b__field--row">
        <div class="r2b__field">
          <label for="f-tel">Telefon</label>
          <input type="tel" id="f-tel" name="telefon" autocomplete="tel" inputmode="tel">
        </div>
        <div class="r2b__field">
          <label for="f-mail">E-Mail</label>
          <input type="email" id="f-mail" name="email" autocomplete="email">
        </div>
      </div>

<div class="r2b__field">
        <label for="f-plz">Postleitzahl <span class="req">*</span></label>
        <input type="text" id="f-plz" name="plz" required pattern="[0-9]{5}" maxlength="5" inputmode="numeric" autocomplete="postal-code">
      </div>

<div class="r2b__field">
        <label for="f-text">Worum geht's? <span class="req">*</span></label>
        <textarea id="f-text" name="beschreibung" required minlength="10" placeholder="Kurz, in Ihren Worten — wir melden uns mit Fragen."></textarea>
      </div>

<div class="r2b__field">
        <label>Wann passt es Ihnen?</label>
        <div class="r2b__radios">
          <label class="r2b__radio"><input type="radio" name="termin" value="diese_woche"><span>Diese Woche</span></label>
          <label class="r2b__radio"><input type="radio" name="termin" value="2_wochen"><span>Nächste 2 Wochen</span></label>
          <label class="r2b__radio"><input type="radio" name="termin" value="4_wochen"><span>Nächste 4 Wochen</span></label>
          <label class="r2b__radio"><input type="radio" name="termin" value="flexibel" checked><span>Flexibel</span></label>
        </div>
      </div>

<label class="r2b__consent">
        <input type="checkbox" id="f-consent" name="consent" required>
        <span>Ich bin mit der Verarbeitung meiner Daten zur Bearbeitung meiner Anfrage einverstanden. <a href="{{slot.urls.datenschutz}}" target="_blank" rel="noopener">Datenschutzerklärung</a></span>
      </label>

<button type="submit" class="r2b__form-submit" data-track="form_submit">
        <span>Anfrage senden</span>
        <span class="r2b__cta-arrow" aria-hidden="true">→</span>
      </button>
    </form>

<div class="r2b__form-success" id="form-success">
      <h3>Vielen Dank.</h3>
      <p>Wir melden uns innerhalb von 24 Stunden bei Ihnen.</p>
    </div>
  </div>
</section>

<footer class="r2b__footer" id="footer">
  <div class="r2b__wrap">
    <div class="r2b__footer-grid">
      <div>
        <div class="r2b__footer-firma">{{dossier.stamm.firma}}</div>
        <div class="r2b__footer-region">{{dossier.stamm.region}}</div>
      </div>
      <div>
        <div class="r2b__footer-links">
          <a href="{{slot.urls.impressum}}" target="_blank" rel="noopener">Impressum</a>
          <a href="{{slot.urls.datenschutz}}" target="_blank" rel="noopener">Datenschutz</a>
          <a href="#" id="r2b-cookie-reopen">Cookie-Einstellungen</a>
        </div>
      </div>
    </div>
    <div class="r2b__footer-hosting">
      Diese Aktionsseite wird betrieben von Room2Build im Auftrag von {{dossier.stamm.firma}}.
    </div>
  </div>
</footer>

<div class="r2b__cookie" id="r2b-cookie" role="dialog" aria-label="Cookie-Hinweis">
  <p>Wir nutzen Cookies für Reichweiten-Messung und Werbung. Nur mit Ihrer Zustimmung. <a href="{{slot.urls.datenschutz}}" target="_blank" rel="noopener">Mehr Infos</a></p>
  <div class="r2b__cookie-buttons">
    <button type="button" class="r2b__cookie-btn" data-consent="all">Alle akzeptieren</button>
    <button type="button" class="r2b__cookie-btn r2b__cookie-btn--ghost" data-consent="essential">Nur Notwendige</button>
  </div>
</div>

<script>
(function () {
  "use strict";
  var T = window.R2B_TRACKING || {};
  var CONSENT_KEY = "r2b_consent";
  var dl = "dataLayer";
  window[dl] = window[dl] || [];

function getConsent() {
    try {
      return document.cookie.split("; ").reduce(function (acc, kv) {
        var p = kv.split("=");
        if (p[0] === CONSENT_KEY) acc = p[1];
        return acc;
      }, "");
    } catch (e) { return ""; }
  }
  function setConsent(val) {
    var d = new Date(); d.setMonth(d.getMonth() + 12);
    document.cookie = CONSENT_KEY + "=" + val + "; expires=" + d.toUTCString() + "; path=/; SameSite=Lax";
  }
  function pushEvent(name, props) {
    var payload = Object.assign({ event: name, kampagnen_id: T.kampagnen_id, kunde_slug: T.kunde_slug }, props || {});
    window[dl].push(payload);
    if (window.fbq && getConsent() === "all") {
      try { window.fbq("trackCustom", name, payload); } catch (e) {}
    }
  }
  function getUtm() {
    var p = new URLSearchParams(window.location.search);
    var out = {};
    ["utm_source","utm_medium","utm_campaign","utm_content","utm_term"].forEach(function (k) {
      if (p.get(k)) out[k] = p.get(k);
    });
    return out;
  }
  function loadPixel(id) {
    if (!id || id === "null" || id === "undefined" || id.charAt(0) === "{") return;
    var s = document.createElement("script");
    s.async = true;
    s.src = "https://connect.facebook.net/en_US/fbevents.js";
    document.head.appendChild(s);
    window.fbq = window.fbq || function () { (window.fbq.q = window.fbq.q || []).push(arguments); };
    window.fbq.l = +new Date();
    window.fbq("init", id);
    window.fbq("track", "PageView");
  }
  function loadGtm(id) {
    if (!id || id === "null" || id === "undefined" || id.charAt(0) === "{") return;
    var s = document.createElement("script");
    s.async = true;
    s.src = "https://www.googletagmanager.com/gtm.js?id=" + id;
    document.head.appendChild(s);
    window[dl].push({ "gtm.start": +new Date(), event: "gtm.js" });
  }
  function activateTracking() {
    loadPixel(T.meta_pixel_id);
    loadGtm(T.gtm_id);
    pushEvent(T.events && T.events.page_view ? T.events.page_view : "PageView", {});
  }

// === Cookie-Banner ===
  var banner = document.getElementById("r2b-cookie");
  var reopen = document.getElementById("r2b-cookie-reopen");
  function showBanner() { if (banner) banner.classList.add("is-visible"); }
  function hideBanner() { if (banner) banner.classList.remove("is-visible"); }
  if (banner) {
    var consent = getConsent();
    if (!consent) showBanner();
    else if (consent === "all") activateTracking();
    banner.addEventListener("click", function (e) {
      var btn = e.target.closest("[data-consent]");
      if (!btn) return;
      var val = btn.getAttribute("data-consent");
      setConsent(val);
      hideBanner();
      if (val === "all") activateTracking();
    });
  }
  if (reopen) reopen.addEventListener("click", function (e) { e.preventDefault(); showBanner(); });

// === Reveal-Animation ===
  var revealEls = document.querySelectorAll(".r2b__reveal");
  if ("IntersectionObserver" in window && revealEls.length) {
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add("is-visible");
          io.unobserve(entry.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -60px 0px" });
    revealEls.forEach(function (el) { io.observe(el); });
  } else {
    revealEls.forEach(function (el) { el.classList.add("is-visible"); });
  }

// === Hero-Parallax ===
  var heroBg = document.querySelector("[data-parallax]");
  var hero = document.getElementById("hero");
  var ticking = false;
  function applyParallax() {
    if (!heroBg || !hero) return;
    var rect = hero.getBoundingClientRect();
    if (rect.bottom < 0 || rect.top > window.innerHeight) { ticking = false; return; }
    var offset = Math.max(-rect.top, 0) * 0.18;
    heroBg.style.transform = "translateY(" + offset + "px)";
    ticking = false;
  }
  function onScrollParallax() {
    if (!ticking) {
      window.requestAnimationFrame(applyParallax);
      ticking = true;
    }
  }
  if (heroBg && !window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
    window.addEventListener("scroll", onScrollParallax, { passive: true });
    applyParallax();
  }

// === Sticky-Nav ===
  var nav = document.getElementById("r2b-nav");
  function onScrollNav() {
    if (!nav) return;
    var heroBottom = hero ? hero.getBoundingClientRect().bottom : 600;
    if (window.scrollY > 80) nav.classList.add("is-stuck");
    else nav.classList.remove("is-stuck");
    if (heroBottom < 120) nav.classList.remove("is-onhero");
    else nav.classList.add("is-onhero");
  }
  window.addEventListener("scroll", onScrollNav, { passive: true });
  onScrollNav();

// === Count-up bei Stats ===
  var stats = document.querySelectorAll("[data-count-target]");
  function animateCount(el) {
    var raw = (el.getAttribute("data-count-target") || "").trim();
    var match = raw.match(/^(\d+)(.*)$/);
    if (!match) return;
    var target = parseInt(match[1], 10);
    var suffix = match[2] || "";
    var dur = 1200;
    var start = performance.now();
    function tick(now) {
      var t = Math.min((now - start) / dur, 1);
      var eased = 1 - Math.pow(1 - t, 3);
      el.textContent = Math.round(target * eased) + suffix;
      if (t < 1) requestAnimationFrame(tick);
    }
    requestAnimationFrame(tick);
  }
  if ("IntersectionObserver" in window && stats.length) {
    var sio = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          animateCount(entry.target);
          sio.unobserve(entry.target);
        }
      });
    }, { threshold: 0.5 });
    stats.forEach(function (el) { sio.observe(el); });
  }

// === Scroll-Tracking (ViewContent bei 50 %) ===
  var viewSent = false;
  function onScrollView() {
    if (viewSent) return;
    var h = document.documentElement;
    var scrolled = (h.scrollTop + window.innerHeight) / h.scrollHeight;
    if (scrolled >= 0.5) {
      viewSent = true;
      pushEvent(T.events && T.events.view_content ? T.events.view_content : "ViewContent", {});
      window.removeEventListener("scroll", onScrollView);
    }
  }
  window.addEventListener("scroll", onScrollView, { passive: true });

// === CTA-Tracking ===
  document.querySelectorAll("[data-track]").forEach(function (el) {
    el.addEventListener("click", function () { pushEvent(el.getAttribute("data-track"), {}); });
  });

// === Form-Submit ===
  var form = document.getElementById("r2b-form");
  var errorBox = document.getElementById("form-error");
  var successBox = document.getElementById("form-success");
  function showError(m) { if (!errorBox) return; errorBox.textContent = m; errorBox.classList.add("is-visible"); }
  function clearError() { if (!errorBox) return; errorBox.textContent = ""; errorBox.classList.remove("is-visible"); }

if (form) {
    var startSent = false;
    form.addEventListener("focusin", function () {
      if (startSent) return;
      startSent = true;
      pushEvent("form_start", {});
    });
    form.addEventListener("submit", function (e) {
      e.preventDefault();
      clearError();
      var fd = new FormData(form);
      var tel = (fd.get("telefon") || "").toString().trim();
      var mail = (fd.get("email") || "").toString().trim();
      if (!tel && !mail) {
        showError("Bitte geben Sie Telefon oder E-Mail an, damit wir uns melden können.");
        pushEvent("form_error", { reason: "no_contact" });
        return;
      }
      if (!fd.get("consent")) {
        showError("Bitte bestätigen Sie die Datenschutz-Einwilligung.");
        pushEvent("form_error", { reason: "no_consent" });
        return;
      }
      var payload = {
        kampagnen_id: T.kampagnen_id,
        kunde_slug: T.kunde_slug,
        name: fd.get("name"),
        telefon: tel,
        email: mail,
        plz: fd.get("plz"),
        beschreibung: fd.get("beschreibung"),
        wunschtermin: fd.get("termin"),
        utm: getUtm(),
        ts: new Date().toISOString(),
        url: window.location.href
      };
      var btn = form.querySelector("button[type=submit]");
      if (btn) { btn.disabled = true; }
      fetch(T.lead_endpoint, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload)
      }).then(function (r) {
        if (!r.ok) throw new Error("Server " + r.status);
        return r.json().catch(function () { return {}; });
      }).then(function () {
        form.style.display = "none";
        if (successBox) successBox.classList.add("is-visible");
        pushEvent(T.events && T.events.lead ? T.events.lead : "Lead", { plz: payload.plz });
        if (window.fbq && getConsent() === "all") {
          try { window.fbq("track", "Lead", { content_name: T.kampagnen_id }); } catch (e) {}
        }
      }).catch(function () {
        showError("Senden hat nicht geklappt. Bitte versuchen Sie es erneut oder rufen Sie uns direkt an.");
        if (btn) { btn.disabled = false; }
        pushEvent("form_error", { reason: "network" });
      });
    });
  }
})();
</script>

<script>
(function () {
  if (window.parent === window) return;
  document.body.setAttribute("data-edit-mode", "true");
  var style = document.createElement("style");
  style.textContent = 'body[data-edit-mode="true"] [data-sektion] { transition: outline-color .15s ease; }' +
    'body[data-edit-mode="true"] [data-sektion]:hover { outline: 2px dashed var(--c-primaer); outline-offset: -2px; cursor: pointer; }' +
    'body[data-edit-mode="true"] [data-sektion].is-edit-active { outline: 2px solid var(--c-primaer); outline-offset: -2px; }';
  document.head.appendChild(style);
  document.querySelectorAll("[data-sektion]").forEach(function (sec) {
    sec.addEventListener("click", function (e) {
      if (e.target.closest("a, button, input, textarea, select")) return;
      document.querySelectorAll("[data-sektion]").forEach(function (s) { s.classList.remove("is-edit-active"); });
      sec.classList.add("is-edit-active");
      try { window.parent.postMessage({ type: "r2b-sektion-click", sektion: sec.getAttribute("data-sektion") }, "*"); } catch (err) {}
    });
  });

// ============ Inline-Edit (Sprint 4 P35 — Kampagnen-Templates) ============
  document.querySelectorAll("[data-edit-path]").forEach(function (el) {
    el.setAttribute("contenteditable", "plaintext-only");
    el.setAttribute("spellcheck", "true");
    el.classList.add("r2b-inline-edit");
    var path = el.getAttribute("data-edit-path");
    el.addEventListener("click", function (e) { e.stopPropagation(); });
    el.addEventListener("focus", function () {
      try { window.parent.postMessage({ type: "r2b-text-focus", path: path }, "*"); } catch (err) {}
    });
    el.addEventListener("input", function () {
      try { window.parent.postMessage({ type: "r2b-text-input", path: path, value: el.textContent }, "*"); } catch (err) {}
    });
    el.addEventListener("blur", function () {
      try { window.parent.postMessage({ type: "r2b-text-blur", path: path, value: el.textContent }, "*"); } catch (err) {}
    });
    el.addEventListener("keydown", function (e) {
      if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); el.blur(); }
    });
  });
  // Inline-Edit CSS injizieren
  var ieStyle = document.createElement("style");
  ieStyle.textContent =
    'body[data-edit-mode="true"] .r2b-inline-edit { outline: 1px dashed transparent; outline-offset: 4px; transition: outline-color .15s ease, background-color .15s ease; border-radius: 2px; cursor: text; }' +
    'body[data-edit-mode="true"] .r2b-inline-edit:hover { outline-color: color-mix(in srgb, var(--c-primaer) 60%, transparent); background-color: color-mix(in srgb, var(--c-primaer) 6%, transparent); }' +
    'body[data-edit-mode="true"] .r2b-inline-edit:focus { outline: 2px solid var(--c-primaer); outline-offset: 4px; background-color: color-mix(in srgb, var(--c-primaer) 10%, transparent); }' +
    'body[data-edit-mode="true"] .r2b-inline-edit:empty::before { content: "Klicken zum Editieren"; color: color-mix(in srgb, var(--c-text) 30%, transparent); font-style: italic; }';
  document.head.appendChild(ieStyle);
})();
</script>

{{#if computed.galerie_aktiv}}
<div class="r2b__lightbox" id="r2b-lightbox" role="dialog" aria-modal="true" aria-label="Bild-Galerie">
  <button type="button" class="r2b__lightbox-btn r2b__lightbox-close" aria-label="Schliessen">×</button>
  <button type="button" class="r2b__lightbox-btn r2b__lightbox-prev" aria-label="Vorheriges Bild">‹</button>
  <img class="r2b__lightbox-img" id="r2b-lightbox-img" src="" alt="">
  <button type="button" class="r2b__lightbox-btn r2b__lightbox-next" aria-label="Naechstes Bild">›</button>
  <div class="r2b__lightbox-cap" id="r2b-lightbox-cap"></div>
</div>
<script>
(function () {
  var track = document.getElementById("r2b-gal-track");
  if (!track) return;
  var cards = Array.prototype.slice.call(track.querySelectorAll(".r2b__gal-card"));
  var stage = track.parentElement;
  var prevArrow = stage ? stage.querySelector(".r2b__gal-arrow--prev") : null;
  var nextArrow = stage ? stage.querySelector(".r2b__gal-arrow--next") : null;
  var filterBtns = document.querySelectorAll(".r2b__gal-filter button");
  var lightbox = document.getElementById("r2b-lightbox");
  var lbImg = document.getElementById("r2b-lightbox-img");
  var lbCap = document.getElementById("r2b-lightbox-cap");
  var visibleList = cards.slice();
  var currentIdx = 0;

function applyFilter(cat) {
    visibleList = [];
    cards.forEach(function (c) {
      var match = (cat === "*") || (c.getAttribute("data-gal-cat") === cat);
      if (match) { c.removeAttribute("hidden"); visibleList.push(c); }
      else { c.setAttribute("hidden", "hidden"); }
    });
    track.scrollTo({ left: 0, behavior: "smooth" });
  }

filterBtns.forEach(function (b) {
    b.addEventListener("click", function () {
      filterBtns.forEach(function (x) { x.setAttribute("aria-pressed", "false"); });
      b.setAttribute("aria-pressed", "true");
      applyFilter(b.getAttribute("data-gal-filter"));
    });
  });

function scrollByCard(direction) {
    var firstVisible = visibleList[0];
    if (!firstVisible) return;
    var cardWidth = firstVisible.getBoundingClientRect().width + 16;
    track.scrollBy({ left: direction * cardWidth, behavior: "smooth" });
  }
  if (prevArrow) prevArrow.addEventListener("click", function () { scrollByCard(-1); });
  if (nextArrow) nextArrow.addEventListener("click", function () { scrollByCard(1); });

function openLightbox(card) {
    if (!lightbox || !lbImg) return;
    var src = card.getAttribute("data-gal-src");
    var cap = card.getAttribute("data-gal-cap") || "";
    lbImg.setAttribute("src", src);
    lbImg.setAttribute("alt", cap);
    if (lbCap) lbCap.textContent = cap;
    currentIdx = visibleList.indexOf(card);
    lightbox.classList.add("is-open");
    document.body.style.overflow = "hidden";
  }
  function closeLightbox() {
    if (!lightbox) return;
    lightbox.classList.remove("is-open");
    document.body.style.overflow = "";
  }
  function navLightbox(direction) {
    if (!visibleList.length) return;
    currentIdx = (currentIdx + direction + visibleList.length) % visibleList.length;
    openLightbox(visibleList[currentIdx]);
  }

cards.forEach(function (c) {
    c.addEventListener("click", function () { openLightbox(c); });
  });
  if (lightbox) {
    lightbox.querySelector(".r2b__lightbox-close").addEventListener("click", closeLightbox);
    lightbox.querySelector(".r2b__lightbox-prev").addEventListener("click", function (e) { e.stopPropagation(); navLightbox(-1); });
    lightbox.querySelector(".r2b__lightbox-next").addEventListener("click", function (e) { e.stopPropagation(); navLightbox(1); });
    lightbox.addEventListener("click", function (e) { if (e.target === lightbox) closeLightbox(); });
    document.addEventListener("keydown", function (e) {
      if (!lightbox.classList.contains("is-open")) return;
      if (e.key === "Escape") closeLightbox();
      else if (e.key === "ArrowLeft") navLightbox(-1);
      else if (e.key === "ArrowRight") navLightbox(1);
    });
  }
})();
</script>
{{/if}}

</body>
</html>

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
<meta name="description" content="{{dossier.usp.spitze_satz}}">
<title>{{slot.inhalt.headline}} · Karriere bei {{dossier.stamm.firma_kurz}}</title>

<script>
window.R2B_TRACKING = {
  meta_pixel_id: "{{dossier.tracking.meta_pixel_id}}",
  gtm_id: "{{dossier.tracking.gtm_id}}",
  kampagnen_id: "{{slot.kampagnen_id}}",
  kunde_slug: "{{slot.kunde_slug}}",
  events: {
    page_view: "PageView",
    view_content: "{{slot.tracking.conversion_event_view}}",
    lead: "{{slot.tracking.conversion_event_lead}}"
  },
  consent_required: true,
  lead_endpoint: "https://leads.room2build.com/v1/submit"
};
</script>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="{{dossier.identitaet.fonts_url}}" rel="stylesheet">
{{#if computed.style_fonts_url}}
<link href="{{computed.style_fonts_url}}" rel="stylesheet">
{{/if}}
{{#if computed.style_fonts_css}}
<style id="r2b-style-fonts-override">{{{computed.style_fonts_css}}}</style>
{{/if}}

<style>
:root {
  --c-primaer: {{dossier.identitaet.farben.primaer}};
  --c-sekundaer: {{dossier.identitaet.farben.sekundaer}};
  --c-text: #1d1c1a;
  --c-bg: #ffffff;
  --c-cream: color-mix(in srgb, var(--c-primaer) 4%, #f6f2eb);
  --c-cream-dark: color-mix(in srgb, var(--c-primaer) 8%, #ede5d6);
  --c-tint: color-mix(in srgb, var(--c-primaer) 12%, transparent);
  --c-stone: #2b2925;
  --c-mute: #6f6a62;
  --c-line: rgba(29, 28, 26, 0.12);
  --font-headline: {{dossier.identitaet.schriften.headline}};
  --font-body: {{dossier.identitaet.schriften.fliesstext}};
  --maxw: 1240px;
  --pad-x: clamp(1.25rem, 4vw, 3rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

h1, h2, h3 { font-family: var(--font-headline); font-weight: 500; letter-spacing: -0.01em; }

.r2b__wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }

.r2b__eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-primaer);
  display: inline-block;
}

.r2b__rule { border-top: 1px solid var(--c-line); margin: 0; }

.r2b__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 1rem 1.6rem;
  background: var(--c-text);
  color: #fff;
  border: 1px solid var(--c-text);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.05s;
}
.r2b__cta:hover { background: var(--c-primaer); border-color: var(--c-primaer); }
.r2b__cta:active { transform: translateY(1px); }
.r2b__cta-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}
.r2b__cta:hover .r2b__cta-arrow { transform: translateX(4px); }

.r2b__cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--c-text);
  text-decoration: none;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--c-text);
  transition: gap 0.25s ease, color 0.2s;
}
.r2b__cta-ghost:hover { gap: 0.85rem; color: var(--c-primaer); border-color: var(--c-primaer); }

/* ============ Sticky Header ============ */
.r2b__nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 1rem var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.25s ease, box-shadow 0.25s, padding 0.25s;
}
.r2b__nav.is-stuck {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 var(--c-line);
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}
.r2b__nav-logo { display: flex; align-items: center; gap: 0.6rem; }
.r2b__nav-logo img { max-height: 36px; width: auto; }
.r2b__nav-logo-text {
  font-family: var(--font-headline);
  font-size: 1.05rem;
  color: var(--c-text);
}
.r2b__nav.is-onhero .r2b__nav-logo-text { color: #fff; }
.r2b__nav-cta {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.6rem 1.2rem;
  background: var(--c-text);
  color: #fff;
  border: none;
  border-radius: 999px;
  text-decoration: none;
}
.r2b__nav.is-onhero .r2b__nav-cta { background: #fff; color: var(--c-text); }

/* Mobile-Header: Logo-Text wegblenden, CTA kompakt — verhindert Überlappung */
@media (max-width: 600px) {
  .r2b__nav { padding: 0.7rem 1rem; }
  .r2b__nav-logo-text { display: none; }
  .r2b__nav-logo img { max-height: 30px; }
  .r2b__nav-cta { padding: 0.5rem 0.9rem; font-size: 0.78rem; max-width: 60vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ============ Hero (full-bleed) ============ */
.r2b__hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
  background: var(--c-stone);
}
.r2b__hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: transform;
  overflow: hidden;
}
.r2b__hero-bg img {
  width: 100%;
  height: 110%;
  object-fit: cover;
  transform: scale(1.06);
}
.r2b__hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.75) 100%);
}
.r2b__hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 8rem 0 4rem;
}
.r2b__hero-eyebrow {
  color: rgba(255,255,255,0.85);
  margin-bottom: 1.5rem;
}
.r2b__hero-title {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 1.02;
  font-weight: 500;
  max-width: 16ch;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.r2b__hero-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  max-width: 38ch;
  color: rgba(255,255,255,0.92);
  margin-bottom: 2.5rem;
  line-height: 1.45;
}
.r2b__hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  margin-bottom: 3rem;
}
.r2b__hero .r2b__cta {
  background: #fff;
  color: var(--c-text);
  border-color: #fff;
}
.r2b__hero .r2b__cta:hover { background: var(--c-primaer); color: #fff; border-color: var(--c-primaer); }
.r2b__hero .r2b__cta-ghost { color: #fff; border-bottom-color: rgba(255,255,255,0.5); }
.r2b__hero .r2b__cta-ghost:hover { color: #fff; border-bottom-color: #fff; }

.r2b__hero-stats {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.r2b__stat {
  font-family: var(--font-headline);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  letter-spacing: -0.01em;
  color: var(--c-primaer);
}
.r2b__hero .r2b__stat { color: #fff; }
.r2b__hero .r2b__stat > span:first-child { color: var(--c-primaer); filter: brightness(1.4); }
.r2b__stat-label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

/* ============ Allgemeine Sektion ============ */
.r2b__sec { padding: clamp(4rem, 9vw, 8rem) 0; position: relative; }
.r2b__sec--cream { background: var(--c-cream); }

.r2b__sec-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 4rem;
  align-items: end;
}
.r2b__sec-head .r2b__eyebrow { margin-bottom: 0.75rem; }
.r2b__sec-title {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.05;
  max-width: 22ch;
  letter-spacing: -0.02em;
}
.r2b__sec-lead {
  font-size: 1.1rem;
  color: var(--c-mute);
  max-width: 48ch;
  line-height: 1.55;
}

/* ============ Spiegel ============ */
.r2b__spiegel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}
.r2b__spiegel-head { padding-right: 0; }
.r2b__spiegel-head h2 {
  font-size: clamp(1.8rem, 3.8vw, 3rem);
  line-height: 1.1;
  max-width: 16ch;
}
.r2b__spiegel-body {
  padding-left: 0;
  border-left: none;
  font-size: 1.15rem;
  line-height: 1.65;
}
.r2b__spiegel-body p + p { margin-top: 1.25rem; }
.r2b__spiegel-body em {
  font-style: normal;
  font-family: var(--font-headline);
  font-size: 1.4rem;
  display: block;
  margin-bottom: 1rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* ============ USP (editorial) ============ */
.r2b__usp { display: flex; flex-direction: column; }
.r2b__usp-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--c-line);
  align-items: start;
}
.r2b__usp-item:last-child { border-bottom: 1px solid var(--c-line); }
.r2b__usp-item:hover { background: var(--c-tint); }
.r2b__usp-num {
  font-family: var(--font-headline);
  font-size: 1.6rem;
  color: var(--c-primaer);
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.r2b__usp-text h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  font-weight: 500;
  margin-bottom: 0.6rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 30ch;
}
.r2b__usp-text p {
  color: var(--c-mute);
  font-size: 1rem;
  max-width: 50ch;
}

/* ============ Referenzen (asymmetrisches Grid) ============ */
.r2b__refs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
.r2b__ref {
  display: grid;
  gap: 1.5rem;
}
.r2b__ref-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
.r2b__ref-pair figure { margin: 0; position: relative; overflow: hidden; }
.r2b__ref-pair img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.r2b__ref-pair figcaption {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  backdrop-filter: blur(2px);
}
.r2b__ref-meta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.r2b__ref-meta h3 {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.25;
  font-weight: 500;
  max-width: 28ch;
  letter-spacing: -0.01em;
}
.r2b__ref-zitat {
  font-family: var(--font-headline);
  font-size: 1.05rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--c-mute);
  border-left: 2px solid var(--c-primaer);
  padding-left: 1rem;
}
.r2b__ref-tags {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-mute);
  font-weight: 500;
  padding-top: 0.5rem;
  border-top: 1px solid var(--c-line);
}

/* ============ Prozess (horizontale Timeline) ============ */
.r2b__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  position: relative;
}
.r2b__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  padding: 2rem 0;
  border-top: 1px solid var(--c-line);
  align-items: start;
}
.r2b__step:last-child { border-bottom: 1px solid var(--c-line); }
.r2b__step-num {
  font-family: var(--font-headline);
  font-size: 1.1rem;
  color: var(--c-primaer);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  padding-top: 0.2rem;
}
.r2b__step h3 {
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}
.r2b__step p { color: var(--c-mute); max-width: 50ch; }

/* ============ Formular ============ */
.r2b__form-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
.r2b__form-intro h2 {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.05;
  max-width: 18ch;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}
.r2b__form-intro p {
  color: var(--c-mute);
  font-size: 1.1rem;
  max-width: 42ch;
  line-height: 1.55;
}
.r2b__form-intro-contact {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line);
  font-size: 0.95rem;
  color: var(--c-mute);
}
.r2b__form {
  display: flex;
  flex-direction: column;
}
.r2b__field {
  position: relative;
  margin-bottom: 1.5rem;
}
.r2b__field label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-mute);
  margin-bottom: 0.6rem;
}
.r2b__field label .req { color: var(--c-primaer); margin-left: 0.2rem; }
.r2b__field input,
.r2b__field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--c-text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--c-line);
  padding: 0.6rem 0;
  transition: border-color 0.2s;
}
.r2b__field input:focus,
.r2b__field textarea:focus {
  outline: none;
  border-color: var(--c-primaer);
}
.r2b__field textarea { min-height: 4rem; resize: vertical; }
.r2b__field--row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.r2b__radios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.r2b__radio {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-size: 0.92rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.r2b__radio input { display: none; }
.r2b__radio:hover { border-color: var(--c-text); }
.r2b__radio:has(input:checked) {
  background: var(--c-text);
  color: #fff;
  border-color: var(--c-text);
}
.r2b__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--c-mute);
  margin-bottom: 2rem;
  line-height: 1.5;
}
.r2b__consent input { width: 1.05rem; height: 1.05rem; margin-top: 0.25rem; flex-shrink: 0; }
.r2b__form-error {
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
  padding: 0.9rem 1.2rem;
  font-size: 0.92rem;
  border-radius: 4px;
  margin-bottom: 1.5rem;
  display: none;
}
.r2b__form-error.is-visible { display: block; }
.r2b__form-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 1.1rem 2rem;
  background: var(--c-text);
  color: #fff;
  border: 1px solid var(--c-text);
  border-radius: 999px;
  align-self: flex-start;
  transition: background 0.2s, border-color 0.2s;
}
.r2b__form-submit:hover { background: var(--c-primaer); border-color: var(--c-primaer); }
.r2b__form-submit:hover .r2b__cta-arrow { transform: translateX(4px); }
.r2b__form-submit:disabled { opacity: 0.5; cursor: wait; }
.r2b__form-success {
  padding: 3rem 0;
  text-align: left;
  display: none;
}
.r2b__form-success.is-visible { display: block; }
.r2b__form-success h3 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--c-primaer);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.r2b__form-success p { color: var(--c-mute); font-size: 1.05rem; }

/* ============ Footer ============ */
.r2b__footer {
  background: var(--c-cream-dark);
  color: var(--c-text);
  padding: 4rem 0 2rem;
  font-size: 0.92rem;
  border-top: 4px solid var(--c-primaer);
}
.r2b__footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}
.r2b__footer-firma {
  font-family: var(--font-headline);
  font-size: 1.4rem;
  margin-bottom: 0.4rem;
  letter-spacing: -0.01em;
}
.r2b__footer-region { color: var(--c-mute); }
.r2b__footer-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.r2b__footer-links a {
  text-decoration: none;
  color: var(--c-text);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.r2b__footer-links a:hover { border-bottom-color: var(--c-text); }
.r2b__footer-hosting {
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line);
  font-size: 0.8rem;
  color: var(--c-mute);
}

/* ============ Cookie-Banner ============ */
.r2b__cookie {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  max-width: 480px;
  margin: 0 auto;
  background: var(--c-text);
  color: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  z-index: 99;
  font-size: 0.92rem;
  line-height: 1.5;
  display: none;
}
.r2b__cookie.is-visible {
  display: block;
  animation: r2bCookieIn 0.3s ease;
}
@keyframes r2bCookieIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.r2b__cookie p { margin-bottom: 1rem; color: rgba(255,255,255,0.85); }
.r2b__cookie a { color: #fff; text-decoration: underline; }
.r2b__cookie-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.r2b__cookie-btn {
  padding: 0.55rem 1rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  border: 1px solid #fff;
  background: #fff;
  color: var(--c-text);
}
.r2b__cookie-btn--ghost { background: transparent; color: #fff; }

/* ============ Reveal-Animation ============ */
.r2b__reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.7, 0.25, 1), transform 0.7s cubic-bezier(0.22, 0.7, 0.25, 1);
}
.r2b__reveal.is-visible { opacity: 1; transform: translateY(0); }
.r2b__reveal--delay-1 { transition-delay: 0.12s; }
.r2b__reveal--delay-2 { transition-delay: 0.24s; }
.r2b__reveal--delay-3 { transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
  .r2b__reveal { opacity: 1; transform: none; transition: none; }
  .r2b__hero-bg img { transform: none; }
}

/* ============ Desktop ============ */
@media (min-width: 720px) {
  .r2b__sec-head { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .r2b__spiegel { grid-template-columns: 1fr 1.4fr; gap: 5rem; }
  .r2b__refs { grid-template-columns: 1fr; gap: 4rem; }
  .r2b__ref--big { grid-template-columns: 1.6fr 1fr; gap: 2.5rem; }
  .r2b__ref--big .r2b__ref-pair { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .r2b__ref--small { grid-template-columns: 1fr 1.4fr; gap: 2.5rem; }
  .r2b__ref--small .r2b__ref-meta { order: -1; }
  .r2b__form-wrap { grid-template-columns: 1fr 1.2fr; gap: 5rem; }
  .r2b__field--row { grid-template-columns: 1fr 1fr; }
  .r2b__footer-grid { grid-template-columns: 1.4fr 1fr; }
}

@media (min-width: 1020px) {
  .r2b__hero-stats { gap: 4rem; }
  .r2b__step { grid-template-columns: 5rem 1fr; gap: 3rem; }
  .r2b__usp-item { grid-template-columns: 5rem 1fr; gap: 3rem; }
}

/* ====================================================================
 * Style-Varianten · Architektur:
 * Hero-bg ist immer absolut positioniert. Splitscreen/Sidebyside
 * setzen einfach `inset: 0 0 0 X%` damit es nur die rechte Hälfte/Drittel
 * füllt. Text-Wrap (hero-inner) bekommt entsprechendes padding-right
 * damit Text nicht überlappt.
 * Mobile (<880px): immer stacked — Bild oben, Text darunter.
 * ==================================================================== */

/* ============ Style-Variante: SPLITSCREEN (50/50) ============ */
@media (min-width: 880px) {
  body.r2b-hero-splitscreen .r2b__hero {
    min-height: 86vh;
    align-items: center;
    background: var(--c-bg);
    color: var(--c-text);
  }
  body.r2b-hero-splitscreen .r2b__hero-bg { inset: 0 0 0 50%; }
  body.r2b-hero-splitscreen .r2b__hero-bg::after {
    background: linear-gradient(90deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 30%);
  }
  body.r2b-hero-splitscreen .r2b__hero-bg img { transform: none; }
  /* Viewport-bezogen: Container 50vw breit, links bündig zum Wrap-Rand,
     rechts strikt vor Bild-Linie, sodass Text nie überlappt */
  body.r2b-hero-splitscreen .r2b__hero-inner {
    max-width: none;
    width: 50vw;
    margin-left: 0;
    margin-right: auto;
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-left: max(var(--pad-x), calc((100vw - var(--maxw)) / 2 + var(--pad-x)));
    padding-right: 2.5rem;
  }
  body.r2b-hero-splitscreen .r2b__hero-title { max-width: 100%; font-size: clamp(2.2rem, 4.5vw, 4.4rem); }
  body.r2b-hero-splitscreen .r2b__hero-sub { max-width: 100%; }
  body.r2b-hero-splitscreen .r2b__hero-eyebrow { color: var(--c-primaer); }
  body.r2b-hero-splitscreen .r2b__hero-title { color: var(--c-text); max-width: 14ch; }
  body.r2b-hero-splitscreen .r2b__hero-sub { color: var(--c-mute); }
  body.r2b-hero-splitscreen .r2b__hero .r2b__cta { background: var(--c-text); color: #fff; border-color: var(--c-text); }
  body.r2b-hero-splitscreen .r2b__hero .r2b__cta:hover { background: var(--c-primaer); border-color: var(--c-primaer); }
  body.r2b-hero-splitscreen .r2b__hero .r2b__cta-ghost { color: var(--c-text); border-bottom-color: var(--c-text); }
  body.r2b-hero-splitscreen .r2b__hero-stats { border-top-color: var(--c-line); }
  body.r2b-hero-splitscreen .r2b__stat { color: var(--c-text); }
  body.r2b-hero-splitscreen .r2b__stat-label { color: var(--c-mute); }
  body.r2b-hero-splitscreen .r2b__nav.is-onhero .r2b__nav-logo-text { color: var(--c-text); }
  body.r2b-hero-splitscreen .r2b__nav.is-onhero .r2b__nav-cta { background: var(--c-text); color: #fff; }
}
@media (max-width: 879px) {
  body.r2b-hero-splitscreen .r2b__hero { min-height: auto; padding-top: 0; }
  body.r2b-hero-splitscreen .r2b__hero-bg { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 10; margin-top: 5rem; }
  body.r2b-hero-splitscreen .r2b__hero-bg img { transform: none; }
  body.r2b-hero-splitscreen .r2b__hero-inner { padding: 3rem 0 4rem; }
}

/* ============ Style-Variante: SIDEBYSIDE (Text 40 / Bild 60) ============ */
@media (min-width: 880px) {
  body.r2b-hero-sidebyside .r2b__hero {
    min-height: 86vh;
    align-items: center;
    background: var(--c-cream);
    color: var(--c-text);
  }
  body.r2b-hero-sidebyside .r2b__hero-bg { inset: 0 0 0 40%; }
  body.r2b-hero-sidebyside .r2b__hero-bg::after {
    background: linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 25%);
  }
  body.r2b-hero-sidebyside .r2b__hero-bg img { transform: none; }
  body.r2b-hero-sidebyside .r2b__hero-inner {
    max-width: none;
    width: 40vw;
    margin-left: 0;
    margin-right: auto;
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-left: max(var(--pad-x), calc((100vw - var(--maxw)) / 2 + var(--pad-x)));
    padding-right: 2rem;
  }
  body.r2b-hero-sidebyside .r2b__hero-title { max-width: 100%; font-size: clamp(2rem, 3.6vw, 3.4rem); }
  body.r2b-hero-sidebyside .r2b__hero-sub { max-width: 100%; }
  body.r2b-hero-sidebyside .r2b__hero-eyebrow { color: var(--c-primaer); }
  body.r2b-hero-sidebyside .r2b__hero-title { color: var(--c-text); font-size: clamp(2.2rem, 4.6vw, 3.8rem); max-width: 12ch; }
  body.r2b-hero-sidebyside .r2b__hero-sub { color: var(--c-mute); max-width: 26ch; }
  body.r2b-hero-sidebyside .r2b__hero .r2b__cta { background: var(--c-text); color: #fff; border-color: var(--c-text); }
  body.r2b-hero-sidebyside .r2b__hero .r2b__cta:hover { background: var(--c-primaer); border-color: var(--c-primaer); }
  body.r2b-hero-sidebyside .r2b__hero .r2b__cta-ghost { color: var(--c-text); border-bottom-color: var(--c-text); }
  body.r2b-hero-sidebyside .r2b__hero-stats { border-top-color: var(--c-line); }
  body.r2b-hero-sidebyside .r2b__stat { color: var(--c-text); }
  body.r2b-hero-sidebyside .r2b__stat-label { color: var(--c-mute); }
  body.r2b-hero-sidebyside .r2b__nav.is-onhero .r2b__nav-logo-text { color: var(--c-text); }
  body.r2b-hero-sidebyside .r2b__nav.is-onhero .r2b__nav-cta { background: var(--c-text); color: #fff; }
}
@media (max-width: 879px) {
  body.r2b-hero-sidebyside .r2b__hero { min-height: auto; padding-top: 0; background: var(--c-cream); }
  body.r2b-hero-sidebyside .r2b__hero-bg { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 10; margin-top: 5rem; }
  body.r2b-hero-sidebyside .r2b__hero-bg img { transform: none; }
  body.r2b-hero-sidebyside .r2b__hero-inner { padding: 3rem 0 4rem; }
}

/* ============ Style-Variante: CENTERED (Text mittig, Bild unten) ============ */
body.r2b-hero-centered .r2b__hero {
  min-height: auto;
  padding: 9rem 0 0;
  background: var(--c-bg);
  color: var(--c-text);
  align-items: center;
  text-align: center;
  flex-direction: column;
}
body.r2b-hero-centered .r2b__hero-bg {
  position: relative;
  inset: auto;
  height: auto;
  margin-top: 3rem;
  aspect-ratio: 21 / 9;
  max-width: 1100px;
  width: calc(100% - 2 * var(--pad-x));
}
body.r2b-hero-centered .r2b__hero-bg::after {
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.25) 100%);
}
body.r2b-hero-centered .r2b__hero-bg img { transform: none; height: 100%; }
body.r2b-hero-centered .r2b__hero-inner { padding: 0; max-width: 920px; margin: 0 auto; text-align: center; }
body.r2b-hero-centered .r2b__hero-inner > * { margin-left: auto; margin-right: auto; }
body.r2b-hero-centered .r2b__hero-eyebrow { color: var(--c-primaer); }
body.r2b-hero-centered .r2b__hero-title { color: var(--c-text); max-width: 18ch; font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: 1.04; }
body.r2b-hero-centered .r2b__hero-sub { color: var(--c-mute); max-width: 48ch; }
body.r2b-hero-centered .r2b__hero-ctas { justify-content: center; }
body.r2b-hero-centered .r2b__hero .r2b__cta { background: var(--c-text); color: #fff; border-color: var(--c-text); }
body.r2b-hero-centered .r2b__hero .r2b__cta:hover { background: var(--c-primaer); border-color: var(--c-primaer); }
body.r2b-hero-centered .r2b__hero .r2b__cta-ghost { color: var(--c-text); border-bottom-color: var(--c-text); }
body.r2b-hero-centered .r2b__hero-stats { display: none; }
body.r2b-hero-centered .r2b__nav.is-onhero .r2b__nav-logo-text { color: var(--c-text); }
body.r2b-hero-centered .r2b__nav.is-onhero .r2b__nav-cta { background: var(--c-text); color: #fff; }

/* ============ Typo-Set: industrial_slab ============ */
body.r2b-typo-industrial_slab { --font-headline: 'Roboto Slab', Georgia, serif; --font-body: 'Inter', -apple-system, sans-serif; }
body.r2b-typo-industrial_slab h1, body.r2b-typo-industrial_slab h2, body.r2b-typo-industrial_slab h3 { font-weight: 700; letter-spacing: -0.02em; }

/* ============ Typo-Set: modern_sans ============ */
body.r2b-typo-modern_sans { --font-headline: 'Inter', -apple-system, sans-serif; --font-body: 'Inter', -apple-system, sans-serif; }
body.r2b-typo-modern_sans h1, body.r2b-typo-modern_sans h2, body.r2b-typo-modern_sans h3 { font-weight: 700; letter-spacing: -0.03em; }
body.r2b-typo-modern_sans .r2b__hero-title { font-weight: 800; }

/* ============ Print ============ */
@media print {
  body { font-size: 11pt; }
  .r2b__nav, .r2b__cookie, .r2b__hero-ctas, .r2b__form, .r2b__cta { display: none !important; }
  .r2b__hero { min-height: 0; padding: 2rem 0; color: var(--c-text); background: none; }
  .r2b__hero-bg { display: none; }
  .r2b__sec { padding: 1.5rem 0; page-break-inside: avoid; }
  .r2b__footer { background: none; border-top: 1px solid var(--c-text); }
  .r2b__reveal { opacity: 1; transform: none; }
}

/* === SHARED SKIN CSS (Sprint 4 P22-24) === */
/* ====================================================================
 * R2B SKIN-SYSTEM · Universal-Portion (Sprint 4 P22-24)
 * Wird in Anfrage/Recruiting/Termin eingefügt — nutzt nur Klassen die
 * in ALLEN 4 Templates existieren.
 * Schwerpunkt: Skin-Background, BG-Toggle, Reveal-Varianten, Image-Hover.
 * ==================================================================== */

/* ---------- BG-Toggle (alle Sektionen) ---------- */
.r2b__sec[data-bg-override="cream"] { background: var(--c-cream); color: var(--c-text); }
.r2b__sec[data-bg-override="stone"] { background: var(--c-stone); color: #fff; }
.r2b__sec[data-bg-override="stone"] .r2b__sec-title,
.r2b__sec[data-bg-override="stone"] .r2b__eyebrow { color: #fff; }
.r2b__sec[data-bg-override="stone"] .r2b__sec-lead { color: rgba(255,255,255,0.7); }
.r2b__sec[data-bg-override="primaer-tint"] { background: color-mix(in srgb, var(--c-primaer) 8%, #fff); color: var(--c-text); }
.r2b__hero[data-bg-override="cream"] { background: var(--c-cream); }
.r2b__hero[data-bg-override="stone"] { background: var(--c-stone); color: #fff; }
.r2b__hero[data-bg-override="stone"] .r2b__hero-title,
.r2b__hero[data-bg-override="stone"] .r2b__hero-sub,
.r2b__hero[data-bg-override="stone"] .r2b__hero-eyebrow { color: #fff; }
.r2b__hero[data-bg-override="stone"] .r2b__hero-sub { color: rgba(255,255,255,0.85); }
.r2b__hero[data-bg-override="primaer-tint"] { background: color-mix(in srgb, var(--c-primaer) 8%, #fff); }

/* ---------- Skin-Schrift + Hero-Background (Universal) ---------- */
body.r2b-skin-industrial .r2b__sec { padding-top: 4.5rem; padding-bottom: 4.5rem; }
body.r2b-skin-industrial .r2b__sec-title { font-weight: 600; }
body.r2b-skin-industrial .r2b__sec--cream { background: color-mix(in srgb, var(--c-primaer) 6%, #fff); }

body.r2b-skin-atelier .r2b__sec { padding-top: 6rem; padding-bottom: 6rem; }
body.r2b-skin-atelier .r2b__sec-title { font-weight: 700; letter-spacing: -0.025em; }
body.r2b-skin-atelier .r2b__sec--cream { background: color-mix(in srgb, var(--c-primaer) 8%, #faf7f1); }

body.r2b-skin-fullbleed .r2b__hero { background: var(--c-stone); }
body.r2b-skin-fullbleed .r2b__hero .r2b__hero-title,
body.r2b-skin-fullbleed .r2b__hero .r2b__hero-sub,
body.r2b-skin-fullbleed .r2b__hero .r2b__hero-eyebrow { color: #fff; }
body.r2b-skin-fullbleed .r2b__sec-title { font-style: italic; font-weight: 500; }

body.r2b-skin-two_tone .r2b__hero { background: var(--c-primaer); }
body.r2b-skin-two_tone .r2b__hero .r2b__hero-title,
body.r2b-skin-two_tone .r2b__hero .r2b__hero-sub,
body.r2b-skin-two_tone .r2b__hero .r2b__hero-eyebrow { color: var(--c-on-primaer, #fff); }
body.r2b-skin-two_tone .r2b__sec-title { font-weight: 700; letter-spacing: -0.025em; }

/* ---------- Reveal-Varianten (Universal) ---------- */
html.r2b-anim body[data-reveal="slide-up"] .r2b__reveal:not(.is-visible) { opacity: 0; transform: translateY(40px); }
body[data-reveal="slide-up"] .r2b__reveal { transition: opacity .6s ease-out, transform .6s ease-out; }
html.r2b-anim body[data-reveal="scale"] .r2b__reveal:not(.is-visible) { opacity: 0; transform: scale(0.96) translateY(10px); }
body[data-reveal="scale"] .r2b__reveal { transition: opacity .9s cubic-bezier(0.22, 1, 0.36, 1), transform .9s cubic-bezier(0.22, 1, 0.36, 1); }
html.r2b-anim body[data-reveal="fade-strong"] .r2b__reveal:not(.is-visible) { opacity: 0; transform: translateY(30px); filter: blur(8px); }
body[data-reveal="fade-strong"] .r2b__reveal { transition: opacity 1.1s ease-out, transform 1.1s ease-out, filter 1.1s ease-out; }
html.r2b-anim body[data-reveal="slide-side"] .r2b__reveal:not(.is-visible) { opacity: 0; transform: translateX(-30px); }
body[data-reveal="slide-side"] .r2b__reveal { transition: opacity .7s ease-out, transform .7s ease-out; }

</style>
</head>
<body class="{{computed.body_class}}" data-reveal="{{computed.reveal_variant}}">

<header class="r2b__nav is-onhero" id="r2b-nav">
  <div class="r2b__nav-logo">
    {{#if dossier.identitaet.logo.primaer}}
    <img src="{{dossier.identitaet.logo.primaer}}" alt="{{dossier.stamm.firma}}" onerror="this.style.display='none';this.nextElementSibling.style.display='inline';">
    <span class="r2b__nav-logo-text" style="display:none;">{{dossier.stamm.firma_kurz}}</span>
    {{else}}
    <span class="r2b__nav-logo-text">{{dossier.stamm.firma_kurz}}</span>
    {{/if}}
  </div>
  <a href="#formular" class="r2b__nav-cta" data-track="cta_click_nav">{{slot.inhalt.cta_primaer}}</a>
</header>

<section class="r2b__hero" data-sektion="hero" id="hero" data-bg-override="{{computed.sektion_bg_hero}}">
  <div class="r2b__hero-bg" data-parallax>
    {{#if computed.hero_image_url}}
    <img src="{{computed.hero_image_url}}" alt="{{computed.hero_image_alt}}" loading="eager">
    {{/if}}
  </div>
  <div class="r2b__wrap r2b__hero-inner">
    <div class="r2b__eyebrow r2b__hero-eyebrow r2b__reveal" data-edit-path="computed.recruiting_eyebrow">{{computed.recruiting_eyebrow}}</div>
    <h1 class="r2b__hero-title r2b__reveal r2b__reveal--delay-1" data-edit-path="slot.inhalt.headline">{{slot.inhalt.headline}}</h1>
    <p class="r2b__hero-sub r2b__reveal r2b__reveal--delay-2" data-edit-path="computed.hero_subline">{{computed.hero_subline}}</p>
    <div class="r2b__hero-ctas r2b__reveal r2b__reveal--delay-3">
      <a href="#formular" class="r2b__cta" data-track="cta_click_hero">
        <span data-edit-path="slot.inhalt.cta_primaer">{{slot.inhalt.cta_primaer}}</span>
        <span class="r2b__cta-arrow" aria-hidden="true">→</span>
      </a>
      {{#if slot.inhalt.cta_sekundaer}}
      <a href="#referenzen" class="r2b__cta-ghost" data-track="cta_click_hero_sek">
        <span data-edit-path="slot.inhalt.cta_sekundaer">{{slot.inhalt.cta_sekundaer}}</span>
        <span class="r2b__cta-arrow" aria-hidden="true">↓</span>
      </a>
      {{/if}}
    </div>

{{#if computed.hero_stats}}
    <div class="r2b__hero-stats r2b__reveal r2b__reveal--delay-3">
      {{#each computed.hero_stats}}
      <div class="r2b__stat">
        <span data-count-target="{{this.value}}">{{this.value}}</span>
        <span class="r2b__stat-label">{{this.label}}</span>
      </div>
      {{/each}}
    </div>
    {{/if}}
  </div>
</section>

{{#if slot.inhalt.taetigkeiten}}
<section class="r2b__sec r2b__sec--cream" data-sektion="taetigkeiten" id="taetigkeiten" data-bg-override="{{computed.sektion_bg_taetigkeiten}}">
  <div class="r2b__wrap">
    <div class="r2b__sec-head">
      <div class="r2b__reveal">
        <span class="r2b__eyebrow" data-edit-path="computed.taetigkeiten_eyebrow">{{#if computed.taetigkeiten_eyebrow}}{{computed.taetigkeiten_eyebrow}}{{else}}Was Du machst{{/if}}</span>
        <h2 class="r2b__sec-title" data-edit-path="computed.taetigkeiten_headline">{{#if computed.taetigkeiten_headline}}{{computed.taetigkeiten_headline}}{{else}}Deine Aufgaben in der Werkstatt.{{/if}}</h2>
      </div>
      <p class="r2b__sec-lead r2b__reveal r2b__reveal--delay-1" data-edit-path="computed.taetigkeiten_lead">{{#if computed.taetigkeiten_lead}}{{computed.taetigkeiten_lead}}{{else}}Konkret, kein HR-Geschwurbel. So sieht eine typische Woche aus.{{/if}}</p>
    </div>
    <div class="r2b__usp">
      {{#each computed.taetigkeit_items}}
      <div class="r2b__usp-item r2b__reveal">
        <div class="r2b__usp-num">{{this.num}}</div>
        <div class="r2b__usp-text">
          <h3 data-edit-path="computed.taetigkeit_items.__index__.text">{{this.text}}</h3>
        </div>
      </div>
      {{/each}}
    </div>
  </div>
</section>
{{/if}}

{{#if dossier.usp.argumente}}
<section class="r2b__sec" data-sektion="warum" id="warum" data-bg-override="{{computed.sektion_bg_warum}}">
  <div class="r2b__wrap">
    <div class="r2b__sec-head">
      <div class="r2b__reveal">
        <span class="r2b__eyebrow" data-edit-path="computed.warum_eyebrow">{{#if computed.warum_eyebrow}}{{computed.warum_eyebrow}}{{else}}Warum {{dossier.stamm.firma_kurz}}{{/if}}</span>
        <h2 class="r2b__sec-title" data-edit-path="computed.usp_headline">{{computed.usp_headline}}</h2>
      </div>
      <p class="r2b__sec-lead r2b__reveal r2b__reveal--delay-1" data-edit-path="dossier.usp.spitze_satz">{{dossier.usp.spitze_satz}}</p>
    </div>
    <div class="r2b__usp">
      {{#each computed.usp_cards}}
      <div class="r2b__usp-item r2b__reveal">
        <div class="r2b__usp-num">{{this.num}}</div>
        <div class="r2b__usp-text">
          <h3 data-edit-path="computed.usp_cards.__index__.argument">{{this.argument}}</h3>
          {{#if this.beleg}}<p data-edit-path="computed.usp_cards.__index__.beleg">{{this.beleg}}</p>{{/if}}
        </div>
      </div>
      {{/each}}
    </div>
  </div>
</section>
{{/if}}

{{#if computed.referenzen}}
<section class="r2b__sec r2b__sec--cream" data-sektion="referenzen" id="referenzen" data-bg-override="{{computed.sektion_bg_referenzen}}">
  <div class="r2b__wrap">
    <div class="r2b__sec-head">
      <div class="r2b__reveal">
        <span class="r2b__eyebrow" data-edit-path="computed.referenzen_eyebrow">{{#if computed.referenzen_eyebrow}}{{computed.referenzen_eyebrow}}{{else}}Aus der Werkstatt{{/if}}</span>
        <h2 class="r2b__sec-title" data-edit-path="computed.referenzen_headline">{{#if computed.referenzen_headline}}{{computed.referenzen_headline}}{{else}}Arbeiten, an denen wir gemessen werden.{{/if}}</h2>
      </div>
      <p class="r2b__sec-lead r2b__reveal r2b__reveal--delay-1" data-edit-path="computed.referenzen_lead">{{#if computed.referenzen_lead}}{{computed.referenzen_lead}}{{else}}Eine Auswahl jüngerer Projekte. Bilder, Auftragswerte, Stimmen unserer Kunden.{{/if}}</p>
    </div>
    <div class="r2b__refs">
      {{#each computed.referenzen}}
      <article class="r2b__ref r2b__reveal {{this.layout_class}}">
        <div class="r2b__ref-pair {{#if this.has_vorher_nachher}}r2b__ref-pair--double{{else}}r2b__ref-pair--single{{/if}}">
          {{#if this.has_vorher_nachher}}
          <figure>
            <img src="{{this.bilder.vorher}}" alt="Vorher: {{this.titel}}" loading="lazy">
            <figcaption>Vorher</figcaption>
          </figure>
          <figure>
            <img src="{{this.bilder.nachher}}" alt="Nachher: {{this.titel}}" loading="lazy">
            <figcaption>Nachher</figcaption>
          </figure>
          {{else}}
          <figure>
            <img src="{{this.bilder.hauptbild}}" alt="{{this.titel}}" loading="lazy">
          </figure>
          {{/if}}
        </div>
        <div class="r2b__ref-meta">
          <h3>{{this.titel}}</h3>
          {{#if this.kunden_zitat}}<blockquote class="r2b__ref-zitat">„{{this.kunden_zitat}}"</blockquote>{{/if}}
          {{#if this.has_meta}}
          <div class="r2b__ref-tags">
            {{#if this.auftragswert_fmt}}<span>{{this.auftragswert_fmt}}</span>{{/if}}
            {{#if this.auftragsdauer_fmt}}<span>{{this.auftragsdauer_fmt}}</span>{{/if}}
          </div>
          {{/if}}
        </div>
      </article>
      {{/each}}
    </div>
  </div>
</section>
{{/if}}

<section class="r2b__sec" data-sektion="prozess" id="prozess" data-bg-override="{{computed.sektion_bg_prozess}}">
  <div class="r2b__wrap">
    <div class="r2b__sec-head">
      <div class="r2b__reveal">
        <span class="r2b__eyebrow" data-edit-path="computed.prozess.eyebrow">{{#if computed.prozess.eyebrow}}{{computed.prozess.eyebrow}}{{else}}Wie wir arbeiten{{/if}}</span>
        <h2 class="r2b__sec-title" data-edit-path="computed.prozess.headline">{{computed.prozess.headline}}</h2>
      </div>
      <p class="r2b__sec-lead r2b__reveal r2b__reveal--delay-1" data-edit-path="computed.prozess.lead">{{#if computed.prozess.lead}}{{computed.prozess.lead}}{{else}}Vier Schritte, kein Versteckspiel. Sie wissen jederzeit, wo Ihr Auftrag steht.{{/if}}</p>
    </div>
    <div class="r2b__steps">
      {{#each computed.prozess.schritte}}
      <div class="r2b__step r2b__reveal">
        <div class="r2b__step-num">{{this.num}}</div>
        <div>
          <h3 data-edit-path="computed.prozess.schritte.__index__.titel">{{this.titel}}</h3>
          <p data-edit-path="computed.prozess.schritte.__index__.text">{{this.text}}</p>
        </div>
      </div>
      {{/each}}
    </div>
  </div>
</section>

<section class="r2b__sec r2b__sec--cream" data-sektion="formular" id="formular" data-bg-override="{{computed.sektion_bg_formular}}">
  <div class="r2b__wrap r2b__form-wrap">
    <div class="r2b__form-intro r2b__reveal">
      <span class="r2b__eyebrow" data-edit-path="computed.formular_eyebrow">{{#if computed.formular_eyebrow}}{{computed.formular_eyebrow}}{{else}}Bewerbung{{/if}}</span>
      <h2 data-edit-path="computed.formular_headline">{{#if computed.formular_headline}}{{computed.formular_headline}}{{else}}{{slot.inhalt.cta_primaer}}{{/if}}</h2>
      <p data-edit-path="computed.form_subline">{{computed.form_subline}}</p>
      <div class="r2b__form-intro-contact">
        Lieber direkt anrufen? <br>
        {{dossier.stamm.firma_kurz}}, {{dossier.stamm.region}}
      </div>
    </div>

<form class="r2b__form r2b__reveal r2b__reveal--delay-1" id="r2b-form" novalidate>
      <div class="r2b__form-error" id="form-error" role="alert"></div>

<div class="r2b__field">
        <label for="f-name">Name <span class="req">*</span></label>
        <input type="text" id="f-name" name="name" required minlength="2" autocomplete="name">
      </div>

<div class="r2b__field--row">
        <div class="r2b__field">
          <label for="f-tel">Telefon</label>
          <input type="tel" id="f-tel" name="telefon" autocomplete="tel" inputmode="tel">
        </div>
        <div class="r2b__field">
          <label for="f-mail">E-Mail</label>
          <input type="email" id="f-mail" name="email" autocomplete="email">
        </div>
      </div>

<div class="r2b__field">
        <label for="f-erfahrung">Was machst Du gerade?</label>
        <input type="text" id="f-erfahrung" name="erfahrung" placeholder="z.B. Geselle Polsterei, 3 Jahre" autocomplete="organization-title">
      </div>

<div class="r2b__field">
        <label for="f-start">Wann könntest Du anfangen?</label>
        <input type="text" id="f-start" name="start" placeholder="z.B. ab 1. August, flexibel">
      </div>

<div class="r2b__field">
        <label for="f-text">Kurze Nachricht <span class="req">*</span></label>
        <textarea id="f-text" name="beschreibung" required minlength="10" placeholder="Erzähl uns kurz, warum Du Dich meldest. Reicht ein Absatz."></textarea>
      </div>

<label class="r2b__consent">
        <input type="checkbox" id="f-consent" name="consent" required>
        <span>Ich bin mit der Verarbeitung meiner Daten zur Bearbeitung meiner Bewerbung einverstanden. <a href="{{slot.urls.datenschutz}}" target="_blank" rel="noopener">Datenschutzerklärung</a></span>
      </label>

<button type="submit" class="r2b__form-submit" data-track="form_submit">
        <span>Bewerbung absenden</span>
        <span class="r2b__cta-arrow" aria-hidden="true">→</span>
      </button>
    </form>

<div class="r2b__form-success" id="form-success">
      <h3>Danke. Wir melden uns.</h3>
      <p>Spätestens in 48 Stunden hörst Du von uns.</p>
    </div></div>
</section>

<footer class="r2b__footer" id="footer">
  <div class="r2b__wrap">
    <div class="r2b__footer-grid">
      <div>
        <div class="r2b__footer-firma">{{dossier.stamm.firma}}</div>
        <div class="r2b__footer-region">{{dossier.stamm.region}}</div>
      </div>
      <div>
        <div class="r2b__footer-links">
          <a href="{{slot.urls.impressum}}" target="_blank" rel="noopener">Impressum</a>
          <a href="{{slot.urls.datenschutz}}" target="_blank" rel="noopener">Datenschutz</a>
          <a href="#" id="r2b-cookie-reopen">Cookie-Einstellungen</a>
        </div>
      </div>
    </div>
    <div class="r2b__footer-hosting">
      Diese Aktionsseite wird betrieben von Room2Build im Auftrag von {{dossier.stamm.firma}}.
    </div>
  </div>
</footer>

<div class="r2b__cookie" id="r2b-cookie" role="dialog" aria-label="Cookie-Hinweis">
  <p>Wir nutzen Cookies für Reichweiten-Messung und Werbung. Nur mit Deiner Zustimmung. <a href="{{slot.urls.datenschutz}}" target="_blank" rel="noopener">Mehr Infos</a></p>
  <div class="r2b__cookie-buttons">
    <button type="button" class="r2b__cookie-btn" data-consent="all">Alle akzeptieren</button>
    <button type="button" class="r2b__cookie-btn r2b__cookie-btn--ghost" data-consent="essential">Nur Notwendige</button>
  </div>
</div>

<script>
(function () {
  "use strict";
  var T = window.R2B_TRACKING || {};
  var CONSENT_KEY = "r2b_consent";
  var dl = "dataLayer";
  window[dl] = window[dl] || [];

function getConsent() {
    try {
      return document.cookie.split("; ").reduce(function (acc, kv) {
        var p = kv.split("=");
        if (p[0] === CONSENT_KEY) acc = p[1];
        return acc;
      }, "");
    } catch (e) { return ""; }
  }
  function setConsent(val) {
    var d = new Date(); d.setMonth(d.getMonth() + 12);
    document.cookie = CONSENT_KEY + "=" + val + "; expires=" + d.toUTCString() + "; path=/; SameSite=Lax";
  }
  function pushEvent(name, props) {
    var payload = Object.assign({ event: name, kampagnen_id: T.kampagnen_id, kunde_slug: T.kunde_slug }, props || {});
    window[dl].push(payload);
    if (window.fbq && getConsent() === "all") {
      try { window.fbq("trackCustom", name, payload); } catch (e) {}
    }
  }
  function getUtm() {
    var p = new URLSearchParams(window.location.search);
    var out = {};
    ["utm_source","utm_medium","utm_campaign","utm_content","utm_term"].forEach(function (k) {
      if (p.get(k)) out[k] = p.get(k);
    });
    return out;
  }
  function loadPixel(id) {
    if (!id || id === "null" || id === "undefined" || id.charAt(0) === "{") return;
    var s = document.createElement("script");
    s.async = true;
    s.src = "https://connect.facebook.net/en_US/fbevents.js";
    document.head.appendChild(s);
    window.fbq = window.fbq || function () { (window.fbq.q = window.fbq.q || []).push(arguments); };
    window.fbq.l = +new Date();
    window.fbq("init", id);
    window.fbq("track", "PageView");
  }
  function loadGtm(id) {
    if (!id || id === "null" || id === "undefined" || id.charAt(0) === "{") return;
    var s = document.createElement("script");
    s.async = true;
    s.src = "https://www.googletagmanager.com/gtm.js?id=" + id;
    document.head.appendChild(s);
    window[dl].push({ "gtm.start": +new Date(), event: "gtm.js" });
  }
  function activateTracking() {
    loadPixel(T.meta_pixel_id);
    loadGtm(T.gtm_id);
    pushEvent(T.events && T.events.page_view ? T.events.page_view : "PageView", {});
  }

// === Cookie-Banner ===
  var banner = document.getElementById("r2b-cookie");
  var reopen = document.getElementById("r2b-cookie-reopen");
  function showBanner() { if (banner) banner.classList.add("is-visible"); }
  function hideBanner() { if (banner) banner.classList.remove("is-visible"); }
  if (banner) {
    var consent = getConsent();
    if (!consent) showBanner();
    else if (consent === "all") activateTracking();
    banner.addEventListener("click", function (e) {
      var btn = e.target.closest("[data-consent]");
      if (!btn) return;
      var val = btn.getAttribute("data-consent");
      setConsent(val);
      hideBanner();
      if (val === "all") activateTracking();
    });
  }
  if (reopen) reopen.addEventListener("click", function (e) { e.preventDefault(); showBanner(); });

// === Reveal-Animation ===
  var revealEls = document.querySelectorAll(".r2b__reveal");
  if ("IntersectionObserver" in window && revealEls.length) {
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add("is-visible");
          io.unobserve(entry.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -60px 0px" });
    revealEls.forEach(function (el) { io.observe(el); });
  } else {
    revealEls.forEach(function (el) { el.classList.add("is-visible"); });
  }

// === Hero-Parallax ===
  var heroBg = document.querySelector("[data-parallax]");
  var hero = document.getElementById("hero");
  var ticking = false;
  function applyParallax() {
    if (!heroBg || !hero) return;
    var rect = hero.getBoundingClientRect();
    if (rect.bottom < 0 || rect.top > window.innerHeight) { ticking = false; return; }
    var offset = Math.max(-rect.top, 0) * 0.18;
    heroBg.style.transform = "translateY(" + offset + "px)";
    ticking = false;
  }
  function onScrollParallax() {
    if (!ticking) {
      window.requestAnimationFrame(applyParallax);
      ticking = true;
    }
  }
  if (heroBg && !window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
    window.addEventListener("scroll", onScrollParallax, { passive: true });
    applyParallax();
  }

// === Sticky-Nav ===
  var nav = document.getElementById("r2b-nav");
  function onScrollNav() {
    if (!nav) return;
    var heroBottom = hero ? hero.getBoundingClientRect().bottom : 600;
    if (window.scrollY > 80) nav.classList.add("is-stuck");
    else nav.classList.remove("is-stuck");
    if (heroBottom < 120) nav.classList.remove("is-onhero");
    else nav.classList.add("is-onhero");
  }
  window.addEventListener("scroll", onScrollNav, { passive: true });
  onScrollNav();

// === Count-up bei Stats ===
  var stats = document.querySelectorAll("[data-count-target]");
  function animateCount(el) {
    var raw = (el.getAttribute("data-count-target") || "").trim();
    var match = raw.match(/^(\d+)(.*)$/);
    if (!match) return;
    var target = parseInt(match[1], 10);
    var suffix = match[2] || "";
    var dur = 1200;
    var start = performance.now();
    function tick(now) {
      var t = Math.min((now - start) / dur, 1);
      var eased = 1 - Math.pow(1 - t, 3);
      el.textContent = Math.round(target * eased) + suffix;
      if (t < 1) requestAnimationFrame(tick);
    }
    requestAnimationFrame(tick);
  }
  if ("IntersectionObserver" in window && stats.length) {
    var sio = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          animateCount(entry.target);
          sio.unobserve(entry.target);
        }
      });
    }, { threshold: 0.5 });
    stats.forEach(function (el) { sio.observe(el); });
  }

// === Scroll-Tracking (ViewContent bei 50 %) ===
  var viewSent = false;
  function onScrollView() {
    if (viewSent) return;
    var h = document.documentElement;
    var scrolled = (h.scrollTop + window.innerHeight) / h.scrollHeight;
    if (scrolled >= 0.5) {
      viewSent = true;
      pushEvent(T.events && T.events.view_content ? T.events.view_content : "ViewContent", {});
      window.removeEventListener("scroll", onScrollView);
    }
  }
  window.addEventListener("scroll", onScrollView, { passive: true });

// === CTA-Tracking ===
  document.querySelectorAll("[data-track]").forEach(function (el) {
    el.addEventListener("click", function () { pushEvent(el.getAttribute("data-track"), {}); });
  });

// === Form-Submit ===
  var form = document.getElementById("r2b-form");
  var errorBox = document.getElementById("form-error");
  var successBox = document.getElementById("form-success");
  function showError(m) { if (!errorBox) return; errorBox.textContent = m; errorBox.classList.add("is-visible"); }
  function clearError() { if (!errorBox) return; errorBox.textContent = ""; errorBox.classList.remove("is-visible"); }

if (form) {
    var startSent = false;
    form.addEventListener("focusin", function () {
      if (startSent) return;
      startSent = true;
      pushEvent("form_start", {});
    });
    form.addEventListener("submit", function (e) {
      e.preventDefault();
      clearError();
      var fd = new FormData(form);
      var tel = (fd.get("telefon") || "").toString().trim();
      var mail = (fd.get("email") || "").toString().trim();
      if (!tel && !mail) {
        showError("Bitte geben Sie Telefon oder E-Mail an, damit wir uns melden können.");
        pushEvent("form_error", { reason: "no_contact" });
        return;
      }
      if (!fd.get("consent")) {
        showError("Bitte bestätigen Sie die Datenschutz-Einwilligung.");
        pushEvent("form_error", { reason: "no_consent" });
        return;
      }
      var payload = {
        kampagnen_id: T.kampagnen_id,
        kunde_slug: T.kunde_slug,
        name: fd.get("name"),
        telefon: tel,
        email: mail,
        plz: fd.get("plz"),
        beschreibung: fd.get("beschreibung"),
        wunschtermin: fd.get("termin"),
        utm: getUtm(),
        ts: new Date().toISOString(),
        url: window.location.href
      };
      var btn = form.querySelector("button[type=submit]");
      if (btn) { btn.disabled = true; }
      fetch(T.lead_endpoint, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload)
      }).then(function (r) {
        if (!r.ok) throw new Error("Server " + r.status);
        return r.json().catch(function () { return {}; });
      }).then(function () {
        form.style.display = "none";
        if (successBox) successBox.classList.add("is-visible");
        pushEvent(T.events && T.events.lead ? T.events.lead : "Lead", { plz: payload.plz });
        if (window.fbq && getConsent() === "all") {
          try { window.fbq("track", "Lead", { content_name: T.kampagnen_id }); } catch (e) {}
        }
      }).catch(function () {
        showError("Senden hat nicht geklappt. Bitte versuchen Sie es erneut oder rufen Sie uns direkt an.");
        if (btn) { btn.disabled = false; }
        pushEvent("form_error", { reason: "network" });
      });
    });
  }
})();
</script>

<script>
(function () {
  if (window.parent === window) return;
  document.body.setAttribute("data-edit-mode", "true");
  var style = document.createElement("style");
  style.textContent =
    'body[data-edit-mode="true"] [data-sektion] { transition: outline-color .15s ease; }' +
    'body[data-edit-mode="true"] [data-sektion]:hover { outline: 2px dashed var(--c-primaer); outline-offset: -2px; cursor: pointer; }' +
    'body[data-edit-mode="true"] [data-sektion].is-edit-active { outline: 2px solid var(--c-primaer); outline-offset: -2px; }' +
    'body[data-edit-mode="true"] .r2b-inline-edit { outline: 1px dashed transparent; outline-offset: 4px; transition: outline-color .15s ease, background-color .15s ease; border-radius: 2px; cursor: text; }' +
    'body[data-edit-mode="true"] .r2b-inline-edit:hover { outline-color: color-mix(in srgb, var(--c-primaer) 60%, transparent); background-color: color-mix(in srgb, var(--c-primaer) 6%, transparent); }' +
    'body[data-edit-mode="true"] .r2b-inline-edit:focus { outline: 2px solid var(--c-primaer); outline-offset: 4px; background-color: color-mix(in srgb, var(--c-primaer) 10%, transparent); }' +
    'body[data-edit-mode="true"] .r2b-inline-edit:empty::before { content: "Klicken zum Editieren"; color: color-mix(in srgb, var(--c-text) 30%, transparent); font-style: italic; }';
  document.head.appendChild(style);
  // Sektion-Klick (für Sidebar-Wechsel)
  document.querySelectorAll("[data-sektion]").forEach(function (sec) {
    sec.addEventListener("click", function (e) {
      if (e.target.closest("a, button, input, textarea, select, [data-edit-path]")) return;
      document.querySelectorAll("[data-sektion]").forEach(function (s) { s.classList.remove("is-edit-active"); });
      sec.classList.add("is-edit-active");
      try { window.parent.postMessage({ type: "r2b-sektion-click", sektion: sec.getAttribute("data-sektion") }, "*"); } catch (err) {}
    });
  });
  // Inline-Edit
  document.querySelectorAll("[data-edit-path]").forEach(function (el) {
    el.setAttribute("contenteditable", "plaintext-only");
    el.setAttribute("spellcheck", "true");
    el.classList.add("r2b-inline-edit");
    var path = el.getAttribute("data-edit-path");
    el.addEventListener("click", function (e) { e.stopPropagation(); });
    el.addEventListener("focus", function () {
      try { window.parent.postMessage({ type: "r2b-text-focus", path: path }, "*"); } catch (err) {}
    });
    el.addEventListener("input", function () {
      try { window.parent.postMessage({ type: "r2b-text-input", path: path, value: el.textContent }, "*"); } catch (err) {}
    });
    el.addEventListener("blur", function () {
      try { window.parent.postMessage({ type: "r2b-text-blur", path: path, value: el.textContent }, "*"); } catch (err) {}
    });
    el.addEventListener("keydown", function (e) {
      if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); el.blur(); }
    });
  });
})();
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
<meta name="description" content="{{dossier.usp.spitze_satz}}">
<title>{{slot.inhalt.headline}} · Termin buchen — {{dossier.stamm.firma}}</title>

<script>
window.R2B_TRACKING = {
  meta_pixel_id: "{{dossier.tracking.meta_pixel_id}}",
  gtm_id: "{{dossier.tracking.gtm_id}}",
  kampagnen_id: "{{slot.kampagnen_id}}",
  kunde_slug: "{{slot.kunde_slug}}",
  events: {
    page_view: "PageView",
    view_content: "{{slot.tracking.conversion_event_view}}",
    lead: "{{slot.tracking.conversion_event_lead}}"
  },
  consent_required: true,
  lead_endpoint: "https://leads.room2build.com/v1/submit"
};
</script>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="{{dossier.identitaet.fonts_url}}" rel="stylesheet">
{{#if computed.style_fonts_url}}
<link href="{{computed.style_fonts_url}}" rel="stylesheet">
{{/if}}
{{#if computed.style_fonts_css}}
<style id="r2b-style-fonts-override">{{{computed.style_fonts_css}}}</style>
{{/if}}

<style>
:root {
  --c-primaer: {{dossier.identitaet.farben.primaer}};
  --c-sekundaer: {{dossier.identitaet.farben.sekundaer}};
  --c-text: #1d1c1a;
  --c-bg: #ffffff;
  --c-cream: color-mix(in srgb, var(--c-primaer) 4%, #f6f2eb);
  --c-cream-dark: color-mix(in srgb, var(--c-primaer) 8%, #ede5d6);
  --c-tint: color-mix(in srgb, var(--c-primaer) 12%, transparent);
  --c-stone: #2b2925;
  --c-mute: #6f6a62;
  --c-line: rgba(29, 28, 26, 0.12);
  --font-headline: {{dossier.identitaet.schriften.headline}};
  --font-body: {{dossier.identitaet.schriften.fliesstext}};
  --maxw: 1240px;
  --pad-x: clamp(1.25rem, 4vw, 3rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

h1, h2, h3 { font-family: var(--font-headline); font-weight: 500; letter-spacing: -0.01em; }

.r2b__wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }

.r2b__eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-primaer);
  display: inline-block;
}

.r2b__rule { border-top: 1px solid var(--c-line); margin: 0; }

.r2b__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 1rem 1.6rem;
  background: var(--c-text);
  color: #fff;
  border: 1px solid var(--c-text);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.05s;
}
.r2b__cta:hover { background: var(--c-primaer); border-color: var(--c-primaer); }
.r2b__cta:active { transform: translateY(1px); }
.r2b__cta-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}
.r2b__cta:hover .r2b__cta-arrow { transform: translateX(4px); }

.r2b__cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--c-text);
  text-decoration: none;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--c-text);
  transition: gap 0.25s ease, color 0.2s;
}
.r2b__cta-ghost:hover { gap: 0.85rem; color: var(--c-primaer); border-color: var(--c-primaer); }

/* ============ Sticky Header ============ */
.r2b__nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 1rem var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.25s ease, box-shadow 0.25s, padding 0.25s;
}
.r2b__nav.is-stuck {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 var(--c-line);
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}
.r2b__nav-logo { display: flex; align-items: center; gap: 0.6rem; }
.r2b__nav-logo img { max-height: 36px; width: auto; }
.r2b__nav-logo-text {
  font-family: var(--font-headline);
  font-size: 1.05rem;
  color: var(--c-text);
}
.r2b__nav.is-onhero .r2b__nav-logo-text { color: #fff; }
.r2b__nav-cta {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.6rem 1.2rem;
  background: var(--c-text);
  color: #fff;
  border: none;
  border-radius: 999px;
  text-decoration: none;
}
.r2b__nav.is-onhero .r2b__nav-cta { background: #fff; color: var(--c-text); }

/* Mobile-Header: Logo-Text wegblenden, CTA kompakt — verhindert Überlappung */
@media (max-width: 600px) {
  .r2b__nav { padding: 0.7rem 1rem; }
  .r2b__nav-logo-text { display: none; }
  .r2b__nav-logo img { max-height: 30px; }
  .r2b__nav-cta { padding: 0.5rem 0.9rem; font-size: 0.78rem; max-width: 60vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ============ Hero (full-bleed) ============ */
.r2b__hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
  background: var(--c-stone);
}
.r2b__hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: transform;
  overflow: hidden;
}
.r2b__hero-bg img {
  width: 100%;
  height: 110%;
  object-fit: cover;
  transform: scale(1.06);
}
.r2b__hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.75) 100%);
}
.r2b__hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 8rem 0 4rem;
}
.r2b__hero-eyebrow {
  color: rgba(255,255,255,0.85);
  margin-bottom: 1.5rem;
}
.r2b__hero-title {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 1.02;
  font-weight: 500;
  max-width: 16ch;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.r2b__hero-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  max-width: 38ch;
  color: rgba(255,255,255,0.92);
  margin-bottom: 2.5rem;
  line-height: 1.45;
}
.r2b__hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  margin-bottom: 3rem;
}
.r2b__hero .r2b__cta {
  background: #fff;
  color: var(--c-text);
  border-color: #fff;
}
.r2b__hero .r2b__cta:hover { background: var(--c-primaer); color: #fff; border-color: var(--c-primaer); }
.r2b__hero .r2b__cta-ghost { color: #fff; border-bottom-color: rgba(255,255,255,0.5); }
.r2b__hero .r2b__cta-ghost:hover { color: #fff; border-bottom-color: #fff; }

.r2b__hero-stats {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.r2b__stat {
  font-family: var(--font-headline);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  letter-spacing: -0.01em;
  color: var(--c-primaer);
}
.r2b__hero .r2b__stat { color: #fff; }
.r2b__hero .r2b__stat > span:first-child { color: var(--c-primaer); filter: brightness(1.4); }
.r2b__stat-label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

/* ============ Allgemeine Sektion ============ */
.r2b__sec { padding: clamp(4rem, 9vw, 8rem) 0; position: relative; }
.r2b__sec--cream { background: var(--c-cream); }

.r2b__sec-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 4rem;
  align-items: end;
}
.r2b__sec-head .r2b__eyebrow { margin-bottom: 0.75rem; }
.r2b__sec-title {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.05;
  max-width: 22ch;
  letter-spacing: -0.02em;
}
.r2b__sec-lead {
  font-size: 1.1rem;
  color: var(--c-mute);
  max-width: 48ch;
  line-height: 1.55;
}

/* ============ Spiegel ============ */
.r2b__spiegel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}
.r2b__spiegel-head { padding-right: 0; }
.r2b__spiegel-head h2 {
  font-size: clamp(1.8rem, 3.8vw, 3rem);
  line-height: 1.1;
  max-width: 16ch;
}
.r2b__spiegel-body {
  padding-left: 0;
  border-left: none;
  font-size: 1.15rem;
  line-height: 1.65;
}
.r2b__spiegel-body p + p { margin-top: 1.25rem; }
.r2b__spiegel-body em {
  font-style: normal;
  font-family: var(--font-headline);
  font-size: 1.4rem;
  display: block;
  margin-bottom: 1rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* ============ USP (editorial) ============ */
.r2b__usp { display: flex; flex-direction: column; }
.r2b__usp-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--c-line);
  align-items: start;
}
.r2b__usp-item:last-child { border-bottom: 1px solid var(--c-line); }
.r2b__usp-item:hover { background: var(--c-tint); }
.r2b__usp-num {
  font-family: var(--font-headline);
  font-size: 1.6rem;
  color: var(--c-primaer);
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.r2b__usp-text h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  font-weight: 500;
  margin-bottom: 0.6rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 30ch;
}
.r2b__usp-text p {
  color: var(--c-mute);
  font-size: 1rem;
  max-width: 50ch;
}

/* ============ Referenzen (asymmetrisches Grid) ============ */
.r2b__refs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
.r2b__ref {
  display: grid;
  gap: 1.5rem;
}
.r2b__ref-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
.r2b__ref-pair figure { margin: 0; position: relative; overflow: hidden; }
.r2b__ref-pair img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.r2b__ref-pair figcaption {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  backdrop-filter: blur(2px);
}
.r2b__ref-meta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.r2b__ref-meta h3 {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.25;
  font-weight: 500;
  max-width: 28ch;
  letter-spacing: -0.01em;
}
.r2b__ref-zitat {
  font-family: var(--font-headline);
  font-size: 1.05rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--c-mute);
  border-left: 2px solid var(--c-primaer);
  padding-left: 1rem;
}
.r2b__ref-tags {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-mute);
  font-weight: 500;
  padding-top: 0.5rem;
  border-top: 1px solid var(--c-line);
}

/* ============ Prozess (horizontale Timeline) ============ */
.r2b__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  position: relative;
}
.r2b__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  padding: 2rem 0;
  border-top: 1px solid var(--c-line);
  align-items: start;
}
.r2b__step:last-child { border-bottom: 1px solid var(--c-line); }
.r2b__step-num {
  font-family: var(--font-headline);
  font-size: 1.1rem;
  color: var(--c-primaer);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  padding-top: 0.2rem;
}
.r2b__step h3 {
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}
.r2b__step p { color: var(--c-mute); max-width: 50ch; }

/* ============ Formular ============ */
.r2b__form-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
.r2b__form-intro h2 {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.05;
  max-width: 18ch;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}
.r2b__form-intro p {
  color: var(--c-mute);
  font-size: 1.1rem;
  max-width: 42ch;
  line-height: 1.55;
}
.r2b__form-intro-contact {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line);
  font-size: 0.95rem;
  color: var(--c-mute);
}
.r2b__form {
  display: flex;
  flex-direction: column;
}
.r2b__field {
  position: relative;
  margin-bottom: 1.5rem;
}
.r2b__field label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-mute);
  margin-bottom: 0.6rem;
}
.r2b__field label .req { color: var(--c-primaer); margin-left: 0.2rem; }
.r2b__field input,
.r2b__field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--c-text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--c-line);
  padding: 0.6rem 0;
  transition: border-color 0.2s;
}
.r2b__field input:focus,
.r2b__field textarea:focus {
  outline: none;
  border-color: var(--c-primaer);
}
.r2b__field textarea { min-height: 4rem; resize: vertical; }
.r2b__field--row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.r2b__radios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.r2b__radio {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-size: 0.92rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.r2b__radio input { display: none; }
.r2b__radio:hover { border-color: var(--c-text); }
.r2b__radio:has(input:checked) {
  background: var(--c-text);
  color: #fff;
  border-color: var(--c-text);
}
.r2b__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--c-mute);
  margin-bottom: 2rem;
  line-height: 1.5;
}
.r2b__consent input { width: 1.05rem; height: 1.05rem; margin-top: 0.25rem; flex-shrink: 0; }
.r2b__form-error {
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
  padding: 0.9rem 1.2rem;
  font-size: 0.92rem;
  border-radius: 4px;
  margin-bottom: 1.5rem;
  display: none;
}
.r2b__form-error.is-visible { display: block; }
.r2b__form-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 1.1rem 2rem;
  background: var(--c-text);
  color: #fff;
  border: 1px solid var(--c-text);
  border-radius: 999px;
  align-self: flex-start;
  transition: background 0.2s, border-color 0.2s;
}
.r2b__form-submit:hover { background: var(--c-primaer); border-color: var(--c-primaer); }
.r2b__form-submit:hover .r2b__cta-arrow { transform: translateX(4px); }
.r2b__form-submit:disabled { opacity: 0.5; cursor: wait; }
.r2b__form-success {
  padding: 3rem 0;
  text-align: left;
  display: none;
}
.r2b__form-success.is-visible { display: block; }
.r2b__form-success h3 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--c-primaer);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.r2b__form-success p { color: var(--c-mute); font-size: 1.05rem; }

/* ============ Footer ============ */
.r2b__footer {
  background: var(--c-cream-dark);
  color: var(--c-text);
  padding: 4rem 0 2rem;
  font-size: 0.92rem;
  border-top: 4px solid var(--c-primaer);
}
.r2b__footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}
.r2b__footer-firma {
  font-family: var(--font-headline);
  font-size: 1.4rem;
  margin-bottom: 0.4rem;
  letter-spacing: -0.01em;
}
.r2b__footer-region { color: var(--c-mute); }
.r2b__footer-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.r2b__footer-links a {
  text-decoration: none;
  color: var(--c-text);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.r2b__footer-links a:hover { border-bottom-color: var(--c-text); }
.r2b__footer-hosting {
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line);
  font-size: 0.8rem;
  color: var(--c-mute);
}

/* ============ Cookie-Banner ============ */
.r2b__cookie {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  max-width: 480px;
  margin: 0 auto;
  background: var(--c-text);
  color: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  z-index: 99;
  font-size: 0.92rem;
  line-height: 1.5;
  display: none;
}
.r2b__cookie.is-visible {
  display: block;
  animation: r2bCookieIn 0.3s ease;
}
@keyframes r2bCookieIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.r2b__cookie p { margin-bottom: 1rem; color: rgba(255,255,255,0.85); }
.r2b__cookie a { color: #fff; text-decoration: underline; }
.r2b__cookie-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.r2b__cookie-btn {
  padding: 0.55rem 1rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  border: 1px solid #fff;
  background: #fff;
  color: var(--c-text);
}
.r2b__cookie-btn--ghost { background: transparent; color: #fff; }

/* ============ Reveal-Animation ============ */
.r2b__reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.7, 0.25, 1), transform 0.7s cubic-bezier(0.22, 0.7, 0.25, 1);
}
.r2b__reveal.is-visible { opacity: 1; transform: translateY(0); }
.r2b__reveal--delay-1 { transition-delay: 0.12s; }
.r2b__reveal--delay-2 { transition-delay: 0.24s; }
.r2b__reveal--delay-3 { transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
  .r2b__reveal { opacity: 1; transform: none; transition: none; }
  .r2b__hero-bg img { transform: none; }
}

/* ============ Desktop ============ */
@media (min-width: 720px) {
  .r2b__sec-head { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .r2b__spiegel { grid-template-columns: 1fr 1.4fr; gap: 5rem; }
  .r2b__refs { grid-template-columns: 1fr; gap: 4rem; }
  .r2b__ref--big { grid-template-columns: 1.6fr 1fr; gap: 2.5rem; }
  .r2b__ref--big .r2b__ref-pair { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .r2b__ref--small { grid-template-columns: 1fr 1.4fr; gap: 2.5rem; }
  .r2b__ref--small .r2b__ref-meta { order: -1; }
  .r2b__form-wrap { grid-template-columns: 1fr 1.2fr; gap: 5rem; }
  .r2b__field--row { grid-template-columns: 1fr 1fr; }
  .r2b__footer-grid { grid-template-columns: 1.4fr 1fr; }
}

@media (min-width: 1020px) {
  .r2b__hero-stats { gap: 4rem; }
  .r2b__step { grid-template-columns: 5rem 1fr; gap: 3rem; }
  .r2b__usp-item { grid-template-columns: 5rem 1fr; gap: 3rem; }
}

/* ====================================================================
 * Style-Varianten · Architektur:
 * Hero-bg ist immer absolut positioniert. Splitscreen/Sidebyside
 * setzen einfach `inset: 0 0 0 X%` damit es nur die rechte Hälfte/Drittel
 * füllt. Text-Wrap (hero-inner) bekommt entsprechendes padding-right
 * damit Text nicht überlappt.
 * Mobile (<880px): immer stacked — Bild oben, Text darunter.
 * ==================================================================== */

/* ============ Style-Variante: SPLITSCREEN (50/50) ============ */
@media (min-width: 880px) {
  body.r2b-hero-splitscreen .r2b__hero {
    min-height: 86vh;
    align-items: center;
    background: var(--c-bg);
    color: var(--c-text);
  }
  body.r2b-hero-splitscreen .r2b__hero-bg { inset: 0 0 0 50%; }
  body.r2b-hero-splitscreen .r2b__hero-bg::after {
    background: linear-gradient(90deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 30%);
  }
  body.r2b-hero-splitscreen .r2b__hero-bg img { transform: none; }
  /* Viewport-bezogen: Container 50vw breit, links bündig zum Wrap-Rand,
     rechts strikt vor Bild-Linie, sodass Text nie überlappt */
  body.r2b-hero-splitscreen .r2b__hero-inner {
    max-width: none;
    width: 50vw;
    margin-left: 0;
    margin-right: auto;
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-left: max(var(--pad-x), calc((100vw - var(--maxw)) / 2 + var(--pad-x)));
    padding-right: 2.5rem;
  }
  body.r2b-hero-splitscreen .r2b__hero-title { max-width: 100%; font-size: clamp(2.2rem, 4.5vw, 4.4rem); }
  body.r2b-hero-splitscreen .r2b__hero-sub { max-width: 100%; }
  body.r2b-hero-splitscreen .r2b__hero-eyebrow { color: var(--c-primaer); }
  body.r2b-hero-splitscreen .r2b__hero-title { color: var(--c-text); max-width: 14ch; }
  body.r2b-hero-splitscreen .r2b__hero-sub { color: var(--c-mute); }
  body.r2b-hero-splitscreen .r2b__hero .r2b__cta { background: var(--c-text); color: #fff; border-color: var(--c-text); }
  body.r2b-hero-splitscreen .r2b__hero .r2b__cta:hover { background: var(--c-primaer); border-color: var(--c-primaer); }
  body.r2b-hero-splitscreen .r2b__hero .r2b__cta-ghost { color: var(--c-text); border-bottom-color: var(--c-text); }
  body.r2b-hero-splitscreen .r2b__hero-stats { border-top-color: var(--c-line); }
  body.r2b-hero-splitscreen .r2b__stat { color: var(--c-text); }
  body.r2b-hero-splitscreen .r2b__stat-label { color: var(--c-mute); }
  body.r2b-hero-splitscreen .r2b__nav.is-onhero .r2b__nav-logo-text { color: var(--c-text); }
  body.r2b-hero-splitscreen .r2b__nav.is-onhero .r2b__nav-cta { background: var(--c-text); color: #fff; }
}
@media (max-width: 879px) {
  body.r2b-hero-splitscreen .r2b__hero { min-height: auto; padding-top: 0; }
  body.r2b-hero-splitscreen .r2b__hero-bg { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 10; margin-top: 5rem; }
  body.r2b-hero-splitscreen .r2b__hero-bg img { transform: none; }
  body.r2b-hero-splitscreen .r2b__hero-inner { padding: 3rem 0 4rem; }
}

/* ============ Style-Variante: SIDEBYSIDE (Text 40 / Bild 60) ============ */
@media (min-width: 880px) {
  body.r2b-hero-sidebyside .r2b__hero {
    min-height: 86vh;
    align-items: center;
    background: var(--c-cream);
    color: var(--c-text);
  }
  body.r2b-hero-sidebyside .r2b__hero-bg { inset: 0 0 0 40%; }
  body.r2b-hero-sidebyside .r2b__hero-bg::after {
    background: linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 25%);
  }
  body.r2b-hero-sidebyside .r2b__hero-bg img { transform: none; }
  body.r2b-hero-sidebyside .r2b__hero-inner {
    max-width: none;
    width: 40vw;
    margin-left: 0;
    margin-right: auto;
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-left: max(var(--pad-x), calc((100vw - var(--maxw)) / 2 + var(--pad-x)));
    padding-right: 2rem;
  }
  body.r2b-hero-sidebyside .r2b__hero-title { max-width: 100%; font-size: clamp(2rem, 3.6vw, 3.4rem); }
  body.r2b-hero-sidebyside .r2b__hero-sub { max-width: 100%; }
  body.r2b-hero-sidebyside .r2b__hero-eyebrow { color: var(--c-primaer); }
  body.r2b-hero-sidebyside .r2b__hero-title { color: var(--c-text); font-size: clamp(2.2rem, 4.6vw, 3.8rem); max-width: 12ch; }
  body.r2b-hero-sidebyside .r2b__hero-sub { color: var(--c-mute); max-width: 26ch; }
  body.r2b-hero-sidebyside .r2b__hero .r2b__cta { background: var(--c-text); color: #fff; border-color: var(--c-text); }
  body.r2b-hero-sidebyside .r2b__hero .r2b__cta:hover { background: var(--c-primaer); border-color: var(--c-primaer); }
  body.r2b-hero-sidebyside .r2b__hero .r2b__cta-ghost { color: var(--c-text); border-bottom-color: var(--c-text); }
  body.r2b-hero-sidebyside .r2b__hero-stats { border-top-color: var(--c-line); }
  body.r2b-hero-sidebyside .r2b__stat { color: var(--c-text); }
  body.r2b-hero-sidebyside .r2b__stat-label { color: var(--c-mute); }
  body.r2b-hero-sidebyside .r2b__nav.is-onhero .r2b__nav-logo-text { color: var(--c-text); }
  body.r2b-hero-sidebyside .r2b__nav.is-onhero .r2b__nav-cta { background: var(--c-text); color: #fff; }
}
@media (max-width: 879px) {
  body.r2b-hero-sidebyside .r2b__hero { min-height: auto; padding-top: 0; background: var(--c-cream); }
  body.r2b-hero-sidebyside .r2b__hero-bg { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 10; margin-top: 5rem; }
  body.r2b-hero-sidebyside .r2b__hero-bg img { transform: none; }
  body.r2b-hero-sidebyside .r2b__hero-inner { padding: 3rem 0 4rem; }
}

/* ============ Style-Variante: CENTERED (Text mittig, Bild unten) ============ */
body.r2b-hero-centered .r2b__hero {
  min-height: auto;
  padding: 9rem 0 0;
  background: var(--c-bg);
  color: var(--c-text);
  align-items: center;
  text-align: center;
  flex-direction: column;
}
body.r2b-hero-centered .r2b__hero-bg {
  position: relative;
  inset: auto;
  height: auto;
  margin-top: 3rem;
  aspect-ratio: 21 / 9;
  max-width: 1100px;
  width: calc(100% - 2 * var(--pad-x));
}
body.r2b-hero-centered .r2b__hero-bg::after {
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.25) 100%);
}
body.r2b-hero-centered .r2b__hero-bg img { transform: none; height: 100%; }
body.r2b-hero-centered .r2b__hero-inner { padding: 0; max-width: 920px; margin: 0 auto; text-align: center; }
body.r2b-hero-centered .r2b__hero-inner > * { margin-left: auto; margin-right: auto; }
body.r2b-hero-centered .r2b__hero-eyebrow { color: var(--c-primaer); }
body.r2b-hero-centered .r2b__hero-title { color: var(--c-text); max-width: 18ch; font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: 1.04; }
body.r2b-hero-centered .r2b__hero-sub { color: var(--c-mute); max-width: 48ch; }
body.r2b-hero-centered .r2b__hero-ctas { justify-content: center; }
body.r2b-hero-centered .r2b__hero .r2b__cta { background: var(--c-text); color: #fff; border-color: var(--c-text); }
body.r2b-hero-centered .r2b__hero .r2b__cta:hover { background: var(--c-primaer); border-color: var(--c-primaer); }
body.r2b-hero-centered .r2b__hero .r2b__cta-ghost { color: var(--c-text); border-bottom-color: var(--c-text); }
body.r2b-hero-centered .r2b__hero-stats { display: none; }
body.r2b-hero-centered .r2b__nav.is-onhero .r2b__nav-logo-text { color: var(--c-text); }
body.r2b-hero-centered .r2b__nav.is-onhero .r2b__nav-cta { background: var(--c-text); color: #fff; }

/* ============ Typo-Set: industrial_slab ============ */
body.r2b-typo-industrial_slab { --font-headline: 'Roboto Slab', Georgia, serif; --font-body: 'Inter', -apple-system, sans-serif; }
body.r2b-typo-industrial_slab h1, body.r2b-typo-industrial_slab h2, body.r2b-typo-industrial_slab h3 { font-weight: 700; letter-spacing: -0.02em; }

/* ============ Typo-Set: modern_sans ============ */
body.r2b-typo-modern_sans { --font-headline: 'Inter', -apple-system, sans-serif; --font-body: 'Inter', -apple-system, sans-serif; }
body.r2b-typo-modern_sans h1, body.r2b-typo-modern_sans h2, body.r2b-typo-modern_sans h3 { font-weight: 700; letter-spacing: -0.03em; }
body.r2b-typo-modern_sans .r2b__hero-title { font-weight: 800; }

/* ============ Print ============ */
@media print {
  body { font-size: 11pt; }
  .r2b__nav, .r2b__cookie, .r2b__hero-ctas, .r2b__form, .r2b__cta { display: none !important; }
  .r2b__hero { min-height: 0; padding: 2rem 0; color: var(--c-text); background: none; }
  .r2b__hero-bg { display: none; }
  .r2b__sec { padding: 1.5rem 0; page-break-inside: avoid; }
  .r2b__footer { background: none; border-top: 1px solid var(--c-text); }
  .r2b__reveal { opacity: 1; transform: none; }
}

/* === SHARED SKIN CSS (Sprint 4 P22-24) === */
/* ====================================================================
 * R2B SKIN-SYSTEM · Universal-Portion (Sprint 4 P22-24)
 * Wird in Anfrage/Recruiting/Termin eingefügt — nutzt nur Klassen die
 * in ALLEN 4 Templates existieren.
 * Schwerpunkt: Skin-Background, BG-Toggle, Reveal-Varianten, Image-Hover.
 * ==================================================================== */

/* ---------- BG-Toggle (alle Sektionen) ---------- */
.r2b__sec[data-bg-override="cream"] { background: var(--c-cream); color: var(--c-text); }
.r2b__sec[data-bg-override="stone"] { background: var(--c-stone); color: #fff; }
.r2b__sec[data-bg-override="stone"] .r2b__sec-title,
.r2b__sec[data-bg-override="stone"] .r2b__eyebrow { color: #fff; }
.r2b__sec[data-bg-override="stone"] .r2b__sec-lead { color: rgba(255,255,255,0.7); }
.r2b__sec[data-bg-override="primaer-tint"] { background: color-mix(in srgb, var(--c-primaer) 8%, #fff); color: var(--c-text); }
.r2b__hero[data-bg-override="cream"] { background: var(--c-cream); }
.r2b__hero[data-bg-override="stone"] { background: var(--c-stone); color: #fff; }
.r2b__hero[data-bg-override="stone"] .r2b__hero-title,
.r2b__hero[data-bg-override="stone"] .r2b__hero-sub,
.r2b__hero[data-bg-override="stone"] .r2b__hero-eyebrow { color: #fff; }
.r2b__hero[data-bg-override="stone"] .r2b__hero-sub { color: rgba(255,255,255,0.85); }
.r2b__hero[data-bg-override="primaer-tint"] { background: color-mix(in srgb, var(--c-primaer) 8%, #fff); }

/* ---------- Skin-Schrift + Hero-Background (Universal) ---------- */
body.r2b-skin-industrial .r2b__sec { padding-top: 4.5rem; padding-bottom: 4.5rem; }
body.r2b-skin-industrial .r2b__sec-title { font-weight: 600; }
body.r2b-skin-industrial .r2b__sec--cream { background: color-mix(in srgb, var(--c-primaer) 6%, #fff); }

body.r2b-skin-atelier .r2b__sec { padding-top: 6rem; padding-bottom: 6rem; }
body.r2b-skin-atelier .r2b__sec-title { font-weight: 700; letter-spacing: -0.025em; }
body.r2b-skin-atelier .r2b__sec--cream { background: color-mix(in srgb, var(--c-primaer) 8%, #faf7f1); }

body.r2b-skin-fullbleed .r2b__hero { background: var(--c-stone); }
body.r2b-skin-fullbleed .r2b__hero .r2b__hero-title,
body.r2b-skin-fullbleed .r2b__hero .r2b__hero-sub,
body.r2b-skin-fullbleed .r2b__hero .r2b__hero-eyebrow { color: #fff; }
body.r2b-skin-fullbleed .r2b__sec-title { font-style: italic; font-weight: 500; }

body.r2b-skin-two_tone .r2b__hero { background: var(--c-primaer); }
body.r2b-skin-two_tone .r2b__hero .r2b__hero-title,
body.r2b-skin-two_tone .r2b__hero .r2b__hero-sub,
body.r2b-skin-two_tone .r2b__hero .r2b__hero-eyebrow { color: var(--c-on-primaer, #fff); }
body.r2b-skin-two_tone .r2b__sec-title { font-weight: 700; letter-spacing: -0.025em; }

/* ---------- Reveal-Varianten (Universal) ---------- */
html.r2b-anim body[data-reveal="slide-up"] .r2b__reveal:not(.is-visible) { opacity: 0; transform: translateY(40px); }
body[data-reveal="slide-up"] .r2b__reveal { transition: opacity .6s ease-out, transform .6s ease-out; }
html.r2b-anim body[data-reveal="scale"] .r2b__reveal:not(.is-visible) { opacity: 0; transform: scale(0.96) translateY(10px); }
body[data-reveal="scale"] .r2b__reveal { transition: opacity .9s cubic-bezier(0.22, 1, 0.36, 1), transform .9s cubic-bezier(0.22, 1, 0.36, 1); }
html.r2b-anim body[data-reveal="fade-strong"] .r2b__reveal:not(.is-visible) { opacity: 0; transform: translateY(30px); filter: blur(8px); }
body[data-reveal="fade-strong"] .r2b__reveal { transition: opacity 1.1s ease-out, transform 1.1s ease-out, filter 1.1s ease-out; }
html.r2b-anim body[data-reveal="slide-side"] .r2b__reveal:not(.is-visible) { opacity: 0; transform: translateX(-30px); }
body[data-reveal="slide-side"] .r2b__reveal { transition: opacity .7s ease-out, transform .7s ease-out; }

</style>
</head>
<body class="{{computed.body_class}}" data-reveal="{{computed.reveal_variant}}">

<header class="r2b__nav is-onhero" id="r2b-nav">
  <div class="r2b__nav-logo">
    {{#if dossier.identitaet.logo.primaer}}
    <img src="{{dossier.identitaet.logo.primaer}}" alt="{{dossier.stamm.firma}}" onerror="this.style.display='none';this.nextElementSibling.style.display='inline';">
    <span class="r2b__nav-logo-text" style="display:none;">{{dossier.stamm.firma_kurz}}</span>
    {{else}}
    <span class="r2b__nav-logo-text">{{dossier.stamm.firma_kurz}}</span>
    {{/if}}
  </div>
  <a href="#formular" class="r2b__nav-cta" data-track="cta_click_nav">{{slot.inhalt.cta_primaer}}</a>
</header>

<section class="r2b__hero" data-sektion="hero" id="hero" data-bg-override="{{computed.sektion_bg_hero}}">
  <div class="r2b__hero-bg" data-parallax>
    {{#if computed.hero_image_url}}
    <img src="{{computed.hero_image_url}}" alt="{{computed.hero_image_alt}}" loading="eager">
    {{/if}}
  </div>
  <div class="r2b__wrap r2b__hero-inner">
    <div class="r2b__eyebrow r2b__hero-eyebrow r2b__reveal" data-edit-path="computed.termin_eyebrow">{{computed.termin_eyebrow}}</div>
    <h1 class="r2b__hero-title r2b__reveal r2b__reveal--delay-1" data-edit-path="slot.inhalt.headline">{{slot.inhalt.headline}}</h1>
    <p class="r2b__hero-sub r2b__reveal r2b__reveal--delay-2" data-edit-path="computed.hero_subline">{{computed.hero_subline}}</p>
    <div class="r2b__hero-ctas r2b__reveal r2b__reveal--delay-3">
      <a href="#formular" class="r2b__cta" data-track="cta_click_hero">
        <span data-edit-path="slot.inhalt.cta_primaer">{{slot.inhalt.cta_primaer}}</span>
        <span class="r2b__cta-arrow" aria-hidden="true">→</span>
      </a>
      {{#if slot.inhalt.cta_sekundaer}}
      <a href="#referenzen" class="r2b__cta-ghost" data-track="cta_click_hero_sek">
        <span data-edit-path="slot.inhalt.cta_sekundaer">{{slot.inhalt.cta_sekundaer}}</span>
        <span class="r2b__cta-arrow" aria-hidden="true">↓</span>
      </a>
      {{/if}}
    </div>

{{#if computed.hero_stats}}
    <div class="r2b__hero-stats r2b__reveal r2b__reveal--delay-3">
      {{#each computed.hero_stats}}
      <div class="r2b__stat">
        <span data-count-target="{{this.value}}">{{this.value}}</span>
        <span class="r2b__stat-label">{{this.label}}</span>
      </div>
      {{/each}}
    </div>
    {{/if}}
  </div>
</section>

{{#if dossier.usp.argumente}}
<section class="r2b__sec" data-sektion="warum" id="warum" data-bg-override="{{computed.sektion_bg_warum}}">
  <div class="r2b__wrap">
    <div class="r2b__sec-head">
      <div class="r2b__reveal">
        <span class="r2b__eyebrow" data-edit-path="computed.warum_eyebrow">{{#if computed.warum_eyebrow}}{{computed.warum_eyebrow}}{{else}}Warum {{dossier.stamm.firma_kurz}}{{/if}}</span>
        <h2 class="r2b__sec-title" data-edit-path="computed.usp_headline">{{computed.usp_headline}}</h2>
      </div>
      <p class="r2b__sec-lead r2b__reveal r2b__reveal--delay-1" data-edit-path="dossier.usp.spitze_satz">{{dossier.usp.spitze_satz}}</p>
    </div>
    <div class="r2b__usp">
      {{#each computed.usp_cards}}
      <div class="r2b__usp-item r2b__reveal">
        <div class="r2b__usp-num">{{this.num}}</div>
        <div class="r2b__usp-text">
          <h3 data-edit-path="computed.usp_cards.__index__.argument">{{this.argument}}</h3>
          {{#if this.beleg}}<p data-edit-path="computed.usp_cards.__index__.beleg">{{this.beleg}}</p>{{/if}}
        </div>
      </div>
      {{/each}}
    </div>
  </div>
</section>
{{/if}}

{{#if computed.referenzen}}
<section class="r2b__sec r2b__sec--cream" data-sektion="referenzen" id="referenzen" data-bg-override="{{computed.sektion_bg_referenzen}}">
  <div class="r2b__wrap">
    <div class="r2b__sec-head">
      <div class="r2b__reveal">
        <span class="r2b__eyebrow" data-edit-path="computed.referenzen_eyebrow">{{#if computed.referenzen_eyebrow}}{{computed.referenzen_eyebrow}}{{else}}Aus der Werkstatt{{/if}}</span>
        <h2 class="r2b__sec-title" data-edit-path="computed.referenzen_headline">{{#if computed.referenzen_headline}}{{computed.referenzen_headline}}{{else}}Arbeiten, an denen wir gemessen werden.{{/if}}</h2>
      </div>
      <p class="r2b__sec-lead r2b__reveal r2b__reveal--delay-1" data-edit-path="computed.referenzen_lead">{{#if computed.referenzen_lead}}{{computed.referenzen_lead}}{{else}}Eine Auswahl jüngerer Projekte. Bilder, Auftragswerte, Stimmen unserer Kunden.{{/if}}</p>
    </div>
    <div class="r2b__refs">
      {{#each computed.referenzen}}
      <article class="r2b__ref r2b__reveal {{this.layout_class}}">
        <div class="r2b__ref-pair {{#if this.has_vorher_nachher}}r2b__ref-pair--double{{else}}r2b__ref-pair--single{{/if}}">
          {{#if this.has_vorher_nachher}}
          <figure>
            <img src="{{this.bilder.vorher}}" alt="Vorher: {{this.titel}}" loading="lazy">
            <figcaption>Vorher</figcaption>
          </figure>
          <figure>
            <img src="{{this.bilder.nachher}}" alt="Nachher: {{this.titel}}" loading="lazy">
            <figcaption>Nachher</figcaption>
          </figure>
          {{else}}
          <figure>
            <img src="{{this.bilder.hauptbild}}" alt="{{this.titel}}" loading="lazy">
          </figure>
          {{/if}}
        </div>
        <div class="r2b__ref-meta">
          <h3>{{this.titel}}</h3>
          {{#if this.kunden_zitat}}<blockquote class="r2b__ref-zitat">„{{this.kunden_zitat}}"</blockquote>{{/if}}
          {{#if this.has_meta}}
          <div class="r2b__ref-tags">
            {{#if this.auftragswert_fmt}}<span>{{this.auftragswert_fmt}}</span>{{/if}}
            {{#if this.auftragsdauer_fmt}}<span>{{this.auftragsdauer_fmt}}</span>{{/if}}
          </div>
          {{/if}}
        </div>
      </article>
      {{/each}}
    </div>
  </div>
</section>
{{/if}}

<section class="r2b__sec" data-sektion="prozess" id="prozess" data-bg-override="{{computed.sektion_bg_prozess}}">
  <div class="r2b__wrap">
    <div class="r2b__sec-head">
      <div class="r2b__reveal">
        <span class="r2b__eyebrow" data-edit-path="computed.prozess.eyebrow">{{#if computed.prozess.eyebrow}}{{computed.prozess.eyebrow}}{{else}}Wie wir arbeiten{{/if}}</span>
        <h2 class="r2b__sec-title" data-edit-path="computed.prozess.headline">{{computed.prozess.headline}}</h2>
      </div>
      <p class="r2b__sec-lead r2b__reveal r2b__reveal--delay-1" data-edit-path="computed.prozess.lead">{{#if computed.prozess.lead}}{{computed.prozess.lead}}{{else}}Vier Schritte, kein Versteckspiel. Sie wissen jederzeit, wo Ihr Auftrag steht.{{/if}}</p>
    </div>
    <div class="r2b__steps">
      {{#each computed.prozess.schritte}}
      <div class="r2b__step r2b__reveal">
        <div class="r2b__step-num">{{this.num}}</div>
        <div>
          <h3 data-edit-path="computed.prozess.schritte.__index__.titel">{{this.titel}}</h3>
          <p data-edit-path="computed.prozess.schritte.__index__.text">{{this.text}}</p>
        </div>
      </div>
      {{/each}}
    </div>
  </div>
</section>

<section class="r2b__sec r2b__sec--cream" data-sektion="formular" id="formular" data-bg-override="{{computed.sektion_bg_formular}}">
  <div class="r2b__wrap r2b__form-wrap">
    <div class="r2b__form-intro r2b__reveal">
      <span class="r2b__eyebrow" data-edit-path="computed.formular_eyebrow">{{#if computed.formular_eyebrow}}{{computed.formular_eyebrow}}{{else}}Termin{{/if}}</span>
      <h2 data-edit-path="computed.formular_headline">{{#if computed.formular_headline}}{{computed.formular_headline}}{{else}}{{slot.inhalt.cta_primaer}}{{/if}}</h2>
      <p data-edit-path="computed.form_subline">{{computed.form_subline}}</p>
      <div class="r2b__form-intro-contact">
        Lieber direkt anrufen? <br>
        {{dossier.stamm.firma_kurz}}, {{dossier.stamm.region}}
      </div>
    </div>

<form class="r2b__form r2b__reveal r2b__reveal--delay-1" id="r2b-form" novalidate>
      <div class="r2b__form-error" id="form-error" role="alert"></div>

<div class="r2b__field">
        <label for="f-name">Name <span class="req">*</span></label>
        <input type="text" id="f-name" name="name" required minlength="2" autocomplete="name">
      </div>

<div class="r2b__field--row">
        <div class="r2b__field">
          <label for="f-tel">Telefon</label>
          <input type="tel" id="f-tel" name="telefon" autocomplete="tel" inputmode="tel">
        </div>
        <div class="r2b__field">
          <label for="f-mail">E-Mail</label>
          <input type="email" id="f-mail" name="email" autocomplete="email">
        </div>
      </div>

<div class="r2b__field">
        <label for="f-plz">Postleitzahl <span class="req">*</span></label>
        <input type="text" id="f-plz" name="plz" required pattern="[0-9]{5}" maxlength="5" inputmode="numeric" autocomplete="postal-code">
      </div>

<div class="r2b__field">
        <label for="f-text">Worum geht's? <span class="req">*</span></label>
        <textarea id="f-text" name="beschreibung" required minlength="10" placeholder="Kurz, in Ihren Worten — wir melden uns mit Fragen."></textarea>
      </div>

<div class="r2b__field">
        <label>Wann passt es Ihnen?</label>
        <div class="r2b__radios">
          <label class="r2b__radio"><input type="radio" name="termin" value="diese_woche"><span>Diese Woche</span></label>
          <label class="r2b__radio"><input type="radio" name="termin" value="2_wochen"><span>Nächste 2 Wochen</span></label>
          <label class="r2b__radio"><input type="radio" name="termin" value="4_wochen"><span>Nächste 4 Wochen</span></label>
          <label class="r2b__radio"><input type="radio" name="termin" value="flexibel" checked><span>Flexibel</span></label>
        </div>
      </div>

<label class="r2b__consent">
        <input type="checkbox" id="f-consent" name="consent" required>
        <span>Ich bin mit der Verarbeitung meiner Daten zur Bearbeitung meiner Anfrage einverstanden. <a href="{{slot.urls.datenschutz}}" target="_blank" rel="noopener">Datenschutzerklärung</a></span>
      </label>

<button type="submit" class="r2b__form-submit" data-track="form_submit">
        <span>Anfrage senden</span>
        <span class="r2b__cta-arrow" aria-hidden="true">→</span>
      </button>
    </form>

<div class="r2b__form-success" id="form-success">
      <h3>Vielen Dank.</h3>
      <p>Wir melden uns innerhalb von 24 Stunden bei Ihnen.</p>
    </div>
  </div>
</section>

<footer class="r2b__footer" id="footer">
  <div class="r2b__wrap">
    <div class="r2b__footer-grid">
      <div>
        <div class="r2b__footer-firma">{{dossier.stamm.firma}}</div>
        <div class="r2b__footer-region">{{dossier.stamm.region}}</div>
      </div>
      <div>
        <div class="r2b__footer-links">
          <a href="{{slot.urls.impressum}}" target="_blank" rel="noopener">Impressum</a>
          <a href="{{slot.urls.datenschutz}}" target="_blank" rel="noopener">Datenschutz</a>
          <a href="#" id="r2b-cookie-reopen">Cookie-Einstellungen</a>
        </div>
      </div>
    </div>
    <div class="r2b__footer-hosting">
      Diese Aktionsseite wird betrieben von Room2Build im Auftrag von {{dossier.stamm.firma}}.
    </div>
  </div>
</footer>

<div class="r2b__cookie" id="r2b-cookie" role="dialog" aria-label="Cookie-Hinweis">
  <p>Wir nutzen Cookies für Reichweiten-Messung und Werbung. Nur mit Ihrer Zustimmung. <a href="{{slot.urls.datenschutz}}" target="_blank" rel="noopener">Mehr Infos</a></p>
  <div class="r2b__cookie-buttons">
    <button type="button" class="r2b__cookie-btn" data-consent="all">Alle akzeptieren</button>
    <button type="button" class="r2b__cookie-btn r2b__cookie-btn--ghost" data-consent="essential">Nur Notwendige</button>
  </div>
</div>

<script>
(function () {
  "use strict";
  var T = window.R2B_TRACKING || {};
  var CONSENT_KEY = "r2b_consent";
  var dl = "dataLayer";
  window[dl] = window[dl] || [];

function getConsent() {
    try {
      return document.cookie.split("; ").reduce(function (acc, kv) {
        var p = kv.split("=");
        if (p[0] === CONSENT_KEY) acc = p[1];
        return acc;
      }, "");
    } catch (e) { return ""; }
  }
  function setConsent(val) {
    var d = new Date(); d.setMonth(d.getMonth() + 12);
    document.cookie = CONSENT_KEY + "=" + val + "; expires=" + d.toUTCString() + "; path=/; SameSite=Lax";
  }
  function pushEvent(name, props) {
    var payload = Object.assign({ event: name, kampagnen_id: T.kampagnen_id, kunde_slug: T.kunde_slug }, props || {});
    window[dl].push(payload);
    if (window.fbq && getConsent() === "all") {
      try { window.fbq("trackCustom", name, payload); } catch (e) {}
    }
  }
  function getUtm() {
    var p = new URLSearchParams(window.location.search);
    var out = {};
    ["utm_source","utm_medium","utm_campaign","utm_content","utm_term"].forEach(function (k) {
      if (p.get(k)) out[k] = p.get(k);
    });
    return out;
  }
  function loadPixel(id) {
    if (!id || id === "null" || id === "undefined" || id.charAt(0) === "{") return;
    var s = document.createElement("script");
    s.async = true;
    s.src = "https://connect.facebook.net/en_US/fbevents.js";
    document.head.appendChild(s);
    window.fbq = window.fbq || function () { (window.fbq.q = window.fbq.q || []).push(arguments); };
    window.fbq.l = +new Date();
    window.fbq("init", id);
    window.fbq("track", "PageView");
  }
  function loadGtm(id) {
    if (!id || id === "null" || id === "undefined" || id.charAt(0) === "{") return;
    var s = document.createElement("script");
    s.async = true;
    s.src = "https://www.googletagmanager.com/gtm.js?id=" + id;
    document.head.appendChild(s);
    window[dl].push({ "gtm.start": +new Date(), event: "gtm.js" });
  }
  function activateTracking() {
    loadPixel(T.meta_pixel_id);
    loadGtm(T.gtm_id);
    pushEvent(T.events && T.events.page_view ? T.events.page_view : "PageView", {});
  }

// === Cookie-Banner ===
  var banner = document.getElementById("r2b-cookie");
  var reopen = document.getElementById("r2b-cookie-reopen");
  function showBanner() { if (banner) banner.classList.add("is-visible"); }
  function hideBanner() { if (banner) banner.classList.remove("is-visible"); }
  if (banner) {
    var consent = getConsent();
    if (!consent) showBanner();
    else if (consent === "all") activateTracking();
    banner.addEventListener("click", function (e) {
      var btn = e.target.closest("[data-consent]");
      if (!btn) return;
      var val = btn.getAttribute("data-consent");
      setConsent(val);
      hideBanner();
      if (val === "all") activateTracking();
    });
  }
  if (reopen) reopen.addEventListener("click", function (e) { e.preventDefault(); showBanner(); });

// === Reveal-Animation ===
  var revealEls = document.querySelectorAll(".r2b__reveal");
  if ("IntersectionObserver" in window && revealEls.length) {
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add("is-visible");
          io.unobserve(entry.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -60px 0px" });
    revealEls.forEach(function (el) { io.observe(el); });
  } else {
    revealEls.forEach(function (el) { el.classList.add("is-visible"); });
  }

// === Hero-Parallax ===
  var heroBg = document.querySelector("[data-parallax]");
  var hero = document.getElementById("hero");
  var ticking = false;
  function applyParallax() {
    if (!heroBg || !hero) return;
    var rect = hero.getBoundingClientRect();
    if (rect.bottom < 0 || rect.top > window.innerHeight) { ticking = false; return; }
    var offset = Math.max(-rect.top, 0) * 0.18;
    heroBg.style.transform = "translateY(" + offset + "px)";
    ticking = false;
  }
  function onScrollParallax() {
    if (!ticking) {
      window.requestAnimationFrame(applyParallax);
      ticking = true;
    }
  }
  if (heroBg && !window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
    window.addEventListener("scroll", onScrollParallax, { passive: true });
    applyParallax();
  }

// === Sticky-Nav ===
  var nav = document.getElementById("r2b-nav");
  function onScrollNav() {
    if (!nav) return;
    var heroBottom = hero ? hero.getBoundingClientRect().bottom : 600;
    if (window.scrollY > 80) nav.classList.add("is-stuck");
    else nav.classList.remove("is-stuck");
    if (heroBottom < 120) nav.classList.remove("is-onhero");
    else nav.classList.add("is-onhero");
  }
  window.addEventListener("scroll", onScrollNav, { passive: true });
  onScrollNav();

// === Count-up bei Stats ===
  var stats = document.querySelectorAll("[data-count-target]");
  function animateCount(el) {
    var raw = (el.getAttribute("data-count-target") || "").trim();
    var match = raw.match(/^(\d+)(.*)$/);
    if (!match) return;
    var target = parseInt(match[1], 10);
    var suffix = match[2] || "";
    var dur = 1200;
    var start = performance.now();
    function tick(now) {
      var t = Math.min((now - start) / dur, 1);
      var eased = 1 - Math.pow(1 - t, 3);
      el.textContent = Math.round(target * eased) + suffix;
      if (t < 1) requestAnimationFrame(tick);
    }
    requestAnimationFrame(tick);
  }
  if ("IntersectionObserver" in window && stats.length) {
    var sio = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          animateCount(entry.target);
          sio.unobserve(entry.target);
        }
      });
    }, { threshold: 0.5 });
    stats.forEach(function (el) { sio.observe(el); });
  }

// === Scroll-Tracking (ViewContent bei 50 %) ===
  var viewSent = false;
  function onScrollView() {
    if (viewSent) return;
    var h = document.documentElement;
    var scrolled = (h.scrollTop + window.innerHeight) / h.scrollHeight;
    if (scrolled >= 0.5) {
      viewSent = true;
      pushEvent(T.events && T.events.view_content ? T.events.view_content : "ViewContent", {});
      window.removeEventListener("scroll", onScrollView);
    }
  }
  window.addEventListener("scroll", onScrollView, { passive: true });

// === CTA-Tracking ===
  document.querySelectorAll("[data-track]").forEach(function (el) {
    el.addEventListener("click", function () { pushEvent(el.getAttribute("data-track"), {}); });
  });

// === Form-Submit ===
  var form = document.getElementById("r2b-form");
  var errorBox = document.getElementById("form-error");
  var successBox = document.getElementById("form-success");
  function showError(m) { if (!errorBox) return; errorBox.textContent = m; errorBox.classList.add("is-visible"); }
  function clearError() { if (!errorBox) return; errorBox.textContent = ""; errorBox.classList.remove("is-visible"); }

if (form) {
    var startSent = false;
    form.addEventListener("focusin", function () {
      if (startSent) return;
      startSent = true;
      pushEvent("form_start", {});
    });
    form.addEventListener("submit", function (e) {
      e.preventDefault();
      clearError();
      var fd = new FormData(form);
      var tel = (fd.get("telefon") || "").toString().trim();
      var mail = (fd.get("email") || "").toString().trim();
      if (!tel && !mail) {
        showError("Bitte geben Sie Telefon oder E-Mail an, damit wir uns melden können.");
        pushEvent("form_error", { reason: "no_contact" });
        return;
      }
      if (!fd.get("consent")) {
        showError("Bitte bestätigen Sie die Datenschutz-Einwilligung.");
        pushEvent("form_error", { reason: "no_consent" });
        return;
      }
      var payload = {
        kampagnen_id: T.kampagnen_id,
        kunde_slug: T.kunde_slug,
        name: fd.get("name"),
        telefon: tel,
        email: mail,
        plz: fd.get("plz"),
        beschreibung: fd.get("beschreibung"),
        wunschtermin: fd.get("termin"),
        utm: getUtm(),
        ts: new Date().toISOString(),
        url: window.location.href
      };
      var btn = form.querySelector("button[type=submit]");
      if (btn) { btn.disabled = true; }
      fetch(T.lead_endpoint, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload)
      }).then(function (r) {
        if (!r.ok) throw new Error("Server " + r.status);
        return r.json().catch(function () { return {}; });
      }).then(function () {
        form.style.display = "none";
        if (successBox) successBox.classList.add("is-visible");
        pushEvent(T.events && T.events.lead ? T.events.lead : "Lead", { plz: payload.plz });
        if (window.fbq && getConsent() === "all") {
          try { window.fbq("track", "Lead", { content_name: T.kampagnen_id }); } catch (e) {}
        }
      }).catch(function () {
        showError("Senden hat nicht geklappt. Bitte versuchen Sie es erneut oder rufen Sie uns direkt an.");
        if (btn) { btn.disabled = false; }
        pushEvent("form_error", { reason: "network" });
      });
    });
  }
})();
</script>

<script>
(function () {
  if (window.parent === window) return;
  document.body.setAttribute("data-edit-mode", "true");
  var style = document.createElement("style");
  style.textContent =
    'body[data-edit-mode="true"] [data-sektion] { transition: outline-color .15s ease; }' +
    'body[data-edit-mode="true"] [data-sektion]:hover { outline: 2px dashed var(--c-primaer); outline-offset: -2px; cursor: pointer; }' +
    'body[data-edit-mode="true"] [data-sektion].is-edit-active { outline: 2px solid var(--c-primaer); outline-offset: -2px; }' +
    'body[data-edit-mode="true"] .r2b-inline-edit { outline: 1px dashed transparent; outline-offset: 4px; transition: outline-color .15s ease, background-color .15s ease; border-radius: 2px; cursor: text; }' +
    'body[data-edit-mode="true"] .r2b-inline-edit:hover { outline-color: color-mix(in srgb, var(--c-primaer) 60%, transparent); background-color: color-mix(in srgb, var(--c-primaer) 6%, transparent); }' +
    'body[data-edit-mode="true"] .r2b-inline-edit:focus { outline: 2px solid var(--c-primaer); outline-offset: 4px; background-color: color-mix(in srgb, var(--c-primaer) 10%, transparent); }' +
    'body[data-edit-mode="true"] .r2b-inline-edit:empty::before { content: "Klicken zum Editieren"; color: color-mix(in srgb, var(--c-text) 30%, transparent); font-style: italic; }';
  document.head.appendChild(style);
  // Sektion-Klick (für Sidebar-Wechsel)
  document.querySelectorAll("[data-sektion]").forEach(function (sec) {
    sec.addEventListener("click", function (e) {
      if (e.target.closest("a, button, input, textarea, select, [data-edit-path]")) return;
      document.querySelectorAll("[data-sektion]").forEach(function (s) { s.classList.remove("is-edit-active"); });
      sec.classList.add("is-edit-active");
      try { window.parent.postMessage({ type: "r2b-sektion-click", sektion: sec.getAttribute("data-sektion") }, "*"); } catch (err) {}
    });
  });
  // Inline-Edit
  document.querySelectorAll("[data-edit-path]").forEach(function (el) {
    el.setAttribute("contenteditable", "plaintext-only");
    el.setAttribute("spellcheck", "true");
    el.classList.add("r2b-inline-edit");
    var path = el.getAttribute("data-edit-path");
    el.addEventListener("click", function (e) { e.stopPropagation(); });
    el.addEventListener("focus", function () {
      try { window.parent.postMessage({ type: "r2b-text-focus", path: path }, "*"); } catch (err) {}
    });
    el.addEventListener("input", function () {
      try { window.parent.postMessage({ type: "r2b-text-input", path: path, value: el.textContent }, "*"); } catch (err) {}
    });
    el.addEventListener("blur", function () {
      try { window.parent.postMessage({ type: "r2b-text-blur", path: path, value: el.textContent }, "*"); } catch (err) {}
    });
    el.addEventListener("keydown", function (e) {
      if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); el.blur(); }
    });
  });
})();
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
<meta name="description" content="{{computed.seo_description}}">
<title>{{computed.seo_title}}</title>
{{#if computed.seo_schema_json}}
<script type="application/ld+json">{{{computed.seo_schema_json}}}</script>
{{/if}}

<script>
window.R2B_TRACKING = {
  meta_pixel_id: "{{dossier.tracking.meta_pixel_id}}",
  gtm_id: "{{dossier.tracking.gtm_id}}",
  kampagnen_id: "{{slot.kampagnen_id}}",
  kunde_slug: "{{slot.kunde_slug}}",
  events: { page_view: "PageView", view_content: "ViewContent", lead: "Lead" },
  consent_required: true,
  lead_endpoint: "https://leads.room2build.com/v1/submit"
};
</script>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="{{dossier.identitaet.fonts_url}}" rel="stylesheet">
{{#if computed.style_fonts_url}}
<link href="{{computed.style_fonts_url}}" rel="stylesheet">
{{/if}}
<style id="r2b-style-fonts-override">{{{computed.style_fonts_css}}}</style>
<style id="r2b-style-color-override">{{{computed.color_override_css}}}</style>
<script>window.R2B_SECTION_ORDER = {{{computed.section_order_json}}};</script>

<style>
:root {
  --c-primaer: {{dossier.identitaet.farben.primaer}};
  --c-sekundaer: {{dossier.identitaet.farben.sekundaer}};
  --c-text: #1d1c1a;
  --c-bg: #ffffff;
  --c-cream: color-mix(in srgb, var(--c-primaer) 4%, #f6f2eb);
  --c-cream-dark: color-mix(in srgb, var(--c-primaer) 8%, #ede5d6);
  --c-tint: color-mix(in srgb, var(--c-primaer) 12%, transparent);
  --c-stone: #2b2925;
  --c-mute: #6f6a62;
  --c-line: rgba(29, 28, 26, 0.12);
  --font-headline: {{dossier.identitaet.schriften.headline}};
  --font-body: {{dossier.identitaet.schriften.fliesstext}};
  --shadow-1: 0 1px 3px rgba(0,0,0,0.04);
  --shadow-2: 0 6px 18px rgba(0,0,0,0.08);
}

/* ============ Reset & Basics ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }

/* ============ Layout ============ */
.r2b__wrap { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.r2b__sec { padding: 6rem 0; position: relative; }
.r2b__sec--cream { background: var(--c-cream); }
.r2b__sec--stone { background: var(--c-stone); color: #fff; }
.r2b__sec-head { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 50ch; margin-bottom: 3rem; }
.r2b__eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-primaer);
}
.r2b__sec-title {
  font-family: var(--font-headline);
  font-size: clamp(1.85rem, 3.5vw, 2.8rem);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.015em;
  max-width: 22ch;
}
.r2b__sec-lead { color: var(--c-mute); font-size: 1.05rem; max-width: 55ch; }

@media (max-width: 700px) {
  .r2b__sec { padding: 4rem 0; }
  .r2b__wrap { padding: 0 1.25rem; }
}

/* ============ Material-Marquee (Wow #2) ============ */
.r2b__marquee {
  background: var(--c-text);
  color: #fff;
  padding: 1.2rem 0;
  overflow: hidden;
  position: relative;
  border-top: 1px solid color-mix(in srgb, var(--c-primaer) 30%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--c-primaer) 30%, transparent);
}
.r2b__marquee::before,
.r2b__marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.r2b__marquee::before { left: 0; background: linear-gradient(90deg, var(--c-text) 0%, transparent 100%); }
.r2b__marquee::after { right: 0; background: linear-gradient(-90deg, var(--c-text) 0%, transparent 100%); }
.r2b__marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 1.8rem;
  white-space: nowrap;
  animation: r2b-marquee 32s linear infinite;
  will-change: transform;
}
.r2b__marquee-track:hover { animation-play-state: paused; }
.r2b__marquee-item {
  font-family: var(--font-headline);
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #fff;
}
.r2b__marquee-dot {
  color: var(--c-primaer);
  font-size: 1.8rem;
  font-weight: 700;
}
@keyframes r2b-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* Print + reduced-motion: Marquee statisch zeigen, kein Loop */
@media (prefers-reduced-motion: reduce) {
  .r2b__marquee-track { animation: none; }
}
@media print {
  .r2b__marquee { display: none; }
}
/* Two-Tone-Skin: Marquee in Brand-Farbe statt Stone */
body.r2b-skin-two_tone .r2b__marquee { background: var(--c-primaer); border-color: rgba(255,255,255,0.2); }
body.r2b-skin-two_tone .r2b__marquee::before { background: linear-gradient(90deg, var(--c-primaer) 0%, transparent 100%); }
body.r2b-skin-two_tone .r2b__marquee::after { background: linear-gradient(-90deg, var(--c-primaer) 0%, transparent 100%); }
body.r2b-skin-two_tone .r2b__marquee-dot { color: #fff; }

/* ============ Hero-Headline Stagger-Animation (Wow #3) ============ */
.r2b__stagger-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(1em);
  filter: blur(6px);
  animation: r2b-stagger-in 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes r2b-stagger-in {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* Print + reduced-motion fallback: alles sofort sichtbar */
@media (prefers-reduced-motion: reduce) {
  .r2b__stagger-word { opacity: 1; transform: none; animation: none; }
}
@media print {
  .r2b__stagger-word { opacity: 1; transform: none; animation: none; }
}

/* ============ Reveal-Animation — Varianten pro Skin (Sprint 4 P18) ============
   defensiv: initial sichtbar, JS opt-in via .r2b-anim auf html
   Variante via body[data-reveal="..."] gewählt */
.r2b__reveal { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(0.22, 1, 0.36, 1), transform .8s cubic-bezier(0.22, 1, 0.36, 1); }
.r2b__reveal--delay-1 { transition-delay: 0.12s; }
.r2b__reveal--delay-2 { transition-delay: 0.24s; }

/* Variant: fade (Editorial) — Default */
html.r2b-anim body[data-reveal="fade"] .r2b__reveal:not(.is-visible) { opacity: 0; transform: translateY(20px); }

/* Variant: slide-up (Industrial) — stärker, schneller, klarer */
html.r2b-anim body[data-reveal="slide-up"] .r2b__reveal:not(.is-visible) { opacity: 0; transform: translateY(40px); }
body[data-reveal="slide-up"] .r2b__reveal { transition: opacity .6s ease-out, transform .6s ease-out; }

/* Variant: scale (Atelier) — magazinig, kleiner Scale-Sprung */
html.r2b-anim body[data-reveal="scale"] .r2b__reveal:not(.is-visible) { opacity: 0; transform: scale(0.96) translateY(10px); }
body[data-reveal="scale"] .r2b__reveal { transition: opacity .9s cubic-bezier(0.22, 1, 0.36, 1), transform .9s cubic-bezier(0.22, 1, 0.36, 1); }

/* Variant: fade-strong (Fullbleed) — dramatischer, mehr Blur */
html.r2b-anim body[data-reveal="fade-strong"] .r2b__reveal:not(.is-visible) { opacity: 0; transform: translateY(30px); filter: blur(8px); }
body[data-reveal="fade-strong"] .r2b__reveal { transition: opacity 1.1s ease-out, transform 1.1s ease-out, filter 1.1s ease-out; }

/* Variant: slide-side (Two-Tone) — horizontal, technisch */
html.r2b-anim body[data-reveal="slide-side"] .r2b__reveal:not(.is-visible) { opacity: 0; transform: translateX(-30px); }
body[data-reveal="slide-side"] .r2b__reveal { transition: opacity .7s ease-out, transform .7s ease-out; }

/* Fallback wenn data-reveal nicht gesetzt: gleiches Verhalten wie Editorial */
html.r2b-anim body:not([data-reveal]) .r2b__reveal:not(.is-visible) { opacity: 0; transform: translateY(20px); }

/* Print + reduced-motion: alles sofort sichtbar */
@media (prefers-reduced-motion: reduce) {
  .r2b__reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}
@media print {
  .r2b__reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}
.r2b__reveal--delay-3 { transition-delay: 0.3s; }

/* Broken-Image-Handling: img ohne valid src wird via JS hidden, hier nur Style-Fallback */
img.is-broken { display: none !important; }

/* ============ Sticky Header ============ */
.r2b__nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 2rem;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-line);
  transition: background .3s ease, padding .3s ease;
}
.r2b__nav-logo { display: flex; align-items: center; gap: 0.75rem; }
.r2b__nav-logo img { height: 40px; width: auto; }
.r2b__nav-logo-text {
  font-family: var(--font-headline);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.r2b__nav-links { display: flex; gap: 2rem; }
.r2b__nav-links a {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--c-text);
  transition: color .18s ease;
}
.r2b__nav-links a:hover { color: var(--c-primaer); }
.r2b__nav-cta {
  background: var(--c-primaer);
  color: #fff;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform .18s ease, opacity .18s ease;
}
.r2b__nav-cta:hover { transform: translateY(-1px); opacity: 0.92; }
@media (max-width: 768px) {
  .r2b__nav { padding: 0.75rem 1rem; }
  .r2b__nav-logo-text { display: none; }
  .r2b__nav-links { display: none; }
  .r2b__nav-cta { padding: 0.55rem 1rem; font-size: 0.82rem; }
}

/* ============ A1 · Hero (Unternehmen) ============ */
.r2b__hero {
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: 8rem 0 4rem;
  position: relative;
  background: var(--c-cream);
}
.r2b__hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}
.r2b__hero-text { display: flex; flex-direction: column; gap: 1.5rem; }
.r2b__hero-eyebrow {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-primaer);
}
.r2b__hero-title {
  font-family: var(--font-headline);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.02em;
  max-width: 18ch;
}
.r2b__hero-subline {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--c-mute);
  max-width: 45ch;
}
.r2b__hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--c-primaer);
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 1rem;
  align-self: flex-start;
  transition: transform .18s ease, opacity .18s ease;
}
.r2b__hero-cta:hover { transform: translateY(-2px); opacity: 0.92; }
.r2b__hero-stats {
  display: flex;
  gap: 2.5rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent);
  flex-wrap: wrap;
}
.r2b__hero-stat { display: flex; flex-direction: column; gap: 0.2rem; }
.r2b__hero-stat-wert {
  font-family: var(--font-headline);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 600;
  line-height: 1;
  color: var(--c-text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.r2b__hero-stat-label {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-mute);
}
/* Niko-Fix Basis: Stats-Wert auf Brand-Primär (war --c-text → bei dunkler Brand-Schrift schlecht lesbar) + größer */
.r2b__hero-stat-wert {
  color: var(--c-primaer);
  font-size: clamp(2.2rem, 4vw, 3rem);
}
/* Stats-Farben pro Skin anpassen wo Hero dunkel ist (oder bei Two-Tone Auto-Kontrast aus --c-on-primaer)
   Wichtig: KEIN !important — Skin-Overrides müssen gewinnen */
body.r2b-skin-fullbleed .r2b__hero-stat-wert { color: #fff; }
body.r2b-skin-fullbleed .r2b__hero-stat-label { color: rgba(255,255,255,0.7); }
body.r2b-skin-fullbleed .r2b__hero-stats { border-top-color: rgba(255,255,255,0.2); }
body.r2b-skin-two_tone .r2b__hero-stat-wert { color: var(--c-on-primaer, #fff); }
body.r2b-skin-two_tone .r2b__hero-stat-label { color: var(--c-on-primaer-mute, rgba(255,255,255,0.75)); }
body.r2b-skin-two_tone .r2b__hero-stats { border-top-color: var(--c-on-primaer-line, rgba(255,255,255,0.25)); }
/* Bei dunklem Hero-bg-Override (Stone) Stats hell für Sichtbarkeit — egal welcher Skin */
.r2b__hero[data-bg-override="stone"] .r2b__hero-stat-wert,
.r2b__hero.r2b__sec--stone .r2b__hero-stat-wert {
  color: #fff;
}
.r2b__hero[data-bg-override="stone"] .r2b__hero-stat-label,
.r2b__hero.r2b__sec--stone .r2b__hero-stat-label {
  color: rgba(255,255,255,0.75);
}
.r2b__hero[data-bg-override="stone"] .r2b__hero-stats,
.r2b__hero.r2b__sec--stone .r2b__hero-stats {
  border-top-color: rgba(255,255,255,0.2);
}
.r2b__hero-bild { aspect-ratio: 4 / 5; overflow: hidden; }
.r2b__hero-bild img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .r2b__hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  .r2b__hero-bild { aspect-ratio: 4 / 3; order: -1; }
  .r2b__hero { min-height: auto; padding: 6rem 0 3rem; }
}

/* ============ A2 · Über uns ============ */
.r2b__about-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 4rem;
  align-items: start;
}
.r2b__about-bild { aspect-ratio: 4 / 5; overflow: hidden; position: sticky; top: 100px; }
.r2b__about-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.r2b__about-bild:hover img { transform: scale(1.03); }
.r2b__about-text { display: flex; flex-direction: column; gap: 1.5rem; }
.r2b__about-text p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--c-text);
}
.r2b__about-text p:first-of-type::first-letter {
  font-family: var(--font-headline);
  font-size: 3.5rem;
  font-weight: 500;
  float: left;
  line-height: 1;
  margin: 0.1rem 0.7rem 0 0;
  color: var(--c-primaer);
}
/* Drop-Cap-Auto-Kontrast: wenn Section dunkel oder Brand-Farbe → Drop-Cap hell statt Primaer */
.r2b__sec[data-bg-override="stone"] .r2b__about-text p:first-of-type::first-letter,
.r2b__sec[data-bg-override="primaer-tint"] .r2b__about-text p:first-of-type::first-letter { color: #fff; }
@media (max-width: 900px) {
  .r2b__about-grid { grid-template-columns: 1fr; gap: 2rem; }
  .r2b__about-bild { position: static; aspect-ratio: 4 / 3; }
}

/* ============ A3 · Leistungen ============ */
.r2b__leist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}
.r2b__leist-card {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  padding: 2rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 240px;
}
.r2b__leist-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: var(--c-primaer);
}
.r2b__leist-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c-tint);
  color: var(--c-primaer);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headline);
  font-size: 1.3rem;
  font-weight: 600;
}
.r2b__leist-card h3 {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
}
.r2b__leist-card p {
  color: var(--c-mute);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ============ A4 · Galerie (übernommen aus Anfrage-Template) ============ */
.r2b__gal-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.r2b__gal-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.r2b__gal-filter button {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.55rem 1.1rem;
  background: transparent;
  border: 1px solid var(--c-line);
  color: var(--c-mute);
  cursor: pointer;
  transition: all .18s ease;
  border-radius: 999px;
}
.r2b__gal-filter button:hover { border-color: var(--c-text); color: var(--c-text); }
.r2b__gal-filter button[aria-pressed="true"] {
  background: var(--c-text);
  color: var(--c-bg);
  border-color: var(--c-text);
}
.r2b__gal-stage { position: relative; }
.r2b__gal-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(70%, 1fr);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
}
.r2b__gal-track::-webkit-scrollbar { display: none; }
.r2b__gal-card {
  scroll-snap-align: start;
  position: relative;
  margin: 0;
  cursor: zoom-in;
  overflow: hidden;
  background: var(--c-cream);
}
.r2b__gal-card[hidden] { display: none; }
.r2b__gal-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.r2b__gal-card:hover img { transform: scale(1.05); }
.r2b__gal-card figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0.7rem 1rem;
  background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0));
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
}
.r2b__gal-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--c-line);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--c-text);
  z-index: 2;
  transition: background .18s ease;
}
.r2b__gal-arrow:hover { background: #fff; }
.r2b__gal-arrow--prev { left: -22px; }
.r2b__gal-arrow--next { right: -22px; }
@media (min-width: 768px) {
  .r2b__gal-track { grid-auto-columns: minmax(38%, 1fr); }
  .r2b__gal-arrow { display: flex; }
}
@media (min-width: 1100px) {
  .r2b__gal-track { grid-auto-columns: minmax(28%, 1fr); }
}

/* ============ Lightbox ============ */
.r2b__lightbox { position: fixed; inset: 0; background: rgba(15, 14, 12, 0.92); display: none; align-items: center; justify-content: center; z-index: 999; padding: 2rem; }
.r2b__lightbox.is-open { display: flex; }
.r2b__lightbox-img { max-width: 100%; max-height: 85vh; object-fit: contain; display: block; }
.r2b__lightbox-cap { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.85); font-family: var(--font-body); font-size: 0.9rem; text-align: center; padding: 0 1rem; }
.r2b__lightbox-btn { position: absolute; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); color: #fff; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; transition: background .18s ease; }
.r2b__lightbox-btn:hover { background: rgba(255,255,255,0.22); }
.r2b__lightbox-close { top: 1.5rem; right: 1.5rem; }
.r2b__lightbox-prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.r2b__lightbox-next { right: 1.5rem; top: 50%; transform: translateY(-50%); }

/* ============ A5 · Referenzen ============ */
.r2b__refs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
.r2b__ref {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: center;
}
.r2b__ref:nth-child(even) { direction: rtl; }
.r2b__ref:nth-child(even) > * { direction: ltr; }
.r2b__ref-pair { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
.r2b__ref-pair--double { grid-template-columns: 1fr 1fr; }
.r2b__ref-pair figure { margin: 0; position: relative; overflow: hidden; }
.r2b__ref-pair img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
.r2b__ref-pair figure:hover img { transform: scale(1.04); }
.r2b__ref-pair figcaption {
  position: absolute; top: 0.85rem; left: 0.85rem;
  background: rgba(0,0,0,0.55); color: #fff;
  font-family: var(--font-body); font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  padding: 0.3rem 0.7rem;
}
.r2b__ref-meta h3 {
  font-family: var(--font-headline);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.25;
  font-weight: 500;
  margin-bottom: 1rem;
}
.r2b__ref-zitat {
  font-family: var(--font-headline);
  font-size: 1.05rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--c-mute);
  border-left: 2px solid var(--c-primaer);
  padding-left: 1rem;
  margin: 1rem 0;
}
.r2b__ref-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
.r2b__ref-tags span {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  color: var(--c-primaer); border: 1px solid var(--c-tint); padding: 0.3rem 0.7rem; border-radius: 999px;
}
@media (max-width: 900px) {
  .r2b__ref { grid-template-columns: 1fr; gap: 1.5rem; }
  .r2b__ref:nth-child(even) { direction: ltr; }
}

/* ============ A6 · Team (Wahl-Modul) ============ */
.r2b__team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2rem;
}
.r2b__team-card { display: flex; flex-direction: column; gap: 1rem; }
.r2b__team-bild { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 50%; }
.r2b__team-bild img { width: 100%; height: 100%; object-fit: cover; }
.r2b__team-name { font-family: var(--font-headline); font-size: 1.15rem; font-weight: 500; }
.r2b__team-position {
  font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  color: var(--c-primaer); margin-top: 0.2rem;
}
.r2b__team-text { font-size: 0.95rem; color: var(--c-mute); line-height: 1.55; }

/* ============ A7 · Standort (Wahl-Modul) ============ */
.r2b__standort-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.r2b__standort-karte {
  aspect-ratio: 4 / 3;
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  overflow: hidden;
}
.r2b__standort-karte iframe { width: 100%; height: 100%; border: 0; }
.r2b__standort-karte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.r2b__standort-karte-platzhalter {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2rem; text-align: center;
  background: var(--c-cream);
  color: var(--c-mute);
  gap: 0.8rem;
}
.r2b__standort-karte-platzhalter strong { font-family: var(--font-headline); font-size: 1.05rem; color: var(--c-text); font-weight: 500; }
.r2b__standort-karte-platzhalter p { font-size: 0.9rem; line-height: 1.55; max-width: 36ch; }
.r2b__standort-info { display: flex; flex-direction: column; gap: 1.5rem; }
.r2b__standort-info h3 { font-family: var(--font-headline); font-size: 1.3rem; font-weight: 500; }
.r2b__standort-info p { color: var(--c-mute); line-height: 1.7; }
@media (max-width: 800px) {
  .r2b__standort-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ============ A8 · FAQ (Wahl-Modul) ============ */
.r2b__faq-list { max-width: 800px; display: flex; flex-direction: column; gap: 0.5rem; }
.r2b__faq-item {
  border-bottom: 1px solid var(--c-line);
  padding: 1.5rem 0;
}
.r2b__faq-item summary {
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; list-style: none;
  font-family: var(--font-headline);
  font-size: 1.15rem; font-weight: 500;
  padding: 0;
}
.r2b__faq-item summary::-webkit-details-marker { display: none; }
.r2b__faq-item summary::after {
  content: "+"; font-size: 1.5rem; font-weight: 300; color: var(--c-primaer);
  transition: transform .25s ease;
}
.r2b__faq-item[open] summary::after { transform: rotate(45deg); }
.r2b__faq-answer {
  margin-top: 1rem;
  color: var(--c-mute);
  line-height: 1.7;
}

/* ============ A9 · Kontakt ============ */
.r2b__kontakt-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.r2b__kontakt-info { display: flex; flex-direction: column; gap: 1.75rem; }
.r2b__kontakt-info h3 { font-family: var(--font-headline); font-size: 1.3rem; font-weight: 500; }
.r2b__kontakt-info-block { display: flex; flex-direction: column; gap: 0.4rem; }
.r2b__kontakt-label {
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  color: var(--c-primaer);
}
.r2b__kontakt-value { font-size: 1.05rem; line-height: 1.5; }
.r2b__kontakt-value a { color: var(--c-text); border-bottom: 1px solid var(--c-tint); transition: border-color .18s ease; }
.r2b__kontakt-value a:hover { border-color: var(--c-primaer); }

/* Formular */
.r2b__form { display: flex; flex-direction: column; gap: 1.2rem; }
.r2b__form-row { display: flex; flex-direction: column; gap: 0.4rem; }
.r2b__form-row label {
  font-size: 0.82rem; letter-spacing: 0.06em; font-weight: 600;
  color: var(--c-text);
}
.r2b__form-row input,
.r2b__form-row textarea {
  font: inherit;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  padding: 0.85rem 1rem;
  border-radius: 4px;
  transition: border-color .18s ease;
}
.r2b__form-row input:focus,
.r2b__form-row textarea:focus { outline: none; border-color: var(--c-primaer); }
.r2b__form-row textarea { min-height: 120px; resize: vertical; }
.r2b__form-submit {
  background: var(--c-primaer);
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
  align-self: flex-start;
  transition: transform .18s ease, opacity .18s ease;
}
.r2b__form-submit:hover { transform: translateY(-2px); opacity: 0.92; }
.r2b__form-success {
  display: none;
  background: var(--c-cream-dark);
  border-left: 3px solid var(--c-primaer);
  padding: 1.5rem;
}
.r2b__form-success.is-visible { display: block; }
.r2b__form-error {
  display: none;
  background: rgba(220, 60, 60, 0.08);
  border-left: 3px solid #c44;
  padding: 1rem;
  font-size: 0.92rem;
}
.r2b__form-error.is-visible { display: block; }

@media (max-width: 900px) {
  .r2b__kontakt-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ============ A8.5 · Aktuelles / Blog ============ */
.r2b__aktuelles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}
.r2b__aktuelles-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.r2b__aktuelles-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.r2b__aktuelles-bild { aspect-ratio: 16/10; overflow: hidden; background: var(--c-cream); }
.r2b__aktuelles-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.r2b__aktuelles-card:hover .r2b__aktuelles-bild img { transform: scale(1.04); }
.r2b__aktuelles-meta {
  display: flex;
  gap: 0.8rem;
  padding: 1.25rem 1.5rem 0.4rem;
  font-size: 0.78rem;
  color: var(--c-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.r2b__aktuelles-datum { color: var(--c-mute); }
.r2b__aktuelles-kategorie { color: var(--c-primaer); }
.r2b__aktuelles-titel {
  font-family: var(--font-headline);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.3;
  padding: 0 1.5rem 0.6rem;
}
.r2b__aktuelles-auszug {
  padding: 0 1.5rem 1.5rem;
  font-size: 0.95rem;
  color: var(--c-mute);
  line-height: 1.55;
}
.r2b__aktuelles-empty {
  background: #fff;
  border: 1px dashed var(--c-line);
  border-radius: 4px;
  padding: 2.5rem 2rem;
  text-align: center;
  color: var(--c-mute);
}
.r2b__aktuelles-empty strong { display: block; color: var(--c-text); font-size: 1.1rem; margin-bottom: 0.6rem; font-family: var(--font-headline); font-weight: 500; }
.r2b__aktuelles-empty p { font-size: 0.95rem; max-width: 50ch; margin: 0 auto; }

/* ============ A8.6 · Karriere ============ */
.r2b__karriere-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.r2b__karriere-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.r2b__karriere-card:hover { border-color: var(--c-primaer); box-shadow: var(--shadow-1); }
.r2b__karriere-titel {
  font-family: var(--font-headline);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.25;
}
.r2b__karriere-typ {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--c-primaer);
  background: color-mix(in srgb, var(--c-primaer) 8%, transparent);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}
.r2b__karriere-text { font-size: 0.95rem; color: var(--c-text); line-height: 1.55; }
.r2b__karriere-anf { font-size: 0.9rem; color: var(--c-mute); line-height: 1.55; padding-top: 0.4rem; border-top: 1px solid var(--c-line); }
.r2b__karriere-anf strong { color: var(--c-text); font-weight: 600; }
.r2b__karriere-form {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  padding: 2rem;
  max-width: 640px;
  margin: 0 auto;
}
.r2b__karriere-form-headline {
  font-family: var(--font-headline);
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
}
.r2b__karriere-form-lead {
  color: var(--c-mute);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

/* ============ A8.7 · Termin-Buchung ============ */
.r2b__termin-embed {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  overflow: hidden;
  min-height: 640px;
}
.r2b__termin-embed iframe {
  width: 100%;
  height: 640px;
  border: 0;
  display: block;
}
.r2b__termin-platzhalter {
  background: var(--c-cream);
  border: 1px dashed var(--c-line);
  border-radius: 4px;
  padding: 2.5rem 2rem;
  text-align: center;
  color: var(--c-mute);
}
.r2b__termin-platzhalter strong { display: block; color: var(--c-text); font-size: 1.1rem; margin-bottom: 0.6rem; }
.r2b__termin-platzhalter p { font-size: 0.95rem; line-height: 1.55; max-width: 50ch; margin: 0 auto; }

/* ============ Live-Chat / WhatsApp Floating-Button ============ */
.r2b__livechat-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.3rem;
  background: #25d366;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.4);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.r2b__livechat-btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 32px rgba(37, 211, 102, 0.5); }
.r2b__livechat-btn--telefon { background: #1f2937; color: #fff; box-shadow: 0 6px 24px rgba(31, 41, 55, 0.45); }
.r2b__livechat-btn--telefon:hover { box-shadow: 0 10px 32px rgba(31, 41, 55, 0.55); background: #111827; }
.r2b__livechat-icon { width: 22px; height: 22px; flex-shrink: 0; }
.r2b__livechat-label { display: inline; }
@media (max-width: 500px) {
  .r2b__livechat-btn { padding: 0.85rem; }
  .r2b__livechat-label { display: none; }
}

/* ============ Footer ============ */
.r2b__footer {
  background: var(--c-stone);
  color: rgba(255,255,255,0.75);
  padding: 4rem 0 2rem;
  font-size: 0.9rem;
}
.r2b__footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
.r2b__footer h4 {
  font-family: var(--font-headline);
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}
.r2b__footer ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.r2b__footer a { color: rgba(255,255,255,0.7); transition: color .18s ease; }
.r2b__footer a:hover { color: #fff; }
.r2b__footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
}
@media (max-width: 800px) {
  .r2b__footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 500px) {
  .r2b__footer-grid { grid-template-columns: 1fr; }
}

/* ============ Cookie-Banner ============ */
.r2b__cookie {
  position: fixed;
  bottom: 1rem; left: 1rem; right: 1rem;
  background: #fff;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-2);
  padding: 1.25rem 1.5rem;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}
.r2b__cookie.is-visible { display: flex; }
.r2b__cookie-text { font-size: 0.9rem; flex: 1; min-width: 280px; }
.r2b__cookie-btns { display: flex; gap: 0.6rem; }
.r2b__cookie-btn {
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}
.r2b__cookie-btn--accept { background: var(--c-primaer); color: #fff; border-color: var(--c-primaer); }

/* ============ Vorher-Nachher-Slider (Sprint 4 P25) ============ */
.r2b__vn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 2rem;
}
.r2b__vn-card { display: flex; flex-direction: column; gap: 0.8rem; }
.r2b__vn-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  user-select: none;
  cursor: ew-resize;
  background: var(--c-cream-dark);
}
.r2b__vn-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.r2b__vn-clip {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 50%;
  overflow: hidden;
}
.r2b__vn-handle {
  position: absolute; top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
  z-index: 3;
  transform: translateX(-50%);
}
.r2b__vn-handle-line {
  position: absolute; top: 0; bottom: 0; left: 0; right: 0;
  background: #fff;
}
.r2b__vn-handle-knob {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--c-stone);
  pointer-events: none;
}
.r2b__vn-tag {
  position: absolute;
  top: 1rem;
  padding: 0.4rem 0.8rem;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 4px;
  z-index: 2;
  pointer-events: none;
}
.r2b__vn-tag--vorher { left: 1rem; }
.r2b__vn-tag--nachher { right: 1rem; }
.r2b__vn-label {
  font-size: 0.95rem;
  color: var(--c-mute);
  font-weight: 500;
}
.r2b__vn-empty,
.r2b__logos-empty,
.r2b__test-empty {
  background: rgba(0,0,0,0.04);
  border: 1px dashed var(--c-line);
  border-radius: 4px;
  padding: 2.5rem 2rem;
  text-align: center;
  color: var(--c-mute);
}
.r2b__vn-empty strong,
.r2b__logos-empty strong,
.r2b__test-empty strong { display: block; color: var(--c-text); font-size: 1.1rem; margin-bottom: 0.6rem; font-family: var(--font-headline); font-weight: 500; }
.r2b__vn-empty p,
.r2b__logos-empty p,
.r2b__test-empty p { font-size: 0.95rem; max-width: 50ch; margin: 0 auto; line-height: 1.55; }

/* ============ Logos-Vertrauensband (Sprint 4 P26) ============ */
.r2b__logos-sec {
  padding: 3rem 0;
  background: #fff;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  overflow: hidden;
}
.r2b__logos-eyebrow {
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-mute);
  margin-bottom: 1.5rem;
}
.r2b__logos-headline {
  text-align: center;
  font-family: var(--font-headline);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 500;
  color: var(--c-text);
  margin-bottom: 2rem;
}
.r2b__logos-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.r2b__logos-marquee::before,
.r2b__logos-marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.r2b__logos-marquee::before { left: 0; background: linear-gradient(90deg, #fff 0%, transparent 100%); }
.r2b__logos-marquee::after { right: 0; background: linear-gradient(-90deg, #fff 0%, transparent 100%); }
.r2b__logos-track {
  display: inline-flex;
  align-items: center;
  gap: 4rem;
  white-space: nowrap;
  animation: r2b-logos-marquee 28s linear infinite;
  will-change: transform;
}
.r2b__logos-track:hover { animation-play-state: paused; }
.r2b__logos-item {
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.r2b__logos-item img {
  max-height: 100%;
  max-width: 160px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.6);
  transition: filter .3s ease;
}
.r2b__logos-track:hover .r2b__logos-item img { filter: grayscale(0%) opacity(1); }
@keyframes r2b-logos-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .r2b__logos-track { animation: none; } }
@media print { .r2b__logos-sec { display: none; } }

/* ============ Testimonials (Sprint 4 P27) ============ */
.r2b__test-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.8rem;
}
.r2b__test-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  transition: transform .25s ease, box-shadow .25s ease;
}
.r2b__test-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.r2b__test-stars { display: flex; gap: 2px; }
.r2b__test-star { color: #f5b800; font-size: 1.1rem; line-height: 1; }
.r2b__test-quote {
  font-family: var(--font-headline);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--c-text);
  font-style: italic;
  font-weight: 400;
  margin: 0;
  flex: 1;
}
.r2b__test-author { display: flex; align-items: center; gap: 0.8rem; }
.r2b__test-foto { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.r2b__test-foto img { width: 100%; height: 100%; object-fit: cover; }
.r2b__test-meta { display: flex; flex-direction: column; gap: 0.1rem; }
.r2b__test-name { font-weight: 600; font-size: 0.95rem; color: var(--c-text); }
.r2b__test-position { font-size: 0.85rem; color: var(--c-mute); }

/* ====================================================================
 * SEKTION-HINTERGRUND-OVERRIDES (Sprint 4 P17)
 * Berater wählt pro Sektion einen Hintergrund-Stil im Click-to-Edit-Sidebar.
 * Wirkt auf alle Sektionen ohne Skin-System zu unterlaufen.
 * ==================================================================== */
.r2b__sec[data-bg-override="cream"] { background: var(--c-cream); color: var(--c-text); }
.r2b__sec[data-bg-override="stone"] { background: var(--c-stone); color: #fff; }
.r2b__sec[data-bg-override="stone"] .r2b__sec-title,
.r2b__sec[data-bg-override="stone"] .r2b__eyebrow { color: #fff; }
.r2b__sec[data-bg-override="stone"] .r2b__sec-lead { color: rgba(255,255,255,0.7); }
.r2b__sec[data-bg-override="primaer-tint"] { background: color-mix(in srgb, var(--c-primaer) 8%, #fff); color: var(--c-text); }
/* Hero kann nicht alle Background-Varianten haben (eigener Layout-Code pro Skin), aber Cream + Stone gehen */
.r2b__hero[data-bg-override="cream"] { background: var(--c-cream); }
.r2b__hero[data-bg-override="stone"] { background: var(--c-stone); color: #fff; }
.r2b__hero[data-bg-override="stone"] .r2b__hero-title,
.r2b__hero[data-bg-override="stone"] .r2b__hero-subline,
.r2b__hero[data-bg-override="stone"] .r2b__hero-eyebrow { color: #fff; }
.r2b__hero[data-bg-override="stone"] .r2b__hero-subline { color: rgba(255,255,255,0.85); }
.r2b__hero[data-bg-override="primaer-tint"] { background: color-mix(in srgb, var(--c-primaer) 8%, #fff); }

/* ====================================================================
 * SKIN-SYSTEM (Sprint 4)
 * Editorial = Default (alle Styles oben). Industrial + Atelier = Overrides.
 * Bei Template-Änderungen darüber: ALLE 3 Skin-Selektoren mitprüfen.
 * Spec: _specs/Sprint-4-Skin-System-Spec.md
 * ==================================================================== */

/* ---------- Skin: Industrial ---------- */
/* Technisch, kompakt, schärfere Borders, Roboto Slab Headlines */
body.r2b-skin-industrial .r2b__hero {
  background: #fff;
  border-top: 4px solid var(--c-primaer);
  padding: 7rem 0 4rem;
  min-height: 70vh;
}
body.r2b-skin-industrial .r2b__hero-title {
  font-weight: 700;
  letter-spacing: -0.005em;
}
body.r2b-skin-industrial .r2b__hero-cta { border-radius: 4px; padding: 0.9rem 1.6rem; }
body.r2b-skin-industrial .r2b__sec { padding: 4.5rem 0; }
body.r2b-skin-industrial .r2b__sec-head { max-width: 100%; }
body.r2b-skin-industrial .r2b__sec-title { font-weight: 600; }
body.r2b-skin-industrial .r2b__sec--cream { background: color-mix(in srgb, var(--c-primaer) 6%, #fff); }
body.r2b-skin-industrial .r2b__leist-card,
body.r2b-skin-industrial .r2b__faq-item,
body.r2b-skin-industrial .r2b__karriere-card,
body.r2b-skin-industrial .r2b__aktuelles-card,
body.r2b-skin-industrial .r2b__standort-karte {
  border-radius: 0;
  border: 1px solid var(--c-line);
  box-shadow: none;
}
body.r2b-skin-industrial .r2b__leist-card:hover,
body.r2b-skin-industrial .r2b__karriere-card:hover {
  border-color: var(--c-primaer);
  transform: none;
  box-shadow: none;
}
body.r2b-skin-industrial .r2b__team-bild { border-radius: 0; }
body.r2b-skin-industrial .r2b__leist-icon {
  background: var(--c-primaer);
  color: #fff;
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 0;
  font-weight: 700;
}
body.r2b-skin-industrial .r2b__nav { border-bottom: 1px solid var(--c-line); }

/* ---------- Skin: Atelier ---------- */
/* Kreativ, magazin-artig, asymmetrisches Layout, runde Cards, Modern Sans */
body.r2b-skin-atelier .r2b__hero {
  background: #fff;
  padding: 9rem 0 5rem;
  min-height: 85vh;
}
body.r2b-skin-atelier .r2b__hero-inner {
  grid-template-columns: 1.5fr 1fr;
  gap: 5rem;
}
body.r2b-skin-atelier .r2b__hero-title {
  font-weight: 800;
  letter-spacing: -0.035em;
  font-size: clamp(2.6rem, 6.5vw, 4.8rem);
  line-height: 1.02;
  max-width: 14ch;
}
body.r2b-skin-atelier .r2b__hero-subline { font-size: 1.2rem; max-width: 38ch; }
body.r2b-skin-atelier .r2b__hero-cta {
  border-radius: 4px;
  padding: 1.1rem 2.4rem;
  font-weight: 700;
  letter-spacing: 0;
}
body.r2b-skin-atelier .r2b__hero-eyebrow { letter-spacing: 0.22em; font-weight: 700; }
body.r2b-skin-atelier .r2b__sec { padding: 7rem 0; }
body.r2b-skin-atelier .r2b__sec-title {
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: clamp(2rem, 4vw, 3.2rem);
}
body.r2b-skin-atelier .r2b__eyebrow { letter-spacing: 0.22em; font-weight: 700; }
body.r2b-skin-atelier .r2b__leist-card,
body.r2b-skin-atelier .r2b__faq-item,
body.r2b-skin-atelier .r2b__karriere-card,
body.r2b-skin-atelier .r2b__aktuelles-card,
body.r2b-skin-atelier .r2b__standort-karte,
body.r2b-skin-atelier .r2b__termin-embed {
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06);
  border: none;
}
body.r2b-skin-atelier .r2b__aktuelles-card:hover,
body.r2b-skin-atelier .r2b__karriere-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.1);
}
body.r2b-skin-atelier .r2b__aktuelles-bild { border-radius: 16px 16px 0 0; }
body.r2b-skin-atelier .r2b__sec--cream { background: color-mix(in srgb, var(--c-primaer) 8%, #faf7f1); }
body.r2b-skin-atelier .r2b__leist-icon {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c-primaer) 10%, transparent);
  color: var(--c-primaer);
  border-radius: 50%;
  font-weight: 800;
}
body.r2b-skin-atelier .r2b__hero-cta:hover { transform: translateY(-3px) scale(1.02); }

/* ---------- Skin: Fullbleed ---------- */
/* Großes Hero-Bild mit Text-Overlay, dramatisch, klassisch */
body.r2b-skin-fullbleed .r2b__hero {
  background: var(--c-stone);
  padding: 0;
  min-height: 95vh;
  position: relative;
  overflow: hidden;
}
body.r2b-skin-fullbleed .r2b__hero-inner {
  grid-template-columns: 1fr;
  gap: 0;
  padding: 8rem 2rem 4rem;
  position: relative;
  z-index: 2;
  min-height: 95vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-width: 1200px;
}
body.r2b-skin-fullbleed .r2b__hero-text {
  max-width: 36ch;
  color: #fff;
}
body.r2b-skin-fullbleed .r2b__hero-eyebrow { color: #fff; opacity: 0.85; }
body.r2b-skin-fullbleed .r2b__hero-title {
  color: #fff;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  letter-spacing: -0.015em;
  max-width: 16ch;
}
body.r2b-skin-fullbleed .r2b__hero-subline { color: rgba(255, 255, 255, 0.85); max-width: 42ch; }
body.r2b-skin-fullbleed .r2b__hero-bild {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  z-index: 1;
}
body.r2b-skin-fullbleed .r2b__hero-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.7) 100%);
  pointer-events: none; /* Fix Sprint 4 P33: Edit-Klicks gehen durch zum Text darunter */
}
body.r2b-skin-fullbleed .r2b__hero-bild { pointer-events: none; }
body.r2b-skin-fullbleed .r2b__hero-text { position: relative; z-index: 3; }
body.r2b-skin-fullbleed .r2b__hero-bild img { width: 100%; height: 100%; object-fit: cover; }
body.r2b-skin-fullbleed .r2b__sec-title { font-style: italic; font-weight: 500; }
body.r2b-skin-fullbleed .r2b__leist-card,
body.r2b-skin-fullbleed .r2b__faq-item,
body.r2b-skin-fullbleed .r2b__karriere-card,
body.r2b-skin-fullbleed .r2b__aktuelles-card { border-radius: 8px; }

/* ---------- Skin: Two-Tone ---------- */
/* Kontrast-Hälften aus Brand-Farbe + Weiß, technisch-magazinig */
body.r2b-skin-two_tone .r2b__hero {
  background: linear-gradient(90deg, var(--c-primaer) 0%, var(--c-primaer) 50%, #fff 50%, #fff 100%);
  padding: 7rem 0;
  min-height: 80vh;
  position: relative;
}
body.r2b-skin-two_tone .r2b__hero-inner {
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
body.r2b-skin-two_tone .r2b__hero-text {
  color: var(--c-on-primaer, #fff);
  padding-right: 2rem;
}
body.r2b-skin-two_tone .r2b__hero-eyebrow { color: var(--c-on-primaer-mute, rgba(255,255,255,0.85)); }
body.r2b-skin-two_tone .r2b__hero-title {
  color: var(--c-on-primaer, #fff);
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
}
body.r2b-skin-two_tone .r2b__hero-subline { color: var(--c-on-primaer-mute, rgba(255,255,255,0.9)); }
body.r2b-skin-two_tone .r2b__hero-cta {
  background: var(--c-on-primaer, #fff);
  color: var(--c-primaer);
  border-radius: 4px;
  font-weight: 700;
}
body.r2b-skin-two_tone .r2b__hero-cta:hover { background: var(--c-cream); }
body.r2b-skin-two_tone .r2b__hero-bild {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  position: relative;
  /* Fallback-Pattern wenn kein Bild geladen ist — diagonale Streifen in Stone-Ton */
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, color-mix(in srgb, var(--c-text) 5%, transparent) 14px 15px),
    var(--c-cream);
}
body.r2b-skin-two_tone .r2b__hero-bild img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
/* Zentrierter Hinweis wenn Bild leer */
body.r2b-skin-two_tone .r2b__hero-bild::before {
  content: "Hier Bild hochladen";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: color-mix(in srgb, var(--c-text) 40%, transparent);
  z-index: 0;
}
body.r2b-skin-two_tone .r2b__sec-title { font-weight: 700; letter-spacing: -0.025em; }
body.r2b-skin-two_tone .r2b__eyebrow { font-weight: 700; }
body.r2b-skin-two_tone .r2b__leist-card,
body.r2b-skin-two_tone .r2b__faq-item,
body.r2b-skin-two_tone .r2b__karriere-card,
body.r2b-skin-two_tone .r2b__aktuelles-card { border-radius: 4px; box-shadow: none; border: 2px solid var(--c-text); }
body.r2b-skin-two_tone .r2b__leist-card:hover,
body.r2b-skin-two_tone .r2b__karriere-card:hover { border-color: var(--c-primaer); background: var(--c-cream); }
/* Two-Tone Akzent-Sektionen: dezent primaer-getönt statt fast-schwarz (P29-Fix für Lesbarkeit) */
body.r2b-skin-two_tone .r2b__sec--cream {
  background: color-mix(in srgb, var(--c-primaer) 6%, #f5f5f5);
  color: var(--c-text);
}
body.r2b-skin-two_tone .r2b__sec--cream .r2b__sec-title { color: var(--c-text); }
body.r2b-skin-two_tone .r2b__sec--cream .r2b__sec-lead { color: var(--c-mute); }
body.r2b-skin-two_tone .r2b__about-text p:first-of-type::first-letter { color: var(--c-primaer); }
body.r2b-skin-two_tone .r2b__leist-icon {
  background: var(--c-primaer);
  color: #fff;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-weight: 700;
}

/* Mobile-Anpassung für alle Skins */
@media (max-width: 900px) {
  body.r2b-skin-atelier .r2b__hero-inner { grid-template-columns: 1fr; }
  body.r2b-skin-two_tone .r2b__hero {
    background: var(--c-primaer);
  }
  body.r2b-skin-two_tone .r2b__hero-inner { grid-template-columns: 1fr; }
  body.r2b-skin-fullbleed .r2b__hero-inner { padding: 6rem 1.5rem 3rem; }
}

/* ============ Drag&Drop Sektion-Reorder (Sprint 4 P38) ============ */
.r2b-drag-handle { display: none; }
body[data-edit-mode="true"] [data-sektion] { position: relative; }
body[data-edit-mode="true"] .r2b-drag-handle {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--c-primaer);
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: 700;
  cursor: grab;
  z-index: 100;
  font-size: 12px;
  letter-spacing: 0.05em;
  opacity: 0;
  transition: opacity .15s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
body[data-edit-mode="true"] [data-sektion]:hover > .r2b-drag-handle { opacity: 0.95; }
body[data-edit-mode="true"] .r2b-drag-handle:active { cursor: grabbing; }
body[data-edit-mode="true"] [data-sektion].is-r2b-dragging { opacity: 0.4; }
body[data-edit-mode="true"] [data-sektion].is-r2b-drop-target {
  border-top: 4px solid var(--c-primaer);
  background: color-mix(in srgb, var(--c-primaer) 4%, transparent);
}

/* ============ Inline-Add/Remove Buttons (Sprint 4 P37) ============ */
.r2b-list-btn { display: none; }
body[data-edit-mode="true"] .r2b__list-item-wrap { position: relative; }
body[data-edit-mode="true"] .r2b-list-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform .15s ease, background-color .15s ease;
}
body[data-edit-mode="true"] .r2b-list-btn--remove {
  position: absolute;
  top: 8px; right: 8px;
  width: 28px; height: 28px;
  background: #d96666; color: #fff;
  border-radius: 50%;
  font-size: 18px;
  border: none;
  box-shadow: 0 4px 12px rgba(217, 102, 102, 0.35);
  z-index: 10;
  opacity: 0;
}
body[data-edit-mode="true"] .r2b__list-item-wrap:hover .r2b-list-btn--remove { opacity: 1; }
body[data-edit-mode="true"] .r2b-list-btn--remove:hover { background: #c44; transform: scale(1.08); }
body[data-edit-mode="true"] .r2b-list-btn--add {
  display: flex;
  width: 100%;
  padding: 1rem 1.25rem;
  background: transparent;
  color: var(--c-primaer);
  border: 2px dashed color-mix(in srgb, var(--c-primaer) 40%, transparent);
  border-radius: 4px;
  margin-top: 1rem;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
body[data-edit-mode="true"] .r2b-list-btn--add:hover {
  border-color: var(--c-primaer);
  background: color-mix(in srgb, var(--c-primaer) 8%, transparent);
}

/* ============ Inline-Edit (Sprint 4 P32, nur im Edit-Mode aktiv) ============ */
body[data-edit-mode="true"] .r2b-inline-edit {
  outline: 1px dashed transparent;
  outline-offset: 4px;
  transition: outline-color .15s ease, background-color .15s ease;
  border-radius: 2px;
  cursor: text;
}
body[data-edit-mode="true"] .r2b-inline-edit:hover {
  outline-color: color-mix(in srgb, var(--c-primaer) 60%, transparent);
  background-color: color-mix(in srgb, var(--c-primaer) 6%, transparent);
}
body[data-edit-mode="true"] .r2b-inline-edit:focus {
  outline: 2px solid var(--c-primaer);
  outline-offset: 4px;
  background-color: color-mix(in srgb, var(--c-primaer) 10%, transparent);
}
/* Empty State: leerer Text bekommt Hint via ::before (verhindert collapse) */
body[data-edit-mode="true"] .r2b-inline-edit:empty::before {
  content: "Klicken zum Editieren";
  color: color-mix(in srgb, var(--c-text) 30%, transparent);
  font-style: italic;
}

/* ============ Click-to-Edit-Outline (nur im iframe-Mode aktiv) ============ */
body[data-edit-mode="true"] [data-sektion]:hover {
  outline: 2px dashed var(--c-primaer);
  outline-offset: -2px;
  cursor: pointer;
}
body[data-edit-mode="true"] [data-sektion].is-edit-active {
  outline: 2px solid var(--c-primaer);
  outline-offset: -2px;
}

/* ============ Print ============ */
@media print {
  body { font-size: 11pt; }
  .r2b__nav, .r2b__cookie, .r2b__form, .r2b__hero-cta, .r2b__nav-cta, .r2b__gal-arrow, .r2b__gal-filter, .r2b__lightbox, .r2b__livechat-btn { display: none !important; }
  .r2b__hero { min-height: 0; padding: 2rem 0; }
  .r2b__sec { padding: 1.5rem 0; page-break-inside: avoid; }
  .r2b__footer { background: none; color: var(--c-text); border-top: 1px solid var(--c-text); }
  .r2b__reveal { opacity: 1; transform: none; }
  .r2b__gal-track { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-flow: row; overflow: visible; }
}
</style>
</head>
<body class="{{computed.body_class}}" data-reveal="{{computed.reveal_variant}}">

<header class="r2b__nav" id="r2b-nav">
  <div class="r2b__nav-logo">
    {{#if dossier.identitaet.logo.primaer}}
    <img src="{{dossier.identitaet.logo.primaer}}" alt="{{dossier.stamm.firma}}">
    {{/if}}
    <span class="r2b__nav-logo-text">{{dossier.stamm.firma_kurz}}</span>
  </div>
  <nav class="r2b__nav-links">
    <a href="#ueber">Über uns</a>
    <a href="#leistungen">Leistungen</a>
    {{#if computed.galerie_aktiv}}<a href="#galerie">Galerie</a>{{/if}}
    <a href="#referenzen">Referenzen</a>
    <a href="#kontakt">Kontakt</a>
  </nav>
  <a href="#kontakt" class="r2b__nav-cta">{{computed.nav_cta_text}}</a>
</header>

<section class="r2b__hero" data-sektion="hero" data-bg-override="{{computed.sektion_bg_hero}}" id="hero">
  <div class="r2b__hero-inner">
    <div class="r2b__hero-text r2b__reveal">
      <span class="r2b__hero-eyebrow" data-edit-path="computed.hero.eyebrow">{{computed.hero.eyebrow}}</span>
      <h1 class="r2b__hero-title r2b__stagger" data-edit-path="computed.hero.headline">{{computed.hero.headline}}</h1>
      <p class="r2b__hero-subline" data-edit-path="computed.hero.subline">{{computed.hero.subline}}</p>
      <a href="{{computed.hero.cta_link}}" class="r2b__hero-cta" data-track="cta_click_hero">
        <span data-edit-path="computed.hero.cta_text">{{computed.hero.cta_text}}</span> <span>→</span>
      </a>
      {{#if computed.hero.has_stats}}
      <div class="r2b__hero-stats" data-stats-container>
        {{#each computed.hero.stats}}
        {{#if this.wert}}
        <div class="r2b__hero-stat">
          <span class="r2b__hero-stat-wert" data-count-target="{{this.wert}}" data-count-suffix="{{this.suffix}}">0{{this.suffix}}</span>
          <span class="r2b__hero-stat-label">{{this.label}}</span>
        </div>
        {{/if}}
        {{/each}}
      </div>
      {{/if}}
    </div>
    <div class="r2b__hero-bild r2b__reveal r2b__reveal--delay-1">
      {{#if computed.hero.bild_url}}
      <img src="{{computed.hero.bild_url}}" alt="{{computed.hero.bild_alt}}" data-img-path="slot.hero.bild_url">
      {{/if}}
    </div>
  </div>
</section>

<section class="r2b__sec r2b__sec--cream" data-sektion="ueber_uns" data-bg-override="{{computed.sektion_bg_ueber_uns}}" id="ueber">
  <div class="r2b__wrap">
    <div class="r2b__sec-head r2b__reveal">
      <span class="r2b__eyebrow" data-edit-path="computed.ueber_uns.eyebrow">{{computed.ueber_uns.eyebrow}}</span>
      <h2 class="r2b__sec-title" data-edit-path="computed.ueber_uns.headline">{{computed.ueber_uns.headline}}</h2>
    </div>
    <div class="r2b__about-grid">
      {{#if computed.ueber_uns.bild_url}}
      <div class="r2b__about-bild r2b__reveal r2b__reveal--delay-1">
        <img src="{{computed.ueber_uns.bild_url}}" alt="{{computed.ueber_uns.bild_alt}}" data-img-path="slot.ueber_uns.bild_url">
      </div>
      {{/if}}
      <div class="r2b__about-text r2b__reveal r2b__reveal--delay-2">
        {{#each computed.ueber_uns.text_blocks}}
        <p data-edit-path="computed.ueber_uns.text_blocks.{{__index__}}">{{this}}</p>
        {{/each}}
      </div>
    </div>
  </div>
</section>

{{#if computed.marquee_aktiv}}
<section class="r2b__marquee" data-sektion="marquee" aria-hidden="true">
  <div class="r2b__marquee-track">
    {{#each computed.marquee.items_double}}
    <span class="r2b__marquee-item">{{this}}</span>
    <span class="r2b__marquee-dot">·</span>
    {{/each}}
  </div>
</section>
{{/if}}

<section class="r2b__sec" data-sektion="leistungen" data-bg-override="{{computed.sektion_bg_leistungen}}" id="leistungen">
  <div class="r2b__wrap">
    <div class="r2b__sec-head r2b__reveal">
      <span class="r2b__eyebrow" data-edit-path="computed.leistungen.eyebrow">{{computed.leistungen.eyebrow}}</span>
      <h2 class="r2b__sec-title" data-edit-path="computed.leistungen.headline">{{computed.leistungen.headline}}</h2>
      {{#if computed.leistungen.subline}}<p class="r2b__sec-lead" data-edit-path="computed.leistungen.subline">{{computed.leistungen.subline}}</p>{{/if}}
    </div>
    <div class="r2b__leist">
      {{#each computed.leistungen.karten}}<div class="r2b__list-item-wrap">
      <article class="r2b__leist-card r2b__reveal">
        <div class="r2b__leist-icon">{{this.num}}</div>
        <h3 data-edit-path="computed.leistungen.karten.{{__index__}}.titel">{{this.titel}}</h3>
        <p data-edit-path="computed.leistungen.karten.{{__index__}}.kurzbeschreibung">{{this.kurzbeschreibung}}</p>
      </article><button type="button" class="r2b-list-btn r2b-list-btn--remove" data-list-remove="slot.leistungen.karten" data-list-index="{{__index__}}" title="Karte entfernen">×</button></div>
      {{/each}}
      <button type="button" class="r2b-list-btn r2b-list-btn--add" data-list-add="slot.leistungen.karten" data-list-default-type="leistungen">+ Leistung hinzufügen</button>
    </div>
  </div>
</section>

{{#if computed.galerie_aktiv}}
<section class="r2b__sec r2b__sec--cream" data-sektion="galerie" data-bg-override="{{computed.sektion_bg_galerie}}" id="galerie">
  <div class="r2b__wrap">
    <div class="r2b__sec-head r2b__reveal">
      <span class="r2b__eyebrow" data-edit-path="computed.galerie.eyebrow">{{computed.galerie.eyebrow}}</span>
      <h2 class="r2b__sec-title" data-edit-path="computed.galerie.headline">{{computed.galerie.headline}}</h2>
      {{#if computed.galerie.subline}}<p class="r2b__sec-lead" data-edit-path="computed.galerie.subline">{{computed.galerie.subline}}</p>{{/if}}
    </div>
    {{#if computed.galerie.has_kategorien}}
    <div class="r2b__gal-head r2b__reveal">
      <div class="r2b__gal-filter" role="tablist" aria-label="Kategorie filtern">
        <button type="button" data-gal-filter="*" aria-pressed="true">Alle</button>
        {{#each computed.galerie.kategorien}}
        <button type="button" data-gal-filter="{{this.id}}" aria-pressed="false">{{this.label}}</button>
        {{/each}}
      </div>
    </div>
    {{/if}}
    <div class="r2b__gal-stage r2b__reveal r2b__reveal--delay-2">
      <button type="button" class="r2b__gal-arrow r2b__gal-arrow--prev" aria-label="Zurueck">‹</button>
      <div class="r2b__gal-track" id="r2b-gal-track">
        {{#each computed.galerie.bilder}}
        <figure class="r2b__gal-card" data-gal-cat="{{this.kategorie}}" data-gal-idx="{{this.idx}}" data-gal-src="{{this.src}}" data-gal-cap="{{this.caption_safe}}">
          <img src="{{this.src}}" alt="{{this.alt}}" loading="lazy">
          {{#if this.caption}}<figcaption>{{this.caption}}</figcaption>{{/if}}
        </figure>
        {{/each}}
      </div>
      <button type="button" class="r2b__gal-arrow r2b__gal-arrow--next" aria-label="Weiter">›</button>
    </div>
  </div>
</section>
{{/if}}

{{#if computed.referenzen}}
<section class="r2b__sec" data-sektion="referenzen" data-bg-override="{{computed.sektion_bg_referenzen}}" id="referenzen">
  <div class="r2b__wrap">
    <div class="r2b__sec-head r2b__reveal">
      <span class="r2b__eyebrow">{{computed.refs_eyebrow}}</span>
      <h2 class="r2b__sec-title">{{computed.refs_headline}}</h2>
    </div>
    <div class="r2b__refs">
      {{#each computed.referenzen}}
      <article class="r2b__ref r2b__reveal">
        <div class="r2b__ref-pair {{#if this.has_vorher_nachher}}r2b__ref-pair--double{{else}}r2b__ref-pair--single{{/if}}">
          {{#if this.has_vorher_nachher}}
          <figure>
            <img src="{{this.bilder.vorher}}" alt="Vorher: {{this.titel}}" loading="lazy">
            <figcaption>Vorher</figcaption>
          </figure>
          <figure>
            <img src="{{this.bilder.nachher}}" alt="Nachher: {{this.titel}}" loading="lazy">
            <figcaption>Nachher</figcaption>
          </figure>
          {{else}}
          <figure>
            <img src="{{this.bilder.hauptbild}}" alt="{{this.titel}}" loading="lazy">
          </figure>
          {{/if}}
        </div>
        <div class="r2b__ref-meta">
          <h3>{{this.titel}}</h3>
          {{#if this.kunden_zitat}}<blockquote class="r2b__ref-zitat">„{{this.kunden_zitat}}"</blockquote>{{/if}}
          {{#if this.has_meta}}
          <div class="r2b__ref-tags">
            {{#if this.auftragswert_fmt}}<span>{{this.auftragswert_fmt}}</span>{{/if}}
            {{#if this.auftragsdauer_fmt}}<span>{{this.auftragsdauer_fmt}}</span>{{/if}}
          </div>
          {{/if}}
        </div>
      </article>
      {{/each}}
    </div>
  </div>
</section>
{{/if}}

{{#if computed.logos_aktiv}}
<section class="r2b__logos-sec" data-sektion="logos" data-bg-override="{{computed.sektion_bg_logos}}" id="logos">
  <div class="r2b__wrap">
    {{#if computed.logos.eyebrow}}<div class="r2b__logos-eyebrow">{{computed.logos.eyebrow}}</div>{{/if}}
    {{#if computed.logos.headline}}<h2 class="r2b__logos-headline">{{computed.logos.headline}}</h2>{{/if}}
    {{#if computed.logos.has_items}}
    <div class="r2b__logos-marquee">
      <div class="r2b__logos-track">
        {{#each computed.logos.items_double}}
        <div class="r2b__logos-item"><img src="{{this.src}}" alt="{{this.alt}}" loading="lazy"></div>
        {{/each}}
      </div>
    </div>
    {{else}}
    <div class="r2b__logos-empty">
      <strong>Hier erscheinen Kunden- oder Partner-Logos</strong>
      <p>Im Slot-Editor unter „Logos" mehrere Bilder hochladen, um das Vertrauensband zu aktivieren.</p>
    </div>
    {{/if}}
  </div>
</section>
{{/if}}

{{#if computed.vorher_nachher_aktiv}}
<section class="r2b__sec r2b__sec--cream" data-sektion="vorher_nachher" data-bg-override="{{computed.sektion_bg_vorher_nachher}}" id="vorher-nachher">
  <div class="r2b__wrap">
    <div class="r2b__sec-head r2b__reveal">
      <span class="r2b__eyebrow" data-edit-path="computed.vorher_nachher.eyebrow">{{computed.vorher_nachher.eyebrow}}</span>
      <h2 class="r2b__sec-title" data-edit-path="computed.vorher_nachher.headline">{{computed.vorher_nachher.headline}}</h2>
      {{#if computed.vorher_nachher.subline}}<p class="r2b__sec-lead" data-edit-path="computed.vorher_nachher.subline">{{computed.vorher_nachher.subline}}</p>{{/if}}
    </div>
    {{#if computed.vorher_nachher.has_paare}}
    <div class="r2b__vn-grid">
      {{#each computed.vorher_nachher.paare}}
      <div class="r2b__vn-card r2b__reveal">
        <div class="r2b__vn-slider" data-vn-slider>
          <img class="r2b__vn-img r2b__vn-img--nachher" src="{{this.nachher}}" alt="Nachher: {{this.label}}" loading="lazy">
          <div class="r2b__vn-clip" data-vn-clip>
            <img class="r2b__vn-img r2b__vn-img--vorher" src="{{this.vorher}}" alt="Vorher: {{this.label}}" loading="lazy">
          </div>
          <div class="r2b__vn-handle" data-vn-handle>
            <div class="r2b__vn-handle-line"></div>
            <div class="r2b__vn-handle-knob"><span>↔</span></div>
          </div>
          <div class="r2b__vn-tag r2b__vn-tag--vorher">Vorher</div>
          <div class="r2b__vn-tag r2b__vn-tag--nachher">Nachher</div>
        </div>
        {{#if this.label}}<div class="r2b__vn-label" data-edit-path="computed.vorher_nachher.paare.{{__index__}}.label">{{this.label}}</div>{{/if}}
      </div>
      {{/each}}
    </div>
    {{else}}
    <div class="r2b__vn-empty r2b__reveal">
      <strong>Vorher-Nachher-Paare fehlen noch</strong>
      <p>Im Markendossier-Editor unter Asset-Pool Bilder mit Typ „Vorher/Nachher" hinterlegen — diese erscheinen dann automatisch als interaktiver Slider.</p>
    </div>
    {{/if}}
  </div>
</section>
{{/if}}

{{#if computed.testimonials_aktiv}}
<section class="r2b__sec" data-sektion="testimonials" data-bg-override="{{computed.sektion_bg_testimonials}}" id="testimonials">
  <div class="r2b__wrap">
    <div class="r2b__sec-head r2b__reveal">
      <span class="r2b__eyebrow" data-edit-path="computed.testimonials.eyebrow">{{computed.testimonials.eyebrow}}</span>
      <h2 class="r2b__sec-title" data-edit-path="computed.testimonials.headline">{{computed.testimonials.headline}}</h2>
    </div>
    {{#if computed.testimonials.has_stimmen}}
    <div class="r2b__test-grid">
      {{#each computed.testimonials.stimmen}}<div class="r2b__list-item-wrap">
      <article class="r2b__test-card r2b__reveal">
        <div class="r2b__test-stars">
          {{#each this.sterne_array}}<span class="r2b__test-star">★</span>{{/each}}
        </div>
        <blockquote class="r2b__test-quote">„<span data-edit-path="computed.testimonials.stimmen.{{__index__}}.text">{{this.text}}</span>"</blockquote>
        <div class="r2b__test-author">
          {{#if this.foto_url}}<div class="r2b__test-foto"><img src="{{this.foto_url}}" alt="{{this.name}}" loading="lazy"></div>{{/if}}
          <div class="r2b__test-meta">
            {{#if this.name}}<div class="r2b__test-name" data-edit-path="computed.testimonials.stimmen.{{__index__}}.name">{{this.name}}</div>{{/if}}
            {{#if this.position}}<div class="r2b__test-position" data-edit-path="computed.testimonials.stimmen.{{__index__}}.position">{{this.position}}</div>{{/if}}
          </div>
        </div>
      </article><button type="button" class="r2b-list-btn r2b-list-btn--remove" data-list-remove="slot.testimonials.stimmen" data-list-index="{{__index__}}" title="Stimme entfernen">×</button></div>
      {{/each}}
      <button type="button" class="r2b-list-btn r2b-list-btn--add" data-list-add="slot.testimonials.stimmen" data-list-default-type="testimonials">+ Stimme hinzufügen</button>
    </div>
    {{else}}
    <div class="r2b__test-empty r2b__reveal">
      <strong>Noch keine Kundenstimmen hinterlegt</strong>
      <p>Im Markendossier-Editor unter Asset-Pool das Feld „Kunden-Zitat" pro Projekt befüllen — diese erscheinen dann automatisch als Testimonial mit 5-Sterne-Bewertung.</p>
    </div>
    {{/if}}
  </div>
</section>
{{/if}}

{{#if computed.team_aktiv}}
<section class="r2b__sec r2b__sec--cream" data-sektion="team" data-bg-override="{{computed.sektion_bg_team}}" id="team">
  <div class="r2b__wrap">
    <div class="r2b__sec-head r2b__reveal">
      <span class="r2b__eyebrow" data-edit-path="computed.team.eyebrow">{{computed.team.eyebrow}}</span>
      <h2 class="r2b__sec-title" data-edit-path="computed.team.headline">{{computed.team.headline}}</h2>
    </div>
    <div class="r2b__team-grid">
      {{#each computed.team.mitglieder}}<div class="r2b__list-item-wrap">
      <div class="r2b__team-card r2b__reveal">
        {{#if this.bild_url}}<div class="r2b__team-bild"><img src="{{this.bild_url}}" alt="{{this.name}}" data-img-path="slot.team.mitglieder.{{__index__}}.bild_url"></div>{{/if}}
        <div>
          <div class="r2b__team-name" data-edit-path="computed.team.mitglieder.{{__index__}}.name">{{this.name}}</div>
          {{#if this.position}}<div class="r2b__team-position" data-edit-path="computed.team.mitglieder.{{__index__}}.position">{{this.position}}</div>{{/if}}
        </div>
        {{#if this.kurz_text}}<p class="r2b__team-text">{{this.kurz_text}}</p>{{/if}}
      </div>
      {{/each}}
    </div>
  </div>
</section>
{{/if}}

{{#if computed.standort_aktiv}}
<section class="r2b__sec" data-sektion="standort" data-bg-override="{{computed.sektion_bg_standort}}" id="standort">
  <div class="r2b__wrap">
    <div class="r2b__sec-head r2b__reveal">
      <span class="r2b__eyebrow" data-edit-path="computed.standort.eyebrow">{{computed.standort.eyebrow}}</span>
      <h2 class="r2b__sec-title" data-edit-path="computed.standort.headline">{{computed.standort.headline}}</h2>
    </div>
    <div class="r2b__standort-grid">
      <div class="r2b__standort-karte r2b__reveal">
        {{#if computed.standort.karte_iframe}}
        <iframe src="{{computed.standort.karte_url}}" loading="lazy" title="Standort-Karte"></iframe>
        {{/if}}
        {{#if computed.standort.karte_bild}}
        <img src="{{computed.standort.karte_bild_url}}" alt="Standort {{computed.standort.adresse}}" loading="lazy">
        {{/if}}
        {{#if computed.standort.karte_platzhalter}}
        <div class="r2b__standort-karte-platzhalter">
          <strong>Karte wird automatisch gesetzt</strong>
          <p>Sobald PLZ + Ort in der Adresse stehen, erscheint hier eine interaktive OpenStreetMap-Karte. Alternativ kann ein eigenes Foto als Karte hochgeladen werden.</p>
        </div>
        {{/if}}
      </div>
      <div class="r2b__standort-info r2b__reveal r2b__reveal--delay-1">
        {{#if computed.standort.adresse}}
        <div>
          <h3>Adresse</h3>
          <p data-edit-path="computed.standort.adresse">{{computed.standort.adresse}}</p>
        </div>
        {{/if}}
        {{#if computed.standort.anfahrt_text}}
        <div>
          <h3>Anfahrt</h3>
          <p data-edit-path="computed.standort.anfahrt_text">{{computed.standort.anfahrt_text}}</p>
        </div>
        {{/if}}
      </div>
    </div>
  </div>
</section>
{{/if}}

{{#if computed.faq_aktiv}}
<section class="r2b__sec r2b__sec--cream" data-sektion="faq" data-bg-override="{{computed.sektion_bg_faq}}" id="faq">
  <div class="r2b__wrap">
    <div class="r2b__sec-head r2b__reveal">
      <span class="r2b__eyebrow" data-edit-path="computed.faq.eyebrow">{{computed.faq.eyebrow}}</span>
      <h2 class="r2b__sec-title" data-edit-path="computed.faq.headline">{{computed.faq.headline}}</h2>
    </div>
    <div class="r2b__faq-list r2b__reveal r2b__reveal--delay-1">
      {{#each computed.faq.eintraege}}<div class="r2b__list-item-wrap">
      <details class="r2b__faq-item">
        <summary><span data-edit-path="computed.faq.eintraege.{{__index__}}.frage">{{this.frage}}</span></summary>
        <div class="r2b__faq-answer">{{this.antwort}}</div>
      </details>
      {{/each}}
    </div>
  </div>
</section>
{{/if}}

{{#if computed.aktuelles_aktiv}}
<section class="r2b__sec r2b__sec--cream" data-sektion="aktuelles" data-bg-override="{{computed.sektion_bg_aktuelles}}" id="aktuelles">
  <div class="r2b__wrap">
    <div class="r2b__sec-head r2b__reveal">
      <span class="r2b__eyebrow" data-edit-path="computed.aktuelles.eyebrow">{{computed.aktuelles.eyebrow}}</span>
      <h2 class="r2b__sec-title" data-edit-path="computed.aktuelles.headline">{{computed.aktuelles.headline}}</h2>
    </div>
    {{#if computed.aktuelles.has_beitraege}}
    <div class="r2b__aktuelles-grid">
      {{#each computed.aktuelles.beitraege}}<div class="r2b__list-item-wrap">
      <article class="r2b__aktuelles-card r2b__reveal">
        {{#if this.bild_url}}<div class="r2b__aktuelles-bild"><img src="{{this.bild_url}}" alt="{{this.titel}}" loading="lazy" data-img-path="slot.aktuelles.beitraege.{{__index__}}.bild_url"></div>{{/if}}
        <div class="r2b__aktuelles-meta">
          {{#if this.datum}}<span class="r2b__aktuelles-datum" data-edit-path="computed.aktuelles.beitraege.{{__index__}}.datum">{{this.datum}}</span>{{/if}}
          {{#if this.kategorie}}<span class="r2b__aktuelles-kategorie" data-edit-path="computed.aktuelles.beitraege.{{__index__}}.kategorie">{{this.kategorie}}</span>{{/if}}
        </div>
        <h3 class="r2b__aktuelles-titel" data-edit-path="computed.aktuelles.beitraege.{{__index__}}.titel">{{this.titel}}</h3>
        {{#if this.auszug}}<p class="r2b__aktuelles-auszug" data-edit-path="computed.aktuelles.beitraege.{{__index__}}.auszug">{{this.auszug}}</p>{{/if}}
      </article><button type="button" class="r2b-list-btn r2b-list-btn--remove" data-list-remove="slot.aktuelles.beitraege" data-list-index="{{__index__}}" title="Beitrag entfernen">×</button></div>
      {{/each}}
      <button type="button" class="r2b-list-btn r2b-list-btn--add" data-list-add="slot.aktuelles.beitraege" data-list-default-type="aktuelles">+ Beitrag hinzufügen</button>
    </div>
    {{else}}
    <div class="r2b__aktuelles-empty r2b__reveal">
      <strong>Bald gibt es hier Neues zu lesen.</strong>
      <p>Sobald wir den ersten Beitrag eingestellt haben, erscheint er an dieser Stelle.</p>
    </div>
    {{/if}}
  </div>
</section>
{{/if}}

{{#if computed.karriere_aktiv}}
<section class="r2b__sec r2b__sec--cream" data-sektion="karriere" data-bg-override="{{computed.sektion_bg_karriere}}" id="karriere">
  <div class="r2b__wrap">
    <div class="r2b__sec-head r2b__reveal">
      <span class="r2b__eyebrow" data-edit-path="computed.karriere.eyebrow">{{computed.karriere.eyebrow}}</span>
      <h2 class="r2b__sec-title" data-edit-path="computed.karriere.headline">{{computed.karriere.headline}}</h2>
      {{#if computed.karriere.subline}}<p class="r2b__sec-lead" data-edit-path="computed.karriere.subline">{{computed.karriere.subline}}</p>{{/if}}
    </div>
    {{#if computed.karriere.has_stellen}}
    <div class="r2b__karriere-grid">
      {{#each computed.karriere.stellen}}<div class="r2b__list-item-wrap">
      <article class="r2b__karriere-card r2b__reveal">
        <h3 class="r2b__karriere-titel" data-edit-path="computed.karriere.stellen.{{__index__}}.titel">{{this.titel}}</h3>
        {{#if this.beschaeftigung}}<div class="r2b__karriere-typ" data-edit-path="computed.karriere.stellen.{{__index__}}.beschaeftigung">{{this.beschaeftigung}}</div>{{/if}}
        {{#if this.beschreibung}}<p class="r2b__karriere-text" data-edit-path="computed.karriere.stellen.{{__index__}}.beschreibung">{{this.beschreibung}}</p>{{/if}}
        {{#if this.anforderungen}}<div class="r2b__karriere-anf"><strong>Was wir suchen:</strong> <span data-edit-path="computed.karriere.stellen.{{__index__}}.anforderungen">{{this.anforderungen}}</span></div>{{/if}}
      </article><button type="button" class="r2b-list-btn r2b-list-btn--remove" data-list-remove="slot.karriere.stellen" data-list-index="{{__index__}}" title="Stelle entfernen">×</button></div>
      {{/each}}
      <button type="button" class="r2b-list-btn r2b-list-btn--add" data-list-add="slot.karriere.stellen" data-list-default-type="karriere">+ Stelle hinzufügen</button>
    </div>
    {{/if}}
    <div class="r2b__karriere-form r2b__reveal r2b__reveal--delay-1">
      <h3 class="r2b__karriere-form-headline">Initiativ-Bewerbung</h3>
      <p class="r2b__karriere-form-lead">Auch ohne passende Stelle — wir freuen uns über Profile, die zu unserem Team passen.</p>
      <form class="r2b__form" id="r2b-karriere-form">
        <div class="r2b__form-row"><label for="kb-name">Name</label><input type="text" id="kb-name" name="name" required></div>
        <div class="r2b__form-row"><label for="kb-email">E-Mail</label><input type="email" id="kb-email" name="email" required></div>
        <div class="r2b__form-row"><label for="kb-telefon">Telefon (optional)</label><input type="tel" id="kb-telefon" name="telefon"></div>
        <div class="r2b__form-row"><label for="kb-stelle">Wunsch-Position</label><input type="text" id="kb-stelle" name="stelle" placeholder="z.B. Geselle, Auszubildender, …"></div>
        <div class="r2b__form-row"><label for="kb-nachricht">Kurz zu Dir</label><textarea id="kb-nachricht" name="nachricht" required></textarea></div>
        <button type="submit" class="r2b__form-submit">Bewerbung senden</button>
      </form>
    </div>
  </div>
</section>
{{/if}}

{{#if computed.termin_aktiv}}
<section class="r2b__sec" data-sektion="termin" data-bg-override="{{computed.sektion_bg_termin}}" id="termin">
  <div class="r2b__wrap">
    <div class="r2b__sec-head r2b__reveal">
      <span class="r2b__eyebrow" data-edit-path="computed.termin.eyebrow">{{computed.termin.eyebrow}}</span>
      <h2 class="r2b__sec-title" data-edit-path="computed.termin.headline">{{computed.termin.headline}}</h2>
      {{#if computed.termin.subline}}<p class="r2b__sec-lead" data-edit-path="computed.termin.subline">{{computed.termin.subline}}</p>{{/if}}
    </div>
    {{#if computed.termin.embed_url}}
    <div class="r2b__termin-embed r2b__reveal">
      <iframe src="{{computed.termin.embed_url}}" loading="lazy" title="Termin-Buchung" allow="camera; microphone; clipboard-write"></iframe>
    </div>
    {{else}}
    <div class="r2b__termin-platzhalter r2b__reveal">
      <strong>Termin-Buchung wird aktiviert sobald die Cal.com- oder Calendly-Embed-URL gesetzt ist.</strong>
      <p>Cal.com-Account anlegen, Event-Type erstellen, Embed-Link kopieren und im Slot-Editor unter „Termin-Buchung" eintragen.</p>
    </div>
    {{/if}}
  </div>
</section>
{{/if}}

<section class="r2b__sec" data-sektion="kontakt" data-bg-override="{{computed.sektion_bg_kontakt}}" id="kontakt">
  <div class="r2b__wrap">
    <div class="r2b__sec-head r2b__reveal">
      <span class="r2b__eyebrow" data-edit-path="computed.kontakt.eyebrow">{{computed.kontakt.eyebrow}}</span>
      <h2 class="r2b__sec-title" data-edit-path="computed.kontakt.headline">{{computed.kontakt.headline}}</h2>
      {{#if computed.kontakt.subline}}<p class="r2b__sec-lead" data-edit-path="computed.kontakt.subline">{{computed.kontakt.subline}}</p>{{/if}}
    </div>
    <div class="r2b__kontakt-grid">
      <div class="r2b__kontakt-info r2b__reveal">
        {{#if computed.kontakt.telefon}}
        <div class="r2b__kontakt-info-block">
          <span class="r2b__kontakt-label">Telefon</span>
          <div class="r2b__kontakt-value"><a href="tel:{{computed.kontakt.telefon_clean}}">{{computed.kontakt.telefon}}</a></div>
        </div>
        {{/if}}
        {{#if computed.kontakt.email}}
        <div class="r2b__kontakt-info-block">
          <span class="r2b__kontakt-label">E-Mail</span>
          <div class="r2b__kontakt-value"><a href="mailto:{{computed.kontakt.email}}">{{computed.kontakt.email}}</a></div>
        </div>
        {{/if}}
        {{#if computed.kontakt.adresse}}
        <div class="r2b__kontakt-info-block">
          <span class="r2b__kontakt-label">Adresse</span>
          <div class="r2b__kontakt-value">{{computed.kontakt.adresse}}</div>
        </div>
        {{/if}}
        {{#if computed.kontakt.has_oeffnungszeiten}}
        <div class="r2b__kontakt-info-block">
          <span class="r2b__kontakt-label">Öffnungszeiten</span>
          <div class="r2b__kontakt-value">
            {{#each computed.kontakt.oeffnungszeiten}}
            <div>{{this.tag}}: {{this.zeit}}</div>
            {{/each}}
          </div>
        </div>
        {{/if}}
      </div>
      {{#if computed.kontakt.formular_aktiv}}
      <form class="r2b__form r2b__reveal r2b__reveal--delay-1" id="r2b-form">
        <div class="r2b__form-row">
          <label for="f-name">Name</label>
          <input type="text" id="f-name" name="name" required>
        </div>
        <div class="r2b__form-row">
          <label for="f-email">E-Mail</label>
          <input type="email" id="f-email" name="email" required>
        </div>
        <div class="r2b__form-row">
          <label for="f-telefon">Telefon (optional)</label>
          <input type="tel" id="f-telefon" name="telefon">
        </div>
        <div class="r2b__form-row">
          <label for="f-nachricht">Nachricht</label>
          <textarea id="f-nachricht" name="nachricht" required></textarea>
        </div>
        <button type="submit" class="r2b__form-submit">{{computed.kontakt.cta_text}}</button>
        <div class="r2b__form-success" id="form-success">Danke — wir melden uns innerhalb von 24 Stunden.</div>
        <div class="r2b__form-error" id="form-error"></div>
      </form>
      {{/if}}
    </div>
  </div>
</section>

<footer class="r2b__footer" data-sektion="footer" id="footer">
  <div class="r2b__wrap">
    <div class="r2b__footer-grid">
      <div>
        <h4 data-edit-path="computed.footer.firma_kurz">{{computed.footer.firma_kurz}}</h4>
        <p data-edit-path="computed.footer.claim">{{computed.footer.claim}}</p>
      </div>
      <div>
        <h4 data-edit-path="computed.footer.nav_titel">{{computed.footer.nav_titel}}</h4>
        <ul>
          <li><a href="#ueber">Über uns</a></li>
          <li><a href="#leistungen">Leistungen</a></li>
          {{#if computed.galerie_aktiv}}<li><a href="#galerie">Galerie</a></li>{{/if}}
          <li><a href="#referenzen">Referenzen</a></li>
          <li><a href="#kontakt">Kontakt</a></li>
        </ul>
      </div>
      <div>
        <h4 data-edit-path="computed.footer.kontakt_titel">{{computed.footer.kontakt_titel}}</h4>
        <ul>
          {{#if computed.kontakt.telefon}}<li><a href="tel:{{computed.kontakt.telefon_clean}}">{{computed.kontakt.telefon}}</a></li>{{/if}}
          {{#if computed.kontakt.email}}<li><a href="mailto:{{computed.kontakt.email}}">{{computed.kontakt.email}}</a></li>{{/if}}
        </ul>
      </div>
      <div>
        <h4 data-edit-path="computed.footer.rechtlich_titel">{{computed.footer.rechtlich_titel}}</h4>
        <ul>
          <li><a href="{{slot.urls.impressum}}">Impressum</a></li>
          <li><a href="{{slot.urls.datenschutz}}">Datenschutz</a></li>
        </ul>
      </div>
    </div>
    <div class="r2b__footer-bottom">
      <span data-edit-path="computed.footer.copyright_text">{{computed.footer.copyright_text}}</span>
      <span>{{computed.footer.signatur_text}}</span>
    </div>
  </div>
</footer>

<div class="r2b__cookie" id="r2b-cookie">
  <div class="r2b__cookie-text">Wir verwenden Cookies für Statistik und Marketing. Mit „Akzeptieren" stimmst Du der Verarbeitung zu.</div>
  <div class="r2b__cookie-btns">
    <button type="button" class="r2b__cookie-btn" data-consent="essential">Nur essentielle</button>
    <button type="button" class="r2b__cookie-btn r2b__cookie-btn--accept" data-consent="all">Akzeptieren</button>
  </div>
</div>

{{#if computed.galerie_aktiv}}
<div class="r2b__lightbox" id="r2b-lightbox" role="dialog" aria-modal="true" aria-label="Bild-Galerie">
  <button type="button" class="r2b__lightbox-btn r2b__lightbox-close" aria-label="Schliessen">×</button>
  <button type="button" class="r2b__lightbox-btn r2b__lightbox-prev" aria-label="Vorheriges Bild">‹</button>
  <img class="r2b__lightbox-img" id="r2b-lightbox-img" src="" alt="">
  <button type="button" class="r2b__lightbox-btn r2b__lightbox-next" aria-label="Naechstes Bild">›</button>
  <div class="r2b__lightbox-cap" id="r2b-lightbox-cap"></div>
</div>
{{/if}}

<script>
(function () {
  "use strict";

// ============ Reveal-Animation (defensiv: erst opt-in via .r2b-anim, dann IO) ============
  var allReveals = document.querySelectorAll(".r2b__reveal");
  if ("IntersectionObserver" in window) {
    document.documentElement.classList.add("r2b-anim");
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (e) { if (e.isIntersecting) { e.target.classList.add("is-visible"); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    allReveals.forEach(function (el) { io.observe(el); });
    // Safety-Timeout: falls IO im iframe nicht triggert, alles nach 1.2s sichtbar machen
    setTimeout(function () {
      allReveals.forEach(function (el) { if (!el.classList.contains("is-visible")) el.classList.add("is-visible"); });
    }, 1200);
  } else {
    allReveals.forEach(function (el) { el.classList.add("is-visible"); });
  }

// ============ Number-Counter im Hero (Wow #1) ============
  // Zählt Stats hoch wenn sichtbar. RAF-basiert für 60fps. Suffix bleibt erhalten.
  var statsContainer = document.querySelector("[data-stats-container]");
  if (statsContainer && "IntersectionObserver" in window) {
    var statTargets = statsContainer.querySelectorAll("[data-count-target]");
    function animateCounter(el, target, suffix) {
      var duration = 2200; // länger damit Counter sichtbar hochzählt
      var startDelay = 300; // kurze Pause damit User den Counter erst auf 0 sieht
      var startTime = null;
      var startVal = 0;
      function tick(now) {
        if (!startTime) startTime = now;
        var elapsed = now - startTime;
        if (elapsed < startDelay) { requestAnimationFrame(tick); return; }
        var t = Math.min((elapsed - startDelay) / duration, 1);
        // ease-out-quart für noch sanfteres Ankommen
        var eased = 1 - Math.pow(1 - t, 4);
        var current = Math.floor(startVal + (target - startVal) * eased);
        el.textContent = current + suffix;
        if (t < 1) requestAnimationFrame(tick); else el.textContent = target + suffix;
      }
      requestAnimationFrame(tick);
    }
    var statsIO = new IntersectionObserver(function (entries) {
      entries.forEach(function (e) {
        if (!e.isIntersecting) return;
        statTargets.forEach(function (st) {
          var target = parseInt(st.getAttribute("data-count-target"), 10);
          var suffix = st.getAttribute("data-count-suffix") || "";
          if (!isNaN(target)) animateCounter(st, target, suffix);
        });
        statsIO.unobserve(e.target);
      });
    }, { threshold: 0.5 });
    statsIO.observe(statsContainer);
  }

// ============ Hero-Headline-Stagger (Wow #3) ============
  // Splittet die Headline in <span class="r2b__stagger-word"> und animiert sie 60ms-staggered ein.
  // CSS-only über animation-delay (siehe @keyframes r2b-stagger-in).
  var staggerEl = document.querySelector(".r2b__stagger");
  if (staggerEl && !staggerEl.hasAttribute("data-stagger-done")) {
    var text = staggerEl.textContent;
    var words = text.split(/(\s+)/); // Trennzeichen behalten
    staggerEl.innerHTML = "";
    var wIdx = 0;
    words.forEach(function (w) {
      if (/^\s+$/.test(w)) { staggerEl.appendChild(document.createTextNode(w)); return; }
      var span = document.createElement("span");
      span.className = "r2b__stagger-word";
      span.style.animationDelay = (wIdx * 120) + "ms";
      span.textContent = w;
      staggerEl.appendChild(span);
      wIdx++;
    });
    staggerEl.setAttribute("data-stagger-done", "true");
  }

// ============ Vorher-Nachher-Slider (Sprint 4 P25) ============
  document.querySelectorAll("[data-vn-slider]").forEach(function (slider) {
    var clip = slider.querySelector("[data-vn-clip]");
    var handle = slider.querySelector("[data-vn-handle]");
    if (!clip || !handle) return;
    var dragging = false;
    function setPosFromEvent(clientX) {
      var rect = slider.getBoundingClientRect();
      var pct = Math.max(0, Math.min(100, ((clientX - rect.left) / rect.width) * 100));
      clip.style.width = pct + "%";
      handle.style.left = pct + "%";
    }
    slider.addEventListener("pointerdown", function (e) {
      dragging = true;
      slider.setPointerCapture(e.pointerId);
      setPosFromEvent(e.clientX);
    });
    slider.addEventListener("pointermove", function (e) {
      if (!dragging) return;
      setPosFromEvent(e.clientX);
    });
    slider.addEventListener("pointerup", function (e) {
      dragging = false;
      try { slider.releasePointerCapture(e.pointerId); } catch (err) {}
    });
    slider.addEventListener("pointercancel", function () { dragging = false; });
    // Keyboard-Support: Pfeil-Links/Rechts wenn fokussiert
    slider.tabIndex = 0;
    slider.addEventListener("keydown", function (e) {
      var cur = parseFloat(clip.style.width) || 50;
      if (e.key === "ArrowLeft") { e.preventDefault(); cur = Math.max(0, cur - 5); }
      else if (e.key === "ArrowRight") { e.preventDefault(); cur = Math.min(100, cur + 5); }
      else return;
      clip.style.width = cur + "%";
      handle.style.left = cur + "%";
    });
  });

// ============ Broken-Image-Handler: kaputte img verstecken ============
  function hideBroken(img) { img.classList.add("is-broken"); }
  document.querySelectorAll("img").forEach(function (img) {
    img.addEventListener("error", function () { hideBroken(img); });
    // bereits geladene Bilder: wenn naturalWidth 0, ist's broken
    if (img.complete && img.naturalWidth === 0 && img.getAttribute("src")) hideBroken(img);
  });

// ============ Click-to-Edit: postMessage an Parent bei Sektions-Klick ============
  if (window.parent !== window) {
    document.body.setAttribute("data-edit-mode", "true");
    document.querySelectorAll("[data-sektion]").forEach(function (sec) {
      sec.addEventListener("click", function (e) {
        // Form-Inputs, Links, Buttons, contenteditable-Targets sollen ihre normale Funktion behalten
        if (e.target.closest("a, button, input, textarea, select, [data-edit-path]")) return;
        document.querySelectorAll("[data-sektion]").forEach(function (s) { s.classList.remove("is-edit-active"); });
        sec.classList.add("is-edit-active");
        var sektName = sec.getAttribute("data-sektion");
        try {
          window.parent.postMessage({ type: "r2b-sektion-click", sektion: sektName }, "*");
        } catch (err) {}
      });
    });

// ============ Section-Reorder DOM-Apply nach Render (Sprint 4 P38) ============
    // Wendet section_order an nach Iframe-Render — falls Berater vorher reordered hat
    var savedOrder = (window.R2B_SECTION_ORDER && Array.isArray(window.R2B_SECTION_ORDER)) ? window.R2B_SECTION_ORDER : [];
    if (savedOrder.length > 0) {
      var allSecs = {};
      document.querySelectorAll("[data-sektion]").forEach(function (s) {
        allSecs[s.getAttribute("data-sektion")] = s;
      });
      var parentNode = null;
      savedOrder.forEach(function (name) {
        if (allSecs[name]) {
          if (!parentNode) parentNode = allSecs[name].parentNode;
          parentNode.appendChild(allSecs[name]);
        }
      });
    }

// ============ Drag&Drop Sektion-Reorder (Sprint 4 P38) ============
    var REORDERABLE = ["ueber_uns", "leistungen", "galerie", "referenzen", "logos", "vorher_nachher", "team", "testimonials", "standort", "faq", "aktuelles", "karriere", "termin"];
    document.querySelectorAll("[data-sektion]").forEach(function (sec) {
      var name = sec.getAttribute("data-sektion");
      if (REORDERABLE.indexOf(name) === -1) return;
      // Drag-Handle
      var handle = document.createElement("button");
      handle.type = "button";
      handle.className = "r2b-drag-handle";
      handle.innerHTML = "⠿ Verschieben";
      handle.title = "Sektion per Drag&Drop verschieben";
      sec.appendChild(handle);
      sec.setAttribute("draggable", "true");
      sec.addEventListener("dragstart", function (e) {
        if (e.target.closest("[data-edit-path], [data-img-path], [data-list-add], [data-list-remove]")) {
          e.preventDefault(); return;
        }
        sec.classList.add("is-r2b-dragging");
        e.dataTransfer.effectAllowed = "move";
        try { e.dataTransfer.setData("text/plain", name); } catch (err) {}
      });
      sec.addEventListener("dragend", function () {
        sec.classList.remove("is-r2b-dragging");
        document.querySelectorAll(".is-r2b-drop-target").forEach(function (s) { s.classList.remove("is-r2b-drop-target"); });
        // Neue Order ableiten + posten
        var order = [];
        document.querySelectorAll("[data-sektion]").forEach(function (s) {
          var n = s.getAttribute("data-sektion");
          if (REORDERABLE.indexOf(n) !== -1) order.push(n);
        });
        try {
          window.parent.postMessage({ type: "r2b-section-reorder", order: order }, "*");
        } catch (err) {}
      });
      sec.addEventListener("dragover", function (e) {
        e.preventDefault();
        e.dataTransfer.dropEffect = "move";
        sec.classList.add("is-r2b-drop-target");
      });
      sec.addEventListener("dragleave", function () {
        sec.classList.remove("is-r2b-drop-target");
      });
      sec.addEventListener("drop", function (e) {
        e.preventDefault();
        var draggedName = "";
        try { draggedName = e.dataTransfer.getData("text/plain"); } catch (err) {}
        var dragged = draggedName && document.querySelector('[data-sektion="' + draggedName + '"]');
        if (!dragged || dragged === sec) return;
        sec.parentNode.insertBefore(dragged, sec);
        sec.classList.remove("is-r2b-drop-target");
      });
    });

// ============ Inline-Add/Remove Buttons (Sprint 4 P37) ============
    document.querySelectorAll("[data-list-add]").forEach(function (btn) {
      btn.addEventListener("click", function (e) {
        e.stopPropagation();
        e.preventDefault();
        try {
          window.parent.postMessage({
            type: "r2b-list-add",
            path: btn.getAttribute("data-list-add"),
            defaultType: btn.getAttribute("data-list-default-type") || ""
          }, "*");
        } catch (err) {}
      });
    });
    document.querySelectorAll("[data-list-remove]").forEach(function (btn) {
      btn.addEventListener("click", function (e) {
        e.stopPropagation();
        e.preventDefault();
        if (!confirm("Eintrag wirklich entfernen?")) return;
        try {
          window.parent.postMessage({
            type: "r2b-list-remove",
            path: btn.getAttribute("data-list-remove"),
            index: parseInt(btn.getAttribute("data-list-index"), 10)
          }, "*");
        } catch (err) {}
      });
    });

// ============ Inline-Bild-Upload (Sprint 4 P36) ============
    document.querySelectorAll("[data-img-path]").forEach(function (img) {
      img.style.cursor = "pointer";
      img.title = "Klick um Bild zu ersetzen";
      img.addEventListener("mouseenter", function () { img.style.filter = "brightness(0.75)"; });
      img.addEventListener("mouseleave", function () { img.style.filter = ""; });
      img.addEventListener("click", function (e) {
        e.stopPropagation();
        e.preventDefault();
        var fi = document.createElement("input");
        fi.type = "file";
        fi.accept = "image/*";
        fi.style.display = "none";
        fi.addEventListener("change", function () {
          if (!fi.files || !fi.files[0]) return;
          var reader = new FileReader();
          reader.onload = function (ev) {
            var srcImg = new Image();
            srcImg.onload = function () {
              var maxW = 1600;
              var w = srcImg.width, h = srcImg.height;
              if (w > maxW) { h = h * (maxW / w); w = maxW; }
              var canvas = document.createElement("canvas");
              canvas.width = w; canvas.height = h;
              canvas.getContext("2d").drawImage(srcImg, 0, 0, w, h);
              var dataUrl = canvas.toDataURL("image/jpeg", 0.85);
              try {
                window.parent.postMessage({
                  type: "r2b-img-upload",
                  path: img.getAttribute("data-img-path"),
                  value: dataUrl
                }, "*");
              } catch (err) {}
            };
            srcImg.src = ev.target.result;
          };
          reader.readAsDataURL(fi.files[0]);
        });
        fi.click();
      });
    });

// ============ Inline-Edit (Sprint 4 P32) ============
    // Alle [data-edit-path]-Elemente werden contenteditable im Edit-Mode.
    // input → live-Update zu Parent (kein Rebuild). blur → Persist + Rebuild.
    document.querySelectorAll("[data-edit-path]").forEach(function (el) {
      el.setAttribute("contenteditable", "plaintext-only");
      el.setAttribute("spellcheck", "true");
      el.classList.add("r2b-inline-edit");
      var path = el.getAttribute("data-edit-path");
      // Klick → Section-Click verhindern + Fokus aufs Element
      el.addEventListener("click", function (e) { e.stopPropagation(); });
      el.addEventListener("focus", function () {
        try { window.parent.postMessage({ type: "r2b-text-focus", path: path }, "*"); } catch (err) {}
      });
      el.addEventListener("input", function () {
        try {
          window.parent.postMessage({
            type: "r2b-text-input",
            path: path,
            value: el.textContent
          }, "*");
        } catch (err) {}
      });
      el.addEventListener("blur", function () {
        try {
          window.parent.postMessage({
            type: "r2b-text-blur",
            path: path,
            value: el.textContent
          }, "*");
        } catch (err) {}
      });
      // Enter = blur (kein Newline in Headlines/Sublines)
      el.addEventListener("keydown", function (e) {
        if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); el.blur(); }
      });
    });
  }

// ============ Cookie-Consent ============
  var T = window.R2B_TRACKING || {};
  function getConsent() { try { return localStorage.getItem("r2b_consent") || "none"; } catch (e) { return "none"; } }
  function setConsent(v) { try { localStorage.setItem("r2b_consent", v); } catch (e) {} }
  var cookieBanner = document.getElementById("r2b-cookie");
  if (cookieBanner && T.consent_required && getConsent() === "none") {
    cookieBanner.classList.add("is-visible");
  }
  document.querySelectorAll("[data-consent]").forEach(function (btn) {
    btn.addEventListener("click", function () {
      setConsent(btn.getAttribute("data-consent"));
      if (cookieBanner) cookieBanner.classList.remove("is-visible");
      if (btn.getAttribute("data-consent") === "all") loadTrackers();
    });
  });

// ============ Tracking-Loader (Meta-Pixel + GTM) — nur bei Consent ============
  function loadTrackers() {
    if (T.meta_pixel_id) {
      !function (f, b, e, v, n, t, s) {
        if (f.fbq) return;
        n = f.fbq = function () { n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments); };
        if (!f._fbq) f._fbq = n;
        n.push = n; n.loaded = !0; n.version = "2.0"; n.queue = [];
        t = b.createElement(e); t.async = !0; t.src = v;
        s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s);
      }(window, document, "script", "https://connect.facebook.net/en_US/fbevents.js");
      window.fbq("init", T.meta_pixel_id);
      window.fbq("track", "PageView");
    }
    if (T.gtm_id) {
      (function (w, d, s, l, i) {
        w[l] = w[l] || [];
        w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
        var f = d.getElementsByTagName(s)[0], j = d.createElement(s);
        j.async = true;
        j.src = "https://www.googletagmanager.com/gtm.js?id=" + i;
        f.parentNode.insertBefore(j, f);
      })(window, document, "script", "dataLayer", T.gtm_id);
    }
  }
  if (getConsent() === "all") loadTrackers();

// ============ Form-Submit ============
  var form = document.getElementById("r2b-form");
  var successBox = document.getElementById("form-success");
  var errorBox = document.getElementById("form-error");
  function showError(msg) {
    if (errorBox) { errorBox.textContent = msg; errorBox.classList.add("is-visible"); }
  }
  if (form) {
    form.addEventListener("submit", function (e) {
      e.preventDefault();
      if (errorBox) errorBox.classList.remove("is-visible");
      var btn = form.querySelector("[type='submit']");
      if (btn) btn.disabled = true;
      var payload = {
        name: form.name && form.name.value || "",
        email: form.email && form.email.value || "",
        telefon: form.telefon && form.telefon.value || "",
        nachricht: form.nachricht && form.nachricht.value || "",
        kampagnen_id: T.kampagnen_id || "",
        kunde_slug: T.kunde_slug || ""
      };
      fetch(T.lead_endpoint, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload)
      }).then(function (r) {
        if (!r.ok) throw new Error("Server " + r.status);
        return r.json().catch(function () { return {}; });
      }).then(function () {
        form.style.display = "none";
        if (successBox) successBox.classList.add("is-visible");
        if (window.fbq && getConsent() === "all") {
          try { window.fbq("track", "Lead", { content_name: T.kampagnen_id }); } catch (e) {}
        }
      }).catch(function () {
        showError("Senden hat nicht geklappt. Bitte versuchen Sie es erneut oder rufen Sie uns direkt an.");
        if (btn) btn.disabled = false;
      });
    });
  }
})();
</script>

{{#if computed.galerie_aktiv}}
<script>
(function () {
  var track = document.getElementById("r2b-gal-track");
  if (!track) return;
  var cards = Array.prototype.slice.call(track.querySelectorAll(".r2b__gal-card"));
  var stage = track.parentElement;
  var prevArrow = stage ? stage.querySelector(".r2b__gal-arrow--prev") : null;
  var nextArrow = stage ? stage.querySelector(".r2b__gal-arrow--next") : null;
  var filterBtns = document.querySelectorAll(".r2b__gal-filter button");
  var lightbox = document.getElementById("r2b-lightbox");
  var lbImg = document.getElementById("r2b-lightbox-img");
  var lbCap = document.getElementById("r2b-lightbox-cap");
  var visibleList = cards.slice();
  var currentIdx = 0;

function applyFilter(cat) {
    visibleList = [];
    cards.forEach(function (c) {
      var match = (cat === "*") || (c.getAttribute("data-gal-cat") === cat);
      if (match) { c.removeAttribute("hidden"); visibleList.push(c); }
      else { c.setAttribute("hidden", "hidden"); }
    });
    track.scrollTo({ left: 0, behavior: "smooth" });
  }
  filterBtns.forEach(function (b) {
    b.addEventListener("click", function () {
      filterBtns.forEach(function (x) { x.setAttribute("aria-pressed", "false"); });
      b.setAttribute("aria-pressed", "true");
      applyFilter(b.getAttribute("data-gal-filter"));
    });
  });

function scrollByCard(direction) {
    var firstVisible = visibleList[0];
    if (!firstVisible) return;
    var cardWidth = firstVisible.getBoundingClientRect().width + 16;
    track.scrollBy({ left: direction * cardWidth, behavior: "smooth" });
  }
  if (prevArrow) prevArrow.addEventListener("click", function () { scrollByCard(-1); });
  if (nextArrow) nextArrow.addEventListener("click", function () { scrollByCard(1); });

function openLightbox(card) {
    if (!lightbox || !lbImg) return;
    var src = card.getAttribute("data-gal-src");
    var cap = card.getAttribute("data-gal-cap") || "";
    lbImg.setAttribute("src", src);
    lbImg.setAttribute("alt", cap);
    if (lbCap) lbCap.textContent = cap;
    currentIdx = visibleList.indexOf(card);
    lightbox.classList.add("is-open");
    document.body.style.overflow = "hidden";
  }
  function closeLightbox() {
    if (!lightbox) return;
    lightbox.classList.remove("is-open");
    document.body.style.overflow = "";
  }
  function navLightbox(direction) {
    if (!visibleList.length) return;
    currentIdx = (currentIdx + direction + visibleList.length) % visibleList.length;
    openLightbox(visibleList[currentIdx]);
  }
  cards.forEach(function (c) { c.addEventListener("click", function () { openLightbox(c); }); });
  if (lightbox) {
    lightbox.querySelector(".r2b__lightbox-close").addEventListener("click", closeLightbox);
    lightbox.querySelector(".r2b__lightbox-prev").addEventListener("click", function (e) { e.stopPropagation(); navLightbox(-1); });
    lightbox.querySelector(".r2b__lightbox-next").addEventListener("click", function (e) { e.stopPropagation(); navLightbox(1); });
    lightbox.addEventListener("click", function (e) { if (e.target === lightbox) closeLightbox(); });
    document.addEventListener("keydown", function (e) {
      if (!lightbox.classList.contains("is-open")) return;
      if (e.key === "Escape") closeLightbox();
      else if (e.key === "ArrowLeft") navLightbox(-1);
      else if (e.key === "ArrowRight") navLightbox(1);
    });
  }
})();
</script>
{{/if}}

{{#if computed.livechat_aktiv}}
{{#if computed.livechat.is_whatsapp}}
<a href="{{computed.livechat.url}}" class="r2b__livechat-btn" target="_blank" rel="noopener" data-sektion="livechat" aria-label="{{computed.livechat.label}}">
  <svg class="r2b__livechat-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
  </svg>
  <span class="r2b__livechat-label">{{computed.livechat.label}}</span>
</a>
{{else}}
<a href="{{computed.livechat.url}}" class="r2b__livechat-btn r2b__livechat-btn--telefon" data-sektion="livechat" aria-label="{{computed.livechat.label}}">
  <svg class="r2b__livechat-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M20.487 17.14l-4.065-3.696a1 1 0 0 0-1.391.043l-2.393 2.461c-.576-.11-1.734-.471-2.926-1.66-1.192-1.193-1.553-2.354-1.66-2.926l2.459-2.394a1 1 0 0 0 .043-1.391L6.859 3.513a1 1 0 0 0-1.391-.087l-2.17 1.861a1 1 0 0 0-.29.649c-.015.25-.301 6.172 4.291 10.766C11.305 20.707 16.323 21 17.705 21c.202 0 .326-.006.359-.008a.992.992 0 0 0 .648-.291l1.86-2.171a1 1 0 0 0-.085-1.39z"/>
  </svg>
  <span class="r2b__livechat-label">{{computed.livechat.label}}</span>
</a>
{{/if}}
{{/if}}

</body>
</html>

{
  "version": "1.0",
  "created_at": "2026-05-13T07:00:00Z",
  "updated_at": "2026-05-13T07:00:00Z",
  "source_audit_id": "riekert_demo_audit",
  "_hinweis": "Beispiel-Markendossier auf Basis der Riekert-Demo. Etwa 70 Prozent gefüllt zur Demonstration der Struktur. Felder mit konkreten Werten zeigen, wie ein vollständiges Dossier aussieht.",

"stamm": {
    "firma": "Raumausstattung Klaus Riekert e.K.",
    "gewerk": "Raumausstatter",
    "region": "Sternenfels (75447), Enzkreis",
    "mitarbeiter": 9,
    "auftragswert_durchschnitt": 7500
  },

"identitaet": {
    "logo": {
      "primaer": "_assets/riekert_logo_primaer.svg",
      "invertiert": "_assets/riekert_logo_weiss.svg",
      "icon_only": "_assets/riekert_icon.svg"
    },
    "farben": {
      "primaer": "#2C5F2D",
      "sekundaer": "#97BC62",
      "text": "#1A1A1A",
      "hintergrund": "#FFFFFF"
    },
    "schriften": {
      "headline": "Playfair Display, serif",
      "fliesstext": "Inter, sans-serif"
    },
    "bildsprache": {
      "stil": "Handwerklich, warm, ehrlich. Materialdetails sichtbar. Menschen bei der Arbeit, keine posed Aufnahmen.",
      "nicht": "Stockfotos, übersättigte Farben, generische Renderings, lächelnde Models"
    }
  },

"tonalitaet": {
    "voice_adjektive": ["bodenständig", "handwerklich-stolz", "regional-verwurzelt"],
    "beispielsaetze": [
      "Vier Generationen Riekert. Drei davon haben noch selbst die Nadel gehalten.",
      "Wir nehmen das Maß selbst. Auch beim dritten Vorhang.",
      "Was 1956 begonnen hat, hält heute noch."
    ],
    "tabu_woerter": [
      "innovativ",
      "Lösung",
      "passgenau",
      "ganzheitlich",
      "Synergie"
    ],
    "formale_anrede": true,
    "emojis_erlaubt": false
  },

"wunschauftraege": [
    {
      "typ": "Komplette Polsterung Designklassiker",
      "auftragswert_mittel": 3500,
      "typische_dauer": "3 Wochen",
      "story": "Designsessel aus den 70ern, vom Großvater geerbt, soll neu bezogen werden. Kunde will Stoff im Original-Stil — Riekert hat Lager-Zugriff auf seltene Sorten.",
      "bild_id": "ref_polsterung_designklassiker_01"
    },
    {
      "typ": "Vorhang-Komplettausstattung Altbau-Wohnung",
      "auftragswert_mittel": 8500,
      "typische_dauer": "6 Wochen",
      "story": "Privatkunde renoviert Altbau, will Vorhänge passend zu Stuck und Parkett. Beratung im Atelier mit Materialprobe.",
      "bild_id": "ref_vorhang_altbau_01"
    },
    {
      "typ": "Bodenbelag-Renovierung Privat",
      "auftragswert_mittel": 12000,
      "typische_dauer": "10 Tage",
      "story": "Komplette Wohnung neu belegen. Kunde will hochwertigen Vinyl oder Parkett, Riekert nimmt Maß und führt selbst aus.",
      "bild_id": "ref_bodenbelag_privat_01"
    },
    {
      "typ": "Hotel-Ausstattung Vorhang + Polster",
      "auftragswert_mittel": 25000,
      "typische_dauer": "8 Wochen",
      "story": "Boutique-Hotel, 18 Zimmer. Vorhänge und Sitzpolster im einheitlichen Konzept. Riekert liefert komplett ab Atelier.",
      "bild_id": "ref_hotel_komplett_01"
    }
  ],

"wunschkunden": [
    {
      "profil": "Renovierender Privatkunde 50+",
      "demografie": "Privat, 50–75 Jahre, Eigenheim oder Altbau-Eigentum, im Enzkreis und Nachbarkreisen",
      "motivation": "Will qualitativ hochwertig renovieren, kein Standard. Schätzt Beratung und persönliche Begleitung.",
      "hauptbedenken": "Hält der Betrieb sein Wort? Liefert er pünktlich? Wer ist da, wenn was reklamiert werden muss?",
      "typischer_auftragswert": 7500
    },
    {
      "profil": "Innenarchitekt mit Endkunden-Mandat",
      "demografie": "Selbstständig, vermittelt private Bauherren, Region Pforzheim / Karlsruhe / Stuttgart",
      "motivation": "Sucht ausführenden Partner, der nicht aus dem Konzept tanzt, qualitativ liefert und sauber kommuniziert.",
      "hauptbedenken": "Steht der Betrieb hinter dem Briefing? Liefert er Termine ein? Ist die Qualität reproduzierbar?",
      "typischer_auftragswert": 12000
    },
    {
      "profil": "Hotelbetreiber / Praxis",
      "demografie": "Boutique-Hotel oder Arztpraxis, 5–30 Zimmer/Räume, Süddeutschland",
      "motivation": "Komplettausstattung aus einer Hand, einheitliches Design, planbare Lieferzeit.",
      "hauptbedenken": "Kann der Betrieb das Volumen liefern? Sind die Materialien strapazierfähig genug?",
      "typischer_auftragswert": 18000
    }
  ],

"usp": {
    "spitze_satz": "Die Werkstatt für Räume, die bleiben sollen.",
    "argumente": [
      "Eigenes Atelier mit drei Polsterer-Meistern unter einem Dach",
      "70 Jahre Erfahrung, vier Generationen Familienbetrieb",
      "Vier Gewerke (Polsterei, Vorhänge, Bodenbeläge, Gardinen) integriert"
    ],
    "abgrenzung": [
      "kein Möbelhaus mit Eigenmontage",
      "kein Schnäppchen-Discounter",
      "keine Mini-Aufträge unter 500 € (Vorhang einkürzen, Reparaturen ohne Nachfolge)"
    ],
    "beleg": [
      "Seit 1956 in Sternenfels — vier Generationen",
      "130 m² Fachgeschäft + Atelier",
      "9 Mitarbeiter, davon 3 Polsterer-Meister",
      "Stoff-Lager mit 800 Sorten, viele sofort verfügbar"
    ]
  },

"asset_pool": [
    {
      "id": "ref_polsterung_designklassiker_01",
      "typ": "vorher_nachher",
      "titel": "Polsterung Stuhlgruppe 1970er",
      "tags": ["polsterei", "designklassiker", "privatkunde", "wunschauftrag"],
      "bilder": {
        "vorher": "_assets/riekert_polster_01_vorher.jpg",
        "nachher": "_assets/riekert_polster_01_nachher.jpg"
      },
      "auftragswert": 4200,
      "auftragsdauer_tage": 18,
      "kunden_zitat": "Hätten wir nicht gedacht, dass die nochmal so schön werden."
    },
    {
      "id": "ref_atelier_team_01",
      "typ": "standort_team",
      "titel": "Atelier-Innenansicht mit Polsterer bei der Arbeit",
      "tags": ["team", "atelier", "handwerk", "standort"],
      "bilder": {
        "hauptbild": "_assets/riekert_atelier_team_01.jpg"
      },
      "kunden_zitat": ""
    },
    {
      "id": "_TODO_image_paket",
      "typ": "_pending",
      "titel": "TODO: weitere 20–30 Assets aus Image-Paket folgen",
      "tags": [],
      "bilder": {}
    }
  ],

"cta_bank": {
    "anfrage": [
      "Beratungstermin im Atelier anfragen",
      "Aufmaß vor Ort vereinbaren",
      "Materialprobe anfordern"
    ],
    "termin": [
      "Atelier-Besichtigung buchen",
      "Vor-Ort-Aufmaß vereinbaren",
      "Erstgespräch im Fachgeschäft"
    ],
    "recruiting": [
      "Werkstatt-Tag besuchen",
      "Kennenlern-Termin Polsterei"
    ],
    "whitepaper": [
      "Polsterer-Glossar herunterladen"
    ]
  }
}

{
  "version": "1.0",
  "kampagnen_id": "riekert_vorhang_fruehjahr_2026",
  "kunde_slug": "riekert",
  "created_at": "2026-05-13T08:00:00Z",
  "template": "anfrage",

"dossier_pfad": "_examples/markendossier_riekert_beispiel.json",

"_hinweis": "Test-Kampagne auf Basis des Riekert-Dossiers. Erstes Anfrage-Template zur Validierung der Spec.",

"inhalt": {
    "headline": "Vorhänge, die zur Stuckdecke passen.",
    "subline": null,
    "wunschkunde_fokus": "Renovierender Privatkunde 50+",
    "wunschauftrag_fokus": "Vorhang-Komplettausstattung Altbau-Wohnung",
    "referenz_ids": [
      "ref_polsterung_designklassiker_01",
      "ref_atelier_team_01"
    ],
    "cta_primaer": "Beratungstermin im Atelier anfragen",
    "cta_sekundaer": "Materialprobe anfordern",

"taetigkeiten": null,
    "benefits": null,
    "gehalt_range": null
  },

"tracking": {
    "meta_pixel_id": null,
    "gtm_id": null,
    "conversion_event_lead": "Lead_Vorhang_Q2_2026",
    "conversion_event_view": "ViewContent_Vorhang_Q2_2026",
    "utm_default": {
      "source": "meta",
      "medium": "paid_social",
      "campaign": "vorhang_fruehjahr_2026"
    }
  },

"formular": {
    "typ": "r2b_lead_endpoint",
    "empfaenger_mail": "kontakt@riekert.de",
    "cc_r2b": "leads@room2build.com",
    "kalender_url": null
  },

"deployment": {
    "host_profil": "r2b_subdomain",
    "ziel_url": "aktion.room2build.com/riekert/vorhang-fruehjahr-2026",
    "fallback_url": null,
    "veroeffentlicht_ab": "2026-05-20",
    "laeuft_aus": "2026-08-31"
  }
}