/* Digitale Visitenkarte andisa.ch/business-card (src/seiten-karte.mjs).
   Gestaltung «Kompakt» wie tannerumzuege.ch/karte (Besim, 22.10.2026): alles Wichtige auf
   einem Bildschirm. Oben Weiss mit schwarzer Schrift (Besim, 22.10.2026: «bitte weisser
   Background und schwarze Schrift», vorher Tiefrot), darunter vier Handlungen und
   «Kontakt speichern». Zeiten, Standort, Leistungen und Teilen öffnen sich von unten.
   Farben aus src/stil.css: Tinte auf Weiss 18.9:1, Tiefrot auf Weiss 6.4:1, Grau auf Kalk 5.4:1. */
:root{
  --akzent:#b81715;--auf-akzent:#ffffff;
  --grund:#ffffff;--blatt:#fbf9f5;--flaeche:#efe9df;--linie:#ded5c6;
  --text:#17110f;--leise:#6b615b;--symbol:#b81715;
  --dunkel:#17110f;--auf-dunkel:#fbf9f5;
  --speichern:#b81715;--auf-speichern:#ffffff;
  --offen:#2e9e5b;--zu:#c9861a;--fokus:#17110f;
  --schrift:Inter,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --titel:"Inter Tight",Inter,"Segoe UI",system-ui,-apple-system,Arial,sans-serif
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--text);font-family:var(--schrift);-webkit-font-smoothing:antialiased}
a{color:inherit}
img,svg{display:block}
button{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--fokus);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung{position:absolute;left:12px;top:-80px;z-index:99;padding:10px 14px;border-radius:10px;background:var(--dunkel);color:var(--auf-dunkel);font-weight:600}
.sprung:focus{top:12px}

.vk{display:flex;flex-direction:column;min-height:100svh;max-width:520px;margin:0 auto}
/* Oben eingemittet, waagrecht und senkrecht (Besim, 22.10.2026: «schön einmitten», Schrift dezenter) */
.oben{display:flex;flex:1;flex-direction:column;align-items:center;padding:calc(16px + env(safe-area-inset-top)) 20px 24px;
  color:var(--text);text-align:center}
.oben__leiste{display:flex;align-items:center;gap:8px;align-self:stretch}
.oben__ort{flex:1;font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--leise)}
.rund{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--flaeche);color:var(--text);cursor:pointer}
.rund svg{width:18px;height:18px}
.name{margin:auto 0 0;padding-top:28px}
.name svg{width:min(64vw,260px);height:auto}
.gewerke{margin:24px 0 0;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--leise)}
.zeile{max-width:22ch;margin:14px 0 0;font-family:var(--titel);font-size:clamp(18px,5vw,21px);font-weight:500;line-height:1.25;
  letter-spacing:-.01em;text-wrap:balance}
.status{display:flex;align-items:center;justify-content:center;gap:7px;margin:20px 0 0;font-size:13.5px;font-weight:500}
.status::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
.status.ist-offen::before{background:var(--offen)}
.offerte{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:26px 0 auto;padding:0 18px;
  border-radius:12px;box-shadow:inset 0 0 0 1.5px currentColor;font-size:14.5px;font-weight:600;text-decoration:none}
.offerte svg{width:16px;height:16px}
.unten{padding:16px 16px calc(14px + env(safe-area-inset-bottom));border-radius:26px 26px 0 0;background:var(--blatt);
  box-shadow:0 -1px 0 var(--linie),0 -10px 28px rgba(23,17,15,.05)}
