/* SOWA Real Estate · Main Site */
:root{
  --navy:#0D1B2A; --navy2:#10202F; --navy3:#16283A;
  --gold:#C9A14A; --goldL:#D8B978; --goldDim:rgba(201,161,74,.16);
  --stone:#EFEBE2; --paper:#F8F7F4; --ink:#22303E; --body:#3D4A57;
  --muted:#8C97A3; --lineD:rgba(255,255,255,.10); --lineL:#DDD6C8;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--navy);color:#E9ECEF;font:16px/1.65 'Inter',-apple-system,Arial,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--navy)}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px}

.serif{font-family:'Cormorant Garamond',Georgia,serif}
.eyebrow{font:700 11px/1 'Montserrat',Arial,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- Navigation ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:28px;
  padding:14px 4vw;background:rgba(13,27,42,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--lineD)}
.brand{display:flex;align-items:center;gap:13px}
.brand img{height:40px;width:auto}
.brand-name{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;font-size:22px;letter-spacing:.16em;color:#fff;line-height:1}
.brand-sub{display:block;font:600 7.5px 'Montserrat',Arial,sans-serif;letter-spacing:.32em;color:var(--gold);margin-top:3px}
.nav-links{display:flex;gap:26px;margin-left:auto}
.nav-actions{display:flex;gap:9px;align-items:center;flex:0 0 auto;margin-left:22px}
.brand{white-space:nowrap;flex:0 0 auto}
.nav-links a{font:600 12px 'Montserrat',Arial,sans-serif;letter-spacing:.08em;color:#C7CFD6;text-transform:uppercase;transition:color .15s}
.nav-links a:hover{color:var(--goldL)}
.btn{display:inline-block;font:700 12px 'Montserrat',Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  padding:14px 26px;border:1.5px solid var(--gold);color:var(--goldL);transition:all .18s;cursor:pointer;background:transparent}
.btn:hover{background:var(--goldDim)}
.btn.solid{background:var(--gold);color:var(--navy)}
.btn.solid:hover{background:#B8913F;box-shadow:0 6px 22px rgba(201,161,74,.35)}
.nav .btn{margin-left:8px;padding:11px 20px}
/* Bewertungs-CTA: bewusst auffälliger als die übrigen Nav-Knöpfe — soll als Erstes ins Auge fallen */
.btn.bewert{background:var(--gold);color:var(--navy);box-shadow:0 0 0 3px rgba(201,161,74,.18)}
.btn.bewert:hover{background:#B8913F;box-shadow:0 0 0 3px rgba(201,161,74,.28),0 6px 22px rgba(201,161,74,.4)}
@media(max-width:640px){ .btn.bewert{padding:10px 14px;font-size:10.5px} }
@media(max-width:460px){ .bewert-lang{display:none} }
@media(max-width:400px){ .nav{padding:10px 10px} .nav .btn{margin-left:5px;padding:9px 12px}
  .btn.bewert{padding:9px 11px;font-size:9.5px} }

/* ---------- Hero ---------- */
.hero{min-height:100svh;display:flex;align-items:flex-end;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(13,27,42,.55) 0%,rgba(13,27,42,.25) 40%,rgba(13,27,42,.92) 88%),
  url('assets/hero.jpg') center 30%/cover no-repeat}
/* WebP für Browser, die es unterstützen — spart 48 KB beim ersten Seitenaufruf.
   Die Zeile darüber bleibt als Rückfall stehen und wird nur überschrieben,
   wenn image-set verstanden wird. */
@supports (background-image: image-set(url('x.webp') type('image/webp'))){
  .hero{background:linear-gradient(180deg,rgba(13,27,42,.55) 0%,rgba(13,27,42,.25) 40%,rgba(13,27,42,.92) 88%),
    image-set(url('assets/hero.webp') type('image/webp'), url('assets/hero.jpg') type('image/jpeg')) center 30%/cover no-repeat}
}
.hero-inner{width:100%;max-width:1180px;margin:0 auto;padding:140px 24px 0}
.hero h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:clamp(44px,7.2vw,92px);line-height:1.04;color:#fff;max-width:820px}
.hero h1 em{font-style:italic;color:var(--goldL)}
.hero .lead{margin-top:22px;font-size:clamp(16px,1.6vw,19px);color:#CBD4DB;max-width:640px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin:34px 0 46px}
.descriptor{border-top:1px solid var(--lineD);padding:18px 0 26px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  font:600 12px 'Montserrat',Arial,sans-serif;letter-spacing:.3em;color:var(--goldL);text-transform:uppercase}
.descriptor span{color:#5E6E7D}

/* ---------- Zahlenleiste ---------- */
.facts{background:var(--navy2);border-top:1px solid var(--lineD);border-bottom:1px solid var(--lineD)}
.facts .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.fact{padding:38px 26px;border-left:1px solid var(--lineD)}
.fact:first-child{border-left:0}
.fact b{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:44px;color:var(--goldL);line-height:1}
.fact span{display:block;margin-top:8px;font-size:13px;color:var(--muted)}

/* ---------- Divider (Signatur) ---------- */
.divider{display:flex;align-items:center;gap:22px;padding:64px 24px 0;max-width:1180px;margin:0 auto}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.divider::after{background:linear-gradient(90deg,var(--gold),transparent)}
.divider img{height:34px;opacity:.9}
.light .divider::before{background:linear-gradient(90deg,transparent,#B99A50)}
.light .divider::after{background:linear-gradient(90deg,#B99A50,transparent)}

/* ---------- Sektionen ---------- */
.section{padding:88px 0 96px}
.section.light{background:var(--stone);color:var(--ink)}
.section-head{max-width:760px;margin-bottom:54px}
.section-head h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:clamp(32px,4.4vw,52px);line-height:1.08;color:#fff;margin-top:14px}
.light .section-head h2{color:var(--navy)}
.section-head p{margin-top:16px;color:#B9C3CC;font-size:17px}
.light .section-head p{color:#5A6672}

/* Drei Säulen */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--lineL);background:#fff}
.pillar{padding:42px 34px;border-left:1px solid var(--lineL)}
.pillar:first-child{border-left:0}
.pillar h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:30px;color:var(--navy)}
.pillar .tag{font:700 10px 'Montserrat',Arial,sans-serif;letter-spacing:.24em;color:var(--gold)}
.pillar p{margin-top:14px;font-size:14.5px;color:#5A6672}
.pillar .note{margin-top:18px;padding-top:16px;border-top:1px solid var(--lineL);font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:17px;color:var(--navy)}

/* Split-Reihen */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-top:64px}
.split.rev .media{order:2}
.split .media{position:relative}
.split .media img{width:100%;height:420px;object-fit:cover}
.split .media::after{content:"";position:absolute;inset:14px -14px -14px 14px;border:1px solid var(--gold);z-index:-1;opacity:.5}
.light .split .media::after{border-color:#B99A50}
.split h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:clamp(26px,3vw,38px);line-height:1.12;color:#fff;margin-top:12px}
.light .split h3{color:var(--navy)}
.split p{margin-top:16px;color:#B9C3CC;font-size:15.5px}
.light .split p{color:#5A6672}
.split ul{margin:18px 0 0;padding:0;list-style:none}
.split li{padding:9px 0 9px 26px;position:relative;color:#C9D2D9;font-size:15px;border-bottom:1px solid var(--lineD)}
.light .split li{color:#4B5864;border-color:var(--lineL)}
.split li::before{content:"";position:absolute;left:2px;top:17px;width:10px;height:1.5px;background:var(--gold)}

/* Plattform-Reihen mit Status-Siegel */
.tool{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:56px 0;border-top:1px solid var(--lineD)}
.tool:first-of-type{border-top:0;padding-top:24px}
.tool.rev .t-media{order:2}
.t-media img{width:100%;height:340px;object-fit:cover}
.tool h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:34px;color:#fff;line-height:1.1}
.tool p{margin-top:14px;color:#B9C3CC;font-size:15.5px}
.seal{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:6px 14px;border:1px solid var(--gold);
  font:700 10px 'Montserrat',Arial,sans-serif;letter-spacing:.22em;color:var(--goldL);text-transform:uppercase}
.seal::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold)}
.seal.dev::before{background:#7E8996}
.seal.dev{border-color:#4A5A69;color:#9AA6B1}

/* Formular */
.form-card{background:var(--navy2);border:1px solid var(--lineD);padding:52px;max-width:860px;margin:56px auto 0}
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
/* min-width:auto ist der Grid-Standard und lässt ein breites Kind — hier das
   select mit langen Optionstexten — die Spalte über den Container hinaus
   aufziehen. Ohne minmax(0,…) und min-width:0 schiebt das die Seite auf dem
   Telefon seitlich weg, obwohl der Breakpoint korrekt auf eine Spalte schaltet. */
.field{min-width:0}
.field input,.field select,.field textarea{max-width:100%}

/* Dritte Formularkonvention: nacktes <label>Text<br><input></label> ohne Klasse.
   Kommt auf der Partnerseite vor und blieb dadurch völlig ungestylt — native
   weiße Felder auf Navy, uneinheitliche Breiten, das select lief seitlich aus
   dem Bild. Gleiche Optik wie .field und .f, damit alle drei Konventionen
   nebeneinander identisch aussehen.

   Jede Regel gilt zusätzlich für ein label eine Ebene tiefer, in .namenpaar.
   Grund: die Auswahl greift bewusst nur auf direkte Kinder (">"), sonst würde
   sie auch das label in .field treffen und dessen eigene Optik überschreiben.
   Genau dieses ">" hat der Wrapper um Vor- und Nachname aber unterbrochen —
   die beiden Felder fielen dadurch auf die nackte Browser-Darstellung zurück
   (weiße Kästen, Beschriftung nicht in Versalien und nicht in Gold). */
.form-grid>label,
.form-grid>.namenpaar>label{display:block;min-width:0;font:700 10.5px 'Montserrat',Arial,sans-serif;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);line-height:1.4}
.form-grid>label br,
.form-grid>.namenpaar>label br{display:none}
.form-grid>label input,.form-grid>label select,.form-grid>label textarea,
.form-grid>.namenpaar>label input,.form-grid>.namenpaar>label select,.form-grid>.namenpaar>label textarea{
  display:block;width:100%;max-width:100%;box-sizing:border-box;margin-top:9px;
  background:var(--navy);border:1px solid #2A3B4D;color:#EDF0F3;padding:14px 16px;
  font:15px 'Montserrat',Arial,sans-serif;transition:border-color .15s;
  border-radius:0;-webkit-appearance:none;appearance:none}
.form-grid>label select,
.form-grid>.namenpaar>label select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C9A14A' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}
.form-grid>label textarea,
.form-grid>.namenpaar>label textarea{resize:vertical;min-height:88px;line-height:1.6}
.form-grid>label input:focus,.form-grid>label select:focus,.form-grid>label textarea:focus,
.form-grid>.namenpaar>label input:focus,.form-grid>.namenpaar>label select:focus,.form-grid>.namenpaar>label textarea:focus{
  border-color:var(--gold);outline:none}
.form-grid>label input::placeholder,.form-grid>label textarea::placeholder,
.form-grid>.namenpaar>label input::placeholder,.form-grid>.namenpaar>label textarea::placeholder{color:#5F6D7C}
.field label{display:block;font:700 10.5px 'Montserrat',Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:9px}
.field input,.field select,.field textarea{width:100%;background:var(--navy);border:1px solid #2A3B4D;color:#EDF0F3;
  padding:14px 16px;font:15px 'Inter',Arial,sans-serif;transition:border-color .15s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);outline:none}
.field.full{grid-column:1/-1}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:var(--muted);margin-top:24px}
.consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--gold)}
.consent a{color:var(--goldL);text-decoration:underline;text-decoration-color:var(--gold)}
.consent.folge{margin-top:11px}

/* ============================================================
   KÄSTCHEN IN EINWILLIGUNGSZEILEN
   ------------------------------------------------------------
   Zwei Fehler, die beide erst am Telefon auffallen — und beide
   ausgerechnet an der Zeile, auf die es rechtlich ankommt.

   1. In einer Flex-Zeile schrumpft ein Kästchen mit: aus 18 px
      wurden bei 390 px gemessene 13. Damit war die Einwilligung
      das kleinste Ziel der ganzen Seite.

   2. .form-grid>label input gilt für Eingabefelder und setzt
      padding:14px 16px und appearance:none. Traf es ein Kästchen,
      entstand daraus ein 34 x 30 großer Kasten OHNE Haken: auf
      makler-partner.html konnte niemand sehen, ob die Pflicht-
      einwilligung gesetzt war.
   ============================================================ */
label input[type=checkbox]{flex:0 0 auto;accent-color:var(--gold)}
.form-grid>label input[type=checkbox],
.form-grid>.namenpaar>label input[type=checkbox]{display:inline-block;width:18px;height:18px;
  padding:0;margin-top:2px;-webkit-appearance:checkbox;appearance:checkbox;accent-color:var(--gold)}

/* Eine Einwilligung ist Fließtext, den man liest — nicht die goldene
   Versalienbeschriftung eines Eingabefelds. */
.form-grid>label.zustimmung{display:flex;gap:9px;align-items:flex-start;
  font:400 13px 'Montserrat',Arial,sans-serif;letter-spacing:0;text-transform:none;
  color:var(--muted);line-height:1.6}
.form-grid>label.zustimmung a{color:var(--goldL);text-decoration:underline;text-decoration-color:var(--gold)}
.form-card .btn{margin-top:28px;width:100%;padding:17px}

/* Kompaktes Feldraster der Werkzeug- und Portalseiten.
   Struktur: <label class="f"><span>Beschriftung</span><input></label>
   Diese Konvention wird von acht Seiten benutzt, war aber nie definiert —
   ohne sie fallen Beschriftung und Feld auf display:inline zurück und
   laufen ineinander, sodass Eingaben der falschen Beschriftung zugeordnet
   werden. Optik bewusst identisch zu .field, damit beide Konventionen
   nebeneinander gleich aussehen. */
.feldgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:640px){.feldgrid{grid-template-columns:1fr;gap:16px}}
/* Vor- und Nachname gehören als Paar zusammen. Ohne eigene Zeile hängt es
   von der Anzahl der davorstehenden Felder ab, ob die beiden nebeneinander
   landen oder über einen Zeilenumbruch auseinandergerissen werden. Dieselbe
   Spaltenregel und derselbe Umbruchpunkt wie bei .feldgrid — keine neue
   Layout-Logik, nur zusammengehalten. */
.namenpaar{display:grid;grid-template-columns:1fr 1fr;gap:inherit;grid-column:span 2}
/* span 2 statt 1/-1: die Raster mit fester Zweispaltigkeit (.feldgrid,
   .form-grid) behandeln beides gleich, das Suchauftragsraster auf
   angebote.html hat aber je nach Breite bis zu vier Spalten. Dort hätte
   1/-1 das Namenspaar über die ganze Zeile gezogen und die beiden Felder
   deutlich breiter gemacht als alle anderen. Unterhalb von 640 px steht
   überall nur eine Spalte zur Verfügung; span 2 würde dann eine zweite,
   implizite Spalte erzeugen und die Seite seitlich wegschieben, deshalb
   dort zurück auf auto. */
@media(max-width:640px){.namenpaar{grid-template-columns:1fr;grid-column:auto}}
.f{display:block;min-width:0}
.f.voll{grid-column:1/-1}
.f>span{display:block;font:700 10.5px 'Montserrat',Arial,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-bottom:9px;line-height:1.4}
.f input,.f select,.f textarea{width:100%;background:var(--navy);border:1px solid #2A3B4D;
  color:#EDF0F3;padding:14px 16px;font:15px 'Montserrat',Arial,sans-serif;
  transition:border-color .15s;border-radius:0;-webkit-appearance:none;appearance:none}
.f select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C9A14A' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}
.f textarea{resize:vertical;min-height:88px;line-height:1.6}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--gold);outline:none}
.f input::placeholder,.f textarea::placeholder{color:#5F6D7C}
.f input[type=checkbox]{width:16px;height:16px;accent-color:var(--gold)}

/* Kennzahlenkacheln der Ergebnisansichten */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-top:22px}
.kpi{background:var(--navy);border:1px solid var(--lineD);border-top:2px solid var(--gold);padding:16px 18px}
.kpi .l{font:700 9px 'Montserrat',Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px}
.kpi .w{font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;font-weight:600;color:#fff;line-height:1.15}
.kpi .s{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.5}
.hint{color:var(--muted);font-size:12.5px;line-height:1.6}

/* Footer */
footer{background:#0A1622;border-top:1px solid var(--lineD);padding:64px 0 40px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px}
.foot-grid h4{font:700 11px 'Montserrat',Arial,sans-serif;letter-spacing:.24em;color:var(--gold);text-transform:uppercase;margin-bottom:16px}
.foot-grid p,.foot-grid a{display:block;color:#8C97A3;font-size:14px;padding:3px 0}
.foot-grid a:hover{color:var(--goldL)}
.foot-note{margin-top:48px;padding-top:22px;border-top:1px solid var(--lineD);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font:600 10.5px 'Montserrat',Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#5E6E7D}

/* Rechtsseiten */
.legal{max-width:820px;margin:0 auto;padding:150px 24px 90px}
.legal h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:46px;color:#fff}
.legal h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:26px;color:var(--goldL);margin:38px 0 12px}
.legal p,.legal li{color:#B9C3CC;font-size:15px;margin-top:10px;overflow-wrap:break-word}
.legal{overflow-wrap:break-word}
.legal .hinweis{margin-top:30px;border:1px solid var(--gold);background:var(--goldDim);padding:18px 22px;color:#E7D9B8;font-size:14px}

/* Reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* Responsive */
@media(max-width:960px){
  .nav-links{display:none}
  .nav{gap:10px;padding:12px 4vw}
  .nav-actions{margin-left:auto}
  .nav-actions .btn{padding:10px 13px;font-size:10.5px}
}
@media(max-width:560px){
  .nav{padding:10px 14px}
  .brand img{height:32px}
  .brand-name{font-size:18px}
  .brand-sub{font-size:6.6px}
  .nav-actions{gap:6px}
  .nav-actions .btn{padding:9px 10px;font-size:9.5px;letter-spacing:.05em}
  .facts .wrap{grid-template-columns:1fr 1fr}
  .fact:nth-child(3){border-left:0}
  .pillars{grid-template-columns:1fr}
  .pillar{border-left:0;border-top:1px solid var(--lineL)}
  .pillar:first-child{border-top:0}
  .split,.tool{grid-template-columns:1fr;gap:30px}
  .split.rev .media,.tool.rev .t-media{order:0}
  .split .media img{height:300px}
  .form-card{padding:32px 22px}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:1fr}
}


/* ---------- Mobile Navigation (Burger) ---------- */
.burger{display:none;background:none;border:1px solid rgba(255,255,255,.18);padding:9px 10px;cursor:pointer;
flex-direction:column;gap:4px;align-items:center;justify-content:center;width:40px;height:38px}
.burger span{display:block;width:17px;height:1.6px;background:var(--goldL,#DEBB74);transition:transform .2s,opacity .2s}
.burger.auf span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.burger.auf span:nth-child(2){opacity:0}
.burger.auf span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}
.mobilmenu{display:none;position:absolute;top:100%;left:0;right:0;background:#0B1724;
border-top:1px solid rgba(255,255,255,.11);border-bottom:1px solid rgba(201,161,74,.3);
flex-direction:column;padding:6px 0;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.mobilmenu.auf{display:flex}
.mobilmenu a{font:600 12.5px 'Montserrat',Arial,sans-serif;letter-spacing:.1em;color:#C7CFD6;
text-transform:uppercase;padding:14px 5vw;border-bottom:1px solid rgba(255,255,255,.05)}
.mobilmenu a:last-child{border-bottom:0;color:var(--goldL,#DEBB74)}
@media(max-width:900px){
  .burger{display:flex}
  .nav{position:relative;flex-wrap:nowrap}
}
@media(max-width:520px){
  .nav-actions .btn.solid{display:none}
  .nav-actions .btn{padding:9px 12px;font-size:10px}
}
@media(max-width:380px){
  .nav-actions .btn{display:none}
  .brand-name{font-size:17px}
}

/* Wortmarke: "REAL ESTATE" im Blocksatz, bündig mit dem A von SOWA */
.brand>span,.brand>span>span:not(.brand-name):not(.brand-sub){display:inline-block}
.brand-name{margin-right:0}
.brand-sub{display:flex;justify-content:space-between;letter-spacing:0;font-size:8.2px;width:100%}
.brand-sub i{font-style:normal}.brand-sub .sp{width:.45em}

.re{display:flex;justify-content:space-between;letter-spacing:0!important;width:100%;box-sizing:border-box}.re i{font-style:normal;display:inline-block}.re .sp{width:.45em}.re-wrap{display:inline-block}.re-wrap>b,.re-wrap>.bn{margin-right:0;display:block}

.brand-sub{min-width:max-content}
.brand-sub .sp{min-width:.45em;flex:0 0 auto}

/* Leistungsblock: klickbare Karten */
a.pillar{display:block;color:inherit;transition:border-color .2s,transform .2s}
a.pillar:hover{border-color:var(--gold);transform:translateY(-2px)}
a.pillar h3::after{content:" →";color:var(--gold);font-size:.85em}