@font-face {
    font-family: "Comfortaa";
    src: url(fonts/comfortaa.woff2) format("woff2");
    font-weight: 400 700;
    font-display: swap;
  }
  @font-face {
    font-family: "Work Sans";
    src: url(fonts/work-sans.woff2) format("woff2");
    font-weight: 100 900;
    font-display: swap;
  }

  :root {
    --bg: #FCFDFE;
    --surface: #F1F6FB;
    --surface-strong: #E7F0F9;
    --ink: #17242F;
    --muted: #4D6072;
    --accent: #2685DF;
    --accent-ink: #1265A8;
    --btn-bg: #1470AF;
    --btn-bg-hover: #0F5C91;
    --btn-ink: #FFFFFF;
    --line: #DEE7F0;
    --good: #1B7F4E;
    --navy: #1B3766;
    --pmx-orange: #E57000;
  }

  /* --- Von www.contensi.com uebernommen: farbig hervorgehobenes Schluesselwort --- */
  /* Der Original-Cyan #16CFF8 steht dort auf dunklen Flaechen und haette hier nur
     1,82:1 Kontrast. Dieser Ton behaelt den Charakter und ist auf hellem Grund lesbar. */
  :root { --akzent-cyan: #0B87A6; }
  h1 .hl, h2 .hl { color: var(--akzent-cyan); }

  /* Bewusst helles, einheitliches Design – kein Dark Mode */
  * { box-sizing: border-box; }
  /* muss nach den display-Regeln unten greifen, sonst bleibt hidden wirkungslos */
  [hidden] { display: none !important; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
  }
  html, body { overflow-x: clip; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Work Sans", "Segoe UI", system-ui, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
  }

  .wrap { max-width: 44rem; margin: 0 auto; padding: 0 1.375rem; }

  header.site {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 0 0;
  }
  .logo-chip { display: inline-flex; align-items: center; }
  .logo { display: block; width: 156px; height: auto; }

  a:focus-visible, button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
  }

  main { display: flex; flex-direction: column; gap: 5rem; padding: 4.5rem 0 5rem; }

  .eyebrow {
    font-size: 0.78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.2em;
    color: var(--accent-ink);
    margin: 0 0 0.875rem;
  }
  h1, h2 {
    font-family: "Comfortaa", "Work Sans", sans-serif;
    font-weight: 700;
    line-height: 1.22;
    text-wrap: balance;
    margin: 0 0 1.125rem;
  }
  h1 { font-size: clamp(1.9rem, 5.5vw, 2.6rem); }
  h2 { font-size: clamp(1.35rem, 3.5vw, 1.7rem); }
  p { margin: 0 0 1rem; }
  .lead { font-size: 1.1875rem; color: var(--muted); max-width: 38rem; }

  .cta-row { margin-top: 2rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }

  .zeitpunkt .motto, .claim {
    font-size: 1.1875rem;
    font-style: italic;
    font-weight: 500;
    color: var(--accent-ink);
    margin: 1.5rem 0 0;
  }
  .claim { font-style: normal; }
  .zeitpunkt .cta-row { margin-top: 1.75rem; }

  /* Partner-Zertifikat rechts neben der Sektion */
  .ueber-uns { position: relative; }
  .zertifikat {
    position: absolute;
    top: 0.25rem;
    left: calc(100% + 2.5rem);
    width: 168px;
    margin: 0;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.875rem;
    box-shadow: 0 8px 22px -10px rgba(23, 36, 47, 0.28);
  }
  .zertifikat img { display: block; width: 100%; height: auto; border-radius: 8px; }
  @media (max-width: 1180px) {
    .zertifikat { position: static; width: 150px; margin: 2.25rem 0 0; }
  }

  .btn {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--btn-bg);
    color: var(--btn-ink);
    font-family: inherit;
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.3;
    text-decoration: none;
    text-align: center;
    padding: 0.875rem 1.75rem;
    min-width: min(19rem, 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  }
  .btn:hover, .btn:focus-visible {
    background: var(--btn-bg-hover);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -10px rgba(22, 207, 248, 0.55);
  }
  .btn:active { transform: translateY(-1px); }
  .hint { font-size: 0.9rem; color: var(--muted); }

  /* Porträt links außerhalb der Textspalte, dezent im Hintergrund */
  .ausgangslage { position: relative; }
  .gf-portrait {
    position: absolute;
    top: 0.25rem;
    right: calc(100% + 2.5rem);
    width: 200px;
    margin: 0;
  }
  .gf-portrait img {
    display: block;
    width: 200px; height: 200px;
    border-radius: 50%;
    object-fit: cover;
    opacity: 0.5;
  }
  .gf-portrait figcaption {
    margin-top: 0.875rem;
    text-align: center;
    line-height: 1.4;
  }
  .gf-name { display: block; font-weight: 600; font-size: 0.9375rem; }
  .gf-role { display: block; font-size: 0.85rem; color: var(--muted); }
  /* Einordnung als Zitat */
  .zitat { margin: 2.25rem 0 0; padding: 0; }
  .zitat p {
    margin: 0;
    font-size: 1.1875rem;
    font-style: italic;
    font-weight: 500;
    line-height: 1.5;
    color: var(--accent-ink);
    text-wrap: balance;
  }
  .zitat p::before { content: "„"; }
  .zitat p::after { content: "“"; }
  /* Quellenangabe nur zeigen, wenn das Porträt daneben ausgeblendet ist */
  .zitat-quelle {
    display: none;
    margin-top: 0.625rem;
    font-size: 0.875rem;
    font-style: normal;
    color: var(--muted);
  }
  .zitat-quelle::before { content: "— "; }
  @media (max-width: 1180px) { .zitat-quelle { display: block; } }
  @media (max-width: 1180px) { .gf-portrait { display: none; } }

  /* Ausgangslage: Bedenken mit Fragezeichen-Marker */
  .problems {
    list-style: none; padding: 0;
    margin: 2.25rem 0 0;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1.875rem 2.5rem;
  }
  .problem { display: flex; align-items: flex-start; gap: 1rem; }
  .p-mark {
    flex: none;
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    background: var(--btn-bg);
    color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic; font-weight: 700;
    font-size: 1.375rem; line-height: 1;
    box-shadow: 0 4px 12px -3px rgba(20, 112, 175, 0.45);
  }
  .p-title { display: block; font-weight: 600; line-height: 1.4; margin-bottom: 0.25rem; }
  .p-text { display: block; font-size: 0.9375rem; color: var(--muted); line-height: 1.55; }
  @media (max-width: 620px) {
    .problems { grid-template-columns: 1fr; gap: 1.375rem; }
  }


  /* Optionen */
  .options { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.75rem; }
  .option {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.625rem 1.75rem 1.25rem;
  }
  .option.recommended {
    background: var(--surface);
    border-color: var(--accent);
  }
  .option .badge {
    display: inline-block;
    font-size: 0.72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--accent-ink);
    background: var(--surface-strong);
    border-radius: 99px;
    padding: 0.2rem 0.75rem;
    margin-bottom: 0.875rem;
  }
  .option .badge.plain { background: transparent; color: var(--muted); padding-left: 0; }
  .option h3 {
    font-family: "Work Sans", sans-serif;
    font-size: 1.1875rem; font-weight: 600;
    margin: 0 0 0.625rem;
  }
  .option p { color: var(--muted); }
  .option p strong { color: var(--ink); }

  .facts {
    list-style: none; margin: 1.25rem 0 0.5rem; padding: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem 1.5rem;
    font-size: 0.9375rem;
  }
  .facts li { display: flex; gap: 0.55rem; line-height: 1.45; }
  .facts li::before { content: "✓"; color: var(--accent-ink); font-weight: 700; flex: none; }
  @media (max-width: 540px) { .facts { grid-template-columns: 1fr; } }

  .more-paths { font-size: 0.9375rem; color: var(--muted); margin-top: 1.375rem; }

  .tech-logos {
    display: flex; align-items: flex-start; flex-wrap: wrap;
    gap: 1.25rem 3rem;
    border-top: 1px solid var(--line);
    margin-top: 1.375rem; padding-top: 1.375rem;
  }
  .tech-logos .tl {
    margin: 0;
    display: flex; flex-direction: column;
    align-items: flex-start;   /* sonst dehnt Flexbox die Logos auf Spaltenbreite */
    gap: 0.5rem;
  }
  .tech-logos figcaption {
    font-size: 0.75rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--muted);
  }
  .tech-logos img { display: block; width: auto; }
  .tech-logos .tl-pmx { height: 30px; }
  .tech-logos .tl-ceph { height: 34px; }

  .note { font-size: 0.9375rem; color: var(--muted); margin: 0; }
  .note strong { color: var(--ink); }

  /* Leistungsspektrum */
  .services {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0 2.5rem;
    margin-top: 1.25rem;
  }
  .services > div {
    border-top: 1px solid var(--line);
    padding: 1rem 0;
    display: flex; flex-direction: column; gap: 0.125rem;
  }
  .s-term { font-weight: 600; }
  .s-sub { font-size: 0.875rem; color: var(--muted); }
  @media (max-width: 540px) { .services { grid-template-columns: 1fr; } }

  /* Referenzen */
  .refs {
    list-style: none; padding: 0;
    display: flex; flex-wrap: wrap;
    gap: 0.625rem;
    margin: 1.5rem 0 0;
  }
  .refs li {
    border: 1px solid var(--line);
    border-radius: 99px;
    padding: 0.45rem 1.125rem;
    font-size: 0.9375rem; font-weight: 500;
    background: #FFFFFF;
  }

  .vorteile { margin-top: 2.25rem; }
  .vorteile h3 {
    font-family: "Work Sans", sans-serif;
    font-size: 1.125rem; font-weight: 600;
    margin: 0;
  }

  /* Migrations-Animation */
  .mig {
    margin: 1.75rem 0 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.25rem 1rem 1rem;
    background: #FFFFFF;
  }
  .mig svg { display: block; width: 100%; height: auto; }
  .mig .vm { transition: transform 0.9s ease; }
  .mig [data-fade] { transition: opacity 0.55s ease; }
  .mig image, .mig text { pointer-events: none; }

  /* Hypervisor-Logos je Schritt */
  .mig #h1pmx, .mig #h2pmx, .mig #cluster { opacity: 0; }
  .mig[data-step="1"] #h1vmw, .mig[data-step="2"] #h1vmw,
  .mig[data-step="3"] #h1vmw, .mig[data-step="4"] #h1vmw { opacity: 0; }
  .mig[data-step="1"] #h1pmx, .mig[data-step="2"] #h1pmx,
  .mig[data-step="3"] #h1pmx, .mig[data-step="4"] #h1pmx { opacity: 1; }
  .mig[data-step="3"] #h2vmw, .mig[data-step="4"] #h2vmw { opacity: 0; }
  .mig[data-step="3"] #h2pmx, .mig[data-step="4"] #h2pmx { opacity: 1; }
  .mig[data-step="4"] #cluster { opacity: 1; }

  /* Status-Texte je Schritt */
  .mig #h1s1, .mig #h1s2, .mig #h2s1, .mig #h2s2 { opacity: 0; }
  .mig[data-step="1"] #h1s0, .mig[data-step="2"] #h1s0,
  .mig[data-step="3"] #h1s0, .mig[data-step="4"] #h1s0 { opacity: 0; }
  .mig[data-step="1"] #h1s1 { opacity: 1; }
  .mig[data-step="2"] #h1s2, .mig[data-step="3"] #h1s2, .mig[data-step="4"] #h1s2 { opacity: 1; }
  .mig[data-step="3"] #h2s0, .mig[data-step="4"] #h2s0 { opacity: 0; }
  .mig[data-step="3"] #h2s1 { opacity: 1; }
  .mig[data-step="4"] #h2s2 { opacity: 1; }

  /* Host dimmen während der Neuinstallation */
  .mig #host1, .mig #host2 { transition: opacity 0.55s ease; }
  .mig[data-step="1"] #host1 { opacity: 0.55; }
  .mig[data-step="3"] #host2 { opacity: 0.55; }

  /* VM-Positionen je Schritt (Slots: links 89/181, rechts 479/571; Reihen 112/148) */
  .mig #vm1 { transform: translate(89px, 112px); }
  .mig #vm2 { transform: translate(181px, 112px); }
  .mig #vm3 { transform: translate(479px, 112px); }
  .mig #vm4 { transform: translate(571px, 112px); }
  .mig[data-step="1"] #vm1 { transform: translate(479px, 148px); }
  .mig[data-step="1"] #vm2 { transform: translate(571px, 148px); }
  .mig[data-step="2"] #vm1, .mig[data-step="3"] #vm1 { transform: translate(89px, 112px); }
  .mig[data-step="2"] #vm2, .mig[data-step="3"] #vm2 { transform: translate(181px, 112px); }
  .mig[data-step="2"] #vm3, .mig[data-step="3"] #vm3 { transform: translate(89px, 148px); }
  .mig[data-step="2"] #vm4, .mig[data-step="3"] #vm4 { transform: translate(181px, 148px); }
  .mig[data-step="4"] #vm3 { transform: translate(479px, 112px); }
  .mig[data-step="4"] #vm4 { transform: translate(571px, 112px); }

  .mig figcaption { margin-top: 0.875rem; }
  .mig-caption {
    text-align: center;
    font-size: 0.9375rem;
    color: var(--muted);
    min-height: 2.8em;
    max-width: 34rem;
    margin: 0 auto 0.5rem;
  }
  .mig-controls {
    display: flex; align-items: center; justify-content: center;
    gap: 0.875rem;
  }
  .mig-controls button {
    background: var(--surface);
    color: var(--accent-ink);
    border: 1px solid var(--line);
    border-radius: 50%;
    width: 2rem; height: 2rem;
    font-size: 1.1rem; line-height: 1;
    cursor: pointer;
  }
  .mig-controls button:hover { border-color: var(--accent); }
  .mig-dots { display: flex; gap: 0.5rem; }
  .mig-dots button {
    width: 0.625rem; height: 0.625rem;
    padding: 0;
    border: none; border-radius: 50%;
    background: var(--line);
    cursor: pointer;
  }
  .mig-dots button[aria-current="true"] { background: var(--accent); }

  /* Kalkulation */
  .calc {
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 1.75rem;
  }
  .calc-row {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1.5rem;
    padding: 1rem 1.625rem;
    border-top: 1px solid var(--line);
  }
  .calc-row:first-child { border-top: none; }
  .calc-row .label { color: var(--muted); }
  .calc-row .label small { display: block; font-size: 0.85rem; }
  .calc-row .value {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
  }
  /* Lead-Gate */
  .gate {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.75rem 1.75rem 1.625rem;
    margin-top: 1.5rem;
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 1rem;
  }
  .gate-lead { margin: 0; max-width: 36rem; }
  .gate .hint { margin-top: -0.375rem; }

  /* KI-Kostenrechner-Assistent (Private-AI-Seite) */
  .ki-frage .ci-label:first-child { margin-top: 0; }
  .ki-nav { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; }
  .ki-nav .btn { min-width: 0; padding: 0.7rem 1.625rem; }
  .ki-nav #kiZurueck:disabled { opacity: 0.4; cursor: default; }
  .ki-reset {
    background: none; border: none; color: var(--muted); cursor: pointer;
    font: inherit; text-decoration: underline; padding: 0.5rem 0;
  }
  .ki-reset:hover, .ki-reset:focus-visible { color: var(--ink); }

  dialog#leadDialog, dialog#angebotDialog, dialog#kiLeadDialog {
    border: none;
    border-radius: 16px;
    padding: 2rem;
    width: min(26rem, calc(100vw - 2.5rem));
    max-height: min(88vh, 48rem);
    box-shadow: 0 18px 50px rgba(23, 36, 47, 0.22);
    color: var(--ink);
    background: var(--bg);
  }
  dialog#leadDialog::backdrop, dialog#angebotDialog::backdrop, dialog#kiLeadDialog::backdrop { background: rgba(23, 36, 47, 0.45); }
  #leadForm, #angebotForm, #kiLeadForm, .dlg-done {
    display: flex; flex-direction: column; gap: 0.875rem; position: relative;
  }
  #leadForm h3, #angebotForm h3, #kiLeadForm h3, .dlg-done h3 {
    font-family: "Comfortaa", "Work Sans", sans-serif;
    font-size: 1.25rem; font-weight: 700;
    margin: 0; padding-right: 2rem;
  }
  .dlg-done p { margin: 0; color: var(--muted); font-size: 0.9375rem; }
  .dlg-done .btn { margin-top: 0.5rem; }
  .dlg-sub { font-size: 0.9rem; color: var(--muted); margin: 0; }
  .dlg-close {
    position: absolute; top: -0.625rem; right: -0.625rem;
    width: 2rem; height: 2rem;
    border: none; border-radius: 50%;
    background: var(--surface);
    color: var(--muted);
    font-size: 1.2rem; line-height: 1;
    cursor: pointer;
  }
  .dlg-close:hover { color: var(--ink); }
  .fld { font-size: 0.875rem; font-weight: 600; display: flex; flex-direction: column; gap: 0.3rem; }
  .fld input, .fld textarea {
    font: inherit; font-weight: 400;
    color: var(--ink);
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.625rem 0.875rem;
    resize: vertical;
  }
  .fld input:focus-visible, .fld textarea:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
  }
  .fld .opt { font-weight: 400; color: var(--muted); }
  .consent { display: flex; gap: 0.55rem; font-size: 0.8rem; color: var(--muted); font-weight: 400; align-items: flex-start; }
  .consent input { margin-top: 0.2rem; accent-color: var(--accent); flex: none; }
  .consent a { color: var(--accent-ink); }
  .dlg-submit { margin-top: 0.25rem; }
  .fld input.invalid { border-color: #C05B4D; }

  /* Zustaende der Formulardialoge: Sende-Hinweis, Ausweichweg, Spamfalle */
  .dlg-status { font-size: 0.85rem; color: var(--muted); margin: 0; min-height: 1.15rem; }
  .dlg-fehler h3 { color: #A8432F; }
  .dlg-fehler .fallback { margin: 0; font-size: 0.9375rem; }
  .dlg-fehler .fallback a { color: var(--accent-ink); font-weight: 600; }
  .hp-feld { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

  .calc-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.125rem 2.5rem;
    padding: 1.375rem 1.625rem 1.25rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }
  .ci-wide { grid-column: 1 / -1; }
  @media (max-width: 540px) { .calc-inputs { grid-template-columns: 1fr; } .ci-wide { grid-column: auto; } }
  .ci label, .ci .ci-label {
    display: block;
    font-size: 0.875rem; font-weight: 600;
    margin-bottom: 0.375rem;
  }
  .ci-row { display: flex; align-items: center; gap: 0.875rem; }
  .ci-row input[type="range"] { flex: 1; accent-color: var(--accent); margin: 0; }
  .ci-row output {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    min-width: 2.6ch;
    text-align: right;
  }
  .seg { display: flex; gap: 0.5rem; flex-wrap: wrap; }
  .seg label { position: relative; }
  .seg input { position: absolute; opacity: 0; pointer-events: none; }
  .seg span {
    display: inline-block;
    border: 1px solid var(--line);
    border-radius: 99px;
    padding: 0.4rem 1.05rem;
    font-size: 0.875rem; font-weight: 600;
    color: var(--muted);
    background: #FFFFFF;
    cursor: pointer;
  }
  .seg input:checked + span { background: var(--btn-bg); border-color: var(--btn-bg); color: #FFFFFF; }
  .seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

  .calc-bar { padding: 0 1.625rem 0.875rem; }
  .calc-bar .bar {
    display: block;
    height: 10px;
    border-radius: 4px;
    min-width: 6px;
    transition: width 0.6s ease;
  }
  .bar-vmw { background: #B07A3A; width: 100%; }
  .bar-pmx { background: var(--accent); width: 14.5%; }

  .calc-row.result {
    background: var(--surface);
    padding-block: 1.25rem;
  }
  .calc-row.result .label { color: var(--ink); font-weight: 600; }
  .calc-row.result .value { color: var(--good); font-size: 1.375rem; }
  .calc-row.roi .value { color: var(--accent-ink); }
  .smallprint { font-size: 0.85rem; color: var(--muted); margin-top: 0.875rem; }

  .trial {
    background: var(--surface);
    border-radius: 12px;
    padding: 1.375rem 1.625rem;
    margin-top: 2rem;
    font-size: 0.9875rem;
  }
  .trial strong { color: var(--accent-ink); }
  .trial p { margin: 0; }

  /* CTA */
  .cta-panel {
    background: var(--surface-strong);
    border-radius: 16px;
    padding: 2.5rem 2rem;
  }
  .cta-panel .eyebrow, .cta-panel h2 { text-align: center; }
  .cta-panel h2 { margin-bottom: 1.5rem; max-width: 30rem; margin-inline: auto; }

  .person {
    display: flex; align-items: center; justify-content: center;
    gap: 1rem;
    margin-bottom: 1.75rem;
  }
  .avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bg);
    flex: none;
  }
  .person-meta { display: flex; flex-direction: column; line-height: 1.4; text-align: left; }
  .person-name { font-weight: 600; }
  .person-role { font-size: 0.875rem; color: var(--muted); }

  .steps { display: grid; grid-template-columns: 1fr; gap: 1rem; }
  .step {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.125rem;
    align-items: start;
  }
  .step > *:not(.step-num) { grid-column: 2; }
  .step.primary { border-color: var(--accent); }
  .step-num {
    display: flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem;
    border-radius: 50%;
    background: var(--surface-strong);
    color: var(--accent-ink);
    font-weight: 700; font-size: 0.9rem;
    margin-top: 0.125rem;
  }
  .step h3 {
    font-family: "Work Sans", sans-serif;
    font-size: 1.125rem; font-weight: 600;
    margin: 0 0 0.375rem;
  }
  .step p { color: var(--muted); font-size: 0.9875rem; margin-bottom: 0.625rem; }
  .step p strong { color: var(--ink); }
  .step .btn { justify-self: start; }
  .step .hint { margin-top: 0.625rem; }

  footer.site {
    border-top: 1px solid var(--line);
    padding: 1.75rem 0 2.5rem;
    font-size: 0.85rem;
    color: var(--muted);
  }
  footer.site p { margin: 0.25rem 0; }
  footer.site p.legal { margin-top: 1.5rem; }
  .foot-nav { display: flex; flex-wrap: wrap; gap: 1.375rem; margin-bottom: 1rem; }
  .foot-nav a,
  .foot-nav .linklike {
    background: none; border: none; padding: 0;
    font: inherit; font-weight: 500;
    color: var(--accent-ink);
    cursor: pointer;
  }
  .foot-nav a:hover,
  .foot-nav .linklike:hover { text-decoration: underline; }
  .foot-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 0.25em; }

  /* Termin-Dialog mit Cal.com-Kalender */
  dialog#terminDialog {
    border: none;
    border-radius: 16px;
    padding: 0;
    width: min(62rem, calc(100vw - 2rem));
    background: var(--bg);
    color: var(--ink);
    box-shadow: 0 18px 50px rgba(23, 36, 47, 0.22);
    overflow: hidden;
  }
  dialog#terminDialog::backdrop { background: rgba(23, 36, 47, 0.45); }
  .cal-embed { width: 100%; height: min(76vh, 44rem); overflow: auto; }
  .cal-fallback {
    margin: 0;
    padding: 0.75rem 1.75rem 1.125rem;
    font-size: 0.85rem;
    color: var(--muted);
    border-top: 1px solid var(--line);
  }
  .cal-fallback a { color: var(--accent-ink); }

  /* Dokument-Dialog */
  dialog#docDialog {
    border: none;
    border-radius: 16px;
    padding: 0;
    width: min(46rem, calc(100vw - 2rem));
    background: var(--bg);
    color: var(--ink);
    box-shadow: 0 18px 50px rgba(23, 36, 47, 0.22);
  }
  dialog#docDialog::backdrop { background: rgba(23, 36, 47, 0.45); }
  .doc-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.75rem 1rem;
    border-bottom: 1px solid var(--line);
  }
  .doc-head h3 {
    font-family: "Comfortaa", "Work Sans", sans-serif;
    font-size: 1.2rem; font-weight: 700;
    margin: 0;
  }
  .dlg-close.doc-close { position: static; flex: none; }
  .doc-body {
    padding: 1.25rem 1.75rem 1.75rem;
    overflow-y: auto;
    max-height: min(62vh, 34rem);
    font-size: 0.9375rem;
    line-height: 1.65;
  }
  .doc-body h4 {
    font-family: "Work Sans", sans-serif;
    font-size: 1rem; font-weight: 600;
    margin: 1.375rem 0 0.5rem;
  }
  .doc-body h5 { font-size: 0.9rem; font-weight: 600; margin: 1rem 0 0.25rem; }
  .doc-body p { margin: 0 0 0.75rem; color: var(--muted); }
  .doc-body ul { margin: 0.25rem 0 0.75rem 1.25rem; padding: 0; color: var(--muted); }
  .doc-body li { margin-bottom: 0.25rem; }

  .logo-chip2 {
    display: inline-flex; align-items: center; justify-content: center;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.5rem 0.875rem;
  }
  .logo-chip2 img { height: 30px; width: auto; max-width: 130px; object-fit: contain; display: block; }

  /* Partner-Karussell */
  .partner-h {
    font-family: "Work Sans", sans-serif;
    font-size: 1.125rem; font-weight: 600;
    margin: 2.25rem 0 0.375rem;
  }
  .partner-strip { overflow: hidden; position: relative; margin-top: 1.25rem; }
  .partner-strip::before, .partner-strip::after {
    content: "";
    position: absolute; top: 0; bottom: 0; width: 3rem;
    z-index: 1; pointer-events: none;
  }
  .partner-strip::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
  .partner-strip::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
  .partner-track { display: flex; width: max-content; }
  .partner-track.ready { animation: partner-scroll 45s linear infinite; }
  .partner-strip:hover .partner-track { animation-play-state: paused; }
  .partner-set { display: flex; align-items: center; gap: 1.25rem; padding-right: 1.25rem; }
  @keyframes partner-scroll { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) {
    .partner-track { animation: none; width: auto; flex-wrap: wrap; }
    .partner-set { flex-wrap: wrap; padding-right: 0; }
    .partner-set[aria-hidden="true"] { display: none; }
    .partner-strip::before, .partner-strip::after { display: none; }
  }

