/* Verzeichnis-Redesign 2026-08-19 (Design-Canvas FINAL, B3b hell+dunkel).
   Konsumiert ausschließlich Token aus tokens.css; hell/dunkel folgt dem
   Systemmodus, weil index/kontakt kein data-theme mehr pinnen. */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Ausklapp-Kurve: schnell an, weich aus. */
:root { --klapp-kurve: cubic-bezier(0.22, 0.61, 0.36, 1); }

html { scroll-behavior: smooth; }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  line-height: 1.55;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--selection); }

a { color: inherit; }

:where(a, button, input, textarea):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.mono {
  font-family: 'Fragment Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--card);
  color: var(--foreground);
  padding: 0.5rem 1rem;
  z-index: 10;
}
.skip-link:focus-visible { left: 1rem; top: 1rem; }

/* Kopf */
.kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem clamp(1.5rem, 7vw, 8rem);
  border-bottom: 1px solid var(--border);
}
.marke {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
}
.marke svg { display: block; }
.marke .punkt-tinte { fill: var(--primary); }
.marke .punkt { fill: var(--foreground); }
.kopf-mail {
  color: var(--muted-foreground);
  text-decoration: none;
}
.kopf-mail:hover { color: var(--primary); }

/* Hell/Dunkel-Umschalter: Mond im Hellen, Sonne im Dunklen. */
.theme-knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  color: var(--muted-foreground);
  cursor: pointer;
}
.theme-knopf:hover { color: var(--foreground); }
.icon-sonne { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sonne { display: block; }
  :root:not([data-theme="light"]) .icon-mond { display: none; }
}
:root[data-theme="dark"] .icon-sonne { display: block; }
:root[data-theme="dark"] .icon-mond { display: none; }
:root[data-theme="light"] .icon-sonne { display: none; }
:root[data-theme="light"] .icon-mond { display: block; }

/* Bühne: Verzeichnis links, aufklappbares Kontaktfeld rechts */
.buehne {
  flex-grow: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  /* Kein gap: der Abstand zum Kontaktfeld gehört dem Feld selbst, sonst
     bliebe er stehen, wenn das Feld zugeklappt ist. */
  padding: 3rem clamp(1.5rem, 7vw, 8rem);
}
.verzeichnis {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.5rem, 4vh, 2.75rem);
}
/* Kontaktfeld — klappt auf, statt zu erscheinen.
   Bis 2026-08-21 schaltete main.js das [hidden]-Attribut. display:none kennt
   keine Zwischenzustände: das Feld war von einem Frame auf den nächsten da,
   und das Verzeichnis daneben sprang auf seine neue Breite. Jetzt trägt die
   Klasse .offen die Sichtbarkeit, und genau die Achse, die den Sprung
   verursacht hat (Breite im Nebeneinander, Höhe im Stapel), wird animiert. */
.kontakt-feld {
  flex: 0 0 0rem;
  overflow: hidden;
  opacity: 0;
  /* visibility statt reinem Clipping: sonst blieben die Formularfelder im
     zugeklappten Zustand per Tab erreichbar. */
  visibility: hidden;
  transition:
    flex-basis 0.38s var(--klapp-kurve),
    margin-left 0.38s var(--klapp-kurve),
    opacity 0.22s ease,
    visibility 0s linear 0.38s;
}
.kontakt-feld.offen {
  flex-basis: clamp(19rem, 30vw, 25rem);
  margin-left: clamp(2.5rem, 6vw, 6rem);
  opacity: 1;
  visibility: visible;
  transition:
    flex-basis 0.38s var(--klapp-kurve),
    margin-left 0.38s var(--klapp-kurve),
    opacity 0.3s ease 0.1s,
    visibility 0s;
}
/* Der Abstand nach oben gehört dem Feld, nicht dem Formular darin: als
   Rand des Grid-Items zählte er sonst in die zusammengeklappte Zeile und
   ließ im Stapel 40 px stehen. */
.kontakt-feld form { margin-top: 0; }
/* Ohne JS bleibt das Feld weg — die Zeile führt dann auf /kontakt.html.
   main.js nimmt das Attribut beim Start ab und schaltet ab da .offen. */
.kontakt-feld[hidden] { display: none; }

