/* ===========================================================================
   xoro — Oberfläche
   ===========================================================================

   Zwei Welten in einer Datei, weil sie sich Bausteine teilen:

   [A] Makler-Backoffice -- warm, ruhig, hochwertig. Der Makler zeigt dieses
       Fenster gelegentlich einem Kunden, der zwei Millionen ausgibt. Es darf
       nicht nach Verwaltungssoftware aussehen. Serifen in den Überschriften,
       viel Weißraum, Messing als einzige Schmuckfarbe.

   [B] Plattform-Verwaltung (body.admin) -- kühl, dicht, sachlich. Hier
       arbeitet der Betreiber an Kundendaten. Dass sich beide Bereiche
       deutlich unterscheiden, ist Absicht und keine Laune: Wer im falschen
       Kontext klickt, ändert fremde Daten.

   Die Farbe --gold ist bewusst gedeckt (#9c7c4a). Ein helleres Gold kippt
   sofort ins Billige, und das Produkt verkauft Hochwertigkeit.
   =========================================================================== */

:root {
    --ink:        #1c1a17;
    --ink-weich:  #4a453e;
    --muted:      #8a8377;
    --line:       #e6e1d8;
    --line-zart:  #f0ece5;
    --bg:         #f7f5f1;
    --flaeche:    #fffefc;
    --gold:       #9c7c4a;
    --gold-hell:  #c9a86e;
    --gold-zart:  #f5efe3;
    --error:      #9d2f26;
    --error-bg:   #fdf4f3;
    --ok:         #3f6b47;
    --ok-bg:      #f0f5f0;

    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

    --radius:    3px;
    --radius-lg: 5px;
    --schatten:  0 1px 2px rgba(28, 26, 23, .04), 0 8px 24px -12px rgba(28, 26, 23, .10);
    --tempo:     .16s ease;
}

* { box-sizing: border-box; }

/* Das hidden-Attribut muss staerker sein als jede Regel darunter.
   Der Browser bringt dafuer zwar [hidden] { display: none } mit -- aber jede
   eigene Regel schlaegt die des Browsers, unabhaengig von der Genauigkeit.
   Ein "button { display: inline-block }" weiter unten macht damit jedes
   ausgeblendete <button> wieder sichtbar.

   Das ist hier schon einmal passiert und wurde einzeln geflickt
   (.zeichenwarnung[hidden]). Einzeln geflickt heisst: Der naechste Fall
   faellt wieder erst im Browser auf, und "hidden" ist genau das Attribut,
   dem man ansieht, dass es wirken muesste. Deshalb an einer Stelle und mit
   !important -- eines der wenigen, die begruendet sind. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font: 15px/1.65 var(--sans);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

body.centered {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--gold); }

/* --------------------------------------------------------------- Kopfzeile */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 32px;
    height: 76px;
    background: var(--flaeche);
    border-bottom: 1px solid var(--line);
}

.brand {
    font-family: var(--serif);
    font-size: 20px;
    letter-spacing: .01em;
    text-decoration: none;
    color: var(--ink);
}

.topbar nav { display: flex; align-items: center; gap: 4px; }

.topbar nav a {
    padding: 7px 13px;
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--ink-weich);
    text-decoration: none;
    transition: background var(--tempo), color var(--tempo);
}
.topbar nav a:hover { background: var(--gold-zart); color: var(--ink); }

.who {
    margin-left: 12px;
    padding-left: 16px;
    border-left: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
}

.inline { display: inline; margin: 0; }

/* ------------------------------------------------------------------ Layout */

.wrap { max-width: 1080px; margin: 40px auto 80px; padding: 0 32px; }

.head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.head .aktionen { display: flex; align-items: center; gap: 18px; }

h1 {
    font-family: var(--serif);
    font-size: 30px;
    font-weight: 400;
    letter-spacing: -.01em;
    margin: 0;
}

h2 {
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 400;
    margin: 0 0 4px;
}

h3 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 22px 0 10px;
}

/* ------------------------------------------------------------------- Karte */

.card {
    background: var(--flaeche);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px 30px;
    margin-bottom: 22px;
    box-shadow: var(--schatten);
}

.card > h2 { margin-bottom: 18px; }
.card > h2:not(:first-child) { margin-top: 8px; }

/* ---------------------------------------------------------------- Formular */

label {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 5px;
}

input, select, textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    font: inherit;
    transition: border-color var(--tempo), box-shadow var(--tempo);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(156, 124, 74, .12);
}

input:disabled, select:disabled, textarea:disabled {
    background: var(--bg);
    color: var(--muted);
    cursor: not-allowed;
}

textarea { line-height: 1.6; resize: vertical; }

input[type="color"] { width: 56px; height: 38px; padding: 3px; cursor: pointer; }
input[type="file"] { border: 0; padding: 8px 0; font-size: 14px; }
input[type="checkbox"] { width: auto; }

fieldset {
    border: 0;
    border-top: 1px solid var(--line-zart);
    padding: 22px 0 0;
    margin: 0 0 22px;
}
fieldset:first-of-type { border-top: 0; padding-top: 0; }

legend {
    padding: 0 10px 0 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px 20px;
}
.grid label { margin-bottom: 0; }

/* Einstellungsseiten: eine Spalte, begrenzte Breite -- lange Zeilen sind
   in einem Formular schwerer zu lesen als in Fließtext. */
.einstellungen label { max-width: 480px; margin-bottom: 16px; }
.einstellungen label:last-child { margin-bottom: 0; }

.checks { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 12px; }

.check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    color: var(--ink);
    cursor: pointer;
}

/* ----------------------------------------------------------- Schaltflächen */

button, .button {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid var(--ink);
    border-radius: var(--radius);
    background: var(--ink);
    color: #fff;
    font: inherit;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--tempo), border-color var(--tempo);
}
button:hover, .button:hover { background: #000; border-color: #000; }

button.link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-weich);
    font-size: 13px;
    text-decoration: underline;
    text-decoration-color: var(--line);
    text-underline-offset: 3px;
}
button.link:hover { background: none; color: var(--ink); text-decoration-color: var(--gold); }
button.link.danger, .danger { color: var(--error); }
button.link.danger:hover { color: var(--error); text-decoration-color: var(--error); }

.danger-zone {
    margin: 32px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
.danger-zone h2 { color: var(--error); }

/* ---------------------------------------------------------------- Tabellen */

.list {
    width: 100%;
    border-collapse: collapse;
    background: var(--flaeche);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--schatten);
}

/* HIER STAND overflow: hidden, und zwar nur, um den Kopfzeilen-Hintergrund
   an den runden Ecken zu beschneiden. Es hat aber alles beschnitten -- auch
   die Bildvorschau, die beim Darueberfahren aus der Tabelle herausragen muss.
   Deshalb runden jetzt die Eckzellen selbst, und die Tabelle darf ueberlaufen. */
.list thead th:first-child { border-top-left-radius: var(--radius-lg); }
.list thead th:last-child  { border-top-right-radius: var(--radius-lg); }
.list tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius-lg); }
.list tbody tr:last-child td:last-child  { border-bottom-right-radius: var(--radius-lg); }

.list th {
    padding: 13px 18px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
}

