/* Scin-App — iOS-Look: Systemschrift in Standardgrößen, Erode nur für die Marke. */
@font-face{font-family:"Erode";font-style:normal;font-weight:300 700;font-display:swap;
  src:url(erode.woff2) format("woff2")}
/* Farben, Maße, Schriften und Zeiten stehen in design/tokens.css — dort
   und nur dort. Diese Datei benutzt sie, legt sie aber nicht mehr fest. */

/* Überall dort, wo eine Ebene über dem Inhalt schwebt */
.glas{background:var(--glas);
  -webkit-backdrop-filter:var(--unschaerfe);backdrop-filter:var(--unschaerfe);
  border:.5px solid var(--glas-kante);
  box-shadow:var(--glas-schatten),var(--glas-innen)}
*{box-sizing:border-box}
/* Die Seite steht fest: kein seitliches Verschieben, egal was überbreit ist */
html,body{margin:0;width:100%;max-width:100%;overflow-x:hidden;overscroll-behavior-x:none}
body{background:var(--bg);color:var(--ink);
  font-family:var(--schrift);
  font-weight:400;font-size:17px;line-height:1.41;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* Alles, was die Marke trägt, bleibt Erode */
.nav-marke,.login-marke,.rund,.profil-gross,.nav-menue-kopf b,.marke{
  font-family:var(--marke-schrift);letter-spacing:normal}
/* Die Wortmarke oben links ist jetzt das App-Zeichen */
.nav-marke{display:inline-flex;align-items:center;flex:none;color:var(--ink)}
.nav-marke svg{width:27px;height:27px;display:block}

/* ---------- Kopfleiste: 1:1 wie auf scin.cc — weiß, scin links, Plus rechts.
     Beim Öffnen klappt das Profil links neben dem Plus aus. ---------- */
/* padding-top gehört zwingend zu black-translucent: die Statusleiste
   reserviert sich selbst keinen Platz mehr, das muss die App tun. */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;
  /* 14px statt 10: erst damit haben Plus und Profilbild je 44px Tippfläche,
     ohne sich gegenseitig etwas wegzunehmen. */
  gap:14px;padding:calc(16px + env(safe-area-inset-top)) 22px 10px;line-height:1;
  background:var(--glas);
  -webkit-backdrop-filter:var(--unschaerfe);backdrop-filter:var(--unschaerfe);
  border-bottom:.5px solid var(--glas-kante)}
.nav-marke{color:var(--ink);margin-right:auto}
@media (max-width:700px){
  .nav{padding:calc(10px + env(safe-area-inset-top)) 16px 8px}}

/* Runder Glas-Knopf oben rechts (Seiten-Aktionen, „mehr Infos“) */
.kopf-knopf{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;flex:none;border:0;padding:0;cursor:pointer;
  background:var(--bg-elevated);color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.10);
  -webkit-tap-highlight-color:transparent;transition:transform .15s}
.kopf-knopf:active{transform:scale(.92)}
.kopf-knopf svg{width:19px;height:19px}
.rund,.profil-gross{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;overflow:hidden;flex:none;
  background:var(--tint);color:var(--tint-on);font-size:13px;font-weight:700}
.rund img,.profil-gross img{width:100%;height:100%;object-fit:cover;display:block}
.profil-gross{width:64px;height:64px;font-size:26px}
.rund.gross{width:40px;height:40px;font-size:17px}

/* Profil-Knopf oben rechts + persoenliches Menue */
.nav-profil{border:0;background:none;padding:0;margin:0;cursor:pointer;
  display:inline-flex;-webkit-tap-highlight-color:transparent;transition:transform .15s}
.nav-profil:active{transform:scale(.94)}
.nav-menue{position:fixed;top:calc(60px + env(safe-area-inset-top));right:16px;z-index:72;min-width:238px;
  border-radius:20px;padding:8px;
  transform-origin:top right;animation:menue-auf .18s cubic-bezier(.2,.7,.3,1)}
.nav-menue[hidden]{display:none}
@media (max-width:700px){.nav-menue{top:52px;right:12px}}
@keyframes menue-auf{from{opacity:0;transform:scale(.92) translateY(-6px)}
  to{opacity:1;transform:none}}
.nav-menue-kopf{display:flex;align-items:center;gap:11px;padding:8px 10px 12px;
  border-bottom:1px solid var(--line);margin-bottom:6px}
.nav-menue-kopf b{display:block;font-size:17px;font-weight:700;line-height:1.2}
.nav-menue-kopf span{display:block;font-size:13px;color:var(--leise)}
.nav-menue a{display:block;padding:11px 10px;border-radius:12px;
  font-size:17px;font-weight:400}
