/* Zusatz für Inhaltsseiten (Verfahren, Anlässe, Lagen).
   Setzt auf legal.css auf: Farben, Schriften, Kopfzeile, Fußzeile und Textblöcke
   kommen von dort. Hier steht nur, was diese Seiten darüber hinaus brauchen.
   Bewusst klein gehalten: die Startseite bringt 48 kB CSS mit, die fast
   vollständig zur Film-Mechanik ihres Kopfbereichs gehören und hier nichts tun. */

/* Der Inhaltsbereich darf etwas breiter sein als auf den Rechtsseiten,
   weil hier Datenblöcke und Fotos stehen. */
main.inhalt{max-width:900px}

/* ---------- Brotkrume ---------- */
.krume{margin:0 0 26px;font-size:12.6px;letter-spacing:.04em;color:var(--ink-soft)}
.krume ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.krume li{display:flex;align-items:center;gap:8px}
.krume li+li::before{content:"";width:5px;height:6px;background:var(--gold-muted);
  clip-path:polygon(0 0,100% 50%,0 100%)}
.krume a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .5s var(--ease)}
.krume a:hover{border-bottom-color:var(--gold)}
.krume [aria-current]{color:var(--ink)}

/* ---------- Seitenkopf ----------
   Gibt jeder Seite einen erkennbaren Anfang. Das Markenzeichen steht als sehr
   blasses Wasserzeichen dahinter; die Datei lädt die Kopfzeile ohnehin, es
   entsteht also keine zusätzliche Anfrage. */
.seitenkopf{position:relative;margin:0 0 clamp(30px,4vw,44px);
  padding-bottom:clamp(24px,3.2vw,34px);border-bottom:1px solid var(--hair)}
.seitenkopf::before{content:"";position:absolute;right:-8px;top:-14px;width:168px;height:88px;
  background:url(logo-mark.png) no-repeat right top/contain;opacity:.055;pointer-events:none}
/* Der erste Abschnitt folgt direkt auf den Kopf und braucht dessen Abstand nicht
   zusätzlich, sonst klafft eine leere Fläche. */
.seitenkopf + .block{margin-top:0;padding-top:0}
/* Ein kurzes Goldstück auf der Haarlinie, damit der Abschluss gesetzt wirkt. */
.seitenkopf::after{content:"";position:absolute;left:0;bottom:-1px;width:64px;height:1px;
  background:var(--gold)}
.seitenkopf .eyebrow,.seitenkopf h1,.seitenkopf .rule,.seitenkopf .lede{position:relative}

/* ---------- Antwortblock „Kurz gesagt" ----------
   Das Stück, das Suchmaschinen und Sprachmodelle zitieren. Steht bewusst vor dem
   Vorspann und ist als Kasten abgesetzt, damit es auch beim Überfliegen auffällt. */
.kurz-gesagt{margin:clamp(22px,3vw,30px) 0 0;background:var(--panel);
  border:1px solid var(--hair);border-left:3px solid var(--tiffany-deep,#07746F);
  padding:clamp(16px,2.2vw,22px) clamp(16px,2.4vw,24px)}
.kurz-titel{font-family:var(--display);font-size:12.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-text);margin:0 0 12px}
.kurz-gesagt ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.kurz-gesagt li{position:relative;padding-left:19px;
  font-size:15.4px;line-height:1.52;color:var(--ink-soft)}
.kurz-gesagt li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:8px;
  background:var(--gold);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.kurz-gesagt strong{color:var(--ink);font-weight:500}

/* ---------- Kopfbild, Standbild statt Film ---------- */
.kopfbild{position:relative;margin:0 0 clamp(26px,3.4vw,40px);background:var(--canvas-alt);
  border:1px solid var(--hair)}
.kopfbild img{width:100%;height:clamp(200px,34vw,380px);object-fit:cover}
.kopfbild figcaption{font-size:12.4px;color:var(--ink-soft);padding:9px 14px;
  border-top:1px solid var(--hair);background:var(--panel)}

/* ---------- Datenblock mit Quelle ---------- */
.daten{margin:clamp(26px,3.4vw,38px) 0 0;background:var(--panel);border:1px solid var(--hair);
  padding:clamp(18px,2.4vw,28px)}
