/* SanduTech – öffentliche Firmenkarte
   Helle Oberfläche über der Karte. Alles schwebt als abgerundete Fläche
   über dem Kartenbild: Suchleiste, Kategorien und die Liste links.
   Aufbau mit logischen Rändern (inline-start/end), damit die Seite auch
   in Sprachen stimmt, die von rechts nach links gelesen werden. */

:root{
  --blau:#1a6dff;
  --blau-dunkel:#1450c8;
  --blau-blass:#eaf1ff;
  --blau-rand:#c2d7ff;
  --text:#101828;
  --leise:#667085;
  --linie:#eaecf0;
  --grund:#ffffff;
  --rand:1px solid rgba(16,24,40,.08);
  --schatten:0 1px 2px rgba(16,24,40,.06), 0 10px 28px rgba(16,24,40,.10);
  --schatten-gross:0 2px 4px rgba(16,24,40,.05), 0 18px 44px rgba(16,24,40,.14);
  --rund:16px;
  --schrift:"Segoe UI Variable Text","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;font-family:var(--schrift);color:var(--text);background:#eef0f2;
  -webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
#karte{position:fixed;inset:0}

/* ---------------- Kopfbereich ---------------- */
.oben{position:fixed;top:calc(12px + env(safe-area-inset-top));inset-inline:12px;z-index:5;
  display:flex;align-items:flex-start;gap:10px;pointer-events:none}
.oben>*{pointer-events:auto}

.suchbox{width:404px;flex-shrink:0;height:52px;display:flex;align-items:center;gap:4px;
  padding-inline:6px 5px;background:var(--grund);border:var(--rand);border-radius:26px;box-shadow:var(--schatten);
  transition:box-shadow .18s,border-color .18s}
.suchbox:focus-within{box-shadow:var(--schatten-gross);border-color:var(--blau-rand)}
/* Der Knopf zur Startseite und daneben der Knopf fuer das Menue */
.logo{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;color:#fff;flex-shrink:0;
  background:linear-gradient(140deg,#2b8cff,#1450c8);text-decoration:none;font-size:18px;
  box-shadow:0 2px 8px rgba(26,109,255,.35);transition:transform .15s}
.logo:hover{transform:scale(1.06)}
.menueknopf{width:40px;height:40px;border-radius:14px;border:0;background:none;cursor:pointer;flex-shrink:0;
  display:grid;place-items:center;color:var(--text);transition:background .15s}
.menueknopf:hover{background:#f2f4f7}
/* Drei gezeichnete Striche – kein Zeichen aus der Symbolschrift, damit der
   Knopf auch dann sichtbar ist, wenn die Schrift fehlt oder nicht laedt. */
.striche{display:flex;flex-direction:column;justify-content:center;gap:4px;width:20px}
.striche i{display:block;height:2px;border-radius:2px;background:currentColor}
.striche i:nth-child(2){width:80%}
.menueknopf:hover .striche i:nth-child(2){width:100%;transition:width .15s}
.suchbox input{flex:1;min-width:0;border:0;outline:none;background:none;font-size:15.5px;padding-inline:10px}
.suchbox input::placeholder{color:#98a2b3}
.suchbox input::-webkit-search-cancel-button{display:none}

.symbolknopf{width:40px;height:40px;border-radius:14px;border:0;background:none;cursor:pointer;color:var(--leise);
  display:grid;place-items:center;flex-shrink:0;transition:background .15s,color .15s}
.symbolknopf[hidden]{display:none}
.symbolknopf:hover{background:#f2f4f7;color:var(--text)}
.symbolknopf.blau{color:var(--blau)}
.symbolknopf.blau:hover{background:var(--blau-blass)}
.nur-mobil{display:none;text-decoration:none;font-size:20px}

/* Kategorien */
.chips{flex:1;min-width:0;display:flex;gap:8px;overflow-x:auto;padding:7px 2px 10px;scrollbar-width:none;
  cursor:grab;scroll-behavior:smooth;overscroll-behavior-x:contain}
.chips.zieht{cursor:grabbing;scroll-behavior:auto}
.chips.zieht .chip{pointer-events:none}
.chips::-webkit-scrollbar{display:none}
.chip{height:36px;padding-inline:15px;border-radius:18px;border:var(--rand);background:var(--grund);
  box-shadow:0 1px 2px rgba(16,24,40,.06);display:flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:14px;font-weight:500;cursor:pointer;color:var(--text);
  transition:background .15s,border-color .15s,color .15s}
.chip:hover{background:#f9fafb;border-color:rgba(16,24,40,.16)}
.chip.an{background:var(--blau-blass);color:var(--blau-dunkel);border-color:var(--blau-rand)}
.chip .bi{font-size:15px;opacity:.8}

.rechts{display:flex;gap:8px;flex-shrink:0}
.knopf{height:44px;padding-inline:18px;border-radius:22px;background:var(--grund);border:var(--rand);
  box-shadow:var(--schatten);display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text);
  font-size:14px;font-weight:600;white-space:nowrap;transition:background .15s,box-shadow .15s}
.knopf:hover{background:#f9fafb;box-shadow:var(--schatten-gross)}
.knopf.blau{background:var(--blau);border-color:transparent;color:#fff;box-shadow:0 2px 10px rgba(26,109,255,.4)}
.knopf.blau:hover{background:var(--blau-dunkel)}
.knopf .bi{font-size:18px}

/* ---------------- Liste links ---------------- */
.panel{position:fixed;top:calc(86px + env(safe-area-inset-top));bottom:12px;inset-inline-start:12px;width:404px;z-index:4;
  background:var(--grund);border:var(--rand);border-radius:var(--rund);box-shadow:var(--schatten-gross);
  padding:0 0 10px;overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(calc(-100% - 20px));transition:transform .26s cubic-bezier(.22,.61,.36,1)}
[dir="rtl"] .panel{transform:translateX(calc(100% + 20px))}
.panel-offen .panel{transform:none}
.panel-zu{display:none}

.status{margin:0;padding:15px 20px 14px;color:var(--leise);font-size:13.5px;font-weight:500;
  border-bottom:1px solid var(--linie);position:sticky;top:0;background:var(--grund);z-index:1;
  border-radius:var(--rund) var(--rund) 0 0}
.status a{color:var(--blau)}
.umkreis{display:flex;align-items:center;gap:6px;width:fit-content;max-width:100%;margin-bottom:8px;
  padding:5px 6px 5px 12px;border-radius:16px;background:var(--blau-blass);color:var(--blau-dunkel);font-weight:600}
.umkreis small{color:var(--leise);font-weight:400}
.umkreis button{border:0;background:none;color:var(--blau-dunkel);width:26px;height:26px;border-radius:50%;
  cursor:pointer;display:grid;place-items:center}
.umkreis button:hover{background:var(--blau-rand)}

.liste{padding:6px}
.eintrag{width:100%;display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border:0;border-radius:12px;
  background:none;text-align:start;cursor:pointer;transition:background .14s}
.eintrag+.eintrag{margin-top:2px}
.eintrag:hover{background:#f6f8fb}
.eintrag .symbol{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;
  flex-shrink:0;font-size:16px;box-shadow:0 2px 8px rgba(16,24,40,.18)}
.eintrag .text{flex:1;min-width:0}
.eintrag b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.eintrag small{display:block;color:var(--leise);font-size:13px;margin-top:3px}
.eintrag .kurz{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sterne{color:#b45309;font-size:13px;white-space:nowrap;margin-inline-end:6px;font-weight:600}
.sterne .bi{color:#f59e0b}

/* ---------------- Firmenblatt ---------------- */
.detail{padding:6px 20px 22px}
.zurueck{border:0;background:none;color:var(--blau);display:flex;align-items:center;gap:7px;padding:10px 0;
  cursor:pointer;font-size:14px;font-weight:600}
.zurueck:hover{color:var(--blau-dunkel)}
.detail h2{margin:8px 0 5px;font-size:23px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.unterzeile{margin:3px 0;color:var(--leise);font-size:14px}
.offen{color:#067647;font-weight:600}
.zu{color:#b42318;font-weight:600}
.aktionen{display:flex;gap:10px;padding:18px 0;border-bottom:1px solid var(--linie);flex-wrap:wrap}
.aktion{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:64px;text-decoration:none;
  color:var(--blau);font-size:12px;font-weight:600}
.aktion .bi{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;border:var(--rand);
  font-size:17px;background:#fff;transition:background .15s,border-color .15s}
.aktion:hover .bi{background:var(--blau-blass);border-color:var(--blau-rand)}
.aktion.haupt .bi{background:var(--blau);color:#fff;border-color:transparent;box-shadow:0 2px 10px rgba(26,109,255,.4)}
.aktion.haupt:hover .bi{background:var(--blau-dunkel)}
.kurztext{margin:16px 0 0;font-size:14.5px;line-height:1.6}
.angaben{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--linie)}
.angaben li{display:flex;gap:16px;padding:13px 0;border-bottom:1px solid var(--linie);font-size:14px;align-items:flex-start}
.angaben .bi{color:var(--blau);font-size:17px;margin-top:1px}
.zeiten{width:100%;margin-top:14px;border-collapse:collapse;font-size:14px}
.zeiten td{padding:5px 0;color:var(--leise)}
.zeiten td:last-child{text-align:end}
.zeiten .heute td{font-weight:700;color:var(--text)}

/* ---------------- Fußzeile ---------------- */
.fusslinks{position:fixed;inset-inline-start:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:3;
  display:flex;gap:14px;font-size:12px;background:rgba(255,255,255,.92);border:var(--rand);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  padding:6px 12px;border-radius:14px;box-shadow:0 1px 2px rgba(16,24,40,.06)}
.fusslinks a{color:var(--leise);text-decoration:none}
.fusslinks a:hover{color:var(--blau)}
.panel-offen .fusslinks{inset-inline-start:432px}
.maplibregl-ctrl-bottom-left{bottom:38px}
.maplibregl-ctrl-group{border-radius:14px!important;overflow:hidden;border:var(--rand)!important;
  box-shadow:var(--schatten)!important}

button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--blau);outline-offset:2px;border-radius:12px}

/* ---------------- Telefon und Tablet ---------------- */
@media (max-width:900px){
  .oben{gap:8px;flex-wrap:wrap}
  .suchbox{width:auto;flex:1 1 100%;order:1;height:50px}
  .rechts{display:none}
  .chips{order:2;flex:1 1 100%;padding-top:0}
  .panel{top:auto;inset-inline:8px;bottom:8px;width:auto;max-height:60%;
    border-radius:20px;padding:24px 0 calc(10px + env(safe-area-inset-bottom));
    transform:translateY(calc(100% + 16px))}
  [dir="rtl"] .panel{transform:translateY(calc(100% + 16px))}
  .panel-offen .panel{transform:none}
  .status{border-radius:20px 20px 0 0}
  .panel-zu{display:block;position:absolute;top:6px;inset-inline-start:50%;transform:translateX(-50%);
    border:0;background:none;color:#98a2b3;font-size:18px;padding:2px 24px;cursor:pointer}
  .panel-offen .fusslinks{display:none}
  .fusslinks{inset-inline-start:50%;transform:translateX(-50%);white-space:nowrap}
  .knopf span{display:none}
  .nur-mobil{display:grid}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}


/* ---------------- Seitenmenü (Fassung B) ----------------
   Faehrt von der Seite herein und legt sich ueber die Karte. Oben ein
   dunkler Kopf wie im uebrigen System, darunter helle Zeilen, ganz unten
   am Rand das Rechtliche. Die Richtung folgt der Schreibrichtung. */
.menue-schatten{position:fixed;inset:0;z-index:8;background:rgba(16,24,40,.45);
  opacity:0;transition:opacity .26s;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.menue-schatten[hidden]{display:none}
.menue-offen .menue-schatten{opacity:1}

.seitenmenue{position:fixed;top:0;bottom:0;inset-inline-start:0;z-index:9;width:min(324px,86vw);
  display:flex;flex-direction:column;
  background:var(--grund);box-shadow:var(--schatten-gross);overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(-100%);transition:transform .26s cubic-bezier(.22,.61,.36,1)}
[dir="rtl"] .seitenmenue{transform:translateX(100%)}
.seitenmenue[hidden]{display:none}
.menue-offen .seitenmenue{transform:none}

/* Dunkler Kopf */
.menue-kopf{flex-shrink:0;padding:20px 18px 20px;color:#fff;
  background:linear-gradient(150deg,#12294d 0%,#0a1b31 55%,#081627 100%)}
.menue-kopf-oben{display:flex;align-items:center;justify-content:space-between;gap:10px}
.menue-marke{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff}
.menue-marke b{font-size:17.5px;font-weight:700;letter-spacing:-.02em}
.menue-marke b span{color:#5cc4ff}
.marke-zeichen{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-size:16px;
  color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22)}
.menue-zu{width:34px;height:34px;border-radius:11px;border:0;cursor:pointer;flex-shrink:0;
  display:grid;place-items:center;font-size:15px;color:#a9c4de;background:rgba(255,255,255,.08);
  transition:background .15s,color .15s}
.menue-zu:hover{background:rgba(255,255,255,.17);color:#fff}
.menue-unter{margin:13px 0 0;font-size:12.5px;line-height:1.55;color:#9db7d2}

/* Zeilen */
.seitenmenue hr{border:0;border-top:1px solid var(--linie);margin:9px 18px;flex-shrink:0}
.menue-liste{list-style:none;margin:0;padding:10px 10px 0;flex-shrink:0}
.menue-liste a{display:flex;align-items:center;gap:14px;padding:14px 13px;border-radius:12px;
  text-decoration:none;color:#344054;font-size:15px;font-weight:500;transition:background .14s}
.menue-liste a:hover{background:#f4f7fc}
.menue-liste a.an{background:#f0f5fd;color:var(--blau-dunkel);font-weight:650}
.menue-liste .bi{font-size:19px;color:var(--leise);width:20px;text-align:center;flex-shrink:0}
.menue-liste a.an .bi{color:var(--blau)}
.menue-liste .pfeil{margin-inline-start:auto;font-size:13px;color:#cbd5e1}
[dir="rtl"] .menue-liste .pfeil{transform:scaleX(-1)}

/* Sprachzeile: sichtbarer Text, darueber ein unsichtbares Auswahlfeld */
.menue-zeile{position:relative;display:flex;align-items:center;gap:14px;margin:0 10px;padding:14px 13px;
  border-radius:12px;font-size:15px;font-weight:500;color:#344054;flex-shrink:0;transition:background .14s}
.menue-zeile:hover{background:#f4f7fc}
.menue-zeile>.bi{font-size:19px;color:var(--leise);width:20px;text-align:center;flex-shrink:0}
.menue-zeile b{margin-inline-start:auto;font-weight:650;color:var(--blau);font-size:14.5px}
.menue-zeile .pfeil{margin-inline-start:0;font-size:13px;color:#cbd5e1}
.menue-zeile select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
  border:0;font:inherit;-webkit-appearance:none;appearance:none}

/* Aufruf zum Eintragen, bewusst nur umrandet */
.menue-tat{display:flex;align-items:center;justify-content:center;gap:9px;margin:4px 18px 0;height:46px;
  flex-shrink:0;border:1.5px solid var(--blau);border-radius:13px;text-decoration:none;
  color:var(--blau);font-size:14.5px;font-weight:650;transition:background .15s,color .15s}
.menue-tat:hover{background:var(--blau);color:#fff}
.menue-tat .bi{font-size:18px}

/* Rechtliches: klebt am unteren Rand */
.menue-liste.klein{margin-top:auto;padding:14px 18px calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid var(--linie);display:flex;flex-wrap:wrap;gap:6px 16px}
.menue-liste.klein a{padding:0;font-size:12px;font-weight:400;color:#98a2b3;border-radius:0}
.menue-liste.klein a:hover{background:none;color:var(--text);text-decoration:underline}