/* =========================================================================
   Ritter Immobilien, Torgau — helle Seite, Akzent aus dem Firmenlogo.

   Design Read: Maklerbüro mit gewachsenem Bestand im ländlichen Nordsachsen.
   Ruhig, viel Weißraum, die Objektfotos tragen. Serifen für Überschriften
   (Newsreader), Grotesk für Text (Public Sans), beide selbst gehostet.

   Farben kommen aus logo.svg der Firma: Rot #E54222, Grau #6A6C6E.
   Auf Weiß schafft das reine Logo-Rot als Text nur 4,1:1 — deshalb trägt
   #C4351A Schrift und Flächen (5,4:1 gegen Weiß), das reine Rot bleibt für
   Linien und Grafik.
   ========================================================================= */

@font-face{font-family:'Newsreader';src:url('schrift/newsreader-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Newsreader';src:url('schrift/newsreader-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Public Sans';src:url('schrift/public-sans-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Public Sans';src:url('schrift/public-sans-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Public Sans';src:url('schrift/public-sans-600.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  --grund:#FFFFFF;
  --band:#F7F5F2;          /* warmes Band, nimmt den Ton des Logos auf */
  --flaeche:#FFFFFF;
  --tinte:#1C1D20;         /* 15,9:1 auf Weiß */
  --leise:#5D6167;         /* 6,2:1 — Ableitung des Logo-Graus #6A6C6E */
  --linie:rgba(28,29,32,.13);
  --linie-2:rgba(28,29,32,.26);

  --akzent:#C4351A;        /* Fläche und Schrift, 5,4:1 auf Weiß */
  --akzent-marke:#E54222;  /* reines Logo-Rot, Linien und Grafik */
  --akzent-dunkel:#A32B12; /* Hover */
  --akzent-auf:#FFFFFF;
  --akzent-zart:#FDF1EE;   /* sehr helle Tönung für Flächen */

  --radius:3px;
  --display:'Newsreader',Georgia,'Times New Roman',serif;
  --body:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --breite:76rem;
  --rand:clamp(1rem,4vw,3rem);
  --luft:clamp(3.5rem,7vw,6rem);
}

*,*::before,*::after{box-sizing:border-box}
/* MUSS vor allen Bausteinen stehen: .objekt setzt display:flex, das schlaegt
   die Browser-Regel fuer [hidden] und liess ausgeblendete Kacheln sichtbar
   (03.08.2026 gefunden — der Filter hatte korrekt gesetzt, nur sah man nichts). */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
body{margin:0;background:var(--grund);color:var(--tinte);font-family:var(--body);
  font-size:clamp(1rem,.97rem + .2vw,1.06rem);line-height:1.68;-webkit-font-smoothing:antialiased;
  overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.12;letter-spacing:-.005em;
  margin:0;text-wrap:balance}
h1{font-size:clamp(2rem,1.2rem + 3.2vw,3.6rem)}
h2{font-size:clamp(1.6rem,1.1rem + 2vw,2.6rem)}
h3{font-size:1.2rem}
p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand)}
.abschnitt{padding-block:var(--luft)}
.band{background:var(--band)}
.lead{font-size:clamp(1.04rem,1rem + .4vw,1.2rem);color:var(--leise);max-width:62ch;margin-top:.9rem}
.titel{margin-bottom:.4rem}
.schild{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--akzent);display:inline-flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.schild::before{content:"";width:2rem;height:2px;background:var(--akzent-marke)}
.sprung{position:absolute;left:-999px}
.sprung:focus{left:1rem;top:1rem;z-index:100;position:fixed;background:var(--akzent);
  color:#fff;padding:.7rem 1rem;border-radius:var(--radius)}

/* ---- Knöpfe ---- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;
  padding:.8rem 1.3rem;border-radius:999px;border:1px solid var(--akzent);background:var(--akzent);
  color:var(--akzent-auf);font-weight:600;font-size:.92rem;text-decoration:none;line-height:1.1;
  transition:background .18s,border-color .18s,color .18s}
.knopf:hover{background:var(--akzent-dunkel);border-color:var(--akzent-dunkel)}
.knopf--linie{background:transparent;color:var(--tinte);border-color:var(--linie-2)}
.knopf--linie:hover{background:var(--tinte);border-color:var(--tinte);color:#fff}

/* ---- Kopfleiste mit Aufklappmenü ---- */
.topbar{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linie)}
.topbar__in{display:flex;align-items:center;gap:1.2rem;min-height:74px}
.marke{margin-right:auto;display:flex;align-items:center}
/* 54px statt 42: unter „RITTER" steht „IMMOBILIEN" in feiner Kapitälchen-
   schrift — bei 42px war die zweite Zeile nicht mehr zu lesen. */
.marke img{height:54px;width:auto}
@media (max-width:640px){.marke img{height:44px}}
.nav{display:flex;align-items:center;gap:.3rem}
.nav > a,.nav__knopf{display:inline-flex;align-items:center;gap:.35rem;padding:.6rem .75rem;
  font-size:.94rem;font-weight:500;text-decoration:none;color:var(--tinte);background:none;
  border:0;border-radius:var(--radius);white-space:nowrap}
.nav > a:hover,.nav__knopf:hover{color:var(--akzent)}
.nav > a[aria-current="page"]{color:var(--akzent);font-weight:600}
.nav__ruf{background:var(--akzent);color:#fff!important;border-radius:999px;padding:.6rem 1.1rem!important;
  font-weight:600;font-variant-numeric:tabular-nums}
.nav__ruf:hover{background:var(--akzent-dunkel);color:#fff!important}
.nav__auf{position:relative}
.nav__pfeil{width:.42rem;height:.42rem;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .18s}
.nav__knopf[aria-expanded="true"] .nav__pfeil{transform:rotate(-135deg) translateY(-2px)}
.nav__liste{position:absolute;top:calc(100% + .4rem);left:0;min-width:16rem;padding:.5rem;
  background:#fff;border:1px solid var(--linie);border-radius:var(--radius);
  box-shadow:0 14px 34px rgba(28,29,32,.13);display:none;z-index:70}
.nav__knopf[aria-expanded="true"] + .nav__liste{display:block}
.nav__liste a{display:block;padding:.6rem .7rem;text-decoration:none;font-size:.93rem;
  border-radius:var(--radius);color:var(--tinte)}
.nav__liste a:hover{background:var(--akzent-zart);color:var(--akzent)}
.nav-schalter{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:40px;
  padding:9px;border:1px solid var(--linie-2);border-radius:var(--radius);background:none}
.nav-schalter span{height:2px;background:var(--tinte);display:block}
@media (max-width:1000px){
  .nav-schalter{display:flex}
  .topbar__in{flex-wrap:wrap}
  .nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding-bottom:.8rem}
  .nav.offen{display:flex}
  .nav > a,.nav__knopf{width:100%;justify-content:space-between;padding:.85rem .2rem;
    border-top:1px solid var(--linie)}
  .nav__liste{position:static;display:none;box-shadow:none;border:0;padding:0 0 .5rem 1rem}
  .nav__knopf[aria-expanded="true"] + .nav__liste{display:block}
  .nav__ruf{margin-top:.8rem;justify-content:center}
}

/* ---- Hero ---- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--band);
  border-bottom:1px solid var(--linie);display:flex;align-items:flex-end;
  min-height:min(76vh,620px);padding-block:clamp(4rem,10vw,7rem) clamp(2.5rem,6vw,4rem)}
.hero__bild{position:absolute;inset:0;z-index:-2}
.hero__bild img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.9) 42%,
    rgba(255,255,255,.6) 68%,rgba(255,255,255,.3) 100%),
    linear-gradient(0deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 55%)}
.hero h1{max-width:16ch}
.hero .lead{max-width:46ch}
.hero__tat{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}

/* ---- Filter und Suche ---- */
.filter{display:grid;gap:1rem;margin:2rem 0 1rem;padding:1.3rem;border:1px solid var(--linie);
  border-radius:var(--radius);background:var(--band);
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));align-items:end}
.filter__feld{display:grid;gap:.35rem;min-width:0}
.filter__feld--breit{grid-column:1/-1}
.filter label{font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--leise)}
.filter input,.filter select{min-height:46px;padding:.6rem .8rem;border:1px solid var(--linie-2);
  border-radius:var(--radius);background:#fff;width:100%}
.filter__weg{min-height:46px;padding:.6rem 1rem;border:1px solid var(--linie-2);
  border-radius:999px;background:#fff;font-size:.9rem;font-weight:600}
.filter__weg:hover{border-color:var(--akzent);color:var(--akzent)}
.filter__zahl{color:var(--leise);font-size:.92rem;margin-bottom:1.6rem}
.leer{padding:2rem 0;color:var(--leise);max-width:56ch}
.leer a{color:var(--akzent);font-weight:600}

/* ---- Objektkacheln ---- */
.objekte{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media (min-width:660px){.objekte{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1060px){.objekte{grid-template-columns:repeat(3,minmax(0,1fr))}}
.objekt{display:flex;flex-direction:column;border:1px solid var(--linie);border-radius:var(--radius);
  overflow:hidden;background:#fff;transition:border-color .18s,box-shadow .18s,transform .18s}
.objekt:hover{border-color:var(--akzent);box-shadow:0 12px 30px rgba(28,29,32,.10);transform:translateY(-2px)}
.objekt__bild{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--band)}
.objekt__bild img{width:100%;height:100%;object-fit:cover}
.objekt__bild--leer{background:linear-gradient(135deg,#F2EFEB,#E8E3DD)}
.objekt__text{display:flex;flex-direction:column;gap:.55rem;padding:1.1rem 1.2rem 1.3rem;flex:1}
.objekt__kat{font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--akzent)}
.objekt h3{font-size:1.12rem;line-height:1.25}
.objekt h3 a{text-decoration:none}
.objekt h3 a:hover{color:var(--akzent)}
.objekt__preis{font-family:var(--display);font-size:1.3rem;font-weight:600;
  font-variant-numeric:tabular-nums}
.objekt__daten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem 1rem;
  border-top:1px solid var(--linie);padding-top:.7rem;margin-top:auto}
.objekt__daten dt{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--leise)}
.objekt__daten dd{font-size:.95rem;font-variant-numeric:tabular-nums}
.objekt__mehr{align-self:flex-start;margin-top:.6rem;font-weight:600;font-size:.9rem;
  color:var(--akzent);text-decoration:none;border-bottom:2px solid var(--akzent-marke);
  padding-bottom:2px}
.objekt__mehr:hover{color:var(--akzent-dunkel)}

/* ---- Reiterleiste der Kategorien ---- */
.reiter__leiste{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.reiter{padding:.5rem .95rem;border:1px solid var(--linie-2);border-radius:999px;
  font-size:.88rem;font-weight:500;text-decoration:none;white-space:nowrap}
.reiter:hover{border-color:var(--akzent);color:var(--akzent)}
.reiter--an{background:var(--akzent);border-color:var(--akzent);color:#fff}

/* ---- Unterseiten ---- */
.unterhero,.objektkopf{padding-block:clamp(3rem,7vw,5rem) clamp(1.6rem,4vw,2.6rem);
  background:var(--band);border-bottom:1px solid var(--linie)}
.krumen{display:flex;gap:.5rem;flex-wrap:wrap;color:var(--leise);font-size:.88rem;margin-bottom:1.2rem}
.krumen a{color:var(--akzent);text-decoration:none}
.objektkopf__preis{font-family:var(--display);font-size:clamp(1.4rem,1.1rem + 1vw,2rem);
  font-weight:600;margin-top:.8rem;font-variant-numeric:tabular-nums}
.objekt__seite{display:grid;gap:clamp(1.8rem,4vw,3rem);grid-template-columns:1fr}
@media (min-width:960px){.objekt__seite{grid-template-columns:1.6fr .9fr;align-items:start}}
.objekt__haupt h2{margin-bottom:.8rem}
.objekt__haupt p{color:var(--leise);margin-bottom:.9rem}
.objekt__tabelle{display:grid;gap:.6rem;padding:1.2rem;border:1px solid var(--linie);
  border-radius:var(--radius);background:var(--band)}
.objekt__tabelle > div{display:grid;grid-template-columns:9rem 1fr;gap:.6rem;align-items:baseline}
.objekt__tabelle dt{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--leise)}
.objekt__tabelle dd{font-variant-numeric:tabular-nums}
.objekt__anfrage{display:grid;gap:.7rem;margin-top:1.2rem;padding:1.2rem;
  border:1px solid var(--akzent);border-radius:var(--radius);background:var(--akzent-zart)}
.objekt__anfrage p{color:var(--leise)}
.objekt__anfrage p b{color:var(--tinte)}

.zweispalt{display:grid;gap:clamp(1.8rem,4vw,3.4rem);grid-template-columns:1fr}
@media (min-width:900px){.zweispalt{grid-template-columns:1.15fr .85fr;align-items:start}}
.zweispalt p{color:var(--leise);margin-top:1rem}
.anfrage{padding:1.6rem;border:1px solid var(--linie);border-radius:var(--radius);background:#fff;
  display:grid;gap:.8rem;align-content:start}
.anfrage p{color:var(--leise)}

/* ---- Fußbereich ---- */
.fuss{background:var(--band);border-top:1px solid var(--linie);padding-block:clamp(2.6rem,6vw,4rem)}
.fuss__gitter{display:grid;gap:2rem;grid-template-columns:1fr}
@media (min-width:820px){.fuss__gitter{grid-template-columns:1.3fr repeat(3,minmax(0,1fr));gap:2.5rem}}
.fuss__marke img{height:58px;width:auto;margin-bottom:.9rem}
.fuss__marke p{color:var(--leise);font-size:.94rem;max-width:34ch}
.fuss h3{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--akzent);
  font-family:var(--body);font-weight:600;margin-bottom:.8rem}
.fuss ul{display:grid;gap:.5rem}
.fuss li,.fuss a{color:var(--leise);font-size:.94rem;text-decoration:none}
.fuss a:hover{color:var(--akzent)}
.fuss__cookie{padding:0;border:0;background:none;color:var(--leise);text-decoration:underline;
  text-underline-offset:3px;font-size:.94rem}
.fuss__zeile{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid var(--linie);
  color:var(--leise);font-size:.86rem}

/* ---- Bestandsseiten (Über uns, Kontakt, Recht) ---- */
.prosa{max-width:70ch}
.prosa h2{font-size:1.4rem;margin:2rem 0 .6rem}
.prosa p{color:var(--leise);margin-bottom:1rem}
.prosa a{color:var(--akzent)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* =========================================================================
   Unterseiten aus dem ersten Bau (Über uns, Kontakt, Impressum, Datenschutz)
   Deren Inhalt ist gut und bleibt unverändert — hier bekommen die Bausteine
   ihr Aussehen im hellen Entwurf. Ohne diesen Block standen die Seiten roh
   und ungestaltet da (03.08.2026 als Besucher geprüft).
   ========================================================================= */
.hero--unter{min-height:auto;padding-block:clamp(3rem,7vw,5rem) clamp(1.6rem,4vw,2.6rem);
  background:var(--band);border-bottom:1px solid var(--linie);display:block}
.hero--unter .hero__bild{display:none}
.hero--unter::after{display:none}
.hero__text,.hero__in{width:100%;max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand)}
.hero--unter h1{max-width:20ch;margin-bottom:.6rem}
.rubrik{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--akzent);display:block;margin-bottom:.8rem}
.kopf-lang{max-width:34ch}
.vorspann,.fliess{color:var(--leise)}
.fliess p{margin-bottom:1rem}
.fliess p:last-child{margin-bottom:0}
.zentr{text-align:center;margin-inline:auto}

.wrap-eng{max-width:52rem}
.rechtstext h2{font-size:1.35rem;margin:2.2rem 0 .6rem}
.rechtstext h3{font-size:1.05rem;margin:1.4rem 0 .4rem}
.rechtstext p,.rechtstext li{color:var(--leise);margin-bottom:.9rem}
.rechtstext ul{list-style:disc;padding-left:1.2rem;margin-bottom:1rem}
.rechtstext a{color:var(--akzent)}
.sep{border:0;border-top:1px solid var(--linie);margin:2.4rem 0}

.intro-grid{display:grid;gap:clamp(1.8rem,4vw,3.2rem);grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.intro-grid{grid-template-columns:1.2fr .8fr}}
.zahlen{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));
  margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--linie)}
