/* Darfi-Karte – mobil zuerst, Darfi-Farben (petrol/limette), Schrift wie die Webseite */
@font-face { font-family: Manrope; font-weight: 800; font-display: swap; src: url(../schrift/manrope-800.ttf); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url(../schrift/ibmplexsans-400.ttf); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url(../schrift/ibmplexsans-600.ttf); }
:root {
  --petrol: #173e3e; --tinte: #193b3d; --tinte-2: #526762; --papier: #f4f6f3; --linie: #dfe5df;
  --limette: #dcf292; --rot: #c0503f; --gelb: #d9a21b; --gruen: #3f8a68; --info: #7d9690;
  --schatten: 0 6px 24px rgba(10, 30, 30, .18), 0 1px 3px rgba(10, 30, 30, .12);
  --oben: env(safe-area-inset-top, 0px); --unten: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #eef1ec; color: var(--tinte);
  font: 15px/1.4 "IBM Plex Sans", system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
#karte { position: fixed; inset: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--petrol); }

/* Kopf: Marke + Suche */
.leiste { position: fixed; top: calc(10px + var(--oben)); left: 10px; right: 10px; z-index: 5; display: flex; gap: 8px;
  max-width: 520px; flex-wrap: wrap; }
.marke { flex: 0 0 48px; height: 48px; border-radius: 14px; background: var(--petrol); display: grid; place-items: center;
  box-shadow: var(--schatten); }
.marke svg { width: 24px; height: 30px; }
.suche { flex: 1 1 220px; min-width: 0; display: flex; height: 48px; background: #fff; border-radius: 14px; box-shadow: var(--schatten);
  overflow: hidden; }
.suche input { flex: 1; min-width: 0; border: 0; padding: 0 14px; font: inherit; font-size: 16px; color: var(--tinte); background: none; outline: none; }
.suche input::-webkit-search-cancel-button { display: none; }
.suche button { width: 48px; border: 0; background: none; display: grid; place-items: center; }
.suche svg { width: 22px; height: 22px; fill: none; stroke: var(--petrol); stroke-width: 2.2; stroke-linecap: round; }
.treffer { flex-basis: 100%; list-style: none; margin: 0; padding: 6px; background: #fff; border-radius: 14px; box-shadow: var(--schatten);
  max-height: 55vh; overflow: auto; }
.treffer button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: 10px; }
.treffer button:hover, .treffer button:focus-visible { background: var(--papier); outline: none; }
.treffer b { display: block; font-weight: 600; }
.treffer span, .treffer .still { font-size: 13px; color: var(--tinte-2); }
.treffer .still { padding: 10px 12px; }

/* Werkzeuge rechts */
.knoepfe { position: fixed; right: 10px; top: calc(112px + var(--oben)); z-index: 4; display: flex; flex-direction: column; gap: 8px; }
.rund { width: 48px; height: 48px; border-radius: 14px; border: 0; background: #fff; box-shadow: var(--schatten); display: grid; place-items: center; }
.rund svg { width: 24px; height: 24px; fill: none; stroke: var(--petrol); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rund:active { transform: scale(.96); }

/* Schnellschalter unter der Suche */
.schnell { flex-basis: 100%; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  /* Platz für die Schatten, rechts weich ausblenden statt hart abschneiden (am Handy wischbar) */
  padding: 4px 10px 12px; margin: -4px -10px -12px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 34px), transparent); }
.schnell::-webkit-scrollbar { display: none; }
.schnell button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; border: 0; height: 36px; padding: 0 14px 0 10px;
  border-radius: 99px; background: rgba(255,255,255,.96); box-shadow: 0 2px 10px rgba(10,30,30,.16); font-size: 14px; font-weight: 600; color: var(--petrol); }
