:root{
    --ink:#2D3748; --brand:#69227b; --paper:#F7FAFC; --paper-2:#EDF2F7;
    --card:#ffffff; --line:#dfe6ee; --line-2:#c5d2df;
    --clay:#7d1d54; --clay-link:#69227b; --clay-soft:#f2e6f6;
    --coral:#fe665d; --gruen:#13612e; --gruen-soft:#e2f3e8;
    --rot:#9b1c1c; --rot-soft:#fbe9e9;
    --maxw:1080px; --col:680px; --r:16px; --r-sm:10px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans,
            Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);
       font-size:1.02rem;line-height:1.65;-webkit-font-smoothing:antialiased}
  .skip-link{position:absolute;left:-9999px}
  .skip-link:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;z-index:100}

  .topbar{position:sticky;top:0;z-index:50;background:var(--paper);
          border-bottom:1px solid var(--line)}
  .topbar-inner{max-width:var(--maxw);margin:0 auto;padding:.7rem 1.5rem;
                display:flex;align-items:center;gap:.65rem}
  .logo{height:30px;width:auto;display:block}
  .sep{width:1px;height:24px;background:var(--line-2)}
  .label{font-size:.85rem;font-weight:650;line-height:1.12}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem}
  .col{max-width:var(--col)}
  section{padding:3rem 0}
  section.alt{background:var(--paper-2);border-top:1px solid var(--line)}
  h1{font-size:clamp(2.2rem,5vw,3.3rem);line-height:1.03;letter-spacing:-.035em;
     font-weight:800;margin:0 0 .5rem}
  h2{font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.1;letter-spacing:-.025em;
     font-weight:800;margin:0 0 .9rem}
  p{margin:0 0 .9rem;max-width:68ch}
  .sum{font-size:1.18rem;line-height:1.55;font-weight:600;max-width:58ch}

  .starter{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
           padding:1.8rem;margin-top:1.6rem;max-width:var(--col)}
  .feld{display:block;font-size:.8rem;font-weight:700;text-transform:uppercase;
        letter-spacing:.05em;opacity:.7;margin:0 0 .4rem}
  .feld + .hilfe{margin-top:-.2rem}
  .hilfe{font-size:.85rem;opacity:.7;margin:.4rem 0 0}
  .block{margin-bottom:1.4rem}
  input[type=text]{width:100%;padding:.75rem 1rem;border:1px solid var(--line-2);
       border-radius:var(--r-sm);font-size:1rem;font-family:inherit;background:#fff;
       color:var(--ink)}
  input[type=text]:focus{outline:2px solid var(--clay-link);outline-offset:2px}

  /* Ablagefeld statt des Standardknopfs des Browsers. Das echte Dateifeld
     bleibt im Feld und per Tastatur erreichbar, ist nur unsichtbar. */
  .ablage{position:relative;display:flex;align-items:center;gap:1rem;padding:1.1rem 1.2rem;
          border:1.5px dashed var(--line-2);border-radius:var(--r-sm);background:var(--paper);
          cursor:pointer;transition:border-color .15s,background .15s}
  .ablage:hover,.ablage.drueber{border-color:var(--clay-link);background:var(--clay-soft)}
  .ablage:focus-within{outline:2px solid var(--clay-link);outline-offset:2px}
  .ablage.gewaehlt{border-style:solid;border-color:var(--gruen);background:var(--gruen-soft)}
  .ablage input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
  .ablage-symbol{flex:none;width:36px;height:36px;padding:7px;border-radius:50%;
                 background:var(--card);border:1px solid var(--line);fill:none;
                 stroke:var(--clay-link);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .ablage.gewaehlt .ablage-symbol{stroke:var(--gruen)}
  .ablage-text{display:flex;flex-direction:column;line-height:1.35;min-width:0}
  .ablage-text strong{color:var(--clay-link);overflow-wrap:anywhere}
  .ablage.gewaehlt .ablage-text strong{color:var(--gruen)}
  .ablage-text span{font-size:.88rem;opacity:.7}
  #start{padding:.75rem 1.6rem;border:0;border-radius:var(--r-sm);background:var(--coral);
         color:#3a1109;font-size:1rem;font-weight:750;font-family:inherit;cursor:pointer}
  #start:disabled{opacity:.5;cursor:default}

  .meldung{display:none;margin-top:1.4rem;border-radius:var(--r-sm);padding:1.1rem 1.3rem}
  .meldung.an{display:block}
  .meldung p{margin:0 0 .6rem}
  .meldung p:last-child{margin:0}
  #laeuft{background:var(--paper-2)}
  #fehler{background:var(--rot-soft);color:var(--rot);font-weight:600}
  #ergebnis{background:var(--gruen-soft)}
  .knopf{display:inline-block;padding:.6rem 1.2rem;border-radius:var(--r-sm);
         text-decoration:none;font-weight:750;font-size:.95rem;background:var(--brand);color:#fff}
  .punkt{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--brand);
         margin-right:.5rem;animation:puls 1s ease-in-out infinite alternate}
  @keyframes puls{from{opacity:.25}to{opacity:1}}

  table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);
        border-radius:var(--r);overflow:hidden;font-size:.95rem}
  th,td{text-align:left;padding:.7rem 1rem;border-bottom:1px solid var(--line)}
  th{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;opacity:.7}
  tr:last-child td{border-bottom:0}
  a{color:var(--clay-link)}
  .leer{opacity:.7}
  footer{border-top:1px solid var(--line);padding:2rem 0 3rem;font-size:.84rem;opacity:.7}
  @media (max-width:640px){ th:nth-child(3),td:nth-child(3){display:none} }
  @media (prefers-reduced-motion:reduce){ .punkt{animation:none} }
  .abmelden{margin-left:auto;background:none;border:1px solid var(--line-2);border-radius:var(--r-sm);
            padding:.35rem .9rem;font-family:inherit;font-size:.85rem;color:var(--ink);cursor:pointer}
  .abmelden[hidden]{display:none}