/*
 * Stilprofil „form“: die Form-Sprache einer Site (E-053).
 *
 * Zweck: Ecken, Rahmen und Raster für alle Abschnitte zugleich umstellen,
 * statt sie pro Kunde in `custom.css` nachzubauen. Die Site wählt in
 * `site.config.json` unter `stil.form` eine Stufe; der Build schreibt sie als
 * `data-form` an `<html>`:
 *
 *   klar       nichts hiervon greift – Ecken kommen allein aus dem Theme
 *              (`--radius-card`), wie vor E-053
 *   weich      Karten und Fotokacheln deutlich runder
 *   organisch  eine große Ecke, die von Karte zu Karte wandert; ein schräger
 *              Linienrahmen hinter Fotos im Signature-Rahmen; Karten im
 *              breiten Raster leicht versetzt
 *
 * Zusammenspiel: wird nach `base.css` geladen und überschreibt dort nur
 * `border-radius`, Überlauf und Abstand. Die Stellschrauben (`--ecke-gross`
 * usw.) sind optionale Tokens aus `tokens.contract.css`, ein Theme kann sie
 * setzen. Das Signature-Element selbst (`--radius-signature`) bleibt Sache
 * des Themes – der Stil legt nur den Rahmen dahinter.
 *
 * Wie `base.css` frei von Farben und Schriften; das prüft
 * `tests/unit/tokens.test.js` für jede Datei in `styles/`.
 */

/* ---- weich --------------------------------------------------------------- */

[data-form='weich'] :is(.card, .galerie-kachel, .fotoband-kachel, .category, .step) {
  border-radius: var(--form-radius-weich);
}

/* ---- organisch: wandernde große Ecke -------------------------------------
   Drei Lagen im Wechsel: oben rechts, oben links, unten rechts. Gezählt wird
   pro Elementart (`nth-of-type`), damit Dialoge oder andere Geschwister im
   selben Raster den Wechsel nicht verschieben. */

[data-form='organisch'] :is(.card, .galerie-kachel, .fotoband-kachel, .category, .step) {
  border-radius: var(--ecke-klein) var(--ecke-gross) var(--ecke-klein) var(--ecke-klein);
}

[data-form='organisch'] :is(.card, .galerie-kachel, .fotoband-kachel, .category, .step):nth-of-type(3n + 2) {
  border-radius: var(--ecke-gross) var(--ecke-klein) var(--ecke-klein) var(--ecke-klein);
}

[data-form='organisch'] :is(.card, .galerie-kachel, .fotoband-kachel, .category, .step):nth-of-type(3n) {
  border-radius: var(--ecke-klein) var(--ecke-klein) var(--ecke-gross) var(--ecke-klein);
}

/* ---- organisch: schräger Linienrahmen hinter Fotos -----------------------
   Der Rahmen liegt als ::before im Signature-Rahmen, hinter dem Foto. Dafür
   darf der Rahmen nicht mehr abschneiden; das Foto rundet sich stattdessen
   selbst (`inherit` folgt auch der Schwebe-Animation des Heros).
   `isolation` hält das ::before in diesem Rahmen, statt es hinter die ganze
   Section fallen zu lassen. */

[data-form='organisch'] .signature-frame {
  overflow: visible;
  isolation: isolate;
}

[data-form='organisch'] .signature-frame > * {
  border-radius: inherit;
  overflow: hidden;
}

[data-form='organisch'] .signature-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid var(--rahmen-farbe);
  border-radius: inherit;
  transform: rotate(var(--rahmen-neigung));
  pointer-events: none;
}

/* Über mich neigt sich zur anderen Seite – zwei gleich schräge Rahmen
   untereinander wirken wie ein Versehen. */
[data-form='organisch'] .about-grid .signature-frame::before {
  transform: rotate(calc(var(--rahmen-neigung) * -1));
}

/* ---- organisch: versetztes Raster ----------------------------------------
   Nur wo Karten nebeneinander stehen. Untereinander (Telefon) hätte der
   Versatz keinen Rhythmus, nur Lücken. `align-items: start`, damit die
   versetzte Karte nicht die ganze Reihe in die Länge zieht. */

@media (min-width: 861px) {
  [data-form='organisch'] :is(.card-grid, .category-grid) {
    align-items: start;
  }

  [data-form='organisch'] :is(.card-grid, .category-grid) > :nth-of-type(3n + 2) {
    margin-top: var(--raster-versatz);
  }
}