.nav-menue a:hover{background:var(--fuell)}
.nav-menue form{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.nav-menue-abmelden{display:block;width:100%;text-align:left;border:0;background:none;
  font:inherit;font-size:14.5px;font-weight:600;color:var(--rot);
  padding:10px 10px;border-radius:10px;cursor:pointer}
.nav-menue-abmelden:hover{background:var(--fuell)}

/* Plus/Kreuz: 1:1 von scin.cc - zwei Zustände aus einer Form, gedreht um 45 Grad */
.nav-plus{display:none;position:relative;width:20px;height:20px;flex:none;
  border:0;background:none;padding:0;margin:0;cursor:pointer;color:var(--ink);
  transition:color .25s ease,transform .32s cubic-bezier(.4,0,.2,1);
  -webkit-tap-highlight-color:transparent}
@media (hover:hover){.nav-plus:hover{color:var(--leise)}}
.nav-plus::after{content:"";position:absolute;inset:-11px}
.plus-bild{position:absolute;inset:0;background:currentColor;-webkit-mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MCA2MCIgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iPjxkZWZzPjxjbGlwUGF0aCBpZD0iayI+PHBhdGggZD0iTTIwIDBoMjB2MjBoMjB2MjBINDB2MjBIMjBWNDBIMFYyMGgyMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48ZyBjbGlwLXBhdGg9InVybCgjaykiIGZpbGw9IiMwMDAiPjxyZWN0IHg9Ii0wLjQ2IiB5PSIwIiB3aWR0aD0iMC45MSIgaGVpZ2h0PSI2MCIvPjxyZWN0IHg9IjAiIHk9Ii0wLjQ2IiB3aWR0aD0iNjAiIGhlaWdodD0iMC45MSIvPjxyZWN0IHg9IjMuNTkiIHk9IjAiIHdpZHRoPSIwLjgzIiBoZWlnaHQ9IjYwIi8+PHJlY3QgeD0iMCIgeT0iMy41OSIgd2lkdGg9IjYwIiBoZWlnaHQ9IjAuODMiLz48cmVjdCB4PSI3LjQ2IiB5PSIwIiB3aWR0aD0iMS4wOCIgaGVpZ2h0PSI2MCIvPjxyZWN0IHg9IjAiIHk9IjcuNDYiIHdpZHRoPSI2MCIgaGVpZ2h0PSIxLjA4Ii8+PHJlY3QgeD0iMTEuNjEiIHk9IjAiIHdpZHRoPSIwLjc5IiBoZWlnaHQ9IjYwIi8+PHJlY3QgeD0iMCIgeT0iMTEuNjEiIHdpZHRoPSI2MCIgaGVpZ2h0PSIwLjc5Ii8+PHJlY3QgeD0iMTUuNDkiIHk9IjAiIHdpZHRoPSIxLjAyIiBoZWlnaHQ9IjYwIi8+PHJlY3QgeD0iMCIgeT0iMTUuNDkiIHdpZHRoPSI2MCIgaGVpZ2h0PSIxLjAyIi8+PHJlY3QgeD0iMTkuNTMiIHk9IjAiIHdpZHRoPSIwLjkzIiBoZWlnaHQ9IjYwIi8+PHJlY3QgeD0iMCIgeT0iMTkuNTMiIHdpZHRoPSI2MCIgaGVpZ2h0PSIwLjkzIi8+PHJlY3QgeD0iMjMuNjEiIHk9IjAiIHdpZHRoPSIwLjc4IiBoZWlnaHQ9IjYwIi8+PHJlY3QgeD0iMCIgeT0iMjMuNjEiIHdpZHRoPSI2MCIgaGVpZ2h0PSIwLjc4Ii8+PHJlY3QgeD0iMjcuNTAiIHk9IjAiIHdpZHRoPSIxLjAwIiBoZWlnaHQ9IjYwIi8+PHJlY3QgeD0iMCIgeT0iMjcuNTAiIHdpZHRoPSI2MCIgaGVpZ2h0PSIxLjAwIi8+PHJlY3QgeD0iMzEuNjIiIHk9IjAiIHdpZHRoPSIwLjc3IiBoZWlnaHQ9IjYwIi8+PHJlY3QgeD0iMCIgeT0iMzEuNjIiIHdpZHRoPSI2MCIgaGVpZ2h0PSIwLjc3Ii8+PHJlY3QgeD0iMzUuNTIiIHk9IjAiIHdpZHRoPSIwLjk3IiBoZWlnaHQ9IjYwIi8+PHJlY3QgeD0iMCIgeT0iMzUuNTIiIHdpZHRoPSI2MCIgaGVpZ2h0PSIwLjk3Ii8+PHJlY3QgeD0iMzkuNjEiIHk9IjAiIHdpZHRoPSIwLjc4IiBoZWlnaHQ9IjYwIi8+PHJlY3QgeD0iMCIgeT0iMzkuNjEiIHdpZHRoPSI2MCIgaGVpZ2h0PSIwLjc4Ii8+PHJlY3QgeD0iNDMuNjAiIHk9IjAiIHdpZHRoPSIwLjgwIiBoZWlnaHQ9IjYwIi8+PHJlY3QgeD0iMCIgeT0iNDMuNjAiIHdpZHRoPSI2MCIgaGVpZ2h0PSIwLjgwIi8+PHJlY3QgeD0iNDcuNTIiIHk9IjAiIHdpZHRoPSIwLjk2IiBoZWlnaHQ9IjYwIi8+PHJlY3QgeD0iMCIgeT0iNDcuNTIiIHdpZHRoPSI2MCIgaGVpZ2h0PSIwLjk2Ii8+PHJlY3QgeD0iNTEuNDIiIHk9IjAiIHdpZHRoPSIxLjE2IiBoZWlnaHQ9IjYwIi8+PHJlY3QgeD0iMCIgeT0iNTEuNDIiIHdpZHRoPSI2MCIgaGVpZ2h0PSIxLjE2Ii8+PHJlY3QgeD0iNTUuNTkiIHk9IjAiIHdpZHRoPSIwLjgxIiBoZWlnaHQ9IjYwIi8+PHJlY3QgeD0iMCIgeT0iNTUuNTkiIHdpZHRoPSI2MCIgaGVpZ2h0PSIwLjgxIi8+PHJlY3QgeD0iNTkuNTciIHk9IjAiIHdpZHRoPSIwLjg2IiBoZWlnaHQ9IjYwIi8+PHJlY3QgeD0iMCIgeT0iNTkuNTciIHdpZHRoPSI2MCIgaGVpZ2h0PSIwLjg2Ii8+PHJlY3QgeD0iLTAuOTIiIHk9Ii0wLjc5IiB3aWR0aD0iMS45NSIgaGVpZ2h0PSIxLjk1IiByeD0iLjQiLz48cmVjdCB4PSItMC44NiIgeT0iMy4zOCIgd2lkdGg9IjEuNjMiIGhlaWdodD0iMS42MyIgcng9Ii40Ii8+PHJlY3QgeD0iLTAuNzAiIHk9IjcuMDciIHdpZHRoPSIxLjY5IiBoZWlnaHQ9IjEuNjkiIHJ4PSIuNCIvPjxyZWN0IHg9Ii0xLjIwIiB5PSIxMC44OCIgd2lkdGg9IjIuMDkiIGhlaWdodD0iMi4wOSIgcng9Ii40Ii8+PHJlY3QgeD0iLTEuMTIiIHk9IjE1LjA0IiB3aWR0aD0iMS45OCIgaGVpZ2h0PSIxLjk4IiByeD0iLjQiLz48cmVjdCB4PSItMC44NyIgeT0iMTkuMjAiIHdpZHRoPSIxLjY0IiBoZWlnaHQ9IjEuNjQiIHJ4PSIuNCIvPjxyZWN0IHg9Ii0xLjE4IiB5PSIyMi44OCIgd2lkdGg9IjIuMDEiIGhlaWdodD0iMi4wMSIgcng9Ii40Ii8+PHJlY3QgeD0iLTEuMDAiIHk9IjI2Ljk1IiB3aWR0aD0iMS45NSIgaGVpZ2h0PSIxLjk1IiByeD0iLjQiLz48cmVjdCB4PSItMS4wNiIgeT0iMzAuODgiIHdpZHRoPSIyLjA4IiBoZWlnaHQ9IjIuMDgiIHJ4PSIuNCIvPjxyZWN0IHg9Ii0wLjg5IiB5PSIzNC45MyIgd2lkdGg9IjEuOTQiIGhlaWdodD0iMS45NCIgcng9Ii40Ii8+PHJlY3QgeD0iLTEuMDEiIHk9IjM5LjEzIiB3aWR0aD0iMi4wNCIgaGVpZ2h0PSIyLjA0IiByeD0iLjQiLz48cmVjdCB4PSItMC45MiIgeT0iNDMuMzYiIHdpZHRoPSIxLjY3IiBoZWlnaHQ9IjEuNjciIHJ4PSIuNCIvPjxyZWN0IHg9Ii0wLjg4IiB5PSI0Ny4yNiIgd2lkdGg9IjEuNjkiIGhlaWdodD0iMS42OSIgcng9Ii40Ii8+PHJlY3QgeD0iLTEuMDAiIHk9IjUwLjgyIiB3aWR0aD0iMi4wMCIgaGVpZ2h0PSIyLjAwIiByeD0iLjQiLz48cmVjdCB4PSItMC45NiIgeT0iNTQuOTciIHdpZHRoPSIyLjEzIiBoZWlnaHQ9IjIuMTMiIHJ4PSIuNCIvPjxyZWN0IHg9Ii0xLjA1IiB5PSI1OS4xMCIgd2lkdGg9IjEuOTYiIGhlaWdodD0iMS45NiIgcng9Ii40Ii8+PHJlY3QgeD0iMi45OCIgeT0iLTEuMDciIHdpZHRoPSIyLjEwIiBoZWlnaHQ9IjIuMTAiIHJ4PSIuNCIvPjxyZWN0IHg9IjMuMTgiIHk9IjIuOTkiIHdpZHRoPSIyLjAwIiBoZWlnaHQ9IjIuMDAiIHJ4PSIuNCIvPjxyZWN0IHg9IjIuODMiIHk9IjcuMDkiIHdpZHRoPSIxLjk5IiBoZWlnaHQ9IjEuOTkiIHJ4PSIuNCIvPjxyZWN0IHg9IjMuMzEiIHk9IjExLjI0IiB3aWR0aD0iMS43NyIgaGVpZ2h0PSIxLjc3IiByeD0iLjQiLz48cmVjdCB4PSIzLjE1IiB5PSIxNS4yNiIgd2lkdGg9IjEuNjEiIGhlaWdodD0iMS42MSIgcng9Ii40Ii8+PHJlY3QgeD0iMy4xNSIgeT0iMTkuMDMiIHdpZHRoPSIxLjY3IiBoZWlnaHQ9IjEuNjciIHJ4PSIuNCIvPjxyZWN0IHg9IjIuOTgiIHk9IjIzLjI3IiB3aWR0aD0iMS42OCIgaGVpZ2h0PSIxLjY4IiByeD0iLjQiLz48cmVjdCB4PSIyLjg0IiB5PSIyNi44OSIgd2lkdGg9IjIuMTIiIGhlaWdodD0iMi4xMiIgcng9Ii40Ii8+PHJlY3QgeD0iMi44NyIgeT0iMzEuMDEiIHdpZHRoPSIxLjkzIiBoZWlnaHQ9IjEuOTMiIHJ4PSIuNCIvPjxyZWN0IHg9IjMuMDkiIHk9IjM1LjA3IiB3aWR0aD0iMi4xMiIgaGVpZ2h0PSIyLjEyIiByeD0iLjQiLz48cmVjdCB4PSIzLjAwIiB5PSIzOS4wNiIgd2lkdGg9IjEuODIiIGhlaWdodD0iMS44MiIgcng9Ii40Ii8+PHJlY3QgeD0iMy4zMSIgeT0iNDMuMzQiIHdpZHRoPSIxLjY5IiBoZWlnaHQ9IjEuNjkiIHJ4PSIuNCIvPjxyZWN0IHg9IjMuMDAiIHk9IjQ3LjAyIiB3aWR0aD0iMS43NCIgaGVpZ2h0PSIxLjc0IiByeD0iLjQiLz48cmVjdCB4PSIzLjEyIiB5PSI1MS4xNiIgd2lkdGg9IjEuNzYiIGhlaWdodD0iMS43NiIgcng9Ii40Ii8+PHJlY3QgeD0iMi44OSIgeT0iNTUuMDYiIHdpZHRoPSIxLjgyIiBoZWlnaHQ9IjEuODIiIHJ4PSIuNCIvPjxyZWN0IHg9IjMuMDIiIHk9IjU5LjE3IiB3aWR0aD0iMi4wMSIgaGVpZ2h0PSIyLjAxIiByeD0iLjQiLz48cmVjdCB4PSI3LjAwIiB5PSItMC45NiIgd2lkdGg9IjIuMDEiIGhlaWdodD0iMi4wMSIgcng9Ii40Ii8+PHJlY3QgeD0iNi43OSIgeT0iMy4xMyIgd2lkdGg9IjIuMDciIGhlaWdodD0iMi4wNyIgcng9Ii40Ii8+PHJlY3QgeD0iNy4yMyIgeT0iNy4yMCIgd2lkdGg9IjEuODQiIGhlaWdodD0iMS44NCIgcng9Ii40Ii8+PHJlY3QgeD0iNi45NyIgeT0iMTAuODUiIHdpZHRoPSIxLjk4IiBoZWlnaHQ9IjEuOTgiIHJ4PSIuNCIvPjxyZWN0IHg9IjYuOTYiIHk9IjE0Ljk2IiB3aWR0aD0iMS43MyIgaGVpZ2h0PSIxLjczIiByeD0iLjQiLz48cmVjdCB4PSI3LjA1IiB5PSIxOS4xMiIgd2lkdGg9IjEuNjMiIGhlaWdodD0iMS42MyIgcng9Ii40Ii8+PHJlY3QgeD0iNi45NyIgeT0iMjMuMDMiIHdpZHRoPSIxLjY2IiBoZWlnaHQ9IjEuNjYiIHJ4PSIuNCIvPjxyZWN0IHg9IjYuODgiIHk9IjI2Ljc1IiB3aWR0aD0iMi4xMiIgaGVpZ2h0PSIyLjEyIiByeD0iLjQiLz48cmVjdCB4PSI3LjE3IiB5PSIzMC45OCIgd2lkdGg9IjEuNzUiIGhlaWdodD0iMS43NSIgcng9Ii40Ii8+PHJlY3QgeD0iNy4xMCIgeT0iMzUuMTEiIHdpZHRoPSIxLjY3IiBoZWlnaHQ9IjEuNjciIHJ4PSIuNCIvPjxyZWN0IHg9IjcuMjAiIHk9IjM5LjI2IiB3aWR0aD0iMS44OCIgaGVpZ2h0PSIxLjg4IiByeD0iLjQiLz48cmVjdCB4PSI3LjE2IiB5PSI0My4wMCIgd2lkdGg9IjEuNjYiIGhlaWdodD0iMS42NiIgcng9Ii40Ii8+PHJlY3QgeD0iNi44OSIgeT0iNDYuODYiIHdpZHRoPSIyLjEwIiBoZWlnaHQ9IjIuMTAiIHJ4PSIuNCIvPjxyZWN0IHg9IjYuNzgiIHk9IjUwLjcyIiB3aWR0aD0iMi4xNyIgaGVpZ2h0PSIyLjE3IiByeD0iLjQiLz48cmVjdCB4PSI3LjA1IiB5PSI1NC45MCIgd2lkdGg9IjEuOTMiIGhlaWdodD0iMS45MyIgcng9Ii40Ii8+PHJlY3QgeD0iNi43MiIgeT0iNTguOTIiIHdpZHRoPSIyLjE5IiBoZWlnaHQ9IjIuMTkiIHJ4PSIuNCIvPjxyZWN0IHg9IjExLjI3IiB5PSItMC44MCIgd2lkdGg9IjEuNzYiIGhlaWdodD0iMS43NiIgcng9Ii40Ii8+PHJlY3QgeD0iMTAuOTIiIHk9IjIuODQiIHdpZHRoPSIyLjA2IiBoZWlnaHQ9IjIuMDYiIHJ4PSIuNCIvPjxyZWN0IHg9IjExLjExIiB5PSI3LjIxIiB3aWR0aD0iMS44MCIgaGVpZ2h0PSIxLjgwIiByeD0iLjQiLz48cmVjdCB4PSIxMC43OSIgeT0iMTEuMDMiIHdpZHRoPSIyLjE5IiBoZWlnaHQ9IjIuMTkiIHJ4PSIuNCIvPjxyZWN0IHg9IjExLjEwIiB5PSIxNS4wOCIgd2lkdGg9IjIuMDkiIGhlaWdodD0iMi4wOSIgcng9Ii40Ii8+PHJlY3QgeD0iMTEuMTQiIHk9IjE4Ljk0IiB3aWR0aD0iMS45MSIgaGVpZ2h0PSIxLjkxIiByeD0iLjQiLz48cmVjdCB4PSIxMS4xMyIgeT0iMjMuMDAiIHdpZHRoPSIxLjYyIiBoZWlnaHQ9IjEuNjIiIHJ4PSIuNCIvPjxyZWN0IHg9IjEwLjkwIiB5PSIyNi45MCIgd2lkdGg9IjIuMDIiIGhlaWdodD0iMi4wMiIgcng9Ii40Ii8+PHJlY3QgeD0iMTEuMTAiIHk9IjMwLjkwIiB3aWR0aD0iMi4xNiIgaGVpZ2h0PSIyLjE2IiByeD0iLjQiLz48cmVjdCB4PSIxMS4yOSIgeT0iMzUuMjciIHdpZHRoPSIxLjgyIiBoZWlnaHQ9IjEuODIiIHJ4PSIuNCIvPjxyZWN0IHg9IjExLjAzIiB5PSIzOS4wMyIgd2lkdGg9IjEuNzIiIGhlaWdodD0iMS43MiIgcng9Ii40Ii8+PHJlY3QgeD0iMTAuODEiIHk9IjQyLjk4IiB3aWR0aD0iMi4xNCIgaGVpZ2h0PSIyLjE0IiByeD0iLjQiLz48cmVjdCB4PSIxMS4xNCIgeT0iNDcuMDAiIHdpZHRoPSIxLjk5IiBoZWlnaHQ9IjEuOTkiIHJ4PSIuNCIvPjxyZWN0IHg9IjExLjEyIiB5PSI1MC44NCIgd2lkdGg9IjIuMDAiIGhlaWdodD0iMi4wMCIgcng9Ii40Ii8+PHJlY3QgeD0iMTEuMTQiIHk9IjU1LjA5IiB3aWR0aD0iMi4wNSIgaGVpZ2h0PSIyLjA1IiByeD0iLjQiLz48cmVjdCB4PSIxMC45NSIgeT0iNTguODMiIHdpZHRoPSIyLjA3IiBoZWlnaHQ9IjIuMDciIHJ4PSIuNCIvPjxyZWN0IHg9IjE0Ljg0IiB5PSItMC45NyIgd2lkdGg9IjIuMTgiIGhlaWdodD0iMi4xOCIgcng9Ii40Ii8+PHJlY3QgeD0iMTQuODciIHk9IjIuODgiIHdpZHRoPSIyLjE3IiBoZWlnaHQ9IjIuMTciIHJ4PSIuNCIvPjxyZWN0IHg9IjE1LjI1IiB5PSI3LjAzIiB3aWR0aD0iMS42OCIgaGVpZ2h0PSIxLjY4IiByeD0iLjQiLz48cmVjdCB4PSIxNC44MiIgeT0iMTEuMTIiIHdpZHRoPSIyLjA4IiBoZWlnaHQ9IjIuMDgiIHJ4PSIuNCIvPjxyZWN0IHg9IjE0Ljc2IiB5PSIxNS4wNCIgd2lkdGg9IjIuMTkiIGhlaWdodD0iMi4xOSIgcng9Ii40Ii8+PHJlY3QgeD0iMTUuMTAiIHk9IjE4Ljk4IiB3aWR0aD0iMS45MyIgaGVpZ2h0PSIxLjkzIiByeD0iLjQiLz48cmVjdCB4PSIxNC43NiIgeT0iMjIuNzEiIHdpZHRoPSIyLjE4IiBoZWlnaHQ9IjIuMTgiIHJ4PSIuNCIvPjxyZWN0IHg9IjE0Ljk4IiB5PSIyNi45MyIgd2lkdGg9IjIuMTYiIGhlaWdodD0iMi4xNiIgcng9Ii40Ii8+PHJlY3QgeD0iMTQuOTMiIHk9IjMxLjEwIiB3aWR0aD0iMi4xMCIgaGVpZ2h0PSIyLjEwIiByeD0iLjQiLz48cmVjdCB4PSIxNS4wMCIgeT0iMzUuMDEiIHdpZHRoPSIxLjc4IiBoZWlnaHQ9IjEuNzgiIHJ4PSIuNCIvPjxyZWN0IHg9IjE1LjAyIiB5PSIzOS4xNiIgd2lkdGg9IjEuNzYiIGhlaWdodD0iMS43NiIgcng9Ii40Ii8+PHJlY3QgeD0iMTQuODkiIHk9IjQyLjc4IiB3aWR0aD0iMi4xNSIgaGVpZ2h0PSIyLjE1IiByeD0iLjQiLz48cmVjdCB4PSIxNC45NyIgeT0iNDcuMDEiIHdpZHRoPSIxLjk1IiBoZWlnaHQ9IjEuOTUiIHJ4PSIuNCIvPjxyZWN0IHg9IjE1LjA5IiB5PSI1MC44OSIgd2lkdGg9IjIuMTUiIGhlaWdodD0iMi4xNSIgcng9Ii40Ii8+PHJlY3QgeD0iMTUuMDQiIHk9IjU1LjA2IiB3aWR0aD0iMS45MSIgaGVpZ2h0PSIxLjkxIiByeD0iLjQiLz48cmVjdCB4PSIxNC45NSIgeT0iNTkuMTIiIHdpZHRoPSIxLjcxIiBoZWlnaHQ9IjEuNzEiIHJ4PSIuNCIvPjxyZWN0IHg9IjE4Ljk1IiB5PSItMC43MyIgd2lkdGg9IjEuNzAiIGhlaWdodD0iMS43MCIgcng9Ii40Ii8+PHJlY3QgeD0iMTkuMDIiIHk9IjMuMTIiIHdpZHRoPSIxLjkzIiBoZWlnaHQ9IjEuOTMiIHJ4PSIuNCIvPjxyZWN0IHg9IjE4Ljk2IiB5PSI3LjA0IiB3aWR0aD0iMS45MyIgaGVpZ2h0PSIxLjkzIiByeD0iLjQiLz48cmVjdCB4PSIxOS4xNSIgeT0iMTAuODciIHdpZHRoPSIxLjk0IiBoZWlnaHQ9IjEuOTQiIHJ4PSIuNCIvPjxyZWN0IHg9IjE4Ljg3IiB5PSIxNC44OCIgd2lkdGg9IjIuMDYiIGhlaWdodD0iMi4wNiIgcng9Ii40Ii8+PHJlY3QgeD0iMTguOTgiIHk9IjE5LjAwIiB3aWR0aD0iMi4wNiIgaGVpZ2h0PSIyLjA2IiByeD0iLjQiLz48cmVjdCB4PSIxOS4xOCIgeT0iMjIuOTkiIHdpZHRoPSIxLjk3IiBoZWlnaHQ9IjEuOTciIHJ4PSIuNCIvPjxyZWN0IHg9IjE4Ljk5IiB5PSIyNy4wMCIgd2lkdGg9IjIuMDIiIGhlaWdodD0iMi4wMiIgcng9Ii40Ii8+PHJlY3QgeD0iMTkuMDQiIHk9IjMxLjA3IiB3aWR0aD0iMS44OSIgaGVpZ2h0PSIxLjg5IiByeD0iLjQiLz48cmVjdCB4PSIxOS4xMSIgeT0iMzUuMDIiIHdpZHRoPSIyLjEzIiBoZWlnaHQ9IjIuMTMiIHJ4PSIuNCIvPjxyZWN0IHg9IjE5LjIxIiB5PSIzOC45NCIgd2lkdGg9IjEuOTQiIGhlaWdodD0iMS45NCIgcng9Ii40Ii8+PHJlY3QgeD0iMTkuMzQiIHk9IjQzLjI5IiB3aWR0aD0iMS42OCIgaGVpZ2h0PSIxLjY4IiByeD0iLjQiLz48cmVjdCB4PSIxOS4wMyIgeT0iNDcuMTYiIHdpZHRoPSIxLjY0IiBoZWlnaHQ9IjEuNjQiIHJ4PSIuNCIvPjxyZWN0IHg9IjE4LjkwIiB5PSI1MC44MyIgd2lkdGg9IjIuMDAiIGhlaWdodD0iMi4wMCIgcng9Ii40Ii8+PHJlY3QgeD0iMTkuMjciIHk9IjU1LjMxIiB3aWR0aD0iMS42OSIgaGVpZ2h0PSIxLjY5IiByeD0iLjQiLz48cmVjdCB4PSIxOS4yNCIgeT0iNTkuMjIiIHdpZHRoPSIxLjY5IiBoZWlnaHQ9IjEuNjkiIHJ4PSIuNCIvPjxyZWN0IHg9IjIzLjI5IiB5PSItMC42OCIgd2lkdGg9IjEuNzMiIGhlaWdodD0iMS43MyIgcng9Ii40Ii8+PHJlY3QgeD0iMjMuMjMiIHk9IjMuMDEiIHdpZHRoPSIxLjg5IiBoZWlnaHQ9IjEuODkiIHJ4PSIuNCIvPjxyZWN0IHg9IjIzLjM1IiB5PSI3LjI4IiB3aWR0aD0iMS43MCIgaGVpZ2h0PSIxLjcwIiByeD0iLjQiLz48cmVjdCB4PSIyMy4wNyIgeT0iMTEuMTAiIHdpZHRoPSIxLjgwIiBoZWlnaHQ9IjEuODAiIHJ4PSIuNCIvPjxyZWN0IHg9IjIyLjg2IiB5PSIxNC45MSIgd2lkdGg9IjIuMDMiIGhlaWdodD0iMi4wMyIgcng9Ii40Ii8+PHJlY3QgeD0iMjIuODgiIHk9IjE5LjA5IiB3aWR0aD0iMS44NiIgaGVpZ2h0PSIxLjg2IiByeD0iLjQiLz48cmVjdCB4PSIyMi44MiIgeT0iMjIuOTUiIHdpZHRoPSIxLjk3IiBoZWlnaHQ9IjEuOTciIHJ4PSIuNCIvPjxyZWN0IHg9IjIyLjkxIiB5PSIyNi43MyIgd2lkdGg9IjIuMTkiIGhlaWdodD0iMi4xOSIgcng9Ii40Ii8+PHJlY3QgeD0iMjMuMjgiIHk9IjMxLjM2IiB3aWR0aD0iMS42NiIgaGVpZ2h0PSIxLjY2IiByeD0iLjQiLz48cmVjdCB4PSIyMi44NyIgeT0iMzQuNzgiIHdpZHRoPSIyLjA3IiBoZWlnaHQ9IjIuMDciIHJ4PSIuNCIvPjxyZWN0IHg9IjIyLjk4IiB5PSIzOC45MyIgd2lkdGg9IjEuODUiIGhlaWdodD0iMS44NSIgcng9Ii40Ii8+PHJlY3QgeD0iMjMuMjkiIHk9IjQzLjI1IiB3aWR0aD0iMS43NiIgaGVpZ2h0PSIxLjc2IiByeD0iLjQiLz48cmVjdCB4PSIyMi44OSIgeT0iNDcuMjAiIHdpZHRoPSIxLjk0IiBoZWlnaHQ9IjEuOTQiIHJ4PSIuNCIvPjxyZWN0IHg9IjIzLjI2IiB5PSI1MS4wMiIgd2lkdGg9IjEuNjMiIGhlaWdodD0iMS42MyIgcng9Ii40Ii8+PHJlY3QgeD0iMjMuMjUiIHk9IjU1LjE1IiB3aWR0aD0iMS42NCIgaGVpZ2h0PSIxLjY0IiByeD0iLjQiLz48cmVjdCB4PSIyMy4xMyIgeT0iNTkuMDEiIHdpZHRoPSIyLjA4IiBoZWlnaHQ9IjIuMDgiIHJ4PSIuNCIvPjxyZWN0IHg9IjI3LjAxIiB5PSItMC42OCIgd2lkdGg9IjEuNjQiIGhlaWdodD0iMS42NCIgcng9Ii40Ii8+PHJlY3QgeD0iMjcuMjQiIHk9IjMuMDgiIHdpZHRoPSIxLjgwIiBoZWlnaHQ9IjEuODAiIHJ4PSIuNCIvPjxyZWN0IHg9IjI3LjE0IiB5PSI3LjI5IiB3aWR0aD0iMS43NiIgaGVpZ2h0PSIxLjc2IiByeD0iLjQiLz48cmVjdCB4PSIyNi45OCIgeT0iMTEuMTQiIHdpZHRoPSIxLjc0IiBoZWlnaHQ9IjEuNzQiIHJ4PSIuNCIvPjxyZWN0IHg9IjI3LjAzIiB5PSIxNS4wNSIgd2lkdGg9IjEuNjMiIGhlaWdodD0iMS42MyIgcng9Ii40Ii8+PHJlY3QgeD0iMjYuOTkiIHk9IjE5LjAzIiB3aWR0aD0iMS43OCIgaGVpZ2h0PSIxLjc4IiByeD0iLjQiLz48cmVjdCB4PSIyNy4xNSIgeT0iMjIuOTciIHdpZHRoPSIxLjkwIiBoZWlnaHQ9IjEuOTAiIHJ4PSIuNCIvPjxyZWN0IHg9IjI3LjA3IiB5PSIyNy4xMyIgd2lkdGg9IjEuNjEiIGhlaWdodD0iMS42MSIgcng9Ii40Ii8+PHJlY3QgeD0iMjYuODgiIHk9IjMwLjc5IiB3aWR0aD0iMi4wNCIgaGVpZ2h0PSIyLjA0IiByeD0iLjQiLz48cmVjdCB4PSIyNy4wOCIgeT0iMzQuOTMiIHdpZHRoPSIxLjg4IiBoZWlnaHQ9IjEuODgiIHJ4PSIuNCIvPjxyZWN0IHg9IjI3LjEzIiB5PSIzOC44MCIgd2lkdGg9IjIuMDkiIGhlaWdodD0iMi4wOSIgcng9Ii40Ii8+PHJlY3QgeD0iMjYuOTIiIHk9IjQyLjk1IiB3aWR0aD0iMi4xMCIgaGVpZ2h0PSIyLjEwIiByeD0iLjQiLz48cmVjdCB4PSIyNi45NSIgeT0iNDcuMDAiIHdpZHRoPSIyLjAxIiBoZWlnaHQ9IjIuMDEiIHJ4PSIuNCIvPjxyZWN0IHg9IjI3LjE0IiB5PSI1MC44OSIgd2lkdGg9IjIuMTAiIGhlaWdodD0iMi4xMCIgcng9Ii40Ii8+PHJlY3QgeD0iMjcuMTYiIHk9IjU1LjEzIiB3aWR0aD0iMS44NCIgaGVpZ2h0PSIxLjg0IiByeD0iLjQiLz48cmVjdCB4PSIyNy4xMCIgeT0iNTguOTgiIHdpZHRoPSIxLjY4IiBoZWlnaHQ9IjEuNjgiIHJ4PSIuNCIvPjxyZWN0IHg9IjMwLjk1IiB5PSItMC43OCIgd2lkdGg9IjEuNzUiIGhlaWdodD0iMS43NSIgcng9Ii40Ii8+PHJlY3QgeD0iMzAuODEiIHk9IjIuNzgiIHdpZHRoPSIyLjEwIiBoZWlnaHQ9IjIuMTAiIHJ4PSIuNCIvPjxyZWN0IHg9IjMxLjI2IiB5PSI3LjE4IiB3aWR0aD0iMS43NyIgaGVpZ2h0PSIxLjc3IiByeD0iLjQiLz48cmVjdCB4PSIzMC45NiIgeT0iMTAuOTgiIHdpZHRoPSIxLjg4IiBoZWlnaHQ9IjEuODgiIHJ4PSIuNCIvPjxyZWN0IHg9IjMwLjk4IiB5PSIxNS4xMCIgd2lkdGg9IjEuNzYiIGhlaWdodD0iMS43NiIgcng9Ii40Ii8+PHJlY3QgeD0iMzEuMjIiIHk9IjE5LjIyIiB3aWR0aD0iMS45MyIgaGVpZ2h0PSIxLjkzIiByeD0iLjQiLz48cmVjdCB4PSIzMS4wMCIgeT0iMjMuMjkiIHdpZHRoPSIxLjc5IiBoZWlnaHQ9IjEuNzkiIHJ4PSIuNCIvPjxyZWN0IHg9IjMxLjAzIiB5PSIyNi44OSIgd2lkdGg9IjEuODMiIGhlaWdodD0iMS44MyIgcng9Ii40Ii8+PHJlY3QgeD0iMzEuMTMiIHk9IjMxLjE0IiB3aWR0aD0iMS43MiIgaGVpZ2h0PSIxLjcyIiByeD0iLjQiLz48cmVjdCB4PSIzMS4xMiIgeT0iMzQuOTIiIHdpZHRoPSIxLjc2IiBoZWlnaHQ9IjEuNzYiIHJ4PSIuNCIvPjxyZWN0IHg9IjMxLjAyIiB5PSIzOS4xNSIgd2lkdGg9IjEuNjMiIGhlaWdodD0iMS42MyIgcng9Ii40Ii8+PHJlY3QgeD0iMzAuOTQiIHk9IjQzLjA1IiB3aWR0aD0iMS43NCIgaGVpZ2h0PSIxLjc0IiByeD0iLjQiLz48cmVjdCB4PSIzMS4wMSIgeT0iNDYuOTkiIHdpZHRoPSIyLjA1IiBoZWlnaHQ9IjIuMDUiIHJ4PSIuNCIvPjxyZWN0IHg9IjMxLjAwIiB5PSI1MS4wMiIgd2lkdGg9IjIuMTMiIGhlaWdodD0iMi4xMyIgcng9Ii40Ii8+PHJlY3QgeD0iMzAuODYiIHk9IjU0Ljg0IiB3aWR0aD0iMi4xOSIgaGVpZ2h0PSIyLjE5IiByeD0iLjQiLz48cmVjdCB4PSIzMC44NyIgeT0iNTkuMTAiIHdpZHRoPSIxLjk5IiBoZWlnaHQ9IjEuOTkiIHJ4PSIuNCIvPjxyZWN0IHg9IjM0Ljc1IiB5PSItMC45MyIgd2lkdGg9IjIuMTQiIGhlaWdodD0iMi4xNCIgcng9Ii40Ii8+PHJlY3QgeD0iMzUuMDEiIHk9IjMuMDUiIHdpZHRoPSIyLjA5IiBoZWlnaHQ9IjIuMDkiIHJ4PSIuNCIvPjxyZWN0IHg9IjM0LjkwIiB5PSI3LjA2IiB3aWR0aD0iMS45MCIgaGVpZ2h0PSIxLjkwIiByeD0iLjQiLz48cmVjdCB4PSIzNS4wOSIgeT0iMTEuMDciIHdpZHRoPSIyLjEwIiBoZWlnaHQ9IjIuMTAiIHJ4PSIuNCIvPjxyZWN0IHg9IjM1LjAzIiB5PSIxNS4xNSIgd2lkdGg9IjIuMDEiIGhlaWdodD0iMi4wMSIgcng9Ii40Ii8+PHJlY3QgeD0iMzUuMjciIHk9IjE5LjA4IiB3aWR0aD0iMS42MiIgaGVpZ2h0PSIxLjYyIiByeD0iLjQiLz48cmVjdCB4PSIzNS4wMiIgeT0iMjMuMTEiIHdpZHRoPSIxLjY2IiBoZWlnaHQ9IjEuNjYiIHJ4PSIuNCIvPjxyZWN0IHg9IjM1LjE1IiB5PSIyNy4wNCIgd2lkdGg9IjEuOTgiIGhlaWdodD0iMS45OCIgcng9Ii40Ii8+PHJlY3QgeD0iMzUuMTAiIHk9IjMxLjEzIiB3aWR0aD0iMS44OSIgaGVpZ2h0PSIxLjg5IiByeD0iLjQiLz48cmVjdCB4PSIzNC43OCIgeT0iMzUuMDkiIHdpZHRoPSIyLjA1IiBoZWlnaHQ9IjIuMDUiIHJ4PSIuNCIvPjxyZWN0IHg9IjM1LjAwIiB5PSIzOS4wMiIgd2lkdGg9IjIuMDAiIGhlaWdodD0iMi4wMCIgcng9Ii40Ii8+PHJlY3QgeD0iMzQuOTUiIHk9IjQzLjIyIiB3aWR0aD0iMS43NSIgaGVpZ2h0PSIxLjc1IiByeD0iLjQiLz48cmVjdCB4PSIzNC44MSIgeT0iNDYuODkiIHdpZHRoPSIyLjA0IiBoZWlnaHQ9IjIuMDQiIHJ4PSIuNCIvPjxyZWN0IHg9IjM0Ljc5IiB5PSI1MS4wMCIgd2lkdGg9IjIuMTkiIGhlaWdodD0iMi4xOSIgcng9Ii40Ii8+PHJlY3QgeD0iMzUuMDUiIHk9IjU1LjAxIiB3aWR0aD0iMS44OSIgaGVpZ2h0PSIxLjg5IiByeD0iLjQiLz48cmVjdCB4PSIzNS4wOSIgeT0iNTkuMTIiIHdpZHRoPSIxLjk3IiBoZWlnaHQ9IjEuOTciIHJ4PSIuNCIvPjxyZWN0IHg9IjM5LjIxIiB5PSItMS4wMSIgd2lkdGg9IjEuNjkiIGhlaWdodD0iMS42OSIgcng9Ii40Ii8+PHJlY3QgeD0iMzkuMDEiIHk9IjMuMjEiIHdpZHRoPSIxLjc4IiBoZWlnaHQ9IjEuNzgiIHJ4PSIuNCIvPjxyZWN0IHg9IjM5LjIxIiB5PSI2Ljk5IiB3aWR0aD0iMS42NCIgaGVpZ2h0PSIxLjY0IiByeD0iLjQiLz48cmVjdCB4PSIzOC45MCIgeT0iMTEuMDYiIHdpZHRoPSIyLjAyIiBoZWlnaHQ9IjIuMDIiIHJ4PSIuNCIvPjxyZWN0IHg9IjM5LjEyIiB5PSIxNC45NiIgd2lkdGg9IjEuOTEiIGhlaWdodD0iMS45MSIgcng9Ii40Ii8+PHJlY3QgeD0iMzkuMTUiIHk9IjE5LjE1IiB3aWR0aD0iMS42NyIgaGVpZ2h0PSIxLjY3IiByeD0iLjQiLz48cmVjdCB4PSIzOS4wNiIgeT0iMjIuNzkiIHdpZHRoPSIyLjE5IiBoZWlnaHQ9IjIuMTkiIHJ4PSIuNCIvPjxyZWN0IHg9IjM5LjI0IiB5PSIyNi44NyIgd2lkdGg9IjEuODgiIGhlaWdodD0iMS44OCIgcng9Ii40Ii8+PHJlY3QgeD0iMzkuMTkiIHk9IjMxLjI1IiB3aWR0aD0iMS44NyIgaGVpZ2h0PSIxLjg3IiByeD0iLjQiLz48cmVjdCB4PSIzOC44MiIgeT0iMzQuODAiIHdpZHRoPSIyLjE3IiBoZWlnaHQ9IjIuMTciIHJ4PSIuNCIvPjxyZWN0IHg9IjM5LjA0IiB5PSIzOS4xOSIgd2lkdGg9IjEuNjkiIGhlaWdodD0iMS42OSIgcng9Ii40Ii8+PHJlY3QgeD0iMzkuMTciIHk9IjQzLjM0IiB3aWR0aD0iMS42OCIgaGVpZ2h0PSIxLjY4IiByeD0iLjQiLz48cmVjdCB4PSIzOS4wNiIgeT0iNDYuOTQiIHdpZHRoPSIyLjEzIiBoZWlnaHQ9IjIuMTMiIHJ4PSIuNCIvPjxyZWN0IHg9IjM5LjAxIiB5PSI1MC44MiIgd2lkdGg9IjIuMTQiIGhlaWdodD0iMi4xNCIgcng9Ii40Ii8+PHJlY3QgeD0iMzkuMTkiIHk9IjU1LjAxIiB3aWR0aD0iMS42MCIgaGVpZ2h0PSIxLjYwIiByeD0iLjQiLz48cmVjdCB4PSIzOS4xMSIgeT0iNTkuMDkiIHdpZHRoPSIxLjc4IiBoZWlnaHQ9IjEuNzgiIHJ4PSIuNCIvPjxyZWN0IHg9IjQyLjk2IiB5PSItMC45NiIgd2lkdGg9IjEuNzkiIGhlaWdodD0iMS43OSIgcng9Ii40Ii8+PHJlY3QgeD0iNDMuMTEiIHk9IjIuNzgiIHdpZHRoPSIyLjA1IiBoZWlnaHQ9IjIuMDUiIHJ4PSIuNCIvPjxyZWN0IHg9IjQzLjA2IiB5PSI2Ljc3IiB3aWR0aD0iMi4xNiIgaGVpZ2h0PSIyLjE2IiByeD0iLjQiLz48cmVjdCB4PSI0My4yMCIgeT0iMTEuMjciIHdpZHRoPSIxLjc3IiBoZWlnaHQ9IjEuNzciIHJ4PSIuNCIvPjxyZWN0IHg9IjQyLjg1IiB5PSIxNC44NiIgd2lkdGg9IjIuMjAiIGhlaWdodD0iMi4yMCIgcng9Ii40Ii8+PHJlY3QgeD0iNDMuMTEiIHk9IjE5LjAyIiB3aWR0aD0iMS44NiIgaGVpZ2h0PSIxLjg2IiByeD0iLjQiLz48cmVjdCB4PSI0My4wOCIgeT0iMjIuOTkiIHdpZHRoPSIxLjY2IiBoZWlnaHQ9IjEuNjYiIHJ4PSIuNCIvPjxyZWN0IHg9IjQzLjA1IiB5PSIyNi44MyIgd2lkdGg9IjIuMTYiIGhlaWdodD0iMi4xNiIgcng9Ii40Ii8+PHJlY3QgeD0iNDIuOTUiIHk9IjMwLjk1IiB3aWR0aD0iMS45MSIgaGVpZ2h0PSIxLjkxIiByeD0iLjQiLz48cmVjdCB4PSI0Mi43OSIgeT0iMzQuODYiIHdpZHRoPSIyLjE3IiBoZWlnaHQ9IjIuMTciIHJ4PSIuNCIvPjxyZWN0IHg9IjQzLjE2IiB5PSIzOS4xNCIgd2lkdGg9IjEuOTgiIGhlaWdodD0iMS45OCIgcng9Ii40Ii8+PHJlY3QgeD0iNDMuMjAiIHk9IjQzLjIxIiB3aWR0aD0iMS45MyIgaGVpZ2h0PSIxLjkzIiByeD0iLjQiLz48cmVjdCB4PSI0My4wNyIgeT0iNDYuODAiIHdpZHRoPSIyLjA0IiBoZWlnaHQ9IjIuMDQiIHJ4PSIuNCIvPjxyZWN0IHg9IjQyLjk5IiB5PSI1MS4xMSIgd2lkdGg9IjEuOTkiIGhlaWdodD0iMS45OSIgcng9Ii40Ii8+PHJlY3QgeD0iNDIuODQiIHk9IjU0Ljc0IiB3aWR0aD0iMi4xNiIgaGVpZ2h0PSIyLjE2IiByeD0iLjQiLz48cmVjdCB4PSI0Mi45NSIgeT0iNTkuMDkiIHdpZHRoPSIxLjgxIiBoZWlnaHQ9IjEuODEiIHJ4PSIuNCIvPjxyZWN0IHg9IjQ2LjgzIiB5PSItMS4wMCIgd2lkdGg9IjIuMTkiIGhlaWdodD0iMi4xOSIgcng9Ii40Ii8+PHJlY3QgeD0iNDcuMDEiIHk9IjMuMTciIHdpZHRoPSIxLjc4IiBoZWlnaHQ9IjEuNzgiIHJ4PSIuNCIvPjxyZWN0IHg9IjQ3LjE3IiB5PSI3LjExIiB3aWR0aD0iMS43MCIgaGVpZ2h0PSIxLjcwIiByeD0iLjQiLz48cmVjdCB4PSI0Ni43OSIgeT0iMTAuODEiIHdpZHRoPSIyLjE0IiBoZWlnaHQ9IjIuMTQiIHJ4PSIuNCIvPjxyZWN0IHg9IjQ2LjkzIiB5PSIxNC44MiIgd2lkdGg9IjIuMTQiIGhlaWdodD0iMi4xNCIgcng9Ii40Ii8+PHJlY3QgeD0iNDcuMzYiIHk9IjE5LjE0IiB3aWR0aD0iMS42OCIgaGVpZ2h0PSIxLjY4IiByeD0iLjQiLz48cmVjdCB4PSI0Ni45NyIgeT0iMjIuOTMiIHdpZHRoPSIxLjgxIiBoZWlnaHQ9IjEuODEiIHJ4PSIuNCIvPjxyZWN0IHg9IjQ2Ljk2IiB5PSIyNy4wMiIgd2lkdGg9IjEuNzYiIGhlaWdodD0iMS43NiIgcng9Ii40Ii8+PHJlY3QgeD0iNDcuMDAiIHk9IjMxLjEzIiB3aWR0aD0iMi4wNSIgaGVpZ2h0PSIyLjA1IiByeD0iLjQiLz48cmVjdCB4PSI0Ny4wMSIgeT0iMzUuMDEiIHdpZHRoPSIxLjkxIiBoZWlnaHQ9IjEuOTEiIHJ4PSIuNCIvPjxyZWN0IHg9IjQ3LjEzIiB5PSIzOS4xMiIgd2lkdGg9IjEuNjQiIGhlaWdodD0iMS42NCIgcng9Ii40Ii8+PHJlY3QgeD0iNDcuMDciIHk9IjQzLjM1IiB3aWR0aD0iMS42OCIgaGVpZ2h0PSIxLjY4IiByeD0iLjQiLz48cmVjdCB4PSI0Ni45NCIgeT0iNDYuOTkiIHdpZHRoPSIyLjEyIiBoZWlnaHQ9IjIuMTIiIHJ4PSIuNCIvPjxyZWN0IHg9IjQ3LjAxIiB5PSI1MS4wMyIgd2lkdGg9IjEuNzUiIGhlaWdodD0iMS43NSIgcng9Ii40Ii8+PHJlY3QgeD0iNDYuODciIHk9IjU0Ljg5IiB3aWR0aD0iMi4xNyIgaGVpZ2h0PSIyLjE3IiByeD0iLjQiLz48cmVjdCB4PSI0Ny4zMyIgeT0iNTkuMzQiIHdpZHRoPSIxLjYxIiBoZWlnaHQ9IjEuNjEiIHJ4PSIuNCIvPjxyZWN0IHg9IjUwLjc0IiB5PSItMC45OCIgd2lkdGg9IjIuMTQiIGhlaWdodD0iMi4xNCIgcng9Ii40Ii8+PHJlY3QgeD0iNTEuMTkiIHk9IjMuMjMiIHdpZHRoPSIxLjYwIiBoZWlnaHQ9IjEuNjAiIHJ4PSIuNCIvPjxyZWN0IHg9IjUwLjkxIiB5PSI3LjEyIiB3aWR0aD0iMi4xMCIgaGVpZ2h0PSIyLjEwIiByeD0iLjQiLz48cmVjdCB4PSI1MS4yNyIgeT0iMTEuMzEiIHdpZHRoPSIxLjc1IiBoZWlnaHQ9IjEuNzUiIHJ4PSIuNCIvPjxyZWN0IHg9IjUwLjg5IiB5PSIxNC45MSIgd2lkdGg9IjEuOTEiIGhlaWdodD0iMS45MSIgcng9Ii40Ii8+PHJlY3QgeD0iNTEuMDYiIHk9IjE5LjE2IiB3aWR0aD0iMi4wMyIgaGVpZ2h0PSIyLjAzIiByeD0iLjQiLz48cmVjdCB4PSI1MS4xMiIgeT0iMjMuMTciIHdpZHRoPSIxLjg3IiBoZWlnaHQ9IjEuODciIHJ4PSIuNCIvPjxyZWN0IHg9IjUwLjk5IiB5PSIyNi43OCIgd2lkdGg9IjIuMDciIGhlaWdodD0iMi4wNyIgcng9Ii40Ii8+PHJlY3QgeD0iNTAuOTAiIHk9IjMxLjE3IiB3aWR0aD0iMS45OSIgaGVpZ2h0PSIxLjk5IiByeD0iLjQiLz48cmVjdCB4PSI1MS4wNSIgeT0iMzQuOTgiIHdpZHRoPSIxLjc1IiBoZWlnaHQ9IjEuNzUiIHJ4PSIuNCIvPjxyZWN0IHg9IjUxLjIyIiB5PSIzOS4yNSIgd2lkdGg9IjEuNjciIGhlaWdodD0iMS42NyIgcng9Ii40Ii8+PHJlY3QgeD0iNTAuODUiIHk9IjQzLjAzIiB3aWR0aD0iMS45NSIgaGVpZ2h0PSIxLjk1IiByeD0iLjQiLz48cmVjdCB4PSI1MC45NyIgeT0iNDYuOTEiIHdpZHRoPSIxLjk2IiBoZWlnaHQ9IjEuOTYiIHJ4PSIuNCIvPjxyZWN0IHg9IjUwLjg3IiB5PSI1MC45OCIgd2lkdGg9IjEuODgiIGhlaWdodD0iMS44OCIgcng9Ii40Ii8+PHJlY3QgeD0iNTEuMTIiIHk9IjU0Ljk5IiB3aWR0aD0iMi4xMyIgaGVpZ2h0PSIyLjEzIiByeD0iLjQiLz48cmVjdCB4PSI1MS4xMiIgeT0iNTkuMDIiIHdpZHRoPSIxLjc1IiBoZWlnaHQ9IjEuNzUiIHJ4PSIuNCIvPjxyZWN0IHg9IjU1LjI5IiB5PSItMC44MSIgd2lkdGg9IjEuNzgiIGhlaWdodD0iMS43OCIgcng9Ii40Ii8+PHJlY3QgeD0iNTQuODEiIHk9IjMuMDAiIHdpZHRoPSIyLjAwIiBoZWlnaHQ9IjIuMDAiIHJ4PSIuNCIvPjxyZWN0IHg9IjU0Ljk3IiB5PSI2LjkwIiB3aWR0aD0iMi4wMCIgaGVpZ2h0PSIyLjAwIiByeD0iLjQiLz48cmVjdCB4PSI1NS4zNiIgeT0iMTEuMDgiIHdpZHRoPSIxLjYyIiBoZWlnaHQ9IjEuNjIiIHJ4PSIuNCIvPjxyZWN0IHg9IjU0LjkzIiB5PSIxNC45NiIgd2lkdGg9IjIuMDEiIGhlaWdodD0iMi4wMSIgcng9Ii40Ii8+PHJlY3QgeD0iNTQuODYiIHk9IjE5LjEwIiB3aWR0aD0iMi4wNCIgaGVpZ2h0PSIyLjA0IiByeD0iLjQiLz48cmVjdCB4PSI1NC45MSIgeT0iMjIuNzkiIHdpZHRoPSIyLjE4IiBoZWlnaHQ9IjIuMTgiIHJ4PSIuNCIvPjxyZWN0IHg9IjU1LjA2IiB5PSIyNy4yNiIgd2lkdGg9IjEuNzQiIGhlaWdodD0iMS43NCIgcng9Ii40Ii8+PHJlY3QgeD0iNTUuMDAiIHk9IjMxLjIyIiB3aWR0aD0iMS43OCIgaGVpZ2h0PSIxLjc4IiByeD0iLjQiLz48cmVjdCB4PSI1NS4zMiIgeT0iMzUuMTQiIHdpZHRoPSIxLjcxIiBoZWlnaHQ9IjEuNzEiIHJ4PSIuNCIvPjxyZWN0IHg9IjU0Ljg5IiB5PSIzOC45NyIgd2lkdGg9IjIuMDAiIGhlaWdodD0iMi4wMCIgcng9Ii40Ii8+PHJlY3QgeD0iNTUuMjYiIHk9IjQyLjk0IiB3aWR0aD0iMS44NCIgaGVpZ2h0PSIxLjg0IiByeD0iLjQiLz48cmVjdCB4PSI1NS4wNCIgeT0iNDcuMzUiIHdpZHRoPSIxLjY5IiBoZWlnaHQ9IjEuNjkiIHJ4PSIuNCIvPjxyZWN0IHg9IjU0LjkwIiB5PSI1MC45MSIgd2lkdGg9IjEuODQiIGhlaWdodD0iMS44NCIgcng9Ii40Ii8+PHJlY3QgeD0iNTUuMTQiIHk9IjU1LjEzIiB3aWR0aD0iMi4wNCIgaGVpZ2h0PSIyLjA0IiByeD0iLjQiLz48cmVjdCB4PSI1NS4zMCIgeT0iNTkuMjciIHdpZHRoPSIxLjgwIiBoZWlnaHQ9IjEuODAiIHJ4PSIuNCIvPjxyZWN0IHg9IjU4Ljg1IiB5PSItMC44NSIgd2lkdGg9IjIuMDUiIGhlaWdodD0iMi4wNSIgcng9Ii40Ii8+PHJlY3QgeD0iNTguOTAiIHk9IjMuMTUiIHdpZHRoPSIxLjgzIiBoZWlnaHQ9IjEuODMiIHJ4PSIuNCIvPjxyZWN0IHg9IjU5LjEwIiB5PSI3LjA4IiB3aWR0aD0iMS43MCIgaGVpZ2h0PSIxLjcwIiByeD0iLjQiLz48cmVjdCB4PSI1OC45MCIgeT0iMTEuMDEiIHdpZHRoPSIxLjgxIiBoZWlnaHQ9IjEuODEiIHJ4PSIuNCIvPjxyZWN0IHg9IjU5LjA5IiB5PSIxNC43NiIgd2lkdGg9IjIuMTgiIGhlaWdodD0iMi4xOCIgcng9Ii40Ii8+PHJlY3QgeD0iNTguODQiIHk9IjE4LjkwIiB3aWR0aD0iMi4wOSIgaGVpZ2h0PSIyLjA5IiByeD0iLjQiLz48cmVjdCB4PSI1OS4zMSIgeT0iMjMuMTYiIHdpZHRoPSIxLjYzIiBoZWlnaHQ9IjEuNjMiIHJ4PSIuNCIvPjxyZWN0IHg9IjU4LjkxIiB5PSIyNi44NyIgd2lkdGg9IjIuMTUiIGhlaWdodD0iMi4xNSIgcng9Ii40Ii8+PHJlY3QgeD0iNTguODEiIHk9IjMwLjg4IiB3aWR0aD0iMi4xNCIgaGVpZ2h0PSIyLjE0IiByeD0iLjQiLz48cmVjdCB4PSI1OC43NyIgeT0iMzQuOTIiIHdpZHRoPSIyLjA5IiBoZWlnaHQ9IjIuMDkiIHJ4PSIuNCIvPjxyZWN0IHg9IjU5LjMwIiB5PSIzOS4wMSIgd2lkdGg9IjEuNjIiIGhlaWdodD0iMS42MiIgcng9Ii40Ii8+PHJlY3QgeD0iNTguOTUiIHk9IjQzLjI5IiB3aWR0aD0iMS43NSIgaGVpZ2h0PSIxLjc1IiByeD0iLjQiLz48cmVjdCB4PSI1OS4yMCIgeT0iNDcuMjYiIHdpZHRoPSIxLjgwIiBoZWlnaHQ9IjEuODAiIHJ4PSIuNCIvPjxyZWN0IHg9IjU4LjkyIiB5PSI1MS4yMCIgd2lkdGg9IjEuOTciIGhlaWdodD0iMS45NyIgcng9Ii40Ii8+PHJlY3QgeD0iNTkuMDEiIHk9IjU1LjE5IiB3aWR0aD0iMS43OSIgaGVpZ2h0PSIxLjc5IiByeD0iLjQiLz48cmVjdCB4PSI1OC44OCIgeT0iNTguNzciIHdpZHRoPSIyLjA1IiBoZWlnaHQ9IjIuMDUiIHJ4PSIuNCIvPjwvZz48L3N2Zz4=) center/contain no-repeat;mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MCA2MCIgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iPjxkZWZzPjxjbGlwUGF0aCBpZD0iayI+PHBhdGggZD0iTTIwIDBoMjB2MjBoMjB2MjBINDB2MjBIMjBWNDBIMFYyMGgyMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48ZyBjbGlwLXBhdGg9InVybCgjaykiIGZpbGw9IiMwMDAiPjxyZWN0IHg9Ii0wLjQ2IiB5PSIwIiB3aWR0aD0iMC45MSIgaGVpZ2h0PSI2MCIvPjxyZWN0IHg9IjAiIHk9Ii0wLjQ2IiB3aWR0aD0iNjAiIGhlaWdodD0iMC45MSIvPjxyZWN0IHg9IjMuNTkiIHk9IjAiIHdpZHRoPSIwLjgzIiBoZWlnaHQ9IjYwIi8+PHJlY3QgeD0iMCIgeT0iMy41OSIgd2lkdGg9IjYwIiBoZWlnaHQ9IjAuODMiLz48cmVjdCB4PSI3LjQ2IiB5PSIwIiB3aWR0aD0iMS4wOCIgaGVpZ2h0PSI2MCIvPjxyZWN0IHg9IjAiIHk9IjcuNDYiIHdpZHRoPSI2MCIgaGVpZ2h0PSIxLjA4Ii8+PHJlY3QgeD0iMTEuNjEiIHk9IjAiIHdpZHRoPSIwLjc5IiBoZWlnaHQ9IjYwIi8+PHJlY3QgeD0iMCIgeT0iMTEuNjEiIHdpZHRoPSI2MCIgaGVpZ2h0PSIwLjc5Ii8+PHJlY3QgeD0iMTUuNDkiIHk9IjAiIHdpZHRoPSIxLjAyIiBoZWlnaHQ9IjYwIi8+PHJlY3QgeD0iMCIgeT0iMTUuNDkiIHdpZHRoPSI2MCIgaGVpZ2h0PSIxLjAyIi8+PHJlY3QgeD0iMTkuNTMiIHk9IjAiIHdpZHRoPSIwLjkzIiBoZWlnaHQ9IjYwIi8+PHJlY3QgeD0iMCIgeT0iMTkuNTMiIHdpZHRoPSI2MCIgaGVpZ2h0PSIwLjkzIi8+PHJlY3QgeD0iMjMuNjEiIHk9IjAiIHdpZHRoPSIwLjc4IiBoZWlnaHQ9IjYwIi8+PHJlY3QgeD0iMCIgeT0iMjMuNjEiIHdpZHRoPSI2MCIgaGVpZ2h0PSIwLjc4Ii8+PHJlY3QgeD0iMjcuNTAiIHk9IjAiIHdpZHRoPSIxLjAwIiBoZWlnaHQ9IjYwIi8+PHJlY3QgeD0iMCIgeT0iMjcuNTAiIHdpZHRoPSI2MCIgaGVpZ2h0PSIxLjAwIi8+PHJlY3QgeD0iMzEuNjIiIHk9IjAiIHdpZHRoPSIwLjc3IiBoZWlnaHQ9IjYwIi8+PHJlY3QgeD0iMCIgeT0iMzEuNjIiIHdpZHRoPSI2MCIgaGVpZ2h0PSIwLjc3Ii8+PHJlY3QgeD0iMzUuNTIiIHk9IjAiIHdpZHRoPSIwLjk3IiBoZWlnaHQ9IjYwIi8+PHJlY3QgeD0iMCIgeT0iMzUuNTIiIHdpZHRoPSI2MCIgaGVpZ2h0PSIwLjk3Ii8+PHJlY3QgeD0iMzkuNjEiIHk9IjAiIHdpZHRoPSIwLjc4IiBoZWlnaHQ9IjYwIi8+PHJlY3QgeD0iMCIgeT0iMzkuNjEiIHdpZHRoPSI2MCIgaGVpZ2h0PSIwLjc4Ii8+PHJlY3QgeD0iNDMuNjAiIHk9IjAiIHdpZHRoPSIwLjgwIiBoZWlnaHQ9IjYwIi8+PHJlY3QgeD0iMCIgeT0iNDMuNjAiIHdpZHRoPSI2MCIgaGVpZ2h0PSIwLjgwIi8+PHJlY3QgeD0iNDcuNTIiIHk9IjAiIHdpZHRoPSIwLjk2IiBoZWlnaHQ9IjYwIi8+PHJlY3QgeD0iMCIgeT0iNDcuNTIiIHdpZHRoPSI2MCIgaGVpZ2h0PSIwLjk2Ii8+PHJlY3QgeD0iNTEuNDIiIHk9IjAiIHdpZHRoPSIxLjE2IiBoZWlnaHQ9IjYwIi8+PHJlY3QgeD0iMCIgeT0iNTEuNDIiIHdpZHRoPSI2MCIgaGVpZ2h0PSIxLjE2Ii8+PHJlY3QgeD0iNTUuNTkiIHk9IjAiIHdpZHRoPSIwLjgxIiBoZWlnaHQ9IjYwIi8+PHJlY3QgeD0iMCIgeT0iNTUuNTkiIHdpZHRoPSI2MCIgaGVpZ2h0PSIwLjgxIi8+PHJlY3QgeD0iNTkuNTciIHk9IjAiIHdpZHRoPSIwLjg2IiBoZWlnaHQ9IjYwIi8+PHJlY3QgeD0iMCIgeT0iNTkuNTciIHdpZHRoPSI2MCIgaGVpZ2h0PSIwLjg2Ii8+PHJlY3QgeD0iLTAuOTIiIHk9Ii0wLjc5IiB3aWR0aD0iMS45NSIgaGVpZ2h0PSIxLjk1IiByeD0iLjQiLz48cmVjdCB4PSItMC44NiIgeT0iMy4zOCIgd2lkdGg9IjEuNjMiIGhlaWdodD0iMS42MyIgcng9Ii40Ii8+PHJlY3QgeD0iLTAuNzAiIHk9IjcuMDciIHdpZHRoPSIxLjY5IiBoZWlnaHQ9IjEuNjkiIHJ4PSIuNCIvPjxyZWN0IHg9Ii0xLjIwIiB5PSIxMC44OCIgd2lkdGg9IjIuMDkiIGhlaWdodD0iMi4wOSIgcng9Ii40Ii8+PHJlY3QgeD0iLTEuMTIiIHk9IjE1LjA0IiB3aWR0aD0iMS45OCIgaGVpZ2h0PSIxLjk4IiByeD0iLjQiLz48cmVjdCB4PSItMC44NyIgeT0iMTkuMjAiIHdpZHRoPSIxLjY0IiBoZWlnaHQ9IjEuNjQiIHJ4PSIuNCIvPjxyZWN0IHg9Ii0xLjE4IiB5PSIyMi44OCIgd2lkdGg9IjIuMDEiIGhlaWdodD0iMi4wMSIgcng9Ii40Ii8+PHJlY3QgeD0iLTEuMDAiIHk9IjI2Ljk1IiB3aWR0aD0iMS45NSIgaGVpZ2h0PSIxLjk1IiByeD0iLjQiLz48cmVjdCB4PSItMS4wNiIgeT0iMzAuODgiIHdpZHRoPSIyLjA4IiBoZWlnaHQ9IjIuMDgiIHJ4PSIuNCIvPjxyZWN0IHg9Ii0wLjg5IiB5PSIzNC45MyIgd2lkdGg9IjEuOTQiIGhlaWdodD0iMS45NCIgcng9Ii40Ii8+PHJlY3QgeD0iLTEuMDEiIHk9IjM5LjEzIiB3aWR0aD0iMi4wNCIgaGVpZ2h0PSIyLjA0IiByeD0iLjQiLz48cmVjdCB4PSItMC45MiIgeT0iNDMuMzYiIHdpZHRoPSIxLjY3IiBoZWlnaHQ9IjEuNjciIHJ4PSIuNCIvPjxyZWN0IHg9Ii0wLjg4IiB5PSI0Ny4yNiIgd2lkdGg9IjEuNjkiIGhlaWdodD0iMS42OSIgcng9Ii40Ii8+PHJlY3QgeD0iLTEuMDAiIHk9IjUwLjgyIiB3aWR0aD0iMi4wMCIgaGVpZ2h0PSIyLjAwIiByeD0iLjQiLz48cmVjdCB4PSItMC45NiIgeT0iNTQuOTciIHdpZHRoPSIyLjEzIiBoZWlnaHQ9IjIuMTMiIHJ4PSIuNCIvPjxyZWN0IHg9Ii0xLjA1IiB5PSI1OS4xMCIgd2lkdGg9IjEuOTYiIGhlaWdodD0iMS45NiIgcng9Ii40Ii8+PHJlY3QgeD0iMi45OCIgeT0iLTEuMDciIHdpZHRoPSIyLjEwIiBoZWlnaHQ9IjIuMTAiIHJ4PSIuNCIvPjxyZWN0IHg9IjMuMTgiIHk9IjIuOTkiIHdpZHRoPSIyLjAwIiBoZWlnaHQ9IjIuMDAiIHJ4PSIuNCIvPjxyZWN0IHg9IjIuODMiIHk9IjcuMDkiIHdpZHRoPSIxLjk5IiBoZWlnaHQ9IjEuOTkiIHJ4PSIuNCIvPjxyZWN0IHg9IjMuMzEiIHk9IjExLjI0IiB3aWR0aD0iMS43NyIgaGVpZ2h0PSIxLjc3IiByeD0iLjQiLz48cmVjdCB4PSIzLjE1IiB5PSIxNS4yNiIgd2lkdGg9IjEuNjEiIGhlaWdodD0iMS42MSIgcng9Ii40Ii8+PHJlY3QgeD0iMy4xNSIgeT0iMTkuMDMiIHdpZHRoPSIxLjY3IiBoZWlnaHQ9IjEuNjciIHJ4PSIuNCIvPjxyZWN0IHg9IjIuOTgiIHk9IjIzLjI3IiB3aWR0aD0iMS42OCIgaGVpZ2h0PSIxLjY4IiByeD0iLjQiLz48cmVjdCB4PSIyLjg0IiB5PSIyNi44OSIgd2lkdGg9IjIuMTIiIGhlaWdodD0iMi4xMiIgcng9Ii40Ii8+PHJlY3QgeD0iMi44NyIgeT0iMzEuMDEiIHdpZHRoPSIxLjkzIiBoZWlnaHQ9IjEuOTMiIHJ4PSIuNCIvPjxyZWN0IHg9IjMuMDkiIHk9IjM1LjA3IiB3aWR0aD0iMi4xMiIgaGVpZ2h0PSIyLjEyIiByeD0iLjQiLz48cmVjdCB4PSIzLjAwIiB5PSIzOS4wNiIgd2lkdGg9IjEuODIiIGhlaWdodD0iMS44MiIgcng9Ii40Ii8+PHJlY3QgeD0iMy4zMSIgeT0iNDMuMzQiIHdpZHRoPSIxLjY5IiBoZWlnaHQ9IjEuNjkiIHJ4PSIuNCIvPjxyZWN0IHg9IjMuMDAiIHk9IjQ3LjAyIiB3aWR0aD0iMS43NCIgaGVpZ2h0PSIxLjc0IiByeD0iLjQiLz48cmVjdCB4PSIzLjEyIiB5PSI1MS4xNiIgd2lkdGg9IjEuNzYiIGhlaWdodD0iMS43NiIgcng9Ii40Ii8+PHJlY3QgeD0iMi44OSIgeT0iNTUuMDYiIHdpZHRoPSIxLjgyIiBoZWlnaHQ9IjEuODIiIHJ4PSIuNCIvPjxyZWN0IHg9IjMuMDIiIHk9IjU5LjE3IiB3aWR0aD0iMi4wMSIgaGVpZ2h0PSIyLjAxIiByeD0iLjQiLz48cmVjdCB4PSI3LjAwIiB5PSItMC45NiIgd2lkdGg9IjIuMDEiIGhlaWdodD0iMi4wMSIgcng9Ii40Ii8+PHJlY3QgeD0iNi43OSIgeT0iMy4xMyIgd2lkdGg9IjIuMDciIGhlaWdodD0iMi4wNyIgcng9Ii40Ii8+PHJlY3QgeD0iNy4yMyIgeT0iNy4yMCIgd2lkdGg9IjEuODQiIGhlaWdodD0iMS44NCIgcng9Ii40Ii8+PHJlY3QgeD0iNi45NyIgeT0iMTAuODUiIHdpZHRoPSIxLjk4IiBoZWlnaHQ9IjEuOTgiIHJ4PSIuNCIvPjxyZWN0IHg9IjYuOTYiIHk9IjE0Ljk2IiB3aWR0aD0iMS43MyIgaGVpZ2h0PSIxLjczIiByeD0iLjQiLz48cmVjdCB4PSI3LjA1IiB5PSIxOS4xMiIgd2lkdGg9IjEuNjMiIGhlaWdodD0iMS42MyIgcng9Ii40Ii8+PHJlY3QgeD0iNi45NyIgeT0iMjMuMDMiIHdpZHRoPSIxLjY2IiBoZWlnaHQ9IjEuNjYiIHJ4PSIuNCIvPjxyZWN0IHg9IjYuODgiIHk9IjI2Ljc1IiB3aWR0aD0iMi4xMiIgaGVpZ2h0PSIyLjEyIiByeD0iLjQiLz48cmVjdCB4PSI3LjE3IiB5PSIzMC45OCIgd2lkdGg9IjEuNzUiIGhlaWdodD0iMS43NSIgcng9Ii40Ii8+PHJlY3QgeD0iNy4xMCIgeT0iMzUuMTEiIHdpZHRoPSIxLjY3IiBoZWlnaHQ9IjEuNjciIHJ4PSIuNCIvPjxyZWN0IHg9IjcuMjAiIHk9IjM5LjI2IiB3aWR0aD0iMS44OCIgaGVpZ2h0PSIxLjg4IiByeD0iLjQiLz48cmVjdCB4PSI3LjE2IiB5PSI0My4wMCIgd2lkdGg9IjEuNjYiIGhlaWdodD0iMS42NiIgcng9Ii40Ii8+PHJlY3QgeD0iNi44OSIgeT0iNDYuODYiIHdpZHRoPSIyLjEwIiBoZWlnaHQ9IjIuMTAiIHJ4PSIuNCIvPjxyZWN0IHg9IjYuNzgiIHk9IjUwLjcyIiB3aWR0aD0iMi4xNyIgaGVpZ2h0PSIyLjE3IiByeD0iLjQiLz48cmVjdCB4PSI3LjA1IiB5PSI1NC45MCIgd2lkdGg9IjEuOTMiIGhlaWdodD0iMS45MyIgcng9Ii40Ii8+PHJlY3QgeD0iNi43MiIgeT0iNTguOTIiIHdpZHRoPSIyLjE5IiBoZWlnaHQ9IjIuMTkiIHJ4PSIuNCIvPjxyZWN0IHg9IjExLjI3IiB5PSItMC44MCIgd2lkdGg9IjEuNzYiIGhlaWdodD0iMS43NiIgcng9Ii40Ii8+PHJlY3QgeD0iMTAuOTIiIHk9IjIuODQiIHdpZHRoPSIyLjA2IiBoZWlnaHQ9IjIuMDYiIHJ4PSIuNCIvPjxyZWN0IHg9IjExLjExIiB5PSI3LjIxIiB3aWR0aD0iMS44MCIgaGVpZ2h0PSIxLjgwIiByeD0iLjQiLz48cmVjdCB4PSIxMC43OSIgeT0iMTEuMDMiIHdpZHRoPSIyLjE5IiBoZWlnaHQ9IjIuMTkiIHJ4PSIuNCIvPjxyZWN0IHg9IjExLjEwIiB5PSIxNS4wOCIgd2lkdGg9IjIuMDkiIGhlaWdodD0iMi4wOSIgcng9Ii40Ii8+PHJlY3QgeD0iMTEuMTQiIHk9IjE4Ljk0IiB3aWR0aD0iMS45MSIgaGVpZ2h0PSIxLjkxIiByeD0iLjQiLz48cmVjdCB4PSIxMS4xMyIgeT0iMjMuMDAiIHdpZHRoPSIxLjYyIiBoZWlnaHQ9IjEuNjIiIHJ4PSIuNCIvPjxyZWN0IHg9IjEwLjkwIiB5PSIyNi45MCIgd2lkdGg9IjIuMDIiIGhlaWdodD0iMi4wMiIgcng9Ii40Ii8+PHJlY3QgeD0iMTEuMTAiIHk9IjMwLjkwIiB3aWR0aD0iMi4xNiIgaGVpZ2h0PSIyLjE2IiByeD0iLjQiLz48cmVjdCB4PSIxMS4yOSIgeT0iMzUuMjciIHdpZHRoPSIxLjgyIiBoZWlnaHQ9IjEuODIiIHJ4PSIuNCIvPjxyZWN0IHg9IjExLjAzIiB5PSIzOS4wMyIgd2lkdGg9IjEuNzIiIGhlaWdodD0iMS43MiIgcng9Ii40Ii8+PHJlY3QgeD0iMTAuODEiIHk9IjQyLjk4IiB3aWR0aD0iMi4xNCIgaGVpZ2h0PSIyLjE0IiByeD0iLjQiLz48cmVjdCB4PSIxMS4xNCIgeT0iNDcuMDAiIHdpZHRoPSIxLjk5IiBoZWlnaHQ9IjEuOTkiIHJ4PSIuNCIvPjxyZWN0IHg9IjExLjEyIiB5PSI1MC44NCIgd2lkdGg9IjIuMDAiIGhlaWdodD0iMi4wMCIgcng9Ii40Ii8+PHJlY3QgeD0iMTEuMTQiIHk9IjU1LjA5IiB3aWR0aD0iMi4wNSIgaGVpZ2h0PSIyLjA1IiByeD0iLjQiLz48cmVjdCB4PSIxMC45NSIgeT0iNTguODMiIHdpZHRoPSIyLjA3IiBoZWlnaHQ9IjIuMDciIHJ4PSIuNCIvPjxyZWN0IHg9IjE0Ljg0IiB5PSItMC45NyIgd2lkdGg9IjIuMTgiIGhlaWdodD0iMi4xOCIgcng9Ii40Ii8+PHJlY3QgeD0iMTQuODciIHk9IjIuODgiIHdpZHRoPSIyLjE3IiBoZWlnaHQ9IjIuMTciIHJ4PSIuNCIvPjxyZWN0IHg9IjE1LjI1IiB5PSI3LjAzIiB3aWR0aD0iMS42OCIgaGVpZ2h0PSIxLjY4IiByeD0iLjQiLz48cmVjdCB4PSIxNC44MiIgeT0iMTEuMTIiIHdpZHRoPSIyLjA4IiBoZWlnaHQ9IjIuMDgiIHJ4PSIuNCIvPjxyZWN0IHg9IjE0Ljc2IiB5PSIxNS4wNCIgd2lkdGg9IjIuMTkiIGhlaWdodD0iMi4xOSIgcng9Ii40Ii8+PHJlY3QgeD0iMTUuMTAiIHk9IjE4Ljk4IiB3aWR0aD0iMS45MyIgaGVpZ2h0PSIxLjkzIiByeD0iLjQiLz48cmVjdCB4PSIxNC43NiIgeT0iMjIuNzEiIHdpZHRoPSIyLjE4IiBoZWlnaHQ9IjIuMTgiIHJ4PSIuNCIvPjxyZWN0IHg9IjE0Ljk4IiB5PSIyNi45MyIgd2lkdGg9IjIuMTYiIGhlaWdodD0iMi4xNiIgcng9Ii40Ii8+PHJlY3QgeD0iMTQuOTMiIHk9IjMxLjEwIiB3aWR0aD0iMi4xMCIgaGVpZ2h0PSIyLjEwIiByeD0iLjQiLz48cmVjdCB4PSIxNS4wMCIgeT0iMzUuMDEiIHdpZHRoPSIxLjc4IiBoZWlnaHQ9IjEuNzgiIHJ4PSIuNCIvPjxyZWN0IHg9IjE1LjAyIiB5PSIzOS4xNiIgd2lkdGg9IjEuNzYiIGhlaWdodD0iMS43NiIgcng9Ii40Ii8+PHJlY3QgeD0iMTQuODkiIHk9IjQyLjc4IiB3aWR0aD0iMi4xNSIgaGVpZ2h0PSIyLjE1IiByeD0iLjQiLz48cmVjdCB4PSIxNC45NyIgeT0iNDcuMDEiIHdpZHRoPSIxLjk1IiBoZWlnaHQ9IjEuOTUiIHJ4PSIuNCIvPjxyZWN0IHg9IjE1LjA5IiB5PSI1MC44OSIgd2lkdGg9IjIuMTUiIGhlaWdodD0iMi4xNSIgcng9Ii40Ii8+PHJlY3QgeD0iMTUuMDQiIHk9IjU1LjA2IiB3aWR0aD0iMS45MSIgaGVpZ2h0PSIxLjkxIiByeD0iLjQiLz48cmVjdCB4PSIxNC45NSIgeT0iNTkuMTIiIHdpZHRoPSIxLjcxIiBoZWlnaHQ9IjEuNzEiIHJ4PSIuNCIvPjxyZWN0IHg9IjE4Ljk1IiB5PSItMC43MyIgd2lkdGg9IjEuNzAiIGhlaWdodD0iMS43MCIgcng9Ii40Ii8+PHJlY3QgeD0iMTkuMDIiIHk9IjMuMTIiIHdpZHRoPSIxLjkzIiBoZWlnaHQ9IjEuOTMiIHJ4PSIuNCIvPjxyZWN0IHg9IjE4Ljk2IiB5PSI3LjA0IiB3aWR0aD0iMS45MyIgaGVpZ2h0PSIxLjkzIiByeD0iLjQiLz48cmVjdCB4PSIxOS4xNSIgeT0iMTAuODciIHdpZHRoPSIxLjk0IiBoZWlnaHQ9IjEuOTQiIHJ4PSIuNCIvPjxyZWN0IHg9IjE4Ljg3IiB5PSIxNC44OCIgd2lkdGg9IjIuMDYiIGhlaWdodD0iMi4wNiIgcng9Ii40Ii8+PHJlY3QgeD0iMTguOTgiIHk9IjE5LjAwIiB3aWR0aD0iMi4wNiIgaGVpZ2h0PSIyLjA2IiByeD0iLjQiLz48cmVjdCB4PSIxOS4xOCIgeT0iMjIuOTkiIHdpZHRoPSIxLjk3IiBoZWlnaHQ9IjEuOTciIHJ4PSIuNCIvPjxyZWN0IHg9IjE4Ljk5IiB5PSIyNy4wMCIgd2lkdGg9IjIuMDIiIGhlaWdodD0iMi4wMiIgcng9Ii40Ii8+PHJlY3QgeD0iMTkuMDQiIHk9IjMxLjA3IiB3aWR0aD0iMS44OSIgaGVpZ2h0PSIxLjg5IiByeD0iLjQiLz48cmVjdCB4PSIxOS4xMSIgeT0iMzUuMDIiIHdpZHRoPSIyLjEzIiBoZWlnaHQ9IjIuMTMiIHJ4PSIuNCIvPjxyZWN0IHg9IjE5LjIxIiB5PSIzOC45NCIgd2lkdGg9IjEuOTQiIGhlaWdodD0iMS45NCIgcng9Ii40Ii8+PHJlY3QgeD0iMTkuMzQiIHk9IjQzLjI5IiB3aWR0aD0iMS42OCIgaGVpZ2h0PSIxLjY4IiByeD0iLjQiLz48cmVjdCB4PSIxOS4wMyIgeT0iNDcuMTYiIHdpZHRoPSIxLjY0IiBoZWlnaHQ9IjEuNjQiIHJ4PSIuNCIvPjxyZWN0IHg9IjE4LjkwIiB5PSI1MC44MyIgd2lkdGg9IjIuMDAiIGhlaWdodD0iMi4wMCIgcng9Ii40Ii8+PHJlY3QgeD0iMTkuMjciIHk9IjU1LjMxIiB3aWR0aD0iMS42OSIgaGVpZ2h0PSIxLjY5IiByeD0iLjQiLz48cmVjdCB4PSIxOS4yNCIgeT0iNTkuMjIiIHdpZHRoPSIxLjY5IiBoZWlnaHQ9IjEuNjkiIHJ4PSIuNCIvPjxyZWN0IHg9IjIzLjI5IiB5PSItMC42OCIgd2lkdGg9IjEuNzMiIGhlaWdodD0iMS43MyIgcng9Ii40Ii8+PHJlY3QgeD0iMjMuMjMiIHk9IjMuMDEiIHdpZHRoPSIxLjg5IiBoZWlnaHQ9IjEuODkiIHJ4PSIuNCIvPjxyZWN0IHg9IjIzLjM1IiB5PSI3LjI4IiB3aWR0aD0iMS43MCIgaGVpZ2h0PSIxLjcwIiByeD0iLjQiLz48cmVjdCB4PSIyMy4wNyIgeT0iMTEuMTAiIHdpZHRoPSIxLjgwIiBoZWlnaHQ9IjEuODAiIHJ4PSIuNCIvPjxyZWN0IHg9IjIyLjg2IiB5PSIxNC45MSIgd2lkdGg9IjIuMDMiIGhlaWdodD0iMi4wMyIgcng9Ii40Ii8+PHJlY3QgeD0iMjIuODgiIHk9IjE5LjA5IiB3aWR0aD0iMS44NiIgaGVpZ2h0PSIxLjg2IiByeD0iLjQiLz48cmVjdCB4PSIyMi44MiIgeT0iMjIuOTUiIHdpZHRoPSIxLjk3IiBoZWlnaHQ9IjEuOTciIHJ4PSIuNCIvPjxyZWN0IHg9IjIyLjkxIiB5PSIyNi43MyIgd2lkdGg9IjIuMTkiIGhlaWdodD0iMi4xOSIgcng9Ii40Ii8+PHJlY3QgeD0iMjMuMjgiIHk9IjMxLjM2IiB3aWR0aD0iMS42NiIgaGVpZ2h0PSIxLjY2IiByeD0iLjQiLz48cmVjdCB4PSIyMi44NyIgeT0iMzQuNzgiIHdpZHRoPSIyLjA3IiBoZWlnaHQ9IjIuMDciIHJ4PSIuNCIvPjxyZWN0IHg9IjIyLjk4IiB5PSIzOC45MyIgd2lkdGg9IjEuODUiIGhlaWdodD0iMS44NSIgcng9Ii40Ii8+PHJlY3QgeD0iMjMuMjkiIHk9IjQzLjI1IiB3aWR0aD0iMS43NiIgaGVpZ2h0PSIxLjc2IiByeD0iLjQiLz48cmVjdCB4PSIyMi44OSIgeT0iNDcuMjAiIHdpZHRoPSIxLjk0IiBoZWlnaHQ9IjEuOTQiIHJ4PSIuNCIvPjxyZWN0IHg9IjIzLjI2IiB5PSI1MS4wMiIgd2lkdGg9IjEuNjMiIGhlaWdodD0iMS42MyIgcng9Ii40Ii8+PHJlY3QgeD0iMjMuMjUiIHk9IjU1LjE1IiB3aWR0aD0iMS42NCIgaGVpZ2h0PSIxLjY0IiByeD0iLjQiLz48cmVjdCB4PSIyMy4xMyIgeT0iNTkuMDEiIHdpZHRoPSIyLjA4IiBoZWlnaHQ9IjIuMDgiIHJ4PSIuNCIvPjxyZWN0IHg9IjI3LjAxIiB5PSItMC42OCIgd2lkdGg9IjEuNjQiIGhlaWdodD0iMS42NCIgcng9Ii40Ii8+PHJlY3QgeD0iMjcuMjQiIHk9IjMuMDgiIHdpZHRoPSIxLjgwIiBoZWlnaHQ9IjEuODAiIHJ4PSIuNCIvPjxyZWN0IHg9IjI3LjE0IiB5PSI3LjI5IiB3aWR0aD0iMS43NiIgaGVpZ2h0PSIxLjc2IiByeD0iLjQiLz48cmVjdCB4PSIyNi45OCIgeT0iMTEuMTQiIHdpZHRoPSIxLjc0IiBoZWlnaHQ9IjEuNzQiIHJ4PSIuNCIvPjxyZWN0IHg9IjI3LjAzIiB5PSIxNS4wNSIgd2lkdGg9IjEuNjMiIGhlaWdodD0iMS42MyIgcng9Ii40Ii8+PHJlY3QgeD0iMjYuOTkiIHk9IjE5LjAzIiB3aWR0aD0iMS43OCIgaGVpZ2h0PSIxLjc4IiByeD0iLjQiLz48cmVjdCB4PSIyNy4xNSIgeT0iMjIuOTciIHdpZHRoPSIxLjkwIiBoZWlnaHQ9IjEuOTAiIHJ4PSIuNCIvPjxyZWN0IHg9IjI3LjA3IiB5PSIyNy4xMyIgd2lkdGg9IjEuNjEiIGhlaWdodD0iMS42MSIgcng9Ii40Ii8+PHJlY3QgeD0iMjYuODgiIHk9IjMwLjc5IiB3aWR0aD0iMi4wNCIgaGVpZ2h0PSIyLjA0IiByeD0iLjQiLz48cmVjdCB4PSIyNy4wOCIgeT0iMzQuOTMiIHdpZHRoPSIxLjg4IiBoZWlnaHQ9IjEuODgiIHJ4PSIuNCIvPjxyZWN0IHg9IjI3LjEzIiB5PSIzOC44MCIgd2lkdGg9IjIuMDkiIGhlaWdodD0iMi4wOSIgcng9Ii40Ii8+PHJlY3QgeD0iMjYuOTIiIHk9IjQyLjk1IiB3aWR0aD0iMi4xMCIgaGVpZ2h0PSIyLjEwIiByeD0iLjQiLz48cmVjdCB4PSIyNi45NSIgeT0iNDcuMDAiIHdpZHRoPSIyLjAxIiBoZWlnaHQ9IjIuMDEiIHJ4PSIuNCIvPjxyZWN0IHg9IjI3LjE0IiB5PSI1MC44OSIgd2lkdGg9IjIuMTAiIGhlaWdodD0iMi4xMCIgcng9Ii40Ii8+PHJlY3QgeD0iMjcuMTYiIHk9IjU1LjEzIiB3aWR0aD0iMS44NCIgaGVpZ2h0PSIxLjg0IiByeD0iLjQiLz48cmVjdCB4PSIyNy4xMCIgeT0iNTguOTgiIHdpZHRoPSIxLjY4IiBoZWlnaHQ9IjEuNjgiIHJ4PSIuNCIvPjxyZWN0IHg9IjMwLjk1IiB5PSItMC43OCIgd2lkdGg9IjEuNzUiIGhlaWdodD0iMS43NSIgcng9Ii40Ii8+PHJlY3QgeD0iMzAuODEiIHk9IjIuNzgiIHdpZHRoPSIyLjEwIiBoZWlnaHQ9IjIuMTAiIHJ4PSIuNCIvPjxyZWN0IHg9IjMxLjI2IiB5PSI3LjE4IiB3aWR0aD0iMS43NyIgaGVpZ2h0PSIxLjc3IiByeD0iLjQiLz48cmVjdCB4PSIzMC45NiIgeT0iMTAuOTgiIHdpZHRoPSIxLjg4IiBoZWlnaHQ9IjEuODgiIHJ4PSIuNCIvPjxyZWN0IHg9IjMwLjk4IiB5PSIxNS4xMCIgd2lkdGg9IjEuNzYiIGhlaWdodD0iMS43NiIgcng9Ii40Ii8+PHJlY3QgeD0iMzEuMjIiIHk9IjE5LjIyIiB3aWR0aD0iMS45MyIgaGVpZ2h0PSIxLjkzIiByeD0iLjQiLz48cmVjdCB4PSIzMS4wMCIgeT0iMjMuMjkiIHdpZHRoPSIxLjc5IiBoZWlnaHQ9IjEuNzkiIHJ4PSIuNCIvPjxyZWN0IHg9IjMxLjAzIiB5PSIyNi44OSIgd2lkdGg9IjEuODMiIGhlaWdodD0iMS44MyIgcng9Ii40Ii8+PHJlY3QgeD0iMzEuMTMiIHk9IjMxLjE0IiB3aWR0aD0iMS43MiIgaGVpZ2h0PSIxLjcyIiByeD0iLjQiLz48cmVjdCB4PSIzMS4xMiIgeT0iMzQuOTIiIHdpZHRoPSIxLjc2IiBoZWlnaHQ9IjEuNzYiIHJ4PSIuNCIvPjxyZWN0IHg9IjMxLjAyIiB5PSIzOS4xNSIgd2lkdGg9IjEuNjMiIGhlaWdodD0iMS42MyIgcng9Ii40Ii8+PHJlY3QgeD0iMzAuOTQiIHk9IjQzLjA1IiB3aWR0aD0iMS43NCIgaGVpZ2h0PSIxLjc0IiByeD0iLjQiLz48cmVjdCB4PSIzMS4wMSIgeT0iNDYuOTkiIHdpZHRoPSIyLjA1IiBoZWlnaHQ9IjIuMDUiIHJ4PSIuNCIvPjxyZWN0IHg9IjMxLjAwIiB5PSI1MS4wMiIgd2lkdGg9IjIuMTMiIGhlaWdodD0iMi4xMyIgcng9Ii40Ii8+PHJlY3QgeD0iMzAuODYiIHk9IjU0Ljg0IiB3aWR0aD0iMi4xOSIgaGVpZ2h0PSIyLjE5IiByeD0iLjQiLz48cmVjdCB4PSIzMC44NyIgeT0iNTkuMTAiIHdpZHRoPSIxLjk5IiBoZWlnaHQ9IjEuOTkiIHJ4PSIuNCIvPjxyZWN0IHg9IjM0Ljc1IiB5PSItMC45MyIgd2lkdGg9IjIuMTQiIGhlaWdodD0iMi4xNCIgcng9Ii40Ii8+PHJlY3QgeD0iMzUuMDEiIHk9IjMuMDUiIHdpZHRoPSIyLjA5IiBoZWlnaHQ9IjIuMDkiIHJ4PSIuNCIvPjxyZWN0IHg9IjM0LjkwIiB5PSI3LjA2IiB3aWR0aD0iMS45MCIgaGVpZ2h0PSIxLjkwIiByeD0iLjQiLz48cmVjdCB4PSIzNS4wOSIgeT0iMTEuMDciIHdpZHRoPSIyLjEwIiBoZWlnaHQ9IjIuMTAiIHJ4PSIuNCIvPjxyZWN0IHg9IjM1LjAzIiB5PSIxNS4xNSIgd2lkdGg9IjIuMDEiIGhlaWdodD0iMi4wMSIgcng9Ii40Ii8+PHJlY3QgeD0iMzUuMjciIHk9IjE5LjA4IiB3aWR0aD0iMS42MiIgaGVpZ2h0PSIxLjYyIiByeD0iLjQiLz48cmVjdCB4PSIzNS4wMiIgeT0iMjMuMTEiIHdpZHRoPSIxLjY2IiBoZWlnaHQ9IjEuNjYiIHJ4PSIuNCIvPjxyZWN0IHg9IjM1LjE1IiB5PSIyNy4wNCIgd2lkdGg9IjEuOTgiIGhlaWdodD0iMS45OCIgcng9Ii40Ii8+PHJlY3QgeD0iMzUuMTAiIHk9IjMxLjEzIiB3aWR0aD0iMS44OSIgaGVpZ2h0PSIxLjg5IiByeD0iLjQiLz48cmVjdCB4PSIzNC43OCIgeT0iMzUuMDkiIHdpZHRoPSIyLjA1IiBoZWlnaHQ9IjIuMDUiIHJ4PSIuNCIvPjxyZWN0IHg9IjM1LjAwIiB5PSIzOS4wMiIgd2lkdGg9IjIuMDAiIGhlaWdodD0iMi4wMCIgcng9Ii40Ii8+PHJlY3QgeD0iMzQuOTUiIHk9IjQzLjIyIiB3aWR0aD0iMS43NSIgaGVpZ2h0PSIxLjc1IiByeD0iLjQiLz48cmVjdCB4PSIzNC44MSIgeT0iNDYuODkiIHdpZHRoPSIyLjA0IiBoZWlnaHQ9IjIuMDQiIHJ4PSIuNCIvPjxyZWN0IHg9IjM0Ljc5IiB5PSI1MS4wMCIgd2lkdGg9IjIuMTkiIGhlaWdodD0iMi4xOSIgcng9Ii40Ii8+PHJlY3QgeD0iMzUuMDUiIHk9IjU1LjAxIiB3aWR0aD0iMS44OSIgaGVpZ2h0PSIxLjg5IiByeD0iLjQiLz48cmVjdCB4PSIzNS4wOSIgeT0iNTkuMTIiIHdpZHRoPSIxLjk3IiBoZWlnaHQ9IjEuOTciIHJ4PSIuNCIvPjxyZWN0IHg9IjM5LjIxIiB5PSItMS4wMSIgd2lkdGg9IjEuNjkiIGhlaWdodD0iMS42OSIgcng9Ii40Ii8+PHJlY3QgeD0iMzkuMDEiIHk9IjMuMjEiIHdpZHRoPSIxLjc4IiBoZWlnaHQ9IjEuNzgiIHJ4PSIuNCIvPjxyZWN0IHg9IjM5LjIxIiB5PSI2Ljk5IiB3aWR0aD0iMS42NCIgaGVpZ2h0PSIxLjY0IiByeD0iLjQiLz48cmVjdCB4PSIzOC45MCIgeT0iMTEuMDYiIHdpZHRoPSIyLjAyIiBoZWlnaHQ9IjIuMDIiIHJ4PSIuNCIvPjxyZWN0IHg9IjM5LjEyIiB5PSIxNC45NiIgd2lkdGg9IjEuOTEiIGhlaWdodD0iMS45MSIgcng9Ii40Ii8+PHJlY3QgeD0iMzkuMTUiIHk9IjE5LjE1IiB3aWR0aD0iMS42NyIgaGVpZ2h0PSIxLjY3IiByeD0iLjQiLz48cmVjdCB4PSIzOS4wNiIgeT0iMjIuNzkiIHdpZHRoPSIyLjE5IiBoZWlnaHQ9IjIuMTkiIHJ4PSIuNCIvPjxyZWN0IHg9IjM5LjI0IiB5PSIyNi44NyIgd2lkdGg9IjEuODgiIGhlaWdodD0iMS44OCIgcng9Ii40Ii8+PHJlY3QgeD0iMzkuMTkiIHk9IjMxLjI1IiB3aWR0aD0iMS44NyIgaGVpZ2h0PSIxLjg3IiByeD0iLjQiLz48cmVjdCB4PSIzOC44MiIgeT0iMzQuODAiIHdpZHRoPSIyLjE3IiBoZWlnaHQ9IjIuMTciIHJ4PSIuNCIvPjxyZWN0IHg9IjM5LjA0IiB5PSIzOS4xOSIgd2lkdGg9IjEuNjkiIGhlaWdodD0iMS42OSIgcng9Ii40Ii8+PHJlY3QgeD0iMzkuMTciIHk9IjQzLjM0IiB3aWR0aD0iMS42OCIgaGVpZ2h0PSIxLjY4IiByeD0iLjQiLz48cmVjdCB4PSIzOS4wNiIgeT0iNDYuOTQiIHdpZHRoPSIyLjEzIiBoZWlnaHQ9IjIuMTMiIHJ4PSIuNCIvPjxyZWN0IHg9IjM5LjAxIiB5PSI1MC44MiIgd2lkdGg9IjIuMTQiIGhlaWdodD0iMi4xNCIgcng9Ii40Ii8+PHJlY3QgeD0iMzkuMTkiIHk9IjU1LjAxIiB3aWR0aD0iMS42MCIgaGVpZ2h0PSIxLjYwIiByeD0iLjQiLz48cmVjdCB4PSIzOS4xMSIgeT0iNTkuMDkiIHdpZHRoPSIxLjc4IiBoZWlnaHQ9IjEuNzgiIHJ4PSIuNCIvPjxyZWN0IHg9IjQyLjk2IiB5PSItMC45NiIgd2lkdGg9IjEuNzkiIGhlaWdodD0iMS43OSIgcng9Ii40Ii8+PHJlY3QgeD0iNDMuMTEiIHk9IjIuNzgiIHdpZHRoPSIyLjA1IiBoZWlnaHQ9IjIuMDUiIHJ4PSIuNCIvPjxyZWN0IHg9IjQzLjA2IiB5PSI2Ljc3IiB3aWR0aD0iMi4xNiIgaGVpZ2h0PSIyLjE2IiByeD0iLjQiLz48cmVjdCB4PSI0My4yMCIgeT0iMTEuMjciIHdpZHRoPSIxLjc3IiBoZWlnaHQ9IjEuNzciIHJ4PSIuNCIvPjxyZWN0IHg9IjQyLjg1IiB5PSIxNC44NiIgd2lkdGg9IjIuMjAiIGhlaWdodD0iMi4yMCIgcng9Ii40Ii8+PHJlY3QgeD0iNDMuMTEiIHk9IjE5LjAyIiB3aWR0aD0iMS44NiIgaGVpZ2h0PSIxLjg2IiByeD0iLjQiLz48cmVjdCB4PSI0My4wOCIgeT0iMjIuOTkiIHdpZHRoPSIxLjY2IiBoZWlnaHQ9IjEuNjYiIHJ4PSIuNCIvPjxyZWN0IHg9IjQzLjA1IiB5PSIyNi44MyIgd2lkdGg9IjIuMTYiIGhlaWdodD0iMi4xNiIgcng9Ii40Ii8+PHJlY3QgeD0iNDIuOTUiIHk9IjMwLjk1IiB3aWR0aD0iMS45MSIgaGVpZ2h0PSIxLjkxIiByeD0iLjQiLz48cmVjdCB4PSI0Mi43OSIgeT0iMzQuODYiIHdpZHRoPSIyLjE3IiBoZWlnaHQ9IjIuMTciIHJ4PSIuNCIvPjxyZWN0IHg9IjQzLjE2IiB5PSIzOS4xNCIgd2lkdGg9IjEuOTgiIGhlaWdodD0iMS45OCIgcng9Ii40Ii8+PHJlY3QgeD0iNDMuMjAiIHk9IjQzLjIxIiB3aWR0aD0iMS45MyIgaGVpZ2h0PSIxLjkzIiByeD0iLjQiLz48cmVjdCB4PSI0My4wNyIgeT0iNDYuODAiIHdpZHRoPSIyLjA0IiBoZWlnaHQ9IjIuMDQiIHJ4PSIuNCIvPjxyZWN0IHg9IjQyLjk5IiB5PSI1MS4xMSIgd2lkdGg9IjEuOTkiIGhlaWdodD0iMS45OSIgcng9Ii40Ii8+PHJlY3QgeD0iNDIuODQiIHk9IjU0Ljc0IiB3aWR0aD0iMi4xNiIgaGVpZ2h0PSIyLjE2IiByeD0iLjQiLz48cmVjdCB4PSI0Mi45NSIgeT0iNTkuMDkiIHdpZHRoPSIxLjgxIiBoZWlnaHQ9IjEuODEiIHJ4PSIuNCIvPjxyZWN0IHg9IjQ2LjgzIiB5PSItMS4wMCIgd2lkdGg9IjIuMTkiIGhlaWdodD0iMi4xOSIgcng9Ii40Ii8+PHJlY3QgeD0iNDcuMDEiIHk9IjMuMTciIHdpZHRoPSIxLjc4IiBoZWlnaHQ9IjEuNzgiIHJ4PSIuNCIvPjxyZWN0IHg9IjQ3LjE3IiB5PSI3LjExIiB3aWR0aD0iMS43MCIgaGVpZ2h0PSIxLjcwIiByeD0iLjQiLz48cmVjdCB4PSI0Ni43OSIgeT0iMTAuODEiIHdpZHRoPSIyLjE0IiBoZWlnaHQ9IjIuMTQiIHJ4PSIuNCIvPjxyZWN0IHg9IjQ2LjkzIiB5PSIxNC44MiIgd2lkdGg9IjIuMTQiIGhlaWdodD0iMi4xNCIgcng9Ii40Ii8+PHJlY3QgeD0iNDcuMzYiIHk9IjE5LjE0IiB3aWR0aD0iMS42OCIgaGVpZ2h0PSIxLjY4IiByeD0iLjQiLz48cmVjdCB4PSI0Ni45NyIgeT0iMjIuOTMiIHdpZHRoPSIxLjgxIiBoZWlnaHQ9IjEuODEiIHJ4PSIuNCIvPjxyZWN0IHg9IjQ2Ljk2IiB5PSIyNy4wMiIgd2lkdGg9IjEuNzYiIGhlaWdodD0iMS43NiIgcng9Ii40Ii8+PHJlY3QgeD0iNDcuMDAiIHk9IjMxLjEzIiB3aWR0aD0iMi4wNSIgaGVpZ2h0PSIyLjA1IiByeD0iLjQiLz48cmVjdCB4PSI0Ny4wMSIgeT0iMzUuMDEiIHdpZHRoPSIxLjkxIiBoZWlnaHQ9IjEuOTEiIHJ4PSIuNCIvPjxyZWN0IHg9IjQ3LjEzIiB5PSIzOS4xMiIgd2lkdGg9IjEuNjQiIGhlaWdodD0iMS42NCIgcng9Ii40Ii8+PHJlY3QgeD0iNDcuMDciIHk9IjQzLjM1IiB3aWR0aD0iMS42OCIgaGVpZ2h0PSIxLjY4IiByeD0iLjQiLz48cmVjdCB4PSI0Ni45NCIgeT0iNDYuOTkiIHdpZHRoPSIyLjEyIiBoZWlnaHQ9IjIuMTIiIHJ4PSIuNCIvPjxyZWN0IHg9IjQ3LjAxIiB5PSI1MS4wMyIgd2lkdGg9IjEuNzUiIGhlaWdodD0iMS43NSIgcng9Ii40Ii8+PHJlY3QgeD0iNDYuODciIHk9IjU0Ljg5IiB3aWR0aD0iMi4xNyIgaGVpZ2h0PSIyLjE3IiByeD0iLjQiLz48cmVjdCB4PSI0Ny4zMyIgeT0iNTkuMzQiIHdpZHRoPSIxLjYxIiBoZWlnaHQ9IjEuNjEiIHJ4PSIuNCIvPjxyZWN0IHg9IjUwLjc0IiB5PSItMC45OCIgd2lkdGg9IjIuMTQiIGhlaWdodD0iMi4xNCIgcng9Ii40Ii8+PHJlY3QgeD0iNTEuMTkiIHk9IjMuMjMiIHdpZHRoPSIxLjYwIiBoZWlnaHQ9IjEuNjAiIHJ4PSIuNCIvPjxyZWN0IHg9IjUwLjkxIiB5PSI3LjEyIiB3aWR0aD0iMi4xMCIgaGVpZ2h0PSIyLjEwIiByeD0iLjQiLz48cmVjdCB4PSI1MS4yNyIgeT0iMTEuMzEiIHdpZHRoPSIxLjc1IiBoZWlnaHQ9IjEuNzUiIHJ4PSIuNCIvPjxyZWN0IHg9IjUwLjg5IiB5PSIxNC45MSIgd2lkdGg9IjEuOTEiIGhlaWdodD0iMS45MSIgcng9Ii40Ii8+PHJlY3QgeD0iNTEuMDYiIHk9IjE5LjE2IiB3aWR0aD0iMi4wMyIgaGVpZ2h0PSIyLjAzIiByeD0iLjQiLz48cmVjdCB4PSI1MS4xMiIgeT0iMjMuMTciIHdpZHRoPSIxLjg3IiBoZWlnaHQ9IjEuODciIHJ4PSIuNCIvPjxyZWN0IHg9IjUwLjk5IiB5PSIyNi43OCIgd2lkdGg9IjIuMDciIGhlaWdodD0iMi4wNyIgcng9Ii40Ii8+PHJlY3QgeD0iNTAuOTAiIHk9IjMxLjE3IiB3aWR0aD0iMS45OSIgaGVpZ2h0PSIxLjk5IiByeD0iLjQiLz48cmVjdCB4PSI1MS4wNSIgeT0iMzQuOTgiIHdpZHRoPSIxLjc1IiBoZWlnaHQ9IjEuNzUiIHJ4PSIuNCIvPjxyZWN0IHg9IjUxLjIyIiB5PSIzOS4yNSIgd2lkdGg9IjEuNjciIGhlaWdodD0iMS42NyIgcng9Ii40Ii8+PHJlY3QgeD0iNTAuODUiIHk9IjQzLjAzIiB3aWR0aD0iMS45NSIgaGVpZ2h0PSIxLjk1IiByeD0iLjQiLz48cmVjdCB4PSI1MC45NyIgeT0iNDYuOTEiIHdpZHRoPSIxLjk2IiBoZWlnaHQ9IjEuOTYiIHJ4PSIuNCIvPjxyZWN0IHg9IjUwLjg3IiB5PSI1MC45OCIgd2lkdGg9IjEuODgiIGhlaWdodD0iMS44OCIgcng9Ii40Ii8+PHJlY3QgeD0iNTEuMTIiIHk9IjU0Ljk5IiB3aWR0aD0iMi4xMyIgaGVpZ2h0PSIyLjEzIiByeD0iLjQiLz48cmVjdCB4PSI1MS4xMiIgeT0iNTkuMDIiIHdpZHRoPSIxLjc1IiBoZWlnaHQ9IjEuNzUiIHJ4PSIuNCIvPjxyZWN0IHg9IjU1LjI5IiB5PSItMC44MSIgd2lkdGg9IjEuNzgiIGhlaWdodD0iMS43OCIgcng9Ii40Ii8+PHJlY3QgeD0iNTQuODEiIHk9IjMuMDAiIHdpZHRoPSIyLjAwIiBoZWlnaHQ9IjIuMDAiIHJ4PSIuNCIvPjxyZWN0IHg9IjU0Ljk3IiB5PSI2LjkwIiB3aWR0aD0iMi4wMCIgaGVpZ2h0PSIyLjAwIiByeD0iLjQiLz48cmVjdCB4PSI1NS4zNiIgeT0iMTEuMDgiIHdpZHRoPSIxLjYyIiBoZWlnaHQ9IjEuNjIiIHJ4PSIuNCIvPjxyZWN0IHg9IjU0LjkzIiB5PSIxNC45NiIgd2lkdGg9IjIuMDEiIGhlaWdodD0iMi4wMSIgcng9Ii40Ii8+PHJlY3QgeD0iNTQuODYiIHk9IjE5LjEwIiB3aWR0aD0iMi4wNCIgaGVpZ2h0PSIyLjA0IiByeD0iLjQiLz48cmVjdCB4PSI1NC45MSIgeT0iMjIuNzkiIHdpZHRoPSIyLjE4IiBoZWlnaHQ9IjIuMTgiIHJ4PSIuNCIvPjxyZWN0IHg9IjU1LjA2IiB5PSIyNy4yNiIgd2lkdGg9IjEuNzQiIGhlaWdodD0iMS43NCIgcng9Ii40Ii8+PHJlY3QgeD0iNTUuMDAiIHk9IjMxLjIyIiB3aWR0aD0iMS43OCIgaGVpZ2h0PSIxLjc4IiByeD0iLjQiLz48cmVjdCB4PSI1NS4zMiIgeT0iMzUuMTQiIHdpZHRoPSIxLjcxIiBoZWlnaHQ9IjEuNzEiIHJ4PSIuNCIvPjxyZWN0IHg9IjU0Ljg5IiB5PSIzOC45NyIgd2lkdGg9IjIuMDAiIGhlaWdodD0iMi4wMCIgcng9Ii40Ii8+PHJlY3QgeD0iNTUuMjYiIHk9IjQyLjk0IiB3aWR0aD0iMS44NCIgaGVpZ2h0PSIxLjg0IiByeD0iLjQiLz48cmVjdCB4PSI1NS4wNCIgeT0iNDcuMzUiIHdpZHRoPSIxLjY5IiBoZWlnaHQ9IjEuNjkiIHJ4PSIuNCIvPjxyZWN0IHg9IjU0LjkwIiB5PSI1MC45MSIgd2lkdGg9IjEuODQiIGhlaWdodD0iMS44NCIgcng9Ii40Ii8+PHJlY3QgeD0iNTUuMTQiIHk9IjU1LjEzIiB3aWR0aD0iMi4wNCIgaGVpZ2h0PSIyLjA0IiByeD0iLjQiLz48cmVjdCB4PSI1NS4zMCIgeT0iNTkuMjciIHdpZHRoPSIxLjgwIiBoZWlnaHQ9IjEuODAiIHJ4PSIuNCIvPjxyZWN0IHg9IjU4Ljg1IiB5PSItMC44NSIgd2lkdGg9IjIuMDUiIGhlaWdodD0iMi4wNSIgcng9Ii40Ii8+PHJlY3QgeD0iNTguOTAiIHk9IjMuMTUiIHdpZHRoPSIxLjgzIiBoZWlnaHQ9IjEuODMiIHJ4PSIuNCIvPjxyZWN0IHg9IjU5LjEwIiB5PSI3LjA4IiB3aWR0aD0iMS43MCIgaGVpZ2h0PSIxLjcwIiByeD0iLjQiLz48cmVjdCB4PSI1OC45MCIgeT0iMTEuMDEiIHdpZHRoPSIxLjgxIiBoZWlnaHQ9IjEuODEiIHJ4PSIuNCIvPjxyZWN0IHg9IjU5LjA5IiB5PSIxNC43NiIgd2lkdGg9IjIuMTgiIGhlaWdodD0iMi4xOCIgcng9Ii40Ii8+PHJlY3QgeD0iNTguODQiIHk9IjE4LjkwIiB3aWR0aD0iMi4wOSIgaGVpZ2h0PSIyLjA5IiByeD0iLjQiLz48cmVjdCB4PSI1OS4zMSIgeT0iMjMuMTYiIHdpZHRoPSIxLjYzIiBoZWlnaHQ9IjEuNjMiIHJ4PSIuNCIvPjxyZWN0IHg9IjU4LjkxIiB5PSIyNi44NyIgd2lkdGg9IjIuMTUiIGhlaWdodD0iMi4xNSIgcng9Ii40Ii8+PHJlY3QgeD0iNTguODEiIHk9IjMwLjg4IiB3aWR0aD0iMi4xNCIgaGVpZ2h0PSIyLjE0IiByeD0iLjQiLz48cmVjdCB4PSI1OC43NyIgeT0iMzQuOTIiIHdpZHRoPSIyLjA5IiBoZWlnaHQ9IjIuMDkiIHJ4PSIuNCIvPjxyZWN0IHg9IjU5LjMwIiB5PSIzOS4wMSIgd2lkdGg9IjEuNjIiIGhlaWdodD0iMS42MiIgcng9Ii40Ii8+PHJlY3QgeD0iNTguOTUiIHk9IjQzLjI5IiB3aWR0aD0iMS43NSIgaGVpZ2h0PSIxLjc1IiByeD0iLjQiLz48cmVjdCB4PSI1OS4yMCIgeT0iNDcuMjYiIHdpZHRoPSIxLjgwIiBoZWlnaHQ9IjEuODAiIHJ4PSIuNCIvPjxyZWN0IHg9IjU4LjkyIiB5PSI1MS4yMCIgd2lkdGg9IjEuOTciIGhlaWdodD0iMS45NyIgcng9Ii40Ii8+PHJlY3QgeD0iNTkuMDEiIHk9IjU1LjE5IiB3aWR0aD0iMS43OSIgaGVpZ2h0PSIxLjc5IiByeD0iLjQiLz48cmVjdCB4PSI1OC44OCIgeT0iNTguNzciIHdpZHRoPSIyLjA1IiBoZWlnaHQ9IjIuMDUiIHJ4PSIuNCIvPjwvZz48L3N2Zz4=) center/contain no-repeat}
.nav[data-offen] .nav-plus{transform:rotate(45deg)}
.nav-blatt{background:transparent;padding:0;position:absolute;right:55px;top:0;bottom:0;
  flex-direction:row;align-items:center;gap:16px;text-align:right}
