@font-face {
    font-family: 'Big Shoulders Display';
    font-style: normal;
    font-weight: 500 800;
    font-display: swap;
    src: url('../assets/fonts/big-shoulders-display.woff2') format('woff2');
  }
  @font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../assets/fonts/ibm-plex-sans.woff2') format('woff2');
  }
  @font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../assets/fonts/ibm-plex-mono.woff2') format('woff2');
  }

  :root{
    --bg: #0a0d12;
    --bg-raised: #10141b;
    --bg-inset: #06070a;
    --grid-line: rgba(184,202,224,0.055);
    --border: rgba(184,202,224,0.14);
    --border-strong: rgba(184,202,224,0.26);
    --text: #e9ebef;
    --text-muted: #97a1b0;
    --text-faint: #5c6472;
    --accent: #d98a46;
    --accent-strong: #f2ac72;
    --accent-deep: #7a4420;
    --accent-dim: rgba(217,138,74,0.13);
    --good: #85ab8f;
    --spot-x: -9999px;
    --spot-y: -9999px;
    --spot-o: 0;
    --radius: 3px;
    --container: 1180px;
    --ease: cubic-bezier(.22,.61,.36,1);
  }

  *,*::before,*::after{ box-sizing: border-box; }

  /* KRITISCH: [hidden] muss jede display-Regel schlagen —
     sonst liegt z.B. das unsichtbare Login-Modal (display:flex)
     als Klick-Blocker über der ganzen Seite. */
  [hidden]{ display: none !important; }

  html{
    scroll-behavior: smooth;
    color-scheme: dark;
  }

  body{
    margin:0;
    background: var(--bg);
    color: var(--text);
    font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  h1,h2,h3{
    font-family: 'Big Shoulders Display', 'Segoe UI Semibold', system-ui, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 0.96;
    text-wrap: balance;
    margin: 0;
    color: var(--text);
  }

  p{ margin: 0; }

  a{ color: inherit; text-decoration: none; }

  ::selection{ background: var(--accent); color: #1a0f04; }

  :focus-visible{
    outline: 2px solid var(--accent-strong);
    outline-offset: 3px;
  }

  button{ font-family: inherit; }

  .mono{
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
  }

  .eyebrow{
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
  }
  .eyebrow::before{
    content: '';
    width: 22px;
    height: 1px;
    background: var(--accent);
    display: inline-block;
  }

  .container{
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  }

  /* ---------- background blueprint grid ---------- */
  .blueprint-grid{
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      radial-gradient(circle 220px at var(--spot-x) var(--spot-y), rgba(217,138,70,calc(var(--spot-o) * 0.4)), transparent 70%),
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 100% 100%, 56px 56px, 56px 56px;
    background-blend-mode: screen, normal, normal;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 40%, transparent 85%);
  }

  /* ---------- tick-frame corner motif ---------- */
  .tick-frame{ position: relative; }
  .tick-frame::before, .tick-frame::after,
  .tick-frame .tick-br, .tick-frame .tick-bl{
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: var(--border-strong);
    transition: border-color 0.25s var(--ease);
  }
  .tick-frame::before{ top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; }
  .tick-frame::after{ top: -1px; right: -1px; border-top: 1px solid; border-right: 1px solid; }

  /* ---------- buttons ---------- */
  .btn{
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.5rem;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: var(--radius);
    cursor: pointer;
    transition: transform 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
    border: 1px solid transparent;
    white-space: nowrap;
  }
  .btn-primary{
    background: var(--accent);
    color: #1a0f04;
  }
  .btn-primary:hover{ background: var(--accent-strong); transform: translateY(-2px); }
  .btn-ghost{
    border-color: var(--border-strong);
    color: var(--text);
    background: transparent;
  }
  .btn-ghost:hover{ border-color: var(--accent); color: var(--accent-strong); transform: translateY(-2px); }
  .btn svg{ width: 16px; height: 16px; flex: none; }

  /* ---------- nav ---------- */
  .nav{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    padding: 1.1rem 0;
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease), padding 0.3s var(--ease);
    border-bottom: 1px solid transparent;
  }
  .nav.scrolled{
    background: rgba(10,13,18,0.86);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom-color: var(--border);
    padding: 0.8rem 0;
  }
  .nav-inner{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2rem;
  }
  .brand{
    display: flex;
    align-items: center;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
  }
  .brand-text{
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
  }
  .nav-main{
    flex: 1;
    display: flex;
    align-items: center;
  }

  .brand-eyebrow{
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    color: var(--text-muted);
  }
  .brand-name{
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .brand-name em{ font-style: normal; color: var(--accent); }
  @media (max-width: 420px){ .brand-name{ font-size: 1rem; } }

  .nav-links{
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0; padding: 0;
  }
  .nav-links a{
    font-size: 0.92rem;
    color: var(--text-muted);
    position: relative;
    padding: 0.5rem 0.3rem 0.5rem 0.3rem;
    transition: color 0.2s var(--ease);
    cursor: pointer;
    display: block;
  }
  .nav-links a::after{
    content:'';
    position: absolute;
    left:0; bottom:0;
    width:0; height:1px;
    background: var(--accent);
    transition: width 0.25s var(--ease);
  }
  .nav-links a:hover{ color: var(--text); }
  .nav-links a:hover::after{ width: 100%; }

  .nav-actions{ display:flex; align-items:center; gap: 1rem; }

  .nav-toggle{
    display:none;
    width: 40px; height: 40px;
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text);
    border-radius: var(--radius);
    cursor: pointer;
    align-items: center;
    justify-content: center;
  }
  .nav-toggle svg{ width: 18px; height: 18px; }

  .nav-mobile{
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.25rem clamp(1.25rem, 4vw, 2.5rem) 1.5rem;
    background: rgba(10,13,18,0.98);
    border-bottom: 1px solid var(--border);
  }
  .nav-mobile.open{ display: flex; }
  .nav-mobile a{
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 1rem;
  }
  .nav-mobile a:last-child{ border-bottom: none; }

  @media (max-width: 860px){
    .nav-links{ display: none; }
    .nav-actions .btn-primary{ display:none; }
    .nav-toggle{ display:flex; }
  }

  /* ---------- reveal on scroll ---------- */
  .reveal{
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
  .reveal.is-visible{ opacity: 1; transform: translateY(0); }
  .reveal-stagger.is-visible > *{ transition-delay: calc(var(--stagger-i, 0) * 90ms); }

  /* ---------- hero ---------- */
  .hero{
    position: relative;
    z-index: 1;
    padding: clamp(8rem, 18vw, 10.5rem) 0 clamp(4rem, 8vw, 6rem);
    overflow: hidden;
  }
  .hero-glow{
    position: absolute;
    top: -10%;
    right: -10%;
    width: 60vw;
    height: 60vw;
    max-width: 700px;
    max-height: 700px;
    background: radial-gradient(circle, var(--accent-dim) 0%, transparent 70%);
    z-index: -1;
    animation: drift 16s ease-in-out infinite;
  }
  @keyframes drift{
    0%, 100%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(-3%, 4%) scale(1.08); }
  }

  .hero-grid{
    display: grid;
    grid-template-columns: minmax(0,1.05fr) minmax(0,0.8fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }

  .hero h1{
    font-size: clamp(2.6rem, 5.6vw, 4.6rem);
    margin-top: 1.1rem;
  }
  .hero h1 span{ color: var(--accent); }

  .hero-sub{
    margin-top: 1.6rem;
    max-width: 46ch;
    color: var(--text-muted);
    font-size: 1.08rem;
  }

  .hero-cta{
    display: flex;
    gap: 1rem;
    margin-top: 2.4rem;
    flex-wrap: wrap;
  }

  .hero-stats{
    display: flex;
    gap: clamp(1.5rem, 4vw, 3rem);
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
  }
  .stat-num{
    font-family: 'IBM Plex Mono', monospace;
    font-size: 2rem;
    font-weight: 600;
    color: var(--accent-strong);
    font-variant-numeric: tabular-nums;
  }
  .stat-label{
    font-size: 0.8rem;
    color: var(--text-faint);
    margin-top: 0.2rem;
    max-width: 16ch;
  }

  .hero-diagram{ position: relative; perspective: 1100px; }
  .hero-diagram svg{ width: 100%; height: auto; display:block; }
  #heroCube{
    position: absolute;
    left: 50%; top: 50%;
    width: 46px; height: 46px;
    transform: translate(-50%, -50%) rotateX(-18deg) rotateY(28deg);
    transform-style: preserve-3d;
    z-index: 2;
    transition: transform 0.15s ease-out;
    pointer-events: none;
  }
  #heroCube .face{
    position: absolute;
    width: 46px; height: 46px;
    background: rgba(20, 24, 32, 0.16);
    border: 1px solid var(--accent);
    box-shadow: 0 0 10px var(--accent-dim), 0 0 3px var(--accent);
    opacity: 0.85;
  }
  #heroCube .front  { transform: rotateY(  0deg) translateZ(23px); }
  #heroCube .back   { transform: rotateY(180deg) translateZ(23px); }
  #heroCube .right  { transform: rotateY( 90deg) translateZ(23px); }
  #heroCube .left   { transform: rotateY(-90deg) translateZ(23px); }
  #heroCube .top    { transform: rotateX( 90deg) translateZ(23px); }
  #heroCube .bottom { transform: rotateX(-90deg) translateZ(23px); }
  .hero-diagram .draw-line{
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: draw 2.4s var(--ease) forwards 0.3s;
  }
  .hero-diagram .draw-line.d2{ animation-delay: 0.6s; }
  .hero-diagram .draw-line.d3{ animation-delay: 0.9s; }
  @keyframes draw{ to{ stroke-dashoffset: 0; } }
  .hero-diagram .node{
    animation: nodeIn 0.5s var(--ease) forwards, nodeColorDrift 55s linear infinite;
    opacity: 0;
    transform-origin: center;
  }
  @keyframes nodeIn{ from{ opacity:0; transform: scale(0.3);} to{ opacity:0.55; transform: scale(1);} }
  @keyframes nodeColorDrift{
    0%{ fill: #d98a46; }
    22%{ fill: #f2ac72; }
    45%{ fill: #ffe3b8; }
    68%{ fill: #85ab8f; }
    86%{ fill: #97a1b0; }
    100%{ fill: #d98a46; }
  }
  .hero-diagram .pulse{
    animation: pulseDot 2.6s ease-in-out infinite, nodeColorDrift 55s linear infinite;
  }
  @keyframes pulseDot{
    0%,100%{ opacity: 0.55; }
    50%{ opacity: 1; }
  }
  .hero-diagram .signal{
    fill: none;
    stroke: #f2ac72;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 5 85;
    opacity: 0;
    animation: signalFadeIn 0.7s ease-out forwards, signalFlow 48s linear infinite, signalColorDrift 50s linear infinite;
  }
  @keyframes signalFadeIn{ from{ opacity: 0; } to{ opacity: 0.75; } }
  @keyframes signalFlow{ from{ stroke-dashoffset: 0; } to{ stroke-dashoffset: -360; } }
  @keyframes signalColorDrift{
    0%{ stroke: #f2ac72; }
    25%{ stroke: #ffdca8; }
    50%{ stroke: #85ab8f; }
    75%{ stroke: #d98a46; }
    100%{ stroke: #f2ac72; }
  }
  .hero-diagram .cube-link{
    fill: none;
    stroke: #97a1b0;
    stroke-width: 0.75;
    stroke-dasharray: 2 3;
    opacity: 0;
    animation: cubeLinkFadeIn 1s ease-out forwards 3.6s;
  }
  @keyframes cubeLinkFadeIn{ from{ opacity: 0; } to{ opacity: 0.3; } }

  @media (max-width: 900px){
    .hero-grid{ grid-template-columns: 1fr; }
    .hero-diagram{ order: -1; max-width: 340px; margin: 0 auto 1rem; }
  }

  /* ---------- branchen strip ---------- */
  .strip{
    position: relative; z-index: 1;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 1.6rem 0;
  }
  .strip-inner{
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    flex-wrap: wrap;
  }
  .strip-label{
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    color: var(--text-faint);
    white-space: nowrap;
  }
  .strip-items{
    display: flex;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    flex-wrap: wrap;
    font-size: 0.95rem;
    color: var(--text-muted);
  }
  .strip-items span{ position: relative; padding-left: clamp(1.5rem, 4vw, 2.5rem); }
  .strip-items span:first-child{ padding-left: 0; }
  .strip-items span::before{
    content:'';
    position:absolute;
    left: calc(clamp(1.5rem, 4vw, 2.5rem) / -2);
    top: 50%; transform: translateY(-50%);
    width: 3px; height: 3px;
    background: var(--accent);
    border-radius: 50%;
  }
  .strip-items span:first-child::before{ display:none; }

  /* ---------- section headers ---------- */
  section{ position: relative; z-index: 1; }
  .section{ padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
  .section-head{
    max-width: 640px;
    margin-bottom: clamp(2.5rem, 6vw, 3.5rem);
  }
  .section-head h2{
    font-size: clamp(2rem, 4vw, 2.9rem);
    margin-top: 0.9rem;
  }
  .section-head p{
    margin-top: 1.1rem;
    color: var(--text-muted);
    max-width: 56ch;
  }
  .section-alt{ background: var(--bg-raised); }

  /* ---------- services grid ---------- */
  .grid-3{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
  }
  @media (max-width: 900px){ .grid-3{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 600px){ .grid-3{ grid-template-columns: 1fr; } }

  .card{
    background: var(--bg);
    padding: 2.1rem 1.9rem;
    transition: background 0.25s var(--ease);
  }
  .card:hover{ background: var(--bg-raised); }
  .card-icon{
    width: 42px; height: 42px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent);
    margin-bottom: 1.4rem;
    transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
  }
  .card:hover .card-icon{ border-color: var(--accent); color: var(--accent-strong); }
  .card-icon svg{ width: 22px; height: 22px; }
  .card h3{
    font-family: 'IBM Plex Sans', sans-serif;
    text-transform: none;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.3;
  }
  .card p{
    margin-top: 0.7rem;
    color: var(--text-muted);
    font-size: 0.96rem;
  }
  .card-index{
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    color: var(--text-faint);
    margin-bottom: 0.8rem;
    display: block;
  }

  /* ---------- process ---------- */
  .process-list{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
  @media (max-width: 900px){ .process-list{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 560px){ .process-list{ grid-template-columns: 1fr; } }

  .process-step{
    border-top: 2px solid var(--border-strong);
    padding-top: 1.4rem;
    position: relative;
    transition: border-color 0.25s var(--ease);
  }
  .process-step:hover{ border-color: var(--accent); }
  .process-num{
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.85rem;
    color: var(--accent);
    display: block;
    margin-bottom: 0.9rem;
  }
  .process-step h3{
    font-family: 'IBM Plex Sans', sans-serif;
    text-transform: none;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0;
  }
  .process-step p{
    margin-top: 0.6rem;
    color: var(--text-muted);
    font-size: 0.94rem;
  }

  /* ---------- projects ---------- */
  .project-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
  @media (max-width: 900px){ .project-grid{ grid-template-columns: 1fr; } }
  .project-grid.grid-4{ grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 1000px){ .project-grid.grid-4{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px){ .project-grid.grid-4{ grid-template-columns: 1fr; } }

  .project-card{
    padding: 1.9rem;
    border: 1px solid var(--border);
    background: var(--bg-inset);
    transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .project-card:hover{ border-color: var(--border-strong); transform: translateY(-4px); }
  .project-tag{
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
  }
  .project-card h3{
    font-family: 'IBM Plex Sans', sans-serif;
    text-transform: none;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0;
    margin-top: 0.6rem;
  }
  .project-card p{
    margin-top: 0.7rem;
    color: var(--text-muted);
    font-size: 0.93rem;
  }
  .project-note{
    margin-top: 2rem;
    font-size: 0.85rem;
    color: var(--text-faint);
    font-style: normal;
  }

  /* ---------- about ---------- */
  .about-grid{
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
  }
  @media (max-width: 780px){ .about-grid{ grid-template-columns: 1fr; } }

  .plate{
    aspect-ratio: 1;
    border: 1px solid var(--border-strong);
    display: flex; align-items: center; justify-content: center;
    position: relative;
    background:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
      var(--bg-inset);
    background-size: 18px 18px, 18px 18px, auto;
  }
  .plate-mono{
    font-family: 'Big Shoulders Display', sans-serif;
    font-size: 4.5rem;
    font-weight: 700;
    color: var(--accent);
  }
  .plate-caption{
    position: absolute;
    bottom: 0.9rem;
    left: 0; right: 0;
    text-align: center;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    color: var(--text-faint);
  }

  .about-bio{ color: var(--text-muted); font-size: 1.02rem; max-width: 60ch; }

  .fact-list{
    margin-top: 2.2rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--border);
  }
  .fact-row{
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.94rem;
  }
  .fact-row dt{
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    text-transform: uppercase;
    margin: 0;
  }
  .fact-row dd{ margin: 0; color: var(--text); }

  /* ---------- cta band ---------- */
  .cta-panel{
    position: relative;
    padding: clamp(2.5rem, 6vw, 4.5rem);
    border: 1px solid var(--border-strong);
    background: linear-gradient(160deg, var(--bg-raised), var(--bg-inset));
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 2.5rem;
    align-items: center;
  }
  .cta-panel::before, .cta-panel::after{
    content:'';
    position: absolute;
    width: 16px; height: 16px;
    border-color: var(--accent);
  }
  .cta-panel::before{ top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
  .cta-panel::after{ bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }
  @media (max-width: 780px){ .cta-panel{ grid-template-columns: 1fr; } }

  .cta-panel h2{ font-size: clamp(1.9rem, 4vw, 2.6rem); }
  .cta-panel p{ margin-top: 1rem; color: var(--text-muted); max-width: 50ch; }

  .cta-side{
    border-left: 1px solid var(--border);
    padding-left: clamp(1.5rem, 3vw, 2.5rem);
    display: flex; flex-direction: column; gap: 1.1rem;
  }
  @media (max-width: 780px){ .cta-side{ border-left: none; border-top: 1px solid var(--border); padding-left:0; padding-top: 1.5rem; } }
  .cta-side .btn-primary{ justify-content: center; }
  .cta-note{ font-size: 0.85rem; color: var(--text-faint); }
  .cta-email{ font-family: 'IBM Plex Mono', monospace; font-size: 0.92rem; color: var(--accent-strong); }

  /* ---------- footer ---------- */
  footer{
    position: relative; z-index: 1;
    border-top: 1px solid var(--border);
    padding: clamp(3rem, 6vw, 4rem) 0 2rem;
  }
  .footer-grid{
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 0.8fr 0.8fr;
    gap: 2.5rem;
  }
  @media (max-width: 780px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 480px){ .footer-grid{ grid-template-columns: 1fr; } }

  .footer-tagline{ margin-top: 1rem; color: var(--text-muted); max-width: 34ch; font-size: 0.94rem; }
  .footer-col h4{
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin: 0 0 1rem;
    font-weight: 500;
  }
  .footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 0.65rem; }
  .footer-col a{ color: var(--text-muted); font-size: 0.92rem; transition: color 0.2s var(--ease); cursor: pointer; }
  .footer-col a:hover{ color: var(--accent-strong); }

  .footer-bottom{
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.82rem;
    color: var(--text-faint);
  }

  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
    .reveal{ opacity: 1; transform: none; }
  }

  /* Borg-Cube Cursor */
  @media (pointer: fine){
    body{ cursor: none; }
  }
  #borg-cursor{
    position: fixed;
    width: 20px;
    height: 20px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    perspective: 1000px;
    z-index: 9999;
    left: 0;
    top: 0;
    display: none;
  }
  @media (pointer: fine){
    #borg-cursor{ display: block; }
  }
  #borg-cursor .cube{
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out;
  }
  #borg-cursor .face{
    position: absolute;
    width: 20px;
    height: 20px;
    background: #0d0d0d;
    border: 1px solid var(--accent);
    box-shadow: 0 0 4px var(--accent);
    opacity: 0.9;
  }
  #borg-cursor .front  { transform: rotateY(  0deg) translateZ(10px); }
  #borg-cursor .back   { transform: rotateY(180deg) translateZ(10px); }
  #borg-cursor .right  { transform: rotateY( 90deg) translateZ(10px); }
  #borg-cursor .left   { transform: rotateY(-90deg) translateZ(10px); }
  #borg-cursor .top    { transform: rotateX( 90deg) translateZ(10px); }
  #borg-cursor .bottom { transform: rotateX(-90deg) translateZ(10px); }
  @media (prefers-reduced-motion: reduce){
    #borg-cursor{ display: none !important; }
    body{ cursor: auto; }
  }

  /* ---------- scroll parallax ---------- */
  .blueprint-grid{ will-change: background-position; }
  .hero-diagram{ will-change: transform; }

  /* ---------- Sternenhimmel ---------- */
  #starfield{
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.55;
  }
  @media (prefers-reduced-motion: reduce){
    #starfield{ display: none !important; }
  }

  /* ---------- Sternschnuppe ---------- */
  .shooting-star{
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background: rgba(233,235,239,0.7);
    border-radius: 50%;
    box-shadow: 0 0 2px 0.5px rgba(233,235,239,0.4);
    z-index: 40;
    pointer-events: none;
    opacity: 0;
  }
  .shooting-star::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(151,161,176,0.35) 60%, rgba(233,235,239,0.45));
    transform: translateY(-50%);
    transform-origin: right center;
  }
  .shooting-star.is-active{
    animation: shootingStar 1.4s linear forwards;
  }
  @keyframes shootingStar{
    0%{ opacity: 0; transform: translate(0, 0) rotate(-25deg); }
    6%{ opacity: 0.55; }
    75%{ opacity: 0.55; }
    100%{ opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(-25deg); }
  }
  @media (prefers-reduced-motion: reduce){
    .shooting-star{ display: none !important; }
  }


/* ══════════════════════════════════════════
   HERO DIAGRAM — IRIS-REVEAL
   Clip-path öffnet sich kreisförmig beim Laden
══════════════════════════════════════════ */
.hero-diagram-iris {
  clip-path: circle(0% at 50% 47%);
  animation: heroIrisOpen 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
  will-change: clip-path;
}

@keyframes heroIrisOpen {
  to { clip-path: circle(80% at 50% 47%); }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hero-diagram-iris {
    clip-path: circle(80% at 50% 47%);
    animation: none;
  }
}

/* ══════════════════════════════════════════
   HERO — HINTERGRUNDVIDEO-LOOP (Higgsfield)
   Liegt hinter hero-glow & Inhalt, blendet
   weich ein und läuft in den Seiten-BG aus.
══════════════════════════════════════════ */
.hero-video{
  position: absolute;
  inset: 0;
  z-index: -2;              /* hinter .hero-glow (-1) und allem Inhalt */
  pointer-events: none;
  overflow: hidden;
}
.hero-video video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;               /* per JS: .is-active blendet ein, Ueberblendung am Loop-Ende */
  transition: opacity 1.2s linear;   /* linear = konstante Gesamthelligkeit beim Crossfade */
  filter: brightness(0.82) saturate(0.95);
}
.hero-video.is-ready video.is-active{ opacity: 0.45; }
.hero-video::after{
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 100% at 50% 42%, transparent 0%, rgba(10,13,18,0.4) 58%, rgba(10,13,18,0.85) 100%),
    linear-gradient(to bottom, rgba(10,13,18,0.5) 0%, rgba(10,13,18,0.15) 45%, var(--bg) 98%);
}
/* Auf Mobilgeräten & bei reduzierter Bewegung: kein Video (JS entfernt zusätzlich das Element) */
@media (max-width: 860px), (prefers-reduced-motion: reduce){
  .hero-video{ display: none !important; }
}

/* ══════════════════════════════════════════
   SEKTIONS-UPGRADES — Signal-Motiv des Heros
   zieht sich durch die ganze Seite
══════════════════════════════════════════ */

/* --- 1) Branchen-Strip: Endlos-Ticker --- */
.strip-viewport{
  flex: 1 1 260px;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.strip-ticker{
  display: flex;
  width: max-content;
  animation: stripScroll 38s linear infinite;
}
.strip-ticker .strip-items{
  flex: none;
  flex-wrap: nowrap;
  padding-right: clamp(1.5rem, 4vw, 2.5rem); /* Abstand zwischen den Gruppen = Item-Gap */
}
/* Im Ticker bekommt auch das erste Item seinen Trennpunkt (nahtloser Uebergang) */
.strip-ticker .strip-items span:first-child{ padding-left: clamp(1.5rem, 4vw, 2.5rem); }
.strip-ticker .strip-items span:first-child::before{ display: block; }
@keyframes stripScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.strip:hover .strip-ticker{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){
  .strip-ticker{ animation: none !important; width: auto; flex-wrap: wrap; }
  .strip-ticker .strip-items{ flex-wrap: wrap; }
  .strip-ticker .strip-items[aria-hidden]{ display: none; }
  .strip-viewport{ -webkit-mask-image: none; mask-image: none; }
  .strip-ticker .strip-items span:first-child{ padding-left: 0; }
  .strip-ticker .strip-items span:first-child::before{ display: none; }
}

/* --- 2) Vorgehen: roter Faden mit Signalpuls --- */
.process-list{ position: relative; }
.process-track{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  pointer-events: none;
  z-index: 1;
}
.process-track::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-deep) 70%, transparent);
  opacity: 0.45;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.8s var(--ease) 0.25s;
}
.process-list.is-visible .process-track::before{ transform: scaleX(1); }
.process-signal{
  position: absolute;
  top: 50%;
  left: 0;
  width: 46px;
  height: 2px;
  transform: translate(-100%, -50%);
  background: linear-gradient(90deg, transparent, var(--accent-strong));
  border-radius: 2px;
  box-shadow: 0 0 10px var(--accent-dim);
  opacity: 0;
}
.process-list.is-visible .process-signal{
  animation: processSignal 5.5s linear infinite 2.2s;
}
@keyframes processSignal{
  0%{ left: 0; opacity: 0; }
  6%{ opacity: 0.9; }
  94%{ opacity: 0.9; }
  100%{ left: 100%; opacity: 0; }
}
@media (max-width: 900px){ .process-track{ display: none; } } /* nur bei 4-Spalten-Layout sinnvoll */
@media (prefers-reduced-motion: reduce){
  .process-track::before{ transform: scaleX(1); }
  .process-signal{ display: none; }
}

/* --- 3) CTA-Panel: umlaufendes Lichtsignal am Rahmen --- */
@property --cta-angle{
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.cta-beam{
  position: absolute;
  inset: -1px;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(from var(--cta-angle),
    transparent 0deg,
    transparent 318deg,
    var(--accent-deep) 334deg,
    var(--accent) 350deg,
    var(--accent-strong) 356deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: ctaBeam 9s linear infinite;
}
@keyframes ctaBeam{ to{ --cta-angle: 360deg; } }
@media (prefers-reduced-motion: reduce){ .cta-beam{ display: none; } }

/* --- 4) Leistungen-Karten: Spotlight folgt dem Cursor --- */
.card{ position: relative; overflow: hidden; }
.card::after{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(217,138,70,0.09), transparent 65%);
}
@media (pointer: fine){
  .card:hover::after{ opacity: 1; }
}

/* --- 5) Branchen-Grid: gestaffeltes Einblenden --- */
.reveal-stagger > *{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal-stagger.is-visible > *{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal-stagger > *{ opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════
   VIDEO AKTIV — Aufhellung aus, Rhombus
   verschmilzt mit dem Video
══════════════════════════════════════════ */
.hero-glow{ transition: opacity 1.2s var(--ease); }
.hero.has-video .hero-glow{ opacity: 0; }   /* Aufhellung weg, sobald das Video laeuft */

/* Rhombus/Diagramm passt sich dem Video an:
   Screen-Blend laesst dunkle Anteile verschwinden — Linien, Knoten
   und Wuerfel wirken wie Lichtpunkte IM Video statt davor. */
.hero.has-video .hero-diagram{
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 14px rgba(217,138,70,0.18));
  opacity: 0.5;   /* deutlich blasser — wirkt wie Teil des Videos */
}
/* Ohne Video (Mobil / reduzierte Bewegung / Datei fehlt) bleibt alles wie im Original. */

/* ══════════════════════════════════════════
   LOGIN — offizielles Modal (Kundenbereich)
══════════════════════════════════════════ */
.nav-login{ color: var(--accent); }
.login-modal{
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
}
.login-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(6,7,10,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.28s var(--ease);
}
.login-panel{
  position: relative;
  overflow: hidden;
  width: min(420px, 100%);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  padding: 2rem 1.8rem 1.6rem;
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}

/* Hintergrundvideo-Loop im Panel: gleicher Aufbau/Timing wie .hero-video,
   startet erst beim Oeffnen des Modals (siehe main.js). */
.login-video{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.login-video video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s linear;
  filter: brightness(0.82) saturate(0.95);
}
.login-video.is-ready video.is-active{ opacity: 0.45; }
.login-video::after{
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 100% at 50% 30%, transparent 0%, rgba(16,20,27,0.55) 60%, rgba(16,20,27,0.92) 100%),
    linear-gradient(to bottom, rgba(16,20,27,0.35) 0%, rgba(16,20,27,0.2) 40%, var(--bg-raised) 100%);
}
@media (max-width: 860px), (prefers-reduced-motion: reduce){
  .login-video{ display: none !important; }
}
/* Inhalt bleibt oberhalb des Videos lesbar */
.login-eyebrow, .login-panel h3, .login-sub, .login-form{ position: relative; z-index: 1; }
.login-modal.open .login-backdrop{ opacity: 1; }
.login-modal.open .login-panel{ opacity: 1; transform: none; }
.login-close{
  position: absolute;
  top: 0.7rem; right: 0.7rem;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-faint);
  cursor: pointer;
  z-index: 2;
}
.login-close:hover{ color: var(--text); border-color: var(--border); }
.login-close svg{ width: 1rem; height: 1rem; }
.login-eyebrow{ font-size: 0.68rem; letter-spacing: 0.16em; color: var(--accent); }
.login-panel h3{
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  margin: 0.35rem 0 0.4rem;
  color: var(--text);
}
.login-sub{ color: var(--text-muted); font-size: 0.88rem; line-height: 1.55; margin: 0 0 1.3rem; }
.login-form{ display: grid; gap: 0.9rem; }
.login-form label{ display: grid; gap: 0.35rem; }
.login-form label .mono{ font-size: 0.62rem; letter-spacing: 0.14em; color: var(--text-faint); }
.login-form input{
  background: var(--bg-inset);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.65rem 0.8rem;
  font: inherit;
  font-size: 0.92rem;
  outline: none;
  border-radius: 0;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.login-form input:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.login-submit{ margin-top: 0.3rem; }
.login-hint{ font-size: 0.6rem; letter-spacing: 0.14em; color: var(--text-faint); text-align: center; margin-top: 0.2rem; }

/* ══════════════════════════════════════════
   CRT-TERMINAL — versteckter Zugang
   ("ehrler" tippen / 5× Tipp aufs Footer-Logo)
══════════════════════════════════════════ */
.crt{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 230;
  transform: translateY(103%);
  transition: transform 0.5s var(--ease);
}
.crt.open{ transform: translateY(0); }
.crt-screen{
  position: relative;
  overflow: hidden;
  height: min(46vh, 420px);
  background: #050608;
  border-top: 1px solid var(--accent-deep);
  box-shadow: 0 -18px 60px rgba(0,0,0,0.55), inset 0 0 90px rgba(217,138,70,0.05);
}
.crt-screen::after{  /* Scanlines + leichtes Flackern */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.028) 0 1px, transparent 1px 3px);
  animation: crtFlicker 4.8s linear infinite;
}
@keyframes crtFlicker{
  0%, 100%{ opacity: 0.9; }
  50%{ opacity: 0.72; }
  63%{ opacity: 0.95; }
}
.crt-head{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.9rem;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  border-bottom: 1px solid rgba(217,138,74,0.18);
}
.crt-body{
  padding: 0.9rem 0.9rem 1.1rem;
  height: calc(100% - 2rem);
  overflow-y: auto;
}
.crt-out{
  white-space: pre-wrap;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--accent-strong);
  text-shadow: 0 0 8px rgba(242,172,114,0.35);
}
.crt-line{ display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.crt-prompt{
  font-size: 0.82rem;
  color: var(--accent);
  text-shadow: 0 0 8px rgba(217,138,70,0.3);
}
.crt-line input{
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--accent-strong);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  caret-color: var(--accent-strong);
  text-shadow: 0 0 8px rgba(242,172,114,0.35);
}
@media (prefers-reduced-motion: reduce){
  .crt{ transition: none; }
  .crt-screen::after{ animation: none; }
  .login-backdrop, .login-panel{ transition: none; }
}

/* ══════════════════════════════════════════
   ISOMETRISCHER WÜRFEL — Logo (3D aus Ebenen)
   In Navigation, Über-mich-Sektion, etc.
══════════════════════════════════════════ */
.brand-logo{
  flex: none;
  width: auto;
  height: auto;
}
.cube-isometric{
  position: relative;
  width: 52px;
  height: 58px;
  flex-shrink: 0;
}
/* Top-Face (hellstes Orange, oben vorne sichtbar) */
.cube-top{
  position: absolute;
  inset: 0;
  background: var(--accent-strong);
  clip-path: polygon(50% 0%, 100% 25%, 50% 50%, 0% 25%);
}
/* Left-Face (dunkelste, vertikale Fläche links) */
.cube-left{
  position: absolute;
  inset: 0;
  background: var(--accent-deep);
  clip-path: polygon(0% 25%, 50% 50%, 50% 100%, 0% 75%);
}
/* Right-Face (Accent-Mittel, vertikale Fläche rechts) */
.cube-right{
  position: absolute;
  inset: 0;
  background: var(--accent);
  clip-path: polygon(50% 50%, 100% 25%, 100% 75%, 50% 100%);
}
.brand{
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
  color: inherit;
  outline: none;
}
.brand-text{
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

/* Logo im About-Bereich */
.about-cube{
  padding: 3.2rem 2.8rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.8rem;
}
.about-cube .cube-isometric{
  width: 80px;
  height: 90px;
}
.about-cube .cube-top{
  background: var(--accent-strong);
}
.about-cube .cube-left{
  background: var(--accent-deep);
}
.about-cube .cube-right{
  background: var(--accent);
}

@media (max-width: 640px){
  .brand{ gap: 0.6rem; }
  .brand-text{ gap: 0.02rem; }
  .cube-isometric{ width: 38px; height: 42px; }
  .about-cube{ padding: 2rem; }
  .about-cube .cube-isometric{ width: 60px; height: 68px; }
}

/* ══════════════════════════════════════════
   SUPPORT & DOWNLOADS (RustDesk-Fernwartung)
══════════════════════════════════════════ */
.support-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.support-card{
  position: relative;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  padding: 1.8rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.support-step{
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.support-card h3{
  font-size: 1.35rem;
}
.support-card p{
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  flex: 1;
}
.support-btn{
  margin-top: 0.4rem;
  justify-content: center;
}
.support-alt{
  font-size: 0.82rem;
  color: var(--accent);
  margin-top: 0.5rem;
}
.support-alt:hover{ color: var(--accent-strong); }
@media (max-width: 900px){
  .support-grid{ grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════
   FOOTER — Social Media (Instagram / X)
══════════════════════════════════════════ */
.footer-social{
  display: flex;
  gap: 0.7rem;
  margin-top: 1.2rem;
}
.footer-social a{
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.footer-social a:hover{
  color: var(--accent-strong);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.footer-social svg{ width: 18px; height: 18px; }

  /* ---------- Rechtsseiten (Impressum / Datenschutz) ---------- */
  .page-header{
    padding: clamp(7.5rem, 15vw, 9.5rem) 0 clamp(2rem, 4vw, 3rem);
    border-bottom: 1px solid var(--border);
  }
  .page-header h1{
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    margin: 0.9rem 0 0;
  }

  .legal{ padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(4.5rem, 9vw, 7rem); }
  .legal-body{ max-width: 760px; }

  .legal-block{ margin-bottom: clamp(2.2rem, 5vw, 3rem); }
  .legal-block:last-child{ margin-bottom: 0; }
  .legal-block h2{
    font-size: clamp(1.35rem, 2.4vw, 1.7rem);
    margin: 0 0 0.9rem;
  }
  .legal-block p{
    margin: 0 0 0.9rem;
    color: var(--text-muted);
    line-height: 1.7;
  }
  .legal-block p strong{ color: var(--text); }
  .legal-block ul{
    margin: 0 0 0.9rem;
    padding-left: 1.2rem;
    color: var(--text-muted);
    line-height: 1.7;
  }
  .legal-block li{ margin-bottom: 0.35rem; }
  .legal-block a{ color: var(--accent); text-decoration: none; }
  .legal-block a:hover{ color: var(--accent-strong); text-decoration: underline; }

  .legal-note{
    font-size: 0.9rem;
    color: var(--text-faint);
    border-left: 2px solid var(--accent-deep);
    padding-left: 0.9rem;
  }