.schnell button i { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.schnell .s-widmung { background: linear-gradient(135deg, #ef8a80 50%, #e9a55b 50%); }
.schnell .s-bplan { background: linear-gradient(135deg, #c500dc 50%, #ffa152 50%); }
.schnell .s-gefahren { background: linear-gradient(135deg, #e2271c 50%, #ffcf1a 50%); }
.schnell .s-natur { background: linear-gradient(135deg, #1f9d55 50%, #9fd29a 50%); }
.schnell .s-luftbild { background: linear-gradient(135deg, #6b7f4e 30%, #b8a98a 70%); }
.schnell button[aria-pressed="true"] { background: var(--petrol); color: var(--limette); }

/* Ebenen */
.ebenen { position: fixed; z-index: 6; left: 0; right: 0; bottom: 0; max-height: 72vh; overflow: auto; background: #fff;
  border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px rgba(10, 30, 30, .2); padding: 6px 16px calc(16px + var(--unten)); }
.ebenen-kopf { position: sticky; top: -6px; background: #fff; display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0 8px; font-family: Manrope, sans-serif; font-size: 18px; z-index: 1; }
.ebenen h3 { margin: 14px 0 6px; font: 800 12px Manrope, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-2); }
.ebene { border-top: 1px solid var(--linie); padding: 8px 0; }
.ebene label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; min-height: 32px; }
.ebene input { position: absolute; opacity: 0; pointer-events: none; }
.schalter { flex: 0 0 38px; height: 22px; border-radius: 99px; background: #cdd6d2; position: relative; transition: background .15s; }
.schalter::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.ebene input:checked + .schalter { background: var(--petrol); }
.ebene input:checked + .schalter::after { transform: translateX(16px); background: var(--limette); }
.ebene input:focus-visible + .schalter { outline: 2px solid var(--petrol); outline-offset: 2px; }
.legende { list-style: none; margin: 4px 0 2px 48px; padding: 0; display: none; font-size: 13px; color: var(--tinte-2); }
.ebene:has(input:checked) .legende { display: block; }
.legende li { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.legende i { flex: 0 0 18px; height: 12px; border-radius: 3px; display: inline-block; }
.deckkraft { display: flex; align-items: center; gap: 12px; padding: 14px 0 4px; border-top: 1px solid var(--linie); margin-top: 8px; font-weight: 600; }
.deckkraft input { flex: 1; accent-color: var(--petrol); }
.zu { border: 0; background: var(--papier); width: 34px; height: 34px; border-radius: 50%; font-size: 22px; line-height: 1; color: var(--tinte-2); }

/* Blatt „Was gilt hier?“ */
.blatt { position: fixed; z-index: 6; left: 0; right: 0; bottom: 0; max-height: 58vh; overflow: auto; background: #fff;
  border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px rgba(10, 30, 30, .22); padding: 8px 18px calc(18px + var(--unten));
  animation: rein .22s ease-out; }
@keyframes rein { from { transform: translateY(30px); opacity: 0; } }
.griff { width: 40px; height: 5px; border-radius: 9px; background: #d5dcd8; margin: 2px auto 6px; }
.blatt > .zu { position: absolute; right: 12px; top: 12px; }
.kopfzeile h2 { margin: 0; font: 800 30px/1.1 Manrope, sans-serif; color: var(--petrol); letter-spacing: -.01em; }
.ueber { margin: 6px 0 2px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-2); }
.unter { margin: 4px 0 0; color: var(--tinte-2); }
.aktionen { display: flex; gap: 8px; margin: 14px 0 6px; flex-wrap: wrap; }
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 12px; border: 0;
  background: var(--petrol); color: var(--limette); font-weight: 600; text-decoration: none; }
.knopf.leise { background: var(--papier); color: var(--petrol); }
.blatt h3 { margin: 18px 0 6px; font: 800 12px Manrope, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-2); }
.zeilen { list-style: none; margin: 0; padding: 0; }
.z { display: flex; gap: 12px; padding: 9px 0; border-top: 1px solid var(--linie); }
.z:first-child { border-top: 0; }
.z i { flex: 0 0 14px; height: 14px; margin-top: 3px; border-radius: 4px; background: var(--info); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.z.rot i { background: var(--rot); border-radius: 50%; }
.z.gelb i { background: var(--gelb); border-radius: 50%; }
.z.gruen i { background: var(--gruen); border-radius: 50%; }
.z.info i { background: var(--info); border-radius: 50%; }
.z b { display: block; font-weight: 600; }
.z span { display: block; font-size: 13px; color: var(--tinte-2); }
.z a { font-size: 13px; }
.fein { font-size: 12px; color: var(--tinte-2); margin: 16px 0 0; }
.fein.warnung { color: #8a5a00; }
.knopf.gross { flex: 1 1 auto; }
/* „Alle Infos“ immer erreichbar, auch wenn das Blatt scrollt */
.blatt .aktionen { position: sticky; bottom: calc(-18px - var(--unten)); z-index: 1; background: #fff; margin: 12px -18px 0;
  padding: 10px 18px calc(12px + var(--unten)); box-shadow: 0 -10px 14px -12px rgba(10, 30, 30, .35); }
.blatt .laedt + .aktionen { box-shadow: none; }
.ampel-zeile { display: flex; gap: 6px; margin: 12px 0 2px; flex-wrap: wrap; }
.pille { font-size: 13px; font-weight: 600; padding: 3px 10px 3px 8px; border-radius: 99px; display: inline-flex; align-items: center; gap: 6px; }
.pille::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.pille.rot { background: #f8e1dd; color: #a33a2b; }
.pille.gelb { background: #fbefcf; color: #8a5a00; }
.pille.gruen { background: #e2f0e8; color: #2f6f52; }
.fakten { display: grid; gap: 8px; margin: 12px 0 4px; }
.fakt { background: var(--papier); border-radius: 12px; padding: 10px 12px; }
.fakt > span { display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tinte-2); }
.fakt b { display: flex; gap: 8px; align-items: baseline; font-weight: 600; margin-top: 3px; }
.fakt b i { flex: 0 0 12px; height: 12px; border-radius: 3px; transform: translateY(1px); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.fakt small { display: block; font-size: 13px; color: var(--tinte-2); margin-top: 3px; }
.fakt small em { font-style: normal; color: var(--tinte); }
.laedt { display: grid; gap: 8px; margin: 14px 0; }
.laedt span { height: 44px; border-radius: 12px; background: linear-gradient(90deg, #eef2ee 0%, #f8faf7 50%, #eef2ee 100%); background-size: 200% 100%; animation: schimmer 1.1s linear infinite; }
.laedt span:nth-child(2) { height: 60px; } .laedt span:nth-child(3) { width: 70%; }
@keyframes schimmer { to { background-position: -200% 0; } }

/* Quelle immer sichtbar */
.quelle { position: fixed; z-index: 2; left: 0; right: 0; bottom: 0; padding: 3px 10px calc(3px + var(--unten)); font-size: 10.5px;
  color: #3b4f4b; background: rgba(255,255,255,.82); backdrop-filter: blur(4px); text-align: center; line-height: 1.35; }
.quelle a { color: inherit; }
.maplibregl-ctrl-bottom-right, .maplibregl-ctrl-bottom-left { bottom: calc(36px + var(--unten)); }
.maplibregl-ctrl-bottom-left { display: none; }
.maplibregl-ctrl-bottom-right { display: none; }
.maplibregl-ctrl-scale { border-color: var(--petrol); color: var(--petrol); background: rgba(255,255,255,.7); }
.ich { width: 18px; height: 18px; border-radius: 50%; background: #2a6bd1; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(42,107,209,.25); }
.hinweis-fehlt { position: fixed; z-index: 9; top: 40%; left: 50%; transform: translate(-50%, -50%); background: #fff; padding: 16px 20px;
  border-radius: 14px; box-shadow: var(--schatten); }
[hidden] { display: none !important; }
/* Handy: kompaktes Grundstücks-Blatt – höchstens ~⅓ des Bildschirms, nicht scrollbar, je Thema eine Zeile */
.kurz { display: grid; gap: 7px; margin-top: 10px; }
.kz { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; }
.kz i { flex: 0 0 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.kz .pille { flex: 0 0 auto; }
.kz-art { flex: 0 0 74px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tinte-2); }
.kz b, .kz-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kz b { font-weight: 600; }
.kz-text { font-size: 13px; color: var(--tinte-2); }
@media (max-width: 899px) {
  .blatt.kompakt { max-height: none; overflow: hidden; padding: 4px 16px calc(12px + var(--unten)); }
  .blatt.kompakt .griff { margin-bottom: 2px; }
  .blatt.kompakt > .zu { top: 8px; width: 32px; height: 32px; }
  .blatt.kompakt .ueber { margin-top: 2px; font-size: 11px; }
  .blatt.kompakt .kopfzeile h2 { font-size: 22px; padding-right: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .blatt.kompakt .unter { margin-top: 2px; font-size: 13.5px; }
  .blatt.kompakt .aktionen { position: static; box-shadow: none; margin: 12px 0 0; padding: 0; }
  .blatt.kompakt .knopf { min-height: 46px; }
  .blatt.kompakt .laedt { margin: 10px 0 0; gap: 7px; }
  .blatt.kompakt .laedt span { height: 18px; }
}
/* in der Darfi-App eingebettet: die App hält selbst Abstand zu Statusleiste und Navigation */
:root.in-app { --oben: 0px; --unten: 0px; }
.in-app .marke, .in-app #teilen { display: none !important; }

/* Breit: Seitenleisten statt Blätter */
@media (min-width: 900px) {
  .leiste { left: 16px; top: 16px; width: min(600px, calc(100vw - 110px)); max-width: none; }
  .knoepfe { right: 16px; top: 16px; }
  .schnell { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .ebenen { left: auto; right: 76px; top: 16px; bottom: auto; width: 340px; max-height: calc(100vh - 80px); border-radius: 18px; box-shadow: var(--schatten); }
  .blatt { left: 16px; right: auto; top: 120px; bottom: auto; width: 400px; max-height: calc(100vh - 160px); border-radius: 18px; box-shadow: var(--schatten); }
  .griff { display: none; }
  .maplibregl-ctrl-bottom-right, .maplibregl-ctrl-bottom-left { display: block; bottom: 24px; }
  .maplibregl-ctrl-bottom-right { bottom: 80px; }
}