/* ===== Website-Erweiterungen zum Landingpage-Stil ===================== */
.wrap-wide { max-width: 68rem; margin: 0 auto; padding: 0 1.375rem; }

/* Kopfzeile mit Navigation */
header.site {
  /* display:block hier bewusst explizit, nicht nur implizit erwartet: Die
     aus der urspruenglichen Landingpage uebernommene css-Variable (ganz am
     Anfang des Stylesheets) setzt "header.site { display:flex; ... }" -
     dort war die Kopfzeile noch flach (Logo direkt neben den Links, ohne
     .nav-bar als Zwischenebene). Ohne diese Regel bliebe display:flex
     bestehen (site_build.py ueberschreibt bisher nur padding, nicht
     display) und .nav-bar wuerde als Flex-Kind auf Inhaltsbreite
     zusammenschrumpfen statt auf max-width:68rem zu fuellen - dadurch
     stand die Kopfzeile schmaler und anders zentriert als .wrap-wide, das
     Logo also nicht mehr linksbuendig zum Seiteninhalt (Bug, 10.09.2026
     gefunden und hier behoben). */
  display: block;
  position: sticky; top: 0; z-index: 40;
  background: rgba(252, 253, 254, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.nav-bar {
  max-width: 68rem; margin: 0 auto; padding: 0.875rem 1.375rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.nav-links { display: flex; align-items: center; gap: 2.25rem; flex-wrap: wrap; }
.nav-links a {
  color: var(--ink); text-decoration: none;
  font-size: 0.9375rem; font-weight: 500;
  padding: 0.25rem 0; border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--accent-ink); }
.nav-links a[aria-current="page"] { color: var(--accent-ink); border-bottom-color: var(--accent); }
.nav-links a.nav-cta {
  background: var(--btn-bg); color: #FFFFFF;
  padding: 0.5rem 1.125rem; border-radius: 8px; border: none;
  font-weight: 600;
}
.nav-links a.nav-cta:hover { background: var(--btn-bg-hover); color: #FFFFFF; }

/* Gruppen-Dropdowns (Portfolio, Unternehmen, Rechtliches) - 08.09.2026, auf
   Zuruf statt vorher neun einzelnen Kopfzeilen-Links. Der Knopf sieht wie ein
   normaler Nav-Link aus, ist aber teils ein <button> (Unternehmen/Rechtliches
   haben keine eigene Uebersichtsseite) - darum Button-Reset mit auf demselben
   Selektor wie .nav-links a. */
.nav-gruppe { position: relative; }
.nav-gruppen-knopf {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: none; border: none; cursor: pointer; font: inherit;
  color: var(--ink); text-decoration: none;
  font-size: 0.9375rem; font-weight: 500;
  padding: 0.25rem 0; border-bottom: 2px solid transparent;
}
.nav-gruppen-knopf::after {
  content: ""; width: 0.4em; height: 0.4em; margin-top: -0.15em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 0.15s ease;
}
.nav-gruppe.offen .nav-gruppen-knopf::after,
.nav-gruppe:focus-within .nav-gruppen-knopf::after { transform: rotate(-135deg); margin-top: 0.1em; }
.nav-gruppen-knopf:hover { color: var(--accent-ink); }
.nav-gruppen-knopf.aktuell { color: var(--accent-ink); border-bottom-color: var(--accent); }
.nav-dropdown {
  position: absolute; top: 100%; left: 0; margin-top: 0.5rem;
  min-width: 14rem; padding: 0.5rem;
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(23, 36, 47, 0.16);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
/* Bewusst kein :hover hier - Hover-Oeffnen laeuft ueber JS (mouseenter),
   damit dabei zuverlaessig zuerst alle anderen Gruppen geschlossen werden.
   Reine CSS-:hover-Regeln kennen die anderen Gruppen nicht und liessen
   sich unabhaengig vom JS-Klick-Zustand gleichzeitig oeffnen - genau der
   Bug, der hier behoben wurde (09.09.2026). */
.nav-gruppe:focus-within .nav-dropdown,
.nav-gruppe.offen .nav-dropdown { opacity: 1; visibility: visible; transform: none; }
.nav-dropdown a {
  display: block; padding: 0.5rem 0.625rem; border-radius: 6px;
  color: var(--ink); text-decoration: none; font-size: 0.9375rem;
}
.nav-dropdown a:hover, .nav-dropdown a:focus-visible { background: var(--surface); color: var(--accent-ink); }
.nav-dropdown a[aria-current="page"] { color: var(--accent-ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .nav-dropdown, .nav-gruppen-knopf::after { transition: none; }
}
.nav-werkzeuge { display: flex; align-items: center; gap: 0.5rem; flex: none; }

/* Sprachumschalter DE/EN (10.09.2026, auf Zuruf) */
.sprachumschalter {
  display: flex; align-items: center; gap: 0.3rem;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0 0.25rem;
}
.sprachumschalter a, .sprachumschalter span {
  padding: 0.25rem 0.35rem; border-radius: 6px; text-decoration: none;
}
.sprachumschalter a { color: var(--muted); }
.sprachumschalter a:hover, .sprachumschalter a:focus-visible { color: var(--accent-ink); }
.sprachumschalter span.aktiv { color: var(--accent-ink); background: var(--surface); }
.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--line); border-radius: 8px;
  padding: 0.5rem 0.75rem; cursor: pointer;
  font: inherit; color: var(--ink);
}
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none; width: 100%;
    flex-direction: column; align-items: flex-start; gap: 0.875rem;
    padding-top: 1rem;
  }
  .nav-bar { flex-wrap: wrap; }
  header.site.offen .nav-links { display: flex; }
  /* Gruppen werden auf Schmalbildschirmen zum Akkordeon statt zum
     Hover-Dropdown: volle Breite, Dropdown liegt im Fluss statt absolut
     positioniert, und oeffnet nur per Klick (JS), da es kein Hover gibt. */
  .nav-gruppe { width: 100%; }
  .nav-gruppen-knopf { width: 100%; justify-content: space-between; padding: 0.625rem 0.875rem; }
  .nav-dropdown {
    position: static; margin-top: 0; padding: 0 0 0 0.875rem;
    border: none; box-shadow: none; background: transparent;
    max-height: 0; overflow: hidden; opacity: 1; visibility: visible; transform: none;
    transition: max-height 0.2s ease;
  }
  .nav-gruppe.offen .nav-dropdown { max-height: 30rem; }
  .nav-dropdown a { padding: 0.5rem 0.875rem; }
}

/* Seitenkopf */
.seitenkopf { padding-top: 3.5rem; }
.seitenkopf .lead { max-width: 42rem; }

/* Octagon-/Hexagon-Muster hinter der Überschrift (08.09.2026, auf Zuruf
   mehrfach nachgebessert, zuletzt 10.09.2026: nicht mehr animiert und nur
   noch ein Standbild - die Bewegung gibt es seither nur noch auf der
   Startseite, dort per Video statt CSS-Animation, siehe .hero-video-wrap
   weiter unten). Deckt .seitenkopf ab (die meisten Seiten) sowie eigens
   die erste Bandsektion der Proxmox-Seite, die keine .seitenkopf-Klasse
   hat, aber denselben Platz einnimmt. Rechtsseiten (AGB, Datenschutz,
   Impressum) bewusst ausgenommen - dort bleibt der Seitenkopf schlicht,
   passend zum sachlichen Charakter dieser Seiten.

   .seitenkopf selbst ist NICHT vollbreit (steckt in .wrap-wide mit
   max-width) - die Hintergrundebene (::before/::after) wird darum per
   `left:50%; width:100vw; margin-left:-50vw` gezielt auf die volle
   Fensterbreite gezogen, derselbe Kniff wie bei .band. Bei
   main > .band:first-child ist das ohnehin schon vollbreit, dieselbe Regel
   schadet dort nicht. filter:brightness/saturate hellt das (bewusst dunkel
   gehaltene) Ausgangsbild sichtbar auf, nicht nur per Deckkraft. */
body:not(.p-agb):not(.p-datenschutz):not(.p-impressum) .seitenkopf,
main > .band:first-child { position: relative; }
body:not(.p-agb):not(.p-datenschutz):not(.p-impressum) .seitenkopf::before,
main > .band:first-child::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: 50%; width: 100vw; margin-left: -50vw; z-index: 0;
  background: url(img/hex-hintergrund.jpg) center / 130% auto no-repeat;
  filter: brightness(1.6) saturate(1.25);
  opacity: 0.6; pointer-events: none;
}
body:not(.p-agb):not(.p-datenschutz):not(.p-impressum) .seitenkopf::after,
main > .band:first-child::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: 50%; width: 100vw; margin-left: -50vw; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 28, 46, 0.18), rgba(14, 28, 46, 0.58));
}
.seitenkopf > * { position: relative; z-index: 1; }
main > .band:first-child > .wrap-wide { position: relative; z-index: 1; }

