.spx { --spx-line: #E5E1DA; --spx-muted: #6B6864; --spx-ink: #1F2020; --spx-gold: #B88846; --spx-warn: #8a5a00; --spx-bad: #a12b24;
  width: 100%; color: var(--spx-ink); }
.spx * { box-sizing: border-box; }
.spx-bar { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:baseline;
  padding-bottom:10px; border-bottom:1px solid var(--spx-line); margin-bottom:24px; }
.spx-bar__user { color: var(--spx-muted); font-size: .9em; }
.spx-bar__nav { display:flex; gap:16px; }
.spx-h2 { margin: 28px 0 12px; font-size: 1.35em; }
.spx-h2:first-of-type { margin-top: 0; }
.spx-notice { padding:10px 14px; border-left:3px solid var(--spx-warn); background:rgba(138,90,0,.06); margin-bottom:20px; }
.spx-error { color: var(--spx-bad); margin: 4px 0 0; }
.spx-empty { color: var(--spx-muted); }
.spx-cards { list-style:none; margin:0 0 20px; padding:0; display:grid; gap:12px; }
.spx-card { border:1px solid var(--spx-line); padding:14px 16px; }
.spx-card__title { margin:0 0 4px; font-size:1.05em; }
.spx-card__meta { margin:0 0 10px; color:var(--spx-muted); font-size:.9em; }
.spx-card__actions { margin:0; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.spx-form { display:grid; gap:18px; }
.spx-field { display:grid; gap:5px; }
.spx-label { font-weight:600; font-size:.95em; }
.spx-label--small { font-weight:400; font-size:.9em; color:var(--spx-muted); }
.spx-req { color: var(--spx-bad); }
.spx-hint { margin:0; font-size:.85em; color:var(--spx-muted); }
.spx-field input[type="text"], .spx-field input[type="email"], .spx-field input[type="url"],
.spx-field input[type="tel"], .spx-field input[type="password"], .spx-field select, .spx-field textarea,
.spx-social input, .spx-login input[type="text"], .spx-login input[type="password"] {
  width:100%; padding:9px 11px; border:1px solid var(--spx-line); background:#fff; font:inherit; }
.spx-field--error input, .spx-field--error select, .spx-field--error textarea { border-color: var(--spx-bad); }
.spx-check { display:inline-flex; align-items:center; gap:7px; font-size:.92em; font-weight:400; }
.spx-hours { border-collapse:collapse; }
.spx-hours th { text-align:left; font-weight:500; padding:3px 14px 3px 0; }
.spx-hours td { padding:3px 10px 3px 0; }
.spx-hours input[type="time"] { padding:6px 8px; border:1px solid var(--spx-line); font:inherit; }
.spx-social { display:grid; gap:4px; margin-bottom:8px; }
.spx-upload__preview { max-width:220px; height:auto; display:block; margin-bottom:8px; border:1px solid var(--spx-line); }
.spx-thumbs { list-style:none; margin:0 0 10px; padding:0; display:flex; flex-wrap:wrap; gap:12px; }
.spx-thumbs img { width:96px; height:96px; object-fit:cover; display:block; border:1px solid var(--spx-line); }
.spx-thumbs li { display:grid; gap:4px; }
.spx-button { display:inline-block; padding:9px 16px; background:var(--spx-ink); color:#fff;
  text-decoration:none; border:0; font:inherit; cursor:pointer; }
.spx-button:hover, .spx-button:focus { background:#000; color:#fff; }
.spx-link { color:var(--spx-ink); text-decoration:underline; background:none; border:0; padding:0; font:inherit; cursor:pointer; }
.spx-link--danger { color:var(--spx-bad); }
.spx-inline-form { display:inline; }
.spx :focus-visible { outline:2px solid var(--spx-ink); outline-offset:2px; }
@media (max-width:600px) { .spx-bar { flex-direction:column; } .spx-hours th { width:100%; display:block; } }
/* Bereich mit Seitenleiste */
.spx-area{display:grid;grid-template-columns:280px minmax(0,1fr);gap:32px;align-items:start;max-width:1180px;margin:0 auto;padding:34px 20px 70px}
.spx-profilecard{background:#fff;border:1px solid var(--spx-line);border-radius:14px;padding:28px 20px;text-align:center;position:sticky;top:24px}
.spx-avatar img{width:120px;height:120px;border-radius:50%;border:3px solid #B88846;display:block;margin:0 auto}
.spx-profilecard__name{margin:16px 0 2px;font-size:1.2rem}
.spx-profilecard__since{margin:0 0 20px;color:var(--spx-muted);font-size:.85rem}
.spx-nav{display:grid;gap:4px;text-align:left}
.spx-nav__item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;color:var(--spx-ink);text-decoration:none;font-size:.95rem}
.spx-nav__item:hover{background:#FAF8F5}
.spx-nav__item.is-active{background:#B88846;color:#fff;font-weight:600}
.spx-nav__item--quiet{color:var(--spx-muted);font-size:.88rem;margin-top:8px}
.spx-nav__icon{width:16px;height:16px;flex:0 0 16px;background:currentColor;opacity:.75;
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}
.spx-nav__icon--user{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-5 0-9 2.5-9 5.5V22h18v-2.5c0-3-4-5.5-9-5.5z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-5 0-9 2.5-9 5.5V22h18v-2.5c0-3-4-5.5-9-5.5z'/></svg>")}
.spx-nav__icon--stack{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2L2 7l10 5 10-5-10-5zM2 12l10 5 10-5M2 17l10 5 10-5'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2L2 7l10 5 10-5-10-5zM2 12l10 5 10-5M2 17l10 5 10-5'/></svg>")}
.spx-nav__icon--case{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 4h6v3h4a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9a2 2 0 012-2h4V4zm2 2v1h2V6h-2z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 4h6v3h4a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9a2 2 0 012-2h4V4zm2 2v1h2V6h-2z'/></svg>")}
.spx-nav__icon--lock{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10V7a5 5 0 0110 0v3h1a2 2 0 012 2v8a2 2 0 01-2 2H6a2 2 0 01-2-2v-8a2 2 0 012-2h1zm2 0h6V7a3 3 0 00-6 0v3z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10V7a5 5 0 0110 0v3h1a2 2 0 012 2v8a2 2 0 01-2 2H6a2 2 0 01-2-2v-8a2 2 0 012-2h1zm2 0h6V7a3 3 0 00-6 0v3z'/></svg>")}
.spx-area__head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.spx-h1{margin:0;font-size:1.5rem}
.spx-panel{background:#fff;border:1px solid var(--spx-line);border-radius:14px;padding:8px 24px}
.spx-panel__empty{color:#B88846;padding:22px 0;margin:0}
.spx-rows{list-style:none;margin:0;padding:0}
.spx-row{display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--spx-line)}
.spx-row:last-child{border-bottom:0}
.spx-row__thumb{width:52px;height:52px;flex:0 0 52px;border-radius:10px;background:#FAF8F5;overflow:hidden;display:grid;place-items:center}
.spx-row__thumb img{width:100%;height:100%;object-fit:contain;padding:4px}
.spx-row__thumb--job{background:#B88846}
.spx-row__body{flex:1;display:grid;gap:3px}
.spx-row__status{color:var(--spx-muted);font-size:.85rem;font-style:normal}
.spx-row__actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.spx-button--add{background:#B88846}
.spx-button--add:hover{background:#a3763a}
.spx-facts{display:grid;grid-template-columns:160px 1fr;gap:10px 20px;margin:20px 0}
.spx-facts dt{color:var(--spx-muted)}
.spx-facts dd{margin:0}
.spx-area .spx-form{background:#fff;border:1px solid var(--spx-line);border-radius:14px;padding:26px}
@media(max-width:900px){.spx-area{grid-template-columns:1fr}.spx-profilecard{position:static}}
/* Anmeldeseite */
.spx-login{max-width:430px;margin:60px auto;background:#fff;border:1px solid var(--spx-line);border-radius:14px;padding:38px 34px 34px}
.spx-login .spx-h2{margin:0 0 6px;font-size:1.45rem;text-align:center}
.spx-login__intro{margin:0 0 26px;text-align:center;color:var(--spx-muted);font-size:.92rem}
.spx-login form{display:grid;gap:16px}
.spx-login .spx-button{width:100%;text-align:center;padding:13px 16px}
.spx-login__foot{margin:18px 0 0;text-align:center;font-size:.9rem}
.spx-login .spx-error{text-align:center;background:#fdecea;border-radius:8px;padding:10px 12px;margin:0 0 18px}
/* Zentrierung und Feinschliff */
.spx-area .spx-form{max-width:none}
.spx > .spx-form, .spx > .spx-h2 { max-width: 760px; margin-left:auto; margin-right:auto; }
.spx-button{background:var(--spx-ink)}
.spx-login .spx-label{font-size:.9rem}
.spx-login .spx-check{margin:-4px 0 2px}
/* Bereich auf schmalen Bildschirmen */
.spx-area{grid-template-columns:280px minmax(0,1fr)}
.spx-area__side,.spx-area__main{min-width:0}
.spx-facts dd,.spx-row__body strong,.spx-row__status{overflow-wrap:anywhere}
@media (max-width:900px){
  .spx-area{grid-template-columns:minmax(0,1fr);gap:22px;padding:22px 14px 60px}
  .spx-profilecard{position:static;padding:22px 16px}
  .spx-avatar img{width:96px;height:96px}
  .spx-facts{grid-template-columns:1fr;gap:2px 0}
  .spx-facts dt{margin-top:12px}
  .spx-facts dt:first-child{margin-top:0}
  .spx-panel{padding:6px 16px}
  .spx-row{flex-wrap:wrap}
  .spx-row__body{flex:1 1 100%;order:2}
  .spx-row__thumb{order:1}
  .spx-row__actions{flex:1 1 100%;order:3;justify-content:flex-start}
  .spx-area .spx-form{padding:18px 16px}
  .spx-area__head{margin-bottom:14px}
  .spx-h1{font-size:1.3rem}
}
/* Eingabefelder auf schmalen Bildschirmen */
.spx-area .spx-form,.spx-form{min-width:0}
.spx-field{min-width:0}
.spx-field textarea,.spx-field input,.spx-field select{max-width:100%}

/* Öffnungszeiten im Formular */
.spx{--spx-akzent:#B88846}
.spx input[type="checkbox"]{accent-color:var(--spx-akzent)}
.spx-oz{display:grid;gap:10px}
.spx-oz__tag{border:1px solid var(--spx-line);border-radius:10px;padding:14px 16px;margin:0;
  display:grid;gap:10px;background:#fff;min-width:0;transition:background .15s ease}
.spx-oz__name{font-weight:600;font-size:.95rem;padding:0;float:none;width:auto;color:var(--spx-ink)}
.spx-oz__zu{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;color:#57544F;font-weight:500}
.spx-oz__zu input{width:auto;margin:0;width:17px;height:17px}
.spx-oz__zeiten{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:0}
.spx-oz__paar{display:grid;gap:4px;min-width:0}
.spx-oz__paar label{font-size:.8rem;color:#8A857E}
.spx-oz__paar input[type="time"]{width:100%;min-width:0;padding:9px 10px;border:1px solid var(--spx-line);
  border-radius:8px;font:inherit;background:#fff;color:var(--spx-ink);box-sizing:border-box}
.spx-oz__paar input[type="time"]:focus{border-color:var(--spx-akzent);outline:none;
  box-shadow:0 0 0 3px rgba(184,136,70,.15)}

/* Geschlossener Tag: neutral zurückgenommen, kein Akzent */
.spx .spx-oz__zu input[type="checkbox"],
.spx-oz .spx-oz__zu input[type="checkbox"]{accent-color:#8A857E}
.spx-oz__tag:has(.spx-oz__zu input:checked){background:#F5F5F4;border-color:#E4E4E2}
.spx-oz__tag:has(.spx-oz__zu input:checked) .spx-oz__zeiten,
.spx-oz__tag:has(.spx-oz__zu input:checked) .spx-oz__pause{opacity:.5}
.spx-oz__tag:has(.spx-oz__zu input:checked) input[type="time"]{background:#EFEFEE;color:#8A857E}
.spx-oz__tag:has(.spx-oz__zu input:checked) .spx-oz__pause > summary{color:#8A857E}
.spx-oz__tag:has(.spx-oz__zu input:checked) .spx-oz__zu{color:#57544F;font-weight:600}

.spx-oz__pause{border-top:1px dashed #E3DED6;padding-top:10px}
.spx-oz__pause > summary{cursor:pointer;font-size:.85rem;color:#9A7231;list-style:none;font-weight:500}
.spx-oz__pause > summary:hover{color:var(--spx-akzent)}
.spx-oz__pause > summary::-webkit-details-marker{display:none}
.spx-oz__pause > summary::before{content:"+ ";font-weight:600}
.spx-oz__pause[open] > summary::before{content:"– "}
.spx-oz__pause .spx-oz__zeiten{margin-top:10px}
.spx-oz__pause .spx-hint{margin-top:6px;color:#8A857E}

@media (min-width:640px){
  .spx-oz__tag{grid-template-columns:150px 1fr;align-items:center;column-gap:18px}
  .spx-oz__name{grid-column:1;grid-row:1}
  .spx-oz__zu{grid-column:1;grid-row:2;margin-top:-4px}
  .spx-oz__zeiten{grid-column:2;grid-row:1 / span 2}
  .spx-oz__pause{grid-column:1 / -1}
}