/* Hosting-Oberfläche (034-playground.de: „Meine Server“, Server anfragen, Server-Verwaltung, Infoseite, Konto): Farben, Schrift,
   Grundbausteine. Werte wie die Startseite (apps/startseite/web/index.html); den Kopf mit Konto baut /hosting/kopf.js.
   Farbschema: <html data-theme="dark|light|auto"> (thema.js bzw. kopf.js) – ohne Angabe Dunkel, „auto“ folgt dem System.
   Die Akzentfarbe steht nur an einer Stelle: --marke. Alle Abstufungen (hell/dunkel, Flächen, Ränder) leiten sich davon ab.
   Auch erreichbar als /hosting/thema.css (Verweis). */
:root{
  --marke:#ff7a1a;
  --font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --kopf:"Space Grotesk",Inter,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:12px; --r-sm:8px;

  color-scheme:dark;
  --bg:#0b0c0e; --surface:#121418; --surface-2:#181b20; --hover:#1e2228; --field:#0d0f12;
  --border:#23272e; --border-2:#30353d;
  --text:#e7e9ec; --text-2:#a7adb6; --muted:#767d87;
  --accent:var(--marke);
  --accent-hover:color-mix(in srgb,var(--marke) 88%,#fff);
  --accent-text:color-mix(in srgb,var(--marke) 82%,#fff);
  --on-accent:#1a0b00;
  --accent-weak:color-mix(in srgb,var(--marke) 14%,transparent);
  --accent-line:color-mix(in srgb,var(--marke) 45%,transparent);
  --ok:#3ccf8e; --warn:#eab308; --bad:#f06464; --info:#6ea8ff; --lila:#c4b5fd;
  --shadow:0 16px 40px rgba(0,0,0,.5);
  --scrim:rgba(4,5,7,.66);
  --con-bg:#08090b; --con-text:#c5cad1;
  --row-hover:rgba(255,255,255,.022);
  --chart-grid:rgba(255,255,255,.07);
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f4f5f7; --surface:#ffffff; --surface-2:#f2f3f5; --hover:#eaecef; --field:#ffffff;
  --border:#e2e5e9; --border-2:#d1d5db;
  --text:#14171c; --text-2:#4a525e; --muted:#7a828e;
  --accent:color-mix(in srgb,var(--marke) 92%,#000);
  --accent-hover:color-mix(in srgb,var(--marke) 84%,#000);
  --accent-text:color-mix(in srgb,var(--marke) 76%,#000);
  --on-accent:#1a0b00;
  --accent-weak:color-mix(in srgb,var(--marke) 11%,transparent);
  --accent-line:color-mix(in srgb,var(--marke) 50%,transparent);
  --ok:#0e9a63; --warn:#a37800; --bad:#d43c3c; --info:#2f6fe0;
  --shadow:0 16px 40px rgba(20,24,30,.16);
  --scrim:rgba(20,24,30,.38);
  --con-bg:#0f1114; --con-text:#c9ced5;
  --row-hover:rgba(0,0,0,.022);
  --chart-grid:rgba(0,0,0,.07);
}
@media (prefers-color-scheme:light){ :root[data-theme="auto"]{
  color-scheme:light;
  --bg:#f4f5f7; --surface:#ffffff; --surface-2:#f2f3f5; --hover:#eaecef; --field:#ffffff;
  --border:#e2e5e9; --border-2:#d1d5db;
  --text:#14171c; --text-2:#4a525e; --muted:#7a828e;
  --accent:color-mix(in srgb,var(--marke) 92%,#000);
  --accent-hover:color-mix(in srgb,var(--marke) 84%,#000);
  --accent-text:color-mix(in srgb,var(--marke) 76%,#000);
  --on-accent:#1a0b00;
  --accent-weak:color-mix(in srgb,var(--marke) 11%,transparent);
  --accent-line:color-mix(in srgb,var(--marke) 50%,transparent);
  --ok:#0e9a63; --warn:#a37800; --bad:#d43c3c; --info:#2f6fe0;
  --shadow:0 16px 40px rgba(20,24,30,.16);
  --scrim:rgba(20,24,30,.38);
  --con-bg:#0f1114; --con-text:#c9ced5;
  --row-hover:rgba(0,0,0,.022);
  --chart-grid:rgba(0,0,0,.07);
}}

/* ---------- Grundlage ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{font:14px/1.5 var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent-text);text-decoration:none}
a:hover{text-decoration:underline}
code{font:12.5px var(--mono);background:var(--surface-2);border:1px solid var(--border);border-radius:4px;padding:1px 5px;color:var(--text)}
b,strong{font-weight:600}
::selection{background:var(--accent-weak)}
/* Tastatur-Fokus überall gleich wie im Kopf und auf der Startseite: oranger Ring. Textfelder behalten ihren Rahmen mit Schein
   (siehe Felder) und bekommen keinen zweiten Ring. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hidden{display:none !important}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.mono{font-family:var(--mono);font-size:12.5px}
.num{font-variant-numeric:tabular-nums}
.grow{flex:1 1 auto;min-width:0}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
svg.i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
svg.i.f{fill:currentColor;stroke:none}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 13px;border-radius:var(--r-sm);
     border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);font-weight:600;font-size:13.5px;cursor:pointer;
     white-space:nowrap;text-decoration:none;transition:background .12s,border-color .12s,color .12s,box-shadow .12s}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);text-decoration:none}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:none}
.btn.sec{background:var(--surface-2);border-color:var(--border-2);color:var(--text);font-weight:500}
.btn.sec:hover{background:var(--hover)}
.btn.ghost{background:none;border-color:transparent;color:var(--text-2);font-weight:500}
.btn.ghost:hover{background:var(--hover);color:var(--text)}
.btn.red{background:var(--surface-2);border-color:var(--border-2);color:var(--bad);font-weight:500}
.btn.red:hover{background:color-mix(in srgb,var(--bad) 10%,var(--surface-2));border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:default;pointer-events:none}
.btn.small{height:28px;padding:0 10px;font-size:12.5px;gap:6px}
.btn.small svg.i{width:14px;height:14px}
.btn.icon,.btn.sq{width:34px;padding:0}
.btn.small.icon,.btn.small.sq{width:28px}
/* Bestätigen in Dialogen: gefährliche Aktion als volle rote Fläche */
.dlg .btn.red:not(.small){background:var(--bad);border-color:var(--bad);color:#fff;font-weight:600}
.dlg .btn.red:not(.small):hover{filter:brightness(1.07)}

/* ---------- Felder ---------- */
input[type=text],input[type=number],input[type=search],input[type=password],select,textarea{
  height:34px;background:var(--field);border:1px solid var(--border-2);border-radius:var(--r-sm);padding:0 10px;min-width:0;outline:none;
  font-size:13.5px;color:var(--text);transition:border-color .12s,box-shadow .12s}
textarea{height:auto;padding:10px}
select{padding-right:28px;appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23878e98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;background-size:14px}
select option{background:var(--surface);color:var(--text)}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
input[type=text]:focus-visible,input[type=number]:focus-visible,input[type=search]:focus-visible,input[type=password]:focus-visible,
select:focus-visible,textarea:focus-visible{outline:none}
input:disabled,select:disabled{opacity:.55}
input::-webkit-search-cancel-button{display:none}
input[type=range]{accent-color:var(--accent);height:auto;cursor:pointer}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
.chk{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer;user-select:none;color:var(--text)}
.chk input{width:15px;height:15px;flex:none}

/* Schalter */
.sw{position:relative;display:inline-block;width:36px;height:20px;flex:0 0 auto}
.sw input{opacity:0;width:0;height:0;position:absolute}
.sw span{position:absolute;inset:0;border-radius:999px;background:var(--border-2);cursor:pointer;transition:background .15s}
.sw span::before{content:"";position:absolute;width:16px;height:16px;left:2px;top:2px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s}
.sw input:checked+span{background:var(--accent)}
.sw input:checked+span::before{transform:translateX(16px)}
.sw input:disabled+span{opacity:.45;cursor:default}
.sw input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Status ---------- */
.badge,.pill{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 9px;border-radius:999px;font-size:12.5px;font-weight:500;
  border:1px solid var(--border-2);color:var(--text-2);background:var(--surface);white-space:nowrap;font-variant-numeric:tabular-nums}
.badge::before,.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.badge.on,.pill.on{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent);background:color-mix(in srgb,var(--ok) 8%,var(--surface))}
.badge.on::before,.pill.on::before{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 20%,transparent)}
.badge.busy,.pill.busy{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,transparent);background:color-mix(in srgb,var(--warn) 8%,var(--surface))}
.badge.busy::before,.pill.busy::before{background:var(--warn);animation:zs-blink 1s infinite}
.badge.bad,.pill.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,transparent);background:color-mix(in srgb,var(--bad) 7%,var(--surface))}
.badge.bad::before,.pill.bad::before{background:var(--bad)}
.pill.off{color:var(--text-2)}
.pill.off::before{background:var(--bad)}
@keyframes zs-blink{50%{opacity:.3}}
.tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:4px;font-size:11.5px;font-weight:500;white-space:nowrap;
  color:var(--text-2);background:var(--surface-2);border:1px solid var(--border)}
.tag.op{color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent);border-color:color-mix(in srgb,var(--warn) 28%,transparent)}
.tag.on{color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent);border-color:color-mix(in srgb,var(--ok) 28%,transparent)}
.tag.bad{color:var(--bad);background:color-mix(in srgb,var(--bad) 9%,transparent);border-color:color-mix(in srgb,var(--bad) 28%,transparent)}
.tag.blue{color:var(--info);background:color-mix(in srgb,var(--info) 10%,transparent);border-color:color-mix(in srgb,var(--info) 28%,transparent)}
.tag.acc{color:var(--accent-text);background:var(--accent-weak);border-color:var(--accent-line)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--border-2);flex:0 0 auto}
.dot.on{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 20%,transparent)}

