/* ======================================================================
   Löwenthal Immobilien — Gestaltung, zweite Fassung
   ----------------------------------------------------------------------
   Leitgedanke: Die Seite laeuft von Nacht ins Licht.

   Wer hier landet, steckt in einem laufenden Verfahren — Termin gesetzt,
   Handlungsspielraum schrumpfend. Der obere Teil der Seite bleibt dunkel:
   das ist die Lage. Nach unten hin wird es hell: das ist der Weg heraus.
   Der Farbwechsel ist deshalb kein Effekt, sondern die Dramaturgie.

   Alles Uebrige bleibt ruhig. Keine Rahmen um Inhalte, keine Karten,
   keine Schatten. Hierarchie entsteht aus Groesse und Abstand.

   Farben: sechs aus der verbindlichen Designsprache, mehr nicht.
   Schrift: Manrope durchgehend. Ueberschriften tragen ueber das
   Gewicht (600/700), nicht ueber eine zweite Schriftart.
   Raster: 8 px durchgehend.
   ====================================================================== */

/* --- Schriften, lokal ------------------------------------------------- */
@font-face{
  font-family:"Manrope";
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Manrope";
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


/* ======================================================================
   KOPFZEILE · HERO · SCHRITTE · ZIELE · VORGEHEN
   ----------------------------------------------------------------------
   Aus der alten Werkstatt (/vorschau4/) uebernommen am 11.09.2026.
   Alle festen Werte durch Token ersetzt, Schriftgroessen auf glatte
   Pixel gerundet. Die frueheren Regeln dieser Abschnitte sind entfernt.
   ====================================================================== */

.site-header{position:sticky;top:0;z-index:50;background:rgba(var(--midnight-ink-rgb),.96);backdrop-filter:blur(12px);border-bottom:1px solid rgba(var(--white-rgb),.08)}
.header-inner{width:min(var(--width-header),calc(100% - 48px));height:var(--header-height);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--header-gap)}
.main-nav{display:flex;align-items:center;gap:var(--header-nav-gap)}
.main-nav a{text-decoration:none;color:rgba(var(--white-rgb),.72);font-size:var(--size-fine-15);font-weight:700;transition:color var(--motion)}
.main-nav a:hover{color:var(--white)}

/* Goldstrich, der beim Zeigen unter dem Menuepunkt aufzieht. Er waechst
   aus der Mitte und verschwindet ebenso — die Schaltflaeche rechts ist
   ausgenommen, sie traegt bereits einen Rahmen. */
.main-nav a:not(.nav-cta){position:relative}
.main-nav a:not(.nav-cta)::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-7px;
  height:2px;
  background:var(--heritage-gold);
  transform:scaleX(0);
  transition:transform var(--motion);
}
.main-nav a:not(.nav-cta):hover::after,
.main-nav a:not(.nav-cta):focus-visible::after{transform:scaleX(1)}
.nav-cta{padding:var(--header-cta-pad);border:1px solid rgba(var(--heritage-gold-rgb),.7);color:var(--white)!important}

/* --- Knopf mit den drei Strichen (nur auf schmalen Bildschirmen) ------ */
.menue-knopf{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;            /* 44px ist die empfohlene Mindestgroesse fuer Finger */
  height:44px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}
