/* HIER PFLEGEN: main42.tech: Farben, Schriftgrößen und Abstände zentral pflegen. */
:root {
  color-scheme: dark;
  --color-background: #0b0b0d;
  --color-surface: #151518;
  --color-surface-raised: #1b1b1e;
  --color-border: #303035;
  --color-border-subtle: rgba(255, 255, 255, .08);
  --color-text: #f1f1f1;
  --color-text-soft: #d0d0d3;
  --color-text-muted: #a3a3ab;
  --color-brand: #d7b650;
  --color-brand-light: #e2c46a;
  --color-brand-muted: #a38c46;
  --color-terminal: var(--color-brand-light);
  --color-status-available: #4ade80;
  --color-status-limited: #facc15;
  --color-status-unavailable: #fb7185;
  /* SCHRIFTEN / CORPORATE FONT:
     Technisch: Consolas. Unter Windows und in Microsoft Word standardmäßig verfügbar.
     Fließtext: Segoe UI. Ebenfalls unter Windows und in Microsoft Word verfügbar.
     Fallbacks greifen nur auf Geräten ohne diese Microsoft-Schriften.
     Für Rechnungen und Dokumente daher Consolas für Logo, Überschriften und Terminaltexte
     sowie Segoe UI für Fließtext verwenden. Keine externen Font-Aufrufe. */
  --font-technical: Consolas, "Cascadia Mono", "Liberation Mono", "Courier New", monospace;
  --font-body: "Segoe UI", system-ui, -apple-system, sans-serif;
  --size-body: 1rem;
  --size-note: .875rem;
  --size-label: .8125rem;
  --size-card-title: clamp(1rem, 1.8vw, 1.16rem);
  --size-section-title: clamp(2rem, 4vw, 3.3rem);
  --size-brand: clamp(1.75rem, 2.6vw, 2.6rem);
  --line-body: 1.65;
  --content-max-width: 74rem;
  --text-max-width: 68ch;
  --section-spacing: clamp(3.75rem, 5.5vw, 5.25rem);
  --anchor-offset: 7rem;
  --heading-gap: 1.25rem;
  --card-gap: .75rem;
  --card-padding: clamp(1.1rem, 2vw, 1.5rem);
  --row-min-height: 5.25rem;
  --radius-small: .5rem;
  --radius-medium: .7rem;
}

/* AB HIER TECHNIK: Layout und native HTML-Bedienung, keine Inhaltsdarstellung per JS. */

/* BASIS */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font: var(--size-body)/var(--line-body) var(--font-body);
}
a { color: inherit; text-decoration: none; text-decoration-skip-ink: none; }
a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--color-brand-light);
  outline-offset: 4px;
}
.container {
  width: min(calc(100% - 2.5rem), var(--content-max-width));
  margin-inline: auto;
}
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-technical);
  letter-spacing: -.055em;
  overflow-wrap: anywhere;
}
.terminal-mark { color: var(--color-terminal); }
.skip-link {
  position: fixed;
  top: .5rem;
  left: .5rem;
  z-index: 30;
  padding: .7rem 1rem;
  background: var(--color-text);
  color: var(--color-background);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

/* HEADER: kompakte Wortmarke; Navigation wechselt als Ganzes in die zweite Zeile. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--color-border-subtle);
  background: rgba(11, 11, 15, .96);
  backdrop-filter: blur(1rem);
}
.nav {
  min-height: 5.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: .75rem;
}
.brand {
  display: inline-block;
  flex-shrink: 0;
  font-family: var(--font-technical);
  line-height: 1;
  letter-spacing: -.06em;
}
.brand-main { font-size: var(--size-brand); font-weight: 700; white-space: nowrap; }
.nav-links {
  display: flex;
  flex-wrap: nowrap;
  gap: .25rem 1.25rem;
  color: var(--color-text-muted);
  font: 500 var(--size-note)/1.5 var(--font-technical);
  letter-spacing: .04em;
}
.nav-links a { white-space: nowrap; display: inline-flex; align-items: center; min-height: 2.75rem; }
.nav-links a:hover { color: var(--color-text); }
.main42-wordmark { display: inline; white-space: nowrap; font-family: var(--font-technical); font-weight: 700; letter-spacing: -.055em; }
.main42-main { color: var(--color-text); }
.main42-number { color: var(--color-brand-light); }
.main42-domain { color: var(--color-text-muted); font-weight: 500; }
.nav-right { display: flex; align-items: center; gap: 1rem; }
.nav-claim { white-space: nowrap; color: var(--color-text-muted); font: 500 .7rem/1.5 var(--font-technical); }
.support-languages { flex: none; display: grid; gap: .25rem; padding-left: 1rem; border-left: 1px solid var(--color-border); }
/* DE, EN und RU sind aktiviert; die Sprachwahl bleibt auf allen Seiten sichtbar. */
.support-label { color: var(--color-text-muted); font: 500 .65rem/1.5 var(--font-technical); }
.support-codes { display: flex; gap: .25rem; font: 600 var(--size-note)/1.5 var(--font-technical); }
/* Statische Sprachlinks: aktiver Zustand auch ohne Farbe erkennbar, kein Sprach-JavaScript. */
.support-codes a { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; min-height: 2.75rem; border-radius: .25rem; }
.support-codes a:hover { background: var(--color-surface-raised); }
.support-codes a[aria-current="page"] { color: var(--color-brand-light); text-decoration: underline; text-underline-offset: .3em; }
.hero-brand {
  margin: 0 0 1rem;
  font: 700 min(7rem, 13cqi)/1 var(--font-technical);
  letter-spacing: -.075em;
  white-space: nowrap;
  overflow-wrap: normal;
}
.hero-claim { margin: 0; font: 600 clamp(2rem, 5vw, 4rem)/1.08 var(--font-technical); letter-spacing: -.06em; }
.hero-side { display: grid; gap: var(--card-gap); }
.hero-capabilities { margin: -1rem 0 2rem; color: var(--color-text-muted); font: 500 var(--size-label)/1.8 var(--font-technical); }

/* TERMINAL: gemeinsame Oberfläche; Cursor direkt hinter solved. */
.terminal-panel { padding: clamp(1.3rem, 2.5vw, 1.8rem); border: 1px solid var(--color-brand-muted); border-radius: var(--radius-medium); background: var(--color-surface-raised); }
.terminal-command { margin: 0; font: 600 var(--size-note)/1.9 var(--font-technical); }
.terminal-command + .terminal-command { margin-top: .3rem; }
.terminal-key { color: var(--color-text-muted); }
.terminal-detected { color: var(--color-status-unavailable); }
.terminal-contact { display: inline-block; color: var(--color-brand-light); white-space: nowrap; text-decoration: underline; text-underline-offset: .2em; }
.terminal-contact:hover { text-decoration: underline; text-underline-offset: .25em; }
.terminal-solved { color: var(--color-status-available); }

/* STORY: eine zusammenhängende Fläche mit drei gleichwertigen Bedeutungsebenen. */
.brand-story {
  margin-top: var(--card-gap);
  padding: var(--card-padding);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface);
}
.brand-story .card-title { margin-bottom: 1.25rem; }
.brand-story-intro { max-width: var(--text-max-width); margin: 0 0 1.25rem; color: var(--color-text-soft); }
.brand-story-definitions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-block: 1px solid var(--color-border-subtle); }
.brand-story-definitions > div {
  padding: 1.25rem;
  border-left: 1px solid var(--color-border-subtle);
}
.brand-story-definitions > div:first-child { border-left: 0; }
.brand-story-definitions dt { color: var(--color-brand-light); font: 600 var(--size-note)/var(--line-body) var(--font-technical); }
.brand-story-definitions dd { margin: .5rem 0 0; color: var(--color-text-soft); }
.brand-story-definitions dd > p { margin: 0; }
.brand-story-quote {
  margin: 1rem 0 0;
  padding: 0;
  color: var(--color-text-muted);
  font-size: var(--size-note);
  font-style: italic;
  line-height: 1.55;
}
.brand-story-quote p { margin: 0; }
.brand-story-principle {
  margin: 1.25rem 0 0;
  padding: 1rem var(--card-padding);
  border-left: 3px solid var(--color-brand-muted);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font-weight: 400;
}
.brand-story-principle strong { display: block; margin-top: .35rem; font-weight: 600; }
code { font-family: var(--font-technical); }