.nav-blatt a{color:var(--leise);padding:0;opacity:0;transform:translateX(14px);
  font-size:16.5px;font-weight:500;font-style:italic;text-transform:uppercase;letter-spacing:.01em;line-height:1.32;
  transition:opacity .28s ease,transform .28s cubic-bezier(.2,.7,.3,1),color .25s ease}
.nav[data-offen] .nav-blatt a{opacity:1;transform:none}
.nav[data-offen] .nav-blatt a:nth-child(3){transition-delay:.02s}
.nav[data-offen] .nav-blatt a:nth-child(2){transition-delay:.075s}
.nav[data-offen] .nav-blatt a:nth-child(1){transition-delay:.13s}
.nav-plus{display:block}
.nav-blatt{display:flex;pointer-events:none}
.nav[data-offen] .nav-blatt{pointer-events:auto}

/* ---------- Tab-Leiste: schwebende Glas-Pille wie bei Spirax ----------
   Vier Ziele plus „Mehr“ — dahinter liegt der Rest (Kontakte, To-dos,
   Rechnungen), weil sieben Punkte nicht nebeneinander passen. */
/* Einfaches calc() statt max(calc(...)): mit dem verschachtelten Wert
   war die Leiste auf dem iPhone von der Startseite verschwunden.
   Woran genau es lag, ist ungeprüft — darum steht jetzt zuerst ein
   schlichter Wert da, den jeder Browser versteht, und erst danach die
   Fassung mit der Sicherheitszone. Fällt die zweite aus, gilt die erste. */
