/* ==========================================================================
   _contract.css — Layout-Vertrag der Swiss-AI-Agency-Website
   Angelegt 2026-08-04, Responsive-Sanierung (Masterprompt Abschnitt 5).

   DIESE DATEI IST DIE EINZIGE QUELLE fuer Inhaltsbreite, Seitenrand,
   Zeilenlaenge und Umbruchpunkte. Sie wird als ERSTES Stylesheet auf jeder
   Seite geladen, vor styles.css.

   Sie definiert Tokens, keine Komponenten. Wer eine eigene Breitenlogik
   braucht, hat den Vertrag falsch geschnitten und passt ihn hier an, statt
   ihn zu umgehen.

   VOR DER SANIERUNG existierte dieselbe Idee dreifach und uneinig:
     --saa-shell-max / --saa-shell-x-desktop  (styles.css)
     --saa-page-x                             (styles.css)
     --holo-shell                             (ki-loesungen-holo.css)
     --uc-track                               (solution-branch.css)
   Diese Variablen leben weiter, leiten sich aber jetzt alle von hier ab.
   ========================================================================== */

:root {
  /* --- Container ------------------------------------------------------- */
  /* Maximale Inhaltsbreite. Alle Abschnitte enden hier, keiner davor. */
  --saig-shell: 1280px;

  /* Seitenrand links/rechts. Bewusst ein clamp() und KEIN Breakpoint:
     der Rand waechst stufenlos mit und erzeugt darum keinen Sprung.
     Genau das hat den 1280er-Cliff erzeugt, den diese Runde behebt. */
  --saig-gutter: clamp(12px, 4vw, 48px);

  /* Mobiles Innenpolster für Kacheln/Karten (Teil B, 08.09.): eine Ebene
     polstert, nicht drei. Ersetzt das bisherige gestapelte Polster aus
     Shell-Gutter + Kachel + verschachteltem Absatz. */
  --saig-pad-x-mobile: 12px;
  --saig-pad-y-mobile: 20px;
  /* Seitenrand für Bauteile mit eigener senkrechter Spur (Prozess-Schritte,
     Chronik) — dort darf der Rand nicht unter die Spurbreite fallen. */
  --saig-pad-x-rail: 20px;

  /* Maximale Zeilenlaenge fuer Fliesstext. Sie gehoert auf die TEXTSPALTE,
     nicht auf den Abschnitt. Ein Abschnitt darf 1280px breit sein, waehrend
     sein Fliesstext bei ~68 Zeichen umbricht. */
  /* KALIBRIERT, nicht aus dem Lehrbuch uebernommen: ch misst die Breite der
     Ziffer 0, und die ist bei Inter deutlich breiter als das durchschnittliche
     Zeichen deutscher Prosa. Der uebliche Richtwert 68ch ergab hier gemessene
     82 Zeichen pro Zeile und lag damit ueber dem Zielkorridor 45-75.
     58ch trifft ihn: gemessen rund 70 Zeichen. */
  --saig-measure: 58ch;

  /* Linke/rechte Inhaltskante fuer VOLLBREITE Abschnitte (Heroes, dunkle
     Baender), die ihren Rand als Polster statt als Breite ausdruecken.
     Ergibt exakt dieselbe Kante wie .saig-shell:
       schmal  -> der Seitenrand
       breit   -> die halbe Restflaeche neben der 1280px-Spur
     Das Prozent bezieht sich auf das Element selbst; alle Nutzer dieser
     Variable sind viewportbreit, damit stimmt der Bezug.

     Vor der Sanierung war --saa-shell-x NIRGENDS definiert — ueberall griff
     der Fallback 80px. Der Hero-Text stand darum bei 1920px 233px weiter
     links als jeder andere Abschnitt derselben Seite. */
  --saa-shell-x: max(var(--saig-gutter), calc((100% - var(--saig-shell)) / 2));

  /* --- Breakpoint-Skala ------------------------------------------------
     Vier Stufen, sonst keine. CSS kann Custom Properties nicht in
     Media-Queries aufloesen, darum stehen die Werte hier nur als
     verbindliche Referenz — in den Stylesheets werden genau diese
     Zahlen verwendet und keine anderen.

       sm   560px   Handy, einspaltig
       md   768px   grosses Handy / kleines Tablet
       lg  1024px   Tablet quer / kleiner Laptop, Umschaltpunkt Navigation
       xl  1280px   Desktop, volle Spur

     Als Custom Properties fuer JavaScript und fuer Container-Queries: */
  --saig-bp-sm: 560px;
  --saig-bp-md: 768px;
  --saig-bp-lg: 1024px;
  --saig-bp-xl: 1280px;
}

/* --------------------------------------------------------------------------
   Der Container.
   Ein einziger Mechanismus fuer alle Abschnitte. Wer ihn benutzt, liegt
   automatisch buendig mit jedem anderen Abschnitt.
   -------------------------------------------------------------------------- */
.saig-shell {
  width: min(var(--saig-shell), 100% - var(--saig-gutter) * 2);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Zeilenlaenge.
   Auf die Textspalte setzen, nie auf den Abschnitt.
   -------------------------------------------------------------------------- */
.saig-measure {
  max-width: var(--saig-measure);
}

/* --------------------------------------------------------------------------
   Vollbreite OHNE 100vw.
   100vw enthaelt die Scrollbar, der Viewport nicht — das ergab auf jeder
   Seite mit sichtbarer Scrollbar 15px Ueberlauf (Befund D). Ein Abschnitt,
   der die volle Breite braucht, laesst seine Breite schlicht offen: sein
   Elternelement (<main>) ist bereits so breit wie der Viewport.
   -------------------------------------------------------------------------- */
.saig-bleed {
  width: auto;
  max-width: none;
  margin-inline: 0;
}

/* Wo eine Flaeche wirklich bis an den Fensterrand reichen muss, obwohl ihr
   Elternelement begrenzt ist (einseitige Bleeds, Overlays), rechnet das CSS
   mit --saig-vw statt mit 100vw. js/main.js setzt den Wert auf die
   tatsaechliche Viewportbreite ohne Scrollbar und haelt ihn bei jedem Resize
   nach. Der Fallback hier ist 100vw: ohne JavaScript bleibt es beim alten
   Verhalten statt bei einem falschen. */
:root {
  --saig-vw: 100vw;
}

/* --------------------------------------------------------------------------
   Mindestgroesse fuer Bedienelemente (Befund L).
   Richtwert 44px. Gilt fuer Flaechen, die wirklich angetippt werden —
   Fliesstext-Links sind ausgenommen, dort waere es Layoutschaden.
   -------------------------------------------------------------------------- */
:root {
  --saig-tap: 44px;
}

/* --------------------------------------------------------------------------
   Tippziele fuer alleinstehende Links (Befund L, Block 7c).
   Betrifft nur Links, die als eigenstaendiges Bedienelement stehen —
   Rueckwaerts-Navigation und Abschnittswechsel. Fliesstext-Links bleiben
   ausdruecklich unberuehrt: ein 44px hohes <a> mitten im Absatz waere
   Layoutschaden, kein Gewinn.
   html body hebt die Spezifitaet gerade so weit, dass diese Datei trotz
   fruehester Ladeposition gegen die Komponentenregeln bestehen kann.
   -------------------------------------------------------------------------- */
html body :is(
  .term-backlink,
  .pl-backlink,
  .po-backlink,
  .pw-backlink,
  .dienste-transition-link
) {
  display: inline-flex;
  align-items: center;
  min-height: var(--saig-tap);
}