/*!
 * D&J Referenzen - Styles der Seiten /referenzen-muenchen/ und /referenzen-hamburg/
 *
 * Generiert von build/live.py aus build/template.html. Nicht per Hand ändern,
 * sonst ist die Änderung beim nächsten Build weg. Alle Selektoren liegen unter
 * #dj-rf, damit Theme- und Elementor-Regeln nicht hineinregieren.
 */

/* Überschriften in einer eigenen variablen Inter Tight unter dem gemeinsamen D&J-Namen
   (wie dj-bewertung-cta, web-exposes, dj-404). Seiten mit Einzelgewichten der Google-Kopie
   würden 750 sonst künstlich fetten. Lizenz: ../fonts/OFL.txt */
@font-face { font-family: "DJ Inter Tight"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/inter-tight-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DJ Inter Tight"; font-style: italic; font-weight: 400 800; font-display: swap; src: url("../fonts/inter-tight-italic-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ============ SCOPE-RESET ============
   Die Vorschau lief auf einer nackten Seite. hello-elementor und das Elementor-Kit
   setzen für Überschriften, Buttons, Formularfelder und Links eigene Werte. Hier werden
   sie innerhalb der Seite neutral gesetzt, die Regeln der Vorschau folgen darunter. */
#dj-rf h1, #dj-rf h2, #dj-rf h3, #dj-rf h4, #dj-rf h5, #dj-rf h6 {
  font-family: inherit;
  font-weight: bold;
  font-style: normal;
  line-height: inherit;
  color: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-align: inherit;
  margin-top: 0;
}
#dj-rf p, #dj-rf li, #dj-rf summary, #dj-rf dt, #dj-rf dd, #dj-rf blockquote {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  letter-spacing: normal;
  text-transform: none;
}
#dj-rf a { color: inherit; box-shadow: none; background-color: transparent; }
#dj-rf strong, #dj-rf b { font-weight: 700; }
#dj-rf em, #dj-rf i { font-style: italic; }
#dj-rf img { border: 0; border-radius: 0; box-shadow: none; }
#dj-rf figure, #dj-rf figcaption { display: block; font-family: inherit; font-style: normal; color: inherit; }
#dj-rf button {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-transform: none;
  text-decoration: none;
  letter-spacing: normal;
  white-space: normal;
  min-height: 0;
  -webkit-appearance: none;
  appearance: none;
}
#dj-rf input {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  box-shadow: none;
  min-height: 0;
  height: auto;
  max-width: none;
  margin: 0;
}
#dj-rf label { line-height: inherit; vertical-align: baseline; font-weight: inherit; margin: 0; }
#dj-rf details, #dj-rf summary { display: block; }
#dj-rf section, #dj-rf div { float: none; }
#dj-rf ul, #dj-rf ol, #dj-rf dl { margin: 0; }
#dj-rf dialog { color: inherit; }

/* ============ VORSCHAU ============ */
#dj-rf {
  --orange: #f56700; --orange-dark: #b34a00; --orange-light: #fdeede;
  --sand: #dfdcd9; --light-sand: #f5f3f0; --sand-warmer: #ebe7e1; --sand-border: #aba8a4;
  --white: #ffffff; --anthracite: #1f1d1a; --text-muted: #5a5854; --text-soft: #7d7a75;
  --line: #dfdcd9;
  --shadow: 0 14px 34px rgba(31,29,26,0.06);
}
#dj-rf, #dj-rf *,
#dj-rf *::before,
#dj-rf *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
#dj-rf { font-family: 'Inter', sans-serif; background: var(--white); color: var(--anthracite); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
#dj-rf img,
#dj-rf video { display: block; max-width: 100%; height: auto; }
#dj-rf a { color: inherit; }
#dj-rf button,
#dj-rf input { font: inherit; color: inherit; }
#dj-rf button { cursor: pointer; }
#dj-rf .wrap { max-width: 1160px; margin: 0 auto; padding: 0 40px; }
#dj-rf h1,
#dj-rf h2,
#dj-rf h3 { font-family: "DJ Inter Tight", 'Inter Tight', sans-serif; font-weight: 750; }
#dj-rf h1 em,
#dj-rf h2 em,
#dj-rf h3 em { font-style: italic; color: var(--orange); }
#dj-rf :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
#dj-rf [id] { scroll-margin-top: 24px; }
#dj-rf [hidden] { display: none !important; }
#dj-rf .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ============ BUTTONS ============ */
#dj-rf .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 600; font-size: 15px; line-height: 1.2; padding: 16px 28px; border-radius: 6px; text-decoration: none; border: 0; transition: transform 0.15s, background 0.15s, box-shadow 0.15s; }
#dj-rf .btn svg { width: 17px; height: 17px; flex: none; }
#dj-rf .btn-primary { background: var(--orange); color: var(--white); box-shadow: 0 10px 24px rgba(245,103,0,0.26); }
#dj-rf .btn-primary:hover { background: var(--orange-dark); transform: translateY(-1px); }
#dj-rf .btn-outline { background: var(--white); color: var(--anthracite); box-shadow: inset 0 0 0 1.5px var(--anthracite); }
#dj-rf .btn-outline:hover { background: var(--light-sand); }
#dj-rf .btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
#dj-rf .link-more { display: inline-flex; align-items: center; gap: 8px; margin: 32px auto 0; padding: 13px 22px; border-radius: 999px; border: 1.5px solid var(--sand); background: var(--white); font-weight: 600; font-size: 14.5px; color: var(--anthracite); transition: border-color 0.15s; }
#dj-rf .link-more:hover { border-color: var(--orange); }
#dj-rf .center { text-align: center; }
/* ============ SEKTIONEN ============ */
#dj-rf section { padding: 96px 0; }
#dj-rf .section-head { max-width: 720px; margin-bottom: 40px; }
#dj-rf .section-head h2 { font-size: clamp(30px, 3.8vw, 44px); letter-spacing: -1.2px; line-height: 1.08; margin-bottom: 14px; text-wrap: balance; }
#dj-rf .section-head p { font-size: 16.5px; color: var(--text-muted); line-height: 1.7; }
#dj-rf .section-head.mid { margin-left: auto; margin-right: auto; text-align: center; }
#dj-rf .sand {
  background:
    radial-gradient(640px 380px at 92% 8%, rgba(253,238,222,0.75), transparent 70%),
    radial-gradient(520px 340px at 4% 94%, rgba(235,231,225,0.95), transparent 70%),
    var(--light-sand);
}
/* ============ EINSTIEG: KACHEL-RASTER ============ */
#dj-rf .top { padding: 28px 0 0; }
#dj-rf .top .wrap { max-width: 1400px; }
#dj-rf .bento { display: grid; gap: 16px; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 198px 198px minmax(clamp(240px, 19vw, 272px), auto);
  grid-template-areas: "t t t t t t h h h v v v" "t t t t t t h h h v v v" "t t t t t t w w w s s s"; }
