/* =====================================================================
   LANDINGPAGE – Abschnitts-Stile
   =====================================================================
   TEIL 1 ist 1:1 aus startseite.html uebernommen (alle .rae-* Regeln),
   damit jede Landingpage exakt wie die Startseite aussieht:
   Hero, Container, Tag/Ueberschrift, Reveal, Wellen-Trenner, Pills,
   Faelle, Statement, Kontakt.

   TEIL 2 (ganz unten) sind die wenigen Ergaenzungen fuer Landingpages:
   zentrierte Abschnittskoepfe, Gebiete-Fliesstext, FAQ.

   Zusammen mit:
     assets/css/chrome.css   Header, Footer, RAE-Button
     assets/js/chrome.js     Includes + Kopf-/Fusszeilen-Logik
     assets/js/landing.js    Scroll-Effekte der Startseite
===================================================================== */

/* =====================================================================
   TEIL 1 – uebernommen aus startseite.html
===================================================================== */

main section[id] {
  scroll-margin-top: 96px;
}
.rae-container {
  max-width: 1200px; margin: 0 auto; padding: 0 2rem;
}
.rae-tag {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8a9aa4;
  margin-bottom: 0.9rem;
}
.rae-h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.35rem);
  color: #2e4a57;
  font-weight: 600;
}
.rae-h2 .rae-dot {
  color: var(--rae-hellblau);
}
.rae-reveal {
  opacity: 0; transform: translateY(16px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rae-reveal.rae-in {
  opacity: 1; transform: translateY(0);
}
.rae-hero {
  position: relative;
  height: clamp(560px, 74vh, 720px);
  padding-top: 74px; /* Ausgleich fuer den fixierten, ueberlagernden Header */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #274757; /* Grundton, bis das Bild da ist */
}
/* Medienflaeche: darin liegt das Standbild und darueber - falls moeglich -
   das Wasser-Canvas aus assets/js/wasser.js. Faellt der Effekt aus, bleibt
   das Bild allein stehen.
   Nachfahren-Selektor, nicht ">": auf der Startseite steckt das Bild in einem
   <picture> und waere damit kein direktes Kind der Flaeche. */
.rae-hero .rae-hero-media,
.rae-faelle-band .rae-band-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.rae-hero-media img,
.rae-hero-media canvas,
.rae-band-media img,
.rae-band-media canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;   /* gleiche Bildmitte wie der Shader */
  display: block;
}
/* Das Canvas blendet erst ein, wenn es tatsaechlich zeichnet, und wieder
   weg, sobald die Flaeche aus dem Blickfeld scrollt. */
.rae-hero-media canvas,
.rae-band-media canvas {
  opacity: 0;
  transition: opacity .7s ease;
}
.rae-hero-media.rae-wasser-sichtbar > canvas {
  opacity: 1;
}
.rae-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,37,48,0.18) 0%, rgba(13,37,48,0.05) 45%, rgba(13,37,48,0.28) 100%);
  pointer-events: none;
}
.rae-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1.5rem;
}
.rae-hero-title-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 2.4vw, 1.6rem);
  margin-bottom: clamp(1.6rem, 3.4vw, 2.4rem);
}
.rae-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 4.2vw, 2.8rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--color-white);
  text-shadow: 0 2px 22px rgba(13,37,48,0.4);
}
.rae-hero-title-dot {
  color: var(--color-neon-green);
}
.rae-scale {
  width: clamp(44px, 5.5vw, 60px);
  height: auto;
  color: var(--color-white);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  filter: drop-shadow(0 2px 12px rgba(13,37,48,0.45));
}
.rae-hero-link {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  font-weight: 500;
  color: var(--color-white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.75);
  padding-bottom: 0.2em;
  transition: color 0.35s ease, border-color 0.35s ease;
  text-shadow: 0 2px 18px rgba(13,37,48,0.35);
}
.rae-hero-link:hover {
  color: var(--color-neon-green); border-color: var(--color-neon-green);
}
.rae-cta {
  position: relative;
  width: 180px;
  height: 60px;
  margin-top: clamp(1.9rem, 3.6vw, 2.6rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  background: rgba(255,255,255,0.15); /* Weiss mit 85% Transparenz */
  backdrop-filter: blur(2px);         /* Ruhezustand: nur leicht milchig */
  -webkit-backdrop-filter: blur(2px);
  border: none;
  outline: none;
  transition: background 0.6s ease-in-out, backdrop-filter 0.6s ease-in-out, -webkit-backdrop-filter 0.6s ease-in-out;
}
.rae-cta:hover,
.rae-cta:focus-visible,
.rae-cta:active {
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
}
.rae-cta-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  fill: none;
  pointer-events: none;
}
.rae-cta-bg-line {
  stroke: rgba(255,255,255,0.8); stroke-width: 1.2;
}
.rae-cta-hl-line {
  stroke: url(#raeCtaGrad);
  stroke-width: 1.8;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.95s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rae-cta:hover .rae-cta-hl-line,
.rae-cta:focus-visible .rae-cta-hl-line,
.rae-cta:active .rae-cta-hl-line {
  stroke-dashoffset: 0;
}
.rae-cta span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--color-white);
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 10px rgba(13,37,48,0.4);
}
.rae-cta-phone {
  width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.rae-hero-hours {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: clamp(1.7rem, 3.2vw, 2.3rem);
  color: rgba(255,255,255,0.92);
  font-size: 0.85rem;
  font-style: italic;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 10px rgba(13,37,48,0.4);
}
.rae-dot-open {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-neon-green);
  box-shadow: 0 0 0 0 rgba(81,225,132,0.55);
  animation: rae-pulse 2.4s ease-out infinite;
}
@keyframes rae-pulse {
  0% { box-shadow: 0 0 0 0 rgba(81,225,132,0.55); }
  70% { box-shadow: 0 0 0 11px rgba(81,225,132,0); }
  100% { box-shadow: 0 0 0 0 rgba(81,225,132,0); }
}
.rae-intro {
  background: var(--color-white); padding: 5.5rem 0 5rem;
}
.rae-intro-grid {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 4rem; align-items: start;
}
.rae-intro h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  color: #2e4a57;
  font-weight: 600;
  max-width: 460px;
}
.rae-intro h1 .rae-dot {
  color: var(--rae-hellblau);
}
.rae-intro-text-wrap {
  position: relative;
}
.rae-intro-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(320px, 30vw, 520px);
  height: auto;
  margin: 0;
  transform: translate(-50%, -50%);
  opacity: 0.42;   /* Verlauf ist bereits sehr hell – hier nur noch leicht zuruecknehmen */
  pointer-events: none;
  z-index: 0;
}
.rae-intro-text {
  position: relative; z-index: 1; color: #6b7b84; font-size: 0.95rem; line-height: 2; max-width: 480px;
}
.rae-intro-text a {
  color: var(--rae-hellblau); text-decoration: underline; text-underline-offset: 3px; transition: color 0.3s ease;
}
.rae-intro-text a:hover {
  color: var(--color-dark-blue);
}
.rae-kollegen {
  background: var(--color-white); padding: 0 0 6rem;
}
.rae-kollegen-card {
  background: #f2f5f6;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
  padding: 3.5rem 3.5rem;
}
.rae-kollegen-card p {
  color: #6b7b84; font-size: 0.95rem; line-height: 1.95; max-width: 470px; margin-top: 1.4rem;
}
.rae-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(145deg, #cfdde4 0%, #a9c2ce 55%, #8fb0bf 100%); /* Fallback ohne Bild */
}
.rae-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.rae-gebiete {
  position: relative;
  background: var(--color-white);
  padding: 7rem 0 5.5rem;

  /* Die geschwungene Kante oben gehoert farblich zu dem Abschnitt, der
     DARUEBER steht - sonst sitzt dort ein fremder Grauton. Diese beiden
     Werte sind die Voreinstellung (Leistungsfelder). Steht ein anderer
     Abschnitt darueber, holt includes/themen.html dessen Wunschfarben
     (--rae-welle-oben / --rae-welle-unten, siehe unten) und setzt sie
     hier ein. Ein CSS-Nachbarselektor genuegt dafuer nicht: zwischen
     den Abschnitten stehen die <script>-Reste der Includes. */
  --rae-wave-oben:  #f1f4f7;   /* Endfarbe von .lp-lf */
  --rae-wave-unten: #fbfcfd;   /* fast Weiss - loest sich in den Abschnitt auf */
}
/* Jeder Abschnitt, der ueber der Welle stehen kann, sagt hier, in
   welcher Farbe er ausklingt und wohin die Welle verlaufen soll.
   Ein neuer Abschnitt an dieser Stelle braucht nur diese zwei Zeilen. */
