body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%}
/* ============================================================
   RIEDEL Rechtsanwaelte - Landingpage Maklergebuehren
   Design tokens
   ============================================================ */
:root {
  --ink:            #0B0D17;
  --ink-soft:       #1B2033;
  --navy:           #0E1226;
  --navy-2:         #171C36;
  --body:           #4A5068;
  --muted:          #767C93;
  --line:           #E3E4EE;
  --white:          #FFFFFF;

  /* Redell Corporate Dunkelblau - einzige Quelle fuer alle CTA-/Flaechenfarben */
  --redell-navy:      #18233F;
  --redell-navy-deep: #111A30;
  --redell-navy-soft: #E8EBF3;

  /* Dunkelblau von redell.com - nur fuer gefuellte Buttons (RED-3 #2),
     nicht fuer Text/Rahmen/Outline-Varianten, die bleiben bei --redell-navy */
  --btn-fill:      #1A3A60;
  --btn-fill-deep: #122B49;

  /* Grauflaeche fuer helle Sektionen (Kaeufer-und-Verkaeufer-Block) */
  --surface-grey:   #F4F5FA;
  --surface-line:   #E7E9F2;

  --violet:         #7C5CFC;
  --violet-2:       #A48BFB;
  --violet-soft:    #EFEBFE;
  --lavender:       #F1EFFC;
  --lavender-2:     #EDF1FB;
  --blue:           #4E7FEA;
  --cyan:           #2FB5D9;
  --error:          #D6455A;
  --error-soft:     #FBEAEC;

  --shell:          1280px;
  --gutter:         clamp(20px, 5vw, 64px);
  --radius:         2px;

  --sans: 'Poppins', 'Avenir Next', 'Futura', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --t: 420ms cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Sticky-Footer: #wrapper waechst, Footer bleibt am unteren Rand auch
   auf kurzen Seiten wie /cookie-einstellungen (drawer/form-jump-float/
   consent-banner sind position:fixed, nehmen also nicht am Flex-Layout
   teil und bleiben unberuehrt). */
#wrapper { flex: 1 0 auto; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.018em;
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* ============================================================
   Layout helpers
   ============================================================ */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: clamp(64px, 9vw, 128px); }
.section--tight { padding-block: clamp(52px, 7vw, 96px); }
/* Hell-graue Flaeche, hebt den Block vom weissen Rest der Seite ab */
.section--grey { background: var(--surface-grey); }

.kicker {
  display: block;
  margin-bottom: 22px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--violet-2);
}
.kicker--dark { color: var(--violet-2); }

.h-display { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
.h-section  { font-size: clamp(1.7rem, 3.1vw, 2.6rem); }
.h-card     { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

.lead { font-size: clamp(.94rem, 1.1vw, 1.02rem); color: var(--body); max-width: 46ch; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  --bg: var(--btn-fill);
  --fg: #fff;
  --tile-a: rgba(255,255,255,.18);
  --tile-b: rgba(255,255,255,.04);
  --tile-w: 48px;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 16px calc(var(--tile-w) + 18px) 16px 26px;
  background: var(--bg);
  color: var(--fg);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* Rahmen in Hintergrundfarbe: gefuellte und umrandete Buttons bleiben gleich hoch */
  border: 1px solid var(--bg);
  border-radius: var(--radius);
  transition: background var(--t), border-color var(--t), color var(--t), box-shadow var(--t);
}
.btn:hover {
  --tile-a: rgba(255,255,255,.28);
  --tile-b: rgba(255,255,255,.08);
  background: var(--btn-fill-deep);
  border-color: var(--btn-fill-deep);
  box-shadow: 0 12px 26px -16px rgba(26,58,96,.55);
}

/* Sekundaerer Button: nur Rahmen */
.btn--outline {
  --bg: transparent;
  --fg: var(--redell-navy);
  --tile-a: rgba(24,35,63,.14);
  --tile-b: rgba(24,35,63,.03);
  border-color: var(--line);
}
.btn--outline:hover {
  --tile-a: rgba(24,35,63,.22);
  --tile-b: rgba(24,35,63,.06);
  background: transparent;
  border-color: var(--redell-navy);
  color: var(--redell-navy);
  box-shadow: none;
}
/* Pfeilfeld: sitzt an der Innenkante des Rahmens, oben wie unten randlos */
.btn__slot {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--tile-w);
  overflow: hidden;
  background-image: linear-gradient(140deg, var(--tile-a), var(--tile-b));
  transition: background-image var(--t);
}
.btn__arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -4px 0 0 -9px;
  transition: transform 340ms cubic-bezier(.3,.7,.25,1);
}
/* Weg = halbe Feldbreite + etwas mehr als die halbe Pfeilbreite,
   damit der Pfeil das Feld vollstaendig verlaesst (Prozent = eigene Breite) */
.btn__arrow--next { transform: translateX(calc(-1 * (var(--tile-w) / 2 + 60%))); }
.btn:hover .btn__arrow { transform: translateX(calc(var(--tile-w) / 2 + 60%)); }
.btn:hover .btn__arrow--next { transform: translateX(0); }

