/* Kontaktformular (öffentlich, Entwurf 3 "zweispaltig") und Nachrichten (Verwaltung).
   Links Bildfläche und kurzer Text, rechts das Formular im Holz-Gold-Rahmen. Keine Animationen, Hover nur Farbe. */
.kontakt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  max-width: 68rem;
  margin: 0 auto;
}
/* Bild der Hauptfigur (Dia): ohne Rahmen, leicht schräg, statisch */
.kontakt__bild {
  max-width: 30rem;
  margin: var(--space-sm) 0 var(--space-lg);
  transform: rotate(-3deg);
}
.kontakt__bild img {
  display: block;
  width: 100%;
  height: auto;
}
.kontakt__titel {
  margin: 0 0 var(--space-md);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: 0.05em;
  color: var(--color-primary-light);
  text-shadow: 4px 4px 0 var(--frame-dark);
  overflow-wrap: anywhere;
}
.kontakt-einleitung {
  margin: 0 0 var(--space-lg);
  font-size: clamp(1.0625rem, 2vw, 1.175rem);
  color: var(--color-text-muted);
}
.kontakt-discord {
  margin: 0 0 var(--space-lg);
  color: var(--color-text-muted);
}
.kontakt-zurueck a {
  color: var(--color-primary);
}
.kontakt-formular {
  display: grid;
  gap: var(--space-lg);
  padding: clamp(1.25rem, 4vw, 2.25rem);
  border: 3px solid var(--frame-dark);
  background: var(--color-surface);
}
.kontakt-meldung {
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  border: 2px solid var(--color-primary);
  font-weight: 600;
}
.kontakt-feld {
  display: grid;
  gap: 0.35rem;
}
.kontakt-feld label {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-text);
}
.kontakt-feld input,
.kontakt-feld textarea {
  display: block;
  width: 100%;
  padding: 0.8rem 1rem;
  font: inherit;
  color: var(--color-text);
  background: var(--color-bg-deep);
  border: 3px solid var(--frame-mid);
  border-radius: 0;
}
.kontakt-feld textarea {
  resize: vertical;
}
.kontakt-feld input:focus,
.kontakt-feld textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}
.kontakt-feld--fehler input,
.kontakt-feld--fehler textarea {
  border-color: var(--color-primary-light);
}
.kontakt-hinweis {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.kontakt-hinweis--rechts {
  text-align: right;
}
.kontakt-fehler {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary-light);
}
/* Honeypot: für Menschen unsichtbar, für Screenreader per aria-hidden ausgeblendet */
.kontakt-honig {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.kontakt-pruefung {
  min-height: 65px; /* Platz für das Turnstile-Widget, damit nichts springt */
}
.kontakt-pruefung-aus {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.kontakt-datenschutz {
  margin: calc(var(--space-sm) * -1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.kontakt-datenschutz a {
  color: var(--color-primary);
}
.kontakt-senden {
  justify-self: stretch;
  padding: 0.9rem 2rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--color-bg);
  background: var(--color-primary);
  border: 3px solid var(--frame-dark);
  box-shadow: 4px 4px 0 var(--color-bg-deep);
  cursor: pointer;
}
.kontakt-senden:hover {
  background: var(--color-primary-light);
}

/* Danke-Seite */
.kontakt__untertitel {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary-light);
}
.kontakt-weiter {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
.kontakt-weiter a {
  display: grid;
  gap: 0.15rem;
  padding: var(--space-md);
  border: 3px solid var(--frame-mid);
  background: var(--color-bg-deep);
  color: var(--color-text);
  text-decoration: none;
}
.kontakt-weiter a:hover {
  border-color: var(--frame-light);
}
.kontakt-weiter strong {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--color-primary-light);
}
.kontakt-weiter strong::after {
  content: " \25B6";
  font-size: 0.7em;
}
.kontakt-weiter span {
  color: var(--color-text-muted);
}

/* Mobil: einspaltig */
@media (max-width: 860px) {
  .kontakt {
    grid-template-columns: 1fr;
  }
  .kontakt__bild {
    max-width: 20rem;
    margin: 0 auto var(--space-lg);
    transform: rotate(-1.5deg);
  }
}

/* Verwaltung: Nachrichten */
.nachrichten-tabelle {
  width: 100%;
  border-collapse: collapse;
}
.nachrichten-tabelle th,
.nachrichten-tabelle td {
  padding: 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--frame-mid);
  vertical-align: top;
}
/* Postfach: ungelesen fett, gelesen normal; Betreff = erste Zeile der Nachricht */
.nachrichten-tabelle__zeile--ungelesen td {
  font-weight: 700;
  color: var(--color-text);
}
.nachrichten-tabelle__zeile--gelesen td {
  font-weight: 400;
  color: var(--color-text-muted);
}
.nachrichten-tabelle a {
  color: inherit;
}
.nachrichten-tabelle__betreff {
  display: block;
  overflow-wrap: anywhere;
}
.nachrichten-tabelle__bereich {
  display: block;
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.nachrichten-neu {
  display: inline-block;
  padding: 0 0.35rem;
  font-size: var(--text-sm);
  color: var(--color-bg-deep);
  background: var(--color-primary);
}
.nachrichten-status {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  font-size: var(--text-sm);
  border: 1px solid currentColor;
}
.nachrichten-status--offen {
  color: var(--color-primary-light);
}
.nachrichten-status--erledigt {
  color: var(--color-text-muted);
}
.nachrichten-daten {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem var(--space-md);
  margin-bottom: var(--space-lg);
}
.nachrichten-daten dt {
  font-weight: 600;
}
.nachrichten-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: var(--space-md);
  background: var(--color-surface);
  margin-bottom: var(--space-lg);
}
.nachrichten-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
/* Postfach auf dem Handy: jede Nachricht als Block (Absender und Status oben, darunter Betreff, Bereich, Datum) */
@media (max-width: 640px) {
  .nachrichten-tabelle thead {
    display: none;
  }
  .nachrichten-tabelle tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem var(--space-sm);
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--frame-mid);
  }
  .nachrichten-tabelle td {
    padding: 0;
    border-bottom: 0;
  }
  .nachrichten-tabelle td:nth-child(2),
  .nachrichten-tabelle td:nth-child(3) {
    grid-column: 1 / -1;
  }
  .nachrichten-tabelle td:nth-child(3) {
    grid-row: 3;
    font-size: var(--text-sm);
  }
  .nachrichten-tabelle td:nth-child(4) {
    grid-column: 2;
    grid-row: 1;
  }
  .nachrichten-tabelle__betreff {
    overflow-wrap: break-word;
  }
}

/* Postfach: Seiten zu je 200 */
.nachrichten-seiten {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}