/* Memoria — Gestaltungssystem der nutzerseitigen Seiten.
 *
 * Die Farb- und Schrift-Token stammen unveraendert aus Website/memoria-landing.html. Wer von
 * der Landingpage in die Anwendung wechselt, soll keinen Bruch sehen.
 *
 * Abgrenzung zu style.css: dort liegt das Werkzeug-Dunkelblau der internen Seiten
 * (Foto-Tagging, Review, Interview). Beide Systeme laufen nebeneinander, weil die internen
 * Seiten fuer laengeres, konzentriertes Arbeiten am Bildschirm gebaut sind und die
 * nutzerseitigen fuer gelegentliche Besuche von Menschen, die oft ueber 70 sind.
 *
 * Daher hier bewusst: 18px Grundschrift statt 16, hohe Kontraste, grosse Klickflaechen,
 * Atkinson Hyperlegible als Grundschrift (fuer Lesbarkeit entworfen, nicht fuer Stil).
 */

:root {
  --graphit:     #202524;
  --papier:      #f6f2ea;
  --terrakotta:  #b65f47;
  --messing:     #c39a53;
  --rauchblau:   #647985;

  --bg:          #f6f2ea;
  --surface:     #fcfaf6;
  --surface-alt: #efe9dd;
  --border:      #ded6c6;
  --border-soft: #e8e1d4;

  --fg:          #202524;
  --fg-muted:    #55605b;
  --fg-faint:    #7d867f;

  --band-bg:     #173f3a;
  --band-fg:     #f3efe6;
  --band-muted:  #a8bcb5;
  --band-border: #2b544e;

  --accent:      #a9543d;
  --accent-soft: #f0e2dc;
  --brass-line:  #c39a53;
  --brass-ink:   #8a6b2f;
  --smoke-ink:   #4f626d;
  --focus:       #c39a53;

  --ok:          #2f6b4f;
  --ok-bg:       #e4efe6;
  --warn:        #8a6b2f;
  --warn-bg:     #f2e9d5;
  --stop:        #9b3a33;
  --stop-bg:     #f4e2df;

  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans:  "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --mono:  "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;

  --content: 1080px;
  --prose: 64ch;
  --radius: 4px;
  --shadow: 0 1px 2px rgba(32, 37, 36, .04), 0 12px 32px -20px rgba(23, 63, 58, .35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #101e1b;
    --surface:     #17302b;
    --surface-alt: #143029;
    --border:      #2b4741;
    --border-soft: #223a35;

    --fg:          #ece7dc;
    --fg-muted:    #a5b1aa;
    --fg-faint:    #7f8c85;

    --band-bg:     #1d3b36;
    --band-fg:     #f1ede4;
    --band-border: #2f5751;

    --accent:      #dc8f74;
    --accent-soft: #33221d;
    --brass-ink:   #d6b273;
    --smoke-ink:   #92a6b1;

    --ok:      #7cc79b;  --ok-bg:   #1a3a2c;
    --warn:    #d6b273;  --warn-bg: #3a3020;
    --stop:    #e79086;  --stop-bg: #3d2320;
  }
}

:root[data-theme="dark"] {
  --bg:          #101e1b;
  --surface:     #17302b;
  --surface-alt: #143029;
  --border:      #2b4741;
  --border-soft: #223a35;

  --fg:          #ece7dc;
  --fg-muted:    #a5b1aa;
  --fg-faint:    #7f8c85;

  --band-bg:     #1d3b36;
  --band-fg:     #f1ede4;
  --band-border: #2f5751;

  --accent:      #dc8f74;
  --accent-soft: #33221d;
  --brass-ink:   #d6b273;
  --smoke-ink:   #92a6b1;

  --ok:      #7cc79b;  --ok-bg:   #1a3a2c;
  --warn:    #d6b273;  --warn-bg: #3a3020;
  --stop:    #e79086;  --stop-bg: #3d2320;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.memoria {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.memoria img, body.memoria svg { max-width: 100%; display: block; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--band-bg); color: var(--band-fg); padding: .7rem 1.1rem; z-index: 100;
}
.skip:focus { left: .5rem; top: .5rem; }

/* ---------- Kopfleiste ---------- */

