/* krokotech – gemeinsames Stylesheet aller Seiten */
:root {
  --bg:#ffffff; --panel:#f6f7f6; --panel2:#eef1ee; --line:#e5e8e5; --line2:#d3d8d3;
  --text:#0a0a0a; --muted:#5d625e; --dim:#9aa09b;
  --g1:#4ade80; --g2:#14b86a; --acc:#119a55;
  --navbg:rgba(255,255,255,.78); --field:#fff; --tile:#fff; --gridop:.7;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --wrap:1180px;
}
:root[data-theme="dark"] {
  --bg:#000; --panel:#0c0c0c; --panel2:#121212; --line:#1e1e1e; --line2:#2a2a2a;
  --text:#f4f4f4; --muted:#8b8b8b; --dim:#555; --acc:#4ade80;
  --navbg:rgba(0,0,0,.72); --field:#070707; --tile:#f4f4f4; --gridop:.55;
}
:root[data-theme="dark"] .logo-l, :root:not([data-theme="dark"]) .logo-d { display:none }
body { transition:background-color .3s, color .3s }
* { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; scroll-padding-top:84px }
body { background:var(--bg); color:var(--text); font-family:Figtree, system-ui, sans-serif; font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden }
a { color:inherit; text-decoration:none }
img { display:block; max-width:100% }
.wrap { width:min(var(--wrap), 100% - 32px); margin:0 auto }
.mono { font-family:var(--mono) }
::selection { background:var(--g1); color:#000 }

/* Hintergrund-Raster */
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(800px 500px at 80% -10%, rgba(74,222,128,.10), transparent 60%),
    linear-gradient(var(--line) 1px, transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/64px 64px;
  -webkit-mask-image:linear-gradient(#000 0, transparent 70vh); mask-image:linear-gradient(#000 0, transparent 70vh); opacity:var(--gridop) }

/* Navigation */
header.nav { position:fixed; top:0; left:0; right:0; z-index:50; transition:background .3s, border-color .3s; border-bottom:1px solid transparent }
header.nav.scrolled { background:var(--navbg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-color:var(--line) }
.nav .wrap { display:flex; align-items:center; gap:28px; height:68px }
.nav .logo img { height:26px; width:auto }
.nav nav { display:flex; gap:26px; margin-left:auto; font-size:15px; color:var(--muted) }
.nav nav a:hover, .nav nav > a[aria-current], .dd.cur .dd-btn { color:var(--text) }
/* Tools-Menü */
.dd { position:relative }
.dd-btn { display:inline-flex; align-items:center; gap:5px; background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer }
.dd-btn:hover, .dd.open .dd-btn { color:var(--text) }
.dd-btn svg { transition:transform .2s }
.dd.open .dd-btn svg { transform:rotate(180deg) }
.dd-menu { position:absolute; top:calc(100% + 18px); left:50%; width:310px; padding:8px; border:1px solid var(--line2); border-radius:16px; background:var(--bg); box-shadow:0 24px 60px -20px rgba(0,0,0,.35); opacity:0; visibility:hidden; transform:translate(-50%, -6px); transition:opacity .2s, transform .2s, visibility .2s; z-index:60 }
.dd-menu::before { content:""; position:absolute; left:0; right:0; top:-20px; height:20px }
.dd.open .dd-menu { opacity:1; visibility:visible; transform:translate(-50%, 0) }
@media (hover:hover) { .dd:hover .dd-menu { opacity:1; visibility:visible; transform:translate(-50%, 0) } .dd:hover .dd-btn svg { transform:rotate(180deg) } }
.dd-h { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); padding:8px 10px 6px }
.dd-menu a { display:flex; align-items:center; gap:12px; padding:10px; border-radius:10px; color:var(--text); transition:background .2s }
.dd-menu a:hover, .dd-menu a:focus-visible { background:var(--panel2) }
.dd-menu .ic { width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:10px; background:var(--panel); border:1px solid var(--line); color:var(--acc) }
.dd-menu .ic svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.dd-menu b { display:block; font-size:15px; font-weight:600; line-height:1.3 }
.dd-menu small { display:block; font-size:13px; color:var(--muted); line-height:1.35 }
.nav .clock { font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.08em; white-space:nowrap }
.nav .clock i { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--g1); margin-right:8px; box-shadow:0 0 10px var(--g1); animation:pulse 2s infinite }
@keyframes pulse { 50% { opacity:.35 } }

.btn { display:inline-flex; align-items:center; gap:10px; height:46px; padding:0 22px; border-radius:999px; font-weight:600; font-size:15px; border:1px solid var(--line2); transition:transform .2s, background .2s, border-color .2s, color .2s; cursor:pointer; white-space:nowrap; font-family:inherit; background:transparent; color:var(--text) }
.btn:hover { border-color:var(--muted); transform:translateY(-1px) }
.btn.primary { background:var(--g1); color:#000; border-color:var(--g1) }
.btn.primary:hover { background:#6ee7a0; border-color:#6ee7a0 }
.btn svg { width:16px; height:16px }
.nav .btn { height:40px; padding:0 18px; font-size:14px }
.theme { width:40px; height:40px; flex:none; border-radius:50%; border:1px solid var(--line2); background:transparent; color:var(--text); display:grid; place-items:center; cursor:pointer; transition:border-color .2s }
.theme:hover { border-color:var(--muted) }
.theme svg { width:18px; height:18px }
.theme .sun, :root[data-theme="dark"] .theme .moon { display:none }
:root[data-theme="dark"] .theme .sun { display:block }

/* Split-Flap */
.flap { display:inline-flex; gap:3px; font-family:var(--mono); font-weight:700; text-transform:uppercase }
.flap span { position:relative; display:inline-grid; place-items:center; width:1.05em; height:1.45em; border-radius:.14em; background:linear-gradient(#1a1a1a 50%, #151515 50%); color:#f4f4f4; box-shadow:inset 0 0 0 1px #262626 }
.flap span::after { content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:#000 }
.flap span.sp { background:#0d0d0d }
.flap.g span { color:#4ade80 }
.flap span.tick { animation:tick .07s linear }
@keyframes tick { 0% { transform:scaleY(.82) } 100% { transform:scaleY(1) } }

/* Hero */
.hero { padding:140px 0 90px; min-height:100svh; display:flex; align-items:center; position:relative; overflow:hidden }
.board { --text:#f4f4f4; --muted:#8b8b8b; --dim:#5a5a5a; --line:#1e1e1e; --acc:#4ade80; color:var(--text); border:1px solid #1a1a1a; background:linear-gradient(180deg, #0b0b0b, #070707); border-radius:22px; padding:26px; box-shadow:0 30px 80px -30px rgba(74,222,128,.15) }
.hero-flap { display:block; font-size:clamp(20px, 6vw, 68px); margin:.28em 0 .3em; letter-spacing:0; line-height:1 }
.hero-flap .flap { gap:.08em }
.hero-flap .flap span { width:1.02em; height:1.4em }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.rows { display:grid; font-family:var(--mono); font-size:13px }
.rows .r { display:grid; grid-template-columns:110px 1fr 120px 130px; gap:16px; align-items:center; padding:12px 0; border-top:1px solid var(--line) }
.rows .r.h { color:var(--dim); font-size:11px; letter-spacing:.14em; border-top:0; padding-top:0 }
.rows .flap { font-size:13px }
.status { display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.1em; color:var(--acc) }
.status::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor }
.status.am { color:#facc15 } .status.off { color:var(--muted) }
.hero h1 { font-size:clamp(38px, 6vw, 76px); line-height:1.02; letter-spacing:-.035em; font-weight:700 }
.hero h1 > span { display:block }
.hero .sub { color:var(--muted); font-size:clamp(17px, 2vw, 20px); max-width:620px; margin-top:20px }
.hero .cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:34px }

/* Sektionen */
section.s { padding:110px 0; border-top:1px solid var(--line) }
.eyebrow { font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--acc); margin-bottom:16px; display:flex; align-items:center; gap:10px }
.eyebrow::before { content:""; width:18px; height:1px; background:currentColor }
h2 { font-size:clamp(32px, 4.6vw, 56px); line-height:1.05; letter-spacing:-.03em; font-weight:700 }
.lead { color:var(--muted); max-width:600px; margin-top:16px; font-size:18px }
.s-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:48px }

/* Projekte */
.proj { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px }
.proj a { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--panel); transition:transform .3s, border-color .3s, box-shadow .3s }
.proj a:hover { transform:translateY(-4px); border-color:var(--line2); box-shadow:0 24px 50px -24px rgba(0,0,0,.35) }
.proj .shot { position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--panel2); border-bottom:1px solid var(--line) }
.proj .shot img { width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .6s cubic-bezier(.2,.7,.2,1) }
.proj a:hover .shot img { transform:scale(1.04) }
.proj .meta { display:flex; align-items:center; gap:12px; padding:16px 18px }
.proj .nm { font-size:19px; font-weight:600; letter-spacing:-.01em; line-height:1.2 }
.proj .ty { color:var(--muted); font-size:14px }
.proj .arr { margin-left:auto; flex:none; color:var(--dim); transition:color .2s, transform .2s }
.proj a:hover .arr { color:var(--acc); transform:translate(3px,-3px) }

/* Zahlen */
.log { display:grid; grid-template-columns:1.3fr 1fr; gap:20px }
.panel { border:1px solid var(--line); background:var(--panel); border-radius:20px; padding:28px }
.panel .ph { display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--muted); margin-bottom:22px }
.count { font-size:clamp(46px, 8vw, 96px) }
.count .flap { gap:.06em }
.panel p { color:var(--muted); margin-top:18px; max-width:440px }
.facts { display:grid; gap:20px }
.facts .panel h3 { font-size:22px; letter-spacing:-.01em }
.facts .panel p { margin-top:8px }

/* Leistungen */
.svc { display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:20px; overflow:hidden }
.svc article, .svc .cta-cell { background:var(--bg); padding:30px 28px 34px; min-height:230px; display:flex; flex-direction:column; transition:background .3s; position:relative }
.svc article:hover { background:var(--panel2) }
.svc .cta-cell { background:var(--g1); color:#000 }
.svc .cta-cell .no, .svc .cta-cell p { color:rgba(0,0,0,.65) }
.svc .cta-cell:hover { background:#6ee7a0 }
.svc .cta-cell svg { transition:transform .2s }
.svc .cta-cell:hover svg { transform:translateX(4px) }
.svc .no { font-family:var(--mono); font-size:12px; color:var(--dim); letter-spacing:.1em }
.svc h3 { font-size:23px; letter-spacing:-.02em; margin:auto 0 10px; padding-top:40px; display:flex; align-items:center; gap:10px }
.svc p { color:var(--muted); font-size:15.5px }
.svc .new { font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:#000; background:var(--g1); padding:3px 7px; border-radius:5px; font-weight:700 }
.svc article.feat { grid-column:span 2; background:radial-gradient(500px 260px at 100% 0, rgba(74,222,128,.13), transparent 70%), var(--bg) }
.svc article.feat h3 { font-size:clamp(26px, 3vw, 34px) }
.svc article.feat p { max-width:520px; font-size:17px }

/* Ablauf */
.itin .rows .r { grid-template-columns:90px 190px 1fr 140px; padding:20px 0; font-size:14px }
.itin .rows .r p { font-family:Figtree, sans-serif; font-size:16px; color:var(--muted) }
.itin .rows .flap { font-size:15px }

/* Werkzeuge */
.marquee { overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent) }
.marquee .track { display:flex; gap:16px; width:max-content; animation:slide 38s linear infinite }
.marquee:hover .track { animation-play-state:paused }
.marquee .tile { width:150px; height:84px; border:1px solid var(--line); border-radius:14px; background:var(--tile); display:grid; place-items:center; padding:18px; filter:grayscale(1); opacity:.82; transition:filter .3s, opacity .3s }
.marquee .tile:hover { filter:none; opacity:1 }
.marquee .tile img { max-height:40px; width:auto; object-fit:contain }
@keyframes slide { to { transform:translateX(calc(-50% - 8px)) } }

/* Partner */
.partner { display:grid; grid-template-columns:auto 1fr auto; gap:32px; align-items:center }
.partner .pl { background:#fff; border-radius:16px; padding:18px 24px }
.partner .pl img { height:44px; width:auto }
.partner h3 { font-size:24px; letter-spacing:-.02em }
.partner p { color:var(--muted) }

/* Kontakt: Ticket */
.ticket { display:grid; grid-template-columns:1fr 300px; border-radius:24px; overflow:hidden; border:1px solid var(--line2); background:var(--panel) }
.ticket .main { padding:40px }
.ticket .stub { border-left:2px dashed var(--line2); padding:40px 32px; background:var(--panel2); display:flex; flex-direction:column; gap:22px; position:relative }
.ticket .stub::before, .ticket .stub::after { content:""; position:absolute; left:-15px; width:28px; height:28px; border-radius:50%; background:var(--bg); border:1px solid var(--line2) }
.ticket .stub::before { top:-15px } .ticket .stub::after { bottom:-15px }
.tk-head { display:flex; justify-content:space-between; font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--muted); margin-bottom:28px }
.tk-head b { color:var(--acc); font-weight:500 }
form .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px }
label { display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--muted); text-transform:uppercase }
input, textarea { width:100%; margin-top:8px; background:var(--field); border:1px solid var(--line2); border-radius:12px; color:var(--text); font:inherit; font-size:16px; padding:13px 14px; outline:none; transition:border-color .2s }
input:focus, textarea:focus { border-color:var(--acc) }
textarea { min-height:110px; resize:vertical }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px }
.chips input { display:none }
.chips label span { display:inline-block; font-family:Figtree, sans-serif; font-size:14px; letter-spacing:0; text-transform:none; color:var(--text); border:1px solid var(--line2); border-radius:999px; padding:8px 14px; cursor:pointer; transition:all .2s }
.chips input:checked + span { background:var(--g1); color:#000; border-color:var(--g1) }
form > * + * { margin-top:20px }
.stub .k { font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--muted) }
.stub .v { font-size:18px; font-weight:600; margin-top:4px; word-break:break-all }
.stub .v a:hover { color:var(--acc) }
.barcode { margin-top:auto; height:54px; background:repeating-linear-gradient(90deg, var(--text) 0 2px, transparent 2px 4px, var(--text) 4px 5px, transparent 5px 9px, var(--text) 9px 12px, transparent 12px 14px); opacity:.85; border-radius:3px }

footer { border-top:1px solid var(--line); padding:64px 0 36px; color:var(--muted); font-size:15px }
footer .ft { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px }
footer .ft-brand p { margin:16px 0 22px; max-width:300px }
footer img { height:22px; width:auto }
footer .ft-h { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:14px }
footer ul { list-style:none; display:grid; gap:8px }
footer a:hover { color:var(--text) }
footer .ft-bottom { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:48px; padding-top:22px; border-top:1px solid var(--line); font-size:13px }
@media (max-width:980px) { footer .ft { grid-template-columns:1fr 1fr } footer .ft-brand { grid-column:1 / -1 } }
@media (max-width:520px) { footer .ft { grid-template-columns:1fr } }

/* Einblenden */
.rv { opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1) }
.rv.in { opacity:1; transform:none }
@media (prefers-reduced-motion:reduce) { .rv { opacity:1; transform:none; transition:none } .marquee .track { animation:none } * { scroll-behavior:auto } }

/* Tablet / Mobile */
@media (max-width:980px) {
  .nav .clock { display:none }
  .nav .wrap { gap:12px }
  .nav .logo { flex:none }
  .rows .r { grid-template-columns:84px 1fr 100px }
  .rows .r > :nth-child(3) { display:none }
  .log, .partner { grid-template-columns:1fr }
  .svc { grid-template-columns:1fr 1fr }
  .proj { grid-template-columns:1fr 1fr }
  .svc .cta-cell { grid-column:span 2; min-height:0 }
  .ticket { grid-template-columns:1fr }
  .ticket .stub { border-left:0; border-top:2px dashed var(--line2) }
  .ticket .stub::before { left:-15px; top:-15px } .ticket .stub::after { left:auto; right:-15px; top:-15px; bottom:auto }
  .itin .rows .r { grid-template-columns:70px 1fr 120px }
  .itin .rows .r > :nth-child(3) { display:block; grid-column:1 / -1 }
  .itin .rows .r.h > :nth-child(3) { display:none }
}
@media (max-width:640px) {
  .nav .btn.primary { display:none }
  .nav .logo img { height:22px }
  body { font-size:16px }
  .hero { padding:110px 0 60px }
  .board { padding:18px; border-radius:18px }
  .rows .r { grid-template-columns:1fr auto; gap:10px }
  .rows .r > :first-child { display:none }
  .proj { grid-template-columns:1fr; gap:16px }
  .svc { grid-template-columns:1fr }
  .svc article.feat, .svc .cta-cell { grid-column:auto }
  .svc article { min-height:0 }
  section.s { padding:80px 0 }
  .ticket .main, .ticket .stub { padding:26px 20px }
  form .grid2 { grid-template-columns:1fr }
  .itin .rows .r { grid-template-columns:1fr auto }
  .itin .rows .r > :first-child { display:none }
}

/* ---------- Mehrseitig: Menüs, Unterseiten ---------- */
.dd-menu.wide { width:600px; display:grid; grid-template-columns:1fr 1fr; gap:2px }
.dd-menu.wide small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.dd-menu.wide a > span:last-child { min-width:0 }
.dd-menu.wide .dd-h, .dd-menu.wide .all { grid-column:1 / -1 }
.dd-menu .all { justify-content:space-between; font-size:14px; font-weight:600; color:var(--acc); border-top:1px solid var(--line); border-radius:0 0 10px 10px; margin-top:4px; padding:12px 10px }
.dd-menu a[aria-current] { background:var(--panel2) }
.burger { display:none; width:40px; height:40px; flex:none; border-radius:50%; border:1px solid var(--line2); background:transparent; color:var(--text); place-items:center; cursor:pointer }
.burger svg { width:18px; height:18px }
.burger .x, .nav.menu-open .burger .bars { display:none }
.nav.menu-open .burger .x { display:block }

/* Unterseiten */
.page-hero { padding:150px 0 70px }
.crumbs { font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:26px; display:flex; flex-wrap:wrap; gap:8px }
.crumbs a { color:var(--muted) } .crumbs a:hover { color:var(--acc) }
.page-hero h1 { font-size:clamp(40px, 6.4vw, 80px); line-height:1.02; letter-spacing:-.04em; font-weight:700; max-width:900px }
.page-hero .sub { color:var(--muted); font-size:clamp(17px, 2vw, 21px); max-width:680px; margin-top:22px }
.page-hero .cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:34px }
.page-hero .tag { display:inline-flex; align-items:center; gap:10px; margin-bottom:18px }
.page-hero .tag .flap { font-size:15px }

.cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px }
.cards .panel h3 { font-size:20px; letter-spacing:-.015em; margin-bottom:8px }
.cards .panel p { color:var(--muted); font-size:15.5px }
.cards .panel .no { font-family:var(--mono); font-size:12px; color:var(--acc); letter-spacing:.1em; display:block; margin-bottom:26px }
.uses .rows .r { grid-template-columns:70px 230px 1fr; padding:18px 0 }
.uses .rows .r p { font-family:Figtree, sans-serif; font-size:16px; color:var(--muted) }
.uses .rows .flap { font-size:14px }