/* Startseite: Video statt Standbild als Hero-Hintergrund. Gleiche Flaeche/
   Technik wie oben (volle Fensterbreite), das Bild bleibt als CSS-Hinter-
   grund von .seitenkopf::before dahinter liegen und dient als Ausweich-
   fassung, falls das Video nicht laedt oder (prefers-reduced-motion)
   bewusst nicht abgespielt wird. Direktes Kind von .seitenkopf, darum
   sonst per ".seitenkopf > *" auf z-index:1 gehoben - hier gezielt wieder
   auf 0 zurueckgesetzt (hoehere Spezifitaet, steht spaeter im Stylesheet). */
.seitenkopf > .hero-video-wrap {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw;
  margin-left: -50vw; z-index: 0; overflow: hidden; pointer-events: none;
}
.hero-video-wrap video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(1.6) saturate(1.25); opacity: 0.6;
}
@media (prefers-reduced-motion: reduce) { .hero-video-wrap video { display: none; } }

/* Ton-Knopf: nur sichtbar, wenn der Browser Autoplay mit Ton blockiert hat
   (hero_video_js in site_make.py blendet ihn dann per JS ein) - das Video
   laeuft in diesem Fall bereits stumm, der Knopf holt den Ton auf Wunsch
   nachtraeglich nach (spielt dafuer von vorn). */