.menue-knopf span{
  display:block;
  width:24px;
  height:2px;
  margin:0 auto;
  background:var(--warm-ivory);
  transition:transform var(--motion),opacity var(--motion);
}
/* Offen: die drei Striche werden zum Kreuz */
.menue-knopf[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menue-knopf[aria-expanded="true"] span:nth-child(2){opacity:0}
.menue-knopf[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hero{position:relative;overflow:hidden;background:var(--midnight-ink);color:var(--white);padding:104px 24px 112px}
.hero::after{content:"";position:absolute;right:-180px;bottom:-300px;width:700px;height:700px;border:1px solid rgba(var(--heritage-gold-rgb),.22);border-radius:50%;box-shadow:0 0 0 90px rgba(var(--heritage-gold-rgb),.03),0 0 0 185px rgba(var(--heritage-gold-rgb),.02)}
.hero-inner{
  position:relative;
  z-index:1;
  /* Dieselbe Breite wie die Kopfzeile, damit Text und Menue auf einer
     Linie stehen. Vorher 82rem — 192px schmaler als die Kopfzeile. */
  width:min(var(--width-header),100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,25rem);
  gap:var(--space-5);
  align-items:end;
}

/* Spalte mit Schildzeile, Ueberschrift, Absatz und Schaltflaeche.
   "min-width:0" verhindert, dass lange Woerter die Spalte aufsprengen —
   Rasterspalten wachsen sonst ueber die Fensterbreite hinaus. */
.hero-text{min-width:0}

/* Hinweis unter der Schaltflaeche. Zurueckhaltend ueber Groesse und
   Farbe, nicht ueber schwachen Kontrast. */
.cta-hinweis{
  margin:var(--space-1) 0 0;
  font-size:var(--size-label);
  line-height:1.5;
  color:var(--text-on-dark-2);
}

/* --- Zielfuehrung im Hero --------------------------------------------
   Uebernommen aus der oeffentlichen Seite. Kein Kasten mit Rahmen,
   sondern eine Liste — die Trennlinien halten sie zusammen.
   Verweist auf dieselben vier Zielbereiche wie der Abschnitt weiter
   unten; geklickt wird ueber dasselbe Skript. */
.hero-selector{
  align-self:end;
  background:rgba(var(--midnight-paper-rgb),.62);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-radius:var(--button-radius);
  padding:var(--space-3) var(--space-3) var(--space-2);
}
.hero-selector-label{
  margin:0 0 var(--space-2);
  font-size:var(--size-label);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-on-dark-3);
}
.hero-selector h2{
  margin:0 0 var(--space-2);
  font-size:var(--size-fine-31);
  line-height:1.12;
  letter-spacing:-.02em;
  font-weight:700;
  color:var(--text-on-dark);
}
.hero-goal{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:var(--space-2);
  align-items:center;
  border-top:1px solid rgba(var(--warm-ivory-rgb),.09);
  color:var(--text-on-dark);
  text-decoration:none;
  padding:var(--space-2) 0;
  transition:color var(--motion);
}
.hero-goal:first-of-type{border-top:0}
.hero-goal .hero-goal-nr{
  font-size:var(--size-label);
  color:var(--text-on-dark-3);
  font-variant-numeric:tabular-nums;
  transition:color var(--motion);
}
.hero-goal b{font-size:var(--size-small);font-weight:500}
.hero-goal-arr{transition:transform var(--motion)}
.hero-goal:hover,.hero-goal.is-active{color:var(--gold-highlight)}
.hero-goal:hover .hero-goal-nr,.hero-goal.is-active .hero-goal-nr{color:var(--heritage-gold)}
.hero-goal:hover .hero-goal-arr{transform:translateX(3px)}
.eyebrow{display:block;margin:0 0 26px;color:var(--heritage-gold);font-size:var(--size-fine-18);line-height:1.45;letter-spacing:.12em;text-transform:uppercase;font-weight:700;text-align:left}
.hero h1{max-width:960px;margin:0;font-family:var(--font-body);font-weight:400;font-size:var(--size-hero-title);line-height:1.01;letter-spacing:-.038em}
.hero-copy{max-width:850px;margin:30px 0 0;color:rgba(var(--white-rgb),.79);font-size:var(--size-fine-21);line-height:1.72}
.primary-cta{display:inline-flex;align-items:center;justify-content:center;margin-top:34px;min-height:54px;padding:0 var(--space-4);background:var(--heritage-gold);color:var(--button-text);text-decoration:none;font-size:var(--size-fine-17);font-weight:600;border-radius:var(--button-radius)}
.primary-cta::after{content:"→";margin-left:12px;font-size:var(--size-fine-18)}
.intro{background:var(--white);padding:88px 24px 82px}
.intro-inner{width:min(var(--width-content),100%);margin:0 auto;display:grid;grid-template-columns:.72fr 1.28fr;gap:76px;align-items:start}
.kicker{margin:0 0 14px;color:var(--heritage-gold);font-size:var(--size-fine-13);line-height:1.4;letter-spacing:.16em;text-transform:uppercase;font-weight:750}
.display-title{margin:0;color:var(--midnight-ink);font-family:var(--font-body);font-size:var(--size-section-title);line-height:1.07;letter-spacing:-.028em;font-weight:400}
.intro-copy p{margin:0 0 20px;color:var(--text-body-1);font-size:var(--size-fine-20);line-height:1.78}
.intro-copy p:last-child{margin-bottom:0}
.intro-copy .benchmark{margin-top:28px;padding-left:24px;border-left:2px solid var(--heritage-gold);color:var(--midnight-ink);font-size:var(--size-fine-20);line-height:1.72}
.goals{padding:88px 24px 104px;background:var(--warm-ivory)}
.goals-inner{width:min(var(--width-content),100%);margin:0 auto}
.goals-head{max-width:820px;margin-bottom:42px}
.goal-links{border-top:1px solid var(--line-light);background:var(--white)}
.goal-link{display:grid;grid-template-columns:86px minmax(0,1fr) 42px;gap:24px;align-items:center;padding:27px 30px;border-bottom:1px solid var(--line-light);text-decoration:none;transition:background .18s ease,transform .18s ease}
.goal-link:hover{background:var(--surface-hover)}
.goal-index{font-family:var(--font-body);color:var(--heritage-gold);font-size:var(--size-fine-27)}
.goal-link strong{color:var(--midnight-ink);font-size:var(--size-fine-20);line-height:1.35;font-weight:650}
.goal-arrow{font-size:var(--size-fine-24);color:var(--heritage-gold)}
.goal-module{width:min(var(--width-content),calc(100% - 48px));margin:0 auto 96px;background:var(--white);border:1px solid rgba(var(--midnight-ink-rgb),.08);box-shadow:var(--shadow-soft);scroll-margin-top:96px}
.goal-header{position:relative;overflow:hidden;padding:72px 72px 66px;background:var(--midnight-ink);color:var(--white)}
.goal-header::after{content:"";position:absolute;right:-160px;bottom:-260px;width:560px;height:560px;border:1px solid rgba(var(--heritage-gold-rgb),.2);border-radius:50%;box-shadow:0 0 0 72px rgba(var(--heritage-gold-rgb),.035),0 0 0 145px rgba(var(--heritage-gold-rgb),.023)}
.goal-header .eyebrow{position:relative;z-index:1}
/* Schildzeile im Hero — am 11.09.2026 um 15 % vergroessert (18px -> 21px).
   Gilt nur hier; die Schilder der vier Zielbereiche bleiben bei 18px. */
.hero .eyebrow{font-size:var(--size-fine-21)}
.goal-header h2{position:relative;z-index:1;max-width:980px;margin:0;font-family:var(--font-body);font-size:var(--size-goal-title);line-height:1.02;letter-spacing:-.034em;font-weight:400}
.goal-header-copy{position:relative;z-index:1;max-width:900px;margin:28px 0 0;color:rgba(var(--white-rgb),.8);font-size:var(--size-fine-21);line-height:1.72}
.module-section{padding:64px 72px}
.module-section.soft{background:var(--ivory-bright)}
.module-section.dark{background:var(--midnight-paper);color:var(--white)}
.module-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:64px;align-items:start}
.module-section h3,.module-section h4{margin:0;color:var(--midnight-ink);font-family:var(--font-body);font-weight:600;letter-spacing:-.023em}
.module-section h3{font-size:var(--size-module-title);line-height:1.08}
.module-section h4{font-size:var(--size-fine-24);line-height:1.25}
.module-section.dark h3,.module-section.dark h4{color:var(--white)}
.module-copy p{margin:0 0 18px;color:var(--text-body-1);font-size:var(--size-fine-19);line-height:1.75}
.module-copy p:last-child{margin-bottom:0}
.module-section.dark .module-copy p{color:rgba(var(--white-rgb),.78)}
.path-list{border-top:1px solid var(--line-light)}
.path-row{display:grid;grid-template-columns:78px minmax(250px,.74fr) 1.2fr;gap:30px;align-items:start;padding:34px 0 36px;border-bottom:1px solid var(--line-light)}
.path-num{color:var(--heritage-gold);font-family:var(--font-body);font-size:var(--size-fine-29);line-height:1}
.path-row h4{font-family:var(--font-body);font-size:var(--size-fine-21);font-weight:650;letter-spacing:-.015em}
.path-row p{margin:0;color:var(--text-body-1);font-size:var(--size-fine-19);line-height:1.72}
.highlight-row{position:relative;margin:0 -22px;padding:38px 22px;background:linear-gradient(90deg,rgba(var(--heritage-gold-rgb),.1),rgba(var(--heritage-gold-rgb),.02))}
.highlight-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--heritage-gold)}
.note-box{margin-top:38px;padding:30px 32px;border:1px solid var(--line-warm);background:var(--surface-note)}
.note-box.gold{border-left:3px solid var(--heritage-gold);background:linear-gradient(90deg,rgba(var(--heritage-gold-rgb),.09),rgba(var(--heritage-gold-rgb),.02))}
.note-box h4{margin-bottom:11px}
.note-box p{margin:0;color:var(--text-body-1);font-size:var(--size-fine-18);line-height:1.72}
.dark .note-box{background:rgba(var(--white-rgb),.05);border-color:rgba(var(--white-rgb),.14)}
.dark .note-box p{color:rgba(var(--white-rgb),.76)}
.split-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
.split-card{padding:30px;border:1px solid var(--line-light);background:var(--white)}
.split-card.dark-card{background:var(--midnight-paper);border-color:var(--midnight-paper);color:var(--white)}
.split-card .card-num{color:var(--heritage-gold);font-family:var(--font-body);font-size:var(--size-fine-28)}
.split-card h4{margin:15px 0 12px;font-family:var(--font-body);font-size:var(--size-fine-21);font-weight:650;letter-spacing:-.015em}
.split-card p{margin:0;color:var(--text-body-2);font-size:var(--size-fine-18);line-height:1.72}
.split-card.dark-card h4{color:var(--white)}
.split-card.dark-card p{color:rgba(var(--white-rgb),.76)}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light)}
.proof-item{padding:30px 26px;border-right:1px solid var(--line-light)}
.proof-item:last-child{border-right:0}
.proof-value{display:block;color:var(--midnight-ink);font-family:var(--font-body);font-size:var(--size-fine-31);line-height:1.05}
.proof-label{display:block;margin-top:9px;color:var(--text-body-4);font-size:var(--size-fine-14);line-height:1.5}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.mini-card{padding:20px;border:1px solid var(--line-light);background:var(--white)}
.mini-card strong{display:block;color:var(--midnight-ink);font-size:var(--size-fine-16);line-height:1.35;margin-bottom:7px}
.mini-card span{display:block;color:var(--text-body-4);font-size:var(--size-fine-16);line-height:1.55}
.dark .mini-card{background:rgba(var(--white-rgb),.055);border-color:rgba(var(--white-rgb),.13)}
.dark .mini-card strong{color:var(--white)}
.dark .mini-card span{color:rgba(var(--white-rgb),.72)}
.interest-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:32px}
.interest-card{padding:26px 28px;border:1px solid var(--line-light);background:var(--white)}
.interest-card.wide{grid-column:1/-1;display:grid;grid-template-columns:.7fr 1.3fr;gap:36px;border-color:rgba(var(--heritage-gold-rgb),.45)}
.interest-card strong{display:block;color:var(--midnight-ink);font-size:var(--size-fine-18);line-height:1.35;margin-bottom:8px}
.interest-card p{margin:0;color:var(--text-body-3);font-size:var(--size-fine-17);line-height:1.67}
.interest-card.wide strong{margin-bottom:0}
.perspective-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
.perspective-card{padding:30px;border:1px solid var(--line-light);background:var(--white)}
.perspective-card.dark-card{background:var(--midnight-paper);border-color:var(--midnight-paper);color:var(--white)}
.perspective-label{margin:0 0 12px!important;color:var(--heritage-gold)!important;font-size:var(--size-fine-12)!important;letter-spacing:.14em;text-transform:uppercase;font-weight:750}
.perspective-card h4{font-family:var(--font-body);font-size:var(--size-fine-20);font-weight:650;margin-bottom:12px}
.perspective-card p{margin:0;color:var(--text-body-3);font-size:var(--size-fine-18);line-height:1.7}
.perspective-card.dark-card h4{color:var(--white)}
.perspective-card.dark-card p{color:rgba(var(--white-rgb),.76)}
@media(max-width:900px){
  /* Statt des Menues erscheint der Knopf mit den drei Strichen. Das
     Menue klappt darunter auf — ueber dem Inhalt, nicht daneben. */
  .menue-knopf{display:flex}
  .main-nav{
    display:none;
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:var(--space-2) 24px var(--space-3);
    background:rgba(var(--midnight-ink-rgb),.98);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(var(--white-rgb),.08);
  }
  .main-nav.offen{display:flex}
  .main-nav a{padding:15px 0;border-top:1px solid rgba(var(--white-rgb),.08)}
  .main-nav a:first-child{border-top:0}
  .main-nav a:not(.nav-cta)::after{display:none}   /* Goldstrich nur am Rechner */
  /* Eckig gilt nur am Rechner. Sobald das Klappmenue greift, traegt
     die Schaltflaeche wieder die abgerundete Form. */
  .nav-cta{margin-top:var(--space-2);text-align:center;border-top:0;border-radius:var(--button-radius)}
  .intro-inner,.module-grid{grid-template-columns:1fr;gap:28px}
  .goal-module{width:min(var(--width-content),calc(100% - 28px))}
  .goal-header,.module-section{padding-left:38px;padding-right:38px}
  .path-row{grid-template-columns:58px 1fr;gap:18px 22px}
  .path-row p{grid-column:2}
  .proof-grid{grid-template-columns:1fr 1fr}
  .proof-item:nth-child(2){border-right:0}
  .proof-item:nth-child(-n+2){border-bottom:1px solid var(--line-light)}
  .interest-grid,.perspective-grid{grid-template-columns:1fr}
  .interest-card.wide{grid-column:auto;grid-template-columns:1fr;gap:10px}
}
@media(max-width:620px){
  .header-inner{width:calc(100% - 32px);height:var(--header-height-small)}
  .nav-cta{padding:var(--header-cta-pad-small);font-size:var(--size-fine-14)}
  .hero{padding:72px 20px 76px}
  .hero h1{font-size:var(--size-fine-44)}
  .hero-copy{font-size:var(--size-fine-19)}
  .intro,.goals{padding-left:20px;padding-right:20px}
  .intro{padding-top:58px;padding-bottom:58px}
  .goals{padding-top:58px;padding-bottom:70px}
  .display-title{font-size:var(--size-fine-36)}
  .intro-copy p{font-size:var(--size-fine-18)}
  .goal-link{grid-template-columns:50px 1fr 24px;padding:22px 16px;gap:12px}
  .goal-index{font-size:var(--size-fine-23)}
  .goal-link strong{font-size:var(--size-fine-17)}
  .goal-module{width:100%;margin-bottom:50px;border-left:0;border-right:0;box-shadow:none}
  .goal-header{padding:52px 22px 48px}
  .goal-header h2{font-size:var(--size-fine-42)}
  .goal-header-copy{font-size:var(--size-fine-19)}
  .module-section{padding:46px 22px}
  .module-section h3{font-size:var(--size-fine-34)}
  .module-copy p{font-size:var(--size-fine-18)}
  .path-row{grid-template-columns:40px 1fr;padding:27px 0;gap:14px}
  .path-row p{grid-column:1/-1;padding-left:54px;font-size:var(--size-fine-18)}
  .path-row h4{font-size:var(--size-fine-19)}
  .highlight-row{margin:0 -10px;padding-left:10px;padding-right:10px}
  .split-cards,.mini-grid,.proof-grid{grid-template-columns:1fr}
  .proof-item{border-right:0;border-bottom:1px solid var(--line-light)}
  .proof-item:last-child{border-bottom:0}
  .interest-card,.perspective-card,.split-card{padding:23px 21px}
}
.goal-module{display:none}
.goal-module.is-active{display:block;animation:goalReveal .28s ease both}
@keyframes goalReveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.goal-link{cursor:pointer}
.goal-link.is-active{background:var(--midnight-ink);border-bottom-color:rgba(var(--white-rgb),.09)}
.goal-link.is-active .goal-index,.goal-link.is-active .goal-arrow{color:var(--heritage-gold)}
.goal-link.is-active strong{color:var(--white)}
.goal-switch{padding:34px 72px 38px;background:var(--white);border-top:1px solid var(--line-light)}
.goal-switch-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:18px}
.goal-switch-head p{margin:0;color:var(--text-body-5);font-size:var(--size-fine-15);line-height:1.5}
.goal-switch-head strong{color:var(--midnight-ink);font-size:var(--size-fine-15)}
.goal-switch-links{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.goal-switch-link{display:flex;align-items:center;gap:11px;min-height:50px;padding:12px 14px;border:1px solid var(--line-light);background:var(--ivory-bright);text-decoration:none;color:var(--midnight-ink);font-size:var(--size-fine-13);line-height:1.35;transition:border-color .18s ease,background .18s ease}
.goal-switch-link span{color:var(--heritage-gold);font-family:var(--font-body);font-size:var(--size-fine-18);flex:0 0 auto}
.goal-switch-link:hover{border-color:rgba(var(--heritage-gold-rgb),.75);background:var(--white)}
.goal-switch-link[aria-current="true"]{border-color:var(--midnight-ink);background:var(--midnight-ink);color:var(--white)}
.goal-switch-link[aria-current="true"] span{color:var(--heritage-gold)}
@media(max-width:900px){
  .goal-switch{padding-left:38px;padding-right:38px}
  .goal-switch-links{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .goal-switch{padding:28px 22px 32px}
  .goal-switch-head{display:block}
  .goal-switch-head p{margin-top:5px}
  .goal-switch-links{grid-template-columns:1fr}
}
.brand{display:inline-flex;align-items:center;flex:none;text-decoration:none}
.brand-logo{
  display:block;
  width:var(--header-logo-width);
  max-width:var(--header-logo-max);
  height:auto;
}
/* Die zweite .ki-hinweis-Regel wurde am 11.09.2026 entfernt — sie war
   eine Dublette und nutzte eine Farbe ohne Kontrastnachweis. */
:focus-visible{outline:2px solid var(--gold-highlight);outline-offset:3px;border-radius:2px}
.eyebrow,
.kicker,
.goal-index,
.goal-arrow,
.path-num,
.split-card .card-num,
.perspective-label,
.goal-link.is-active .goal-index,
.goal-link.is-active .goal-arrow,
.goal-switch-link span,
.goal-switch-link[aria-current="true"] span{
  color:var(--gold-shadow);
}
.hero .eyebrow,
.goal-header .eyebrow,
.module-section.dark .kicker,
.module-section.dark .card-num,
.module-section.dark .perspective-label,
.site-header .eyebrow{
  color:var(--gold-highlight);
}
.vorgehen{
  background:linear-gradient(180deg,var(--midnight-paper) 0%,var(--midnight-ink) 100%);
  color:var(--white);
  padding:104px 24px 90px;
}
.vorgehen-innen{width:min(var(--width-content),100%);margin:0 auto}
.vorgehen-kopf{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);
  gap:92px;
  align-items:end;
  margin-bottom:86px;
}
.vorgehen-kopf h2{
  margin:0;
  max-width:720px;
  font-size:var(--size-vorgehen-title);
  line-height:1.03;
  letter-spacing:-.045em;
  font-weight:620;
  color:var(--white);
}
.vorgehen-kopf p{
  margin:0 0 4px;
  max-width:530px;
  font-size:var(--size-fine-20);
  line-height:1.72;
  color:rgba(var(--white-rgb),.78);
}
.vorgehen-schritte{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:96px;
  row-gap:74px;
}
.vorgehen-schritt{
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  gap:28px;
  align-items:start;
}
.vorgehen-nummer{
  margin-top:1px;
  font-size:var(--size-fine-54);
  line-height:.9;
  letter-spacing:-.055em;
  font-weight:610;
  color:var(--gold-highlight);
  font-variant-numeric:tabular-nums;
}
.vorgehen-text h3{
  margin:0;
  max-width:430px;
  font-size:var(--size-fine-27);
  line-height:1.18;
  letter-spacing:-.03em;
  font-weight:630;
  color:var(--white);
}
.vorgehen-text p{
  margin:17px 0 0;
  max-width:470px;
  font-size:var(--size-fine-19);
  line-height:1.7;
  color:rgba(var(--white-rgb),.78);
}
.vorgehen-band{
  margin-top:88px;
  padding-top:36px;
  border-top:1px solid rgba(var(--white-rgb),.12);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:50px;
  align-items:center;
}
.vorgehen-band p{
  margin:0;
  max-width:760px;
  font-size:var(--size-fine-20);
  line-height:1.6;
  color:var(--white);
}
.vorgehen-band p span{color:rgba(var(--white-rgb),.78)}
.vorgehen-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 24px;
  background:var(--heritage-gold);
  color:var(--button-text);
  text-decoration:none;
  font-size:var(--size-fine-17);
  font-weight:600;
  letter-spacing:.005em;
  border-radius:var(--button-radius);
  transition:transform .18s ease,filter .18s ease;
}
.vorgehen-cta:hover{transform:translateY(-2px);filter:brightness(1.04)}
@media(max-width:940px){
  .hero-inner{grid-template-columns:1fr;gap:var(--space-4)}
  .hero-selector{align-self:stretch}
  .vorgehen{padding-top:82px}
  .vorgehen-kopf{grid-template-columns:1fr;gap:28px;margin-bottom:70px}
  .vorgehen-kopf p{max-width:720px}
  .vorgehen-schritte{column-gap:54px;row-gap:60px}
  .vorgehen-schritt{grid-template-columns:64px 1fr;gap:22px}
  .vorgehen-nummer{font-size:var(--size-fine-46)}
  .vorgehen-text h3{font-size:var(--size-fine-24)}
}
@media(max-width:720px){
  .vorgehen{padding:68px 20px 64px}
  .vorgehen-kopf{margin-bottom:58px}
  .vorgehen-kopf h2{font-size:var(--size-fine-42)}
  .vorgehen-kopf p{font-size:var(--size-fine-19);line-height:1.68}
  .vorgehen-schritte{grid-template-columns:1fr;row-gap:46px}
  .vorgehen-schritt{grid-template-columns:58px 1fr;gap:20px}
  .vorgehen-nummer{font-size:var(--size-fine-42)}
  .vorgehen-text h3{font-size:var(--size-fine-23)}
  .vorgehen-text p{font-size:var(--size-fine-18)}
  .vorgehen-band{margin-top:62px;grid-template-columns:1fr;gap:26px}
  .vorgehen-band p{font-size:var(--size-fine-19)}
  .vorgehen-cta{width:100%}
}
.goal-cta-wrap{margin-top:34px}
.goal-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 23px;
  background:var(--heritage-gold);
  color:var(--button-text);
  text-decoration:none;
  font-size:var(--size-fine-14);
  font-weight:800;
  transition:transform .18s ease,filter .18s ease;
