/* plottohome Corporate Design: Waldgrün, Koralle, Sonne · Schriften Bricolage Grotesque + DM Sans (liegen in www/fonts) */
@font-face{font-family:"Bricolage Grotesque";src:url("fonts/BricolageGrotesque.ttf") format("truetype");font-weight:200 800;font-display:swap}
@font-face{font-family:"DM Sans";src:url("fonts/DMSans.ttf") format("truetype");font-weight:100 1000;font-display:swap}
:root{
  --wald:#0F4D3F; --koralle:#F2613F; --sonne:#F6C445; --nacht:#12201C;
  --grund:#F5F3EE; --flaeche:#ffffff; --tinte:#12201C; --leise:#5E6A65; --linie:#E3DED4;
  --akzent:#0F4D3F; --gelb:#F6C445; --vorlogin:#0F4D3F; --kumpelkarte:#12201C;
  --schrift: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --anzeige: "Bricolage Grotesque", ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --grund:#0E1513; --flaeche:#17201D; --tinte:#EEF2EF; --leise:#9AA8A2; --linie:#26312D; --akzent:#5FCFA8; --gelb:#F6C445; --vorlogin:#0B2B23; --kumpelkarte:#1D3A31; color-scheme:dark } }
:root[data-theme="dark"]{ --grund:#0E1513; --flaeche:#17201D; --tinte:#EEF2EF; --leise:#9AA8A2; --linie:#26312D; --akzent:#5FCFA8; --gelb:#F6C445; --vorlogin:#0B2B23; --kumpelkarte:#1D3A31; color-scheme:dark }

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{min-height:100%}
body{margin:0;background:var(--grund);color:var(--tinte);font-family:var(--schrift);-webkit-text-size-adjust:100%}
.seite{max-width:1180px;margin:0 auto;padding-block:28px 40px;
  padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));
  display:flex;flex-direction:column;gap:40px;min-height:100vh}

.kopf{display:flex;align-items:center;justify-content:space-between;gap:16px}
.marke{display:flex;align-items:center;gap:10px;font-family:var(--anzeige);font-weight:800;font-size:23px;letter-spacing:-.03em}
.marke b{color:var(--akzent);font-weight:800}
.zeichen{width:38px;height:38px;flex:none}
.zeichen .m-bg{fill:var(--wald)} .zeichen .m-haus{stroke:#fff} .zeichen .m-tuer{fill:var(--koralle)}
.uhr{font-variant-numeric:tabular-nums;font-size:15px;color:var(--leise);border:1px solid var(--linie);border-radius:999px;padding:5px 12px;background:var(--flaeche)}

.gruss h1{font-family:var(--anzeige);font-weight:800;font-size:clamp(38px,7vw,72px);line-height:1;letter-spacing:-.035em;margin:6px 0 0;text-wrap:balance}
.datum{margin:0;color:var(--leise);font-size:17px}

.ueber{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--leise);margin:0 0 12px;font-weight:600}
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.app{position:relative;display:flex;flex-direction:column;gap:18px;min-width:0;padding:22px;border-radius:26px;
  background:color-mix(in srgb,var(--farbe) 15%,var(--flaeche));border:1px solid transparent;color:inherit;text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
a.app:hover{transform:translateY(-2px);border-color:var(--farbe);box-shadow:0 10px 30px -12px color-mix(in srgb,var(--farbe) 55%,transparent)}
a.app:focus-visible{outline:3px solid var(--farbe);outline-offset:3px}
.symbol{width:56px;height:56px;border-radius:17px;display:grid;place-items:center;background:var(--farbe,var(--akzent));color:#fff}
.symbol svg{width:32px;height:32px}
.info{display:flex;flex-direction:column;gap:5px;min-width:0}
.name{font-family:var(--anzeige);font-size:27px;font-weight:800;letter-spacing:-.025em;color:color-mix(in srgb,var(--farbe) 50%,var(--tinte))}
.text{color:color-mix(in srgb,var(--farbe) 30%,var(--tinte));font-size:15px;line-height:1.4}
.teile{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.teile span{font-size:12px;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--flaeche) 75%,transparent);color:color-mix(in srgb,var(--farbe) 75%,var(--tinte))}
.ziel{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--farbe) 22%,transparent);font-size:13px;color:color-mix(in srgb,var(--farbe) 30%,var(--tinte))}
.adresse{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfeil{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--gelb);color:#2b2200;font-size:16px;font-weight:700;flex:none;transition:transform .18s ease}
a.app:hover .pfeil{transform:translateX(3px)}
.app.bald{border-style:dashed;border-color:var(--linie);background:transparent}
.app.bald .symbol{background:transparent;color:var(--leise);border:1.5px dashed var(--linie)}
.app.bald .name{color:var(--leise)}

.fuss{margin-top:auto;display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--leise);padding-top:16px;border-top:1px solid var(--linie)}
.fuss a{color:inherit}
@media (prefers-reduced-motion:reduce){ .app,.pfeil{transition:none} a.app:hover{transform:none} }