.list td {
    padding: 15px 18px;
    border-bottom: 1px solid var(--line-zart);
    vertical-align: middle;
}
.list tr:last-child td { border-bottom: 0; }
.list tbody tr { transition: background var(--tempo); }
.list tbody tr:hover { background: var(--gold-zart); }

.list .num { text-align: right; font-variant-numeric: tabular-nums; }
.list code { font-size: 12px; color: var(--muted); }

.stark { font-weight: 600; text-decoration: none; }
.unterzeile { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.gedaempft { color: var(--muted); font-size: 13px; }
.slug { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------------------ Marken */

.marke {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: var(--bg);
    color: var(--muted);
    border: 1px solid var(--line);
}
.marke-active, .marke-aktiv { background: var(--ok-bg); color: var(--ok); border-color: #cfe0d2; }
.marke-draft { background: var(--bg); color: var(--muted); }
.marke-reserved { background: var(--gold-zart); color: var(--gold); border-color: #e6d7bb; }
.marke-sold, .marke-gesperrt { background: var(--error-bg); color: var(--error); border-color: #f0d7d4; }
.marke-archived { opacity: .6; }

.list tr.gesperrt td { opacity: .5; }

/* --------------------------------------------------------------- Meldungen */

.error, .warn, .ok, .hinweis-ok {
    padding: 13px 16px;
    border-radius: var(--radius);
    border-left: 3px solid;
    font-size: 14px;
    margin: 0 0 18px;
}

.error { background: var(--error-bg); border-color: var(--error); color: var(--error); }
.warn  { background: var(--gold-zart); border-color: var(--gold-hell); color: #6d5528; }
.ok, .hinweis-ok { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }

.warn ul, .error ul { margin: 8px 0 0; padding-left: 20px; }

/* ------------------------------------------- Titelbild in der Objektliste

   Kleines Bild in der Zeile, grosses beim Darueberfahren. Der Sinn ist das
   Wiedererkennen: Eine Referenz wie "2150a" sagt nichts, das Haus schon. */

.list td.bild, .list th.bild { width: 48px; padding-right: 0; }

/* z-index 2 und nicht 1: Die Regel fuer Links in einer Zeile setzt 1, und
   damit laege die grosse Vorschau auf derselben Stufe wie die Links der
   Nachbarzeilen -- bei ueberlappenden Zeilen entschiede die Reihenfolge im
   Dokument, und die naechste Zeile gewaenne. */
.vorschau { position: relative; display: block; z-index: 2; }

.vorschau > img {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--line);
}

.list .kein-bild {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    border: 1px dashed var(--line);
    background: var(--bg);
}

/* Die grosse Vorschau haengt am kleinen Bild und liegt ueber allem --
   auch ueber der unsichtbaren Flaeche des Zeilenlinks, die sonst darueber
   laege und sie verdeckte. */
.vorschau-gross {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    padding: 6px;
    background: var(--flaeche);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 40px -8px rgba(28, 26, 23, .35);

    /* visibility statt display:none: Ein Bild in einem display:none-Element
       laedt der Browser je nach Fall gar nicht erst, und dann erscheint die
       Vorschau beim ersten Darueberfahren leer. */
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--tempo);
}

.vorschau-gross img {
    display: block;
    width: 600px;
    height: 600px;
    object-fit: cover;
    border-radius: var(--radius);
}

/* Nur wo es ein echtes Darueberfahren gibt. Auf einem Touchgeraet loest
   :hover beim Antippen aus und die Vorschau bliebe stehen, bis man
   woandershin tippt -- sie verdeckte dann die halbe Liste. */
@media (hover: hover) {
    .vorschau:hover .vorschau-gross { visibility: visible; opacity: 1; }
}

/* Am rechten Rand ist links vom Bild mehr Platz. Betrifft die Objektliste
   nicht -- dort steht die Spalte links --, gilt aber, wenn die Vorschau
   spaeter woanders auftaucht. */
@media (max-width: 900px) {
    .vorschau-gross { left: auto; right: calc(100% + 12px); }
    .vorschau-gross img { width: 320px; height: 320px; }
}

/* ------------------------------------------------------- Klappbare Karte

   Die Stammdaten eines erfassten Objekts. Zugeklappt sieht man, worum es
   geht -- Referenz und Titel stehen in der Zeile -- und darunter beginnt
   sofort das, wofuer man die Seite aufruft. */

.klappkarte > summary {
    display: flex;
    align-items: baseline;
    gap: 14px;
    cursor: pointer;
    /* list-style entfernt das Standard-Dreieck. Ersetzt wird es unten durch
       ein eigenes -- ganz ohne Zeichen waere nicht zu sehen, dass sich hier
       etwas oeffnet. */
    list-style: none;
}
.klappkarte > summary::-webkit-details-marker { display: none; }

.klappkarte > summary::before {
    content: '▶';
    color: var(--gold);
    /* Deutlich groesser als die Beschriftung daneben: Das Dreieck ist das
       einzige Zeichen dafuer, dass sich hier etwas oeffnet. Bei 13 px in
       Grossbuchstabenhoehe war es neben "ECKDATEN" kaum zu sehen. */
    font-size: 15px;
    line-height: 1;
    /* Feste Breite, damit die Beschriftung beim Aufklappen nicht springt --
       das gedrehte Dreieck ist sonst minimal breiter. */
    width: 15px;
    flex: none;
    text-align: center;
    /* Die Drehung folgt der Bewegungseinstellung des Systems -- die globale
       Regel weiter unten setzt die Dauer herunter, nicht die Endlage. */
    transition: transform var(--tempo);
}
.klappkarte[open] > summary::before { transform: rotate(90deg); }

/* Zugeklappt pulsiert das Dreieck, damit auffaellt, dass sich hier etwas
   oeffnen laesst. Aufgeklappt (gedreht) hoert es auf -- dann ist der Zweck
   erfuellt. Nur wenn keine Bewegung gewuenscht ist, bleibt es still. */
@keyframes klapp-puls {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.35); opacity: .55; }
}
.klappkarte:not([open]) > summary::before {
    animation: klapp-puls 1.3s ease-in-out infinite;
    transform-origin: center;
}
@media (prefers-reduced-motion: reduce) {
    .klappkarte:not([open]) > summary::before { animation: none; }
}

.klapp-titel {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
}

.klapp-notiz {
    color: var(--ink);
    font-size: 14px;
}

/* Aufgeklappt braucht es Abstand zum Formular, zugeklappt nicht -- sonst
   steht die Karte leer und zu hoch da. */
.klappkarte[open] > summary { margin-bottom: 22px; }

/* Die erste Feldgruppe wiederholt sonst die Ueberschrift, die schon in der
   Zusammenfassung steht. */
.klappkarte[open] > form > fieldset:first-of-type > legend { display: none; }

/* ------------------------------------------------ Sortieren und Blaettern */

/* Der Spaltenkopf bleibt ein Link und sieht auch so aus -- nur ruhiger als
   ein Link im Fliesstext. Wer nicht erkennt, dass er klicken kann, findet
   die Sortierung nie. */
.list th .sortierbar {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--line);
}
.list th .sortierbar:hover { color: var(--ink); border-bottom-color: var(--gold); }
.list th .sortierbar[aria-current] { color: var(--ink); border-bottom-color: var(--gold); }

.blaettern {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    font-size: 14px;
}

.blaettern a, .blaettern .hier, .blaettern .aus {
    padding: 6px 11px;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--ink-weich);
}