;border-radius:var(--button-radius)}
.goal-cta::after{content:"→";margin-left:12px;font-size:var(--size-fine-18)}
.goal-cta:hover{transform:translateY(-1px);filter:brightness(1.04)}
@media(max-width:700px){
  .goal-cta{width:100%;padding:0 18px;text-align:center}
}


/* --- Reset ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Der Grundton der Seite ist hell. Er ist ueberall sichtbar, wo kein
   Abschnitt eine eigene Flaeche mitbringt — vor allem rund um und
   zwischen den vier Zielkacheln. Beim Zusammenfuehren der beiden
   Fassungen stand hier faelschlich der dunkle Ton, dadurch erschienen
   diese Bereiche blau statt elfenbein (behoben am 11.09.2026).
   Die dunklen Abschnitte bringen Flaeche UND Textfarbe selbst mit und
   haengen nicht mehr an diesem Wert. */
body{
  margin:0;
  background:var(--warm-ivory);
  color:var(--text-on-light);
  font-family:var(--font-body);
  font-size:var(--size-body);
  font-weight:400;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

/* --- Ueberschriften ---------------------------------------------------- */
h1,h2,h3,.serif{
  font-family:var(--font-body);
  font-weight:600;
  letter-spacing:-0.022em;
  line-height:1.12;
  margin:0;
  text-wrap:balance;
}
h1{font-size:var(--size-display);line-height:1.02;letter-spacing:-0.03em;font-weight:700}
h2{font-size:var(--size-title);max-width:26ch}
h3{font-size:var(--size-heading)}

p{margin:0}

/* --- Wiederkehrende Bausteine ------------------------------------------ */
.wrap{
  width:min(var(--width-content),calc(100% - var(--space-4)));
  margin-inline:auto;
}

/* Kleines Schild ueber einer Ueberschrift. Nur dort, wo es etwas
   benennt — nicht als Zierde. */
/* Die frühere Sammelregel ".eyebrow,.label" wurde am 11.09.2026 entfernt.
   Sie stammte aus der alten Fassung, überschrieb die Schildzeile der neuen
   Abschnitte (17px/600 statt 18px/700) und ".label" kommt nirgends vor. */



/* ======================================================================
   TEXT JE NACH BILDSCHIRMBREITE
   ----------------------------------------------------------------------
   Fuer Stellen, an denen auf dem Handy ein kuerzeres Wort stehen soll.
   Beide Fassungen stehen im Markup, sichtbar ist immer nur eine:

     <span class="nur-breit">Versteigerungsverfahren</span><span
      class="nur-schmal">Verfahren</span>

   "display:none" blendet nicht nur optisch aus — Vorleseprogramme
   ueberspringen die verborgene Fassung ebenfalls. Es wird also nie
   beides hintereinander vorgelesen.

   Umschaltpunkt: 620px, derselbe, an dem auch die Schriftgroessen
   der Abschnitte auf Handywerte wechseln.
   ====================================================================== */
.nur-breit{display:inline}
.nur-schmal{display:none}
@media(max-width:620px){
  .nur-breit{display:none}
  .nur-schmal{display:inline}
}

/* ======================================================================
   FRAGEN — jetzt im Licht
   ====================================================================== */
.faq{background:var(--warm-ivory);color:var(--text-on-light)}
.faq h2{color:var(--text-on-light);margin-bottom:var(--space-2)}
.faq .eyebrow{color:var(--gold-shadow)}
.faq-list{max-width:64rem}
.faq details{border-top:1px solid rgba(var(--text-on-light-rgb),.13)}
.faq details:last-child{border-bottom:1px solid rgba(var(--text-on-light-rgb),.13)}
.faq summary{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:var(--space-3);
  padding:var(--space-3) 0;
  cursor:pointer;
  list-style:none;
  font-family:var(--font-body);
  font-size:var(--size-body);
  line-height:1.34;
  color:var(--text-on-light);
  transition:color var(--motion);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";
  flex:none;
  width:0.75rem;
  height:0.75rem;
  margin-top:0.35em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.6 V10.4 M1.6 6 H10.4' stroke='%23A98552' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform var(--motion);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--gold-shadow)}
.faq details p{
  font-size:var(--size-copy);
  line-height:1.78;
  color:var(--text-on-light-2);
  max-width:74ch;
  padding-bottom:var(--space-3);
}

/* ======================================================================
   KONTAKT — hellste Flaeche der Seite, das Ziel des Wegs
   ====================================================================== */
/* Der Innenabstand galt frueher fuer jedes <section> und gab den vier
   Zielbereichen 144px Leerraum, den sie nicht haben sollten. Er steht
   deshalb hier, beim einzigen Abschnitt, der ihn braucht. */
.contact{background:var(--midnight-ink);color:var(--text-on-dark);padding-block:var(--space-7)}
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-6);
  align-items:start;
}
.contact-logo{width:12rem;margin-bottom:var(--space-4)}
.contact h2{color:var(--text-on-dark);margin-bottom:var(--space-3)}
.contact-intro p{font-size:var(--size-copy);line-height:1.74;color:var(--text-on-dark-2);max-width:54ch}

