@charset "UTF-8";
/* site.css — IB Theis GmbH. Ein Stylesheet, fester Name, kein Build-Schritt (vi-editierbar).
   Layer: reset > tokens > base > layout > components > utilities > motion, danach Print.
   Design: Bildmarke (Balken + zwei Saeulen) als System, Rot #FF0000 nur als Flaeche/gross,
   Textlinks #CC0000, Tinte auf warmem Off-White, 8-px-Raster, Ecken immer 0.
   Dark Mode nur ueber prefers-color-scheme (Tokens). Pfade nur relativ (../fonts) wegen /new/. */

@layer reset, tokens, base, layout, components, utilities, motion;

/* Cross-Document View Transitions (Chromium, Safari); Firefox wechselt hart. Bewusst auf Top-Level, nicht in @layer.
   Unter reduced-motion laeuft gar kein Snapshot-Zyklus. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Poppins 700 nur fuer Headlines und Buttons, self-hosted Subset (latin, OFL.txt daneben) */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700-latin.woff2") format("woff2");
}
/* Fallback-Face gegen Layout-Sprung (CLS): Metriken grob an Poppins Bold angepasst */
@font-face {
  font-family: "Poppins Fallback";
  font-style: normal;
  font-weight: 700;
  src: local("Arial Bold"), local("Arial"), local("Liberation Sans Bold"), local("Helvetica Bold");
  size-adjust: 110%;
  ascent-override: 95%;
  descent-override: 32%;
  line-gap-override: 9%;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol, pre { margin: 0; }
  img, svg { display: block; max-width: 100%; }
  img { height: auto; }
  summary { cursor: pointer; }
}

@layer tokens {
  :root {
    color-scheme: light dark;
    --color-brand: #FF0000;          /* nur Flaechen, grosse Elemente, Fokusring */
    --color-brand-hover: #CC0000;    /* Hover-Flaeche des Primaer-Buttons */
    --color-link: #CC0000;           /* Textlinks (AA auf Off-White) */
    --color-ink: #1A1A1A;
    --color-ink-muted: #5C5A56;
    --color-bg: #FBF9F6;             /* warmes Off-White */
    --color-surface: #FFFFFF;
    --color-border: #E3DED6;
    --color-code-bg: #F3F0EA;
    --font-head: "Poppins", "Poppins Fallback", system-ui, sans-serif;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --space-1: 8px;  --space-2: 16px; --space-3: 24px; --space-4: 32px;
    --space-5: 40px; --space-6: 48px; --space-8: 64px; --space-12: 96px;
    --measure: 76ch;                 /* Lesebreite fuer Fliesstext */
    --container: min(94vw, 1480px);  /* Seitenbreite folgt dem Browserfenster */
    --radius: 0;                     /* Rechtecke wie die Bildmarke */
    --motion-fast: 150ms;
    --motion-base: 250ms;
    --motion-logo: 400ms;            /* Gesamtbudget der Logo-Animation */
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --color-terminal-bg: #0E0D0C;
      --color-link: #FF5C5C;
      --color-ink: #F2EFEA;
      --color-ink-muted: #B3ADA4;
      --color-bg: #151413;
      --color-surface: #1E1D1B;
      --color-border: #3A3835;
      --color-code-bg: #262422;
    }
  }
}