.blaettern a:hover { background: var(--gold-zart); color: var(--ink); }
.blaettern .hier { background: var(--ink); color: #fff; }

/* Ausgegraut statt weggelassen: Sonst springen die Zahlen daneben beim
   Blaettern seitlich hin und her. */
.blaettern .aus { color: var(--line); }

.blaettern .zaehler { margin-left: auto; color: var(--muted); font-size: 13px; }

/* --------------------------------------- Liste "hat bisher bekommen"

   Vorschaubild, Rueckmeldung, PDF. Ein abgelehntes Objekt wird
   durchgestrichen statt ausgeblendet: Der Makler soll sehen, dass er es
   gezeigt hat -- sonst schickt er es beim naechsten Mal wieder. */

.bekommen td.bild, .bekommen th.bild { width: 64px; padding-right: 0; }

.bekommen td.bild img {
    display: block;
    width: 64px;
    height: 43px;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--line);
}

/* Platzhalter in derselben Groesse: Ohne ihn ruecken Zeilen ohne Foto
   seitlich ein und die Spalte franst aus. */
.bekommen .kein-bild {
    display: block;
    width: 64px;
    height: 43px;
    border-radius: var(--radius);
    border: 1px dashed var(--line);
    background: var(--bg);
}

.bekommen .zeilen-aktionen { white-space: nowrap; }
.bekommen .zeilen-aktionen select { width: auto; padding: 5px 8px; font-size: 13px; }
.bekommen .zeilen-aktionen a { margin-right: 12px; font-size: 13px; }

/* Durchgestrichen wird der TEXT, nicht die ganze Zeile: Ein Strich quer
   ueber das Vorschaubild und das Auswahlfeld sieht nach Fehler aus, nicht
   nach Zustand. */
.bekommen tr.abgelehnt td:not(.bild):not(.zeilen-aktionen) {
    text-decoration: line-through;
    color: var(--muted);
}
.bekommen tr.abgelehnt td.bild img { opacity: .45; }

/* Rueckmeldung fuer alles, was im Hintergrund speichert -- die Reihenfolge
   der Fotos und den Personalisierungs-Schalter.

   min-height haelt die Zeile frei, auch wenn nichts darin steht. Sonst
   schoebe sie sich beim Speichern ein und drueckte alles darunter nach
   unten: bei den Fotos gemessene 47 Pixel, genau unter dem Zeiger, der eben
   noch ein Bild gezogen hat. */
.hintergrund-status {
    min-height: 1.4em;
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.4;
}
/* Kein :empty-Sonderfall mit anderem Abstand: Der Wechsel von leer auf
   gefuellt wuerde den Abstand aendern und damit genau das Rucken ausloesen,
   gegen das min-height oben steht. Die Zeile ist immer gleich hoch. */
.hintergrund-status.hinweis-ok { color: var(--ok); background: none; border: 0; padding: 0; }
.hintergrund-status.error      { color: var(--error); background: none; border: 0; padding: 0; }

/* Meldung mit Auftrag: der Erfolg oben, die Aufgabe darunter.

   Bewusst breiter und ruhiger als .ok -- eine gruene Zeile liest man als
   "erledigt" und scrollt weiter. Hier soll man stehenbleiben. Die Farbe
   bleibt trotzdem gruen und nicht rot: Es ist kein Fehler, sondern der
   naechste Arbeitsschritt. */
.meldung-gross {
    margin: 0 0 24px;
    padding: 20px 24px;
    background: var(--ok-bg);
    border: 1px solid var(--ok);
    border-left-width: 4px;
    border-radius: var(--radius-lg);
}

.meldung-gross strong {
    display: block;
    margin-bottom: 6px;
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 400;
    color: var(--ok);
}

/* Der Fliesstext in der Vordergrundfarbe, nicht im Gruen der Ueberschrift:
   Gruen liest sich als Randnotiz, und dieser Satz ist die eigentliche
   Botschaft. */
.meldung-gross p {
    margin: 0;
    max-width: 66ch;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-weich);
}

/* Fehler unter dem betroffenen Feld statt gesammelt am Seitenkopf: Bei
   sieben Feldern ist sonst nicht erkennbar, welches gemeint ist. */
.feld-fehler {
    max-width: 480px;
    margin: -10px 0 16px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--error);
    font-size: 13px;
}

.hint, .hinweis {
    max-width: 560px;
    margin: 6px 0 14px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.empty, .leer {
    padding: 48px 24px;
    text-align: center;
    color: var(--muted);
    background: var(--flaeche);
    border: 1px dashed var(--line);
    border-radius: var(--radius-lg);
}
.leer p { margin: 0; }

/* ------------------------------------------------- Die zwei Wege zum Objekt

   Zwei gleich grosse Karten: Daten lesen, Daten eingeben. Gleich gross, weil
   sie gleichrangig sind -- vorher stand das Einlesen als schmaler Link neben
   einem schwarzen Knopf und sah dadurch nach Notloesung aus.

   auto-fit statt zwei festen Spalten: Auf einem schmalen Fenster stehen sie
   untereinander, ohne dass es dafuer eine eigene Medienregel braucht. */

.wege {
    display: grid;
    /* Die Karten fuellen die Breite und schliessen damit buendig mit der
       Objektliste darunter ab. Das ist der Grund fuer 1fr statt einer festen
       Breite: Eine feste liesse sich zwar auf die Tabelle abstimmen, aber
       nur fuer genau drei Karten -- bei einer vierten liefen beide wieder
       auseinander.

       Bei zwei Karten war 1fr einmal falsch: Da wurden die Quadrate ueber
       400 Pixel hoch und standen fast leer da. Zu dritt sind es rund 326 --
       gross genug fuer den Haupteinstieg, klein genug, dass Symbol und Text
       zusammen eine Flaeche ergeben. Wer auf zwei Karten zurueckgeht, misst
       das nach. */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    margin-bottom: 30px;
}

/* Die breite Interessenten-Karte ueber den drei Wegen. Gleiche Optik wie ein
   .weg, aber liegend: Symbol links, Text rechts. In voller Breite waere ein
   Quadrat unsinnig hoch -- die liegende Form fuellt die Zeile ruhig aus. Das
   Symbol traegt seinen Rand ueber .weg-symbol wie die Wege; das margin-bottom
   von dort stoert liegend nicht, weil es hier durch align-items aufgehoben
   wird. */
.weg-breit {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 24px 30px;
    margin-bottom: 18px;
    background: var(--flaeche);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--schatten);
    color: var(--ink);
    text-decoration: none;
    transition: transform var(--tempo), box-shadow var(--tempo), border-color var(--tempo);
}

.weg-breit:hover,
.weg-breit:focus-visible {
    transform: translateY(-2px);
    border-color: var(--gold-hell);
    box-shadow: 0 2px 4px rgba(28, 26, 23, .05), 0 18px 36px -18px rgba(28, 26, 23, .22);
}
.weg-breit:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Das gemeinsame .weg-symbol bringt margin-bottom: auto mit -- liegend soll
   das Symbol aber mittig neben dem Text stehen, nicht nach oben gedrueckt. */
