/* hausannonce.de — Basis-Stylesheet.
   Design-Tokens aus REGELN-DESIGN.md §3a (Trainer-Look), Leitplanken §6/§7:
   Fokus sichtbar, Zielgrößen ≥ 24 px, Skip-Link, reduzierte Bewegung. */

:root{
  --bg:#f4f5f7; --card:#ffffff; --text:#1e293b; --muted:#64748b; --border:#dfe3e8;
  --accent:#475569; --accent-soft:#e8ecf1; --accent-text:#ffffff;
  --ok:#15803d; --ok-soft:#e6f4ea; --warn:#b45309; --warn-soft:#fdf3e3;
  --danger:#b91c1c; --danger-soft:#fdecec; --info:#1d4ed8; --info-soft:#e8eefc;
  --shadow:0 1px 3px rgba(30,41,59,.07),0 4px 14px rgba(30,41,59,.05);
  --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f172a; --card:#1e293b; --text:#e2e8f0; --muted:#94a3b8; --border:#334155;
    --accent:#94a3b8; --accent-soft:#334155; --accent-text:#0f172a;
    --ok:#4ade80; --ok-soft:#14321f; --warn:#fbbf24; --warn-soft:#3a2c0c;
    --danger:#f87171; --danger-soft:#3a1616; --info:#60a5fa; --info-soft:#152238;
    --shadow:0 1px 3px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.3);
  }
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:16px/1.55 system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
:focus-visible{outline:2px solid currentColor;outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

.sprunglink{position:absolute;left:-9999px;top:0;background:var(--card);padding:.5rem 1rem;z-index:10}
.sprunglink:focus{left:0}

.kopf{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.75rem 1.25rem;background:var(--card);border-bottom:1px solid var(--border);
}
.marke{font-weight:700;font-size:1.15rem;color:var(--text);text-decoration:none}
.marke span{color:var(--accent)}
.kopf nav{display:flex;gap:.75rem;align-items:center}
.kopf a{color:var(--text);text-decoration:none;padding:.4rem .6rem;border-radius:8px;min-height:24px}
.kopf a:hover{background:var(--accent-soft)}
.knopf{background:var(--accent);color:var(--accent-text)!important;border-radius:999px;padding:.4rem 1rem}

main{max-width:64rem;margin:0 auto;padding:1.5rem 1.25rem}

.held{text-align:center;padding:2.5rem 0 1.5rem}
.held h1{margin:0 0 .25rem;font-size:1.9rem}
.unter{color:var(--muted);margin:0 0 1.25rem}
.suchschlitz{display:flex;gap:.5rem;max-width:34rem;margin:0 auto}
.suchschlitz input{
  flex:1;padding:.7rem 1rem;border:1px solid var(--border);border-radius:999px;
  background:var(--card);color:var(--text);font-size:1rem;
}
.suchschlitz button{
  padding:.7rem 1.4rem;border:0;border-radius:999px;background:var(--accent);
  color:var(--accent-text);font-size:1rem;cursor:pointer;
}
.suchschlitz :disabled{opacity:.55;cursor:not-allowed}
.hinweis{color:var(--muted);font-size:.85rem;margin-top:1rem}

.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;margin-top:1rem}
.karte{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1rem 1.25rem}
.karte h2{margin:.25rem 0 .5rem;font-size:1.15rem}
.karte p{margin:0;color:var(--muted)}
.schmal{max-width:44rem;margin:1rem auto}

.fuss{text-align:center;color:var(--muted);padding:2rem 1rem;border-top:1px solid var(--border)}
.fuss a{color:var(--muted)}

/* Meldungen (Django messages) */
.meldung{border-radius:var(--radius);padding:.6rem 1rem;border:1px solid var(--border)}
.meldung.success{background:var(--ok-soft);color:var(--ok)}
.meldung.error{background:var(--danger-soft);color:var(--danger)}
.meldung.warning{background:var(--warn-soft);color:var(--warn)}

/* Formulare */
form p{margin:.6rem 0}
form label{display:block;font-weight:600;margin-bottom:.15rem}
input,select,textarea{
  width:100%;padding:.55rem .75rem;border:1px solid var(--border);border-radius:8px;
  background:var(--card);color:var(--text);font:inherit;
}
input[type=checkbox]{width:auto;min-width:24px;min-height:24px}
.helptext,.hinweis{color:var(--muted);font-size:.85rem}
.errorlist{color:var(--danger);list-style:none;margin:.15rem 0;padding:0;font-size:.9rem}
.knopf-primaer{
  display:inline-block;padding:.6rem 1.4rem;border:0;border-radius:999px;
  background:var(--accent);color:var(--accent-text);font-size:1rem;cursor:pointer;
  text-decoration:none;
}