/* ---------- Anmeldung, Konto, Formulare ---------- */
:root{ --rot:#b3261e; --rot-bg:#fbe3e0; --akzent-bg:#e1efe9 }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --rot:#ff8a80; --rot-bg:#3d1d1a; --akzent-bg:#1c3029 } }
:root[data-theme="dark"]{ --rot:#ff8a80; --rot-bg:#3d1d1a; --akzent-bg:#1c3029 }
input,select,button{font:inherit;font-size:16px;color:inherit}
button{cursor:pointer}
.leise{color:var(--leise);margin:0;line-height:1.45}
.rechts{display:flex;align-items:center;gap:8px;min-width:0}
.konto{display:flex;align-items:center;gap:8px;border:1px solid var(--linie);background:var(--flaeche);border-radius:999px;padding:3px 12px 3px 3px;font-size:15px;min-width:0;max-width:180px}
.konto .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av{width:28px;height:28px;border-radius:50%;background:var(--akzent);color:var(--grund);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}

.login{display:grid;place-items:center}
.karte{width:min(400px,100%);display:flex;flex-direction:column;gap:14px;background:var(--flaeche);border:1px solid var(--linie);border-radius:22px;padding:28px 22px}
.karte h2{font-family:var(--anzeige);font-weight:800;font-size:34px;letter-spacing:-.03em;margin:0}
.demo{margin:0;font-size:13px;background:var(--akzent-bg);border-radius:10px;padding:8px 10px}
.felder{display:flex;flex-direction:column;gap:12px}
.f{display:flex;flex-direction:column;gap:4px;min-width:0}
.f > span{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--leise)}
.f input{border:1px solid var(--linie);background:var(--grund);border-radius:12px;padding:11px 12px;min-width:0;width:100%}
.f input:focus{outline:2px solid var(--akzent);outline-offset:1px}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.haupt{border:0;background:var(--akzent);color:var(--grund);border-radius:12px;padding:12px 16px;font-weight:600}
.zweit{border:1px solid var(--linie);background:transparent;border-radius:12px;padding:10px 14px}
.gefahr{border:1px solid var(--rot);color:var(--rot);background:transparent;border-radius:12px;padding:10px 14px;width:100%}
.meldung{margin:0;font-size:14px;color:var(--rot)}
.meldung:empty{display:none}
.meldung.ok{color:var(--akzent)}
.weiter{margin:0 0 20px;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;background:var(--akzent-bg);border-radius:14px;padding:12px 14px;font-size:15px}
.weiter a{background:var(--akzent);color:var(--grund);text-decoration:none;border-radius:999px;padding:6px 14px;font-weight:600}
#portal{display:flex;flex-direction:column}
.portalkopf{display:flex;flex-wrap:wrap;gap:20px;align-items:stretch;margin-bottom:40px}
.portalkopf .gruss{flex:999 1 420px;min-width:0;display:flex;flex-direction:column;justify-content:flex-end}
.kumpelkarte{flex:1 1 300px;display:flex;gap:14px;align-items:center;text-align:left;border:0;background:var(--kumpelkarte);color:#F5F3EE;border-radius:24px;padding:18px 20px;min-height:44px}
.kumpelkarte img{width:64px;height:64px;border-radius:50%;border:3px solid #F5F3EE;object-fit:cover;flex:none}
.kumpelkarte > span{display:flex;flex-direction:column;gap:4px;min-width:0}
.kumpelkarte small{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sonne)}
.kumpelkarte .witz{font-size:16px;line-height:1.45}
.kumpelkarte .witz.neu{animation:kBlase .35s ease-out}

dialog{border:0;border-radius:20px;padding:0;width:min(520px,calc(100% - 24px));max-height:calc(100% - 32px);background:var(--flaeche);color:var(--tinte);box-shadow:0 20px 60px rgba(0,0,0,.25)}
dialog::backdrop{background:rgba(10,15,13,.45)}
.dlg{display:flex;flex-direction:column;gap:14px;padding:20px}
.dlg h3{margin:0;font-size:20px}
.dlg-kopf{display:flex;justify-content:space-between;align-items:center}
.x{border:0;background:none;font-size:26px;color:var(--leise);padding:0 4px;line-height:1}
.block{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--linie);padding-top:14px}
.block h4{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--leise)}
.users{list-style:none;margin:0;padding:0;border:1px solid var(--linie);border-radius:14px;overflow:hidden}
.users li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--linie)}
.users li:first-child{border-top:0}
.users .wer{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chip{font-size:12px;padding:1px 8px;border-radius:999px;border:1px solid var(--linie);color:var(--leise)}
.chip.a{background:var(--akzent-bg);color:var(--akzent);border-color:transparent}
.tools{display:flex;gap:6px}
.tools button{border:1px solid var(--linie);background:transparent;border-radius:8px;padding:4px 9px;font-size:13px;color:var(--leise)}
.tools button.armed{background:var(--rot);border-color:var(--rot);color:var(--flaeche)}
.users form{display:flex;gap:6px;width:100%}
.users form input{flex:1;min-width:0;border:1px solid var(--linie);background:var(--grund);border-radius:8px;padding:7px 9px;font-size:15px}
.users form button{border:0;background:var(--akzent);color:var(--grund);border-radius:8px;padding:6px 12px;font-size:14px}
.check{display:flex;align-items:center;gap:8px;font-size:15px}
.check input{width:18px;height:18px;accent-color:var(--akzent)}
@media (max-width:420px){ .uhr{display:none} .zwei{grid-template-columns:1fr} }
.users li.haushalt{background:var(--grund);flex-direction:column;align-items:flex-start;gap:2px;padding:8px 12px}
.users li.haushalt .leise{font-size:12px;color:var(--leise)}
.users form select{flex:1;min-width:0;border:1px solid var(--linie);background:var(--grund);border-radius:8px;padding:7px 9px;font-size:15px}
.users .tools{flex-wrap:wrap}

/* Support */
.supportknopf{position:relative;display:flex;align-items:center;gap:6px;border:1px solid var(--linie);background:var(--flaeche);border-radius:999px;padding:6px 12px;font-size:15px;flex:none}
.supportknopf .zahl{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--rot);color:#fff;font-size:11px;line-height:18px;font-weight:700}
@media (max-width:520px){ .supportknopf .lang{display:none} .uhr{display:none} }
.supportkarte{margin-top:18px;width:100%;display:flex;align-items:center;gap:14px;text-align:left;background:var(--flaeche);border:1px solid var(--linie);border-radius:20px;padding:16px 18px;color:inherit}
.supportkarte:hover{border-color:var(--akzent)}
.supportkarte .ico{font-size:28px}
.supportkarte > span:nth-child(2){flex:1;display:flex;flex-direction:column;gap:2px}
.supportkarte small{color:var(--leise);font-size:14px}
.kontakt{display:flex;flex-direction:column;gap:12px}
.kontaktkarte{display:flex;gap:14px;align-items:center;background:var(--grund);border-radius:16px;padding:14px}
.kontaktkarte > div{display:flex;flex-direction:column;gap:4px;min-width:0}
.kontaktkarte a{color:var(--akzent);text-decoration:none;font-weight:600;overflow-wrap:anywhere}
.av.gross{width:46px;height:46px;font-size:20px}
a.knopf{text-align:center;text-decoration:none;color:inherit;display:block}
.segment{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;background:var(--linie);padding:4px;border-radius:12px}
.segment button{border:0;background:transparent;border-radius:9px;padding:8px 6px;font-size:14px;color:var(--leise);font-weight:600}
.segment button[aria-pressed="true"]{background:var(--flaeche);color:var(--tinte);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.f select,.f textarea{border:1px solid var(--linie);background:var(--grund);border-radius:12px;padding:11px 12px;min-width:0;width:100%;font:inherit;font-size:16px;color:inherit}
.f textarea{resize:vertical}
.block h4 small{text-transform:none;letter-spacing:0;font-weight:400}
.meldungen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.meldungen > li{border:1px solid var(--linie);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:6px}
.mkopf{display:flex;justify-content:space-between;gap:8px;font-size:14px}
.mtext{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.status{font-size:12px;padding:2px 8px;border-radius:999px;white-space:nowrap;height:fit-content}
.status.neu{background:var(--rot-bg);color:var(--rot)} .status.arbeit{background:color-mix(in srgb,var(--gelb) 22%,transparent);color:inherit}
.status.erledigt{background:var(--akzent-bg);color:var(--akzent)} .status.abgelehnt{background:var(--linie);color:var(--leise)}
.antwort{margin:0;background:var(--akzent-bg);border-radius:10px;padding:8px 10px;font-size:14px}
.bearbeiten{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--linie);padding-top:8px}
.bearbeiten select,.bearbeiten textarea{border:1px solid var(--linie);background:var(--grund);border-radius:10px;padding:8px 10px;font:inherit;font-size:15px;color:inherit;width:100%}
.geraet{display:inline}
.geraet summary{display:inline;cursor:pointer;text-decoration:underline}
.filter{display:flex;gap:6px}
.filter button{border:1px solid var(--linie);background:transparent;border-radius:999px;padding:5px 12px;font-size:14px;color:var(--leise)}
.filter button[aria-pressed="true"]{background:var(--tinte);color:var(--grund);border-color:var(--tinte)}

/* ---------- Öffentliche Startseite (vor dem Login) ---------- */
body.vorlogin{background:var(--vorlogin);color:#F5F3EE}
body.vorlogin .marke b{color:var(--sonne)}
body.vorlogin .zeichen .m-bg{fill:#F5F3EE} body.vorlogin .zeichen .m-haus{stroke:var(--wald)}
body.vorlogin .uhr{background:transparent;border-color:rgba(245,243,238,.3);color:#F5F3EE}
body.vorlogin .fuss{color:#CFE0D9;border-top-color:rgba(245,243,238,.2)}
body.vorlogin #laden{color:#CFE0D9}
.login{display:grid;grid-template-columns:minmax(0,440px);justify-content:center;justify-items:stretch;align-items:end;gap:0;
  grid-template-areas:"hero" "kumpel" "karte"}
.hero{grid-area:hero;display:flex;flex-direction:column;gap:14px;margin-bottom:8px}
.hero h1{font-family:var(--anzeige);font-weight:800;font-size:clamp(40px,10vw,92px);line-height:.95;letter-spacing:-.04em;margin:0;text-wrap:balance}
.hero h1 span{color:var(--sonne)}
.hero p{margin:0;font-size:clamp(16px,2vw,20px);line-height:1.55;color:#CFE0D9;max-width:520px}
.karte{grid-area:karte;width:100%;position:relative;z-index:1;color:var(--tinte);border:0;border-radius:28px;padding:30px 24px;box-shadow:0 24px 60px -24px rgba(0,0,0,.45)}
.kumpel{grid-area:kumpel;position:relative;display:flex;align-items:flex-end;gap:10px;margin:0 auto -34px;width:100%;z-index:0;pointer-events:none}
.kumpel-fig{width:130px;flex:none;height:auto;overflow:visible;pointer-events:auto;cursor:pointer}
.kumpel-blase{position:relative;flex:1;min-width:0;margin-bottom:62px;background:var(--flaeche);color:var(--tinte);border:1px solid var(--linie);border-radius:18px;
  padding:11px 14px;font-size:15px;line-height:1.4;box-shadow:0 6px 18px rgba(0,0,0,.12);min-height:44px}
.kumpel-blase:empty{visibility:hidden}
.kumpel-blase::before{content:"";position:absolute;right:-8px;bottom:16px;width:14px;height:14px;background:var(--flaeche);border-right:1px solid var(--linie);border-top:1px solid var(--linie);transform:rotate(45deg)}
.kumpel-blase.neu{animation:kBlase .35s ease-out}
@media (max-width:520px){ .hero p{display:none} }
@media (min-width:900px){
  .login{grid-template-columns:minmax(0,1fr) 420px;grid-template-areas:"hero karte" "kumpel karte";gap:28px 64px;align-items:center;justify-content:stretch;flex:1}
  .hero{align-self:end;margin:0}
  .karte{padding:34px 32px}
  .kumpel{margin:0;max-width:520px;align-self:start}
  .kumpel-fig{width:170px}
  .kumpel-blase{margin-bottom:84px;font-size:16px}
}
/* Bewegungen */
.kumpel-fig .k-arm,.kumpel-fig .k-kopf,.kumpel-fig .k-koerper{transform-box:view-box}
.kumpel-fig .k-arm-l{transform-origin:52px 196px}
.kumpel-fig .k-arm-r{transform-origin:148px 196px}
.kumpel-fig .k-kopf{transform-origin:100px 150px;animation:kAtmen 4s ease-in-out infinite}
.kumpel-fig .k-arm{transition:transform .35s ease}
.kumpel-fig .k-haende{opacity:0;transform:translateY(40px);transition:opacity .25s ease,transform .3s ease;transform-box:view-box}
.kumpel-fig.augenzu .k-haende{opacity:1;transform:none}
.kumpel-fig.augenzu .k-arm{opacity:0}
.kumpel-fig.winkt .k-arm-r{animation:kWinken .8s ease-in-out 2}
.kumpel-fig.nickt .k-kopf{animation:kNicken .3s ease-out}
.kumpel-fig.lacht .k-kopf{animation:kLachen .6s ease-in-out}
.kumpel-fig.zuckt .k-arm-l{animation:kZuckL 1s ease-in-out}
.kumpel-fig.zuckt .k-arm-r{animation:kZuckR 1s ease-in-out}
@keyframes kBlase{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@keyframes kAtmen{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes kNicken{0%,100%{transform:rotate(0)}50%{transform:rotate(4deg)}}
@keyframes kLachen{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
@keyframes kWinken{0%,100%{transform:rotate(0)}30%{transform:rotate(-150deg)}55%{transform:rotate(-120deg)}80%{transform:rotate(-150deg)}}
@keyframes kZuckL{0%,100%{transform:rotate(0)}30%,70%{transform:rotate(50deg)}}
@keyframes kZuckR{0%,100%{transform:rotate(0)}30%,70%{transform:rotate(-50deg)}}
@media (prefers-reduced-motion:reduce){.kumpel-fig *,.kumpel-blase{animation:none!important;transition:none!important}}

/* Kumpel: persönliche Nachricht nach dem Anmelden */
.kumpel-overlay{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;background:rgba(20,24,32,.55);opacity:0;transition:opacity .25s ease}
.kumpel-overlay.da{opacity:1}
.kumpel-karte{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;width:min(360px,100%);background:var(--flaeche);color:var(--tinte);border:1px solid var(--linie);border-radius:22px;padding:22px 20px 20px;box-shadow:0 20px 50px rgba(0,0,0,.25);transform:translateY(16px) scale(.97);transition:transform .3s ease;overflow:hidden}
.kumpel-overlay.da .kumpel-karte{transform:none}
.kumpel-karte .kumpel-fig{width:170px;cursor:default}
.kumpel-blase.gross{flex:none;width:100%;margin:0 0 8px;font-size:18px;line-height:1.4;font-weight:600;text-align:center;padding:14px 16px}
.kumpel-blase.gross::before{right:auto;left:calc(50% - 7px);bottom:-8px;border-top:0;border-bottom:1px solid var(--linie);border-right:1px solid var(--linie)}
.kumpel-karte button{position:relative;z-index:1;width:100%;margin-top:6px}
.kumpel-herzen{position:absolute;inset:0;pointer-events:none}
.kumpel-herzen span{position:absolute;bottom:-30px;font-size:22px;animation:kHerz 3.2s ease-in infinite;opacity:0}
.kumpel-herzen span:nth-child(1){left:8%;animation-delay:.2s}.kumpel-herzen span:nth-child(2){left:22%;animation-delay:1.4s}
.kumpel-herzen span:nth-child(3){left:38%;animation-delay:.8s}.kumpel-herzen span:nth-child(4){left:55%;animation-delay:2s}
.kumpel-herzen span:nth-child(5){left:70%;animation-delay:.5s}.kumpel-herzen span:nth-child(6){left:84%;animation-delay:1.7s}
.kumpel-herzen span:nth-child(7){left:92%;animation-delay:2.6s}
@keyframes kHerz{0%{opacity:0;transform:translateY(0) scale(.7)}15%{opacity:.9}100%{opacity:0;transform:translateY(-420px) scale(1.2)}}
@media (prefers-reduced-motion: reduce){.kumpel-herzen{display:none}}

/* App-Freigaben in der Benutzerverwaltung */
.appwahl{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.appwahl legend{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--leise);padding:0;margin-bottom:6px}
.appwahl:disabled{opacity:.45}
.appchips,.appzeile{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.appzeile{width:100%;padding-left:36px}
.appchip{border:1px solid var(--linie);background:transparent;color:var(--leise);border-radius:999px;padding:6px 12px;font-size:14px;min-height:36px}
.appchip[aria-pressed="true"]{background:var(--akzent);border-color:var(--akzent);color:var(--grund);font-weight:600}
.appchip[aria-pressed="true"]::before{content:"✓ "}
.appchip:disabled{opacity:.6}
.klein{font-size:13px}
.f select{appearance:auto}