.lp-lf {
  --rae-welle-oben:  #f1f4f7;
  --rae-welle-unten: #fbfcfd;
}
.rae-faelle {
  --rae-welle-oben:  #e5eaed;
  --rae-welle-unten: #f2f5f7;
}
.rae-wave {
  position: absolute; top: -1px; left: 0; width: 100%; height: 84px; display: block; pointer-events: none;
}
/* Kein flacher Farbklecks mehr, sondern ein feiner Verlauf nach unten:
   oben genau der Ton des Abschnitts darueber, unten beinahe Weiss. */
.rae-wave path {
  fill: url(#raeWaveVerlauf) var(--rae-wave-oben, #f1f4f7);
}
.rae-wave .rae-wave-oben  { stop-color: var(--rae-wave-oben, #f1f4f7); }
.rae-wave .rae-wave-unten { stop-color: var(--rae-wave-unten, #fbfcfd); }
.rae-pills {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem 1.4rem; margin-top: 2.6rem;
}
.rae-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  background: rgba(255,255,255,0.85);
  border: 1px solid #b7c6ce;
  border-radius: 999px;
  padding: 0.72rem 1.35rem;
  color: #3d5a68;
  font-size: 0.92rem;
  text-decoration: none;
  transition: var(--transition-smooth);
}
.rae-pill:hover {
  border-color: var(--rae-hellblau); color: var(--color-dark-blue); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(64,104,119,0.14);
}
.rae-pills {
  --rae-pill-fade: 1.8em;
}
.rae-pill-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}
.rae-pill-label.rae-fade {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--rae-pill-fade)), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - var(--rae-pill-fade)), transparent 100%);
}
.rae-pill.rae-pill-primary {
  border-width: 2px; border-color: #57717e; font-weight: 600;
}
.rae-ico-sprite {
  position: absolute; width: 0; height: 0; overflow: hidden;
}
.rae-pill .rae-ico {
  width: 19px;
  height: 19px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.82;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.rae-pill:hover .rae-ico {
  opacity: 1; transform: scale(1.08);
}
.rae-faelle-band {
  position: relative;
  padding: 2.1rem 0;
  overflow: hidden;
  background: #33596a;
}
/* Bewusst nur das Bild: ein animiertes Canvas durch einen Blur-Filter zu
   schicken kostet pro Frame einen kompletten Filterdurchgang. */
.rae-faelle-band .rae-band-media img {
  filter: blur(20px) saturate(1.15);
  transform: scale(1.14);
  transition: filter 1.25s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1.25s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: filter, transform;
}
.rae-faelle-band.rae-inview .rae-band-media img {
  filter: blur(0) saturate(1); transform: scale(1.02);
}
.rae-faelle-band .rae-band-media canvas {
  transform: scale(1.02);
}
/* Wasser erst zeigen, wenn das Band scharf ist - sonst blitzt es
   unter der Unschaerfe hervor. */
.rae-faelle-band.rae-inview .rae-band-media.rae-wasser-sichtbar > canvas {
  opacity: 1;
}
.rae-faelle-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.34) 45%, rgba(255,255,255,0.12) 100%);
  pointer-events: none;
}
.rae-faelle-band .rae-container {
  position: relative; z-index: 2;
}
.rae-faelle-band .rae-tag {
  color: #4d5f69; margin-bottom: 0.5rem;
}
.rae-faelle-band .rae-h2 {
  color: #223b47; line-height: 1.2;
}
.rae-faelle {
  background: linear-gradient(180deg, #eef1f3 0%, #e5eaed 100%); padding: 3.8rem 0 4.4rem;
}
.rae-cases {
  position: relative;
}
.rae-cases-rail {
  display: flex;
  gap: clamp(1.1rem, 2vw, 1.7rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 0.4rem 1.7rem;   /* Luft fuer Hover-Anhebung und Schatten */
  margin: 0 -0.4rem;
  cursor: grab;
  scrollbar-width: none;           /* Fortschrittsbalken uebernimmt die Anzeige */
}
.rae-cases-rail::-webkit-scrollbar {
  display: none;
}
.rae-cases-rail.rae-dragging {
  cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none;
}
.rae-cases-rail.rae-dragging .rae-case {
  transform: none;
}
.rae-case {
  flex: 0 0 clamp(282px, 32vw, 396px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(24,49,60,0.10);
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.5s ease;
}
.rae-case:hover {
  transform: translateY(-7px); box-shadow: 0 30px 66px rgba(24,49,60,0.18);
}
.rae-case-media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: linear-gradient(145deg, #e7ecef 0%, #cbd8de 100%);
}
.rae-case-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rae-case:hover .rae-case-media img {
  transform: scale(1.06);
}
.rae-case-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,37,48,0) 48%, rgba(13,37,48,0.5) 100%);
  pointer-events: none;
}
.rae-case-year {
  position: absolute;
  left: 1rem;
  bottom: 0.95rem;
  z-index: 2;
  padding: 0.32rem 0.75rem;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 1px solid rgba(255,255,255,0.4);
  color: var(--color-white);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
}
.rae-case-body {
  flex: 1; display: flex; flex-direction: column; gap: 0.6rem; padding: 1.35rem 1.45rem 1.6rem;
}
.rae-case-meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a9aa4;
}
.rae-case-meta i {
  width: 7px; height: 7px; flex: none; border: 1.4px solid var(--rae-hellblau); transform: rotate(45deg);
}
.rae-case-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.34rem;
  font-weight: 600;
  line-height: 1.3;
  color: #2e4a57;
}
.rae-case-text {
  color: #6b7b84; font-size: 0.89rem; line-height: 1.8;
}
.rae-cases-nav {
  display: flex; align-items: center; gap: 1.4rem; margin-top: 0.2rem;
}
.rae-cases-progress {
  position: relative; flex: 1; height: 2px; background: #cdd8de; overflow: hidden;
}
.rae-cases-progress span {
  position: absolute; top: 0; left: 0; height: 100%; width: 33%; background: var(--color-dark-blue);
}
.rae-cases-arrows {
  display: flex; gap: 0.55rem;
}
.rae-arrow {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #b7c6ce;
  border-radius: 50%;
  background: transparent;
  color: #5b7280;
  cursor: pointer;
  transition: var(--transition-smooth);
}
.rae-arrow:hover:not(:disabled) {
  border-color: var(--rae-hellblau); color: var(--color-dark-blue); background: rgba(255,255,255,0.75);
}
.rae-arrow:disabled {
  opacity: 0.3; cursor: default;
}
.rae-arrow svg {
  width: 20px; height: 20px;
}
.rae-statement {
  background: var(--color-white); padding: 7rem 0 3.5rem;
}
.rae-statement p {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.35rem, 2.9vw, 2.05rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #2e4a57;
  max-width: 1000px;
}
.rae-statement .rae-blau {
  color: var(--rae-hellblau);
}
.rae-map-section {
  background: var(--color-white); padding: 0 0 6rem;
}
.rae-map-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 1.8rem;
}
.rae-map-tile {
  margin: 0;
}
.rae-map {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 300px;
  overflow: hidden;
  border-radius: 6px;
  background: linear-gradient(145deg, #2f515f 0%, #406877 55%, #557d8d 100%);
  box-shadow: 0 24px 60px rgba(24,49,60,0.16);
}
.rae-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* Einfärbung in der Signaturfarbe der Seite (Petrol #406877): entsättigt statt neon */
  filter: grayscale(1) sepia(0.85) hue-rotate(152deg) saturate(1.05) brightness(0.85) contrast(1.02);
}
.rae-map-caption {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.1rem;
  color: #6b7b84;
  font-size: 0.88rem;
}
.rae-map-caption .rae-ico-diamond {
  width: 9px; height: 9px; border: 1.6px solid var(--rae-hellblau); transform: rotate(45deg); flex: none;
}
.rae-map-caption + .rae-map-caption {
  margin-top: 0.45rem;
}
.rae-kontakt {
  position: relative;
  min-height: 68vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 1.5rem;
  overflow: hidden;
  background: linear-gradient(160deg, #223d49 0%, #33596a 55%, #406877 100%); /* Fallback ohne Foto */
}
.rae-kontakt {
  --rae-kbg-blur: 14px;
}
.rae-kontakt-bg-stack {
  position: absolute; inset: 0; overflow: hidden;
}
.rae-kontakt-bg-stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06); /* verhindert helle Blur-Raender am Bildrand */
  filter: blur(var(--rae-kbg-blur));
  transition: opacity 1.8s ease;
  will-change: opacity, filter;
}
.rae-kontakt-bg-stack img.rae-active {
  opacity: 1;
}
.rae-kontakt::after {
  content: ''; position: absolute; inset: 0; background: rgba(20,40,50,0.18);
}
.rae-kontakt-panel {
  position: relative;
  z-index: 2;
  background: rgba(245,247,249,0.42);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.35);
  padding: 2.4rem 3rem 2.2rem;
  text-align: center;
  max-width: 640px;
  width: 100%;
  box-shadow: 0 30px 80px rgba(13,37,48,0.28);
}
.rae-kontakt-panel h2 {
  font-size: 1.9rem; color: #21414f; margin-bottom: 1.4rem;
}
.rae-kontakt-actions {
  display: flex; justify-content: center; gap: 2.6rem; flex-wrap: wrap;
}
.rae-cbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #21414f;
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.35s ease;
}
.rae-cbtn .icon-mask {
  width: 21px; height: 21px;
}
.rae-cbtn-mail:hover,
.rae-cbtn-mail:active {
  color: var(--rae-mail-blau);
}
.rae-cbtn-call:hover,
.rae-cbtn-call:active {
  color: var(--rae-tel-gruen);
}
.rae-cbtn-call:hover .icon-mask-phone,
.rae-cbtn-call:active .icon-mask-phone {
  transform: rotate(var(--phone-rotate));
}
.rae-kontakt-hours {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.6rem;
  color: #2c4a58;
  font-size: 0.88rem;
  font-style: italic;
}
.rae-kontakt-hours svg {
  width: 17px; height: 17px; flex: none;
}
@media (max-width: 992px) {
  .rae-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rae-arrow-prev {
    left: -10px;
  }
  .rae-arrow-next {
    right: -10px;
  }
  .rae-arrow {
    color: #7d95a1;
  }
}
@media (max-width: 768px) {
  .rae-intro-grid,
.rae-kollegen-card {
    grid-template-columns: 1fr; gap: 2.2rem;
  }
  .rae-kollegen-card {
    padding: 2.2rem 1.6rem;
  }
  .rae-intro {
    padding: 4rem 0 3.5rem;
  }
  .rae-container {
    padding: 0 1.4rem;
  }
  .rae-case-body {
    padding: 1.2rem 1.25rem 1.4rem;
  }
  .rae-kontakt-panel {
    padding: 1.9rem 1.4rem;
  }
  .rae-kontakt-actions {
    gap: 1.6rem;
  }
  .rae-statement {
    padding: 5rem 0 2.5rem;
  }
  .rae-map-grid {
    grid-template-columns: 1fr;
  }
  .rae-map {
    aspect-ratio: auto; height: 380px; min-height: 0;
  }
}
@media (max-width: 520px) {
  .rae-pills {
    grid-template-columns: 1fr;
  }
  .rae-case {
    flex: 0 0 84vw;
  }
  .rae-hero {
    height: 78vh; min-height: 560px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rae-faelle-band .rae-band-media img {
    filter: none; transform: none; transition: none;
  }
  .rae-dot-open {
    animation: none;
  }
  .rae-reveal {
    opacity: 1; transform: none; transition: none;
  }
}

/* =====================================================================
   TEIL 2 – Ergaenzungen fuer Landingpages
   Wenig und bewusst schlicht: zentrierte Abschnittskoepfe, der
   Gebiete-Fliesstext und ein einfaches FAQ.
===================================================================== */

/* ---------- Abschnittskopf: auf dem Desktop mittig ---------- */
.lp-kopf {
    max-width: 780px;
    margin: 0 auto clamp(2.2rem, 4.5vw, 3.2rem);
    text-align: center;
}
.lp-kopf .rae-tag { text-align: center; }
.lp-kopf p {
    margin-top: 1rem;
    color: #6b7b84;
    font-size: 0.98rem;
    line-height: 1.9;
}

/* ---------- Buttons: immer mittig ---------- */
.lp-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: clamp(2rem, 4vw, 2.8rem);
}
.lp-btns--unter { flex-direction: column; gap: 0.9rem; }