/* zum Kopieren (Adresse, Zugangsdaten) */
.copy{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 8px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--border);
  color:var(--text);font:12.5px var(--mono);cursor:pointer;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.copy svg.i{width:13px;height:13px;color:var(--muted)}
.copy:hover{border-color:var(--border-2)}
.copy:hover svg.i{color:var(--text)}

/* ---------- Karten ---------- */
.card,.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);min-width:0}

/* ---------- Dialoge, Menü, Meldung ---------- */
.scrim{position:fixed;inset:0;z-index:2147483000;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:16px;
  overflow:auto;animation:zs-fade .12s ease-out}
.dlg{background:var(--surface);border:1px solid var(--border-2);border-radius:14px;box-shadow:var(--shadow);width:min(520px,100%);
  max-height:calc(100dvh - 32px);overflow:auto;padding:22px;animation:zs-pop .14s ease-out}
@keyframes zs-fade{from{opacity:0}}
@keyframes zs-pop{from{opacity:0;transform:translateY(6px) scale(.985)}}
.menu{position:fixed;z-index:2147483001;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r);box-shadow:var(--shadow);padding:5px;min-width:210px}
.menu button,.menu a{display:flex;align-items:center;width:100%;border:none;background:none;text-align:left;padding:0 10px;height:32px;border-radius:7px;cursor:pointer;
  font-size:13.5px;gap:10px;color:var(--text);text-decoration:none;white-space:nowrap}
