.startseite .wrap { max-width: 1104px; margin: 0 auto; }
.startseite .mitte { display: flex; flex-direction: column; align-items: center; text-align: center; }
.startseite .grau { color: rgb(var(--slate)); }
.startseite .fett { font-weight: 600; }
.startseite .text-lg { font-size: 18px; line-height: 28px; margin: 0; }
.startseite .text-sm { font-size: 14px; line-height: 20px; margin: 0; }
.startseite .text-xs { font-size: 12px; line-height: 16px; margin: 0; }
.startseite .mono, .startseite .eyebrow { font-family: 'Geist Mono', monospace; font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--slate)); margin: 0; }
.startseite .schmal { max-width: 680px; }
.startseite .verlauf { background: linear-gradient(90deg, rgb(var(--ink)), rgb(var(--ink) / .55)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.startseite .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 8px; font-family: inherit; font-size: 16px; line-height: 24px; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform 500ms cubic-bezier(0.32,0.72,0,1), background-color 500ms cubic-bezier(0.32,0.72,0,1), border-color 500ms cubic-bezier(0.32,0.72,0,1); }
.startseite .btn:hover { transform: translateY(-2px); }
.startseite .btn:active { transform: scale(0.98); }
.startseite .btn-dark { background: rgb(var(--ink)); color: rgb(var(--white)); }
.startseite .btn-line { background: rgb(var(--white)); color: rgb(var(--ink)); border-color: rgb(var(--rose)); }
.startseite .btn-line:hover { border-color: rgb(var(--ink)); }
.startseite .btn-hell { background: #FFFFFF; color: #111111; margin-top: 32px; }
.startseite .btn-sm { padding: 8px 16px; font-size: 14px; line-height: 20px; margin-left: 8px; }
.startseite .punkt { width: 8px; height: 8px; border-radius: 8px; background: #22C55E; }
.startseite .hero { padding: 96px 24px 64px; }
.startseite .pille { margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 8px; border: 1px solid rgb(var(--mist)); background: rgb(var(--white)); font-size: 14px; line-height: 20px; font-weight: 500; color: rgb(var(--ink) / .78); }
.startseite .h1 { margin: 24px 0 0; max-width: 1100px; text-wrap: wrap; font-size: 72px; line-height: 1; font-weight: 600; letter-spacing: -0.035em; }
.startseite .lead { margin: 24px 0 0; max-width: 680px; font-size: 20px; line-height: 28px; color: rgb(var(--slate)); }
.startseite .knoepfe { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.startseite .zaehler { margin-top: 48px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.startseite .z { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 160px; padding: 16px 24px; border-radius: 8px; background: rgb(var(--white)); border: 1px solid rgb(var(--mist)); }
.startseite .zv { font-size: 36px; line-height: 40px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.startseite .zt { font-size: 14px; line-height: 20px; color: rgb(var(--slate)); }
.startseite .hero-bild { margin-top: 64px; position: relative; padding-right: 64px; padding-bottom: 48px; }
.startseite .browser { border-radius: 8px; background: rgb(var(--white)); border: 1px solid rgb(var(--mist)); padding: 8px; box-shadow: 0 48px 96px -48px rgb(17 17 17 / .25); }
.startseite .browser-leiste { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.startseite .browser-leiste span { width: 12px; height: 12px; border-radius: 8px; background: rgb(var(--mist)); }
.startseite .browser-leiste em { margin-left: 12px; padding: 4px 12px; border-radius: 8px; background: rgb(var(--paper)); font-style: normal; font-family: 'Geist Mono', monospace; font-size: 12px; line-height: 16px; color: rgb(var(--slate)); }
.startseite .browser img { display: block; width: 100%; height: auto; border-radius: 8px; }
.startseite .handy { position: absolute; right: 0; bottom: 0; width: 22%; max-width: 240px; border-radius: 8px; background: #111111; padding: 8px; box-shadow: 0 32px 64px -32px rgba(17,17,17,0.5); }
.startseite .handy img { display: block; width: 100%; height: auto; border-radius: 8px; }
.startseite .surf-screen { position: relative; overflow: hidden; border-radius: 8px; aspect-ratio: 1200 / 750; container-type: inline-size; background: #ffffff; }
.startseite .surf-screen.h { aspect-ratio: 300 / 630; }
.startseite .surf-screen img { display: block; width: 100%; height: auto; border-radius: 0; will-change: transform; }
.startseite .surf-seite { animation: surf-desk 20s cubic-bezier(0.65,0,0.35,1) infinite; }
.startseite .surf-seite.h { animation: surf-handy 20s cubic-bezier(0.65,0,0.35,1) infinite; }
.startseite .surf-maus { position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -3px 0 0 -4px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35)); animation: surf-maus 20s cubic-bezier(0.45,0,0.25,1) infinite; }
.startseite .surf-klick { position: absolute; left: 0; top: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 2px solid rgba(17,17,17,0.55); background: rgba(255,255,255,0.35); opacity: 0; }
.startseite .surf-klick.k1 { translate: 28cqw 43cqw; animation: surf-k1 20s linear infinite; }
.startseite .surf-klick.k2 { translate: 83cqw 6cqw; animation: surf-k2 20s linear infinite; }
.startseite .surf-finger { position: absolute; left: 50%; top: 0; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; background: rgba(17,17,17,0.28); border: 2px solid rgba(255,255,255,0.8); opacity: 0; animation: surf-finger 20s ease-in-out infinite; }
@keyframes surf-desk {
  0%, 13% { transform: translateY(0); }
  21%, 35% { transform: translateY(-23%); }
  43%, 57% { transform: translateY(-40%); }
  65%, 79% { transform: translateY(-63%); }
  88%, 100% { transform: translateY(0); }
}
@keyframes surf-maus {
  0% { transform: translate(92cqw, 59cqw); }
  8% { transform: translate(28cqw, 43cqw); }
  10% { transform: translate(28cqw, 43cqw) scale(0.85); }
  11%, 13% { transform: translate(28cqw, 43cqw); }
  21% { transform: translate(40cqw, 38cqw); }
  27%, 35% { transform: translate(18cqw, 33cqw); }
  43% { transform: translate(60cqw, 26cqw); }
  50%, 57% { transform: translate(78cqw, 26cqw); }
  65% { transform: translate(46cqw, 26cqw); }
  72%, 79% { transform: translate(78cqw, 26cqw); }
  88% { transform: translate(83cqw, 6cqw); }
  91% { transform: translate(83cqw, 6cqw) scale(0.85); }
  92%, 95% { transform: translate(83cqw, 6cqw); }
  100% { transform: translate(92cqw, 59cqw); }
}
@keyframes surf-k1 { 0%, 9.5% { opacity: 0; scale: 0.4; } 10% { opacity: 1; scale: 0.6; } 13%, 100% { opacity: 0; scale: 1.4; } }
@keyframes surf-k2 { 0%, 90.5% { opacity: 0; scale: 0.4; } 91% { opacity: 1; scale: 0.6; } 94%, 100% { opacity: 0; scale: 1.4; } }
@keyframes surf-handy {
  0%, 22% { transform: translateY(0); }
  30%, 44% { transform: translateY(-22%); }
  52%, 66% { transform: translateY(-44%); }
  74%, 86% { transform: translateY(-62%); }
  94%, 100% { transform: translateY(0); }
}
@keyframes surf-finger {
  0%, 21% { opacity: 0; transform: translateY(150cqw); }
  22% { opacity: 1; transform: translateY(150cqw); }
  29% { opacity: 1; transform: translateY(70cqw); }
  30%, 43% { opacity: 0; transform: translateY(70cqw); }
  44% { opacity: 0; transform: translateY(150cqw); }
  45% { opacity: 1; transform: translateY(150cqw); }
  51% { opacity: 1; transform: translateY(70cqw); }
  52%, 65% { opacity: 0; transform: translateY(70cqw); }
  66% { opacity: 0; transform: translateY(150cqw); }
  67% { opacity: 1; transform: translateY(150cqw); }
  73% { opacity: 1; transform: translateY(70cqw); }
  74%, 100% { opacity: 0; transform: translateY(70cqw); }
}
.startseite .hero-bild:hover .surf-seite, .startseite .hero-bild:hover .surf-maus, .startseite .hero-bild:hover .surf-klick, .startseite .hero-bild:hover .surf-finger { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .surf-seite, .surf-maus, .surf-klick, .surf-finger { animation: none !important; } .surf-maus, .surf-finger, .surf-klick { display: none; } }
.startseite .kunden { padding: 48px 24px; border-top: 1px solid rgb(var(--mist)); border-bottom: 1px solid rgb(var(--mist)); background: rgb(var(--white)); }
.startseite .kunden-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 40px; }
.startseite .kunden-zeile p { margin: 0; font-size: 14px; line-height: 20px; color: rgb(var(--slate)); }
.startseite .kunden-zeile span { font-size: 18px; line-height: 28px; font-weight: 600; color: rgb(var(--ink) / .78); }
.startseite .tagline { padding: 128px 24px; }
.startseite .tag-text { margin: 0 auto; max-width: 900px; font-size: 60px; line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; text-align: center; }
.startseite .abschnitt { padding: 96px 24px; }
.startseite .abschnitt.gross { padding: 128px 24px; }
.startseite .weiss { background: rgb(var(--white)); }
.startseite .rand { border-top: 1px solid rgb(var(--mist)); border-bottom: 1px solid rgb(var(--mist)); }
.startseite .rand-oben { border-top: 1px solid rgb(var(--mist)); }
.startseite .h2 { margin: 16px 0 0; font-size: 48px; line-height: 1; font-weight: 600; letter-spacing: -0.03em; }
.startseite .h2.klein { font-size: 36px; line-height: 40px; letter-spacing: -0.02em; }
.startseite .h2.gross { margin: 0; max-width: 900px; font-size: 60px; letter-spacing: -0.035em; }
.startseite .h3 { margin: 0; max-width: 680px; font-size: 36px; line-height: 40px; font-weight: 600; letter-spacing: -0.02em; }
.startseite .kopfzeile { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.startseite .neben { margin: 0; max-width: 400px; font-size: 18px; line-height: 28px; color: rgb(var(--slate)); }
.startseite .raster { margin-top: 48px; display: grid; gap: 16px; }
.startseite .r220 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; margin-top: 0; }
.startseite .r260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.startseite .r280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; }
.startseite .r300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.startseite .r340 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 24px; }
.startseite .karte { border-radius: 8px; background: rgb(var(--white)); border: 1px solid rgb(var(--mist)); text-decoration: none; color: rgb(var(--ink)); transition: transform 700ms cubic-bezier(0.32,0.72,0,1), box-shadow 700ms cubic-bezier(0.32,0.72,0,1); }
.startseite a.karte:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgb(17 17 17 / .25); }
.startseite .branche { display: flex; flex-direction: column; gap: 24px; padding: 32px; min-height: 360px; }
.startseite .nr { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 8px; background: rgb(var(--ink)); color: rgb(var(--white)); font-family: 'Geist Mono', monospace; font-size: 14px; }
.startseite .b-text { display: flex; flex-direction: column; gap: 12px; }
.startseite .b-titel { font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; }
.startseite .tags { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.startseite .tags span { padding: 4px 12px; border-radius: 8px; background: rgb(var(--paper)); font-size: 14px; line-height: 20px; color: rgb(var(--ink) / .78); }
.startseite .mehr { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.startseite .projekt { display: flex; flex-direction: column; gap: 16px; padding: 8px 8px 24px; }
.startseite #projekte .projekt { background: rgb(var(--paper)); }
.startseite .bildbox { display: block; overflow: hidden; border-radius: 8px; aspect-ratio: 16 / 10; background: rgb(var(--mist)); }
.startseite .bildbox.breit { aspect-ratio: 16 / 9; background: #12161B; }
.startseite .bildbox img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 900ms cubic-bezier(0.32,0.72,0,1); }
.startseite a.karte:hover .bildbox img { transform: scale(1.03); }
.startseite .p-unten { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 0 16px; }
.startseite .p-text { display: flex; flex-direction: column; gap: 4px; }
.startseite .p-titel { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; }
.startseite .a-titel { font-size: 20px; line-height: 28px; font-weight: 600; margin-top: 4px; }
.startseite .rund { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; border: 1px solid rgb(var(--rose)); }
.startseite .vorteil { display: flex; flex-direction: column; gap: 16px; padding: 32px; }
.startseite .vorteil h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.startseite .vorteil p { margin: 0; }
.startseite .v-ic { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 8px; background: rgb(var(--paper)); }
.startseite .kachelwand { margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: rgb(var(--mist)); border: 1px solid rgb(var(--mist)); border-radius: 8px; overflow: hidden; }
.startseite .kachel { display: flex; flex-direction: column; gap: 12px; padding: 32px; min-height: 220px; background: rgb(var(--white)); text-decoration: none; color: rgb(var(--ink)); transition: background-color 500ms cubic-bezier(0.32,0.72,0,1); }
.startseite .kachel:hover { background: rgb(var(--paper)); }
.startseite .k-oben { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.startseite .k-badge { font-size: 12px; line-height: 16px; color: rgb(var(--slate)); }
.startseite .k-titel { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; }
.startseite .k-mehr { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 600; }
.startseite .portal { border-radius: 8px; background: #111111; color: #FFFFFF; padding: 64px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; align-items: center; border: 1px solid #313131; }
.startseite .portal .eyebrow { color: #A1A1AA; } .portal .h2 { color: #FFFFFF; }
.startseite .p-lead { margin: 24px 0 0; font-size: 18px; line-height: 28px; color: #D4D4D8; }
.startseite .portal-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.startseite .portal-kachel { padding: 24px; border-radius: 8px; background: #1F1F1F; border: 1px solid #313131; }
.startseite .pk-zahl { margin: 0; font-family: 'Geist Mono', monospace; font-size: 30px; line-height: 36px; font-weight: 500; }
.startseite .pk-text { margin: 8px 0 0; font-size: 14px; line-height: 20px; color: #A1A1AA; }
.startseite .ueber { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; align-items: center; }
.startseite .ueber-bild { position: relative; }
.startseite .ueber-bild img { display: block; width: 100%; max-width: 520px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; }
.startseite .namensschild { position: absolute; left: 16px; bottom: 16px; margin: 0; padding: 12px 16px; border-radius: 8px; background: rgb(var(--white) / .72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-size: 14px; line-height: 20px; }
.startseite .namensschild strong { font-weight: 600; } .namensschild span { color: rgb(var(--slate)); }
.startseite .schritte { margin: 48px 0 0; padding: 0; list-style: none; }
.startseite .schritte li { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 2px solid rgb(var(--ink)); }
.startseite .schritte h3 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; }
.startseite .schritte p { margin: 0; }
.startseite .zahl { display: flex; flex-direction: column; gap: 8px; }
.startseite .zahl p { margin: 0; }
.startseite .zahl-gross { font-size: 72px; line-height: 1; font-weight: 600; letter-spacing: -0.04em; }
.startseite .zahl-titel { font-weight: 600; }
.startseite .cc { border-radius: 8px; background: rgb(var(--white)); border: 1px solid rgb(var(--mist)); padding: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; align-items: center; }
.startseite .cc-form { display: flex; flex-direction: column; gap: 12px; }
.startseite .cc-form label { font-size: 14px; line-height: 20px; font-weight: 600; }
.startseite .cc-zeile { display: flex; flex-wrap: wrap; gap: 8px; }
.startseite .cc-zeile input, .startseite .login input, .startseite .suche input { font-family: inherit; font-size: 16px; line-height: 24px; color: rgb(var(--ink)); }
.startseite .cc-zeile input { flex: 1 1 220px; min-width: 0; padding: 12px 16px; border-radius: 8px; border: 1px solid rgb(var(--rose)); background: rgb(var(--paper)); }
.startseite .faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; }
.startseite .faq-liste { display: flex; flex-direction: column; gap: 8px; }
.startseite details { border-radius: 8px; background: rgb(var(--paper)); border: 1px solid rgb(var(--mist)); padding: 0 24px; }
.startseite summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0; font-size: 18px; line-height: 28px; font-weight: 600; }
.startseite summary::-webkit-details-marker { display: none; }
.startseite .plus { flex: none; transition: transform 500ms cubic-bezier(0.32,0.72,0,1); }
.startseite details[open] .plus { transform: rotate(45deg); }
.startseite details p { margin: 0; padding: 0 0 24px; color: rgb(var(--slate)); }
@media (prefers-reduced-motion: reduce) { .ms-rv, .ms-word, .dd-panel, .dialog, .mobil-menu > * { animation: none !important; opacity: 1; transform: none; } html { scroll-behavior: auto; } }
@media (max-width: 720px) {
  .startseite .hero { padding-top: 64px; }
  .startseite .h1 { font-size: 48px; }
  .startseite .h1 br, .startseite .h2 br, .startseite .h2.gross br { display: none; }
  .startseite .lead { font-size: 18px; }
  .startseite .z { min-width: 0; flex: 1 1 100px; padding: 12px 8px; }
  .startseite .zv { font-size: 30px; line-height: 36px; }
  .startseite .hero-bild { padding-right: 32px; padding-bottom: 32px; }
  .startseite .tagline { padding: 96px 24px; }
  .startseite .tag-text { font-size: 36px; line-height: 40px; }
  .startseite .abschnitt { padding: 64px 24px; }
  .startseite .h2 { font-size: 36px; line-height: 40px; }
  .startseite .h2.gross { font-size: 48px; line-height: 1; }
  .startseite .portal, .startseite .cc { padding: 32px 24px; }
  .startseite .branche { min-height: 0; }
  .startseite .zahl-gross { font-size: 60px; }
}