/* Layout: ruhige Fläche; große Aussagen links, Projekte als Bildraster. Farben als RGB-Tokens, hell und dunkel. */
  :root, .theme-fixed {
    --ink: 0 0 0; --white: 255 255 255; --paper: 231 238 245; --rose: 205 216 228; --blush: 219 228 238;
    --mist: 198 209 221; --mauve: 93 111 130; --slate: 62 74 88; --line: 93 111 130; --tint: 219 228 238; --hl: 186 201 217;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
    --ink: 255 255 255; --white: 23 28 34; --paper: 11 13 16; --rose: 80 96 114; --blush: 32 39 48;
    --mist: 42 51 61; --mauve: 93 111 130; --slate: 172 184 198; --line: 125 143 163; --tint: 28 34 42; --hl: 66 80 97;
    color-scheme: dark;
  } }
  :root[data-theme="dark"] {
    --ink: 255 255 255; --white: 23 28 34; --paper: 11 13 16; --rose: 80 96 114; --blush: 32 39 48;
    --mist: 42 51 61; --mauve: 93 111 130; --slate: 172 184 198; --line: 125 143 163; --tint: 28 34 42; --hl: 66 80 97;
    color-scheme: dark;
  }
  :root .theme-fixed {
    --ink: 0 0 0; --white: 255 255 255; --paper: 231 238 245; --rose: 205 216 228; --blush: 219 228 238;
    --mist: 198 209 221; --mauve: 93 111 130; --slate: 62 74 88; --line: 93 111 130; --tint: 219 228 238; --hl: 186 201 217;
    color-scheme: light;
  }
  [hidden] { display: none !important; }
  html { scroll-behavior: smooth; }
  body { background: rgb(var(--paper)); color: rgb(var(--ink)); font-family: Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
  h1, h2, h3 { text-wrap: balance; letter-spacing: -0.03em; }
  .ph { background: linear-gradient(135deg, #E7EEF5, #B9C7D6 55%, #5D6F82); }
  .ph-b { background: linear-gradient(160deg, #B9C7D6, #2A333D); }
  .ph-c { background: linear-gradient(200deg, #2A333D, #000000); }
  .hl { background: linear-gradient(transparent 62%, rgb(var(--hl)) 62%); }
  .dark-only { display: none; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .dark-only { display: block; } :root:not([data-theme="light"]) .light-only { display: none; }
    :root:not([data-theme="light"]) .logo { filter: brightness(0) invert(1); }
  }
  :root[data-theme="dark"] .dark-only { display: block; } :root[data-theme="dark"] .light-only { display: none; }
  :root[data-theme="dark"] .logo { filter: brightness(0) invert(1); }
  :focus-visible { outline: 2px solid rgb(var(--ink)); outline-offset: 3px; border-radius: 8px; }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
  /* Bewegung: kleine Reaktionen auf Maus und Scrollen */
  #scrollbar { position: fixed; left: 0; top: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: rgb(var(--line)); z-index: 60; pointer-events: none; }
  @media (prefers-reduced-motion: no-preference) {
    .lucide { transition: transform .25s cubic-bezier(.3,1.4,.5,1); }
    a:hover > .lucide-arrow-right, button:hover > .lucide-arrow-right { transform: translateX(5px); }
    a:hover .lucide-arrow-up-right, .group:hover .lucide-arrow-up-right { transform: translate(3px, -3px); }
    button:hover > .lucide-send { transform: translate(4px, -4px) rotate(8deg); }
    a:hover > .lucide-map-pin { animation: ms-hop .5s ease; }
    #themeBtn:hover .lucide-sun { transform: rotate(60deg); } #themeBtn:hover .lucide-moon { transform: rotate(-20deg) scale(1.1); }
    #menuBtn:hover .lucide { transform: scaleX(1.15); }
    #heroPrev:hover .lucide { transform: translateX(-3px); } #heroNext:hover .lucide { transform: translateX(3px); }
    article:hover > span .lucide, article:hover > h3 .lucide { animation: ms-wiggle .6s ease; }
    summary:hover .lucide-plus { transform: scale(1.25); } details[open] summary .lucide-plus { transform: rotate(45deg); }
    .copyBtn:active, button:active, a[class*="rounded-xl"]:active { transform: scale(.97); }
    .hl { background-repeat: no-repeat; animation: ms-hl .9s .25s ease-out backwards; }
    .ms-dot { animation: ms-pulse 2.4s ease-in-out infinite; }
    .reveal { opacity: 0; transform: translateY(18px); }
    .reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }
    [data-dot] { transition: width .3s ease, background-color .3s ease; }
    @keyframes ms-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg) scale(1.1); } 60% { transform: rotate(9deg) scale(1.1); } }
    @keyframes ms-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } }
    @keyframes ms-hl { from { background-size: 0 100%; } to { background-size: 100% 100%; } }
    @keyframes ms-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(var(--line) / .55); } 60% { box-shadow: 0 0 0 7px rgb(var(--line) / 0); } }
  }
  .ms-live { position: relative; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #1DB954; flex: none; }
  @media (prefers-reduced-motion: no-preference) {
    .ms-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #1DB954; animation: ms-live 1.8s ease-out infinite; }
    @keyframes ms-live { from { transform: scale(1); opacity: .7; } to { transform: scale(3); opacity: 0; } }
  }
  #g-abc { scrollbar-width: none; } #g-abc::-webkit-scrollbar { display: none; }
  dl mark { background: rgb(var(--hl)); color: inherit; border-radius: 4px; padding: 0 .15em; margin: 0 -.15em; box-shadow: 0 0 0 1px rgb(var(--line) / .5); }
  #kundenkarte circle[fill-opacity] , #kundenkarte g[fill-opacity] circle { transform-box: fill-box; transform-origin: center; transition: transform .2s ease; }
  @media (prefers-reduced-motion: no-preference) { #kundenkarte g[fill-opacity] circle:hover { transform: scale(1.5); } }
  #karteBtn[aria-expanded="true"] .karte-pfeil { transform: rotate(180deg); }
  @media (prefers-reduced-motion: no-preference) { #karteBox:not([hidden]) { animation: ms-karte .45s ease; } @keyframes ms-karte { from { opacity: 0; transform: translateY(-12px); } } }
  .shot { position: relative; overflow: hidden; background: #171C22; }
  .shot img { position: absolute; left: 0; top: 0; width: 100%; max-width: none; height: auto; }
  @media (prefers-reduced-motion: no-preference) { .shot img { transition: top 1.2s ease, transform 1.2s ease; } .shot:hover img { top: 100%; transform: translateY(-100%); transition-duration: 7s; transition-timing-function: linear; } }
  .logo-panel { background-image: radial-gradient(rgb(var(--mist)) 1.2px, transparent 1.3px); background-size: 22px 22px; }
  .logo-anim .o { fill: none; stroke: #2A333D; stroke-width: 55; opacity: 0; }
  .logo-anim.inv .o { stroke: #E7EEF5; stroke-width: 90; } .logo-anim.inv .o2 { stroke-width: 45; } .logo-anim .gb { opacity: 0; }
  .mapbg { left: var(--px, 70%); top: var(--py, 78%); width: clamp(2000px, 156vw, 3400px); aspect-ratio: 2000 / 560; transform: translate(-75.1%, -50%); opacity: .9; }
  .mapbg-x { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 86%, transparent 100%); }
  .mapbg-y { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%); }
  @media (max-width: 1023px) { .mapbg { left: var(--px, 50%); top: var(--py, 90%); } }
  .dd-panel { visibility: hidden; opacity: 0; transform: translate(-50%, 6px); transition: opacity .15s, transform .15s, visibility .15s; }
  [data-dd]:hover .dd-panel, [data-dd]:focus-within .dd-panel, [data-dd].open .dd-panel { visibility: visible; opacity: 1; transform: translate(-50%, 0); }
  [data-dd]:hover [data-dd-btn] svg, [data-dd].open [data-dd-btn] svg { transform: rotate(180deg); }
  .sv .s { fill: none; stroke: rgb(var(--slate)); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .sv .k { fill: rgb(var(--slate)); } .sv .m { fill: rgb(var(--mist)); } .sv .w { fill: none; stroke: rgb(var(--slate)); stroke-width: 1.5; } .sv .pen { offset-path: path('M10 46C30 10 50 60 70 28S100 20 110 40'); offset-distance: 100%; }
  .logo-anim .o2 { stroke-width: 28; transform-box: fill-box; transform-origin: center; }
  @media (prefers-reduced-motion: no-preference) {
    .logo-anim.play .o { opacity: .8; stroke-dasharray: 1; stroke-dashoffset: 1; animation: lg-draw 1.3s cubic-bezier(.5,0,.3,1) forwards, lg-out .9s ease forwards; animation-delay: calc(var(--i) * .32s), 5.2s; }
    .logo-anim.play .o2 { opacity: .45; animation-delay: calc(var(--i) * .32s + .18s), 5s; rotate: 1.2deg; scale: 1.012; }
    .logo-anim.play .f { animation: lg-fill .9s ease both; animation-delay: calc(3s + var(--i) * .3s); }
    @keyframes lg-draw { to { stroke-dashoffset: 0; } }
    .so-p { transform-box: fill-box; transform-origin: center; animation: so-p 2.6s ease-out infinite; }
    @keyframes so-p { from { transform: scale(.6); opacity: .45; } to { transform: scale(3.4); opacity: 0; } }
    .sv .p { transform-box: fill-box; transform-origin: center; animation: sv-pop 3.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
    .sv .gy { transform-box: fill-box; transform-origin: bottom; animation: sv-gy 4.5s cubic-bezier(.3,1.3,.5,1) infinite; animation-delay: var(--d, 0s); }
    .sv .gt { transform-box: fill-box; transform-origin: top; animation: sv-gy 4.5s ease-in-out infinite; }
    .sv .gx { transform-box: fill-box; transform-origin: left; animation: sv-gx 4.5s ease-out infinite; animation-delay: var(--d, 0s); }
    .sv .fl { animation: sv-fl 3.6s ease-out infinite; }
    .sv .dr { stroke-dasharray: 1; animation: sv-dr 5s ease-in-out infinite; }
    .sv .pen { offset-path: path('M10 46C30 10 50 60 70 28S100 20 110 40'); animation: sv-pen 5s ease-in-out infinite; }
    .sv .mv { animation: sv-mv 2.6s ease-in-out infinite alternate; }
    @keyframes sv-pop { 0%, 30%, 100% { transform: scale(1); } 12% { transform: scale(1.28); } }
    @keyframes sv-gy { 0%, 8% { transform: scaleY(0); } 35%, 88% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
    @keyframes sv-gx { 0%, 8% { transform: scaleX(0); } 35%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
    @keyframes sv-fl { 0%, 44%, 60%, 100% { opacity: 0; } 48% { opacity: .95; } }
    @keyframes sv-dr { 0%, 5% { stroke-dashoffset: 1; } 55%, 90% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
    @keyframes sv-pen { 0%, 5% { offset-distance: 0%; opacity: 1; } 55%, 90% { offset-distance: 100%; opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
    @keyframes sv-mv { from { transform: translateX(0); } to { transform: translateX(36px); } }
    @keyframes lg-out { to { opacity: 0; } }
    @keyframes lg-fill { from { fill-opacity: 0; } to { fill-opacity: .5; } }
    .logo-anim.inv.play .f { animation-name: lg-fill1; }
    .logo-anim.solid.play .f { animation-name: lg-fill1; }
    .logo-anim.play .be-look { animation: be-look 2.6s ease-in-out 5.4s both; }
    @keyframes be-look { 0%, 100% { transform: translate(0, 0); } 22%, 36% { transform: translate(-330px, 40px); } 58%, 72% { transform: translate(330px, -20px); } }
    @keyframes lg-fill1 { from { fill-opacity: 0; } to { fill-opacity: 1; } }
    .logo-anim.inv.play .gb { animation: lg-btn .7s ease calc(4.6s + var(--i) * .28s) both, lg-btn .9s ease 6.4s; }
    @keyframes lg-btn { 0%, 100% { opacity: 0; } 35%, 60% { opacity: 1; } }
  }
  .tech a { color: #fff !important; text-decoration-color: rgb(255 255 255 / .5) !important; }
  .fp-wp { fill: #0E1318; stroke: #5D6F82; stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: transform .3s ease, fill .3s ease, stroke .3s ease; }
  .fp-wp.done { fill: #E7EEF5; stroke: #E7EEF5; } .fp-wp.hit { transform: scale(2.4); fill: #fff; }
  @media (prefers-reduced-motion: no-preference) { .fp-rotor { transform-box: fill-box; transform-origin: center; animation: fp-spin .18s linear infinite; } @keyframes fp-spin { to { transform: rotate(360deg); } } }
  /* Kontaktformular: Meldungen (rot = Fehler, grün = gesendet) */
  .msg { display: flex; gap: .6rem; align-items: flex-start; border-radius: .75rem; padding: .8rem 1rem; font-size: .875rem; font-weight: 500; line-height: 1.5; border: 1px solid; }
  .msg-wait { background: rgb(var(--blush)); border-color: rgb(var(--line)); color: rgb(var(--ink)); }
  .msg-err { background: #FEF2F2; border-color: #F5A3A3; color: #9B1C1C; }
  .msg-ok { background: #ECFDF3; border-color: #86D9A9; color: #11603A; }
  .dark .msg-err, [data-theme="dark"] .msg-err { background: #3A1518; border-color: #8C2B30; color: #FFC9C9; }
  .dark .msg-ok, [data-theme="dark"] .msg-ok { background: #0F2E1D; border-color: #2E7A4E; color: #B7F0CF; }
  .form-done { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .9rem; padding: 2rem; border-radius: inherit; background: #ECFDF3; color: #11603A; border: 1px solid #86D9A9; }
  .dark .form-done, [data-theme="dark"] .form-done { background: #0F2E1D; color: #B7F0CF; border-color: #2E7A4E; }
  .form-done[hidden] { display: none; }
  .form-done .fd-icon { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 999px; background: #1DB954; color: #fff; }
  @media (prefers-reduced-motion: no-preference) { .form-done:not([hidden]) { animation: fd-in .35s ease-out; } .form-done .fd-icon { animation: fd-pop .5s .1s cubic-bezier(.3,1.6,.5,1) both; } @keyframes fd-in { from { opacity: 0; } } @keyframes fd-pop { from { transform: scale(.4); opacity: 0; } } }
  /* Kundenlogin: Seite deutlich abdunkeln und unscharf, Fokus aufs Fenster */
  #loginDlg::backdrop { background: rgba(8, 10, 18, .72); -webkit-backdrop-filter: blur(10px) saturate(.8); backdrop-filter: blur(10px) saturate(.8); }
  @media (prefers-reduced-motion: no-preference) { #loginDlg[open] { animation: ld-in .25s ease-out; } #loginDlg[open]::backdrop { animation: ld-fade .25s ease-out; } @keyframes ld-in { from { opacity: 0; transform: translateY(8px) scale(.98); } } @keyframes ld-fade { from { opacity: 0; } } }
  /* Kopfzeile: schwebende Leiste mit gleitender Markierung */
  .ms-island { transition: background-color .35s, box-shadow .35s, border-color .35s; box-shadow: 0 1px 0 rgb(var(--white) / .6) inset; }
  .ms-hd.is-scrolled .ms-island { background-color: rgb(var(--paper) / .9); box-shadow: 0 1px 0 rgb(var(--white) / .5) inset, 0 12px 32px -14px rgb(10 18 30 / .28); }
  /* Die Leiste schwebt über dem Seitenanfang: kein eigener Farbstreifen, der erste Abschnitt läuft darunter durch */
  :root { --ms-hd: 84px; }
  .ms-hd { margin-bottom: calc(-1 * (var(--ms-hd) - 8px)); }
  main > :first-child:not(style), main > style:first-child + * { padding-top: var(--ms-hd); }
  /* Brotkrumen: ruhige Zeile im Inhalt, kein eigener Balken */
  .ms-crumbs ol { display: flex; flex-wrap: nowrap; align-items: center; gap: .35rem; min-width: 0; overflow: hidden; }
  .ms-crumbs li { flex: none; } .ms-crumbs li:last-child { flex: 0 1 auto; min-width: 0; }
  .ms-crumbs [aria-current] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ms-crumbbar + section > div:first-child { padding-top: 2rem; }
  @media (min-width: 640px) { .ms-crumbbar + section > div:first-child { padding-top: 3rem; } }
  .ms-crumbs li + li::before { content: ""; width: .4rem; height: .4rem; margin-right: .35rem; border-right: 1.5px solid rgb(var(--slate) / .55); border-top: 1.5px solid rgb(var(--slate) / .55); transform: rotate(45deg); display: inline-block; }
  .ms-crumbs li { display: inline-flex; align-items: center; min-width: 0; }
  .ms-crumbs a { color: rgb(var(--slate)); text-decoration: none; transition: color .2s; }
  .ms-crumbs a:hover { color: rgb(var(--ink)); }
  .ms-crumbs [aria-current] { color: rgb(var(--ink)); font-weight: 600; }
  /* Zweite schwebende Leiste (Abschnitte einer langen Seite) unter der Kopfzeile */
  .ms-sub { position: sticky; z-index: 30; top: calc(env(safe-area-inset-top, 0px) + var(--ms-hd) - 12px); }
  .ms-sub .ms-island { box-shadow: 0 1px 0 rgb(var(--white) / .6) inset; }
  .ms-sub.is-stuck .ms-island { background-color: rgb(var(--paper) / .9); box-shadow: 0 1px 0 rgb(var(--white) / .5) inset, 0 12px 32px -14px rgb(10 18 30 / .28); }
  .ms-pill { position: absolute; top: 50%; left: 0; height: 36px; width: 0; border-radius: 999px; background: rgb(var(--blush)); transform: translateY(-50%); opacity: 0; pointer-events: none;
    transition: left .35s cubic-bezier(.5, 0, .2, 1), width .35s cubic-bezier(.5, 0, .2, 1), opacity .25s; }
  .ms-pill.on { opacity: 1; }
  .ms-brand .logo { transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
  .ms-brand:hover .logo { transform: rotate(-8deg) scale(1.06); }
  .ms-cta .ms-live { box-shadow: 0 0 0 2px rgb(var(--ink)); }
  @media (prefers-reduced-motion: reduce) { .ms-pill, .ms-brand .logo { transition: none; } }