/* Mietspiegelrechner24 – schlichtes Stylesheet ohne Build-Schritt */
:root {
  --bg: #f6f7f9;
  --fl: #ffffff;
  --text: #1d2430;
  --grau: #5b6577;
  --linie: #d9dee7;
  --akzent: #1f5fa8;
  --akzent-dunkel: #174a84;
  --gut: #1e7a46;
  --gut-bg: #e7f5ec;
  --fehler: #b42318;
  --fehler-bg: #fdecea;
  --hinweis-bg: #fff7e0;
  --radius: 8px;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--akzent); }
header.kopf { background: var(--fl); border-bottom: 1px solid var(--linie); }
header.kopf .innen { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
header.kopf .marke { display: block; margin-right: auto; line-height: 0; }
header.kopf .marke img { display: block; height: 72px; width: auto; }
header.kopf .innen { padding-top: 8px; padding-bottom: 8px; }
@media (max-width: 600px) { header.kopf .marke img { height: 52px; } }
header.kopf nav { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
header.kopf form { display: inline; }
.innen { max-width: 980px; margin: 0 auto; padding: 14px 16px; }
main.innen { padding-top: 24px; padding-bottom: 48px; }
h1 { font-size: 1.6rem; margin: 0 0 16px; }
h2 { font-size: 1.25rem; margin: 0 0 12px; }
h3 { font-size: 1.05rem; margin: 16px 0 8px; }
.karte { background: var(--fl); border: 1px solid var(--linie); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }
.schmal { max-width: 460px; margin-left: auto; margin-right: auto; }
.meldung { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; }
.meldung.ok { background: var(--gut-bg); color: var(--gut); }
.meldung.fehler { background: var(--fehler-bg); color: var(--fehler); }
.meldung.hinweis { background: var(--hinweis-bg); }
label { display: block; font-weight: 600; margin: 12px 0 4px; }
label.wahl { font-weight: 400; display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; }
label.wahl input { margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=file], textarea, select {
  width: 100%; padding: 9px 10px; border: 1px solid var(--linie); border-radius: 6px; font: inherit; background: #fff;
}
textarea { min-height: 140px; resize: vertical; }
input[type=date] { min-height: 44px; }
.feldfehler { color: var(--fehler); font-size: .9rem; margin-top: 4px; }
.raster { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.knopf, button {
  display: inline-block; background: var(--akzent); color: #fff; border: 0; border-radius: 6px;
  padding: 9px 16px; font: inherit; cursor: pointer; text-decoration: none;
}
.knopf:hover, button:hover { background: var(--akzent-dunkel); }
.knopf.zweit, button.zweit { background: #fff; color: var(--akzent); border: 1px solid var(--akzent); }
button.gefahr { background: #fff; color: var(--fehler); border: 1px solid var(--fehler); }
button.link { background: none; color: var(--akzent); padding: 0; text-decoration: underline; }
.knopfreihe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.knopfreihe form { display: inline; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--linie); vertical-align: top; }
td.zahl, th.zahl { text-align: right; white-space: nowrap; }
.tabellen-rahmen { overflow-x: auto; }
.ergebnis { display: flex; gap: 24px; flex-wrap: wrap; align-items: baseline; }
.ergebnis .gross { font-size: 2.2rem; font-weight: 700; color: var(--akzent); }
.klein { font-size: .9rem; color: var(--grau); }
.gruppe { border-top: 1px solid var(--linie); padding-top: 8px; margin-top: 16px; }
.gruppe .bedingung { font-size: .9rem; color: var(--grau); margin: 4px 0 8px; }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.galerie figure { margin: 0; background: #fff; border: 1px solid var(--linie); border-radius: 6px; overflow: hidden; }
.galerie img { width: 100%; height: 140px; object-fit: cover; display: block; }
.galerie figcaption { padding: 6px 8px; font-size: .9rem; }
.galerie figcaption input { padding: 5px 6px; font-size: .9rem; }
.fotozeile { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.kopierfeld { display: flex; gap: 8px; }
.kopierfeld input { flex: 1; font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
ul.schlicht { list-style: none; padding: 0; margin: 0; }
ul.schlicht li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--linie); }
.freitext { white-space: pre-wrap; }
@media (max-width: 560px) {
  .fotozeile { grid-template-columns: 1fr; }
  .ergebnis .gross { font-size: 1.8rem; }
}

/* Live-Suche unter Eingabefeldern (public/js/suche.js) */
.suchfeld { position: relative; }
.suchliste {
  position: absolute; z-index: 20; margin: 0; padding: 4px 0; list-style: none;
  background: var(--fl); border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(29, 36, 48, .14); max-height: 300px; overflow-y: auto;
}
.suchliste li { padding: 8px 12px; cursor: pointer; line-height: 1.3; }
.suchliste li.aktiv, .suchliste li[role=option]:hover { background: var(--bg); color: var(--akzent-dunkel); }
.suchliste li.leer { cursor: default; color: var(--grau); font-size: .9rem; }

/* Fragezeichen mit Hilfetext (components/hilfe.blade.php, public/js/hilfe.js) */
button.hilfe {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 20px; height: 20px; margin: 0 0 0 6px; padding: 0; vertical-align: 1px;
  border: 1.5px solid var(--akzent); border-radius: 50%; background: var(--fl); color: var(--akzent);
  font-size: .78rem; font-weight: 700; line-height: 1; cursor: help;
}
button.hilfe:hover, button.hilfe[aria-expanded=true] { background: var(--akzent); color: #fff; }
button.hilfe:focus-visible { outline: 2px solid var(--akzent-dunkel); outline-offset: 2px; }
.hilfetext {
  display: block; font-size: .88rem; font-weight: 400; line-height: 1.45; text-align: left;
  white-space: normal; letter-spacing: normal;
}
.hilfetext[hidden] { display: none; }
.hilfetext .absatz { display: block; }
.hilfetext .absatz + .absatz { margin-top: 6px; }
/* schwebend beim Darüberfahren */
.hilfetext.schwebend {
  position: fixed; z-index: 40; padding: 10px 12px; border-radius: var(--radius);
  background: var(--text); color: #fff; box-shadow: 0 8px 22px rgba(29, 36, 48, .25);
}
.hilfetext.schwebend .beispiel { color: #cfe3ff; }
/* dauerhaft nach Klick: farbiges Feld unter der Frage */
.hilfetext.dauerhaft {
  margin: 6px 0 4px; padding: 8px 12px; border-left: 3px solid var(--akzent); border-radius: 6px;
  background: #eaf3fc; color: var(--text);
}
.hilfetext.dauerhaft .beispiel { color: var(--akzent-dunkel); }
/* Ankreuzzeilen: Text füllt die Zeile, das dauerhafte Feld rutscht darunter */
label.wahl { flex-wrap: wrap; }
label.wahl > span:not(.hilfetext) { flex: 1 1 0; min-width: 0; }
label.wahl button.hilfe { margin-top: 2px; }
label.wahl .hilfetext.dauerhaft { flex: 1 0 100%; margin-left: 26px; margin-top: 0; }

/* Fußzeile */
footer.fuss { border-top: 1px solid var(--linie); background: var(--fl); color: var(--grau); font-size: .9rem; }
footer.fuss .innen { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; padding-top: 14px; padding-bottom: 14px; }
footer.fuss a { color: var(--grau); }

/* Hinweis nach dem Verkleinern im Browser (public/js/bilder.js) */
.bildhinweis { color: var(--grau); }
.bildhinweis:empty { display: none; }
.fotozeile .bildhinweis { grid-column: 1 / -1; margin-top: -4px; }

/* Cookie-Banner unten (public/js/einwilligung.js) */
.cookiebanner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--fl); border-top: 1px solid var(--linie); box-shadow: 0 -6px 18px rgba(29, 36, 48, .12);
  font-size: .9rem;
}
.cookiebanner[hidden] { display: none; }
.cookiebanner .innen { display: flex; gap: 12px 20px; align-items: center; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.cookiebanner p { margin: 0; flex: 1 1 420px; color: var(--text); }
.cookiebanner .knopfreihe { margin-top: 0; flex: 0 0 auto; }
/* Ablehnen und Akzeptieren gleichrangig darstellen */
.cookiebanner button { min-width: 120px; }
body.mit-cookiebanner { padding-bottom: 140px; }
footer.fuss button.link { color: var(--grau); font-size: inherit; }