/* ============================================================
   Header
   ============================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  /* Trennlinie ist immer sichtbar, damit sich die Navigation auch
     ohne Scroll-Zustand vom Hero abhebt */
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 18px -18px rgba(24,35,63,.45);
  transition: border-color var(--t), box-shadow var(--t);
}
.header.is-stuck {
  border-color: var(--surface-line);
  box-shadow: 0 10px 30px -22px rgba(24,35,63,.55);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  min-height: 82px;
}
.wordmark { display: flex; align-items: center; gap: 11px; line-height: 1; }
.wordmark__icon {
  flex: 0 0 auto;
  color: var(--ink);
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: square;
}
.wordmark__roof { stroke: var(--violet); stroke-width: 1.7; }
.wordmark__text { display: block; }
.wordmark__name {
  display: block;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .34em;
  color: var(--ink);
}
.wordmark__sub {
  display: block;
  margin-top: 6px;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
}
.wordmark--light .wordmark__icon { color: #fff; }
.wordmark--light .wordmark__roof { stroke: var(--violet-2); }
.wordmark--light .wordmark__name { color: #fff; }
.wordmark--light .wordmark__sub { color: rgba(255,255,255,.55); }

/* Redell Logo in Header und Footer (ersetzt die alte Wortmarke) */
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand__logo { width: auto; height: 40px; }
.brand--light .brand__logo { height: 44px; }

.nav { display: flex; gap: clamp(16px, 2.4vw, 34px); margin-left: auto; }
.nav a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color var(--t);
}
.nav a:hover { color: var(--violet); }

.header .btn { --tile-w: 40px; padding: 13px calc(var(--tile-w) + 16px) 13px 22px; }

.burger {
  display: none;
  width: 34px; height: 34px;
  padding: 0;
  background: none;
  border: 0;
}
.burger span {
  display: block;
  height: 1.5px;
  margin-left: auto;
  background: var(--ink);
  transition: width var(--t), transform var(--t), opacity var(--t);
}
.burger span:nth-child(1) { width: 26px; }
.burger span:nth-child(2) { width: 18px; margin-top: 6px; }
.burger span:nth-child(3) { width: 26px; margin-top: 6px; }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: var(--gutter);
  background: #17172F;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t), visibility var(--t);
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer a {
  padding: 14px 0;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .02em;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.drawer__close {
  position: absolute;
  top: 26px; right: var(--gutter);
  width: 44px; height: 44px;
  background: none;
  border: 0;
  color: #fff;
  font-size: 26px;
  line-height: 1;
}

/* ============================================================
   Hero
   ============================================================ */
.hero { position: relative; background: #fff; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  align-items: stretch;
  min-height: min(82vh, 700px);
}
.hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(44px, 6vw, 92px) clamp(28px, 4vw, 60px) clamp(48px, 6vw, 92px) var(--gutter);
  max-width: 660px;
  margin-left: auto;
  width: 100%;
}
.hero__copy .lead { margin-block: 26px 34px; }
.hero__facts { display: grid; gap: 12px; margin-bottom: 36px; }
.hero__facts li { display: flex; gap: 13px; font-size: .89rem; color: var(--body); }
.hero__facts svg { flex: 0 0 auto; margin-top: 5px; color: var(--violet); }
.hero__actions { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); flex-wrap: wrap; }

/* Springt direkt zum Formular - nur auf Mobile sichtbar, da das
   Formular dort erst nach Scrollen erreichbar ist */
.hero__form-jump { display: none; }

/* ============================================================
   Floating "Zurueck zum Formular" - erscheint erst, wenn #caseForm
   nicht mehr im Viewport ist (main.js). Nur unterhalb 1080px, weil
   der Header ab da seinen eigenen "FALL PRUEFEN"-Button verliert
   (siehe .header .btn im 1080px-Breakpoint) und sonst keine
   staendige Rueckkehr zum Formular mehr sichtbar waere.
   ============================================================ */
.form-jump-float {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(255,255,255,.98) 60%, rgba(255,255,255,0));
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--t), opacity var(--t);
}
.form-jump-float .btn { width: 100%; justify-content: space-between; box-shadow: 0 12px 26px -14px rgba(11,13,23,.45); }
@media (min-width: 1081px) { .form-jump-float { display: none; } }
.form-jump-float.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .form-jump-float { transition: none; }
}

/* diagonal visual */
.hero__visual {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  overflow: hidden;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(90deg,
        #fff 0%,
        rgba(255,255,255,.99) 22%,
        rgba(255,255,255,.92) 36%,
        rgba(255,255,255,.68) 50%,
        rgba(255,255,255,.30) 64%,
        rgba(255,255,255,.08) 76%,
        rgba(14,18,38,.08) 100%
      ),
        url("/files/theme/img/hero-immobilie-neu2.webp") center cover / cover no-repeat;
}
.hero__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.24), transparent 62%);
  mix-blend-mode: soft-light;
}
.hero__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__mark {
  position: absolute;
  top: 4%;
  right: 5%;
  left: auto;
  z-index: 2;
  font-size: clamp(180px, 26vw, 380px);
  font-weight: 600;
  line-height: .8;
  letter-spacing: -.04em;
  color: rgba(255,255,255,.4);
  pointer-events: none;
  user-select: none;
}

/* ============================================================
   Formular: Basis
   ============================================================ */
.form {
  padding: clamp(26px, 3.4vw, 44px);
  background: #fff;
  box-shadow: 0 40px 80px -50px rgba(11,13,23,.5);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: block; margin-bottom: 18px; }
.field > span {
  display: block;
  margin-bottom: 9px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 15px;
  font-family: inherit;
  font-size: .93rem;
  color: var(--ink);
  background-color: #FAFAFE;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--t), background-color var(--t);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: #CFD2E4; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  background-color: #fff;
  border-color: var(--violet);
}

/* Eigenes Chevron statt Systempfeil */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.6 6 6.1l5-4.5' stroke='%23767C93' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 11px 7px;
}
.field select:hover, .field select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.6 6 6.1l5-4.5' stroke='%237C5CFC' stroke-width='1.6'/%3E%3C/svg%3E");
}
.field select:invalid, .field select option[value=""] { color: var(--muted); }
.field select option { color: var(--ink); }
.field textarea { min-height: 96px; resize: vertical; }

