/* =====================================================================
   locomo – Button, Footer, Modals
   Alle Werte aus tokens.css. Regeln: Planung Abschnitte 6 und 7.
   ===================================================================== */

/* Kein Verschieben, wenn beim Öffnen eines Modals das Scrollen gesperrt wird:
   Platz für den Scrollbalken bleibt immer reserviert. */
html { scrollbar-gutter: stable; }
html.is-modal-open { overflow: hidden; }

/* ---------------------------------------------------------------------
   Button (Get in touch, Senden)
   --------------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  height: var(--button-h);
  padding: 0 var(--button-pad-x);
  border: var(--line);
  border-radius: var(--radius);
  background: transparent;
  font-family: var(--font-family);
  font-size: var(--type-button-size);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  cursor: pointer;
}
.button:hover { background: var(--color-sand); }
.button:focus-visible,
.footer-links a:focus-visible,
.footer-logo:focus-visible,
.modal-close:focus-visible,
.modal a:focus-visible,
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Abschnitte „Über mich“ und „Field work“
   Rhythmus: Überschrift → Inhalt 24 · Block → Block 48 · Section → Section 96
   --------------------------------------------------------------------- */
.section {
  margin-left: var(--content-inset);
  margin-right: var(--content-inset);
  margin-top: var(--section-gap);
}
/* Der erste Abschnitt hält den Section-Abstand zur Stage-Unterkante, nicht zum Viewport-Rand:
   unter der Stage liegen bereits --stage-bottom px Weiß. */
.section--first { margin-top: calc(var(--section-gap) - var(--stage-bottom)); }

.section-title {
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  font-weight: var(--weight-light);
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--gutter);
}

/* ---------- Über mich ---------- */
.about-portrait {
  display: block;
  width: var(--portrait-size);
  height: var(--portrait-size);
  margin: 0 auto;
}
.about .section-title { margin-top: var(--heading-gap); }
.about-cols { margin-top: var(--heading-gap); }
.intro p {
  font-size: var(--type-intro-size);
  line-height: var(--type-intro-line);
  font-weight: var(--weight-medium);
}
.intro p + p { margin-top: var(--type-intro-line); }      /* Absatz = eine Zeile */
.about-cta { margin-top: var(--block-gap); }

/* ---------- Field work ---------- */
.lead {
  margin-top: var(--heading-gap);
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-line);
}
.cards { margin-top: var(--block-gap); align-items: stretch; }
.card {
  padding: var(--card-padding);
  border-radius: var(--radius);
}
.card--streetpool { background: var(--color-streetpool); }
.card--locloy { background: var(--color-locloy); }
.card-meta {
  text-align: right;
  font-size: var(--type-meta-size);
  line-height: var(--type-meta-line);
}
.card-logo {
  margin-top: var(--heading-gap);
  height: var(--card-logo-h);
  line-height: 0;
}
.card-logo img { max-width: 100%; height: auto; }
.card-sub {
  margin-top: var(--block-gap);
  font-size: var(--type-subhead-size);
  line-height: var(--type-subhead-line);
  font-weight: var(--weight-medium);
}
.card-body p {
  margin-top: var(--type-body-line);                     /* Absatz = eine Zeile, auch nach der Unterzeile */
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
}
.card-body p.is-strong { font-weight: var(--weight-medium); }
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--type-body-line);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--color-ink);
  text-decoration: none;
}
.card-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.card-link:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }

@media (max-width: 767px) {
  .two-col { grid-template-columns: 1fr; }
  .about-cols .intro + .intro { margin-top: var(--type-intro-line); }   /* rechte Spalte folgt mit Absatzabstand */
  .cards { row-gap: var(--block-gap); }
}

/* ---------------------------------------------------------------------
   Footer: volle Breite in Sand, Inhalt im Seitenraster.
   Links und Logo stehen auf einer gemeinsamen Grundlinie (Logo-Unterkante).
   --------------------------------------------------------------------- */
.site-footer {
  margin-top: var(--section-gap);
  background: var(--color-sand);
}
.footer-inner {
  display: flex;
  align-items: baseline;            /* Text-Grundlinie = Unterkante des Logo-Bildes */
  justify-content: space-between;
  padding: var(--footer-padding-y) var(--content-inset);
}
.footer-links {
  display: flex;
  gap: var(--footer-link-gap);
  flex-wrap: wrap;
}
.footer-links a {
  font-size: var(--type-ui-size);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  text-decoration: none;
}
.footer-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-logo { display: inline-block; line-height: 0; }
.footer-logo img {
  height: var(--logo-small-h);
  width: auto;
  display: block;
}