/* Reines CSS, absichtlich ohne JavaScript-Nachjustierung: ein früherer
   Versuch hat die Position bei jedem Scroll-Event neu berechnet und dabei
   weich animiert (`transition`) — genau das erzeugte das Zittern beim
   Hoch- und Runterscrollen. `position:fixed` mit `env(safe-area-inset-*)`
   hält von sich aus fest, ohne dass etwas nachrechnen muss.
   Zwei „bottom“-Zeilen als Rückfall: die erste gilt, falls ein Browser die
   zweite (mit env()) nicht versteht — sonst fiele der Wert auf `auto`
   zurück und die Leiste würde ganz verschwinden (das ist uns schon
   einmal passiert). */
.tabs{position:fixed;left:50%;right:auto;bottom:20px;
  bottom:calc(20px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:50;
  /* Die Leiste liegt dauerhaft über Inhalt — und das soll man sehen:
     was darunter weitergeht, scheint durch. Deshalb deutlich
     durchsichtiger als die übrigen Glasflächen. */
  background:var(--glas-leicht);
  /* Stärker weichgezeichnet als die übrigen Scheiben: die Leiste schwebt
     über dem Inhalt, und man soll deutlich sehen, dass darunter etwas
     weitergeht — nicht nur ahnen. */
  -webkit-backdrop-filter:saturate(220%) blur(26px);
  backdrop-filter:saturate(220%) blur(26px);
  display:flex;align-items:stretch;gap:2px;padding:6px;border-radius:32px;
  max-width:calc(100vw - 20px);
  transition:opacity .3s ease}
body:has(.chat-form :focus) .tabs,body.tippt .tabs,body.tippt-chat .tabs{
  opacity:0;pointer-events:none}
/* Luft unter dem Formular, solange getippt wird: erst dadurch lässt sich
   die Seite überhaupt schieben und das Feld über die Tastatur holen.
   Gilt nur für Seiten, deren Felder im Textfluss stehen. */
body.tippt main{padding-bottom:58vh}
/* Der Chat ist die Ausnahme: seine Eingabe sitzt auf einer fest
   verankerten Fläche, die Seite darunter hat nichts zu scrollen. Bekam
   sie hier trotzdem Luft, wurde das Dokument höher als der Bildschirm,
   iOS schob es beim Tippen nach oben — und nahm die fest verankerte
   Eingabe mit. Das war der Sprung: nicht die Rechnung zur Tastatur,
   sondern eine Seite, die sich unter ihr wegbewegt hat. */
body.chat-modus{overflow:hidden}
body.chat-modus main{padding-bottom:0}
.tabs a,.tabs button{display:flex;align-items:center;justify-content:center;
  border:0;background:none;font:inherit;cursor:pointer;
  width:52px;height:44px;border-radius:22px;
  color:var(--ink);-webkit-tap-highlight-color:transparent}
.tabs svg{width:29px;height:29px;stroke-width:1.7;flex:none}
/* Ausgewählt heißt: ein zarter Kreis darum — der Strich bleibt gleich
   dick, sonst springt das Zeichen beim Wechseln in der Größe. */
.tabs a.aktiv,.tabs button.aktiv{color:var(--ink);background:rgba(0,0,0,.06)}
@media (max-width:700px){
  /* Breite richtet sich nach dem Inhalt, nicht nach dem Bildschirm — die
     Leiste soll als kompakte Insel schweben, nicht als Balken. */
  .tabs{gap:0;padding:5px}
  .tabs a,.tabs button{width:48px}
  .tabs svg{width:27px;height:27px}
}

/* Blatt von unten: „Mehr“ und andere Auswahl-Ebenen */
.blatt-grund{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.18);
  animation:blenden .22s ease}