.memnav {
  background: var(--band-bg); color: var(--band-fg);
  border-bottom: 1px solid var(--band-border);
  flex: none;
}
.memnav-inner {
  max-width: var(--content); margin: 0 auto;
  padding: .55rem 1.4rem;
  display: flex; align-items: center; gap: .5rem 1.3rem; flex-wrap: wrap;
}
.memnav-brand {
  font-family: var(--serif); font-size: 1.12rem; font-weight: 600;
  color: var(--band-fg); text-decoration: none; letter-spacing: .01em;
  display: flex; align-items: baseline; gap: .6rem;
}
.memnav-brand small {
  font-family: var(--mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--messing);
}
.memnav-steps { display: flex; gap: .2rem; flex-wrap: wrap; margin-right: auto; }
.memnav-step {
  display: inline-flex; align-items: center; gap: .42rem;
  padding: .3rem .68rem; border-radius: 999px;
  font-size: .82rem; text-decoration: none;
  color: var(--band-muted); border: 1px solid transparent;
}
.memnav-step:hover { color: var(--band-fg); border-color: var(--band-border); }
.memnav-step .n {
  width: 19px; height: 19px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: .66rem;
  border: 1px solid var(--band-border); background: rgba(255,255,255,.05);
}
.memnav-step[aria-current="page"] {
  color: var(--band-fg); border-color: var(--messing); background: rgba(195,154,83,.13);
}
.memnav-step[aria-current="page"] .n { background: var(--messing); border-color: var(--messing); color: #22303a; }
.memnav-step.done { color: var(--band-fg); }
.memnav-step.done .n { background: #2f6b4f; border-color: #2f6b4f; color: #eaf6ee; }
.memnav-step.locked { opacity: .45; pointer-events: none; }
.memnav-who { font-size: .78rem; color: var(--band-muted); display: flex; align-items: center; gap: .7rem; }
.memnav-who a { color: var(--messing); }

/* ---------- Grundraster ---------- */

.wrap { max-width: var(--content); margin: 0 auto; padding: 0 1.4rem; }
.wrap--narrow { max-width: 760px; }

.page-head { padding: 3rem 0 1.6rem; }
.eyebrow {
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase; color: var(--brass-ink);
  margin: 0 0 .9rem;
}
body.memoria h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 2.9rem); line-height: 1.08;
  letter-spacing: -.015em; text-wrap: balance; margin: 0 0 1rem;
}
body.memoria h2 {
  font-family: var(--serif); font-weight: 600; font-size: 1.42rem;
  line-height: 1.24; text-wrap: balance; margin: 0 0 .7rem;
}
body.memoria h3 { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; margin: 0 0 .5rem; }
.lead { font-size: 1.1rem; color: var(--fg-muted); max-width: var(--prose); margin: 0 0 1.2rem; }
body.memoria p { max-width: var(--prose); margin: 0 0 1rem; }
.muted { color: var(--fg-muted); }
.faint { color: var(--fg-faint); font-size: .88rem; }

/* ---------- Schrittkarten (Hub) ---------- */

/* Vier Schritte sind eine Abfolge, keine Sammlung: sie gehoeren nebeneinander, damit der
   Weg als Weg lesbar bleibt. Erst wenn das zu eng wird, zwei- und einspaltig. */
.cards-grid { display: grid; gap: 1.1rem; padding-bottom: 3rem; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .cards-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .cards-grid { grid-template-columns: 1fr; } }
.step-card {
  background: var(--surface); border: 1px solid var(--border);
  border-top: 3px solid var(--border); border-radius: var(--radius);
  padding: 1.3rem 1.35rem 1.2rem;
  display: flex; flex-direction: column; gap: .55rem;
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow);
}
a.step-card:hover { border-color: var(--accent); border-top-color: var(--accent); }
.step-card--open   { border-top-color: var(--messing); }
.step-card--done   { border-top-color: var(--ok); }
.step-card--locked { opacity: .62; box-shadow: none; }
.step-card-n {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--brass-ink);
}
.step-card h2 { margin: 0; font-size: 1.24rem; }
.step-card p { margin: 0; font-size: .93rem; color: var(--fg-muted); max-width: none; }
.step-card-foot {
  margin-top: auto; padding-top: .8rem;
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
}

.pill {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  padding: .16rem .5rem; border-radius: 2px; border: 1px solid; white-space: nowrap;
}
.pill--ok   { color: var(--ok);   background: var(--ok-bg);   border-color: var(--ok); }
.pill--warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn); }
.pill--stop { color: var(--stop); background: var(--stop-bg); border-color: var(--stop); }
.pill--idle { color: var(--fg-faint); background: transparent; border-color: var(--border); }

/* ---------- Knoepfe ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-size: 1rem; line-height: 1.2;
  padding: .78rem 1.4rem; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface); color: var(--fg);
  text-decoration: none; cursor: pointer; text-align: center;
}
.btn:hover { border-color: var(--accent); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fdf7f4; font-weight: 700; }
.btn--primary:hover { filter: brightness(1.07); border-color: var(--accent); }
.btn--band { background: var(--band-bg); border-color: var(--band-bg); color: var(--band-fg); }
.btn--quiet { background: transparent; }
.btn--lg { font-size: 1.08rem; padding: .95rem 1.7rem; }
.btn--sm { font-size: .88rem; padding: .45rem .85rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin: 1.2rem 0; }

/* ---------- Formulare ---------- */

