@import url("fonts.css");
@import url("transformer.css");

/* ==================================================================
   GiKS — Designsystem
   ==================================================================

   Leitbild: Praezisionsinstrument, nicht Tech-Startup.

   Vier Grundsaetze:
   1. Lesbarkeit vor Eleganz. Eine Schrift, die man entziffern muss,
      ist keine Premiumschrift.
   2. Ueberschriften stehen in Tinte. Messing ist Linienfarbe —
      Haarlinien, Ziffern, Kapitaelchen, Umrisse. Nie Fliesstext,
      nie Ueberschriften.
   3. Ein Flaechenrhythmus, nicht viele. Dunkel, hell, dunkel.
      Keine grauen Zwischentoene.
   4. Exklusivitaet entsteht durch Auslassung.

   Laedt NACH theme.12.css und gewinnt daher bei gleicher Spezifitaet.
   Liegt im Child-Theme und ueberlebt YOOtheme-Updates.
   ================================================================== */

:root {
  /* NACHTBLAU. Die dritte Fassung dieses Tons.
     #0B1220 (zu hell neben dem Neuentwurf) wich #0A111E — und der las
     sich auf grossen Flaechen als SCHWARZ: rgb(10,17,30) traegt zu
     wenig Blau, um auf einem Bildschirm als Farbe anzukommen. Der
     Auftraggeber hat genau das beanstandet.
     Jetzt rgb(16,31,59): gleicher Farbwinkel (~219 Grad), aber genug
     Saettigung, dass die Flaeche als Nachtblau gelesen wird. Kontrast
     zu Weiss weiterhin 16,4:1 — weit ueber jedem Grenzwert.
     WER DIESEN WERT AENDERT, aendert ihn an VIER Orten mit: in den
     rgba(16,31,59,…)-Verlaeufen dieser Datei, als INK in
     leuchtturm.js, integration.js und antikythera.js — die
     Zeichnungen decken mit derselben Tinte ab, sonst schimmern ihre
     Fuellungen gegen den Grund. */
  --giks-ink:       #101F3B;
  --giks-ink-2:     #16233A;
  --giks-paper:     #FFFFFF;
  --giks-tint:      #F4F6F8;   /* sehr zurueckhaltend, kein Grau */
  --giks-text:      #131C2B;
  --giks-muted:     #4E5A6E;   /* dunkler als zuvor: bessere Lesbarkeit */
  --giks-brass:     #7E6430;   /* dunkler als Messing wirkt, damit
                                  auch kleine Schrift und Umrisse das
                                  Kontrastminimum 4,5:1 erreichen   */
  --giks-brass-lit: #C9A961;
  --giks-line:      rgba(16, 31, 59, .13);
  --giks-line-lit:  rgba(231, 234, 240, .18);

  --giks-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --giks-sans:  'Source Sans 3', -apple-system, BlinkMacSystemFont,
                'Segoe UI', Helvetica, Arial, sans-serif;
  --giks-mono:  'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- DIE SCHRIFTSKALA ---------------------------------------------
     Uebernommen von der Landingpage, weil sie dort schon steht und
     weil sie das ist, was den Auftritt dort ruhiger wirken laesst als
     hier. Bis dahin setzte dieses Designsystem Groessen je Selektor —
     34 Angaben, aus denen gerendert 15 verschiedene Stufen wurden.

     Gemessen ueber Startseite, KI.Strategie, FAQ und Blog, und darin
     drei Haeufungen, die das Auge als Unruhe liest, ohne sie benennen
     zu koennen:

       11,2 / 11,5 px     zwei Kapitaelchengroessen, 2,7 % auseinander
       19,2 / 20 px       zwei Anlesergroessen, 4 % auseinander
       22,4 / 23 px       zwei Zwischenueberschriften, 2,7 %
       12 / 12,8 / 14,1   drei Kleinstufen ohne erkennbare Rollen

     Ein Unterschied von unter fuenf Prozent ist kein
     Gestaltungsmittel — er liest sich als Versehen. Jetzt acht
     Stufen, benachbarte mindestens im Verhaeltnis 1,2. Rollen duerfen
     sich eine Stufe teilen; was es nicht mehr gibt, sind
     Zwischenwerte und Einzelfaelle.

     WER EINE NEUE GROESSE BRAUCHT, braucht in Wahrheit fast immer
     eine andere Rolle. Diese acht sind die Skala; eine neunte kommt
     nicht dazu, ohne dass eine alte geht.
     ------------------------------------------------------------------ */
  --t-mono:  .6875rem;  /* 11 px — Kapitaelchen, Datenlabels          */
  --t-klein: .875rem;   /* 14 px — Karten, Fussbereich, Schaltflaechen */
  --t-text:  1.0625rem; /* 17 px — Fliesstext                         */
  --t-lead:  1.25rem;   /* 20 px — Anleser, Zwischenueberschriften    */
  --t-gross: 1.5rem;    /* 24 px — grosse Zwischenueberschrift        */
  --t-zahl:  clamp(1.55rem, 2.5vw, 2rem);   /* 32 px — Kennzahlen,
                           Zitat, nachgeordnete H2, Monogramm         */
  --t-h2:    clamp(1.9rem, 3.2vw, 2.7rem);  /* 43 px */
  --t-h1:    clamp(2.4rem, 4.8vw, 3.9rem);  /* 62 px */
}

/* ==================================================================
   1 — Schrift
   ------------------------------------------------------------------
   Die Serifenschrift traegt nur die grossen Ueberschriften. Ab der
   dritten Ebene uebernimmt die Grotesk in halbfett: kleine Serifen
   auf dem Bildschirm werden matschig, halbfette Grotesk bleibt klar.
   ================================================================== */

body, input, select, textarea, button {
  font-family: var(--giks-sans);
}

