/* pohlers-nickel.de – Platzhalter. Farben aus luzula.de (Olivgrün). */

:root {
  --tinte: #23261d;
  --leise: #6d7164;
  --linie: #e5e6dd;
  --grund: #f8f9f3;
  --karte: #ffffff;
  --link: #47591f;
  --knopf: #556b2f;
  --knopf-hover: #3b4a1f;
  --knopf-text: #ffffff;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinte: #e9eadf;
    --leise: #a9ad9f;
    --linie: #3a3d33;
    --grund: #16180f;
    --karte: #1f2217;
    --link: #b5d27a;
    --knopf: #556b2f;
    --knopf-hover: #6b8e23;
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 2rem 1rem;
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--tinte);
  background: var(--grund);
}

.karte {
  width: 100%;
  max-width: 34rem;
  padding: 2rem 1.75rem;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 14px;
}

h1 {
  margin: 0 0 .75rem;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);
  line-height: 1.2;
}

h2 {
  margin: 0 0 .5rem;
  font-size: 1.1rem;
  line-height: 1.35;
}

p { margin: 0 0 1rem; }

a { color: var(--link); }

.leise {
  color: var(--leise);
  font-size: .95rem;
}

.knopf {
  display: inline-block;
  padding: .7rem 1.2rem;
  border: 1px solid var(--knopf);
  border-radius: 10px;
  background: var(--knopf);
  color: var(--knopf-text);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.knopf.zweitrangig {
  background: transparent;
  color: var(--link);
  border-color: currentColor;
}

.knopf:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 2px;
}

.knopf:disabled {
  opacity: .6;
  cursor: progress;
}

/* Nur mit Maus: Auf dem Tablet bliebe der Hover-Zustand nach dem Antippen stehen. */
@media (hover: hover) {
  .knopf:hover:not(:disabled) {
    background: var(--knopf-hover);
    border-color: var(--knopf-hover);
    color: var(--knopf-text);
  }
}

.daten {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
}

.stand {
  margin-top: .75rem;
  font-size: .95rem;
}

.stand p { margin: 0 0 .5rem; }

footer {
  display: flex;
  gap: 1.25rem;
  font-size: .9rem;
}

footer a { color: var(--leise); }