.faq { display:grid; gap:10px; max-width:860px }
.faq details { border:1px solid var(--line); border-radius:16px; background:var(--panel); padding:0 22px; transition:border-color .2s }
.faq details[open] { border-color:var(--line2) }
.faq summary { cursor:pointer; list-style:none; padding:20px 0; font-weight:600; font-size:18px; display:flex; justify-content:space-between; gap:16px; align-items:center }
.faq summary::-webkit-details-marker { display:none }
.faq summary::after { content:"+"; font-family:var(--mono); font-size:22px; color:var(--acc); transition:transform .2s }
.faq details[open] summary::after { transform:rotate(45deg) }
.faq details p { color:var(--muted); padding:0 0 20px; max-width:720px }

.more { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px }
.more a { display:flex; align-items:center; gap:14px; padding:18px 20px; border:1px solid var(--line); border-radius:16px; background:var(--panel); transition:border-color .2s, transform .2s }
.more a:hover { border-color:var(--line2); transform:translateY(-2px) }
.more .no { font-family:var(--mono); font-size:11px; color:var(--dim); letter-spacing:.1em }
.more b { font-weight:600; font-size:16px }
.more svg { margin-left:auto; color:var(--dim); flex:none }
.more a:hover svg { color:var(--acc) }

.cta-band { display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; padding:44px; border-radius:24px; background:var(--g1); color:#000 }
.cta-band h2 { font-size:clamp(28px, 4vw, 46px) }
.cta-band p { color:rgba(0,0,0,.65); margin-top:8px; max-width:520px }
.cta-band .btn { background:#000; color:#fff; border-color:#000 }
.cta-band .btn:hover { background:#1a1a1a }
a.svc-link { color:inherit }
.svc a.card-link { background:var(--bg); padding:30px 28px 34px; min-height:230px; display:flex; flex-direction:column; transition:background .3s; position:relative }
.svc a.card-link:hover { background:var(--panel2) }
.svc a.card-link .go { position:absolute; top:26px; right:26px; color:var(--dim); transition:color .2s, transform .2s }
.svc a.card-link:hover .go { color:var(--acc); transform:translate(3px,-3px) }
.svc a.card-link.feat { grid-column:span 2; background:radial-gradient(500px 260px at 100% 0, rgba(74,222,128,.13), transparent 70%), var(--bg) }
.svc a.card-link.feat h3 { font-size:clamp(26px, 3vw, 34px) }
.svc a.card-link.feat p { max-width:520px; font-size:17px }

@media (max-width:980px) {
  .burger { display:grid }
  .nav nav { display:none; position:fixed; top:68px; left:0; right:0; bottom:0; overflow-y:auto; background:var(--bg); padding:12px 16px 48px; flex-direction:column; gap:0; margin:0; border-top:1px solid var(--line); font-size:17px }
  .nav.menu-open { background:var(--bg); border-color:var(--line) }
  .nav.menu-open nav { display:flex }
  .nav nav > a { color:var(--text); font-size:24px; font-weight:600; padding:14px 4px; border-bottom:1px solid var(--line) }
  .dd { border-bottom:1px solid var(--line); padding-bottom:10px }
  .dd-btn { color:var(--text); font-size:24px; font-weight:600; padding:14px 4px 6px; pointer-events:none }
  .dd-btn svg { display:none }
  .dd-menu, .dd-menu.wide { position:static; opacity:1; visibility:visible; transform:none !important; width:auto; box-shadow:none; border:0; padding:0; background:none; display:grid; grid-template-columns:1fr }
  .dd-menu::before, .dd-h { display:none }
  .nav .theme { margin-left:auto }
  body.menu-open { overflow:hidden }
  .cards { grid-template-columns:1fr 1fr }
  .more { grid-template-columns:1fr 1fr }
  .uses .rows .r { grid-template-columns:60px 1fr }
  .uses .rows .r p { grid-column:1 / -1 }
  .svc a.card-link.feat { grid-column:span 2 }
}
@media (max-width:640px) {
  .page-hero { padding:110px 0 40px }
  .cards, .more { grid-template-columns:1fr }
  .cta-band { padding:28px 22px }
  .svc a.card-link.feat { grid-column:auto }
  .svc a.card-link { min-height:0 }
  .uses .rows .r { grid-template-columns:1fr }
  .uses .rows .r > :first-child { display:none }
}

/* ---------- Maskottchen ---------- */
.hero > .wrap { position:relative; z-index:1 }
.mascot { position:absolute; right:-3vw; top:50%; width:min(60vw, 860px); transform:translateY(-58%); opacity:.13; pointer-events:none; z-index:0 }
:root[data-theme="dark"] .mascot { opacity:.2 }
.mascot .m-pupil { fill:var(--text); transform-box:fill-box; transform-origin:center; animation:blink 6s infinite }
.mascot .m-eyes { animation:look 9s ease-in-out infinite }
.mascot .m-head { animation:bob 5s ease-in-out infinite }
.mascot .m-wave { opacity:.55 }
.mascot .m-w1 { animation:wave 4s ease-in-out infinite }
.mascot .m-w2 { animation:wave 4s ease-in-out infinite reverse }
@keyframes blink { 0%, 90%, 100% { transform:scaleY(1) } 93% { transform:scaleY(.1) } 96% { transform:scaleY(1) } }
@keyframes look { 0%, 30% { transform:translateX(0) } 38%, 55% { transform:translateX(2.2px) } 63%, 80% { transform:translateX(-2.2px) } 88%, 100% { transform:translateX(0) } }
@keyframes bob { 0%, 100% { transform:translateY(0) } 50% { transform:translateY(1.2px) } }
@keyframes wave { 0%, 100% { transform:translateX(0) } 50% { transform:translateX(2px) } }
@media (max-width:980px) { .mascot { width:90vw; right:-25vw; top:auto; bottom:4%; transform:none; opacity:.09 } :root[data-theme="dark"] .mascot { opacity:.14 } }

/* Pixel-Krokodil läuft über die Fusszeile */
footer { position:relative }
.croc-lane { position:absolute; left:0; right:0; top:-40px; height:40px; overflow:hidden; pointer-events:none }
.croc { position:absolute; bottom:0; left:0; width:136px; height:36px; animation:walk 30s linear infinite; pointer-events:auto; cursor:pointer }
.croc svg { transition:transform .2s }
.croc.hop svg { animation:hop .5s ease-out }
@keyframes hop { 0%, 100% { transform:translateY(0) } 40% { transform:translateY(-10px) } }
.croc svg { width:100%; height:100%; display:block; shape-rendering:crispEdges }
.croc .f2, .croc-p .f2 { visibility:hidden }
.croc .f1, .croc-p .f1 { animation:frameA .5s steps(1) infinite } .croc .f2, .croc-p .f2 { animation:frameB .5s steps(1) infinite }
@keyframes frameA { 0% { visibility:visible } 50% { visibility:hidden } }
@keyframes frameB { 0% { visibility:hidden } 50% { visibility:visible } }
@keyframes walk { from { transform:translateX(-150px) } to { transform:translateX(calc(100vw + 20px)) } }
@media (prefers-reduced-motion:reduce) { .mascot *, .croc, .croc .f1, .croc .f2 { animation:none !important } .croc { left:24px } }

/* Fress-Szene: Krokodil frisst Routinearbeit (Startseite) bzw. die fehlende Seite (404) */
.chomp { --px:12px; position:relative; height:calc(var(--px) * 9 + 40px); overflow:hidden }
.chomp svg { position:absolute; display:block; shape-rendering:crispEdges }
.chomp .body { left:0; bottom:0; width:calc(var(--px) * 34); height:calc(var(--px) * 9) }
.chomp .item { position:absolute; right:0; bottom:calc(var(--px) * 2); display:flex; flex-direction:column; align-items:center; gap:8px; animation:feed 4s linear infinite }
.chomp .item svg { position:static; width:calc(var(--px) * 4); height:calc(var(--px) * 5) }
.chomp .task { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:4px 8px; border-radius:6px; background:#151515; color:#facc15; border:1px solid #2a2a2a; white-space:nowrap }
.chomp .open { animation:chompOpen 4s steps(1) infinite }
.chomp .closed { animation:chompClosed 4s steps(1) infinite }
.chomp .crumb { position:absolute; left:calc(var(--px) * 31); bottom:calc(var(--px) * 4); width:calc(var(--px) / 2); height:calc(var(--px) / 2); background:#bbf7d0; opacity:0; animation:crumb 4s ease-out infinite }
.chomp .crumb.c2 { left:calc(var(--px) * 32); bottom:calc(var(--px) * 3); animation-delay:.08s }
.chomp .crumb.c3 { left:calc(var(--px) * 30); bottom:calc(var(--px) * 2.5); animation-delay:.16s }
@keyframes feed { 0% { transform:translateX(0); opacity:1 } 55% { transform:translateX(calc(-1 * var(--dist, 300px))); opacity:1 } 57%, 100% { transform:translateX(calc(-1 * var(--dist, 300px))); opacity:0 } }
@keyframes chompOpen { 0% { visibility:hidden } 20% { visibility:visible } 57% { visibility:hidden } 66% { visibility:visible } 70% { visibility:hidden } 76% { visibility:visible } 80%, 100% { visibility:hidden } }
@keyframes chompClosed { 0% { visibility:visible } 20% { visibility:hidden } 57% { visibility:visible } 66% { visibility:hidden } 70% { visibility:visible } 76% { visibility:hidden } 80%, 100% { visibility:visible } }
@keyframes crumb { 0%, 57% { opacity:0; transform:none } 60% { opacity:.8 } 80%, 100% { opacity:0; transform:translate(-6px, 22px) } }
@media (max-width:640px) { .chomp { --px:7px } }
@media (prefers-reduced-motion:reduce) { .chomp .item, .chomp .crumb { display:none } .chomp .open { display:none } .chomp * { animation:none !important } }

.feed .ph { display:flex; justify-content:space-between; align-items:center; gap:12px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--muted); margin-bottom:18px }
.feed .ph .flap { font-size:14px; margin-left:8px; vertical-align:middle }
.feed .chomp { border-bottom:1px solid var(--line) }
.feed-foot { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:22px }
.feed-foot p { color:var(--muted); font-size:17px }

/* Maskottchen schläft im Dunkelmodus */
.mascot .m-lid { fill:#0f7a43; transform-box:fill-box; transform-origin:50% 0; transform:scaleY(0); transition:transform .7s cubic-bezier(.2,.7,.2,1) }
:root[data-theme="dark"] .mascot .m-lid { transform:scaleY(1) }
:root[data-theme="dark"] .mascot .m-pupil { animation:none }
.mascot .m-zzz { display:none; font-family:var(--mono); font-weight:700; font-size:5px; fill:var(--text) }
:root[data-theme="dark"] .mascot .m-zzz { display:block }
.mascot .m-zzz text { opacity:0; animation:zzz 4.5s ease-in-out infinite }
.mascot .m-zzz text:nth-child(2) { animation-delay:1.5s; font-size:6px }
.mascot .m-zzz text:nth-child(3) { animation-delay:3s; font-size:7px }
@keyframes zzz { 0% { opacity:0; transform:translate(0, 3px) } 20% { opacity:1 } 70% { opacity:1 } 100% { opacity:0; transform:translate(2px, -3px) } }

/* Geheimtipp: Krokodil-Parade */
.parade { position:fixed; inset:0; z-index:90; pointer-events:none; overflow:hidden }
.parade .croc-p { position:absolute; left:0; width:136px; height:36px; animation:parade linear forwards }
.parade .croc-p svg { width:100%; height:100%; display:block; shape-rendering:crispEdges }
@keyframes parade { from { transform:translateX(-160px) scale(var(--s, 1)) } to { transform:translateX(calc(100vw + 160px)) scale(var(--s, 1)) } }
.toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%, 20px); z-index:91; padding:12px 18px; border-radius:12px; background:#0b0b0b; color:#4ade80; border:1px solid #2a2a2a; font-family:var(--mono); font-size:13px; letter-spacing:.08em; opacity:0; transition:opacity .3s, transform .3s; pointer-events:none }
.toast.show { opacity:1; transform:translate(-50%, 0) }

/* Rechtstexte */
.prose { max-width:760px }
.prose h2 { font-size:22px; letter-spacing:-.015em; margin:38px 0 10px }
.prose h2:first-child { margin-top:0 }
.prose p, .prose li { color:var(--muted); font-size:16.5px }
.prose p + p { margin-top:12px }
.prose ul { margin:10px 0 0 20px; display:grid; gap:8px }
.prose a { color:var(--acc); text-decoration:underline; text-underline-offset:2px }
.prose b { color:var(--text) }
.prose code { font-family:var(--mono); font-size:.88em; background:var(--panel2); padding:1px 6px; border-radius:5px }
.prose .stand { margin-top:30px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim) }
footer .ft-bottom .legal { display:flex; flex-wrap:wrap; gap:6px 18px }
footer .ft-bottom button { background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer }
footer .ft-bottom button:hover { color:var(--text) }

/* Cookie-Banner */
.consent { position:fixed; left:16px; bottom:16px; z-index:95; width:min(420px, calc(100vw - 32px)); padding:22px; border-radius:18px; background:var(--panel); border:1px solid var(--line2); box-shadow:0 24px 60px -20px rgba(0,0,0,.35); transform:translateY(20px); opacity:0; transition:transform .35s, opacity .35s }
.consent.show { transform:none; opacity:1 }
.consent h2 { font-size:18px; letter-spacing:-.01em; display:flex; align-items:center; gap:10px }
.consent h2 svg { width:22px; height:22px; flex:none; shape-rendering:crispEdges }
.consent p { color:var(--muted); font-size:14.5px; margin-top:8px }
.consent p a { color:var(--text); text-decoration:underline; text-underline-offset:2px }
.consent .acts { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px }
.consent .btn { height:40px; padding:0 16px; font-size:14px }

/* Projekt-Fallseite */
.pipe { display:flex; align-items:center; margin-top:44px; max-width:860px }
.pipe-node { flex:none; display:grid; place-items:center; gap:2px; width:104px; height:84px; border-radius:16px; border:1px solid var(--line2); background:var(--panel); text-align:center }
.pipe-node b { font-family:var(--mono); font-size:13px; letter-spacing:.08em; color:var(--acc) }
.pipe-node small { font-size:12px; color:var(--muted) }
.pipe-line { flex:1; height:2px; position:relative; background:repeating-linear-gradient(90deg, var(--line2) 0 6px, transparent 6px 10px) }
.pipe-line i { position:absolute; top:-3px; left:0; width:8px; height:8px; border-radius:50%; background:var(--g1); box-shadow:0 0 10px var(--g1); opacity:0; animation:pipeflow 3s linear infinite }
/* Staffel: Punkt läuft 0,6 s pro Strecke, die Station leuchtet beim Ankommen auf */
@keyframes pipeflow { 0% { left:0; opacity:1 } 20% { left:calc(100% - 8px); opacity:1 } 21%, 100% { left:calc(100% - 8px); opacity:0 } }
.pipe-node { animation:nodeglow 3s ease-out infinite }
@keyframes nodeglow { 0% { border-color:var(--acc); box-shadow:0 0 22px rgba(74,222,128,.35) } 25%, 100% { border-color:var(--line2); box-shadow:none } }

/* Projektkachel mit Live-Ablauf statt Bild (immer dunkel) */
.proj .pipe-shot { --panel:#0d0d0d; --line2:#2a2a2a; --acc:#4ade80; --muted:#8b8b8b; --g1:#4ade80;
  display:flex; flex-direction:column; justify-content:space-between; padding:clamp(18px, 3vw, 40px); color:#f4f4f4;
  background:radial-gradient(500px 300px at 85% 0%, rgba(74,222,128,.16), transparent 60%), linear-gradient(#161616 1px, transparent 1px) 0 0/48px 48px, linear-gradient(90deg, #161616 1px, transparent 1px) 0 0/48px 48px, #050505 }
.proj .pipe-shot .ps-top { font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:#4ade80 }
.proj .pipe-shot .ps-h { display:block; font-size:clamp(22px, 2.6vw, 36px); font-weight:700; letter-spacing:-.03em; line-height:1.08; margin-top:10px; max-width:520px }
.proj .pipe-shot .pipe { margin-top:0; max-width:none; width:100% }
.proj .pipe-shot .pipe-node { width:clamp(58px, 7vw, 96px); height:clamp(52px, 6vw, 78px) }
.proj a.wide:hover .pipe-shot { filter:brightness(1.08) }
.facts3 .count { font-size:clamp(40px, 6vw, 64px) }
.facts3 .count .flap { gap:.06em }
.facts3 p { color:var(--muted); margin-top:14px }
.stack { list-style:none; display:flex; flex-wrap:wrap; gap:10px }
.stack li { font-family:var(--mono); font-size:13px; letter-spacing:.06em; padding:10px 16px; border-radius:999px; border:1px solid var(--line2); background:var(--panel) }
.proj a.wide { grid-column:1 / -1; flex-direction:row }
.proj a.wide .shot { flex:0 0 62%; aspect-ratio:3/2; border-bottom:0; border-right:1px solid var(--line) }
.proj a.wide .meta { flex-direction:column; align-items:flex-start; justify-content:center; padding:32px }
.proj a.wide .nm { font-size:clamp(24px, 2.6vw, 34px) }
.proj a.wide .desc { display:block; color:var(--muted); margin-top:12px; font-size:16px; max-width:360px }
.proj a.wide .arr { margin:24px 0 0 }
@media (max-width:760px) {
  .pipe-node { width:64px; height:64px; border-radius:12px } .pipe-node small { display:none } .pipe-node b { font-size:10px }
  .proj a.wide { flex-direction:column } .proj a.wide .shot { flex:none; border-right:0; border-bottom:1px solid var(--line) } .proj a.wide .meta { padding:16px 18px }
}
@media (max-width:560px) {
  .proj .pipe-shot .pipe-node { width:48px; height:44px; border-radius:10px }
  .proj .pipe-shot .pipe-node b { font-size:9px; letter-spacing:0 }
  .pipe-node { width:54px; height:54px } .pipe-node b { font-size:9px; letter-spacing:0 }
}