/* NCD Kontaktseite — Designsystem nach 00 Kontext/Branding.md
   Mobile first. Alles darüber ist nur mehr Weißraum.

   Die Schriften liegen auf unserem eigenen Server. Von Google geladen
   würden sie die IP jedes Besuchers an Google übertragen, und genau das
   soll eine Seite nicht tun, die als Arbeitsprobe dient.
   Erzeugt mit build_fonts.py, auf den lateinischen Zeichenvorrat
   reduziert, zusammen 35 kB. */

@font-face {
  font-family: "Noto Serif";
  src: url("/fonts/NotoSerif-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("/fonts/Manrope-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("/fonts/Manrope-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: #1a1a1a;
  --gold: #b4a078;
  --paper: #f5f2ed;
  --line: #302d29;
  --muted: #8f8a82;

  --serif: "Noto Serif", Georgia, "Times New Roman", serif;
  --sans: "Manrope", "Helvetica Neue", Arial, sans-serif;

  --gap: 1.5rem;
  --radius: 2px;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--black);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding:
    calc(env(safe-area-inset-top) + 2.75rem)
    calc(env(safe-area-inset-right) + 1.5rem)
    calc(env(safe-area-inset-bottom) + 2.5rem)
    calc(env(safe-area-inset-left) + 1.5rem);
}

main {
  max-width: 26rem;
  margin: 0 auto;
}

/* ---------- Wortmarke ---------- */

.mark {
  text-align: center;
  margin-bottom: 2.75rem;
}

.mark__ring {
  width: 46px;
  height: 46px;
  margin: 0 auto 1.35rem;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
}

.mark__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.28rem;
  letter-spacing: 0.2em;
  /* letter-spacing hängt rechts an, das schiebt die Zeile aus der Mitte */
  text-indent: 0.2em;
  margin: 0;
  color: var(--paper);
}

.mark__rule {
  height: 1px;
  background: var(--gold);
  margin: 0.85rem auto;
  max-width: 15rem;
}

.mark__sub {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  color: var(--gold);
  margin: 0;
}

/* ---------- Person ---------- */

.person {
  text-align: center;
  margin-bottom: 2.5rem;
}

.person__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.35rem;
  margin: 0 0 0.3rem;
}

.person__role {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
}

/* ---------- Aktionen ---------- */

.actions {
  display: grid;
  gap: 0.75rem;
}

.action {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  min-height: 62px;
  padding: 0 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--paper);
  font: inherit;
  font-size: 1rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.action:active {
  background: #222020;
}

.action--primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
}

.action--primary:active {
  background: #c2af8a;
}

.action__icon {
  flex: 0 0 22px;
  height: 22px;
  stroke: var(--gold);
  stroke-width: 1.25;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.action--primary .action__icon {
  stroke: var(--black);
}

.action__text {
  flex: 1;
}

.action__label {
  display: block;
}

.action__hint {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.35;
}

.action--primary .action__hint {
  color: #5c5340;
}

.action__chevron {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 1.25px solid currentColor;
  border-bottom: 1.25px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.45;
}

.action[aria-expanded="true"] .action__chevron {
  transform: rotate(45deg);
  opacity: 0.8;
}

/* ---------- Formular ---------- */

.ticket {
  margin-top: 0.75rem;
  padding: 1.35rem 1.15rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.ticket[hidden] {
  display: none;
}

.field {
  margin-bottom: 1.35rem;
}

.field:last-of-type {
  margin-bottom: 1.6rem;
}

.field__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.55rem;
}

.field__note {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0.45rem 0 0;
}

input[type="text"],
input[type="tel"],
input[type="email"],
textarea {
  width: 100%;
  padding: 0.8rem 0.85rem;
  background: #131313;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--paper);
  font: inherit;
  font-size: 1rem; /* unter 16px zoomt iOS beim Fokus hinein */
}

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

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

input::placeholder,
textarea::placeholder {
  color: #5b5751;
}

/* Auswahl als Chips, statt Radiobuttons zum Zielen.
   Spalten statt Umbruch: eine Zeile pro Frage bleibt scanbar. */
.chips {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.5rem;
}

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

.chip span {
  display: block;
  min-height: 46px;
  padding: 0.7rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.25;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.chip input:checked + span {
  border-color: var(--gold);
  color: var(--paper);
}

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

.submit {
  width: 100%;
  min-height: 58px;
  border: none;
  border-radius: var(--radius);
  background: var(--gold);
  color: var(--black);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.submit:active {
  background: #c2af8a;
}

.submit:disabled {
  opacity: 0.55;
  cursor: default;
}

.status {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: var(--gold);
}

.status[hidden] {
  display: none;
}

/* Bestätigung nach dem Absenden. Ein Haken im Goldring, damit der Klick
   sichtbar quittiert wird. */

.erfolg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0.5rem 0;
  text-align: center;
}

.erfolg .status {
  margin: 0;
}

.erfolg__haken {
  width: 44px;
  height: 44px;
  stroke: var(--gold);
  stroke-width: 1.25;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Bewusst ohne Animation. Eine gezeichnete Variante friert im gedrosselten
   Tab im ersten Frame ein, und dann steht die Bestätigung ohne Haken da.
   Am 12.09.2026 genau so gemessen: Ring auf Deckkraft 0, Strich voll
   versetzt, beides dauerhaft. Ein Haken, der immer da ist, ist mehr wert
   als einer, der sich hübsch aufbaut. */

.erfolg__haken circle,
.erfolg__haken path {
  vector-effect: non-scaling-stroke;
}

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

.secondary {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.75rem;
}

.secondary a {
  color: var(--muted);
  font-size: 0.8rem;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}

.secondary a:active {
  color: var(--paper);
}

.foot {
  margin-top: 3rem;
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: #4f4b45;
}

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

/* Ab Tablet nur mehr Luft, kein anderes Layout */
@media (min-width: 40rem) {
  body {
    padding-top: 4.5rem;
  }

  .mark {
    margin-bottom: 3.25rem;
  }
}