#dj-rf .b-text { grid-area: t; display: flex; flex-direction: column; justify-content: center; padding: 52px 54px 40px; border-radius: 28px;
  border: 1px solid rgba(171,168,164,0.32);
  background: radial-gradient(720px 480px at 100% -8%, var(--orange-light) 0%, rgba(253,238,222,0) 62%),
              radial-gradient(560px 420px at -8% 108%, var(--sand-warmer) 0%, rgba(235,231,225,0) 58%), var(--light-sand); }
#dj-rf .b-text h1 { font-size: clamp(42px, 4.4vw, 64px); letter-spacing: -2.1px; line-height: 1.02; margin-bottom: 20px; text-wrap: balance; }
#dj-rf .b-text .lead { font-size: 17.5px; color: var(--text-muted); line-height: 1.65; max-width: 500px; }
#dj-rf .b-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
#dj-rf .b-ctas .btn { padding: 16px 22px; }
#dj-rf .b-trust { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(171,168,164,0.38); font-size: 13.5px; color: var(--text-muted); }
#dj-rf .b-trust > span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
#dj-rf .b-trust b { font-family: "DJ Inter Tight", 'Inter Tight', sans-serif; font-weight: 750; color: var(--anthracite); }
#dj-rf .b-trust .g { width: 17px; height: 17px; }
#dj-rf .b-trust .stars svg { width: 13px; height: 13px; }
#dj-rf .b-trust .trophy { width: 16px; height: 16px; fill: #fbbc05; }
#dj-rf .b-foto { margin: 0; border-radius: 24px; overflow: hidden; background: var(--sand-warmer); }
#dj-rf .b-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
#dj-rf .b-foto:hover img { transform: scale(1.03); }
#dj-rf .b-hoch { grid-area: h; }
#dj-rf .b-breit { grid-area: w; position: relative; }
/* Foto ganz ausgeliefert, liegt absolut in der Kachel: es zieht die Reihe nicht in die Höhe und wird nur oben oder unten beschnitten */
#dj-rf .b-breit img { position: absolute; inset: 0; }
#dj-rf .b-video { grid-area: v; position: relative; display: flex; flex-direction: column; padding: 0; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--white); color: var(--anthracite); text-align: left; }
#dj-rf .bv-img { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--sand-warmer); }
#dj-rf .bv-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
#dj-rf .b-video:hover .bv-img img { transform: scale(1.03); }
#dj-rf .b-video:hover .play { transform: scale(1.08); }
#dj-rf .bv-cap { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; }
#dj-rf .bv-cap b { display: block; font-family: "DJ Inter Tight", 'Inter Tight', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -0.2px; line-height: 1.25; }
#dj-rf .bv-cap span span { display: block; font-size: 12.5px; color: var(--text-soft); }
#dj-rf .b-quote { grid-area: s; display: flex; flex-direction: column; justify-content: space-between; padding: 22px 24px; border-radius: 24px;
  background: var(--orange-light); border: 1px solid rgba(245,103,0,0.16); color: var(--anthracite); text-decoration: none; transition: border-color 0.15s; }