.weg-breit .weg-symbol { margin-bottom: 0; flex: none; }
.weg-breit:hover .weg-symbol { stroke: var(--ink); }

.weg-breit-text { display: flex; flex-direction: column; }
.weg-breit .weg-titel { margin-top: 0; }

.weg {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Quadratisch, aber nicht starr: Bei langem Text -- Spanisch braucht
       gut ein Fuenftel mehr Platz als Deutsch -- waechst die Karte, statt
       den Text abzuschneiden. */
    aspect-ratio: 1 / 1;
    min-height: 240px;
    height: auto;
    padding: 30px;
    background: var(--flaeche);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--schatten);
    color: var(--ink);
    text-decoration: none;
    transition: transform var(--tempo), box-shadow var(--tempo), border-color var(--tempo);
}

.weg:hover,
.weg:focus-visible {
    transform: translateY(-2px);
    border-color: var(--gold-hell);
    box-shadow: 0 2px 4px rgba(28, 26, 23, .05), 0 18px 36px -18px rgba(28, 26, 23, .22);
}

/* Der Rahmen der Tastaturmarkierung zusaetzlich zum Hover: Wer mit Tab
   navigiert, muss sehen, wo er steht -- eine Anhebung allein ist dafuer zu
   leise. */
.weg:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.weg-symbol {
    width: 46px;
    height: 46px;
    margin-bottom: auto;
    fill: none;
    stroke: var(--gold);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke var(--tempo);
}

.weg:hover .weg-symbol { stroke: var(--ink); }

.weg-titel {
    margin-top: 22px;
    font-family: var(--serif);
    font-size: 23px;
    line-height: 1.25;
}

