/* DocuWunder Website — Basis nach dem Claude-Design-Entwurf (Website DocuWunder.dc.html).
   Tokens und Schemata entsprechen der App; alles liegt lokal, nichts kommt von fremden Servern. */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(./manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(./manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+20A0-20C0;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(./inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(./inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+20A0-20C0;
}

/* Farbschemata — identisch mit dem App-Entwurf */
:root, [data-schema="hell"] {
  --bg:#F7FAFA; --card:#FFFFFF; --fill:#F1F5F5; --fill2:#E2EFED;
  --lab:#0D1B2A; --lab2:#5E6B78; --lab3:#6E7B88;
  --sep:#E2EFED; --sep-strong:#7E8C99;
  --acc:#147E73; --accH:#0F6B62; --onAcc:#FFFFFF; --accT:#E4F7F3; --mint:#8EE5DA;
  --org:#C2761B; --red:#B3261E; --onRed:#FFFFFF; --mark:#8EE5DA;
  --pg:#FFFFFF; --pgl:#DDE4E7; --focus:#0D1B2A;
  --warn-bg:#FDF2E2; --warn-lab:#7A4610;
  --sel:#DCF2EE; --hov:#EEF4F4; --press:#E2EFED; --kbd:#F1F5F5; --drop:#E4F7F3;
  color-scheme: light;
}
[data-schema="dunkel"] {
  --bg:#0D1B2A; --card:#152436; --fill:#1B2C40; --fill2:#243549;
  --lab:#FFFFFF; --lab2:#9AA7B4; --lab3:#8B98A5;
  --sep:#243549; --sep-strong:#6E7B88;
  --acc:#8EE5DA; --accH:#B5F0E7; --onAcc:#0D1B2A; --accT:#1E3A45; --mint:#8EE5DA;
  --org:#F0B454; --red:#FF6B60; --onRed:#0D1B2A; --mark:#8EE5DA;
  --pg:#1B2C40; --pgl:#3A4A5C; --focus:#8EE5DA;
  --warn-bg:#3A2A14; --warn-lab:#F0B454;
  --sel:#1E3A45; --hov:#1B2C40; --press:#243549; --kbd:#243549; --drop:#1E3A45;
  color-scheme: dark;
}

html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--lab);
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
}
a { color: var(--acc); }
a:hover { color: var(--accH); }
button:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px;
}
::selection { background: var(--sel); color: var(--lab); }
[id] { scroll-margin-top: 84px; }

/* Sprunglink */
.skip {
  position: absolute; left: -9999px; top: 12px; z-index: 100;
  font-size: 13px; font-weight: 700; color: var(--acc);
  background: var(--card); border: 1px solid var(--sep-strong);
  border-radius: 10px; padding: 10px 16px; text-decoration: none;
}
.skip:focus { left: 16px; }

/* Kopfzeile */
.kopf-nav a {
  font-size: 14px; font-weight: 600; color: var(--lab2);
  padding: 8px 12px; border-radius: 10px; text-decoration: none;
}
.kopf-nav a:hover { color: var(--lab); background: var(--hov); }
.kopf-nav a[aria-current="page"] { font-weight: 700; color: var(--acc); background: var(--accT); }
.knopf {
  font-size: 14px; font-weight: 700; color: var(--onAcc);
  background: var(--acc); border: 1px solid var(--acc);
  padding: 9px 16px; border-radius: 10px; text-decoration: none; white-space: nowrap;
}
.knopf:hover { color: var(--onAcc); background: var(--accH); }
.knopf-2 {
  font-size: 14px; font-weight: 700; color: var(--acc);
  background: var(--card); border: 1px solid var(--sep-strong);
  padding: 9px 16px; border-radius: 10px; text-decoration: none; white-space: nowrap;
}

/* Vergleichstabelle */
table.vgl { width: 100%; border-collapse: collapse; }
table.vgl thead th {
  padding: 14px 10px; background: var(--fill); border-bottom: 1px solid var(--sep-strong);
  font-size: 13px; font-weight: 700; color: var(--lab2); width: 130px;
}
table.vgl thead th:first-child { text-align: left; padding: 14px 18px; width: auto; }
table.vgl thead th.dw { background: var(--accT); border-bottom: 1px solid var(--acc); font-weight: 800; color: var(--acc); }
table.vgl tbody th {
  text-align: left; padding: 12px 18px; border-bottom: 1px solid var(--sep);
  font-size: 14px; font-weight: 600;
}
table.vgl td { text-align: center; padding: 12px; border-bottom: 1px solid var(--sep); }
table.vgl td.dw { background: var(--accT); }
table.vgl tr:last-child th, table.vgl tr:last-child td { border-bottom: none; }

.ja {
  display: inline-flex; width: 22px; height: 22px; border-radius: 50%;
  background: var(--mint); border: 1px solid var(--acc);
  align-items: center; justify-content: center;
  color: var(--lab); font-size: 13px; font-weight: 800; line-height: 1;
}
.nein {
  display: inline-flex; width: 22px; height: 22px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--red);
  align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: var(--red); line-height: 1;
}
.teils {
  display: inline-block; font-size: 12px; font-weight: 700;
  color: var(--warn-lab); background: var(--warn-bg);
  border: 1px solid var(--org); border-radius: 6px; padding: 3px 8px; white-space: nowrap;
}
.mintpill {
  display: inline-block; font-size: 12px; font-weight: 700; color: var(--lab);
  background: var(--mint); border: 1px solid var(--acc); border-radius: 6px;
  padding: 3px 8px; white-space: nowrap;
}

/* Ausklapplisten (Support-FAQ) */
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
[data-plus] { transition: transform .2s ease; }
details[open] [data-plus] { transform: rotate(45deg); }

/* Bewegung */
@keyframes wsAuf { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes wsDreh { from { opacity: .4; transform: perspective(1200px) rotateX(16deg) scale(.94); } to { opacity: 1; transform: perspective(1200px) rotateX(0deg) scale(1); } }
@keyframes wsSchwebe { 0%,100% { transform: translateY(-7px); } 50% { transform: translateY(7px); } }
@keyframes wsPill { 0%,26% { opacity: 1; } 33%,93% { opacity: 0; } 100% { opacity: 1; } }
@keyframes wsEcke { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes wsZieh { 0%,6% { opacity: 0; transform: translate(150px,-160px) rotate(4deg); } 14% { opacity: 1; } 40% { opacity: 1; transform: translate(0,0) rotate(0deg); } 47%,100% { opacity: 0; transform: translate(0,0) scale(.92); } }
@keyframes wsDrop { 0%,8% { opacity: 0; } 16%,42% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes wsFuellt { 0%,46% { transform: scaleX(0); } 80%,100% { transform: scaleX(1); } }
@keyframes wsLauf { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  [data-anim], [data-anim] * { animation: none !important; transition: none !important; }
  [data-plus] { transition: none; }
  html { scroll-behavior: auto; }
}

/* Schmale Schirme: Kopfzeile bricht um, Sprungmarken weichen */
@media (max-width: 760px) {
  .kopf-nav .nur-breit { display: none; }
}