.hero-video-ton {
  position: absolute; top: 1.25rem; right: 1.375rem; z-index: 1;
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(10, 21, 35, 0.55); border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px; padding: 0.5rem 0.9rem;
  color: #fff; font-size: 0.8125rem; font-weight: 500; cursor: pointer;
  backdrop-filter: blur(4px);
}
.hero-video-ton:hover, .hero-video-ton:focus-visible { border-color: var(--accent); color: var(--accent); }
@media (max-width: 620px) { .hero-video-ton span { display: none; } }

/* Karten-Raster */
.karten { display: grid; gap: 1.25rem; margin-top: 2rem; }
.karten.zwei { grid-template-columns: repeat(2, 1fr); }
.karten.drei { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .karten.drei { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .karten.zwei, .karten.drei { grid-template-columns: 1fr; } }
.karte {
  background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px;
  padding: 1.5rem 1.625rem;
}
.karte h3 {
  font-family: "Work Sans", sans-serif;
  font-size: 1.0625rem; font-weight: 600; margin: 0 0 0.5rem;
}
.karte p { color: var(--muted); font-size: 0.9375rem; margin: 0; }
.karte ul { margin: 0.75rem 0 0; padding-left: 1.125rem; color: var(--muted); font-size: 0.9375rem; }
.karte li { margin-bottom: 0.25rem; }
.karte .karte-link {
  display: inline-block; margin-top: 0.875rem;
  font-size: 0.9375rem; font-weight: 600;
  color: var(--accent-ink); text-decoration: none;
}
.karte .karte-link:hover { text-decoration: underline; }
.karte-num {
  display: block; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.12em; color: var(--accent-ink); margin-bottom: 0.5rem;
}

/* Portfolio-Seite: stand am 08.09.2026 kurzzeitig auf Flip-Karten (Rueckseite
   fuer die Unterpunkte) - auf Zuruf wieder zurueckgenommen: Karten 01-04
   haben einen Link im Vorderseiten-Inhalt, 05-10 nicht, dadurch fielen die
   Karten bei fester Mindesthoehe fuer die Rueckseite unterschiedlich hoch
   aus. Jetzt wie "Unsere Loesungen" auf der Startseite: Nummer, Ueberschrift,
   Text, Link und die Liste stehen alle normal im Textfluss, keine eigene
   Regel mehr noetig - .karte-vorn (aus karte() in site_build.py) traegt
   ohne die Flip-Regeln nichts bei, bleibt aber stehen, falls das Flippen
   irgendwo wieder gebraucht wird. */

/* Zweispaltiger Textblock */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 3rem; align-items: start; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }

/* Aufzaehlung mit Haken (wie .facts, aber einspaltig) */
.haken { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.haken li { display: flex; gap: 0.55rem; margin-bottom: 0.5rem; line-height: 1.5; }
.haken li::before { content: "\2713"; color: var(--accent-ink); font-weight: 700; flex: none; }

/* Kennzahlen */
.zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; }
@media (max-width: 620px) { .zahlen { grid-template-columns: 1fr; } }
.zahl-wert {
  display: block;
  font-family: "Comfortaa", "Work Sans", sans-serif;
  font-size: 2rem; font-weight: 700; color: var(--accent-ink);
  line-height: 1.1;
}
.zahl-text { display: block; font-size: 0.9375rem; color: var(--muted); margin-top: 0.375rem; }

/* Teaser-Kasten (z. B. Proxmox auf der Startseite) */
.teaser {
  background: var(--surface); border: 1px solid var(--accent);
  border-radius: 16px; padding: 2rem;
  display: grid; grid-template-columns: 1fr auto; gap: 1.5rem 2rem; align-items: center;
}
@media (max-width: 760px) { .teaser { grid-template-columns: 1fr; } }
.teaser h2 { margin-bottom: 0.625rem; }
.teaser p { margin: 0; color: var(--muted); }
.teaser-logo { width: 132px; height: auto; }

/* Blog-Liste */
.beitraege { list-style: none; margin: 2rem 0 0; padding: 0; }
.beitraege li { border-top: 1px solid var(--line); }
.beitraege li:last-child { border-bottom: 1px solid var(--line); }
.beitrag-link {
  display: block; padding: 1.375rem 0.75rem; margin: 0 -0.75rem;
  border-radius: 10px; text-decoration: none; color: inherit;
  transition: background 0.15s ease;
}
.beitrag-link:hover, .beitrag-link:focus-visible { background: var(--surface); }
.beitrag-datum { font-size: 0.85rem; color: var(--muted); }
.beitrag-titel {
  display: block; font-family: "Work Sans", sans-serif;
  font-size: 1.0625rem; font-weight: 600; margin: 0.25rem 0 0.375rem;
}
.beitrag-text { font-size: 0.9375rem; color: var(--muted); margin: 0 0 0.5rem; }
.beitrag-mehr { display: inline-block; font-size: 0.875rem; font-weight: 600; color: var(--accent-ink); }

/* Blog-Kacheln (News & Updates auf der Startseite) - Kartenraster mit Bild
   oben (echtes Foto oder selbst gezeichnete Hexagon-Kachel, siehe
   blog_kachel_bild() in site_pages.py), Text darunter. */