.zahlen .zeile,.zahlen > div{display:grid;gap:.2rem}
.zahlen strong,.zahlen b{font-family:var(--display);font-size:clamp(1.8rem,1.4rem + 1.6vw,2.6rem);
  font-weight:600;line-height:1;color:var(--tinte);font-variant-numeric:tabular-nums}
.zahlen span,.zahlen small{color:var(--leise);font-size:.92rem}
.punkte{display:grid;gap:1rem;margin-top:1.6rem}
.punkte li{position:relative;padding-left:1.5rem;color:var(--leise)}
.punkte li::before{content:"";position:absolute;left:0;top:.72em;width:.7rem;height:2px;
  background:var(--akzent-marke)}
.punkte strong,.punkte b{display:block;color:var(--tinte);font-weight:600;margin-bottom:.15rem}
.betont{color:var(--tinte);font-weight:600}
.bildunterschrift{color:var(--leise);font-size:.86rem;margin-top:.6rem}

.zug{display:grid;gap:clamp(1.4rem,3vw,2.6rem);grid-template-columns:1fr;align-items:center;
  margin-block:clamp(2rem,5vw,3.4rem)}
@media(min-width:860px){.zug{grid-template-columns:1fr 1fr}
  .zug--kehr .zug__text{order:2}.zug--kehr .zug__bild{order:1}}