.field__error {
  display: block;
  margin-top: 7px;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--error);
}
.field__error:empty { display: none; }

.field.has-error > span { color: var(--error); }
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--error);
  background-color: var(--error-soft);
}

.consent.has-error span { color: var(--error); }
.consent.has-error input { outline: 2px solid var(--error); outline-offset: 3px; }
/* RED-6: Fehlertext unter die Checkbox-Zeile statt als drittes Flex-Kind daneben */
.consent > input + span { flex: 1 1 0; min-width: 0; }
.consent .field__error { flex-basis: 100%; margin: 0 0 0 28px; }

/* RED-5: Die Groessenordnung-Box ist im Hero-Formular ausgeblendet
   (redell_hero.html.twig auskommentiert). Styles bleiben absichtlich stehen,
   damit die Box durch Einkommentieren sofort wieder korrekt aussieht. */
.estimate {
  display: grid;
  gap: 6px;
  margin: 4px 0 22px;
  padding: 20px 22px;
  background: var(--violet-soft);
  border-left: 2px solid var(--violet);
}
.estimate__label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--violet);
}
.estimate__value { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.estimate__note { font-size: .76rem; line-height: 1.6; color: var(--muted); }

.consent { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 24px; font-size: .78rem; line-height: 1.65; color: var(--muted); }
.consent input { margin-top: 3px; accent-color: var(--violet); }
/* RED-6: zwei Checkboxen hintereinander sollen als ein Block lesbar sein */
.consent + .consent { margin-top: -10px; }
.consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.form .btn { width: 100%; justify-content: space-between; }
.form__status { margin-top: 16px; font-size: .84rem; color: var(--violet); }
.form__status:empty { display: none; }
.form__status--error { color: var(--error); }

/* Formularkarte im Hero – liegt in derselben Grid-Zelle wie das Visual */
.hero__panel {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* rechts knapper als der Seitenrand, damit die Kartenkante auf der Rasterkante sitzt */
  padding: clamp(20px, 4vw, 56px) clamp(18px, 2.6vw, 40px) clamp(20px, 4vw, 56px) 0;
}
/* Die Karte greift bewusst über die Diagonale, damit die schraege Kante
   nicht zufaellig an einer Ecke herausschaut. */
.form--hero {
  width: 100%;
  max-width: 700px;
  margin-left: clamp(-52px, -3vw, -28px);
  padding: clamp(22px, 2.4vw, 34px);
  box-shadow: 0 46px 90px -46px rgba(11,13,23,.55);
}
/* Landeplatz fuer Anker-Spruenge (Mobile-CTA, Floating-Button) -
   haelt Abstand zum fixierten Header */
#caseForm { scroll-margin-top: 100px; }
.form__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 34px);
}
.form__col > .field:last-child { margin-bottom: 0; }
/* RED-6: Byline + Button liegen als Fusszeile unter dem zweispaltigen Feldraster */
.form__footer { display: flex; flex-direction: column; }
.form--hero .form__head { margin-bottom: 18px; }
.form--hero .form__head h2 {
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.form--hero .form__head p { margin-top: 9px; font-size: .84rem; line-height: 1.65; }
.form--hero .field { margin-bottom: 12px; }
.form--hero .field input, .form--hero .field select { padding: 12px 14px; }
/* Platz fuer das Chevron zurueckholen, das die Karte sonst wegkuerzt */
.form--hero .field select { padding-right: 38px; background-position: right 13px center; }
.form--hero .estimate {
  display: block;
  margin: 2px 0 14px;
  padding: 13px 16px;
}
.form--hero .estimate__label { display: block; }
.form--hero .estimate__value {
  display: inline-block;
  margin-top: 2px;
  font-size: 1.5rem;
}
.form--hero .estimate__note { display: block; margin-top: 4px; font-size: .72rem; }
.form--hero .btn { --tile-w: 44px; padding: 15px calc(var(--tile-w) + 16px) 15px 22px; }
/* RED-6 (15.09.2026): Der Schnellcheck hat jetzt sechs Felder, deshalb ist die
   einspaltige 470px-Karte aus RED-5 wieder raus — die Felder fuellen beide
   Spalten, Byline + Button bilden die Fusszeile (.form__footer). */
.form--hero .form__footer { margin-top: 18px; padding-top: 4px; border-top: 1px solid var(--line); }
.form--hero .form__footer .byline { margin-bottom: 14px; }
/* Fragen als Feldbeschriftung sind laenger als die alten Stichworte und brechen
   auf zwei Zeilen um. Damit die Eingabefelder beider Spalten auf einer Hoehe
   liegen, bekommt jede Beschriftung Platz fuer zwei Zeilen, Text unten buendig. */
.form--hero .field > span {
  display: flex;
  align-items: flex-end;
  min-height: 3em;
  line-height: 1.5;
}
/* Die freigehaltene Zeile bringt schon Luft mit — Feldabstand deshalb knapper */
.form--hero .form__col .field { margin-bottom: 4px; }
/* Natives Datumsfeld: gleiche Hoehe wie Text/Select, eigener Kalender-Indikator
   in der Chevron-Farbe statt des grauen Systemsymbols */
.field input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  min-height: 47px;
  line-height: 1.3;
}
.form--hero .field input[type="date"] { min-height: 45px; }
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.field input[type="date"]::-webkit-calendar-picker-indicator {
  width: 16px;
  height: 16px;
  padding: 0;
  margin-left: 6px;
  cursor: pointer;
  opacity: .55;
  transition: opacity var(--t);
}
.field input[type="date"]:hover::-webkit-calendar-picker-indicator,
.field input[type="date"]:focus::-webkit-calendar-picker-indicator { opacity: 1; }
/* Leeres Datumsfeld: Platzhalter-Segmente (tt.mm.jjjj) wie einen Placeholder faerben */
.field input[type="date"].is-empty { color: var(--muted); }
.field input[type="date"].is-empty:focus { color: var(--ink); }