/* HERO: Wortmarke zuerst, Claim bewusst kleiner. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(19rem, .8fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  min-height: 44rem;
  padding: 7rem 0 3.75rem;
}
.hero-content { container-type: inline-size; }
.hero-copy {
  max-width: 40rem;
  margin: 1.8rem 0 2rem;
  color: var(--color-text-soft);
  font-size: clamp(1rem, 1.8vw, 1.15rem);
}

/* BUTTONS: Prompt mit Abstand; Text und Cursor bilden ein Element. */
.actions { display: flex; flex-wrap: wrap; gap: var(--card-gap); }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 100%;
  min-height: 3rem;
  padding: .7rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--color-text);
  font: 600 var(--size-note)/1.5 var(--font-technical);
  letter-spacing: .015em;
  text-align: center;
  overflow-wrap: anywhere;
  transition: border-color .18s, background .18s;
}
.button > .terminal-mark { flex: none; }
.button > .terminal-mark:first-child { margin-right: .5rem; }
.button-label { min-width: 0; }
.button:hover { border-color: var(--color-text-muted); background: var(--color-surface-raised); }
.button-primary { border-color: var(--color-brand-muted); background: var(--color-surface); }
.button-primary:hover { border-color: var(--color-brand-light); background: var(--color-surface-raised); }

/* GEMEINSAME OBERFLÄCHEN */
.status-panel, .reveal-row, .about-copy, .about-aside, .contact-card {
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface);
}
.status-panel { opacity: .92; }
.card-title, .row-trigger {
  color: var(--color-text);
  font: 600 var(--size-card-title)/1.5 var(--font-technical);
  letter-spacing: -.04em;
}
.row-description, .about-copy p, .service-points, .technology-list {
  color: var(--color-text-soft);
  font: var(--size-body)/var(--line-body) var(--font-body);
}
.experience-note, .contact-security-note, .panel-note, .status-fallback-note {
  color: var(--color-text-muted);
  font: var(--size-note)/var(--line-body) var(--font-body);
}

/* ABSCHNITTE: Alle vier Köpfe immer untereinander, auch bei Zoom. */
section { padding: var(--section-spacing) 0; scroll-margin-top: var(--anchor-offset); }
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .9rem;
  margin-bottom: 1.75rem;
}
.section-head > *, .hero > *, .about > *, .contact-card > * { min-width: 0; }
.section-head h2 { font-size: var(--size-section-title); line-height: 1.15; }
.section-head > p { max-width: var(--text-max-width); margin: 0; color: var(--color-text-soft); }
.section-kicker {
  color: var(--color-text-muted);
  font: 600 var(--size-label)/1.5 var(--font-technical);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.section-kicker { display: flex; align-items: center; gap: .55rem; margin: 0 0 1rem; }
.section-kicker::before { content: ""; flex: none; width: 1.8rem; height: 1px; background: currentColor; opacity: .72; }

/* SERVICES UND EXPERIENCE: gleiche Zeilen, Titel und Inhaltsabstände. */
.services, .experience {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--card-gap);
}
.reveal-row { border-left: 3px solid transparent; transition: border-color .18s, background .18s; }
.reveal-row[open] { border-left-color: var(--color-brand-muted); background: var(--color-surface-raised); }
.row-heading { min-width: 0; margin: 0; font: inherit; letter-spacing: inherit; }
.row-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: var(--row-min-height);
  padding: 1.25rem var(--card-padding);
  border: 0;
  border-radius: var(--radius-medium);
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.row-trigger { list-style: none; }
.row-trigger::-webkit-details-marker { display: none; }
.icon-open, .reveal-row[open] .icon-closed { display: none; }
.reveal-row[open] .icon-open { display: inline; }
.row-trigger:focus-visible { outline-offset: -4px; }
.row-icon { flex: none; color: var(--color-text-muted); font-size: 1.35rem; font-weight: 700; line-height: 1; }
.reveal-row[open] .row-icon { color: var(--color-brand-light); }
.row-detail { padding: 0 var(--card-padding) var(--card-padding); }
.row-description { max-width: var(--text-max-width); margin: 0; }
.service-points, .technology-list {
  max-width: var(--text-max-width);
  margin: 1rem 0 0;
  padding-left: 1.25rem;
  list-style: disc;
  overflow-wrap: anywhere;
}
.service-points li + li, .technology-list li + li { margin-top: .4rem; }
.service-points li::marker, .technology-list li::marker { color: var(--color-brand-muted); }
.experience-note { margin: 1rem 0 0; max-width: var(--text-max-width); }

/* ABOUT: gleicher Textstil und Innenabstand wie die übrigen Karten. */
.about { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr); gap: var(--card-gap); }
.about-aside, .about-copy { display: flex; flex-direction: column; justify-content: center; padding: var(--card-padding); }
.about-aside { container-type: inline-size; }
.about-aside p {
  margin: 0;
  font: 600 min(2rem, 9cqi)/1.2 var(--font-technical);
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}
.about-statement-line { display: block; white-space: nowrap; }
.about-copy p { max-width: var(--text-max-width); margin: 1rem 0 0; }
.about-copy p:first-child { margin-top: 0; }

/* KONTAKT: E-Mail, Telefon und WhatsApp. */
.contact-card { width: 100%; padding: clamp(1.4rem, 3vw, 2.25rem); text-align: center; }
.contact-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-gap); }
.contact-method { min-width: 0; }
.contact-label { display: block; margin-bottom: .35rem; color: var(--color-text-muted); font: 600 var(--size-label)/1.5 var(--font-technical); letter-spacing: .065em; }
.contact-link { display: inline-flex; align-items: center; min-height: 2.75rem; max-width: 100%; color: var(--color-brand-light); font: 600 clamp(1rem, 2vw, 1.35rem)/1.4 var(--font-technical); text-decoration: underline; text-underline-offset: .25em; overflow-wrap: anywhere; }
.contact-link:hover { color: var(--color-brand-light); }
.contact-external { white-space: nowrap; }
.contact-email { display: inline-flex; align-items: center; min-height: 2.75rem; max-width: 100%; color: var(--color-brand-light); font-family: var(--font-technical); text-decoration: underline; text-underline-offset: .25em; overflow-wrap: anywhere; }
.contact-email:hover { color: var(--color-brand-light); }
/* Center the entire security note block, not only its text. */
.contact-security-note {
  width: min(100%, 66ch);
  max-width: 100%;
  margin: 1.1rem auto 0;
  text-align: center;
  text-wrap: pretty;
}

/* EMPFEHLUNGEN: eigene redaktionelle Seite, klar von MAIN42.tech-Leistungen getrennt. */
.recommendations-main { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.recommendations-hero { width: 100%; margin-bottom: 2.5rem; }
.recommendations-hero h1 { font-size: var(--size-section-title); line-height: 1.15; }
.recommendations-hero p { max-width: var(--text-max-width); margin: .65rem 0 0; color: var(--color-text-soft); }
.recommendations-grid { display: grid; gap: var(--card-gap); }
.recommendation-card { display: grid; grid-template-columns: clamp(5rem, 10vw, 8rem) minmax(0, 1fr) auto; align-items: center; gap: clamp(1rem, 3vw, 2rem); min-width: 0; padding: var(--card-padding); border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-surface); }
.recommendation-icon { color: var(--color-brand-light); font: 700 clamp(2.2rem, 5vw, 4rem)/1 var(--font-technical); letter-spacing: -.1em; text-align: center; white-space: nowrap; }
.recommendation-icon-cat { font-size: clamp(1.35rem, 3vw, 2.35rem); letter-spacing: -.14em; }
.recommendation-content { min-width: 0; }
.recommendation-type { margin: 0 0 .65rem; color: var(--color-brand-light); font: 600 var(--size-label)/1.5 var(--font-technical); letter-spacing: .05em; }
.recommendation-card h2 { font-size: var(--size-card-title); line-height: 1.35; }
.recommendation-content > p:not(.recommendation-type) { max-width: var(--text-max-width); margin: .65rem 0 0; color: var(--color-text-soft); }
.recommendation-action { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--color-brand-light); font: 600 var(--size-note)/1.5 var(--font-technical); text-decoration: underline; text-underline-offset: .25em; white-space: nowrap; }
.recommendation-pending { color: var(--color-text-muted); text-decoration: none; }
.recommendations-note { width: 100%; margin-top: var(--card-gap); padding: var(--card-padding); border: 1px solid var(--color-border); border-left: 3px solid var(--color-brand-muted); border-radius: var(--radius-medium); background: var(--color-surface); color: var(--color-text-soft); overflow-wrap: anywhere; }
.recommendations-note p { margin: 0; }
.recommendations-note p + p { margin-top: .65rem; }