.menu button svg.i,.menu a svg.i{color:var(--muted)}
.menu button:hover,.menu a:hover{background:var(--hover);text-decoration:none}
.menu button:hover svg.i,.menu a:hover svg.i{color:var(--text)}
.menu button.red,.menu button.red svg.i{color:var(--bad)}
.menu hr{border:none;border-top:1px solid var(--border);margin:4px 0}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);opacity:0;z-index:2147483002;pointer-events:none;max-width:calc(100vw - 32px);
  background:var(--text);color:var(--bg);border-radius:var(--r);padding:10px 16px;font-weight:500;font-size:13.5px;box-shadow:var(--shadow);
  transition:opacity .18s,transform .18s;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:var(--bad);color:#fff}

/* ---------- Hell/Dunkel-Schalter (thema.js füllt [data-thema-wahl]) ---------- */
.thema{display:inline-flex;gap:2px;padding:2px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--border)}
.thema button{display:grid;place-items:center;width:28px;height:24px;border:0;border-radius:4px;background:none;color:var(--muted);cursor:pointer}
.thema button:hover{color:var(--text)}
.thema button.on{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.18)}
.thema svg.i{width:14px;height:14px}

/* ---------- Seitenkopf: Pfad, Titel (Space Grotesk wie die Startseite), Umschalter ---------- */
.pfad{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;margin-bottom:8px;font-size:13px;color:var(--muted)}
.pfad a{color:var(--text-2)}
.pfad a:hover{color:var(--text);text-decoration:none}
.pfad svg.i{width:14px;height:14px}
.pfad span{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seitentitel{font:700 28px/1.15 var(--kopf);letter-spacing:-.02em;color:var(--text)}
.seg{display:inline-flex;gap:2px;padding:2px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--border)}
.seg button{background:transparent;border:0;height:26px;padding:0 10px;border-radius:6px;font-size:12.5px;font-weight:500;color:var(--text-2);cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.18)}
.seg button .n{color:var(--muted);font-variant-numeric:tabular-nums;margin-left:2px}
.seg button .n:empty{display:none}
@media (max-width:600px){ .seitentitel{font-size:24px} }