#dj-rf .b-quote:hover { border-color: var(--orange); }
#dj-rf .bq-top { display: flex; align-items: center; gap: 6px; }
#dj-rf .bq-top .g { width: 16px; height: 16px; }
#dj-rf .bq-top .stars svg { width: 13px; height: 13px; }
#dj-rf .bq-text { margin: 12px 0 14px; font-family: "DJ Inter Tight", 'Inter Tight', sans-serif; font-weight: 650; font-size: 16px; letter-spacing: -0.25px; line-height: 1.38; }
#dj-rf .bq-p { display: block; }
#dj-rf .bq-p + .bq-p { margin-top: 6px; }
#dj-rf .bq-q { color: var(--text-soft); }
#dj-rf .bq-aus { color: var(--text-soft); font-weight: 500; }
#dj-rf .bq-u { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
#dj-rf .bq-who { font-size: 12.5px; line-height: 1.4; color: var(--text-muted); }
#dj-rf .bq-who b { display: block; color: var(--anthracite); font-weight: 600; }
#dj-rf .bq-who span span { display: block; }
/* Standortwahl im Einstieg: aktive Stadt hell mit orangem Rahmen */
#dj-rf .stadtwahl { display: inline-flex; align-self: flex-start; gap: 4px; margin-bottom: 26px; padding: 4px; border-radius: 999px; background: var(--white); border: 1px solid rgba(171,168,164,0.4); }
#dj-rf .stadtwahl a { padding: 8px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--text-muted); text-decoration: none; transition: color 0.15s; }
#dj-rf .stadtwahl a:hover { color: var(--anthracite); }
#dj-rf .stadtwahl a[aria-current] { background: #fffaf5; color: var(--anthracite); box-shadow: inset 0 0 0 1.5px var(--orange); }
/* ============ REFERENZOBJEKTE (wie ImmoScout, kompakt: Foto links, Angaben rechts) ============ */
#dj-rf .obj-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
#dj-rf .oc { display: grid; grid-template-columns: 42% minmax(0, 1fr); min-height: 138px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
#dj-rf .oc.spaeter { display: none; }
#dj-rf .oc-img { position: relative; background: var(--sand-warmer); }
#dj-rf .oc-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#dj-rf .oc-body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 12px 14px; }
#dj-rf .oc-status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 4px; border-radius: 999px; background: #e8f6ed; color: #15803d; font-size: 11.5px; font-weight: 750; letter-spacing: 0.6px; line-height: 1.2; text-transform: uppercase; }
#dj-rf .oc-status .haken { width: 15px; height: 15px; }
#dj-rf .oc-typ { margin-top: 8px; font-family: "DJ Inter Tight", 'Inter Tight', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -0.2px; line-height: 1.2; }
#dj-rf .oc-ort { margin-top: 2px; font-size: 12.5px; color: var(--text-muted); line-height: 1.3; }
#dj-rf .oc-facts { display: flex; flex-wrap: wrap; gap: 0 10px; margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
#dj-rf .oc-facts b { font-family: "DJ Inter Tight", 'Inter Tight', sans-serif; font-weight: 700; color: var(--anthracite); font-variant-numeric: tabular-nums; }
#dj-rf .oc .acts { flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding-top: 8px; }
#dj-rf .oc .act { height: 28px; padding: 0 10px; font-size: 12px; }
#dj-rf .oc .act svg { width: 13px; height: 13px; }
#dj-rf .obj-more { display: flex; margin: 24px auto 0; }
/* ============ VIDEOS ============ */
#dj-rf .reels { padding-top: 104px; }
#dj-rf .reel-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
#dj-rf .reel { text-align: left; }
#dj-rf .reel-btn { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--sand-warmer); border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; }
#dj-rf .reel-btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
#dj-rf .reel-btn:hover img { transform: scale(1.035); }
#dj-rf .play { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(255,255,255,0.94); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(31,29,26,0.22); transition: transform 0.2s; }
#dj-rf .play svg { width: 20px; height: 20px; fill: var(--orange); margin-left: 3px; }
#dj-rf .reel-btn:hover .play { transform: scale(1.08); }
#dj-rf .dur { position: absolute; right: 10px; top: 10px; background: rgba(255,255,255,0.92); color: var(--anthracite); font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
#dj-rf .reel-cap { margin-top: 12px; }
#dj-rf .reel-cap b { display: block; font-family: "DJ Inter Tight", 'Inter Tight', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.3; letter-spacing: -0.2px; }
#dj-rf .reel-cap span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-soft); }
/* ============ GESCHICHTEN ============ */
#dj-rf .filters { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 28px; }
#dj-rf .st-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
#dj-rf .st-intro { position: sticky; top: 32px; }
#dj-rf .st-intro .section-head { margin-bottom: 26px; }
#dj-rf .st-intro .filters { margin: 0; }
#dj-rf .st-list { display: grid; gap: 10px; }
#dj-rf .st { background: var(--white); border-radius: 16px; box-shadow: 0 4px 16px rgba(31,29,26,0.05); transition: box-shadow 0.2s; }
#dj-rf .st:hover,
#dj-rf .st[open] { box-shadow: 0 12px 30px rgba(31,29,26,0.09); }
#dj-rf .st summary { display: grid; grid-template-columns: 60px minmax(0, 1fr) 22px; gap: 16px; align-items: center; padding: 12px 20px 12px 12px; cursor: pointer; list-style: none; }
#dj-rf .st summary::-webkit-details-marker { display: none; }
#dj-rf .st summary::after { content: '+'; font-size: 26px; font-weight: 400; line-height: 1; color: var(--orange); text-align: center; transition: transform 0.2s; }
#dj-rf .st[open] summary::after { transform: rotate(45deg); }
#dj-rf .st summary img { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; }
#dj-rf .st-kopf b { display: block; font-family: "DJ Inter Tight", 'Inter Tight', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: -0.2px; line-height: 1.3; }
#dj-rf .st-kopf span { display: block; margin-top: 3px; font-size: 13px; color: var(--text-soft); line-height: 1.4; }
#dj-rf .st-body { padding: 0 24px 20px 88px; }
#dj-rf .st-body > p { font-size: 14.5px; color: var(--text-muted); line-height: 1.65; }
#dj-rf .st-body blockquote { margin: 14px 0 2px; font-family: "DJ Inter Tight", 'Inter Tight', sans-serif; font-weight: 750; font-style: italic; font-size: 19px; letter-spacing: -0.3px; line-height: 1.3; color: var(--orange); }
#dj-rf .st-body .q-von { font-size: 12.5px; color: var(--text-soft); }
#dj-rf .st-body .verlauf { margin-top: 16px; }
#dj-rf .st-body .facts { margin-top: 14px; padding-top: 12px; }
#dj-rf .st-body .facts dt { font-size: 21px; }
#dj-rf .st-body .foot { margin-top: 14px; padding: 14px 0 0; }
#dj-rf .st-more { margin: 18px 0 0; }
#dj-rf .filter { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--sand); background: var(--white); font-size: 14px; font-weight: 500; color: var(--text-muted); transition: border-color 0.15s, color 0.15s, background 0.15s; }
#dj-rf .filter:hover { border-color: var(--sand-border); color: var(--anthracite); }
#dj-rf .filter .n { font-size: 12px; font-weight: 600; color: var(--text-soft); font-variant-numeric: tabular-nums; }
#dj-rf .filter[aria-pressed="true"] { border-color: var(--orange); background: #fffaf5; color: var(--anthracite); font-weight: 600; box-shadow: inset 0 0 0 1px var(--orange); }
#dj-rf .filter[aria-pressed="true"] .n { color: var(--orange-dark); }
#dj-rf .verlauf { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 0; }
#dj-rf .verlauf li { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 0 0 12px 22px; font-size: 14px; color: var(--text-muted); }
#dj-rf .verlauf li::before { content: ''; position: absolute; left: 0; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--sand-border); }
#dj-rf .verlauf li::after { content: ''; position: absolute; left: 4px; top: 18px; bottom: 0; width: 1px; background: var(--line); }
#dj-rf .verlauf li:last-child { padding-bottom: 0; }
#dj-rf .verlauf li:last-child::after { display: none; }
#dj-rf .verlauf li:last-child::before { background: var(--orange); box-shadow: 0 0 0 4px var(--orange-light); }
#dj-rf .verlauf b { font-family: "DJ Inter Tight", 'Inter Tight', sans-serif; font-weight: 700; color: var(--anthracite); font-variant-numeric: tabular-nums; }
#dj-rf .verlauf li:last-child span { color: var(--anthracite); font-weight: 600; }
#dj-rf .facts { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--light-sand); }
#dj-rf .facts div { display: flex; flex-direction: column; }
#dj-rf .facts dt { font-family: "DJ Inter Tight", 'Inter Tight', sans-serif; font-weight: 750; font-size: 24px; letter-spacing: -0.6px; line-height: 1.1; color: var(--orange); font-variant-numeric: tabular-nums; }
#dj-rf .facts dt small { font-size: 14px; font-weight: 700; letter-spacing: 0; margin-left: 3px; }
#dj-rf .facts dd { font-size: 12.5px; color: var(--text-muted); }
#dj-rf .obj { margin-top: 12px; font-size: 13px; color: var(--text-soft); }
#dj-rf .foot { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 14px 24px 18px; border-top: 1px solid var(--light-sand); }
#dj-rf .team { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--text-muted); }
#dj-rf .team .av { display: flex; gap: 4px; flex: none; }
#dj-rf .team img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
#dj-rf .team span { line-height: 1.35; }
#dj-rf .acts { margin-left: auto; display: flex; gap: 6px; flex: none; }
#dj-rf .act { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); font-size: 13px; font-weight: 600; color: var(--anthracite); text-decoration: none; transition: border-color 0.15s, color 0.15s; }
#dj-rf .act:hover { border-color: var(--orange); color: var(--orange-dark); }
#dj-rf .act svg { width: 15px; height: 15px; flex: none; }
#dj-rf .act.ig { width: 34px; padding: 0; justify-content: center; }
#dj-rf .act.play-act svg { fill: var(--orange); }
/* ============ NOTARTERMINE ============ */
#dj-rf .gal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 16px; }
#dj-rf .gal img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
#dj-rf .gal:not(.offen) > figure:nth-child(n+13) { display: none; }
#dj-rf .gal figcaption { margin-top: 10px; }
#dj-rf .gc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#dj-rf .gc-name { font-family: "DJ Inter Tight", 'Inter Tight', sans-serif; font-weight: 700; font-size: 14.5px; letter-spacing: -0.2px; line-height: 1.3; }
#dj-rf .gc-stars { display: inline-flex; align-items: center; gap: 1px; flex: none; text-decoration: none; }
#dj-rf .gc-stars .g { width: 13px; height: 13px; margin-right: 4px; }
#dj-rf .gc-stars .stars svg { width: 12px; height: 12px; }
#dj-rf a.gc-stars:hover .g { transform: scale(1.12); }
#dj-rf .gc-meta { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-soft); }
/* ============ BEWERTUNGEN: EINE IM FOKUS ============ */
#dj-rf .stars { display: inline-flex; gap: 2px; }
#dj-rf .stars svg { width: 15px; height: 15px; fill: #fbbc04; }
#dj-rf .rf-stage { max-width: 940px; margin: 0 auto; background: var(--white); border-radius: 28px; box-shadow: 0 24px 60px rgba(31,29,26,0.08); }
#dj-rf .rf-item { padding: 64px 72px 52px; text-align: center; }
#dj-rf .rf-item.ein { animation: rfEin 0.35s ease; }
@keyframes rfEin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#dj-rf .rf-kern { max-width: 780px; margin: 0 auto; font-family: "DJ Inter Tight", 'Inter Tight', sans-serif; font-weight: 750; font-size: clamp(30px, 3.5vw, 46px); letter-spacing: -1.3px; line-height: 1.14; text-wrap: balance; }
#dj-rf .rf-kern em { font-style: italic; color: var(--orange); }
#dj-rf .rf-who { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; text-align: left; }
#dj-rf .rf-av { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--orange-light); color: var(--orange-dark); font-family: "DJ Inter Tight", 'Inter Tight', sans-serif; font-weight: 750; font-size: 19px; display: flex; align-items: center; justify-content: center; }
#dj-rf .rf-who b { display: block; font-family: "DJ Inter Tight", 'Inter Tight', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.25; }
#dj-rf .rf-who span span { font-size: 13.5px; color: var(--text-muted); }
#dj-rf .rf-meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 28px; margin-top: 16px; }
#dj-rf .rf-g { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-muted); text-decoration: none; }
#dj-rf .rf-g .g { width: 18px; height: 18px; }
#dj-rf .rf-g u { text-underline-offset: 3px; }
#dj-rf .rf-g:hover u { color: var(--orange-dark); }
#dj-rf .rf-meta .team { gap: 10px; font-size: 13.5px; }
#dj-rf .rf-meta .team .av { gap: 4px; }
#dj-rf .rf-meta .team img { width: 40px; height: 40px; }
#dj-rf .rf-lesen { max-width: 680px; margin: 34px auto 0; padding-top: 30px; border-top: 1px solid var(--light-sand); text-align: left; }
#dj-rf .rf-text { font-size: 17px; line-height: 1.8; color: #3c3a36; }
#dj-rf .rf-text p + p { margin-top: 12px; }
#dj-rf .rf-text.zu { overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent); }
#dj-rf .rf-mehr { display: flex; align-items: center; gap: 8px; margin: 16px auto 0; padding: 12px 20px; border-radius: 999px; border: 1.5px solid var(--sand); background: var(--white); font-weight: 600; font-size: 14.5px; color: var(--anthracite); transition: border-color 0.15s; }
#dj-rf .rf-mehr:hover { border-color: var(--orange); }
#dj-rf .rf-mehr svg { width: 16px; height: 16px; }
#dj-rf .rf-text mark { background: linear-gradient(transparent 52%, var(--orange-light) 52%); color: inherit; padding: 0 1px; }
#dj-rf .rf-nav { display: flex; align-items: center; gap: 12px; max-width: 1080px; margin: 24px auto 0; }
#dj-rf .rf-list { display: flex; gap: 8px; flex: 1; overflow-x: auto; scrollbar-width: none; padding: 2px; }
#dj-rf .rf-list > :first-child { margin-left: auto; }
#dj-rf .rf-list > :last-child { margin-right: auto; }
#dj-rf .rf-list::-webkit-scrollbar { display: none; }
#dj-rf .rf-tab { flex: none; display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); text-align: left; transition: border-color 0.15s; }
#dj-rf .rf-tab:hover { border-color: var(--sand-border); }
#dj-rf .rf-tab .rf-av { width: 34px; height: 34px; font-size: 14px; }
#dj-rf .rf-tab b { display: block; font-family: "DJ Inter Tight", 'Inter Tight', sans-serif; font-weight: 700; font-size: 13.5px; line-height: 1.2; }
#dj-rf .rf-tab span span { font-size: 12px; color: var(--text-soft); }
#dj-rf .rf-tab[aria-selected="true"] { border-color: var(--orange); background: #fffaf5; box-shadow: inset 0 0 0 1px var(--orange); }
#dj-rf .rf-arrow { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); display: flex; align-items: center; justify-content: center; transition: border-color 0.15s; }
#dj-rf .rf-arrow:hover { border-color: var(--orange); }
#dj-rf .rf-arrow svg { width: 18px; height: 18px; }
#dj-rf .rv-zeile { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 30px; font-size: 14px; color: var(--text-muted); }
#dj-rf .rv-zeile .g { width: 20px; height: 20px; }
#dj-rf .rv-zeile b { font-family: "DJ Inter Tight", 'Inter Tight', sans-serif; font-weight: 750; font-size: 18px; color: var(--anthracite); }
#dj-rf .rv-note { max-width: 760px; margin: 14px auto 0; text-align: center; font-size: 12.5px; color: var(--text-soft); line-height: 1.6; }
#dj-rf .rv-auf,
#dj-rf .wisch { display: none; }
/* ============ IN DEINER NÄHE ============ */
#dj-rf .near-grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 56px; align-items: start; }
#dj-rf .near-grid .section-head { margin-bottom: 26px; }
#dj-rf .plz { background: var(--light-sand); border-radius: 20px; padding: 24px 24px 22px; }
#dj-rf .plz label { display: block; font-family: "DJ Inter Tight", 'Inter Tight', sans-serif; font-weight: 700; font-size: 16px; margin-bottom: 12px; }
#dj-rf .plz-row { display: flex; gap: 10px; }
#dj-rf .plz input { flex: 1; min-width: 0; height: 52px; padding: 0 16px; border: 1.5px solid var(--sand); border-radius: 12px; background: var(--white); font-size: 17px; font-weight: 600; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
#dj-rf .plz input::placeholder { font-weight: 400; letter-spacing: 0; color: #a59e95; }
#dj-rf .plz input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(245,103,0,0.12); }
#dj-rf .plz button { height: 52px; padding: 0 24px; border: 0; border-radius: 12px; background: var(--orange); color: var(--white); font-family: "DJ Inter Tight", 'Inter Tight', sans-serif; font-weight: 700; font-size: 16px; }
#dj-rf .plz button:hover { background: var(--orange-dark); }
#dj-rf .plz-out { margin-top: 16px; font-size: 15px; color: var(--text-muted); line-height: 1.6; min-height: 48px; }
#dj-rf .plz-out b { color: var(--anthracite); }
#dj-rf .plz-out b.band { color: #15803d; }
#dj-rf .plz-ja { display: flex; align-items: flex-start; gap: 12px; color: var(--anthracite); }
#dj-rf .plz-ja .haken { flex: none; width: 26px; height: 26px; margin-top: 0; }
#dj-rf .plz-weiter { display: block; margin: 12px 0 0 38px; color: var(--text-muted); }
#dj-rf .plz-weiter a { white-space: nowrap; }
#dj-rf .haken circle { fill: #16a34a; }
#dj-rf .plz-out a { color: var(--orange-dark); font-weight: 600; }
#dj-rf .tally { display: flex; align-items: center; gap: 20px; margin-top: 64px; padding-top: 34px; border-top: 1px solid var(--line); }
#dj-rf .tally .num { font-family: "DJ Inter Tight", 'Inter Tight', sans-serif; font-weight: 750; font-size: 60px; letter-spacing: -2px; line-height: 1; color: var(--orange); white-space: nowrap; }
#dj-rf .tally .num small { font-size: 22px; letter-spacing: -0.4px; margin-right: 6px; }
#dj-rf .tally .satz { font-family: "DJ Inter Tight", 'Inter Tight', sans-serif; font-weight: 650; font-size: 22px; letter-spacing: -0.4px; line-height: 1.3; max-width: 440px; }
#dj-rf .map-card { background: var(--light-sand); border-radius: 22px; padding: 10px; }
#dj-rf .map-view { position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 4 / 3; background: var(--light-sand); }
#dj-rf .map-inner { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
#dj-rf .map-inner img { width: 100%; height: 100%; object-fit: cover; }
#dj-rf .map-ring { position: absolute; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid var(--orange-dark); background: rgba(255,255,255,0.10); box-shadow: 0 0 0 2px rgba(255,255,255,0.92), 0 6px 18px rgba(31,29,26,0.18); pointer-events: none; }
#dj-rf .map-orte { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
#dj-rf .map-ort { position: absolute; transform: translate(-50%, -50%) scale(var(--gegen, 1)); transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  font-family: "DJ Inter Tight", 'Inter Tight', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.1px; line-height: 1; color: #4a4743; white-space: nowrap;
  text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 6px #fff, 0 0 10px rgba(255,255,255,0.8); }