/* LINKS & TERMINAL-CTA: Icon bleibt immer beim zugehörigen Wort.
   Nur der letzte bzw. erste Wortteil ist untrennbar; lange Bezeichnungen
   dürfen davor bzw. danach auf kleinen Bildschirmen normal umbrechen. */
.link-label,
.button-label { min-width: 0; overflow-wrap: break-word; }
/* Inline elements keep the continuous underline of their parent links.
   Keeping the final/first word together with its glyph prevents orphan arrows,
   without cutting the link's text decoration at an inline-block boundary. */
.link-tail,
.link-head { display: inline; white-space: nowrap; }
.link-arrow { white-space: nowrap; }

/* FOOTER */
footer { padding: 1.75rem 0 2.5rem; color: var(--color-text-muted); font: var(--size-label)/var(--line-body) var(--font-technical); }
.footer-brand { display: inline-flex; align-items: baseline; font-size: 1rem; }
.footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.footer-links a { text-decoration: underline; text-underline-offset: .25em; }
.footer-links a:hover { color: var(--color-text); }

/* RECHTSSEITEN: bestehende Inhalte und gemeinsame Darstellung. */
.legal-main { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.legal-hero { width: 100%; margin-bottom: 2.5rem; }
.legal-hero h1 { font-size: var(--size-section-title); line-height: 1.15; }
.legal-hero > p { max-width: var(--text-max-width); color: var(--color-text-soft); }
.legal-status {
  display: inline-block;
  margin: 1.25rem 0 .5rem;
  padding: .45rem .65rem;
  border: 1px solid var(--color-status-limited);
  border-radius: var(--radius-small);
  color: var(--color-status-limited);
  font: 600 var(--size-label)/1.4 var(--font-technical);
}
.legal-content { display: grid; width: 100%; gap: var(--card-gap); }
.legal-section { width: 100%; min-width: 0; padding: var(--card-padding); border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-surface); overflow-wrap: anywhere; }
.error-card { display: grid; min-height: clamp(20rem, 48vh, 31rem); place-content: center; justify-items: center; text-align: center; gap: 1rem; }
.error-card .terminal-command { font-size: clamp(.82rem, 1.2vw, 1rem); }
.error-card h1 { margin: 0; font-size: clamp(2.8rem, 7vw, 5.5rem); line-height: 1; }
.error-card p { margin: 0; }
.error-card .button { margin-top: .35rem; }
.legal-section h2 { margin-bottom: .75rem; font-size: var(--size-card-title); letter-spacing: -.035em; }
.legal-section h3 { margin: 1.25rem 0 .5rem; font-size: var(--size-body); letter-spacing: -.02em; }
.legal-section p, .legal-section ul { max-width: var(--text-max-width); margin: .65rem 0 0; color: var(--color-text-soft); }
.legal-section ul { padding-left: 1.25rem; }
.legal-fields { margin: 0; }
.legal-fields div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; padding: .7rem 0; border-top: 1px solid var(--color-border-subtle); }
.legal-fields div:first-child { border-top: 0; }
.legal-fields dt { color: var(--color-text-muted); font: 600 var(--size-note)/var(--line-body) var(--font-technical); }
.legal-fields dd { margin: 0; overflow-wrap: anywhere; }
.legal-placeholder { color: var(--color-status-limited); font-family: var(--font-technical); }
.legal-note { border-left: 3px solid var(--color-status-limited); }
.legal-back { display: inline-flex; min-height: 2.75rem; align-items: center; margin-top: 2rem; color: var(--color-brand-light); font: 600 var(--size-note)/1.5 var(--font-technical); text-decoration: underline; text-underline-offset: .25em; }

