/* ============================ UNTERSEITE IMMOBILIENANGEBOTE (07.10.) ============================ */
/* ---------- Hero: Ortsverzeichnis (07.10., ueberarbeitet) ----------
   Die Orte selbst sind die Ueberschrift: jeder Ort mit Angebot steht als Wort in der Wand,
   die hochgestellte Zahl ist die Anzahl der Objekte dort. Rechts steht das Objekt, ueber das man
   gerade faehrt. Rot nur fuer den aktiven Ort, alles andere bleibt Tinte. */
.an-hero{background:var(--papier);padding:calc(var(--kopf-hoehe) + clamp(24px,4vh,56px)) 0 clamp(56px,6vw,96px)}
.an-hero-raster{display:grid;gap:clamp(36px,4vw,72px);align-items:start}
@media (min-width:1000px){.an-hero-raster{grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr)}}
.an-titel{margin:0 0 clamp(24px,2.6vw,40px);font-family:var(--schrift-hl);font-weight:600;font-size:clamp(22px,2.2vw,36px);
  line-height:1.1;letter-spacing:-.015em;color:var(--tinte)}
.an-wand{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.02em .32em;
  font-family:var(--schrift-hl);font-weight:600;font-size:clamp(28px,3.3vw,56px);line-height:1.04;letter-spacing:-.035em}
.an-wand li{display:inline-flex;align-items:baseline}
.an-wand li:not(:last-child)::after{content:"/";margin-left:.32em;font-weight:300;color:var(--stein);letter-spacing:0}
.an-wand .an-ort-knopf{padding:0;border:0;background:none;font:inherit;font-weight:600;letter-spacing:inherit;color:var(--tinte);cursor:pointer;text-align:left;
  transition:color .25s var(--kurve),opacity .25s var(--kurve)}
.an-ort-knopf sup{font-family:var(--schrift-label);font-weight:500;font-size:.3em;letter-spacing:.04em;vertical-align:top;
  position:relative;top:.5em;margin-left:.18em;color:var(--text-2)}
@media (hover:hover){
  .an-wand:hover .an-ort-knopf{color:rgba(17,16,14,.28)}
  .an-wand:hover .an-ort-knopf sup{color:rgba(94,91,85,.5)}
}
.an-wand .an-ort-knopf:hover,.an-wand .an-ort-knopf.aktiv,.an-wand .an-ort-knopf:focus-visible{color:var(--rot)}
.an-wand .an-ort-knopf:hover sup,.an-wand .an-ort-knopf.aktiv sup{color:var(--rot)}
.an-ort-knopf:focus-visible{outline:2px solid var(--rot);outline-offset:4px;border-radius:2px}
.an-hinweis{margin:clamp(24px,2.4vw,36px) 0 0;font-family:var(--schrift-label);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
@media (hover:none){.an-hinweis{display:none}}

/* Vorschau rechts: haftet, waehrend man durch die Wand faehrt */
.an-vorschau{position:sticky;top:calc(var(--kopf-hoehe) + 24px);display:flex;flex-direction:column;gap:18px}
.an-vorschau-bild{aspect-ratio:1/1;border-radius:var(--r-8);overflow:hidden;background:var(--stein)}
.an-vorschau-bild img{width:100%;height:100%;object-fit:cover;display:block}
.an-vorschau-ort{margin:0;font-family:var(--schrift-label);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--rot)}
.an-vorschau-titel{margin:6px 0 0;font-family:var(--schrift-hl);font-weight:600;font-size:clamp(18px,1.4vw,24px);line-height:1.2;letter-spacing:-.015em;color:var(--tinte)}
.an-vorschau-fakten{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;font-size:15px;color:var(--text-2)}
.an-vorschau-fakten b{font-family:var(--schrift-hl);font-size:20px;color:var(--tinte)}
@media (max-width:999px){.an-vorschau{display:none}}

/* Ortsfilter-Hinweis in der Liste */
.an-ortfilter b{color:var(--tinte)}
.an-ortfilter button{margin-left:12px;padding:6px 14px;border-radius:999px;border:1px solid var(--linie-stark);background:transparent;cursor:pointer;
  font:inherit;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte)}
.an-ortfilter button:hover{background:var(--tinte);color:var(--weiss)}