/* flatpickr (RED-6): Anzeigefeld bekommt ein Kalender-Icon rechts, der Kalender
   selbst laeuft im Seiten-Look (Poppins, Violett, 2px-Radius). Selektoren sind
   bewusst spezifischer als die von flatpickr.min.css, das spaeter im Body geladen wird. */
.field input.flatpickr-alt {
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23767C93' stroke-width='1.3'%3E%3Crect x='1.5' y='2.5' width='13' height='12' rx='1'/%3E%3Cpath d='M1.5 6h13M5 1v3M11 1v3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  cursor: pointer;
}
.field input.flatpickr-alt:hover,
.field input.flatpickr-alt:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%237C5CFC' stroke-width='1.4'%3E%3Crect x='1.5' y='2.5' width='13' height='12' rx='1'/%3E%3Cpath d='M1.5 6h13M5 1v3M11 1v3'/%3E%3C/svg%3E");
}
.form--hero .field input.flatpickr-alt { padding-right: 38px; background-position: right 13px center; }
.field input.flatpickr-alt::placeholder { color: var(--muted); }

.flatpickr-calendar.flatpickr-calendar {
  width: 308px;
  padding: 8px 6px 10px;
  font-family: var(--sans);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -30px rgba(11,13,23,.45), 0 0 0 1px rgba(11,13,23,.02);
}
.flatpickr-calendar.flatpickr-calendar::before,
.flatpickr-calendar.flatpickr-calendar::after { display: none; }
.flatpickr-calendar .flatpickr-months { padding: 2px 0 6px; }
.flatpickr-calendar .flatpickr-months .flatpickr-month { height: 36px; color: var(--ink); }
.flatpickr-calendar .flatpickr-current-month { padding-top: 6px; font-size: .9rem; font-weight: 500; }
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
  font-family: inherit;
  font-weight: 500;
  color: var(--ink);
  border-radius: var(--radius);
}
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: var(--violet-soft); }
.flatpickr-calendar .flatpickr-current-month input.cur-year { font-family: inherit; font-weight: 500; color: var(--ink); }
.flatpickr-calendar .flatpickr-current-month .numInputWrapper:hover { background: var(--violet-soft); }
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month { top: 4px; padding: 8px 10px; color: var(--muted); }
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover { color: var(--violet); }
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--violet); }
.flatpickr-calendar span.flatpickr-weekday {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.flatpickr-calendar .flatpickr-days { width: 296px; }
.flatpickr-calendar .dayContainer { width: 296px; min-width: 296px; max-width: 296px; }
.flatpickr-calendar .flatpickr-day {
  max-width: 40px;
  height: 38px;
  line-height: 38px;
  font-size: .86rem;
  color: var(--ink);
  border-radius: var(--radius);
  border-color: transparent;
}
.flatpickr-calendar .flatpickr-day:hover,
.flatpickr-calendar .flatpickr-day.prevMonthDay:hover,
.flatpickr-calendar .flatpickr-day.nextMonthDay:hover { background: var(--violet-soft); border-color: var(--violet-soft); }
.flatpickr-calendar .flatpickr-day.today { border-color: var(--violet-2); }
.flatpickr-calendar .flatpickr-day.today:hover { background: var(--violet-soft); color: var(--ink); }
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-day.selected.today {
  background: var(--violet);
  border-color: var(--violet);
  color: #fff;
}
.flatpickr-calendar .flatpickr-day.prevMonthDay,
.flatpickr-calendar .flatpickr-day.nextMonthDay { color: #C4C7D6; }
.flatpickr-calendar .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover { color: #D5D7E3; background: transparent; }
/* Signaturzeile im Hero-Formular: wer den Fall prueft */
.byline {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 16px;
  padding-top: 14px;
}
.byline__photo {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
  filter: grayscale(1) contrast(1.04);
}
.byline__text { display: grid; gap: 1px; min-width: 0; margin-right: auto; }
.byline__text strong {
  font-size: .84rem;
  font-weight: 500;
  color: var(--ink);
  transition: color var(--t);
}
.byline__text > span {
  font-size: .72rem;
  line-height: 1.45;
  color: var(--muted);
}

/* ============================================================
   Modal: Angaben ergaenzen
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(14px, 4vw, 40px);
  opacity: 0;
  transition: opacity var(--t);
}
.modal[hidden] { display: none; }
.modal.is-open { opacity: 1; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 13, 23, .58);
  backdrop-filter: blur(3px);
}

.modal__card {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - clamp(28px, 8vw, 80px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(28px, 3.4vw, 44px);
  background: #fff;
  box-shadow: 0 60px 120px -50px rgba(11, 13, 23, .7);
  transform: translateY(14px) scale(.985);
  transition: transform var(--t);
}
.modal.is-open .modal__card { transform: none; }

.modal__close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  font-size: 26px;
  line-height: 1;
  color: var(--muted);
  transition: color var(--t);
}
.modal__close:hover { color: var(--ink); }

.modal__head { margin-bottom: 24px; padding-right: 34px; }
.modal__head .kicker { margin-bottom: 14px; }
.modal__head h2 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
.modal__head p { margin-top: 11px; font-size: .88rem; }

.modal__summary {
  display: grid;
  gap: 9px;
  margin: 0 0 24px;
  padding: 18px 20px;
  background: var(--violet-soft);
  border-left: 2px solid var(--violet);
}
.modal__summary div { display: flex; justify-content: space-between; gap: 16px; }
.modal__summary dt {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--violet);
  padding-top: 3px;
}
.modal__summary dd {
  margin: 0;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink);
  text-align: right;
}
.modal__card .btn { width: 100%; justify-content: space-between; margin-top: 6px; }

.modal__success { text-align: center; padding: 20px 4px 4px; }
.modal__success[hidden] { display: none; }
.modal__success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  color: var(--violet);
  background: var(--violet-soft);
  border-radius: 50%;
}
.modal__success h2 { font-size: clamp(1.25rem, 2vw, 1.55rem); outline: none; }
.modal__success p { margin: 12px 0 26px; font-size: .92rem; color: var(--muted); line-height: 1.6; }
.modal__success .btn { width: auto; justify-content: center; margin: 0 auto; }

/* ============================================================
   Cards grid (Expertise / Rechtsgrundlagen)
   ============================================================ */
.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(38px, 5vw, 62px);
}
.intro-grid p { font-size: .96rem; max-width: 52ch; }

.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 34px 28px 32px;
  background: #fff;
  border: 1px solid var(--surface-line);
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
/* Akzentkante als Pseudoelement, damit sie beim Hover wachsen kann */
.card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent, var(--violet));
  transition: height var(--t);
}
.card h3 { color: var(--ink); }
.card p { font-size: .87rem; line-height: 1.72; }
.card__tag {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--violet-2);
}