/* RESPONSIVE: zentrale Werte statt Sonderregeln für einzelne Karten. */
@media (max-width: 70rem) {
  .nav-claim { display: none; }
}
@media (max-width: 64rem) {
  :root { --anchor-offset: 10rem; }
  .nav { flex-wrap: wrap; gap: .6rem 1rem; }
  .nav-links { order: 3; flex-basis: 100%; justify-content: space-between; }
  .nav-right { margin-left: auto; }
}
@media (max-width: 56rem) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: unset; padding-top: 4rem; }
  .about { grid-template-columns: minmax(0, 1fr); }
  .about-aside { padding-block: 2rem; }
  .recommendation-card { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .recommendation-action { grid-column: 2; }
  .contact-methods { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  :root {
    --size-brand: clamp(1.2rem, 5.3vw, 1.75rem);
    --size-section-title: clamp(1.6rem, 6.5vw, 2.5rem);
    --section-spacing: 3.75rem;
    --card-padding: 1.1rem;
  }
  .container { width: min(calc(100% - 1.5rem), var(--content-max-width)); }
  .hero { gap: 3.25rem; padding: 5.5rem 0; }
  .nav-links { gap: .25rem .75rem; }
  .brand-story-definitions { grid-template-columns: minmax(0, 1fr); }
  .brand-story-definitions > div { border-left: 0; border-top: 1px solid var(--color-border-subtle); }
  .brand-story-definitions > div:first-child { border-top: 0; }
  .legal-fields div { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}
@media (max-width: 30rem) {
  :root { --anchor-offset: 13rem; }
  .nav-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .actions .button { width: 100%; }
  .recommendation-card { grid-template-columns: minmax(0, 1fr); }
  .recommendation-icon { text-align: left; }
  .recommendation-action { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}


/* V4: mehrseitige Navigation und kompakte Einstiegsseite. Keine JS-Abhängigkeit. */
.header-grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; min-height: 5.5rem; padding-block: .65rem; }
.header-grid .brand-main { font-size: clamp(1.35rem, 2.1vw, 1.8rem); }
.desktop-nav { display: flex; justify-content: center; gap: clamp(.6rem, 1.2vw, 1.2rem); }
.desktop-nav a, .language-nav a, .mobile-menu summary, .mobile-menu nav a { display: inline-flex; align-items: center; min-height: 2.75rem; font: 600 .875rem/1.5 var(--font-technical); }
.desktop-nav a { white-space: nowrap; }
.desktop-nav a:hover, .mobile-menu nav a:hover { color: var(--color-brand-light); }
.desktop-nav a[aria-current], .mobile-menu a[aria-current], .language-nav a[aria-current] { color: var(--color-brand-light); text-decoration: underline; text-underline-offset: .35em; }
.language-nav { display: flex; gap: .15rem; }
.language-nav a { justify-content: center; min-width: 2.75rem; }
.mobile-menu { display: none; }
.hero { min-height: auto; padding: 4.5rem 0 3rem; gap: 3rem; grid-template-columns: minmax(0, 1.3fr) minmax(18rem, .85fr); }
.hero-brand { font-size: min(6rem, 12.2cqi); margin-bottom: 1rem; }
.hero-claim { font-size: clamp(1.25rem, 2.6vw, 2rem); }
.hero-heading { margin-top: 1.75rem; max-width: 30ch; font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.25; letter-spacing: -.035em; }
.hero-copy { margin-block: 1.25rem; }
.hero-side { align-content: center; }
.section-intro { color: var(--color-text-soft); max-width: var(--text-max-width); margin: 0 0 1.5rem; }
.compact-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.preview-grid, .technology-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.content-card, .preview-card, .project-card { min-width: 0; padding: var(--card-padding); border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-surface); }
.content-card h2, .content-card h3, .preview-card h3, .project-card h2 { font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.35; letter-spacing: -.03em; }
.content-card p, .preview-card p, .project-card > p:not(.project-status) { color: var(--color-text-soft); margin: .75rem 0 0; }
.preview-card { display: flex; flex-direction: column; padding: clamp(1.35rem, 3vw, 2rem); transition: background .18s, border-color .18s; }
.preview-card:hover { background: var(--color-surface-raised); border-color: var(--color-brand-muted); }
.preview-card p { margin-bottom: 1.75rem; }
.card-link { display: block; margin-top: auto; color: var(--color-brand-light); font-family: var(--font-technical); text-decoration: underline; text-underline-offset: .25em; }
.workflow { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); padding: 0; list-style: none; }
.workflow li { border-top: 1px solid var(--color-brand-muted); padding-top: 1rem; min-width: 0; }
.step-number { display: block; margin-bottom: .75rem; color: var(--color-brand-light); font: 600 1rem var(--font-technical); }
.workflow h3 { font-size: 1.05rem; letter-spacing: -.025em; }
.workflow p { color: var(--color-text-soft); margin: .65rem 0 0; font-size: .95rem; }
.contact-methods { grid-template-columns: repeat(3,minmax(0,1fr)); }
.page-main { padding: 2rem 0 4rem; }
.page-heading { margin: 2rem 0 2.5rem; }
.page-heading h1 { font-size: var(--size-section-title); max-width: 30ch; line-height: 1.15; }
.page-heading > p { max-width: var(--text-max-width); margin: 1.25rem 0 0; color: var(--color-text-soft); font-size: 1.1rem; }
.back-link, .text-link { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--color-brand-light); text-decoration: underline; text-underline-offset: .25em; font-family: var(--font-technical); overflow-wrap: anywhere; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 2.5rem; }
.page-section { padding: 2.5rem 0; }
.page-section > h2 { margin-bottom: 1.25rem; font-size: clamp(1.4rem, 3vw, 2rem); }
.technology-card .technology-list { columns: 2; }
.technology-card .row-description { margin-top: .75rem; }
.extra-technologies { margin-top: 1rem; }
.extra-grid { display: grid; gap: var(--card-gap); }
.project-status { display: inline-block; margin: 0 0 1rem; padding: .5rem .8rem; border: 1px solid var(--color-brand-muted); border-radius: var(--radius-small); color: var(--color-brand-light); font: 600 .875rem/1.5 var(--font-technical); }
.project-card .text-link { margin-top: 1.25rem; }
.project-sections { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.project-sections section { padding: var(--card-padding); }
.related-link { margin: 1rem 0 0; }
.footer-links a { display: inline-flex; min-height: 2.75rem; align-items: center; }
main:focus { outline: none; }
@media (max-width: 1023px) {
  .header-grid { grid-template-columns: minmax(0,1fr) auto; gap: .25rem 1rem; }
  .desktop-nav { display: none; }
  .language-nav { grid-column: 1; grid-row: 2; justify-self: start; }
  .mobile-menu { display: block; grid-column: 2; grid-row: 1 / span 2; align-self: start; margin-top: .3rem; }
  .mobile-menu summary { gap: .5rem; cursor: pointer; list-style: none; padding: .4rem .65rem; border: 1px solid var(--color-border); border-radius: var(--radius-small); }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu[open] summary { color: var(--color-brand-light); border-color: var(--color-brand-muted); }
  .mobile-menu nav { position: absolute; top: 100%; left: 0; right: 0; display: grid; padding: .75rem max(.75rem, calc((100% - 74rem) / 2)); background: var(--color-surface); border-bottom: 1px solid var(--color-border); max-height: calc(100dvh - 7rem); overflow-y: auto; }
  .mobile-menu nav a { padding: .5rem 1rem; }
  .hero { grid-template-columns: minmax(0,1fr); padding-top: 3rem; }
  .hero-content { max-width: 48rem; }
  .hero-side { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .runner-ambient { grid-column: 1 / -1; }
  .compact-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #audience .compact-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .workflow { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .contact-methods { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 640px) {
  :root { --anchor-offset: 8rem; }
  .hero { padding: 2.5rem 0 1rem; gap: 2rem; }
  .hero-side, .compact-grid, .preview-grid, .technology-grid, .workflow { grid-template-columns: minmax(0,1fr); }
  .runner-ambient, #audience .compact-grid > :last-child:nth-child(odd) { grid-column: auto; }
  .hero-heading { font-size: 1.45rem; }
  .hero-claim { font-size: 1.4rem; }
  .hero-brand { font-size: min(4rem, 12.2cqi); }
  .workflow li { display: grid; grid-template-columns: 2rem minmax(0,1fr); gap: .75rem; }
  .technology-card .technology-list { columns: 1; }
  .page-heading > p { font-size: 1rem; }
  .page-actions { align-items: stretch; flex-direction: column; }
}


/* V4 Karten: gleiche visuelle Gewichtung mit guter Lesebreite. */
.brand-story-principle { text-align: center; }
.desktop-nav { gap: clamp(.55rem, 1vw, 1rem); }
.desktop-nav a { font-size: .8125rem; }

/* Open service and experience cards: decorative braces, native details state. */
:is(.services, .experience) > .reveal-row { position: relative; }
:is(.services, .experience) > .reveal-row[open] { border-left-color: transparent; }
:is(.services, .experience) > .reveal-row[open]::before,
:is(.services, .experience) > .reveal-row[open]::after {
  content: "";
  position: absolute;
  top: .65rem;
  bottom: .65rem;
  width: 16px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
:is(.services, .experience) > .reveal-row[open]::before { left: .25rem; background-image: url("brace-left.svg"); }
:is(.services, .experience) > .reveal-row[open]::after { right: .25rem; background-image: url("brace-right.svg"); }
:is(.services, .experience) > .reveal-row[open] > :is(.row-trigger, .row-detail) { padding-inline: calc(var(--card-padding) + 1rem); }
@media (max-width: 640px) {
  :is(.services, .experience) > .reveal-row[open]::before,
  :is(.services, .experience) > .reveal-row[open]::after { width: 10px; top: .5rem; bottom: .5rem; }
  :is(.services, .experience) > .reveal-row[open] > :is(.row-trigger, .row-detail) { padding-inline: calc(var(--card-padding) + .65rem); }
}

/* V4.1: deliberate responsive grids instead of forced full-width rows.
   Paragraph measure stays capped while surrounding cards remain fluid. */
#explore .preview-card { min-height: 0; }
#workflow .workflow li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .9rem; align-items: start; }
#workflow .step-number { margin: 0; }
#workflow .workflow p { margin-top: .35rem; }
:is(p, li, dd) { text-wrap: pretty; overflow-wrap: break-word; }
:is(h1, h2, h3) { text-wrap: balance; overflow-wrap: break-word; }
:is(.row-description, .about-copy p, .recommendation-content > p, .content-card p,
 .preview-card p, .project-card p, .workflow p, .legal-section p, .legal-section li) {
  max-width: var(--text-max-width);
}
:is(.contact-link, .contact-email, .legal-fields dd, .technology-list li, .service-points li) {
  overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  #workflow .workflow li { grid-template-columns: 2.5rem minmax(0, 1fr); }
}
.brand-story-principle, .recommendations-note { position: relative; border-left: 0; padding-inline: calc(var(--card-padding) + 1.5rem); }
:is(.brand-story-principle, .recommendations-note)::before,
:is(.brand-story-principle, .recommendations-note)::after {
  content: ""; position: absolute; top: .65rem; bottom: .65rem; width: 16px;
  pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%;
}
:is(.brand-story-principle, .recommendations-note)::before { left: .25rem; background-image: url("brace-left.svg"); }
:is(.brand-story-principle, .recommendations-note)::after { right: .25rem; background-image: url("brace-right.svg"); }
@media (max-width: 640px) {
  :is(.brand-story-principle, .recommendations-note) { padding-inline: calc(var(--card-padding) + .85rem); }
  :is(.brand-story-principle, .recommendations-note)::before,
  :is(.brand-story-principle, .recommendations-note)::after { width: 10px; top: .5rem; bottom: .5rem; }
}


.pricing-note { margin: -.75rem 0 1.25rem; padding: var(--card-padding); border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-surface); color: var(--color-text-soft); line-height: var(--line-body); text-wrap: pretty; }
.pricing-note strong { color: var(--color-brand); }

/* Error Runner preview: terminal, hero text and animation remain unchanged. */
.runner-ambient { min-width: 0; padding: .8rem; border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-surface); }
.runner-ambient-head, .runner-ambient-actions { display:flex; align-items:center; justify-content:space-between; gap:.75rem; font:600 var(--size-label)/1.4 var(--font-technical); }
.runner-ambient-head { padding:.2rem .3rem .75rem; color:var(--color-brand-light); }
.runner-ambient-head small { color:var(--color-text-muted); font:inherit; }
.runner-ambient-stage { position:relative; height:clamp(12rem,18vw,14rem); min-height:0; overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius-small); background:#101418; }
.runner-ambient-stage canvas { display:block; width:100%; height:100%; }
.runner-ambient-fallback { position:absolute; inset:0; display:grid; place-items:center; color:var(--color-brand-light); font:700 1rem var(--font-technical); }
.runner-ambient-stage.is-ready .runner-ambient-fallback { display:none; }
.runner-ambient-actions { padding:.8rem .2rem .1rem; flex-wrap:wrap; }
.runner-ambient-actions a { display:inline-flex; align-items:center; min-height:2.5rem; padding:.4rem .8rem; border:1px solid var(--color-brand-light); border-radius:var(--radius-small); background:var(--color-brand); color:var(--color-background); font-weight:700; text-decoration:none; white-space:nowrap; }
.runner-ambient-actions a:hover { background:var(--color-brand-light); }
.runner-ambient-pause { display:none; color:var(--color-text-soft); border:0; background:transparent; cursor:pointer; font:inherit; padding:.45rem .2rem; }
.runner-ambient-stage.is-ready + .runner-ambient-actions .runner-ambient-pause { display:inline-flex; }
.runner-ambient-pause:hover { color:var(--color-brand-light); }
.runner-ambient-pause:focus-visible { outline:2px solid var(--color-brand-light); outline-offset:3px; }
@media(max-width:640px){.runner-ambient-stage{height:12rem}.runner-ambient-head small{font-size:var(--size-label)}}
@media(prefers-reduced-motion:reduce){.runner-ambient-stage.is-ready + .runner-ambient-actions .runner-ambient-pause{display:none}}

/* V4.1: small purposeful state changes, keyboard affordance, and consistent spacing. */
.content-card, .preview-card, .project-card { min-width: 0; }
.preview-card:focus-visible { border-color: var(--color-brand-light); }
.preview-card .card-link { line-height: 1.5; }
:is(.contact-link, .contact-email, .text-link, .back-link, .card-link):hover { text-decoration-thickness: .11em; }
.row-trigger:hover { background: rgba(255,255,255,.025); }
:is(.section-intro, .contact-security-note) { text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) {
  .preview-card, .button, .reveal-row { transition: none; }
}

/* V4.2 – Hero facts: each technical label has its own readable, aligned information row.
   Sentences stay together on small screens; on roomy desktops they start on new lines. */
.hero-facts {
  display: grid;
  gap: .55rem;
  margin: 1.45rem 0 1.5rem;
  padding: 0;
}
.hero-fact {
  display: grid;
  grid-template-columns: minmax(6.4rem, 7.6rem) minmax(0, 1fr);
  align-items: baseline;
  column-gap: clamp(.65rem, 1.6vw, 1rem);
  min-width: 0;
  padding: .75rem clamp(.8rem, 1.6vw, 1rem);
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-brand-muted);
  border-radius: var(--radius-small);
  background: var(--color-surface);
}
.hero-fact dt {
  color: var(--color-brand-light);
  font: 600 .8rem/1.55 var(--font-technical);
  white-space: nowrap;
}
.hero-fact dd {
  min-width: 0;
  margin: 0;
  max-width: var(--text-max-width);
  color: var(--color-text-soft);
  font: .925rem/1.6 var(--font-body);
  overflow-wrap: break-word;
}
.hero-fact-sentence + .hero-fact-sentence::before { content: " "; }
@media (min-width: 1050px) {
  .hero-fact-sentence + .hero-fact-sentence { display: block; }
  .hero-fact-sentence + .hero-fact-sentence::before { content: none; }
}
@media (max-width: 550px) {
  .hero-fact { grid-template-columns: minmax(0,1fr); gap: .2rem; }
  .hero-fact dd { font-size: .925rem; }
}

