/* SPDX-License-Identifier: BSD-3-Clause */
/* Gemeinsames Aussehen von Karte (index.html) und Erklaerung (erklaerung.html). */

/* Diese acht Variablen sind die vereinbarte Oberflaeche nach aussen: wer die
   Karte einbettet und sein eigenes Aussehen darueberlegt, setzt sie in einem
   zusaetzlichen Stylesheet neu und muss unser Markup nicht kennen. Sie werden
   nicht stillschweigend umbenannt. Fuer das Markup selbst gilt das
   ausdruecklich nicht, das darf sich aendern.
     --bg      Hintergrund der Seite
     --fg      Textfarbe
     --muted   Nebentext
     --line    Linien und Rahmen
     --accent  Akzent (Knopf, Hervorhebung)
     --card    Hintergrund von Kaesten und Eingabefeldern
     --schrift Schriftfamilie
     --spalte  Breite der rechten Spalte                                    */
  :root { --bg:#f6f5f2; --fg:#1d1d1b; --muted:#6b6a66; --line:#dddbd5; --accent:#c8007a; --card:#fff;
          --schrift: system-ui, sans-serif; --spalte: 380px; }
  @media (prefers-color-scheme: dark) {
    :root { --bg:#1b1b1a; --fg:#ecebe7; --muted:#a3a19b; --line:#3a3936; --accent:#ff5cb8; --card:#242422; }
  }
  * { box-sizing: border-box; }
  /* Verweise durchgehend in der Akzentfarbe, besuchte eingeschlossen. Ohne
     diese Regel greift die Vorgabe des Browsers, und besuchte Links sind dann
     ein dunkles Violett, das im Dunkelmodus kaum vom Hintergrund abhebt
     (adorfer 23.09.2026). Spezifischere Regeln weiter unten gehen vor. */
  a, a:visited { color: var(--accent); }
  body { margin:0; font:15px/1.45 var(--schrift); background:var(--bg); color:var(--fg);
         display:grid; grid-template-columns: 1fr var(--spalte); 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 var(--schrift); 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) {
    /* Karte 63 statt 55 % der Hoehe: vorher fast quadratisch, jetzt etwa 18 %
       hoeher als breit (adorfer 16.10.2026) */
    body { grid-template-columns: 1fr; grid-template-rows: 63vh auto; height:auto; }
    #karte { height:63vh; } aside { border-left:none; border-top:1px solid var(--line); }
    /* schwebender Infokasten: engerer Zeilenabstand (adorfer 16.10.2026) */
    .info { line-height:1.15; padding:4px 8px; }
    /* Leiste unter der Karte: vertikale Abstaende halbiert, damit beim Lesen
       der Ergebnisse mehr Karte im Blick bleibt (adorfer 15.10.2026).
       Suchfeld und Knopf behalten ihre Hoehe, sie muessen tippbar bleiben. */
    aside { padding:9px 18px 20px; line-height:1.22; }
    h1 { margin:0 0 2px; }
    .sub { margin:0 0 7px; }
    #suche { margin-bottom:4px; }
    #ergebnis > .hinweis { margin:6px 0; }
    .karte { padding:6px 14px; margin:5px 0; }
    .karte h2 { margin:0 0 2px; }
    .karte .meta { margin-bottom:3px; }
  }

/* --- 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; }
/* Die vier Striche liegen in zwei Pseudoelementen, die beide ueber demselben
   44er Quadrat sitzen: senkrechtes Paar oben und unten, waagerechtes links und
   rechts. Jeder Strich ist 6 lang und haelt 2 Abstand zum Kreis. Frueher
   entstanden die Gegenstriche als Schatten mit festem Versatz, das war in
   verschiedenen Browsern unterschiedlich weit vom Ring entfernt
   (adorfer 23.09.2026). Hier ist jede Kante aus der Mitte gerechnet. */
#mitte::before, #mitte::after {
  content:""; position:absolute; left:50%; top:50%; width:44px; height:44px;
  margin:-22px 0 0 -22px; }
#mitte::before {
  background: linear-gradient(var(--accent), var(--accent)) center top   /2px 6px no-repeat,
              linear-gradient(var(--accent), var(--accent)) center bottom/2px 6px no-repeat; }
#mitte::after {
  background: linear-gradient(var(--accent), var(--accent)) left  center/6px 2px no-repeat,
              linear-gradient(var(--accent), var(--accent)) right center/6px 2px no-repeat; }
#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); }
/* Deutsche OSM-Ebene ist eine Vollfarbkarte: entsaettigt tritt sie unter die
   Community-Flaechen zurueck, bleibt aber lesbar. */
.blass { filter: saturate(.25) brightness(1.16) contrast(.9); }

/* --- Dunkelmodus --------------------------------------------------------- */
/* Die Bedienelemente folgen schon oben den Variablen; hier kommt die Karte
   selbst dazu. Es gibt keine dunklen Kacheln bei uns im Zwischenspeicher, und
   eine zweite Kachelquelle waere eine zweite fremde Abhaengigkeit. Deshalb
   derselbe Kniff, den meshviewer nebenan fährt: die helle Karte wird
   umgekehrt und der Farbkreis zurueckgedreht, dann bleiben Wasser blau und
   Waelder gruen, statt in die Gegenfarbe zu kippen.
   Gefiltert wird nur die Kachelebene. Unsere eigenen Flaechen, das Raster und
   die Marker liegen in anderen Ebenen und behalten ihre Farben. */
@media (prefers-color-scheme: dark) {
  .leaflet-container { background: #14140f; }
  .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.93) contrast(.92); }
  /* Auf dunklem Grund wirken die Community-Farben flauer als auf hellem,
     deshalb eine Spur mehr Sättigung und Helligkeit. Bewusst zurueckhaltend:
     die Abstufung der Gebietsstufen soll erkennbar bleiben. */
  /* Die Flaechen liegen seit dem 26.09.2026 in einer eigenen Ebene
     (leaflet-gebiete-pane) und brauchen dieselbe Anhebung. */
  .leaflet-overlay-pane, .leaflet-gebiete-pane { filter: saturate(1.12) brightness(1.1); }
  /* Leaflets eigene Bedienelemente bringen helle Vorgaben mit. */
  .leaflet-bar a, .leaflet-bar a:hover {
    background: var(--card); color: var(--fg); border-bottom-color: var(--line); }
  .leaflet-bar a.leaflet-disabled { background: var(--bg); color: var(--muted); }
  .leaflet-control-attribution {
    background: #0009; color: var(--muted); }
  .leaflet-control-attribution a { color: var(--fg); }
}