/* Filterleiste der Listen */
.filterleiste{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}
.filterleiste input{flex:2;min-width:12rem}
.filterleiste select{flex:1;min-width:10rem}
.filterleiste button{flex:0;padding:.55rem 1.2rem;border:0;border-radius:8px;
  background:var(--accent);color:var(--accent-text);cursor:pointer}

/* Facetten-Chips (Kap. 6) */
.facetten{display:flex;gap:.4rem;flex-wrap:wrap;margin:.25rem 0 1rem}
.chip{
  display:inline-block;padding:.3rem .85rem;border-radius:999px;min-height:24px;
  background:var(--card);border:1px solid var(--border);color:var(--text);
  text-decoration:none;font-size:.9rem;
}
.chip.aktiv{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}
.chip.leer{color:var(--muted);opacity:.6}

/* Plaketten & Tabellen */
.plaketten{margin:0 0 .25rem}
.plakette{display:inline-block;background:var(--accent-soft);color:var(--accent);
  border-radius:999px;padding:.15rem .7rem;font-size:.85rem}
.plakette.status-aktiv{background:var(--ok-soft);color:var(--ok)}
.plakette.status-entwurf{background:var(--info-soft);color:var(--info)}
.plakette.status-abgelehnt,.plakette.status-geloescht{background:var(--danger-soft);color:var(--danger)}
.plakette.status-pruefung,.plakette.status-abgelaufen{background:var(--warn-soft);color:var(--warn)}
.tabelle{width:100%;border-collapse:collapse}
.tabelle th,.tabelle td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--border)}
.aktionen{display:flex;gap:.6rem;align-items:center}
.aktionen form{display:inline}
.aktionen button{width:auto;padding:.35rem .9rem;border:0;border-radius:999px;
  background:var(--accent);color:var(--accent-text);cursor:pointer}

/* Medien */
.plakette.status-bereit{background:var(--ok-soft);color:var(--ok)}
.plakette.status-hochgeladen{background:var(--info-soft);color:var(--info)}
.karten-bild{width:100%;height:10rem;object-fit:cover;border-radius:8px;display:block;margin-bottom:.4rem}
.medienliste .karten-bild{height:8rem}
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.6rem;margin:.75rem 0}
.galerie img{width:100%;height:9rem;object-fit:cover;border-radius:8px;display:block}
.upload{display:grid;gap:.5rem;max-width:34rem}
.dateisymbol{font-size:2.2rem;margin:.4rem 0;text-align:center}

/* Konto-Seiten (allauth über templates/allauth/layouts/base.html) */
.konto-karte{max-width:26rem;margin:2rem auto;padding:1.5rem 1.75rem}
.konto-karte h1{font-size:1.4rem;margin:.25rem 0 1rem}
.konto-karte form{display:grid;gap:.7rem;margin:.75rem 0}
.konto-karte p{margin:.35rem 0}
.konto-karte label{font-weight:600}
.konto-karte input[type=checkbox]{min-height:0}
.konto-karte button[type=submit]{
  padding:.65rem 1.4rem;border:0;border-radius:999px;background:var(--accent);
  color:var(--accent-text);font-size:1rem;cursor:pointer;width:100%;margin-top:.25rem;
}
.konto-karte button[type=submit]:hover{opacity:.92}
.konto-karte a{color:var(--info)}
.konto-karte .helptext,.konto-karte ul{color:var(--muted);font-size:.85rem;margin:.15rem 0;padding-left:1.1rem}

/* Rechtstexte (Impressum, Datenschutz) */
.rechtstext{margin:2rem auto;padding:1.5rem 1.75rem}
.rechtstext h1{font-size:1.5rem;margin:.25rem 0 .5rem}
.rechtstext h2{font-size:1.05rem;margin:1.4rem 0 .35rem}
.rechtstext p{color:var(--text);margin:.4rem 0}
.rechtstext .stand{color:var(--muted);font-size:.85rem}
.rechtstext a{color:var(--info)}

/* Postfach & Konversationen */
.hp-feld{position:absolute!important;left:-9999px;top:-9999px}
.verlauf{display:flex;flex-direction:column;margin:1rem 0}
.nachricht{max-width:75%;padding:.6rem .9rem;border-radius:12px;background:var(--accent-soft);margin:.35rem 0}
.nachricht.eigene{margin-left:auto;background:var(--info-soft)}
.nachricht .meta{color:var(--muted);font-size:.8rem;margin:0 0 .25rem}
.nachricht p{margin:0}

/* Detailseite */
.daten{display:grid;grid-template-columns:max-content 1fr;gap:.25rem 1.25rem;margin:.75rem 0}
.daten dt{color:var(--muted)}
.daten dd{margin:0}
.blaettern{display:flex;gap:1rem;justify-content:center;align-items:center;margin:1.5rem 0}