/* V4.2 – one footer language for all 3 locales and all page types.
   Brand and copyright form a left-hand group, legal navigation stays aligned right. */
footer:not(.runner-footer) { padding-block: 1.75rem 2.5rem; }
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "brand links" "copyright links";
  align-items: center;
  gap: .35rem clamp(1rem, 3vw, 2.5rem);
  min-height: auto;
  padding-top: 1.5rem;
}
/* Die Footer-Wortmarke folgt der visuellen Hierarchie des Header-Logos:
   gleiche Zeichen/Farben, eigenständige kompakte Größe statt Fließtext-Größe. */
.footer-brand {
  grid-area: brand;
  justify-self: start;
  display: inline-flex;
  align-items: baseline;
  gap: .15em;
  font: 700 clamp(1.35rem, 2vw, 1.8rem)/1.2 var(--font-technical);
  letter-spacing: -.055em;
  white-space: nowrap;
  transition: opacity .18s ease;
}
.footer-brand .main42-wordmark { font-size: 1em; line-height: 1.2; }
.footer-brand .terminal-mark { color: var(--color-terminal); }
.footer-brand:hover { opacity: .85; }
.footer-copyright { grid-area: copyright; justify-self: start; color: var(--color-text-muted); font-size: .8125rem; }
.footer-links {
  grid-area: links;
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .3rem clamp(.8rem, 1.8vw, 1.25rem);
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-text-soft);
  font-size: .875rem;
  text-underline-offset: .25em;
}
.footer-links a:hover, .footer-links a:focus-visible { color: var(--color-brand-light); }
@media (max-width: 740px) {
  .footer-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "brand" "links" "copyright";
    row-gap: .65rem;
    align-items: start;
  }
  .footer-links { grid-column: auto; justify-self: start; justify-content: flex-start; }
  .footer-copyright { margin-top: .15rem; }
}

/* V4.5 – Desktop-only sentence breaks for editorial paragraphs.
   Small cards and mobile text retain natural line wrapping. */
.desktop-sentence { display: inline; }
@media (min-width: 1024px) {
  .desktop-sentence + .desktop-sentence { display: block; }
}

/* Kontakt wird in V4.8 unten zentral gepflegt. Die V4.6-Übersicht war
   inhaltlich mit Hero und Ablauf doppelt und ist entfernt worden. */

/* Compact detail lists: two columns on wide screens, no little cards inside cards.
   Native <ul>/<li> semantics and gold bullet markers remain intact. */
