/* Seitenkette – Datenblatt. Warme Neutraltöne, Pflaume als einziger Akzent.
   Farben geprüft im Test odtlacok. */
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-display:swap;src:url(schrift/ah-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+2212}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-display:swap;src:url(schrift/ah-400-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-display:swap;src:url(schrift/ah-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+2212}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-display:swap;src:url(schrift/ah-700-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:"Martian Mono";font-weight:400;font-display:swap;src:url(schrift/mm-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+2212}
@font-face{font-family:"Martian Mono";font-weight:400;font-display:swap;src:url(schrift/mm-400-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:"Martian Mono";font-weight:600;font-display:swap;src:url(schrift/mm-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+2212}
@font-face{font-family:"Martian Mono";font-weight:600;font-display:swap;src:url(schrift/mm-600-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF}

:root{
  --sk-grund:#FFFFFF; --sk-tafel:#FFFFFF; --sk-kante:#E2E2E2; --sk-tinte:#1E1E1E; --sk-tinte2:#5E5E5E; --sk-marke:#5B3A4F; --sk-hell:#F2F2F2;
  --sk-text:"Atkinson Hyperlegible",Tahoma,sans-serif; --sk-zahl:"Martian Mono","Lucida Console",monospace;
  --sk-seite:max(16px,3vw);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sk-grund);color:var(--sk-tinte);font:17px/1.55 var(--sk-text)}
a{color:var(--sk-tinte);text-decoration-thickness:1.5px;text-underline-offset:2px}
:focus-visible{outline:2px solid var(--sk-marke);outline-offset:2px}
h1,h2{margin:0;line-height:1.15;text-wrap:balance}
h1{font:700 clamp(26px,3.2vw,36px)/1.15 var(--sk-text)}
h2{font:700 21px/1.25 var(--sk-text)}
p{margin:0}
.sk-mono{font-family:var(--sk-zahl);font-size:.88em}
.sk-klein{font-size:14px}
.sk-sprung{position:absolute;left:-999px}.sk-sprung:focus{left:8px;top:8px;background:var(--sk-marke);color:var(--sk-tafel);padding:8px;z-index:40}
.sk-weg{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.sk-leiste{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px var(--sk-seite);border-bottom:1px solid var(--sk-kante);background:var(--sk-tafel);flex-wrap:wrap}
.sk-name{display:flex;gap:8px;align-items:center;font:600 19px var(--sk-zahl);text-decoration:none;letter-spacing:-.04em}
.sk-zeichen{flex:none}
.sk-nav{display:flex;gap:22px;font-weight:700;flex-wrap:wrap;font-size:16px}
.sk-nav a{text-decoration:none;padding:2px 0;border-bottom:2px solid transparent}
.sk-nav a[aria-current]{border-color:var(--sk-marke);color:var(--sk-marke)}
.sk-haupt{padding:32px var(--sk-seite) 48px;display:grid;gap:20px;min-width:0;max-width:1320px;margin:0 auto;width:100%}
.sk-kopf{display:grid;gap:8px;max-width:70ch}

.sk-befehl{display:flex;align-items:center;gap:10px;background:var(--sk-tafel);color:var(--sk-tinte);padding:10px 14px;border:1px solid var(--sk-kante);border-radius:3px}
.sk-befehl-zeichen{font:600 18px var(--sk-zahl);color:var(--sk-marke)}
.sk-befehl input{flex:1;min-width:0;background:transparent;border:0;color:var(--sk-tinte);font:16px var(--sk-text)}
.sk-befehl input::placeholder{color:var(--sk-tinte2)}
.sk-gebiete{display:flex;flex-wrap:wrap;gap:8px;font:14px var(--sk-text)}
.sk-gebiete a{border:1px solid var(--sk-kante);background:var(--sk-tafel);border-radius:3px;padding:4px 10px;text-decoration:none}
.sk-gebiete a[aria-current]{background:var(--sk-marke);border-color:var(--sk-marke);color:var(--sk-tafel)}

.sk-tabellenrahmen{overflow-x:auto;min-width:0;background:var(--sk-tafel);border:1px solid var(--sk-kante);border-radius:3px}
.sk-tabelle{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.sk-tabelle th,.sk-tabelle td{padding:12px 14px;border-bottom:1px solid var(--sk-kante);text-align:left;vertical-align:middle}
.sk-tabelle thead th{font:700 12px var(--sk-text);color:var(--sk-tinte2);text-transform:uppercase;letter-spacing:.07em;border-bottom:1px solid var(--sk-kante);position:sticky;top:0;background:var(--sk-tafel)}
.sk-tabelle thead button{all:unset;cursor:pointer}
.sk-tabelle thead button:focus-visible{outline:2px solid var(--sk-marke)}
.sk-tabelle thead button[aria-sort]::after{content:" ↕"}
.sk-tabelle tbody th{font-weight:700}
.sk-tabelle tbody th a{text-decoration:none}
.sk-tabelle tr.sk-gewaehlt td,.sk-tabelle tr.sk-gewaehlt th{background:var(--sk-hell)}
.sk-tabelle tr.sk-gewaehlt th{box-shadow:inset 3px 0 0 var(--sk-marke)}
.sk-r{text-align:right!important}
.sk-plus{font:700 14px var(--sk-text);border:1px solid var(--sk-marke);border-radius:3px;background:transparent;color:var(--sk-marke);padding:5px 10px;cursor:pointer}
.sk-plus:hover{background:var(--sk-marke);color:var(--sk-tafel)}
.sk-im-korb{font-weight:600}
.sk-leer{font:16px var(--sk-text);color:var(--sk-tinte2)}

.sk-blatt{width:100%;border-collapse:collapse;border:1px solid var(--sk-kante);background:var(--sk-tafel)}
.sk-blatt th,.sk-blatt td{border-bottom:1px solid var(--sk-kante);padding:10px 14px;text-align:left;vertical-align:top}
.sk-blatt thead th{font:700 12px var(--sk-text);color:var(--sk-tinte2);text-transform:uppercase;letter-spacing:.07em;background:var(--sk-tafel)}
.sk-nummeriert th{font:600 12px var(--sk-zahl);width:46px;color:var(--sk-marke)}
.sk-nummeriert td:nth-child(2){font-weight:700;width:30%}
.sk-kopfband{display:grid;gap:4px;border-left:3px solid var(--sk-marke);padding:6px 0 6px 14px}
.sk-zweispalt{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.sk-kaufbox{border:1px solid var(--sk-kante);border-top:3px solid var(--sk-marke);border-radius:3px;background:var(--sk-tafel);padding:20px;display:grid;gap:12px;box-shadow:0 12px 32px -22px rgba(30,30,30,.45)}
.sk-etikett{border:1px solid var(--sk-kante);border-radius:3px;background:var(--sk-tafel);padding:16px;display:grid;gap:4px;font-family:var(--sk-zahl);font-size:13px}
.sk-etikett b{font:700 24px var(--sk-text)}
.sk-foto{width:100%;height:auto;display:block}
.sk-preisgross{font-size:26px;font-weight:600}
.sk-zaehler{display:grid;grid-template-columns:44px 1fr 44px;border:1px solid var(--sk-kante);border-radius:3px;overflow:hidden}
.sk-zaehler button{background:var(--sk-hell);border:0;color:var(--sk-tinte);font:600 20px var(--sk-zahl);cursor:pointer}
.sk-zaehler input{border:0;border-inline:1px solid var(--sk-kante);text-align:center;background:var(--sk-tafel);color:var(--sk-tinte);height:42px;min-width:0}
.sk-abschnitt{display:grid;gap:10px;max-width:900px}

.sk-knopf{display:inline-block;background:var(--sk-marke);color:var(--sk-tafel);border:1px solid var(--sk-marke);border-radius:3px;padding:11px 18px;font:700 16px var(--sk-text);text-decoration:none;cursor:pointer;text-align:center}
.sk-knopf.sk-hell{background:transparent;color:var(--sk-marke)}
.sk-breit{width:100%}
.sk-gross{font-size:19px;padding:14px 22px}
.sk-knopf[aria-disabled="true"]{opacity:.5;pointer-events:none}

.sk-dock{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--sk-tafel);border-top:1px solid var(--sk-kante);box-shadow:0 -10px 28px -22px rgba(30,30,30,.5);padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.sk-dock .sk-knopf{padding:8px 12px}
.sk-dock-hinweis{font-size:14px;flex:1;min-width:0}
body.sk-mit-dock{padding-bottom:84px}
.sk-korb{position:fixed;inset:auto 0 0 0;z-index:30;background:var(--sk-tafel);border-top:3px solid var(--sk-marke);box-shadow:0 -16px 40px -24px rgba(30,30,30,.5);max-height:80vh;overflow:auto;padding:16px max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.sk-korb-innen{max-width:760px;margin:0 auto;display:grid;gap:12px}
.sk-korb-kopf{display:flex;justify-content:space-between;align-items:center}
.sk-posten{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.sk-posten td{padding:6px 4px;border-bottom:1px solid var(--sk-kante)}
.sk-posten td:last-child{text-align:right;white-space:nowrap}
.sk-posten .sk-summenzeile td{font-weight:700;border-top:1px solid var(--sk-tinte)}
.sk-mengenfeld{width:56px;font:14px var(--sk-zahl);text-align:center;border:1px solid var(--sk-kante);border-radius:3px;background:var(--sk-tafel);color:var(--sk-tinte);padding:4px}

.sk-formular{display:grid;gap:14px;max-width:820px}
.sk-eingabe th{width:34%;font-weight:700}
.sk-eingabe input,.sk-eingabe select,.sk-eingabe textarea{width:100%;font:16px var(--sk-text);color:var(--sk-tinte);background:var(--sk-tafel);border:1px solid var(--sk-kante);border-radius:3px;padding:9px 10px}
.sk-zwischen{background:var(--sk-hell)!important;color:var(--sk-marke);font:700 12px var(--sk-text)!important;text-transform:uppercase;letter-spacing:.08em}
.sk-wahl{display:flex;gap:8px;align-items:flex-start;margin:4px 0}
.sk-wahl input{width:18px;height:18px;flex:none;accent-color:var(--sk-marke);margin-top:3px}
.sk-fehler{border:1px solid var(--sk-kante);border-left:4px solid var(--sk-marke);background:var(--sk-hell);padding:12px 14px;font-weight:700}
.sk-fehler[hidden]{display:none}
.sk-falle{position:absolute;left:-9999px}

.sk-auftragsblatt{border:1px solid var(--sk-kante);border-top:3px solid var(--sk-marke);border-radius:3px;background:var(--sk-tafel);padding:28px;max-width:860px;display:grid;gap:16px}
.sk-status{display:inline-block;background:var(--sk-hell);color:var(--sk-marke);border:1px solid var(--sk-marke);border-radius:3px;font:700 12px var(--sk-text);letter-spacing:.06em;padding:3px 8px;text-transform:uppercase}

.sk-text{display:grid;gap:12px;max-width:72ch}
.sk-text h2{margin-top:14px}
.sk-text ul{margin:0;padding-left:20px;display:grid;gap:4px}
.sk-fragen dt{font-weight:700;margin-top:14px}
.sk-fragen dd{margin:4px 0 0}

.sk-fuss{border-top:1px solid var(--sk-kante);background:var(--sk-tafel);color:var(--sk-tinte2);padding:18px var(--sk-seite) 28px;display:grid;gap:6px;font-size:14px}

@media (max-width:800px){
  .sk-zweispalt{grid-template-columns:1fr}
  .sk-tabelle thead{display:none}
  .sk-tabelle tr{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:10px 0;border-bottom:1px solid var(--sk-kante)}
  .sk-tabelle th,.sk-tabelle td{border:0;padding:0}
  .sk-tabelle td[data-sk-titel]{font-size:13px}
  .sk-tabelle td[data-sk-titel="Gebiet"],.sk-tabelle td[data-sk-titel="M"],.sk-tabelle td[data-sk-titel="Analysen"]{display:none}
  .sk-tabelle td[data-sk-titel]::before{content:attr(data-sk-titel) " ";font-weight:600}
  .sk-tabelle td.sk-preis{grid-column:2;grid-row:1;text-align:right}
  .sk-tabelle td:last-child{grid-column:2;grid-row:2 / span 2;align-self:center}
  .sk-eingabe th{width:auto}
  .sk-eingabe tr{display:grid}
  .sk-dock-hinweis{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{.sk-leiste,.sk-fuss,.sk-dock,.sk-korb,.sk-druck{display:none!important}body{background:none}}
.sk-blatt td,.sk-blatt th{overflow-wrap:anywhere}
.sk-tabellenrahmen:focus-visible{outline:2px solid var(--sk-marke)}
.sk-zeichen{color:var(--sk-marke)}
.sk-leiste,.sk-fuss{padding-inline:max(var(--sk-seite),calc((100% - 1320px) / 2 + var(--sk-seite)))}
.sk-bild{margin:0;border:1px solid var(--sk-kante);border-radius:3px;overflow:hidden;background:var(--sk-tafel)}
.sk-bild figcaption{padding:8px 12px;color:var(--sk-tinte2)}
.sk-mini{width:40px;height:40px;vertical-align:middle;margin-right:12px;border-radius:3px;border:1px solid var(--sk-kante)}