.daten h3{font-family:var(--display);font-weight:400;font-size:clamp(17px,1.5vw,19px);
  letter-spacing:.08em;text-transform:uppercase;margin:0 0 16px}
/* Zeilenweise Tabelle statt loser Paare. Bis zum 29.10.2026 klappte der Block am
   Telefon auf EINE Spalte um: Bezeichnung und Wert standen dann als zwei gleich
   aussehende Zeilen untereinander, und aus dreizehn Angaben wurden sechsundzwanzig
   Zeilen ohne erkennbare Zusammengehörigkeit. Die schmale Wertspalte passt auch
   auf 375px, weil dort nur Zahlen stehen. */
/* Kein Spaltenabstand, sondern Innenabstand am Begriff: sonst bricht die Haarlinie
   zwischen den beiden Spalten sichtbar auf. */
.daten dl{display:grid;grid-template-columns:1fr auto;gap:0;margin:0;font-size:15px}
.daten dt,.daten dd{padding:10px 0;border-bottom:1px solid var(--hair)}
.daten dt{color:var(--ink-soft);padding-right:18px}
.daten dd{margin:0;color:var(--ink);font-weight:500;text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.daten dt:last-of-type,.daten dd:last-of-type{border-bottom:0;padding-bottom:0}
.daten dt:first-of-type,.daten dd:first-of-type{padding-top:0}
.daten .quelle{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--hair);
  font-size:12.6px;color:var(--ink-soft);line-height:1.6}

/* ---------- Hindernisse und Aufzählungen mit Gewicht ---------- */
.punkte{list-style:none;padding:0;margin:14px 0 0;max-width:62ch}
.punkte li{position:relative;padding-left:26px;margin-bottom:14px;color:var(--ink-soft)}
.punkte li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:9px;
  background:var(--gold);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.punkte strong{color:var(--ink);font-weight:500}

/* ---------- Häufige Fragen ----------
   Aufklappbar, damit die Seite nicht länger wirkt, als sie ist. Der Text steht
   trotzdem im Quelltext und ist für Suchmaschinen und Sprachmodelle lesbar. */
.faq{margin:clamp(30px,4vw,44px) 0 0;padding-top:clamp(22px,3vw,30px);
  border-top:1px solid var(--hair)}
.faq h2{margin:0 0 clamp(16px,2vw,22px)}
.faq-liste{display:grid;gap:10px}
.faq details{background:var(--panel);border:1px solid var(--hair);
  transition:border-color .5s var(--ease)}