.weg-text {
    margin-top: 8px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

/* Auf sehr schmalen Fenstern ist ein Quadrat unnoetig hoch -- dort zaehlt
   die Lesbarkeit, nicht die Form. */
@media (max-width: 560px) {
    .weg { aspect-ratio: auto; min-height: 0; padding: 24px; }
    .weg-symbol { margin-bottom: 4px; }
}

/* Abschnitt mit Faktenwarnung: sichtbar, ohne den Text unlesbar zu machen. */
fieldset.hat-warnung {
    padding: 18px;
    border: 1px solid var(--error);
    border-radius: var(--radius);
    background: var(--error-bg);
}
fieldset.hat-warnung ul.error { border: 0; padding: 0 0 0 20px; margin-bottom: 12px; }

/* ------------------------------------------------------------- Kontingent */

.quota {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.quota-bar {
    display: inline-block;
    width: 90px;
    height: 4px;
    border-radius: 2px;
    background: var(--line);
    overflow: hidden;
}
.quota-bar span { display: block; height: 100%; background: var(--gold); }

/* Fortschritt bis zur Cache-Schwelle. Die Farbe ist die Aussage:
   unterhalb der Schwelle zahlt jedes Dossier den vollen Prompt. */
.fortschritt {
    height: 6px;
    border-radius: 3px;
    background: var(--line);
    overflow: hidden;
    margin: 10px 0 14px;
}
.fortschritt-balken { height: 100%; background: var(--gold); transition: width var(--tempo); }
.fortschritt-ok .fortschritt-balken { background: var(--ok); }

/* ----------------------------------------------------------------- Galerie */

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
    margin-top: 20px;
}

.gallery figure {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
    transition: box-shadow var(--tempo);
}
.gallery figure:hover { box-shadow: var(--schatten); }
.gallery figure.cover { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.gallery img { display: block; width: 100%; height: 150px; object-fit: cover; }

/* Grundriss-Vorschau: ganze Zeichnung sichtbar, nicht beschnitten wie ein
   Galeriebild -- die Raumaufteilung soll man ganz sehen. Deshalb contain
   statt cover und eine begrenzte Hoehe. */
.grundriss-vorschau { margin: 0 0 16px; }
.grundriss-vorschau img {
    display: block;
    max-width: 100%;
    max-height: 420px;
    height: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}

/* Original und KI-Vorschlag nebeneinander, damit der Makler vergleichen kann.
   Auf schmalen Schirmen untereinander. */
.grundriss-paar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 0 0 16px;
}
@media (max-width: 640px) { .grundriss-paar { grid-template-columns: 1fr; } }
.grundriss-paar figure { margin: 0; }
.grundriss-paar img {
    display: block;
    width: 100%;
    max-height: 360px;
    height: auto;
    object-fit: contain;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}
.grundriss-paar figcaption {
    margin-top: 6px;
    font-size: .85rem;
    color: var(--muted, #666);
    text-align: center;
}

.grundriss-tasten {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
}

.gallery figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 12px;
    color: var(--muted);
}
.dim { margin-left: auto; font-variant-numeric: tabular-nums; }

/* Karierter Grund, damit ein transparentes Logo als solches erkennbar ist --
   auf weißem Grund sieht ein weißer Rand aus wie Transparenz. */
.logo-vorschau {
    max-width: 260px;
    max-height: 90px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background-color: #fff;
    background-image:
        linear-gradient(45deg, var(--line-zart) 25%, transparent 25%, transparent 75%, var(--line-zart) 75%),
        linear-gradient(45deg, var(--line-zart) 25%, transparent 25%, transparent 75%, var(--line-zart) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

/* --------------------------------------------------------------- Anmeldung */

/* Oeffentliche Kopfzeile fuer Login/Registrierung: Logo + kleines Menue.
   Eigene, schlanke Leiste -- nicht die .topbar der angemeldeten Seiten, die
   auf Buerologo und geschuetzte Navigation ausgelegt ist. */
.oben {
    display: flex; align-items: center; justify-content: space-between;
    height: 64px; padding: 0 24px;
    background: var(--flaeche); border-bottom: 1px solid var(--line);
}
.oben .marke { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 1.05rem; }
.oben .marke .logo-mark { height: 34px; width: auto; color: var(--ink); }
.oben nav { display: flex; gap: 18px; align-items: center; font-size: .95rem; }
.oben nav a { color: var(--ink); text-decoration: none; }
.oben nav a:hover { text-decoration: underline; text-decoration-color: var(--gold); }

/* Zentriert die Karte im Platz UNTER der Kopfzeile (statt body.centered, das
   die volle Hoehe nimmt und die Kopfzeile verdraengen wuerde). */
.mitte { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 65px); padding: 24px; }

/* Anmeldung stapelt Passwort- und Magic-Link-Formular untereinander. */
.anmeldung { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; }

.card.login {
    width: 100%;
    max-width: 380px;
    padding: 40px;
    margin: 0;
}
.card.login h1 { margin-bottom: 26px; font-size: 26px; }
.card.login label { margin: 16px 0 5px; }
.card.login button { width: 100%; margin-top: 24px; padding: 12px; }

/* ------------------------------------------------------- Vorschlag (Lagen) */

.vorschlag { border-left: 3px solid var(--gold); }
.vorschlag-zeile { display: flex; gap: 10px; align-items: center; max-width: 560px; margin: 14px 0; }
.vorschlag-zeile input { flex: 1; }
.vorschlag-zeile button { white-space: nowrap; }

.passwort {
    padding: 16px 18px;
    background: var(--gold-zart);
    border: 1px solid #e6d7bb;
    border-radius: var(--radius);
    margin-bottom: 20px;
}
.passwort code {
    display: inline-block;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 15px;
    letter-spacing: .04em;
}

.zurueck { font-size: 14px; color: var(--muted); }
.hinweis-lesen { color: var(--muted); font-size: 13px; }

/* ===========================================================================
   [B] Plattform-Verwaltung
   ---------------------------------------------------------------------------
   Kühler, dichter, ohne Serifen. Der Unterschied ist Absicht: Wer hier
   arbeitet, sieht Daten fremder Büros und soll den Bereich nicht mit dem
   eigenen Backoffice verwechseln.
   =========================================================================== */

body.admin {
    --gold:      #5b8ac9;
    --gold-hell: #8fb4de;
    --gold-zart: #eef3fa;
    --bg:        #f4f5f7;
    --flaeche:   #fff;
    --line:      #e3e5e9;
    --line-zart: #eef0f3;
    --ink:       #16181d;
    --ink-weich: #40454f;
    --muted:     #7c828e;

    font-size: 14px;
}

body.admin h1, body.admin h2, body.admin .brand {
    font-family: var(--sans);
    font-weight: 600;
    letter-spacing: -.01em;
}
body.admin h1 { font-size: 22px; }
body.admin h2 { font-size: 16px; }

.admin-topbar {
    height: 76px;
    background: #16181d;
    border-bottom: 1px solid #24272e;
}
.admin-topbar .brand { color: #fff; font-size: 15px; }
.admin-topbar nav a { color: #9ba1ad; }
.admin-topbar nav a:hover { background: #24272e; color: #fff; }
.admin-topbar .who { color: #7c828e; border-left-color: #31353d; }
.admin-topbar button.link { color: #9ba1ad; }
.admin-topbar button.link:hover { color: #fff; }

body.admin .card { border-radius: 4px; box-shadow: 0 1px 2px rgba(22, 24, 29, .05); }
body.admin .list { border-radius: 4px; box-shadow: 0 1px 2px rgba(22, 24, 29, .05); }
body.admin .list td { padding: 12px 16px; }
body.admin .list th { padding: 10px 16px; }
body.admin .wrap { max-width: 1240px; margin-top: 28px; }
body.admin button, body.admin .button { border-radius: 4px; }
body.admin .head { padding-bottom: 14px; margin-bottom: 22px; }

/* ------------------------------------------------------------------ Mobile */

@media (max-width: 720px) {
    .wrap { padding: 0 18px; margin-top: 24px; }
    .topbar { padding: 0 18px; height: auto; min-height: 60px; flex-wrap: wrap; gap: 10px; }
    .topbar nav { flex-wrap: wrap; }
    .who { display: none; }
    .head { align-items: flex-start; flex-direction: column; gap: 14px; }
    .card { padding: 20px; }
    h1 { font-size: 24px; }

    /* Tabellen dürfen scrollen, die Seite nicht. */
    .list { display: block; overflow-x: auto; white-space: nowrap; }
}

/* --------------------------------------------------- Klickbare Zeilen ---

   Die ganze Zeile führt zum Datensatz, nicht nur der Name darin. Ein
   Trefferbereich von 12 Pixeln Breite ist auf dem Notebook-Trackpad
   ärgerlich und auf dem Tablet unbrauchbar.

   Umgesetzt über einen echten Link, der sich per ::after über die Zeile
   legt -- kein JavaScript. Damit bleibt er tastaturbedienbar, das
   Kontextmenü kennt die Adresse, und "in neuem Tab öffnen" funktioniert.
   Ein onclick am <tr> könnte das alles nicht. */

.list tbody tr { position: relative; }

.zeile-link::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* Weitere Links und Schaltflächen in derselben Zeile müssen über der
   Fläche liegen, sonst verschluckt sie der Zeilenlink. */
.list tbody td a:not(.zeile-link),
.list tbody td button,
.list tbody td form {
    position: relative;
    z-index: 1;
}

/* Der Text der Zeile soll nicht wie ein Link aussehen -- die ganze Zeile
   ist einer, das zeigt der Zeiger. */
.zeile-link { text-decoration: none; }
.list tbody tr:hover .zeile-link { text-decoration: underline; text-decoration-color: var(--gold); }

/* Bildkacheln in der Galerie: gleiches Prinzip, andere Form. */
.gallery figure { position: relative; }

/* ------------------------------------------------------- Warteanzeige ---

   Liegt über der Seite, solange ein langsamer POST läuft. Der Balken zeigt
   keinen echten Fortschritt -- siehe warten.js -- deshalb ist er bewusst
   schlicht gehalten und von einer Beschreibung begleitet, die sagt, was
   gerade passiert. */

.warten {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(28, 26, 23, .55);
    animation: warten-auf .2s ease;
}

@keyframes warten-auf { from { opacity: 0; } }

.warten-kasten {
    width: 100%;
    max-width: 420px;
    padding: 34px 36px;
    background: var(--flaeche);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px -20px rgba(28, 26, 23, .4);
    text-align: center;
}

.warten-kasten h2 { margin: 0 0 20px; font-size: 21px; }

.warten-leiste {
    height: 5px;
    border-radius: 3px;
    background: var(--line);
    overflow: hidden;
}
.warten-leiste span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--gold);
    transition: width .3s linear;
}

.warten-schritt {
    margin: 16px 0 0;
    font-size: 14px;
    color: var(--ink-weich);
    min-height: 1.6em;
}

.warten-hinweis { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }

/* ------------------------------------------------------------ Wortmarke ---

   Das Logo liegt schwarz vor. In der dunklen Kopfzeile der
   Plattform-Verwaltung wäre es unsichtbar, deshalb dort invertiert -- eine
   Regel statt einer zweiten Datei, die beim nächsten Logowechsel vergessen
   würde. */

.marke-logo { display: block; height: 34px; width: auto; max-width: 220px; object-fit: contain; }

/* Makler-Kopfzeile ist hell -- hier bleibt das Logo, wie es hochgeladen wurde. */
.topbar .brand { display: flex; align-items: center; }

/* Das Logo sitzt auf einer hellen Flaeche in der Farbe des Seitenhintergrunds,
   nicht direkt auf der dunklen Leiste. Damit bleibt es schwarz, wie es
   gezeichnet ist -- die vorherige Invertierung machte aus einer Graustufe im
   Logo eine andere und veraenderte das Erscheinungsbild. */
.admin-topbar .brand {
    display: flex;
    align-items: center;
    padding: 5px 14px;
    background: var(--bg);
    border-radius: 6px;
}

@media (max-width: 720px) {
    .marke-logo { height: 26px; max-width: 160px; }
}

/* ------------------------------------------------------------- Ablagefeld ---

   Liegt um ein echtes <input type="file">. Das Eingabefeld selbst wird nur
   optisch versteckt, nicht per display:none -- so bleibt es fokussierbar, und
   ein Klick auf das Feld oeffnet ueber das label weiterhin den Dateidialog.
   Ohne JavaScript faellt damit nur das Ziehen weg, nicht das Hochladen. */

.dropzone {
    display: block;
    max-width: 480px;
    margin-bottom: 14px;
    padding: 26px 22px;
    border: 1.5px dashed var(--line);
    border-radius: var(--radius-lg);
    background: var(--bg);
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    cursor: pointer;
    transition: border-color var(--tempo), background var(--tempo), color var(--tempo);
}

.dropzone:hover { border-color: var(--gold); color: var(--ink-weich); }

/* Tastaturfokus liegt auf dem versteckten Feld -- sichtbar wird er hier. */
.dropzone:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(156, 124, 74, .12);
}

.dropzone.darueber {
    border-color: var(--gold);
    border-style: solid;
    background: var(--gold-zart);
    color: var(--ink);
}

.dropzone.abgelehnt {
    border-color: var(--error);
    background: var(--error-bg);
    color: var(--error);
}

.dropzone.hat-datei { border-style: solid; border-color: var(--gold); background: var(--flaeche); }

.dropzone-feld {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.dropzone-text { display: block; }

.dropzone-wahl {
    display: block;
    margin-top: 8px;
    color: var(--ink);
    font-size: 13px;
    word-break: break-all;
}
.dropzone-wahl:empty { margin: 0; }

/* Zeichenzahl unter einem Textfeld. Rechtsbündig, damit sie beim Lesen des
   Textes nicht im Weg steht, und erst auffällig, wenn es eng wird. */
.zeichenzahl {
    max-width: 480px;
    margin: 5px 0 14px;
    font-size: 12px;
    color: var(--muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* Schalter "Im PDF ausblenden". Steht rechts in der Kopfzeile des
   Abschnitts, damit er nicht wie eine Beschriftung des Textfeldes aussieht. */
.schalter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: -6px 0 10px;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
}
.schalter input { width: auto; margin: 0; cursor: pointer; }

/* Ausgeblendet heisst: bleibt lesbar und aenderbar, taucht nur im PDF nicht
   auf. Deshalb gedaempft statt gesperrt -- ein disabled Feld wuerde beim
   Absenden nichts senden und den Text beim naechsten Speichern loeschen. */
fieldset.ausgeblendet legend,
fieldset.ausgeblendet textarea { opacity: 0.55; }
fieldset.ausgeblendet .schalter { color: var(--gold); opacity: 1; }

.zeichenzahl.knapp { color: var(--gold); }
.zeichenzahl.voll { color: var(--error); font-weight: 600; }

/* Ueber der Empfehlung: auffaellig, aber nicht in der Fehlerfarbe -- es ist
   kein Fehler, der Text laesst sich speichern und erzeugt ein PDF. */
.zeichenzahl.ueber { color: var(--gold); font-weight: 600; }

.zeichenwarnung {
    margin: -8px 0 14px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--gold);
    text-align: right;
}

/* Im Dossier-Formular laufen die Felder über die volle Breite. */
fieldset .zeichenzahl { max-width: none; }

/* ------------------------------------------------- Exposé per Handy (QR) */

/* Zwei Wege zum selben Ziel, deshalb untereinander und nicht nebeneinander:
   Nebeneinander läse es sich, als gehörten beide Schritte zusammen. */
.qr-karte {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}

.qr-text { flex: 1 1 260px; }
.qr-text h2 { margin: 0 0 8px; }
.qr-text p { margin: 0 0 10px; }

.qr-bild {
    flex: 0 0 auto;
    width: 200px;
    height: 200px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    padding: 8px;
}

/* Liegt ein Foto bereit, tritt der Knopf nach vorn. Die Karte selbst bleibt
   ruhig -- ein blinkender Rahmen wäre auf einer Arbeitsseite nur laut. */
.qr-karte.qr-bereit .qr-bild { opacity: .35; }

button.zweitrangig {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--line);
}
button.zweitrangig:hover { border-color: var(--gold); color: var(--gold); }

/* --------------------------------------------------- Löschen in der Zeile */

/* Nur für Screenreader: Das × allein sagt nichts, und ein title-Attribut
   lesen längst nicht alle vor. */
.nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.list td.tat { width: 1%; text-align: right; white-space: nowrap; }

/* Zurückhaltend, bis man hinzeigt: Löschen soll erreichbar sein, aber nicht
   das Erste, was in einer Zeile ins Auge fällt. */
button.x {
    padding: 2px 8px;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
    border-radius: var(--radius);
}
button.x:hover { background: var(--error-bg); color: var(--error); }

/* ===========================================================================
   Feinschliff
   ===========================================================================

   Alles hier ist Zugabe: Die Seite funktioniert ohne jede Zeile davon
   genauso. Deshalb steht es am Ende und nicht verteilt in den Bausteinen --
   wer es wieder loswerden will, löscht einen Block.

   Die Zurückhaltung ist Absicht. Das Produkt verkauft Hochwertigkeit, und
   die ist im Netz meistens eine Frage dessen, was man WEGLÄSST. Deshalb kein
   Farbverlauf, kein Glaseffekt, kein Federn beim Aufklappen: kurze Wege,
   weiche Kanten, ein Akzent. Wer hier etwas ergänzt, sollte sich fragen, ob
   es neben einem Objekt für zwei Millionen noch souverän wirkt.
   =========================================================================== */

/* --- Bewegung nur, wenn sie gewünscht ist ------------------------------
   Manche Menschen bekommen von Bewegung auf dem Bildschirm Kopfschmerzen
   oder Übelkeit. Das System weiß das; wir fragen es. Steht ganz oben im
   Block, damit es niemand übersieht, der später etwas ergänzt. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Tastaturbedienung -------------------------------------------------
   :focus-visible statt :focus -- der Ring erscheint bei der Tastatur, nicht
   bei jedem Mausklick. Vorher sah man beim Anklicken eines Knopfes einen
   Rahmen, der wie ein Fehler wirkte. */
:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: var(--radius);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--gold-zart); color: var(--ink); }

/* --- Auswahlfelder -----------------------------------------------------
   Der Systempfeil sieht auf jedem Betriebssystem anders aus und meistens
   nach Formular von 2003. Der eigene Pfeil steckt als data:-URL im
   Hintergrund und kostet damit keine zusätzliche Anfrage.

   padding-right lässt ihm Platz, damit langer Text nicht darunter läuft. */
select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238a8377' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}

select:hover { border-color: var(--gold-hell); }

/* Beim Aufklappen zeigt der Pfeil nach oben. Über :focus und nicht über
   :open -- letzteres beherrschen noch nicht alle Browser. */
select:focus {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 6.5 6 1.5l5 5' fill='none' stroke='%239c7c4a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

select:disabled { cursor: not-allowed; opacity: .7; }

/* Die aufgeklappte Liste selbst gehört dem Betriebssystem. Nur die
   Zeilenhöhe lässt sich beeinflussen, und das auch nur mancherorts. */
select option { padding: 8px; }

/* --- Eingabefelder ------------------------------------------------------ */

input:hover:not(:disabled),
textarea:hover:not(:disabled) { border-color: var(--gold-hell); }

/* Platzhalter deutlich leiser als echter Text -- sonst liest man sie als
   ausgefüllt. */
::placeholder { color: var(--muted); opacity: .65; }

/* --- Schaltflächen -----------------------------------------------------
   Einen Punkt anheben beim Zeigen, beim Drücken wieder herunter. Mehr
   nicht: Ein Knopf, der springt, wirkt billig.

   Die Bewegung läuft über transform und nicht über margin, weil sie sonst
   das Layout drumherum verschöbe. */
button, .button {
    transition: background var(--tempo), border-color var(--tempo),
                transform var(--tempo), box-shadow var(--tempo);
}

button:not(.link):not(.x):hover,
.button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -4px rgba(28, 26, 23, .28);
}

button:not(.link):not(.x):active,
.button:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Zweitrangige Knöpfe bekommen den Akzent statt der Anhebung -- sie sollen
   sich nicht wie der Hauptknopf anfühlen. */
button.zweitrangig:hover {
    transform: none;
    box-shadow: none;
    background: var(--gold-zart);
}

/* --- Links in der Kopfzeile des Inhalts --------------------------------
   Ich hatte hier zuerst eine Unterstreichung, die beim Zeigen von links
   einwächst -- dafür muss die vorhandene aber weg, und dann sieht ein Link
   im Ruhezustand aus wie gewöhnlicher Text. Ein Makler, der "Zurück" sucht,
   soll nicht erst mit der Maus danach tasten.

   Deshalb bleibt die Unterstreichung stehen und wechselt nur die Farbe.
   Weniger vorführbar, aber richtiger. */
.head a:not(.button) {
    transition: color var(--tempo), text-decoration-color var(--tempo);
}
.head a:not(.button):hover {
    color: var(--gold);
    text-decoration-color: var(--gold);
}

/* --- Fotos auf der Objektseite -----------------------------------------
   Das Bild fährt beim Zeigen ein Stück näher heran, der Rahmen bleibt
   stehen. Möglich macht das der Ausschnitt: overflow: hidden steht schon an
   der figure.

   1.05 und nicht 1.15 -- bei stärkerem Heranfahren sieht man die
   Unschärfe, weil das Vorschaubild nur so groß ist, wie es angezeigt
   wird. */
.gallery figure {
    transition: box-shadow var(--tempo), transform var(--tempo), border-color var(--tempo);
}

.gallery img {
    transition: transform .4s cubic-bezier(.2, .6, .2, 1);
}

.gallery figure:hover {
    transform: translateY(-2px);
    border-color: var(--gold-hell);
}
.gallery figure:hover img { transform: scale(1.05); }

/* Das Titelbild bleibt auch beim Zeigen als solches erkennbar. */
.gallery figure.cover:hover { border-color: var(--gold); }

/* Die Beschriftung tritt beim Zeigen hervor -- die Knöpfe darin sind sonst
   leicht zu übersehen. */
.gallery figcaption { transition: color var(--tempo); }
.gallery figure:hover figcaption { color: var(--ink-weich); }

/* --- Tabellenzeilen ----------------------------------------------------
   Zusätzlich zum Farbwechsel ein schmaler Strich am linken Rand. Er zeigt,
   welche Zeile gemeint ist, ohne dass sich die Zeile bewegt -- eine
   wandernde Zeile macht das Treffen des Löschknopfes schwerer. */
.list tbody tr {
    transition: background var(--tempo), box-shadow var(--tempo);
}
.list tbody tr:hover {
    box-shadow: inset 2px 0 0 var(--gold);
}

/* --- Kontingentbalken --------------------------------------------------
   Wächst beim Laden einmal auf seine Breite und steht danach still. */
.quota-bar span {
    transform-origin: left;
    border-radius: 2px;
    animation: quota-fuellen .6s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes quota-fuellen {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* --- Ablagefelder ------------------------------------------------------ */

.dropzone { transition: border-color var(--tempo), background var(--tempo); }
.dropzone:hover { border-color: var(--gold-hell); background: var(--gold-zart); }

/* --- Plattform-Verwaltung ----------------------------------------------
   Der Admin-Bereich ist bewusst kühl und sachlich, siehe Kopf dieser Datei.
   Das Gold der Makleroberfläche hat dort nichts verloren -- sonst sehen
   beide Bereiche gleich aus, und genau das soll nicht sein. */
body.admin :focus-visible { outline-color: var(--ink-weich); }
body.admin select:hover,
body.admin input:hover:not(:disabled),
body.admin textarea:hover:not(:disabled) { border-color: var(--ink-weich); }
body.admin .list tbody tr:hover { box-shadow: inset 2px 0 0 var(--ink-weich); }
body.admin .head a:not(.button):hover { color: var(--ink); text-decoration-color: var(--ink-weich); }

/* Personalisierung: Der Knopf zum Neuerzeugen steht abgesetzt unter dem
   Speichern-Formular, weil er Geld kostet. */
.person-neu {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line-zart);
}
.person-neu .hint { margin: 0; }


/* ------------------------------------------------------------- Schalter */

/* Ein/Aus-Schalter statt Kästchen. Innen steckt ein gewöhnliches
   <input type="checkbox"> -- es ist nur unsichtbar, nicht ersetzt. Damit
   funktioniert alles weiter: Tastatur, Screenreader, Absenden ohne
   JavaScript. */
.toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    color: var(--ink-weich);
    cursor: pointer;
    user-select: none;
}

/* Nicht display:none -- das nähme dem Feld den Fokus und damit die
   Bedienbarkeit per Tastatur. */
.toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.toggle .spur {
    position: relative;
    flex: 0 0 auto;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--line);
    transition: background var(--tempo);
}

.toggle .spur::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(28, 26, 23, .25);
    transition: transform var(--tempo);
}

.toggle input:checked + .spur { background: var(--gold); }
.toggle input:checked + .spur::after { transform: translateX(16px); }

.toggle input:focus-visible + .spur {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.toggle:hover .spur { background: var(--gold-hell); }
.toggle input:checked ~ .beschriftung { color: var(--ink); }

/* Der Schalter steht rechts über dem Feld, das er ein- und ausschaltet. */
.card > form > .toggle { float: right; margin-top: -34px; }

/* Abgeschaltete Karte: durchgehend grau statt nur gedämpfter Einzelteile.
   Der Schalter selbst bleibt in voller Farbe -- er ist das Einzige, was hier
   noch etwas tut. */
.card.ausgeblendet {
    background: var(--bg);
    border-color: var(--line);
    box-shadow: none;
}
.card.ausgeblendet > h2,
.card.ausgeblendet > .hint,
.card.ausgeblendet .person-neu,
.card.ausgeblendet textarea,
.card.ausgeblendet .zeichenzahl { opacity: .5; }
.card.ausgeblendet .toggle { opacity: 1; }

/* Namensfeld in der Personalisierung: schmaler als das Textfeld darunter,
   weil dort ein Name steht und kein Satz. */
.person-name { max-width: 360px; margin-top: 18px; }

/* Prompt-Editor: Pflichtsätze und der ausgelieferte Vergleichstext. */
.merkliste { margin: 12px 0 0; padding-left: 20px; }
.merkliste li { margin-bottom: 6px; }
.merkliste code,
.original code { font-size: 13px; }

.original { margin-top: 10px; font-size: 13px; }
.original summary { color: var(--muted); cursor: pointer; }
.original pre {
    margin: 10px 0 0;
    padding: 14px 16px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-x: auto;
}

/* Anrede und Name nebeneinander: Sie bilden zusammen eine Zeile im PDF und
   sollen auch im Formular als eine gelesen werden. */
.anrede-zeile { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.anrede-zeile label { flex: 1 1 200px; margin-bottom: 0; }

/* PDF-Knopf in der Dossierzeile. Zurückhaltend wie das × daneben -- die
   Zeile selbst führt ins Dossier, das hier ist die Abkürzung. */
.pdf-link {
    display: inline-block;
    margin-right: 6px;
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--muted);
    text-decoration: none;
    transition: border-color var(--tempo), color var(--tempo), background var(--tempo);
}
.pdf-link:hover {
    border-color: var(--gold);
    background: var(--gold-zart);
    color: var(--gold);
}

/* --------------------------------------------- Reihenfolge der Fotos */

/* Die Pfeile liegen über dem Bild, oben rechts. Sie erscheinen erst beim
   Zeigen -- acht Kacheln mit je zwei dauerhaften Knöpfen wären unruhig. Bei
   Tastaturbedienung müssen sie trotzdem auftauchen, deshalb :focus-within. */
.gallery figure { position: relative; }

.reihenfolge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--tempo);
}
.gallery figure:hover .reihenfolge,
.gallery figure:focus-within .reihenfolge { opacity: 1; }