.blog-kacheln {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
@media (max-width: 860px) { .blog-kacheln { grid-template-columns: 1fr; } }
.blog-kacheln li { min-width: 0; }
.blog-kachel {
  display: flex; flex-direction: column; height: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; text-decoration: none; color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.blog-kachel:hover, .blog-kachel:focus-visible { border-color: var(--accent); transform: translateY(-3px); }
.blog-kachel-bild { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.blog-kachel-logo {
  display: flex; align-items: center; justify-content: center;
  background: #FFFFFF; padding: 1.5rem 2.5rem; box-sizing: border-box;
}
.blog-kachel-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.blog-kachel-text { padding: 1.25rem 1.375rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.blog-kachel-text .beitrag-mehr { margin-top: auto; padding-top: 0.75rem; }

/* Kontaktangaben */
.kontaktdaten { list-style: none; margin: 1.5rem 0 0; padding: 0; font-size: 1.0625rem; }
.kontaktdaten li { margin-bottom: 0.375rem; }
.kontaktdaten a { color: var(--accent-ink); }

/* Ansprechpartner im Abschluss-CTA (nach polygran.de) und Teamseite
   (nach neoworx.eu/unser-team)
   ------------------------------------------------------------------------ */
.cta-person {
  display: grid; grid-template-columns: 1fr auto;
  gap: 2.5rem 3.5rem; align-items: center; text-align: left;
}
@media (max-width: 780px) { .cta-person { grid-template-columns: 1fr; } }
/* Die Landingpage-Regeln zentrieren .cta-panel-Ueberschriften und begrenzen
   sie auf 30rem. Fuer die zweispaltige Fassung wird beides zurueckgenommen -
   sonst stehen Vorzeile und Ueberschrift mittig ueber linksbuendigem Text. */
.cta-person .eyebrow,
.cta-person .cta-text h2 {
  text-align: left; max-width: none; margin-inline: 0;
}
.cta-person .cta-text p { max-width: 34rem; margin: 0; }
.cta-person .cta-text h2 { margin-bottom: 1rem; }

.p-karte { margin: 0; width: 13.5rem; max-width: 100%; }
.p-bild {
  display: block; width: 100%; aspect-ratio: 4 / 5;
  object-fit: cover; border-radius: 14px;
  border: 1px solid var(--line);
}
.p-monogramm {
  display: flex; align-items: center; justify-content: center;
  font-family: "Comfortaa", "Work Sans", sans-serif;
  font-size: 2.5rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--accent); background: var(--surface);
}
.p-karte figcaption { display: block; margin-top: 0.875rem; }
.p-name { display: block; font-weight: 600; color: var(--ink); }
.p-rolle { display: block; font-size: 0.875rem; color: var(--muted); margin-top: 0.125rem; }

/* "Ueber uns": Portraet der Geschaeftsfuehrung neben dem Text, darunter der
   Leitsatz als Aussage. Zwei Klassen im Selektor, damit die allgemeine
   Absatzfarbe des Entwurfs den Leitsatz nicht einfaerbt. */
.ueber-person {
  display: grid; grid-template-columns: auto 1fr;
  gap: 2rem 3rem; align-items: start;
}
@media (max-width: 780px) { .ueber-person { grid-template-columns: 1fr; } }
.ueber-person .p-karte { width: 15rem; }
/* Rahmenlos: Das Portraet steht neben dem Text als ruhiges Bildelement,
   nicht als Karte. Name, Position und Leitsatz darunter bleiben voll
   deckend. Bis 08.09.2026 bei opacity: 0.5 - auf Zuruf weniger transparent. */
.ueber-person .p-bild {
  border: none; border-radius: 0;
  opacity: 0.88;
}
.ueber-text { display: grid; gap: 1.125rem; }
.ueber-text p { margin: 0; }
.ueber-text .haken { margin-top: 0; }   /* der Rasterabstand genuegt */
/* Der Leitsatz "IT. Menschen. Loesungen." steht seit 08.09.2026 als Zitat
   (.zitat, siehe Landingpage-Stylesheet) unter dem Text statt unter dem
   Portraet - dafuer war hier keine eigene Regel mehr noetig. */

/* Teamseite: Raster aus Karten mit Foto, Name, Position - mehr nicht. */
.team-raster {
  list-style: none; margin: 3rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1.75rem;
}
@media (max-width: 860px) { .team-raster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .team-raster { grid-template-columns: 1fr; } }
.team-raster .p-karte { width: auto; }

/* Kopfbereich der Startseite: seit 08.09.2026 einspaltig wie die uebrigen
   Seitenkoepfe, das Key-Visual ist entfallen (Grafik unten, .keyvisual,
   bleibt als Baustein erhalten - z.B. fuer eine spaetere Seite - nur der
   Aufruf in site_pages.py ist entfernt). .hero-zwei und die eigene,
   schmalere h1-Groesse werden dadurch nicht mehr gebraucht.
   ------------------------------------------------------------------------ */

/* Key-Visual: oben die Massnahmen, darunter der Bestand, auf den sie wirken.
   Arbeitet nur mit den Farbtoken und folgt damit der gewaehlten Gestaltung. */
.keyvisual { margin: 0; display: flex; flex-direction: column; }
.kv-titel {
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--accent); margin: 0 0 0.875rem;
}
.kv-massnahmen {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.625rem;
}
.kv-massnahmen li {
  border: 1px solid var(--accent); border-radius: 999px;
  padding: 0.5rem 0.875rem; text-align: center;
  font-size: 0.875rem; font-weight: 600; color: var(--accent);
}
.kv-pfeil { display: flex; justify-content: center; color: var(--accent); padding: 0.75rem 0 0.5rem; }
.kv-bestand {
  border: 1px solid var(--line); border-radius: 16px;
  padding: 1.25rem 1.25rem 1.375rem;
}
.kv-bestand-titel {
  margin: 0 0 1rem; font-size: 0.9375rem; font-weight: 600; color: var(--ink);
}
.kv-teile {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem;
}
.kv-teile li {
  display: flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem; color: var(--muted);
}
.kv-symbol { color: var(--accent); flex: none; }
.kv-fuss {
  margin-top: 1rem; text-align: center;
  font-size: 0.9375rem; font-weight: 600; color: var(--accent);
}

/* Blickfang -------------------------------------------------------------
   Ein weicher Schein hebt die Grafik vom Grund ab; der Pfeil faellt in
   ruhigem Takt und der Rahmen des Bestands leuchtet auf, wenn er ankommt.
   Drei Mittel, eine Aussage: die Massnahmen wirken auf den Bestand. */
.keyvisual { position: relative; }
.keyvisual::before {
  content: ""; position: absolute; inset: -14% -10% -6%; z-index: -1;
  pointer-events: none;
  background: radial-gradient(62% 56% at 50% 38%,
              color-mix(in srgb, var(--accent) 26%, transparent), transparent 74%);
}
.kv-pfeil svg { animation: kv-impuls 3.2s ease-in-out infinite; }
.kv-bestand { transition: border-color 0.4s ease; animation: kv-ankunft 3.2s ease-in-out infinite; }

@keyframes kv-impuls {
  0%, 100% { transform: translateY(-0.2rem); opacity: 0.45; }
  38%      { transform: translateY(0.35rem); opacity: 1; }
  62%      { transform: translateY(0.35rem); opacity: 0.9; }
}
@keyframes kv-ankunft {
  0%, 42%, 100% {
    border-color: var(--line);
    background: transparent;
  }
  58% {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 9%, transparent);
  }
}

/* Ohne Bewegung bleibt die Grafik vollstaendig lesbar - der Schein bleibt,
   nur der Takt entfaellt. */
@media (prefers-reduced-motion: reduce) {
  .kv-pfeil svg, .kv-bestand { animation: none; }
  .kv-pfeil svg { opacity: 1; }
}

/* Modulraster im Kopfbereich der Startseite
   ------------------------------------------------------------------------
   Nach dem Vorbild von conbool.com: neun Kacheln mit Symbol und Namen,
   direkt unter der Hauptueberschrift. Arbeitet nur mit den Farbtoken -
   dadurch folgt es automatisch der gewaehlten Gestaltung. */
.modulraster {
  list-style: none; margin: 3rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;
  max-width: 46rem;
}
@media (max-width: 560px) { .modulraster { grid-template-columns: repeat(2, 1fr); } }
.modulraster a {
  display: flex; flex-direction: column; gap: 0.75rem;
  min-height: 100%; padding: 1.125rem 1rem 1.0625rem;
  border: 1px solid var(--line); border-radius: 14px;
  color: var(--ink); text-decoration: none;
  font-size: 0.9375rem; font-weight: 500; line-height: 1.3;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.modulraster a:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  transform: translateY(-2px);
}
.modulraster a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Direkt am span gesetzt: die allgemeine Linkfarbe des Entwurfs wuerde sonst
   die ganze Kachel einfaerben - farbig ist nur das Symbol. */
.modulraster span { color: var(--ink); }
.modul-symbol { color: var(--accent); flex: none; }
@media (prefers-reduced-motion: reduce) { .modulraster a { transition: none; } }

/* Fusszeile: seit 09.09.2026 nur noch Marke/Kontakt + Social-Icons - die
   drei Linkspalten (Portfolio/Unternehmen/Rechtliches) sind entfallen, da
   dieselben Seiten bereits über die Kopfzeilen-Dropdowns erreichbar sind
   (siehe nav_gruppen_html) und die Dopplung nicht mehr gebraucht wird. */
.foot-brand {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
  gap: 1.75rem 2.5rem; padding-bottom: 1.75rem;
}
.foot-logo { width: 150px; height: auto; margin-bottom: 0.875rem; display: block; }

/* Soziale Netzwerke in der Fusszeile
   ------------------------------------------------------------------------
   Das Zeichen ist einfarbig und nimmt die Farbe der Fusszeile an; das
   LinkedIn-Markenblau haette auf dem dunklen Grund zu wenig Kontrast.
   Der Verweis laedt nichts nach - eine Verbindung zu LinkedIn entsteht erst,
   wenn jemand darauf klickt.
   Unter `footer.site` gescoped, damit die allgemeine Linkfarbe des Entwurfs
   den Zustand beim Ueberfahren nicht ueberschreibt. */
footer.site .social { display: flex; gap: 0.5rem; margin-top: 1.125rem; }
footer.site .social a, footer.site .social button.slack-anfrage {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--line); border-radius: 10px;
  background: none; cursor: pointer;
  color: var(--muted);
  transition: color 0.15s ease, border-color 0.15s ease;
}
footer.site .social a:hover, footer.site .social button.slack-anfrage:hover { color: var(--accent); border-color: var(--accent); }
footer.site .social a:focus-visible, footer.site .social button.slack-anfrage:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { footer.site .social a, footer.site .social button.slack-anfrage { transition: none; } }

/* Anmeldeformular-Dialog fuer den Slack-Zugang. Breiter als
   dialog#leadDialog/#angebotDialog (die dortige Regel ist ID-gescoped und
   deckt eine neue Dialog-ID ohnehin nicht ab): Name/Unternehmen und E-Mail/
   Telefon stehen bei ausreichender Breite als Zweierreihe nebeneinander
   (.fld-zeile), damit das Formular ohne Scrollen ins Fenster passt. */
dialog#slackDialog {
  border: none; border-radius: 16px; padding: 2rem;
  width: min(34rem, calc(100vw - 2.5rem));
  max-height: min(92vh, 52rem);
  overflow-y: auto;
  box-shadow: 0 18px 50px rgba(23, 36, 47, 0.22);
  color: var(--ink); background: var(--bg);
}
dialog#slackDialog::backdrop { background: rgba(23, 36, 47, 0.45); }
dialog#slackDialog .fld-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 520px) { dialog#slackDialog .fld-zeile { grid-template-columns: 1fr; } }

/* ===== Gestaltung nach Vorbild polygran.de ============================= */
:root {
  --dark: #0E1C2E;          /* Grundton der dunklen Baender */
  --dark-2: #16293F;        /* Karten auf dunklem Grund */
  --dark-ink: #EAF1F8;      /* Text auf dunkel */
  --dark-muted: #9DB3CA;    /* Sekundaertext auf dunkel */
  --cyan: #16CFF8;          /* Contensi-Cyan – auf dunklem Grund voll nutzbar */
}

/* --- Vollbreite Baender ------------------------------------------------ */
.band { width: 100vw; margin-left: calc(50% - 50vw); padding: 5rem 0; }
.band > .wrap-wide { padding-left: 1.375rem; padding-right: 1.375rem; }
.band-dunkel { background: var(--dark); color: var(--dark-ink); }
.band-dunkel h1, .band-dunkel h2, .band-dunkel h3 { color: var(--dark-ink); }
.band-dunkel p { color: var(--dark-muted); }
.band-dunkel .eyebrow { color: var(--cyan); }
.band-dunkel .hl { color: var(--cyan); }
.band-hell { background: var(--surface); }

/* Karten mit hellem Grund innerhalb eines dunklen Bandes.
   Die Bandregeln oben faerben Ueberschriften und Text hell - auf einer
   weissen Karte ist das unlesbar. Hier gelten wieder die dunklen Farben. */
.band-dunkel .step h3 { color: var(--ink); }
.band-dunkel .step p,
.band-dunkel .step .hint { color: var(--muted); }

/* Umgekehrter Fall: Sekundaertext direkt auf dunklem Grund braucht den
   hellen Grauton, nicht den dunklen. */
.band-dunkel .person-role { color: var(--dark-muted); }

/* Ansprechpartner linksbuendig - wie Ueberschrift und Schritte darunter. */
.band .person { justify-content: flex-start; }
main > .band:first-child { margin-top: -4.5rem; }

/* --- Grosse Headlines -------------------------------------------------- */
.gross h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); line-height: 1.08; letter-spacing: -0.01em; }
.gross h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.14; letter-spacing: -0.01em; }
.band h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.14; letter-spacing: -0.01em; }

/* --- Hero mit Bild ----------------------------------------------------- */
.hero-split {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem; align-items: center;
}
@media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; gap: 2rem; } }
.hero-split .lead { color: var(--dark-muted); font-size: 1.1875rem; max-width: 34rem; }
.hero-bild { margin: 0; border-radius: 18px; overflow: hidden; }
.hero-bild img { display: block; width: 100%; height: auto; }
.hero-marken { display: flex; gap: 1.75rem; align-items: center; flex-wrap: wrap; margin-top: 2.25rem; }
/* Die Marken stehen auf hellen Feldern statt weiss eingefaerbt zu werden:
   Ein Logo mit deckendem Hintergrund wird durch brightness(0) invert(1) zu
   einem weissen Rechteck - und fremde Marken faerbt man ohnehin nicht um. */
.hero-marken img {
  height: 26px; width: auto;
  background: #FFFFFF; border-radius: 8px;
  padding: 0.45rem 0.7rem; box-sizing: content-box;
}
.hero-marken .tl-ceph { height: 30px; }

/* Dieselbe Behandlung wie .hero-marken fuer die Technologie-Logos auf der
   Storage-Seite (.tech-logos .tl, aus der Landingpage-Quelle uebernommen,
   dort urspruenglich fuer helle Seiten gedacht) - ohne weisses Feld sassen
   Proxmox/Ceph direkt auf dem dunklen Seitenhintergrund und waren kaum zu
   erkennen. */
.tech-logos .tl img {
  background: #FFFFFF; border-radius: 8px;
  padding: 0.45rem 0.7rem; box-sizing: content-box;
}

/* --- Karten-Raster ----------------------------------------------------- */
.raster { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
.raster.r2 { grid-template-columns: repeat(2, 1fr); }
.raster.r3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .raster.r3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .raster.r2, .raster.r3 { grid-template-columns: 1fr; } }