.blatt-grund[hidden]{display:none}
@keyframes blenden{from{opacity:0}to{opacity:1}}
.blatt{position:fixed;left:50%;transform:translateX(-50%);z-index:71;
  bottom:calc(86px + env(safe-area-inset-bottom));   /* über der Tab-Leiste */
  width:min(420px,calc(100vw - 20px));border-radius:26px;padding:8px;
  animation:blatt-auf .26s cubic-bezier(.2,.8,.3,1)}
.blatt[hidden]{display:none}
@keyframes blatt-auf{from{opacity:0;transform:translateX(-50%) translateY(22px) scale(.97)}
  to{opacity:1;transform:translateX(-50%)}}
.blatt-titel{font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--leise);padding:8px 12px 6px}
.blatt a{display:flex;align-items:center;gap:13px;padding:12px;border-radius:16px;
  font-size:17px;font-weight:400;color:var(--ink)}
.blatt a:active{background:rgba(0,0,0,.05)}
.blatt a svg{width:22px;height:22px;stroke-width:1.7;color:var(--ink);flex:none;fill:none}
.blatt a .zaehler{margin-left:auto;font-size:15px;font-weight:400;color:var(--leise)}
/* Erfassungsblatt: ein Satz, für wen, fertig */
.erfassen{padding:0 8px 8px}
.erfassen input[type=text]{width:100%;margin:0 0 10px}
.erfassen .knopf{width:100%}
.erfassen-wer{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:12px}
/* margin:0 ist entscheidend: die allgemeine Formular-Regel für <label> gibt
   jedem außer dem ersten 16 px Abstand nach oben — dadurch stand „Ich"
   um die halbe Höhe versetzt über den anderen. Den Abstand macht hier gap. */
.wer-wahl{position:relative;display:flex;margin:0}
.wer-wahl input{position:absolute;opacity:0;pointer-events:none}
.wer-wahl span{display:block;padding:6px 13px;border-radius:999px;font-size:14px;
  background:var(--fuell);color:var(--leise);cursor:pointer}
.wer-wahl input:checked+span{background:var(--tint);color:var(--tint-on)}

/* ---------- Seitenrumpf ---------- */
main{max-width:1020px;margin:0 auto;
  padding:calc(86px + env(safe-area-inset-top)) 22px 110px}
@media (max-width:700px){main{padding:calc(72px + env(safe-area-inset-top)) 16px
  calc(100px + env(safe-area-inset-bottom))}}
h1{font-size:28px;font-weight:700;letter-spacing:-.02em;margin:0 0 22px}
h2{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  color:var(--leise);margin:36px 0 10px}
h1:first-child,h2:first-child{margin-top:0}
.kopfzeile{display:flex;align-items:center;gap:1em;margin:0 0 22px}
/* Galerie-Detail: „Galerie" und der Name in derselben Größe, ohne
   Pfeil — kein Link-plus-Überschrift-Kontrast wie sonst üblich. */
/* Nur der Name der Galerie, linksbündig wie jede andere Überschrift. */
.kopfzeile-galerie{margin:0 0 22px}
.kopfzeile-galerie h1{margin:0;font-size:28px;overflow-wrap:anywhere}
/* Zweiteilig: Rückweg links, Name rechts — im Portfolio-Ordner, wo es
   sonst keinen Weg zurück gäbe. */
.kopfzeile-zweiteilig{display:flex;align-items:baseline;gap:.5em;
  justify-content:space-between;margin:0 0 22px}
.kopfzeile-zweiteilig a{color:var(--leise);font-size:28px;font-weight:700;
  letter-spacing:-.02em;flex:none}
.kopfzeile-zweiteilig h1{margin:0;font-size:28px;text-align:right;
  min-width:0;overflow-wrap:anywhere}
.kopfzeile h1{margin:0}
.kopfzeile .recht{margin-left:auto}
.leise-text{color:var(--leise)}
.hinweis{color:var(--leise);font-size:15px}
.fehler{color:var(--rot);margin:14px 0}
.erfolg{color:var(--ink);margin:14px 0}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-block;border:0;background:var(--tint);color:var(--tint-on);
  font:inherit;font-size:16px;font-weight:600;
  padding:9px 18px;border-radius:999px;cursor:pointer;transition:.18s;
  -webkit-tap-highlight-color:transparent}
.knopf:hover{opacity:.82}
.knopf:active{transform:scale(.97)}
.knopf.leise{background:var(--fuell);color:var(--ink)}
.knopf.gefahr{background:var(--fuell);color:var(--rot)}
.knopf:disabled{opacity:.45;cursor:default}
.wortlink{font-size:16px;font-weight:600;color:var(--leise);border:0;background:none;
  padding:0;font-family:inherit;cursor:pointer}
.wortlink:hover{color:var(--ink)}

/* ---------- Formulare ---------- */
form.feld-form{max-width:520px;background:var(--karte);border-radius:var(--radius);
  box-shadow:var(--schatten);padding:22px 20px}
label{display:block;font-size:13px;font-weight:500;color:var(--leise);margin:16px 0 6px}
label:first-of-type{margin-top:0}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],
input[type=date],input[type=time],input[type=search],select,textarea{
  width:100%;border:1px solid transparent;background:var(--fuell);
  font:inherit;color:var(--ink);padding:10px 12px;border-radius:10px;outline:none;
  transition:border-color .15s,background .15s}
input:focus,select:focus,textarea:focus{border-color:var(--ink);background:var(--karte)}
textarea{min-height:96px;resize:vertical}
/* Datum/Uhrzeit linksbündig — iOS zentriert die Werte sonst */
input[type=date],input[type=time]{text-align:left}
input::-webkit-date-and-time-value{text-align:left}
.haken-reihe{display:flex;gap:14px;flex-wrap:wrap;padding:4px 0 16px}
.haken{display:inline-flex;align-items:center;gap:7px;margin:0;cursor:pointer;
  font-size:14.5px;font-weight:500;color:var(--ink)}
.haken input{width:17px;height:17px;accent-color:var(--ink);margin:0}
select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:32px;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M0 0l5 5.4L10 0" fill="none" stroke="%2386868b" stroke-width="1.6" stroke-linecap="round"/></svg>');
  background-repeat:no-repeat;background-position:right 12px center}
input[type=file]{width:100%;border:1.5px dashed var(--line);padding:20px 14px;
  font:inherit;font-size:13.5px;color:var(--leise);border-radius:12px;background:var(--karte)}
input[type=file]:hover{border-color:var(--leise)}
.form-fuss{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
.lade-balken{height:4px;background:var(--fuell);border-radius:999px;margin-top:24px;overflow:hidden}
.lade-balken span{display:block;height:100%;width:0;background:var(--ink);
  border-radius:999px;transition:width .3s}

/* ---------- Tabellen als Karten ---------- */
.rollbar{overflow-x:auto;background:var(--karte);border-radius:var(--radius);
  box-shadow:var(--schatten);padding:4px 16px}
.tabelle{width:100%;border-collapse:collapse}
.tabelle th{font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;
  color:var(--leise);text-align:left;padding:12px 14px 8px 0;
  border-bottom:1px solid var(--line)}
.tabelle td{padding:12px 14px 12px 0;border-bottom:1px solid var(--line);
  vertical-align:baseline}
.tabelle tr:last-child td{border-bottom:0}
.tabelle td.leise{color:var(--leise)}
.tabelle td a{font-weight:600}

/* ---------- Start: Schnellaktionen, Abschnitte, Termin-Zeilen ---------- */
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:30px}
.schnell{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 8px}
/* Nur auf der Startseite: die vier Schnellaktionen spannen sich über die
   volle Breite. Überall sonst bleibt .schnell eine normale Knopfreihe. */