/* Liste */
.an-liste{background:var(--papier);padding:0 0 clamp(80px,9vw,140px)}
.an-werkzeug{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding:clamp(20px,2vw,28px) 0;
  border-top:1px solid var(--linie-stark);border-bottom:1px solid var(--linie);position:sticky;top:var(--kopf-hoehe);z-index:5;background:var(--papier)}
.an-sort{display:flex;align-items:center;gap:12px;font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.an-sort select{min-height:var(--ziel-min);padding:0 40px 0 18px;border:1px solid var(--linie-stark);border-radius:999px;background:transparent;
  font:inherit;color:var(--tinte);letter-spacing:.04em;text-transform:none;font-size:15px;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2311100E' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.an-sort select:focus-visible{outline:2px solid var(--rot);outline-offset:2px}
.an-anzahl{margin:clamp(24px,2.4vw,36px) 0 clamp(20px,2vw,28px);font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.an-raster{list-style:none;margin:0;padding:0;display:grid;gap:clamp(36px,3.4vw,56px) clamp(16px,1.6vw,28px);grid-template-columns:1fr}
@media (min-width:640px){.an-raster{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.an-raster{grid-template-columns:repeat(3,1fr)}}
.an-karte[hidden]{display:none}
.an-link{position:relative;display:flex;flex-direction:column;gap:18px;color:var(--tinte);text-decoration:none}
.an-bild{display:block;aspect-ratio:3/2;border-radius:var(--r-8);overflow:hidden;background:var(--stein)}
.an-bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--kurve)}
.an-link:hover .an-bild img{transform:scale(1.05)}
.an-text{display:flex;flex-direction:column;gap:10px;padding-right:56px}
.an-ort{font-family:var(--schrift-label);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.an-karte .an-titel{font-family:var(--schrift-hl);font-weight:600;font-size:clamp(19px,1.35vw,23px);line-height:1.2;letter-spacing:-.015em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color var(--dauer-ui) var(--kurve)}
.an-link:hover .an-titel{color:var(--rot)}
.an-fakten{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;font-size:15px;color:var(--text-2)}
.an-fakten b{margin-left:auto;font-family:var(--schrift-hl);font-size:clamp(18px,1.3vw,22px);color:var(--tinte);letter-spacing:-.01em}
.an-karte .an-fakten b{margin-left:0;order:-1;flex-basis:100%}
.an-karte .an-pfeil{display:grid;place-items:center;position:absolute;right:0;bottom:0;top:auto;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--linie-stark);color:var(--tinte);transition:background var(--dauer-ui) var(--kurve),color var(--dauer-ui) var(--kurve),border-color var(--dauer-ui) var(--kurve)}
.an-link:hover .an-pfeil{background:var(--rot);border-color:var(--rot);color:var(--weiss)}
.an-link:focus-visible{outline:3px solid var(--rot);outline-offset:6px;border-radius:var(--r-8)}
.an-mehr-zeile{display:flex;justify-content:center;margin-top:clamp(48px,5vw,80px)}
.an-mehr{min-height:var(--knopf-hoehe);padding:0 32px;border-radius:999px;border:1px solid var(--tinte);background:transparent;color:var(--tinte);cursor:pointer;
  font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.1em;text-transform:uppercase;transition:background var(--dauer-ui) var(--kurve),color var(--dauer-ui) var(--kurve)}
.an-mehr:hover{background:var(--tinte);color:var(--weiss)}
.an-mehr[hidden]{display:none}
.an-mehr:focus-visible{outline:2px solid var(--rot);outline-offset:3px}

/* Abschluss */
.an-ende{background:var(--tinte);color:var(--weiss);padding:clamp(80px,9vw,140px) 0}
.an-ende .rot-hell{color:var(--rot-hell)}
.an-ende-raster{display:grid;gap:clamp(16px,1.6vw,24px)}
@media (min-width:900px){.an-ende-raster{grid-template-columns:1fr 1fr}}
.an-ende-feld{display:flex;flex-direction:column;gap:18px;padding:clamp(32px,3.6vw,56px);border-radius:var(--r-8);background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);color:var(--weiss);text-decoration:none;transition:background var(--dauer-ui) var(--kurve)}
.an-ende-feld:hover{background:rgba(255,255,255,.09)}
.an-ende-feld--rot{background:var(--rot);border-color:var(--rot)}
.an-ende-feld--rot:hover{background:var(--rot-hover)}
.an-ende-feld--rot .kst-register .punkt{background:var(--weiss)}
.an-ende-feld--rot .kst-register{color:rgba(255,255,255,.9)}
.an-ende-titel{font-family:var(--schrift-hl);font-weight:700;font-size:clamp(30px,3vw,52px);line-height:1;letter-spacing:-.03em}
.an-ende-text{font-size:var(--t-text);line-height:1.4;color:rgba(255,255,255,.85);max-width:36ch}
.an-ende-knopf{margin-top:auto;padding-top:12px;display:inline-flex;align-items:center;gap:10px;font-family:var(--schrift-label);font-size:var(--t-15);
  letter-spacing:.1em;text-transform:uppercase}
.an-ende-feld:focus-visible{outline:3px solid var(--weiss);outline-offset:3px}

/* ---------- Hero in zwei Varianten (07.10.), Umschalter unten links ---------- */
.an-hv{display:none}
.an-hero[data-hv="a"] .an-hv--a,.an-hero[data-hv="b"] .an-hv--b{display:block}
.kst-schalter{position:fixed;left:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:4px;padding:6px;
  background:var(--tinte);color:var(--weiss);font-family:var(--schrift-label);font-size:13px;box-shadow:0 6px 24px rgba(0,0,0,.18)}
.kst-schalter span{padding:0 8px 0 10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.kst-schalter button{width:36px;height:36px;border:0;background:transparent;color:var(--weiss);font:inherit;font-weight:600;cursor:pointer}
.kst-schalter button[aria-pressed="true"]{background:var(--rot)}

/* ---------- Variante B: Karte im Stil des Wirkungskreises ---------- */
.an-kb-raster{display:grid;gap:clamp(32px,4vw,64px);align-items:start}
@media (min-width:1000px){.an-kb-raster{grid-template-columns:minmax(300px,.8fr) minmax(0,1.4fr)}}
.an-kb-titel{margin:0;font-family:var(--schrift-hl);color:var(--tinte)}
.an-kb-lead{margin:clamp(20px,2vw,32px) 0 0;font-size:var(--t-text);line-height:1.45;color:var(--text-2);max-width:36ch}
.an-kb-objekt{display:grid;grid-template-columns:140px 1fr;gap:18px;align-items:center;margin-top:clamp(28px,3vw,44px);padding-top:clamp(20px,2vw,28px);
  border-top:1px solid var(--linie-stark);color:var(--tinte);text-decoration:none}
.an-kb-objekt-bild{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--rund-medien);box-shadow:var(--schatten-medien)}
.an-kb-objekt-bild img{width:100%;height:100%;object-fit:cover;display:block}
.an-kb-objekt-text{display:flex;flex-direction:column;gap:6px}
.an-kb-objekt .an-vorschau-titel{margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.an-kb-objekt .an-vorschau-fakten{margin:4px 0 0}
.an-kb-objekt:hover .an-vorschau-titel{color:var(--rot)}
.an-kb-objekt:focus-visible{outline:2px solid var(--rot);outline-offset:6px}

.an-karte-feld{position:relative;width:100%}
.an-karte-svg{position:absolute;inset:0;color:var(--stein);line-height:0;transition:color .45s var(--kurve)}
.an-karte-svg svg{width:100%;height:100%;display:block}
.an-karte-feld:has(.an-km:hover) .an-karte-svg{color:var(--linie)}
/* Grossstaedte als ruhige Orientierung, nicht klickbar */
.an-staedte{position:absolute;inset:0;pointer-events:none}
.an-stadt{position:absolute;transform:translate(-50%,-50%);font-family:var(--schrift-hl);font-weight:600;font-size:clamp(18px,1.8vw,30px);
  letter-spacing:-.02em;color:rgba(17,16,14,.12);white-space:nowrap}
/* Ortspunkte: kreisrund und rot, wie die Marker im Wirkungskreis */
.an-km{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;padding:0;border:0;background:transparent;cursor:pointer;z-index:2}
.an-km-punkt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:var(--rot);
  color:var(--weiss);font-family:var(--schrift-label);font-size:11px;font-weight:600;line-height:1;display:grid;place-items:center;
  box-shadow:0 0 0 3px var(--papier);transition:transform .3s var(--kurve)}
.an-km--gross .an-km-punkt{width:24px;height:24px}
.an-km:not(.an-km--gross) .an-km-punkt:not(:empty){width:20px;height:20px}
.an-km-fahne{position:absolute;left:50%;bottom:calc(50% + 14px);transform:translateX(-50%) translateY(4px);white-space:nowrap;opacity:0;pointer-events:none;
  background:var(--rot);color:var(--weiss);font-family:var(--schrift-label);font-size:12px;letter-spacing:.06em;padding:4px 8px;
  transition:opacity .25s var(--kurve),transform .25s var(--kurve)}
.an-km--gross .an-km-fahne{opacity:1;transform:translateX(-50%)}
.an-km:hover,.an-km:focus-visible,.an-km.aktiv{z-index:5}
.an-km:hover .an-km-punkt,.an-km:focus-visible .an-km-punkt,.an-km.aktiv .an-km-punkt{transform:translate(-50%,-50%) scale(1.35)}
.an-km:hover .an-km-fahne,.an-km:focus-visible .an-km-fahne,.an-km.aktiv .an-km-fahne{opacity:1;transform:translateX(-50%)}
.an-karte-feld:has(.an-km:hover) .an-km--gross:not(:hover) .an-km-fahne{opacity:0}
.an-km:focus-visible{outline:none}
.an-km:focus-visible .an-km-punkt{outline:2px solid var(--tinte);outline-offset:3px}
@media (max-width:999px){.an-kb-objekt{display:none}}
@media (prefers-reduced-motion:reduce){.an-km-punkt,.an-km-fahne{transition:none}}
/* Karte loest sich zum Rand hin in den Papiergrund auf, statt als graues Rechteck zu stehen */
.an-karte-svg{-webkit-mask-image:radial-gradient(ellipse 62% 60% at 55% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 62% 60% at 55% 50%,#000 55%,transparent 100%)}
.an-karte-feld{width:min(100%,calc((100vh - var(--kopf-hoehe) - 96px) * 1.094));justify-self:end}
/* Stadtnamen unter dem Punkt, damit sie nicht mit den Markern kollidieren */
.an-stadt{transform:translate(-50%,40%)}
/* Handy: Punkte liegen zu dicht fuer Finger, dort waehlt man den Ort aus der Liste */
.an-kb-ortwahl{display:none;margin-top:24px}
@media (max-width:999px){
  .an-kb-ortwahl{display:flex;flex-wrap:wrap}
  .an-km-fahne{display:none}
  .an-km{pointer-events:none}
  .an-km-punkt{width:9px;height:9px;font-size:0}
  .an-km--gross .an-km-punkt,.an-km:not(.an-km--gross) .an-km-punkt:not(:empty){width:14px;height:14px;font-size:9px}
}
@media (max-width:999px){.an-nur-maus{display:none}}
@media (max-width:899px){.an-werkzeug{position:static}}
/* Karte aufgeraeumt (07.10.): Namensschild nur noch am Punkt, ueber dem man gerade ist,
   oder am zuletzt gewaehlten. Keine dauerhaften Schilder mehr, die sich ueberlagern. */
.an-km--gross .an-km-fahne{opacity:0;transform:translateX(-50%) translateY(4px)}
.an-km:hover .an-km-fahne,.an-km:focus-visible .an-km-fahne{opacity:1;transform:translateX(-50%)}
.an-karte-feld:not(:has(.an-km:hover)) .an-km.aktiv .an-km-fahne{opacity:1;transform:translateX(-50%)}
.an-karte-feld:has(.an-km:hover) .an-km.aktiv:not(:hover) .an-km-fahne{opacity:0}
.an-km:hover,.an-km:focus-visible{z-index:6}
/* Karte mit Landkreisgrenzen (07.10.): echte Kreisflaechen statt Landesumriss, getrennt durch Linien im Papierton.
   Rand: die Maske laeuft an allen vier Kanten vollstaendig aus, damit keine harte Kante stehen bleibt. */
.an-kreise path{vector-effect:non-scaling-stroke;transition:fill .45s var(--kurve)}
.an-karte-svg{-webkit-mask-image:radial-gradient(closest-side ellipse at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(closest-side ellipse at 50% 50%,#000 58%,transparent 100%)}