/* ============================================================
   mathi — Bestätigungsseite
   Eng an der Bestätigungsmail (Brevo-Template #52): Navy-Rahmen,
   Minze-Karte, Times-Headline, Georgia-Text, Verdana-Captions.
   Bewusst keine Webfonts (Keroine hat kein Webfont-Recht) —
   dieselben Systemschriften wie in der Mail.
   Genau zwei Farben, keine Rundungen, keine Schatten.
   ============================================================ */

:root {
  --navy:  #00003C;
  --minze: #B9D2D2;
  --serif-head: 'Times New Roman', Times, serif;
  --serif-text: Georgia, serif;
  --caption:    Verdana, Geneva, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--navy);
  color: var(--navy);
}

body {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px;
}

.karte {
  width: 100%;
  max-width: 600px;
  background: var(--minze);
  text-align: center;
}

.kopf,
.titel,
.text {
  border-bottom: 1px solid var(--navy);
}

.kopf { padding: 32px 24px 24px; }
.kopf img { display: block; margin: 0 auto; width: 108px; height: auto; }

.titel { padding: 32px 32px 24px; }

.caption {
  margin: 0;
  font-family: var(--caption);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

h1 {
  margin: 12px 0 0;
  font-family: var(--serif-head);
  font-weight: normal;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.025em;
}

.text {
  padding: 32px 40px 36px;
  font-family: var(--serif-text);
  font-size: 18px;
  line-height: 1.4;
}

.text p { margin: 0; }

.knopf {
  display: inline-block;
  margin: 28px 0;
  padding: 12px 24px;
  background: var(--navy);
  color: var(--minze);
  font-family: var(--serif-text);
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
}
.knopf:hover,
.knopf:focus-visible { text-decoration: underline; }

.gruss em { font-style: italic; }

.fuss {
  padding: 24px 32px 32px;
  font-family: var(--caption);
  font-size: 10px;
  line-height: 1.6;
}
.fuss p { margin: 0 0 8px; }
.fuss p:last-child { margin-bottom: 0; }
.fuss a { color: var(--navy); }

@media (max-width: 480px) {
  h1 { font-size: 36px; }
  .text { padding: 28px 24px 32px; }
}