.schnell-start .knopf{flex:1 1 0;text-align:center}
@media (max-width:700px){
  /* Schnellaktionen: enger gesetzt, aber sie brechen um statt seitlich
     aus dem Bild zu laufen — auf schmalen Geräten war sonst der letzte
     Knopf angeschnitten. */
  .schnell{gap:6px;margin:0 0 4px}
  .schnell .knopf{padding:7px 11px;font-size:12px;white-space:nowrap;flex:none}
  /* Eine Zeile, von Rand zu Rand: die vier teilen sich die Breite zu
     gleichen Teilen und werden so klein, dass auch „+ Feedback" hinein
     passt. Deshalb kein nowrap und keine feste Schriftgröße, sondern
     eine, die mit der Bildschirmbreite mitgeht — auf schmalen Geräten
     lief der letzte Knopf sonst über den Rand. */
  .schnell-start{display:flex;flex-wrap:nowrap;gap:6px;margin:0 0 6px}
  .schnell-start .knopf{flex:1 1 0;min-width:0;padding:10px 4px;
    font-size:clamp(11px,3.4vw,14px);text-align:center;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  /* Am Handy: keine Überschrift, keine Team-To-dos auf der Startseite */
  .start-titel{display:none}
  .team-block{display:none}
}
.abschnitt-kopf{display:flex;align-items:baseline;gap:1em;margin:36px 0 10px}
.abschnitt-kopf h2{margin:0}
.abschnitt-kopf .alle{margin-left:auto;font-size:15px;font-weight:400;color:var(--leise)}
.abschnitt-kopf .alle:hover{color:var(--ink)}
.termin-zeile{display:flex;align-items:center;gap:14px;padding:12px 16px;
  background:var(--karte);border-radius:var(--radius);box-shadow:var(--schatten);
  margin-bottom:10px;transition:transform .15s}
.termin-zeile:active{transform:scale(.99)}
/* Zwei Zeilen zeigen, den Rest zum Heranscrollen — mit einem Verlauf an
   beiden Rändern statt einem harten Abriss. */
.termine-scroll{max-height:158px;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14px,
    #000 calc(100% - 14px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 14px,
    #000 calc(100% - 14px),transparent 100%)}
.termine-scroll::-webkit-scrollbar{display:none}
.datum-block{flex:none;width:46px;text-align:center;line-height:1.05;
  background:var(--fuell);border-radius:10px;padding:7px 0}
.datum-block b{display:block;font-size:20px;font-weight:600}
.datum-block i{display:block;font-size:10px;font-style:normal;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--leise)}
.termin-text{font-weight:600}
.termin-text small{display:block;font-size:13px;font-weight:500;color:var(--leise)}
.deck-reihe{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none}
.deck-reihe::-webkit-scrollbar{display:none}
.deck{flex:none;width:128px}
.deck img{width:128px;height:170px;object-fit:cover;display:block;background:var(--fuell);
  border-radius:12px;box-shadow:var(--schatten)}
.deck span{display:block;margin-top:7px;font-size:15px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Galerie-Kacheln: immer 2 nebeneinander ---------- */
.galerie-raster{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:700px){.galerie-raster{gap:14px}}
/* Kein Rahmen, kein Punkt, keine Beschreibung — nur das Bild.
   Der Titel liegt darin und zeigt sich erst beim Darüberfahren oder
   Draufhalten. */
.galerie-kachel{position:relative;display:block;border-radius:12px;overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  /* Auch der Link selbst darf nicht zum Ziehen angehoben werden: iOS legt
     die Kachel sonst beim langen Halten auf eine eigene weiße Karte mit
     Rand. Deren Dicke lässt sich nicht einstellen — nur, ob es sie gibt. */
  -webkit-user-drag:none;
  /* Sonst zeigt iOS bei langem Draufhalten seine eigene, große
     Bildvorschau samt Kontextmenü — genau das soll hier nicht
     passieren, das Bild bleibt an seinem Platz. Die Auswahl-Sperre
     gehört an den Link selbst: iOS legt sonst beim Halten sein eigenes
     rechteckiges Markierungsfeld über die Kachel. */
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* Die Rundung steht auch am Bild selbst, nicht nur als overflow:hidden
   am Rahmen — doppelt hält hier besser. */
.galerie-kachel .deckblatt{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:12px;background:var(--fuell);-webkit-touch-callout:none;
  -webkit-user-select:none;user-select:none;
  /* Das war das Eckigwerden nach etwa einer Sekunde: iOS hebt ein Bild
     beim langen Draufhalten zum Ziehen an und legt dafür eine eigene,
     rechteckige Vorschau darüber. Ohne Ziehen keine Vorschau. */
  -webkit-user-drag:none}
.kachel-schatten{position:absolute;left:0;right:0;top:0;height:46%;
  border-radius:12px 12px 0 0;
  background:linear-gradient(to bottom,rgba(0,0,0,.5),transparent);
  opacity:0;pointer-events:none;transition:opacity .18s ease}
/* Der Titel liegt im oberen Drittel, mittig darin */
.kachel-titel{position:absolute;left:0;right:0;top:0;height:33.33%;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:0 12px;font-size:16px;font-weight:600;letter-spacing:-.01em;
  color:#fff;opacity:0;pointer-events:none;
  transition:opacity .18s ease}
/* Nur der wirklich seltene, fast reinweiße Hintergrund kippt auf Schwarz —
   im Regelfall bleibt der Titel weiß, dafür sorgt auch der Schatten
   darunter. */
.galerie-kachel.auf-hell .kachel-titel{color:#000}
.galerie-kachel.auf-hell .kachel-schatten{display:none}
/* Beim Halten blenden Titel und Schatten auf — sonst bewegt sich nichts.
   Sanft statt schlagartig: vorher waren es 100ms, das wirkte wie ein
   Umschalten, nicht wie ein Erscheinen. */
.kachel-titel,.kachel-schatten{transition:opacity .3s var(--ease)}
.galerie-kachel:active .kachel-titel,
.galerie-kachel:active .kachel-schatten{opacity:1}
@media (hover:hover){
  .galerie-kachel:hover .kachel-titel,
  .galerie-kachel:hover .kachel-schatten{opacity:1}
}

/* Ein zweiter Abschnitt in einem Blatt bekommt Luft und eine Trennlinie,
   damit er nicht wie die Fortsetzung des ersten aussieht. */
.blatt-titel.blatt-zweiter{margin-top:22px;padding-top:18px;
  border-top:.5px solid var(--separator)}

/* Preisliste im Print-Bereich: Angaben links, Eingabe rechts. */
.preis-zeile{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--karte);border-radius:var(--radius);padding:12px 16px}
.preis-was{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.preis-was small{color:var(--leise);font-size:12.5px}
.preis-was .meta-schild{align-self:flex-start;margin-top:2px}
.preis-feld{flex:none;display:flex;align-items:center;gap:6px;white-space:nowrap}
.preis-feld input{width:84px;text-align:right}
.preis-geprueft{margin-top:5px;font-size:12.5px;font-weight:500;color:var(--leise)}
.preis-geprueft input{width:15px;height:15px}

/* ---------- Portfolio-Ordner: Kachel wie eine Galerie, mit Unterschrift ----
   Das Titelbild ist so groß wie ein Galeriebild; darunter steht, um
   welchen Ordner es geht und wem er gehört. */
.portfolio-ordner-kachel{display:block;color:inherit}
.portfolio-ordner-kachel .galerie-kachel{display:block}
.ordner-unterschrift{display:flex;align-items:center;gap:8px;margin:8px 2px 0}
.ordner-unterschrift b{flex:1;min-width:0;font-size:15px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ordner-unterschrift i{flex:none;font-style:normal;font-size:13px;color:var(--leise)}
.ordner-unterschrift .wer-bild svg{width:14px;height:14px;stroke-width:1.9;
  fill:none;stroke:currentColor}
@media (hover:hover){
  .portfolio-ordner-kachel:hover .ordner-unterschrift b{color:var(--ink)}
}

/* ---------- Filter-Chips ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.chip{font-size:15px;font-weight:500;color:var(--ink);background:var(--fuell);
  padding:7px 14px;border-radius:999px;transition:.15s}
.chip:hover{opacity:.8}
.chip.aktiv{background:var(--tint);color:var(--tint-on)}
/* Die Personenreihe unter dem Kalender spannt sich über die volle Breite:
   vier gleich große Felder mit Luft dazwischen. „Team" liegt dabei im
   selben Grau wie die Kacheln auf der Startseite, mit schwarzer Schrift —
   schwarz auf schwarz war zu laut für eine Voreinstellung. */
.kal-personen{display:flex;gap:10px;margin-top:26px}
.kal-personen .chip{flex:1 1 0;min-width:0;justify-content:center;
  padding:12px 6px;font-size:15px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kal-personen .chip.aktiv{background:var(--fuell);color:var(--ink)}
.kal-personen .chip.person-chip.aktiv{background:var(--p-flaeche,var(--fuell));
  color:var(--p-schrift,var(--ink));box-shadow:inset 0 0 0 2px var(--p-schrift,var(--ink))}


/* ---------- Personenfarben ----------
   Jede und jeder im Team hat eine eigene, sehr zurückhaltende Farbe.
   --p-flaeche färbt Flächen (Chat-Blasen, Chips, Kreise),
   --p-schrift den Namen — sonst wäre er auf Weiß nicht zu lesen. */
/* Die Farbwerte selbst stehen in design/tokens.css, samt Nachtfassung. */

/* ---------- Teamchat (WhatsApp-inspiriert) ---------- */
/* Die Chat-Seite ist fest "eingerastet": Kopf oben, Tabs unten, Eingabe immer an
   derselben Stelle - nur der Verlauf in der Mitte scrollt. */
.chat-seite{position:fixed;left:0;right:0;top:calc(55px + env(safe-area-inset-top));
  bottom:88px;z-index:10;
  display:flex;flex-direction:column;background:var(--bg)}
@media (max-width:700px){
  /* Der Chat wird nicht mehr ausgerechnet, sondern auf die sichtbare
     Fläche gelegt: Höhe und Lage setzt das Skript direkt aus dem
     visualViewport — das ist per Definition genau der Bereich, den man
     sieht, egal was Browserleisten und Tastatur gerade tun.
     Vier Anläufe haben vorher versucht, die Tastaturhöhe zu ermitteln
     und davon abzuleiten, wo die Eingabe hingehört. Jeder davon konnte
     sich verrechnen. Hier gibt es nichts mehr zu verrechnen. */
  .chat-seite{top:0;bottom:auto;height:100dvh;
    padding-top:calc(47px + env(safe-area-inset-top));
    padding-bottom:calc(84px + env(safe-area-inset-bottom));
    /* iOS meldet die neue sichtbare Höhe erst, wenn die Tastatur oben ist
       — ohne Übergang säße die Eingabe mit einem Satz an der neuen Stelle.
       Höhe, Lage und Innenabstand laufen deshalb gemeinsam und mit
       derselben Kurve wie die Tastatur selbst. */
    transition:height var(--t-ui) var(--ease),top var(--t-ui) var(--ease),
      padding-bottom var(--t-ui) var(--ease);
    /* Der Browser soll die Fläche als eigene Ebene behandeln, sonst
       zeichnet er bei jedem Zwischenschritt alles neu und es ruckelt. */
    will-change:height}
  /* Beim Tippen geht die Menüleiste weg, also braucht es den Platz für
     sie nicht mehr — es bleibt derselbe Abstand von 10px, den die
     Eingabe sonst zur Leiste hat, jetzt zur Tastatur. An den Fokus
     gebunden, nicht an eine Messung: dieselbe Bedingung, mit der auch
     die Leiste verschwindet. */
  body.tippt-chat .chat-seite,
  body:has(.chat-form :focus) .chat-seite{padding-bottom:10px}
  /* Wer Bewegung reduziert hat, bekommt keinen Übergang */
  @media (prefers-reduced-motion:reduce){
    .chat-seite{transition:none}
  }}
.chat-verlauf{flex:1;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;display:flex;flex-direction:column;
  padding:10px 14px 12px;width:100%;max-width:760px;margin:0 auto;
  /* Oben ausblenden statt hart abschneiden: die oberste Nachricht
     verläuft an der Kante, statt scharf abzureißen. */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26px);
  mask-image:linear-gradient(to bottom,transparent 0,#000 26px)}

.chat-tag{align-self:center;margin:14px 0 10px}
.chat-tag span{display:inline-block;background:#ececf0;color:#5f5f66;
  font-size:11.5px;font-weight:600;padding:4px 11px;border-radius:8px;
  box-shadow:0 1px 1px rgba(0,0,0,.04)}

/* Eine Nachricht-Zeile: Kopfbild + Blase (+ Antwort-Pfeil am Rechner) */
.cn{position:relative;display:flex;align-items:flex-start;gap:8px;
  max-width:78%;align-self:flex-start;margin:2px 0;
  animation:cn-rein .26s cubic-bezier(.2,.7,.3,1)}
.cn.gruppen-start{margin-top:12px}
.cn.meine{align-self:flex-end;flex-direction:row-reverse}
@keyframes cn-rein{from{opacity:0;transform:translateY(12px) scale(.96)}
  to{opacity:1;transform:none}}

.cn-kopf{flex:none;width:30px;height:30px;border-radius:50%;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;margin-top:1px;
  background:var(--p-flaeche,var(--fuell));color:var(--p-schrift,var(--ink));
  font-size:13px;font-weight:700}
.cn:not(.gruppen-start) .cn-kopf{height:0;background:none}
.cn-kopf img{width:100%;height:100%;object-fit:cover;display:block}

.cn-blase{position:relative;background:var(--karte);color:var(--ink);border-radius:13px;
  padding:6px 9px 7px;box-shadow:0 1px 1px rgba(0,0,0,.08);min-width:0;
  font-size:17px;line-height:1.35;text-align:left}
.cn.gruppen-start .cn-blase{border-top-left-radius:4px}
.cn .cn-blase{background:var(--p-flaeche,var(--karte))}
.cn.meine .cn-blase{color:var(--ink)}
.cn.meine.gruppen-start .cn-blase{border-top-left-radius:13px;border-top-right-radius:4px}
/* Sprechblasen-Ecke am Gruppenanfang */
.cn.gruppen-start:not(.meine) .cn-blase::before{content:"";position:absolute;top:0;left:-8px;
  border-top:10px solid var(--p-flaeche,var(--karte));border-left:10px solid transparent}
.cn.meine.gruppen-start .cn-blase::before{content:"";position:absolute;top:0;right:-8px;
  border-top:10px solid var(--p-flaeche,var(--karte));border-right:10px solid transparent}

.cn-name{font-size:13px;font-weight:600;margin:0 0 2px}
.cn-text{white-space:pre-wrap;word-break:break-word}
.cn-zeit{float:right;font-size:11px;color:var(--leise);
  margin:8px -2px -3px 9px;line-height:1}
.cn.meine .cn-zeit{color:rgba(29,29,31,.5)}

/* Zitierte Nachricht in der Blase (Antwort) */
.cn-zitat{display:block;width:100%;text-align:left;border:0;cursor:pointer;
  font:inherit;font-size:13px;line-height:1.3;color:inherit;
  background:rgba(0,0,0,.055);border-left:3px solid var(--ink);border-radius:7px;
  padding:5px 8px;margin:2px 0 5px;-webkit-tap-highlight-color:transparent}
.cn-zitat b{display:block;font-size:12px}
.cn-zitat span{display:block;color:var(--leise);max-width:280px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cn.meine .cn-zitat{background:rgba(0,0,0,.05)}
.cn.meine .cn-zitat span{color:rgba(29,29,31,.6)}

/* Antworten: Pfeil am Rechner (bei Beruehrung wischen, siehe chat.html) */
.cn-antworten{flex:none;align-self:center;border:0;background:var(--fuell);
  color:var(--leise);width:26px;height:26px;border-radius:50%;cursor:pointer;
  font-size:13px;line-height:1;opacity:0;transition:opacity .15s;
  -webkit-tap-highlight-color:transparent}
@media (hover:hover){.cn:hover .cn-antworten{opacity:1}}
@media (hover:none){.cn-antworten{display:none}}

/* Kurzes Aufleuchten, wenn man zu einer zitierten Nachricht springt */
@keyframes cn-ring{0%,100%{box-shadow:0 1px 1px rgba(0,0,0,.08)}
  30%{box-shadow:0 0 0 3px rgba(29,29,31,.22)}}
.cn.blitz .cn-blase{animation:cn-ring 1.1s ease}

/* Fussbereich: Antwort-Vorschau + Eingabezeile, immer unten */
.chat-fuss{flex:none;position:relative;background:var(--glas-weich);
  -webkit-backdrop-filter:saturate(1.8) blur(16px);backdrop-filter:saturate(1.8) blur(16px);
  border-top:1px solid var(--glas-kante);padding:8px 12px 10px}
.chat-fuss>*{max-width:760px;margin-left:auto;margin-right:auto}
.chat-antwort-vorschau{display:flex;align-items:center;gap:10px;
  background:var(--fuell);border-radius:12px;padding:7px 10px;margin-bottom:8px;
  animation:cn-rein .2s ease}
.chat-antwort-vorschau[hidden]{display:none}
.cav-inhalt{flex:1;min-width:0;font-size:13px;line-height:1.35;
  border-left:3px solid var(--ink);padding-left:9px}
.cav-inhalt b{display:block;font-size:12px}
.cav-inhalt span{display:block;color:var(--leise);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#antwort-weg{flex:none;border:0;background:none;color:var(--leise);
  font-size:15px;cursor:pointer;padding:4px}
/* Eingabe wie in Claude: ein Rahmen, Textfeld oben, Werkzeuge darunter */
.chat-form{display:block}
.chat-feld{background:var(--fuell);border:1px solid var(--line);border-radius:22px;
  padding:9px 13px 8px;transition:border-color .18s ease,box-shadow .18s ease}
.chat-feld:focus-within{border-color:rgba(0,0,0,.16);background:var(--karte);
  box-shadow:0 2px 14px rgba(0,0,0,.06)}
.chat-form textarea{width:100%;background:none;border:0;padding:2px 4px;resize:none;
  min-height:40px;max-height:190px;line-height:1.4;overflow-y:auto;font-size:16.5px}
.chat-form textarea:focus{background:none;border:0;box-shadow:none;outline:none}
.chat-werkzeuge{display:flex;align-items:center;gap:8px;margin-top:3px}
.chat-luecke{flex:1}

/* Runde Knöpfe: + links, Mikro und Senden rechts */
.chat-rund{flex:none;width:34px;height:34px;border-radius:50%;border:0;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.055);color:var(--ink);cursor:pointer;transition:.15s;
  -webkit-tap-highlight-color:transparent}
.chat-rund svg{width:20px;height:20px;stroke-width:1.8}
.chat-rund:hover{background:rgba(0,0,0,.09)}
.chat-rund:active{transform:scale(.9)}
.chat-rund[hidden]{display:none}
/* Senden im durchscheinenden Rosa der eigenen Sprechblasen */
.chat-rund.senden{background:rgba(222,120,205,.22);color:#9c2e88}
.chat-rund.senden:hover{background:rgba(222,120,205,.34)}
.chat-rund.laeuft{background:rgba(215,0,21,.14);color:var(--rot)}

/* + -Menü: Datei · Foto · Kamera */
/* Anhängen: Blatt von unten mit drei Kacheln (Vorbild: Claude am iPhone) */
.anhang-blatt{position:fixed;left:50%;transform:translateX(-50%);z-index:73;
  bottom:calc(10px + env(safe-area-inset-bottom));
  width:min(430px,calc(100vw - 20px));border-radius:28px;padding:14px;
  animation:blatt-auf .26s cubic-bezier(.2,.8,.3,1)}
.anhang-blatt[hidden]{display:none}
.blatt-zu{width:38px;height:38px;border-radius:50%;border:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--karte);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.1);
  margin:0 0 14px;-webkit-tap-highlight-color:transparent}
.blatt-zu:active{transform:scale(.92)}
.blatt-zu svg{width:19px;height:19px;stroke-width:2}
.kachel-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kachel-reihe button{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:9px;border:0;cursor:pointer;font:inherit;
  background:rgba(0,0,0,.045);border-radius:20px;padding:20px 6px;
  color:var(--ink);font-size:15px;-webkit-tap-highlight-color:transparent;
  transition:background .15s ease,transform .15s ease}
.kachel-reihe button:hover{background:rgba(0,0,0,.08)}
.kachel-reihe button:active{transform:scale(.96)}
.kachel-reihe svg{width:25px;height:25px;stroke-width:1.7}

/* Läuft eine Sprachaufnahme, ersetzt diese Zeile das Eingabefeld */
/* Sprachnachricht: links verwerfen, Pegel über die ganze Breite, rechts senden */
.chat-aufnahme{display:flex;align-items:center;gap:12px;min-height:52px;padding:4px 0}
.chat-aufnahme[hidden]{display:none}
.chat-aufnahme .chat-rund.haken{background:var(--p-flaeche,rgba(222,120,205,.22));
  color:var(--p-schrift,#9c2e88)}
.chat-aufnahme .chat-rund.haken:hover{filter:brightness(.95)}
/* Der Pegel füllt alles zwischen Kreuz und Haken; die Zeit liegt darüber */
.welle{position:relative;flex:1;display:flex;align-items:center;
  justify-content:space-between;gap:2px;height:28px;min-width:0}
.welle i{display:block;flex:1;min-width:2px;max-width:4px;border-radius:2px;
  background:var(--p-schrift,var(--leise));opacity:.45;
  transition:height .09s linear}
.welle i:nth-last-child(-n+7){opacity:.9}
.chat-aufnahme .zeit{position:absolute;right:0;top:-11px;z-index:1;
  font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--leise);
  background:var(--fuell);padding:0 3px;border-radius:4px}

/* Anhänge in der Sprechblase */
.cn-bild{display:block;max-width:100%;width:240px;border-radius:11px;margin:1px 0 3px}
.cn-datei{display:flex;align-items:center;gap:10px;margin:2px 0 4px;
  background:rgba(0,0,0,.05);border-radius:11px;padding:9px 11px;color:inherit}
.cn-datei svg{width:22px;height:22px;stroke-width:1.6;flex:none}
.cn-datei b{display:block;font-size:15px;font-weight:500;max-width:190px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cn-datei small{display:block;font-size:12px;color:var(--leise)}
.cn-ton{display:flex;align-items:center;gap:10px;margin:2px 0 4px;min-width:196px}
.cn-ton button{flex:none;width:34px;height:34px;border-radius:50%;border:0;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--tint);color:var(--tint-on);cursor:pointer;-webkit-tap-highlight-color:transparent}
.cn-ton button:active{transform:scale(.92)}
.cn-ton svg{width:15px;height:15px;stroke-width:2}
.cn-ton .balken{flex:1;height:3px;border-radius:2px;background:rgba(0,0,0,.16);
  position:relative;overflow:hidden}
.cn-ton .balken i{position:absolute;inset:0 auto 0 0;width:0;background:var(--ink);
  border-radius:2px}
.cn-ton .dauer{font-size:12px;color:var(--leise);font-variant-numeric:tabular-nums}

/* Am Desktop sitzt der Chat als abgerundete Karte in der Mitte */
@media (min-width:701px){
  .chat-seite{left:50%;right:auto;transform:translateX(-50%);
    width:min(780px,calc(100vw - 48px));top:70px;bottom:96px;
    background:var(--karte);border:1px solid var(--line);
    border-radius:var(--radius);box-shadow:var(--schatten);overflow:hidden}
  .chat-verlauf{background:var(--bg)}
}

/* Datei-Auswahl ohne "Keine Datei gewaehlt": Feld versteckt, Knopf uebernimmt */
/* !important, weil Formularfelder sonst per .feld-form input auf 100 % Breite
   gehen — ein unsichtbares Feld hat die Seite sonst breiter gemacht als den
   Bildschirm, und man konnte quer aus der Seite herausziehen. */
.datei-versteckt{position:absolute;left:0;top:0;width:1px !important;
  height:1px !important;min-width:0;padding:0;margin:0;border:0;opacity:0;
  overflow:hidden;clip:rect(0 0 0 0)}
label.datei-knopf{display:inline-block;margin:2px 0 0;cursor:pointer;color:var(--ink)}
/* Knopf und unsichtbares Dateifeld gehören zusammen: das Feld liegt mit
   dem üblichen Abstand von 8px darunter, damit die Auswahl des Systems
   dort aufklappt und nicht über dem Knopf liegt. */
.datei-feld{position:relative;display:inline-flex}
.datei-feld>form{margin:0}
.datei-feld .datei-versteckt{left:0;top:calc(100% + 8px)}

/* ---------- Kalender: ruhiges Raster, Termine als Punkte ----------
   Vorbild ist Michas Moodbild: keine Gitterlinien, große Zahlen, darunter
   kleine Punkte; die Termine des gewählten Tages stehen darunter als Liste. */
.kal-kopf{display:flex;align-items:flex-end;gap:1em;margin:0 0 20px}
.kal-monat b{display:block;font-size:30px;font-weight:700;letter-spacing:-.02em;
  line-height:1.05}
.kal-monat span{display:block;font-size:16px;color:var(--leise);font-weight:500;
  /* Monat und Jahr klebten aneinander */
  margin-top:5px}
/* Der Kalender behält seine Größe, egal ob Tag, Woche oder Monat gewählt
   ist: Raster und Liste teilen sich eine feste Höhe. Was das Raster nicht
   braucht, bekommt die Liste — deshalb sieht man am Tag am meisten. */
.kal-bereich{display:flex;flex-direction:column}
@media (max-width:700px){
  /* Feste Höhe, nicht nur eine Mindesthöhe: nur so bleibt der Kalender in
     allen drei Ansichten gleich groß und die Liste scrollt in sich, statt
     die Personenreihe unter die Leiste zu schieben.
     380px sind Kopfzeile, Titel, Blättern, Personenreihe und der Freiraum
     für die schwebende Leiste — der Rest gehört dem Kalender. */
  .kal-bereich{height:calc(100dvh - 380px);height:calc(100svh - 380px)}
}
@media (min-width:701px){
  /* Am Rechner ist Platz genug — dort darf die Liste einfach wachsen. */
  .kal-bereich .kal-liste{overflow:visible}
}
/* Die Liste bleibt innerhalb der festen Höhe und scrollt darin — sonst
   schiebt eine volle Woche die Personenreihe unter die Leiste. */
.kal-bereich .kal-liste{flex:1;min-height:0;margin-top:18px;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* Der Einstiegstext über dem Galerie-Formular: zwei kurze Zeilen,
   etwas kleiner als der übrige Hinweistext. */
.galerie-einstieg{max-width:520px;margin:0 0 16px;font-size:14px;line-height:1.5}

/* Wie viel an dem Tag ansteht — das Datum selbst steht oben im Kopf */
.kal-zahl{margin:0 0 10px;font-size:13px;color:var(--leise);
  letter-spacing:.04em;text-transform:uppercase}
/* Nur in der Tagesansicht: Ort und Notizen unter dem Termin */
.kal-ort{color:var(--leise)}
.kal-notiz{margin:6px 0 0;font-size:14px;line-height:1.4;color:var(--ink);
  white-space:pre-wrap;overflow-wrap:anywhere}

/* Blättern sitzt jetzt unter dem Kopf, mittig zwischen ‹ und › */
.kal-blaettern{display:flex;align-items:center;gap:16px;margin:0 0 18px}
.kal-blaettern a{color:var(--leise);font-size:24px;line-height:1;
  width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--fuell)}
.kal-blaettern a:hover{color:var(--ink)}
.kal-blaettern .wortlink{font-size:14px;width:auto;height:auto;background:none;
  border-radius:0}

/* Umschalter Tag · Woche · Monat — im Moodbild das „W / M“ oben rechts */
.kal-stufen{margin-left:auto;display:flex;align-items:center;gap:2px;
  background:var(--fuell);border-radius:999px;padding:3px;flex:none}
.kal-stufen a{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:30px;border-radius:999px;font-size:14.5px;font-weight:700;
  color:var(--leise);-webkit-tap-highlight-color:transparent;transition:.16s}
.kal-stufen a:hover{color:var(--ink)}
.kal-stufen a.aktiv{background:var(--karte);color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* Wochenansicht: sieben Tage in einer Zeile */
.kal-woche{display:grid;grid-template-columns:repeat(7,1fr);gap:0;margin:0 0 26px}
.kal-woche .kal-tag{padding:8px 0 6px;gap:5px}
.kal-woche .wt{font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--leise)}
.kal-woche .kal-tag.gewaehlt .wt{color:var(--ink)}

/* Tages-Zwischenüberschrift in der Wochenliste */
.kal-tagkopf{font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--leise);margin:20px 0 2px}
.kal-tagkopf:first-child{margin-top:0}
.kal-tagkopf.heute{color:var(--ink)}

.kal-raster{display:grid;grid-template-columns:repeat(7,1fr);gap:2px 0;
  margin:0 0 30px}
.kal-wt{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--leise);text-align:center;padding:0 0 10px}
.kal-tag{position:relative;border:0;background:none;padding:7px 0 4px;cursor:pointer;
  font:inherit;display:flex;flex-direction:column;align-items:center;gap:4px;
  border-radius:12px;-webkit-tap-highlight-color:transparent;
  transition:background .15s ease}
.kal-tag .zahl{display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;font-size:16.5px;font-weight:600;
  color:var(--ink);transition:background .18s ease,color .18s ease}
.kal-tag.fremd .zahl{color:var(--line)}
.kal-tag.heute .zahl{box-shadow:inset 0 0 0 2px var(--ink)}
.kal-tag.gewaehlt .zahl{background:var(--tint);color:var(--tint-on);box-shadow:none}
.kal-tag:active .zahl{transform:scale(.92)}
/* Punkte: gefüllt = Shooting/Projekt, Ring = Meeting/Sonstiges, blass = abwesend */

/* Bubbles: jeder Termin eine Karte in der Farbe der beteiligten Person */
.kal-karte{display:flex;align-items:flex-start;gap:10px;
  background:var(--p-flaeche,var(--karte));border-radius:17px;
  padding:12px 14px;margin:0 0 8px;color:var(--ink);
  max-width:100%;min-width:0;overflow:hidden;
  transition:transform .16s ease}
.kal-karte:active{transform:scale(.985)}
.kal-karte b{display:block;font-size:16.5px;font-weight:600;line-height:1.3;
  letter-spacing:-.01em;overflow-wrap:anywhere}
.kal-karte small{display:block;font-size:13px;margin-top:2px;
  color:var(--p-schrift,var(--leise));overflow-wrap:anywhere}
.kal-karte.abwesend b,.kal-karte.aus-abo b,.kal-karte.todo-zeile b{font-weight:500}
.kal-karte.aus-abo{cursor:default}
.kal-karte .wer-kreise{align-self:center}
.kal-karte .wer-kreis{box-shadow:0 0 0 2px var(--p-flaeche,var(--karte))}
.kal-eintrag-text{flex:1;min-width:0}
/* Termine im Raster: farbige Striche in der Farbe der Person */
.kal-tag .striche{display:flex;flex-direction:column;gap:2px;width:72%;
  align-items:stretch;min-height:5px}
.kal-tag .striche i{display:block;height:3px;border-radius:2px;
  background:var(--p-schrift,var(--leise));opacity:.9}
.kal-tag .striche i.offen{background:var(--p-flaeche,var(--fuell));
  box-shadow:inset 0 0 0 1px var(--p-schrift,var(--line));opacity:1}
.kal-tag.fremd .striche i{background:var(--line);box-shadow:none}
/* Neutrale Töne für Team-Termine, To-dos und abonnierte Kalender */
/* .f-team, .f-todo, .f-abo: Farbwerte in design/tokens.css */

.kal-liste{margin-top:4px}
.kal-liste .abschnitt-kopf{margin-top:0}
.kal-liste h2{font-size:19px;font-weight:700;text-transform:none;letter-spacing:-.01em;
  color:var(--ink);margin:0}
.kal-liste .knopf{margin-top:18px}

@media (max-width:700px){
  .kal-monat b{font-size:26px}
  .kal-tag{padding:5px 0 3px}
  .kal-tag .zahl{width:31px;height:31px;font-size:15.5px}
  .kal-wt{font-size:10px}
}

/* ---------- Galerie-Detail: Foto-Raster & Titelbild-Wahl ---------- */
.foto-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:10px;margin-top:18px}
.foto-knopf{position:relative;display:block;width:100%;border:0;padding:0;background:none;
  cursor:pointer;border-radius:10px;overflow:hidden}
.foto-knopf img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;
  background:var(--fuell)}
.foto-knopf.titelbild{box-shadow:0 0 0 2.5px var(--ink)}
.titel-marke{position:absolute;left:6px;bottom:6px;background:var(--tint);color:var(--tint-on);
  font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:999px}

/* ---------- To-dos ---------- */
.todo-karte{background:var(--karte);border-radius:var(--radius);box-shadow:var(--schatten);
  padding:16px}
.todo-karte h2{margin-top:0}
/* Die Karten sind <details> — die eigene und Team offen, die anderen zugeklappt */
.todo-karte>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px}
.todo-karte>summary::-webkit-details-marker{display:none}
.todo-karte>summary h2{margin:0;flex:1;min-width:0}
.karte-zahl{font-size:12.5px;color:var(--leise);flex:none}
.todo-karte:not([open])>summary{opacity:.75}
.todo-karte:not([open])>summary::after{content:"+";font-size:17px;color:var(--leise);flex:none}
.todo-karte[open]>summary{margin-bottom:6px}
/* „Auf einen Blick“ — quer über eigene und Team-To-dos, deshalb volle Breite */
.todo-karte.blick{margin-bottom:30px}
.todo-karte.blick h2{font-size:15px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--leise);margin-bottom:4px}
.todo-zeile{display:flex;align-items:flex-start;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--line)}
.todo-haken{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--leise);
  background:none;color:var(--tint-on);font-size:13px;line-height:1;cursor:pointer;flex:none;
  margin-top:2px}
