:root{
  /* Vorgabe */
  --bg:#0F1112;
  --primary:#208cbc;
  /* Abgeleitete Palette (aus #208cbc) */
  --primary-bright:#3BB3E6;
  --cyan:#4FD6E8;
  --teal:#2AA79B;
  --violet:#5E6AD2;
  --deep:#0B5C80;
  /* Flächen */
  --bg-soft:#131617;
  --surface:#171B1D;
  --surface-2:#1D2225;
  --line:#262C30;
  --line-soft:rgba(255,255,255,.07);
  /* Typo */
  --text:#F2F6F8;
  --muted:#9AA7B0;
  --muted-2:#68757F;
  --display:'DM Sans',system-ui,sans-serif;
  --body:'DM Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Referenz-Verlauf (Button-Vorlage): Blau -> Cyan -> Eis -> Weiss, nach oben rechts */
  --g1:#1D82B2; --g2:#3FB2DC; --g3:#A9E6F8; --g4:#FFFFFF;
  --grad:linear-gradient(75deg,var(--g1) 0%,var(--g2) 48%,var(--g3) 78%,var(--g4) 100%);
  --logo-img:url("data:image/svg+xml,%3Csvg viewBox=%22-12 -3 803 156%22 fill=%22%23FFFFFF%22 role=%22img%22 aria-label=%22centron%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M88.6434 117.455C91.7697 117.455 93.7738 131.84 93.9295 139.273C94.0367 144.389 75.8157 149.719 54.2906 149.719C27.9712 149.719 26.0122 146.157 16.0479 140.002C3.7378 128.903 0 115.122 0 91.2699C0 65.0207 4.89965 54.1374 15.917 43.8388C22.166 37.9974 33.3493 33.3453 46.5816 32.5467C69.352 31.9709 93.2749 36.2033 93.2749 43.6566C92.2808 53.2815 91.19 64.895 87.8117 65.0333C63.0494 62.8493 51.6755 62.5839 46.773 65.0631C39.2712 68.8568 35.8536 77.2173 35.8536 90.9062C35.8536 107.448 38.9522 114.386 46.1116 117.765C51.3628 119.827 69.908 118.761 88.6434 117.455Z%22/%3E%3Cpath fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M142.485 99.6254L202.831 99.6254C209.959 97.6242 210.926 91.8397 210.926 87.7178C210.926 47.9802 193.984 32.7319 158.435 32.7319C131.489 32.7319 111.495 44.9445 107.525 78.7868L107.525 99.6254C107.525 139.31 135.173 155.945 180.85 148.115C192.139 146.18 198.377 144.97 202.718 141.837C204.307 140.691 204.496 138.915 203.961 134.878L201.701 121.786C200.807 118.43 199.432 118.269 195.941 118.43C194.668 118.489 192.483 118.726 189.727 119.025C182.758 119.78 172.138 120.931 163.391 120.599C150.811 120.122 144.368 115.002 142.485 99.6254ZM143.232 78.8681L175.307 78.8681C174.612 66.2889 169.852 59.5705 159.59 59.5701C148.248 59.8135 143.883 66.056 143.232 78.8681Z%22/%3E%3Cpath d=%22M232.813 34.9721L230.438 37.5566V144.492V144.958V145.424C230.438 146.198 231.805 147.838 233.562 147.838H262.498C263.411 147.838 265.075 145.875 265.075 145.261V72.0556C286.089 63.6971 296.683 61.5343 301.433 76.0111V145.261C301.433 145.957 302.141 147.838 304.01 147.838H333.173C334.635 147.838 335.597 146.71 335.597 145.414V64.8578C335.597 59.6282 334 52.2188 330.239 45.7423C319.664 27.5334 286.68 30.0306 264.842 45.7423V38.3539C264.842 36.4339 262.978 34.9721 260.496 34.9721H232.813Z%22/%3E%3Cpath d=%22M675.481 34.9721L673.105 37.5566V144.492V144.958V145.424C673.105 146.198 674.473 147.838 676.23 147.838H705.166C706.079 147.838 707.743 145.875 707.743 145.261V72.0556C728.757 63.6971 739.351 61.5343 744.101 76.0111V145.261C744.101 145.957 744.809 147.838 746.678 147.838H775.841C777.303 147.838 778.265 146.71 778.265 145.414V64.8578C778.265 59.6282 776.668 52.2188 772.907 45.7423C762.332 27.5334 729.348 30.0306 707.51 45.7423V38.3539C707.51 36.4339 705.646 34.9721 703.164 34.9721H675.481Z%22/%3E%3Cpath d=%22M367.379 10.8092V34.8449H355.145C354.098 34.8449 352.328 36.0137 352.328 37.6621V58.9534C352.328 60.3614 353.364 61.7658 355.141 61.7658H367.175L367.751 123.009C367.751 136.353 377.955 149.278 397.248 149.278H408.347C420.406 149.278 438.279 145.206 438.279 141.15C438.279 134.186 437.556 127.142 435.844 118.164C435.579 116.901 434.757 116.716 433.367 116.716H408.347C405.558 116.716 401.495 113.144 401.495 109.412L401.051 61.7658H426.59C428.477 61.7658 429.164 60.9127 429.164 59.1918V38.4306C429.164 35.7156 428.316 34.8449 425.578 34.8449H401.051C401.092 21.5986 401.045 1.84586 401.045 1.3805C401.045 1.3805 399.302 -1.34669 393.484 0.865209L370.84 6.95465C368.855 7.68642 367.379 9.30058 367.379 10.8092Z%22/%3E%3Cpath d=%22M459.535 34.8638C457.051 34.8638 454.746 35.6981 454.746 37.0011L454.559 144.206C454.559 145.901 456.042 148.016 458.369 148.016H485.453C487.975 148.016 489.723 146.144 489.723 143.746V78.2026C502.967 73.402 515.099 70.6526 529.232 67.6448C532.235 66.545 533.966 65.6257 533.508 62.6077L530.52 36.6022C530.33 35.0894 529.461 33.4985 527.475 33.4985C516.252 33.4985 504.761 39.193 489.415 51.041V38.821C489.415 36.7301 488.473 34.8638 486.786 34.8638H459.535Z%22/%3E%3Cpath fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M646.192 57.7492C638.998 40.4491 619.036 32.4125 599.059 32.6338L599.059 32.6337C579.085 32.4156 559.13 40.4525 551.937 57.7492C541.872 81.9542 545.14 108.894 551.272 124.071C557.168 142.044 578.166 150.047 599.059 149.761L599.059 149.761C619.955 150.05 640.96 142.048 646.857 124.071C652.989 108.894 656.257 81.9542 646.192 57.7492ZM599.059 119.922L599.059 119.921L599.129 119.921C612.313 119.921 616.531 112.189 616.792 92.3097L616.805 92.3097C616.805 91.9638 616.804 91.6214 616.802 91.2824C616.804 90.9434 616.805 90.601 616.805 90.2552L616.792 90.2552C616.531 70.376 612.313 62.6443 599.129 62.6443L599.059 62.6444L599.059 62.6458L599.008 62.6457C585.824 62.6457 581.606 70.3775 581.344 90.2567L581.331 90.2567C581.331 90.6025 581.332 90.9449 581.334 91.2839C581.332 91.6229 581.331 91.9653 581.331 92.3111L581.344 92.3111C581.606 112.19 585.824 119.922 599.008 119.922L599.059 119.922Z%22/%3E%3C/svg%3E");
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 12px 30px rgba(0,0,0,.45);
  --shadow-lg:0 30px 70px rgba(0,0,0,.6);
  --maxw:1180px;
  /* Theme-abhaengige Rollen (Dark-Default) */
  --heading:#FFFFFF;
  --nav-bg:rgba(15,17,18,.7);
  --nav-bg-scrolled:rgba(15,17,18,.85);
  --hover-bg:rgba(255,255,255,.06);
  --chip-bg:rgba(255,255,255,.08);
  --chip-line:rgba(255,255,255,.15);
  --accent-text:var(--primary-bright);
  --accent-soft:var(--cyan);
  --btn-contrast-bg:#FFFFFF;
  --btn-contrast-fg:#0F1112;
  --btn-ghost-bg:rgba(255,255,255,.06);
  --btn-ghost-bg-h:rgba(255,255,255,.12);
  --footer-bg:#0A0C0D;
  --cta-shade:rgba(15,17,18,.35);
  --cta-fg:#FFFFFF;
  --cta-fg-soft:rgba(255,255,255,.85);
  --cta-fg-fine:rgba(255,255,255,.6);
  --h1-shadow:0 2px 30px rgba(0,0,0,.45);
  color-scheme:dark;
}
/* ============ Light Mode: Flaechen & Text hell, Blautoene identisch ============ */
html[data-theme="light"]{
  --bg:#FFFFFF;
  --bg-soft:#F4F9FC;
  --surface:#FFFFFF;
  --surface-2:#F1F7FA;
  --line:#DEE8EE;
  --line-soft:rgba(13,42,58,.09);
  --text:#0E2433;
  --muted:#445866;
  --muted-2:#7587933;
  --muted-2:#75879377;
  --muted-2:#758793;
  --heading:#0E2433;
  --shadow-sm:0 1px 2px rgba(13,42,58,.08);
  --shadow-md:0 12px 30px rgba(13,42,58,.12);
  --shadow-lg:0 30px 70px rgba(13,42,58,.16);
  --nav-bg:rgba(255,255,255,.72);
  --nav-bg-scrolled:rgba(255,255,255,.88);
  --hover-bg:rgba(13,42,58,.05);
  --chip-bg:rgba(255,255,255,.65);
  --chip-line:rgba(13,42,58,.12);
  --accent-text:var(--g1);
  --accent-soft:var(--g2);
  --btn-contrast-bg:#0E2433;
  --btn-contrast-fg:#FFFFFF;
  --btn-ghost-bg:rgba(13,42,58,.05);
  --btn-ghost-bg-h:rgba(13,42,58,.1);
  --footer-bg:#F4F9FC;
  --cta-shade:rgba(255,255,255,.3);
  --cta-fg:#0E2433;
  --cta-fg-soft:rgba(14,36,51,.85);
  --cta-fg-fine:rgba(14,36,51,.6);
  --h1-shadow:none;
  --logo-img:url("data:image/svg+xml,%3Csvg viewBox=%22-12 -3 803 156%22 fill=%22%23000000%22 role=%22img%22 aria-label=%22centron%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M88.6434 117.455C91.7697 117.455 93.7738 131.84 93.9295 139.273C94.0367 144.389 75.8157 149.719 54.2906 149.719C27.9712 149.719 26.0122 146.157 16.0479 140.002C3.7378 128.903 0 115.122 0 91.2699C0 65.0207 4.89965 54.1374 15.917 43.8388C22.166 37.9974 33.3493 33.3453 46.5816 32.5467C69.352 31.9709 93.2749 36.2033 93.2749 43.6566C92.2808 53.2815 91.19 64.895 87.8117 65.0333C63.0494 62.8493 51.6755 62.5839 46.773 65.0631C39.2712 68.8568 35.8536 77.2173 35.8536 90.9062C35.8536 107.448 38.9522 114.386 46.1116 117.765C51.3628 119.827 69.908 118.761 88.6434 117.455Z%22/%3E%3Cpath fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M142.485 99.6254L202.831 99.6254C209.959 97.6242 210.926 91.8397 210.926 87.7178C210.926 47.9802 193.984 32.7319 158.435 32.7319C131.489 32.7319 111.495 44.9445 107.525 78.7868L107.525 99.6254C107.525 139.31 135.173 155.945 180.85 148.115C192.139 146.18 198.377 144.97 202.718 141.837C204.307 140.691 204.496 138.915 203.961 134.878L201.701 121.786C200.807 118.43 199.432 118.269 195.941 118.43C194.668 118.489 192.483 118.726 189.727 119.025C182.758 119.78 172.138 120.931 163.391 120.599C150.811 120.122 144.368 115.002 142.485 99.6254ZM143.232 78.8681L175.307 78.8681C174.612 66.2889 169.852 59.5705 159.59 59.5701C148.248 59.8135 143.883 66.056 143.232 78.8681Z%22/%3E%3Cpath d=%22M232.813 34.9721L230.438 37.5566V144.492V144.958V145.424C230.438 146.198 231.805 147.838 233.562 147.838H262.498C263.411 147.838 265.075 145.875 265.075 145.261V72.0556C286.089 63.6971 296.683 61.5343 301.433 76.0111V145.261C301.433 145.957 302.141 147.838 304.01 147.838H333.173C334.635 147.838 335.597 146.71 335.597 145.414V64.8578C335.597 59.6282 334 52.2188 330.239 45.7423C319.664 27.5334 286.68 30.0306 264.842 45.7423V38.3539C264.842 36.4339 262.978 34.9721 260.496 34.9721H232.813Z%22/%3E%3Cpath d=%22M675.481 34.9721L673.105 37.5566V144.492V144.958V145.424C673.105 146.198 674.473 147.838 676.23 147.838H705.166C706.079 147.838 707.743 145.875 707.743 145.261V72.0556C728.757 63.6971 739.351 61.5343 744.101 76.0111V145.261C744.101 145.957 744.809 147.838 746.678 147.838H775.841C777.303 147.838 778.265 146.71 778.265 145.414V64.8578C778.265 59.6282 776.668 52.2188 772.907 45.7423C762.332 27.5334 729.348 30.0306 707.51 45.7423V38.3539C707.51 36.4339 705.646 34.9721 703.164 34.9721H675.481Z%22/%3E%3Cpath d=%22M367.379 10.8092V34.8449H355.145C354.098 34.8449 352.328 36.0137 352.328 37.6621V58.9534C352.328 60.3614 353.364 61.7658 355.141 61.7658H367.175L367.751 123.009C367.751 136.353 377.955 149.278 397.248 149.278H408.347C420.406 149.278 438.279 145.206 438.279 141.15C438.279 134.186 437.556 127.142 435.844 118.164C435.579 116.901 434.757 116.716 433.367 116.716H408.347C405.558 116.716 401.495 113.144 401.495 109.412L401.051 61.7658H426.59C428.477 61.7658 429.164 60.9127 429.164 59.1918V38.4306C429.164 35.7156 428.316 34.8449 425.578 34.8449H401.051C401.092 21.5986 401.045 1.84586 401.045 1.3805C401.045 1.3805 399.302 -1.34669 393.484 0.865209L370.84 6.95465C368.855 7.68642 367.379 9.30058 367.379 10.8092Z%22/%3E%3Cpath d=%22M459.535 34.8638C457.051 34.8638 454.746 35.6981 454.746 37.0011L454.559 144.206C454.559 145.901 456.042 148.016 458.369 148.016H485.453C487.975 148.016 489.723 146.144 489.723 143.746V78.2026C502.967 73.402 515.099 70.6526 529.232 67.6448C532.235 66.545 533.966 65.6257 533.508 62.6077L530.52 36.6022C530.33 35.0894 529.461 33.4985 527.475 33.4985C516.252 33.4985 504.761 39.193 489.415 51.041V38.821C489.415 36.7301 488.473 34.8638 486.786 34.8638H459.535Z%22/%3E%3Cpath fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M646.192 57.7492C638.998 40.4491 619.036 32.4125 599.059 32.6338L599.059 32.6337C579.085 32.4156 559.13 40.4525 551.937 57.7492C541.872 81.9542 545.14 108.894 551.272 124.071C557.168 142.044 578.166 150.047 599.059 149.761L599.059 149.761C619.955 150.05 640.96 142.048 646.857 124.071C652.989 108.894 656.257 81.9542 646.192 57.7492ZM599.059 119.922L599.059 119.921L599.129 119.921C612.313 119.921 616.531 112.189 616.792 92.3097L616.805 92.3097C616.805 91.9638 616.804 91.6214 616.802 91.2824C616.804 90.9434 616.805 90.601 616.805 90.2552L616.792 90.2552C616.531 70.376 612.313 62.6443 599.129 62.6443L599.059 62.6444L599.059 62.6458L599.008 62.6457C585.824 62.6457 581.606 70.3775 581.344 90.2567L581.331 90.2567C581.331 90.6025 581.332 90.9449 581.334 91.2839C581.332 91.6229 581.331 91.9653 581.331 92.3111L581.344 92.3111C581.606 112.19 585.824 119.922 599.008 119.922L599.059 119.922Z%22/%3E%3C/svg%3E");
  color-scheme:light;
}
/* Gradient-Headline: im Light Mode ohne Weiss-Auslauf (gleiche Blautoene) */
html[data-theme="light"] .hero h1 .grad{background:linear-gradient(75deg,#0B5C80,var(--g1) 55%,var(--g2));-webkit-background-clip:text;background-clip:text}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--text);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;line-height:1.12;color:var(--text)}
.eyebrow{font-family:var(--display);font-weight:600;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}

/* ---------- Scroll-Reveal (Stripe-typisch: sanftes Aufsteigen) ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--body);font-weight:600;font-size:.95rem;border-radius:6px;padding:.72rem 1.4rem;border:0;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;white-space:nowrap}
.btn svg{transition:transform .15s ease}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:linear-gradient(75deg,var(--g1) 0%,var(--g2) 55%,var(--g4) 130%);color:#fff}
.btn-primary:hover{background:linear-gradient(75deg,#2496C8 0%,#54C2E8 55%,var(--g4) 125%);transform:translateY(-1px);box-shadow:0 10px 26px rgba(32,140,188,.45)}
.btn-white{background:var(--btn-contrast-bg);color:var(--btn-contrast-fg)}
.btn-white:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-outline{background:var(--btn-ghost-bg);color:var(--text);border:1px solid var(--line)}
.btn-outline:hover{background:var(--btn-ghost-bg-h);transform:translateY(-1px)}
.link-arrow{font-weight:600;color:var(--accent-text);display:inline-flex;align-items:center;gap:.35rem}
.link-arrow svg{transition:transform .15s ease}
.link-arrow:hover svg{transform:translateX(3px)}

/* ---------- Nav ---------- */
header.nav{position:sticky;top:0;z-index:60;background:var(--nav-bg);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s,background .2s}
header.nav.scrolled{border-bottom-color:var(--line-soft);background:var(--nav-bg-scrolled)}
.nav-inner{display:flex;align-items:center;gap:2rem;height:66px}
.brand{display:block;width:118px;height:23px;background:var(--logo-img) left center/contain no-repeat;text-indent:-9999px;overflow:hidden;flex-shrink:0}
.brand span{display:none}
.nav-links{display:flex;align-items:center;gap:.15rem;flex:1;min-width:0}
.nav-item{position:relative}
.nav-item>a{font-size:.9rem;font-weight:500;color:var(--muted);padding:.5rem .55rem;border-radius:8px;transition:color .15s,background .15s;display:inline-flex;align-items:center;gap:.24rem;white-space:nowrap}
.nav-item>a:hover{color:var(--heading);background:var(--hover-bg)}
.nav-item>a svg{opacity:.55;transition:transform .2s}
.nav-item:hover>a svg,.nav-item.pinned>a svg{transform:rotate(180deg)}
.nav-toggle{cursor:pointer}
/* Mega-Dropdown (Stripe-typisch: schwebendes Panel mit Pfeil) */
.mega{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,8px);min-width:520px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:22px;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;z-index:70}
.mega::before{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(45deg);width:14px;height:14px;background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line);border-radius:3px 0 0 0}
.nav-item:hover .mega,.nav-item:focus-within .mega,.nav-item.pinned .mega{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
/* Zwei-Spalten-Variante: Kategorien links, Inhalte rechts */
.mega2{position:absolute;top:calc(100% + 10px);left:-70px;width:min(780px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:14px;display:flex;gap:14px;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease;z-index:70}
.mega2::before{content:"";position:absolute;top:-7px;left:106px;transform:rotate(45deg);width:14px;height:14px;background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line);border-radius:3px 0 0 0}
.nav-item:hover .mega2,.nav-item:focus-within .mega2,.nav-item.pinned .mega2{opacity:1;pointer-events:auto;transform:translateY(0)}
.m2-side{width:212px;flex-shrink:0;background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:2px}
.m2-cat{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.62rem .8rem;border-radius:9px;font-family:var(--body);font-weight:600;font-size:.9rem;color:var(--muted);background:none;border:0;cursor:pointer;text-align:left;transition:background .15s,color .15s}
.m2-cat:hover{color:var(--text);background:var(--hover-bg)}
.m2-cat svg{opacity:0;flex-shrink:0;transition:opacity .15s}
.m2-cat.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
.m2-cat.on svg{opacity:1}
.m2-main{flex:1;padding:10px 8px 6px;min-height:270px}
.m2-group{display:none}
.m2-group.on{display:block}
.m2-group h5{font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--heading);margin:0 0 .15rem}
.m2-desc{font-size:.85rem;color:var(--muted-2);margin-bottom:14px}
.m2-items{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.m2-items a{display:flex;gap:.65rem;padding:.6rem .65rem;border-radius:10px;transition:background .15s}
.m2-items a:hover{background:var(--hover-bg)}
.m2-items .mi2{width:30px;height:30px;flex-shrink:0;border-radius:8px;display:grid;place-items:center;background:linear-gradient(75deg,rgba(29,130,178,.2),rgba(63,178,220,.13) 60%,rgba(255,255,255,.08))}
.m2-items b{display:block;font-size:.88rem;color:var(--text)}
.m2-items span{font-size:.78rem;color:var(--muted-2);line-height:1.35;display:block}
.m2-cols{display:grid;grid-template-columns:1fr 1fr;gap:1px 16px}
.m2-cols a{display:block;padding:.34rem .55rem;border-radius:7px;font-size:.86rem;color:var(--muted);transition:background .15s,color .15s}
.m2-cols a:hover{background:var(--hover-bg);color:var(--text)}
.m2-foot{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:center;gap:.35rem;white-space:nowrap;font-size:.88rem}
.m2-note{font-size:.78rem;color:var(--muted-2);margin-top:10px}
.mega a{display:flex;gap:.75rem;padding:.6rem .7rem;border-radius:10px;transition:background .15s}
.mega a:hover{background:var(--hover-bg)}
.mega .mi{width:34px;height:34px;flex-shrink:0;border-radius:9px;display:grid;place-items:center;background:linear-gradient(75deg,rgba(29,130,178,.32),rgba(63,178,220,.22) 60%,rgba(255,255,255,.14));color:var(--accent-text)}
.mega b{display:block;font-size:.9rem;color:var(--text)}
.mega span{font-size:.8rem;color:var(--muted-2)}
.mega .mega-foot{grid-column:1/-1;margin-top:8px;padding-top:14px;border-top:1px solid var(--line);display:block}
.nav-cta{display:flex;align-items:center;gap:.5rem}
.nav-cta .login{font-size:.92rem;font-weight:600;color:var(--heading);padding:.5rem .6rem;display:inline-flex;align-items:center;gap:.3rem}
.nav-cta .login:hover{color:var(--primary-bright)}
.theme-toggle{width:38px;height:38px;border-radius:999px;border:1px solid var(--line);background:var(--btn-ghost-bg);color:var(--heading);display:grid;place-items:center;cursor:pointer;transition:background .15s,transform .15s}
.theme-toggle:hover{background:var(--btn-ghost-bg-h);transform:translateY(-1px)}
.theme-toggle .ic-sun{display:none}
html[data-theme="light"] .theme-toggle .ic-sun{display:block}
html[data-theme="light"] .theme-toggle .ic-moon{display:none}
.burger{display:none;background:none;border:0;cursor:pointer;padding:.4rem}
.burger span{display:block;width:22px;height:2px;background:var(--heading);margin:4px 0;border-radius:2px}

/* ---------- Hero mit animiertem Seiden-Band (WebGL) ---------- */
.hero{position:relative;overflow:hidden;padding-top:70px;padding-bottom:120px}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.silk-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Fließender Canvas-Verlauf (CTA-Band): kleines internes Raster, weich hochskaliert */
.gradient-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:auto}

