/* European Matcha Guide – dieselben Farben wie die App. */
:root {
  --grund: #F7F7F2;
  --flaeche: #FFFFFF;
  --tinte: #1F2A24;
  --tinte-sanft: #5C6B62;
  --matcha: #62806A;
  --kante: #E3E5DF;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.seite { max-width: 640px; margin: 0 auto; padding: 40px 24px 80px; }

/* Der Schriftzug: groß, weit gesperrt – wie in der App. */
.wortmarke {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--tinte);
  text-decoration: none;
}
.wortmarke span { color: var(--matcha); }

header { display: flex; align-items: center; gap: 12px; margin-bottom: 56px; }
header img.logo { width: auto; height: 34px; border-radius: 0; }

h1 { font-size: 34px; line-height: 1.2; margin: 0 0 16px; letter-spacing: -.02em; }
h2 { font-size: 20px; line-height: 1.3; margin: 40px 0 8px; }
p { margin: 0 0 16px; }
a { color: var(--matcha); }

.vorspann { font-size: 20px; color: var(--tinte-sanft); margin-bottom: 32px; }

.karte {
  background: var(--flaeche);
  border: 1px solid var(--kante);
  border-radius: 16px;
  padding: 24px;
  margin: 32px 0;
}

.liste { list-style: none; padding: 0; margin: 0; }
.liste li { padding: 10px 0; border-bottom: 1px solid var(--kante); }
.liste li:last-child { border-bottom: 0; }

.bald {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--matcha);
  color: #fff;
}

.offen { background: #FFF3CD; padding: 2px 6px; border-radius: 4px; }

footer {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--kante);
  font-size: 14px;
  color: var(--tinte-sanft);
}
footer a { margin-right: 16px; }

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #141815;
    --flaeche: #1B211D;
    --tinte: #EDF0EC;
    --tinte-sanft: #9AA79F;
    --kante: #2B332D;
  }
  .bald { background: var(--matcha); }
  .offen { background: #4A3F1E; }
}

.formular { display: flex; flex-direction: column; gap: 6px; }
.formular label { font-weight: 500; margin-top: 10px; }
.formular input, .formular textarea {
  font: inherit; color: var(--tinte); background: var(--grund);
  border: 1px solid var(--kante); border-radius: 10px; padding: 10px 12px;
  width: 100%; box-sizing: border-box;
}
.formular textarea { resize: vertical; }
.formular input:focus, .formular textarea:focus { outline: 2px solid var(--matcha); border-color: transparent; }
.formular button {
  font: inherit; font-weight: 500; color: #fff; background: var(--matcha);
  border: 0; border-radius: 999px; padding: 12px 24px; margin-top: 12px;
  align-self: flex-start; cursor: pointer;
}
.formular .klein { font-size: 14px; color: var(--tinte-sanft); margin: 8px 0 0; }
.versteckt { position: absolute; left: -9999px; }