/* ---------- Hinweis-Kasten (neutral, statt Blau): <div class="notiz"><svg class="i"><use href="#i-info"/></svg><div>…</div></div>
   Fläche und Rand wie Karten-Innenflächen, nur das Zeichen in Orange. Ohne Zeichen geht es auch (<div class="notiz">Text</div>). */
.notiz{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--border-2);
  color:var(--text-2);font-size:13.5px;line-height:1.55;min-width:0}
.notiz > svg.i{flex:none;width:18px;height:18px;margin-top:1px;color:var(--accent-text)}
.notiz > div{flex:1;min-width:0}
.notiz b{color:var(--text)}
.notiz > div > b:first-child{display:block;margin-bottom:2px}

/* ---------- Mini-Fuß aller Hosting-Seiten (wie die Anmeldeseiten):
   <footer class="fuss-mini"><a href="/">034 Playground</a><a href="/#fragen">Hilfe</a><a href="/datenschutz/">Datenschutz</a></footer> */
.fuss-mini{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px;padding:8px 16px 28px;font-size:13px;color:var(--muted)}
.fuss-mini a{color:var(--muted)}
.fuss-mini a:hover{color:var(--text);text-decoration:none}

/* ---------- Touch (Handy, Tablet): Tippziele mindestens 40 px (Startseite und Anmeldung: 40–50 px) ---------- */
@media (max-width:640px),(pointer:coarse){
  .btn,.btn.small{min-height:40px}
  .btn.icon,.btn.sq,.btn.small.icon,.btn.small.sq{min-width:40px}
  input[type=text],input[type=number],input[type=search],input[type=password],select{height:40px}
  .seg button{height:36px}
  .thema button{width:40px;height:36px}
  .menu button,.menu a{height:40px}
}

/* Bildlaufleisten */
*{scrollbar-width:thin;scrollbar-color:var(--border-2) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}
@media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important} }