body {
  font-size: var(--t-text);
  line-height: 1.7;
  color: var(--giks-text);
  background-color: var(--giks-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Grosse Ueberschriften — Serif */
h1, h2, .uk-h1, .uk-h2,
.uk-heading-medium, .uk-heading-large,
.uk-heading-xlarge, .uk-heading-2xlarge, .uk-heading-3xlarge,
.uk-article-title {
  font-family: var(--giks-serif);
  font-weight: 600;
  letter-spacing: -.015em;
  text-wrap: balance;
  color: var(--giks-text);
  text-transform: none;
}

/* DIE GROESSEN GEHOEREN HIERHER, nicht ins Theme.
   Bis zur Skala setzte dieses Designsystem fuer h2 und h3 gar keine
   Groesse — sie kam aus theme.12.css und lag dort bei 40 und 23 px.
   Beides sind Werte neben der Skala: 40 gegen die Stufe 43, 23 gegen
   20 und 24. Genau daraus entstanden zwei der gemessenen Haeufungen.

   h3 teilt sich die Stufe mit dem Anleser. Das ist Absicht und kein
   Versaeumnis: Getrennt werden die beiden durch Gewicht und Farbe,
   nicht durch Groesse — eine eigene Stufe dafuer waere eine Stufe zu
   viel. */
/* `.uk-article-title` gehoert MIT in diese Regel, und zwar mit
   Element davor: Das Theme setzt `h1.uk-article-title` auf 40 px
   (Spezifitaet 0,1,1) und schlaegt damit ein blosses `h1` (0,0,1).
   Ohne diese Zeile standen Impressum und Datenschutz — die einzigen
   Seiten ohne Builder-Layout — auf einer neunten Groesse. */
h1, .uk-h1, .uk-heading-large, .uk-heading-xlarge,
h1.uk-article-title, .uk-article-title {
  font-size: var(--t-h1);
  line-height: 1.1;
}
h2, .uk-h2, .uk-heading-medium {
  font-size: var(--t-h2);
  line-height: 1.18;
}
h3, .uk-h3, .uk-heading-small, .uk-card-title, .el-title {
  font-size: var(--t-lead);
}
h4, .uk-h4 { font-size: var(--t-text); }
h5, h6, .uk-h5, .uk-h6 { font-size: var(--t-klein); }

/* Kleine Ueberschriften — Grotesk halbfett */
h3, h4, h5, h6, .uk-h3, .uk-h4, .uk-h5, .uk-h6,
.uk-heading-small, .uk-card-title, .el-title {
  font-family: var(--giks-sans);
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.3;
  color: var(--giks-text);
  text-transform: none;
}

.uk-text-lead {
  font-family: var(--giks-sans);
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--giks-muted);
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ------------------------------------------------------------------
   Blocksatz
   ------------------------------------------------------------------
   In deutscher Typografie ist gesetzter Blocksatz die wertigere Form.
   Er funktioniert aber nur mit Silbentrennung — ohne sie reissen
   Wortabstaende auf und es entstehen "Giessbaeche" durch den Satz.
   Die Seite ist als lang="de-de" ausgezeichnet, deshalb greift die
   automatische Trennung des Browsers mit deutschen Trennregeln.

   Nur Fliesstext. Ueberschriften, Knoepfe, Beschriftungen und
   Tabellen bleiben im Flattersatz — dort erzeugt Blocksatz nur
   Luecken.
   ------------------------------------------------------------------ */

p {
  max-width: 72ch;
  text-align: justify;
  text-align-last: left;      /* letzte Zeile nicht auseinanderziehen */
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;   /* keine Trennung winziger Silben  */
  orphans: 2;
  widows: 2;
}

/* Kein Blocksatz, wo er schadet.
   Wichtig: Der Builder legt Absaetze INNERHALB von Ueberschriften an
   ("<h1><p>INTEGRIERTE</p><p>KI-SYSTEME</p></h1>"). Einzelne Woerter
   im Blocksatz wuerden auseinandergezogen. */
h1 p, h2 p, h3 p, h4 p, h5 p, h6 p,
.uk-h1 p, .uk-h2 p, .uk-h3 p,
[class*="uk-heading-"] p, .el-title p, .uk-card-title p,
p.uk-text-center, p.uk-text-right,
.uk-button p, .giks-label, .uk-article-meta,
td p, th p, figcaption p, .uk-breadcrumb p,
.tm-consent p, .uk-navbar p {
  text-align: inherit;
  text-align-last: auto;
  hyphens: manual;
  max-width: none;
}
.uk-text-center p, .uk-text-center .uk-text-lead {
  text-align: center;
  text-align-last: center;
}

/* Eingefaerbte Hervorhebungen zerhacken den Lesefluss */
p strong, .uk-card-primary p strong, .uk-section-primary p strong {
  color: inherit;
  font-weight: 600;
}

/* ==================================================================
   2 — Ueberschriftsfarbe
   ------------------------------------------------------------------
   Im Builder sind viele Ueberschriften auf die Zweitfarbe gesetzt.
   Frueher orange, jetzt Tinte. Messing als Ueberschriftsfarbe war ein
   Fehler: gold auf hellem Grund hat zu wenig Kontrast und wirkt
   billig statt wertig.
   ================================================================== */

.uk-text-secondary,
.uk-text-secondary > *,
.uk-text-primary,
.uk-text-primary > * { color: var(--giks-text) !important; }

.uk-section-primary .uk-text-secondary,
.uk-section-primary .uk-text-secondary > *,
.uk-light .uk-text-secondary,
.uk-light .uk-text-secondary > *,
.uk-overlay .uk-text-secondary,
.uk-overlay .uk-text-secondary > * { color: #F2F4F7 !important; }

/* Die Ausnahme fuer die Claim-Zeile steht in Abschnitt 8 bei den
   Bildern — sie haengt am Bildkontext, nicht an einer Farbklasse. */

.uk-font-secondary { font-family: var(--giks-sans); font-weight: 600; }

/* ==================================================================
   3 — Messing als Linienfarbe
   ================================================================== */

.giks-label, .uk-card-badge, .uk-article-meta, .uk-breadcrumb {
  font-family: var(--giks-mono);
  font-size: var(--t-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--giks-brass);
}
.giks-label { display: block; margin-bottom: 1.1rem; }

.giks-figures {
  display: flex; flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--giks-brass);
  list-style: none; margin: 2.5rem 0 0;
}
.giks-figures > li { display: flex; flex-direction: column; gap: .3rem; }
.giks-figures b {
  font-family: var(--giks-serif); font-weight: 600;
  font-size: var(--t-zahl);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.giks-figures span {
  font-family: var(--giks-mono); font-size: var(--t-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--giks-muted);
}

hr, .uk-hr { border-top: 1px solid var(--giks-line); }

/* ==================================================================
   4 — Links
   ================================================================== */

a, .uk-link { color: var(--giks-ink-2); text-underline-offset: .18em; }
a:hover, .uk-link:hover { color: var(--giks-brass); }

a:focus-visible, button:focus-visible,
.uk-button:focus-visible, input:focus-visible {
  outline: 2px solid var(--giks-brass);
  outline-offset: 3px;
}

/* ==================================================================
   5 — Schaltflaechen
   ================================================================== */

.uk-button {
  font-family: var(--giks-sans);
  font-size: var(--t-klein);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 0;
  border: 1px solid currentColor;
  background: none;
  padding: 0 1.9rem;
  line-height: 3.2;
  transition: background-color .2s ease, color .2s ease;
}
.uk-button-large { padding: 0 2.4rem; line-height: 3.6; }

.uk-button-primary, .uk-button-secondary, .uk-button-default {
  background: none;
  color: var(--giks-brass);
  border-color: var(--giks-brass);
  box-shadow: none;
}
.uk-button-primary:hover, .uk-button-secondary:hover, .uk-button-default:hover,
.uk-button-primary:focus, .uk-button-secondary:focus, .uk-button-default:focus {
  background: var(--giks-ink);
  color: #fff;
  border-color: var(--giks-ink);
}

.uk-section-primary .uk-button, .uk-light .uk-button {
  color: var(--giks-brass-lit);
  border-color: var(--giks-brass-lit);
}
.uk-section-primary .uk-button:hover, .uk-light .uk-button:hover {
  background: var(--giks-brass-lit);
  color: var(--giks-ink);
}

/* ==================================================================
   6 — Flaechen
   ------------------------------------------------------------------
   Vorher lagen vier verschiedene Hintergrundtoene uebereinander:
   Porzellan, Weiss, ein Verlauf und ein weisser Schleier mit 78 %
   Deckkraft. Das ergab die grauen Baender. Jetzt gilt ein Rhythmus:
   dunkel — hell — leichter Ton — hell — dunkel.
   ================================================================== */

.uk-section-default {
  background-color: var(--giks-paper);
  background-image: none;
}
/* Der weisse Schleier mit 78 % Deckkraft ist tragend: Darunter liegt
   eine dunkle Flaeche mit heller Schrift. Ihn zu entfernen legt Grau
   frei und der Text verschwindet. Statt ihn abzuschalten, wird er
   deckend gemacht — gleiche Wirkung, ohne Matsch. */
.uk-section-default .uk-position-cover,
.uk-section-muted .uk-position-cover {
  background-color: var(--giks-paper);
}

.uk-section-muted { background-color: var(--giks-tint); }
.uk-section-primary { background-color: var(--giks-ink); }

.uk-section {
  padding-top: clamp(3.5rem, 7vw, 7rem);
  padding-bottom: clamp(3.5rem, 7vw, 7rem);
}

/* Leere Abschnitte nehmen keine Hoehe mehr ein.
   Auf der Startseite standen zwei Abschnitte à 500 px voellig ohne
   Inhalt — zusammen 1.000 px Nichts. Die Regel ist selbstheilend:
   sobald jemand Inhalt einfuegt, greift sie nicht mehr. */
.uk-section:not(:has(h1, h2, h3, h4, h5, h6, p, img, svg, a, button,
                     ul, ol, table, iframe, .uk-panel, .el-item)) {
  display: none;
}

/* ==================================================================
   7 — Karten und Kacheln
   ================================================================== */

.uk-panel, .uk-card, .uk-tile { border-radius: 0; }

.uk-card-primary, .uk-card-secondary {
  background: none;
  color: var(--giks-text);
  border-top: 1px solid var(--giks-line);
  box-shadow: none;
}
.uk-card-primary .uk-card-title, .uk-card-secondary .uk-card-title,
.uk-card-primary h1, .uk-card-primary h2, .uk-card-primary h3,
.uk-card-secondary h1, .uk-card-secondary h2, .uk-card-secondary h3 {
  color: var(--giks-text);
}
.uk-card-primary p, .uk-card-secondary p { color: var(--giks-muted); }
.uk-card-primary.uk-card-body, .uk-card-secondary.uk-card-body,
.uk-card-primary > .uk-card-body, .uk-card-secondary > .uk-card-body {
  padding-left: 0; padding-right: 0;
}

/* Farbige Kacheln: UIkit setzt darin ueber :not(.uk-preserve-color)
   helle Schrift mit hoeherer Spezifitaet. Wer nur den Hintergrund
   aufhellt, bekommt weiss auf weiss. */
.uk-tile-secondary, .uk-background-secondary, .uk-section-secondary {
  background-color: var(--giks-tint);
  border-top: 1px solid var(--giks-brass);
}
.uk-tile-secondary:not(.uk-preserve-color),
.uk-section-secondary:not(.uk-preserve-color) { color: var(--giks-muted); }

.uk-tile-secondary:not(.uk-preserve-color) h1,
.uk-tile-secondary:not(.uk-preserve-color) h2,
.uk-tile-secondary:not(.uk-preserve-color) h3,
.uk-tile-secondary:not(.uk-preserve-color) h4,
.uk-tile-secondary:not(.uk-preserve-color) .uk-h1,
.uk-tile-secondary:not(.uk-preserve-color) .uk-h2,
.uk-tile-secondary:not(.uk-preserve-color) .uk-h3,
.uk-tile-secondary:not(.uk-preserve-color) .el-title,
.uk-section-secondary:not(.uk-preserve-color) h1,
.uk-section-secondary:not(.uk-preserve-color) h2,
.uk-section-secondary:not(.uk-preserve-color) h3,
.uk-section-secondary:not(.uk-preserve-color) .el-title {
  color: var(--giks-text);
}
.uk-tile-secondary:not(.uk-preserve-color) p,
.uk-section-secondary:not(.uk-preserve-color) p { color: var(--giks-muted); }

.uk-tile-secondary:not(.uk-preserve-color) .uk-button-primary,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-secondary,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-default,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-primary,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-default {
  background: none;
  color: var(--giks-brass);
  border-color: var(--giks-brass);
}
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-primary:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-default:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-primary:hover {
  background: var(--giks-ink); color: #fff; border-color: var(--giks-ink);
}

/* ==================================================================
   8 — Bilder
   ------------------------------------------------------------------
   Das Bildmaterial ist typische Technik-Stockfotografie mit kraeftigem
   Cyan. Das kaempft gegen eine zurueckhaltende Palette. Statt die
   Bilder zu ersetzen, werden sie behandelt: leicht entsaettigt und
   in Richtung Tinte gelegt. Aus lautem Material wird so ruhige
   Atmosphaere — und die Marke bekommt einen eigenen Bildton.
   ================================================================== */

/* Nur Elemente, die tatsaechlich ein Bild tragen. YOOtheme setzt es
   per inline-style; die uk-background-Klassen allein sagen nichts
   darueber aus, ob ein Bild vorhanden ist. Eine Regel ueber die
   Klassen faerbt sonst auch bildlose Container dunkel — dann steht
   dunkle Schrift auf dunklem Grund. */
[style*="background-image"] {
  background-color: var(--giks-ink);
  background-blend-mode: luminosity;
  box-shadow: inset 0 -140px 160px -80px var(--giks-ink),
              inset 0 0 0 100vmax rgba(16, 31, 59, .40);
}

/* Schrift im Bildbereich steht hell */
[style*="background-image"] h1,
[style*="background-image"] h2,
[style*="background-image"] h3,
[style*="background-image"] .uk-heading-large,
[style*="background-image"] .uk-heading-xlarge,
[style*="background-image"] p {
  color: #F2F4F7;
}

/* Die Claim-Zeile im Kopfbereich ist die einzige Stelle, an der
   Messing als Schriftfarbe richtig ist: gross, auf dunklem Bild,
   mit reichlich Kontrast. */
[style*="background-image"] .uk-text-secondary,
[style*="background-image"] .uk-text-secondary > * {
  color: var(--giks-brass-lit) !important;
  font-family: var(--giks-serif) !important;
  font-weight: 400;
}

/* Inhaltsbilder ruhig stellen */
.uk-panel img, .uk-card img, .el-image img, article img {
  border-radius: 0;
  filter: saturate(.9) contrast(1.02);
}

/* ==================================================================
   9 — Kopfbereich
   ================================================================== */

.uk-container .uk-navbar { background-color: rgba(16, 31, 59, .84); }

.uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle {
  font-family: var(--giks-sans);
  font-size: var(--t-klein);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(240, 243, 247, .82);
}
.uk-navbar-nav > li > a:hover,
.uk-navbar-nav > li.uk-active > a { color: var(--giks-brass-lit); }

/* ==================================================================
   10 — Einwilligungsdialog
   ================================================================== */

.tm-consent .uk-card {
  background: var(--giks-ink);
  border: 1px solid var(--giks-line-lit);
  border-radius: 0;
  padding: 1.4rem 1.5rem;
}
.tm-consent p {
  font-size: var(--t-klein); line-height: 1.55;
  color: rgba(231, 234, 240, .8); margin: 0 0 1rem;
}
.tm-consent a { color: var(--giks-brass-lit); }
.tm-consent .uk-button {
  font-size: var(--t-mono); line-height: 2.7; padding: 0 1.1rem;
  color: var(--giks-brass-lit);
  border-color: rgba(201, 169, 97, .55);
}
.tm-consent .uk-button:hover {
  background: var(--giks-brass-lit); color: var(--giks-ink);
}

/* ==================================================================
   11 — Symbole
   ================================================================== */

.uk-text-emphasis, .uk-text-emphasis svg { color: var(--giks-brass) !important; }
.uk-section-primary .uk-text-emphasis,
.uk-light .uk-text-emphasis,
.uk-light .uk-text-emphasis svg { color: var(--giks-brass-lit) !important; }
.el-image.uk-icon svg { stroke-width: 1.1; }

.uk-label, .uk-badge, .uk-marker {
  background-color: transparent;
  color: var(--giks-brass);
  border: 1px solid var(--giks-brass);
  border-radius: 0;
  font-family: var(--giks-mono);
  font-size: var(--t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ==================================================================
   12 — Kleine Bildschirme
   ================================================================== */

@media (max-width: 639px) {
  body { font-size: var(--t-text); }

  .uk-heading-large, .uk-heading-xlarge,
  .uk-heading-2xlarge, .uk-heading-3xlarge {
    font-size: var(--t-h1);
    line-height: 1.12;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .uk-heading-medium { font-size: var(--t-h2); }
  .uk-heading-small  { font-size: var(--t-gross); }

  /* uk-position-bottom-center zentriert ueber transform — ohne
     dessen Ruecknahme rutscht der Kasten aus dem Bild. */
  .tm-consent {
    width: auto !important;
    left: .75rem !important; right: .75rem !important;
    bottom: .75rem !important;
    transform: none !important;
  }
  .tm-consent .uk-card { padding: 1.1rem 1.15rem; }
  .tm-consent p { font-size: var(--t-klein); }
  .tm-consent .uk-button { font-size: var(--t-mono); letter-spacing: .08em; }
}

/* ==================================================================
   13 — Ruecksicht
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==================================================================
   14 — Blogübersicht
   ------------------------------------------------------------------
   Die Übersicht stellte bis zuletzt dreizehn vollständige Beiträge
   untereinander, jeden in einem Aufklapper, keine Überschrift
   verlinkt und jede als <h1>. Der Umbau in Anriss plus Verweis ist
   im Seitenlayout passiert (scripts/blog_uebersicht.py); hier steht
   nur, was sich mit CSS besser lösen lässt.
   ================================================================== */

/* Der Verweis auf den Beitrag kam in UIkits Blau daher — die einzige
   blaue Fläche auf einer Seite in Tinte und Messing. */
.uk-button-text {
  color: var(--giks-brass, #7E6430);
  letter-spacing: .1em;
}
.uk-button-text:hover,
.uk-button-text:focus {
  color: var(--giks-ink, #101F3B);
}
/* UIkit zieht unter uk-button-text eine Linie, die beim Überfahren
   von links einläuft. Sie soll dieselbe Farbe haben wie die Schrift,
   sonst bleibt ein blauer Strich übrig. */
.uk-button-text::before { border-bottom-color: currentColor; }

/* Datumszeile: dieselbe Behandlung wie die Kapitälchen im
   Neuentwurf — schmal, gesperrt, zurückhaltend. */
.uk-text-meta {
  font-family: var(--giks-mono);
  font-size: var(--t-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Die verlinkte Überschrift soll wie eine Überschrift aussehen und
   sich erst beim Überfahren als Link zu erkennen geben. */
.uk-h2 > a, h2 > a { color: inherit; text-decoration: none; }
.uk-h2 > a:hover, h2 > a:hover { color: var(--giks-brass, #7E6430); }

/* ==================================================================
   15 — Fachbeiträge: einheitliches Erscheinungsbild
   ------------------------------------------------------------------
   Die elf Beiträge waren typografisch elf verschiedene Dokumente:
   einer begann mit h4 als oberster Ebene, einer mit h2, zwei trugen
   den Titel nur im Kommentar. Quellenverzeichnisse hießen mal
   „Quellenverzeichnis", mal „Literaturverzeichnis" und standen mal
   als h2, mal als h3. Dazu Inline-Angaben wie style="margin-top:40px"
   und list-style-type:none direkt im Text.

   Hier steht das gemeinsame Erscheinungsbild. Wo im Text noch
   Inline-Angaben stehen, gewinnen sie — die gehören im Zuge der
   inhaltlichen Überarbeitung heraus.
   ================================================================== */

/* --- Autorenkasten ------------------------------------------------
   Bewusst zurückhaltend: Rahmenlos, nur eine Messinglinie oben. Ein
   Kasten mit Fläche und Schatten würde den Fachbeitrag darüber
   optisch zur Beigabe machen. */
.trenner.giks-autorblock {
  border: 0;
  border-top: 1px solid var(--giks-brass);
  margin: 3.5rem 0 0;
}
.autor-titel {
  font-family: var(--giks-mono);
  font-size: var(--t-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--giks-brass);
  margin: 1.4rem 0 1rem;
}
.autor { max-width: 100%; }
.autor-name {
  font-family: var(--giks-serif);
  font-size: var(--t-lead);
  font-weight: 600;
  margin: 0 0 .35rem;
}
.autor-rolle {
  font-size: var(--t-klein);
  line-height: 1.55;
  color: var(--giks-muted);
  margin: 0 0 .9rem;
}
.autor-text {
  font-size: var(--t-text);
  line-height: 1.65;
  margin: 0 0 1.1rem;
}
/* Die Profile sind der eigentliche Zweck des Blocks: vier von außen
   nachprüfbare Adressen. Als Liste ohne Aufzählungszeichen, mit
   Messing-Haarlinie links — das liest sich wie eine
   Zugehörigkeitsangabe in einer Veröffentlichung. */
.autor-profile {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1rem;
  border-left: 1px solid var(--giks-brass-lit);
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.autor-profile a {
  font-size: var(--t-klein);
  color: var(--giks-text);
  text-decoration: none;
  border-bottom: 1px solid var(--giks-line);
}
.autor-profile a:hover { color: var(--giks-brass); border-bottom-color: currentColor; }

/* --- Quellenverzeichnis -------------------------------------------
   Der Werktitel trägt den Link. Keine nackten Adressen, keine Zeile
   „Abrufbar unter:" — eine URL als Linktext ist für den Leser
   unlesbar und für Suchmaschinen wertlos. */
ul.quellen { list-style: none; margin: 1.2rem 0 0; padding: 0; }
ul.quellen > li.quelle {
  font-size: var(--t-klein);
  line-height: 1.6;
  color: var(--giks-muted);
  padding: .55rem 0 .55rem 2.2rem;
  border-top: 1px solid var(--giks-line);
  position: relative;
  text-indent: 0;
}
ul.quellen > li.quelle:last-child { border-bottom: 1px solid var(--giks-line); }
/* Fortlaufende Nummer in Messing — sie macht den Kurzbeleg im Text
   auffindbar, ohne dass eine Aufzählungsmarke nötig wäre. */
ul.quellen { counter-reset: quelle; }
ul.quellen > li.quelle::before {
  counter-increment: quelle;
  content: counter(quelle);
  position: absolute;
  left: 0;
  top: .55rem;
  font-family: var(--giks-mono);
  font-size: var(--t-mono);
  color: var(--giks-brass);
  font-variant-numeric: tabular-nums;
}
ul.quellen a { color: var(--giks-text); text-decoration: none;
               border-bottom: 1px solid var(--giks-line); }
ul.quellen a:hover { color: var(--giks-brass); border-bottom-color: currentColor; }
/* Angesprungene Quelle kurz hervorheben, damit man nach dem Klick auf
   einen Kurzbeleg sofort sieht, wo man gelandet ist. */
ul.quellen > li.quelle:target { background: rgba(201, 169, 97, .1); }

/* Vorspann und Standzeile */
.lead { font-size: var(--t-lead); line-height: 1.62; color: var(--giks-muted); }
.stand {
  font-family: var(--giks-mono);
  font-size: var(--t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--giks-muted);
}

/* Kennzeichnung der Quellenart — „[Essay, kein empirisches
   Arbeitspapier]“, „[Preprint, kein Begutachtungsverfahren]“.
   Zurückhaltend gesetzt: Sie ordnet ein, sie warnt nicht. Wer eine
   Quellenart offenlegt, wirkt sorgfältiger, nicht schwächer. */
.quelle-art {
  font-family: var(--giks-mono);
  font-size: var(--t-mono);
  letter-spacing: .08em;
  color: var(--giks-brass);
  white-space: nowrap;
}

/* ==================================================================
   16 — Beitragsseite
   ------------------------------------------------------------------
   Joomla gibt Zusatzfelder als Aufzählung mit Beschriftung aus. Auf
   jeder Beitragsseite stand deshalb über dem Text:

       · teaser.post: Die Wirtschaftsgeschichte kennt …
       · content.post: …

   „teaser.post" ist eine Feldbezeichnung aus der Datenbank. Die
   Beschriftungen sind inzwischen abgeschaltet (scripts/blog_felder.py);
   was bleibt, ist die Listenauszeichnung — und die gehört weg, sonst
   steht vor jedem Absatz ein Aufzählungspunkt.
   ================================================================== */

.fields-container {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fields-container > .field-entry {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.fields-container > .field-entry::marker { content: none; }
.fields-container > .field-entry:last-child { margin-bottom: 0; }

/* Beitragsbild: steht jetzt direkt unter der Überschrift statt ganz
   unten hinter dem Quellenverzeichnis. Begrenzt auf Textbreite und
   mit festem Seitenverhältnis — sonst springt das Layout beim Laden,
   und ein hochformatiges Bild schöbe den Text aus dem Sichtfeld. */
.field-entry.pic-post { margin-bottom: 2.5rem; }
.field-entry.pic-post img {
  display: block;
  /* KEIN erzwungenes Seitenverhältnis.
     Der erste Anlauf setzte aspect-ratio 16/9 mit object-fit: cover —
     das sieht bei querformatigen Bildern gut aus und zerstört
     quadratische. Die Beitragsbilder sind teils 1254 × 1254; im
     16:9-Rahmen verlor jedes davon 44 Prozent seiner Fläche, oben und
     unten je ein Fünftel. Auf einem Bild war dem Mann der Kopf
     abgeschnitten.

     Ein Beitragsbild ist keine Dekoration, die sich in einen Rahmen
     fügen muss — es ist Inhalt. Darum wird es begrenzt, nicht
     beschnitten: höchstens 860 px breit, höchstens 560 px hoch, im
     eigenen Seitenverhältnis. Ein querformatiges Bild füllt damit die
     Breite, ein quadratisches wird 560 × 560 und bleibt vollständig. */
  width: auto;
  max-width: 100%;
  /* EINHEITLICHE HOEHE statt einheitlichem Seitenverhaeltnis.
     Das ist der Kern: Die Beitragsbilder sind teils querformatig
     (1408 x 768), teils quadratisch (1254 x 1254). Ein gemeinsames
     Seitenverhaeltnis liesse sich nur durch Beschneiden herstellen —
     und zwei der quadratischen Bilder tragen Text am oberen UND am
     unteren Rand: Ueberschrift und Kennzeichenleiste. Jeder
     Querformat-Zuschnitt zerstoert eines von beiden.

     Gleiche Hoehe leistet dasselbe fuer das Auge: Die Bilder wiegen
     im Seitenaufbau gleich schwer und geben denselben senkrechten
     Takt vor, ohne dass ein einziger Bildpunkt verloren geht. Ein
     querformatiges Bild wird 854 x 480, ein quadratisches 480 x 480. */
  max-height: 480px;
  height: auto;
  margin-inline: auto;
  border: 1px solid var(--giks-line);
}

/* Auch für Bilder im Fließtext gilt: nicht beschneiden. */
.field-entry.content-post img {
  max-width: 100%;
  height: auto;
}

/* Anleser: derselbe Vorspann wie auf der Übersicht — größer als der
   Fließtext, zurückgenommen in der Farbe. Er ist die Brücke zwischen
   Überschrift und Text, kein eigener Absatz. */
.field-entry.teaser-post {
  font-family: var(--giks-sans);
  font-size: var(--t-lead);
  line-height: 1.62;
  color: var(--giks-muted);
  margin-bottom: 2rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--giks-line);
}
.field-entry.subline-post {
  font-family: var(--giks-mono);
  font-size: var(--t-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--giks-brass);
}
.field-entry.author-post {
  font-family: var(--giks-mono);
  font-size: var(--t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--giks-muted);
}


.field-entry.content-post h2 { margin-top: 2.6rem; }
.field-entry.content-post h3 { margin-top: 1.8rem; }


/* ==================================================================
   17 — Ein Satzspiegel für den ganzen Beitrag
   ------------------------------------------------------------------
   Nachgemessen standen auf einer Beitragsseite VIER verschiedene
   Breiten nebeneinander:

       Überschriften   1200 px, linksbündig
       Anleser          860 px, linksbündig
       Fließtext        602 px, Blocksatz
       Beitragsbild     860 px, mittig

   Eine Überschrift, die doppelt so breit läuft wie der Text darunter,
   liest sich nicht als Gliederung, sondern als Versehen — der Blick
   findet keine gemeinsame Kante.

   Jetzt EIN Satzspiegel für alles: 680 Pixel, mittig auf der Seite.
   Das entspricht bei der Textgröße etwa 72 Zeichen je Zeile und liegt
   damit im Bereich, den die Typografie seit Jahrhunderten als
   lesbar ansieht — schmal genug, dass das Auge den Zeilenanfang
   wiederfindet, breit genug, dass der Blocksatz keine Löcher reißt.

   Mittig statt links: Ein zentrierter Satzspiegel wirkt wie eine
   Seite, ein linksbündiger wie eine Spalte neben leerem Raum. Bei
   einem einzelnen Fachbeitrag ohne Randspalte ist die Seite die
   richtige Anmutung.
   ================================================================== */

/* Das Mass gehoert an den BEHAELTER, nicht an jedes Element.
   Der erste Anlauf setzte max-width: 72ch auf Ueberschrift, Anleser
   und Absatz einzeln. Das ging schief, weil `ch` sich an der EIGENEN
   Schriftgroesse bemisst: Auf einer 43-Pixel-Ueberschrift sind 72
   Zeichen rund 1870 Pixel — die Regel griff dort nie, und der Titel
   lief weiter ueber die volle Breite.

   Am Behaelter gemessen gilt die Schriftgroesse des Fliesstextes, und
   alles darin teilt sich dieselbe Kante: Titel, Anleser,
   Zwischentitel, Absatz, Bild, Quellenverzeichnis, Autorenblock. */
.uk-article {
  max-width: 72ch;
  margin-inline: auto;
}

/* Und deshalb muss die allgemeine Absatzbreite aus Abschnitt 3 hier
   weichen. Sie stammt aus der Zeit vor dem Satzspiegel und begrenzt
   JEDEN Absatz auf 72 seiner EIGENEN Zeichen. Im Autorenblock, der
   kleiner gesetzt ist, ergab das nachgemessen:

       .autor-rolle   14 px → 483 px
       .autor-text    15 px → 517 px
       Fliesstext     17 px → 586 px

   Drei Kanten in einem Block, den man als einen Block liest. Genau
   die Unruhe, die der Satzspiegel beseitigen soll — dieselbe Falle
   wie oben, nur eine Ebene tiefer. Das Mass steht am Behaelter; hier
   drin braucht es kein zweites. */
.uk-article p { max-width: none; }

/* KI-Transparenz: wie ein Rechtstext gesetzt, aber mit einer klaren,
   wiederverwendbaren Dokumentstruktur statt einer unverbundenen Folge von
   Absätzen. */
.giks-transparenz { margin-top: clamp(2rem, 5vw, 3.5rem); }
.giks-transparenz p {
  text-align: left; text-align-last: auto;
  hyphens: auto; -webkit-hyphens: auto;
}
.giks-transparenz > .uk-text-lead {
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
  color: var(--giks-muted);
}
.giks-transparenz__abschnitt {
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-top: 1px solid var(--giks-line);
}
.giks-transparenz__abschnitt h2 {
  margin: 0 0 .8rem; font-size: var(--t-gross); line-height: 1.25;
}
.giks-transparenz__abschnitt p { margin: 0; }
.giks-transparenz__stand {
  margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--giks-line);
  font-family: var(--giks-mono); font-size: var(--t-mono);
  letter-spacing: .04em; color: var(--giks-muted);
  text-align: left; text-align-last: auto;
}

/* Blocksatz für den Lesetext. Deutsche Texte brauchen dabei
   zwingend die Silbentrennung — ohne sie reißt der Blocksatz
   Löcher zwischen die Wörter, gerade bei langen Komposita wie
   „Verschwiegenheitspflicht“. Die Seite ist als lang=de
   ausgezeichnet, der Browser trennt also nach deutschen Regeln. */
.field-entry.content-post p,
.field-entry.content-post li,
.field-entry.teaser-post {
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* Überschriften, Quellen und Kurzangaben NICHT im Blocksatz:
   Dort entstehen bei wenigen Wörtern je Zeile riesige Lücken.

   Die Auswahl muss schwerer wiegen als die Blocksatzregel darüber
   (.field-entry.content-post li). Darum die Klasse des Verzeichnisses
   ZUSAETZLICH zum Feldnamen — sonst gewinnt die allgemeinere Regel,
   und die Quellenangaben stehen im Blocksatz. */
.uk-article h1, .uk-article h2, .uk-article h3,
.field-entry.content-post ul.quellen li,
ul.quellen li, .autor, .autor p,
.field-entry.subline-post, .field-entry.author-post {
  text-align: left;
  text-align-last: left;
  hyphens: manual;
}

/* Das Beitragsbild teilt sich den Satzspiegel — vorher war es das
   einzige Element mit eigener Breite und eigener Ausrichtung. */
.field-entry.pic-post img { max-height: 440px; }

/* Der Satzspiegel gilt auch fuer das Beitragsbild — es war zuvor das
   einzige Element mit eigener Breite. */
.field-entry.pic-post img { max-width: 100%; }


/* ==================================================================
   18  Blockzitat
   ------------------------------------------------------------------
   Beitrag 34 ist ein Vortragsbericht und lebt von woertlicher Rede.
   Vier Zitate stehen dort frei, ohne Sprecherangabe. Als normaler
   Absatz gesetzt gehen sie im Fliesstext unter — man sieht nicht,
   dass jemand spricht.

   Das Format bleibt zurueckhaltend: ein Strich in Messing, etwas
   Einzug, kursiv. Kein grosses Anfuehrungszeichen, keine graue
   Flaeche. Der Blocksatz wird hier ausgesetzt — ein Zitat von zwei
   Zeilen im Blocksatz reisst Loecher.
   ================================================================== */

.uk-article blockquote,
.field-entry.content-post blockquote {
  margin: 2rem 0;
  padding-left: 1.4rem;
  border-left: 2px solid var(--giks-brass);
  /* Die Schrift MUSS hier stehen. YOOtheme setzt im Theme-CSS
     `--bs-font-sans-serif: 'Roboto Mono'` und leitet daraus die
     Bootstrap-Grundschrift ab. Diese Regeln greifen fuer jedes
     Element OHNE uk- oder tm-Klasse — und ein blockquote aus dem
     Beitragstext hat keine. Ohne die Angabe hier stand das Zitat
     nachgemessen in der Schreibmaschinenschrift.

     Serif statt Sans: Der Fliesstext ist Sans gesetzt, die
     Ueberschriften Serif. Ein Zitat in der Ueberschriftenschrift
     hebt die woertliche Rede heraus, ohne dass es dafuer eine
     Flaeche oder ein grosses Anfuehrungszeichen braucht. */
  font-family: var(--giks-serif);
  font-size: var(--t-text);
  line-height: 1.6;
  font-style: italic;
  color: var(--giks-text);
}

.uk-article blockquote p,
.field-entry.content-post blockquote p {
  margin: 0;
  text-align: left;
  text-align-last: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}


/* ==================================================================
   19  Der Kompass-Stil auf allen Seiten
   ------------------------------------------------------------------
   Bis hierher trugen die Joomla-Seiten dieselben Schriften und
   Farben wie der Neuentwurf, aber nicht dessen HALTUNG: Über jedem
   Kopfbereich lag ein vollflächiges Stockfoto, darauf ein Titel in
   96 Pixeln Versalien. Das ist der Auftritt, den der Kompass-Stil
   gerade ablöst.

   An seine Stelle tritt das Band aus dem Neuentwurf: tiefe Tinte,
   die Marke in gesperrter Schreibmaschinenschrift, darunter ein
   Serifentitel in ruhiger Grösse — und dahinter das gezeichnete
   Instrument.

   DREI RÄNGE, NICHT EIN MOTIV ÜBERALL
   Ein identischer Kompass auf jeder Seite wäre keine Handschrift,
   sondern eine Tapete: beim zweiten Aufruf ermüdend, beim dritten
   albern. Darum ist er gestaffelt.

     --voll    Das Instrument, gross und animiert. Nur die
               Startseite. Es ist die einzige Bewegung der ganzen
               Webseite und bleibt nur wirksam, solange sie einmalig
               ist.
     --still   Dasselbe Instrument, stehend und weit
               zurückgenommen, vom Rand angeschnitten. Für
               Themenseiten.
     --ring    Nur der Gradring mit Teilung und Bezifferung, ohne
               Rose und Nadel. Für Verzeichnisseiten und
               Rechtstexte, wo ein volles Instrument zu viel
               Auftritt wäre.

   Das Canvas setzt `custom.js` ein — in den Layouts steht nur die
   Klasse. So bleibt die Entscheidung, welcher Rang wo gilt, an
   einer Stelle und nicht in vier JSON-Bäumen verstreut.
   ================================================================== */

.giks-kopf {
  position: relative;
  overflow: hidden;
  background-color: var(--giks-ink);
}

/* Das Instrument liegt hinter dem Text und ist für Vorleseprogramme
   nicht vorhanden — es trägt keine Aussage, die nicht auch im Text
   stünde. */
.giks-kopf > .giks-kompass {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* Der Schleier blendet das Instrument zur Textspalte hin aus.
   Ohne ihn läuft die Gravur unter die Schrift und beide verlieren.
   Zwei Verläufe: quer, damit links Ruhe herrscht, und längs, damit
   der Kopfbereich unten sauber in die Seite übergeht. */
.giks-kopf::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
  background:
    linear-gradient(90deg, var(--giks-ink) 0%, rgba(16,31,59,.96) 42%,
                    rgba(16,31,59,.55) 62%, transparent 100%),
    linear-gradient(to bottom, rgba(16,31,59,.7) 0%, transparent 20%,
                    transparent 72%, var(--giks-ink) 100%);
}

/* Alles, was YOOtheme in die Section legt, gehört über den Schleier. */
.giks-kopf > .uk-container,
.giks-kopf > div:not(.giks-kompass) { position: relative; z-index: 2; }

/* --- Rang 1: das Instrument, animiert ---------------------------- */
.giks-kopf--voll > .giks-kompass {
  top: -2%; right: -8%;
  width: min(900px, 50vw); height: min(900px, 50vw);
  opacity: .95;
}

/* --- Rang 2: stehend, angeschnitten ------------------------------ */
.giks-kopf--still > .giks-kompass {
  top: 50%; right: -14%;
  width: min(780px, 46vw); height: min(780px, 46vw);
  transform: translateY(-50%);
  opacity: .42;
}

/* --- Rang 3: nur der Gradring ------------------------------------ */
.giks-kopf--ring > .giks-kompass {
  top: 50%; right: -20%;
  width: min(680px, 42vw); height: min(680px, 42vw);
  transform: translateY(-50%);
  opacity: .30;
}

/* --- Rang 4: die Uhr ---------------------------------------------
   Sie wird als EINZIGE nicht angeschnitten.

   Ein Kompass darf über den Rand laufen — ein Gradring ist ein
   Ausschnitt aus einem grösseren Kreis, und die Rose bleibt lesbar.
   Eine Uhr ist ein Gegenstand. Eine halbe Uhr liest niemand als
   Absicht, sondern als Fehler; und wenn eine Ziffer fehlt, stimmt
   die Zeit nicht mehr, die sie anzeigt. Deshalb sitzt sie
   vollständig im Bild, mit Luft zum Rand. */
.giks-kopf--uhr > .giks-kompass {
  top: 50%; right: 3.5%;
  width: min(580px, 40vw); height: min(580px, 40vw);
  transform: translateY(-50%);
  opacity: 1;
}

/* Der Schleier muss für die Uhr zurücktreten. Der allgemeine blendet
   unten auf volle Tinte aus — bei einem angeschnittenen Kompass ist
   das der saubere Übergang zur Seite, bei einer Uhr frisst er ihr
   das untere Drittel weg. Hier also weicher und früher zu Ende. */
.giks-kopf--uhr::before {
  background:
    linear-gradient(90deg, var(--giks-ink) 0%, rgba(16,31,59,.94) 34%,
                    rgba(16,31,59,.34) 54%, transparent 70%),
    linear-gradient(to bottom, rgba(16,31,59,.5) 0%, transparent 15%,
                    transparent 85%, rgba(16,31,59,.82) 100%);
}

/* Schmale Geräte: Der Kompass ist hier Hintergrundmotiv, nicht
   Bildgegenstand — wie auf der Startseite des Neuentwurfs auch. Er
   rückt aus der Textspalte heraus und wird stark zurückgenommen. */
@media (max-width: 1099.98px) {
  .giks-kopf > .giks-kompass {
    top: -8%; right: -34%;
    width: min(620px, 92vw); height: min(620px, 92vw);
    transform: none;
    opacity: .26;
  }
  .giks-kopf::before {
    background: linear-gradient(to bottom, rgba(16,31,59,.72) 0%,
                transparent 26%, transparent 70%, var(--giks-ink) 100%);
  }

  /* Die Uhr macht das NICHT mit. Als Hintergrundmotiv bei 26 Prozent
     wäre sie unleserlich, angeschnitten wäre sie falsch. Sie rückt
     stattdessen unter den Text und bleibt ganz — schmale Geräte
     lesen ohnehin von oben nach unten.

     ZWEI KLASSEN, nicht eine: Die allgemeine Regel `.giks-kopf` setzt
     weiter unten in dieser Datei den Abstand für alle Kopfbereiche.
     Bei gleicher Spezifität gewinnt die spätere — mit `--uhr` allein
     wurde der Abstand hier also wieder überschrieben, und der Titel
     lief quer über das Zifferblatt. Gemessen: 160 Pixel Überlappung.

     Und `min-height: auto`, weil sonst das Mindestmass die Höhe
     deckelt und der Abstand gar nicht erst wirken kann. Die Höhe
     entsteht hier aus Text plus Uhr, und das ist auch richtig so:
     Beide brauchen ihren Platz, keins von beiden ist Hintergrund. */
  .giks-kopf.giks-kopf--uhr {
    min-height: auto;
    padding-bottom: min(82vw, 470px);
  }
  .giks-kopf--uhr > .giks-kompass {
    top: auto; bottom: 3%; right: 50%;
    width: min(72vw, 420px); height: min(72vw, 420px);
    transform: translateX(50%);
    opacity: .92;
  }
  .giks-kopf--uhr::before {
    background: linear-gradient(to bottom, rgba(16,31,59,.55) 0%,
                transparent 14%, transparent 88%, rgba(16,31,59,.8) 100%);
  }
}

/* ------------------------------------------------------------------
   Die Titelgrösse des Kompass-Stils
   ------------------------------------------------------------------
   Nachgemessen standen die Titel der Unterseiten bei 96 px, der des
   Neuentwurfs bei 62. 96 px sind keine Hierarchie mehr, sondern ein
   Plakat.

   Die Grösse wird hier gesetzt und NICHT dadurch erreicht, dass man
   `uk-heading-large` aus dem Layout entfernt: Das Kindtheme gibt für
   h1 gar keine Grösse vor, sie kommt aus theme.12.css — h1 liegt
   dort bei 34 px. Ohne die Klasse fiele der Titel also von 96 auf 34
   statt auf 62. Genau anders herum als beabsichtigt.
   ------------------------------------------------------------------ */
.giks-kopf h1,
.giks-kopf .uk-h1,
.giks-kopf [class*="uk-heading-"] {
  font-size: var(--t-h1);   /* 62 px am Anschlag */
  line-height: 1.12;
  color: #fff;
  text-transform: none;
  margin: 0;
}

/* Die Marke über dem Titel. `.giks-label` gibt es im Designsystem
   schon (Abschnitt 3) — auf dunklem Grund braucht sie nur den
   helleren Messington, sonst unterschreitet sie den Kontrast. */
.giks-kopf .giks-label,
.giks-kopf .uk-text-meta { color: var(--giks-brass-lit); }

.giks-kopf p,
.giks-kopf .uk-text-lead { color: #B9C3D3; max-width: 58ch; }
.giks-kopf strong { color: #DDE3EC; font-weight: 600; }

/* ------------------------------------------------------------------
   Die Höhe der Kopfbereiche
   ------------------------------------------------------------------
   Nachgemessen: Der Kopfbereich des Neuentwurfs ist 1.115 px hoch,
   die umgestellten Joomla-Köpfe kamen auf 389. Der Kompass misst je
   nach Rang 680 bis 900 px — er ragte also weit über den Bereich
   hinaus und wurde oben wie unten abgeschnitten. Statt eines
   Instruments sah man einen Ausschnitt Gravur.

   Die Höhe wird als Mindestmass gesetzt, nicht als feste Grösse:
   Ein Kopfbereich, dessen Titel über drei Zeilen läuft, darf
   wachsen. Und sie ist nach Rang gestaffelt — die Startseite trägt
   das Instrument als Auftritt, eine Verzeichnisseite nur als
   Andeutung, und dafür braucht sie weniger Raum.
   ------------------------------------------------------------------ */
.giks-kopf {
  padding-top: clamp(5.5rem, 9vw, 8.5rem);
  padding-bottom: clamp(4rem, 7vw, 6.5rem);
}
.giks-kopf--voll  { min-height: clamp(460px, 52vw, 680px); }
.giks-kopf--uhr   { min-height: clamp(520px, 56vw, 720px); }
.giks-kopf--still { min-height: clamp(400px, 44vw, 560px); }
.giks-kopf--ring  { min-height: clamp(340px, 36vw, 460px); }

@media (max-width: 1099.98px) {
  .giks-kopf--voll,
  .giks-kopf--still,
  .giks-kopf--ring { min-height: clamp(280px, 60vw, 420px); }
  /* Fuer die Uhr steht die Hoehe in Abschnitt 19 — sie entsteht dort
     aus Text plus Uhr und nicht aus einem Mindestmass. */
}


/* ==================================================================
   20  Was das Designsystem bisher nicht erreicht hat
   ------------------------------------------------------------------
   Beim Übertragen des Kompass-Stils auf alle Seiten kam heraus, dass
   einzelne Bausteine nie erfasst worden waren. Sie fielen nicht auf,
   solange die Kopfbereiche mit Stockfotos ohnehin aus der Reihe
   tanzten.
   ================================================================== */

/* --- Aufklappbare Fragen (FAQ) -----------------------------------
   Nachgemessen standen die Fragen in rgb(65,103,178) — dem
   Bootstrap-Blau aus theme.12.css — und in Roboto. Ein Signalblau in
   einer Welt aus Tinte und Messing, dazu eine Schrift, die auf der
   Seite sonst nirgends vorkommt.

   Die Frage ist eine Überschrift, kein Verweis: Sie bekommt die
   Groteske des Hauses in Halbfett und steht in Tinte. Messing bleibt
   dem Zeichen vorbehalten, das auf- und zuklappt. */
/* Die Auswahl muss ZWEI Klassen tragen. Der erste Anlauf schrieb nur
   `.uk-accordion-title` und blieb wirkungslos, obwohl custom.css nach
   theme.12.css lädt: Dort steht `.uk-accordion-default
   .uk-accordion-title` — zwei Klassen gegen eine, und die höhere
   Spezifität gewinnt unabhängig von der Reihenfolge. Nachgesehen im
   Browser, nicht vermutet: Die Regel stand in der Trefferliste und
   wurde trotzdem überstimmt. */
.uk-accordion-default .uk-accordion-title,
.uk-accordion > li > .uk-accordion-title {
  font-family: var(--giks-sans);
  font-weight: 600;
  font-size: var(--t-text);
  line-height: 1.4;
  color: var(--giks-text);
  text-decoration: none;
}
.uk-accordion-default .uk-accordion-title:hover,
.uk-accordion-default .uk-accordion-title:focus,
.uk-accordion > li > .uk-accordion-title:hover {
  color: var(--giks-brass); text-decoration: none;
}
.uk-accordion-default .uk-open > .uk-accordion-title,
.uk-accordion > li.uk-open > .uk-accordion-title { color: var(--giks-brass); }

/* Die Trennlinie zwischen den Fragen: eine Haarlinie, keine Kante. */
.uk-accordion > li { border-top: 1px solid var(--giks-line); }
.uk-accordion > li:last-child { border-bottom: 1px solid var(--giks-line); }
.uk-accordion > li > .uk-accordion-title { padding: 1.1rem 0; display: block; }
.uk-accordion-content { margin-top: 0; padding-bottom: 1.4rem; }

/* --- Verweise im Fliesstext --------------------------------------
   Dieselbe Ursache, andere Stelle: Ein Verweis im Text stand im
   Bootstrap-Blau statt in der Hausfarbe. */
.uk-section a:not(.uk-button):not(.el-link):not(.uk-accordion-title):not([class*="uk-nav"]),
.uk-panel a:not(.uk-button) {
  color: var(--giks-brass);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: from-font;
}
.uk-section a:not(.uk-button):hover { color: var(--giks-ink); }

/* Im dunklen Kopfbereich der hellere Messington — der dunkle
   unterschreitet dort den Kontrast. */
.giks-kopf a:not(.uk-button) { color: var(--giks-brass-lit); }

/* Der Anleser im Kopfbereich: die Aussage unter dem Titel. Er stand
   als eigene Ueberschriftsebene da (h3, heading-small) und trug damit
   eine Hierarchie vor, die es nicht gibt — es ist ein Satz, keine
   Gliederung. */
.giks-kopf .giks-kopf-anleser {
  font-family: var(--giks-sans);
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: #B9C3D3;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 1.4rem;
  max-width: 46ch;
}
.giks-kopf .giks-kopf-anleser p { margin: 0; }

/* Die Trennlinie zwischen aufklappbaren Einträgen stand im
   Bootstrap-Blau. Eine farbige Linie ist im Kompass-Stil ein
   Signal — und hier gibt es nichts zu signalisieren, es ist nur
   eine Trennung. Haarlinie in Tinte.

   Der erste Anlauf schrieb `li.el-item` und traf nichts: YOOtheme
   setzt für ein Akkordeon <article class="el-item">, kein <li>.
   Nachgesehen im Browser — die Meldung lautete wörtlich
   "ARTICLE.el-item borderTopColor". */
.uk-accordion > .el-item,
.uk-accordion > .el-item + .el-item { border-top-color: var(--giks-line); }

/* ==================================================================
   21  Die Fusszeile
   ------------------------------------------------------------------
   Sie stand nicht in einem Modul und nicht in einem der vier
   Seitenlayouts, sondern in den Parametern des Template-Stils. Darum
   ist sie bei jedem bisherigen Durchgang durchgerutscht — und darum
   stand dort noch die Messingkachel des alten Auftritts und eine
   falsch geschriebene Firmierung.

   Was sie ausserdem nie erreicht hat: der Blocksatz aus Abschnitt 1.
   Er ist fuer Lesetext gedacht, der ueber 60 bis 70 Zeichen laeuft.
   In einer Fusszeilenspalte von rund 420 Pixeln stehen drei bis fuenf
   Woerter je Zeile — dort reisst er Luecken auf, statt eine Kante zu
   geben. Gemessen: „Mobil:   +49   (0)163“ mit dreifachem Wortabstand.
   ================================================================== */

footer p,
footer li,
footer address {
  text-align: left;
  text-align-last: auto;
  hyphens: manual;
  max-width: none;
}

/* Die Wortmarke sitzt in der Fusszeile auf demselben Grund wie das
   schraege Feld, aus dem sie besteht — sichtbar bleibt der weisse
   Schriftzug. Etwas Luft darunter, damit sie nicht auf der Anschrift
   klebt. */
footer img[src*="logo_giks"] { margin-bottom: 1.4rem; }

/* ==================================================================
   22  Die letzten zwei Groessen neben der Skala
   ------------------------------------------------------------------
   Nach der Umstellung auf die acht Stufen blieben genau zwei Werte
   uebrig, und beide kamen nicht aus diesem Designsystem, sondern aus
   dem Theme beziehungsweise aus UIkit:

     16 px   `.el-link`         — der Weiterlesen-Verweis in Rastern
     12 px   `.uk-text-small`   — UIkits Kleinschrift, im Blog

   Sie fielen nie auf, weil daneben ohnehin fuenfzehn Groessen
   standen. In einer Skala aus acht Stufen ist jede neunte sofort
   sichtbar — das ist der eigentliche Gewinn: Abweichungen melden
   sich von selbst.
   ================================================================== */

.el-link { font-size: var(--t-text); }

/* UIkits Kleinschrift auf die Kartenstufe. Sie traegt im Blog die
   Datumszeilen und Anrisse — dieselbe Rolle wie Karten und
   Fussbereich, also dieselbe Stufe. */
.uk-text-small { font-size: var(--t-klein); }

/* ==================================================================
   23  Rang 5: der Leuchtturm
   ------------------------------------------------------------------
   Er darf angeschnitten werden, aber nur unten und nur wenig: Ein
   Turm, dessen Fuss im Bildrand steht, wirkt hoch — einer, dem die
   Laterne fehlt, wirkt abgeschnitten. Oben also Luft, unten darf das
   Meer aus dem Bild laufen.

   Anders als bei Kompass und Uhr sitzt er nicht rechts aussen: Der
   Turm steht in seiner eigenen Zeichnung schon aus der Mitte (bei
   0,30 R rechts), und beides zusammen schoebe ihn aus dem Bild.
   ================================================================== */
.giks-kopf--leuchtturm > .giks-kompass {
  /* right von -2% auf 7%: Der Turm soll weiter nach links — er sass
     am Rand wie angeklebt. Zusammen mit der Achse der Zeichnung
     (0,06 statt 0,30 ohne Meer) rueckt er deutlich ins Bild. */
  top: 50%; right: 7%;
  width: min(620px, 44vw); height: min(620px, 44vw);
  transform: translateY(-50%);
  opacity: 1;
}
.giks-kopf--leuchtturm { min-height: clamp(500px, 54vw, 700px); }

/* Der Schleier wie bei der Uhr: weicher, damit er dem Turm nicht das
   Fundament und dem Feuer nicht den Strahl nimmt. */
.giks-kopf--leuchtturm::before {
  background:
    linear-gradient(90deg, var(--giks-ink) 0%, rgba(16,31,59,.94) 32%,
                    rgba(16,31,59,.30) 52%, transparent 68%),
    linear-gradient(to bottom, rgba(16,31,59,.5) 0%, transparent 16%,
                    transparent 86%, rgba(16,31,59,.8) 100%);
}

@media (max-width: 1099.98px) {
  /* Wie die Uhr: unter den Text statt hinter ihn. Ein Leuchtturm bei
     26 Prozent Deckung waere ein Schatten, kein Zeichen. */
  .giks-kopf.giks-kopf--leuchtturm {
    min-height: auto;
    padding-bottom: min(84vw, 480px);
  }
  .giks-kopf--leuchtturm > .giks-kompass {
    top: auto; bottom: 0; right: 50%;
    width: min(78vw, 440px); height: min(78vw, 440px);
    transform: translateX(50%);
    opacity: .95;
  }
  .giks-kopf--leuchtturm::before {
    background: linear-gradient(to bottom, rgba(16,31,59,.55) 0%,
                transparent 14%, transparent 90%, rgba(16,31,59,.7) 100%);
  }
}

/* ==================================================================
   23a  Rang 6: der Mechanismus von Antikythera
   ------------------------------------------------------------------
   Er ist HOCHKANT (der Kasten des Originals misst rund 31,5 x 19),
   deshalb bekommt die Leinwand ein stehendes Format — die Zeichnung
   richtet ihren Massstab selbst an der knapperen Kante aus.

   Wie die Uhr wird er NICHT angeschnitten: Ein Geraet mit Skala ist
   ein Gegenstand, und einem beschnittenen Tierkreis fehlten Zeichen —
   dann stimmte die Anzeige nicht mehr, die er zeigt. */
.giks-kopf--antikythera > .giks-kompass {
  top: 50%; right: 7%;
  /* Deutlich kleiner als der erste Wurf (500 x 680): Das Geraet
     fuellte den Kopf fast bis an beide Kanten und drueckte auf den
     Titel — beanstandet vom Auftraggeber. Ein Instrument dieser
     Dichte darf klein stehen; die Skala bleibt ab ~380 px Breite
     lesbar. */
  width: min(380px, 26vw); height: min(520px, 35.5vw);
  transform: translateY(-50%);
  opacity: 1;
}
.giks-kopf--antikythera { min-height: clamp(480px, 50vw, 660px); }

/* Der Schleier wie bei Uhr und Leuchtturm: weicher als der
   allgemeine, damit er dem Kasten nicht den Boden nimmt. */
.giks-kopf--antikythera::before {
  background:
    linear-gradient(90deg, var(--giks-ink) 0%, rgba(16,31,59,.94) 32%,
                    rgba(16,31,59,.30) 52%, transparent 68%),
    linear-gradient(to bottom, rgba(16,31,59,.5) 0%, transparent 16%,
                    transparent 86%, rgba(16,31,59,.8) 100%);
}

@media (max-width: 1099.98px) {
  /* Wie Uhr und Leuchtturm: unter den Text statt hinter ihn — als
     Hintergrundmotiv bei 26 Prozent waere die Skala unleserlich. */
  .giks-kopf.giks-kopf--antikythera {
    min-height: auto;
    padding-bottom: min(92vw, 470px);
  }
  .giks-kopf--antikythera > .giks-kompass {
    top: auto; bottom: 0; right: 50%;
    width: min(56vw, 300px); height: min(82vw, 440px);
    transform: translateX(50%);
    opacity: .95;
  }
  .giks-kopf--antikythera::before {
    background: linear-gradient(to bottom, rgba(16,31,59,.55) 0%,
                transparent 14%, transparent 90%, rgba(16,31,59,.7) 100%);
  }
}

/* ==================================================================
   23b  Rang 7: der Transformerfilm
   ------------------------------------------------------------------
   Die Klasse `giks-kopf--sextant` liegt im YOOtheme-Layout der
   Datenbank und bleibt als stabiler Einhaengepunkt erhalten. Ihr
   frueheres Sextanten-Canvas ersetzt custom.js durch den vollstaendigen
   Transformerfilm. Die sichtbare Gestaltung nennt und zeigt nur noch
   den Transformer; der historische Klassenname tritt nirgends auf.

   Auf breiten Bildschirmen steht der Film als zweite, klar getrennte
   Hero-Spalte rechts. Unter 1200 px folgt er dem Text als eigener
   Block. So laufen weder Ueberschriften noch Schaltflaechen ueber die
   Animation, und der Pausenknopf bleibt immer erreichbar. */
.giks-kopf--sextant {
  min-height: clamp(560px, 50vw, 690px);
}

.giks-kopf--sextant > .giks-transformer {
  --tr-ink: #101f3b;
  top: 50%;
  right: 0;
  bottom: auto;
  left: auto;
  z-index: 3;
  width: clamp(630px, 52.5vw, 760px);
  aspect-ratio: 16 / 10;
  background: var(--giks-ink);
  transform: translateY(-42%);
}

/* Im Hero ist der Film kein eingebetteter Player. Sein Grund geht
   nahtlos in die Kopfflaeche ueber; nur der Bildinhalt bleibt. */
.giks-kopf--sextant > .giks-transformer::before {
  border: 0;
  box-shadow: none;
}

@media (min-width: 1200px) {
  /* Die groessere Buehne schliesst rechts buendig ab. Der bewegte
     Bildinhalt behaelt trotzdem Luft fuer den laengsten Logit-Balken. */
  .giks-kopf--sextant > .giks-transformer .giks-tr-film__canvas {
    transform: translateX(-1.125rem);
  }
}

.giks-kopf--sextant p,
.giks-kopf--sextant .uk-text-lead {
  max-width: 52ch;
}

.giks-kopf--sextant::before {
  background:
    linear-gradient(90deg, var(--giks-ink) 0%, rgba(16,31,59,.97) 35%,
                    rgba(16,31,59,.42) 50%, transparent 62%),
    linear-gradient(to bottom, rgba(16,31,59,.42) 0%, transparent 15%,
                    transparent 91%, rgba(16,31,59,.34) 100%);
}

@media (max-width: 1199.98px) {
  .giks-kopf.giks-kopf--sextant {
    min-height: auto;
    padding-bottom: clamp(24rem, 66vw, 35rem);
  }

  .giks-kopf--sextant > .giks-transformer {
    top: auto;
    right: 50%;
    bottom: clamp(1.5rem, 3vw, 2.25rem);
    width: min(calc(100% - 3rem), 760px);
    aspect-ratio: 16 / 10;
    transform: translateX(50%);
  }

  .giks-kopf--sextant::before {
    background: linear-gradient(to bottom, rgba(16,31,59,.5) 0%,
                transparent 12%, transparent 96%, rgba(16,31,59,.28) 100%);
  }
}

@media (max-width: 599.98px) {
  .giks-kopf.giks-kopf--sextant {
    /* Figurenhoehe (5/4 der Breite) plus Luft zum Text und Rand. */
    padding-bottom: calc(125vw - .25rem);
  }

  .giks-kopf--sextant > .giks-transformer {
    right: 1rem;
    bottom: 1rem;
    width: calc(100% - 2rem);
    aspect-ratio: 4 / 5;
    transform: none;
  }
}

/* ==================================================================
   24  Die Bausteine der Landingpage
   ------------------------------------------------------------------
   Übernommen aus site/neu/seite.css, weil die Landingpage sie schon
   hat und weil sie die Bausteine sind, aus denen der KI-Kompass und
   die GiKS Suite bestehen. Ohne sie liessen sich die beiden Seiten im
   Builder nur als Fliesstext bauen.

   Alles auf die Token der Skala gelegt und mit `giks-` bezeichnet,
   damit nichts mit UIkit kollidiert. Im Builder werden sie über das
   Feld „class“ an einer Section, Row oder Column gesetzt.

   Die Bänder selbst bekommen KEINE eigenen Klassen: Dafür hat
   YOOtheme `style: default / muted / primary`, und die sind im
   Designsystem längst auf Papier, Ton und Tinte gelegt. Eine eigene
   Bandklasse wäre ein zweiter Weg zum selben Ziel.
   ================================================================== */

/* ---------- Verfahrensschritte -----------------------------------
   Nummer, Titel, Erläuterung, Ergebnis. Die Trennlinien laufen durch,
   der Text ist begrenzt: Sonst entstehen Zeilen von 130 Zeichen, die
   je Schritt anders umbrechen — auch das liest das Auge als Unruhe. */
.giks-schritte { display: grid; margin-top: 2.5rem; }
.giks-schritt {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2.5vw, 2.2rem);
  padding: 1.8rem 0;
  border-top: 1px solid var(--giks-line);
  align-items: start;
}
.giks-schritt:last-child { border-bottom: 1px solid var(--giks-line); }
.giks-schritt > .giks-nr {
  font-family: var(--giks-mono); font-size: var(--t-mono);
  color: var(--giks-brass); letter-spacing: .1em;
  padding-top: .4rem; font-variant-numeric: tabular-nums;
}
.giks-schritt h3, .giks-schritt .uk-h3 { margin: 0 0 .45rem; }
.giks-schritt p {
  color: var(--giks-muted); font-size: var(--t-klein); max-width: 70ch;
  margin: 0;
}
.giks-schritt .giks-ergebnis {
  font-family: var(--giks-mono); font-size: var(--t-mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--giks-brass); display: block; margin-top: .6rem;
}

/* ---------- Bausteine ---------------------------------------------
   Ein Raster aus Haarlinien statt aus Kästen: Die Fugen entstehen
   durch den Abstand von einem Pixel auf farbigem Grund. Karten mit
   Rahmen und Schatten wären eine andere Sprache. */
.giks-bausteine {
  display: grid; gap: 1px; margin-top: 2.8rem;
  background: var(--giks-line); border: 1px solid var(--giks-line);
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .giks-bausteine { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .giks-bausteine { grid-template-columns: repeat(3, 1fr); } }
.giks-bausteine > * {
  background: var(--giks-paper); padding: 1.6rem 1.7rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.giks-bausteine .giks-gruppe {
  font-family: var(--giks-mono); font-size: var(--t-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--giks-brass);
}
.giks-bausteine h3, .giks-bausteine .uk-h3 { margin: 0; }
.giks-bausteine p {
  font-size: var(--t-klein); color: var(--giks-muted); margin: 0;
  max-width: none;
}

/* Auf getöntem und auf dunklem Grund tragen die Kacheln den Grund der
   Section — sonst schwämmen weisse Karten darauf. */
.uk-section-muted .giks-bausteine > * { background: var(--giks-tint); }
.uk-section-primary .giks-bausteine,
.uk-light .giks-bausteine {
  background: var(--giks-line-lit); border-color: var(--giks-line-lit);
}
.uk-section-primary .giks-bausteine > *,
.uk-light .giks-bausteine > * { background: var(--giks-ink); }
.uk-section-primary .giks-bausteine .giks-gruppe,
.uk-light .giks-bausteine .giks-gruppe { color: var(--giks-brass-lit); }
.uk-section-primary .giks-bausteine p,
.uk-light .giks-bausteine p { color: #96A2B6; }

/* ---------- Fallprofil --------------------------------------------
   Eine Messinglinie oben, darunter Kennung, Text und eine Kennzahl-
   liste. Kein Kasten: Das Profil ist ein Beleg, keine Anzeige. */
.giks-fall {
  border-top: 1px solid var(--giks-brass); padding-top: 1.4rem;
  display: flex; flex-direction: column; gap: .85rem;
}
.giks-fall .giks-gruppe {
  font-family: var(--giks-mono); font-size: var(--t-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--giks-brass);
}
.giks-fall p { font-size: var(--t-klein); color: var(--giks-muted); margin: 0; }
.giks-fall dl {
  margin: 0; display: grid; grid-template-columns: auto 1fr;
  gap: .3rem .9rem; font-size: var(--t-klein);
}
.giks-fall dt {
  font-family: var(--giks-mono); font-size: var(--t-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--giks-brass); padding-top: .3rem; margin: 0;
}
.giks-fall dd { margin: 0; color: var(--giks-text); }

/* ---------- Zweispalter mit fester Textspalte ----------------------
   Links die Überschrift in einer Spalte, die nie breiter wird als
   40 Zeichen; rechts der Inhalt. Das hält die Überschrift lesbar,
   auch wenn die Seite sehr breit wird. */
.giks-zwei { display: grid; gap: clamp(2rem, 4vw, 4.5rem); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .giks-zwei { grid-template-columns: minmax(0, 40ch) minmax(0, 1fr); }
}

/* ==================================================================
   25  Die drei Ausgangslagen
   ------------------------------------------------------------------
   Nummer, Frage in Anführungszeichen, Erläuterung. Dieselbe
   Haarlinienfuge wie beim Bausteinraster, aber immer dreispaltig:
   Die drei Lagen sind eine Reifeachse — noch nicht begonnen,
   unsystematisch begonnen, begonnen ohne Wirkung — und die liest man
   nur nebeneinander als Achse. Untereinander wären es drei Aussagen.

   Die Frage steht in der Serife und in Anführungszeichen, weil sie
   ein Zitat ist: der Satz, mit dem Kunden anrufen.
   ================================================================== */
.giks-lagen {
  display: grid; gap: 1px; margin-top: 2.6rem;
  background: var(--giks-line); border: 1px solid var(--giks-line);
  grid-template-columns: 1fr;
}
@media (min-width: 820px) { .giks-lagen { grid-template-columns: repeat(3, 1fr); } }
.giks-lagen > * {
  background: var(--giks-paper); padding: clamp(1.6rem, 2.6vw, 2.4rem);
  display: flex; flex-direction: column; gap: .7rem;
}
.uk-section-muted .giks-lagen > * { background: var(--giks-tint); }
.giks-lagen .giks-nr {
  font-family: var(--giks-mono); font-size: var(--t-mono);
  color: var(--giks-brass); letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}
.giks-lagen .giks-frage {
  font-family: var(--giks-serif); font-weight: 600;
  font-size: var(--t-lead); line-height: 1.3;
  color: var(--giks-text); margin: 0; max-width: none;
  text-align: left; hyphens: manual;
}
.giks-lagen p:not(.giks-frage) {
  font-size: var(--t-klein); color: var(--giks-muted);
  margin: 0; max-width: none;
}

/* Der Schlusssatz unter einem Block — er fasst zusammen und steht
   deshalb enger und ruhiger als Fliesstext. */
.giks-schluss {
  margin-top: 2rem; max-width: 62ch;
  font-size: var(--t-klein); color: var(--giks-muted);
}
.giks-schluss strong { color: var(--giks-text); }
.uk-section-primary .giks-schluss,
.uk-light .giks-schluss { color: #A9B5C7; }
.uk-section-primary .giks-schluss strong,
.uk-light .giks-schluss strong { color: #fff; }

/* ==================================================================
   26  Zwei Altlasten in der FAQ
   ------------------------------------------------------------------
   1. DAS AUFKLAPPZEICHEN WAR BLAU. Gemessen rgb(65,103,178) — das
      letzte Bootstrap-Blau des alten Auftritts. Es sass nicht auf
      einer Farbklasse, sondern auf dem SVG des Akkordeon-Symbols
      selbst, und ist deshalb bei der Blau-Durchsicht durchgerutscht:
      Gesucht wurde nach Regeln, nicht nach gerenderten Farben.

   2. MESSING ALS FLAECHE. Die vier Symbolgrafiken der FAQ sind
      vollflaechig eingefaerbte Formen — ein Zahnrad, ein Schloss, ein
      Ablaufzeichen. Sie waren beim Umfaerben von Blau/Orange auf
      Messing umgestellt worden, und damit wurde aus einem falschen
      Farbton eine falsche VERWENDUNG: Grundsatz 2 des Designsystems
      sagt, Messing ist Linienfarbe — Haarlinien, Ziffern,
      Kapitaelchen, Umrisse. Nie Flaeche.

      Sie werden nicht umgefaerbt, sondern entfernt. Eine gefuellte
      Piktogrammflaeche laesst sich nicht in eine Haarlinie
      verwandeln, ohne sie neu zu zeichnen — und die Rubriktitel sagen
      ohnehin, worum es geht. Exklusivitaet entsteht durch Auslassung.
   ================================================================== */

/* Die Farbe sitzt am UMSCHLIESSENDEN SPAN, nicht am SVG. Ein erster
   Anlauf setzte sie am svg und blieb wirkungslos — das svg erbt sie
   vom span, und die geerbte Farbe wird von der eigenen nicht
   ueberschrieben, weil es gar keine eigene gab. */
/* ZWEI KLASSEN, nicht eine — sonst gewinnt das Theme.
   Die Regel dort heisst `.uk-accordion-default .uk-accordion-icon`
   (Spezifitaet 0,2,0); eine einklassige Regel verliert dagegen, auch
   wenn sie spaeter geladen wird. Genau dieselbe Falle wie seinerzeit
   beim Akkordeon-TITEL. Die Ladereihenfolge hilft nur bei GLEICHER
   Spezifitaet — das steht so auch oben im Kopf dieser Datei und ist
   trotzdem zweimal uebersehen worden. */
.uk-accordion-default .uk-accordion-icon,
.uk-accordion-default .uk-accordion-icon svg { color: var(--giks-brass); }
.uk-accordion-default .uk-accordion-title:hover .uk-accordion-icon,
.uk-accordion-default .uk-accordion-title[aria-expanded="true"] .uk-accordion-icon {
  color: var(--giks-text);
}

/* DER AKTIVE MENUEPUNKT WAR EBENFALLS BLAU — dieselbe UIkit-Grundfarbe
   rgb(65,103,178), diesmal am Verweis der laufenden Seite. Auf dem
   dunklen Kopfbereich ist Blau dort nicht nur falsch, sondern schlecht
   lesbar. Der aktive Punkt steht jetzt in Weiss und traegt seine
   Kennzeichnung ueber die Unterstreichung, die das Theme ohnehin
   setzt. */
.uk-navbar-nav > li.uk-active > a,
.uk-navbar-nav > li > a.uk-active,
.uk-navbar-nav > li:hover > a { color: #fff; }
.uk-navbar-nav > li > a { color: #B9C3D3; }

/* Der aktive Punkt im ausklappbaren Menue. Er stand ebenfalls in
   UIkit-Blau — auf dem Schreibtisch unsichtbar, weil das Menue dort
   nicht ausklappt, auf dem Telefon aber der erste Punkt, den man
   sieht. Gefunden nur, weil die Messung auch unsichtbare Elemente
   gezaehlt hat.

   Zwei Klassen, aus dem Grund, der eine Regel weiter oben steht. */
.uk-nav-default > li.uk-active > a,
.uk-nav-primary > li.uk-active > a,
.uk-nav > li.uk-active > a { color: var(--giks-brass-lit); }
.uk-nav-default > li > a:hover,
.uk-nav-primary > li > a:hover { color: #fff; }

/* ==================================================================
   27  Verweise auf dunklem Grund
   ------------------------------------------------------------------
   Der Kontaktverweis in der Fusszeile stand in dunklem Messing auf
   Tinte: gemessen 3,38:1 bei 17 px, das Minimum fuer Text unter 24 px
   ist 4,5:1. Auf allen sieben Seiten, bei 1440 wie bei 390 Pixeln.

   Die Ursache war eine Luecke im Designsystem, nicht eine falsche
   Regel: Fuer den dunklen KOPFbereich gibt es die Aufhellung auf
   `--giks-brass-lit` (Abschnitt 19), fuer den ebenso dunklen
   FUSSbereich fehlte sie. Auf hellem Grund traegt `--giks-brass`
   sauber — 5,60:1 auf Weiss, 5,17:1 auf Ton.

   Warum die Stelle bei jedem Durchgang durchgerutscht ist: Der
   Verweis steht gar nicht im Quelltext. Dort steht Joomlas
   Spamschutz-Element `<joomla-hidden-mail>`, und erst dessen Skript
   baut daraus ein `<a>` — wobei es class und style ENTFERNT. In
   keiner Datei war also etwas zu finden; nur im gerenderten Zustand.
   ================================================================== */
/* DIESELBE :not()-KETTE wie die helle Regel weiter oben — sonst
   verliert diese hier. Jene hat durch vier :not() mit Klassen die
   Spezifitaet 0,5,1; ein schlichtes `footer a:not(.uk-button)` kommt
   auf 0,1,2 und wird ueberstimmt, obwohl es spaeter steht. Mit
   gleicher Spezifitaet entscheidet die Reihenfolge, und die steht
   hier richtig.

   Das ist in dieser Datei der DRITTE Fall desselben Musters (nach dem
   Akkordeon-Titel und dem Akkordeon-Symbol). Es gehoert offenbar zu
   diesem Theme: Wer eine YOOtheme-Vorgabe ueberschreiben will, muss
   ihre Selektorenkette mitnehmen. */
.uk-section-primary a:not(.uk-button):not(.el-link):not(.uk-accordion-title):not([class*="uk-nav"]),
.uk-light a:not(.uk-button):not(.el-link):not(.uk-accordion-title):not([class*="uk-nav"]),
.uk-section-primary .uk-panel a:not(.uk-button) {
  color: var(--giks-brass-lit);
}
.uk-section-primary a:not(.uk-button):hover,
.uk-light a:not(.uk-button):hover { color: #fff; }

/* ==================================================================
   28  Die restlichen Landingpage-Bausteine
   ------------------------------------------------------------------
   Mit diesem Abschnitt kann die Startseite die Landingpage
   VOLLSTÄNDIG abbilden — alle zehn Abschnitte. Was hier steht, sind
   die Bausteine, die Abschnitt 24/25 noch nicht hatten: die
   Angebotszeile des Kopfbereichs, das Zitat, die Karten der
   Geschäftsführung und vier kleine Textrollen.
   ================================================================== */

/* Die Angebotszeile: Kompass → Suite → Ihre KI-Umgebung */
.giks-duo {
  display: flex; flex-wrap: wrap; gap: .6rem 1.1rem; margin-top: 1.9rem;
  font-family: var(--giks-mono); font-size: var(--t-mono);
  letter-spacing: .13em; text-transform: uppercase;
  color: #93A0B6; align-items: center;
}
.giks-duo b { color: var(--giks-brass-lit); font-weight: 400; }
.giks-duo i { font-style: normal; color: #4C5A72; }

/* Bausteinraster: getönte Kacheln auf hellem Grund (Schutzschild der
   Datenhoheit) und die Zweierteilung für die vier Schwerpunkte */
.giks-bausteine--ton > * { background: var(--giks-tint); }
.giks-bausteine--paar { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .giks-bausteine--paar { grid-template-columns: 1fr 1fr !important; }
}

/* Das Zitat auf dunklem Grund */
.giks-zitat {
  font-family: var(--giks-serif); font-weight: 400;
  font-size: var(--t-zahl); line-height: 1.38;
  border-left: 1px solid var(--giks-brass-lit); padding-left: 1.5rem;
  color: #fff; max-width: none; text-align: left; hyphens: manual;
  margin: 0;
}

/* Geschäftsführung: zwei Karten mit 4:5-Porträt
   ------------------------------------------------------------------
   Startseite und KI-Kompass zeigen diesen Baustein auf demselben
   dunklen Primary-Band. Die Farbtoken halten ihn trotzdem auch auf
   hellem Grund lesbar, falls er später an anderer Stelle verwendet
   wird. Die Webbilder liegen mit 448 x 560 Pixeln deutlich über der
   Darstellungsgröße; 128 x 160 wahrt ihr 4:5-Format ohne Neuschnitt. */
:root {
  --giks-mensch-name: var(--giks-text);
  --giks-mensch-text: var(--giks-muted);
}
.uk-light, .uk-section-primary {
  --giks-mensch-name: #fff;
  --giks-mensch-text: #A9B5C7;
}

.giks-leute {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: 3rem; grid-template-columns: 1fr;
}
@media (min-width: 900px) { .giks-leute { grid-template-columns: 1fr 1fr; } }
.giks-mensch {
  display: grid; gap: 1.5rem; grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 520px) {
  .giks-mensch {
    grid-template-columns: 128px minmax(0, 1fr);
    column-gap: 1.25rem;
  }
}
.giks-mensch h3 {
  font-family: var(--giks-serif); font-weight: 600;
  font-size: var(--t-gross); margin: 0;
  color: var(--giks-mensch-name);
}
.giks-rolle {
  font-family: var(--giks-mono); font-size: var(--t-mono);
  letter-spacing: .14em; text-transform: uppercase;
  /* Messing hat zwei Helligkeiten: das helle für dunklen Grund, das
     dunklere für Papier — sonst unterschreitet die Rolle dort das
     Kontrastminimum. */
  color: var(--giks-brass); display: block; margin: .35rem 0 .9rem;
}
.uk-light .giks-rolle, .uk-section-primary .giks-rolle,
.uk-light .giks-aemter li::before,
.uk-section-primary .giks-aemter li::before,
.uk-light .giks-portrait, .uk-section-primary .giks-portrait {
  color: var(--giks-brass-lit);
}
.giks-aemter {
  list-style: none; margin: 0 0 .9rem; padding: 0;
  font-size: var(--t-klein); color: var(--giks-mensch-text);
}
.giks-aemter li { padding-left: 1rem; position: relative; }
.giks-aemter li::before {
  content: "—"; position: absolute; left: 0; color: var(--giks-brass);
}
.giks-portrait {
  width: 128px; height: 160px;
  border: 1px solid rgba(201, 169, 97, .4);
  position: relative; display: grid; place-items: center;
  box-sizing: border-box; overflow: hidden;
  background: var(--giks-ink);
}
.giks-portrait img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
.giks-ki-kurzlink {
  margin: 1.15rem 0 0; text-align: left; text-align-last: auto;
  font-family: var(--giks-mono); font-size: var(--t-mono);
  line-height: 1.45; letter-spacing: .03em;
  color: var(--giks-mensch-text);
}
.giks-ki-kurzlink a {
  color: var(--giks-mensch-text) !important;
  text-decoration: none !important;
  border-bottom: 1px solid currentColor;
}
.giks-ki-kurzlink a:hover,
.giks-ki-kurzlink a:focus-visible {
  color: var(--giks-mensch-name) !important;
}
.giks-mensch p {
  font-size: var(--t-klein); color: var(--giks-mensch-text);
  max-width: none; margin: 0 0 .8rem;
}

/* Vier kleine Textrollen der Landingpage */
.giks-muted { color: var(--giks-muted); }
.giks-gross { font-size: var(--t-lead); }
.giks-h2-klein { font-size: var(--t-zahl) !important; }
.giks-serif-gross {
  font-family: var(--giks-serif); font-weight: 600;
  font-size: var(--t-zahl); line-height: 1.25;
}

/* ==================================================================
   29  Abstand der Kontaktaktionen im KI-Kompass
   ------------------------------------------------------------------
   Die beiden Abschlussbuttons brachen wegen ihrer Textlaenge bereits
   auf grossen Ansichten untereinander um. Als Inline-Elemente lagen
   ihre Rahmen dabei ohne jeden Abstand direkt aufeinander. Die
   Aktionszeile ist deshalb eine eigene Flexgruppe: mit deutlichem
   Abstand sowohl nebeneinander als auch nach einem Zeilenumbruch.

   Der ID-Selektor haelt bereits gespeicherte Layouts kompatibel; die
   Klasse ist die eindeutige Fassung fuer neu erzeugte Layoutdaten.
   ================================================================== */
#eignung .giks-kontaktaktionen,
#eignung p:last-of-type {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 1.25rem;
}
#eignung .giks-kontaktaktionen .uk-button,
#eignung p:last-of-type .uk-button { margin: 0; }