/* Hero-Button auf dem Video: gleiche Form wie auf der Startseite,
   nur die Flaeche ist hellgruen (Hover gruen) und die Linie hell. */
.rae-btn--video {
    --btn-line: rgba(255, 255, 255, 0.8);
    margin-top: clamp(1.9rem, 3.6vw, 2.6rem);
}
/* Auf dem Video braucht das Hellgrün etwas mehr Deckung, damit es traegt.
   Die Glas-Variante (--dunkel) bleibt davon unberuehrt. */
.rae-btn--video:not(.rae-btn--dunkel) { --btn-fill: rgba(188, 245, 213, 0.82); }
.lp-btns--unter .rae-btn { margin-top: 0; }

/* ---------- Textabschnitt (Kanzlei) ---------- */
.lp-text {
    max-width: 780px;
    margin: 0 auto;
    color: #6b7b84;
    font-size: 0.98rem;
    line-height: 2;
}
.lp-text p + p { margin-top: 1.1rem; }
.lp-gegner {
    max-width: 780px;
    margin: clamp(2rem, 4vw, 2.8rem) auto 0;
    padding: 1.3rem 1.6rem;
    text-align: center;
    border-top: 1px solid #e8ecef;
    border-bottom: 1px solid #e8ecef;
    color: #2e4a57;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.9;
}