@media (max-width: 900px) {
  .buehne { flex-direction: column; align-items: stretch; }
  .verzeichnis { flex: none; }
  /* Im Stapel wächst das Feld in der Höhe. 0fr → 1fr ist die Grid-Größe, die
     sich animieren lässt; auf auto/max-height ginge es nur geschätzt. */
  .kontakt-feld {
    flex: none;
    display: grid;
    grid-template-rows: 0fr;
    margin-left: 0;
    transition:
      grid-template-rows 0.38s var(--klapp-kurve),
      margin-top 0.38s var(--klapp-kurve),
      opacity 0.22s ease,
      visibility 0s linear 0.38s;
  }
  .kontakt-feld > * { min-height: 0; overflow: hidden; }
  .kontakt-feld.offen {
    grid-template-rows: 1fr;
    margin-left: 0;
    margin-top: clamp(2rem, 5vh, 3rem);
    transition:
      grid-template-rows 0.38s var(--klapp-kurve),
      margin-top 0.38s var(--klapp-kurve),
      opacity 0.3s ease 0.1s,
      visibility 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kontakt-feld, .kontakt-feld.offen { transition: none; }
}
.zeile {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
}
.zeile .nr { color: var(--muted-foreground); }
.zeile-inhalt {
  display: flex;
  align-items: baseline;
  gap: clamp(0.75rem, 2.5vw, 1.75rem);
  flex-wrap: wrap;
}
.zeile .name {
  font-size: clamp(3rem, 10vw, 6.75rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  transition: color 0.25s ease;
}
.zeile .art {
  color: var(--muted-foreground);
  font-size: 0.9375rem;
  transition: color 0.25s ease;
}
.zeile:hover .name, .zeile:focus-visible .name,
.zeile:hover .art, .zeile:focus-visible .art { color: var(--primary); }
@media (prefers-reduced-motion: reduce) { .zeile .name, .zeile .art { transition: none; } }

/* Feste Seitenhöhe (Impressum/Datenschutz): Kopf und Fuß stehen,
   der Text scrollt innen. */
body.fest { height: 100vh; height: 100dvh; overflow: hidden; }
body.fest .bogen { min-height: 0; overflow-y: auto; }

/* Kontakt-Seite */
.bogen {
  flex-grow: 1;
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 5rem) clamp(1.25rem, 5vw, 4rem);
}
.bogen h1 {
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.bogen .hin {
  margin-top: 1rem;
  color: var(--muted-foreground);
}
.bogen .hin a {
  color: var(--foreground);
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-underline-offset: 4px;
}

form { margin-top: 2.5rem; }
form label {
  display: block;
  margin: 1.25rem 0 0.4rem;
  font-family: 'Fragment Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
form label:first-of-type { margin-top: 0; }
form input, form textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--foreground);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--input);
  border-radius: 0;
  padding: 0.45rem 0;
}
form input:focus, form textarea:focus {
  outline: none;
  border-bottom-color: var(--primary);
}
form button {
  margin-top: 2rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--primary-foreground);
  background: var(--primary);
  border: none;
  border-radius: var(--control-radius);
  padding: 0.75rem 1.5rem;
  cursor: pointer;
}
form button:hover { background: var(--primary-hover); }
form button:disabled { opacity: 0.6; cursor: default; }
.form-hp { position: absolute; left: -9999px; }
/* min-height reserviert die Zeile — sonst springt die vertikal zentrierte
   Bühne, wenn die Meldung auftaucht. */
.form-status {
  margin-top: 0.9rem;
  font-family: 'Fragment Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  min-height: 1.6em;
  color: var(--muted-foreground);
}
.form-status.error { color: var(--destructive); }
.form-status.success { color: var(--positive); }

/* Fuß */
.fuss {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.25rem clamp(1.5rem, 7vw, 8rem) 1.75rem;
  border-top: 1px solid var(--border);
  color: var(--muted-foreground);
}
.fuss a { color: inherit; text-decoration: none; }
.fuss a:hover { color: var(--foreground); }

/* Textseiten (Impressum, Datenschutz, 404) — linksbündig im
   Startseiten-Padding, Titel so groß wie die Produktnamen. */
.bogen.prosa {
  max-width: none;
  margin: 0;
  padding: 3rem clamp(1.5rem, 7vw, 8rem);
}
.prosa p, .prosa ul { max-width: 46rem; }
.prosa h1 {
  font-size: clamp(3rem, 10vw, 6.75rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 2rem;
}
.prosa h2 {
  font-size: 1.375rem;
  font-weight: 700;
  margin: 2.25rem 0 0.6rem;
}
.prosa h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 1.5rem 0 0.4rem;
}
.prosa p, .prosa li { color: var(--muted-foreground); }
.prosa p + p { margin-top: 0.75rem; }
.prosa ul { padding-left: 1.25rem; margin: 0.5rem 0; }
.prosa a {
  color: var(--foreground);
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-underline-offset: 4px;
}
.prosa .section-title { font-size: clamp(3rem, 10vw, 6.75rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1; margin-bottom: 2rem; }

a.knopf {
  display: inline-block;
  font-weight: 500;
  color: var(--primary-foreground);
  background: var(--primary);
  border-radius: var(--control-radius);
  padding: 0.75rem 1.5rem;
  text-decoration: none;
}
a.knopf:hover { background: var(--primary-hover); }