/* Freundebuch St. Theresia – Formular
   Idee: Kästchenpapier als Untergrund, ein weißes Blatt darauf,
   das Foto wird wie im echten Freundebuch als Polaroid eingeklebt. */

:root {
  --papier: #f3f6fa;
  --kaestchen: rgba(30, 111, 217, 0.08);
  --tinte: #1f2a44;
  --tinte-leise: #5b6780;
  --rand: #c9d2e0;
  --blau: #1e6fd9;
  --rot: #d7263d;
  --sonne: #ffc93c;
  --fehler: #a8201a;
  --weiss: #ffffff;

  --schrift-hand: 'Grandstander', 'Comic Sans MS', system-ui, sans-serif;
  --schrift-text: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--tinte);
  font: 1.0625rem/1.55 var(--schrift-text);
  background-color: var(--papier);
  background-image:
    linear-gradient(var(--kaestchen) 1px, transparent 1px),
    linear-gradient(90deg, var(--kaestchen) 1px, transparent 1px);
  background-size: 22px 22px;
}

.seite {
  max-width: 42rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) 1rem 3rem;
}

/* ---- Kopf ---------------------------------------------------------------- */

.kopf { padding: 0 0.25rem; }

h1 {
  font-family: var(--schrift-hand);
  font-weight: 600;
  font-size: clamp(2.1rem, 7.5vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

.kopf p {
  margin: 0 0 0.75rem;
  max-width: 36rem;
}

/* ---- Blatt ---------------------------------------------------------------- */

.blatt {
  background: var(--weiss);
  border: 1px solid #dfe5ee;
  border-radius: 6px;
  padding: clamp(1.25rem, 5vw, 2.5rem);
  margin-top: 2rem;
  box-shadow: 0 1px 2px rgba(31, 42, 68, 0.06), 0 18px 40px -24px rgba(31, 42, 68, 0.35);
}

/* ---- Felder --------------------------------------------------------------- */

.feld {
  margin: 0 0 2rem;
  padding: 0;
  border: 0;
  min-width: 0;
}

.feld > label,
.feld > legend,
.feldname {
  display: block;
  font-weight: 700;
  margin: 0 0 0.4rem;
  padding: 0;
}

.optional { font-weight: 400; color: var(--tinte-leise); }

.hinweis {
  margin: -0.15rem 0 0.6rem;
  color: var(--tinte-leise);
  font-size: 0.95rem;
}

input[type='email'],
input[type='text'],
input[type='tel'],
input[type='date'],
textarea {
  display: block;
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--weiss);
  border: 2px solid var(--rand);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  min-height: 3rem;
}

textarea { resize: vertical; min-height: 7.5rem; }

.feld--schmal input { max-width: 14rem; }

input:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(30, 111, 217, 0.28);
  outline-offset: 0;
  border-color: var(--blau);
}

[aria-invalid='true'] { border-color: var(--fehler); }

.fehler {
  margin: 0.45rem 0 0;
  color: var(--fehler);
  font-weight: 700;
  font-size: 0.95rem;
}
.fehler:empty { display: none; }

.zaehler {
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
  color: var(--tinte-leise);
  text-align: right;
}
.zaehler--zuviel { color: var(--fehler); font-weight: 700; }

/* ---- Auswahl-Chips (Radio-Buttons) ---------------------------------------- */

.auswahl {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.auswahl input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.feld .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 3rem;
  margin: 0;
  padding: 0.55rem 1.15rem;
  background: var(--weiss);
  border: 2px solid var(--rand);
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.chip:hover { border-color: var(--tinte-leise); }

.auswahl input:checked + .chip {
  background: var(--tinte);
  border-color: var(--tinte);
  color: var(--weiss);
}

.auswahl input:focus-visible + .chip {
  outline: 3px solid var(--sonne);
  outline-offset: 2px;
}

.auswahl input[aria-invalid='true'] + .chip { border-color: var(--fehler); }

/* Gruppe: die Farben der Gruppen selbst */
.auswahl--gruppe .chip {
  min-height: 3.5rem;
  min-width: 8.5rem;
  padding: 0.7rem 1.5rem 0.7rem 1.1rem;
  font-size: 1.15rem;
}

.chip--blau::before,
.chip--rot::before {
  content: '';
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--blau);
}
.chip--rot::before { background: var(--rot); }

.auswahl input:checked + .chip--blau { background: var(--blau); border-color: var(--blau); }
.auswahl input:checked + .chip--rot { background: var(--rot); border-color: var(--rot); }
.auswahl input:checked + .chip--blau::before,
.auswahl input:checked + .chip--rot::before { background: var(--weiss); }

/* Alter: runde Zahlen */
.auswahl--alter .chip {
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border-radius: 50%;
  font-family: var(--schrift-hand);
  font-weight: 600;
  font-size: 1.35rem;
}

.auswahl--liste { flex-direction: column; align-items: flex-start; }

.feld--telefon { margin: 1.25rem 0 0; max-width: 20rem; }

/* ---- Foto als Polaroid ----------------------------------------------------- */

.unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.foto {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 1.75rem;
  align-items: center;
  padding-top: 0.75rem;
}