button.pfeil {
    padding: 3px 9px;
    border: 0;
    border-radius: var(--radius);
    background: rgba(28, 26, 23, .72);
    color: #fff;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
}
button.pfeil:hover { background: var(--ink); transform: none; box-shadow: none; }

/* Beim Ziehen gedämpft, damit sichtbar ist, welche Kachel wandert. */
.gallery figure.wird-gezogen { opacity: .4; }
.gallery[data-sortierbar] figure { cursor: grab; }
.gallery[data-sortierbar] figure:active { cursor: grabbing; }

/* Sprachumschalter in der Kopfzeile. Schmal und leise -- er wird selten
   gebraucht und soll die Navigation nicht dominieren. */
.sprachwahl { display: flex; align-items: center; gap: 8px; margin: 0 4px 0 12px; }

.sprachwahl select {
    width: auto;
    padding: 5px 30px 5px 10px;
    background-position: right 10px center;
    font-size: 13px;
    color: var(--ink-weich);
}

/* Der Knopf ist nur der Weg ohne JavaScript. Läuft das Skript, schaltet
   schon das Auswählen um -- dann steht er da und tut nichts Zusätzliches.
   Deshalb klein und zurückhaltend, aber sichtbar: unsichtbar wäre er für
   alle ohne JavaScript unauffindbar. */