:is(.services, .experience) .row-description { max-width: 88ch; }
.services .service-points {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem clamp(1.1rem, 3vw, 2.75rem);
  margin-top: .9rem;
  padding-left: 1.2rem;
}
.services .service-points li { min-width: 0; padding-right: .3rem; }
.services .service-points li + li { margin-top: 0; }
.experience .technology-list {
  max-width: none;
  margin-top: .85rem;
  column-gap: 2rem;
  line-height: 1.55;
}
.experience .technology-list li { break-inside: avoid; }
.experience .technology-list li + li { margin-top: .2rem; }
@media (max-width: 960px) {
  .services .service-points { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
}

/* V4.7 – Site-wide layout polish.
   Visual direction: quiet graphite surfaces, restrained gold, readable content,
   smaller related groups instead of oversized empty panels. No content changes. */
:root {
  --card-gap: 1rem;
  --row-min-height: 4.25rem;
}

/* Shared card rhythm: align padding/contrast while keeping all existing content. */
.content-card,
.preview-card,
.project-card,
.recommendation-card,
.project-sections > section,
.legal-section {
  border-radius: var(--radius-medium);
}
.content-card,
.project-card,
.project-sections > section { padding: clamp(1.25rem, 2.3vw, 1.75rem); }
.content-card h3,
.preview-card h3,
.project-card h2 { line-height: 1.3; }
.content-card > p,
.project-card > p:not(.project-status) { line-height: 1.65; }
.preview-card, .content-card { height: 100%; }
.preview-card:hover { transform: none; }

/* About page: one leading statement + four individually readable facts.
   Existing five paragraphs and their original order remain untouched. */
.about-copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--card-gap);
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  border: 0;
  background: transparent;
}
.about-copy > p {
  max-width: none;
  margin: 0;
  padding: clamp(1.3rem, 2.25vw, 1.8rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface);
  color: var(--color-text-soft);
  line-height: 1.7;
}
.about-copy > p:first-child {
  grid-column: 1 / -1;
  border-left: 2px solid var(--color-brand-muted);
  color: var(--color-text);
  font-size: clamp(1.02rem, 1.35vw, 1.125rem);
}
/* Principles: four easy-to-scan cards on wide screens. */
.page-section:has(> .preview-grid > .content-card:nth-child(4)) > .preview-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.page-section:has(> .preview-grid > .content-card:nth-child(4)) .content-card {
  border-top: 2px solid var(--color-brand-muted);
}

/* Services/experience: short two-column overview; expanding one category
   uses the full available width. Keep native details/summary interactions. */
.services,
.experience {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--card-gap);
}
.services > .reveal-row,
.experience > .reveal-row {
  min-width: 0;
  border-left: 1px solid var(--color-border);
  transition: background-color .18s ease, border-color .18s ease;
}
.services > .reveal-row[open],
.experience > .reveal-row[open] {
  grid-column: 1 / -1;
  border-color: var(--color-brand-muted);
  background: var(--color-surface-raised);
}
/* Experience entries contain short technology tags and do not need to span
   the whole grid when expanded; services keep full-width detailed text. */
.experience > .reveal-row[open] { grid-column: auto; }
/* Decorative full-height braces made short lists look unnecessarily huge. */
:is(.services, .experience) > .reveal-row[open]::before,
:is(.services, .experience) > .reveal-row[open]::after { display: none; }
:is(.services, .experience) > .reveal-row[open] > :is(.row-trigger, .row-detail) {
  padding-inline: var(--card-padding);
}
:is(.services, .experience) .row-trigger {
  min-height: 4.25rem;
  padding: 1rem var(--card-padding);
  gap: 1.5rem;
}
:is(.services, .experience) .row-heading { line-height: 1.35; }
:is(.services, .experience) .row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  min-height: 1.75rem;
  font-size: 1.25rem;
}
:is(.services, .experience) .row-detail {
  border-top: 1px solid var(--color-border-subtle);
  padding: 1rem var(--card-padding) 1.4rem;
}
:is(.services, .experience) .row-description {
  max-width: 74ch;
  font-size: .975rem;
  line-height: 1.7;
}
/* Services are human-readable sentences, not technical badges. */
.services .service-points {
  list-style: none;
  max-width: none;
  padding: 0;
  margin-top: 1.15rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem clamp(1rem, 3vw, 2.5rem);
}
.services .service-points li {
  position: relative;
  padding: .15rem .5rem .15rem 1rem;
  line-height: 1.55;
  break-inside: avoid;
}
.services .service-points li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--color-brand-light);
  font-family: var(--font-technical);
}
/* Technology names stay a real UL but are represented as compact tags. */
.experience .technology-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .55rem;
  max-width: none;
  margin: 1.15rem 0 0;
  padding: 0;
  list-style: none;
  columns: auto;
}
.experience .technology-list li,
.experience .technology-list li + li {
  max-width: 100%;
  margin: 0;
  padding: .42rem .7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  color: var(--color-text-soft);
  font: 500 .9rem/1.45 var(--font-body);
  overflow-wrap: anywhere;
}

/* Projects and references: balance multi-card views without introducing
   fabricated projects or changing project status. */
/* Five process steps should not leave an unused grid cell on desktop.
   With six grid tracks, three steps fill the first row and two fill the second. */
@media (min-width: 1024px) {
  #workflow .workflow:has(> li:nth-child(5):last-child) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  #workflow .workflow:has(> li:nth-child(5):last-child) > li:nth-child(-n + 3) {
    grid-column: span 2;
  }

  #workflow .workflow:has(> li:nth-child(5):last-child) > li:nth-child(n + 4) {
    grid-column: span 3;
  }
}

@media (min-width: 641px) and (max-width: 1023px) {
  #workflow .workflow > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Project overview: one real project is not stretched into a half-empty panel.
   Use the existing status, description and link as two clear desktop zones.
   On narrow screens the content returns to its natural reading order. */
.project-card--overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, .38fr);
  grid-template-areas:
    "status action"
    "copy action";
  align-items: center;
  gap: .85rem clamp(1.5rem, 4vw, 3.75rem);
}
.project-card--overview > .project-status {
  grid-area: status;
  justify-self: start;
  margin: 0;
}
.project-card__copy {
  grid-area: copy;
  min-width: 0;
}
.project-card__copy h2 {
  max-width: none;
}
.project-card__copy p {
  max-width: 72ch;
  margin: .65rem 0 0;
  color: var(--color-text-soft);
  line-height: 1.65;
}
.project-card--overview > .text-link {
  grid-area: action;
  justify-self: end;
  margin: 0;
  max-width: 17rem;
}
/* Only on wide desktops: keep the entire project action together. */
@media (min-width: 1200px) {
  .project-card--overview > .text-link {
    max-width: none;
    white-space: nowrap;
  }
}
@media (max-width: 800px) {
  .project-card--overview {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "status" "copy" "action";
    gap: .85rem;
  }
  .project-card--overview > .text-link {
    justify-self: start;
    max-width: none;
    margin-top: .4rem;
  }
}

.project-card { border-top: 2px solid var(--color-brand-muted); }
.project-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-gap); }
.project-sections > section:last-child:nth-child(odd) { grid-column: 1 / -1; }
.project-sections > section { margin: 0; }
.project-sections p, .project-sections li { max-width: 72ch; }
.recommendations-grid { gap: var(--card-gap); }
.recommendation-card { padding: clamp(1.25rem, 2.3vw, 1.8rem); }

/* Legal text stays sequential; it benefits from a readable measure, not tiny tiles. */
.legal-section { padding: clamp(1.3rem, 2.5vw, 2rem); }
.legal-content { max-width: 68rem; }
.legal-section :is(p, li, dd) { max-width: 78ch; }