.zug__bild img{width:100%;border-radius:var(--radius);border:1px solid var(--linie)}
.zug__text p{color:var(--leise);margin-top:.9rem}

.zitat{background:var(--band);border-block:1px solid var(--linie)}
.zitat blockquote{font-family:var(--display);font-size:clamp(1.3rem,1.05rem + 1.1vw,2rem);
  line-height:1.35;max-width:32ch;margin-inline:auto;text-align:center}
.zitat cite{display:block;margin-top:1.2rem;font-style:normal;font-size:.9rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--akzent);text-align:center}

.kontakt-grid{display:grid;gap:clamp(1.8rem,4vw,3.2rem);grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.kontakt-grid{grid-template-columns:.9fr 1.1fr}}
.kontakt-daten{display:grid;gap:1rem;padding:1.4rem;border:1px solid var(--linie);
  border-radius:var(--radius);background:var(--band)}
.kontakt-daten > div{display:grid;grid-template-columns:7rem 1fr;gap:.5rem 1rem;align-items:baseline}
.kontakt-daten dt,.kontakt-daten .rubrik{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--leise);margin:0}
.kontakt-daten dd{margin:0}
.kontakt-daten a{color:var(--akzent);text-decoration:none}
.feld{display:grid;gap:.35rem;margin-bottom:1rem}
/* Zustimmungszeile: Kaestchen links, Text daneben. `.feld` ist ein Grid —
   ein inline gesetztes `flex-direction:row` blieb dort wirkungslos, das
   Kaestchen stand ueber dem Text (04.08.2026). */
