/* Kundenkonto auf immo-studio.net (Anmelden, Konto anlegen, Passwort, Mein Konto).
   Gestaltung nach webseite-immo-studio/DESIGN.md und der Regel „Formulare" in der Skill designgeschmack:
   einspaltig, Beschriftung über dem Feld, Felder mit Rahmen und 48 px Höhe, ein voller Knopf am Ende,
   Fehler in ganzen Sätzen. Die Felder selbst sind die der Anfrageformulare (.af__feld in stil.css). */

.konto { padding-top: clamp(32px, 4vw, 64px); }
/* Die Spalte steht linksbündig im Raster der Seite und ist höchstens 560 px breit (Phils 3400-px-Monitor: nie randlos). */
.konto__spalte { max-width: 560px; }
.konto__spalte > * + * { margin-top: 20px; }

.konto__hinweis {
  padding: 14px 18px; border: 1px solid #b9cfe9; border-radius: 6px; background: #f2f6fb; color: #26405f;
  font-size: 1rem; line-height: 1.5;
}
.konto__hinweis[hidden] { display: none; }

.konto__formular { max-width: 560px; margin-top: 0; }
.konto__formular[hidden], [data-zeige][hidden] { display: none; }

/* Passwortfeld mit Knopf „Anzeigen" im Feld */
.konto__pwzeile { position: relative; }
.konto__bleiben { display: flex; align-items: center; gap: .6rem; margin: 2px 0 14px; font-size: .95rem; cursor: pointer; }
.konto__bleiben input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--akzent); flex: none; }
.konto__pwzeile input { padding-right: 7.5rem; }
.konto__zeigen {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  min-height: 40px; padding: 0 14px; border: 0; border-radius: 4px; background: none; cursor: pointer;
  color: var(--akzent); font: inherit; font-size: .9375rem; font-weight: 550;
}
.konto__zeigen:hover { background: var(--band-hell); }
.konto__zeigen:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Honigtopf: aus dem Blickfeld geschoben statt mit display:none (manche Skripte überspringen versteckte Felder) */
.konto__honig { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.konto__klein { margin-top: 14px; font-size: .9375rem; line-height: 1.5; color: var(--leise); }
.konto__klein a, .konto__formular .af__hinweis a, .konto__fertig a, .konto__tot a { color: var(--akzent); text-decoration-color: var(--akzent); text-underline-offset: 3px; }
.konto__formular .af__hinweis { text-align: left; margin-top: 14px; }
.konto__formular .af__hinweis:not(:last-child) { margin: -6px 0 22px; }
.konto__formular .af__knopf:disabled { opacity: .6; cursor: not-allowed; }
.konto__formular .formular__meldung { margin: 4px 0 16px; }

/* Nach dem Absenden und bei toten Links */
.konto__fertig, .konto__tot { max-width: 560px; padding: 20px 22px; border: 1px solid #b9cfe9; border-radius: 6px; background: #f2f6fb; color: #26405f; }
.konto__fertig:focus { outline: 2px solid var(--akzent); outline-offset: 3px; }
.konto__fertig p + p, .konto__tot p + p { margin-top: 12px; }
.konto__tot { border-color: #e3b0b0; background: #fdf4f4; color: #8a1f1f; }
.konto__tot a { color: #8a1f1f; }

/* Mein Konto: Angaben als Zeilen mit Haarlinie (Maßzeile) */
.konto__zeilen { margin: 0 0 32px; max-width: 560px; }
.konto__zeilen > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; padding: 16px 0; border-top: 1px solid var(--linie); }
.konto__zeilen > div:last-child { border-bottom: 1px solid var(--linie); }
.konto__zeilen dt { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); }
.konto__zeilen dd { margin: 0; color: var(--tinte); font-size: 1.0625rem; overflow-wrap: anywhere; }
.konto__knoepfe { display: grid; gap: 12px; max-width: 560px; }
.konto__knoepfe .knopf { width: 100%; justify-content: center; min-height: 52px; font-size: 1.0625rem; }
.knopf--gefahr { background: #a62626; border-color: #a62626; }
.knopf--gefahr:hover { background: #8a1f1f; border-color: #8a1f1f; }
.konto__loeschen { max-width: 560px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--linie); }
.konto__loeschen summary { cursor: pointer; font-weight: 550; color: var(--tinte); }
.konto__loeschen summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; }
.konto__loeschen .konto__klein { margin: 14px 0 18px; }

/* ── Neue Ansicht der Konto-Seiten, 14.10.2026 (Phil: „das Login-Menü soll ein bisschen schöner sein") ─────────
   Statt Titelband plus schmalem Formular auf leerer Fläche: eine Bühne in voller Höhe, links eine weiße Karte mit
   Umschalter „Anmelden | Registrieren", darunter drei Tatsachen als Maßzeile, rechts das Modellfoto der Startseite.
   Bild und Karte stehen nebeneinander, nie übereinander (keine schwebenden Kästen über Bildern). Am Handy nur die Karte. */
.konto-buehne {
  padding: calc(var(--kopf) + clamp(28px, 4vw, 64px)) 0 clamp(48px, 6vw, 104px);
  background: linear-gradient(180deg, #fff 0%, var(--band-hell) 55%, var(--band, #e4ebf4) 100%);
}
.konto-buehne__innen {
  display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px);
  align-items: stretch; min-height: min(760px, calc(100svh - var(--kopf) - 96px));
}
.konto-spalte { display: flex; flex-direction: column; gap: 28px; justify-content: center; }
.konto-karte {
  padding: clamp(26px, 3vw, 44px); background: #fff; border: 1px solid var(--linie); border-radius: 10px;
  box-shadow: 0 22px 60px rgba(16, 24, 32, .07);
}
.konto-karte > * + * { margin-top: 0; }
.konto-titel { margin-top: 14px; font-size: clamp(2rem, 2.6vw, 2.75rem); font-weight: 400; line-height: 1.08; letter-spacing: -.03em; color: var(--tinte); }
.konto-satz { margin-top: 12px; max-width: 30em; font-size: 1.0625rem; line-height: 1.55; color: var(--text); }

/* Umschalter wie ein Schiebeschalter: zwei gleich breite Felder auf hellblauem Grund, das aktive weiß */
.konto-reiter { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 26px 0 28px; padding: 4px; background: var(--band-hell); border: 1px solid var(--linie); border-radius: 8px; }
.konto-reiter a {
  display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 6px;
  font-size: .9375rem; font-weight: 550; color: var(--leise); text-decoration: none; transition: background .2s ease, color .2s ease;
}
.konto-reiter a:hover { color: var(--tinte); }
.konto-reiter a[aria-current="page"] { background: #fff; color: var(--tinte); box-shadow: 0 1px 3px rgba(16, 24, 32, .12), 0 0 0 1px var(--linie); }
.konto-reiter a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
/* Ohne Umschalter (Passwort vergessen, neues Passwort): Luft zwischen Satz und erstem Feld */
.konto-satz + .konto__formular, .konto-satz + .konto__hinweis, .konto-satz + noscript + .konto__formular { margin-top: 26px; }
.konto-karte .konto__hinweis { margin: 0 0 20px; }
.konto-karte .konto__formular { max-width: none; }
.konto-karte .konto__fertig, .konto-karte .konto__tot { max-width: none; }
.konto-karte noscript p { margin-bottom: 18px; }

/* Drei Tatsachen als Maßzeile: Haarlinie, Etikett in blauen Kapitälchen, ein Satz */
.konto-fakten { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; max-width: 560px; }
.konto-fakten li { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 4px 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--linie); font-size: .9375rem; line-height: 1.45; color: var(--text); }
.konto-fakten li:last-child { border-bottom: 1px solid var(--linie); }
.konto-fakten__etikett { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); }

/* Bild: so hoch wie die Spalte daneben, höchstens 760 px, nie über die Bildschirmhöhe hinaus */
.konto-bild { margin: 0; overflow: hidden; border-radius: 10px; background: var(--band-hell); max-height: 760px; }
.konto-bild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

@media (max-width: 900px) {
  .konto-buehne__innen { grid-template-columns: 1fr; min-height: 0; }
  .konto-bild { display: none; }
}
@media (max-width: 560px) {
  .konto-buehne { padding-top: calc(var(--kopf) + 20px); }
  .konto-karte { padding: 22px 18px; border-radius: 8px; }
  .konto-fakten li { grid-template-columns: 1fr; }
}

/* ── Anfragen im Konto (Seite /anfragen, 14.10.2026) ─────────────────────────────────────────────────────
   Kacheln zur Auswahl, darunter „Meine Anfragen" als Zeilen mit Haarlinie, dann das Formular der gewählten Leistung.
   Gleiche Sprache wie der Rest des Kontos: einspaltig, Beschriftung über dem Feld, ein voller Knopf am Ende. */
.anfragen [hidden] { display: none !important; }
.anfragen__spalte { max-width: 760px; }
.anfragen__spalte > * + * { margin-top: 20px; }
.anfragen__titel { margin: 40px 0 8px; font-size: 1.375rem; line-height: 1.25; font-weight: 600; color: var(--tinte); }
.anfragen__titel:first-child { margin-top: 0; }

.anfragen__kacheln { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.anfragen__kachel {
  display: flex; flex-direction: column; gap: 4px; width: 100%; height: 100%; min-height: 84px; padding: 16px 18px; text-align: left;
  border: 1px solid var(--linie); border-radius: 8px; background: #fff; color: var(--tinte); font: inherit; text-decoration: none; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.anfragen__kachel:hover { border-color: var(--akzent); background: var(--band-hell); }
.anfragen__kachel:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.anfragen__kachel strong { font-size: 1.0625rem; font-weight: 600; }
.anfragen__kachel span { font-size: .9375rem; color: var(--leise); }
.anfragen__kachel--gross { grid-column: 1 / -1; border-color: var(--akzent); }

.anfragen__liste { list-style: none; margin: 12px 0 0; padding: 0; }
.anfragen__eintrag { padding: 18px 0; border-top: 1px solid var(--linie); }
.anfragen__eintrag:last-child { border-bottom: 1px solid var(--linie); }
.anfragen__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; }
.anfragen__kopf h3 { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.anfragen__status { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); }
.anfragen__eintrag[data-status="dateien"] .anfragen__status { color: #a3261b; }
.anfragen__eintrag[data-status="erledigt"] .anfragen__status { color: var(--leise); }
.anfragen__dateizeile { margin-top: 6px; font-size: .9375rem; overflow-wrap: anywhere; }
.anfragen__details { margin-top: 10px; }
.anfragen__details summary { cursor: pointer; font-weight: 550; font-size: .9375rem; }
.anfragen__details summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.anfragen__details dl { margin: 10px 0 0; }
.anfragen__details dl > div { padding: 8px 0; border-top: 1px solid var(--linie-fein, var(--linie)); }
.anfragen__details dt { font-size: .875rem; color: var(--leise); }
.anfragen__details dd { margin: 2px 0 0; overflow-wrap: anywhere; white-space: pre-line; }

.anfragen__form { max-width: 640px; }
.anfragen__zurueck { margin: 0 0 24px; padding: 8px 0; border: 0; background: none; font: inherit; font-weight: 550; color: var(--akzent); cursor: pointer; }
.anfragen__zurueck:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.anfragen__gruppe { margin: 0 0 24px; padding: 0; border: 0; min-width: 0; }
.anfragen__gruppe legend { padding: 0; }
.anfragen__dateien { list-style: none; margin: 12px 0 0; padding: 0; }
.anfragen__dateien li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 10px 0; border-top: 1px solid var(--linie); }
.anfragen__dateiname { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.anfragen__weg { min-height: 40px; padding: 0 12px; border: 0; border-radius: 4px; background: none; font: inherit; font-size: .9375rem; color: var(--akzent); cursor: pointer; }
.anfragen__weg:hover:not(:disabled) { background: var(--band-hell); }
.anfragen__weg:disabled { color: var(--leise); cursor: default; }
.anfragen__weg:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.anfragen__fortschritt { margin: 4px 0 16px; padding: 12px 16px; border: 1px solid #b9cfe9; border-radius: 6px; background: #f2f6fb; color: #26405f; }
.af__feld input[type="file"] { padding: 10px; min-height: 0; }

@media (max-width: 560px) { .anfragen__kacheln { grid-template-columns: 1fr; } }
.anfragen__form [data-felder] { margin-top: 24px; }
.anfragen__form .anfragen__titel { margin-top: 0; }