.card:hover {
  background: #fff;
  border-color: #D9DDEB;
  box-shadow: 0 12px 28px -22px rgba(24,35,63,.35);
}
.card:hover::after { height: 3px; }
.a-blue   { --accent: var(--blue); }
.a-cyan   { --accent: var(--cyan); }
.a-ink    { --accent: var(--ink); }
.a-violet { --accent: var(--violet); }

/* ============================================================
   Hinweisleiste unter den Karten
   ============================================================ */
.note-bar {
  margin-top: clamp(16px, 1.8vw, 24px);
  padding: 22px 26px;
  background: var(--ink);
  color: rgba(255,255,255,.72);
  font-size: .89rem;
}
.note-bar strong { color: #fff; font-weight: 500; }

/* ============================================================
   Ablauf & Kosten (dunkler Block)
   ============================================================ */
.plan {
  padding-block: clamp(58px, 8vw, 108px);
  background: var(--navy);
}
.plan h2 { color: #fff; }
.plan__intro { color: rgba(255,255,255,.62); }

.steps--dark .step { border-top-color: rgba(255,255,255,.18); }
.steps--dark .step h3 { color: #fff; }
.steps--dark .step p { color: rgba(255,255,255,.6); }

.plan__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(22px, 3vw, 44px);
  margin-top: clamp(38px, 5vw, 62px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid rgba(255,255,255,.16);
}
.plan__facts { display: flex; flex-wrap: wrap; gap: 14px clamp(24px, 3.4vw, 52px); margin: 0; }
.plan__facts dt {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.plan__facts dd {
  margin: 7px 0 0;
  font-size: 1.05rem;
  font-weight: 500;
  color: #fff;
}

/* Heller CTA auf dunkelblauem Grund - muss ohne Hover sichtbar sein */
.btn--light {
  --bg: #fff;
  --fg: var(--redell-navy);
  --tile-a: rgba(24,35,63,.12);
  --tile-b: rgba(24,35,63,.02);
}
.btn--light:hover {
  --tile-a: rgba(24,35,63,.20);
  --tile-b: rgba(24,35,63,.05);
  background: var(--redell-navy-soft);
  border-color: var(--redell-navy-soft);
  color: var(--redell-navy);
  box-shadow: 0 12px 26px -16px rgba(0,0,0,.55);
}

/* ============================================================
   Anwaltsprofil / Team
   Alle Personen (inkl. Patrick) stehen im selben Raster, gleiche
   Groesse, kein Foto sticht hervor - Team statt Chef+Mitarbeiter.
   ============================================================ */
.team__head { margin-bottom: clamp(26px, 3vw, 40px); }
.team__head .h-section { margin-bottom: 0; }

.team__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.team__member {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--line);
  transition: border-color var(--t);
}
.team__member:hover { border-bottom-color: var(--redell-navy); }
.team__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  margin-bottom: 14px;
  filter: grayscale(1);
}
.team__name { font-size: 1rem; font-weight: 500; color: var(--redell-navy); }
.team__role { font-size: .82rem; color: var(--muted); }
.team__contact { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; font-size: .8rem; }
.team__contact a { color: var(--redell-navy); border-bottom: 1px solid transparent; transition: border-color var(--t); }
.team__contact a:hover { border-bottom-color: var(--redell-navy); }
@media (max-width: 900px) { .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .team__grid { grid-template-columns: 1fr; } }

/* Kanzlei-Beschreibung: eigene Section mit grauem Hintergrund unter
   dem Team-Raster (weiss oben, grau unten - zwei sichtbare Sections).
   Nutzt dasselbe intro-grid-Muster wie die anderen Sections (Kicker +
   Ueberschrift links, Fliesstext rechts) statt einer schmalen Spalte. */
.team__about .intro-grid { margin-bottom: clamp(28px, 4vw, 44px); }
.team__about .h-section { margin-top: 10px; margin-bottom: 0; }
.team__about-role {
  display: block;
  margin-top: 10px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--violet);
}

.profile__creds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
}
.profile__creds li {
  display: flex;
  gap: 16px;
  padding: 15px 0;
  font-size: .91rem;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.profile__creds svg { flex: 0 0 auto; margin-top: 5px; color: var(--violet); }

.team__about-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin-top: 28px;
}
.team__about-contact a, .team__about-contact span {
  font-size: .88rem;
  color: var(--redell-navy);
}
.team__about-contact a { border-bottom: 1px solid var(--line); transition: border-color var(--t); }
.team__about-contact a:hover { border-color: var(--redell-navy); }
@media (max-width: 620px) { .profile__creds { grid-template-columns: 1fr; } }