#dj-rf .map-ort.mittel { font-size: 12.5px; font-weight: 700; color: var(--anthracite); }
#dj-rf .map-ort.gross { font-size: 15px; font-weight: 750; letter-spacing: -0.2px; color: var(--anthracite); }
#dj-rf .map-cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; padding: 10px 6px 2px; font-size: 12px; color: var(--text-soft); }
#dj-rf .map-legend { display: inline-flex; align-items: center; gap: 4px; }
#dj-rf .map-legend span { margin: 0 4px; white-space: nowrap; }
#dj-rf .map-legend i { display: block; width: 18px; height: 10px; border-radius: 3px; }
#dj-rf .map-reset { border: 0; background: none; padding: 0; font-size: 12px; font-weight: 600; color: var(--orange-dark); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
/* ============ BEDINGUNGEN ============ */
#dj-rf .promise-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
#dj-rf .promise { background: var(--white); border-radius: 18px; padding: 28px 28px 26px; box-shadow: var(--shadow); }
#dj-rf .promise .big { font-family: "DJ Inter Tight", 'Inter Tight', sans-serif; font-weight: 750; font-size: 40px; letter-spacing: -1.4px; line-height: 1; color: var(--orange); margin-bottom: 10px; }
#dj-rf .promise b { display: block; font-family: "DJ Inter Tight", 'Inter Tight', sans-serif; font-weight: 700; font-size: 16px; margin-bottom: 6px; }
#dj-rf .promise p { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
/* ============ FAQ ============ */
#dj-rf .faq-list { max-width: 820px; }
#dj-rf .faq-item { background: var(--light-sand); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
#dj-rf .faq-item summary { list-style: none; cursor: pointer; padding: 22px 26px; font-family: "DJ Inter Tight", 'Inter Tight', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -0.2px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
#dj-rf .faq-item summary::-webkit-details-marker { display: none; }
#dj-rf .faq-item summary::after { content: '+'; font-weight: 400; font-size: 26px; color: var(--orange); line-height: 1; flex-shrink: 0; transition: transform 0.2s; }
#dj-rf .faq-item[open] summary::after { transform: rotate(45deg); }
#dj-rf .faq-item .answer { padding: 0 26px 24px; font-size: 15px; color: var(--text-muted); line-height: 1.7; max-width: 700px; }
#dj-rf .faq-item .answer a { color: var(--orange-dark); font-weight: 600; }
/* ============ ABSCHLUSS ============ */ /* Box direkt nach dem Versprechen (Sand), danach die FAQ auf Weiß: die FAQ rückt an die Box heran (Artur 04.11.2026) */
#dj-rf .cta-sec + #fragen { padding-top: 24px; }
#dj-rf .uebergang { margin-bottom: 36px; }
#dj-rf .cta-sec .dj-bcta { padding: 0; }
#dj-rf .cta-sec .wrap { max-width: 1220px; }
#dj-rf .contact-line { margin-top: 22px; text-align: center; font-size: 14.5px; color: var(--text-muted); }
#dj-rf .contact-line a { color: var(--anthracite); font-weight: 600; text-decoration: none; white-space: nowrap; }
#dj-rf .contact-line a:hover { color: var(--orange-dark); }
/* ============ VIDEO-PLAYER ============ */
#dj-rf .player { border: 0; padding: 0; background: transparent; max-width: 920px; width: calc(100% - 32px); max-height: none; margin: auto; overflow: visible; }
/* Ohne Dialog-Unterstützung (sehr alte Browser) nicht im Seitenfluss zeigen */
#dj-rf .player:not([open]),
#dj-rf .lb:not([open]) { display: none; }
#dj-rf .player::backdrop { background: rgba(31,29,26,0.55); }
#dj-rf .pl { position: relative; display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); background: var(--white); border-radius: 22px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 30px 80px rgba(31,29,26,0.35); }
#dj-rf .pl video { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--sand-warmer); }
/* Ältere Clips tragen den Rahmen der Social-Vorlage im Bild: in Chrome weggeschnitten, live die Originaldateien nehmen */
#dj-rf .pl video.rahmen { object-view-box: inset(8% 8.75% 8.2% 8.6%); }
#dj-rf .pl-body { padding: 36px 34px 28px; display: flex; flex-direction: column; }
#dj-rf .pl-body h3 { font-size: 26px; letter-spacing: -0.7px; line-height: 1.15; margin-bottom: 12px; padding-right: 30px; text-wrap: balance; }
#dj-rf .pl-body p { font-size: 15px; color: var(--text-muted); line-height: 1.65; }
#dj-rf .pl-body .foot { padding: 18px 0 0; margin-top: auto; border-top: 0; }
#dj-rf .pl-q { margin: 10px 0 2px; font-family: "DJ Inter Tight", 'Inter Tight', sans-serif; font-weight: 750; font-style: italic; font-size: 21px; letter-spacing: -0.4px; line-height: 1.25; color: var(--orange); }
#dj-rf .pl-close { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); box-shadow: 0 4px 14px rgba(31,29,26,0.18); display: flex; align-items: center; justify-content: center; z-index: 3; }
/* Eigene Steuerung statt der Browser-Leiste (Artur 04.11.2026): gleich in allen Browsern, nichts liegt unter dem X.
   Live haben die Clips keine Tonspur, dort steht „Ohne Ton“ statt eines Lautstärkeknopfs (data-ton="aus") */
