/*
 * Kontaktsammler Sindy Tarkotta, gemeinsames Stylesheet
 *
 * Werte abgenommen von sindytarkotta.com (Live-Messung der Computed Styles):
 *   Ueberschriften  Manrope 500, letter-spacing -0.02em, Titel-Case, kein Uppercase
 *   Fliesstext      Poppins 400, 16px, Zeilenhoehe 1.5
 *   Grundflaeche    #F5F5F5, Text #000, Linien und Inaktiv #D9D9D9
 *   Schaltflaeche   Pille (radius 300px), 3px Rahmen, transparent, Label in Grossbuchstaben
 *
 * Eine Abweichung, bewusst: der Absende-Knopf ist gefuellt schwarz. Die Website
 * kennt nur Outline-Pillen, in einem Formular braucht die eine echte Aktion aber
 * mehr Gewicht als die Nebenwege. Alles andere folgt der Website.
 *
 * WICHTIG bei Werkfotos: nie beschneiden, nie verzerren. Jedes Foto steht in
 * seinem eigenen Seitenverhaeltnis (width 100%, height auto). Kein object-fit,
 * kein aspect-ratio, keine feste Hoehe. Hoch- und Querformat sehen deshalb
 * unterschiedlich hoch aus, und genau so soll es sein.
 *
 * Schriften liegen lokal in fonts/, es gibt keine externe Anfrage.
 */

@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/fonts/poppins-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/fonts/poppins-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  --grund: #F5F5F5;
  --flaeche: #FFFFFF;
  --tinte: #000000;
  --tinte-weich: #4A4A4A;
  --linie: #D9D9D9;
  --text: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --titel: "Manrope", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  font-family: var(--titel);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
}

p { margin: 0; }

/* Mobil zuerst. Die Seite wird am Handy vor einem Bild geoeffnet, alles andere
   ist Zweitfall, deshalb eine schmale Spalte statt eines Rasters. */
.blatt {
  max-width: 460px;
  margin: 0 auto;
  padding: 0 22px 56px;
}

/* Wortmarke. Steht hier als Text, im Echtbetrieb kommt Sindys Logodatei hinein. */
.marke {
  font-family: var(--titel);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-align: center;
  padding: 26px 0 22px;
  color: var(--tinte);
  text-decoration: none;
  display: block;
}

.oberzeile {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--tinte-weich);
  text-transform: uppercase;
}

/* Das Werkfoto. Keine feste Hoehe, kein Zuschnitt. */
.werkbild {
  display: block;
  width: 100%;
  height: auto;
}

.werkkopf { margin-top: 18px; }
.werkkopf h1 { font-size: 34px; margin-top: 6px; }

.seitentitel { font-size: 34px; margin-top: 8px; }

.einleitung {
  color: var(--tinte-weich);
  margin-top: 12px;
}

/* Sindys Text zum Werk. Etwas groesser als die Werkdaten, er will gelesen
   werden, nicht ueberflogen. */
.beschreibung {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinte);
  white-space: pre-line;
}

.werkdaten {
  font-size: 14px;
  color: var(--tinte-weich);
  margin-top: 10px;
}

.trenner {
  height: 1px;
  background: var(--linie);
  border: 0;
  margin: 32px 0;
}

/* Formular */
.frage {
  font-family: var(--titel);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.beiwort {
  font-size: 14px;
  color: var(--tinte-weich);
  margin-bottom: 14px;
}

.feldgruppe { margin-bottom: 26px; }

label.etikett {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--tinte-weich);
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  font-family: var(--text);
  font-size: 16px; /* darunter zoomt iOS beim Fokus hinein */
  color: var(--tinte);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 13px 14px;
  min-height: 50px;
}

textarea {
  min-height: 116px;
  resize: vertical;
  line-height: 1.5;
}

input::placeholder, textarea::placeholder { color: #6B6B6B; }

input:focus, textarea:focus {
  outline: none;
  border-color: var(--tinte);
}

/* Antippbare Begriffe statt Sternebewertung. Kunst laesst sich nicht von eins
   bis fuenf benoten, eine Empfindung anzutippen kostet dagegen eine Sekunde. */
.worte {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.wort input { position: absolute; opacity: 0; pointer-events: none; }

.wort span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--linie);
  border-radius: 300px;
  background: var(--flaeche);
  font-size: 15px;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}

.wort input:checked + span {
  border-color: var(--tinte);
  background: var(--tinte);
  color: var(--grund);
}

.wort input:focus-visible + span {
  outline: 2px solid var(--tinte);
  outline-offset: 2px;
}

/* Werkauswahl auf der Eingangsseite.
   Zwei Spalten im Mauerwerk-Umbruch: die Fotos behalten ihr eigenes Format,
   Hochformate werden hoch, Querformate breit. Ein Raster mit fester Zellhoehe
   wuerde beschneiden, genau das soll nicht passieren. */
.werke {
  column-count: 2;
  column-gap: 12px;
}

.werkwahl {
  display: block;
  break-inside: avoid;
  margin-bottom: 14px;
}

.werkwahl input { position: absolute; opacity: 0; pointer-events: none; }

.werkwahl figure {
  margin: 0;
  cursor: pointer;
}

.werkwahl img {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid transparent;
  transition: border-color .12s ease;
}

.werkwahl figcaption {
  font-family: var(--titel);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  margin-top: 7px;
  color: var(--tinte-weich);
}

.werkwahl input:checked + figure img { border-color: var(--tinte); }
.werkwahl input:checked + figure figcaption { color: var(--tinte); }
.werkwahl input:focus-visible + figure img { outline: 2px solid var(--tinte); outline-offset: 2px; }

/* Einwilligungen. Bewusst nicht vorausgewaehlt, sonst ist die Einwilligung keine. */
.haken {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 0;
  cursor: pointer;
  font-size: 14.5px;
  line-height: 1.45;
}

.haken input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--tinte);
}

/* Schaltflaechen */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 0 28px;
  border: 3px solid var(--tinte);
  border-radius: 300px;
  background: var(--tinte);
  color: var(--grund);
  font-family: var(--text);
  font-size: 15px;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: opacity .12s ease;
}
.knopf:hover { opacity: .85; }
.knopf:active { transform: translateY(1px); }

.knopf-rand {
  background: transparent;
  color: var(--tinte);
}

.fussleiste { margin-top: 26px; }

.fussnote {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--tinte-weich);
  margin-top: 14px;
}

.fussnote a { color: var(--tinte-weich); }

.hinweis {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 18px 20px;
}

.hinweis-titel {
  font-family: var(--titel);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.hinweis-text {
  font-size: 14.5px;
  color: var(--tinte-weich);
  margin-top: 4px;
}

.hinweis-aktion { margin-top: 16px; }

.fehler {
  border-left: 3px solid var(--tinte);
  background: var(--flaeche);
  padding: 12px 14px;
  font-size: 14.5px;
  margin-bottom: 18px;
}

[hidden] { display: none !important; }

/* Dankeseite */
.danke { text-align: center; padding-top: 8px; }
.danke h1 { font-size: 30px; margin-bottom: 14px; }
.danke p { color: var(--tinte-weich); }
.danke .hinweis-links { text-align: left; margin-top: 26px; }

@media (min-width: 620px) {
  .blatt { max-width: 520px; }
  .frage { font-size: 22px; }
}

/* Honigtopf: fuer Menschen ausserhalb des Sichtfelds, fuer Bots ein normales
   Feld. Kein display:none, das erkennen die einfachen Skripte sofort. */
.honig {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}