/* ---------- GEBIETE – Fliesstext ----------
   Farben exakt wie auf rechtsanwalt-elci.de/mietrecht                */
.lp-gebiete-text { background: var(--color-light-gray); padding: 5.5rem 0 5rem; }
.lp-gebiete-kicker {
    display: block;
    text-align: center;
    color: #113647;
    font-size: 1.02rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.6rem;
}
.lp-gebiete-h2 {
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.7rem, 3.2vw, 2.35rem);
    font-weight: 600;
    line-height: 1.15;
    color: #333333;
    margin-bottom: clamp(2.4rem, 5vw, 3.4rem);
}
.lp-gebiete-liste { max-width: 820px; margin: 0 auto; }
.lp-gebiet h3 {
    font-family: 'Instrument Sans', sans-serif;
    color: #2684b0;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 0.3rem;
}
.lp-gebiet-sub { color: #333333; font-size: 1rem; line-height: 1.6; margin-bottom: 1rem; }
.lp-gebiet p { color: #333333; font-size: 1rem; font-weight: 300; line-height: 1.95; }
.lp-gebiet p + p { margin-top: 1rem; }
.lp-gebiet strong { font-weight: 700; }
.lp-gebiet-trenner {
    display: block;
    margin: 2.4rem 0;
    color: rgba(51, 51, 51, 0.45);
    line-height: 1;
    user-select: none;
}

/* ---------- FAQ ---------- */
.lp-faq { background: var(--color-white); padding: 5.5rem 0 5rem; }
.lp-faq-liste { max-width: 780px; margin: 0 auto; border-top: 1px solid #e8ecef; }
.lp-faq-item { border-bottom: 1px solid #e8ecef; }
.lp-faq-frage {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 1.25rem 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    font-weight: 600;
    color: #2e4a57;
    transition: color 0.3s ease;
}
.lp-faq-frage:hover { color: var(--rae-hellblau); }
.lp-faq-ico {
    flex: none;
    width: 12px; height: 12px;
    background: var(--rae-hellblau);
    transform: rotate(45deg);
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.3s ease;
}
.lp-faq-item.is-open .lp-faq-ico { transform: rotate(225deg) scale(0.8); background: var(--color-neon-green); }
.lp-faq-antwort { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
.lp-faq-item.is-open .lp-faq-antwort { grid-template-rows: 1fr; }
.lp-faq-antwort > div { overflow: hidden; }
.lp-faq-antwort p { padding: 0 0 1.4rem; color: #6b7b84; font-size: 0.94rem; line-height: 1.95; }
.lp-faq-antwort p + p { padding-top: 0; margin-top: -0.6rem; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .lp-gebiete-text { padding: 4rem 0 3.5rem; }
    .lp-faq { padding: 4rem 0 3.5rem; }
    .lp-btns .rae-btn { width: 100%; max-width: 320px; }
}

/* Langer Hero-Titel + Waage passen auf schmalen Displays nicht nebeneinander */
@media (max-width: 640px) {
    .rae-hero .rae-scale { display: none; }
    .rae-hero-title-row { gap: 0; }
}

/* =====================================================================
   TEIL 3 – Bausteine der Immobilienrechts-Seiten
   Brotkrumen, Leistungsfelder, 2PanoImages.
   Alle drei sind reine Include-Abschnitte; ihre Inhalte stehen im
   <head> der Seite (RAE_BREADCRUMB, RAE_LEISTUNGSFELDER, RAE_2PANOIMAGES).
===================================================================== */

/* ---------- HERO mit Foto statt Video ----------
   Ein Standbild traegt die weisse Schrift schlechter als das dunkle
   Video. includes/hero.html setzt die Klasse selbst, sobald es ein
   Foto einsetzt. */
.rae-hero--foto::after {
    background:
        linear-gradient(180deg, rgba(13,37,48,0.42) 0%, rgba(13,37,48,0.26) 45%, rgba(13,37,48,0.5) 100%);
}
.rae-hero--foto .rae-hero-content::before {
    content: '';
    position: absolute;
    inset: -10% -8%;
    background: radial-gradient(60% 60% at 50% 45%, rgba(9,28,37,0.42) 0%, rgba(9,28,37,0) 72%);
    pointer-events: none;
    z-index: -1;
}

/* ---------- BROTKRUMEN – kleine Pfadleiste unter dem Hero ---------- */
.lp-krumen {
    background: var(--color-white);
    padding: 1.6rem 0 0;
}
.lp-krumen-liste {
    display: flex;
    /* Einzeilig – der Include verkleinert notfalls die Schrift.
       Erst wenn auch das nicht reicht, schaltet er auf Umbruch um. */
    flex-wrap: nowrap;
    white-space: nowrap;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.78rem;
    font-style: italic;
    letter-spacing: 0.05em;
    line-height: 1.6;
}
.lp-krumen-stufe {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #6b7b84;
}
.lp-krumen-stufe a {
    position: relative;
    color: #496775;
    text-decoration: none;
    transition: color 0.35s ease;
}
/* Unterstrich waechst von links – dieselbe Handschrift wie bei den
   Links im Fliesstext, nur feiner. */
.lp-krumen-stufe a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lp-krumen-stufe a:hover,
.lp-krumen-stufe a:focus-visible { color: var(--rae-hellblau); }
.lp-krumen-stufe a:hover::after,
.lp-krumen-stufe a:focus-visible::after { transform: scaleX(1); }
.lp-krumen-liste.lp-krumen-umbruch { flex-wrap: wrap; white-space: normal; }
.lp-krumen-trenner { color: #c6d0d6; }
.lp-krumen-hier > span { color: var(--rae-hellblau); }

/* ---------- LEISTUNGSFELDER ---------- */
/* Das Grau laeuft zum Fuss hin eine Spur dunkler aus. Dort setzt die
   geschwungene Kante des naechsten Abschnitts an (--rae-wave-oben) und
   nimmt genau diesen Ton auf - der Uebergang bleibt unsichtbar. */
.lp-lf {
    background: linear-gradient(180deg,
                var(--color-light-gray) 0%,
                var(--color-light-gray) 62%,
                #f1f4f7 100%);
    padding: 5rem 0 4.5rem;
}
.lp-lf-kopf {
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 2.9rem);
}
.lp-lf-kopf .rae-tag { text-align: center; }
.lp-lf-titel {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.7rem, 3.2vw, 2.35rem);
    font-weight: 600;
    line-height: 1.15;
    color: #2e4a57;
}
/* Der Sprite haelt nur die Icon-Vorlagen; sichtbar ist er nie. */
.lp-lf-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.lp-lf-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--lf-spalten, 4), minmax(0, 1fr));
    padding-bottom: 8.5rem;   /* Platz fuer den eingeblendeten Text */
}
/* Mehrere Reihen: mit Abstand statt aneinandergeschoben. */
.lp-lf-grid--reihen { gap: 1rem; }
.lp-lf-grid--reihen .lp-lf-feld + .lp-lf-feld .lp-lf-kachel { margin-left: 0; }

.lp-lf-kachel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    width: 100%;
    min-height: 150px;
    padding: 1.7rem 1.1rem;
    margin: 0;
    background: var(--color-white);
    border: 1px solid #e2e8ec;
    border-radius: 0;
    color: #2e4a57;
    font-family: 'Cormorant Garamond', serif;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.45s ease, color 0.35s ease,
                transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.55s ease;
}
/* Kacheln stossen aneinander wie auf der Vorlage: die Rahmen liegen
   uebereinander, damit dazwischen kein doppelter Strich entsteht. */
.lp-lf-feld + .lp-lf-feld .lp-lf-kachel { margin-left: -1px; }
.lp-lf-ico {
    width: 38px; height: 38px;
    fill: none;
    stroke: #8aa6b4;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.45s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lp-lf-label {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
}
/* Kante mit wanderndem Verlauf – derselbe Signatureffekt wie bei den
   Teamkarten und dem Anruf-Button. Der Verlauf liegt im Sprite des
   Includes (#raeLfGrad) und wandert dauerhaft; sichtbar wird er erst,
   wenn sich die Linie zeichnet.

   Es gibt zwei Rahmen je Feld:
     in der Kachel   – am Schreibtisch, zeichnet beim Ueberfahren
     um das Feld     – auf dem Handy, umfasst Kachel UND aufgegangenen
                       Text, waechst also beim Aufklappen mit
   Sichtbar ist immer genau einer. */
.lp-lf-rahmen {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    fill: none;
    pointer-events: none;
    /* Nichts abschneiden: die Linie liegt genau auf der Kante. */
    overflow: visible;
}
.lp-lf-rahmen polyline {
    stroke: url(#raeLfGrad);
    stroke-width: 1.6;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 0.95s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Der Rahmen in der Kachel spannt sich ueber deren AUSSENkante. Ohne
   das laege er im Inneren des eigenen 1px-Rahmens – zwei Linien
   nebeneinander statt einer auf der Kante. */
.lp-lf-kachel > .lp-lf-rahmen {
    left: -1px; top: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
}
/* Schreibtisch: nur der Rahmen in der Kachel */
.lp-lf-feld > .lp-lf-rahmen { display: none; }
.lp-lf-feld.is-aktiv .lp-lf-kachel > .lp-lf-rahmen polyline { stroke-dashoffset: 0; }

.lp-lf-kachel:hover,
.lp-lf-kachel:focus-visible { z-index: 3; border-color: #cddbe3; }
.lp-lf-feld.is-aktiv .lp-lf-kachel {
    z-index: 4;
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(64, 104, 119, 0.13);
}
.lp-lf-feld.is-aktiv .lp-lf-ico {
    stroke: var(--rae-hellblau);
    transform: translateY(-2px) scale(1.06);
}

/* Alle Texte liegen an derselben Stelle unter der Reihe; sichtbar ist
   immer nur einer. Der Wechsel laeuft ueber Deckkraft, eine kleine
   Aufwaertsbewegung und eine kurze Unschaerfe – dadurch wirkt er
   weicher als ein hartes Umschalten. */
.lp-lf-huelle {
    position: absolute;
    left: 50%;
    bottom: 0.6rem;
    width: min(100%, 940px);
    transform: translateX(-50%);
}
.lp-lf-innen {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity 0.55s ease,
                filter 0.55s ease,
                transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lp-lf-feld.is-aktiv .lp-lf-innen {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
    pointer-events: auto;
}
.lp-lf-text {
    margin: 0;
    text-align: center;
    color: #4a5c66;
    font-size: 0.98rem;
    line-height: 1.95;
}
/* "Zur Seite" gehoert zum Aufklapper und damit dem Handy; am
   Schreibtisch ist die Kachel selbst der Link. */
.lp-lf-mehr { display: none; }

/* Handy und Tablet: kein Hover, deshalb wird aus der Reihe eine Liste
   von Aufklappern. Ein Tipp faehrt den Text auf – die Hoehe waechst
   ueber grid-template-rows (0fr -> 1fr), der Text wird gleichzeitig
   scharf und schiebt sich hoch, und unter der Kachel laeuft eine feine
   Linie ein. Dieselbe Bewegung wie im FAQ, nur mit Unschaerfe. */
@media (max-width: 900px) {
    .lp-lf { padding: 4rem 0 3.5rem; }
    .lp-lf-grid { grid-template-columns: 1fr; padding-bottom: 0; gap: 0.9rem; }

    .lp-lf-kachel {
        min-height: 0;
        flex-direction: row;
        justify-content: flex-start;
        gap: 1rem;
        padding: 1.15rem 1.3rem;
        margin-left: 0;
        width: 100%;
        text-align: left;
    }
    .lp-lf-feld + .lp-lf-feld .lp-lf-kachel { margin-left: 0; }
    .lp-lf-ico { width: 30px; height: 30px; flex: none; }
    .lp-lf-label { text-align: left; font-size: 1.15rem; flex: 1; }

    /* Die Kante gehoert hier dem ganzen Feld und zeichnet sich beim
       Aufklappen – nicht beim Ueberfahren, das es hier nicht gibt.
       Waehrend der Kasten aufgeht, zieht includes/leistungsfelder.html
       die Linie Bild fuer Bild mit. */
    .lp-lf-feld { position: relative; }
    .lp-lf-feld > .lp-lf-rahmen {
        display: block;
        /* Die Kachel ist deckend weiss und liegt selbst auf einer
           Ebene. Ohne diesen Wert verschwaende die Kante hinter ihr
           und man saehe nur den Teil um den aufgegangenen Text. */
        z-index: 6;
    }
    .lp-lf-kachel > .lp-lf-rahmen { display: none; }
    .lp-lf-feld.is-offen > .lp-lf-rahmen polyline { stroke-dashoffset: 0; }
    .lp-lf-feld.is-offen .lp-lf-ico { stroke: var(--rae-hellblau); }
    /* Geoeffnet zeichnet allein die Kante den Umriss. Der eigene
       Rahmen der Kachel bleibt nur unten als Trennlinie stehen,
       sonst laegen zwei Linien uebereinander. */
    .lp-lf-feld.is-offen .lp-lf-kachel {
        border-color: transparent;
        border-bottom-color: #e8edf0;
    }

    /* Ohne Hover gibt es keine "aktive" Kachel – ungeoeffnet sehen
       deshalb alle gleich aus. */
    .lp-lf-feld.is-aktiv .lp-lf-kachel {
        transform: none;
        box-shadow: none;
        border-color: #e2e8ec;
    }
    .lp-lf-feld.is-aktiv:not(.is-offen) .lp-lf-ico { stroke: #8aa6b4; transform: none; }

    /* Der Aufklapper selbst */
    .lp-lf-huelle {
        position: static;
        width: auto;
        transform: none;
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    .lp-lf-feld.is-offen .lp-lf-huelle { grid-template-rows: 1fr; }
    .lp-lf-innen {
        overflow: hidden;
        min-height: 0;
        opacity: 0;
        filter: blur(5px);
        transform: translateY(-8px);
        pointer-events: none;
        transition: opacity 0.4s ease,
                    filter 0.4s ease,
                    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    .lp-lf-feld.is-offen .lp-lf-innen {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
        pointer-events: auto;
        /* Erst aufgehen, dann scharf werden – das wirkt ruhiger. */
        transition-delay: 0.08s;
    }
    .lp-lf-text {
        text-align: left;
        padding: 1rem 1.3rem 0;
        font-size: 0.93rem;
        line-height: 1.85;
    }
    /* Eine Zeile Luft unter dem letzten Inhalt, damit der Text nicht
       auf der Kante klebt. Sie haengt bewusst am Inhalt und nicht an
       der Huelle: deren Innenabstand liesse sich beim Zuklappen nicht
       auf null zusammenziehen und bliebe als leerer Streifen stehen. */
    .lp-lf-innen > :last-child { margin-bottom: 1.5rem; }
    .lp-lf-mehr {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        margin: 0.9rem 1.3rem 0;
        color: var(--rae-hellblau);
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-decoration: none;
    }
    .lp-lf-mehr::after {
        content: '';
        width: 7px; height: 7px;
        border-top: 1.6px solid currentColor;
        border-right: 1.6px solid currentColor;
        transform: rotate(45deg);
        transition: transform 0.35s ease;
    }
    .lp-lf-mehr:active::after { transform: rotate(45deg) translate(2px, -2px); }

    /* Den Umriss zeichnet die Kante; die Huelle liefert nur die
       weisse Flaeche darunter. */
    .lp-lf-huelle { background: var(--color-white); }
}

/* ---------- 2PanoImages – zwei Bilder, sanfter Schwenk ----------
   --lp-pano-hoehe-wunsch  Wunschhoehe der Seite (der Include setzt sie)
   --lp-pano-hoehe         daraus die tatsaechliche Hoehe, gedeckelt
   --lp-pano-weg           wie weit das Bild wandert (in px)
   --lp-pano-p             Stand des Schwenks, 0 … 1 (laufend gesetzt) */
.lp-pano {
    --lp-pano-hoehe: var(--lp-pano-hoehe-wunsch, 360px);
    --lp-pano-weg: 90px;
    --lp-pano-p: 0;
    background: var(--color-white);
}
.lp-pano-kopf {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 2rem 1.8rem;
    text-align: center;
}
.lp-pano-kopf .rae-tag { text-align: center; }
.lp-pano-ueber {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.25rem, 2.4vw, 1.7rem);
    font-weight: 600;
    line-height: 1.3;
    color: #2e4a57;
}
.lp-pano-reihe {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 2px;
    background: #e8ecef;
}
.lp-pano-feld {
    position: relative;
    display: block;
    height: var(--lp-pano-hoehe);
    overflow: hidden;
    text-decoration: none;
    background: #0d2530;
}
.lp-pano-rahmen {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    transform: scale(1);
    transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lp-pano-bild {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    /* Das Bild ist hoeher als sein Ausschnitt – genau um diesen
       Ueberschuss wandert es waehrend des Scrollens nach oben. */
    height: calc(100% + var(--lp-pano-weg));
    object-fit: cover;
    transform: translate3d(0, calc(var(--lp-pano-weg) * -1 * var(--lp-pano-p)), 0);
    will-change: transform;
    /* Der Include setzt --lp-pano-p in Stufen; dieser Uebergang macht
       daraus die weiche, leicht nachlaufende Bewegung. */
    transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lp-pano-feld::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13,37,48,0.04) 0%, rgba(13,37,48,0.14) 42%, rgba(13,37,48,0.62) 100%);
    pointer-events: none;
    transition: background 0.6s ease;
}
.lp-pano-schild {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.6rem 1.4rem;
    text-align: center;
    pointer-events: none;
}
.lp-pano-label {
    position: relative;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}
.lp-pano-label::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 1px;
    background: rgba(255, 255, 255, 0.85);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lp-pano-titel {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    font-weight: 600;
    line-height: 1.25;
    color: #ffffff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.lp-pano-text {
    max-width: 34ch;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.88rem;
    line-height: 1.6;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
a.lp-pano-feld:hover .lp-pano-rahmen,
a.lp-pano-feld:focus-visible .lp-pano-rahmen { transform: scale(1.035); }
a.lp-pano-feld:hover .lp-pano-label::after,
a.lp-pano-feld:focus-visible .lp-pano-label::after { transform: scaleX(1); }
a.lp-pano-feld:hover::after {
    background: linear-gradient(180deg, rgba(13,37,48,0.02) 0%, rgba(13,37,48,0.1) 42%, rgba(13,37,48,0.55) 100%);
}

@media (max-width: 760px) {
    .lp-pano { --lp-pano-hoehe: min(var(--lp-pano-hoehe-wunsch, 360px), 240px); }
    .lp-pano-reihe { grid-auto-flow: row; grid-auto-columns: auto; }
    .lp-pano-kopf { padding: 0 1.5rem 1.4rem; }
    .lp-pano-schild { padding: 1.2rem 1.2rem; }
}

/* Wer Bewegung reduziert, bekommt ein ruhiges Bild – der Include
   setzt --lp-bb-p dann fest auf die Mitte. */
@media (prefers-reduced-motion: reduce) {
    .lp-pano-bild { transition: none; }
    .lp-pano-rahmen { transition: none; }
    .lp-lf-text, .lp-lf-kachel, .lp-lf-ico { transition: none; }
    .lp-lf-rahmen polyline { transition: none; }
}

/* =====================================================================
   ORTSVERWEISE IM FLIESSTEXT                                  2026-08
   =====================================================================
   Auf den Themenseiten ohne Stadtbezug stehen im zweiten Abschnitt des
   Fliesstextes die beiden Staedtenamen – und sie fuehren zur jeweiligen
   Stadtseite:

       … in <a class="rae-ortlink" href="mietrecht-duisburg.html">Duisburg</a>
         und in <a class="rae-ortlink" href="mietrecht-duesseldorf.html">Düsseldorf</a> …

   Gestaltung bewusst zurueckhaltend: Der Ton der Seite bleibt ruhig,
   deshalb traegt das Wort nur die Signaturfarbe Blau – keine
   Unterstreichung, auch nicht beim Zeigen. Beim Zeigen wird das Blau
   lediglich eine Spur satter, so dass erkennbar bleibt, dass es sich
   um einen Verweis handelt.
===================================================================== */
.rae-ortlink,
.rae-ortlink:visited {
    color: #2684b0;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.25s ease;
}
.rae-ortlink:hover,
.rae-ortlink:focus-visible,
.rae-ortlink:active {
    color: #1b6a92;
    text-decoration: none;
}
/* Auf dunklem Grund (z. B. innerhalb eines dunklen Abschnitts) muss der
   Ton heller werden, sonst verschwindet er im Hintergrund. */
[data-header-theme="dark"] .rae-ortlink,
.rae-dunkel .rae-ortlink {
    color: #7cc2e3;
}
[data-header-theme="dark"] .rae-ortlink:hover,
.rae-dunkel .rae-ortlink:hover {
    color: #a3d6ef;
}

/* ---------- Hervorgehobener Hinweis im Gebiete-Abschnitt ----------
   Aufbau: includes/gebiete.html, Feld "hinweis" eines Themas.
   Gedacht fuer das eine, was haengenbleiben soll – etwa der Zugriff
   der Kanzlei auf Handwerks- und Sanitaerbetriebe fuer eine schnelle
   technische Einschaetzung. Bewusst scharfkantig wie der Rest der
   Seite, mit der Signaturkante links. */
.lp-gebiet-hinweis {
    display: block;
    margin-top: 1.4rem;
    padding: 1.15rem 1.35rem;
    background: linear-gradient(135deg, rgba(81, 225, 132, 0.12) 0%, rgba(38, 132, 176, 0.08) 100%);
    border-left: 3px solid var(--color-neon-green, #51e184);
    color: #22333c;
    font-size: 0.985rem;
    font-weight: 400;
    line-height: 1.8;
}
.lp-gebiet-hinweis strong { font-weight: 700; }

/* ---------- PLATTFORM – Zeile mit fremdem Wortmarken-Logo ----------
   Aufbau: includes/plattform.html. Gedacht fuer den Hinweis, dass die
   Kanzlei hinter einer eigenen Plattform steht:

       Inhaber von  [LOGO]  – Flugverspätungsplattform

   Das Logo laeuft in der Zeile mit: Seine Hoehe steht in em und
   entspricht ungefaehr der Versalhoehe der Schrift daneben, damit
   Wortmarke und Text auf derselben Linie sitzen. */
.lp-plattform {
    background: var(--color-white);
    padding: 3.4rem 0 3rem;
}
.lp-plattform-karte {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}
.lp-plattform .rae-tag {
    display: block;
    margin-bottom: 0.85rem;
}
.lp-plattform-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 0.7rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.3rem, 2.6vw, 1.85rem);
    font-weight: 500;
    line-height: 1.3;
    color: #333333;
}
.lp-plattform-logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.lp-plattform-logo a {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    transition: opacity 0.25s ease;
}
.lp-plattform-logo a:hover { opacity: 0.72; }
.lp-plattform-logo img {
    display: block;
    height: 0.74em;
    width: auto;
    /* Die Wortmarke sitzt optisch etwas hoch – ein Hauch tiefer legt
       sie auf die Grundlinie der Schrift daneben. */
    transform: translateY(0.03em);
}
.lp-plattform-text {
    margin-top: 1.05rem;
    color: #333333;
    font-size: 0.98rem;
    font-weight: 300;
    line-height: 1.9;
}
@media (max-width: 576px) {
    .lp-plattform { padding: 2.8rem 0 2.4rem; }
    .lp-plattform-zeile { gap: 0.3rem 0.55rem; }
}