/* Consistent keyboard focus, restrained interactions, useful spacing. */
:is(.preview-card, .project-card, .reveal-row):focus-within { border-color: var(--color-brand-muted); }
:is(.services, .experience) > .reveal-row:not([open]):hover {
  border-color: var(--color-brand-muted);
  background: var(--color-surface-raised);
}
@media (max-width: 1140px) {
  .page-section:has(> .preview-grid > .content-card:nth-child(4)) > .preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .about-copy { grid-template-columns: minmax(0, 1fr); }
  .about-copy > p:first-child { grid-column: auto; }
  .services, .experience { grid-template-columns: minmax(0, 1fr); }
  .project-sections { grid-template-columns: minmax(0, 1fr); }
  .project-sections > section:last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 640px) {
  .page-section:has(> .preview-grid > .content-card:nth-child(4)) > .preview-grid { grid-template-columns: minmax(0, 1fr); }
  .about-copy > p { padding: 1.15rem; }
  .services .service-points { grid-template-columns: minmax(0, 1fr); }
  :is(.services, .experience) .row-trigger { min-height: 3.7rem; }
  .experience .technology-list { gap: .45rem; }
  .experience .technology-list li { font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .services > .reveal-row, .experience > .reveal-row { transition: none; }
}

/* V4.8 – Ruhe und Lesbarkeit: drei eigenständige Kontaktwege statt einer
   breiten Sammelkarte, keine Doppelung der Ablauf-/Termin-Hinweise.
   Die bestehenden Texte und Links bleiben erhalten. */
#contact .contact-overview {
  display: block;
  margin-bottom: clamp(1.25rem, 2.6vw, 1.85rem);
}
#contact .contact-lead {
  max-width: 78ch;
  margin: 0;
  color: var(--color-text-soft);
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.65;
  text-wrap: pretty;
}
#contact .contact-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  text-align: center;
}
#contact .contact-methods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
#contact .contact-method {
  display: flex;
  min-width: 0;
  min-height: 8.5rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: clamp(1.25rem, 2.2vw, 1.8rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface);
  transition: border-color .18s ease, background-color .18s ease;
}
#contact .contact-method:hover,
#contact .contact-method:focus-within {
  border-color: var(--color-brand-muted);
  background: var(--color-surface-raised);
}
#contact .contact-label { margin: 0; }
#contact .contact-link { font-size: clamp(.95rem, 1.6vw, 1.2rem); }
/* Two complete sentences on their own lines. Do not constrain this strip
   to a narrow character measure on wide screens. */
#contact .contact-security-note {
  width: 100%;
  max-width: none;
  margin: clamp(1.3rem, 2.6vw, 1.9rem) auto 0;
  padding: 1.15rem .4rem 0;
  border-top: 1px solid var(--color-border-subtle);
  background: transparent;
  color: var(--color-text-muted);
  font-size: .91rem;
  line-height: 1.65;
  text-align: center;
  text-wrap: pretty;
}
#contact .contact-security-note .desktop-sentence { display: block; }
/* The first German sentence fits at desktop widths; narrower viewports
   retain natural wrapping so nothing ever clips. */
@media (min-width: 1200px) {
  #contact .contact-security-note .desktop-sentence { white-space: nowrap; }
}
/* This is an explanation, not an extra prominent offering. Keep it wide and
   easy to read instead of force-wrapping into a narrow text column. */
.experience-note {
  max-width: none;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border-subtle);
  color: var(--color-text-muted);
  font-size: .9rem;
  line-height: 1.65;
}
/* The animal welfare project has three real content blocks. At desktop widths
   a balanced three-card layout avoids the empty full-width final panel. */