.faq details[open]{border-color:var(--gold-muted)}
.faq summary{cursor:pointer;list-style:none;padding:15px 44px 15px 18px;position:relative;
  font-family:var(--display);font-size:17px;letter-spacing:.03em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;
  margin-top:-6px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq summary:hover{color:var(--gold-text)}
.faq .faq-antwort{padding:0 18px 17px}
.faq .faq-antwort p{margin:0;color:var(--ink-soft);font-size:15.4px;line-height:1.62;max-width:62ch}

/* ---------- Rechtsgrundlagen ----------
   Nach dem Vorbild der Schwesterportale: Wer Paragrafen nennt, verlinkt die
   amtliche Fassung. Bewusst ruhig gehalten, es ist ein Nachweis und keine
   Werbefläche. */
.rechtsgrundlagen{margin:clamp(30px,4vw,44px) 0 0;padding:clamp(20px,2.6vw,28px);
  background:var(--canvas-alt);border:1px solid var(--hair)}
.rechtsgrundlagen h2{font-size:clamp(16px,1.5vw,18px);letter-spacing:.1em;margin:0 0 10px}
.rechtsgrundlagen .rg-einleitung{margin:0 0 14px;font-size:14px;color:var(--ink-soft)}
.recht-liste{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.recht-liste li{position:relative;padding-left:20px;font-size:14.6px;line-height:1.5}
.recht-liste li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:8px;
  background:var(--gold);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.recht-liste a{text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--gold-muted);transition:border-color .5s var(--ease)}
.recht-liste a:hover{border-bottom-color:var(--gold)}
.recht-fuss{margin:16px 0 0;padding-top:13px;border-top:1px solid var(--hair);
  font-size:12.8px;color:var(--ink-soft);line-height:1.6}

/* ---------- Verfasserzeile ---------- */
.verfasser{margin:clamp(34px,4.4vw,52px) 0 0;padding-top:clamp(20px,2.6vw,28px);
  border-top:1px solid var(--hair);display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.verfasser .wer{font-family:var(--display);font-size:clamp(16px,1.4vw,18px);letter-spacing:.08em;
  text-transform:uppercase;margin:0 0 6px}
.verfasser p{margin:0;font-size:14.2px;color:var(--ink-soft);max-width:60ch}
.verfasser .stand{font-size:12.4px;color:var(--ink-soft);margin-top:10px}

/* ---------- Weiterführende Verweise ---------- */
.weiter{margin:clamp(30px,4vw,44px) 0 0;padding-top:clamp(22px,3vw,30px);border-top:1px solid var(--hair)}
.weiter h2{margin-bottom:16px}
.weiter ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.weiter a{text-decoration:none;display:block;padding:15px 18px;background:var(--panel);
  border:1px solid var(--hair);transition:border-color .5s var(--ease),transform .5s var(--ease)}
.weiter a:hover{border-color:var(--gold);transform:translateX(3px)}
.weiter .titel{display:block;font-family:var(--display);font-size:17.5px;letter-spacing:.05em}
.weiter .dazu{display:block;font-size:13.8px;color:var(--ink-soft);margin-top:6px;line-height:1.55}

/* ---------- Sammelseite der Lagen ---------- */
.lagen-gitter{list-style:none;padding:0;margin:clamp(26px,3.4vw,38px) 0 0;
  display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
.lagen-gitter a{text-decoration:none;display:block;height:100%;background:var(--panel);
  border:1px solid var(--hair);padding:20px;transition:border-color .5s var(--ease)}
.lagen-gitter a:hover{border-color:var(--gold)}
.lagen-gitter .ort{font-family:var(--display);font-size:clamp(18px,1.7vw,21px);letter-spacing:.06em;
  text-transform:uppercase;display:block}
.lagen-gitter .wo{display:block;font-size:12.4px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-text);margin-top:6px}
.lagen-gitter .kurz{display:block;font-size:13.6px;color:var(--ink-soft);margin-top:12px;line-height:1.6}

/* ---------- Kurzes Anfrageteil am Seitenende ---------- */
.frage{margin:clamp(38px,5vw,58px) 0 0;background:var(--panel);border:1px solid var(--tiffany-deep,#07746F);
  padding:clamp(22px,3vw,34px);position:relative}
.frage::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(to right,rgba(10,186,181,.75),rgba(10,186,181,.08))}
.frage h2{margin:0 0 12px}
.frage .lede{margin:0 0 20px;max-width:58ch}
.frage form{display:grid;gap:14px;max-width:560px}
.frage .reihe{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width:560px){.frage .reihe{grid-template-columns:1fr}}
.frage label{display:grid;gap:7px;font-size:12.6px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft)}
.frage input,.frage textarea{font-family:var(--body);font-size:15.5px;color:var(--ink);
  background:var(--canvas);border:1px solid var(--hair);padding:12px 14px;width:100%;
  transition:border-color .4s var(--ease)}
.frage textarea{min-height:104px;resize:vertical}
.frage input:focus,.frage textarea:focus{outline:none;border-color:#07746F}
.frage .knopf{font-family:var(--body);font-size:12.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;padding:15px 26px;background:var(--ink);border:1px solid var(--ink);
  color:#F2EFE6;cursor:pointer;justify-self:start;position:relative;
  transition:background .5s var(--ease),border-color .5s var(--ease)}
.frage .knopf:hover:not(:disabled){background:#07746F;border-color:#07746F}
.frage .knopf:disabled{opacity:.62;cursor:default}
/* Hinweis direkt am vorbelegten Ortsfeld: die Lagenliste ist sonst nicht sichtbar. */
.frage .feldnote{font-size:12px;letter-spacing:.02em;text-transform:none;color:var(--ink-soft);
  font-weight:400;margin-top:-1px}
.frage .hinweis{font-size:12.4px;color:var(--ink-soft);margin:0;max-width:56ch}
.frage .hinweis a{border-bottom:1px solid var(--gold-muted);text-decoration:none}
/* Verstecktes Feld der Spamabwehr, wird von der Seite vor dem Senden geleert */
.frage .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.frage .fehler{margin:0;font-size:13.6px;color:#8A2F24;display:none}
.frage .fehler.an{display:block}
.frage .fertig{display:none;border:1px solid var(--tiffany-deep,#07746F);
  background:rgba(10,186,181,.07);padding:22px;margin:0}
.frage .fertig.an{display:block}
.frage .fertig p{margin:0;font-size:15.2px}
.frage .fertig .kopieren{margin-top:16px}
.frage .fertig textarea{margin-top:12px;background:var(--canvas)}
@media (pointer:coarse){
  .frage .knopf{min-height:46px}
  .frage input,.frage textarea{font-size:16px}
}

/* ----------------------------------------------------------------------------
   Telefonansicht der Inhaltsseiten, überarbeitet am 29.10.2026. Die Seiten
   wirkten wie ein Textauswurf: zu wenig Abstand zwischen den Aufzählungspunkten,
   ein Absendeknopf, der nur ein Drittel der Breite einnahm, und Karten, die bei
   20px Innenabstand nicht als Karten lesbar waren.
   ------------------------------------------------------------------------- */
/* Sprungziele dürfen nicht unter der klebenden Kopfzeile landen. Beim Sprung auf
   #anfrage war die Überschrift des Formulars verdeckt (gefunden am 29.10.2026). */
.frage,#main,[id]{scroll-margin-top:84px}

@media (max-width:620px){
  .krume{margin-bottom:22px;font-size:13px}
  /* Der Seitenkopf wird am Telefon zum randlosen Band, damit die Seite einen
     sichtbaren Anfang hat und nicht mit Fließtext beginnt. */
  .seitenkopf{background-color:var(--canvas-alt);
    margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));
    margin-bottom:32px;padding:24px var(--gutter) 28px;border-bottom:1px solid var(--gold-muted)}
  .seitenkopf::after{left:var(--gutter)}
  .seitenkopf::before{top:-4px;right:-4px;width:120px;height:62px;opacity:.07}
  .seitenkopf .rule{margin-top:22px}
  /* 18,5px ergaben am Telefon nur 34 Zeichen je Zeile; der Vorspann füllte damit
     den ganzen ersten Bildschirm. 17,5px bleiben deutlich über dem Fließtext. */
  .seitenkopf .lede{margin-top:20px;font-size:17.5px}
  /* Aufzählungen sind auf diesen Seiten der Kern. Sie brauchen Luft, sonst
     verschmelzen sie mit dem Fließtext darüber. */
  .punkte{margin-top:20px}
  .punkte li{margin-bottom:20px;padding-left:24px}
  .punkte li:last-child{margin-bottom:0}
  .punkte li::before{top:8px}
  /* Datenblock: die Zahl ist das Argument, sie darf größer sein als der Text. */
  .daten{padding:22px 20px}
  .daten dl{font-size:15px}
  .daten dt,.daten dd{padding:11px 0}
  .daten dt{padding-right:14px}
  .daten dd{font-size:16.5px}
  .daten .quelle{font-size:13px;margin-top:20px}
  /* Karten als Karten: mehr Innenabstand, klarer Titel. */
  .weiter a,.lagen-gitter a{padding:20px 18px}
  .lagen-gitter{gap:14px;grid-template-columns:1fr}
  .verfasser p{font-size:14.8px}
  /* Das Anfrageteil ist der Zweck der Seite. Es bekommt einen vollbreiten
     Knopf statt eines Knopfes, der aussieht wie ein Nebenhinweis. */
  .frage{padding:24px 20px;margin-top:44px}
  .frage form{gap:16px}
  .frage .knopf{justify-self:stretch;width:100%;padding:16px 18px;font-size:13px}
  .frage .lede{font-size:17px}
  .frage label{font-size:12.4px}
  .frage .hinweis{font-size:13px;line-height:1.6}
  .faq summary{font-size:16.5px;padding:16px 42px 16px 16px;min-height:52px;
    display:flex;align-items:center}
  .faq .faq-antwort{padding:0 16px 18px}
  .faq .faq-antwort p{font-size:15.5px}
  .rechtsgrundlagen{padding:22px 20px}
  .recht-liste{gap:14px}
  .recht-liste li{font-size:15px}
}

/* Lesbarkeit am Telefon, 29.10.2026
   Gemessen auf 375 px an /verkaufen/stuttgart/: 3 % des Textes unter 13 px,
   kleinste 11 px. Betroffen waren vor allem die BESCHRIFTUNGEN DES
   ANFRAGEFORMULARS (12,4 px) — auf einer Seite, deren Zweck dieses Formular
   ist, stand die Frage kleiner als die Antwort.
   Nur unter 700 px; am Desktop aendert sich nichts.
   Steht am Dateiende, weil hier die spaetere Regel gewinnt. */
@media (max-width:700px){
  .brand-word{font-size:14px}
  .back{font-size:13.5px}
  .eyebrow{font-size:13.5px;letter-spacing:.18em}
  .krume{font-size:13.5px}
  .stand,
  .verfasser .stand{font-size:13.5px}
  .kopfbild figcaption{font-size:13.5px}
  .daten .quelle{font-size:13.5px}
  .lagen-gitter .wo{font-size:13.5px}

  /* Das Anfrageformular */
  .frage label,
  .frage .hinweis,
  .feldnote{font-size:13.5px}
  .frage .knopf{font-size:14px}
}

/* Kopfzeile passte nicht aufs Telefon, 29.10.2026
   GEMESSEN auf 375 px: Die Kopfzeile braucht 447 px — Logo mit Wortmarke
   263 px, Knopf "Zur Startseite" 146 px, dazu Abstand und Innenrand. Der
   Knopf ragte 36 px aus dem Bild (bei der urspruenglichen Schriftgroesse,
   also schon vor der Lesbarkeitskorrektur oben).
   Niemandem ist es aufgefallen, weil `body` `overflow-x: clip` traegt:
   Das verbirgt den Ueberlauf OHNE Bildlaufleiste. Der Knopf war damit
   unsichtbar und zugleich nicht anklickbar — siehe die Notiz
   "Nav still abgeschnitten".
   `.brand` steht auf `flex:0 0 auto`, kann also nicht schrumpfen. Auf
   schmalen Geraeten faellt deshalb die Wortmarke weg; das Logo traegt die
   Identitaet allein, und der Name steht ohnehin im Titel und im Fuss. */
@media (max-width:480px){
  .brand-text{display:none}
  .nav{gap:8px}
  .back{padding:0 11px}
}

/* Datenblock lief aus dem Bild, 29.10.2026
   ERGAENZUNG zur Umstellung auf zwei Spalten vom selben Tag — die bleibt,
   sie ist richtig. Nur ihre Annahme stimmt nicht ganz: "Die schmale
   Wertspalte passt auch auf 375px, weil dort nur Zahlen stehen."
   In der Wertspalte stehen eben NICHT nur Zahlen. Preisspannen wie
   "5.900 bis 10.500 Euro je m²" sind mit `white-space:nowrap` 211 px breit
   und blaehen die `auto`-Spalte auf. Gemessen auf 360 px: Das Raster
   braucht 384 px in einem 282-px-Behaelter, die Werte reichten bis x=423.
   Aufgefallen ist es nie, weil `body` `overflow-x: clip` traegt und den
   Ueberlauf OHNE Bildlaufleiste verbirgt — dieselbe Falle wie bei der
   Kopfzeile weiter oben und in der Notiz "Nav still abgeschnitten".
   Damit waren ausgerechnet die Marktzahlen am Telefon halb unsichtbar.
   Loesung: lange Werte duerfen umbrechen, die Spalte schrumpft wieder. */
@media (max-width:560px){
  .daten dl{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  /* Auch die Bezeichnung muss umbrechen duerfen: "Eigentumswohnungen," ist
     laenger als die Spalte und ragte sonst 8 px in die Wertspalte hinein. */
  .daten dt{hyphens:auto;overflow-wrap:break-word;padding-right:12px}
  /* Lange Werte duerfen umbrechen; text-wrap:pretty verhindert, dass
     "m2" allein in der letzten Zeile landet. */
  .daten dd{white-space:normal;overflow-wrap:break-word;text-wrap:pretty}
}