.todo-zeile.fertig .todo-haken{background:var(--ink);border-color:var(--ink)}
.todo-zeile.fertig .todo-text{color:var(--leise);text-decoration:line-through}
.todo-zeile.fertig small{display:none}
.todo-text{flex:1;min-width:0;line-height:1.35}
.todo-weg{border:0;background:none;color:var(--line);font-size:18px;cursor:pointer;flex:none}
.todo-zeile:hover .todo-weg{color:var(--leise)}
.todo-neu input{margin-top:10px}
/* Zweite Zeile: Schublade, Frist, Dringlichkeit, erster Schritt */
.todo-text small{display:flex;flex-wrap:wrap;gap:5px 9px;margin-top:3px;
  font-size:12.5px;color:var(--leise);line-height:1.3}
.todo-schild{background:var(--fuell);border-radius:6px;padding:1px 7px;
  font-weight:600;color:var(--ink)}
.frist-rot{color:var(--rot);font-weight:600}
/* Dringende und überfällige To-dos bekommen einen Balken an der Seite */
.todo-zeile.stufe-2,.todo-zeile.stufe-3{padding-left:9px;position:relative}
.todo-zeile.stufe-2::before,.todo-zeile.stufe-3::before{content:"";position:absolute;
  left:0;top:11px;bottom:11px;width:2.5px;border-radius:2px;background:var(--rot)}
.todo-zeile.stufe-2::before{background:var(--leise)}
/* Auswahl aus mehreren Möglichkeiten (Dringlichkeit im Formular) */
.wahl-reihe{display:flex;gap:8px;flex-wrap:wrap}
.wahl{position:relative;margin:0;cursor:pointer}
.wahl input{position:absolute;opacity:0;width:0;height:0}
.wahl span{display:inline-block;font-size:14px;font-weight:600;color:var(--ink);
  background:var(--fuell);border-radius:999px;padding:9px 15px;
  border:1.5px solid transparent;transition:.15s}
.wahl input:checked + span{background:var(--tint);color:var(--tint-on)}
.wahl input:focus-visible + span{border-color:var(--ink)}
.wahl.stufe-2 input:checked + span{background:var(--rot)}
.klein-knopf{font-size:13px;padding:7px 12px}

/* ---------- Login ---------- */
.login-rahmen{min-height:72vh;display:flex;align-items:center;justify-content:center}
.login-rahmen form{width:min(340px,88vw);background:var(--karte);
  border-radius:18px;box-shadow:var(--schatten);padding:30px 26px}
.login-marke{font-size:22px;font-weight:700;margin-bottom:18px;text-align:center}

/* Zwei Felder nebeneinander - auch iOS-Datumsfelder muessen sich die Breite teilen */
.feld-reihe{display:flex;gap:14px}
.feld-reihe>div{flex:1;min-width:0}
input[type=date],input[type=time]{min-width:0;min-height:47px}

@supports (-webkit-touch-callout: none){
  input[type=date],input[type=time]{
    -webkit-appearance:none;appearance:none;
    display:flex;align-items:center;width:100%;padding-right:40px;
    background-repeat:no-repeat;background-position:right 13px center;background-size:17px}
  input[type=date]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")}
  input[type=time]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
}

/* ---------- iOS-Gefuehl: Interaktionen wie am iPhone ---------- */
/* Die weiche Überblendung beim Seitenwechsel (@view-transition) ist
   wieder raus: auf dem iPhone verschwand danach die Menüleiste auf der
   Startseite komplett — Safaris Cross-Document-View-Transitions
   behandeln `position:fixed`-Elemente beim Seitenwechsel offenbar nicht
   zuverlässig. Eine kaputte Navigation wiegt schwerer als eine sanfte
   Überblendung, deshalb bleibt die Regel draußen. */
a,button,input,textarea,select{-webkit-tap-highlight-color:transparent}
a,button{touch-action:manipulation}
html{-webkit-text-size-adjust:100%}
/* Bedienelemente sollen sich wie Knöpfe anfühlen, nicht wie Text: kein
   Markieren, kein Lang-Druck-Menü. Bewusst NUR hier und nicht global —
   das ist eine App voller Telefonnummern, IBANs und Adressen, und genau
   die will man markieren und per Lang-Druck kopieren können. */
