* { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    margin: 0; background: var(--bg); color: var(--text);
    font-family:"Segoe UI",Arial,sans-serif;
    font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

  .wrap { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
  h1, h2, h3 { font-family:"Segoe UI",Arial,sans-serif; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; margin: 0; }
  h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.18; }
  h3 { font-size: 1.1rem; font-weight: 600; }
  p { margin: 0; }
  .eyebrow { font-family:Consolas,"Courier New",monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); margin-bottom: 14px; }
  .lede { color: var(--text-2); max-width: 58ch; font-size: 1.1rem; }

  header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft); }
  .nav { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 24px; }
  .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family:"Segoe UI",Arial,sans-serif; font-weight: 600; font-size: 1.15rem; }
  .brand svg { width: 32px; height: 32px; }
  .nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
  .nav ul a { text-decoration: none; font-size: 0.95rem; color: var(--text-2); }
  .nav ul a:hover { color: var(--text); }
  @media (max-width: 940px) { .nav ul { display: none; } }

  .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 6px; text-decoration: none; font-weight: 500; font-size: 1rem; border: 1px solid var(--line); color: var(--text); background: var(--surface); transition: transform 0.15s ease, border-color 0.15s ease; }
  .btn.primary { background: var(--blue); color: var(--blue-ink); border-color: transparent; }
  .btn:hover { border-color: var(--blue); transform: translateY(-1px); }

  /* Hero */
  .hero { padding: 84px 0 76px; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
  .hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.08; }
  .hero h1 em { font-style: normal; color: var(--teal); }
  .hero .lede { margin-top: 22px; }
  .hero .cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
  .stage { perspective: 1800px; }
  .paper { border-radius: 8px; overflow: hidden; border: 1px solid var(--frame); box-shadow: var(--shadow); transform: rotateY(-8deg) rotateX(2.5deg); transform-origin: 45% 50%; transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); background: var(--frame); }
  .stage:hover .paper { transform: rotateY(0) rotateX(0); }
  .paperbody { position: relative; aspect-ratio: 1200 / 709; }
  .paper img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--text-3); font-size: 0.9rem; }
  @keyframes floaty { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }
  .stage .paper { animation: floaty 8s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) { .stage .paper { animation: none; transform: none; } }
  .caption { margin-top: 16px; color: var(--text-3); font-size: 0.88rem; text-align: right; }
  @media (max-width: 940px) { .hero { grid-template-columns: 1fr; gap: 44px; padding: 56px 0 48px; } .paper { transform: none; } .caption { text-align: left; } }

  section { padding: 76px 0; }
  section.tint { background: var(--bg-2); }
  .sec-head { margin-bottom: 44px; max-width: 60ch; }
  .sec-head p { margin-top: 14px; }

  /* Heute / künftig */
  .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
  .col { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 30px; }
  .col.now { background: transparent; border-style: dashed; }
  .col h3 { margin-bottom: 6px; }
  .col .tag { font-family:Consolas,"Courier New",monospace; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
  .col.next .tag { color: var(--teal); }
  .col ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 14px; color: var(--text-2); font-size: 1rem; }
  .col ul li { padding-left: 26px; position: relative; }
  .col.now li::before { content: "×"; position: absolute; left: 4px; top: -1px; color: var(--rose); font-size: 1.1rem; }
  .col.next li::before { content: "✓"; position: absolute; left: 2px; top: 0; color: var(--teal); font-size: 0.95rem; }
  @media (max-width: 800px) { .compare { grid-template-columns: 1fr; } }

  /* Berichte */
  .reports { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .rcard { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 28px; box-shadow: var(--shadow-s); }
  .rcard h3 { margin-bottom: 14px; }
  .rcard dl { display: grid; grid-template-columns: 88px 1fr; gap: 8px 14px; margin: 0; font-size: 0.95rem; }
  .rcard dt { color: var(--text-3); }
  .rcard dd { margin: 0; color: var(--text-2); }
  @media (max-width: 800px) { .reports { grid-template-columns: 1fr; } }

  /* Live-Bericht */
  .report { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; }
  .report-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
  .rtitle { font-family:"Segoe UI",Arial,sans-serif; font-weight: 600; font-size: 1.15rem; }
  .rsub { color: var(--text-3); font-size: 0.88rem; margin-top: 2px; }
  .rbadge { background: var(--teal-soft); color: var(--teal); border-radius: 999px; padding: 6px 14px; font-size: 0.82rem; font-weight: 500; }
  .tablewrap { overflow-x: auto; }
  table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
  thead th { background: var(--blue); color: var(--blue-ink); text-align: left; font-weight: 500; padding: 12px 14px; white-space: nowrap; }
  thead th.num { text-align: right; }
  tr.filters th { background: var(--surface-2); padding: 8px 10px; border-bottom: 1px solid var(--line); }
  tr.filters input, tr.filters select {
    width: 100%; min-width: 92px; font: inherit; font-size: 0.85rem; color: var(--text);
    background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px;
  }
  tr.filters input::placeholder { color: var(--text-3); }
  tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); color: var(--text-2); white-space: nowrap; }
  tbody td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
  tbody td.name { color: var(--text); }
  tbody tr:nth-child(even) td { background: var(--surface-2); }
  .pill { display: inline-block; border-radius: 999px; padding: 3px 11px; font-size: 0.8rem; }
  .pill.verh { background: var(--teal-soft); color: var(--teal); }
  .pill.vers { background: var(--blue-soft); color: var(--blue); }
  .pill.nach { background: var(--sand-soft); color: var(--sand); }
  .report-foot { display: flex; justify-content: space-between; gap: 16px; padding: 16px 26px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: 0.92rem; flex-wrap: wrap; }
  .report-foot strong { font-variant-numeric: tabular-nums; }
  .hint { margin-top: 18px; color: var(--text-3); font-size: 0.9rem; }
  .empty { padding: 26px; text-align: center; color: var(--text-3); font-size: 0.92rem; }

  /* KI */
  .ai { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
  .mail { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; }
  .mail-head { padding: 18px 24px; border-bottom: 1px solid var(--line-soft); font-size: 0.88rem; color: var(--text-3); display: grid; gap: 3px; }
  .mail-head b { color: var(--text); font-weight: 500; font-size: 0.98rem; }
  .mail-body { padding: 24px; }
  .mail-body h4 { font-family:"Segoe UI",Arial,sans-serif; font-size: 1rem; font-weight: 600; margin: 0 0 12px; }
  .mail-body ul { margin: 0; padding-left: 20px; display: grid; gap: 9px; color: var(--text-2); font-size: 0.95rem; }
  .attach { display: flex; align-items: center; gap: 11px; margin-top: 20px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); font-size: 0.9rem; }
  .attach .ext { font-family:Consolas,"Courier New",monospace; font-size: 0.68rem; letter-spacing: 0.08em; background: var(--teal-soft); color: var(--teal); padding: 4px 8px; border-radius: 4px; }
  .attach .size { margin-left: auto; color: var(--text-3); font-size: 0.82rem; white-space: nowrap; }
  .mail-note { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line); color: var(--text-3); font-size: 0.85rem; }
  @media (max-width: 900px) { .ai { grid-template-columns: 1fr; gap: 36px; } }

  /* Rollen */
  .roles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
  .role { background: var(--surface); padding: 28px 24px; }
  .role .who { font-family:Consolas,"Courier New",monospace; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); margin-bottom: 10px; }
  .role h3 { font-size: 1.05rem; margin-bottom: 12px; }
  .role ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; color: var(--text-2); font-size: 0.93rem; line-height: 1.55; }
  .role ul li { padding-left: 16px; position: relative; }
  .role ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 1px; background: var(--teal); }
  @media (max-width: 1000px) { .roles { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .roles { grid-template-columns: 1fr; } }

  /* Ohne */
  .nots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 44px; }
  .not { border-top: 2px solid var(--teal); padding-top: 16px; }
  .not p { color: var(--text-2); font-size: 0.98rem; margin-top: 8px; }
  @media (max-width: 800px) { .nots { grid-template-columns: 1fr; } }

  /* Persönliche Notiz */
  .note-sec { max-width: 68ch; }
  .note-sec p { color: var(--text-2); font-size: 1.08rem; }
  .note-sec p + p { margin-top: 20px; }
  .note-sec p.first { color: var(--text); font-size: 1.22rem; line-height: 1.5; }
  .sign { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--text-3); }
  .sign b { display: block; color: var(--text); font-weight: 500; font-family:"Segoe UI",Arial,sans-serif; font-size: 1rem; }

  /* Abschluss */
  .final { text-align: center; padding: 84px 0; border-top: 1px solid var(--line); }
  .final h2 { max-width: 22ch; margin: 0 auto; }
  .final .lede { margin: 18px auto 0; text-align: center; }
  .final .cta { display: flex; gap: 14px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }

  /* Impressum */

  footer { border-top: 1px solid var(--line); padding: 30px 0 46px; color: var(--text-3); font-size: 0.88rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
  footer a { color: var(--text-2); }