.feld--zeile{display:flex;align-items:flex-start;gap:.7rem}
.feld--zeile input[type=checkbox]{flex:0 0 auto;width:24px;min-width:24px;height:24px;
  min-height:24px;margin:.15rem 0 0;accent-color:var(--akzent)}
.feld--zeile label{font-size:.9rem;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--leise);line-height:1.5}
.feld label{font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--leise)}
.feld input,.feld textarea{min-height:46px;padding:.65rem .85rem;border:1px solid var(--linie-2);
  border-radius:var(--radius);background:#fff;width:100%;font-family:var(--body)}
.feld textarea{min-height:9rem;resize:vertical}
.formhinweis{color:var(--leise);font-size:.86rem;margin-top:.8rem}
.knopf-voll{background:var(--akzent);color:#fff;border-color:var(--akzent)}
.knopf-voll:hover{background:var(--akzent-dunkel);border-color:var(--akzent-dunkel)}

/* ---- Galerie auf den Objektseiten: ein großes Bild, Pfeile, Vorschauleiste -- */
/* Galerie: grosses Bild mit Pfeilen, darunter eine schmale Vorschaureihe.
   .galerie ist bewusst KEIN Raster mehr — als Zweispalter rutschte die Reihe
   in die zweite Spalte und stapelte sich am Handy (03.08.2026). */
.galerie{display:block;margin-bottom:2rem}
.galerie__gross{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--linie);background:var(--band)}
.galerie__gross img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.galerie__pfeil{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;
  border-radius:50%;border:1px solid var(--linie-2);background:rgba(255,255,255,.92);
  display:grid;place-items:center;transition:background .15s,border-color .15s}
.galerie__pfeil:hover{background:#fff;border-color:var(--akzent)}
.galerie__pfeil::before{content:"";width:.6rem;height:.6rem;border-top:2px solid var(--tinte);
  border-right:2px solid var(--tinte)}
.galerie__pfeil--zurueck{left:.8rem}
.galerie__pfeil--zurueck::before{transform:rotate(-135deg);margin-left:4px}
.galerie__pfeil--vor{right:.8rem}
.galerie__pfeil--vor::before{transform:rotate(45deg);margin-right:4px}
.galerie__zahl{position:absolute;right:.8rem;bottom:.8rem;margin:0;padding:.3rem .7rem;
  border-radius:999px;background:rgba(28,29,32,.72);color:#fff;font-size:.8rem;
  font-variant-numeric:tabular-nums;backdrop-filter:blur(4px)}

/* ---- Startseite: Auszug der Angebote ---- */
.mehr-leiste{display:flex;justify-content:center;margin-top:2.4rem}
.filter__suchen{min-height:46px;padding:.6rem 1.4rem;border-radius:999px;border:1px solid var(--akzent);
  background:var(--akzent);color:#fff;font-weight:600;font-size:.9rem}
.filter__suchen:hover{background:var(--akzent-dunkel);border-color:var(--akzent-dunkel)}
.filter option:disabled{color:#B9BCC0}

/* Merkmalslisten in der Objektbeschreibung (raumweise Gliederung der Firma) */
.objekt__haupt h3{font-family:var(--display);font-size:1.15rem;margin:1.8rem 0 .6rem;
  padding-bottom:.4rem;border-bottom:1px solid var(--linie)}
.objekt__haupt h3:first-child{margin-top:0}
.merkmale{display:grid;gap:.5rem;margin-bottom:.4rem}
.merkmale li{position:relative;padding-left:1.2rem;color:var(--leise);line-height:1.55}
.merkmale li::before{content:"";position:absolute;left:0;top:.7em;width:.5rem;height:1px;
  background:var(--akzent-marke)}

/* ---- Landingpage: Bereichskacheln, Ablauf, Siegel ---- */
.bereiche{display:grid;gap:1.2rem;grid-template-columns:1fr;margin-top:2.2rem}
@media(min-width:640px){.bereiche{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.bereiche{grid-template-columns:repeat(4,minmax(0,1fr))}}
.bereich{display:flex;flex-direction:column;gap:.6rem;padding:1.4rem;border:1px solid var(--linie);
  border-radius:var(--radius);background:#fff;transition:border-color .18s,box-shadow .18s}
.bereich:hover{border-color:var(--akzent);box-shadow:0 10px 26px rgba(28,29,32,.08)}
.bereich h3{font-size:1.15rem}
.bereich p{color:var(--leise);font-size:.95rem;flex:1}
.bereich__mehr{align-self:flex-start;font-weight:600;font-size:.9rem;color:var(--akzent);
  text-decoration:none;border-bottom:2px solid var(--akzent-marke);padding-bottom:2px}
.bereich__mehr:hover{color:var(--akzent-dunkel)}

.schritte{display:grid;gap:1.4rem;margin-top:2.2rem;grid-template-columns:1fr}
@media(min-width:760px){.schritte{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.8rem 2.4rem}}
@media(min-width:1100px){.schritte{grid-template-columns:repeat(4,minmax(0,1fr))}}
.schritt{display:grid;gap:.6rem;padding-top:1rem;border-top:2px solid var(--akzent-marke)}
.schritt__nr{font-family:var(--display);font-size:.9rem;font-weight:600;color:var(--akzent);
  font-variant-numeric:tabular-nums;letter-spacing:.1em}
.schritt h3{font-size:1.1rem;margin-bottom:.3rem}
.schritt p{color:var(--leise);font-size:.95rem}

.siegel-block{display:grid;gap:clamp(1.8rem,4vw,3.2rem);grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.siegel-block{grid-template-columns:1.1fr .9fr}}
.siegel{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:center;justify-content:center}
.siegel img{height:clamp(90px,14vw,130px);width:auto}
.mehr-leiste{gap:.8rem;flex-wrap:wrap}

/* Vorschaureihe unter dem grossen Bild: eine Zeile, bei vielen Bildern
   seitlich schiebbar statt umbrechend. */
.galerie__reihe{display:flex;gap:.6rem;margin-top:.7rem;overflow-x:auto;padding-bottom:.3rem;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.galerie__mini{flex:0 0 auto;width:5.4rem;padding:0;border:1px solid var(--linie);
  border-radius:var(--radius);overflow:hidden;background:none;line-height:0;opacity:.72;
  transition:opacity .15s,border-color .15s}
.galerie__mini:hover{opacity:1;border-color:var(--akzent)}
.galerie__mini.ist-an{opacity:1;border-color:var(--akzent);box-shadow:inset 0 0 0 1px var(--akzent)}
.galerie__mini img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media(min-width:900px){.galerie__mini{width:6.4rem}}

/* Der Name unter dem Zitat steht mittig unter dem Zitat (Ansage 04.08.2026). */
.zitat figure{text-align:center}
.zitat figcaption{text-align:center;margin-inline:auto}

/* ── Anfahrtskarte, laedt erst nach Zustimmung ────────────────────────────
   Gleiche Bauform wie auf den anderen Seiten: Der Rahmen steht sofort,
   das Google-Fenster erst nach dem Klick. */
.kartenband{margin-top:0}
.karte{position:relative;width:100%;height:clamp(280px,38vw,460px);
  background:var(--flaeche,#fff);border-top:1px solid var(--linie)}
.karte iframe{display:block;width:100%;height:100%;border:0}
.karte__sperre{position:absolute;inset:0;display:grid;place-items:center;
  padding:clamp(1.2rem,4vw,2.4rem);background:var(--band,#faf7f5)}
.karte.ks-frei .karte__sperre{display:none}
.karte__kasten{width:fit-content;max-width:52ch;text-align:center}
.karte__wo{font-weight:700;font-size:clamp(1.05rem,1rem + .7vw,1.4rem);
  line-height:1.25;margin-bottom:.8rem}
.karte__grund{font-size:.95rem;color:var(--leise);margin-bottom:1.5rem}
.karte__reihe{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.karte__klein{margin-top:1.2rem;font-size:.78rem;color:var(--leise)}

/* Nur fuer Vorlesegeraete. */
.nur-vorlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}