.sprachwahl button.link { font-size: 12px; }

/* Logo und Produktname nebeneinander in der Kopfzeile.
   NICHT .marke verwenden -- die Klasse ist die Status-Plakette in den
   Listen und würde hier ihre Pillenform mitbringen. */
.kopfmarke { display: flex; align-items: center; gap: 14px; min-width: 0; }

/* Der Produktname steht neben dem Bürologo, durch einen Strich getrennt --
   damit klar bleibt, was die Marke des Kunden ist und was unsere. */
.produkt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-right: 14px;
    border-right: 1px solid var(--line);
    font-family: var(--serif);
    font-size: 15px;
    color: var(--muted);
    white-space: nowrap;
}

/* Das Plattform-Zeichen kraeftiger als der gedaempfte Produktname daneben:
   Umriss in der Textfarbe, der Funke bleibt golden (im SVG gesetzt). */
.produkt .logo-mark { height: 30px; width: auto; flex: none; color: var(--ink); }

/* Auf schmalen Fenstern hat die Navigation Vorrang. */
@media (max-width: 900px) {
    .produkt { display: none; }
}

/* ------------------------------------------------------------------ *
 * Onboarding: einmalige Einblendung fuer neue Makler. Schwebende
 * Karte, kein blockierendes Modal -- das Formular darunter bleibt
 * bedienbar (Schritt 1 will ja ausgefuellt werden).
 * ------------------------------------------------------------------ */