@layer base {
  html { -webkit-text-size-adjust: 100%; font-size: clamp(106.25%, 100% + 0.35vw, 121%); }   /* 17px klein bis ~19,4px gross */
  body { font: 1rem/1.6 var(--font-body); color: var(--color-ink); background: var(--color-bg); min-height: 100vh; display: flex; flex-direction: column; }
  h1, h2, h3 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
  h1 { font-size: clamp(2.125rem, 1.5rem + 2.4vw, 3.25rem); margin-top: 0; margin-bottom: var(--space-4); }
  h2 { font-size: clamp(1.625rem, 1.25rem + 1.2vw, 2.25rem); margin-block: var(--space-6) var(--space-2); }
  h3 { font-size: 1.375rem; margin-block: var(--space-4) var(--space-1); }
  h4 { font-size: 1rem; margin-block: var(--space-3) var(--space-1); }
  a { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
  a:hover { text-decoration-thickness: 2px; }
  address { font-style: normal; }
  code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.9em; }
  :focus-visible { outline: 3px solid var(--color-brand); outline-offset: 2px; }
  ::selection { background: var(--color-brand); color: #FFFFFF; }
  /* Kleine Monospace-Meta (Datum, Jahr, Stand, Copyright ...) */
  .insight-meta, .timeline__year, .pagination__status, .legal__reviewed, .cert-list__renewed, .hero__trust, .site-footer__copy, .insights__rss {
    font: 0.8125rem/1.6 var(--font-mono); color: var(--color-ink-muted);
  }
}

@layer layout {
  /* Body-Klassen (Kind/Type/Layout) als Haken; alle Seiten gleich breit, gleicher Abstand oben (nur der Hero der Startseite setzt seinen eigenen) */
  .page { overflow-wrap: break-word; }
  .page--home .site-main { padding-top: 0; }

  .site-header { position: relative; z-index: 30; border-bottom: 1px solid var(--color-border); background: var(--color-bg); }   /* ueber dem Hero (eigener Stapelkontext), sonst verdeckt er das mobile Menue */
  .site-header__inner, .site-footer__inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-3); }
  .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); }
  .site-logo { display: block; color: var(--color-ink); flex: none; }
  .logo { display: block; width: auto; }
  .site-logo .logo { height: 40px; }
  /* Kopf-Logo: kurz („IB Theis“) auf schmalen Fenstern, ausgeschrieben („Ingenieurbüro Theis“) ab 64em */
  .site-logo__short, .site-logo__wide { display: block; }
  .site-logo__wide { display: none; }
  @media (min-width: 64em) { .site-logo__short { display: none; } .site-logo__wide { display: block; } }
  .site-footer__logo .logo { height: 32px; }

  /* Desktop-Navigation, erst ab 48em sichtbar; Unterstrich waechst beim Hover */
  .site-nav { display: none; align-items: center; gap: var(--space-3); }
  .site-nav__list { display: flex; gap: var(--space-2); list-style: none; padding: 0; }
  .site-nav__item { margin: 0; }
  .site-nav__link {
    display: inline-block; padding: var(--space-1) 2px; color: var(--color-ink); text-decoration: none; font-weight: 600;
    background: linear-gradient(var(--color-brand), var(--color-brand)) no-repeat left bottom / 0 3px;
  }
  .site-nav__link:hover, .site-nav__link:focus-visible, .site-nav__link.is-active { background-size: 100% 3px; }
  .lang-switch { display: inline-block; }
  .lang-switch__link { display: inline-block; padding: 2px var(--space-1); border: 1px solid var(--color-border); color: var(--color-ink); font: 0.8125rem/1.5 var(--font-mono); text-decoration: none; }
  .lang-switch__link:hover, .lang-switch__link:focus-visible { border-color: var(--color-ink); }

  /* Mobile Navigation: <nav class="site-nav-mobile-wrap"> (Landmark) mit <details> ohne JS, Panel klappt unter dem Kopf auf */
  .site-nav-mobile-wrap { flex: none; }
  .site-nav-mobile { position: relative; }
  .site-nav-mobile__toggle { list-style: none; padding: var(--space-1) var(--space-2); border: 2px solid var(--color-ink); font-weight: 700; }
  .site-nav-mobile__toggle::-webkit-details-marker { display: none; }
  .site-nav-mobile[open] .site-nav-mobile__toggle { background: var(--color-ink); color: var(--color-bg); }
  .site-nav-mobile__panel {
    position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: 20; min-width: 15rem; padding: var(--space-2);
    background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }
  .site-nav-mobile__panel .site-nav__list { flex-direction: column; gap: 0; margin-bottom: var(--space-2); }
  .site-nav-mobile__panel .site-nav__link { display: block; padding: var(--space-1) 0; }
  @media (min-width: 48em) {
    .site-nav { display: flex; }
    .site-nav-mobile-wrap { display: none; }
  }

  .site-main { flex: 1; width: 100%; max-width: var(--container); margin-inline: auto; padding: var(--space-8) var(--space-3) var(--space-8); }   /* oben 64px auf allen Seiten, wie der Hero */
  .site-main:focus { outline: none; }   /* Skip-Link-Ziel (tabindex="-1"); der Ring gehoert an die Elemente darin */

  .site-footer { border-top: 1px solid var(--color-border); background: var(--color-surface); font-size: 0.9375rem; }
  .site-footer__inner { display: grid; gap: var(--space-4); padding-block: var(--space-6); }
  .site-footer__brand, .site-footer__address, .site-footer__nav { min-width: 0; }
  .site-footer__logo { display: inline-block; color: var(--color-ink); margin-bottom: var(--space-2); }
  .site-footer__descriptor { color: var(--color-ink-muted); max-width: 36ch; }
  .site-footer__address { line-height: 1.7; }
  .site-footer__list { list-style: none; padding: 0; line-height: 1.9; }
  .site-footer__rss { font-family: var(--font-mono); font-size: 0.875rem; }
  .site-footer__copy { grid-column: 1 / -1; }
  @media (min-width: 48em) {
    .site-footer__inner { grid-template-columns: 2fr 1fr 1fr; }
  }
}