/* Das Formular ist die helle Flaeche im dunklen Abschnitt — dadurch
   faellt es auf und die Felder sind klar abgegrenzt. */
.contact .form{
  background:var(--ivory-bright);
  border-radius:0.875rem;
  padding:var(--space-4);
}

/* --- Formular: keine Karte, nur klare Felder --------------------------- */
.form-head{margin-bottom:var(--space-4)}
.form-title{
  font-family:var(--font-body);
  font-size:var(--size-heading);
  line-height:1.2;
  color:var(--text-on-light);
  margin-bottom:var(--space-1);
}
.form-sub{font-size:var(--size-small);color:var(--text-on-light-2)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
.field{margin-bottom:var(--space-2)}
.field label{
  display:block;
  font-size:var(--size-label);
  font-weight:600;
  color:var(--text-on-light-2);
  margin-bottom:0.375rem;
}
.field input,.field select,.field textarea{
  width:100%;
  background:var(--white);
  border:1px solid rgba(var(--text-on-light-rgb),.16);
  border-radius:0.625rem;
  color:var(--text-on-light);
  font-size:var(--size-small);
  padding:0.8125rem 0.875rem;
  outline:none;
  transition:border-color var(--motion),box-shadow var(--motion);
  -webkit-appearance:none;
  appearance:none;
}
.field textarea{resize:vertical;min-height:8.5rem;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--text-on-light-3)}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.4 1.6 L6 6.2 L10.6 1.6' fill='none' stroke='%23525C68' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 0.875rem center;
  background-size:0.75rem;
  padding-right:2.25rem;
  cursor:pointer;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--heritage-gold);
  box-shadow:0 0 0 3px rgba(var(--heritage-gold-rgb),.18);
}
/* outline:none oben ist spezifischer als die globale Fokusregel und
   haette sie ausgehebelt. Fuer die Tastaturbedienung hier ausdruecklich. */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--heritage-gold);
  outline-offset:1px;
}
.form.geprueft .field input:invalid,.form.geprueft .field textarea:invalid{
  border-color:var(--status-error-border);
  box-shadow:0 0 0 3px rgba(var(--status-error-border-rgb),.14);
}
.pflicht,.optional{
  display:inline-block;
  margin-left:0.5rem;
  font-size:var(--size-label);
  letter-spacing:.04em;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.pflicht{color:var(--gold-shadow)}
.optional{color:var(--text-on-light-3)}
.einwilligung{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0.75rem;
  align-items:start;
  margin:var(--space-3) 0 0;
  cursor:pointer;
}
.einwilligung input[type=checkbox]{
  width:1.125rem;height:1.125rem;margin:0.2rem 0 0;
  accent-color:var(--heritage-gold);cursor:pointer;flex:none;
}
.einwilligung span{font-size:var(--size-small);line-height:1.55;color:var(--text-on-light-2)}
.einwilligung a{color:var(--gold-shadow);text-underline-offset:3px}
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.submit{
  width:100%;
  margin-top:var(--space-3);
  background:var(--midnight-ink);
  color:var(--ivory-bright);
  border:0;
  border-radius:0.625rem;
  font-size:var(--size-small);
  font-weight:600;
  padding:0.9375rem var(--space-3);
  cursor:pointer;
  transition:background var(--motion),transform var(--motion);
}
.submit:hover{background:var(--midnight-paper);transform:translateY(-1px)}
.submit:disabled{opacity:.6;cursor:progress;transform:none}
.fine{font-size:var(--size-small);line-height:1.6;color:var(--text-on-light-3);margin-top:var(--space-2)}
.status-erfolg,.status-fehler{
  margin-top:var(--space-2);
  padding:0.8125rem 0.9375rem;
  border-radius:0.625rem;
  font-size:var(--size-small);
  font-weight:600;
}
.status-erfolg{background:var(--status-success-bg);color:var(--status-success-text)}
.status-fehler{background:var(--status-error-bg);color:var(--status-error-text)}

/* ======================================================================
   FUSSZEILE
   ====================================================================== */
footer{background:var(--midnight-ink);color:var(--text-on-dark);padding-block:var(--space-5)}
.foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-3);
  flex-wrap:wrap;
  font-size:var(--size-small);
  color:var(--text-on-dark-3);
}
.foot-links{display:flex;gap:var(--space-3);align-items:center}
.foot-links a,.einwilligung-link{
  color:var(--text-on-dark-2);
  text-decoration:none;
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;
  transition:color var(--motion);
}
.foot-links a:hover,.einwilligung-link:hover{color:var(--gold-highlight)}