@media (min-width: 1200px) {
  .project-sections { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .project-sections > section:last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 900px) {
  #contact .contact-methods { grid-template-columns: minmax(0, 1fr); }
  #contact .contact-method { min-height: 6.5rem; }
  #contact .contact-security-note { font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
  #contact .contact-method { transition: none; }
}


/* V4.9 — Service-first hierarchy. Existing detailed lists and technology names
   stay in semantic HTML, but context is visible before opening an accordion. */
:is(.services, .experience) .row-trigger { align-items: flex-start; min-height: 7rem; padding-block: 1.25rem; }
:is(.services, .experience) .row-summary-copy { display: grid; gap: .5rem; min-width: 0; }
:is(.services, .experience) .row-heading { font-size: clamp(1.075rem, 1.45vw, 1.22rem); letter-spacing: -.035em; color: var(--color-text); }
:is(.services, .experience) .row-preview-text { color: var(--color-text-soft); font: 400 .945rem/1.55 var(--font-body); max-width: 49ch; text-wrap: pretty; }
:is(.services, .experience) .row-icon { margin-top: .05rem; color: var(--color-brand-light); }
:is(.services, .experience) .row-detail { padding-top: .85rem; }
.services > .reveal-row[open] { grid-column: 1 / -1; }
.experience > .reveal-row[open] { grid-column: auto; }
.services .service-points { margin-top: .2rem; }
.experience .technology-list { margin-top: .15rem; }
/* Main offers are the primary next action. Secondary navigation is deliberately quieter. */
#explore .service-overview { align-items: stretch; }
#explore .service-entry { padding: clamp(1.3rem, 2.35vw, 1.9rem); min-height: 13.5rem; }
#explore .service-entry h3 { font-size: clamp(1.08rem, 1.45vw, 1.3rem); }
#explore .service-entry p { max-width: 40ch; margin: .65rem 0 1.6rem; font-size: .965rem; line-height: 1.6; }
#explore .service-entry .card-link { font-size: .845rem; }
#explore .service-secondary-links { display: flex; flex-wrap: wrap; gap: .65rem 1.45rem; align-items: baseline; padding: 1.35rem 0 0; color: var(--color-text-muted); font: 500 .875rem/1.6 var(--font-body); }
#explore .service-secondary-links > span { margin-right: .35rem; font-weight: 600; }
#explore .service-secondary-links a { text-decoration: underline; text-underline-offset: .25em; color: var(--color-text-soft); }
#explore .service-secondary-links a:hover { color: var(--color-brand-light); }
#explore .service-secondary-links a:focus-visible { border-radius: .1rem; }
/* Audience explains WHO, services explain WHAT; keep the smaller audience overview calm. */
#audience .content-card { padding: clamp(1.15rem, 2vw, 1.5rem); background: transparent; }
#audience .content-card h3 { font-size: 1.1rem; }
#audience .content-card p { margin-top: .45rem; max-width: 39ch; line-height: 1.55; font-size: .93rem; }
/* Runner is a genuine Easter egg, but not a stronger call to action than IT services. */
.hero-side .runner-ambient { opacity: .92; }
@media (max-width: 860px) {
  :is(.services, .experience) .row-trigger { min-height: 6rem; }
  #explore .service-entry { min-height: 0; }
}
@media (max-width: 640px) {
  :is(.services, .experience) .row-trigger { min-height: 0; padding-block: 1.1rem; }
  :is(.services, .experience) .row-preview-text { font-size: .91rem; }
  #explore .service-secondary-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem .9rem; }
  #explore .service-secondary-links > span { grid-column: 1 / -1; }
}


/* V5.0 – Remote support page: static, quiet and device-first. */
.remote-main { padding-bottom: clamp(4rem, 7vw, 6rem); }
.remote-heading { margin-bottom: clamp(2rem, 4vw, 3rem); }
.remote-kicker { display: inline-block; margin-bottom: .65rem; color: var(--color-brand-muted); font: 600 .78rem/1.4 var(--font-technical); letter-spacing: .11em; }
.remote-heading > p { max-width: 63ch; }
.remote-shell { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr); gap: clamp(1rem, 2.2vw, 2rem); align-items: stretch; }
.remote-primary { padding: clamp(1.45rem, 3.2vw, 2.35rem); border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-surface); }
.remote-provider-heading { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; justify-content: space-between; padding-bottom: 1.1rem; margin-bottom: 1.35rem; border-bottom: 1px solid var(--color-border-subtle); }
.remote-provider-label { font: 700 1rem/1.4 var(--font-technical); color: var(--color-text); }
.remote-provider-tag { font: 500 .75rem/1.5 var(--font-technical); color: var(--color-text-muted); }
.remote-primary h2,.remote-steps-wrap h2,.remote-guidance h2 { font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.3; }
.remote-primary > p { color: var(--color-text-soft); font-size: .975rem; line-height: 1.65; max-width: 56ch; }
.remote-primary .remote-download { display: flex; justify-content: center; max-width: 100%; margin: clamp(1.35rem, 3vw, 2rem) 0 1.1rem; text-align: center; text-wrap: balance; }
.remote-primary > .remote-provider-note,.remote-primary > .remote-provider-minor { color: var(--color-text-muted); font-size: .83rem; line-height: 1.65; }
.remote-primary > .remote-provider-minor { margin-top: 1.1rem; }
.remote-steps-wrap { padding: clamp(1.45rem, 3.2vw, 2.35rem); border: 1px solid var(--color-border); border-radius: var(--radius-medium); }
.remote-steps { display: grid; gap: 1.4rem; list-style: none; padding: 1.5rem 0 0; margin: 0; }
.remote-step { display: grid; grid-template-columns: 2rem minmax(0,1fr); gap: .9rem; align-items: start; }
.remote-step-index { font: 600 .86rem/1.55 var(--font-technical); color: var(--color-brand-light); }
.remote-step h3 { font-size: .99rem; letter-spacing: -.025em; }
.remote-step p { max-width: 54ch; margin: .3rem 0 0; color: var(--color-text-soft); font-size: .92rem; line-height: 1.6; }
.remote-guidance { margin-top: clamp(2rem, 4vw, 3.2rem); }
.remote-guidance-list { padding: 0; margin: 1.3rem 0 0; list-style: none; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem 2rem; }
.remote-guidance-list li { display: grid; gap: .3rem; padding: 0 0 1.05rem; border-bottom: 1px solid var(--color-border-subtle); }
.remote-guidance-list strong { font-size: .95rem; color: var(--color-text); }
.remote-guidance-list span { font-size: .9rem; line-height: 1.65; color: var(--color-text-soft); }
.remote-privacy { margin-top: 2.35rem; display: flex; flex-wrap: wrap; gap: .7rem 1.3rem; align-items: baseline; border-left: 2px solid var(--color-brand-muted); padding: .15rem 0 .15rem 1rem; }
.remote-privacy p { flex: 1 1 100%; margin: 0; max-width: 95ch; font-size: .87rem; line-height: 1.65; color: var(--color-text-muted); }
.remote-privacy a { font-size: .85rem; color: var(--color-brand-light); text-decoration: underline; text-underline-offset: .2em; }
.remote-actions { margin-top: 2.3rem; }
.contact-remote-link { margin: 1.35rem 0 0; color: var(--color-text-muted); font-size: .9rem; text-align: center; }
.contact-remote-link a { margin-left: .35rem; color: var(--color-brand-light); text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 900px) {
  .remote-shell { grid-template-columns: minmax(0,1fr); }
  .remote-guidance-list { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 640px) {
 .remote-main { padding-top: 1.4rem; }
 .remote-primary,.remote-steps-wrap { padding: 1.2rem; }
 .remote-step { grid-template-columns: 1.7rem minmax(0,1fr); gap: .65rem; }
 .remote-download { width: 100%; font-size: .83rem; }
 .contact-remote-link { text-align: center; }
 .contact-remote-link a { display: block; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .remote-main * { scroll-behavior: auto; } }

/* V5.13 — Reference pages. Scoped layout, no framework or JS required. */
.portfolio-page .portfolio-heading { margin-bottom: clamp(1.5rem, 3vw, 2.4rem); }
.portfolio-page .portfolio-heading > p { max-width: 76ch; }
.portfolio-list { display: grid; gap: clamp(1rem, 2vw, 1.4rem); }
.portfolio-card {
  display: grid;
  grid-template-columns: minmax(15rem, .82fr) minmax(0, 1.18fr);
  gap: clamp(1.4rem, 3vw, 2.5rem);
  padding: clamp(1rem, 2.3vw, 1.65rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface);
  min-width: 0;
  align-items: center;
}
.portfolio-card__media { min-width: 0; display: flex; height: 100%; }
.portfolio-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  min-height: 13.25rem;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius-medium) - .2rem);
  padding: clamp(1.2rem, 3vw, 2.4rem);
  overflow: hidden;
}
.portfolio-logo--ga { background: #0b0d12; }
.portfolio-logo--cat { background: #f6dcf6; }
.portfolio-logo img { width: 100%; max-width: 30rem; height: auto; max-height: 14rem; object-fit: contain; }
.portfolio-logo--cat img { max-width: 21rem; }
.portfolio-card__body { min-width: 0; display: grid; gap: .8rem; align-content: center; }
.portfolio-card__body > :is(h2,p) { margin: 0; }
.portfolio-card__body h2 { font-size: clamp(1.25rem, 2.1vw, 1.65rem); line-height: 1.3; }
.portfolio-card__body > p:not(.portfolio-card__eyebrow) { color: var(--color-text-soft); line-height: 1.6; }
.portfolio-card__body > .portfolio-card__benefit { color: var(--color-text); font-size: .93rem; }
.portfolio-card__eyebrow { font: 600 .75rem/1.5 var(--font-technical); letter-spacing: .045em; color: var(--color-brand-light); }
.portfolio-tags { display: flex; flex-wrap: wrap; list-style: none; margin: .2rem 0 0; padding: 0; gap: .45rem; }
.portfolio-tags li { border: 1px solid var(--color-border); background: var(--color-background); padding: .35rem .65rem; border-radius: var(--radius-small); font: 500 .75rem/1.45 var(--font-technical); color: var(--color-text-soft); }
.portfolio-card__links { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.5rem; padding-top: .25rem; }
.portfolio-card__links a { min-height: 2rem; align-content: center; }
.portfolio-case-header {
  display: grid;
  grid-template-columns: minmax(0,1.38fr) minmax(16rem,.82fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding-block: clamp(2rem, 4vw, 3.3rem);
}
.portfolio-case-header__intro { min-width: 0; }
.portfolio-case-header__intro h1 { font-size: clamp(1.9rem, 3.4vw, 3.2rem); line-height: 1.18; margin: .7rem 0 1.1rem; overflow-wrap: normal; }
.portfolio-case-header__subtitle { color: var(--color-brand-light); font: 600 .82rem/1.5 var(--font-technical); margin: 0 0 .9rem; }
.portfolio-case-header__copy { color: var(--color-text-soft); font-size: 1.025rem; line-height: 1.7; margin: 0; max-width: 70ch; }
.portfolio-case-header__visual { min-width: 0; }
.portfolio-case-header__visual .portfolio-logo { min-height: clamp(13rem, 24vw, 19rem); }
.portfolio-case-header__actions { display: flex; gap: .85rem 1.6rem; flex-wrap: wrap; align-items: center; margin-top: 1.5rem; }
.portfolio-archive-note { margin: .8rem 0 0; font-size: .8rem; color: var(--color-text-muted); }
.portfolio-info-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(.9rem, 1.8vw, 1.3rem); }
.portfolio-info-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-medium); padding: clamp(1.25rem, 2.5vw, 2rem); min-width: 0; }
.portfolio-info-card__index { font: 600 .78rem/1.5 var(--font-technical); color: var(--color-brand-light); margin-bottom: .8rem; }
.portfolio-info-card h2 { font-size: clamp(1.1rem, 1.75vw, 1.35rem); line-height: 1.35; margin: 0 0 .75rem; }
.portfolio-info-card p { margin: 0; color: var(--color-text-soft); line-height: 1.7; font-size: .96rem; }
.portfolio-conclusion { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 2rem; background: var(--color-surface-raised); border-left: 3px solid var(--color-brand); border-radius: var(--radius-small); padding: clamp(1.4rem, 3vw, 2.2rem); margin: clamp(1.25rem, 3vw, 2rem) 0; }
.portfolio-conclusion h2 { font: 600 clamp(1.1rem, 1.9vw, 1.45rem)/1.5 var(--font-body); margin: .65rem 0 0; }
.portfolio-conclusion h3 { font: 600 1rem/1.45 var(--font-technical); margin: 0 0 .9rem; }
.portfolio-detail .page-actions { align-items: baseline; }
@media (max-width: 820px) {
  .portfolio-card { grid-template-columns: minmax(0,1fr); }
  .portfolio-card__media { min-height: 0; }
  .portfolio-case-header { grid-template-columns: minmax(0,1fr); }
  .portfolio-case-header__visual { grid-row: 1; }
  .portfolio-case-header__visual .portfolio-logo { min-height: 12rem; }
  .portfolio-conclusion { grid-template-columns: minmax(0,1fr); gap: 1rem; }
}
@media (max-width: 640px) {
  .portfolio-card, .portfolio-info-card { padding: 1.1rem; }
  .portfolio-info-grid { grid-template-columns: minmax(0,1fr); }
  .portfolio-logo { min-height: 10rem; padding: 1.25rem; }
  .portfolio-card__links { gap: .45rem 1.25rem; }
  .portfolio-case-header__intro h1 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
}