/* SPDX-License-Identifier: BSD-3-Clause */
/* Gemeinsames Aussehen von Karte (index.html) und Erklaerung (erklaerung.html). */
  :root { --bg:#f6f5f2; --fg:#1d1d1b; --muted:#6b6a66; --line:#dddbd5; --accent:#c8007a; --card:#fff; }
  @media (prefers-color-scheme: dark) {
    :root { --bg:#1b1b1a; --fg:#ecebe7; --muted:#a3a19b; --line:#3a3936; --accent:#ff5cb8; --card:#242422; }
  }
  * { box-sizing: border-box; }
  body { margin:0; font:15px/1.45 system-ui, sans-serif; background:var(--bg); color:var(--fg);
         display:grid; grid-template-columns: 1fr 380px; height:100vh; }
  #karte { height:100vh; }
  .gebiete { image-rendering: pixelated; }
  /* Hover-Kasten: haengt am Mauszeiger (Position setzt finder.js) */
  .info { position:absolute; z-index:800; background:var(--card); color:var(--fg);
          border:1px solid var(--line); border-radius:6px;
          padding:6px 10px; font:13px/1.4 system-ui, sans-serif; box-shadow:0 1px 4px #0002;
          max-width:260px; pointer-events:none; }
  .info small { color:var(--muted); }
  .punkt { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px;
           vertical-align:-1px; }
  aside { overflow-y:auto; border-left:1px solid var(--line); padding:18px 18px 40px; }
  h1 { font-size:19px; margin:0 0 4px; }
  .sub { color:var(--muted); font-size:13px; margin:0 0 14px; }
  #suche { display:flex; gap:6px; margin-bottom:8px; }   /* nur die Ortssuche, nicht jedes Formular */
  /* nur Texteingaben der Karte: ein nacktes "input" traefe auch Radiobuttons */
  #suche input { flex:1; padding:8px 10px; border:1px solid var(--line);
          border-radius:6px; background:var(--card); color:var(--fg); font:inherit; }
  button { padding:8px 12px; border:1px solid var(--line); border-radius:6px; background:var(--card);
           color:var(--fg); font:inherit; cursor:pointer; }
  button.primär { background:var(--accent); border-color:var(--accent); color:#fff; }
  .karte { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px 14px;
           margin:10px 0; border-left:5px solid var(--farbe, var(--accent)); }
  .karte h2 { font-size:16px; margin:0 0 4px; }
  .karte .meta { color:var(--muted); font-size:13px; margin-bottom:6px; }
  .karte a { color:var(--accent); text-decoration:none; margin-right:10px; font-size:14px; }
  .karte a:hover { text-decoration:underline; }
  .hinweis { color:var(--muted); font-size:13px; }
  .badge { display:inline-block; font-size:12px; padding:1px 7px; border-radius:10px;
           background:var(--line); color:var(--fg); margin-right:4px; }
          border-radius:6px; background:var(--card); color:var(--fg); font:inherit; }
  button { padding:8px 12px; border:1px solid var(--line); border-radius:6px; background:var(--card);
           color:var(--fg); font:inherit; cursor:pointer; }
  button.primär { background:var(--accent); border-color:var(--accent); color:#fff; }
  .karte { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px 14px;
           margin:10px 0; border-left:5px solid var(--farbe, var(--accent)); }
  .karte h2 { font-size:16px; margin:0 0 4px; }
  .karte .meta { color:var(--muted); font-size:13px; margin-bottom:6px; }
  .karte a { color:var(--accent); text-decoration:none; margin-right:10px; font-size:14px; }
  .karte a:hover { text-decoration:underline; }
  .hinweis { color:var(--muted); font-size:13px; }
  .badge { display:inline-block; font-size:12px; padding:1px 7px; border-radius:10px;
           background:var(--line); color:var(--fg); margin-right:4px; }
  .fuss { color:var(--muted); font-size:12px; margin-top:24px; border-top:1px solid var(--line); padding-top:10px; }
  @media (max-width: 760px) {
    body { grid-template-columns: 1fr; grid-template-rows: 55vh auto; height:auto; }
    #karte { height:55vh; } aside { border-left:none; border-top:1px solid var(--line); }
  }

/* --- Erklaerseite (erklaerung.html): eine Spalte statt Karte + Leiste ------ */
body.text { display:block; height:auto; }
.text main { max-width:44rem; margin:0 auto; padding:28px 18px 60px; }
.text h1 { font-size:24px; margin:0 0 6px; }
.text h2 { font-size:18px; margin:30px 0 8px; }
.text h3 { font-size:15px; margin:18px 0 4px; }
.text p, .text li { max-width:44rem; }
.text ul { padding-left:20px; }
.text li { margin:5px 0; }
.text a { color:var(--accent); }
.text dt { font-weight:600; margin-top:12px; }
.text dd { margin:2px 0 0; color:var(--muted); }
.text .kasten { background:var(--card); border:1px solid var(--line); border-radius:8px;
                padding:12px 16px; margin:16px 0; }
.text .zurueck { display:inline-block; margin-bottom:18px; }

/* --- Namens-Stimmungsbild (erklaerung.html) -------------------------------- */
#umfrage { display:block; }
#umfrage label { display:block; margin:6px 0; cursor:pointer; }
#umfrage label.frei { margin-top:12px; cursor:auto; }
#umfrage input[type=text] { display:block; margin-top:4px; width:100%; max-width:22em;
  padding:6px 8px; border:1px solid var(--line); border-radius:6px;
  background:var(--bg); color:var(--fg); font:inherit; }
#umfrage code { font-size:14px; }
.umfrage-knoepfe { display:flex; gap:14px; align-items:center; margin-top:14px; }
.balken-zeile { display:grid; grid-template-columns:minmax(9em,15em) 1fr 2.5em; gap:8px;
  align-items:center; margin:5px 0; font-size:14px; }
.balken-name { overflow-wrap:anywhere; }
.balken { background:var(--line); border-radius:4px; height:12px; }
.balken i { display:block; height:100%; background:var(--accent); border-radius:4px; }
.balken-zahl { text-align:right; color:var(--muted); }

/* --- Kartenmitte und Einstiegs-Tipp ---------------------------------------- */
/* Fadenkreuz in der Mitte, solange die Anzeige der Kartenmitte folgt: ohne das
   sieht niemand, worauf sich die rechte Spalte bezieht. */
#karte { position:relative; }
#mitte { position:absolute; left:50%; top:50%; width:28px; height:28px;
         margin:-14px 0 0 -14px; z-index:800; pointer-events:none;
         border:2px solid var(--accent); border-radius:50%; opacity:.85;
         box-shadow:0 0 0 2px #fff6, inset 0 0 0 2px #fff6; }
#mitte::before, #mitte::after { content:""; position:absolute; background:var(--accent); }
#mitte::before { left:50%; top:-10px; width:2px; height:8px; margin-left:-1px; box-shadow:0 30px var(--accent); }
#mitte::after  { top:50%; left:-10px; height:2px; width:8px; margin-top:-1px; box-shadow:30px 0 var(--accent); }
#tipp { position:absolute; z-index:800; left:50%; top:14px; transform:translateX(-50%);
        max-width:90%; pointer-events:none; background:var(--card); color:var(--fg);
        border:1px solid var(--line); border-radius:20px; padding:7px 16px;
        font-size:14px; box-shadow:0 2px 8px #0003; text-align:center; }
/* Hinweis auf der Karte: die Ergebnisse stehen rechts oder (schmal) unten */
.schmal { display:none; }
@media (max-width: 760px) { .breit { display:none; } .schmal { display:inline; } }

/* --- Schalter als Icons auf der Karte, unter den Zoom-Knoepfen -------------- */
.kartenknoepfe { display:flex; flex-direction:column; border-radius:6px; overflow:hidden;
                 box-shadow:0 1px 5px #0006; background:var(--card); }
.kartenknopf { width:34px; height:34px; padding:0; border:0; border-bottom:1px solid var(--line);
               background:var(--card); color:var(--fg); cursor:pointer;
               display:grid; place-items:center; }
.kartenknopf:last-child { border-bottom:0; }
.kartenknopf svg { width:20px; height:20px; display:block; }
.kartenknopf:hover { background:var(--line); }
.kartenknopf[aria-pressed="true"] { background:var(--accent); color:#fff; }
/* Der Ebenen-Knopf zeigt seinen Zustand im Bild (Farbkreise), nicht als Fuellung */
.kartenknopf.farbig[aria-pressed="true"] { background:var(--card); color:var(--fg); }
/* Suchknopf ist nur noch die Lupe: mehr Platz fuer das Eingabefeld */
#suche button { display:grid; place-items:center; padding:8px 12px; }
#suche button svg { width:18px; height:18px; display:block; }

/* Kopfzeile mit Anmelde-Knopf (fuehrt ins interne /intern/) */
.kopf { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.anmelden { font-size:13px; color:var(--muted); text-decoration:none; border:1px solid var(--line);
            border-radius:6px; padding:3px 9px; white-space:nowrap; }
.anmelden:hover { color:var(--accent); border-color:var(--accent); }