/* Naldano-Marke (Naldano/brand, tokens.css): Papier, Waldtinte, Cormorant fuer Titel, DM Sans fuer Text.
   Moos ist hier #5C6A5A statt #6B7967: kleine Schrift braucht 4,5:1 Kontrast auf Papier (WCAG AA), das Original hat 3,9:1. */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400 500;font-display:swap;src:url(/schriften/cormorant-garamond.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(/schriften/cormorant-garamond-kursiv.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400 500;font-display:swap;src:url(/schriften/dm-sans.woff2) format("woff2")}

:root{
  --papier:#EEECE5;--buchseite:#F7F0DF;--pergament:#EDE4D0;--linie:#D5C9AC;
  --tinte:#273E34;--moos:#5C6A5A;--salbei:#778D65;
  --gartenwand:#4E7358;--gartentinte:#304F40;--putz:#E6D3BE;--ateliertinte:#754832;--messing:#AE8853;
  --serif:"Cormorant Garamond",Georgia,serif;--sans:"DM Sans",system-ui,-apple-system,sans-serif;
  color-scheme:light
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--tinte);background:var(--papier);min-height:100vh;display:flex;flex-direction:column}

/* Kopf mit Wortmarke: "naldano" klein in DM Sans, dahinter der Punkt in Salbei. */
header{display:flex;align-items:center;gap:18px;padding:18px 24px;border-bottom:1px solid var(--linie)}
.wortmarke{font-size:26px;letter-spacing:-.048em;color:var(--tinte);text-decoration:none;line-height:1;display:inline-flex;align-items:baseline}
.wortmarke .punkt{display:inline-block;width:.15em;height:.15em;border-radius:50%;background:var(--salbei);margin-left:.15em}
header .label{margin:0}
header .leise-knopf{margin-left:auto}

.label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--moos);margin:0 0 10px}
main{flex:1;width:100%;max-width:880px;margin:0 auto;padding:40px 20px 56px}
h1{font-family:var(--serif);font-weight:400;font-size:44px;line-height:1.05;letter-spacing:-.02em;margin:0 0 16px}
h1 em{font-style:italic}
h2{font-family:var(--serif);font-weight:500;font-size:24px;margin:36px 0 10px}
p{margin:0 0 14px}

/* Knoepfe: Pille mit feiner Kontur; Hauptknopf in Gartenwand. */
.knopf{font:inherit;font-size:15px;background:transparent;color:var(--tinte);border:1px solid var(--tinte);border-radius:999px;padding:10px 20px;cursor:pointer;transition:background .15s,color .15s}
.knopf:hover{background:var(--tinte);color:var(--buchseite)}
.knopf.haupt{background:var(--gartenwand);border-color:var(--gartenwand);color:var(--buchseite)}
.knopf.haupt:hover{background:var(--gartentinte);border-color:var(--gartentinte)}
.knopf.leise-knopf{font-size:14px;padding:7px 14px;border-color:var(--linie);color:var(--moos)}
.knopf.leise-knopf:hover{background:var(--pergament);color:var(--tinte)}
.knopf:focus-visible,.ablage:focus-within{outline:2px solid var(--gartenwand);outline-offset:3px}
.knopfreihe{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

/* Startseite: Text links, Szene rechts. */
.buehne{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.buehne-text p:not(.label){font-size:17px;color:var(--moos);max-width:38ch}
.buehne .knopf{margin-top:8px}
.schritte{margin:28px 0 0;padding-left:20px;color:var(--moos);font-size:15px;line-height:1.5}
.schritte li{margin-bottom:6px}
.schritte strong{color:var(--tinte);font-weight:500}
.szene{width:100%;height:auto;border-radius:6px;box-shadow:0 1px 0 var(--linie)}

/* Ablage: Buchseite mit gestrichelter Linie; beim Ziehen Pergament und Gartenwand. */
.ablage{display:block;border:1.5px dashed var(--linie);border-radius:8px;padding:40px 24px;text-align:center;background:var(--buchseite);cursor:pointer;transition:background .15s,border-color .15s}
.ablage:hover{border-color:var(--salbei)}
.ablage.aktiv{background:var(--pergament);border-color:var(--gartenwand);border-style:solid}
.ablage input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.ablage strong{display:block;font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.2;margin-bottom:6px}
.ablage span{color:var(--moos);font-size:15px}
#meldung{min-height:1.6em;margin-top:12px}

table{width:100%;border-collapse:collapse;font-size:15px;table-layout:fixed}
th:nth-child(1){width:40%}th:nth-child(2){width:13%}th:nth-child(3){width:21%}th:nth-child(4){width:26%}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--linie);overflow-wrap:anywhere;vertical-align:top}
th{font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--moos);white-space:nowrap}
td.zahl{white-space:nowrap;color:var(--moos)}
.status{display:inline;padding:2px 10px;border-radius:999px;font-size:13px;line-height:2;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.status.pruefung{background:var(--pergament);color:var(--moos)}
.status.angenommen{background:#DCE5D6;color:var(--gartentinte)}
.status.abgelehnt{background:var(--putz);color:var(--ateliertinte)}
.status.fehler{background:var(--putz);color:var(--ateliertinte)}
.fortschritt{display:flex;align-items:center;gap:10px;min-width:140px}
progress{flex:1;height:6px;appearance:none;border:0;background:var(--pergament);border-radius:3px;overflow:hidden}
progress::-webkit-progress-bar{background:var(--pergament)}
progress::-webkit-progress-value{background:var(--gartenwand)}
progress::-moz-progress-bar{background:var(--gartenwand)}
.fortschritt small{color:var(--moos);font-size:13px;min-width:3.5ch;text-align:right}
.wiederholen{font:inherit;font-size:13px;background:none;border:0;padding:0;color:var(--gartenwand);text-decoration:underline;cursor:pointer}
.leise{color:var(--moos);font-size:14px}
.hinweis{margin-top:20px}
footer{padding:20px;text-align:center;color:var(--moos);font-size:13px;border-top:1px solid var(--linie)}
footer a{color:var(--moos)}
[hidden]{display:none!important}

@media (max-width:720px){
  .buehne{grid-template-columns:1fr;gap:28px}
  h1{font-size:36px}
  header{padding:14px 16px;gap:12px}
  main{padding:28px 16px 40px}
}
@media (max-width:560px){th:nth-child(3),td:nth-child(3){display:none}th:nth-child(1){width:46%}th:nth-child(2){width:18%}th:nth-child(4){width:36%}th,td{padding:10px 6px}.ablage{padding:28px 16px}.ablage strong{font-size:22px}}