.polaroid {
  position: relative;
  display: block;
  background: var(--weiss);
  padding: 0.7rem 0.7rem 0;
  border: 1px solid #e3e8f0;
  box-shadow: 0 1px 2px rgba(31, 42, 68, 0.12), 0 14px 26px -16px rgba(31, 42, 68, 0.55);
  transform: rotate(-2.5deg);
  transition: transform 0.2s ease;
}

label.polaroid { cursor: pointer; margin: 0; font-weight: 400; }
label.polaroid:hover { transform: rotate(-1deg); }

.unsichtbar:focus-visible + .polaroid {
  outline: 3px solid var(--sonne);
  outline-offset: 5px;
}

.polaroid__klebeband {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  width: 5.75rem;
  height: 1.6rem;
  transform: translateX(-50%) rotate(4deg);
  background: rgba(255, 201, 60, 0.82);
  clip-path: polygon(0 8%, 4% 0, 96% 0, 100% 12%, 97% 30%, 100% 50%, 97% 70%, 100% 88%, 96% 100%, 4% 100%, 0 90%, 3% 70%, 0 50%, 3% 30%);
}

.polaroid__bild {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #eef2f8;
  border: 2px dashed #b3c0d4;
  color: var(--tinte-leise);
  text-align: center;
}

.polaroid--voll .polaroid__bild { border: 0; background: #e9edf3; }

.polaroid__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.polaroid__leer {
  font-family: var(--schrift-hand);
  font-size: 1.05rem;
  line-height: 1.25;
  padding: 1rem;
}

.polaroid__name {
  display: block;
  min-height: 3.1rem;
  padding: 0.6rem 0.25rem 0.8rem;
  font-family: var(--schrift-hand);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
}
.polaroid__name--leer { color: #a3aec0; font-weight: 400; }

.foto__text .hinweis { margin-top: 0; }
.foto__text .button { margin-top: 0.25rem; }

/* ---- Einwilligung ---------------------------------------------------------- */

.feld--haken {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.8rem;
  align-items: start;
  padding: 1rem 1.1rem;
  background: #f7f9fc;
  border-radius: 10px;
}

.feld--haken input {
  width: 1.4rem;
  height: 1.4rem;
  margin: 0.15rem 0 0;
  accent-color: var(--tinte);
}

.feld--haken label { font-weight: 400; margin: 0; font-size: 0.97rem; }
.feld--haken .fehler { grid-column: 2; }

a { color: var(--blau); text-underline-offset: 0.15em; }
a:focus-visible { outline: 3px solid var(--sonne); outline-offset: 2px; border-radius: 2px; }

/* ---- Buttons ---------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.65rem 1.35rem;
  border: 2px solid var(--tinte);
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.button:focus-visible { outline: 3px solid var(--sonne); outline-offset: 3px; }

.button--haupt {
  width: 100%;
  min-height: 3.75rem;
  background: var(--tinte);
  color: var(--weiss);
  font-family: var(--schrift-hand);
  font-weight: 600;
  font-size: 1.35rem;
}
.button--haupt:hover { background: #2d3b5e; }
.button--haupt[disabled] { opacity: 0.65; cursor: progress; }

.feld .button--zweit,
.button--zweit {
  display: inline-flex;
  padding: 0.65rem 1.35rem;
  background: var(--weiss);
  color: var(--tinte);
  font-weight: 700;
  margin: 0;
}
.button--zweit:hover { background: #f1f4f9; }

.fortschritt {
  margin: 0.75rem 0 0;
  text-align: center;
  color: var(--tinte-leise);
}

/* ---- Meldungen -------------------------------------------------------------- */

.formstatus {
  margin: 0 0 2rem;
  padding: 0.9rem 1.1rem;
  border: 2px solid var(--fehler);
  border-radius: 10px;
  background: #fdeeec;
  color: var(--fehler);
  font-weight: 700;
}
.formstatus:focus { outline: none; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Danke ------------------------------------------------------------------ */

.danke {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 2rem;
  align-items: center;
}
.danke[hidden] { display: none; }
.danke:focus { outline: none; }

.danke h2 {
  font-family: var(--schrift-hand);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.1;
  margin: 0 0 0.75rem;
}
.danke p { margin: 0 0 1.25rem; }
.danke .hinweis { margin: 0.75rem 0 0; }

.polaroid--klein { transform: rotate(3deg); }

@media (prefers-reduced-motion: no-preference) {
  .danke:not([hidden]) .polaroid--klein { animation: einkleben 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
}

@keyframes einkleben {
  from { transform: translateY(-1.5rem) rotate(-6deg) scale(1.06); opacity: 0; }
  to { transform: rotate(3deg); opacity: 1; }
}

/* ---- Fuß ------------------------------------------------------------------- */

.fuss {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.95rem;
}

/* ---- Klein ------------------------------------------------------------------ */

@media (max-width: 34rem) {
  .foto { grid-template-columns: 1fr; justify-items: start; }
  .polaroid { width: min(14rem, 78%); margin-left: 0.5rem; }
  .danke { grid-template-columns: 1fr; }
  .polaroid--klein { width: 11rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- Textseiten (Datenschutz) ---------------------------------------------- */
.text h2 { font-family: var(--schrift-hand); font-weight: 600; font-size: 1.35rem; margin: 1.75rem 0 0.5rem; }
.text h2:first-of-type { margin-top: 0; }
.text p { margin: 0 0 0.75rem; max-width: 65ch; }