.raster{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.raster a{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 16px;border-radius:14px;background:var(--flaeche);
  font-size:14.5px;font-weight:500;text-decoration:none}
.raster a:first-child{background:var(--dunkel);color:var(--auf-dunkel)}
.raster svg{width:19px;height:19px;flex:none}
.raster a:not(:first-child) svg{color:var(--symbol)}
.speichern{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;margin-top:10px;border-radius:14px;
  background:var(--speichern);color:var(--auf-speichern);font-size:15px;font-weight:600;text-decoration:none}
.speichern svg{width:18px;height:18px}
.speichern-hinweis{margin:8px 6px 0;font-size:12.5px;line-height:1.4;text-align:center;color:var(--leise)}
.speichern-hinweis[hidden]{display:none}
.fuss{margin:6px 0 0;padding-top:10px;border-top:1px solid var(--linie);font-size:11.5px;line-height:1.6;text-align:center;color:var(--leise)}
.fuss a{color:inherit;text-underline-offset:2px}
.mehr{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:10px}
.mehr button{display:grid;justify-items:center;gap:4px;min-height:56px;padding:6px 2px;border:0;border-radius:14px;background:none;
  font-size:12px;font-weight:500;cursor:pointer}
.mehr svg{width:20px;height:20px;color:var(--symbol)}

/* Ebenen — öffnen sich von unten */
.ebene{width:100%;max-width:520px;max-height:88svh;margin:auto auto 0;padding:0;border:0;border-radius:24px 24px 0 0;
  background:var(--blatt);color:var(--text);overflow:auto}
.ebene::backdrop{background:rgba(23,17,15,.42)}
.ebene[open]{animation:hoch .26s cubic-bezier(.23,1,.32,1)}
@keyframes hoch{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.ebene__kopf{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:14px 14px 6px 20px;background:var(--blatt)}
.ebene__kopf h2{margin:0;font-family:var(--titel);font-size:20px;font-weight:600;letter-spacing:-.01em}
.zu{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--flaeche);cursor:pointer}
.zu svg{width:18px;height:18px}
.ebene__inhalt{padding:0 20px calc(22px + env(safe-area-inset-bottom))}
.ebene__status{display:flex;align-items:center;gap:8px;margin:2px 0 10px;font-size:14.5px;font-weight:500}
.ebene__status::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:#b5ada3}
.ebene__status.ist-offen::before{background:var(--offen)}
.ebene__status.ist-zu::before{background:var(--zu)}
.tag{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--linie);font-size:15px}
.tag span{color:var(--leise)}
.tag b{font-weight:500;font-variant-numeric:tabular-nums}
.tag.ist-heute span{color:var(--text);font-weight:600}
.tag.ist-heute span::after{content:" · heute";font-weight:400;color:var(--leise)}
.ort{padding:12px 0;border-top:1px solid var(--linie)}
.ort b{display:block;font-size:15.5px;font-weight:600}
.ort p{margin:2px 0 8px;font-size:14px;color:var(--leise)}
.paar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.paar a,.paar button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:0 8px;border:0;border-radius:12px;
  background:var(--flaeche);font-size:14px;font-weight:500;text-align:center;text-decoration:none;cursor:pointer}
.paar svg{width:17px;height:17px;flex:none;color:var(--symbol)}
.paar .paar__akzent{background:var(--akzent);color:var(--auf-akzent);font-weight:600}
.paar .paar__akzent svg{color:inherit}
.leistungen{list-style:none;margin:0 0 6px;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
.leistungen li{display:flex;align-items:center;min-height:48px;border-top:1px solid var(--linie);font-size:14.5px;line-height:1.25}
.zusagen{margin:4px 0 14px;padding:0;list-style:none;font-size:13.5px;line-height:1.5;color:var(--leise)}
.zusagen li{padding:3px 0 3px 18px;position:relative}
.zusagen li::before{content:"";position:absolute;left:2px;top:.72em;width:7px;height:7px;border-radius:2px;background:var(--akzent)}
.qr{width:180px;height:180px;margin:4px auto 8px}
.qr svg{width:100%;height:100%}
.permalink{margin:0 0 14px;font-size:14px;font-weight:500;letter-spacing:.01em;text-align:center;user-select:all}
.klein{margin:14px 0 0;font-size:12px;line-height:1.7;color:var(--leise)}
.klein a{color:inherit}
.meldung{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;
  padding:10px 16px;border-radius:10px;background:var(--dunkel);color:var(--auf-dunkel);font-size:14px;font-weight:500}
.meldung[hidden]{display:none}

@media (hover:hover){
  .mehr button:hover{background:var(--flaeche)}
  .speichern:hover,.raster a:hover,.paar a:hover,.paar button:hover,.offerte:hover,.rund:hover{filter:brightness(.95)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}