/* Übernommen aus src/wohnungssuche/web/templates/basis.html (Stand 2026-09-21); Änderungen: als Datei statt <style>, Formular-Klassen für Login/Suchprofile angehängt */
  :root {
    color-scheme: light dark;
    --grund:#f4f5f7; --flaeche:#fff; --rand:#dcdfe5; --rand-weich:#eceef2;
    --text:#1a1d23; --gedaempft:#646b78;
    --akzent:#2563eb; --akzent-text:#fff;
    --warn-flaeche:#fff6e8; --warn-rand:#f0c98a; --warn-text:#77500a;
    --scharf-flaeche:#fdeced; --scharf-rand:#e6a3a6; --scharf-text:#8d1d24;
    --gut-flaeche:#e9f7ee; --gut-rand:#9dd3ae; --gut-text:#1c6b36;
    --schatten:0 1px 2px rgba(16,20,30,.06), 0 4px 12px rgba(16,20,30,.05);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --grund:#111419; --flaeche:#181c23; --rand:#2b313b; --rand-weich:#222831;
      --text:#e6e9ef; --gedaempft:#98a1b0;
      --akzent:#4b86f5;
      --warn-flaeche:#2a2113; --warn-rand:#6b5327; --warn-text:#f0c98a;
      --scharf-flaeche:#2c1618; --scharf-rand:#7d3a3f; --scharf-text:#f0a8ad;
      --gut-flaeche:#13251a; --gut-rand:#2f5d3f; --gut-text:#8fd6a6;
      --schatten:0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.25);
    }
  }
  * { box-sizing:border-box; }
  /* hidden muss auch gegen display:inline-block der Knoepfe gewinnen. */
  [hidden] { display:none !important; }
  html { -webkit-text-size-adjust:100%; }
  body {
    margin:0; background:var(--grund); color:var(--text);
    font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-variant-numeric:tabular-nums;
  }
  .huelle { max-width:1680px; margin:0 auto; padding:22px 24px 56px; }

  /* Kopfzeile */
  .kopf { display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; margin-bottom:6px; }
  .kopf h1 { margin:0; font-size:21px; letter-spacing:-.01em; }
  .navi { display:flex; gap:4px; margin-left:auto; }
  .navi a {
    padding:6px 12px; border-radius:7px; text-decoration:none; color:var(--gedaempft);
    font-size:13.5px; font-weight:500;
  }
  .navi a:hover { background:var(--rand-weich); color:var(--text); }
  .navi a.an { background:var(--flaeche); color:var(--text); box-shadow:var(--schatten); }
  .unterzeile { color:var(--gedaempft); font-size:13px; margin-bottom:18px; }

  /* Bedienelemente */
  button, .knopf, select, input[type=text], input[type=number], textarea {
    font:inherit; color:inherit;
    border:1px solid var(--rand); border-radius:8px; background:var(--flaeche);
  }
  button, .knopf {
    padding:8px 14px; cursor:pointer; text-decoration:none; display:inline-block;
    font-size:13.5px; font-weight:500; white-space:nowrap; transition:filter .12s;
  }
  button:hover:not([disabled]), .knopf:hover { filter:brightness(.97); }
  button[disabled] { opacity:.45; cursor:not-allowed; }
  button.stark { background:var(--akzent); border-color:var(--akzent); color:var(--akzent-text); }
  button.scharf { background:#b3261e; border-color:#b3261e; color:#fff; }
  button.klein { padding:5px 10px; font-size:12.5px; }
  select, input[type=text], input[type=number], textarea { padding:7px 10px; }
  select:focus, input:focus, textarea:focus {
    outline:2px solid color-mix(in srgb, var(--akzent) 45%, transparent); outline-offset:1px;
  }
  a { color:var(--akzent); }

  .leiste { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }

  /* Hinweisbalken */
  .hinweis {
    padding:11px 15px; border-radius:10px; margin-bottom:16px; font-size:13.5px;
    display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap;
    background:var(--warn-flaeche); border:1px solid var(--warn-rand); color:var(--warn-text);
  }
  .hinweis.scharf-an { background:var(--scharf-flaeche); border-color:var(--scharf-rand); color:var(--scharf-text); }
  .hinweis.gut { background:var(--gut-flaeche); border-color:var(--gut-rand); color:var(--gut-text); }
  .hinweis form { margin:0; }

  /* Karten */
  .karte {
    background:var(--flaeche); border:1px solid var(--rand); border-radius:12px;
    padding:18px 20px; margin-bottom:16px; box-shadow:var(--schatten);
  }
  .karte h2 { margin:0 0 3px; font-size:15px; }
  .karte .erklaerung { color:var(--gedaempft); font-size:12.5px; margin-bottom:14px; }

  code { font-size:12.5px; background:var(--rand-weich); padding:1px 5px; border-radius:4px; }

  /* Hinweis beim Ueberfahren eines Sinnbilds: erscheint sofort, nicht erst
     nach der Wartezeit des Browsers. Text steht in data-tipp am Formular um
     den Knopf, damit er auch bei gesperrten Knoepfen erscheint. */
  .tipp-fenster {
    position:fixed; z-index:50; max-width:280px; padding:6px 10px; border-radius:7px;
    background:#1a1d23; color:#fff; font-size:12.5px; line-height:1.4; pointer-events:none;
    box-shadow:0 4px 14px rgba(0,0,0,.25); white-space:normal;
  }
  @media (prefers-color-scheme: dark) { .tipp-fenster { background:#e6e9ef; color:#1a1d23; } }
  [data-tipp] button[disabled] { pointer-events:none; }

  /* Mehrfachauswahl mit Suchfeld (Bezirke) */
  .mehrfach { position:relative; }
  .mehrfach-feld {
    display:flex; flex-wrap:wrap; gap:4px; align-items:center; min-height:36px;
    padding:4px 6px; border:1px solid var(--rand); border-radius:8px; background:var(--flaeche); cursor:text;
  }
  .mehrfach-feld:focus-within { outline:2px solid color-mix(in srgb, var(--akzent) 45%, transparent); outline-offset:1px; }
  .mehrfach-marken { display:contents; }
  .mehrfach-marke {
    display:inline-flex; align-items:center; gap:4px; padding:2px 6px 2px 9px; border-radius:99px;
    background:color-mix(in srgb, var(--akzent) 14%, var(--flaeche)); border:1px solid color-mix(in srgb, var(--akzent) 40%, transparent);
    font-size:12.5px; white-space:nowrap;
  }
  .mehrfach-marke button {
    padding:0 4px; border:none; background:transparent; font-size:14px; line-height:1; color:var(--gedaempft); cursor:pointer;
  }
  .mehrfach-marke button:hover { color:var(--text); }
  .mehrfach-suche { flex:1; min-width:90px; border:none !important; background:transparent !important; padding:4px 4px !important; outline:none !important; }
  .mehrfach-liste {
    position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:20; max-height:240px; overflow-y:auto;
    display:flex; flex-direction:column; padding:6px; gap:2px;
    background:var(--flaeche); border:1px solid var(--rand); border-radius:10px; box-shadow:var(--schatten);
  }
  .mehrfach-liste button {
    text-align:left; padding:6px 10px; border:none; border-radius:6px; background:transparent; font-size:13px; white-space:nowrap;
  }
  .mehrfach-liste button:hover, .mehrfach-liste button.aktiv { background:color-mix(in srgb, var(--akzent) 10%, transparent); }
  .mehrfach-liste button.gewaehlt::before { content:"✓ "; color:var(--akzent); }
  .mehrfach-liste button:not(.gewaehlt)::before { content:"\2003"; }
  .mehrfach-leer { padding:6px 10px; font-size:12.5px; color:var(--gedaempft); }

  /* Spaltenwahl ueber einer Tabelle */
  .tabellenkopf { display:flex; justify-content:flex-end; margin-bottom:8px; }
  details.spaltenwahl { position:relative; }
  details.spaltenwahl summary { list-style:none; cursor:pointer; }
  details.spaltenwahl summary::-webkit-details-marker { display:none; }
  details.spaltenwahl summary > span {
    display:inline-block; padding:5px 10px; font-size:12.5px; font-weight:500;
    border:1px solid var(--rand); border-radius:8px; background:var(--flaeche); color:var(--gedaempft);
  }
  details.spaltenwahl[open] summary > span { color:var(--text); border-color:var(--akzent); }
  .spaltenliste {
    position:absolute; right:0; top:calc(100% + 6px); z-index:20; min-width:220px;
    display:flex; flex-direction:column; gap:4px; padding:10px 12px;
    background:var(--flaeche); border:1px solid var(--rand); border-radius:10px; box-shadow:var(--schatten);
    font-size:13px;
  }
  .spaltenliste label { display:flex; gap:8px; align-items:center; cursor:pointer; white-space:nowrap; }
  .spaltenliste button { margin-top:6px; align-self:flex-start; }

  /* Ergänzungen Alcuro (Login, Suchprofil-Formulare, Meldungen) */
  .huelle > .kopf .navi form { margin:0; }
  .navi button.link { border:none; background:none; padding:6px 12px; color:var(--gedaempft); font-size:13.5px; font-weight:500; cursor:pointer; }
  .navi button.link:hover { background:var(--rand-weich); color:var(--text); border-radius:7px; }
  .formular div { margin-bottom:12px; }
  .formular label { display:block; font-size:12.5px; font-weight:500; margin-bottom:4px; }
  .formular input[type=email], .formular input[type=text] { width:100%; max-width:26rem; }
  .formular .errorlist { color:var(--scharf-text); list-style:none; padding:0; margin:4px 0 0; font-size:12.5px; }
  .meldungen { list-style:none; padding:0; margin:0 0 16px; }
  .meldungen li { padding:11px 15px; border-radius:10px; margin-bottom:8px; font-size:13.5px; background:var(--gut-flaeche); border:1px solid var(--gut-rand); color:var(--gut-text); }
  .meldungen li.error { background:var(--scharf-flaeche); border-color:var(--scharf-rand); color:var(--scharf-text); }
  .meldungen li.info { background:var(--warn-flaeche); border-color:var(--warn-rand); color:var(--warn-text); }
  .raster { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
  .feld { display:flex; flex-direction:column; gap:5px; }
  .feld label { font-size:12.5px; font-weight:500; }
  .feld .tipp { font-size:11.5px; color:var(--gedaempft); }
  .feld input, .feld select { width:100%; }
  .kaestchen { display:flex; align-items:flex-start; gap:9px; padding:9px 0; }
  .kaestchen input { margin-top:3px; width:16px; height:16px; flex:none; }
  .kaestchen label { font-size:13.5px; }
  .kaestchen .tipp { display:block; font-size:11.5px; color:var(--gedaempft); margin-top:1px; }
  .tipp { font-size:11.5px; color:var(--gedaempft); }

  /* Postfach (Schritt 1.2) */
  :root { --linie: var(--rand, #d9dee3); }
.threads { list-style: none; padding: 0; margin: 0; }
.threads li { padding: .6rem 0; border-bottom: 1px solid var(--linie); }
.threads li.ungelesen a { font-weight: 700; }
.marke-neu { display: inline-block; margin-left: .4rem; padding: 0 .45rem; border-radius: 999px; background: var(--akzent); color: #fff; font-size: .8rem; }
.nachricht header { margin-bottom: .5rem; }
.mailtext { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 0; }
.mailhtml { width: 100%; min-height: 24rem; border: 1px solid var(--linie); border-radius: 6px; background: #fff; }
.anhaenge { margin: .6rem 0 0; padding-left: 1.2rem; }