/* ============================================================
   Ablauf / Steps
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 46px); }
.step { position: relative; padding-top: 30px; border-top: 1px solid var(--line); }
.step__no {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--violet);
}
.step h3 { margin: 18px 0 14px; font-size: 1.16rem; font-weight: 600; letter-spacing: -.01em; text-transform: none; }
.step p { font-size: .9rem; }

/* ============================================================
   FAQ
   ============================================================ */
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.faq__contact { display: grid; gap: 8px; margin-top: 26px; }
.faq__contact a {
  font-size: .9rem;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  justify-self: start;
  transition: border-color var(--t);
}
.faq__contact a:hover { border-color: var(--violet); }

.acc { border-bottom: 1px solid var(--line); }
.acc__q {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 22px 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.005em;
  transition: color var(--t);
}
.acc__q:hover { color: var(--violet); }
.acc__q span { flex: 1 1 auto; }
.acc__sign { position: relative; flex: 0 0 auto; width: 13px; height: 13px; }
.acc__sign::before, .acc__sign::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--violet);
  transition: transform var(--t);
}
.acc__sign::after { transform: rotate(90deg); }
.acc.is-open .acc__sign::after { transform: rotate(0deg); }
.acc__a { overflow: hidden; height: 0; transition: height var(--t); }
.acc__a > div { padding-bottom: 24px; font-size: .91rem; max-width: 62ch; }

/* ============================================================
   Footer
   ============================================================ */