@media (max-width: 767px) {
  /* Mobile: Logo oben, Links darunter */
  .footer-inner {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--heading-gap);
  }
}

/* ---------------------------------------------------------------------
   Modal
   Eigene Ebene statt <dialog>: ein natives Dialog-Element läge über allem,
   auch über Logo und Sprachumschalter. Die sollen aber sichtbar und
   bedienbar bleiben. Reihenfolge der Ebenen:
     Seite  <  Hintergrund (papierweiß)  <  Modal  <  Header (10, 11)
   Rahmen = Stage-Rahmen.
   --------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-paper);
  z-index: 8;
}
.modal {
  position: fixed;
  top: var(--stage-top);
  bottom: var(--stage-bottom);
  left: var(--content-inset);
  right: var(--content-inset);
  background: var(--color-sand);
  border-radius: var(--radius);
  z-index: 9;
  overflow: hidden;                 /* gescrollt wird nur der Inhalt, der Schließen-Button bleibt stehen */
  outline: none;
}
.modal[hidden], .modal-backdrop[hidden] { display: none; }

.modal-body {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;     /* Scrollen im Modal läuft nicht in die Seite durch */
  padding: var(--modal-padding);
}

.modal-close {
  position: absolute;
  top: var(--modal-close-inset);
  right: var(--modal-close-inset);
  width: var(--modal-close-size);
  height: var(--modal-close-size);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  cursor: pointer;
  z-index: 1;
}
.modal-close svg { width: 100%; height: 100%; display: block; }

/* ---------- Typografie im Modal ---------- */
.modal h2 {
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  font-weight: var(--weight-light);
  padding-right: var(--modal-close-size);   /* Titel läuft nicht unter den Schließen-Button */
}
/* Erster Absatz direkt unter der Überschrift (ohne Stand-Zeile): Überschrift → Inhalt */
.modal h2 + p:not(.meta) { margin-top: var(--heading-gap); }
.modal .meta {
  margin-top: var(--tight-gap);
  font-size: var(--type-meta-size);
  line-height: var(--type-meta-line);
}
.modal h3 {
  margin-top: var(--heading-gap);
  font-size: var(--type-subhead-size);
  line-height: var(--type-subhead-line);
  font-weight: var(--weight-medium);
}
.modal p,
.modal address {
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-style: normal;
  max-width: 640px;
}
/* Absatzabstand = eine Zeilenhöhe */
.modal h3 + p, .modal h3 + address, .modal p + p,
.modal address + p, .modal p + address { margin-top: var(--type-body-line); }
.modal a { color: var(--color-ink); text-underline-offset: 3px; }

/* ---------- Kontaktformular ---------- */
.contact-form {
  display: grid;
  gap: var(--heading-gap);
  max-width: 640px;
  margin-top: var(--block-gap);
}
.field { display: grid; gap: var(--tight-gap); }
.field label {
  font-size: var(--type-ui-size);
  font-weight: var(--weight-medium);
}
.field input,
.field textarea {
  width: 100%;
  border: var(--line);
  border-radius: var(--radius);
  background: var(--color-paper);
  font-family: var(--font-family);
  font-weight: var(--weight-light);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--color-ink);
  padding: 0 16px;
}
.field input { height: var(--field-h); }
.field textarea { padding-top: 12px; padding-bottom: 12px; min-height: 160px; resize: vertical; }
.form-hint {
  font-size: var(--type-meta-size) !important;
  line-height: var(--type-meta-line) !important;
}
.form-note {
  font-size: var(--type-meta-size) !important;
  line-height: var(--type-meta-line) !important;
  font-weight: var(--weight-medium);
}
.contact-form .button { justify-self: start; }
.contact-form .button:disabled { opacity: 0.4; cursor: default; }
.form-note:focus { outline: none; }   /* nur für die Ansage „gesendet“ fokussiert, kein Bedienelement */

/* Honeypot (Bot-Schutz): unsichtbar, aber im Formular vorhanden */
.field-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Gesendet: Felder, Hinweis und Button weg, die Meldung bleibt in Fließtextgröße */
.contact-form.is-sent > :not(.form-note) { display: none; }
.contact-form.is-sent .form-note {
  font-size: var(--type-body-size) !important;
  line-height: var(--type-body-line) !important;
}