.nav,.tabs,.blatt,.knopf,.chip,.kopf-knopf,.wer-kachel,.galerie-kachel,
.portfolio-ordner-kachel,.deck{
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* Kein Anheben zum Ziehen auf Kacheln — sonst legt iOS beim langen
   Draufhalten seine rechteckige Zieh-Vorschau über das runde Bild. */
.galerie-kachel img,.deck img,.portfolio-kachel img,.foto-knopf img,
.notiz-ordner-kachel img,.wer-bild img,.rund img,
.galerie-kachel,.deck,.portfolio-kachel{-webkit-user-drag:none}
.chip,.tabs a,.wortlink,.kal-kopf .blaettern,.nav-menue a,.todo-haken{
  transition:transform .18s cubic-bezier(.2,.7,.3,1),background .18s ease,color .18s ease,opacity .18s ease}
.chip:active,.tabs a:active,.todo-haken:active{transform:scale(.9)}
.galerie-kachel{transition:box-shadow .22s ease}
.nav-menue a:active,.nav-menue-abmelden:active{background:var(--fuell);transform:scale(.98)}
.cn-blase{transition:transform .15s ease}
.cn:active .cn-blase{transform:scale(.985)}

/* ---------- Rechnungen ---------- */
form.feld-form.breit{max-width:680px}
fieldset.schritt{border:0;padding:0;margin:0 0 6px;min-width:0}
/* Abschnitts-Überschriften sehen überall gleich aus — Vorlage ist
   „Neue Galerie": klein, gesperrt, zurückhaltend. Vorher standen sie in
   Kontakt, Angebot und Rechnung in 19 px und wirkten wie eine zweite
   Seitenüberschrift. */
.schritt h2{font-size:13px;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;color:var(--leise);margin:26px 0 10px}
.schritt:first-of-type h2{margin-top:0}
.schritt h2 .klein{font-weight:500;text-transform:none;letter-spacing:0}
.klein{font-size:12.5px}
.posten-zeile{margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid var(--line)}
.posten-zeile:last-child{border-bottom:0}
.posten-zeile textarea{min-height:56px}
.posten-zahlen{display:flex;gap:8px;margin-top:8px;align-items:center}
.posten-zahlen input{min-width:0}
.posten-zahlen input[name=p_menge]{flex:0 0 64px}
.posten-zahlen input[name=p_einheit]{flex:1}
.posten-zahlen input[name=p_preis]{flex:0 0 116px}
.posten-weg{border:0;background:var(--fuell);color:var(--leise);border-radius:50%;
  width:34px;height:34px;flex:none;cursor:pointer;font-size:13px}
.posten-weg:hover{color:var(--rot)}
.haken-zeile{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;
  color:var(--ink);margin:14px 0 0;cursor:pointer}
.haken-zeile input{width:17px;height:17px;accent-color:var(--ink);margin:0}
.tabelle .rechts{text-align:right;white-space:nowrap}
.tabelle .nr{white-space:nowrap}
.tabelle td:last-child,.tabelle th:last-child{padding-right:0}
.status-wort{font-weight:500;font-size:15px}
.status-wort.entwurf{color:var(--leise)}
.status-wort.gestellt{color:#b25000}
.status-wort.bezahlt{color:#1a7f37}
.status-wort.ueberfaellig{color:var(--rot)}
.status-wort.storniert{color:var(--leise);text-decoration:line-through}
.karte-block{background:var(--karte);border-radius:var(--radius);box-shadow:var(--schatten);
  padding:18px 20px;margin:0 0 22px}
[hidden]{display:none!important}

/* Rechnungsliste am Handy: Jahrhundert-Ziffern und Status-Wort weg,
   Status wird zum Zeichen — spart Breite, damit die Tabelle passt. */
.nur-handy{display:none}
@media (max-width:700px){
  .weg-handy{display:none}
  .nur-handy{display:inline;font-size:15px;line-height:1}
  .tabelle td,.tabelle th{padding:11px 6px 11px 0;font-size:13.5px}
  .tabelle td.kappen{max-width:19vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rollbar{padding:2px 10px}
  /* Kopfzeile: Titel und Knopf müssen nebeneinander passen */
  .kopfzeile h1{font-size:22px}
  .kopfzeile .knopf{font-size:13px;padding:8px 13px;white-space:nowrap}
  .spalte-von,.spalte-mail{display:none}
  .rollbar{padding:2px 12px}
}

/* Wo Liquid Glass nicht geht (ältere Browser), wird die Scheibe fast deckend */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glas{background:var(--glas-deckend)}
  .tabs{background:var(--glas-deckend)}
}

/* ---------- Rechnungen: Formular, Summen, Profile ---------- */
.r-spalten{display:flex;gap:22px;align-items:flex-start}
.r-haupt{flex:1;min-width:0;display:flex;flex-direction:column;gap:18px}
.r-summe{flex:0 0 268px;position:sticky;top:96px}
@media (max-width:860px){
  .r-spalten{flex-direction:column}
  .r-summe{position:static;width:100%;flex:none}
}
.karte{background:var(--karte);border-radius:var(--radius);padding:20px}
.karte h2{margin-top:0}
.karte ul{margin:8px 0 12px;padding-left:20px}
.hinweis-karte{border-left:3px solid var(--rot)}
.summe-karte .summe-zeile{display:flex;justify-content:space-between;margin:0 0 6px;
  font-size:15px;color:var(--leise)}
.summe-karte .summe-zeile b{color:var(--ink);font-weight:500}
.summe-gesamt{display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--line);margin:12px 0 0;padding-top:12px;font-size:17px}
.summe-gesamt b{font-size:22px;font-weight:700}
.summe-knoepfe{display:flex;flex-direction:column;gap:10px;align-items:stretch;margin:18px 0 12px}
.summe-knoepfe .knopf{text-align:center}
.summe-knoepfe .wortlink{text-align:center}
.rechnung-form label:first-of-type{margin-top:16px}
.posten-zahlen select{flex:0 0 84px;padding-right:26px;background-position:right 8px center}
.zahlen-reihe{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 22px}
.zahl-kachel{background:var(--karte);border-radius:var(--radius);padding:14px 18px;flex:1;min-width:132px}
.zahl-kachel span{display:block;font-size:13px;color:var(--leise)}
.zahl-kachel b{display:block;font-size:20px;font-weight:600;margin-top:2px}
.zahl-kachel b.warnung{color:#b25000}
.zahl-kachel b.gefahr{color:var(--rot)}
.profil-zeile{display:flex;align-items:center;gap:12px;margin:0 0 10px;padding:16px 18px}
.profil-zeile b{display:block;font-size:17px}
.profil-zeile small{display:block;font-size:13px;color:var(--leise)}
/* Die Vorschau steht im A4-Verhältnis: die ganze Seite ist zu sehen,
   ohne dass man hineinzoomen muss. */
.pdf-rahmen{background:var(--karte);border-radius:var(--radius);overflow:hidden;
  width:100%;max-width:520px;aspect-ratio:1 / 1.414}
.pdf-rahmen iframe{width:100%;height:100%;border:0;display:block}

/* Filter: die Chips brechen um, statt seitlich aus dem Bild zu laufen.
   Nichts wird angeschnitten, und es bleibt keine Wischfläche übrig, auf der
   man versehentlich nach rechts ins Leere zieht. */
.filter-reihe{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.filter-reihe .chip{flex:none;white-space:nowrap}
/* Die Personenreihe unter dem Kalender ist die Ausnahme: dort teilen sich
   die vier Felder die volle Breite. Steht hier, damit es nach
   .filter-reihe .chip kommt und nicht davon überschrieben wird. */
.kal-personen{flex-wrap:nowrap;gap:10px;margin:26px 0 0}
.kal-personen .chip{flex:1 1 0;min-width:0;justify-content:center;
  padding:12px 6px;font-size:15px;overflow:hidden;text-overflow:ellipsis}
.filter-trenner{flex:none;width:1px;height:19px;background:var(--line);margin:0 3px}
.blatt a.gefahr-zeile{color:var(--rot)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  background:var(--fuell);padding:2px 6px;border-radius:6px}

/* Wen betrifft ein Termin: kleine Kreise mit Profilbild bzw. Initiale */
.wer-kreise{display:flex;align-items:center;margin-left:auto;flex:none;padding-left:8px}
.wer-kreis{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;overflow:hidden;flex:none;
  background:var(--p-flaeche,var(--tint));color:var(--p-schrift,var(--tint-on));
  font-size:10.5px;font-weight:700;
  box-shadow:0 0 0 2px var(--karte);margin-left:-6px}
.wer-kreis:first-child{margin-left:0}
.wer-kreis img{width:100%;height:100%;object-fit:cover;display:block}
.wer-kreis.team{background:var(--fuell);color:var(--leise)}
.wer-kreis.team svg{width:13px;height:13px;stroke-width:1.9}
/* Auf weißem Grund (Kalenderliste) passt der Ring zur Seite */
.person-zeile{padding:0 0 10px;margin:0 0 10px;border-bottom:1px solid var(--line)}
.person-zeile:last-child{border-bottom:0}
.person-zeile .feld-reihe{margin-bottom:8px}
.person-zeile .feld-reihe:last-child{margin-bottom:0}
/* Termine aus abonnierten Kalendern: schwach markiert, nicht anklickbar */
.anleitung{margin:0;padding-left:20px;font-size:14.5px;line-height:1.7}
.anleitung li{margin:0 0 2px}

/* Personen-Chips (Kalender, To-dos): Profilbild statt Buchstabe, eigene Farbe */
.person-chip{display:inline-flex;align-items:center;gap:7px;padding-left:5px}
.chip-bild{display:inline-flex;align-items:center;justify-content:center;
  width:21px;height:21px;border-radius:50%;overflow:hidden;flex:none;
  background:var(--p-flaeche,var(--karte));color:var(--p-schrift,var(--ink));
  font-size:10.5px;font-weight:700}
.chip-bild img{width:100%;height:100%;object-fit:cover;display:block}
.chip.person-chip{background:var(--p-flaeche,var(--fuell));color:var(--p-schrift,var(--ink))}
.chip.person-chip.aktiv{background:var(--p-schrift,var(--tint));color:var(--tint-on)}
.chip.person-chip.aktiv .chip-bild{background:var(--fill-strong);color:inherit}
/* Antwort-Zitat und Vorschau in der Farbe des Zitierten */
.cn-zitat{border-left-color:var(--p-schrift,var(--ink))}
.cn-zitat b{color:var(--p-schrift,var(--ink))}
.chat-antwort-vorschau .cav-inhalt{border-left-color:var(--p-schrift,var(--ink))}
.chat-antwort-vorschau b{color:var(--p-schrift,var(--ink))}
/* To-do-Bereiche tragen den Namen in der Personenfarbe */
.todo-karte h2 .bereich-bild{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;overflow:hidden;vertical-align:-5px;
  margin-right:7px;background:var(--p-flaeche,var(--fuell));
  color:var(--p-schrift,var(--ink));font-size:11px;font-weight:700}
.todo-karte h2 .bereich-bild img{width:100%;height:100%;object-fit:cover;display:block}
.todo-karte.person h2{color:var(--p-schrift,var(--leise))}

/* Aufgenommene Sprachnachricht: anhören, verwerfen oder abschicken */
.chat-vorschau{display:flex;align-items:center;gap:10px;min-height:48px;padding:3px 0}
.chat-vorschau[hidden]{display:none}
.chat-vorschau .zeit{font-size:14.5px;font-variant-numeric:tabular-nums;
  color:var(--leise);flex:none;min-width:36px;text-align:right}
.chat-vorschau .chat-rund.spielen{background:var(--tint);color:var(--tint-on)}
.chat-vorschau .balken{flex:1;height:3px;border-radius:2px;background:rgba(0,0,0,.14);
  position:relative;overflow:hidden;min-width:0}
.chat-vorschau .balken i{position:absolute;inset:0 auto 0 0;width:0;border-radius:2px;
  background:var(--p-schrift,var(--ink))}

/* Verbundene Kalender: Name, Zustand und die Zuordnung untereinander */
.abo-verwaltung{padding:0 0 14px;margin:0 0 14px;border-bottom:1px solid var(--line)}
.abo-verwaltung:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.abo-kopf{display:flex;align-items:baseline;gap:1em}
.abo-kopf b{font-size:16px}
.abo-kopf form{margin-left:auto}
.abo-zuordnung label{display:block;margin:0 0 5px}
.abo-zuordnung select{margin:0}

/* ---------- Überlaufschutz ----------
   Nichts darf die Seite breiter machen als den Bildschirm. Wo bewusst
   quer gescrollt wird (Chips, Tabellen), bleibt das Wischen im Element. */
main > *{max-width:100%}
.filter-reihe,.chips,.schnell,.rollbar,.kal-raster,.kal-woche{
  overscroll-behavior-x:none;max-width:100%}
.kal-eintrag-text{overflow:hidden}
.kal-karte b,.kal-karte small,.todo-text,.cn-text{min-width:0}

/* Farbwahl für abonnierte Kalender: Tupfer zum Antippen */
.farb-reihe{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 4px}
.farb-wahl{position:relative;margin:0;cursor:pointer;line-height:0}
.farb-wahl input{position:absolute;opacity:0;width:0;height:0}
.farb-wahl span{display:block;width:30px;height:30px;border-radius:50%;
  background:var(--p-flaeche,var(--fuell));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:.15s}
.farb-wahl input:checked + span{box-shadow:inset 0 0 0 3px var(--p-schrift,var(--ink))}
.farb-wahl input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- Öffentliche Angebotsseite (ohne Anmeldung) ----------
   Ruhiger als die App-Seiten: keine Navigation, viel Weiß, wie die
   Kundengalerien. */
body.gast{background:var(--bg)}
.gast-seite{max-width:640px;margin:0 auto;padding:34px 22px 70px}
.gast-marke{font-size:15.5px;font-weight:700;margin:0 0 34px}
.gast-seite h1{font-size:27px;margin:0 0 6px}
.gast-eck{color:var(--leise);font-size:14px;margin:0 0 26px}
.gast-an{font-size:16px;margin:0 0 22px}
.gast-text{max-width:560px;line-height:1.55;margin:0 0 18px}
.gast-h2{font-size:12.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--leise);margin:30px 0 10px}
.gast-tabelle{width:100%;border-collapse:collapse;margin:26px 0 0}
.gast-tabelle td{padding:13px 0;border-bottom:1px solid var(--line);
  vertical-align:baseline}
.gast-tabelle small{display:block;color:var(--leise);font-size:13px;margin-top:2px}
.gast-tabelle .rechts{text-align:right;white-space:nowrap;padding-left:14px}
.gast-tabelle tr.summe td{border-bottom:0;border-top:1.5px solid var(--ink);
  font-size:17px;padding-top:14px}
.gast-zusatz{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:0 0 8px;
  background:var(--karte);border-radius:14px;cursor:pointer;font-size:15.5px}
.gast-zusatz input{width:19px;height:19px;accent-color:var(--ink);flex:none;margin:0}
.gast-zusatz .text{flex:1;min-width:0}
.gast-zusatz .preis{color:var(--leise);white-space:nowrap}
.gast-zusage{margin:32px 0 0;padding:20px;background:var(--karte);border-radius:18px}
.gast-zusage label{margin:0 0 8px}
.gast-zusage input{margin-bottom:14px;background:var(--bg-elevated)}
.gast-hinweis{background:var(--karte);border-radius:16px;padding:16px 18px;margin:0 0 26px}
.gast-hinweis b{display:block;margin-bottom:3px}
.gast-hinweis span{color:var(--leise);font-size:14.5px}
.gast-hinweis.gut{background:#e6f4ea}
.gast-fuss{color:var(--leise);font-size:14px;margin:26px 0 0;max-width:560px}
.gast-fuss.klein{font-size:12.5px;margin-top:12px}
/* Vorgehaltene Wunschtermine aus einem Angebot: sichtbar, aber unverbindlich */
.kal-karte.angefragt{background:none;box-shadow:inset 0 0 0 1.5px var(--p-flaeche,var(--line))}
.kal-karte.angefragt b{font-weight:500}

/* ---------- Feedback ---------- */
/* Zweite Chip-Reihe (Status) tritt leiser auf als die erste (Bereich) */
.chip.leise-chip{font-size:13px;padding:5px 12px}
.fb-liste{display:flex;flex-direction:column;gap:12px;margin:0 0 8px}
.fb-karte{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;
  background:var(--karte);border-radius:var(--radius);box-shadow:var(--schatten)}
.fb-inhalt{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;color:var(--ink)}
.fb-kopf{display:flex;align-items:center;flex-wrap:wrap;gap:6px 9px}
/* In der Liste trägt nur die Dringlichkeit Farbe — das Status-Zeichen bleibt
   grau, sonst sähen „Neu" und „bald dran" beide gleich orange aus. */
.fb-kopf .status-wort{margin-left:auto;font-size:13px;color:var(--leise)}
.fb-kopf .status-wort.storniert{text-decoration:none}
.fb-text{line-height:1.4;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fb-fuss{font-size:12.5px;color:var(--leise);overflow-wrap:anywhere}
.fb-bild{flex:none;width:54px;height:54px;border-radius:12px;overflow:hidden}
.fb-bild img{width:100%;height:100%;object-fit:cover;display:block}
/* Auswahlhaken für die Übergabe — sieht nur Micha */
.fb-haken{position:relative;flex:none;margin-top:2px;cursor:pointer}
.fb-haken input{position:absolute;opacity:0;width:0;height:0}
.fb-haken span{display:block;width:20px;height:20px;border-radius:6px;
  border:1.5px solid var(--line);background:var(--bg-elevated)}
.fb-haken input:checked + span{background:var(--ink);border-color:var(--ink)}
.fb-haken input:checked + span::after{content:"✓";color:var(--tint-on);font-size:13px;
  display:block;line-height:19px;text-align:center}
.fb-gewaehlt{list-style:none;padding:0;margin:10px 0 0;font-size:13px;color:var(--leise)}
.fb-gewaehlt li{overflow-wrap:anywhere;padding:2px 0}
.fb-volltext{white-space:pre-line;overflow-wrap:anywhere;max-width:640px;line-height:1.5}
.fb-anhaenge{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px}
.fb-anhaenge img{width:150px;height:150px;object-fit:cover;border-radius:14px;display:block}
.fb-uebergabe{width:100%;box-sizing:border-box;margin:14px 0 0;font-size:13px;
  line-height:1.5;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* Dringlichkeit als Punkt: grün ruhig, orange bald, rot eilig — dieselben
   drei Töne, die die Rechnungsliste für ihre Zustände benutzt. */
.d-punkt{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none;
  vertical-align:baseline}
.d-punkt.ruhig{background:#1a7f37}
.d-punkt.bald{background:#b25000}
.d-punkt.eilig{background:var(--rot)}
.wahl span .d-punkt{margin-right:6px}
.wahl input:checked + span .d-punkt{background:var(--tint-on)}
.leise-text .d-punkt{margin-right:5px}
/* Liegt nur da, damit der Kopier-Knopf etwas zum Greifen hat */
.nur-zum-kopieren{position:absolute;left:-9999px;top:0;width:1px !important;
  height:1px !important;padding:0;border:0;opacity:0}
.teil-wahl .knopf.aktiv{background:var(--tint);color:var(--tint-on)}
/* Wer ein Angebot angelegt hat — klein neben dem Empfänger */
.klein-kreise{display:inline-flex;vertical-align:middle;margin-left:6px}
.klein-kreise .wer-kreis{width:18px;height:18px;font-size:9px}

/* Formularfuß aus Symbolen: Häkchen speichert links, ✕ löscht rechts */
.fuss-zeichen{justify-content:space-between}
.fuss-rund{width:52px;height:52px;border-radius:50%;border:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:transform .12s}
.fuss-rund svg{width:23px;height:23px;stroke-width:2.2}
.fuss-rund:active{transform:scale(.92)}
.fuss-rund.gut{background:var(--tint);color:var(--tint-on)}
.fuss-rund.gefahr{background:var(--fuell);color:var(--rot)}
/* Wischen an einer To-do-Zeile: rechts = erledigt, links = löschen */
.todo-zeile{touch-action:pan-y}
.todo-zeile.wisch-fertig{background:rgba(26,127,55,.10);border-radius:10px}
.todo-zeile.wisch-weg{background:rgba(215,0,21,.10);border-radius:10px}

/* Kontodaten der anderen — nur zum Nachschlagen, nichts zum Bearbeiten */
.konto-liste{display:flex;flex-direction:column;gap:10px;max-width:520px}
.konto-zeile{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;
  background:var(--karte);border-radius:var(--radius);padding:12px 16px}
.konto-iban{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;
  overflow-wrap:anywhere}
.konto-zeile .knopf{margin-left:auto}
/* Das „+" im Abschnittskopf, z. B. bei den Galerien.
   44px breit, damit sein Zeichen auf derselben senkrechten Linie sitzt wie
   das Vergrößern-Zeichen der Schnellnotiz darüber (das ist ebenfalls 44px
   breit und rechtsbündig). Der sichtbare Kreis bleibt 30px und wird als
   ::before mittig hineingelegt — so verschiebt sich in der Höhe nichts. */
.abschnitt-plus{position:relative;display:inline-flex;align-items:center;
  justify-content:center;width:44px;height:30px;color:var(--ink)}
.abschnitt-plus::before{content:"";position:absolute;left:50%;top:50%;
  width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;
  background:var(--fuell)}
.abschnitt-plus svg{position:relative;width:17px;height:17px;stroke-width:2}
/* Metazeile aus einzelnen Pillen statt einer langen Textzeile mit Punkten */
.meta-reihe{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 20px}
.meta-schild{display:inline-flex;align-items:center;gap:6px;background:var(--fuell);
  border-radius:999px;padding:4px 11px;font-size:13px;color:var(--leise);
  overflow-wrap:anywhere}

/* Instagram neben der Telefonnummer in der Kontaktliste */
.insta-knopf{display:inline-flex;align-items:center;vertical-align:middle;
  margin-left:8px;color:var(--leise)}
.insta-knopf svg{width:17px;height:17px;stroke-width:1.8}
.insta-knopf:hover{color:var(--ink)}
/* Ohne Bild trägt der Chip nur den Namen — kein Kürzel daneben */
.person-chip:not(:has(.chip-bild)){padding-left:14px}

/* Dringlichkeit: die gewählte Stufe färbt sich zart in ihrer eigenen Farbe,
   statt schwarz zu werden — und die drei passen zusammen in eine Zeile. */
.wahl-reihe.dringlich{flex-wrap:nowrap;gap:5px}
/* Kein min-width:0 — so darf keine Stufe schmaler werden als ihr Wort,
   der Rest der Zeile wird gleichmäßig darüber verteilt. */
.wahl-reihe.dringlich .wahl{flex:1 1 auto}
.wahl-reihe.dringlich .wahl span{display:flex;align-items:center;justify-content:center;
  gap:4px;width:100%;padding:7px 2px;font-weight:500;letter-spacing:-.01em;
  white-space:nowrap;
  /* Schrumpft auf schmalen Geräten mit, damit „Kann warten“ nie anstößt */
  font-size:clamp(10.5px,3.1vw,13px)}
.wahl-reihe.dringlich .d-punkt{width:7px;height:7px}
.wahl-reihe.dringlich .wahl input:checked + span{background:var(--fuell);color:var(--ink);
  box-shadow:inset 0 0 0 1.5px currentColor}
.wahl-reihe.dringlich .stufe-0 input:checked + span{background:#e8f4ea;color:#1a7f37}
.wahl-reihe.dringlich .stufe-1 input:checked + span{background:#fbeee2;color:#b25000}
.wahl-reihe.dringlich .stufe-2 input:checked + span{background:#fce8e9;color:var(--rot)}
/* Der Punkt behält seine Farbe — auch wenn der Chip gewählt ist */
.wahl-reihe.dringlich .wahl input:checked + span .d-punkt{background:currentColor}

/* Sterne-Bewertung: fünf Radio-Knöpfe, optisch als Sterne */
.sterne{border:0;padding:0;margin:24px 0 0}
.sterne legend{padding:0}
.stern{display:inline-flex;position:relative;cursor:pointer;margin:8px 6px 0 0}
.stern input{position:absolute;opacity:0;width:0;height:0}
.stern svg{width:40px;height:40px;fill:none;stroke:var(--line);stroke-width:1.4;
  transition:fill .12s,stroke .12s}
.stern:hover svg,.stern:has(input:checked) svg{stroke:#e0a400;fill:#f5c518}
/* Alle Sterne bis zum gewählten füllen sich mit */
.stern:has(~ .stern input:checked) svg{stroke:#e0a400;fill:#f5c518}
.stern:hover ~ .stern svg{stroke:var(--line);fill:none}
.stern input:focus-visible + svg{stroke:var(--ink)}
.weg{position:absolute;left:-9999px}
/* Fertige Bewertung, nur zum Ansehen */
.sterne-fest{display:inline-flex;gap:2px;margin:0}
.sterne-fest svg{width:17px;height:17px;fill:none;stroke:var(--line);stroke-width:1.5}
.sterne-fest svg.voll{fill:#f5c518;stroke:#e0a400}
.fb-kopf .sterne-fest{margin-left:auto}
.gast-zeile{display:flex;align-items:baseline;gap:12px;margin:0 0 8px}
.gast-zeile .text{flex:1;min-width:0}
/* Passwort-Formular klappt unter der jeweiligen Zeile auf — <details>
   erledigt das ohne JavaScript, damit der Knopf nie ins Leere greift. */
.zugang{margin:0}
.zugang>summary{list-style:none;cursor:pointer;display:list-item}
.zugang>summary::-webkit-details-marker{display:none}
.zugang-pfeil{flex:none;font-size:12.5px;color:var(--leise);
  background:var(--fuell);border-radius:999px;padding:4px 11px}
.zugang[open] .zugang-pfeil{background:var(--tint);color:var(--tint-on)}
.pw-form{background:var(--karte);border-radius:var(--radius);padding:14px 16px;
  margin:8px 0 0}
.zugang-zeile .leise-text{flex:1;min-width:0}
.zugang-zeile .knopf{margin-left:auto}

/* Feedback-Karte: links das Auswahlkästchen für die Übergabe,
   rechts der Haken, der den Punkt vom Tisch nimmt. */
.fb-griffe{display:flex;align-items:flex-start;flex:none}
.todo-haken.fb-erledigt{align-self:center;margin:0 0 0 2px}

/* Profil: Bild und Name offen, alles andere klappt man bei Bedarf auf */
.profil-kopf{display:flex;align-items:center;gap:16px;margin:0 0 14px}
.profil-kopf b{display:block;font-size:17px}
.profil-kopf .leise-text{display:block}
/* Das eigene Bild ist ein Knopf (klappt alles zu) — es soll aber
   aussehen wie vorher, nicht wie ein Knopf. */
button.profil-gross{border:0;padding:0;margin:0;cursor:pointer;
  font-family:var(--marke-schrift);-webkit-tap-highlight-color:transparent;
  transition:transform .15s}
button.profil-gross:active{transform:scale(.94)}
/* Die anderen im Team: rechts in derselben Zeile wie das eigene Bild */
.profil-andere{margin-left:auto;display:flex;align-items:center;gap:2px}
.profil-kopf{margin-bottom:22px}
.klapp{max-width:520px;margin:0 0 10px;background:var(--karte);
  border-radius:var(--radius);box-shadow:var(--schatten);overflow:hidden}
.klapp>summary{list-style:none;cursor:pointer;display:list-item;padding:15px 18px}
.klapp>summary::-webkit-details-marker{display:none}
.klapp-kopf{display:flex;align-items:baseline;gap:10px}
.klapp-kopf b{font-size:15.5px}
.klapp-kopf>span{margin-left:auto;font-size:12.5px;color:var(--leise);
  text-align:right;overflow-wrap:anywhere}
.klapp>summary::after{content:"";display:block;height:0}
.klapp[open]>summary{padding-bottom:6px}
.klapp-inhalt{padding:0 18px 18px}
.klapp-inhalt label:first-of-type{margin-top:0}
/* Die Formulare darin bringen ihre eigene Karte nicht mehr mit */
.klapp-inhalt .feld-form{background:none;box-shadow:none;padding:0;max-width:none}
.klapp-inhalt .pw-form{background:var(--bg);padding:14px 16px}

/* Was gerade online ist — kleine Sprungmarken über der Feedback-Liste */
.projekt-links{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.projekt-links a{display:inline-flex;align-items:center;gap:7px;
  background:var(--karte);border-radius:999px;padding:7px 14px;
  font-size:14px;font-weight:500;color:var(--ink);box-shadow:var(--schatten)}
.projekt-links svg{width:14px;height:14px;stroke-width:1.9;color:var(--leise);flex:none}
.projekt-links a:active{transform:scale(.97)}

/* ==========================================================================
   Am Rechner: dieselbe App, aber mit Maus und großem Fenster bedient.
   Ab 701 px — also überall außer am Handy — wandert die Tab-Leiste nach oben
   in die Kopfzeile — unten schwebend verdeckte sie sonst dauerhaft den
   unteren Teil langer Seiten. Gleiches Element, nur anders platziert,
   damit Menü und Blätter weiter funktionieren.
   ========================================================================== */
@media (min-width:701px){
  /* Neben der Wortmarke, nicht rechts — dort sitzen schon Seiten-Plus
     und Profilbild, und die dürfen nicht verdeckt werden. */
  .tabs{top:9px;bottom:auto;left:112px;right:auto;transform:none;
    gap:2px;padding:4px;border-radius:24px}
  .tabs a,.tabs button{width:42px;height:36px;border-radius:18px}
  .tabs svg{width:22px;height:22px}
  body:has(.chat-form :focus) .tabs,body.tippt .tabs{
    opacity:1;pointer-events:auto;transform:none}
  /* Ohne schwebende Leiste unten braucht die Seite dort keinen Platz mehr */
  main{padding-bottom:56px}
  /* Am Rechner dürfen die Schnellaktionen nicht über die ganze Breite
     auseinandergezogen werden — vier riesige Balken sähen falsch aus. */
  .schnell-start{max-width:660px}
  .chat-seite{top:calc(60px + env(safe-area-inset-top));bottom:18px}
  .chat-verlauf{max-width:900px;margin:0 auto;width:100%}
  .chat-form{max-width:900px;margin-left:auto;margin-right:auto;width:100%}
  /* Das „Mehr“-Blatt klappt jetzt unter der Kopfzeile auf, nicht von unten */
  .blatt{top:calc(62px + env(safe-area-inset-top));bottom:auto;left:auto;right:22px;
    transform:none;
    animation:blatt-auf-oben .22s cubic-bezier(.2,.8,.3,1)}
  @keyframes blatt-auf-oben{from{opacity:0;transform:translateY(-10px) scale(.98)}
    to{opacity:1;transform:none}}
  /* Zwei Spalten, wo eine Karte sonst über die halbe Breite leer bliebe */
  .fb-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start}
  .konto-liste{max-width:640px}
}

/* Maus statt Finger: sichtbare Rückmeldung beim Überfahren */
@media (hover:hover) and (pointer:fine){
  .fb-karte:hover,.konto-zeile:hover,.termin-zeile:hover,.deck:hover{
    box-shadow:0 4px 18px rgba(0,0,0,.10)}
  .klapp>summary:hover .klapp-kopf b,.zugang>summary:hover b{color:var(--p-schrift,var(--ink))}
  .tabs a:hover,.tabs button:hover{background:rgba(0,0,0,.045)}
  .chip:hover,.knopf:hover{filter:brightness(.97)}
  .projekt-links a:hover{box-shadow:0 4px 16px rgba(0,0,0,.12)}
}

/* Tastatur: wer mit Tab navigiert, muss sehen, wo er ist */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,label.wahl:focus-within span{
  outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}

/* ---------- Portfolio & Wissen ---------- */
/* Der Stern liegt über der Foto-Kachel — er gehört nur in die interne
   Ansicht, die Kundengalerie wird aus einem eigenen Template gebaut. */
.foto-kachel{position:relative}
.stern-form{position:absolute;top:7px;right:7px;margin:0}
.stern-knopf{width:30px;height:30px;border-radius:50%;border:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.85);box-shadow:0 1px 5px rgba(0,0,0,.18);
  -webkit-tap-highlight-color:transparent;transition:transform .12s}
.stern-knopf svg{width:16px;height:16px;fill:none;stroke:var(--leise);stroke-width:1.7}
.stern-knopf.aktiv svg{fill:#f5c518;stroke:#e0a400}
.stern-knopf:active{transform:scale(.9)}

.portfolio-raster{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.portfolio-kachel{background:var(--karte);border-radius:var(--radius);overflow:hidden;
  border:0;padding:0;cursor:pointer;display:block;
  -webkit-tap-highlight-color:transparent;transition:transform .12s}
.portfolio-kachel:active{transform:scale(.97)}
.portfolio-kachel img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.portfolio-weg{border:0;background:none;padding:0;cursor:pointer;color:var(--line);
  display:inline-flex;flex:none}
.portfolio-weg svg{width:15px;height:15px;stroke-width:2}
.portfolio-weg:hover{color:var(--rot)}

.suche-reihe{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 20px;
  max-width:520px}
.suche-reihe input{flex:1;min-width:180px;margin:0}
.wissen-griffe{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}

/* ==========================================================================
   Tippflächen: mindestens 44×44, so wie Apple es vorgibt.
   Nicht durch größere Symbole gelöst, sondern durch eine unsichtbare
   Fläche rund um das unverändert kleine Zeichen — ein ::after im Knopf
   selbst, damit sich am Layout nichts verschiebt.
   ========================================================================== */
.kopf-knopf,.nav-profil,.chat-rund,.cn-ton button,.todo-haken,
.stern-knopf,.blatt-zu,.fuss-rund,.todo-weg,.portfolio-weg{position:relative}
.kopf-knopf::after,.nav-profil::after,.chat-rund::after,.cn-ton button::after,
.todo-haken::after,.stern-knopf::after,.blatt-zu::after,.todo-weg::after,
.portfolio-weg::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%}

/* Sterne erscheinen erst im „Merken"-Modus — sonst schwebt nichts über
   den Fotos, wie „Auswählen" in Fotos. */
.stern-form{display:none}
.foto-raster.merken .stern-form{display:block}
.stern-knopf.wackelt{animation:wackeln .4s}
@keyframes wackeln{0%,100%{transform:none}25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}}

/* Vorschau innerhalb der Portfolio-Seite — man verlässt sie nie */
.lupe{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.92);
  display:flex;align-items:center;justify-content:center;
  padding:calc(60px + env(safe-area-inset-top)) 16px
          calc(150px + env(safe-area-inset-bottom));
  animation:blenden .2s ease}
.lupe[hidden]{display:none}
.lupe img{max-width:100%;max-height:100%;object-fit:contain;border-radius:12px}
.lupe-zu{position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;
  width:38px;height:38px;border-radius:50%;border:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);color:#fff;-webkit-tap-highlight-color:transparent}
.lupe-zu svg{width:18px;height:18px;stroke-width:2}
.lupe-fuss{position:absolute;left:12px;right:12px;
  bottom:calc(12px + env(safe-area-inset-bottom));
  border-radius:22px;padding:14px 16px}
.lupe-herkunft{margin:0 0 10px;font-size:14px;color:var(--leise)}
.lupe-reihe{display:flex;gap:8px;margin:0 0 10px}
.lupe-reihe input{flex:1;min-width:0;margin:0}
.gefahr-wort{color:var(--rot)}

/* Die Seitenleiste gehört zum Rechner-Layout und steht sonst nicht da.
   Ohne diese Zeile stünde sie am Telefon unformatiert mitten auf der
   Seite — alle ihre Regeln stecken im Block darunter. */
.leiste{display:none}

/* ==========================================================================
   DAS RECHNER-LAYOUT (Vorhaben 11)

   Bis hierher gilt: Telefon ist der Normalfall. Ab hier gilt für breite
   Fenster etwas anderes — und zwar vollständig anderes, nicht als Flicken.
   Die Grenze ist 1000px. **Unterhalb davon ändert dieser Block nichts.**

   Was er tut:
   · Die schwebende Tableiste unten (5 Symbole + „Mehr") weicht einer
     festen Seitenleiste links, in der alle Bereiche mit Namen stehen.
   · main ist nicht mehr auf 1020px gedeckelt.
   · Bedienelemente werden kleiner: 44px ist Apples Maß für Finger, mit
     Maus reichen 28–32.

   Was er ausdrücklich NICHT tut: die Gestaltung ändern. Erode, Palette,
   Glasflächen und Symbole bleiben, wie sie sind.
   ========================================================================== */
@media (min-width:1000px){
  :root{--leiste-b:240px; --leiste-schmal:62px}
  :root[data-leiste="schmal"]{--leiste-b:var(--leiste-schmal)}

  /* ---------- Die Seitenleiste ---------- */
  .leiste{position:fixed;top:0;bottom:0;left:0;width:var(--leiste-b);z-index:60;
    display:flex;flex-direction:column;gap:2px;
    padding:14px 10px 10px;box-sizing:border-box;
    background:var(--bg-group);border-right:.5px solid var(--line);
    transition:width var(--t-ui) var(--ease)}
  .leiste-kopf{display:flex;align-items:center;gap:8px;padding:0 6px 10px}
  .leiste-marke{display:inline-flex;color:var(--ink);flex:none}
  /* 27px wie in der Kopfleiste am Telefon — das Zeichen ist ein Raster
     aus 11 × 11 Linien und wird kleiner zur Fläche. */
  .leiste-marke svg{width:27px;height:27px;display:block}
  .leiste-klapp{margin-left:auto;border:0;background:none;padding:0;cursor:pointer;
    width:30px;height:30px;border-radius:8px;color:var(--leise);flex:none;
    display:inline-flex;align-items:center;justify-content:center;
    transition:background var(--t-press),color var(--t-press)}
  .leiste-klapp svg{width:19px;height:19px}
  .leiste-klapp:hover{background:var(--fuell);color:var(--ink)}

  /* „Neu" oben — der Platz, an dem man es am Rechner sucht. */
  .leiste-neu{padding:0 0 12px}
  .leiste-neu-knopf{display:flex;align-items:center;gap:10px;width:100%;
    border:0;cursor:pointer;font:inherit;font-size:14.5px;font-weight:600;
    background:var(--tint);color:var(--tint-on);
    padding:0 12px;height:34px;border-radius:var(--r-control);
    transition:opacity var(--t-press)}
  .leiste-neu-knopf:hover{opacity:.85}
  .leiste-neu-knopf svg{width:17px;height:17px;stroke-width:2;flex:none;fill:none}
  .leiste-kuerzel{margin-left:auto;font-style:normal;font-size:11.5px;opacity:.6;
    letter-spacing:.02em}

  /* Die Bereiche: alle vierzehn, mit Namen, in Gruppen. Kein „Mehr". */
  .leiste-bereiche{flex:1;min-height:0;overflow-y:auto;display:flex;
    flex-direction:column;gap:1px;margin:0 -4px;padding:0 4px}
  .leiste-bereiche::-webkit-scrollbar{width:0}
  .leiste-gruppe{margin:14px 0 4px;padding:0 8px;font:var(--t-caption);
    letter-spacing:var(--caption-tracking);text-transform:uppercase;
    color:var(--label-3)}
  .leiste-gruppe:first-child{margin-top:0}
  .leiste-bereiche a{display:flex;align-items:center;gap:10px;
    /* 30px statt 44: mit Maus ist Apples Fingermaß fast das Doppelte
       des Nötigen, und es kostet hier vierzehn Mal Übersicht. */
    height:30px;padding:0 8px;border-radius:8px;font-size:14.5px;
    color:var(--label-2);white-space:nowrap;overflow:hidden}
  .leiste-bereiche a svg{width:18px;height:18px;stroke-width:1.7;flex:none;fill:none}
  .leiste-bereiche a span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .leiste-bereiche a:hover{background:var(--fuell);color:var(--ink)}
  .leiste-bereiche a.aktiv{background:var(--fill-strong);color:var(--ink);font-weight:600}
  .leiste-zahl{flex:none;font-style:normal;font-size:12px;color:var(--leise)}

  /* Das Konto unten, nicht oben rechts. */
  .leiste-konto{display:flex;align-items:center;gap:10px;width:100%;
    border:0;background:none;font:inherit;font-size:14.5px;cursor:pointer;
    padding:0 8px;height:38px;margin-top:6px;border-radius:8px;
    color:var(--ink);text-align:left;flex:none}
  .leiste-konto:hover{background:var(--fuell)}
  .leiste-konto .rund{width:24px;height:24px;font-size:11px}
  .leiste-konto-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap}

  /* Eingeklappt bleiben die Zeichen stehen — die Leiste verschwindet nicht. */
  :root[data-leiste="schmal"] .leiste{padding-left:8px;padding-right:8px}
  :root[data-leiste="schmal"] .leiste-bereiche a span,
  :root[data-leiste="schmal"] .leiste-gruppe,
  :root[data-leiste="schmal"] .leiste-zahl,
  :root[data-leiste="schmal"] .leiste-kuerzel,
  :root[data-leiste="schmal"] .leiste-konto-name,
  :root[data-leiste="schmal"] .leiste-neu-knopf span{display:none}
  :root[data-leiste="schmal"] .leiste-bereiche a,
  :root[data-leiste="schmal"] .leiste-neu-knopf,
  :root[data-leiste="schmal"] .leiste-konto{justify-content:center;padding:0}
  :root[data-leiste="schmal"] .leiste-gruppe + a{margin-top:10px}
  :root[data-leiste="schmal"] .leiste-kopf{flex-direction:column;gap:6px;padding-bottom:12px}
  :root[data-leiste="schmal"] .leiste-klapp{margin:0}

  /* Das „Neu"-Blatt hängt an der Leiste, nicht in der Bildschirmmitte. */
  .leiste-blatt{left:calc(var(--leiste-b) + 8px);transform:none;
    top:58px;bottom:auto;width:232px;border-radius:var(--r-card);padding:8px}
  .leiste-blatt .blatt-titel{padding:4px 10px 6px}
  .leiste-blatt a,.leiste-blatt button{display:flex;align-items:center;gap:11px;
    width:100%;border:0;background:none;font:inherit;font-size:14.5px;
    cursor:pointer;text-align:left;padding:8px 10px;border-radius:8px;
    color:var(--ink)}
  .leiste-blatt a:hover,.leiste-blatt button:hover{background:var(--fuell)}
  .leiste-blatt svg{width:18px;height:18px;stroke-width:1.7;flex:none;fill:none}

  /* ---------- Was am Rechner weicht ---------- */
  /* Die Tableiste ist eine iPhone-Tableiste. Am Rechner ersetzt die
     Seitenleiste sie ganz — sie wird nicht verschoben. */
  .tabs,#mehr-blatt,#blatt-grund,.nav-marke,.nav-profil{display:none}
  /* Von der Kopfleiste bleibt nur die Seiten-Aktion: sie ist auf achtzehn
     Seiten etwas anderes („Neue Galerie", „Mehr zu dieser Rechnung") und
     gehört deshalb an die Seite, nicht in die Leiste. Kein Balken, kein
     Glas — nur der Knopf, oben rechts im Inhalt. */
  /* inset:auto zuerst — es setzt alle vier Kanten zurück und würde ein
     davor notiertes top/right wieder aufheben. */
  .nav{position:fixed;inset:auto;top:16px;right:26px;width:auto;
    padding:0;gap:8px;background:none;border:0;-webkit-backdrop-filter:none;
    backdrop-filter:none;z-index:55}

  /* ---------- Die Deckelung fällt ---------- */
  main{max-width:none;margin:0 0 0 var(--leiste-b);
    padding:30px 26px 60px;box-sizing:border-box;
    transition:margin-left var(--t-ui) var(--ease)}
  /* Breite heißt „mehr nebeneinander", nicht breitere Absätze. Wo eine
     Seite nur Fließtext hat, bleibt er lesbar schmal. */
  .hinweis,.gast-text,p.fehler,p.erfolg{max-width:62ch}
  /* Die Luft für die Tastatur braucht nur das Telefon. */
  body.tippt main{padding-bottom:60px}

  h1{font-size:26px;margin:0 0 18px}
  h2{margin:28px 0 8px}
  .kopf-knopf{width:30px;height:30px}
  .kopf-knopf svg{width:17px;height:17px}
  .knopf{padding:8px 15px;font-size:14.5px}

  /* Das persönliche Menü klappt am Rechner über dem Konto auf, nicht
     oben rechts — es gehört zu dem Knopf, den man gedrückt hat. */
  .nav-menue{top:auto;right:auto;left:calc(var(--leiste-b) + 8px);bottom:12px}

  /* ---------- Die Startseite als Raster ----------
     Sie war ein Stapel: vier Knöpfe, Termine, ToDos, Notiz, Galerien —
     alles untereinander, obwohl links und rechts je 330px frei waren.
     Jetzt zwei Spalten, und alles ist bei 1680 × 1050 ohne Scrollen da. */
  .start-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"termine todos" "notiz todos" "galerien galerien";
    gap:4px 40px;align-items:start;max-width:1500px}
  .sf-termine{grid-area:termine}
  .sf-todos{grid-area:todos}
  .sf-notiz{grid-area:notiz}
  /* Die Galerien über die ganze Breite: sie sind das einzige auf dieser
     Seite, das von Platz wirklich profitiert. */
  .sf-galerien{grid-area:galerien}
  .start-feld > .abschnitt-kopf{margin-top:24px}
  /* Die vier Anlegen-Knöpfe sind am Rechner doppelt: dasselbe steht seit
     Vorhaben 11 hinter „Neu" oben in der Seitenleiste, wo man es sucht. */
  .schnell-start{display:none}
  /* Der Termin-Kasten darf mehr zeigen als am Telefon: dort waren zwei
     Zeilen die ganze Höhe, hier ist Platz für fünf. */
  .termine-scroll{max-height:none;-webkit-mask-image:none;mask-image:none}
  .termin-zeile{margin-bottom:8px}
  /* Ein Notizfeld über 1400px ist keine Notiz mehr. */
  .sf-notiz .start-notiz textarea{max-width:640px}
  /* Die Galerien passen sich hier dem Feld an, nicht der Fensterhöhe. */
  .sf-galerien .deck-reihe{--deck-hoehe:190px}

  /* Formulare. 520px sind am Rechner eine Telefonspalte in der Ecke eines
     großen Fensters — aber ein Eingabefeld über 1400px ist auch keine
     Verbesserung. Das Paaren von Feldern macht die Vorlage selbst mit
     `.feld-reihe`; hier bekommt sie nur mehr Raum dafür. */
  form.feld-form{max-width:760px;padding:26px 24px}
  form.feld-form.breit{max-width:960px}
  .feld-reihe{gap:22px}

  /* Tabellen und Listen laufen nicht bis an den Rand: eine Zeile über
     1400px liest man nicht mehr von links nach rechts. Aufgehoben wird
     das erst, wenn Vorhaben 12 daraus Liste plus Detail macht — dann
     steht rechts etwas, das die Breite auch braucht. */
  .tabelle,.rollbar{max-width:1180px}
  /* Zwei Kacheln auf 1440px sind zwei Plakate. Die Spaltenzahl richtet
     sich am Rechner nach dem Platz, nicht nach der Telefonbreite. */
  .galerie-raster{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:26px}
  .foto-raster{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
  .portfolio-raster{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
  /* Das Monatsraster zeigt heute nur Zahlen. Über 1400px gezogen sähe es
     leerer aus als vorher — Vorhaben 13 schreibt die Termine hinein, dann
     darf es die Breite nehmen. */
  .kal-bereich,.kal-kopf,.kal-raster,.kal-liste{max-width:1100px}
}