.footer {
  padding-top: clamp(30px, 3.4vw, 44px);
  background: var(--ink);
  color: rgba(255,255,255,.55);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px clamp(24px, 4vw, 60px);
  padding-bottom: clamp(24px, 2.8vw, 34px);
}
.footer__links { display: flex; flex-wrap: wrap; gap: 12px clamp(18px, 2.4vw, 32px); }
.footer__links a { font-size: .82rem; transition: color var(--t); }
.footer__links a:hover { color: #fff; }

.footer__contact { display: flex; flex-wrap: wrap; gap: 10px clamp(18px, 2.4vw, 32px); }
.footer__contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  transition: color var(--t);
}
.footer__contact-item:hover { color: #fff; }
.footer__contact-icon {
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: square;
  stroke-linejoin: round;
}

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  padding-block: 18px 22px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .74rem;
}
.footer__bar nav { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-left: auto; }
.footer__bar a {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color var(--t);
}
.footer__bar a:hover { color: #fff; }

/* ============================================================
   Reveal animation
   ============================================================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ============================================================
   Legal subpages
   ============================================================ */
.legal { padding-block: clamp(48px, 7vw, 96px); max-width: 78ch; }
.legal h1 { margin-bottom: 30px; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.legal h2 { margin: 42px 0 14px; font-size: 1.1rem; }
.legal p, .legal li { font-size: .93rem; }
.legal ul { list-style: disc; padding-left: 22px; }
.legal p + p { margin-top: 14px; }
.legal .note {
  padding: 18px 20px;
  background: var(--violet-soft);
  border-left: 2px solid var(--violet);
  font-size: .88rem;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav { display: none; }
  .header .btn { display: none; }
  .burger { display: block; margin-left: auto; }
  /* RED-6: in den schmaleren Spalten brechen die langen Fragen auf drei Zeilen um */
  .form--hero .field > span { min-height: 4.5em; }
}
@media (max-width: 1080px) {
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero__visual { grid-column: auto; grid-row: auto; }
  .hero__panel {
    grid-column: auto;
    grid-row: auto;
    order: 6;
    padding-block: clamp(26px, 6vw, 40px);
    padding-inline: var(--gutter);
    justify-content: flex-start;
  }
  /* Weisse Karte auf weissem Hero braucht auf Mobile eine Kante */
  .form__cols { grid-template-columns: 1fr; }
  /* RED-6: einspaltig sollen die beiden Feldgruppen nahtlos untereinander laufen,
     und ohne Nachbarspalte braucht keine Beschriftung eine zweite Zeile freizuhalten */
  .form--hero .form__cols { gap: 12px; }
  .form--hero .field > span { min-height: 0; }
  .form--hero .form__col .field { margin-bottom: 12px; }
  .form--hero .form__col > .field:last-child { margin-bottom: 0; }
  .form--hero {
    max-width: none;
    margin-left: 0;
    border: 1px solid var(--line);
    box-shadow: 0 24px 50px -40px rgba(11,13,23,.5);
  }
  /* Reihenfolge auf schmalen Screens: Visual, Einstieg, Formular-Sprungmarke, Formular, Belege */
  .hero__copy { display: contents; }
  .hero__copy > * { padding-inline: var(--gutter); }
  .hero__copy > .kicker { order: 2; padding-top: clamp(30px, 7vw, 44px); }
  .hero__copy > h1 { order: 3; }
  .hero__copy > .lead { order: 4; margin-block: 22px 0; max-width: none; }
  .hero__copy > .hero__form-jump { order: 5; display: block; margin-block: 22px 28px; }
  .hero__form-jump .btn { width: 100%; justify-content: space-between; }
  .hero__copy > .hero__facts { order: 7; margin-block: 4px 24px; }
  .hero__copy > .hero__actions { order: 8; padding-bottom: clamp(34px, 7vw, 54px); }
  .hero__actions .btn { width: 100%; justify-content: space-between; }
  .hero__visual { order: 1; min-height: 36vw; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%); }
  .hero__mark { left: 8%; }
  .intro-grid, .faq__grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .plan__foot { flex-direction: column; align-items: flex-start; }
  .plan__foot .btn { width: 100%; justify-content: space-between; }
  /* Copyright-Zeile mittig, inklusive der zweiten Zeile beim Umbruch */
  .footer__bar { justify-content: center; text-align: center; }
}
@media (max-width: 620px) {
  .cards,   .criteria { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; gap: 0; }
  .brand__logo { height: 30px; }
  .brand--light .brand__logo { height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn__arrow { transition: none; }
  .btn:hover .btn__arrow { transform: none; }
  .btn:hover .btn__arrow--next { transform: translateX(calc(-1 * (var(--tile-w) / 2 + 60%))); }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; }
}
/* Mobile Feinschliff: mehr Luft nach dem Formular */
@media (max-width: 900px) {
  .form-hero {
    margin-bottom: 24px;
  }
}
/* Mobile Header: vollständig deckend */
@media (max-width: 900px) {
  .header {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
/* Mobile Hero: Formular näher an den Erklärungstext */
@media (max-width: 900px) {
  .hero_panel {
    padding-top: 16px;
  }
}
/* Hero: altes P und Raster ausblenden */
.hero__art,
.hero__mark {
    display: none !important;
}
/* Hero-Bild breiter in den linken Bereich ziehen */
@media (min-width: 901px) {

    .hero__visual {
        margin-left: -180px;
        width: calc(100% + 180px);
        clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
        z-index: 0;

        background:
            linear-gradient(
                90deg,
                rgba(255,255,255,.98) 0%,
                rgba(255,255,255,.90) 15%,
                rgba(255,255,255,.65) 30%,
                rgba(255,255,255,.28) 45%,
                rgba(255,255,255,.06) 60%,
                rgba(124,92,252,.04) 78%,
                rgba(14,18,38,.10) 100%
            ),
            url("/files/theme/img/hero-immobilie-neu2.webp") center right / cover no-repeat;
    }

    .hero__copy {
        position: relative;
        z-index: 2;
    }

    .hero_panel {
        position: relative;
        z-index: 3;
    }
}
/* Hero: stärkerer weißer Verlauf links neben dem Formular */
@media (min-width: 901px) {
  .hero__visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background: linear-gradient(
      90deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.98) 12%,
      rgba(255,255,255,.90) 24%,
      rgba(255,255,255,.65) 36%,
      rgba(255,255,255,.28) 48%,
      rgba(255,255,255,0) 62%
    );
  }
}
/* ==========================================================
   MOBILE HERO – FINAL
   Auf Mobile steht das Haus nicht mehr als eigener Bildstreifen
   ueber dem Text, sondern liegt - wie auf dem Desktop - als
   Hintergrund hinter der Formularkarte. Die Karte deckt den
   groessten Teil des Bildes ab, oben und an den Seiten bleibt
   ein Streifen sichtbar.
   ========================================================== */

@media (max-width: 900px) {

    /* Header vollständig weiß */
    .header {
        background: #fff !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }


    /* Hero */
    .hero {
        position: relative;
        padding-top: 0 !important;
        background: #fff;
    }


    /* Der frühere Bildstreifen über dem Text entfällt */
    .hero::before {
        content: none !important;
    }


    /* Der ursprüngliche Hero-Bildcontainer wird mobil
       nicht mehr benötigt und verursachte den Leerraum */
    .hero__visual {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    .hero__grid {
        position: relative;
        z-index: 2;

        min-height: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }


    .hero__copy {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }


    /* Abstand Header → Kicker */
    .hero__copy > .kicker {
        padding-top: clamp(30px, 7vw, 44px) !important;
        margin-top: 0 !important;
    }


    /* Bildbereich: das Haus liegt hinter der Formularkarte.
       Die sichtbare Bildhoehe ist bewusst von der Panel-Hoehe entkoppelt
       (::before hat eine eigene Hoehe statt inset:0) – sonst zieht "cover"
       das Foto auf die volle Panel-Hoehe (inkl. Formular) auf und zoomt
       es zu einer kaum erkennbaren Textur. */
    .hero__panel {
        position: relative;
        z-index: 1;
        padding-top: 300px !important;
        padding-bottom: clamp(30px, 7vw, 46px) !important;
    }

    .hero__panel::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 340px;
        z-index: 0;

        background-image:
            linear-gradient(
                180deg,
                rgba(255,255,255,.92) 0%,
                rgba(255,255,255,.25) 14%,
                rgba(255,255,255,0) 30%,
                rgba(255,255,255,0) 58%,
                rgba(255,255,255,.7) 82%,
                rgba(255,255,255,1) 100%
            ),
            url("/files/theme/img/hero-immobilie-neu2.webp");

        background-repeat: no-repeat;

        background-size:
            100% 100%,
            auto 190%;

        background-position:
            center center,
            55% 65%;

        pointer-events: none;
    }

    /* Die Karte liegt ueber dem Bild */
    .form--hero {
        position: relative;
        z-index: 1;
    }


    /* Formular mit etwas Abstand nach unten */
    .form-hero {
        margin-bottom: 24px;
    }
}
/* ==========================================================
   FARBWELT – REDELL DUNKELBLAU
   Tokens stehen in :root am Dateianfang (--redell-navy ...).
   Hier stehen nur noch die Flaechen, die bewusst dunkelblau sind.
   Die frueheren !important-Bloecke sind aufgeloest: die
   Buttonfarbe kommt jetzt direkt aus .btn / .btn--light.
   ========================================================== */

/* Haupttext / Headlines */
body,
h1,
h2,
h3,
h4,
.h-display,
.h-section,
.h-card {
    color: var(--redell-navy);
}

/* Dunkle Flaechen */
.plan     { background: var(--redell-navy); }
.note-bar { background: var(--redell-navy); }
.footer   { background: var(--redell-navy-deep); }

/* Navigation */
.nav a  { color: var(--redell-navy); }
.burger { color: var(--redell-navy); }

/* Primaerer CTA im Hero bleibt eine gefuellte Flaeche,
   obwohl er die Klasse .btn--outline traegt */
.hero__actions .btn--outline {
    --bg: var(--btn-fill);
    --fg: #fff;
    --tile-a: rgba(255,255,255,.18);
    --tile-b: rgba(255,255,255,.04);
    border-color: var(--btn-fill);
}
.hero__actions .btn--outline:hover {
    background: var(--btn-fill-deep);
    border-color: var(--btn-fill-deep);
    color: #fff;
}

/* Tastaturfokus */
.btn:focus-visible {
    outline: 2px solid var(--redell-navy);
    outline-offset: 3px;
}
.plan .btn:focus-visible,
.footer .btn:focus-visible {
    outline-color: #fff;
}

/* ==========================================================
   COOKIE-BANNER
   Ablehnen und Zustimmen sind gleich gross und gleich sichtbar.
   ========================================================== */
.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  max-height: 92vh;
  overflow-y: auto;
  background: #fff;
  border-top: 1px solid var(--surface-line);
  box-shadow: 0 -18px 40px -32px rgba(24,35,63,.6);
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(.22,.61,.36,1);
}
.consent-banner.is-visible { transform: translateY(0); }
.consent-banner[hidden] { display: none; }

.consent-banner__inner {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(20px, 3vw, 28px) var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}
.consent-banner__copy { flex: 1 1 auto; }

/* Kategorien - gleiches Set wie redell.com/cookies (RED-4).
   Im Banner hinter einem Toggle versteckt, damit der Banner kompakt
   bleibt - auf der Cookie-Einstellungen-Seite (kein Toggle dort) immer
   offen. Bewusst kein <details>: Chrome versteckt den Inhalt beim
   Schliessen ueber ein internes ::details-content, das sich per
   Author-CSS nicht mehr sauber ueberschreiben laesst - der Banner
   sprang beim Zuklappen deshalb hart zu. Stattdessen dasselbe
   height-Muster wie beim FAQ-Akkordion (.acc__a), das im main.js
   bereits per JS gesteuert wird. */
.consent-categories-toggle {
  display: block;
  margin-top: 14px;
  padding: 0;
  background: none;
  border: 0;
  font-size: .82rem;
  font-weight: 500;
  color: var(--redell-navy);
  cursor: pointer;
}
.consent-categories-toggle:hover { text-decoration: underline; }
.consent-categories-collapse { overflow: hidden; height: 0; transition: height var(--t); }
/* overflow:hidden auf dem Innen-Div verhindert, dass margin-top von
   .consent-categories nach aussen kollabiert - sonst zaehlt main.js'
   offsetHeight-Messung 16px zu wenig und der letzte Kategorie-Rand
   wird beim Aufklappen leicht abgeschnitten. */
.consent-categories-collapse > div { overflow: hidden; }
.consent-categories {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  margin-top: 16px;
}
.consent-category { padding: 10px 0; border-top: 1px solid var(--surface-line); }
.consent-category label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.consent-category input { accent-color: var(--redell-navy); flex: 0 0 auto; }
.consent-category input:disabled { cursor: default; opacity: .7; }
.consent-category__name { font-size: .84rem; font-weight: 500; color: var(--ink); }
.consent-category__badge {
  margin-left: 8px;
  font-size: .66rem;
  font-weight: 500;
  font-style: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.consent-category__desc { margin: 4px 0 0 26px; font-size: .78rem; line-height: 1.55; color: var(--body); }
@media (max-width: 640px) {
  .consent-categories { grid-template-columns: 1fr; }
}
.consent-banner__title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--redell-navy);
  margin-bottom: 10px;
}
.consent-banner__text {
  font-size: .85rem;
  line-height: 1.7;
  color: var(--body);
  max-width: none;
}
.consent-banner__text a { color: var(--redell-navy); border-bottom: 1px solid var(--line); }
.consent-banner__text a:hover { border-color: var(--redell-navy); }