.pkarte {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 1.75rem 1.75rem 1.625rem;
  display: flex; flex-direction: column;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.pkarte:hover { border-color: var(--accent); transform: translateY(-2px); }
.band-dunkel .pkarte { background: var(--dark-2); border-color: #24405E; }
.band-dunkel .pkarte:hover { border-color: var(--cyan); }
.pkarte .nr {
  font-family: "Comfortaa", "Work Sans", sans-serif;
  font-size: 2rem; font-weight: 700; line-height: 1;
  color: var(--cyan); opacity: 0.7; margin-bottom: 1rem;
}
.pkarte h3 {
  font-family: "Work Sans", sans-serif;
  font-size: 1.125rem; font-weight: 600; line-height: 1.35;
  margin: 0 0 0.625rem;
}
.pkarte p { color: var(--muted); font-size: 0.9375rem; margin: 0; }
.band-dunkel .pkarte p { color: var(--dark-muted); }
.pkarte .karte-link {
  margin-top: auto; padding-top: 1rem;
  font-size: 0.9375rem; font-weight: 600; color: var(--accent-ink); text-decoration: none;
}
.band-dunkel .pkarte .karte-link { color: var(--cyan); }

/* Migrations-Schaubild (Proxmox-Seite): Die Karte war im Ausgangsentwurf
   fest weiss (fuer den damals hellen Grund der Seite). Die Boxen/Chips im
   SVG selbst sind eigenstaendig eingefaerbt (dunkles Navy, weisse Tags) und
   bleiben unangetastet - nur der Kartenhintergrund zieht auf den dunklen
   Grund der Website nach, per Kaskade nach der urspruenglichen Regel. */
.mig { background: var(--surface); }

/* Formularfelder und Segment-Umschalter der Kostenrechner-Dialoge (Proxmox-
   Seite): ebenfalls fest weiss aus dem Ausgangsentwurf, mit Textfarbe ueber
   var(--ink)/var(--muted) - die ist inzwischen fuer helle Schrift auf
   dunklem Grund belegt und waere auf dem weissen Feld praktisch unsichtbar.
   Hintergrund zieht darum auf den dunklen Grund nach, Rahmen/Textfarbe
   bleiben unveraendert (per Kaskade aus der urspruenglichen Regel). */
.fld input, .fld textarea, .seg span { background: var(--surface); }

/* --- Bild-neben-Text --------------------------------------------------- */
.bild-text { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.bild-text.umgekehrt .bt-bild { order: -1; }
@media (max-width: 860px) { .bild-text { grid-template-columns: 1fr; gap: 2rem; } .bild-text.umgekehrt .bt-bild { order: 0; } }
.bt-bild { margin: 0; border-radius: 18px; overflow: hidden; }
.bt-bild img { display: block; width: 100%; height: auto; }

/* --- CTA-Band ---------------------------------------------------------- */
.cta-band { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
@media (max-width: 760px) { .cta-band { grid-template-columns: 1fr; } }
.cta-band h2 { margin-bottom: 0.625rem; }
.cta-band p { margin: 0; }
.band-dunkel .btn { background: var(--cyan); color: var(--dark); }
.band-dunkel .btn:hover { background: #5EDEFC; }
.band-dunkel .hint { color: var(--dark-muted); }

/* --- Kundenband -------------------------------------------------------- */
.kundenband { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.75rem; }
.kundenband { list-style: none; padding: 0; }
.kundenband li {
  border: 1px solid #2C4A6B; border-radius: 99px;
  padding: 0.45rem 1.125rem; font-size: 0.9375rem; font-weight: 500;
  color: var(--dark-ink);
}

/* Referenz-Chips auf der Proxmox-Seite: Die Grundregel im aus der Landing-
   page uebernommenen Stylesheet ist fest weiss (frueher heller Grund der
   Seite). Auf den uebrigen Seiten uebernimmt das der Entwurf (entwuerfe_css.py,
   dort bewusst auf :not(.p-proxmox) gescopt) - hier separat nachgezogen,
   damit die Chips auch auf der jetzt dunklen Proxmox-Seite lesbar bleiben.
   Die Einladungs-Kachel `.ref-cta` bleibt unberuehrt (eigene !important-
   Regel weiter unten, bewusst umgebungsunabhaengig). */
.refs li { background: var(--surface); }

/* --- Referenzen: einladende Schluss-Kachel ------------------------------
   "Ihr Unternehmen" - keine Referenz, sondern eine Einladung, eine zu
   werden. Bewusst mit festen Farben statt Farbtoken: Die Kachel soll auf
   der hellen Proxmox-Seite wie auf der dunklen Website gleich wirken, statt
   der jeweiligen Umgebung zu folgen wie die echten Referenz-Chips. Wichtiger
   als die Kaskade der umgebenden `.refs li`-Regeln (auch aus dem Entwurf),
   darum mit !important auf den beiden ueberschriebenen Eigenschaften.
   Weisser Text auf dem urspruenglichen Verlauf (#16CFF8 -> #2685DF) kam auf
   der hellen Cyan-Seite nur auf 1,86:1 Kontrast (WCAG-Minimum 4,5:1) -
   deshalb jetzt einfarbig Cyan mit dunkler Schrift, demselben Muster wie
   beim Kontakt-Button (.nav-cta: color: #062032 auf var(--a-akzent)). Auf
   Cyan 8,98:1. */
.ref-cta {
  border: none !important;
  background: #16CFF8 !important;
  animation: ref-cta-schweben 2.6s ease-in-out infinite, ref-cta-leuchten 2.6s ease-in-out infinite;
}
/* !important: body:not(.p-proxmox) a { color: var(--a-akzent) } aus dem
   Entwurf hat hoehere Spezifitaet (Element+Klasse+Element) als `.ref-cta a`
   (Klasse+Element) und gewann sonst - der Text war cyan auf cyan, also
   unsichtbar. */
.ref-cta a { color: #062032 !important; font-weight: 700; text-decoration: none; }
@keyframes ref-cta-schweben {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes ref-cta-leuchten {
  0%, 100% { box-shadow: 0 0 0 rgba(22, 207, 248, 0); }
  50% { box-shadow: 0 0 18px 3px rgba(22, 207, 248, 0.6); }
}
@media (prefers-reduced-motion: reduce) {
  .ref-cta { animation: none; box-shadow: 0 0 12px 2px rgba(22, 207, 248, 0.45); }
}

/* --- Ausgewaehlte Projekte: Flip-Karten im Spielkarten-Format -----------
   Nur auf kunden.html (projekt_karten() in site_build.py). Vorderseite ein
   Bild mit Firmenname, Rueckseite eine kurze Projektbeschreibung - dreht
   sich beim Ueberfahren oder Tastaturfokus nach links (rotateY). Feste
   dunkle Farben statt Entwurf-Token: Anders als die Referenz-Chips soll
   dieser Baustein nicht von einer spaeteren Entwurf-B-Umstellung mit-
   veraendert werden, das Kartenformat ist eigenstaendig gestaltet. */
.projekt-karten {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
}
@media (max-width: 980px) { .projekt-karten { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .projekt-karten { grid-template-columns: 1fr; } }
.projekt-karte { aspect-ratio: 5 / 7; perspective: 1400px; }
.projekt-karte:focus-visible { outline: 2px solid #16CFF8; outline-offset: 4px; }
.pk-innen {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; border-radius: 14px;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.projekt-karte:hover .pk-innen,
.projekt-karte:focus-within .pk-innen { transform: rotateY(180deg); }
.pk-vorn, .pk-hinten {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: 14px; overflow: hidden;
}
.pk-vorn {
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end; padding: 1.125rem;
  border: 1px solid #24405E;
}
.pk-vorn::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6, 15, 25, 0.85), transparent 65%);
}
.pk-vorn .pk-name {
  position: relative; color: #FFFFFF; font-weight: 700; font-size: 1.0625rem; line-height: 1.3;
}
.pk-hinten {
  background: var(--dark-2); border: 1px solid #24405E;
  transform: rotateY(180deg);
  padding: 1.25rem; display: flex; flex-direction: column; gap: 0.625rem;
}
.pk-hinten .pk-name { font-weight: 700; color: #16CFF8; font-size: 0.9375rem; }
.pk-hinten p { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--dark-muted); }
@media (hover: none) {
  .projekt-karte { aspect-ratio: auto; }
  .pk-innen { transform: none !important; display: flex; flex-direction: column; }
  .pk-vorn, .pk-hinten { position: static; }
  .pk-vorn { aspect-ratio: 5 / 7; }
  .pk-hinten { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .pk-innen { transition: none; } }

/* --- Kennzahlen auf dunklem Grund -------------------------------------- */
.band-dunkel .zahl-wert { color: var(--cyan); }
.band-dunkel .zahl-text { color: var(--dark-muted); }

/* --- Einordnung: Zitat mit Quellenangabe --------------------------------
   Mit Portraet: Die Ausgangslage zitiert Daniel Heitmann, der sonst auf
   dieser Seite nicht vorkommt - anders als beim Zitat der Geschaeftsfuehrung
   in "Ueber uns" ist ein Bild hier keine Wiederholung. Deutlich groesser als
   der Standard-Avatar (72px, wie beim Ansprechpartner am Seitenende) - eigene
   Groesse statt die globale .avatar-Regel zu aendern, die auch dort gilt. */
.zitat-mit-bild { display: flex; gap: 1.5rem; align-items: flex-start; }
.zitat-mit-bild .avatar { width: 160px; height: 160px; margin-top: 0.25rem; }
@media (max-width: 620px) { .zitat-mit-bild { flex-direction: column; } }
.einordnung {
  margin-top: 2.75rem; padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.einordnung p { font-size: 1.25rem; max-width: 46rem; }
.zitat-quelle { display: block; margin-top: 1rem; font-style: normal; }
.zitat-name {
  font-style: normal; font-weight: 600; font-size: 0.9375rem; color: var(--ink);
}
.zitat-name::after { content: " · "; font-weight: 400; color: var(--muted); }
.zitat-rolle { font-size: 0.9375rem; color: var(--muted); }

/* --- Anpassungen bestehender Bausteine an die breite Spalte ------------ */
/* .mig bleibt zentriert - ein Schaubild wirkt zentriert ruhiger. .calc und
   .gate sind Text/Formular-Bloecke: linksbuendig an der Kante von Vorzeile
   und Ueberschrift, wie die uebrigen Abschnitte auch. */
.mig { max-width: 54rem; margin-left: auto; margin-right: auto; }
.calc, .gate { max-width: 54rem; margin-left: 0; margin-right: auto; }
.problems { max-width: none; }
.services { max-width: 54rem; }

/* "Der naechste Schritt": drei Karten nebeneinander statt gestapelt - deutlich
   kompakter in der Hoehe. Braucht die volle breite Spalte, darum kein
   max-width wie bei den uebrigen schmaleren Baustellen hier.
   `align-items: start`: Grid-Zellen strecken ihre Kinder sonst auf die
   Hoehe der laengsten Karte (Schritt 3 hat deutlich mehr Text als 1 und 2) -
   das riss bei den kuerzeren Karten grosse Luecken zwischen Text und
   Schaltflaeche/Hinweis auf, weil auch die eigene Grid-Zeilenstruktur der
   Karte den Platz verteilte. Ohne Streckung behaelt jede Karte ihre eigene,
   zum Inhalt passende Hoehe - ein ungleicher unterer Rand ist das bewusst
   in Kauf genommene, deutlich kleinere Problem. */
.steps {
  max-width: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.125rem;
  align-items: start;
}
.steps .step { padding: 1.125rem 1.25rem; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }

/* ============================= Begleiter ============================== */
/* Fest positionierter Streifen ganz unten im Sichtfenster - unabhaengig
   vom Scrollen der Seite, darum ohne Kollisionspruefung garantiert frei
   von Text und Bildern. */
#begleiter {
  position: fixed; left: 0; bottom: 10px;
  width: 32px; height: 48px;
  z-index: 200; pointer-events: none;
  will-change: transform;
}
#begleiter.bg-schaut-links .bg-figur { transform: scaleX(-1); }
.bg-figur { display: block; pointer-events: auto; cursor: pointer; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.35)); }

/* Laufzyklus: Beine und Arme pendeln gegenlaeufig */
#begleiter.bg-laeuft .bg-bein-l { animation: bg-bein-a 0.5s ease-in-out infinite; transform-origin: 11px 30px; }
#begleiter.bg-laeuft .bg-bein-r { animation: bg-bein-b 0.5s ease-in-out infinite; transform-origin: 21px 30px; }
#begleiter.bg-laeuft .bg-arm-l  { animation: bg-bein-b 0.5s ease-in-out infinite; transform-origin: 4px 17px; }
#begleiter.bg-laeuft .bg-arm-r  { animation: bg-bein-a 0.5s ease-in-out infinite; transform-origin: 28px 17px; }
#begleiter.bg-laeuft .bg-figur  { animation: bg-wippen 0.5s ease-in-out infinite; }
@keyframes bg-bein-a { 0%, 100% { transform: rotate(18deg); } 50% { transform: rotate(-18deg); } }
@keyframes bg-bein-b { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(18deg); } }
@keyframes bg-wippen { 0%, 50%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(-1.5px); } }

/* Requisiten: Laptop (Programmieren) und Server (Installieren) - liegen
   bereit und werden per Klasse am Container eingeblendet. */
.bg-requisit {
  position: absolute; left: 34px; bottom: 2px;
  opacity: 0; transform: translateY(4px) scale(0.9);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
#begleiter.bg-codiert .bg-laptop,
#begleiter.bg-installiert .bg-server {
  opacity: 1; transform: translateY(0) scale(1);
}
.bg-laptop-basis { width: 22px; height: 3px; background: #9CB4CC; border-radius: 0 0 3px 3px; }
.bg-laptop-schirm {
  width: 20px; height: 14px; margin-left: 1px;
  background: #16293F; border: 1px solid #16CFF8; border-radius: 2px 2px 0 0;
  display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 3px;
}
.bg-laptop-schirm span { display: block; height: 2px; border-radius: 1px; background: #16CFF8; opacity: 0.85; }
.bg-laptop-schirm span:nth-child(1) { width: 70%; animation: bg-blinken 1.1s steps(2) infinite; }
.bg-laptop-schirm span:nth-child(2) { width: 45%; animation: bg-blinken 1.1s steps(2) infinite 0.4s; }
.bg-server-rack {
  width: 14px; height: 30px; background: #16293F; border: 1px solid #24405E; border-radius: 2px;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start;
  gap: 5px; padding: 4px 3px;
}
.bg-led { width: 4px; height: 4px; border-radius: 50%; background: #2C4A6B; }
.bg-led-1 { animation: bg-blinken 1.4s steps(2) infinite; background: #16CFF8; }
.bg-led-2 { animation: bg-blinken 1.7s steps(2) infinite 0.3s; background: #6FE3FD; }
.bg-led-3 { animation: bg-blinken 0.9s steps(2) infinite 0.6s; background: #16CFF8; }
@keyframes bg-blinken { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Finale Ueberraschung nach fuenf Mal Ueberfahren: Rauch, ein kurzer
   Funkenschlag am Server, die Figur zwinkert dazu. */
.bg-rauch { position: absolute; left: 2px; top: -8px; width: 10px; height: 10px; pointer-events: none; }
.bg-rauch span {
  position: absolute; bottom: 0; left: 2px;
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(156, 180, 204, 0.6);
  opacity: 0;
}
#begleiter.bg-unfall .bg-rauch span:nth-child(1) { animation: bg-rauch-steigt 1.7s ease-out infinite; }
#begleiter.bg-unfall .bg-rauch span:nth-child(2) { left: 5px; animation: bg-rauch-steigt 1.7s ease-out infinite 0.55s; }
#begleiter.bg-unfall .bg-rauch span:nth-child(3) { left: -1px; animation: bg-rauch-steigt 1.7s ease-out infinite 1.1s; }
@keyframes bg-rauch-steigt {
  0% { transform: translateY(0) scale(0.6); opacity: 0.7; }
  100% { transform: translateY(-16px) scale(1.5); opacity: 0; }
}
.bg-funke {
  position: absolute; right: -9px; top: -7px; width: 30px; height: 30px;
  pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #FFFFFF 0%, #FFF3B0 22%, #FFE066 42%, #FFB020 65%, transparent 78%);
  border-radius: 50%;
  filter: drop-shadow(0 0 12px #FFD84D) drop-shadow(0 0 20px rgba(255, 176, 32, 0.7));
}
#begleiter.bg-unfall .bg-funke { animation: bg-funke-blitz 0.8s cubic-bezier(0.22, 0.9, 0.3, 1) 1; }
@keyframes bg-funke-blitz {
  0%   { opacity: 0;   transform: scale(0.15); }
  8%   { opacity: 1;   transform: scale(2.4); }
  18%  { opacity: 0.2; transform: scale(0.8); }
  27%  { opacity: 1;   transform: scale(2.0); }
  38%  { opacity: 0.15; transform: scale(0.7); }
  48%  { opacity: 1;   transform: scale(1.7); }
  60%  { opacity: 0.15; transform: scale(0.75); }
  72%  { opacity: 0.85; transform: scale(1.2); }
  100% { opacity: 0;   transform: scale(0.3); }
}
/* Schockwellen-Ring: expandiert einmal schnell und verblasst - macht den
   Funken zusaetzlich "explosiv". */
.bg-funke-ring {
  position: absolute; right: 2px; top: 4px; width: 8px; height: 8px;
  pointer-events: none; opacity: 0;
  border: 2px solid #FFE066; border-radius: 50%;
}
#begleiter.bg-unfall .bg-funke-ring { animation: bg-ring-expandiert 0.55s ease-out 1; }
@keyframes bg-ring-expandiert {
  0%   { opacity: 0.9; transform: scale(0.3); }
  100% { opacity: 0;   transform: scale(3.2); }
}
/* Kurzer Wackler der ganzen Figur im Moment des Einschlags. */
#begleiter.bg-unfall .bg-figur { animation: bg-erschuettert 0.4s ease-in-out 1; }
@keyframes bg-erschuettert {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-1.5px, 0.5px); }
  40% { transform: translate(1.5px, -0.5px); }
  60% { transform: translate(-1px, 0.5px); }
  80% { transform: translate(1px, 0); }
}
.bg-auge { transform-box: fill-box; transform-origin: center; }
#begleiter.bg-unfall .bg-auge-r { animation: bg-zwinkern 0.7s ease-in-out 1; animation-delay: 0.35s; }
@keyframes bg-zwinkern { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.15); } }

/* Laecheln waehrend der Unfall-Szene ("Upsi, das bleibt aber unter uns."). */
.bg-mund-laechelt { opacity: 0; transition: opacity 0.2s ease; }
#begleiter.bg-unfall .bg-mund-laechelt { opacity: 1; }

/* Trauriger Blick: erscheint nur, wenn der Container die Klasse traegt -
   ausgeloest per JS fuer 2 Sekunden bei einem bestimmten Hover-Spruch. */
.bg-mund-traurig { opacity: 0; transition: opacity 0.2s ease; }
#begleiter.bg-traurig .bg-mund-traurig { opacity: 1; }
#begleiter.bg-traurig .bg-auge { transform: scaleY(0.7) translateY(0.5px); }

/* Sprechblase */
.bg-blase {
  position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%) translateY(4px);
  min-width: max-content; max-width: 15rem;
  background: #EDF3F9; color: #17242F;
  font-family: "Work Sans", "Segoe UI", system-ui, sans-serif;
  font-size: 0.8125rem; font-weight: 500; line-height: 1.35;
  padding: 0.5rem 0.75rem; border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.bg-blase::after {
  content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #EDF3F9;
}
#begleiter.bg-spricht .bg-blase { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

@media (max-width: 640px) { #begleiter { display: none; } }
@media (prefers-reduced-motion: reduce) {
  #begleiter.bg-laeuft .bg-bein-l, #begleiter.bg-laeuft .bg-bein-r,
  #begleiter.bg-laeuft .bg-arm-l, #begleiter.bg-laeuft .bg-arm-r,
  #begleiter.bg-laeuft .bg-figur,
  .bg-laptop-schirm span, .bg-led,
  #begleiter.bg-unfall .bg-rauch span, #begleiter.bg-unfall .bg-funke,
  #begleiter.bg-unfall .bg-funke-ring, #begleiter.bg-unfall .bg-figur,
  #begleiter.bg-unfall .bg-auge-r { animation: none; }
}

/* Volltextsuche: Auslöser in der Kopfzeile, Ergebnisse als Dialog mit
   Liste. Farbtöne über dieselben Variablen wie der Rest der Kopf-/
   Fusszeile, damit sie auf jeder Seite (auch Proxmox) zum dunklen Grund passt. */
.such-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; flex: none;
  background: none; border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); cursor: pointer;
}
.such-knopf:hover, .such-knopf:focus-visible { color: var(--accent-ink); border-color: var(--accent); }

/* display:flex nur auf [open] gesetzt, nicht auf die Grundregel: dialog
   ist ohne das open-Attribut per UA-Stylesheet display:none - eine eigene
   Grundregel mit display:flex haette das ueberschrieben und den Dialog
   dauerhaft sichtbar/inline im Dokumentfluss gehalten (Bug, so gefunden). */
dialog.such-dialog {
  border: none; border-radius: 16px; padding: 0;
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(75vh, 34rem);
  box-shadow: 0 18px 50px rgba(23, 36, 47, 0.22);
  color: var(--ink); background: var(--bg);
  overflow: hidden; flex-direction: column;
}
dialog.such-dialog::backdrop { background: rgba(23, 36, 47, 0.45); }
dialog.such-dialog[open] { display: flex; }
.such-kopf {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); flex: none;
}
.such-kopf svg { color: var(--muted); flex: none; }
.such-kopf input {
  flex: 1; border: none; background: none; font: inherit; font-size: 1.0625rem;
  color: var(--ink); outline: none;
}
.such-kopf .dlg-close { position: static; }
.such-ergebnisse { list-style: none; margin: 0; padding: 0.5rem; overflow-y: auto; }
.such-ergebnisse li { margin: 0; }
.such-ergebnisse a {
  display: block; padding: 0.75rem 0.75rem; border-radius: 10px;
  color: var(--ink); text-decoration: none;
}
.such-ergebnisse a:hover, .such-ergebnisse a.aktiv { background: var(--surface); }
.such-treffer-titel { display: block; font-weight: 600; font-size: 0.9375rem; }
.such-treffer-titel mark, .such-treffer-text mark {
  background: none; color: var(--accent-ink); font-weight: 700;
}
.such-treffer-text {
  display: block; margin-top: 0.2rem; font-size: 0.875rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.such-leer { padding: 1.5rem 1.25rem; color: var(--muted); margin: 0; }
@media (max-width: 640px) { dialog.such-dialog { width: calc(100vw - 1.25rem); } }


/* ==========================================================================
   ENTWURF A - "Nachtblau"
   Dunkler Grund durchgehend, Cyan als einziger Akzent, sehr grosse Headlines.
   ========================================================================== */

:root {
  --a-grund:   #0E1C2E;   /* Contensi-Navy - traegt die ganze Seite */
  --a-flaeche: #16293F;   /* Karten und abgesetzte Baender */
  --a-tief:    #0A1523;   /* Fusszeile, Kopfzeile */
  --a-linie:   #23405E;   /* Haarlinien auf dunklem Grund */
  --a-text:    #EDF3F9;
  --a-leise:   #9CB4CC;
  --a-akzent:  #16CFF8;   /* Contensi-Cyan, auf dunkel voll nutzbar */
}

/* Die Farbtoken des Grund-Stylesheets werden fuer die Website-Seiten neu
   belegt. Damit zieht der dunkle Grund durch alles hindurch - auch durch
   Regeln und einzelne style-Angaben im HTML, die hier gar nicht aufgefuehrt
   sind. Das ist verlaesslicher, als jede Regel einzeln zu ueberschreiben.

   Gilt jetzt auch fuer die Proxmox-Landingpage (08.09.2026, auf Wunsch): ihre
   eigenen .band/.band-hell/.band-dunkel-Abschnitte nutzen genau dieselben
   --bg/--surface-Token, ziehen also automatisch denselben dunklen Grund wie
   der Rest der Website. Die uebrigen, hier bewusst weiter auf :not(.p-proxmox)
   gescopten Regeln unten betreffen Klassen, die auf der Proxmox-Seite gar
   nicht vorkommen oder dort schon eigens (in polygran_css.py) dunkel gestylt
   sind - dort bleibt die Ausnahme bestehen. */
body {
  --bg:             var(--a-grund);
  --surface:        var(--a-flaeche);
  --surface-strong: var(--a-flaeche);
  --ink:            var(--a-text);
  --muted:          var(--a-leise);
  --line:           var(--a-linie);
  --accent:         var(--a-akzent);
  --accent-ink:     var(--a-akzent);
  --akzent-cyan:    var(--a-akzent);
  --btn-bg:         var(--a-akzent);
  --btn-bg-hover:   #6FE3FD;
  --btn-ink:        #062032;
  background: var(--a-grund);
  color: var(--a-text);
}

/* --- Kopfzeile --------------------------------------------------------- */
/* Undurchsichtig statt (wie vorher) halbtransparent mit Weichzeichner:
   Die Kopfzeile ist "position: sticky" und liegt daher beim Scrollen ueber
   dem Seiteninhalt - mit einem durchscheinenden, weichgezeichneten
   Hintergrund schimmerte darunterliegender Inhalt (Ueberschrift, seit
   08.09.2026 auch das animierte Hexagon-Muster) sichtbar durch. Undurch-
   sichtig verhindert das zuverlaessig, unabhaengig vom jeweiligen Seiteninhalt. */
header.site {
  background: var(--a-tief);
  backdrop-filter: none;
  border-bottom: 1px solid var(--a-linie);
}
.nav-links a { color: var(--a-leise); font-weight: 500; }
.nav-links a:hover { color: var(--a-text); }
.nav-links a[aria-current="page"] { color: var(--a-akzent); border-bottom-color: var(--a-akzent); }
.nav-links a.nav-cta {
  background: var(--a-akzent); color: #062032;
  border-radius: 999px; padding: 0.5rem 1.25rem; font-weight: 600;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.nav-links a.nav-cta:hover, .nav-links a.nav-cta:focus-visible {
  background: #6FE3FD; color: #062032;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -8px rgba(22, 207, 248, 0.6);
}
.nav-toggle { color: var(--a-text); border-color: var(--a-linie); }
@media (max-width: 860px) {
  header.site.offen .nav-links { background: transparent; }
  /* Ausgeklapptes Hamburger-Menue: derselbe schlichte Farbwechsel wie beim
     LinkedIn-Zeichen in der Fusszeile (footer.site .social a:hover) - Farbe
     auf Cyan beim Ueberfahren/Tastaturfokus, statt eines Leucht-/Schein-
     effekts. Der Kopfbereich ist immer dunkel, auch auf der Proxmox-Seite,
     darum hier statt im Grund-Stylesheet. */
  .nav-links a {
    display: block; width: 100%; border-bottom: none;
    padding: 0.625rem 0.875rem; border-radius: 8px;
    transition: color 0.15s ease, background 0.15s ease;
  }
  .nav-links a:hover, .nav-links a:focus-visible {
    color: var(--a-akzent);
    background: rgba(255, 255, 255, 0.06);
  }
  .nav-links a.nav-cta { width: auto; }
}

/* --- Typografie -------------------------------------------------------- */
/* Fuer die Headlines die neutralere Work Sans statt der runden Comfortaa:
   sie kommt der geometrischen Anmutung des Vorbilds naeher. */
body:not(.p-proxmox) h1,
body:not(.p-proxmox) h2 {
  font-family: "Work Sans", "Segoe UI", system-ui, sans-serif;
  font-weight: 600; letter-spacing: -0.022em; line-height: 1.06;
  color: var(--a-text);
}
body:not(.p-proxmox) h1 { font-size: clamp(2.4rem, 6.2vw, 4.25rem); margin-bottom: 1.5rem; }
body:not(.p-proxmox) h2 { font-size: clamp(1.8rem, 4vw, 2.9rem); margin-bottom: 1.25rem; }
body:not(.p-proxmox) h3 { color: var(--a-text); font-weight: 600; }
/* Die Proxmox-Seite ist von der Bandgestaltung ausgenommen, soll aber
   dieselbe Headline-Schrift wie der Rest der Website zeigen: sonst bricht
   Comfortaa mitten in der Seite die Schriftfamilie um. Nur font-family, die
   uebrige, dort abgestimmte Groesse/Zeilenhoehe bleibt unangetastet. */
body.p-proxmox h1,
body.p-proxmox h2 {
  font-family: "Work Sans", "Segoe UI", system-ui, sans-serif;
}

/* Muss mitscoped sein, sonst gewinnt die allgemeine Absatzfarbe weiter oben. */
body:not(.p-proxmox) .eyebrow {
  color: var(--a-akzent);
  font-size: 0.75rem; letter-spacing: 0.22em; margin-bottom: 1.25rem;
}
body:not(.p-proxmox) .lead {
  color: var(--a-leise); font-size: 1.25rem; line-height: 1.6; max-width: 40rem;
}
body:not(.p-proxmox) p { color: var(--a-leise); }
body:not(.p-proxmox) .note { color: var(--a-leise); max-width: 42rem; }
body:not(.p-proxmox) strong { color: var(--a-text); }
body:not(.p-proxmox) a { color: var(--a-akzent); }

/* --- Seitenrhythmus ---------------------------------------------------- */
body:not(.p-proxmox) main { gap: 0; padding: 0; }
body:not(.p-proxmox) main > section { padding: 5.5rem 0; position: relative; }
body:not(.p-proxmox) main > section:first-child { padding: 6.5rem 0; }
/* Jede zweite Sektion abgesetzt - der Wechsel gibt der Seite Takt.
   Die Bandfarbe legt ein Hintergrund-Element hinter den Abschnitt: genauso
   hoch wie er, seitlich weit darueber hinaus. Bewusst ohne `width: 100vw` -
   das zaehlt die Bildlaufleiste mit und laesst rechts eine Naht. */
body:not(.p-proxmox) main > section:nth-of-type(even)::before {
  content: ""; position: absolute; inset: 0 -100vmax; z-index: -1;
  background: var(--a-flaeche);
}
@media (max-width: 700px) {
  body:not(.p-proxmox) main > section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}

/* --- Schaltflaechen ---------------------------------------------------- */
body:not(.p-proxmox) .btn {
  background: var(--a-akzent); color: #062032;
  border-radius: 999px; text-transform: none; letter-spacing: 0;
  min-width: 0; padding: 0.9rem 2rem; font-size: 1rem; font-weight: 600;
}
body:not(.p-proxmox) .btn:hover { background: #6FE3FD; }
body:not(.p-proxmox) .hint { color: var(--a-leise); }

/* --- Karten ------------------------------------------------------------ */
body:not(.p-proxmox) .karten { gap: 1rem; margin-top: 3rem; }
body:not(.p-proxmox) .karte {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--a-linie); border-radius: 18px;
  padding: 2rem 1.875rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}
body:not(.p-proxmox) main > section:nth-of-type(even) .karte { background: rgba(255, 255, 255, 0.05); position: relative; }
body:not(.p-proxmox) .karte:hover { border-color: var(--a-akzent); background: rgba(22, 207, 248, 0.06); }
body:not(.p-proxmox) .karte h3 { font-size: 1.1875rem; margin-bottom: 0.75rem; }
body:not(.p-proxmox) .karte p,
body:not(.p-proxmox) .karte ul { color: var(--a-leise); }
body:not(.p-proxmox) .karte ul { list-style: none; padding-left: 0; margin-top: 1rem; }
body:not(.p-proxmox) .karte li { position: relative; padding-left: 1.125rem; }
body:not(.p-proxmox) .karte li::before {
  content: ""; position: absolute; left: 0; top: 0.7em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--a-akzent);
}
body:not(.p-proxmox) .karte-num { color: var(--a-akzent); letter-spacing: 0.18em; }
body:not(.p-proxmox) .karte-link { color: var(--a-akzent); }

/* --- Kennzahlen -------------------------------------------------------- */
body:not(.p-proxmox) .zahlen { gap: 2.5rem; margin-top: 3rem; }
body:not(.p-proxmox) .zahl-wert {
  font-family: "Work Sans", sans-serif; font-weight: 600;
  font-size: clamp(2.5rem, 5vw, 3.5rem); color: var(--a-akzent);
  letter-spacing: -0.02em;
}
body:not(.p-proxmox) .zahl-text { color: var(--a-leise); margin-top: 0.75rem; }

/* --- Zweispalter, Haken, Listen ---------------------------------------- */
body:not(.p-proxmox) .split { gap: 2rem 4rem; }
body:not(.p-proxmox) .haken li::before { color: var(--a-akzent); }

/* --- Teaser und Handlungsaufforderung ---------------------------------- */
body:not(.p-proxmox) .teaser {
  background: transparent; border: 1px solid var(--a-akzent); border-radius: 22px;
  padding: 2.75rem;
}
body:not(.p-proxmox) .cta-panel {
  background: transparent; border: 1px solid var(--a-linie); border-radius: 22px;
  padding: 3.5rem 2rem;
}
/* Das Proxmox-Zeichen ist dunkel gezeichnet und ginge auf dem Navy unter.
   Es bekommt ein helles Feld - umgefaerbt wird eine fremde Marke nicht. */
body:not(.p-proxmox) .teaser-logo {
  background: #FFFFFF; border-radius: 12px;
  padding: 0.875rem 1.125rem; box-sizing: content-box;
}

/* --- Referenzen und Partnerlogos --------------------------------------- */
body:not(.p-proxmox) .refs li {
  background: transparent; border-color: var(--a-linie); color: var(--a-text);
}
/* Die Partnerlogos bleiben in ihren Originalfarben auf hellen Chips. Ein
   Weissfaerben wuerde zwar besser zum dunklen Grund passen, veraendert aber
   fremde Marken - das unterbleibt bewusst. */
body:not(.p-proxmox) .logo-chip2 { border-color: transparent; }

/* --- Blog-Liste -------------------------------------------------------- */
body:not(.p-proxmox) .beitraege li { border-top-color: var(--a-linie); padding: 1.75rem 0; }
body:not(.p-proxmox) .beitraege li:last-child { border-bottom-color: var(--a-linie); }
body:not(.p-proxmox) .beitrag-titel { color: var(--a-text); font-size: 1.25rem; }
body:not(.p-proxmox) .beitrag-datum,
body:not(.p-proxmox) .beitrag-text { color: var(--a-leise); }

/* --- Kontakt und Rechtsseiten ------------------------------------------ */
body:not(.p-proxmox) .kontaktdaten a { color: var(--a-akzent); }
body:not(.p-proxmox) .doc-body,
body:not(.p-proxmox) .doc-body p,
body:not(.p-proxmox) .doc-body li { color: var(--a-leise); }
body:not(.p-proxmox) .doc-body h2,
body:not(.p-proxmox) .doc-body h3 { color: var(--a-text); }

/* --- Fusszeile --------------------------------------------------------- */
footer.site {
  background: var(--a-tief); border-top: 1px solid var(--a-linie);
  color: var(--a-leise); padding-top: 3.5rem;
}
footer.site .foot-grid h4 { color: var(--a-text); }
footer.site .foot-list a, footer.site .foot-list .linklike { color: var(--a-leise); }
footer.site .foot-list a:hover { color: var(--a-akzent); }
footer.site a { color: var(--a-leise); }
footer.site .legal { color: #6E88A2; }