.onb {
    position: fixed;
    left: 50%;
    /* Knapp unter der Kopfzeile (76 px hoch), oben eingeblendet. */
    top: 92px;
    transform: translateX(-50%);
    z-index: 1000;
    width: min(460px, calc(100vw - 32px));
    animation: onb-auf .35s ease both;
}
@keyframes onb-auf {
    from { opacity: 0; transform: translate(-50%, -14px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.onb-karte {
    background: var(--flaeche);
    border: 1px solid var(--line);
    border-top: 3px solid var(--gold);
    border-radius: 10px;
    box-shadow: 0 14px 44px rgba(20, 24, 30, .24);
    padding: 20px 22px;
}
.onb-titel { margin: 0 0 8px; font-size: 17px; }
.onb-text  { margin: 0 0 16px; color: var(--ink); line-height: 1.5; font-size: 14px; }
.onb-aktionen { display: flex; align-items: center; gap: 16px; }
.onb-weiter {
    display: inline-block;
    background: var(--ink);
    color: #fff;
    padding: 9px 16px;
    border: 0;
    border-radius: 6px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.onb-weiter:hover { opacity: .9; }
.onb-spaeter { color: #8a8a8a; text-decoration: none; font-size: 13px; }
.onb-spaeter:hover { text-decoration: underline; }

@media (max-width: 900px) {
    /* Auf schmalen Fenstern bricht die Kopfzeile um und wird hoeher --
       die Einblendung rueckt entsprechend nach unten. */
    .onb { top: 132px; }
}
@media (max-width: 520px) {
    .onb-aktionen { flex-wrap: wrap; }
}

/* ------------------------------------------------------------------ *
 * Einstellungen: zwei Zweispalter-Reihen, um Platz zu sparen --
 * Logo | Buero(+Sprache), darunter Erscheinungsbild | Kontakt.
 *
 * Die Einstellungs-Form ist display:contents, damit ihre Karten selbst
 * zu Rasterfeldern werden und neben der Logo-Karte (eigene Form) stehen.
 * ------------------------------------------------------------------ */
.einst-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Zwei gleich hohe Kartenreihen (1fr = auf die groesste Karte
       angeglichen), darunter eine schmale Auto-Zeile fuer den Knopf. Die
       Karten fuellen ihre Zelle (Standard: align-items stretch), damit alle
       vier gleich gross sind. */
    grid-template-rows: 1fr 1fr auto;
    gap: 22px;
}
.einst-felder { display: contents; }
.einst-grid .card { margin: 0; }        /* Abstand kommt vom grid-gap */
.einst-save {
    grid-column: 1 / -1;
    text-align: center;                  /* Speichern-Knopf mittig unten */
    margin-top: 2px;
}

@media (max-width: 860px) {
    /* Eine Spalte: Karten in natuerlicher Hoehe stapeln, nicht strecken. */
    .einst-grid { grid-template-columns: 1fr; grid-template-rows: none; }
}