.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;padding-top:70px}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--chip-bg);border:1px solid var(--chip-line);backdrop-filter:blur(6px);color:var(--text);font-weight:600;font-size:.82rem;padding:.4rem .85rem;border-radius:999px;margin-bottom:1.5rem}
.hero-badge b{color:var(--accent-text)}
.hero-badge .pulse{width:8px;height:8px;border-radius:50%;background:var(--accent-soft);position:relative}
.hero-badge .pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--accent-soft);opacity:.6;animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.6);opacity:0}}
.hero h1{font-size:clamp(2.6rem,5.4vw,4.2rem);font-weight:800;color:var(--heading);text-shadow:var(--h1-shadow);max-width:15ch}
.hero h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{margin-top:1.25rem;font-size:1.14rem;color:var(--muted);max-width:46ch}
html:not([data-theme="light"]) .hero p.lead{color:rgba(242,246,248,.9)}
.hero-actions{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}

/* Schwebendes Dashboard-Mockup (Stripe-typisch: UI-Karte im Hero, leicht gedreht) */
.hero-visual{position:relative;perspective:1200px}
.dash{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;transform:rotateY(-8deg) rotateX(3deg);transform-style:preserve-3d;animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:rotateY(-8deg) rotateX(3deg) translateY(0)}50%{transform:rotateY(-8deg) rotateX(3deg) translateY(-12px)}}
.dash-top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.dash-top .dt-l{display:flex;align-items:center;gap:.6rem;font-weight:600;font-size:.88rem}
.dash-top .dot{width:9px;height:9px;border-radius:50%;background:#3ED598;box-shadow:0 0 8px #3ED598}
.dash-top .dt-r{font-size:.78rem;color:var(--muted-2)}
.dash-body{padding:18px}
.dash-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kpi{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.kpi .k-label{font-size:.72rem;color:var(--muted-2);text-transform:uppercase;letter-spacing:.05em}
.kpi .k-val{font-family:var(--display);font-weight:700;font-size:1.15rem;margin-top:.15rem}
.kpi .k-val em{font-style:normal;font-size:.72rem;color:#3ED598;margin-left:.3rem}
.chart{margin-top:14px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:14px}
.chart .c-head{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted-2);margin-bottom:8px}
.chart svg .area{fill:url(#gradA)}
.chart svg .lineP{stroke:var(--primary-bright);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600;animation:draw 2.4s .5s cubic-bezier(.4,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.rows{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.row{display:flex;align-items:center;justify-content:space-between;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:.82rem}
.row .r-l{display:flex;align-items:center;gap:.6rem}
.row .r-ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:rgba(32,140,188,.18);color:var(--primary-bright);font-size:.72rem;font-weight:700}
.row .ok{color:#3ED598;font-weight:600;font-size:.76rem}
/* kleine schwebende Benachrichtigung */
.toast{position:absolute;right:-14px;bottom:34px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-md);padding:12px 16px;display:flex;gap:.7rem;align-items:center;animation:float 7s 1.2s ease-in-out infinite}
.toast .t-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(75deg,var(--g1),var(--g2) 60%,var(--g3));color:#fff}
.toast b{display:block;font-size:.85rem}
.toast span{font-size:.75rem;color:var(--muted-2)}

/* ---------- Logo-/Trust-Leiste ---------- */
.logos{padding:40px 0 10px;position:relative;z-index:2}
.logos .l-label{text-align:center;color:var(--muted-2);font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:22px}
.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:56px;width:max-content;animation:scroll 32s linear infinite}
@keyframes scroll{to{transform:translateX(-50%)}}
.marquee .badge{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;color:var(--muted);font-size:.95rem;white-space:nowrap}
.marquee .badge .dot{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--primary-bright)}
.marquee .c-logo{height:32px;width:auto;flex:none;align-self:center;margin-right:44px;filter:brightness(0) invert(1);opacity:.7;transition:opacity .25s}
.marquee .c-logo:hover{opacity:1}
html[data-theme="light"] .marquee .c-logo{filter:brightness(0);opacity:.55}
.marquee .c-logo[src*="minges"]{filter:grayscale(1)}
html[data-theme="light"] .marquee .c-logo[src*="minges"]{filter:grayscale(1);opacity:.75}
.marquee-track:has(.c-logo){gap:0;animation-duration:70s}

/* ---------- Sections ---------- */
section{padding:96px 0}
.section-head{max-width:660px}
.section-head h2{font-size:clamp(1.9rem,3.5vw,2.7rem);font-weight:700;margin-top:.7rem}
.section-head p{margin-top:1rem;color:var(--muted);font-size:1.08rem}
.center{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- Split mit Code-Panel (Stripe-typisch) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.code-panel{background:#0A0C0D;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden;font-family:var(--mono)}
.code-panel .cp-tabs{display:flex;gap:2px;background:#080A0B;border-bottom:1px solid var(--line);padding:8px 10px 0}
.code-panel .cp-tab{font-size:.75rem;padding:.45rem .9rem;color:var(--muted-2);border-radius:8px 8px 0 0;cursor:default}
.code-panel .cp-tab.active{background:#0A0C0D;color:var(--text);border:1px solid var(--line);border-bottom-color:#0A0C0D}
.code-panel pre{margin:0;padding:18px;font-size:.8rem;line-height:1.75;color:#C8D3DA;white-space:pre-wrap}
.c-k{color:#6FC7EE}.c-s{color:#7DD3A0}.c-f{color:#B9A6F2}.c-c{color:#5A6870}.c-n{color:#F0B26B}
.typing-caret{display:inline-block;width:8px;height:14px;background:var(--primary-bright);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- Feature-Karten ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:52px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:52px}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;padding:1px;background:linear-gradient(75deg,rgba(29,130,178,.6),transparent 40%,transparent 60%,rgba(255,255,255,.5));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .25s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.card:hover::before{opacity:1}
.card .ic{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;margin-bottom:16px;background:linear-gradient(75deg,rgba(29,130,178,.32),rgba(63,178,220,.2) 60%,rgba(255,255,255,.12));color:var(--accent-text)}
.card h3{font-size:1.15rem;font-weight:700}
.card p{margin-top:.55rem;color:var(--muted);font-size:.96rem}
.card .foot{margin-top:1.1rem}
.card .tag{font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-text)}

/* ---------- Stats ---------- */
/* ---------- Backbone: Stat-Buehne mit morphendem Partikelsystem ----------
   Theme-aware: hell = weisse Buehne mit blauen Partikeln, dunkel = blaue Buehne */
.backbone{position:relative;overflow:hidden;padding:0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  --bb-int:4.2s;
  --bb-h:#fff;--bb-num:#B9D4E6;--bb-num-on:#fff;--bb-lab:#8FB3CB;--bb-lab-on:#DCEBF5;
  --bb-line:rgba(255,255,255,.16);--bb-bar:#A9E6F8;
  background:linear-gradient(180deg,#0A1520 0%,#0C3049 42%,#14567C 78%,#1D82B2 130%)}
html[data-theme="light"] .backbone{
  --bb-h:#0E2433;--bb-num:#A7BDCD;--bb-num-on:#0E2433;--bb-lab:#93A9B9;--bb-lab-on:#445866;
  --bb-line:rgba(13,42,58,.12);--bb-bar:#1D82B2;
  background:#fff}
.bb-head{padding:88px 24px 0;text-align:center}
.bb-head h2{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:700;color:var(--bb-h);max-width:22ch;margin:0 auto}
.bb-grid{max-width:var(--maxw);margin:64px auto 0;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr)}
.bb-stat{position:relative;padding:16px 26px 6px;border-left:1px solid var(--bb-line);transition:opacity .6s ease}
.bb-stat:first-child{border-left:0}
.bb-stat::after{content:"";position:absolute;left:26px;right:26px;top:0;height:2px;border-radius:2px;background:var(--bb-bar);transform:scaleX(0);transform-origin:left}
.bb-stat.on::after{animation:bbfill var(--bb-int) linear forwards}
@keyframes bbfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.bb-stat .num{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,3.4vw,2.7rem);letter-spacing:-.03em;color:var(--bb-num);transition:color .6s ease}
.bb-stat .label{margin-top:.3rem;font-size:.9rem;color:var(--bb-lab);transition:color .6s ease;line-height:1.4}
.bb-stat.on .num{color:var(--bb-num-on)}
.bb-stat.on .label{color:var(--bb-lab-on)}
.bb-canvas{display:block;width:100%;height:440px;margin-top:8px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat .num{font-family:var(--display);font-weight:800;font-size:clamp(2rem,3.6vw,2.8rem);color:var(--heading);letter-spacing:-.03em}
.stat .num em{font-style:normal;color:var(--accent-text)}
.stat .label{margin-top:.25rem;font-size:.92rem;color:var(--muted)}

/* ---------- Testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.quote{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
.quote:hover{transform:translateY(-4px);border-color:rgba(32,140,188,.5)}
.quote .stars{color:var(--accent-soft);letter-spacing:2px;font-size:.95rem}
.quote h4{font-family:var(--display);font-weight:600;font-size:1.05rem;margin:.9rem 0 .6rem;color:var(--heading)}
.quote p{color:var(--muted);font-size:.95rem;flex:1}
.quote .who{margin-top:1.3rem;display:flex;align-items:center;gap:.75rem}
.quote .who .av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:700;color:#fff;background:linear-gradient(75deg,var(--g1),var(--g2));font-size:.95rem}
.quote .who b{display:block;font-size:.92rem;color:var(--text)}
.quote .who span{font-size:.85rem;color:var(--muted-2)}

/* ---------- Blog ---------- */
.blog{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.post{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);transition:transform .2s,box-shadow .2s}
.post:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.post .thumb{aspect-ratio:840/610;min-height:150px;overflow:hidden;background:linear-gradient(75deg,var(--g1),var(--g2) 55%,var(--g3) 105%)}
.post .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.post .thumb.b{background:linear-gradient(75deg,#0B5C80,var(--g1) 60%,var(--g2))}
.post .thumb.c{background:linear-gradient(75deg,var(--g2),var(--g3) 60%,var(--g4))}
.post .body{padding:22px}
.post .cat{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-text)}
.post h3{font-size:1.06rem;font-weight:700;margin:.5rem 0;line-height:1.25}
.post p{color:var(--muted);font-size:.9rem}
.post .meta{margin-top:.9rem;font-size:.8rem;color:var(--muted-2)}

/* ---------- Big CTA mit animiertem Band ---------- */
.cta-band{position:relative;overflow:hidden;border-radius:24px;padding:70px 52px;border:1px solid var(--line)}
.cta-band .cta-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--bg-soft)}
.cta-band .cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,var(--cta-shade),transparent 30%,transparent 70%,var(--cta-shade))}
.cta-band .inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(1.8rem,3.2vw,2.4rem);font-weight:700;max-width:20ch;color:var(--cta-fg)}
.cta-band p{margin-top:.7rem;color:var(--cta-fg-soft);max-width:44ch}
.cta-band .fine{margin-top:.6rem;font-size:.8rem;color:var(--cta-fg-fine)}

/* ---------- Footer ---------- */
footer{background:var(--footer-bg);color:var(--muted);padding:76px 0 36px;border-top:1px solid var(--line-soft)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.foot-brand .brand{width:132px;height:26px}
.foot-brand p{margin-top:1rem;font-size:.92rem;color:var(--muted-2);max-width:34ch}
.foot-brand .socials{margin-top:1.4rem;display:flex;gap:.6rem}
.foot-brand .socials a{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;background:var(--hover-bg);color:var(--muted);transition:background .15s,color .15s}
.foot-brand .socials a:hover{background:var(--primary);color:#fff}
.foot-col h4{color:var(--heading);font-family:var(--display);font-size:.85rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-bottom:1rem}
.foot-col a{display:block;font-size:.92rem;color:var(--muted-2);padding:.28rem 0;transition:color .15s}
.foot-col a:hover{color:var(--heading)}
.foot-bottom{margin-top:52px;padding-top:26px;border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--muted-2)}
.foot-bottom .legal{display:flex;gap:18px;flex-wrap:wrap}
.foot-bottom a:hover{color:var(--heading)}
.foot-note{margin-top:20px;font-size:.78rem;color:#4E5A63;line-height:1.6}

/* ---------- Stack-Section: dunkles Integrations-Diagramm ---------- */
.stack{position:relative;background:#0A1428;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);overflow:hidden}
.stack::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(129,178,210,.13) 1px,transparent 1.3px);background-size:22px 22px;pointer-events:none}
.stack .wrap{position:relative}
.stack h2{color:#fff;font-size:clamp(1.4rem,2.5vw,1.9rem);font-weight:700;max-width:38ch;line-height:1.4}
.stack h2 span{color:#8FB3CB;font-weight:600}
.stack .st-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.5rem}
.stack .btn-outline{color:#fff;border-color:rgba(255,255,255,.32)}
.stack .btn-outline:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.06)}
.stack .st-divider{height:1px;background:rgba(143,179,203,.18);margin:44px 0}
.stack .st-lead{color:#fff;font-weight:700;font-size:1.02rem;max-width:56ch;line-height:1.6}
.stack .st-lead span{color:#8FB3CB;font-weight:500}
.stack-diagram{position:relative;margin:46px auto 8px;aspect-ratio:900/440;max-width:900px}
.stack-diagram .wires{position:absolute;inset:0;width:100%;height:100%}
.stack-diagram .wires path{fill:none;stroke:rgba(129,178,210,.32);stroke-width:1.5}
.stack-diagram .wires path.pulse{stroke:var(--g3);stroke-width:2;stroke-dasharray:7 140;animation:wiredash 3.4s linear infinite;opacity:.85}
@keyframes wiredash{to{stroke-dashoffset:-294}}
.nd{position:absolute;transform:translate(-50%,-50%);background:linear-gradient(75deg,var(--g1),#2B9CCB);color:#fff;font-size:.74rem;font-weight:700;padding:.42rem .72rem;border-radius:8px;white-space:nowrap;box-shadow:0 4px 14px rgba(6,24,38,.45)}
.nd.ghost{background:none;border:1.5px dashed rgba(143,179,203,.4);color:#9FC2DA;box-shadow:none;transition:opacity .35s}
.nd.ghost.empty{width:50px;height:30px;padding:0}
.nd.ghost.fade{opacity:.15}
.nd-center{position:absolute;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:14px;display:grid;place-items:center;background:#0E2233;border:1px solid rgba(143,203,235,.4);box-shadow:0 0 0 6px rgba(29,130,178,.12),0 10px 26px rgba(6,24,38,.5)}
.nd-center b{font-family:var(--display);font-weight:800;font-size:1.6rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.nd-center img{width:24px;height:auto;display:block}
.tilegrid{position:absolute;transform:translate(-50%,-50%);display:grid;grid-template-columns:46px 46px;gap:8px;perspective:520px}
.dstwrap{position:absolute;transform:translate(-50%,-50%);perspective:520px}
.tile{width:46px;height:46px;border-radius:10px;background:#fff;display:grid;place-items:center;font-size:.55rem;font-weight:800;color:#12293A;text-align:center;line-height:1.15;padding:2px;box-shadow:0 4px 12px rgba(6,24,38,.4);transition:transform .42s cubic-bezier(.45,.1,.55,.9);will-change:transform;backface-visibility:hidden}
.tile img{width:26px;height:26px;display:block}
.tile.flip{transform:rotateY(90deg)}
@media(max-width:760px){.nd{font-size:.58rem;padding:.3rem .5rem}.nd.ghost.empty{width:36px;height:24px}.tile{width:36px;height:36px;font-size:.46rem}.tile img{width:20px;height:20px}.tilegrid{grid-template-columns:36px 36px;gap:6px}.nd-center{width:50px;height:50px}.nd-center b{font-size:1.25rem}.nd-center img{width:19px}}
/* ---------- Pricing-Seite ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s,border-color .18s}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--g2)}
.pcard .p-top{display:flex;align-items:center;gap:.7rem}
.pcard .p-name{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--heading)}
.pcard .p-from{font-size:.76rem;color:var(--muted-2);margin-top:1rem;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.pcard .p-price{font-family:var(--display);font-weight:800;font-size:2rem;letter-spacing:-.03em;color:var(--heading);line-height:1.1}
.pcard .p-price small{font-family:var(--body);font-weight:500;font-size:.85rem;color:var(--muted-2);letter-spacing:0}
.pcard .p-tag{font-size:.92rem;font-weight:600;color:var(--text);margin-top:.7rem;line-height:1.4}
.pcard ul{list-style:none;margin:0;margin-top:.7rem;padding:0;flex:1}
.pcard li{font-size:.87rem;color:var(--muted);padding:.24rem 0 .24rem 1.4rem;position:relative}
.pcard li::before{content:"";position:absolute;left:0;top:.52rem;width:.85rem;height:.85rem;border-radius:50%;background:linear-gradient(75deg,rgba(29,130,178,.25),rgba(63,178,220,.18))}
.pcard li::after{content:"";position:absolute;left:.22rem;top:.74rem;width:.42rem;height:.22rem;border-left:1.6px solid var(--accent-text);border-bottom:1.6px solid var(--accent-text);transform:rotate(-45deg)}
.pcard .foot{margin-top:1.1rem}
/* FAQ */
.faq{max-width:780px;margin:52px auto 0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.05rem .2rem;font-family:var(--display);font-weight:600;font-size:1rem;color:var(--heading)}.faq summary h3{margin:0;font:inherit;color:inherit;letter-spacing:inherit;line-height:inherit}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--body);font-weight:500;font-size:1.4rem;color:var(--accent-text);line-height:1;transition:transform .2s;flex-shrink:0}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 .2rem 1.2rem;color:var(--muted);font-size:.95rem;max-width:64ch}
/* Benefits */
.benefit-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px 40px;margin-top:36px}
.benefit-cols .b-item{display:flex;gap:.7rem;align-items:flex-start;font-size:.97rem;color:var(--muted);padding:.35rem 0}
.benefit-cols .b-item .bi{flex-shrink:0;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:linear-gradient(75deg,rgba(29,130,178,.25),rgba(63,178,220,.16));color:var(--accent-text);font-size:.7rem;font-weight:700;margin-top:.1rem}
@media(max-width:960px){.price-grid{grid-template-columns:1fr 1fr}.benefit-cols{grid-template-columns:1fr}}
@media(max-width:560px){.price-grid{grid-template-columns:1fr}}
/* ---------- Preistabellen (Tarif-Detailseiten) ---------- */
section[id]{scroll-margin-top:84px}
.anchor-nav{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.6rem}
.anchor-nav a{font-size:.85rem;font-weight:600;color:var(--text);background:var(--btn-ghost-bg);border:1px solid var(--line);border-radius:999px;padding:.42rem .95rem;transition:background .15s,border-color .15s}
.anchor-nav a:hover{background:var(--btn-ghost-bg-h);border-color:var(--g2)}
.tbl-wrap{overflow-x:auto;margin-top:22px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table.tbl{width:100%;border-collapse:collapse;font-size:.93rem;min-width:520px}
.tbl th{text-align:left;font-family:var(--display);font-weight:600;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);padding:.85rem 1.15rem;border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
.tbl td{padding:.82rem 1.15rem;border-bottom:1px solid var(--line);color:var(--muted)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover{background:var(--hover-bg)}
.tbl .t-name{color:var(--heading);font-weight:600}
.tbl .t-price{color:var(--accent-text);font-weight:700;white-space:nowrap}
.tbl .t-go{text-align:right}
.tbl .t-go a{color:var(--accent-text);font-weight:700}
.pool-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.tbl-label{margin-top:26px;font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--heading)}
/* ---------- Produktseiten ---------- */
.check-list{list-style:none;margin:1.4rem 0 0;padding:0}
.check-list li{font-size:.98rem;color:var(--muted);padding:.32rem 0 .32rem 1.7rem;position:relative}
.check-list li::before{content:"";position:absolute;left:0;top:.42rem;width:1.05rem;height:1.05rem;border-radius:50%;background:linear-gradient(75deg,rgba(29,130,178,.28),rgba(63,178,220,.2))}
.check-list li::after{content:"";position:absolute;left:.28rem;top:.68rem;width:.5rem;height:.26rem;border-left:1.7px solid var(--accent-text);border-bottom:1.7px solid var(--accent-text);transform:rotate(-45deg)}
.check-list li b{color:var(--text)}
/* Vergleichs-Balken (animieren beim Reveal) */
.bars{margin-top:26px;display:flex;flex-direction:column;gap:14px}
.bar-row{display:grid;grid-template-columns:120px 1fr 74px;gap:14px;align-items:center}
.bar-row .b-label{font-size:.88rem;font-weight:600;color:var(--text);text-align:right}
.bar-row .b-val{font-family:var(--display);font-weight:700;font-size:.92rem;color:var(--muted)}
.bar-track{height:26px;border-radius:7px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.bar-fill{height:100%;width:0;border-radius:6px;background:linear-gradient(75deg,var(--g1),var(--g2));transition:width 1.2s cubic-bezier(.2,.7,.3,1) .2s}
.bar-fill.muted{background:var(--muted-2);opacity:.45}
.rv.in .bar-fill{width:var(--w)}
.bar-row.hero .b-label,.bar-row.hero .b-val{color:var(--accent-text)}
.big-badge{display:inline-flex;flex-direction:column;gap:.1rem;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 20px;margin-top:22px}
.big-badge b{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--accent-text);letter-spacing:-.02em}
.big-badge span{font-size:.8rem;color:var(--muted-2)}
@media(max-width:560px){.bar-row{grid-template-columns:86px 1fr 64px}}
/* ---------- Tutorials: Uebersicht & Artikel ---------- */
.tchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tchip{appearance:none;cursor:pointer;font:inherit;font-size:.84rem;font-weight:600;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:.42rem .9rem;transition:border-color .15s,background .15s}
.tchip b{font-weight:800;color:var(--muted-2);margin-left:.3rem}
.tchip:hover{border-color:var(--g2)}
.tchip.active{border-color:var(--g1);background:linear-gradient(75deg,rgba(29,130,178,.16),rgba(63,178,220,.1));color:var(--heading)}
.tchip.active b{color:var(--accent-text)}
.tsearch{position:relative;max-width:520px;margin-top:18px}
.tsearch input{appearance:none;font:inherit;width:100%;font-size:.95rem;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:.75rem 1rem .75rem 2.6rem;transition:border-color .15s,box-shadow .15s}
.tsearch input:focus{outline:none;border-color:var(--g2);box-shadow:0 0 0 3px rgba(63,178,220,.18)}
.tsearch svg{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);pointer-events:none}
.tut-list{margin-top:34px;display:grid;gap:12px}
.tut-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 22px;transition:border-color .15s,transform .15s}
.tut-row:hover{border-color:var(--g2);transform:translateY(-2px)}
.tut-row h3{font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--heading);line-height:1.4}
.tut-row .tmeta{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.45rem;font-size:.76rem;color:var(--muted-2)}
.tut-row .tcat{font-weight:700;color:var(--accent-text)}
.tut-row .tarrow{flex-shrink:0;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);color:var(--accent-text)}
.tut-row.hide{display:none}
.tut-none{display:none;color:var(--muted-2);font-style:italic;margin-top:24px}
.tut-none.show{display:block}
/* Artikel */
.art-wrap{display:grid;grid-template-columns:250px 1fr;gap:44px;align-items:start}
.art-toc{position:sticky;top:84px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.art-toc h4{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.art-toc ol{list-style:none;margin-top:.7rem;display:grid;gap:.45rem;counter-reset:toc}
.art-toc a{display:flex;gap:.5rem;font-size:.86rem;color:var(--muted);counter-increment:toc;transition:color .15s}
.art-toc a::before{content:counter(toc);font-family:var(--display);font-weight:700;font-size:.72rem;color:var(--accent-text)}
.art-toc a:hover{color:var(--heading)}
.art-meta{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin-top:1.1rem;font-size:.82rem;color:var(--muted-2)}
.art-meta .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(75deg,var(--g1),var(--g2));color:#fff;font-weight:700;font-size:.76rem}
.art-body{max-width:76ch}
.art-body h2{font-family:var(--display);font-weight:700;font-size:1.35rem;color:var(--heading);margin-top:2.4rem;scroll-margin-top:90px}
.art-body p{margin-top:1rem;color:var(--muted);line-height:1.75;font-size:.98rem}
.art-body p b,.art-body li b{color:var(--text)}
.art-body ul{margin:1rem 0 0 1.2rem;color:var(--muted);line-height:1.75;font-size:.98rem}
.art-body li{margin-top:.35rem}
@media(max-width:960px){
  /* minmax(0,1fr) statt 1fr: Eine 1fr-Spalte ist implizit
     min-width:auto und wuchs mit dem Artikelinhalt auf 760px -
     Inhaltsverzeichnis und Text ragten aus dem Viewport
     (Messung 24.08.2026, iPhone 14). */
  .art-wrap{grid-template-columns:minmax(0,1fr)}
  .art-wrap > *{min-width:0}
  /* Das Inhaltsverzeichnis klebt sonst oben und frisst den Schirm */
  .art-toc{position:static}
  .art-body{max-width:none}
  /* Kopier-Knopf der Codebloecke mass 27x27px, die Eintraege im
     Inhaltsverzeichnis nur 19px hoch - beide werden auf dem Telefon
     angetippt. Trefferflaeche auf 44px, Optik bleibt (24.08.2026). */
  /* Optik bleibt kompakt - 44px liessen die Codeblock-Leiste auf
     59px anwachsen. Trefferflaeche unsichtbar per Pseudo-Element. */
  .tcode-copy{position:relative}
  .tcode-copy::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px}
  .art-toc a{min-height:44px;align-items:center}
}
.art-hint{margin-top:1.2rem;padding:.85rem 1rem;border-radius:10px;font-size:.9rem;line-height:1.6;background:linear-gradient(75deg,rgba(29,130,178,.12),rgba(63,178,220,.08));border:1px solid var(--g2);color:var(--text)}
.tcode{margin-top:1.2rem;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--term-bg,#0C1E2B)}
.tcode-bar{display:flex;justify-content:space-between;align-items:center;padding:.5rem .9rem;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08)}
.tcode-bar span{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:#8FB3CB}
.tcode-copy{appearance:none;cursor:pointer;font:inherit;font-size:.72rem;font-weight:700;color:#CFE9F7;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:6px;padding:.24rem .6rem;transition:background .15s}
.tcode-copy:hover{background:rgba(255,255,255,.14)}
.tcode pre{margin:0;padding:.9rem 1rem;overflow-x:auto}
.tcode code{font-family:var(--mono);font-size:.84rem;line-height:1.6;color:#DCEFFA;white-space:pre}
.tcode code .cm{color:#6FA5C4}
/* ---------- Nav: Zwischenstufe fuer schmale Desktops ---------- */
@media(max-width:1280px){
  .nav-item>a{font-size:.84rem;padding:.5rem .42rem;gap:.18rem}
  .nav-item>a svg{width:9px;height:9px}
}
@media(max-width:1120px){
  .nav-item>a{font-size:.8rem;padding:.45rem .34rem}
}
/* ---------- Sales-Kontakt: Formular & Stats ---------- */
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-md)}
.form-card h3{font-family:var(--display);font-weight:700;font-size:1.15rem;color:var(--heading)}
.form-card .f-sub{font-size:.9rem;color:var(--muted);margin-top:.35rem}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.f-field{display:flex;flex-direction:column;gap:.35rem}
.f-field.full{grid-column:1/-1}
.f-field label{font-size:.78rem;font-weight:600;color:var(--text)}
.f-field label small{color:var(--muted-2);font-weight:500}
.f-field input,.f-field select,.f-field textarea{appearance:none;font:inherit;font-size:.92rem;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:.62rem .75rem;transition:border-color .15s,box-shadow .15s;width:100%}
.f-field textarea{min-height:104px;resize:vertical}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{outline:none;border-color:var(--g2);box-shadow:0 0 0 3px rgba(63,178,220,.18)}
.f-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' stroke='%238FA5B5' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;padding-right:2.2rem}
.f-check{display:flex;gap:.6rem;align-items:flex-start;font-size:.8rem;color:var(--muted);grid-column:1/-1}
.f-check input{width:16px;height:16px;margin-top:2px;accent-color:var(--g1);flex-shrink:0}
.f-submit{grid-column:1/-1;margin-top:4px}
.f-submit .btn{width:100%;justify-content:center}
.f-success{display:none;margin-top:18px;padding:14px 16px;border-radius:10px;background:linear-gradient(75deg,rgba(29,130,178,.14),rgba(63,178,220,.1));border:1px solid var(--g2);color:var(--text);font-size:.92rem}
.f-success.show{display:block}
.cstats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px}
.cstat{border-left:1px solid var(--line);padding:4px 24px}
.cstat:first-child{border-left:0}
.cstat b{display:block;font-family:var(--display);font-weight:800;font-size:2rem;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cstat span{display:block;margin-top:.4rem;font-size:.88rem;color:var(--muted);line-height:1.45}
@media(max-width:900px){.cstats{grid-template-columns:1fr 1fr;gap:20px 0}.cstat:nth-child(3){border-left:0}}
@media(max-width:640px){.f-grid{grid-template-columns:1fr}}
/* ---------- Responsive ---------- */
@media(max-width:960px){
  .nav-links{display:none}
  /* Der Burger behaelt seine kompakte Optik (22px Icon, enge Balken).
     Die 44px-Trefferflaeche kommt unsichtbar per Pseudo-Element -
     ein auf 44px aufgeblasener Knopf liess das Icon verloren wirken
     (Rueckmeldung DS, 24.08.2026). */
  .burger{display:block;position:relative;padding:.4rem}
  .burger::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px}
  /* Runder Knopf - 44px sind hier optisch unkritisch */
  .theme-toggle{width:44px;height:44px}
  /* minmax(0,1fr): Grid-Spalten sind implizit min-width:auto und wachsen
     mit nicht umbrechbarem Inhalt ueber den Viewport hinaus. Der
     !important schlaegt das inline gesetzte grid-template-columns:1fr
     der Hero-Templates (Messung 24.08.2026: 470px bei 390px Viewport). */
  .hero-inner{grid-template-columns:minmax(0,1fr) !important;gap:48px}
  .hero-inner > *{min-width:0}
  /* CTA-Buttons lagen mit 41-43px knapp unter der 44px-Empfehlung */
  /* min-height fuer die Touch-Flaeche; white-space:normal, weil lange
     Beschriftungen sonst aus dem Viewport ragen - der .btn-Basisstil
     setzt nowrap (EN-Texte sind laenger als die deutschen,
     Messung 24.08.2026: 387px Button in 350px Spalte). */
  .btn{min-height:44px;white-space:normal;max-width:100%}
  .dash{transform:none;animation:floatFlat 7s ease-in-out infinite}
  @keyframes floatFlat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  .split{grid-template-columns:1fr;gap:36px}
  .grid-3,.quotes,.blog{grid-template-columns:1fr}
  .grid-2,.grid-4,.stats-grid{grid-template-columns:1fr 1fr}
  .bb-grid{grid-template-columns:1fr 1fr;gap:28px 0}
  .bb-stat:nth-child(odd){border-left:0}
  .bb-canvas{height:340px}
  .foot-top{grid-template-columns:1fr 1fr}
  .toast{right:6px}
}
@media(max-width:560px){
  .stats-grid,.grid-2,.grid-4,.foot-top{grid-template-columns:1fr}
  .bb-grid{grid-template-columns:1fr}
  .bb-stat{border-left:0;padding:6px 0}
  .bb-canvas{height:280px}
  section{padding:68px 0}
  .cta-band{padding:46px 28px}
  .dash-kpis{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .chart svg .lineP{stroke-dashoffset:0}
}

/* Zertifizierungen als ruhige Zeile unter den Hero-Buttons:
   belegen die Aussage, ohne den Lead-Text zu ueberfrachten. */
.hero-trust{margin-top:1.1rem;font-size:.82rem;color:var(--muted-2);line-height:1.6}
.hero-trust a{color:var(--accent-text);font-weight:600;text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .2s}
.hero-trust a:hover{border-bottom-color:var(--accent-text)}