.form { display: flex; flex-direction: column; gap: 1.05rem; max-width: 560px; }
.field { display: flex; flex-direction: column; gap: .34rem; }
.field label { font-size: .93rem; font-weight: 700; }
.field .help { font-size: .84rem; color: var(--fg-muted); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem;
  padding: .68rem .8rem; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface); color: var(--fg);
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field-row { display: grid; gap: 1.05rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

.status-line { font-size: .93rem; color: var(--fg-muted); min-height: 1.4em; }
.status-line.ok { color: var(--ok); }
.status-line.error { color: var(--stop); }

/* ---------- Kaesten ---------- */

.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.3rem 1.4rem; margin: 0 0 1.4rem;
}
.note {
  border-left: 3px solid var(--accent); background: var(--surface);
  padding: .95rem 1.15rem; margin: 1.2rem 0; border-radius: 0 var(--radius) var(--radius) 0;
  max-width: var(--prose); font-size: .95rem;
}
.note--brass { border-left-color: var(--messing); }
.note--stop  { border-left-color: var(--stop); }
.note-label {
  display: block; margin-bottom: .35rem;
  font-family: var(--mono); font-size: .65rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--accent);
}
.note--brass .note-label { color: var(--brass-ink); }
.note--stop  .note-label { color: var(--stop); }

.band {
  background: var(--band-bg); color: var(--band-fg);
  border-radius: var(--radius); padding: 1.7rem 1.6rem; margin: 1.5rem 0;
}
.band h2, .band h3 { color: var(--band-fg); }
.band p { color: var(--band-muted); }
.band strong { color: var(--band-fg); }

/* ---------- Preisstufen ---------- */

.tiers { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.tier {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 1.2rem 1.25rem;
  display: flex; flex-direction: column; gap: .5rem; cursor: pointer;
}
.tier:hover { border-color: var(--accent); }
.tier.selected { border-color: var(--accent); border-width: 2px; background: var(--accent-soft); }
.tier-name { font-family: var(--serif); font-size: 1.16rem; font-weight: 600; }
.tier-price {
  font-family: var(--mono); font-size: 1.35rem; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--accent);
}
.tier-scope { font-size: .88rem; color: var(--fg-muted); }
.tier input { position: absolute; opacity: 0; pointer-events: none; }

/* ---------- Tabellen / Listen ---------- */

.tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); margin: 1.2rem 0; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; background: var(--surface); }
thead th {
  background: var(--surface-alt); text-align: left; padding: .65rem .85rem;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-muted); border-bottom: 1px solid var(--border); white-space: nowrap;
}
tbody td { padding: .62rem .85rem; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

.stack { display: flex; flex-direction: column; gap: .75rem; }
.rowitem {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .8rem .95rem; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface);
}
.rowitem .grow { flex: 1; min-width: 12ch; }
.rowitem .who { font-weight: 700; }
.rowitem .meta { font-size: .84rem; color: var(--fg-muted); }

/* ---------- Prueffassung ---------- */

.reader {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 2.2rem 2.4rem; margin: 1.3rem 0;
  max-height: 68vh; overflow-y: auto;
}
.reader h2 { font-size: 1.3rem; margin: 1.9rem 0 .7rem; }
.reader h2:first-child { margin-top: 0; }
.reader p { font-family: var(--serif); font-size: 1.06rem; line-height: 1.72; max-width: 62ch; }
.reader .seg {
  display: block; margin-top: -.5rem; margin-bottom: 1rem;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .04em; color: var(--fg-faint);
}
.reader .seg::before { content: "Quelle: "; }
@media (max-width: 620px) { .reader { padding: 1.3rem 1.2rem; } }

.watermark {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--warn); border: 1px dashed var(--warn); border-radius: 2px;
  padding: .3rem .6rem; display: inline-block; margin-bottom: 1rem;
}

/* ---------- Auftragsanzeige ---------- */

.job {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  font-size: .9rem; color: var(--fg-muted); margin: .6rem 0;
}
.spinner {
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--accent);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 4s; } }

footer.memfoot {
  border-top: 1px solid var(--border-soft); margin-top: 3rem;
  padding: 1.6rem 0 3rem; font-size: .85rem; color: var(--fg-faint);
}
footer.memfoot .wrap { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; }
footer.memfoot a { color: var(--fg-muted); }