@layer components {
  .skip-link { position: absolute; left: var(--space-2); top: -6rem; z-index: 100; padding: var(--space-1) var(--space-2); background: var(--color-ink); color: var(--color-bg); font-weight: 700; }
  .skip-link:focus { top: var(--space-2); }

  /* Abschnittstitel mit rotem Balken (der Balken der Bildmarke) */
  .section-title { clear: both; }
  .section-title::before { content: ""; display: block; width: 48px; height: 8px; margin-bottom: var(--space-2); background: var(--color-brand); }

  /* Fliesstext aus Markdown */
  .prose { max-width: none; }   /* volle Seitenbreite wie die Startseite (Betreiber, 13.09.2026) */
  .prose > :first-child { margin-top: 0; }
  .prose p, .prose ul, .prose ol, .prose blockquote, .prose figure { margin-bottom: var(--space-2); }
  .prose li { margin-bottom: 4px; }
  .prose--intro { font-size: 1.1875rem; }
  .prose blockquote { padding-left: var(--space-2); border-left: 4px solid var(--color-brand); color: var(--color-ink-muted); }
  .prose img { max-width: 100%; height: auto; }
  .prose table { display: table; width: 100%; table-layout: fixed; border-collapse: collapse; overflow-wrap: anywhere; margin-bottom: var(--space-3); font-size: 0.9375rem; }
  .prose th, .prose td { padding: 4px var(--space-1); border: 1px solid var(--color-border); text-align: left; vertical-align: top; }
  .prose th { background: var(--color-code-bg); }
  .prose hr { border: 0; border-top: 1px solid var(--color-border); margin-block: var(--space-4); }
  .prose :not(pre) > code { padding: 1px 4px; background: var(--color-code-bg); border: 1px solid var(--color-border); }
  .highlight { margin-bottom: var(--space-3); }
  .highlight pre, .prose > pre { overflow-x: auto; padding: var(--space-2); border: 1px solid var(--color-border); font-size: 0.875rem; line-height: 1.5; }

  /* Buttons: gross und fett, damit Weiss auf Rot als grosser Text AA erfuellt (>= 14pt bold) */
  .btn { display: inline-block; padding: 10px var(--space-3); border: 2px solid transparent; font: 700 1.1875rem/1.25 var(--font-head); text-decoration: none; text-align: center; }
  .btn--primary { background: var(--color-brand); border-color: var(--color-brand); color: #FFFFFF; }
  .btn--primary:hover, .btn--primary:focus-visible { background: var(--color-brand-hover); border-color: var(--color-brand-hover); }
  .btn--secondary { border-color: var(--color-ink); color: var(--color-ink); }
  .btn--secondary:hover, .btn--secondary:focus-visible { background: var(--color-ink); color: var(--color-bg); }
  .btn--small { padding: 6px var(--space-2); font-size: 0.9375rem; margin-right: var(--space-2); }
  .btn--ghost { padding-inline: 0; color: var(--color-link); border-bottom-color: currentColor; }
  .btn--ghost:hover, .btn--ghost:focus-visible { border-bottom-color: var(--color-ink); }
  .rss-link { font-family: var(--font-mono); font-size: 0.875rem; }

  /* Hero der Startseite, Rhein-Skizze dahinter */
  .hero { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--space-8) var(--space-6); }
  /* Systemlandschaft hinter dem Hero (static/img/devops-net.svg): rechts im Hintergrund, leicht unter dem Text;
     links gedimmt statt ausgeblendet, damit Leitungsanfaenge sichtbar bleiben; blendet einmal ein. Bewegt sind nur die roten Pakete auf den Leitungen. */
  .hero-net { position: absolute; top: 0; right: 0; bottom: 0; z-index: -1; width: min(58%, 820px); display: flex; align-items: center; justify-content: flex-end;
    opacity: 0.2; color: var(--color-ink); pointer-events: none;
    /* links (unter dem Text) nur 15 % der Deckkraft, ab der Mitte voll; so bleiben alle Objekte sichtbar, stoeren aber nicht beim Lesen */
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.15), rgba(0,0,0,0.5) 35%, #000 60%);
    mask-image: linear-gradient(to right, rgba(0,0,0,0.15), rgba(0,0,0,0.5) 35%, #000 60%);
    animation: net-fade-in 1.6s ease-out both; }
  .hero-net .net { width: 100%; height: auto; max-width: none; }
  @keyframes net-fade-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 0.2; transform: none; } }
  .net__flow path { stroke: var(--color-brand); stroke-width: 3; stroke-dasharray: 5 40; animation: net-flow 24s linear infinite; }
  .net__flow path:nth-child(2n) { animation-duration: 32s; }
  .net__flow path:nth-child(3n) { animation-direction: reverse; }
  @keyframes net-flow { to { stroke-dashoffset: -450; } }
  .net__dot circle { fill: var(--color-brand); }
  .net__label { font: 700 12px var(--font-mono); fill: currentColor; letter-spacing: 0.06em; }
  @media (max-width: 64em) { .hero-net { opacity: 0.12; } }
  @media (max-width: 48em) { .hero-net { display: none; } }   /* Handy: Headline bleibt frei */
  .hero__inner { max-width: 60rem; }
  .hero__mark { margin-bottom: var(--space-3); }
  .hero__mark .mark { width: 56px; height: 56px; overflow: visible; }
  .hero__title { font-size: clamp(2rem, 1.25rem + 4vw, 4.5rem); line-height: 1.05; margin-bottom: var(--space-3); overflow-wrap: normal; hyphens: manual; }
  .hero__word { display: inline; }
  @media (max-width: 30em) { .hero__word { display: block; } }   /* Bauen. / Betreiben. / Verantworten. untereinander */
  .hero__descriptor { font-size: 1.25rem; color: var(--color-ink-muted); margin-bottom: var(--space-1); }
  .hero__subline { font-size: 1.375rem; max-width: 52rem; margin-bottom: var(--space-4); }
  .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
  .hero__trust { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); list-style: none; padding: 0; }
  .hero__trust-item::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--space-1); background: var(--color-brand); }
  /* Brotkrumen: klein, Monospace, unter der Navigation */
  .breadcrumbs { margin-bottom: var(--space-4); }
  .breadcrumbs__list { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin: 0; font: 0.8125rem/1.6 var(--font-mono); color: var(--color-ink-muted); }
  .breadcrumbs__item + .breadcrumbs__item::before { content: "\203A"; margin-inline: 4px; }
  .breadcrumbs__item a { color: inherit; text-decoration: none; }
  .breadcrumbs__item a:hover, .breadcrumbs__item a:focus-visible { color: var(--color-link); text-decoration: underline; }
  /* FAQ: <details> ohne JS, rotes Quadrat als Marker, Antwort im Lesefluss */
  .faq { margin-block: var(--space-8); }
  .faq__item { border-top: 1px solid var(--color-border); }
  .faq__item:last-of-type { border-bottom: 1px solid var(--color-border); }
  .faq__question { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-2) 0; font: 700 1.125rem/1.4 var(--font-head); list-style: none; }
  .faq__question::-webkit-details-marker { display: none; }
  .faq__question::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--color-brand); transform: translateY(-1px); transition: transform var(--motion-fast); }
  .faq__item[open] .faq__question::before { transform: translateY(-1px) rotate(45deg); }
  .faq__answer { padding: 0 0 var(--space-3) calc(10px + var(--space-2)); color: var(--color-ink-muted); }
  /* Kartenvorschau (Kontakt) und Kartenseite (OSM-Einbettung) */
  .map-preview { margin-block: var(--space-4); max-width: 48rem; }
  .map-preview__link { position: relative; display: block; border: 1px solid var(--color-border); }
  .map-preview__link:hover, .map-preview__link:focus-visible { border-color: var(--color-ink); }
  .map-preview__img { width: 100%; height: auto; }
  .map-preview__cta { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px var(--space-3); background: var(--color-brand); color: #FFFFFF; font: 700 1.0625rem/1.25 var(--font-head); white-space: nowrap; }
  .map-preview__caption { margin-top: var(--space-1); font: 0.8125rem/1.6 var(--font-mono); color: var(--color-ink-muted); }
  .map-embed { display: block; width: 100%; aspect-ratio: 3 / 2; max-height: 70vh; border: 1px solid var(--color-border); background: var(--color-surface); }
  .map-embed__links { margin-top: var(--space-2); font: 0.9375rem/1.6 var(--font-mono); }
  /* Referenzen: Logo-Leiste (Schriftzuege bis zur Logo-Freigabe) und Projektkacheln mit Bild */
  .logo-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); list-style: none; padding: 0; margin-block: var(--space-4) var(--space-6); }
  @media (min-width: 40em) { .logo-strip { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 60em) { .logo-strip { grid-template-columns: repeat(6, 1fr); } }   /* Desktop: alle sechs in einer Zeile */
  /* Kundenlogos in Originalfarben auf immer weissem Grund (auch im Dark Mode), Hoehe begrenzt, Breite passt sich der Kachel an */
  .logo-strip__item { display: flex; align-items: center; justify-content: center; min-height: 5rem; padding: var(--space-2) var(--space-3); text-align: center; background: #FFFFFF; border: 1px solid var(--color-border); }
  .logo-strip__word { font: 700 clamp(0.95rem, 0.6rem + 0.7vw, 1.2rem)/1.2 var(--font-head); color: #555555; letter-spacing: 0.02em; }
  .logo-strip__logo { display: block; max-height: 3rem; max-width: 100%; width: auto; height: auto; }
  .ref-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); list-style: none; padding: 0; margin-block: var(--space-3) var(--space-6); }
  @media (min-width: 40em) { .ref-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 60em) { .ref-grid { grid-template-columns: repeat(3, 1fr); } }
  /* Minikacheln: Bild + Titel, verlinkt auf die Projektseite */
  .ref-tile__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; background: var(--color-surface); border: 1px solid var(--color-border); border-top: 6px solid var(--color-brand); }
  .ref-tile__link:hover, .ref-tile__link:focus-visible { border-color: var(--color-ink); border-top-color: var(--color-brand); transform: translateY(-3px); box-shadow: 0 6px 0 var(--color-border); }
  .ref-tile__img { width: 100%; height: auto; border-bottom: 1px solid var(--color-border); }
  .ref-tile__body { display: flex; flex-direction: column; gap: 6px; padding: var(--space-3); }
  .ref-tile__kicker { font: 0.8125rem/1.6 var(--font-mono); color: var(--color-ink-muted); }
  .ref-tile__title { font: 700 1.25rem/1.25 var(--font-head); }
  /* Projektseite */
  .reference__kicker { margin-bottom: var(--space-1); font: 0.9375rem/1.6 var(--font-mono); color: var(--color-ink-muted); }
  .reference__img { width: 100%; max-width: 56rem; height: auto; margin-block: var(--space-2) var(--space-5); border: 1px solid var(--color-border); }
  .reference__layout { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }
  @media (min-width: 60em) { .reference__layout { grid-template-columns: 3fr 2fr; } }
  .reference__facts { display: grid; grid-template-columns: 1fr; gap: 4px; margin: 0; padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-left: 6px solid var(--color-brand); }
  .reference__facts dt { margin-top: var(--space-2); font: 700 0.8125rem/1.6 var(--font-mono); color: var(--color-ink-muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .reference__facts dt:first-child { margin-top: 0; }
  .reference__facts dd { margin: 0; }
  /* Artikelkacheln und Listenzeilen komplett klickbar: der Titel-Link deckt per ::after die ganze Karte ab (gueltiges HTML, Tags bleiben eigene Links) */
  .insight-card article { position: relative; }
  .insight__license { margin-top: var(--space-2); font-size: 0.875rem; color: var(--color-ink-muted); }
  .insight-card__title a::after { content: ""; position: absolute; inset: 0; }
  .insight-card .tag-list { position: relative; z-index: 1; }
  .insight-card article:hover .insight-card__title a { color: var(--color-link); }
  .insight-card article:has(.insight-card__title a:focus-visible) { outline: 3px solid var(--color-brand); outline-offset: 2px; }
  .insight-card article:has(.insight-card__title a:focus-visible) .insight-card__title a { outline: none; }
  /* Terminal-Bloecke: Hero und Shortcode {{< terminal >}} teilen sich den Look */
  .terminal { display: inline-block; margin-block: var(--space-3) var(--space-4); padding: var(--space-2) var(--space-3); background: var(--color-terminal-bg, var(--color-ink)); color: #F2EFEA; font: 0.9375rem/1.6 var(--font-mono); max-width: 100%; overflow-x: auto; border-left: 8px solid var(--color-brand); }
  .terminal::after, .hero__terminal::after { content: "\258C"; margin-left: 2px; animation: terminal-blink 1.1s steps(1) infinite; }
  @keyframes terminal-blink { 50% { opacity: 0; } }
  /* Handy: Terminal ueber die volle Breite, kleinere Schrift, lange Zeilen umbrechen statt horizontal scrollen */
  @media (max-width: 40em) {
    .terminal, .hero__terminal { display: block; width: 100%; font-size: 0.8125rem; line-height: 1.5; padding: var(--space-2); white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible; }
  }
  .hero__terminal { display: inline-block; margin-top: var(--space-4); padding: var(--space-2) var(--space-3); background: var(--color-terminal-bg, var(--color-ink)); color: #F2EFEA; font-size: 0.9375rem; line-height: 1.6; max-width: 100%; overflow-x: auto; }

  /* Leistungskacheln; --card-accent je Leistung aenderbar */
  .service-grid, .facts, .region, .insights-teaser { margin-block: var(--space-8); }
  .service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--space-3); }
  .service-grid > .section-title { grid-column: 1 / -1; margin: 0; }
  .service-card--devops, .service-card--databases, .service-card--linux-unix, .service-card--cloud, .service-card--consulting, .service-card--monitoring { --card-accent: var(--color-brand); }
  .service-card { position: relative; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-top: 4px solid var(--card-accent, var(--color-brand)); }
  .service-card:hover { border-color: var(--color-ink); border-top-color: var(--card-accent, var(--color-brand)); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); }
  .service-card:has(.service-card__link:focus-visible) { outline: 3px solid var(--color-brand); outline-offset: 2px; }
  @supports not selector(:has(a)) {
    .service-card:focus-within { outline: 3px solid var(--color-brand); outline-offset: 2px; }
  }
  .service-card__icon .icon { width: 48px; height: 48px; color: var(--color-brand); }
  .service-card__title { margin: 0; font-size: 1.25rem; }
  .service-card__link { color: var(--color-ink); text-decoration: none; }
  .service-card__link::after { content: ""; position: absolute; inset: 0; }   /* ganze Kachel klickbar */
  .service-card__link:focus-visible { outline: none; }                         /* Ring liegt auf der Kachel */
  .service-card__text { line-height: 1.5; }
  .service-card__typical { display: none; }   /* weniger Text auf der Kachel; Zielgruppe steht in data/services.yaml fuer JSON-LD */
  .service-card__label { font-weight: 600; color: var(--color-ink); }
  .service-card .tech-chips { margin-top: auto; padding-top: var(--space-1); }
  .service > .tech-chips { margin-top: calc(-1 * var(--space-2)); margin-bottom: var(--space-4); }  /* Leistungsseite: Chips direkt unter der H1 */
  .service > .prose { margin-bottom: var(--space-4); }
  .service__tags { margin-top: var(--space-2); }

  /* Monospace-Chips (Technik) und Tags */
  .tech-chips, .tag-list, .tag-cloud { display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; padding: 0; margin: 0; }
  .chip { padding: 1px var(--space-1); background: var(--color-code-bg); border: 1px solid var(--color-border); font: 0.8125rem/1.5 var(--font-mono); }
  .chip:hover { border-color: var(--color-ink); }
  /* Tags als kleine Chips: sichtbar klickbar, beim Ueberfahren gefuellt */
  .tag { display: inline-block; padding: 2px 8px; font: 0.8125rem/1.5 var(--font-mono); color: var(--color-link); text-decoration: none; border: 1px solid var(--color-border); background: var(--color-bg); transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast); }
  .tag::before { content: "#"; }
  .tag:hover, .tag:focus-visible { background: var(--color-ink); color: var(--color-bg); border-color: var(--color-ink); }
  .tag__count { color: var(--color-ink-muted); }
  .tag-cloud { gap: var(--space-1) var(--space-2); margin-bottom: var(--space-4); }
  .tag-cloud .tag { font-size: 1rem; }

  /* Zahlen und Fakten, Region */
  .facts__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-bottom: var(--space-3); }
  @media (min-width: 60em) { .facts__list { grid-template-columns: repeat(4, 1fr); } }   /* Desktop: vier Kennzahlen je Zeile */
  .facts__sub { display: block; font-size: 0.55em; line-height: 1.2; letter-spacing: 0; color: var(--color-ink-muted); }
  /* Fakten ohne Boxen: Zahl gross in Textfarbe, links eine duenne Linie in Rahmenfarbe, ein kleines rotes Quadrat als einziger Akzent */
  /* Jede Kennzahl ein Raster mit drei festen Zeilen (Quadrat, Wert, Text), damit die Zeilen ueber alle Kacheln buendig sind;
     der Wertbereich hat feste Hoehe (Platz fuer eine zweite Wertzeile), sodass der Erklaertext ueberall auf gleicher Hoehe beginnt */
  .facts__item { display: grid; grid-template-rows: 8px 1.75em auto; row-gap: 6px; align-items: start; padding-left: var(--space-2); border-left: 2px solid var(--color-border); font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); }
  .facts__item::before { content: ""; grid-row: 1; width: 8px; height: 8px; background: var(--color-brand); }
  .facts__value { grid-row: 2; margin: 0; font: 700 1em/1.05 var(--font-head); color: var(--color-ink); letter-spacing: -0.01em; }
  .facts__label { grid-row: 3; font-size: 0.9375rem; line-height: 1.4; color: var(--color-ink-muted); }
  .facts__text, .region p { max-width: var(--measure); }
  /* Arbeitsweise (Unternehmensseite, Shortcode principles): Punkte untereinander im Stil der Kennzahlen,
     linker Strich, rotes Quadrat und Nummer in Mono, fetter Listenanfang als Ueberschrift, Text darunter */
  .principles ol { list-style: none; margin: var(--space-4) 0; padding: 0; counter-reset: principle; display: grid; gap: var(--space-5); max-width: var(--measure); }
  .principles li { counter-increment: principle; display: grid; grid-template-columns: 8px 1fr; column-gap: var(--space-2); row-gap: 6px; align-items: center; margin: 0; padding-left: var(--space-3); border-left: 2px solid var(--color-border); }
  .principles li::before { content: ""; width: 8px; height: 8px; background: var(--color-brand); }
  .principles li::after { content: "0" counter(principle); grid-row: 1; grid-column: 2; font: 700 0.8125rem/1 var(--font-mono); color: var(--color-ink-muted); letter-spacing: 0.04em; }
  .principles li > strong { grid-column: 1 / -1; font: 700 clamp(1.25rem, 1rem + 0.8vw, 1.625rem)/1.2 var(--font-head); color: var(--color-ink); letter-spacing: -0.01em; }
  .principles__text { grid-column: 1 / -1; margin: 0; color: var(--color-ink-muted); line-height: 1.55; }
  /* Rheinland-Abschnitt: Text links, gezeichnete Skyline rechts; auf dem Handy untereinander */
  .region { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: center; }
  @media (min-width: 60em) { .region { grid-template-columns: minmax(0, 36rem) 1fr; gap: var(--space-8); } }
  .region__skyline { color: var(--color-ink); }
  .region__skyline .skyline { width: 100%; height: auto; max-width: none; }

  /* Insights: Listen, Karten, Metazeile */
  .insights__subtitle { margin-top: calc(-1 * var(--space-2)); margin-bottom: var(--space-5); font-size: 1.25rem; color: var(--color-ink-muted); }
  .insights__rss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin-block: var(--space-3); }
  .insight-list { list-style: none; padding: 0; margin-block: var(--space-3); border-top: 1px solid var(--color-border); }
  .insight-card article { padding-block: var(--space-3); border-bottom: 1px solid var(--color-border); }
  .insight-list--teaser { display: grid; grid-template-columns: 1fr; gap: var(--space-3); border: 0; }   /* Handy: untereinander */
  @media (min-width: 40em) { .insight-list--teaser { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 60em) { .insight-list--teaser { grid-template-columns: repeat(3, 1fr); } }   /* Desktop: drei Kacheln nebeneinander */
  /* Artikel-Kacheln: wie ein Blatt Papier mit rotem Kopfbalken (wie die Leistungskacheln), Datum klein in der Ecke,
     Titel wie eine Artikelueberschrift, Vorspann, #Tags am Fuss, Eselsohr unten rechts */
  .insight-list--teaser .insight-card { display: flex; }
  .insight-list--teaser .insight-card article {
    position: relative; display: flex; flex-direction: column; width: 100%; min-height: 15rem;
    padding: var(--space-5) var(--space-3) var(--space-3);
    background: var(--color-surface); border: 1px solid var(--color-border); border-top: 6px solid var(--color-brand);
    box-shadow: 0 2px 0 var(--color-border);
  }
  .insight-list--teaser .insight-card article:hover { border-color: var(--color-ink); border-top-color: var(--color-brand); transform: translateY(-3px); box-shadow: 0 6px 0 var(--color-border); }
  .insight-list--teaser .insight-card article::after {   /* Eselsohr */
    content: ""; position: absolute; right: 0; bottom: 0; width: 0; height: 0;
    border-style: solid; border-width: 0 0 20px 20px; border-color: transparent transparent var(--color-bg) transparent;
  }
  .insight-list--teaser .insight-meta { position: absolute; top: var(--space-1); right: var(--space-2); margin: 0; font-size: 0.75rem; }
  .insight-list--teaser .insight-card__title { margin: 0 0 var(--space-2); font-size: 1.375rem; line-height: 1.2; }
  .insight-list--teaser .insight-card__summary { flex: 1; font-size: 0.9375rem; }
  .insight-list--teaser .tag-list { margin-top: auto; padding-top: var(--space-2); border-top: 1px dashed var(--color-border); }
  .insight-list__empty { color: var(--color-ink-muted); }
  .insight-card__title { margin: var(--space-1) 0; font-size: 1.25rem; }
  .insight-card__title a { color: var(--color-ink); text-decoration: none; }
  .insight-card__title a:hover, .insight-card__title a:focus-visible { color: var(--color-link); text-decoration: underline; }
  .insight-card__summary { margin-bottom: var(--space-2); color: var(--color-ink-muted); }
  .insight-meta__date { white-space: nowrap; }
  .insight-meta__author::before, .insight-meta__updated::before { content: "\00B7\00A0"; }
  .lang-badge { display: inline-block; padding: 0 6px; border: 1px solid var(--color-border); font-size: 0.75rem; letter-spacing: 0.05em; }
  .insights-teaser__more { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); margin-top: var(--space-3); }

  /* Artikel */
  .insight { max-width: none; }
  .insight__header { margin-bottom: var(--space-4); }
  .insight__title { margin-bottom: var(--space-2); }
  /* Inline-SVG im Artikel (Shortcode svg): erbt die Textfarbe, geht damit im Dark Mode mit */
  .figure-svg { margin: var(--space-4) 0; }
  .figure-svg svg { display: block; width: 100%; height: auto; }
  .figure-svg__caption { margin-top: 8px; font-size: 0.9375rem; line-height: 1.4; color: var(--color-ink-muted); }
  .insight__cover { margin-top: var(--space-3); border: 1px solid var(--color-border); }
  .insight__cover img { width: 100%; height: auto; }
  .insight__body { font-size: 1.0625rem; }
  .insight__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
  .insight__contact { margin: 0; }
  .pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-4); }
  .pagination__link { font-weight: 700; text-decoration: none; }
  .pagination__link--prev { margin-right: auto; }
  .pagination__link--next { margin-left: auto; }

  /* Unternehmen: Portrait, Werdegang, Zertifizierungen */
  /* Einstieg zweispaltig: Text links, Portrait rechts in voller Spaltenbreite; auf dem Handy Portrait ueber dem Text */
  .company-intro { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start; margin-bottom: var(--space-4); }
  .portrait { margin: 0; max-width: 28rem; }
  .portrait__img { display: block; width: 100%; height: auto; border: 1px solid var(--color-border); }
  .portrait__caption { margin-top: 8px; font-size: 0.9375rem; line-height: 1.4; color: var(--color-ink-muted); }
  .timeline { list-style: none; padding: 0; margin-left: 5px; border-left: 2px solid var(--color-border); }
  .timeline__item { position: relative; padding: 0 0 var(--space-3) var(--space-3); }
  .timeline__item::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; background: var(--color-brand); }
  .timeline__year, .timeline__label, .timeline__industry { display: block; }
  .timeline__label { font-weight: 600; }
  .timeline__industry { font-size: 0.9375rem; color: var(--color-ink-muted); }
  .cert-list { max-width: none; }
  .cert-list__group { margin-top: var(--space-3); }
  .cert-list__items { list-style: none; padding: 0; }
  .cert-list__item { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-2); padding-block: 6px; border-bottom: 1px solid var(--color-border); }
  .cert-list__name { grid-column: 1; }
  .cert-list__year { font-family: var(--font-mono); }
  .cert-list__renewed { grid-column: 1 / -1; }
  .cert-list__degree { margin-top: var(--space-3); }
  @media (min-width: 48em) {
    .company-intro { grid-template-columns: minmax(0, 1fr) minmax(16rem, 38%); gap: var(--space-6); }
    .company-intro__text { grid-column: 1; grid-row: 1; }
    .portrait { grid-column: 2; grid-row: 1; max-width: none; }
  }

  /* Kontakt, Impressum, CTA, 404 */
  .contact-card { margin-bottom: var(--space-4); padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-left: 8px solid var(--color-brand); }
  .contact-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
  .contact-card__address { line-height: 1.7; }
  .legal-data { margin-bottom: var(--space-4); }
  .legal-data dt { margin-top: var(--space-2); font-weight: 700; }
  .legal-data dd { margin: 0; }
  @media (min-width: 40em) {
    .legal-data { display: grid; grid-template-columns: minmax(12rem, max-content) 1fr; gap: var(--space-1) var(--space-3); }
    .legal-data dt { margin: 0; }
  }
  .legal__reviewed { margin-top: var(--space-4); }
  .cta { margin-top: var(--space-8); padding: var(--space-6) var(--space-4); background: var(--color-ink); color: var(--color-bg); }
  .cta__title { margin: 0 0 var(--space-2); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
  .cta__text { max-width: var(--measure); margin-bottom: var(--space-3); }
  .cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .cta .btn--primary:hover { border-color: var(--color-bg); }
  .notfound { max-width: none; }
  .notfound__links { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin-top: var(--space-4); }
  .notfound__links a { display: inline-block; padding: var(--space-1) var(--space-2); border: 2px solid var(--color-ink); color: var(--color-ink); font-weight: 700; text-decoration: none; }
  .notfound__links a:hover, .notfound__links a:focus-visible { background: var(--color-ink); color: var(--color-bg); }
}