#dj-rf .pl-film { position: relative; min-width: 0; background: var(--sand-warmer); }
#dj-rf .pl-film video { display: block; cursor: pointer; }
#dj-rf .pl-gross { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.95); box-shadow: 0 8px 22px rgba(31,29,26,0.25); display: flex; align-items: center; justify-content: center; z-index: 1; }
#dj-rf .pl-gross[hidden] { display: none; }
#dj-rf .pl-gross svg { width: 26px; height: 26px; margin-left: 3px; fill: var(--orange); }
#dj-rf .pl-leiste { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 28px 12px 10px; background: linear-gradient(to top, rgba(20,19,17,0.62), rgba(20,19,17,0)); color: #fff; }
#dj-rf .pl-knopf { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.18); color: #fff; }
#dj-rf .pl-knopf svg { width: 16px; height: 16px; fill: currentColor; }
#dj-rf .pl-knopf .i-play,
#dj-rf .pl-film.pause .pl-knopf .i-pause { display: none; }
#dj-rf .pl-film.pause .pl-knopf .i-play { display: block; }
#dj-rf .pl-knopf span { display: block; line-height: 0; }
#dj-rf .pl-ton svg { width: 18px; height: 18px; fill: none; }
#dj-rf .pl-ton .i-aus,
#dj-rf .pl-film.stumm .pl-ton .i-an { display: none; }
#dj-rf .pl-film.stumm .pl-ton .i-aus { display: block; }
#dj-rf .pl-pos { flex: 1; min-width: 0; height: 24px; margin: 0; border: 0; background: none; -webkit-appearance: none; appearance: none; touch-action: none; cursor: pointer; --p: 0%; }
#dj-rf .pl-pos::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, #fff var(--p), rgba(255,255,255,0.35) var(--p)); }
#dj-rf .pl-pos::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: #fff; }
#dj-rf .pl-pos::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255,255,255,0.35); }
#dj-rf .pl-pos::-moz-range-progress { height: 4px; border-radius: 4px; background: #fff; }
#dj-rf .pl-pos::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
#dj-rf .pl-zeit { flex: none; font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.92); }
#dj-rf .pl-ohneton { display: none; flex: none; align-items: center; gap: 5px; padding: 5px 10px 5px 8px; border-radius: 999px; background: rgba(255,255,255,0.18); font-size: 12px; font-weight: 600; }
#dj-rf .pl-ohneton svg { width: 15px; height: 15px; }
#dj-rf .pl-film.ohne-ton .pl-ohneton { display: inline-flex; }
#dj-rf .pl-film.ohne-ton .pl-ton { display: none; }
/* Finger: größerer Knopf am Regler */
@media (pointer: coarse) {
#dj-rf .pl-pos { height: 32px; }
#dj-rf .pl-pos::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7px; }
#dj-rf .pl-pos::-moz-range-thumb { width: 18px; height: 18px; }
}
/* Notarfoto groß (Lightbox) */
#dj-rf .gc-zoom { display: block; width: 100%; padding: 0; border: 0; border-radius: 14px; background: none; cursor: zoom-in; }
#dj-rf .lb { position: fixed; inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; overscroll-behavior: contain; touch-action: none; }
#dj-rf .lb[open] { display: flex; align-items: center; justify-content: center; }
#dj-rf .lb::backdrop { background: rgba(20,19,17,0.92); }
#dj-rf .lb-bild { display: flex; flex-direction: column; align-items: center; max-width: calc(100% - 160px); margin: 0; }
/* Alle Notarfotos sind quadratisch: Größe fest aus dem Fenster, damit beim Nachladen der großen Fassung nichts springt */
#dj-rf .lb-bild img { display: block; width: min(1080px, calc(100vw - 160px), calc(100vh - 130px)); width: min(1080px, calc(100vw - 160px), calc(100dvh - 130px)); max-width: none; height: auto; aspect-ratio: 1; border-radius: 14px; background: #2a2825; object-fit: cover; }
#dj-rf .lb-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 10px; margin-top: 14px; padding: 0 16px; text-align: center; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,0.75); }
#dj-rf .lb-cap b { font-family: "DJ Inter Tight", 'Inter Tight', sans-serif; font-weight: 700; font-size: 15.5px; color: #fff; }
#dj-rf .lb-sterne { display: inline-flex; align-items: center; }
#dj-rf .lb-sterne .g { width: 15px; height: 15px; margin-right: 5px; }
#dj-rf .lb-meta { flex-basis: 100%; }
#dj-rf .lb-zu,
#dj-rf .lb-pfeil { position: fixed; z-index: 2; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.95); color: var(--anthracite); box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
#dj-rf .lb-zu { top: 16px; top: max(16px, env(safe-area-inset-top)); right: 16px; }
#dj-rf .lb-zu svg { width: 18px; height: 18px; }
#dj-rf .lb-pfeil { top: 50%; margin-top: -24px; }
#dj-rf .lb-pfeil svg { width: 22px; height: 22px; }
#dj-rf .lb-zurueck { left: 24px; }
#dj-rf .lb-weiter { right: 24px; }
#dj-rf .lb-zu:hover,
#dj-rf .lb-pfeil:hover { background: #fff; color: var(--orange-dark); }
#dj-rf .pl-close:hover { border-color: var(--orange); }
#dj-rf .pl-close svg { width: 16px; height: 16px; }
/* ============ RESPONSIVE ============ */
@media (max-width: 1180px) {
#dj-rf .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto 400px clamp(300px, 36vw, 400px);
    grid-template-areas: "t t t t t t" "h h h v v v" "w w w s s s"; }