.consent-banner__actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.consent-btn {
  min-width: 168px;
  padding: 14px 22px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid var(--redell-navy);
  border-radius: var(--radius);
  transition: background var(--t), color var(--t), border-color var(--t);
}
.consent-btn--decline { background: #fff; color: var(--redell-navy); }
.consent-btn--decline:hover { background: var(--redell-navy-soft); }
.consent-btn--save { background: var(--surface-grey); color: var(--redell-navy); border-color: var(--surface-line); }
.consent-btn--save:hover { background: var(--redell-navy-soft); border-color: var(--redell-navy); }
.consent-btn--accept { background: var(--btn-fill); border-color: var(--btn-fill); color: #fff; }
.consent-btn--accept:hover { background: var(--btn-fill-deep); border-color: var(--btn-fill-deep); }
.consent-btn:focus-visible { outline: 2px solid var(--redell-navy); outline-offset: 3px; }

/* Cookie-Einstellungen-Seite (RED-4) - eigenstaendige Seite, teilt sich
   .consent-categories/.consent-btn mit dem Banner in fe_page.html5 */
.cookie-settings { margin-top: clamp(28px, 4vw, 44px); }
.cookie-settings__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

@media (max-width: 900px) {
  .consent-banner__inner { flex-direction: column; align-items: stretch; gap: 18px; }
  .consent-banner__actions { flex-direction: column; }
  .consent-btn { width: 100%; min-width: 0; }
}
@media (max-width: 640px) {
  .cookie-settings__actions { flex-direction: column; }
  .cookie-settings__actions .consent-btn { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .consent-banner { transition: none; }
  .consent-categories-collapse { transition: none; }
}