/* ======================================================================
   KLEINERE BILDSCHIRME
   ====================================================================== */
@media(max-width:64rem){
  .contact-grid{grid-template-columns:1fr;gap:var(--space-4)}
}

@media(max-width:40rem){
  .wrap{width:calc(100% - var(--space-3))}
  .row{grid-template-columns:1fr;gap:0}
  .foot{flex-direction:column;align-items:flex-start;gap:var(--space-2)}
}

/* ======================================================================
   BEWEGUNG — sparsam. Ein Einblenden beim Scrollen, sonst nichts.
   ====================================================================== */
@media(prefers-reduced-motion:no-preference){
  .anim{opacity:0;transform:translateY(14px);transition:opacity 620ms ease,transform 620ms cubic-bezier(.2,.8,.2,1)}
  .anim.sichtbar{opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* Tastaturbedienung muss immer sichtbar bleiben */
:focus-visible{outline:2px solid var(--gold-highlight);outline-offset:3px;border-radius:2px}

/* ======================================================================
   Nachtraege — Bausteine{margin-bottom:var(--space-6);max-width:58rem}

/* Fusszeile */
.footer-brand{display:flex;align-items:center;gap:var(--space-2)}
.footer-copy{color:var(--text-on-dark-3);font-size:var(--size-small)}

/* Hinweis auf KI-gestuetzte Inhalte. Zurueckhaltend ueber Groesse und
   Position, nicht ueber schwachen Kontrast — ein erster Versuch mit
   #5f6874 lag bei 3,25 : 1 und waere durchgefallen. */
.ki-hinweis{
  margin:1.5rem 0 0;
  font-size:var(--size-hint);
  line-height:1.5;
  color:var(--text-on-dark-3);
  max-width:70ch;
}


/* ====================================================================
   Rechtstexte (Impressum, Datenschutz) — frueher rechtstext.css
   ==================================================================== */
/* ----------------------------------------------------------------------
   Impressum und Datenschutzerklaerung — zweite Fassung
   Helle Textseiten, gleiche Merkposten wie die Hauptseite.
   -------------------------------------------------------------------- */

.rechtstext{
  background:var(--ivory-bright);
  color:var(--text-on-light);
  padding-block:calc(var(--space-7) + var(--space-3)) var(--space-6);
}
.rechtstext .wrap{max-width:44rem}

.rechtstext h1{
  font-size:var(--size-title);
  color:var(--text-on-light);
  margin-bottom:var(--space-5);
  padding-bottom:var(--space-3);
  border-bottom:1px solid rgba(var(--text-on-light-rgb),.14);
}
.rechtstext h2{
  font-size:var(--size-heading);
  color:var(--text-on-light);
  margin:var(--space-5) 0 var(--space-2);
  max-width:26ch;
}
.rechtstext h3{font-size:var(--size-body);margin:var(--space-4) 0 0.625rem;color:var(--text-on-light)}
.rechtstext p,.rechtstext li{font-size:var(--size-copy);line-height:1.78;color:var(--text-on-light-2)}
.rechtstext p{margin:0 0 var(--space-2)}
.rechtstext ul{margin:0 0 var(--space-2);padding-left:var(--space-2)}
.rechtstext li{margin-bottom:0.5rem}
.rechtstext a{color:var(--gold-shadow);text-underline-offset:3px}
.rechtstext code{font-size:0.9em;background:rgba(var(--text-on-light-rgb),.06);padding:0.1em 0.4em;border-radius:0.25rem}

.rechtstext .block{
  border-left:2px solid var(--gold-shadow);
  padding:0.25rem 0 0.25rem var(--space-2);
  margin:0 0 var(--space-3);
}
.rechtstext .block p{margin:0 0 0.25rem}

.rechtstext .quelle{
  margin-top:var(--space-5);
  padding-top:var(--space-3);
  border-top:1px solid rgba(var(--text-on-light-rgb),.14);
  font-size:var(--size-label);
  color:var(--text-on-light-3);
}

/* Fehlende Angaben bleiben auffaellig{
  background:var(--notice-border);
  color:var(--notice-text-2);
  border-bottom:2px solid var(--notice-accent);
  padding:0.0625rem 0.375rem;
  font-weight:600;
  border-radius:0.1875rem;
}
.hinweis{
  background:var(--notice-bg);
  border:1px solid var(--notice-border-strong);
  border-left:3px solid var(--notice-accent);
  padding:var(--space-2) var(--space-3);
  margin:0 0 var(--space-4);
  border-radius:0.625rem;
}
.hinweis p{margin:0;font-size:var(--size-small);color:var(--notice-text-2)}
.hinweis strong{color:var(--notice-text)}


/* ====================================================================
   Einwilligungsbanner — frueher einwilligung.css
   ==================================================================== */
/* ----------------------------------------------------------------------
   Einwilligungsverwaltung — zweite Fassung
   Nutzt die Merkposten aus v2.css. Gewichtung der Schaltflaechen wie
   vom Kunden entschieden: Zustimmen hervorgehoben, Ablehnen dennoch
   auf derselben Ebene und gut lesbar.
   -------------------------------------------------------------------- */

.einwilligung-offen{overflow:hidden}

.ew-huelle{
  position:fixed;
  inset:0;
  z-index:300;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:rgba(var(--overlay-rgb),.6);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  opacity:0;
  transition:opacity var(--motion);
}
.ew-huelle.sichtbar{opacity:1}

.ew-banner{
  width:100%;
  background:var(--midnight-paper);
  border-top:1px solid rgba(var(--heritage-gold-rgb),.4);
  max-height:92vh;
  overflow-y:auto;
}
.ew-innen{
  width:min(var(--width-content),calc(100% - var(--space-4)));
  margin-inline:auto;
  padding-block:var(--space-4);
}
.ew-titel{
  font-family:var(--font-body);
  font-size:var(--size-lead);
  line-height:1.24;
  color:var(--text-on-dark);
  margin:0 0 var(--space-2);
}
.ew-text p{margin:0 0 0.625rem;max-width:80ch}
.ew-haupttext{font-size:var(--size-small);line-height:1.68;color:var(--text-on-dark-2)}
.ew-kleingedruckt{font-size:var(--size-label);line-height:1.6;color:var(--text-on-dark-3)}
.ew-verweise{margin-top:var(--space-2);font-size:var(--size-label);color:var(--text-on-dark-3)}
.ew-verweise a{color:var(--gold-highlight);text-underline-offset:3px}

.ew-aktionen{display:flex;gap:0.75rem;margin-top:var(--space-3);flex-wrap:wrap;align-items:stretch}
.ew-knopf{
  font:inherit;
  font-weight:600;
  border-radius:0.625rem;
  cursor:pointer;
  transition:background var(--motion),border-color var(--motion),
             color var(--motion),transform var(--motion);
  white-space:nowrap;
}
.ew-haupt{
  order:3;
  flex:1 1 16rem;
  font-size:var(--size-small);
  padding:0.9375rem var(--space-4);
  background:var(--heritage-gold);
  border:1px solid var(--heritage-gold);
  color:var(--midnight-ink);
}
.ew-haupt:hover{background:var(--gold-highlight);border-color:var(--gold-highlight);transform:translateY(-1px)}
.ew-neben{
  flex:0 1 auto;
  font-size:var(--size-small);
  padding:0.9375rem var(--space-3);
  background:transparent;
  border:1px solid rgba(var(--warm-ivory-rgb),.24);
  color:var(--text-on-dark-2);
}
.ew-neben:hover{border-color:rgba(var(--warm-ivory-rgb),.46);color:var(--text-on-dark)}

/* --- Zweite Ebene ----------------------------------------------------- */
.ew-dialog{
  width:min(54rem,calc(100% - var(--space-3)));
  margin:auto;
  align-self:center;
  max-height:90vh;
  display:flex;
  flex-direction:column;
  background:var(--midnight-paper);
  border:1px solid rgba(var(--heritage-gold-rgb),.32);
  border-radius:0.875rem;
  overflow:hidden;
}
.ew-dkopf{padding:var(--space-4) var(--space-4) var(--space-3);border-bottom:1px solid rgba(var(--warm-ivory-rgb),.1);flex:none}
.ew-dsub{margin:0;font-size:var(--size-small);line-height:1.6;color:var(--text-on-dark-2)}
.ew-liste{overflow-y:auto;padding:0 var(--space-4);flex:1 1 auto}
.ew-kat{padding:var(--space-3) 0;border-bottom:1px solid rgba(var(--warm-ivory-rgb),.08)}
.ew-kat:last-child{border-bottom:0}
.ew-katkopf{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-bottom:0.625rem}
.ew-katname{display:flex;align-items:center;gap:0.75rem;font-size:var(--size-small);font-weight:600;color:var(--text-on-dark);cursor:pointer}
.ew-katname input[type=checkbox]{width:1.125rem;height:1.125rem;accent-color:var(--heritage-gold);cursor:pointer;flex:none}
.ew-katname input:disabled{cursor:not-allowed;opacity:.7}
.ew-pflichtmarke{
  font-size:var(--size-label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-highlight);border:1px solid rgba(var(--heritage-gold-rgb),.4);
  border-radius:99px;padding:0.1875rem 0.625rem;white-space:nowrap;
}
.ew-katzweck{margin:0 0 0.75rem;padding-left:1.875rem;font-size:var(--size-small);line-height:1.62;color:var(--text-on-dark-2)}
.ew-dienst{
  margin:0 0 0.75rem 1.875rem;
  padding:var(--space-2);
  background:rgba(var(--midnight-ink-rgb),.5);
  border-radius:0.625rem;
  display:grid;
  grid-template-columns:9rem 1fr;
  gap:0.375rem var(--space-2);
  font-size:var(--size-small);
  line-height:1.55;
}
.ew-dienst dt{color:var(--text-on-dark-3);font-weight:600}
.ew-dienst dd{margin:0;color:var(--text-on-dark-2)}
.ew-leer{
  margin:0 0 0 1.875rem;
  padding:0.75rem var(--space-2);
  background:rgba(var(--midnight-ink-rgb),.4);
  border-left:2px solid rgba(var(--heritage-gold-rgb),.4);
  border-radius:0 0.375rem 0.375rem 0;
  font-size:var(--size-small);line-height:1.6;color:var(--text-on-dark-3);
}
.ew-dfuss{padding:var(--space-3) var(--space-4) var(--space-4);border-top:1px solid rgba(var(--warm-ivory-rgb),.1);flex:none}
.ew-dfuss .ew-aktionen{margin-top:var(--space-2)}

@media(max-width:48rem){
  .ew-aktionen{flex-direction:column;gap:0.625rem}
  .ew-knopf{width:100%}
  .ew-haupt{order:0}
  .ew-neben{order:1}
  .ew-dkopf,.ew-dfuss,.ew-liste{padding-left:var(--space-3);padding-right:var(--space-3)}
  .ew-dienst{grid-template-columns:1fr;gap:0.125rem;margin-left:0}
  .ew-dienst dt{margin-top:0.5rem}
  .ew-katzweck,.ew-leer{padding-left:0;margin-left:0}
}


/* ======================================================================
   TELEFON — eingefuehrt am 05.10.2026
   Die Nummer steht an vier Stellen: Kopfzeile, Kontaktbereich,
   Fusszeile und auf schmalen Bildschirmen als feste Anrufleiste.
   ====================================================================== */

/* Kopfzeile: Nummer vor der Schaltflaeche, in Gold statt Grau,
   damit sie sich von den Menuepunkten abhebt */
.main-nav a.nav-tel{color:var(--gold-highlight);white-space:nowrap}
.main-nav a.nav-tel:hover{color:var(--white)}

/* Kontaktbereich: Nummer gross, darunter die Erreichbarkeit */
.kontakt-telefon{
  margin-top:var(--space-4);
  padding-top:var(--space-3);
  border-top:1px solid var(--border-gold);
}
.contact-intro .kontakt-telefon-titel{
  margin:0 0 var(--space-1);
  font-size:var(--size-label);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold-highlight);
}
.kontakt-telefon-nummer{
  font-size:var(--size-lead);
  font-weight:700;
  color:var(--text-on-dark);
  text-decoration:none;
  white-space:nowrap;
  transition:color var(--motion);
}
.kontakt-telefon-nummer:hover{color:var(--gold-highlight)}
.contact-intro .kontakt-telefon-zeiten{
  margin:var(--space-1) 0 0;
  font-size:var(--size-small);
  color:var(--text-on-dark-2);
}

/* Fusszeile */
.footer-brand{flex-wrap:wrap}
.footer-tel{
  color:var(--text-on-dark-2);
  font-size:var(--size-small);
  text-decoration:none;
  white-space:nowrap;
  transition:color var(--motion);
}
.footer-tel:hover{color:var(--gold-highlight)}

/* Feste Anrufleiste — nur dort, wo auch das Klappmenue greift.
   Liegt unter Kopfzeile (50) und Einwilligungsbanner (300). */
.anruf-leiste{display:none}
@media(max-width:900px){
  .anruf-leiste{
    position:fixed;
    left:var(--space-2);
    right:var(--space-2);
    bottom:calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    z-index:40;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:var(--anruf-leiste-hoehe);
    background:var(--heritage-gold);
    color:var(--button-text);
    font-size:var(--size-fine-17);
    font-weight:700;
    text-decoration:none;
    border-radius:var(--button-radius);
    box-shadow:var(--shadow-soft);
  }
  /* Platz unter der Fusszeile, damit die Leiste nichts verdeckt */
  footer{padding-bottom:calc(var(--space-5) + var(--anruf-leiste-hoehe) + var(--space-2))}
}