#dj-rf .b-text { padding: 40px 40px 32px; }
#dj-rf .reel-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
#dj-rf .bento { grid-template-rows: auto 340px clamp(300px, 36vw, 400px); }
#dj-rf .obj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#dj-rf .gal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#dj-rf .rf-item { padding: 48px 40px 40px; }
#dj-rf .near-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
#dj-rf .st-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
#dj-rf .st-intro { position: static; }
#dj-rf .promise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#dj-rf .promise-grid .promise:last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
#dj-rf .wrap { padding: 0 20px; }
#dj-rf .top { padding-top: 16px; }
#dj-rf .bento { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 248px auto;
    grid-template-areas: "t t" "h v" "s s"; }
#dj-rf .b-breit { display: none; }
#dj-rf .b-text { padding: 30px 22px 24px; border-radius: 22px; }
#dj-rf .b-text h1 { font-size: min(38px, 9.4vw); letter-spacing: -1.3px; }
#dj-rf .b-text .lead { font-size: 16px; }
/* Einstieg am Handy kurz (Artur 04.11.2026): Text nur bis „wie es war.“, ohne die beiden Buttons, damit Fotos und Clip gleich sichtbar sind */
#dj-rf .lead-mehr,
#dj-rf .b-ctas { display: none; }
#dj-rf .b-trust { gap: 8px 14px; margin-top: 26px; padding-top: 18px; }
#dj-rf .b-trust > span { white-space: normal; flex-wrap: wrap; row-gap: 2px; }
#dj-rf .b-foto,
#dj-rf .b-video,
#dj-rf .b-quote { border-radius: 18px; }
#dj-rf .b-quote { padding: 18px 20px; }
#dj-rf .bv-cap { padding: 10px 12px; }
#dj-rf .bv-cap b { font-size: 13.5px; }
#dj-rf .bv-cap span span { font-size: 11.5px; }
#dj-rf section { padding: 64px 0; }
#dj-rf .btn-row .btn { width: 100%; }
/* Clips und die nächste Überschrift rücken zusammen (Artur 04.11.2026) */
#dj-rf .reels { padding-top: 72px; padding-bottom: 20px; }
#dj-rf #objekte { padding-top: 44px; }
/* Clips und Referenzobjekte am Handy in zwei Reihen zum Wischen: vier sofort sichtbar, die nächste Spalte schaut an */
#dj-rf .reel-row,
#dj-rf .obj-grid { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-template-rows: repeat(2, auto); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; margin: 0 -20px; padding: 0 20px 4px; scrollbar-width: none; }
#dj-rf .reel-row::-webkit-scrollbar,
#dj-rf .obj-grid::-webkit-scrollbar { display: none; }
#dj-rf .reel-row { grid-auto-columns: 39%; gap: 14px 10px; }
#dj-rf .reel { min-width: 0; scroll-snap-align: start; }
#dj-rf .reel-btn { border-radius: 14px; }
#dj-rf .reel .play { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
#dj-rf .reel .dur { top: 8px; right: 8px; padding: 2px 7px; font-size: 10.5px; }
#dj-rf .reel-cap { margin-top: 8px; }
#dj-rf .reel-cap b { font-size: 13px; }
#dj-rf .reel-cap span { margin-top: 2px; font-size: 11.5px; }
#dj-rf .obj-grid { grid-auto-columns: 43%; gap: 10px; }
#dj-rf .oc,
#dj-rf .oc.spaeter { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; min-height: 0; border-radius: 14px; scroll-snap-align: start; }
#dj-rf .oc-body { display: contents; }
#dj-rf .oc-img { grid-area: 1 / 1; aspect-ratio: 4 / 3; }
#dj-rf .oc-status { grid-area: 1 / 1; align-self: start; justify-self: start; z-index: 1; margin: 7px; padding: 2px 8px 2px 3px; font-size: 10px; letter-spacing: 0.5px; }
#dj-rf .oc-status .haken { width: 13px; height: 13px; }
#dj-rf .oc .acts { grid-area: 1 / 1; align-self: end; justify-self: start; z-index: 1; flex-wrap: nowrap; margin: 0 6px 6px; padding: 0; gap: 4px; }
#dj-rf .oc .act { gap: 4px; height: 24px; padding: 0 8px; font-size: 11px; }
#dj-rf .oc .act svg { width: 11px; height: 11px; }
#dj-rf .oc .act + .act.play-act { width: 24px; padding: 0; justify-content: center; font-size: 0; }
#dj-rf .oc-typ { grid-row: 2; margin: 8px 9px 0; font-size: 12.5px; -webkit-hyphens: auto; hyphens: auto; }
#dj-rf .oc-ort { grid-row: 3; margin: 1px 9px 0; font-size: 11.5px; }
#dj-rf .oc-facts { grid-row: 4; align-content: flex-start; margin: 4px 9px 10px; gap: 0 8px; font-size: 11.5px; line-height: 1.45; }
#dj-rf .obj-more { display: none; }
#dj-rf .wisch { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
#dj-rf .wisch-bahn { position: relative; flex: 1; height: 3px; border-radius: 3px; background: var(--light-sand); overflow: hidden; }
#dj-rf .wisch-bahn i { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; border-radius: 3px; background: var(--orange); }
#dj-rf .wisch-text { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-soft); }
#dj-rf .wisch-text svg { width: 14px; height: 14px; }
#dj-rf .stadtwahl { margin-bottom: 20px; }
#dj-rf .section-head { margin-bottom: 28px; }
/* Alle Ausgangslagen auf einen Blick, kompakt und umbrechend statt zum Wischen */
#dj-rf .filters,
#dj-rf .st-intro .filters { flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
#dj-rf .filter { gap: 6px; padding: 7px 12px; font-size: 13px; }
#dj-rf .filter .n { font-size: 11.5px; }
#dj-rf .promise-grid { grid-template-columns: minmax(0, 1fr); }
#dj-rf .promise-grid .promise:last-child { grid-column: auto; }
#dj-rf .verlauf li { grid-template-columns: 84px 1fr; }
#dj-rf .st summary { grid-template-columns: 52px minmax(0, 1fr) 18px; gap: 12px; padding: 10px 14px 10px 10px; }
#dj-rf .st summary img { width: 52px; height: 52px; border-radius: 10px; }
#dj-rf .st-kopf b { font-size: 15px; }
#dj-rf .st-kopf span { font-size: 12.5px; }
#dj-rf .st-body { padding: 2px 16px 16px; }
#dj-rf .tally { gap: 14px; }
#dj-rf .tally .num { font-size: 46px; }
#dj-rf .tally .satz { font-size: 18px; }
#dj-rf .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
#dj-rf .gal:not(.offen) > figure:nth-child(n+11) { display: none; }
/* Name und Google-Sterne in einer Zeile, bis etwa 375px Breite; noch schmaler rutschen die Sterne darunter */
#dj-rf .gc-top { flex-wrap: wrap; gap: 2px 6px; }
#dj-rf .gc-name { font-size: 13.5px; }
#dj-rf .gc-stars .g { width: 12px; height: 12px; margin-right: 3px; }
#dj-rf .gc-stars .stars svg { width: 11px; height: 11px; }
#dj-rf .rf-item { padding: 36px 22px 28px; }
#dj-rf .rf-kern { font-size: 28px; letter-spacing: -0.8px; }
#dj-rf .rf-who { margin-top: 22px; }
#dj-rf .rf-meta { gap: 10px 18px; margin-top: 14px; }
#dj-rf .rf-lesen { margin-top: 24px; padding-top: 22px; }
#dj-rf .rf-text { font-size: 16px; line-height: 1.75; }
#dj-rf .rv-zeile { margin-top: 22px; }
/* Hinweis zu den Bewertungen eingeklappt, der Pfeil klappt den ganzen Text auf */
#dj-rf .rv-k { display: none; }
#dj-rf .rv-auf { display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--text-soft); cursor: pointer; }
#dj-rf .rv-auf svg { width: 13px; height: 13px; transition: transform 0.2s; }
#dj-rf .rv-note:not(.offen) .rv-mehr { display: none; }
#dj-rf .rv-note.offen .rv-mehr { display: block; margin-top: 4px; }
#dj-rf .rv-note.offen .rv-auf svg { transform: rotate(180deg); }
#dj-rf .rf-arrow { display: none; }
#dj-rf .rf-nav { margin: 18px -20px 0; padding: 0 20px; }
#dj-rf .map-legend span { margin: 0 2px; }
#dj-rf .map-legend i { width: 15px; }
#dj-rf .map-ort { font-size: 9.5px; }
#dj-rf .map-ort.mittel { font-size: 10.5px; }
#dj-rf .map-ort.gross { font-size: 12.5px; }
#dj-rf .map-ort.klein { display: none; }
#dj-rf .map-inner.nah .map-ort.klein { display: block; }
#dj-rf .faq-item summary { padding: 18px 20px; font-size: 16px; }
#dj-rf .faq-item .answer { padding: 0 20px 20px; font-size: 14.5px; }
#dj-rf .pl { grid-template-columns: minmax(0, 1fr); }
/* Foto am Handy randlos in voller Breite, oben Platz fürs X; blättern per Wischen */
#dj-rf .lb[open] { padding: 72px 0 16px; }
#dj-rf .lb-bild { max-width: 100%; }
#dj-rf .lb-bild img { width: min(100vw, calc(100vh - 160px)); width: min(100vw, calc(100dvh - 160px)); border-radius: 0; }
#dj-rf .lb-pfeil { display: none; }
#dj-rf .lb-zu { right: 12px; }
#dj-rf .pl video { aspect-ratio: 4 / 5; max-height: 62vh; }
#dj-rf .pl-body { padding: 22px 20px 20px; }
#dj-rf .pl-body h3 { font-size: 22px; }
#dj-rf .foot { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
#dj-rf, #dj-rf * { transition: none !important; scroll-behavior: auto !important; }
}


/* ============ NUR IN WORDPRESS ============ */

/* Sprungziele (#naehe, #bewertungen, #videos) nicht unter dem mobil klebenden Kopf verstecken */
#dj-rf [id] { scroll-margin-top: 96px; }