/* ---------------------------------------------------------------
   7 Grundregeln fuer gutes Design - Stylesheet
   Zwei Schriften, eine Akzentfarbe, viel Weissraum.
   --------------------------------------------------------------- */

:root {
  /* Regel 6: genau EINE Akzentfarbe, der Rest ist neutral. */
  --akzent:      #4a7c59;
  --ueberschrift: #8a7361;
  --eyebrow:     #6d9b76;
  --text:        #6b5d52;
  --text-leise:  #7d7268;
  --linie:       #e3e5e9;
  --flaeche:     #f6f7f9;
  --hintergrund: #ffffff;

  /* Regel 4: genau ZWEI Schriften. */
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

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

body {
  margin: 0;
  padding: 0 1.5rem;
  background: var(--hintergrund);
  color: var(--text);
  font-family: var(--sans);
  /* Regel 7: mindestens 16px, grosszuegige Zeilenhoehe. */
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

/* Regel 7: Zeilenlaenge begrenzen. Regel 5: gemeinsamer linker Rand. */
.intro, main, footer {
  max-width: 34rem;
  margin-inline: auto;
}

/* --- Kopfbereich ------------------------------------------------ */

.intro { padding: 5rem 0 3.5rem; }

.kicker {
  margin: 0 0 1.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eyebrow);
}

h1 {
  font-family: var(--sans);
  color: var(--ueberschrift);
  font-size: clamp(2rem, 7vw, 2.75rem);
  line-height: 1.2;
  font-weight: 400;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}

.lead {
  margin: 0;
  font-size: 1.1875rem;
  color: var(--text-leise);
}

/* --- Die Regeln ------------------------------------------------- */

.regel {
  /* Regel 2: Weissraum trennt, was nicht zusammengehoert. */
  padding: 3.5rem 0;
  border-top: 1px solid var(--linie);
}

.nummer {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eyebrow);
}

/* Regel 3: Hierarchie durch Groesse, nicht durch Farbe. */
h2 {
  font-family: var(--sans);
  color: var(--ueberschrift);
  font-size: 1.625rem;
  line-height: 1.3;
  font-weight: 400;
  margin: 0 0 1rem;
}

.regel > p { margin: 0 0 1.75rem; }

a {
  color: var(--akzent);
  text-underline-offset: 0.2em;
}

/* --- Beispielkaesten -------------------------------------------- */

.beispiel {
  background: var(--flaeche);
  border-radius: 10px;
  padding: 1.5rem;
  font-size: 0.9375rem;
}

.beispiel > :first-child { margin-top: 0; }
.beispiel > :last-child  { margin-bottom: 0; }
.beispiel p { margin: 0 0 0.75rem; }

/* Regel 1 - Kontrast */
.demo-schlecht { color: #b9bcc2; }
.demo-gut      { color: var(--text); }

/* Regel 2 - Weissraum */
.demo-eng, .demo-luftig {
  background: var(--hintergrund);
  border-radius: 6px;
  margin-bottom: 0.75rem;
  display: flex;
  flex-direction: column;
}
.demo-eng    { padding: 0.25rem; gap: 0; line-height: 1.25; }
.demo-luftig { padding: 1.25rem; gap: 0.5rem; margin-bottom: 0; }

/* Regel 3 - Hierarchie */
.demo-h1 { font-family: var(--serif); color: var(--ueberschrift); font-size: 1.5rem; line-height: 1.3; }
.demo-h2 { font-weight: 600; }
.demo-h3 { color: var(--text-leise); font-size: 0.875rem; margin-bottom: 0; }

/* Regel 4 - Zwei Schriften */
.demo-serif { font-family: var(--serif); font-size: 1.25rem; }
.demo-sans  { font-family: var(--sans); margin-bottom: 0; }

/* Regel 5 - Ausrichtung */
.demo-krumm, .demo-gerade {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: var(--hintergrund);
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 0.75rem;
}
.demo-gerade { margin-bottom: 0; }
.demo-krumm span:nth-child(2) { margin-left: 1.5rem; }
.demo-krumm span:nth-child(3) { margin-left: 0.6rem; }

/* Regel 7 - Lesbarkeit */
.demo-lang { max-width: none; color: var(--text-leise); }
.demo-kurz { max-width: 22rem; margin-bottom: 0; }

/* --- Fuss -------------------------------------------------------- */

footer {
  border-top: 1px solid var(--linie);
  padding: 2.5rem 0 4rem;
  color: var(--text-leise);
  font-size: 0.875rem;
}
footer p { margin: 0; }

/* --- Dunkler Modus: Regel 1 gilt auch nachts --------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    --akzent:      #9dc49a;
    --ueberschrift: #d8c3ac;
    --eyebrow:     #b8d9b4;
    --text:        #ddd0c4;
    --text-leise:  #ab9e91;
    --linie:       #2c2f36;
    --flaeche:     #191b1f;
    --hintergrund: #111214;
  }
  .demo-schlecht { color: #4a4e56; }
  .demo-eng, .demo-luftig, .demo-krumm, .demo-gerade { background: #101114; }
}

/* --- Handy ------------------------------------------------------- */

@media (max-width: 30rem) {
  .intro { padding: 3rem 0 2.5rem; }
  .regel { padding: 2.5rem 0; }
  .beispiel { padding: 1.25rem; }
}