@layer utilities {
  .icon, .mark { flex: none; }
  /* Klassen in den Inline-SVGs (static/img): Farbe kommt ueber currentColor vom Umfeld */
  .logo__word, .icon--devops, .icon--databases, .icon--linux-unix, .icon--cloud, .icon--consulting, .icon--monitoring { fill: currentColor; }
}

/* Motion: Logo-Aufbau (<= 400 ms), View Transitions, Micro-Interactions; alles aus bei reduced-motion */
@layer motion {
  /* Bildmarke im Hero setzt sich beim Laden zusammen. Ausgangszustand nur in den Keyframes, damit ohne
     Animation alles sichtbar bleibt. Das Header-Logo animiert bewusst nicht (sonst bei jedem Seitenwechsel). */
  .hero__mark .mark__bar, .hero__mark .mark__left, .hero__mark .mark__right {
    animation-duration: calc(var(--motion-logo) * 0.6);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
    animation-fill-mode: both;
  }
  .hero__mark .mark__bar { animation-name: mark-bar; }
  .hero__mark .mark__left { animation-name: mark-left; animation-delay: calc(var(--motion-logo) * 0.2); }
  .hero__mark .mark__right { animation-name: mark-right; animation-delay: calc(var(--motion-logo) * 0.4); }
  @keyframes mark-bar { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
  @keyframes mark-left { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
  @keyframes mark-right { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

  /* View-Transition-Namen (die @view-transition-Regel steht am Dateianfang) */
  .site-header { view-transition-name: site-header; }
  .site-footer { view-transition-name: site-footer; }

  .btn, .site-nav__link, .lang-switch__link, .chip, .tag, .service-card, .ref-tile__link, .insight-list--teaser .insight-card article, .notfound__links a, .site-nav-mobile__toggle {
    transition: background-color var(--motion-base), background-size var(--motion-base), border-color var(--motion-base), color var(--motion-fast), box-shadow var(--motion-base), transform var(--motion-fast);
  }
  .btn:hover, .service-card:hover { transform: translateY(-2px); }
  .btn:active { transform: none; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  }
}

/* Windows-Kontrastmodus: Gradient-Unterstrich und rote Marker fallen weg – Ersatz per Unterstreichung und CanvasText */
@media (forced-colors: active) {
  .site-nav__link.is-active, .site-nav__link:hover, .site-nav__link:focus-visible { text-decoration: underline; text-decoration-thickness: 3px; }
  .section-title::before, .hero__trust-item::before, .timeline__item::before { background: CanvasText; forced-color-adjust: none; }
  .facts__item, .principles li { border-left-color: CanvasText; }
  .principles li::before { background: CanvasText; forced-color-adjust: none; }
}

/* Print-Minimum */
@media print {
  body { background: #FFFFFF; color: #000000; font-size: 11pt; }
  .skip-link, .site-nav, .site-nav-mobile, .hero-net, .hero__terminal, .cta, .insights-teaser__more, .insight__contact, .pagination { display: none; }
  .site-header, .site-footer { border: 0; background: none; }
  a { color: #000000; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  .service-card, .contact-card { box-shadow: none; border-color: #999999; }
  .highlight pre, .prose pre, .hero__terminal { white-space: pre-wrap; overflow: visible; }   /* lange Zeilen umbrechen statt abschneiden */
  .chroma { background: none; }
}