/*
 * Toowie – Seitengestaltung
 * Gemeinsame Grundlagen: style.css. Bibliotheken: bootstrap.min.css und all.css.
 * Die Reihenfolge der ursprünglichen Regeln ist innerhalb jeder Seite erhalten.
 * :where begrenzt Seitenregeln, ohne deren CSS-Spezifität zu erhöhen.
 * Die data-layout- und data-page-Attribute stehen am jeweiligen html-Element.
 */

/* Startseite: bisherige Produkt- und Startseitenbasis. */
.toowie-product:where([data-page="index"], [data-page="index"] *){--toowie-light:#f8f9fa;--toowie-gold:#c69a57;--toowie-gold-rgb:198,154,87;--toowie-blue:linear-gradient(135deg,rgba(0,20,40,1) 0%,rgba(10,40,80,1) 50%,rgba(0,10,30,1) 100%);--toowie-light-blue:linear-gradient(135deg,#c9d8f3 0%,#b1c8f0 40%,#9bb9eb 100%);--toowie-blue-dark:16,78,139;--toowie-blue-dark-hex:#104e8b;--toowie-background-hell:#e8f1f4;--toowie-background-gold:linear-gradient(135deg,#f1e6d3 0%,#f7f0e2 55%,#e8d9be 100%);--navy:#001428;--navy2:#0a2850;--blue:#0a2850;--blue-soft:#f7f0e2;--gold:#c69a57;--gold-soft:#f7f0e2;--green:#c69a57;--ink:#0f172a;--muted:#64748b;--line:#e2e8f0;--bg:#f3f4f6;--white:#fff;--shadow:0 24px 60px rgba(15,23,42,.10)}
.toowie-product *:where([data-page="index"], [data-page="index"] *){box-sizing:border-box}.toowie-product:where([data-page="index"], [data-page="index"] *){scroll-behavior:smooth}.toowie-product:where([data-page="index"], [data-page="index"] *){margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}.toowie-product a:where([data-page="index"], [data-page="index"] *){color:inherit;text-decoration:none}.toowie-product img:where([data-page="index"], [data-page="index"] *){display:block;max-width:100%}.toowie-product .shell:where([data-page="index"], [data-page="index"] *){width:min(1180px,calc(100% - 40px));margin:0 auto}.toowie-product .site-header:where([data-page="index"], [data-page="index"] *){position:absolute;left:0;right:0;top:0;z-index:20;color:#fff}.toowie-product .nav:where([data-page="index"], [data-page="index"] *){height:86px;display:flex;align-items:center;justify-content:space-between;gap:24px}.toowie-product .brand:where([data-page="index"], [data-page="index"] *){display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:-.02em}.toowie-product .brand-logo:where([data-page="index"], [data-page="index"] *){width:31px;height:31px;object-fit:contain;flex:0 0 31px}.toowie-product .nav-links:where([data-page="index"], [data-page="index"] *){display:flex;align-items:center;gap:28px;font-size:13px;font-weight:700;color:rgba(255,255,255,.7)}.toowie-product .nav-links a:hover:where([data-page="index"], [data-page="index"] *){color:#fff}.toowie-product .nav-dropdown:where([data-page="index"], [data-page="index"] *){position:relative;display:flex;align-items:center}.toowie-product .nav-dropdown-trigger:where([data-page="index"], [data-page="index"] *){display:inline-flex;align-items:center;gap:5px}.toowie-product .nav-dropdown-trigger span:where([data-page="index"], [data-page="index"] *){font-size:15px;line-height:1;transform:translateY(-1px);transition:transform .18s ease}.toowie-product .nav-dropdown-menu:where([data-page="index"], [data-page="index"] *){position:absolute;top:calc(100% + 14px);left:50%;min-width:210px;padding:8px;background:#fff;color:#334155;border:1px solid rgba(15,23,42,.09);border-radius:14px;box-shadow:0 18px 45px rgba(2,8,23,.18);opacity:0;visibility:hidden;transform:translate(-50%,-6px);transition:opacity .16s ease,transform .16s ease,visibility .16s ease}.toowie-product .nav-dropdown-menu:where([data-page="index"], [data-page="index"] *):before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}.toowie-product .nav-dropdown-menu a:where([data-page="index"], [data-page="index"] *){display:block;padding:10px 11px;border-radius:9px;color:#475569;white-space:nowrap}.toowie-product .nav-dropdown-menu a:hover:where([data-page="index"], [data-page="index"] *),.toowie-product .nav-dropdown-menu a:focus-visible:where([data-page="index"], [data-page="index"] *){background:#f7f0e2;color:var(--navy)}.toowie-product .nav-dropdown:hover .nav-dropdown-menu:where([data-page="index"], [data-page="index"] *),.toowie-product .nav-dropdown:focus-within .nav-dropdown-menu:where([data-page="index"], [data-page="index"] *){opacity:1;visibility:visible;transform:translate(-50%,0)}.toowie-product .nav-dropdown:hover .nav-dropdown-trigger span:where([data-page="index"], [data-page="index"] *),.toowie-product .nav-dropdown:focus-within .nav-dropdown-trigger span:where([data-page="index"], [data-page="index"] *){transform:translateY(-1px) rotate(180deg)}.toowie-product .btn:where([data-page="index"], [data-page="index"] *){min-height:48px;padding:0 20px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:900;border:1px solid transparent;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.toowie-product .btn:hover:where([data-page="index"], [data-page="index"] *){transform:translateY(-2px)}.toowie-product .btn-small:where([data-page="index"], [data-page="index"] *){min-height:40px;padding:0 15px;font-size:12px}.toowie-product .btn-light:where([data-page="index"], [data-page="index"] *){background:#fff;color:var(--ink);box-shadow:0 10px 24px rgba(0,0,0,.12)}.toowie-product .btn-primary:where([data-page="index"], [data-page="index"] *){background:#fff;color:var(--navy);border-color:rgba(198,154,87,.34);box-shadow:0 12px 30px rgba(0,0,0,.18)}.toowie-product .btn-primary:hover:where([data-page="index"], [data-page="index"] *){background:#fbf7ef;border-color:rgba(198,154,87,.60)}.toowie-product .btn-ghost:where([data-page="index"], [data-page="index"] *){border-color:rgba(198,154,87,.52);color:var(--navy);background:#fff;box-shadow:0 10px 26px rgba(0,0,0,.12)}.toowie-product .btn-ghost:hover:where([data-page="index"], [data-page="index"] *){background:#fbf7ef;border-color:rgba(198,154,87,.72)}.toowie-product .hero:where([data-page="index"], [data-page="index"] *){position:relative;overflow:hidden;background:var(--toowie-blue);color:#fff;padding:158px 0 90px}.toowie-product .hero:where([data-page="index"], [data-page="index"] *):after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.08)}.toowie-product .hero-glow:where([data-page="index"], [data-page="index"] *){position:absolute;border-radius:999px;filter:blur(1px);pointer-events:none}.toowie-product .hero-glow-one:where([data-page="index"], [data-page="index"] *){width:600px;height:600px;right:-190px;top:-260px;background:radial-gradient(circle,rgba(198,154,87,.20),rgba(198,154,87,0) 68%)}.toowie-product .hero-glow-two:where([data-page="index"], [data-page="index"] *){width:450px;height:450px;left:-280px;bottom:-210px;background:radial-gradient(circle,rgba(198,154,87,.14),rgba(198,154,87,0) 70%)}.toowie-product .hero-grid:where([data-page="index"], [data-page="index"] *){position:relative;z-index:2;display:grid;grid-template-columns:.88fr 1.12fr;align-items:center;gap:54px}.toowie-product .eyebrow:where([data-page="index"], [data-page="index"] *),.toowie-product .section-kicker:where([data-page="index"], [data-page="index"] *){font-size:11px;font-weight:950;letter-spacing:.12em;text-transform:uppercase}.toowie-product .eyebrow:where([data-page="index"], [data-page="index"] *){display:inline-flex;align-items:center;gap:8px;color:var(--navy);background:#fff;border:1px solid rgba(198,154,87,.42);border-radius:999px;padding:7px 10px;box-shadow:0 10px 26px rgba(0,0,0,.14)}.toowie-product .eyebrow-dot:where([data-page="index"], [data-page="index"] *){width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.16)}.toowie-product .hero h1:where([data-page="index"], [data-page="index"] *){font-size:clamp(42px,5vw,68px);line-height:.98;letter-spacing:-.058em;margin:24px 0 24px;max-width:650px}.toowie-product .hero h1 span:where([data-page="index"], [data-page="index"] *){color:#d8b77f}.toowie-product .hero-lead:where([data-page="index"], [data-page="index"] *){font-size:18px;line-height:1.65;color:rgba(255,255,255,.72);max-width:620px;margin:0}.toowie-product .hero-subline:where([data-page="index"], [data-page="index"] *){font-size:20px;line-height:1.45;font-weight:850;color:#fff;max-width:620px;margin:-8px 0 12px;letter-spacing:-.015em}.toowie-product .hero-actions:where([data-page="index"], [data-page="index"] *){display:flex;align-items:center;gap:10px;margin-top:32px}.toowie-product .hero-points:where([data-page="index"], [data-page="index"] *){display:flex;gap:18px;flex-wrap:wrap;margin-top:28px;color:rgba(255,255,255,.74);font-size:12px;font-weight:750}.toowie-product .hero-points span:where([data-page="index"], [data-page="index"] *){display:flex;align-items:center;gap:6px}.toowie-product .hero-points i:where([data-page="index"], [data-page="index"] *){font-style:normal;color:var(--gold)}.toowie-product .hero-visual:where([data-page="index"], [data-page="index"] *){position:relative;margin-right:-130px}.toowie-product .browser-frame:where([data-page="index"], [data-page="index"] *){background:#fff;border:1px solid rgba(15,23,42,.12);border-radius:22px;overflow:hidden;box-shadow:0 30px 70px rgba(2,8,23,.20)}.toowie-product .hero-browser:where([data-page="index"], [data-page="index"] *){transform:perspective(1600px) rotateY(-4deg) rotateX(1deg);transform-origin:center left;box-shadow:0 36px 90px rgba(0,0,0,.32)}.toowie-product .browser-bar:where([data-page="index"], [data-page="index"] *){height:44px;display:flex;align-items:center;gap:14px;padding:0 14px;background:#fff;border-bottom:1px solid #eef2f7;color:#64748b}.toowie-product .browser-dots:where([data-page="index"], [data-page="index"] *){display:flex;gap:5px}.toowie-product .browser-dots i:where([data-page="index"], [data-page="index"] *){width:8px;height:8px;border-radius:50%;background:#cbd5e1}.toowie-product .browser-label:where([data-page="index"], [data-page="index"] *){font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.toowie-product .browser-tag:where([data-page="index"], [data-page="index"] *),.toowie-product .live-pill:where([data-page="index"], [data-page="index"] *){margin-left:auto;font-size:9px;font-weight:900;border-radius:999px;padding:5px 8px;background:#f1f5f9;color:#475569}.toowie-product .live-pill:where([data-page="index"], [data-page="index"] *){display:flex;align-items:center;gap:5px;background:#f7f0e2;color:#8a642d}.toowie-product .live-pill i:where([data-page="index"], [data-page="index"] *){width:6px;height:6px;border-radius:50%;background:var(--gold)}.toowie-product .hero-browser img:where([data-page="index"], [data-page="index"] *){width:100%;height:auto}.toowie-product .float-card:where([data-page="index"], [data-page="index"] *){position:absolute;display:flex;align-items:center;gap:10px;padding:11px 13px;background:#fff;color:#0f172a;border-radius:14px;border:1px solid #e2e8f0;box-shadow:0 20px 45px rgba(0,0,0,.22);font-size:11px}.toowie-product .float-card b:where([data-page="index"], [data-page="index"] *){display:block}.toowie-product .float-card small:where([data-page="index"], [data-page="index"] *){display:block;color:#64748b;margin-top:2px}.toowie-product .float-icon:where([data-page="index"], [data-page="index"] *),.toowie-product .float-number:where([data-page="index"], [data-page="index"] *){width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:950}.toowie-product .float-icon:where([data-page="index"], [data-page="index"] *){background:#f1e6d3;color:var(--navy)}.toowie-product .float-number:where([data-page="index"], [data-page="index"] *){background:#f1e6d3;color:#001428}.toowie-product .float-card-call:where([data-page="index"], [data-page="index"] *){left:-44px;bottom:85px}.toowie-product .float-card-flow:where([data-page="index"], [data-page="index"] *){right:22px;top:96px}.toowie-product .problem-strip:where([data-page="index"], [data-page="index"] *){padding:80px 0;background:#f8fafc;border-bottom:0}.toowie-product .statement-grid:where([data-page="index"], [data-page="index"] *){display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}.toowie-product .section-kicker:where([data-page="index"], [data-page="index"] *){color:var(--gold)}.toowie-product .statement-lead h2:where([data-page="index"], [data-page="index"] *),.toowie-product .section-head h2:where([data-page="index"], [data-page="index"] *),.toowie-product .copy-col h2:where([data-page="index"], [data-page="index"] *),.toowie-product .closing-copy h2:where([data-page="index"], [data-page="index"] *){font-size:clamp(32px,4vw,48px);line-height:1.08;letter-spacing:-.045em;margin:13px 0 0}.toowie-product .statement-lead h2 em:where([data-page="index"], [data-page="index"] *){font-style:normal;color:var(--gold)}.toowie-product .mini-problems:where([data-page="index"], [data-page="index"] *){display:grid;gap:10px}.toowie-product .mini-problems article:where([data-page="index"], [data-page="index"] *){display:grid;grid-template-columns:42px 1fr;gap:12px;padding:15px 16px;background:#fff;border:1px solid var(--line);border-radius:15px}.toowie-product .mini-problems article>span:where([data-page="index"], [data-page="index"] *){width:34px;height:34px;border-radius:10px;background:var(--blue-soft);color:var(--navy);display:grid;place-items:center;font-size:10px;font-weight:950}.toowie-product .mini-problems b:where([data-page="index"], [data-page="index"] *){font-size:14px}.toowie-product .mini-problems p:where([data-page="index"], [data-page="index"] *){font-size:12px;line-height:1.45;color:var(--muted);margin:4px 0 0}.toowie-product .section-block:where([data-page="index"], [data-page="index"] *){padding:112px 0}.toowie-product .section-block.soft:where([data-page="index"], [data-page="index"] *){background:#f8fafc}.toowie-product .phase-overview-box:where([data-page="index"], [data-page="index"] *){padding:42px 40px 46px;border:1px solid #ead7b6;border-radius:30px;background:#fcf7ef;box-shadow:0 22px 56px rgba(15,23,42,.08)}.toowie-product .phase-overview-box .section-head:where([data-page="index"], [data-page="index"] *){margin-bottom:42px}.toowie-product .phase-overview-box .section-head p:where([data-page="index"], [data-page="index"] *){max-width:480px}.toowie-product .section-head:where([data-page="index"], [data-page="index"] *){max-width:820px;margin:0 auto 50px}.toowie-product .section-head.centered:where([data-page="index"], [data-page="index"] *){text-align:center}.toowie-product .section-head h2 span:where([data-page="index"], [data-page="index"] *){color:var(--gold)}.toowie-product .section-head p:where([data-page="index"], [data-page="index"] *),.toowie-product .copy-col>p:where([data-page="index"], [data-page="index"] *),.toowie-product .closing-copy>p:where([data-page="index"], [data-page="index"] *){font-size:16px;line-height:1.7;color:var(--muted);margin:18px auto 0;max-width:700px}.toowie-product .screen-stage:where([data-page="index"], [data-page="index"] *){position:relative;max-width:1080px;margin:0 auto}.toowie-product .screen-decoration:where([data-page="index"], [data-page="index"] *){position:absolute;inset:auto -25px -28px 30px;height:85%;border-radius:30px;background:linear-gradient(135deg,#f1e6d3,#f8f9fa);z-index:-1}.toowie-product .product-browser:where([data-page="index"], [data-page="index"] *){border-radius:26px;box-shadow:var(--shadow)}.toowie-product .feature-trio:where([data-page="index"], [data-page="index"] *){display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1080px;margin:36px auto 0}.toowie-product .feature-trio article:where([data-page="index"], [data-page="index"] *){padding:23px;border:1px solid var(--line);border-radius:18px;background:#fff}.toowie-product .feature-icon:where([data-page="index"], [data-page="index"] *){width:38px;height:38px;border-radius:11px;background:var(--blue-soft);color:var(--navy);display:grid;place-items:center;font-weight:950;margin-bottom:15px}.toowie-product .feature-trio h3:where([data-page="index"], [data-page="index"] *){margin:0 0 8px;font-size:16px}.toowie-product .feature-trio p:where([data-page="index"], [data-page="index"] *){margin:0;color:var(--muted);font-size:13px;line-height:1.6}.toowie-product .split-head:where([data-page="index"], [data-page="index"] *){max-width:none;display:grid;grid-template-columns:1.2fr .8fr;gap:70px;align-items:end}.toowie-product .split-head>p:where([data-page="index"], [data-page="index"] *){margin:0}.toowie-product .conversation-flow:where([data-page="index"], [data-page="index"] *){display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.toowie-product .phase-card:where([data-page="index"], [data-page="index"] *){position:relative;min-height:270px;padding:20px;border-radius:19px;background:#fff;border:1px solid var(--line);overflow:hidden}.toowie-product .phase-top:where([data-page="index"], [data-page="index"] *){display:flex;align-items:center;justify-content:space-between}.toowie-product .phase-top>span:where([data-page="index"], [data-page="index"] *){font-size:10px;font-weight:950;color:#94a3b8}.toowie-product .phase-top i:where([data-page="index"], [data-page="index"] *){font-style:normal;width:34px;height:34px;border-radius:10px;background:#f1f5f9;color:#334155;display:grid;place-items:center;font-size:11px;font-weight:950}.toowie-product .phase-card h3:where([data-page="index"], [data-page="index"] *){font-size:18px;line-height:1.15;margin:26px 0 9px}.toowie-product .phase-card p:where([data-page="index"], [data-page="index"] *){font-size:12px;line-height:1.55;color:var(--muted);margin:0}.toowie-product .phase-tags:where([data-page="index"], [data-page="index"] *){display:flex;gap:5px;flex-wrap:wrap;position:absolute;left:20px;right:20px;bottom:18px}.toowie-product .phase-tags b:where([data-page="index"], [data-page="index"] *){font-size:9px;padding:5px 7px;border-radius:7px;background:#f8fafc;border:1px solid var(--line);color:#64748b}.toowie-product .phase-navy:where([data-page="index"], [data-page="index"] *){background:linear-gradient(145deg,#07142c,#10264d);border-color:transparent;color:#fff}.toowie-product .phase-navy p:where([data-page="index"], [data-page="index"] *){color:rgba(255,255,255,.66)}.toowie-product .phase-navy .phase-top>span:where([data-page="index"], [data-page="index"] *){color:rgba(255,255,255,.45)}.toowie-product .phase-navy .phase-top i:where([data-page="index"], [data-page="index"] *){background:rgba(255,255,255,.09);color:#fff}.toowie-product .phase-navy .phase-tags b:where([data-page="index"], [data-page="index"] *){background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#cbd5e1}.toowie-product .phase-blue:where([data-page="index"], [data-page="index"] *){border-color:#e8d9be;background:#fbf7ef}.toowie-product .phase-blue .phase-top i:where([data-page="index"], [data-page="index"] *){background:#f1e6d3;color:#001428}.toowie-product .phase-gold:where([data-page="index"], [data-page="index"] *){border-color:#ead7b6;background:var(--gold-soft)}.toowie-product .phase-gold .phase-top i:where([data-page="index"], [data-page="index"] *){background:#f5e7d3;color:#8a642d}.toowie-product .objection-showcase:where([data-page="index"], [data-page="index"] *){display:grid;grid-template-columns:.78fr 1.22fr;gap:54px;align-items:center;margin-top:80px}.toowie-product .objection-copy h2:where([data-page="index"], [data-page="index"] *){font-size:clamp(32px,4vw,47px);letter-spacing:-.045em;line-height:1.08;margin:12px 0 16px}.toowie-product .objection-copy>p:where([data-page="index"], [data-page="index"] *){color:var(--muted);line-height:1.7;font-size:15px}.toowie-product .check-list:where([data-page="index"], [data-page="index"] *){list-style:none;padding:0;margin:24px 0 0;display:grid;gap:13px}.toowie-product .check-list li:where([data-page="index"], [data-page="index"] *){display:flex;align-items:flex-start;gap:9px;font-size:13px;font-weight:750}.toowie-product .check-list span:where([data-page="index"], [data-page="index"] *){width:21px;height:21px;flex:0 0 21px;border-radius:7px;background:#f1e6d3;color:var(--navy);display:grid;place-items:center;font-size:10px}.toowie-product .compact-browser:where([data-page="index"], [data-page="index"] *){box-shadow:var(--shadow)}.toowie-product .compact-browser img:where([data-page="index"], [data-page="index"] *){width:100%}.toowie-product .two-col:where([data-page="index"], [data-page="index"] *){display:grid;grid-template-columns:.88fr 1.12fr;gap:68px;align-items:center}.toowie-product .copy-col h2:where([data-page="index"], [data-page="index"] *){margin-top:13px}.toowie-product .detail-list:where([data-page="index"], [data-page="index"] *),.toowie-product .metric-stack:where([data-page="index"], [data-page="index"] *){display:grid;gap:12px;margin-top:28px}.toowie-product .detail-list article:where([data-page="index"], [data-page="index"] *),.toowie-product .metric-stack article:where([data-page="index"], [data-page="index"] *){display:grid;grid-template-columns:42px 1fr;gap:13px;align-items:start}.toowie-product .detail-list article>span:where([data-page="index"], [data-page="index"] *),.toowie-product .metric-icon:where([data-page="index"], [data-page="index"] *){width:38px;height:38px;border-radius:11px;background:var(--blue-soft);color:var(--navy);display:grid;place-items:center;font-size:11px;font-weight:950}.toowie-product .detail-list b:where([data-page="index"], [data-page="index"] *),.toowie-product .metric-stack b:where([data-page="index"], [data-page="index"] *){font-size:14px}.toowie-product .detail-list p:where([data-page="index"], [data-page="index"] *),.toowie-product .metric-stack p:where([data-page="index"], [data-page="index"] *){font-size:12px;line-height:1.55;color:var(--muted);margin:4px 0 0}.toowie-product .side-browser:where([data-page="index"], [data-page="index"] *){box-shadow:var(--shadow)}.toowie-product .team-section:where([data-page="index"], [data-page="index"] *){position:relative;overflow:hidden;background:linear-gradient(135deg,#07142c,#0d2244 62%,#12305d);color:#fff}.toowie-product .team-orb:where([data-page="index"], [data-page="index"] *){position:absolute;border-radius:50%;pointer-events:none}.toowie-product .team-orb-one:where([data-page="index"], [data-page="index"] *){width:560px;height:560px;right:-260px;top:-260px;background:radial-gradient(circle,rgba(198,154,87,.18),transparent 68%)}.toowie-product .team-orb-two:where([data-page="index"], [data-page="index"] *){width:500px;height:500px;left:-260px;bottom:-250px;background:radial-gradient(circle,rgba(198,154,87,.13),transparent 70%)}.toowie-product .inverse:where([data-page="index"], [data-page="index"] *){position:relative;z-index:2}.toowie-product .inverse .section-kicker:where([data-page="index"], [data-page="index"] *){color:#d4b47e}.toowie-product .inverse h2 span:where([data-page="index"], [data-page="index"] *){color:#d8b77f}.toowie-product .inverse p:where([data-page="index"], [data-page="index"] *){color:rgba(255,255,255,.64)}.toowie-product .team-grid:where([data-page="index"], [data-page="index"] *){position:relative;z-index:2;display:grid;grid-template-columns:1fr 55px 1fr 55px 1fr;gap:8px;align-items:center;max-width:1040px;margin:0 auto}.toowie-product .team-grid article:where([data-page="index"], [data-page="index"] *){height:220px;padding:24px;border-radius:20px;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px)}.toowie-product .team-step:where([data-page="index"], [data-page="index"] *){width:38px;height:38px;border-radius:11px;background:rgba(198,154,87,.16);border:1px solid rgba(198,154,87,.35);color:#e4c491;display:grid;place-items:center;font-weight:950}.toowie-product .team-grid h3:where([data-page="index"], [data-page="index"] *){font-size:18px;margin:28px 0 9px}.toowie-product .team-grid p:where([data-page="index"], [data-page="index"] *){font-size:12px;line-height:1.6;color:rgba(255,255,255,.62);margin:0}.toowie-product .team-line:where([data-page="index"], [data-page="index"] *){height:1px;background:linear-gradient(90deg,rgba(198,154,87,.15),rgba(198,154,87,.7),rgba(198,154,87,.15))}.toowie-product .team-quote:where([data-page="index"], [data-page="index"] *){position:relative;z-index:2;max-width:740px;margin:38px auto 0;display:flex;gap:15px;align-items:flex-start;justify-content:center;color:rgba(255,255,255,.82);text-align:center}.toowie-product .team-quote>span:where([data-page="index"], [data-page="index"] *){font-family:Georgia,serif;font-size:45px;line-height:1;color:#d7b476}.toowie-product .team-quote p:where([data-page="index"], [data-page="index"] *){font-size:16px;line-height:1.6;margin:0}.toowie-product .lead-split:where([data-page="index"], [data-page="index"] *){grid-template-columns:1.14fr .86fr}.toowie-product .metric-icon.green:where([data-page="index"], [data-page="index"] *){background:#f1e6d3;color:var(--navy)}.toowie-product .metric-icon.blue:where([data-page="index"], [data-page="index"] *){background:#f1e6d3;color:#001428}.toowie-product .metric-icon.gold:where([data-page="index"], [data-page="index"] *){background:#fff3da;color:#9a6b27}.toowie-product .closing-section:where([data-page="index"], [data-page="index"] *){background:linear-gradient(180deg,#fff,#f8fafc)}.toowie-product .closing-grid:where([data-page="index"], [data-page="index"] *){display:grid;grid-template-columns:.72fr 1.28fr;gap:60px;align-items:center}.toowie-product .closing-cards:where([data-page="index"], [data-page="index"] *){display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.toowie-product .closing-cards article:where([data-page="index"], [data-page="index"] *){min-height:130px;padding:17px;border-radius:16px;background:#fff;border:1px solid var(--line)}.toowie-product .closing-cards span:where([data-page="index"], [data-page="index"] *){font-size:11px;font-weight:950;color:#9a6b27}.toowie-product .closing-cards p:where([data-page="index"], [data-page="index"] *){font-size:12px;line-height:1.5;color:var(--muted);margin:10px 0 0}.toowie-product .closing-cards .closing-next:where([data-page="index"], [data-page="index"] *){background:linear-gradient(145deg,#07142c,#10264d);border-color:transparent}.toowie-product .closing-cards .closing-next span:where([data-page="index"], [data-page="index"] *){color:#e6c690}.toowie-product .closing-cards .closing-next p:where([data-page="index"], [data-page="index"] *){color:rgba(255,255,255,.66)}.toowie-product .final-cta:where([data-page="index"], [data-page="index"] *){padding:0 0 90px;background:#f8fafc}.toowie-product .final-card:where([data-page="index"], [data-page="index"] *){position:relative;overflow:hidden;min-height:330px;border-radius:30px;padding:55px 58px;background:linear-gradient(135deg,#07142c,#10264d);color:#fff;display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:center;box-shadow:0 30px 70px rgba(7,20,44,.20)}.toowie-product .final-glow:where([data-page="index"], [data-page="index"] *){position:absolute;width:440px;height:440px;border-radius:50%;right:-130px;top:-240px;background:radial-gradient(circle,rgba(198,154,87,.22),transparent 65%)}.toowie-product .final-copy:where([data-page="index"], [data-page="index"] *),.toowie-product .final-actions:where([data-page="index"], [data-page="index"] *){position:relative;z-index:2}.toowie-product .final-copy .section-kicker:where([data-page="index"], [data-page="index"] *){color:#d5b47e}.toowie-product .final-copy h2:where([data-page="index"], [data-page="index"] *){font-size:clamp(34px,4vw,49px);line-height:1.05;letter-spacing:-.045em;margin:13px 0 15px}.toowie-product .final-copy p:where([data-page="index"], [data-page="index"] *){color:rgba(255,255,255,.64);font-size:15px;line-height:1.6;margin:0}.toowie-product .final-actions:where([data-page="index"], [data-page="index"] *){display:flex;flex-direction:column;align-items:flex-start;gap:10px}.toowie-product .btn-gold:where([data-page="index"], [data-page="index"] *){background:var(--gold);color:#07142c;box-shadow:0 12px 28px rgba(198,154,87,.20)}.toowie-product .btn-gold:hover:where([data-page="index"], [data-page="index"] *){background:#d2a966}.toowie-product .final-actions small:where([data-page="index"], [data-page="index"] *){font-size:10px;color:rgba(255,255,255,.42);line-height:1.4}.toowie-product .footer-inner:where([data-page="index"], [data-page="index"] *){min-height:120px;display:flex;align-items:center;gap:24px;color:#64748b;font-size:12px}.toowie-product .footer-brand:where([data-page="index"], [data-page="index"] *){color:#0f172a}.toowie-product .footer-brand .brand-logo:where([data-page="index"], [data-page="index"] *){filter:none}.toowie-product .footer-inner p:where([data-page="index"], [data-page="index"] *){margin:0}.toowie-product .footer-inner>a:last-child:where([data-page="index"], [data-page="index"] *){margin-left:auto;font-weight:850;color:#334155}.toowie-product .reveal:where([data-page="index"], [data-page="index"] *){opacity:1;transform:none}.toowie-product .js .reveal:where([data-page="index"], [data-page="index"] *){opacity:0;transform:translateY(14px);transition:opacity .65s ease,transform .65s ease}.toowie-product .js .reveal.is-visible:where([data-page="index"], [data-page="index"] *){opacity:1;transform:none}.toowie-product .reveal-delay:where([data-page="index"], [data-page="index"] *){transition-delay:.10s}
@media(max-width:1050px){.toowie-product .nav-links:where([data-page="index"], [data-page="index"] *){display:none}.toowie-product .hero-grid:where([data-page="index"], [data-page="index"] *),.toowie-product .two-col:where([data-page="index"], [data-page="index"] *),.toowie-product .closing-grid:where([data-page="index"], [data-page="index"] *),.toowie-product .statement-grid:where([data-page="index"], [data-page="index"] *),.toowie-product .objection-showcase:where([data-page="index"], [data-page="index"] *){grid-template-columns:1fr}.toowie-product .hero-visual:where([data-page="index"], [data-page="index"] *){margin:28px -90px 0 0}.toowie-product .hero-copy:where([data-page="index"], [data-page="index"] *){max-width:760px}.toowie-product .conversation-flow:where([data-page="index"], [data-page="index"] *){grid-template-columns:repeat(3,1fr)}.toowie-product .phase-card:nth-child(4):where([data-page="index"], [data-page="index"] *),.toowie-product .phase-card:nth-child(5):where([data-page="index"], [data-page="index"] *){min-height:245px}.toowie-product .feature-split .copy-col:where([data-page="index"], [data-page="index"] *){order:1}.toowie-product .feature-split .side-browser:where([data-page="index"], [data-page="index"] *){order:2}.toowie-product .lead-split .lead-browser:where([data-page="index"], [data-page="index"] *){order:2}.toowie-product .lead-split .copy-col:where([data-page="index"], [data-page="index"] *){order:1}.toowie-product .team-grid:where([data-page="index"], [data-page="index"] *){grid-template-columns:repeat(3,1fr);gap:12px}.toowie-product .team-line:where([data-page="index"], [data-page="index"] *){display:none}.toowie-product .final-card:where([data-page="index"], [data-page="index"] *){grid-template-columns:1fr;gap:26px}.toowie-product .closing-cards:where([data-page="index"], [data-page="index"] *){grid-template-columns:repeat(3,1fr)}.toowie-product .split-head:where([data-page="index"], [data-page="index"] *){grid-template-columns:1fr;gap:16px}.toowie-product .split-head>p:where([data-page="index"], [data-page="index"] *){max-width:680px}.toowie-product .statement-grid:where([data-page="index"], [data-page="index"] *){gap:38px}}
@media(max-width:760px){.toowie-product .shell:where([data-page="index"], [data-page="index"] *){width:min(100% - 28px,1180px)}.toowie-product .nav:where([data-page="index"], [data-page="index"] *){height:72px}.toowie-product .nav .btn:where([data-page="index"], [data-page="index"] *){display:none}.toowie-product .hero:where([data-page="index"], [data-page="index"] *){padding:126px 0 65px}.toowie-product .hero h1:where([data-page="index"], [data-page="index"] *){font-size:45px}.toowie-product .hero-lead:where([data-page="index"], [data-page="index"] *){font-size:16px}.toowie-product .hero-actions:where([data-page="index"], [data-page="index"] *){align-items:stretch;flex-direction:column}.toowie-product .hero-actions .btn:where([data-page="index"], [data-page="index"] *){width:100%}.toowie-product .hero-points:where([data-page="index"], [data-page="index"] *){display:grid;gap:9px}.toowie-product .hero-visual:where([data-page="index"], [data-page="index"] *){margin:25px -72px 0 -6px}.toowie-product .hero-browser:where([data-page="index"], [data-page="index"] *){transform:none;border-radius:16px}.toowie-product .browser-bar:where([data-page="index"], [data-page="index"] *){height:36px}.toowie-product .float-card:where([data-page="index"], [data-page="index"] *){display:none}.toowie-product .problem-strip:where([data-page="index"], [data-page="index"] *),.toowie-product .section-block:where([data-page="index"], [data-page="index"] *){padding:72px 0}.toowie-product .statement-lead h2:where([data-page="index"], [data-page="index"] *),.toowie-product .section-head h2:where([data-page="index"], [data-page="index"] *),.toowie-product .copy-col h2:where([data-page="index"], [data-page="index"] *),.toowie-product .closing-copy h2:where([data-page="index"], [data-page="index"] *),.toowie-product .objection-copy h2:where([data-page="index"], [data-page="index"] *){font-size:34px}.toowie-product .feature-trio:where([data-page="index"], [data-page="index"] *){grid-template-columns:1fr}.toowie-product .conversation-flow:where([data-page="index"], [data-page="index"] *){grid-template-columns:1fr}.toowie-product .phase-card:where([data-page="index"], [data-page="index"] *){min-height:215px!important}.toowie-product .phase-card h3:where([data-page="index"], [data-page="index"] *){margin-top:20px}.toowie-product .objection-showcase:where([data-page="index"], [data-page="index"] *){margin-top:55px;gap:30px}.toowie-product .two-col:where([data-page="index"], [data-page="index"] *){gap:35px}.toowie-product .team-grid:where([data-page="index"], [data-page="index"] *){grid-template-columns:1fr}.toowie-product .team-grid article:where([data-page="index"], [data-page="index"] *){height:auto;min-height:180px}.toowie-product .closing-cards:where([data-page="index"], [data-page="index"] *){grid-template-columns:1fr 1fr}.toowie-product .final-cta:where([data-page="index"], [data-page="index"] *){padding-bottom:55px}.toowie-product .final-card:where([data-page="index"], [data-page="index"] *){padding:38px 25px;border-radius:24px}.toowie-product .footer-inner:where([data-page="index"], [data-page="index"] *){padding:28px 0;align-items:flex-start;flex-direction:column;gap:10px}.toowie-product .footer-inner>a:last-child:where([data-page="index"], [data-page="index"] *){margin-left:0}.toowie-product .product-browser:where([data-page="index"], [data-page="index"] *),.toowie-product .side-browser:where([data-page="index"], [data-page="index"] *),.toowie-product .compact-browser:where([data-page="index"], [data-page="index"] *){border-radius:16px}.toowie-product .screen-decoration:where([data-page="index"], [data-page="index"] *){display:none}}
@media(max-width:470px){.toowie-product .hero h1:where([data-page="index"], [data-page="index"] *){font-size:39px}.toowie-product .closing-cards:where([data-page="index"], [data-page="index"] *){grid-template-columns:1fr}.toowie-product .section-head:where([data-page="index"], [data-page="index"] *){margin-bottom:34px}.toowie-product .conversation-flow:where([data-page="index"], [data-page="index"] *){gap:8px}.toowie-product .brand:where([data-page="index"], [data-page="index"] *){font-size:14px}.toowie-product .hero-visual:where([data-page="index"], [data-page="index"] *){margin-right:-110px}}
@media(prefers-reduced-motion:reduce){.toowie-product:where([data-page="index"], [data-page="index"] *){scroll-behavior:auto}.toowie-product .js .reveal:where([data-page="index"], [data-page="index"] *){opacity:1;transform:none;transition:none}.toowie-product .btn:where([data-page="index"], [data-page="index"] *){transition:none}}

/* Screenshot zoom */
.toowie-product .browser-frame img:where([data-page="index"], [data-page="index"] *),.toowie-product .guided-swap-image:where([data-page="index"], [data-page="index"] *){cursor:zoom-in}
/* Touch-Zoom direkt im eingebetteten Screenshot (ohne die Seite zu zoomen). */
.toowie-product .inline-touch-zoom-host:where([data-page="index"], [data-page="index"] *){position:relative}
.toowie-product .inline-touch-zoom-control-host:where([data-page="index"], [data-page="index"] *){position:relative}
.toowie-product .inline-touch-zoom-image:where([data-page="index"], [data-page="index"] *){transform-origin:center center;will-change:transform;-webkit-user-drag:none;touch-action:pan-y}
.toowie-product .inline-touch-zoom-host.is-inline-zoomed:where([data-page="index"], [data-page="index"] *){overflow:hidden !important;overscroll-behavior:contain}
.toowie-product .inline-touch-zoom-host.is-inline-zoomed .inline-touch-zoom-image:where([data-page="index"], [data-page="index"] *){touch-action:none;cursor:grab}
.toowie-product .inline-touch-zoom-reset:where([data-page="index"], [data-page="index"] *){position:absolute;right:8px;z-index:12;width:40px;height:40px;border:1px solid rgba(255,255,255,.34);border-radius:11px;background:rgba(7,20,44,.80);color:#fff;display:grid;place-items:center;padding:0;font-size:22px;font-weight:800;line-height:1;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 22px rgba(2,8,23,.20)}
.toowie-product .inline-touch-zoom-reset:hover:where([data-page="index"], [data-page="index"] *),.toowie-product .inline-touch-zoom-reset:focus-visible:where([data-page="index"], [data-page="index"] *){background:#fff;color:#07142c}
.toowie-product .inline-touch-zoom-reset[hidden]:where([data-page="index"], [data-page="index"] *){display:none !important}
@media(max-width:760px){.toowie-product .inline-touch-zoom-reset:where([data-page="index"], [data-page="index"] *){right:7px;width:38px;height:38px;border-radius:10px;font-size:21px}}
.toowie-product .image-lightbox:where([data-page="index"], [data-page="index"] *){position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:28px;background:rgba(2,8,23,.88);opacity:0;visibility:hidden;overflow:hidden;transition:opacity .18s ease,visibility .18s ease}
.toowie-product .image-lightbox.is-open:where([data-page="index"], [data-page="index"] *){opacity:1;visibility:visible}
.toowie-product .image-lightbox__viewport:where([data-page="index"], [data-page="index"] *){position:absolute;inset:28px;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none}
.toowie-product .image-lightbox__image:where([data-page="index"], [data-page="index"] *){display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:14px;box-shadow:0 30px 90px rgba(0,0,0,.45);cursor:default;background:#fff;transform-origin:center center;will-change:transform;-webkit-user-drag:none}
.toowie-product .image-lightbox.is-zoomed .image-lightbox__image:where([data-page="index"], [data-page="index"] *){cursor:grab}
.toowie-product .image-lightbox__close:where([data-page="index"], [data-page="index"] *),.toowie-product .image-lightbox__reset:where([data-page="index"], [data-page="index"] *){position:fixed;top:18px;z-index:3;width:44px;height:44px;border:1px solid rgba(255,255,255,.28);border-radius:12px;background:rgba(7,20,44,.76);color:#fff;line-height:1;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(10px)}
.toowie-product .image-lightbox__close:where([data-page="index"], [data-page="index"] *){right:20px;font-size:26px}
.toowie-product .image-lightbox__reset:where([data-page="index"], [data-page="index"] *){right:74px;font-size:24px;font-weight:800}
.toowie-product .image-lightbox__close:hover:where([data-page="index"], [data-page="index"] *),.toowie-product .image-lightbox__reset:hover:not(:disabled):where([data-page="index"], [data-page="index"] *){background:#fff;color:#07142c}
.toowie-product .image-lightbox__reset:disabled:where([data-page="index"], [data-page="index"] *){opacity:.42;cursor:default}
.toowie-product .lightbox-open:where([data-page="index"], [data-page="index"] *){overflow:hidden;touch-action:none;overscroll-behavior:none}

/* Hero callouts aligned with the actual UI in the screenshot */
.toowie-product .float-icon svg:where([data-page="index"], [data-page="index"] *){width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.toowie-product .float-card-call:where([data-page="index"], [data-page="index"] *){left:-44px;top:142px;bottom:auto}
.toowie-product .float-card-call:where([data-page="index"], [data-page="index"] *):after{content:"";position:absolute;right:-24px;top:50%;width:24px;height:1px;background:var(--gold)}
.toowie-product .float-card-flow:where([data-page="index"], [data-page="index"] *){right:22px;top:245px}
.toowie-product .float-number:where([data-page="index"], [data-page="index"] *){font-size:10px;letter-spacing:.02em}
@media(max-width:760px){.toowie-product .image-lightbox:where([data-page="index"], [data-page="index"] *){padding:14px}.toowie-product .image-lightbox__viewport:where([data-page="index"], [data-page="index"] *){inset:14px}.toowie-product .image-lightbox__image:where([data-page="index"], [data-page="index"] *){border-radius:9px}.toowie-product .image-lightbox__close:where([data-page="index"], [data-page="index"] *),.toowie-product .image-lightbox__reset:where([data-page="index"], [data-page="index"] *){top:10px}.toowie-product .image-lightbox__close:where([data-page="index"], [data-page="index"] *){right:10px}.toowie-product .image-lightbox__reset:where([data-page="index"], [data-page="index"] *){right:64px}}

/* Additional hero product callouts */
.toowie-product .float-icon-blue:where([data-page="index"], [data-page="index"] *){background:#f1e6d3;color:#001428}
.toowie-product .float-icon-gold:where([data-page="index"], [data-page="index"] *){background:#fff3da;color:#9a6b27}
.toowie-product .float-card-leads:where([data-page="index"], [data-page="index"] *){right:-26px;top:92px}
.toowie-product .float-card-leads:where([data-page="index"], [data-page="index"] *):after{content:"";position:absolute;left:-76px;top:50%;width:76px;height:1px;background:#c69a57}
.toowie-product .float-card-notes:where([data-page="index"], [data-page="index"] *){right:-18px;bottom:18px;max-width:285px}
.toowie-product .float-card-notes small:where([data-page="index"], [data-page="index"] *){max-width:220px;line-height:1.35}
.toowie-product .float-card-call:where([data-page="index"], [data-page="index"] *){left:-44px;top:132px;bottom:auto}
.toowie-product .float-card-call:where([data-page="index"], [data-page="index"] *):after{width:112px;right:-112px}
.toowie-product .float-card-flow:where([data-page="index"], [data-page="index"] *){right:18px;top:224px}
@media(max-width:1050px){
  .toowie-product .float-card-leads:where([data-page="index"], [data-page="index"] *){right:12px}
  .toowie-product .float-card-notes:where([data-page="index"], [data-page="index"] *){right:10px}
}

/* Removed hero callout connector lines */
.toowie-product .float-card-call:where([data-page="index"], [data-page="index"] *):after,.toowie-product .float-card-leads:where([data-page="index"], [data-page="index"] *):after,.toowie-product .float-card-flow:where([data-page="index"], [data-page="index"] *):after,.toowie-product .float-card-notes:where([data-page="index"], [data-page="index"] *):after{content:none !important;display:none !important}

/* Hero lead-manager callout: outside the screenshot without leaving the composition */
.toowie-product .float-card-leads:where([data-page="index"], [data-page="index"] *){right:-118px !important;top:86px !important}
@media(max-width:1180px) and (min-width:761px){.toowie-product .float-card-leads:where([data-page="index"], [data-page="index"] *){right:-72px !important}}

/* Hero headline and larger screenshot */
.toowie-product .hero-grid:where([data-page="index"], [data-page="index"] *){grid-template-columns:.82fr 1.18fr !important;gap:42px !important}
.toowie-product .hero-browser:where([data-page="index"], [data-page="index"] *){width:112%;max-width:none !important}
.toowie-product .hero-visual:where([data-page="index"], [data-page="index"] *){margin-right:-180px !important}
@media(max-width:1180px) and (min-width:761px){.toowie-product .hero-browser:where([data-page="index"], [data-page="index"] *){width:106%}.toowie-product .hero-visual:where([data-page="index"], [data-page="index"] *){margin-right:-120px !important}}
@media(max-width:760px){.toowie-product .hero-browser:where([data-page="index"], [data-page="index"] *){width:100% !important}.toowie-product .hero-visual:where([data-page="index"], [data-page="index"] *){margin-right:-72px !important}}


/* Hero screenshot crop and interactive spotlights */
.toowie-product .hero-browser:where([data-page="index"], [data-page="index"] *){position:relative}
.toowie-product .hero-browser img:where([data-page="index"], [data-page="index"] *){width:100%;height:580px;object-fit:cover;object-position:top center}
.toowie-product .hero-spotlights:where([data-page="index"], [data-page="index"] *){position:absolute;left:0;right:0;top:44px;bottom:0;pointer-events:none}
.toowie-product .hero-spotlight:where([data-page="index"], [data-page="index"] *){position:absolute;opacity:0;border-radius:12px;border:2px solid rgba(198,154,87,.95);box-shadow:0 0 0 999px rgba(7,20,44,.60),0 0 0 6px rgba(255,255,255,.55);transition:opacity .2s ease,transform .2s ease;transform:scale(.985)}
.toowie-product .hero-browser[data-active-spotlight="call"] .hero-spotlight-call:where([data-page="index"], [data-page="index"] *),.toowie-product .hero-browser[data-active-spotlight="leads"] .hero-spotlight-leads:where([data-page="index"], [data-page="index"] *),.toowie-product .hero-browser[data-active-spotlight="gatekeeper"] .hero-spotlight-gatekeeper:where([data-page="index"], [data-page="index"] *){opacity:1;transform:scale(1)}
.toowie-product .hero-spotlight-leads:where([data-page="index"], [data-page="index"] *){left:23.2%;top:4.6%;width:56.2%;height:14.8%;border-color:rgba(198,154,87,.95)}
.toowie-product .hero-spotlight-call:where([data-page="index"], [data-page="index"] *){left:61.8%;top:24.2%;width:4.8%;height:8%;border-radius:10px;border-color:rgba(198,154,87,.95)}
.toowie-product .hero-spotlight-gatekeeper:where([data-page="index"], [data-page="index"] *){left:7.2%;top:33.5%;width:72.5%;height:40.5%;border-color:rgba(198,154,87,.95)}
.toowie-product .float-card.is-interactive:where([data-page="index"], [data-page="index"] *){cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.toowie-product .float-card.is-interactive:hover:where([data-page="index"], [data-page="index"] *){transform:translateY(-7px)}
.toowie-product .float-card.is-interactive:focus-visible:where([data-page="index"], [data-page="index"] *){outline:2px solid #c69a57;outline-offset:2px}
.toowie-product .float-card.is-interactive.is-active:where([data-page="index"], [data-page="index"] *){border-color:#c69a57;box-shadow:0 24px 55px rgba(0,0,0,.28)}
.toowie-product .float-card-leads:where([data-page="index"], [data-page="index"] *){right:-72px !important;top:92px !important}
.toowie-product .float-card-flow:where([data-page="index"], [data-page="index"] *){right:8px;top:252px}
@media(max-width:1180px) and (min-width:761px){.toowie-product .float-card-leads:where([data-page="index"], [data-page="index"] *){right:-42px !important}.toowie-product .hero-browser img:where([data-page="index"], [data-page="index"] *){height:540px}}
@media(max-width:760px){.toowie-product .hero-browser img:where([data-page="index"], [data-page="index"] *){height:auto}.toowie-product .hero-spotlights:where([data-page="index"], [data-page="index"] *){display:none}}


/* Hero screenshot scroll and swap states */
@media(min-width:761px) and (prefers-reduced-motion:no-preference){
  /*
    Durchgehender Entrance-Reveal von der Mitte nach außen.
    Nur Start und Ende sind definiert, damit die Bewegung nicht an mehreren
    Zwischenpunkten abbremst oder sichtbar stockt.
  */
  .toowie-product .js .hero-visual .hero-browser:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:perspective(1600px) rotateY(-4deg) rotateX(1deg) scaleX(.025) translateZ(0);
    transform-origin:center center;
    will-change:transform,opacity;
    backface-visibility:hidden;
  }
  .toowie-product .js .hero-visual.is-visible .hero-browser:where([data-page="index"], [data-page="index"] *){
    animation:hero-browser-fluid-center-reveal 1.72s .30s cubic-bezier(.22,.61,.36,1) both;
  }
  .toowie-product .js .hero-visual .float-card:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateY(8px) scale(.98);
    transition:opacity .42s ease,transform .42s cubic-bezier(.22,1,.36,1);
  }
  .toowie-product .js .hero-visual.is-visible .float-card:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    transition-delay:1.88s;
  }
  @keyframes hero-browser-fluid-center-reveal{
    from{
      opacity:0;
      transform:perspective(1600px) rotateY(-4deg) rotateX(1deg) scaleX(.025) translateZ(0);
    }
    to{
      opacity:1;
      transform:perspective(1600px) rotateY(-4deg) rotateX(1deg) scaleX(1) translateZ(0);
    }
  }
}
.toowie-product .hero-browser:where([data-page="index"], [data-page="index"] *){position:relative;display:flex;flex-direction:column;overflow:hidden}
.toowie-product .hero-scroll-area:where([data-page="index"], [data-page="index"] *){max-height:580px;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;background:#fff}
.toowie-product .hero-scroll-area:where([data-page="index"], [data-page="index"] *)::-webkit-scrollbar{width:10px}.toowie-product .hero-scroll-area:where([data-page="index"], [data-page="index"] *)::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px;border:2px solid #fff}.toowie-product .hero-scroll-area:where([data-page="index"], [data-page="index"] *)::-webkit-scrollbar-track{background:#f8fafc}
.toowie-product .hero-browser .hero-swap-image:where([data-page="index"], [data-page="index"] *){width:100%;height:auto;object-fit:initial;display:block;cursor:zoom-in}
.toowie-product .akquise-hero-image-stage:where([data-page="index"], [data-page="index"] *){position:relative;width:100%}
.toowie-product .akquise-hero-focus-layer:where([data-page="index"], [data-page="index"] *){position:absolute;inset:0;z-index:2;pointer-events:none}
.toowie-product .akquise-hero-focus-overlay:where([data-page="index"], [data-page="index"] *){position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;transition:opacity .18s ease}
.toowie-product .akquise-hero-focus-layer.is-active .akquise-hero-focus-overlay:where([data-page="index"], [data-page="index"] *){opacity:1}
.toowie-product .akquise-hero-focus-dim:where([data-page="index"], [data-page="index"] *){fill:rgba(7,20,44,.20)}
.toowie-product .akquise-hero-focus-outline:where([data-page="index"], [data-page="index"] *){fill:none;stroke:var(--gold);stroke-width:3;vector-effect:non-scaling-stroke}
.toowie-product .akquise-hero-focus-halo:where([data-page="index"], [data-page="index"] *){fill:none;stroke:rgba(255,255,255,.92);stroke-width:7;vector-effect:non-scaling-stroke}
@media(max-width:760px){.toowie-product .akquise-hero-focus-outline:where([data-page="index"], [data-page="index"] *){stroke-width:2}.toowie-product .akquise-hero-focus-halo:where([data-page="index"], [data-page="index"] *){stroke-width:5}}
.toowie-product .hero-spotlights:where([data-page="index"], [data-page="index"] *),.toowie-product .hero-spotlight:where([data-page="index"], [data-page="index"] *){display:none !important}
.toowie-product .float-card.is-interactive:where([data-page="index"], [data-page="index"] *){cursor:pointer;border-width:2px;border-color:#cbd5e1;background:#fbf7ef;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease}
.toowie-product .float-card.is-interactive:hover:where([data-page="index"], [data-page="index"] *){transform:translateY(-7px);border-color:var(--gold)}
.toowie-product .float-card.is-interactive:focus-visible:where([data-page="index"], [data-page="index"] *){outline:2px solid #c69a57;outline-offset:2px}
.toowie-product .float-card.is-interactive.is-active:where([data-page="index"], [data-page="index"] *){border-color:#c69a57;background:#fbf7ef;box-shadow:0 24px 55px rgba(0,0,0,.28)}
.toowie-product .float-card-leads:where([data-page="index"], [data-page="index"] *){right:-72px !important;top:92px !important}
.toowie-product .float-card-flow:where([data-page="index"], [data-page="index"] *){right:8px;top:252px}
@media(max-width:1180px) and (min-width:761px){.toowie-product .float-card-leads:where([data-page="index"], [data-page="index"] *){right:-42px !important}.toowie-product .hero-scroll-area:where([data-page="index"], [data-page="index"] *){max-height:540px}}
@media(max-width:760px){.toowie-product .hero-scroll-area:where([data-page="index"], [data-page="index"] *){max-height:none;overflow:visible}}


/* Hero callouts follow the screenshot while the screenshot is scrolled */
.toowie-product .hero-visual:where([data-page="index"], [data-page="index"] *){--hero-scroll-top:0px}
.toowie-product .hero-scroll-card:where([data-page="index"], [data-page="index"] *){top:calc(var(--hero-card-y, 0px) - var(--hero-scroll-top, 0px)) !important;clip-path:inset(var(--hero-clip-top, 0px) 0 var(--hero-clip-bottom, 0px) 0 round 14px);will-change:top,clip-path,opacity;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease,opacity .12s linear}
.toowie-product .hero-scroll-card.is-outside-scroll:where([data-page="index"], [data-page="index"] *){opacity:0;pointer-events:none}


/* Hero callout positions: keep labels clear of the actual UI */
.toowie-product .float-card-call:where([data-page="index"], [data-page="index"] *){left:auto !important;right:-142px !important}
.toowie-product .float-card-flow:where([data-page="index"], [data-page="index"] *){right:-142px !important}
@media(max-width:1180px) and (min-width:761px){
  .toowie-product .float-card-call:where([data-page="index"], [data-page="index"] *),.toowie-product .float-card-flow:where([data-page="index"], [data-page="index"] *){right:-86px !important}
}

/* Lead-manager callout: moved further toward the screenshot center and lower */
.toowie-product .float-card-leads:where([data-page="index"], [data-page="index"] *){right:120px !important}
@media(max-width:1180px) and (min-width:761px){.toowie-product .float-card-leads:where([data-page="index"], [data-page="index"] *){right:72px !important}}

/* Notes callout: appears further down on the right while scrolling */
.toowie-product .float-card-notes:where([data-page="index"], [data-page="index"] *){right:-142px !important;bottom:auto !important;max-width:305px}
@media(max-width:1180px) and (min-width:761px){.toowie-product .float-card-notes:where([data-page="index"], [data-page="index"] *){right:-86px !important}}


/* Geführtes Skript: große Übersicht mit klickbaren Markierungen */
.toowie-product .guided-section:where([data-page="index"], [data-page="index"] *){padding-top:12px;background:#f8fafc}
.toowie-product .guided-showcase:where([data-page="index"], [data-page="index"] *){max-width:1160px;margin:0 auto}
.toowie-product .guided-overview-shot:where([data-page="index"], [data-page="index"] *){position:relative;overflow:hidden;border:1px solid var(--line);border-radius:24px;background:#f5f7fa;box-shadow:0 24px 64px rgba(15,23,42,.12)}
.toowie-product .guided-overview-shot>img:where([data-page="index"], [data-page="index"] *){width:100%;height:auto;display:block;transition:opacity .18s ease}
.toowie-product .guided-overview-shot>img.is-changing:where([data-page="index"], [data-page="index"] *){opacity:.35}
.toowie-product .guided-marker:where([data-page="index"], [data-page="index"] *){position:absolute;z-index:2;display:flex;align-items:center;gap:0;padding:11px 15px;border:0;border-radius:14px;background:var(--toowie-blue);color:#fff;box-shadow:0 14px 32px rgba(0,20,40,.30);font-size:11px;font-weight:900;white-space:nowrap;transform:translate(-50%,-50%);cursor:pointer;appearance:none;-webkit-appearance:none;text-align:left;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.toowie-product .guided-marker:hover:where([data-page="index"], [data-page="index"] *){transform:translate(-50%,-50%) translateY(-2px);box-shadow:0 18px 36px rgba(0,20,40,.34)}
.toowie-product .guided-marker:focus-visible:where([data-page="index"], [data-page="index"] *){outline:3px solid rgba(198,154,87,.34);outline-offset:4px}
.toowie-product .guided-marker.is-active:where([data-page="index"], [data-page="index"] *){filter:none;box-shadow:none;outline:4px solid #c69a57;outline-offset:0}
.toowie-product .guided-marker b:where([data-page="index"], [data-page="index"] *){font-size:12px;letter-spacing:-.01em;line-height:1.3}
.toowie-product .guided-marker-modes:where([data-page="index"], [data-page="index"] *){left:8%;top:50%}
.toowie-product .guided-marker-jump:where([data-page="index"], [data-page="index"] *){left:91%;top:55%}
.toowie-product .guided-marker-overview:where([data-page="index"], [data-page="index"] *){left:47%;top:26%}
.toowie-product .guided-feature-grid:where([data-page="index"], [data-page="index"] *){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px auto 0}
.toowie-product .guided-feature-card:where([data-page="index"], [data-page="index"] *){min-width:0;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 12px 34px rgba(15,23,42,.06);display:block;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;cursor:pointer}
.toowie-product .guided-feature-card.is-active:where([data-page="index"], [data-page="index"] *){border-color:#c69a57;box-shadow:0 16px 40px rgba(15,23,42,.11);transform:translateY(-2px)}
.toowie-product .guided-feature-copy:where([data-page="index"], [data-page="index"] *){padding:0}
.toowie-product .guided-feature-card h3:where([data-page="index"], [data-page="index"] *){margin:1px 0 8px;font-size:18px;line-height:1.2;letter-spacing:-.015em}
.toowie-product .guided-feature-card p:where([data-page="index"], [data-page="index"] *){margin:0;color:var(--muted);font-size:13px;line-height:1.62}
@media(max-width:900px){
  .toowie-product .guided-section:where([data-page="index"], [data-page="index"] *){padding-top:8px}
  .toowie-product .guided-feature-grid:where([data-page="index"], [data-page="index"] *){grid-template-columns:1fr}
  .toowie-product .guided-marker:where([data-page="index"], [data-page="index"] *){padding:8px 10px 8px 8px}
  .toowie-product .guided-marker b:where([data-page="index"], [data-page="index"] *){font-size:10px}
}
@media(max-width:620px){
  .toowie-product .guided-overview-shot:where([data-page="index"], [data-page="index"] *){border-radius:16px;overflow-x:auto}
  .toowie-product .guided-overview-shot>img:where([data-page="index"], [data-page="index"] *){width:760px;max-width:none}
  .toowie-product .guided-feature-card:where([data-page="index"], [data-page="index"] *){padding:18px}
}


/* Requested dark-blue text accents */
.toowie-product .problem-strip .statement-lead h2:where([data-page="index"], [data-page="index"] *),.toowie-product .problem-strip .mini-problems article:where([data-page="index"], [data-page="index"] *),.toowie-product .problem-strip .mini-problems b:where([data-page="index"], [data-page="index"] *),.toowie-product .problem-strip .mini-problems p:where([data-page="index"], [data-page="index"] *),.toowie-product .problem-strip .mini-problems > p:where([data-page="index"], [data-page="index"] *),.toowie-product .guided-section .section-head h2:where([data-page="index"], [data-page="index"] *){
  color: var(--blue) !important;
}


/* Problem-Strip: cleaner benefits styling per feedback */
.toowie-product .problem-strip .mini-problems:where([data-page="index"], [data-page="index"] *){
  position:relative;
  gap:14px;
  padding-left:28px;
}
.toowie-product .problem-strip .mini-problems:where([data-page="index"], [data-page="index"] *)::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  border-radius:999px;
  background:linear-gradient(180deg,#e9d4b0 0%, #c69a57 52%, #b88946 100%);
  box-shadow:0 0 0 1px rgba(198,154,87,.08);
}
.toowie-product .problem-strip .mini-problems article:where([data-page="index"], [data-page="index"] *){
  position:relative;
  grid-template-columns:46px 1fr;
  gap:14px;
  padding:10px 0 10px 0;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.toowie-product .problem-strip .mini-problems article+article:where([data-page="index"], [data-page="index"] *){
  border-top:1px solid rgba(15,23,42,.07);
  padding-top:14px;
}
.toowie-product .problem-strip .mini-problems article>span:where([data-page="index"], [data-page="index"] *){
  width:38px;
  height:38px;
  border-radius:11px;
  background:#f1e6d3 !important;
  color:var(--navy) !important;
  border:1px solid rgba(198,154,87,.18);
  box-shadow:none;
}
.toowie-product .problem-strip .mini-problems b:where([data-page="index"], [data-page="index"] *){
  display:block;
  font-size:21px;
  line-height:1.18;
  letter-spacing:-.02em;
  margin-top:2px;
}
.toowie-product .problem-strip .mini-problems p:where([data-page="index"], [data-page="index"] *){
  font-size:15px;
  line-height:1.56;
  margin-top:6px;
  max-width:520px;
}
.toowie-product .problem-strip .mini-problems > p:where([data-page="index"], [data-page="index"] *){
  position:relative;
  margin:18px 0 0 0 !important;
  padding-left:82px;
}
.toowie-product .problem-strip .mini-problems > p:where([data-page="index"], [data-page="index"] *)::before{
  content:"";
  position:absolute;
  left:60px;
  top:50%;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#22c55e;
  transform:translateY(-50%);
  box-shadow:0 0 0 5px rgba(34,197,94,.14);
}
@media(max-width:760px){
  .toowie-product .problem-strip .mini-problems:where([data-page="index"], [data-page="index"] *){padding-left:20px;gap:12px}
  .toowie-product .problem-strip .mini-problems:where([data-page="index"], [data-page="index"] *)::before{width:3px}
  .toowie-product .problem-strip .mini-problems article:where([data-page="index"], [data-page="index"] *){grid-template-columns:40px 1fr;gap:12px}
  .toowie-product .problem-strip .mini-problems article>span:where([data-page="index"], [data-page="index"] *){width:34px;height:34px;border-radius:10px}
  .toowie-product .problem-strip .mini-problems b:where([data-page="index"], [data-page="index"] *){font-size:18px}
  .toowie-product .problem-strip .mini-problems p:where([data-page="index"], [data-page="index"] *){font-size:14px}
  .toowie-product .problem-strip .mini-problems > p:where([data-page="index"], [data-page="index"] *){padding-left:72px}
  .toowie-product .problem-strip .mini-problems > p:where([data-page="index"], [data-page="index"] *)::before{left:52px;width:9px;height:9px}
}

@media(max-width:1050px){.toowie-product .phase-overview-box:where([data-page="index"], [data-page="index"] *){padding:34px 28px 38px}}
@media(max-width:760px){.toowie-product .phase-overview-box:where([data-page="index"], [data-page="index"] *){padding:26px 20px 30px;border-radius:22px}}

/* Full-width phase overview: keep the existing warm background, remove the boxed look, and pull the section upward. */
.toowie-product .guided-section:where([data-page="index"], [data-page="index"] *){padding-bottom:48px}
.toowie-product #gespraech.section-block.soft:where([data-page="index"], [data-page="index"] *){
  padding-top:48px;
  padding-bottom:0;
  background:linear-gradient(180deg,#fffefb 0%,#fcf7ef 100%);
}

/* Warm background belongs to the customizable-script section, not to an empty spacer below objection handling. */
.toowie-product #anpassbar:where([data-page="index"], [data-page="index"] *){
  background:linear-gradient(180deg,#fffefb 0%,#fcf7ef 100%);
}

.toowie-product #gespraech .phase-overview-box:where([data-page="index"], [data-page="index"] *){
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
@media(max-width:760px){
  .toowie-product .guided-section:where([data-page="index"], [data-page="index"] *){padding-bottom:32px}
  .toowie-product #gespraech.section-block.soft:where([data-page="index"], [data-page="index"] *){padding-top:36px}
  .toowie-product #gespraech .phase-overview-box:where([data-page="index"], [data-page="index"] *){padding:0;border-radius:0}
}


/* Phase overview refinements */
.toowie-product #gespraech .section-head h2:where([data-page="index"], [data-page="index"] *){
  color:var(--blue);
}
.toowie-product #gespraech .phase-card:where([data-page="index"], [data-page="index"] *){
  min-height:0;
}
.toowie-product #gespraech .phase-head-copy:where([data-page="index"], [data-page="index"] *){
  align-self:end;
}
.toowie-product #gespraech .phase-head-copy>p:first-child:where([data-page="index"], [data-page="index"] *){
  font-size:16px;
  line-height:1.7;
  color:var(--muted);
  margin:0;
  max-width:480px;
}
.toowie-product #gespraech .phase-communication:where([data-page="index"], [data-page="index"] *){
  position:relative;
  margin:16px 0 0 !important;
  padding-left:22px;
  color:var(--blue) !important;
  font-size:15px !important;
  line-height:1.5 !important;
  font-weight:850;
}
.toowie-product #gespraech .phase-communication:where([data-page="index"], [data-page="index"] *)::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#22c55e;
  transform:translateY(-50%);
  box-shadow:0 0 0 5px rgba(34,197,94,.14);
}
@media(max-width:1050px){
  .toowie-product #gespraech .phase-head-copy:where([data-page="index"], [data-page="index"] *){align-self:auto}
}
@media(max-width:760px){
  .toowie-product #gespraech .phase-card:where([data-page="index"], [data-page="index"] *){min-height:0!important}
  .toowie-product #gespraech .phase-communication:where([data-page="index"], [data-page="index"] *){padding-left:21px}
  .toowie-product #gespraech .phase-communication:where([data-page="index"], [data-page="index"] *)::before{width:9px;height:9px}
}

/* Einwandbehandlung als eigener, vollbreiter Bereich – gleicher Hintergrund wie der Fokus-Abschnitt. */
.toowie-product #gespraech .objection-showcase:where([data-page="index"], [data-page="index"] *){
  position:relative;
  padding:80px 0;
  background:#f8fafc;
  box-shadow:0 0 0 100vmax #f8fafc;
  clip-path:inset(0 -100vmax);
}
@media(max-width:760px){
  .toowie-product #gespraech .objection-showcase:where([data-page="index"], [data-page="index"] *){padding:72px 0}
}

/* Deutlichere Einblendeffekte für Gesprächsphasen und Einwandbehandlung */
.toowie-product .js .phase-overview-box .section-head.reveal:where([data-page="index"], [data-page="index"] *){
  opacity:0;
  transform:translateY(34px) scale(.985);
  filter:blur(7px);
  transition:opacity .82s cubic-bezier(.22,1,.36,1),transform .82s cubic-bezier(.22,1,.36,1),filter .82s ease;
}
.toowie-product .js .phase-overview-box .section-head.reveal.is-visible:where([data-page="index"], [data-page="index"] *){
  opacity:1;
  transform:none;
  filter:blur(0);
}

.toowie-product .js .phase-overview-box .conversation-flow.reveal:where([data-page="index"], [data-page="index"] *){
  opacity:1;
  transform:none;
}
.toowie-product .js .phase-overview-box .conversation-flow.reveal .phase-card:where([data-page="index"], [data-page="index"] *){
  opacity:0;
  transform:translateY(30px) scale(.97);
  filter:blur(5px);
  transition:opacity .62s cubic-bezier(.22,1,.36,1),transform .62s cubic-bezier(.22,1,.36,1),filter .62s ease;
}
.toowie-product .js .phase-overview-box .conversation-flow.reveal.is-visible .phase-card:where([data-page="index"], [data-page="index"] *){
  opacity:1;
  transform:none;
  filter:blur(0);
}
.toowie-product .js .phase-overview-box .conversation-flow.reveal.is-visible .phase-card:nth-child(1):where([data-page="index"], [data-page="index"] *){transition-delay:.02s}
.toowie-product .js .phase-overview-box .conversation-flow.reveal.is-visible .phase-card:nth-child(2):where([data-page="index"], [data-page="index"] *){transition-delay:.10s}
.toowie-product .js .phase-overview-box .conversation-flow.reveal.is-visible .phase-card:nth-child(3):where([data-page="index"], [data-page="index"] *){transition-delay:.18s}
.toowie-product .js .phase-overview-box .conversation-flow.reveal.is-visible .phase-card:nth-child(4):where([data-page="index"], [data-page="index"] *){transition-delay:.26s}
.toowie-product .js .phase-overview-box .conversation-flow.reveal.is-visible .phase-card:nth-child(5):where([data-page="index"], [data-page="index"] *){transition-delay:.34s}

.toowie-product .js .phase-overview-box .objection-showcase.reveal:where([data-page="index"], [data-page="index"] *){
  opacity:1;
  transform:none;
}
.toowie-product .js .phase-overview-box .objection-showcase.reveal .objection-copy:where([data-page="index"], [data-page="index"] *){
  opacity:0;
  transform:translateX(-34px) translateY(12px);
  filter:none;
  transition:opacity .32s cubic-bezier(.22,1,.36,1),transform .32s cubic-bezier(.22,1,.36,1);
}
.toowie-product .js .phase-overview-box .objection-showcase.reveal .compact-browser:where([data-page="index"], [data-page="index"] *){
  opacity:0;
  transform:translateX(38px) translateY(12px) scale(.975);
  filter:blur(6px);
  transition:opacity .82s .10s cubic-bezier(.22,1,.36,1),transform .82s .10s cubic-bezier(.22,1,.36,1),filter .82s .10s ease;
}
.toowie-product .js .phase-overview-box .objection-showcase.reveal.is-visible .objection-copy:where([data-page="index"], [data-page="index"] *),.toowie-product .js .phase-overview-box .objection-showcase.reveal.is-visible .compact-browser:where([data-page="index"], [data-page="index"] *){
  opacity:1;
  transform:none;
  filter:blur(0);
}

@media(prefers-reduced-motion:reduce){
  .toowie-product .js .phase-overview-box .section-head.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js .phase-overview-box .conversation-flow.reveal .phase-card:where([data-page="index"], [data-page="index"] *),.toowie-product .js .phase-overview-box .objection-showcase.reveal .objection-copy:where([data-page="index"], [data-page="index"] *),.toowie-product .js .phase-overview-box .objection-showcase.reveal .compact-browser:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
  }
}

/* Dunkelblaue Überschriften und Hervorhebungen in Einwandbehandlung & Anpassbarkeit */
.toowie-product #gespraech .objection-copy h2:where([data-page="index"], [data-page="index"] *),.toowie-product #anpassbar .copy-col h2:where([data-page="index"], [data-page="index"] *),.toowie-product #anpassbar .detail-list b:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .check-list li:first-child:where([data-page="index"], [data-page="index"] *){
  color: var(--blue) !important;
}

/* Requested dark-blue card headings */
.toowie-product .guided-section .guided-feature-card h3:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .phase-card:nth-child(2) h3:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .phase-card:nth-child(3) h3:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .phase-card:nth-child(4) h3:where([data-page="index"], [data-page="index"] *){
  color: var(--blue) !important;
}

/* Farbangleichungen laut Feedback: Dunkelblau und einheitliche Hero-Buttons */
.toowie-product #gespraech .check-list li:nth-child(2):where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .check-list li:nth-child(3):where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .check-list li:nth-child(2) > span:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .check-list li:nth-child(3) > span:where([data-page="index"], [data-page="index"] *),.toowie-product #anpassbar .detail-list article > span:where([data-page="index"], [data-page="index"] *){
  color: var(--blue) !important;
}

.toowie-product .hero .hero-actions .btn-primary:where([data-page="index"], [data-page="index"] *),.toowie-product .hero .hero-actions .btn-ghost:where([data-page="index"], [data-page="index"] *){
  color: var(--blue) !important;
  background: #fff;
  border-color: rgba(198,154,87,.52);
}

.toowie-product .hero .hero-actions .btn-primary:hover:where([data-page="index"], [data-page="index"] *),.toowie-product .hero .hero-actions .btn-ghost:hover:where([data-page="index"], [data-page="index"] *){
  background: #fbf7ef;
  border-color: rgba(198,154,87,.72);
}


/* Eigenes Symbol für Gesprächswege */
.toowie-product #anpassbar .detail-list .detail-logo-icon:where([data-page="index"], [data-page="index"] *){
  display:flex;
  align-items:center;
  justify-content:center;
  padding:7px;
}

.toowie-product #anpassbar .detail-list .detail-logo-symbol:where([data-page="index"], [data-page="index"] *){
  width:22px;
  height:22px;
  object-fit:contain;
}

/* Wiederholbare Einblendungen für die beiden Einstiegsblöcke */
@media(prefers-reduced-motion:no-preference){
  .toowie-product .js .hero-copy.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateX(-28px) translateY(12px);
    filter:blur(6px);
    transition:opacity .76s cubic-bezier(.22,1,.36,1),transform .76s cubic-bezier(.22,1,.36,1),filter .76s ease;
  }
  .toowie-product .js .hero-copy.reveal.is-visible:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:blur(0);
  }
  .toowie-product .js .hero-visual.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:none;
  }
  .toowie-product .js .hero-visual.reveal.is-visible:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:none;
  }
  .toowie-product .js .problem-strip .statement-lead.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateX(-30px) translateY(12px);
    filter:blur(6px);
    transition:opacity .78s cubic-bezier(.22,1,.36,1),transform .78s cubic-bezier(.22,1,.36,1),filter .78s ease;
  }
  .toowie-product .js .problem-strip .mini-problems.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateX(30px) translateY(12px);
    filter:blur(6px);
    transition:opacity .78s .08s cubic-bezier(.22,1,.36,1),transform .78s .08s cubic-bezier(.22,1,.36,1),filter .78s .08s ease;
  }
  .toowie-product .js .problem-strip .statement-lead.reveal.is-visible:where([data-page="index"], [data-page="index"] *),.toowie-product .js .problem-strip .mini-problems.reveal.is-visible:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:blur(0);
  }

}



/* Lead-Manager: Überschrift, Box-Titel und Symbole in Dunkelblau */
.toowie-product #lead-manager .copy-col h2:where([data-page="index"], [data-page="index"] *),.toowie-product #lead-manager .metric-stack b:where([data-page="index"], [data-page="index"] *),.toowie-product #lead-manager .metric-icon:where([data-page="index"], [data-page="index"] *),.toowie-product #lead-manager .metric-icon.green:where([data-page="index"], [data-page="index"] *),.toowie-product #lead-manager .metric-icon.blue:where([data-page="index"], [data-page="index"] *),.toowie-product #lead-manager .metric-icon.gold:where([data-page="index"], [data-page="index"] *){
  color: var(--blue) !important;
}

/* Zweifarbige Überschriften */
.toowie-product .heading-blue:where([data-page="index"], [data-page="index"] *){
  color: var(--blue) !important;
}

.toowie-product .heading-gold:where([data-page="index"], [data-page="index"] *){
  color: var(--gold) !important;
}

.toowie-product #anpassbar .copy-col h2 .heading-blue:where([data-page="index"], [data-page="index"] *),.toowie-product #lead-manager .copy-col h2 .heading-blue:where([data-page="index"], [data-page="index"] *),.toowie-product #anpassbar .copy-col h2 .heading-gold:where([data-page="index"], [data-page="index"] *),.toowie-product #lead-manager .copy-col h2 .heading-gold:where([data-page="index"], [data-page="index"] *){
  display:inline;
}

/* Transfer-Symbol für Lead-Übernahme */
.toowie-product .float-icon-transfer:where([data-page="index"], [data-page="index"] *),.toowie-product .metric-icon-transfer:where([data-page="index"], [data-page="index"] *){
  background: #fff3da !important;
  color: var(--blue) !important;
}

.toowie-product .metric-icon-transfer:where([data-page="index"], [data-page="index"] *){
  border: none;
}

.toowie-product .float-icon-transfer svg:where([data-page="index"], [data-page="index"] *),.toowie-product .metric-icon-transfer svg:where([data-page="index"], [data-page="index"] *){
  width: 18px;
  height: 18px;
  display: block;
}

.toowie-product .float-icon-transfer svg path:where([data-page="index"], [data-page="index"] *),.toowie-product .metric-icon-transfer svg path:where([data-page="index"], [data-page="index"] *){
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Klare Farbtrennung der beiden Abschnitte */
.toowie-product #lead-manager:where([data-page="index"], [data-page="index"] *),.toowie-product #rejection-tracker:where([data-page="index"], [data-page="index"] *){
  position:relative;
  overflow:hidden;
}

.toowie-product #lead-manager:where([data-page="index"], [data-page="index"] *){
  background:linear-gradient(180deg,#e8f1f4 0%,#eef4f8 100%);
}

.toowie-product #rejection-tracker:where([data-page="index"], [data-page="index"] *){
  background:linear-gradient(180deg,#fffefb 0%,#fcf7ef 100%);
}

.toowie-product #lead-manager .shell:where([data-page="index"], [data-page="index"] *),.toowie-product #rejection-tracker .shell:where([data-page="index"], [data-page="index"] *){
  position:relative;
  z-index:1;
}

/* Lead-Manager Abschnitt neu anordnen */
.toowie-product #lead-manager .lead-manager-box:where([data-page="index"], [data-page="index"] *){
  padding:0;
  border:none;
  border-radius:0;
  background:none;
  box-shadow:none;
}

.toowie-product #lead-manager .lead-manager-top:where([data-page="index"], [data-page="index"] *){
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(340px,.96fr);
  gap:58px;
  align-items:start;
}

.toowie-product #lead-manager .copy-col:where([data-page="index"], [data-page="index"] *){
  max-width:none;
}

.toowie-product #lead-manager .copy-col h2:where([data-page="index"], [data-page="index"] *){
  max-width:640px;
}

.toowie-product #lead-manager .copy-col>p:where([data-page="index"], [data-page="index"] *){
  max-width:620px;
  margin-left:0;
}

.toowie-product #lead-manager .lead-manager-side:where([data-page="index"], [data-page="index"] *){
  position:relative;
  padding-left:28px;
}

.toowie-product #lead-manager .lead-manager-side:where([data-page="index"], [data-page="index"] *)::before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  bottom:4px;
  width:4px;
  border-radius:999px;
  background:linear-gradient(180deg,#d4b47e 0%,#c69a57 100%);
}

.toowie-product #lead-manager .lead-manager-side .metric-stack:where([data-page="index"], [data-page="index"] *){
  margin-top:0;
  gap:22px;
}

.toowie-product #lead-manager .metric-stack article:where([data-page="index"], [data-page="index"] *){
  grid-template-columns:42px 1fr;
  gap:14px;
}

.toowie-product #lead-manager .metric-stack b:where([data-page="index"], [data-page="index"] *){
  display:block;
  margin-bottom:2px;
}

.toowie-product #lead-manager .lead-browser-wrap:where([data-page="index"], [data-page="index"] *){
  margin-top:30px;
  padding:0;
  border:none;
  border-radius:0;
  background:none;
}

.toowie-product #lead-manager .lead-browser:where([data-page="index"], [data-page="index"] *){
  width:100%;
  max-width:none;
  height:520px;
  margin:0;
  overflow:hidden;
  box-shadow:0 18px 44px rgba(15,23,42,.10);
}

.toowie-product #lead-manager .lead-browser img:where([data-page="index"], [data-page="index"] *){
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
}

@media(max-width:1050px){
  .toowie-product #lead-manager .lead-manager-top:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr;
    gap:36px;
  }

  .toowie-product #lead-manager .lead-manager-side:where([data-page="index"], [data-page="index"] *){
    padding-left:0;
    padding-top:22px;
  }

  .toowie-product #lead-manager .lead-manager-side:where([data-page="index"], [data-page="index"] *)::before{
    left:0;
    right:0;
    top:0;
    bottom:auto;
    width:100%;
    height:4px;
  }

  .toowie-product #lead-manager .lead-browser:where([data-page="index"], [data-page="index"] *){
    max-width:100%;
    height:460px;
  }
}

@media(max-width:760px){
  .toowie-product #lead-manager .lead-manager-side:where([data-page="index"], [data-page="index"] *){
    padding-top:18px;
  }

  .toowie-product #lead-manager .lead-manager-side .metric-stack:where([data-page="index"], [data-page="index"] *){
    gap:16px;
  }

  .toowie-product #lead-manager .lead-browser-wrap:where([data-page="index"], [data-page="index"] *){
    margin-top:24px;
  }

  .toowie-product #lead-manager .lead-browser:where([data-page="index"], [data-page="index"] *){
    height:340px;
  }
}


/* Rejection-Tracker: eigener Zusatzblock unter dem Lead-Manager */

.toowie-product #rejection-tracker .rejection-tracker-box:where([data-page="index"], [data-page="index"] *){
  display:grid;
  gap:34px;
}

.toowie-product #rejection-tracker .rejection-intro:where([data-page="index"], [data-page="index"] *){
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.85fr);
  gap:56px;
  align-items:start;
}

.toowie-product #rejection-tracker .section-kicker:where([data-page="index"], [data-page="index"] *){
  color:var(--gold);
}

.toowie-product #rejection-tracker .rejection-intro-copy h2:where([data-page="index"], [data-page="index"] *){
  margin:14px 0 0;
  max-width:760px;
  font-size:clamp(34px,4.4vw,56px);
  line-height:1.03;
  letter-spacing:-.05em;
  color:var(--blue);
}

.toowie-product #rejection-tracker .rejection-intro-text:where([data-page="index"], [data-page="index"] *){
  padding-top:44px;
}

.toowie-product #rejection-tracker .rejection-intro-text p:where([data-page="index"], [data-page="index"] *){
  margin:0;
  max-width:420px;
  font-size:16px;
  line-height:1.8;
  color:var(--muted);
}

.toowie-product #rejection-tracker .rejection-browser-wrap:where([data-page="index"], [data-page="index"] *){
  padding:0;
}

.toowie-product #rejection-tracker .rejection-browser:where([data-page="index"], [data-page="index"] *){
  width:100%;
  max-width:none;
  margin:0;
  overflow:hidden;
  background:#eef2f7;
  box-shadow:0 18px 44px rgba(15,23,42,.10);
}

.toowie-product #rejection-tracker .rejection-browser img:where([data-page="index"], [data-page="index"] *){
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center top;
}

@media(max-width:1050px){
  .toowie-product #rejection-tracker .rejection-intro:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr;
    gap:26px;
  }

  .toowie-product #rejection-tracker .rejection-intro-text:where([data-page="index"], [data-page="index"] *){
    padding-top:0;
  }

  .toowie-product #rejection-tracker .rejection-intro-text p:where([data-page="index"], [data-page="index"] *){
    max-width:700px;
  }
}

@media(max-width:760px){
  .toowie-product #rejection-tracker .rejection-tracker-box:where([data-page="index"], [data-page="index"] *){
    gap:24px;
  }

  .toowie-product #rejection-tracker .rejection-intro-copy h2:where([data-page="index"], [data-page="index"] *){
    font-size:34px;
  }

  .toowie-product #rejection-tracker .rejection-intro-text p:where([data-page="index"], [data-page="index"] *){
    font-size:15px;
    line-height:1.7;
  }
}

/* Abschluss: Lead-Daten, Status und Gesprächsnotizen nach dem Call */
.toowie-product .closing-section:where([data-page="index"], [data-page="index"] *){
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#eef4f8 0%,#f8fafc 100%);
}

.toowie-product .closing-section .shell:where([data-page="index"], [data-page="index"] *){
  position:relative;
  z-index:1;
}

.toowie-product .closing-overview:where([data-page="index"], [data-page="index"] *){
  display:grid;
  gap:30px;
}

.toowie-product .closing-intro:where([data-page="index"], [data-page="index"] *){
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);
  gap:58px;
  align-items:start;
}

.toowie-product .closing-copy h2:where([data-page="index"], [data-page="index"] *){
  margin:14px 0 0;
  max-width:780px;
  font-size:clamp(34px,4.4vw,56px);
  line-height:1.03;
  letter-spacing:-.05em;
}

.toowie-product .closing-intro-text:where([data-page="index"], [data-page="index"] *){
  padding-top:44px;
}

.toowie-product .closing-intro-text p:where([data-page="index"], [data-page="index"] *){
  margin:0;
  max-width:430px;
  font-size:16px;
  line-height:1.8;
  color:var(--muted);
}

.toowie-product .closing-points:where([data-page="index"], [data-page="index"] *){
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.toowie-product .closing-points article:where([data-page="index"], [data-page="index"] *){
  min-height:126px;
  display:grid;
  grid-template-columns:38px 1fr;
  gap:13px;
  align-items:start;
  padding:18px;
  border:1px solid rgba(148,163,184,.28);
  border-radius:17px;
  background:rgba(255,255,255,.78);
  box-shadow:0 10px 25px rgba(15,23,42,.04);
}

.toowie-product .closing-points article>span:where([data-page="index"], [data-page="index"] *){
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#fff3da;
  color:var(--blue);
  font-size:10px;
  font-weight:950;
}

.toowie-product .closing-points b:where([data-page="index"], [data-page="index"] *){
  display:block;
  font-size:14px;
  color:var(--blue);
}

.toowie-product .closing-points p:where([data-page="index"], [data-page="index"] *){
  margin:5px 0 0;
  font-size:12px;
  line-height:1.55;
  color:var(--muted);
}

.toowie-product .closing-browser-wrap:where([data-page="index"], [data-page="index"] *){
  padding:0;
}

.toowie-product .closing-browser:where([data-page="index"], [data-page="index"] *){
  width:100%;
  max-width:none;
  margin:0;
  overflow:hidden;
  background:#eef2f7;
  box-shadow:0 18px 44px rgba(15,23,42,.10);
}

.toowie-product .closing-browser img:where([data-page="index"], [data-page="index"] *){
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center top;
}

@media(max-width:1050px){
  .toowie-product .closing-intro:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr;
    gap:26px;
  }

  .toowie-product .closing-intro-text:where([data-page="index"], [data-page="index"] *){
    padding-top:0;
  }

  .toowie-product .closing-intro-text p:where([data-page="index"], [data-page="index"] *){
    max-width:720px;
  }
}

@media(max-width:760px){
  .toowie-product .closing-overview:where([data-page="index"], [data-page="index"] *){
    gap:24px;
  }

  .toowie-product .closing-copy h2:where([data-page="index"], [data-page="index"] *){
    font-size:34px;
  }

  .toowie-product .closing-intro-text p:where([data-page="index"], [data-page="index"] *){
    font-size:15px;
    line-height:1.7;
  }

  .toowie-product .closing-points:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr;
  }

  .toowie-product .closing-points article:where([data-page="index"], [data-page="index"] *){
    min-height:0;
  }
}

/* Finaler CTA: starke Abschlussbotschaft und direkte Anfrage */
.toowie-product .final-cta:where([data-page="index"], [data-page="index"] *){
  position:relative;
  overflow:hidden;
  padding:104px 0;
  background:linear-gradient(135deg,#061227 0%,#0b1f40 54%,#12315f 100%);
}

.toowie-product .final-card:where([data-page="index"], [data-page="index"] *){
  min-height:420px;
  padding:0;
  grid-template-columns:minmax(0,1.3fr) minmax(330px,.7fr);
  gap:74px;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
}

.toowie-product .final-glow-one:where([data-page="index"], [data-page="index"] *){
  width:560px;
  height:560px;
  right:-150px;
  top:-300px;
  background:radial-gradient(circle,rgba(198,154,87,.30),rgba(198,154,87,0) 67%);
}

.toowie-product .final-glow-two:where([data-page="index"], [data-page="index"] *){
  width:520px;
  height:520px;
  left:-300px;
  bottom:-330px;
  top:auto;
  right:auto;
  background:radial-gradient(circle,rgba(71,125,190,.24),rgba(71,125,190,0) 70%);
}

.toowie-product .final-eyebrow:where([data-page="index"], [data-page="index"] *){
  margin-bottom:2px;
}

.toowie-product .final-copy h2:where([data-page="index"], [data-page="index"] *){
  max-width:760px;
  margin:16px 0 20px;
  font-size:clamp(38px,4.7vw,62px);
  line-height:1.01;
  letter-spacing:-.055em;
}

.toowie-product .final-copy h2 span:where([data-page="index"], [data-page="index"] *){
  color:#d8b77f;
}

.toowie-product .final-copy .final-lead:where([data-page="index"], [data-page="index"] *){
  max-width:720px;
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:16px;
  line-height:1.75;
}

.toowie-product .final-benefits:where([data-page="index"], [data-page="index"] *){
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:28px 0 0;
}

.toowie-product .final-benefits span:where([data-page="index"], [data-page="index"] *){
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:0 13px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.065);
  color:#fff;
  font-size:12px;
  font-weight:850;
  backdrop-filter:blur(8px);
}

.toowie-product .final-benefits i:where([data-page="index"], [data-page="index"] *){
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(198,154,87,.16);
  color:#e7c98f;
  font-style:normal;
  font-size:10px;
}

.toowie-product .final-transfer:where([data-page="index"], [data-page="index"] *){
  max-width:720px;
  margin:22px 0 0;
  padding-top:22px;
  color:rgba(255,255,255,.58);
  font-size:13px;
  line-height:1.7;
}

.toowie-product .final-actions:where([data-page="index"], [data-page="index"] *){
  align-self:stretch;
  justify-content:center;
  padding:30px;
  border:1px solid rgba(198,154,87,.25);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.045));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 50px rgba(0,0,0,.12);
  backdrop-filter:blur(14px);
}

.toowie-product .final-action-label:where([data-page="index"], [data-page="index"] *){
  color:#fff;
  font-size:21px;
  line-height:1.25;
  font-weight:950;
  letter-spacing:-.025em;
}

.toowie-product .final-actions>p:where([data-page="index"], [data-page="index"] *){
  margin:2px 0 10px;
  color:rgba(255,255,255,.66);
  font-size:13px;
  line-height:1.65;
}

.toowie-product .final-cta-button:where([data-page="index"], [data-page="index"] *){
  color:#fff;
  width:100%;
  min-height:58px;
  padding:0 22px;
  margin-top:8px;
  border-radius:15px;
  font-size:14px;
  box-shadow:0 16px 35px rgba(198,154,87,.24);
}

.toowie-product .final-cta-button span:where([data-page="index"], [data-page="index"] *){
  font-size:19px;
  line-height:1;
  transition:transform .18s ease;
}

.toowie-product .final-cta-button:hover span:where([data-page="index"], [data-page="index"] *){
  transform:translateX(3px);
}

.toowie-product .final-actions small:where([data-page="index"], [data-page="index"] *){
  margin-top:2px;
  color:rgba(255,255,255,.42);
  font-size:10px;
  line-height:1.55;
}

@media(max-width:1050px){
  .toowie-product .final-card:where([data-page="index"], [data-page="index"] *){
    min-height:0;
    grid-template-columns:1fr;
    gap:36px;
    padding:0;
  }

  .toowie-product .final-actions:where([data-page="index"], [data-page="index"] *){
    max-width:620px;
  }
}

@media(max-width:760px){
  .toowie-product .final-cta:where([data-page="index"], [data-page="index"] *){
    padding:72px 0;
  }

  .toowie-product .final-card:where([data-page="index"], [data-page="index"] *){
    padding:0;
    gap:30px;
    border-radius:0;
  }

  .toowie-product .final-copy h2:where([data-page="index"], [data-page="index"] *){
    font-size:39px;
  }

  .toowie-product .final-copy .final-lead:where([data-page="index"], [data-page="index"] *){
    font-size:15px;
    line-height:1.68;
  }

  .toowie-product .final-benefits:where([data-page="index"], [data-page="index"] *){
    display:grid;
    grid-template-columns:1fr;
  }

  .toowie-product .final-benefits span:where([data-page="index"], [data-page="index"] *){
    width:max-content;
  }

  .toowie-product .final-transfer:where([data-page="index"], [data-page="index"] *){
    font-size:12px;
  }

  .toowie-product .final-actions:where([data-page="index"], [data-page="index"] *){
    padding:23px 20px;
    border-radius:19px;
  }

  .toowie-product .final-action-label:where([data-page="index"], [data-page="index"] *){
    font-size:19px;
  }

  .toowie-product .final-cta-button:where([data-page="index"], [data-page="index"] *){
    min-height:56px;
    padding:10px 18px;
    text-align:center;
  }
}

/* Scroll-Animationen ab Einwandbehandlung bis zum Seitenende */
@media(prefers-reduced-motion:no-preference){
  /* Persönlich anpassbar: Text und Produktansicht kommen gegeneinander ins Bild. */
  .toowie-product .js #anpassbar .copy-col.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateX(-36px) translateY(14px);
    filter:blur(6px);
    transition:opacity .78s cubic-bezier(.22,1,.36,1),transform .78s cubic-bezier(.22,1,.36,1),filter .78s ease;
  }
  .toowie-product .js #anpassbar .copy-col.reveal.is-visible:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:blur(0);
  }
  .toowie-product .js #anpassbar .copy-col.reveal .detail-list article:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateY(18px);
    transition:opacity .54s cubic-bezier(.22,1,.36,1),transform .54s cubic-bezier(.22,1,.36,1);
  }
  .toowie-product .js #anpassbar .copy-col.reveal.is-visible .detail-list article:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
  }
  .toowie-product .js #anpassbar .copy-col.reveal.is-visible .detail-list article:nth-child(1):where([data-page="index"], [data-page="index"] *){transition-delay:.16s}
  .toowie-product .js #anpassbar .copy-col.reveal.is-visible .detail-list article:nth-child(2):where([data-page="index"], [data-page="index"] *){transition-delay:.24s}
  .toowie-product .js #anpassbar .copy-col.reveal.is-visible .detail-list article:nth-child(3):where([data-page="index"], [data-page="index"] *){transition-delay:.32s}
  .toowie-product .js #anpassbar .side-browser.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateX(42px) translateY(16px) scale(.975);
    filter:blur(7px);
    transition:opacity .84s .08s cubic-bezier(.22,1,.36,1),transform .84s .08s cubic-bezier(.22,1,.36,1),filter .84s .08s ease;
  }
  .toowie-product .js #anpassbar .side-browser.reveal.is-visible:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:blur(0);
  }

  /* Team: Überschrift, drei Schritte und Zitat gestaffelt aufbauen. */
  .toowie-product .js #team .section-head.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateY(32px) scale(.985);
    filter:blur(6px);
    transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1),filter .8s ease;
  }
  .toowie-product .js #team .section-head.reveal.is-visible:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:blur(0);
  }
  .toowie-product .js #team .team-grid.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
  }
  .toowie-product .js #team .team-grid.reveal article:where([data-page="index"], [data-page="index"] *),.toowie-product .js #team .team-grid.reveal .team-line:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateY(25px) scale(.97);
    transition:opacity .58s cubic-bezier(.22,1,.36,1),transform .58s cubic-bezier(.22,1,.36,1);
  }
  .toowie-product .js #team .team-grid.reveal.is-visible article:where([data-page="index"], [data-page="index"] *),.toowie-product .js #team .team-grid.reveal.is-visible .team-line:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
  }
  .toowie-product .js #team .team-grid.reveal.is-visible article:nth-child(1):where([data-page="index"], [data-page="index"] *){transition-delay:.02s}
  .toowie-product .js #team .team-grid.reveal.is-visible .team-line:nth-child(2):where([data-page="index"], [data-page="index"] *){transition-delay:.10s}
  .toowie-product .js #team .team-grid.reveal.is-visible article:nth-child(3):where([data-page="index"], [data-page="index"] *){transition-delay:.16s}
  .toowie-product .js #team .team-grid.reveal.is-visible .team-line:nth-child(4):where([data-page="index"], [data-page="index"] *){transition-delay:.24s}
  .toowie-product .js #team .team-grid.reveal.is-visible article:nth-child(5):where([data-page="index"], [data-page="index"] *){transition-delay:.30s}
  .toowie-product .js #team .team-quote.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateY(24px) scale(.98);
    filter:blur(5px);
    transition:opacity .72s cubic-bezier(.22,1,.36,1),transform .72s cubic-bezier(.22,1,.36,1),filter .72s ease;
  }
  .toowie-product .js #team .team-quote.reveal.is-visible:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:blur(0);
  }

  /* Lead Manager: linke Erklärung, rechte Funktionsliste und Screenshot getrennt animieren. */
  .toowie-product .js #lead-manager .copy-col.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateX(-38px) translateY(12px);
    filter:blur(6px);
    transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1),filter .8s ease;
  }
  .toowie-product .js #lead-manager .copy-col.reveal.is-visible:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:blur(0);
  }
  .toowie-product .js #lead-manager .lead-manager-side.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
  }
  .toowie-product .js #lead-manager .lead-manager-side.reveal:where([data-page="index"], [data-page="index"] *)::before{
    transform:scaleY(0);
    transform-origin:top;
    transition:transform .72s cubic-bezier(.22,1,.36,1);
  }
  .toowie-product .js #lead-manager .lead-manager-side.reveal.is-visible:where([data-page="index"], [data-page="index"] *)::before{
    transform:scaleY(1);
  }
  .toowie-product .js #lead-manager .lead-manager-side.reveal .metric-stack article:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateX(30px) translateY(8px);
    filter:blur(4px);
    transition:opacity .58s cubic-bezier(.22,1,.36,1),transform .58s cubic-bezier(.22,1,.36,1),filter .58s ease;
  }
  .toowie-product .js #lead-manager .lead-manager-side.reveal.is-visible .metric-stack article:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:blur(0);
  }
  .toowie-product .js #lead-manager .lead-manager-side.reveal.is-visible .metric-stack article:nth-child(1):where([data-page="index"], [data-page="index"] *){transition-delay:.05s}
  .toowie-product .js #lead-manager .lead-manager-side.reveal.is-visible .metric-stack article:nth-child(2):where([data-page="index"], [data-page="index"] *){transition-delay:.13s}
  .toowie-product .js #lead-manager .lead-manager-side.reveal.is-visible .metric-stack article:nth-child(3):where([data-page="index"], [data-page="index"] *){transition-delay:.21s}
  .toowie-product .js #lead-manager .lead-manager-side.reveal.is-visible .metric-stack article:nth-child(4):where([data-page="index"], [data-page="index"] *){transition-delay:.29s}
  .toowie-product .js #lead-manager .lead-browser-wrap.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateY(38px) scale(.975);
    filter:blur(7px);
    transition:opacity .84s cubic-bezier(.22,1,.36,1),transform .84s cubic-bezier(.22,1,.36,1),filter .84s ease;
  }
  .toowie-product .js #lead-manager .lead-browser-wrap.reveal.is-visible:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:blur(0);
  }

  /* Rejection Tracker: Zweispaltige Einleitung und großer Screenshot. */
  .toowie-product .js #rejection-tracker .rejection-intro.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
  }
  .toowie-product .js #rejection-tracker .rejection-intro.reveal .rejection-intro-copy:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateX(-38px) translateY(10px);
    filter:blur(6px);
    transition:opacity .78s cubic-bezier(.22,1,.36,1),transform .78s cubic-bezier(.22,1,.36,1),filter .78s ease;
  }
  .toowie-product .js #rejection-tracker .rejection-intro.reveal .rejection-intro-text:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateX(34px) translateY(12px);
    filter:blur(5px);
    transition:opacity .76s .08s cubic-bezier(.22,1,.36,1),transform .76s .08s cubic-bezier(.22,1,.36,1),filter .76s .08s ease;
  }
  .toowie-product .js #rejection-tracker .rejection-intro.reveal.is-visible .rejection-intro-copy:where([data-page="index"], [data-page="index"] *),.toowie-product .js #rejection-tracker .rejection-intro.reveal.is-visible .rejection-intro-text:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:blur(0);
  }
  .toowie-product .js #rejection-tracker .rejection-browser-wrap.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateY(40px) scale(.975);
    filter:blur(7px);
    transition:opacity .86s cubic-bezier(.22,1,.36,1),transform .86s cubic-bezier(.22,1,.36,1),filter .86s ease;
  }
  .toowie-product .js #rejection-tracker .rejection-browser-wrap.reveal.is-visible:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:blur(0);
  }

  /* Abschluss: Einleitung teilen, Funktionskarten staffeln, Screenshot weich hochziehen. */
  .toowie-product .js #abschluss .closing-intro.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
  }
  .toowie-product .js #abschluss .closing-intro.reveal .closing-copy:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateX(-38px) translateY(10px);
    filter:blur(6px);
    transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1),filter .8s ease;
  }
  .toowie-product .js #abschluss .closing-intro.reveal .closing-intro-text:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateX(34px) translateY(12px);
    filter:blur(5px);
    transition:opacity .76s .08s cubic-bezier(.22,1,.36,1),transform .76s .08s cubic-bezier(.22,1,.36,1),filter .76s .08s ease;
  }
  .toowie-product .js #abschluss .closing-intro.reveal.is-visible .closing-copy:where([data-page="index"], [data-page="index"] *),.toowie-product .js #abschluss .closing-intro.reveal.is-visible .closing-intro-text:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:blur(0);
  }
  .toowie-product .js #abschluss .closing-points.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
  }
  .toowie-product .js #abschluss .closing-points.reveal article:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateY(28px) scale(.97);
    filter:blur(4px);
    transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1),filter .6s ease;
  }
  .toowie-product .js #abschluss .closing-points.reveal.is-visible article:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:blur(0);
  }
  .toowie-product .js #abschluss .closing-points.reveal.is-visible article:nth-child(1):where([data-page="index"], [data-page="index"] *){transition-delay:.02s}
  .toowie-product .js #abschluss .closing-points.reveal.is-visible article:nth-child(2):where([data-page="index"], [data-page="index"] *){transition-delay:.11s}
  .toowie-product .js #abschluss .closing-points.reveal.is-visible article:nth-child(3):where([data-page="index"], [data-page="index"] *){transition-delay:.20s}
  .toowie-product .js #abschluss .closing-browser-wrap.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateY(40px) scale(.975);
    filter:blur(7px);
    transition:opacity .86s cubic-bezier(.22,1,.36,1),transform .86s cubic-bezier(.22,1,.36,1),filter .86s ease;
  }
  .toowie-product .js #abschluss .closing-browser-wrap.reveal.is-visible:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:blur(0);
  }

  /* Finaler CTA: Inhalt und Aktionsbox getrennt, Vorteile leicht gestaffelt. */
  .toowie-product .js #anfrage .final-card.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
  }
  .toowie-product .js #anfrage .final-card.reveal .final-copy:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateX(-38px) translateY(12px);
    filter:blur(6px);
    transition:opacity .84s cubic-bezier(.22,1,.36,1),transform .84s cubic-bezier(.22,1,.36,1),filter .84s ease;
  }
  .toowie-product .js #anfrage .final-card.reveal .final-actions:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateX(40px) translateY(14px) scale(.975);
    filter:blur(6px);
    transition:opacity .86s .10s cubic-bezier(.22,1,.36,1),transform .86s .10s cubic-bezier(.22,1,.36,1),filter .86s .10s ease;
  }
  .toowie-product .js #anfrage .final-card.reveal.is-visible .final-copy:where([data-page="index"], [data-page="index"] *),.toowie-product .js #anfrage .final-card.reveal.is-visible .final-actions:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:blur(0);
  }
  .toowie-product .js #anfrage .final-card.reveal .final-benefits span:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateY(12px) scale(.96);
    transition:opacity .48s cubic-bezier(.22,1,.36,1),transform .48s cubic-bezier(.22,1,.36,1);
  }
  .toowie-product .js #anfrage .final-card.reveal.is-visible .final-benefits span:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
  }
  .toowie-product .js #anfrage .final-card.reveal.is-visible .final-benefits span:nth-child(1):where([data-page="index"], [data-page="index"] *){transition-delay:.18s}
  .toowie-product .js #anfrage .final-card.reveal.is-visible .final-benefits span:nth-child(2):where([data-page="index"], [data-page="index"] *){transition-delay:.25s}
  .toowie-product .js #anfrage .final-card.reveal.is-visible .final-benefits span:nth-child(3):where([data-page="index"], [data-page="index"] *){transition-delay:.32s}

  /* Akquise-Manager-Startseite: CTA deutlich schneller einblenden. */
  .toowie-product .js #gespraech ~ #anfrage .final-card.reveal .final-copy:where([data-page="index"], [data-page="index"] *){
    filter:none;
    transition:opacity .34s cubic-bezier(.22,1,.36,1),transform .34s cubic-bezier(.22,1,.36,1);
  }
  .toowie-product .js #gespraech ~ #anfrage .final-card.reveal .final-actions:where([data-page="index"], [data-page="index"] *){
    filter:blur(6px);
    transition:opacity .86s .10s cubic-bezier(.22,1,.36,1),transform .86s .10s cubic-bezier(.22,1,.36,1),filter .86s .10s ease;
  }
  .toowie-product .js #gespraech ~ #anfrage .final-card.reveal .final-benefits span:where([data-page="index"], [data-page="index"] *){
    transition-duration:.22s;
  }
  .toowie-product .js #gespraech ~ #anfrage .final-card.reveal.is-visible .final-benefits span:nth-child(1):where([data-page="index"], [data-page="index"] *){transition-delay:.02s}
  .toowie-product .js #gespraech ~ #anfrage .final-card.reveal.is-visible .final-benefits span:nth-child(2):where([data-page="index"], [data-page="index"] *){transition-delay:.05s}
  .toowie-product .js #gespraech ~ #anfrage .final-card.reveal.is-visible .final-benefits span:nth-child(3):where([data-page="index"], [data-page="index"] *){transition-delay:.08s}
}

@media(max-width:760px) and (prefers-reduced-motion:no-preference){
  .toowie-product .js #anpassbar .copy-col.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js #lead-manager .copy-col.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js #rejection-tracker .rejection-intro.reveal .rejection-intro-copy:where([data-page="index"], [data-page="index"] *),.toowie-product .js #abschluss .closing-intro.reveal .closing-copy:where([data-page="index"], [data-page="index"] *),.toowie-product .js #anfrage .final-card.reveal .final-copy:where([data-page="index"], [data-page="index"] *){
    transform:translateX(-22px) translateY(12px);
  }
  .toowie-product .js #anpassbar .side-browser.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js #lead-manager .lead-manager-side.reveal .metric-stack article:where([data-page="index"], [data-page="index"] *),.toowie-product .js #rejection-tracker .rejection-intro.reveal .rejection-intro-text:where([data-page="index"], [data-page="index"] *),.toowie-product .js #abschluss .closing-intro.reveal .closing-intro-text:where([data-page="index"], [data-page="index"] *),.toowie-product .js #anfrage .final-card.reveal .final-actions:where([data-page="index"], [data-page="index"] *){
    transform:translateX(22px) translateY(12px);
  }
  .toowie-product .js #lead-manager .lead-manager-side.reveal:where([data-page="index"], [data-page="index"] *)::before{
    transform:scaleX(0);
    transform-origin:left;
  }
  .toowie-product .js #lead-manager .lead-manager-side.reveal.is-visible:where([data-page="index"], [data-page="index"] *)::before{
    transform:scaleX(1);
  }
}

@media(prefers-reduced-motion:reduce){
  .toowie-product .js #anpassbar .copy-col.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js #anpassbar .side-browser.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js #anpassbar .copy-col.reveal .detail-list article:where([data-page="index"], [data-page="index"] *),.toowie-product .js #team .section-head.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js #team .team-grid.reveal article:where([data-page="index"], [data-page="index"] *),.toowie-product .js #team .team-grid.reveal .team-line:where([data-page="index"], [data-page="index"] *),.toowie-product .js #team .team-quote.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js #lead-manager .copy-col.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js #lead-manager .lead-manager-side.reveal .metric-stack article:where([data-page="index"], [data-page="index"] *),.toowie-product .js #lead-manager .lead-browser-wrap.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js #rejection-tracker .rejection-intro.reveal .rejection-intro-copy:where([data-page="index"], [data-page="index"] *),.toowie-product .js #rejection-tracker .rejection-intro.reveal .rejection-intro-text:where([data-page="index"], [data-page="index"] *),.toowie-product .js #rejection-tracker .rejection-browser-wrap.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js #abschluss .closing-intro.reveal .closing-copy:where([data-page="index"], [data-page="index"] *),.toowie-product .js #abschluss .closing-intro.reveal .closing-intro-text:where([data-page="index"], [data-page="index"] *),.toowie-product .js #abschluss .closing-points.reveal article:where([data-page="index"], [data-page="index"] *),.toowie-product .js #abschluss .closing-browser-wrap.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js #anfrage .final-card.reveal .final-copy:where([data-page="index"], [data-page="index"] *),.toowie-product .js #anfrage .final-card.reveal .final-actions:where([data-page="index"], [data-page="index"] *),.toowie-product .js #anfrage .final-card.reveal .final-benefits span:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
  }
  .toowie-product .js #lead-manager .lead-manager-side.reveal:where([data-page="index"], [data-page="index"] *)::before{
    transform:none;
    transition:none;
  }
}


/* Gesprächsphasen: individuelle Einblendeffekte für Gatekeeper, Opener, Interesse und Abschluss. */
@media(prefers-reduced-motion:no-preference){
  /* Gatekeeper: Text von links, Produktansicht von rechts. */
  .toowie-product .js #gatekeeper .phase-detail-copy.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateX(-44px) translateY(12px);
    filter:none;
    transition:opacity .32s cubic-bezier(.22,1,.36,1),transform .32s cubic-bezier(.22,1,.36,1);
  }
  .toowie-product .js #gatekeeper .phase-detail-browser.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateX(52px) translateY(14px) scale(.972);
    filter:blur(7px);
    transition:opacity .84s .08s cubic-bezier(.22,1,.36,1),transform .84s .08s cubic-bezier(.22,1,.36,1),filter .84s .08s ease;
  }

  /* Einstieg & Opener: passend zum umgedrehten Layout aus der Gegenrichtung. */
  .toowie-product .js #opener .phase-detail-copy.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateX(44px) translateY(12px);
    filter:none;
    transition:opacity .32s cubic-bezier(.22,1,.36,1),transform .32s cubic-bezier(.22,1,.36,1);
  }
  .toowie-product .js #opener .phase-detail-browser.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateX(-52px) translateY(14px) scale(.972);
    filter:blur(7px);
    transition:opacity .84s .08s cubic-bezier(.22,1,.36,1),transform .84s .08s cubic-bezier(.22,1,.36,1),filter .84s .08s ease;
  }

  /* Interesse vertiefen: etwas weicher und ruhiger einblenden. */
  .toowie-product .js #interesse-vertiefen .phase-detail-copy.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateX(40px) translateY(16px);
    filter:none;
    transition:opacity .34s cubic-bezier(.22,1,.36,1),transform .34s cubic-bezier(.22,1,.36,1);
  }
  .toowie-product .js #interesse-vertiefen .phase-detail-browser.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateX(-46px) translateY(18px) scale(.968);
    filter:blur(7px);
    transition:opacity .88s .09s cubic-bezier(.22,1,.36,1),transform .88s .09s cubic-bezier(.22,1,.36,1),filter .88s .09s ease;
  }

  /* Abschluss: Text seitlich, Dokumentation leicht von unten nach vorne. */
  .toowie-product .js #abschluss .phase-detail-copy.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateX(-38px) translateY(14px);
    filter:none;
    transition:opacity .34s cubic-bezier(.22,1,.36,1),transform .34s cubic-bezier(.22,1,.36,1);
  }
  .toowie-product .js #abschluss .phase-detail-browser.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateY(40px) scale(.968);
    filter:blur(7px);
    transition:opacity .88s .10s cubic-bezier(.22,1,.36,1),transform .88s .10s cubic-bezier(.22,1,.36,1),filter .88s .10s ease;
  }

  .toowie-product .js #gatekeeper .phase-detail-copy.reveal.is-visible:where([data-page="index"], [data-page="index"] *),.toowie-product .js #gatekeeper .phase-detail-browser.reveal.is-visible:where([data-page="index"], [data-page="index"] *),.toowie-product .js #opener .phase-detail-copy.reveal.is-visible:where([data-page="index"], [data-page="index"] *),.toowie-product .js #opener .phase-detail-browser.reveal.is-visible:where([data-page="index"], [data-page="index"] *),.toowie-product .js #interesse-vertiefen .phase-detail-copy.reveal.is-visible:where([data-page="index"], [data-page="index"] *),.toowie-product .js #interesse-vertiefen .phase-detail-browser.reveal.is-visible:where([data-page="index"], [data-page="index"] *),.toowie-product .js #abschluss .phase-detail-copy.reveal.is-visible:where([data-page="index"], [data-page="index"] *),.toowie-product .js #abschluss .phase-detail-browser.reveal.is-visible:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:blur(0);
  }

  /* Checkpunkte bauen sich innerhalb jeder Phase nacheinander auf. */
  .toowie-product .js #gatekeeper .phase-detail-copy.reveal .check-list li:where([data-page="index"], [data-page="index"] *),.toowie-product .js #opener .phase-detail-copy.reveal .check-list li:where([data-page="index"], [data-page="index"] *),.toowie-product .js #interesse-vertiefen .phase-detail-copy.reveal .check-list li:where([data-page="index"], [data-page="index"] *),.toowie-product .js #abschluss .phase-detail-copy.reveal .check-list li:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateY(14px);
    transition:opacity .22s cubic-bezier(.22,1,.36,1),transform .22s cubic-bezier(.22,1,.36,1);
  }
  .toowie-product .js #gatekeeper .phase-detail-copy.reveal.is-visible .check-list li:where([data-page="index"], [data-page="index"] *),.toowie-product .js #opener .phase-detail-copy.reveal.is-visible .check-list li:where([data-page="index"], [data-page="index"] *),.toowie-product .js #interesse-vertiefen .phase-detail-copy.reveal.is-visible .check-list li:where([data-page="index"], [data-page="index"] *),.toowie-product .js #abschluss .phase-detail-copy.reveal.is-visible .check-list li:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
  }
  .toowie-product .js #gatekeeper .phase-detail-copy.reveal.is-visible .check-list li:nth-child(1):where([data-page="index"], [data-page="index"] *),.toowie-product .js #opener .phase-detail-copy.reveal.is-visible .check-list li:nth-child(1):where([data-page="index"], [data-page="index"] *),.toowie-product .js #interesse-vertiefen .phase-detail-copy.reveal.is-visible .check-list li:nth-child(1):where([data-page="index"], [data-page="index"] *),.toowie-product .js #abschluss .phase-detail-copy.reveal.is-visible .check-list li:nth-child(1):where([data-page="index"], [data-page="index"] *){transition-delay:.02s}
  .toowie-product .js #gatekeeper .phase-detail-copy.reveal.is-visible .check-list li:nth-child(2):where([data-page="index"], [data-page="index"] *),.toowie-product .js #opener .phase-detail-copy.reveal.is-visible .check-list li:nth-child(2):where([data-page="index"], [data-page="index"] *),.toowie-product .js #interesse-vertiefen .phase-detail-copy.reveal.is-visible .check-list li:nth-child(2):where([data-page="index"], [data-page="index"] *),.toowie-product .js #abschluss .phase-detail-copy.reveal.is-visible .check-list li:nth-child(2):where([data-page="index"], [data-page="index"] *){transition-delay:.05s}
  .toowie-product .js #gatekeeper .phase-detail-copy.reveal.is-visible .check-list li:nth-child(3):where([data-page="index"], [data-page="index"] *),.toowie-product .js #opener .phase-detail-copy.reveal.is-visible .check-list li:nth-child(3):where([data-page="index"], [data-page="index"] *),.toowie-product .js #interesse-vertiefen .phase-detail-copy.reveal.is-visible .check-list li:nth-child(3):where([data-page="index"], [data-page="index"] *),.toowie-product .js #abschluss .phase-detail-copy.reveal.is-visible .check-list li:nth-child(3):where([data-page="index"], [data-page="index"] *){transition-delay:.08s}
}

@media(max-width:760px) and (prefers-reduced-motion:no-preference){
  .toowie-product .js #gatekeeper .phase-detail-copy.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js #abschluss .phase-detail-copy.reveal:where([data-page="index"], [data-page="index"] *){
    transform:translateX(-22px) translateY(12px);
  }
  .toowie-product .js #opener .phase-detail-copy.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js #interesse-vertiefen .phase-detail-copy.reveal:where([data-page="index"], [data-page="index"] *){
    transform:translateX(22px) translateY(12px);
  }
  .toowie-product .js #gatekeeper .phase-detail-browser.reveal:where([data-page="index"], [data-page="index"] *){
    transform:translateX(24px) translateY(18px) scale(.98);
  }
  .toowie-product .js #opener .phase-detail-browser.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js #interesse-vertiefen .phase-detail-browser.reveal:where([data-page="index"], [data-page="index"] *){
    transform:translateX(-24px) translateY(18px) scale(.98);
  }
  .toowie-product .js #abschluss .phase-detail-browser.reveal:where([data-page="index"], [data-page="index"] *){
    transform:translateY(28px) scale(.98);
  }
}

@media(prefers-reduced-motion:reduce){
  .toowie-product .js #gatekeeper .phase-detail-copy.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js #gatekeeper .phase-detail-browser.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js #opener .phase-detail-copy.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js #opener .phase-detail-browser.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js #interesse-vertiefen .phase-detail-copy.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js #interesse-vertiefen .phase-detail-browser.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js #abschluss .phase-detail-copy.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js #abschluss .phase-detail-browser.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js #gatekeeper .phase-detail-copy.reveal .check-list li:where([data-page="index"], [data-page="index"] *),.toowie-product .js #opener .phase-detail-copy.reveal .check-list li:where([data-page="index"], [data-page="index"] *),.toowie-product .js #interesse-vertiefen .phase-detail-copy.reveal .check-list li:where([data-page="index"], [data-page="index"] *),.toowie-product .js #abschluss .phase-detail-copy.reveal .check-list li:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
  }
}


/* Rechtliches & Footer */
.toowie-product .site-footer:where([data-page="index"], [data-page="index"] *){background:#fff;border-top:0;padding-top:0}
.toowie-product .footer-accordion-zone:where([data-page="index"], [data-page="index"] *){background:#fff;padding:0 0 18px}
.toowie-product .footer-accordion-grid:where([data-page="index"], [data-page="index"] *){display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:0}
.toowie-product .footer-accordion-card:where([data-page="index"], [data-page="index"] *){width:220px;flex:0 0 220px;border:0;border-radius:0 0 14px 14px;background:linear-gradient(145deg,#07142c,#10264d);overflow:hidden;box-shadow:0 10px 24px rgba(7,20,44,.10);transition:width .22s ease,flex-basis .22s ease,box-shadow .18s ease}
.toowie-product .footer-accordion-card:hover:where([data-page="index"], [data-page="index"] *){box-shadow:0 13px 28px rgba(7,20,44,.14)}
.toowie-product .footer-accordion-card[open]:where([data-page="index"], [data-page="index"] *){width:320px;flex-basis:320px;box-shadow:0 16px 34px rgba(7,20,44,.16)}
.toowie-product .footer-accordion-toggle:where([data-page="index"], [data-page="index"] *){list-style:none;min-height:50px;display:flex;align-items:center;padding:8px 14px;cursor:pointer;color:#d8b77f;outline:none}
.toowie-product .footer-accordion-toggle:where([data-page="index"], [data-page="index"] *)::-webkit-details-marker{display:none}
.toowie-product .footer-accordion-toggle:focus-visible:where([data-page="index"], [data-page="index"] *){box-shadow:inset 0 0 0 2px rgba(216,183,127,.70)}
.toowie-product .footer-company-toggle:where([data-page="index"], [data-page="index"] *){justify-content:flex-start}
.toowie-product .footer-contact-toggle:where([data-page="index"], [data-page="index"] *){justify-content:flex-start;font-size:15px;font-weight:900;letter-spacing:-.01em}
.toowie-product .footer-logo:where([data-page="index"], [data-page="index"] *){width:86px;height:auto;display:block}
.toowie-product .footer-accordion-content:where([data-page="index"], [data-page="index"] *){display:grid;gap:8px;padding:2px 12px 12px}
.toowie-product .footer-company-items:where([data-page="index"], [data-page="index"] *){display:block}
.toowie-product .footer-company-details:where([data-page="index"], [data-page="index"] *){margin:3px 2px 2px;color:#fff;font-size:12px;line-height:1.75;font-weight:650}
.toowie-product .footer-contact-items:where([data-page="index"], [data-page="index"] *){grid-template-columns:1fr}
.toowie-product .footer-info-box:where([data-page="index"], [data-page="index"] *){display:flex;align-items:flex-start;gap:10px;padding:10px 11px;border:1px solid rgba(255,255,255,.10);border-radius:11px;background:rgba(255,255,255,.055);color:#fff;transition:border-color .18s ease,background .18s ease}
.toowie-product .footer-info-box:hover:where([data-page="index"], [data-page="index"] *){border-color:rgba(198,154,87,.38);background:rgba(255,255,255,.085)}
.toowie-product .footer-info-icon:where([data-page="index"], [data-page="index"] *){width:17px;height:17px;flex:0 0 17px;color:#d8b77f;display:grid;place-items:center;margin-top:1px}
.toowie-product .footer-info-icon svg:where([data-page="index"], [data-page="index"] *){width:17px;height:17px;display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.toowie-product .footer-info-box b:where([data-page="index"], [data-page="index"] *){display:block;font-size:11px;color:#fff;margin-bottom:2px}
.toowie-product .footer-info-box span:where([data-page="index"], [data-page="index"] *){font-size:10.5px;line-height:1.45;color:rgba(255,255,255,.70)}
.toowie-product .footer-inner:where([data-page="index"], [data-page="index"] *){min-height:0;display:flex;align-items:center;justify-content:space-between;gap:32px;color:#64748b;font-size:12px;padding:4px 0 24px}
.toowie-product .footer-inner .copyright:where([data-page="index"], [data-page="index"] *){margin:0;color:#94a3b8;font-size:11px;line-height:1.55}
.toowie-product .footer-legal:where([data-page="index"], [data-page="index"] *){display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-weight:850;color:#334155}.toowie-product .footer-legal a:where([data-page="index"], [data-page="index"] *){transition:color .18s ease}.toowie-product .footer-legal a:hover:where([data-page="index"], [data-page="index"] *),.toowie-product .footer-legal a[aria-current="page"]:where([data-page="index"], [data-page="index"] *){color:var(--gold)}
@media(max-width:980px){.toowie-product .footer-accordion-card:where([data-page="index"], [data-page="index"] *){width:200px;flex-basis:200px}.toowie-product .footer-accordion-card[open]:where([data-page="index"], [data-page="index"] *){width:300px;flex-basis:300px}}

.toowie-product .legal-page:where([data-page="index"], [data-page="index"] *){background:#f8fafc;color:var(--ink)}
.toowie-product .legal-page .site-header:where([data-page="index"], [data-page="index"] *){position:static;background:var(--toowie-blue);color:#fff}
.toowie-product .legal-page .nav:where([data-page="index"], [data-page="index"] *){height:78px}
.toowie-product .legal-page .legal-nav-links:where([data-page="index"], [data-page="index"] *){display:flex;align-items:center;gap:18px;font-size:12px;font-weight:800;color:rgba(255,255,255,.72)}
.toowie-product .legal-page .legal-nav-links a:hover:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-nav-links a[aria-current="page"]:where([data-page="index"], [data-page="index"] *){color:#fff}
.toowie-product .legal-page .legal-back:where([data-page="index"], [data-page="index"] *){min-height:38px;padding:0 14px;border-radius:11px;background:#fff;color:var(--navy);font-size:12px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.toowie-product .legal-hero:where([data-page="index"], [data-page="index"] *){position:relative;overflow:hidden;background:var(--toowie-blue);color:#fff;padding:62px 0 72px;border-top:1px solid rgba(255,255,255,.08)}
.toowie-product .legal-hero:where([data-page="index"], [data-page="index"] *):before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-220px;top:-300px;background:radial-gradient(circle,rgba(198,154,87,.22),transparent 68%)}
.toowie-product .legal-hero .shell:where([data-page="index"], [data-page="index"] *){position:relative;z-index:1}.toowie-product .legal-kicker:where([data-page="index"], [data-page="index"] *){display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:950;letter-spacing:.12em;text-transform:uppercase;color:#d8b77f}
.toowie-product .legal-hero h1:where([data-page="index"], [data-page="index"] *){font-size:clamp(38px,5vw,58px);line-height:1.02;letter-spacing:-.05em;margin:14px 0 14px}.toowie-product .legal-hero p:where([data-page="index"], [data-page="index"] *){max-width:720px;margin:0;color:rgba(255,255,255,.68);font-size:15px;line-height:1.7}
.toowie-product .legal-main:where([data-page="index"], [data-page="index"] *){padding:56px 0 82px}.toowie-product .legal-layout:where([data-page="index"], [data-page="index"] *){display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:38px;align-items:start}.toowie-product .legal-card:where([data-page="index"], [data-page="index"] *){background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 18px 46px rgba(15,23,42,.07);padding:42px 46px}.toowie-product .legal-card .legal-meta:where([data-page="index"], [data-page="index"] *){margin:0 0 28px;padding:16px 18px;border-radius:14px;background:#fbf7ef;border:1px solid #ead7b6;color:#6b7280;font-size:12px;line-height:1.65}.toowie-product .legal-card h2:where([data-page="index"], [data-page="index"] *){font-size:23px;letter-spacing:-.025em;line-height:1.25;margin:36px 0 12px;color:var(--navy)}.toowie-product .legal-card h2:first-of-type:where([data-page="index"], [data-page="index"] *){margin-top:0}.toowie-product .legal-card h3:where([data-page="index"], [data-page="index"] *){font-size:16px;margin:24px 0 9px;color:var(--navy)}.toowie-product .legal-card p:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-card li:where([data-page="index"], [data-page="index"] *){font-size:14px;line-height:1.75;color:#475569}.toowie-product .legal-card p:where([data-page="index"], [data-page="index"] *){margin:0 0 12px}.toowie-product .legal-card ul:where([data-page="index"], [data-page="index"] *){margin:8px 0 16px;padding-left:20px}.toowie-product .legal-card strong:where([data-page="index"], [data-page="index"] *){color:#1e293b}.toowie-product .legal-card a:where([data-page="index"], [data-page="index"] *){color:#0a4a85;text-decoration:underline;text-underline-offset:3px}.toowie-product .legal-card a:hover:where([data-page="index"], [data-page="index"] *){color:var(--gold)}
.toowie-product .legal-table-wrap:where([data-page="index"], [data-page="index"] *){overflow-x:auto;margin:16px 0 22px;border:1px solid var(--line);border-radius:14px}.toowie-product .legal-table:where([data-page="index"], [data-page="index"] *){width:100%;border-collapse:collapse;min-width:650px}.toowie-product .legal-table th:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-table td:where([data-page="index"], [data-page="index"] *){padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font-size:12px;line-height:1.55}.toowie-product .legal-table th:where([data-page="index"], [data-page="index"] *){background:#f8fafc;color:#334155;font-weight:900}.toowie-product .legal-table td:where([data-page="index"], [data-page="index"] *){color:#64748b}.toowie-product .legal-table tr:last-child td:where([data-page="index"], [data-page="index"] *){border-bottom:0}
.toowie-product .legal-aside:where([data-page="index"], [data-page="index"] *){position:sticky;top:22px;display:grid;gap:12px}.toowie-product .legal-aside-card:where([data-page="index"], [data-page="index"] *){padding:20px;border:1px solid var(--line);border-radius:18px;background:#fff}.toowie-product .legal-aside-card b:where([data-page="index"], [data-page="index"] *){display:block;font-size:13px;color:var(--navy);margin-bottom:10px}.toowie-product .legal-aside-card a:where([data-page="index"], [data-page="index"] *){display:block;padding:8px 0;border-top:1px solid #eef2f7;color:#475569;font-size:12px;font-weight:800}.toowie-product .legal-aside-card a:first-of-type:where([data-page="index"], [data-page="index"] *){border-top:0}.toowie-product .legal-aside-card a:hover:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-aside-card a[aria-current="page"]:where([data-page="index"], [data-page="index"] *){color:var(--gold)}
.toowie-product .legal-contact:where([data-page="index"], [data-page="index"] *){padding:20px;border-radius:16px;background:#f8fafc;border:1px solid var(--line);margin:14px 0 20px}.toowie-product .legal-contact p:where([data-page="index"], [data-page="index"] *){margin:0}.toowie-product .legal-note:where([data-page="index"], [data-page="index"] *){padding:15px 17px;border-left:3px solid var(--gold);background:#fbf7ef;border-radius:0 12px 12px 0;margin:18px 0;color:#64748b;font-size:13px;line-height:1.7}

@media(max-width:900px){.toowie-product .legal-layout:where([data-page="index"], [data-page="index"] *){grid-template-columns:1fr}.toowie-product .legal-aside:where([data-page="index"], [data-page="index"] *){position:static;grid-row:1}.toowie-product .legal-aside-card:where([data-page="index"], [data-page="index"] *){display:flex;align-items:center;flex-wrap:wrap;gap:0 18px}.toowie-product .legal-aside-card b:where([data-page="index"], [data-page="index"] *){width:100%;margin-bottom:4px}.toowie-product .legal-aside-card a:where([data-page="index"], [data-page="index"] *){border-top:0;padding:7px 0}.toowie-product .legal-page .legal-nav-links:where([data-page="index"], [data-page="index"] *){display:none}}
@media(max-width:760px){.toowie-product .footer-accordion-zone:where([data-page="index"], [data-page="index"] *){padding-bottom:16px}.toowie-product .footer-accordion-grid:where([data-page="index"], [data-page="index"] *){gap:10px}.toowie-product .footer-accordion-card:where([data-page="index"], [data-page="index"] *){width:calc(50% - 5px);flex-basis:calc(50% - 5px)}.toowie-product .footer-accordion-card[open]:where([data-page="index"], [data-page="index"] *){width:100%;flex-basis:100%}.toowie-product .footer-accordion-toggle:where([data-page="index"], [data-page="index"] *){min-height:46px;padding:7px 11px}.toowie-product .footer-logo:where([data-page="index"], [data-page="index"] *){width:78px}.toowie-product .footer-contact-toggle:where([data-page="index"], [data-page="index"] *){font-size:14px}.toowie-product .footer-accordion-content:where([data-page="index"], [data-page="index"] *){padding:2px 10px 10px}.toowie-product .footer-company-details:where([data-page="index"], [data-page="index"] *){font-size:11px}.toowie-product .footer-info-box:where([data-page="index"], [data-page="index"] *){padding:9px 10px}.toowie-product .footer-info-box span:where([data-page="index"], [data-page="index"] *){font-size:10px}.toowie-product .footer-info-box b:where([data-page="index"], [data-page="index"] *){font-size:11px}.toowie-product .footer-inner:where([data-page="index"], [data-page="index"] *){min-height:0;padding:4px 0 26px;align-items:flex-start;flex-direction:column;gap:14px}.toowie-product .footer-legal:where([data-page="index"], [data-page="index"] *){gap:16px;flex-wrap:wrap}.toowie-product .legal-page .nav:where([data-page="index"], [data-page="index"] *){height:72px}.toowie-product .legal-page .brand span:where([data-page="index"], [data-page="index"] *){font-size:14px}.toowie-product .legal-hero:where([data-page="index"], [data-page="index"] *){padding:48px 0 56px}.toowie-product .legal-main:where([data-page="index"], [data-page="index"] *){padding:32px 0 56px}.toowie-product .legal-card:where([data-page="index"], [data-page="index"] *){padding:28px 22px;border-radius:20px}.toowie-product .legal-card h2:where([data-page="index"], [data-page="index"] *){font-size:20px}.toowie-product .legal-card p:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-card li:where([data-page="index"], [data-page="index"] *){font-size:13px}.toowie-product .legal-back:where([data-page="index"], [data-page="index"] *){font-size:0!important}.toowie-product .legal-back:where([data-page="index"], [data-page="index"] *):after{content:"←";font-size:18px}}

/* Gesprächsphasen: Detailblöcke in der Reihenfolge Gatekeeper, Opener, Einwand, Interesse, Abschluss */
.toowie-product #gespraech:where([data-page="index"], [data-page="index"] *){
  background:#fcf7ef;
}

.toowie-product #gespraech.section-block.soft:where([data-page="index"], [data-page="index"] *){
  background:#fcf7ef;
}

.toowie-product #gespraech .conversation-flow:where([data-page="index"], [data-page="index"] *){
  margin-bottom:0;
}

.toowie-product #gespraech .phase-detail:where([data-page="index"], [data-page="index"] *){
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:56px;
  align-items:center;
  margin:0;
  padding:86px 0;
  clip-path:inset(0 -100vmax);
}

.toowie-product #gespraech .phase-detail-gatekeeper:where([data-page="index"], [data-page="index"] *){
  margin-top:76px;
  background:#f8fafc;
  box-shadow:0 0 0 100vmax #f8fafc;
}

.toowie-product #gespraech .phase-detail-opener:where([data-page="index"], [data-page="index"] *){
  background:#fcf7ef;
  box-shadow:0 0 0 100vmax #fcf7ef;
}

.toowie-product #gespraech .phase-detail-objection:where([data-page="index"], [data-page="index"] *){
  background:#f8fafc;
  box-shadow:0 0 0 100vmax #f8fafc;
}

.toowie-product #gespraech .phase-detail-interest:where([data-page="index"], [data-page="index"] *){
  background:#fcf7ef;
  box-shadow:0 0 0 100vmax #fcf7ef;
}

.toowie-product #gespraech .phase-detail-closing:where([data-page="index"], [data-page="index"] *){
  background:#f8fafc;
  box-shadow:0 0 0 100vmax #f8fafc;
}

.toowie-product #gespraech .phase-detail-reverse .phase-detail-copy:where([data-page="index"], [data-page="index"] *){
  order:2;
}

.toowie-product #gespraech .phase-detail-reverse .phase-detail-browser:where([data-page="index"], [data-page="index"] *){
  order:1;
}

.toowie-product #gespraech .phase-detail-copy h2:where([data-page="index"], [data-page="index"] *){
  margin:12px 0 16px;
  max-width:560px;
  color:var(--blue);
  font-size:clamp(32px,4vw,47px);
  line-height:1.08;
  letter-spacing:-.045em;
}

.toowie-product #gespraech .phase-detail-copy>p:where([data-page="index"], [data-page="index"] *){
  max-width:560px;
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
}

.toowie-product #gespraech .phase-detail-copy .check-list:where([data-page="index"], [data-page="index"] *){
  max-width:570px;
}

.toowie-product #gespraech .phase-detail-copy .check-list span:where([data-page="index"], [data-page="index"] *){
  background:#fff3da;
  color:var(--blue);
}

.toowie-product #gespraech .phase-detail-browser:where([data-page="index"], [data-page="index"] *){
  width:100%;
  background:#eef2f7;
  box-shadow:0 18px 44px rgba(15,23,42,.10);
}

.toowie-product #gespraech .phase-detail-browser img:where([data-page="index"], [data-page="index"] *){
  display:block;
  width:100%;
  height:auto;
}

.toowie-product #gespraech .phase-detail-browser-focus:where([data-page="index"], [data-page="index"] *){
  height:430px;
  overflow:hidden;
}

.toowie-product #gespraech .phase-detail-browser-focus img:where([data-page="index"], [data-page="index"] *){
  width:100%;
  height:430px;
  object-fit:cover;
  object-position:center 38%;
}

.toowie-product #gespraech .phase-detail-browser-wide:where([data-page="index"], [data-page="index"] *){
  overflow:hidden;
}

.toowie-product #gespraech .phase-detail-browser-pan:where([data-page="index"], [data-page="index"] *){
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  background:#fff;
}

.toowie-product #gespraech .phase-detail-browser-pan:where([data-page="index"], [data-page="index"] *)::-webkit-scrollbar{
  height:10px;
}

.toowie-product #gespraech .phase-detail-browser-pan:where([data-page="index"], [data-page="index"] *)::-webkit-scrollbar-thumb{
  background:#cbd5e1;
  border-radius:999px;
  border:2px solid #fff;
}

.toowie-product #gespraech .phase-detail-browser-pan:where([data-page="index"], [data-page="index"] *)::-webkit-scrollbar-track{
  background:#f8fafc;
}

.toowie-product #gespraech .phase-detail-browser-pan-opener img:where([data-page="index"], [data-page="index"] *){
  display:block;
  width:max(900px,100%);
  max-width:none;
  height:auto;
}

.toowie-product #gespraech .phase-detail-browser-interest:where([data-page="index"], [data-page="index"] *){
  height:430px;
  overflow:hidden;
}

.toowie-product #gespraech .phase-detail-browser-interest img:where([data-page="index"], [data-page="index"] *){
  width:100%;
  height:430px;
  object-fit:cover;
  object-position:top center;
}

/* Existing objection block now sits in the same phase sequence. */
.toowie-product #gespraech .objection-showcase.phase-detail:where([data-page="index"], [data-page="index"] *){
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  margin-top:0;
  padding:86px 0;
}

@media(max-width:1050px){
  .toowie-product #gespraech .phase-detail:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .objection-showcase.phase-detail:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr;
    gap:34px;
  }

  .toowie-product #gespraech .phase-detail-reverse .phase-detail-copy:where([data-page="index"], [data-page="index"] *){
    order:1;
  }

  .toowie-product #gespraech .phase-detail-reverse .phase-detail-browser:where([data-page="index"], [data-page="index"] *){
    order:2;
  }

  .toowie-product #gespraech .phase-detail-copy h2:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .phase-detail-copy>p:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .phase-detail-copy .check-list:where([data-page="index"], [data-page="index"] *){
    max-width:760px;
  }

  .toowie-product #gespraech .phase-detail-browser-focus:where([data-page="index"], [data-page="index"] *){
    height:min(620px,68vw);
  }

  .toowie-product #gespraech .phase-detail-browser-focus img:where([data-page="index"], [data-page="index"] *){
    height:100%;
  }

  .toowie-product #gespraech .phase-detail-browser-pan-opener img:where([data-page="index"], [data-page="index"] *){
    width:max(820px,100%);
  }

  .toowie-product #gespraech .phase-detail-browser-interest:where([data-page="index"], [data-page="index"] *){
    height:min(620px,68vw);
  }

  .toowie-product #gespraech .phase-detail-browser-interest img:where([data-page="index"], [data-page="index"] *){
    height:100%;
  }
}

@media(max-width:760px){
  .toowie-product #gespraech .phase-detail:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .objection-showcase.phase-detail:where([data-page="index"], [data-page="index"] *){
    padding:68px 0;
    gap:28px;
  }

  .toowie-product #gespraech .phase-detail-gatekeeper:where([data-page="index"], [data-page="index"] *){
    margin-top:56px;
  }

  .toowie-product #gespraech .phase-detail-copy h2:where([data-page="index"], [data-page="index"] *){
    font-size:34px;
  }

  .toowie-product #gespraech .phase-detail-copy>p:where([data-page="index"], [data-page="index"] *){
    font-size:15px;
  }

  .toowie-product #gespraech .phase-detail-browser:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .phase-detail-browser-focus:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .phase-detail-browser-interest:where([data-page="index"], [data-page="index"] *){
    border-radius:16px;
  }

  .toowie-product #gespraech .phase-detail-browser-focus:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .phase-detail-browser-interest:where([data-page="index"], [data-page="index"] *){
    height:390px;
  }
}

/* Klickbare Gesprächsphasen: Hover-Feedback und Sprung zu den Detailbereichen. */
.toowie-product #gespraech .phase-card-link:where([data-page="index"], [data-page="index"] *){
  cursor:pointer;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;
}
.toowie-product #gespraech .phase-card-link:hover:where([data-page="index"], [data-page="index"] *){
  transform:translateY(-7px);
  border-color:rgba(198,154,87,.72);
  box-shadow:0 20px 44px rgba(15,23,42,.14);
}
.toowie-product #gespraech .phase-card-link.phase-navy:hover:where([data-page="index"], [data-page="index"] *){
  border-color:rgba(198,154,87,.78);
  box-shadow:0 22px 48px rgba(0,20,40,.28);
}
.toowie-product #gespraech .phase-card-link:focus-visible:where([data-page="index"], [data-page="index"] *){
  outline:3px solid rgba(198,154,87,.72);
  outline-offset:4px;
}
.toowie-product #gatekeeper:where([data-page="index"], [data-page="index"] *),.toowie-product #opener:where([data-page="index"], [data-page="index"] *),.toowie-product #einwandbehandlung:where([data-page="index"], [data-page="index"] *),.toowie-product #interesse-vertiefen:where([data-page="index"], [data-page="index"] *),.toowie-product #abschluss:where([data-page="index"], [data-page="index"] *){
  scroll-margin-top:28px;
}
@media (prefers-reduced-motion: reduce){
  .toowie-product #gespraech .phase-card-link:where([data-page="index"], [data-page="index"] *){transition:none}
  .toowie-product #gespraech .phase-card-link:hover:where([data-page="index"], [data-page="index"] *){transform:none}
}

/* Schwebende Mini-Navigation für die Gesprächsphasen */
.toowie-product .phase-floating-nav:where([data-page="index"], [data-page="index"] *){
  position:fixed;
  left:50%;
  bottom:max(18px, env(safe-area-inset-bottom));
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  max-width:calc(100vw - 24px);
  padding:0;
  overflow-x:auto;
  background:transparent;
  scrollbar-width:none;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,12px);
  transition:opacity .22s ease,transform .22s ease;
}
.toowie-product .phase-floating-nav:where([data-page="index"], [data-page="index"] *)::-webkit-scrollbar{display:none}

.toowie-product .phase-floating-nav.is-visible:where([data-page="index"], [data-page="index"] *){
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,0);
}

.toowie-product .phase-floating-link:where([data-page="index"], [data-page="index"] *){
  min-height:54px;
  flex:0 0 auto;
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:11px;
  padding:8px 12px 10px;
  border:2px solid #e2e8f0;
  border-radius:8px;
  color:#334155;
  background:rgba(255,255,255,.96);
  box-shadow:0 8px 22px rgba(15,23,42,.14);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  font-size:10px;
  line-height:1.1;
  font-weight:850;
  letter-spacing:0;
  white-space:nowrap;
  transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease;
}

.toowie-product .phase-floating-number:where([data-page="index"], [data-page="index"] *){
  display:block;
  font-size:8px;
  line-height:1;
  font-weight:900;
  letter-spacing:.08em;
  color:#a8b0bc;
}

.toowie-product .phase-floating-link.is-navy .phase-floating-number:where([data-page="index"], [data-page="index"] *){
  color:rgba(255,255,255,.48);
}

.toowie-product .phase-floating-title:where([data-page="index"], [data-page="index"] *){
  display:block;
}

.toowie-product .phase-floating-link.is-navy:where([data-page="index"], [data-page="index"] *){
  color:#fff;
  background:linear-gradient(145deg,rgba(7,20,44,.97),rgba(16,38,77,.97));
  border-color:rgba(7,20,44,.72);
  box-shadow:0 8px 22px rgba(0,20,40,.20);
}

.toowie-product .phase-floating-link:hover:where([data-page="index"], [data-page="index"] *),.toowie-product .phase-floating-link:focus-visible:where([data-page="index"], [data-page="index"] *){
  border-color:rgba(198,154,87,.68);
  box-shadow:0 10px 26px rgba(15,23,42,.18);
  outline:none;
}

.toowie-product .phase-floating-link.is-navy:hover:where([data-page="index"], [data-page="index"] *),.toowie-product .phase-floating-link.is-navy:focus-visible:where([data-page="index"], [data-page="index"] *){
  color:#fff;
  border-color:rgba(198,154,87,.68);
}

.toowie-product .phase-floating-link:active:where([data-page="index"], [data-page="index"] *){
  transform:scale(.96);
}

.toowie-product .phase-floating-link.is-active:where([data-page="index"], [data-page="index"] *),.toowie-product .phase-floating-link.is-navy.is-active:where([data-page="index"], [data-page="index"] *){
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(198,154,87,.30),0 10px 26px rgba(15,23,42,.18);
}

@media(max-width:760px){
  .toowie-product .phase-floating-nav:where([data-page="index"], [data-page="index"] *){
    bottom:max(12px, env(safe-area-inset-bottom));
    gap:5px;
  }

  .toowie-product .phase-floating-link:where([data-page="index"], [data-page="index"] *){
    min-height:52px;
    gap:8px;
    padding:7px 8px 8px;
    border-radius:7px;
    font-size:9px;
  }

  .toowie-product .phase-floating-number:where([data-page="index"], [data-page="index"] *){
    font-size:7px;
  }
}

@media(prefers-reduced-motion:reduce){
  .toowie-product .phase-floating-nav:where([data-page="index"], [data-page="index"] *),.toowie-product .phase-floating-link:where([data-page="index"], [data-page="index"] *){
    transition:none;
  }
}


/* Landingpage footer – ruhige, durchgehende Fläche statt Akkordeon-Karten */
.toowie-product .home-footer:where([data-page="index"], [data-page="index"] *){position:relative;overflow:hidden;background:#07142c;color:#fff}
.toowie-product .home-footer .home-footer-main:where([data-page="index"], [data-page="index"] *){position:relative;overflow:hidden;padding:54px 0 46px;background:linear-gradient(135deg,#07142c 0%,#0b1d39 58%,#10264d 100%)}
.toowie-product .home-footer .home-footer-main:where([data-page="index"], [data-page="index"] *):before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(198,154,87,.48),transparent)}
.toowie-product .home-footer .home-footer-glow:where([data-page="index"], [data-page="index"] *){position:absolute;width:520px;height:520px;border-radius:50%;right:-230px;top:-320px;background:radial-gradient(circle,rgba(198,154,87,.18),rgba(198,154,87,0) 68%);pointer-events:none}
.toowie-product .home-footer .home-footer-layout:where([data-page="index"], [data-page="index"] *){position:relative;z-index:1;display:grid;grid-template-columns:.8fr 1.2fr;gap:76px;align-items:center}
.toowie-product .home-footer .home-footer-brand:where([data-page="index"], [data-page="index"] *){max-width:330px}
.toowie-product .home-footer .home-footer-logo:where([data-page="index"], [data-page="index"] *){width:126px;height:auto;margin-bottom:18px}
.toowie-product .home-footer .home-footer-brand p:where([data-page="index"], [data-page="index"] *){margin:0;color:rgba(255,255,255,.58);font-size:13px;line-height:1.65;max-width:300px}
.toowie-product .home-footer .home-footer-contact:where([data-page="index"], [data-page="index"] *){display:grid;grid-template-columns:180px 1fr;gap:28px;align-items:center}
.toowie-product .home-footer .home-footer-contact-head span:where([data-page="index"], [data-page="index"] *){display:block;color:#d8b77f;font-size:11px;font-weight:950;letter-spacing:.12em;text-transform:uppercase;margin-bottom:7px}
.toowie-product .home-footer .home-footer-contact-head small:where([data-page="index"], [data-page="index"] *){display:block;color:rgba(255,255,255,.52);font-size:11px;line-height:1.55}
.toowie-product .home-footer .home-footer-contact-links:where([data-page="index"], [data-page="index"] *){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.toowie-product .home-footer .home-footer-contact-link:where([data-page="index"], [data-page="index"] *){position:relative;display:flex;align-items:center;gap:11px;min-width:0;padding:7px 18px;color:#fff;transition:color .18s ease,transform .18s ease}
.toowie-product .home-footer .home-footer-contact-link:first-child:where([data-page="index"], [data-page="index"] *){padding-left:0}
.toowie-product .home-footer .home-footer-contact-link:not(:last-child):where([data-page="index"], [data-page="index"] *):after{content:"";position:absolute;right:0;top:6px;bottom:6px;width:1px;background:rgba(255,255,255,.12)}
.toowie-product .home-footer .home-footer-contact-link:hover:where([data-page="index"], [data-page="index"] *){color:#d8b77f;transform:translateY(-1px)}
.toowie-product .home-footer .home-footer-contact-icon:where([data-page="index"], [data-page="index"] *){width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:grid;place-items:center;background:rgba(198,154,87,.10);color:#d8b77f;border:1px solid rgba(198,154,87,.22)}
.toowie-product .home-footer .home-footer-contact-icon svg:where([data-page="index"], [data-page="index"] *){width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.toowie-product .home-footer .home-footer-contact-link>span:last-child:where([data-page="index"], [data-page="index"] *){min-width:0}
.toowie-product .home-footer .home-footer-contact-link small:where([data-page="index"], [data-page="index"] *){display:block;color:rgba(255,255,255,.42);font-size:9px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px}
.toowie-product .home-footer .home-footer-contact-link strong:where([data-page="index"], [data-page="index"] *){display:block;font-size:11.5px;line-height:1.4;font-weight:850;white-space:nowrap}
.toowie-product .home-footer .home-footer-meta:where([data-page="index"], [data-page="index"] *){background:#050f20;border-top:1px solid rgba(255,255,255,.07)}
.toowie-product .home-footer .home-footer-meta-inner:where([data-page="index"], [data-page="index"] *){padding:20px 0 22px}
.toowie-product .home-footer .home-footer-company:where([data-page="index"], [data-page="index"] *){display:flex;align-items:center;gap:18px 28px;flex-wrap:wrap;color:rgba(255,255,255,.48);font-size:10.5px;line-height:1.5;padding-bottom:17px;margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,.07)}
.toowie-product .home-footer .home-footer-company span:first-child:where([data-page="index"], [data-page="index"] *){color:rgba(255,255,255,.72);font-weight:800}
.toowie-product .home-footer .home-footer-bottom:where([data-page="index"], [data-page="index"] *){display:flex;align-items:center;justify-content:space-between;gap:30px}
.toowie-product .home-footer .home-footer-bottom .copyright:where([data-page="index"], [data-page="index"] *){margin:0;color:rgba(255,255,255,.34);font-size:10.5px;line-height:1.5}
.toowie-product .home-footer .footer-legal:where([data-page="index"], [data-page="index"] *){display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-size:11px;font-weight:850;color:rgba(255,255,255,.54)}
.toowie-product .home-footer .footer-legal a:where([data-page="index"], [data-page="index"] *){transition:color .18s ease}
.toowie-product .home-footer .footer-legal a:hover:where([data-page="index"], [data-page="index"] *){color:#d8b77f}
@media(max-width:980px){
  .toowie-product .home-footer .home-footer-layout:where([data-page="index"], [data-page="index"] *){grid-template-columns:1fr;gap:34px}
  .toowie-product .home-footer .home-footer-brand:where([data-page="index"], [data-page="index"] *){max-width:none;display:flex;align-items:center;gap:22px}
  .toowie-product .home-footer .home-footer-logo:where([data-page="index"], [data-page="index"] *){margin:0;flex:0 0 112px;width:112px}
  .toowie-product .home-footer .home-footer-contact:where([data-page="index"], [data-page="index"] *){grid-template-columns:150px 1fr}
}
@media(max-width:760px){
  .toowie-product .home-footer .home-footer-main:where([data-page="index"], [data-page="index"] *){padding:40px 0 34px}
  .toowie-product .home-footer .home-footer-layout:where([data-page="index"], [data-page="index"] *){gap:30px}
  .toowie-product .home-footer .home-footer-brand:where([data-page="index"], [data-page="index"] *){display:block}
  .toowie-product .home-footer .home-footer-logo:where([data-page="index"], [data-page="index"] *){width:108px;margin-bottom:14px}
  .toowie-product .home-footer .home-footer-brand p:where([data-page="index"], [data-page="index"] *){font-size:12px}
  .toowie-product .home-footer .home-footer-contact:where([data-page="index"], [data-page="index"] *){grid-template-columns:1fr;gap:17px}
  .toowie-product .home-footer .home-footer-contact-links:where([data-page="index"], [data-page="index"] *){grid-template-columns:1fr;gap:0}
  .toowie-product .home-footer .home-footer-contact-link:where([data-page="index"], [data-page="index"] *){padding:12px 0}
  .toowie-product .home-footer .home-footer-contact-link:not(:last-child):where([data-page="index"], [data-page="index"] *):after{left:0;right:0;top:auto;bottom:0;width:auto;height:1px;background:rgba(255,255,255,.09)}
  .toowie-product .home-footer .home-footer-contact-link strong:where([data-page="index"], [data-page="index"] *){font-size:12px}
  .toowie-product .home-footer .home-footer-company:where([data-page="index"], [data-page="index"] *){display:grid;gap:4px;padding-bottom:14px;margin-bottom:14px}
  .toowie-product .home-footer .home-footer-bottom:where([data-page="index"], [data-page="index"] *){align-items:flex-start;flex-direction:column;gap:13px}
  .toowie-product .home-footer .footer-legal:where([data-page="index"], [data-page="index"] *){gap:16px}
}


/* Landingpage footer – kompakte Abschlussleiste */
.toowie-product .home-footer-compact:where([data-page="index"], [data-page="index"] *){background:#f7f8fb;color:#17345f}
.toowie-product .home-footer-compact .home-footer-meta:where([data-page="index"], [data-page="index"] *){background:transparent;border-top:1px solid #dbe3ef}
.toowie-product .home-footer-compact .home-footer-meta-inner:where([data-page="index"], [data-page="index"] *){padding:20px 0 22px}
.toowie-product .home-footer-compact .home-footer-company-row:where([data-page="index"], [data-page="index"] *){display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid #dde5f0}
.toowie-product .home-footer-compact .home-footer-company-block:where([data-page="index"], [data-page="index"] *){display:flex;align-items:center;min-width:0;color:#3d526e;font-size:10.5px;line-height:1.5}
.toowie-product .home-footer-compact .home-footer-company-brand:where([data-page="index"], [data-page="index"] *){display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;min-width:max-content}
.toowie-product .home-footer-compact .home-footer-inline-logo:where([data-page="index"], [data-page="index"] *){width:163px;height:auto;flex:0 0 auto}
.toowie-product .home-footer-compact .home-footer-company-line:where([data-page="index"], [data-page="index"] *){display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;flex-wrap:nowrap}
.toowie-product .home-footer-compact .home-footer-company-name:where([data-page="index"], [data-page="index"] *){color:#17345f;font-size:12px;font-weight:850;white-space:nowrap;text-align:left}
.toowie-product .home-footer-compact .home-footer-company-address:where([data-page="index"], [data-page="index"] *){white-space:nowrap;color:#4e637f;text-align:left}
.toowie-product .home-footer-compact .home-footer-contact-row:where([data-page="index"], [data-page="index"] *){display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:26px;flex-wrap:nowrap;width:max-content;min-width:0;margin-left:auto;transform:translateY(9px)}
.toowie-product .home-footer-compact .home-footer-inline-contact:where([data-page="index"], [data-page="index"] *){position:relative;display:flex;align-items:center;gap:10px;padding:9px 0;color:#17345f;transition:color .18s ease,transform .18s ease;min-width:0}
.toowie-product .home-footer-compact .home-footer-inline-contact:first-child:where([data-page="index"], [data-page="index"] *){padding-left:0}
.toowie-product .home-footer-compact .home-footer-inline-contact:hover:where([data-page="index"], [data-page="index"] *){color:#0c2447;transform:translateY(-1px)}
.toowie-product .home-footer-compact .home-footer-inline-contact:not(:last-child):where([data-page="index"], [data-page="index"] *):after{content:"";position:absolute;right:-13px;top:7px;bottom:7px;width:1px;background:#e2e8f0}
.toowie-product .home-footer-compact .home-footer-inline-icon:where([data-page="index"], [data-page="index"] *){width:30px;height:30px;flex:0 0 30px;border-radius:9px;display:grid;place-items:center;background:#fff3da;color:#17345f;border:1px solid #f0d9aa}
.toowie-product .home-footer-compact .home-footer-inline-icon svg:where([data-page="index"], [data-page="index"] *){width:14px;height:14px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.toowie-product .home-footer-compact .home-footer-inline-contact span:last-child:where([data-page="index"], [data-page="index"] *){min-width:0}
.toowie-product .home-footer-compact .home-footer-inline-contact small:where([data-page="index"], [data-page="index"] *){display:block;color:#6a7e99;font-size:9px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
.toowie-product .home-footer-compact .home-footer-inline-contact strong:where([data-page="index"], [data-page="index"] *){display:block;font-size:11.5px;line-height:1.4;font-weight:850;white-space:nowrap;color:#17345f}
.toowie-product .home-footer-compact .home-footer-bottom:where([data-page="index"], [data-page="index"] *){display:flex;align-items:center;justify-content:space-between;gap:30px}
.toowie-product .home-footer-compact .home-footer-bottom .copyright:where([data-page="index"], [data-page="index"] *){margin:0;color:#7f8da3;font-size:10.5px;line-height:1.5}
.toowie-product .home-footer-compact .footer-legal:where([data-page="index"], [data-page="index"] *){display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-size:11px;font-weight:850;color:#7f8da3}
.toowie-product .home-footer-compact .footer-legal a:where([data-page="index"], [data-page="index"] *){transition:color .18s ease}
.toowie-product .home-footer-compact .footer-legal a:hover:where([data-page="index"], [data-page="index"] *){color:#17345f}
@media(max-width:1120px){
  .toowie-product .home-footer-compact .home-footer-company-row:where([data-page="index"], [data-page="index"] *){align-items:center}
  .toowie-product .home-footer-compact .home-footer-contact-row:where([data-page="index"], [data-page="index"] *){flex-direction:row;align-items:center;justify-content:flex-end;gap:18px;width:max-content;min-width:0;margin-left:auto}
  .toowie-product .home-footer-compact .home-footer-inline-contact:not(:last-child):where([data-page="index"], [data-page="index"] *):after{right:-9px;top:7px;bottom:7px;left:auto;width:1px;height:auto;background:#e2e8f0}
}
@media(max-width:820px){
  .toowie-product .home-footer-compact .home-footer-company-row:where([data-page="index"], [data-page="index"] *){flex-direction:column;align-items:flex-start;gap:20px}
  .toowie-product .home-footer-compact .home-footer-contact-row:where([data-page="index"], [data-page="index"] *){flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;width:max-content;max-width:100%;min-width:0;margin-left:0;transform:none}
  .toowie-product .home-footer-compact .home-footer-inline-contact:not(:last-child):where([data-page="index"], [data-page="index"] *):after{left:0;right:0;top:auto;bottom:0;width:auto;height:1px;background:#e2e8f0}
}
@media(max-width:760px){
  .toowie-product .home-footer-compact .home-footer-meta-inner:where([data-page="index"], [data-page="index"] *){padding:16px 0 22px}
  .toowie-product .home-footer-compact .home-footer-company-row:where([data-page="index"], [data-page="index"] *){gap:18px;padding-bottom:14px;margin-bottom:14px}
  .toowie-product .home-footer-compact .home-footer-company-brand:where([data-page="index"], [data-page="index"] *){align-items:flex-start;min-width:0;width:100%}
  .toowie-product .home-footer-compact .home-footer-inline-logo:where([data-page="index"], [data-page="index"] *){width:139px}
  .toowie-product .home-footer-compact .home-footer-company-line:where([data-page="index"], [data-page="index"] *){gap:2px;flex-wrap:nowrap}
  .toowie-product .home-footer-compact .home-footer-company-name:where([data-page="index"], [data-page="index"] *){font-size:11.5px;text-align:left}
  .toowie-product .home-footer-compact .home-footer-company-address:where([data-page="index"], [data-page="index"] *){white-space:normal;text-align:left}
  .toowie-product .home-footer-compact .home-footer-inline-contact:where([data-page="index"], [data-page="index"] *){padding:12px 0}
  .toowie-product .home-footer-compact .home-footer-bottom:where([data-page="index"], [data-page="index"] *){align-items:flex-start;flex-direction:column;gap:13px}
  .toowie-product .home-footer-compact .footer-legal:where([data-page="index"], [data-page="index"] *){gap:16px}
}


/* Navigation active state + centered rotating dropdown arrow */
.toowie-product .nav-links > a:where([data-page="index"], [data-page="index"] *),.toowie-product .nav-dropdown-trigger:where([data-page="index"], [data-page="index"] *){
  padding:8px 11px;
  border:1px solid transparent;
  border-radius:999px;
  transition:color .18s ease,border-color .18s ease,background .18s ease;
}
.toowie-product .nav-links > a.nav-current:where([data-page="index"], [data-page="index"] *),.toowie-product .nav-dropdown-trigger.nav-current:where([data-page="index"], [data-page="index"] *){
  color:#fff;
  border-color:var(--gold);
  background:rgba(198,154,87,.08);
}
.toowie-product .nav-dropdown-trigger:where([data-page="index"], [data-page="index"] *){
  gap:6px;
}
.toowie-product .nav-dropdown-trigger .nav-dropdown-arrow:where([data-page="index"], [data-page="index"] *){
  width:16px;
  height:16px;
  flex:0 0 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:0;
  transform:rotate(0deg);
  transform-origin:50% 50%;
  transition:transform .18s ease;
}
.toowie-product .nav-dropdown-trigger .nav-dropdown-arrow svg:where([data-page="index"], [data-page="index"] *){
  width:14px;
  height:14px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.toowie-product .nav-dropdown:hover .nav-dropdown-trigger .nav-dropdown-arrow:where([data-page="index"], [data-page="index"] *),.toowie-product .nav-dropdown:focus-within .nav-dropdown-trigger .nav-dropdown-arrow:where([data-page="index"], [data-page="index"] *){
  transform:rotate(180deg);
}
.toowie-product .features-page .site-header:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .site-header:where([data-page="index"], [data-page="index"] *){
  position:static;
  background:var(--toowie-blue);
}
.toowie-product .lead-manager-page #lead-manager:where([data-page="index"], [data-page="index"] *){
  padding-top:90px;
}

/* Lead Manager page refresh */
.toowie-product .lead-manager-page .site-header:where([data-page="index"], [data-page="index"] *){
  position:absolute;
  left:0;
  right:0;
  top:0;
  background:transparent;
}

.toowie-product .lead-manager-page .lead-hero:where([data-page="index"], [data-page="index"] *){
  padding:158px 0 96px;
}

.toowie-product .lead-manager-page .lead-hero-grid:where([data-page="index"], [data-page="index"] *){
  grid-template-columns:minmax(0,.88fr) minmax(420px,1.12fr);
  gap:48px;
}

.toowie-product .lead-manager-page .lead-hero-visual:where([data-page="index"], [data-page="index"] *){
  position:relative;
}

.toowie-product .lead-manager-page .lead-hero-browser:where([data-page="index"], [data-page="index"] *){
  width:100%;
  overflow:hidden;
  box-shadow:0 22px 55px rgba(4,14,33,.26);
}

.toowie-product .lead-manager-page .lead-hero-browser img:where([data-page="index"], [data-page="index"] *){
  width:100%;
  height:auto;
  display:block;
}

.toowie-product .lead-manager-page .lead-hero-card:where([data-page="index"], [data-page="index"] *){
  position:absolute;
  max-width:245px;
  z-index:3;
}

.toowie-product .lead-manager-page .lead-hero-card-import:where([data-page="index"], [data-page="index"] *){
  left:-34px;
  top:72px;
}

.toowie-product .lead-manager-page .lead-hero-card-script:where([data-page="index"], [data-page="index"] *){
  right:-36px;
  top:170px;
}

.toowie-product .lead-manager-page .lead-hero-card-notes:where([data-page="index"], [data-page="index"] *){
  left:18px;
  bottom:28px;
}

.toowie-product .lead-manager-page .lead-demo-section:where([data-page="index"], [data-page="index"] *){
  background:linear-gradient(180deg,#eef4f8 0%,#f7fafc 100%);
}

.toowie-product .lead-manager-page .lead-demo-section .section-head:where([data-page="index"], [data-page="index"] *){
  margin-bottom:38px;
}

.toowie-product .lead-demo-stage:where([data-page="index"], [data-page="index"] *){
  position:relative;
  padding-right:240px;
}

.toowie-product .lead-demo-browser:where([data-page="index"], [data-page="index"] *){
  overflow:visible;
  box-shadow:0 22px 54px rgba(15,23,42,.12);
}

.toowie-product .lead-demo-canvas:where([data-page="index"], [data-page="index"] *){
  position:relative;
  background:#fff;
}

.toowie-product .lead-demo-image:where([data-page="index"], [data-page="index"] *){
  width:100%;
  height:auto;
  display:block;
}

.toowie-product .lead-demo-highlight:where([data-page="index"], [data-page="index"] *){
  position:absolute;
  left:var(--highlight-x);
  top:var(--highlight-y);
  width:var(--highlight-w);
  height:var(--highlight-h);
  border-radius:18px;
  border:2px solid rgba(198,154,87,.95);
  box-shadow:0 0 0 999px rgba(7,20,44,.02),0 0 0 5px rgba(255,255,255,.7);
  opacity:0;
  transform:scale(.985);
  transform-origin:center;
  transition:opacity .18s ease,transform .18s ease,box-shadow .18s ease;
  pointer-events:none;
}

.toowie-product .lead-demo-highlight.is-active:where([data-page="index"], [data-page="index"] *){
  opacity:1;
  transform:scale(1);
  box-shadow:0 0 0 999px rgba(7,20,44,.12),0 0 0 5px rgba(255,255,255,.88);
}

.toowie-product .lead-demo-pins:where([data-page="index"], [data-page="index"] *){
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:222px;
}

.toowie-product .lead-demo-pin:where([data-page="index"], [data-page="index"] *){
  position:absolute;
  top:var(--pin-y);
  right:0;
  transform:translateY(-50%);
  width:222px;
  min-height:68px;
  padding:13px 16px;
  border-radius:18px;
  border:1px solid rgba(198,154,87,.34);
  background:rgba(255,255,255,.96);
  color:var(--navy);
  display:grid;
  gap:3px;
  text-align:left;
  cursor:pointer;
  box-shadow:0 16px 36px rgba(15,23,42,.12);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}

.toowie-product .lead-demo-pin:where([data-page="index"], [data-page="index"] *)::before{
  content:"";
  position:absolute;
  right:100%;
  top:50%;
  width:26px;
  height:2px;
  margin-top:-1px;
  background:linear-gradient(90deg,rgba(198,154,87,0),rgba(198,154,87,.95));
}

.toowie-product .lead-demo-pin:where([data-page="index"], [data-page="index"] *)::after{
  content:"";
  position:absolute;
  right:calc(100% + 24px);
  top:50%;
  width:8px;
  height:8px;
  margin-top:-4px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 6px rgba(198,154,87,.16);
}

.toowie-product .lead-demo-pin:hover:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-demo-pin:focus-visible:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-demo-pin.is-active:where([data-page="index"], [data-page="index"] *){
  transform:translateY(-50%) translateX(-4px);
  border-color:rgba(198,154,87,.72);
  background:#fff;
  box-shadow:0 20px 42px rgba(15,23,42,.18);
}

.toowie-product .lead-demo-pin:focus-visible:where([data-page="index"], [data-page="index"] *){
  outline:none;
}

.toowie-product .lead-demo-pin span:where([data-page="index"], [data-page="index"] *){
  display:block;
  font-size:15px;
  font-weight:900;
  line-height:1.2;
}

.toowie-product .lead-demo-pin small:where([data-page="index"], [data-page="index"] *){
  display:block;
  font-size:12px;
  line-height:1.42;
  color:#64748b;
}

@media(max-width:1260px){
  .toowie-product .lead-manager-page .lead-hero-grid:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr;
  }

  .toowie-product .lead-manager-page .lead-hero-browser:where([data-page="index"], [data-page="index"] *){
    max-width:880px;
    margin:0 auto;
  }

  .toowie-product .lead-manager-page .lead-hero-card-import:where([data-page="index"], [data-page="index"] *){
    left:16px;
    top:26px;
  }

  .toowie-product .lead-manager-page .lead-hero-card-script:where([data-page="index"], [data-page="index"] *){
    right:16px;
    top:136px;
  }

  .toowie-product .lead-manager-page .lead-hero-card-notes:where([data-page="index"], [data-page="index"] *){
    left:16px;
    bottom:18px;
  }

  .toowie-product .lead-demo-stage:where([data-page="index"], [data-page="index"] *){
    padding-right:0;
    display:grid;
    gap:22px;
  }

  .toowie-product .lead-demo-pins:where([data-page="index"], [data-page="index"] *){
    position:static;
    width:auto;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }

  .toowie-product .lead-demo-pin:where([data-page="index"], [data-page="index"] *){
    position:relative;
    top:auto;
    right:auto;
    width:100%;
    transform:none;
  }

  .toowie-product .lead-demo-pin:where([data-page="index"], [data-page="index"] *)::before,.toowie-product .lead-demo-pin:where([data-page="index"], [data-page="index"] *)::after{
    display:none;
  }

  .toowie-product .lead-demo-pin:hover:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-demo-pin:focus-visible:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-demo-pin.is-active:where([data-page="index"], [data-page="index"] *){
    transform:translateY(-2px);
  }
}

@media(max-width:760px){
  .toowie-product .lead-manager-page .lead-hero:where([data-page="index"], [data-page="index"] *){
    padding:126px 0 72px;
  }

  .toowie-product .lead-manager-page .lead-hero-card:where([data-page="index"], [data-page="index"] *){
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    max-width:none;
    margin:14px 0 0;
  }

  .toowie-product .lead-manager-page .lead-hero-visual:where([data-page="index"], [data-page="index"] *){
    display:grid;
    gap:0;
  }

  .toowie-product .lead-demo-pins:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr;
  }

  .toowie-product .lead-demo-highlight:where([data-page="index"], [data-page="index"] *){
    border-radius:12px;
  }
}

/* Lead Manager hero: same interactive screenshot behaviour as Akquise Manager */
.toowie-product .lead-manager-page .lead-hero-scroll-area:where([data-page="index"], [data-page="index"] *){
  max-height:580px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
  background:#fff;
}

.toowie-product .lead-manager-page .lead-hero-card.is-interactive:where([data-page="index"], [data-page="index"] *){
  border-width:2px;
}

@media(max-width:1180px) and (min-width:761px){
  .toowie-product .lead-manager-page .lead-hero-scroll-area:where([data-page="index"], [data-page="index"] *){
    max-height:540px;
  }
}

@media(max-width:760px){
  .toowie-product .lead-manager-page .lead-hero-scroll-area:where([data-page="index"], [data-page="index"] *){
    max-height:none;
    overflow:visible;
  }

  .toowie-product .lead-manager-page .lead-hero-card.hero-scroll-card:where([data-page="index"], [data-page="index"] *){
    top:auto !important;
    clip-path:none !important;
    opacity:1;
    pointer-events:auto;
  }
}

/* Lead Manager hero: additional actions + stable scrolling callouts */
.toowie-product .lead-manager-page .lead-hero-image-stage:where([data-page="index"], [data-page="index"] *){
  position:relative;
  width:100%;
}

.toowie-product .lead-manager-page .lead-hero-focus:where([data-page="index"], [data-page="index"] *){
  position:absolute;
  left:var(--lead-focus-x,0%);
  top:var(--lead-focus-y,0%);
  width:var(--lead-focus-w,0%);
  height:var(--lead-focus-h,0%);
  border:3px solid var(--gold);
  border-radius:12px;
  box-shadow:0 0 0 5px rgba(255,255,255,.92),0 0 0 9999px rgba(7,20,44,.20);
  opacity:0;
  transform:scale(.94);
  pointer-events:none;
  z-index:2;
  transition:opacity .18s ease,transform .18s ease;
}

.toowie-product .lead-manager-page .lead-hero-focus.is-active:where([data-page="index"], [data-page="index"] *){
  opacity:1;
  transform:scale(1);
}

.toowie-product .lead-manager-page .lead-hero-card-akquise:where([data-page="index"], [data-page="index"] *){
  left:50%;
  right:auto;
  margin-left:-115px;
  max-width:245px;
}

.toowie-product .lead-manager-page .lead-hero-card-script:where([data-page="index"], [data-page="index"] *){
  right:-36px;
}

.toowie-product .lead-manager-page .lead-hero-card-archived:where([data-page="index"], [data-page="index"] *){
  right:-36px;
}

.toowie-product .lead-manager-page .lead-hero-card-archive:where([data-page="index"], [data-page="index"] *){
  left:-34px;
}

/* A fixed bottom plus the dynamic scroll top stretched this card while scrolling. */
@media(min-width:761px){
  .toowie-product .lead-manager-page .lead-hero-card-notes:where([data-page="index"], [data-page="index"] *){
    bottom:auto !important;
  }
}

@media(max-width:1260px) and (min-width:761px){
  .toowie-product .lead-manager-page .lead-hero-card-akquise:where([data-page="index"], [data-page="index"] *){
    left:50%;
    right:auto;
    margin-left:-122px;
  }

  .toowie-product .lead-manager-page .lead-hero-card-script:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-archived:where([data-page="index"], [data-page="index"] *){
    right:16px;
  }

  .toowie-product .lead-manager-page .lead-hero-card-archive:where([data-page="index"], [data-page="index"] *){
    left:16px;
  }
}

@media(max-width:760px){
  .toowie-product .lead-manager-page .lead-hero-card-akquise:where([data-page="index"], [data-page="index"] *){
    left:auto;
    right:auto;
    margin-left:0;
  }
}

/* Lead Manager: erklärende Funktionsbereiche in derselben Wechselstruktur wie die Gesprächsphasen */
.toowie-product .lead-manager-page .lead-feature-sequence:where([data-page="index"], [data-page="index"] *){
  overflow:hidden;
  background:#eef4f8;
}

.toowie-product .lead-manager-page .lead-feature-row:where([data-page="index"], [data-page="index"] *){
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:56px;
  align-items:center;
  margin:0;
  padding:88px 0;
  clip-path:inset(0 -100vmax);
}

.toowie-product .lead-manager-page .lead-feature-blue:where([data-page="index"], [data-page="index"] *){
  background:#eef4f8;
  box-shadow:0 0 0 100vmax #eef4f8;
}

.toowie-product .lead-manager-page .lead-feature-warm:where([data-page="index"], [data-page="index"] *){
  background:#fcf7ef;
  box-shadow:0 0 0 100vmax #fcf7ef;
}

.toowie-product .lead-manager-page .lead-feature-reverse .lead-feature-copy:where([data-page="index"], [data-page="index"] *){
  order:2;
}

.toowie-product .lead-manager-page .lead-feature-reverse .lead-feature-browser:where([data-page="index"], [data-page="index"] *){
  order:1;
}

.toowie-product .lead-manager-page .lead-feature-copy h2:where([data-page="index"], [data-page="index"] *){
  max-width:560px;
  margin:12px 0 16px;
  color:var(--blue);
  font-size:clamp(32px,4vw,47px);
  line-height:1.08;
  letter-spacing:-.045em;
}

.toowie-product .lead-manager-page .lead-feature-copy>p:where([data-page="index"], [data-page="index"] *){
  max-width:560px;
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
}

.toowie-product .lead-manager-page .lead-feature-copy .check-list:where([data-page="index"], [data-page="index"] *){
  max-width:575px;
}

.toowie-product .lead-manager-page .lead-feature-copy .check-list li:where([data-page="index"], [data-page="index"] *){
  color:#0a2850;
}

.toowie-product .lead-manager-page .lead-feature-copy .check-list span:where([data-page="index"], [data-page="index"] *){
  background:#fff3da;
  color:#0a2850;
  font-weight:950;
}

.toowie-product .lead-manager-page .lead-feature-copy .check-list li>div:where([data-page="index"], [data-page="index"] *){
  display:grid;
  gap:4px;
}

.toowie-product .lead-manager-page .lead-feature-copy .check-list b:where([data-page="index"], [data-page="index"] *){
  color:#0a2850;
  font-size:13px;
  line-height:1.35;
}

.toowie-product .lead-manager-page .lead-feature-copy .check-list small:where([data-page="index"], [data-page="index"] *){
  color:#0a2850;
  font-size:12px;
  font-weight:500;
  line-height:1.55;
}

.toowie-product .lead-manager-page .lead-feature-browser:where([data-page="index"], [data-page="index"] *){
  width:100%;
  background:#eef2f7;
  box-shadow:0 18px 44px rgba(15,23,42,.11);
}

.toowie-product .lead-manager-page .lead-feature-crop:where([data-page="index"], [data-page="index"] *){
  height:430px;
  overflow:hidden;
  background:#eef2f7;
}

.toowie-product .lead-manager-page .lead-feature-crop img:where([data-page="index"], [data-page="index"] *){
  width:100%;
  height:100%;
  object-fit:cover;
}

.toowie-product .lead-manager-page .lead-feature-crop-contact img:where([data-page="index"], [data-page="index"] *){
  object-position:center 15%;
}


.toowie-product .lead-manager-page .lead-feature-browser-csv:where([data-page="index"], [data-page="index"] *){
  background:#f3f6f8;
}

.toowie-product .lead-manager-page .lead-csv-visual:where([data-page="index"], [data-page="index"] *){
  min-height:0;
  padding:0;
  display:block;
  overflow:hidden;
  background:linear-gradient(180deg,#f1f4f6,#e8edf1);
}

.toowie-product .lead-manager-page .lead-csv-visual img:where([data-page="index"], [data-page="index"] *){
  width:100%;
  height:auto;
  border-radius:0;
  box-shadow:none;
}

.toowie-product .lead-manager-page .lead-action-list li:where([data-page="index"], [data-page="index"] *){
  align-items:flex-start;
}

.toowie-product .lead-manager-page .lead-action-list li>span:where([data-page="index"], [data-page="index"] *){
  margin-top:1px;
  font-size:13px;
  font-weight:950;
}

.toowie-product .lead-manager-page .lead-action-list li>div:where([data-page="index"], [data-page="index"] *){
  display:grid;
  gap:4px;
}

.toowie-product .lead-manager-page .lead-action-list b:where([data-page="index"], [data-page="index"] *){
  font-size:13px;
  line-height:1.35;
}

.toowie-product .lead-manager-page .lead-action-list small:where([data-page="index"], [data-page="index"] *){
  color:#0a2850;
  font-size:12px;
  font-weight:500;
  line-height:1.55;
}

.toowie-product .lead-manager-page .lead-action-visual:where([data-page="index"], [data-page="index"] *){
  display:grid;
  gap:16px;
}

.toowie-product .lead-manager-page .lead-action-shot:where([data-page="index"], [data-page="index"] *){
  background:#eef2f7;
  box-shadow:0 18px 44px rgba(15,23,42,.10);
}

.toowie-product .lead-manager-page .lead-action-crop:where([data-page="index"], [data-page="index"] *){
  height:210px;
  overflow:hidden;
  background:#eef2f7;
}

.toowie-product .lead-manager-page .lead-action-crop img:where([data-page="index"], [data-page="index"] *){
  width:100%;
  height:100%;
  object-fit:cover;
}

.toowie-product .lead-manager-page .lead-action-crop-edit img:where([data-page="index"], [data-page="index"] *){
  object-position:center 14%;
}

.toowie-product .lead-manager-page .lead-action-crop-list img:where([data-page="index"], [data-page="index"] *){
  object-position:center 100%;
}

.toowie-product .lead-manager-page .lead-action-visual-single:where([data-page="index"], [data-page="index"] *){
  gap:0;
}

.toowie-product .lead-manager-page .lead-action-visual .lead-action-crop-focus:where([data-page="index"], [data-page="index"] *){
  position:relative;
  height:auto !important;
  overflow:hidden;
}

.toowie-product .lead-manager-page .lead-action-crop-focus:where([data-page="index"], [data-page="index"] *)::after{
  content:"";
  position:absolute;
  left:72%;
  top:42.5%;
  width:29.8%;
  height:22%;
  border:3px solid #d6a543;
  border-radius:14px;
  box-shadow:0 0 0 6px rgba(214,165,67,.18),0 0 18px rgba(214,165,67,.35);
  pointer-events:none;
}

.toowie-product .lead-manager-page .lead-action-crop-focus img:where([data-page="index"], [data-page="index"] *){
  display:block;
  width:100%;
  height:auto !important;
  object-fit:contain !important;
}

@media(max-width:1050px){
  .toowie-product .lead-manager-page .lead-feature-row:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr;
    gap:34px;
  }

  .toowie-product .lead-manager-page .lead-feature-reverse .lead-feature-copy:where([data-page="index"], [data-page="index"] *){
    order:1;
  }

  .toowie-product .lead-manager-page .lead-feature-reverse .lead-feature-browser:where([data-page="index"], [data-page="index"] *){
    order:2;
  }

  .toowie-product .lead-manager-page .lead-feature-copy h2:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-feature-copy>p:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-feature-copy .check-list:where([data-page="index"], [data-page="index"] *){
    max-width:760px;
  }

  .toowie-product .lead-manager-page .lead-feature-crop:where([data-page="index"], [data-page="index"] *){
    height:min(620px,68vw);
  }
}

@media(max-width:760px){
  .toowie-product .lead-manager-page .lead-feature-row:where([data-page="index"], [data-page="index"] *){
    padding:68px 0;
    gap:28px;
  }

  .toowie-product .lead-manager-page .lead-feature-copy h2:where([data-page="index"], [data-page="index"] *){
    font-size:34px;
  }

  .toowie-product .lead-manager-page .lead-feature-browser:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-action-shot:where([data-page="index"], [data-page="index"] *){
    border-radius:16px;
  }

  .toowie-product .lead-manager-page .lead-feature-crop:where([data-page="index"], [data-page="index"] *){
    height:390px;
  }

  .toowie-product .lead-manager-page .lead-csv-visual:where([data-page="index"], [data-page="index"] *){
    min-height:0;
    padding:0;
  }

  .toowie-product .lead-manager-page .lead-action-crop:where([data-page="index"], [data-page="index"] *){
    height:170px;
  }
}

/* Zusätzliche Features: Hero wie Akquise-/Lead-Manager mit Screenshot-Kette */
.toowie-product .features-page .site-header:where([data-page="index"], [data-page="index"] *){
  position:absolute;
  left:0;
  right:0;
  top:0;
  background:transparent;
}

.toowie-product .features-page .features-overview-hero:where([data-page="index"], [data-page="index"] *){
  padding:158px 0 96px;
}

/* Gleiche Grundaufteilung wie beim Lead Manager. */
.toowie-product .features-page .features-overview-grid:where([data-page="index"], [data-page="index"] *){
  grid-template-columns:minmax(0,.88fr) minmax(420px,1.12fr) !important;
  gap:42px !important;
}

.toowie-product .features-page .features-overview-hero .hero-copy:where([data-page="index"], [data-page="index"] *){
  align-self:center;
}

.toowie-product .features-page .features-overview-hero .hero-copy h1:where([data-page="index"], [data-page="index"] *){
  max-width:620px;
}

.toowie-product .features-page .features-overview-visual:where([data-page="index"], [data-page="index"] *){
  position:relative;
  min-width:0;
  align-self:center;
}

/* Browser-Rahmen bewusst identisch dimensioniert wie die anderen Produkt-Heros. */
.toowie-product .features-page .features-overview-browser:where([data-page="index"], [data-page="index"] *){
  width:100%;
  overflow:hidden;
  box-shadow:0 22px 55px rgba(4,14,33,.26);
}

.toowie-product .features-page .features-overview-scroll-area:where([data-page="index"], [data-page="index"] *){
  height:580px;
  max-height:580px;
  overflow-y:auto;
  background:#eef2f7;
  scrollbar-width:thin;
  scrollbar-color:#cbd5e1 #f8fafc;
}

/* Jeder Screenshot nutzt exakt dieselbe verfügbare Breite. Die Höhe bleibt natürlich. */
.toowie-product .features-page .features-overview-shot-track:where([data-page="index"], [data-page="index"] *){
  display:grid;
  gap:34px;
  padding:22px 22px 30px;
  min-height:100%;
  background:linear-gradient(180deg,#f7f9fb 0%,#edf2f6 100%);
}

.toowie-product .features-page .features-overview-shot:where([data-page="index"], [data-page="index"] *){
  position:relative;
  width:100%;
  margin:0;
  display:block;
  overflow:visible;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  background:#fff;
  box-shadow:0 13px 34px rgba(15,23,42,.12);
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease, opacity .22s ease, filter .22s ease;
}

.toowie-product .features-page .features-overview-shot-track.has-highlight .features-overview-shot:not(.is-highlighted):where([data-page="index"], [data-page="index"] *){
  opacity:.38;
  filter:brightness(.55) saturate(.72);
}

.toowie-product .features-page .features-overview-shot-track.has-highlight .features-overview-shot.is-highlighted:where([data-page="index"], [data-page="index"] *){
  opacity:1;
  filter:none;
}

.toowie-product .features-page .features-overview-shot:where([data-page="index"], [data-page="index"] *)::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  border:2px solid rgba(198,154,87,0);
  box-shadow:0 0 0 0 rgba(198,154,87,0);
  background:linear-gradient(180deg, rgba(255,243,218,0), rgba(255,243,218,.12));
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease, border-color .22s ease, box-shadow .22s ease;
  z-index:1;
}

.toowie-product .features-page .features-overview-shot.is-highlighted:where([data-page="index"], [data-page="index"] *){
  border-color:rgba(198,154,87,.72);
  box-shadow:0 22px 48px rgba(198,154,87,.18), 0 14px 32px rgba(15,23,42,.12);
}

.toowie-product .features-page .features-overview-shot.is-highlighted:where([data-page="index"], [data-page="index"] *)::before{
  opacity:1;
  border-color:rgba(198,154,87,.95);
  box-shadow:0 0 0 6px rgba(255,243,218,.88);
}

.toowie-product .features-page .features-overview-shot:nth-child(even):where([data-page="index"], [data-page="index"] *){
  transform:none;
}

.toowie-product .features-page .features-overview-shot img:where([data-page="index"], [data-page="index"] *){
  display:block;
  width:100% !important;
  height:auto !important;
  padding:0 !important;
  object-fit:contain !important;
  object-position:top center !important;
  border-radius:15px;
  background:#fff;
  cursor:zoom-in;
}

/* Deutliche goldene Trennung zwischen den einzelnen Screenshots. */
.toowie-product .features-page .features-overview-shot:not(:last-child):where([data-page="index"], [data-page="index"] *)::after{
  content:"";
  position:absolute;
  left:5%;
  right:5%;
  bottom:-18px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(198,154,87,0),rgba(198,154,87,.98) 18%,rgba(216,183,127,1) 50%,rgba(198,154,87,.98) 82%,rgba(198,154,87,0));
  box-shadow:0 0 10px rgba(198,154,87,.24);
  pointer-events:none;
}

/* Klickbare Feature-Karten wie bei den anderen Produkt-Heros. */
.toowie-product .features-page .features-overview-nav:where([data-page="index"], [data-page="index"] *){
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
}

.toowie-product .features-page .features-overview-nav-card:where([data-page="index"], [data-page="index"] *){
  appearance:none;
  width:max-content;
  max-width:255px;
  background:#fbf7ef;
  text-align:left;
  font-family:inherit;
  cursor:pointer;
  pointer-events:auto;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.toowie-product .features-page .features-overview-nav-card:hover:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-nav-card:focus-visible:where([data-page="index"], [data-page="index"] *){
  transform:translateY(-7px);
  border-color:var(--gold);
  box-shadow:0 22px 48px rgba(0,0,0,.26);
  outline:none;
}

/* Die finale goldene Aktiv-Markierung im Screenshot wird später ergänzt. */
.toowie-product .features-page .features-overview-nav-card[aria-pressed="true"]:where([data-page="index"], [data-page="index"] *){
  border-color:rgba(198,154,87,.92);
  background:#fbf7ef;
  box-shadow:0 22px 48px rgba(198,154,87,.20), 0 18px 34px rgba(0,0,0,.18);
}

.toowie-product .features-page .features-overview-nav-card .float-icon:where([data-page="index"], [data-page="index"] *){
  flex:0 0 34px;
  font-size:10px;
  letter-spacing:.02em;
}

.toowie-product .features-page .features-overview-nav-placeholders:where([data-page="index"], [data-page="index"] *){
  left:-38px;
}

.toowie-product .features-page .features-overview-nav-rejection:where([data-page="index"], [data-page="index"] *){
  right:-26px;
}

.toowie-product .features-page .features-overview-nav-editmode:where([data-page="index"], [data-page="index"] *){
  left:-46px;
}

/* Beim automatischen Hero-Lauf die Scrollbar dezent halten. */
.toowie-product .features-page .features-overview-visual.hero-intro-running .features-overview-scroll-area:where([data-page="index"], [data-page="index"] *)::-webkit-scrollbar-thumb{
  background:#d8b77f;
}

@media(max-width:1180px) and (min-width:761px){
  .toowie-product .features-page .features-overview-grid:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:minmax(0,.88fr) minmax(390px,1.12fr) !important;
    gap:42px !important;
  }

  .toowie-product .features-page .features-overview-scroll-area:where([data-page="index"], [data-page="index"] *){
    height:540px;
    max-height:540px;
  }

  .toowie-product .features-page .features-overview-shot-track:where([data-page="index"], [data-page="index"] *){
    padding:20px;
  }

  .toowie-product .features-page .features-overview-nav-card:where([data-page="index"], [data-page="index"] *){
    max-width:225px;
  }

  .toowie-product .features-page .features-overview-nav-placeholders:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-nav-editmode:where([data-page="index"], [data-page="index"] *){
    left:-24px;
  }

  .toowie-product .features-page .features-overview-nav-rejection:where([data-page="index"], [data-page="index"] *){
    right:-16px;
  }
}

@media(max-width:1050px){
  .toowie-product .features-page .features-overview-grid:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr !important;
    gap:42px !important;
  }

  .toowie-product .features-page .features-overview-hero .hero-copy h1:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-hero .hero-lead:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-hero .hero-subline:where([data-page="index"], [data-page="index"] *){
    max-width:760px;
  }

  .toowie-product .features-page .features-overview-visual:where([data-page="index"], [data-page="index"] *){
    max-width:820px;
    margin-right:0 !important;
  }

  .toowie-product .features-page .features-overview-browser:where([data-page="index"], [data-page="index"] *){
    width:100% !important;
  }
}

@media(max-width:760px){
  .toowie-product .features-page .features-overview-hero:where([data-page="index"], [data-page="index"] *){
    padding:132px 0 68px;
  }

  .toowie-product .features-page .features-overview-grid:where([data-page="index"], [data-page="index"] *){
    gap:32px !important;
  }

  .toowie-product .features-page .features-overview-visual:where([data-page="index"], [data-page="index"] *){
    margin-right:0 !important;
    padding-bottom:168px;
  }

  .toowie-product .features-page .features-overview-browser:where([data-page="index"], [data-page="index"] *){
    width:100% !important;
    transform:none;
    border-radius:18px;
  }

  /* Mobil bleibt die Vorschau kompakt scrollbar. */
  .toowie-product .features-page .features-overview-scroll-area:where([data-page="index"], [data-page="index"] *){
    height:430px;
    max-height:430px;
    overflow-y:auto;
  }

  .toowie-product .features-page .features-overview-shot-track:where([data-page="index"], [data-page="index"] *){
    gap:28px;
    padding:14px;
  }

  .toowie-product .features-page .features-overview-shot:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-shot:nth-child(even):where([data-page="index"], [data-page="index"] *){
    width:100%;
    transform:none;
    border-radius:13px;
  }

  .toowie-product .features-page .features-overview-shot img:where([data-page="index"], [data-page="index"] *){
    width:100% !important;
    height:auto !important;
    border-radius:12px;
  }

  .toowie-product .features-page .features-overview-shot:not(:last-child):where([data-page="index"], [data-page="index"] *)::after{
    bottom:-15px;
  }

  .toowie-product .features-page .features-overview-nav:where([data-page="index"], [data-page="index"] *){
    top:auto;
    bottom:0;
    height:150px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    align-content:end;
  }

  .toowie-product .features-page .features-overview-nav-card:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-nav-placeholders:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-nav-rejection:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-nav-editmode:where([data-page="index"], [data-page="index"] *){
    position:static;
    display:flex;
    width:100%;
    max-width:none;
    padding:9px 10px;
    min-height:62px;
    transform:none;
  }

  .toowie-product .features-page .features-overview-nav-card.hero-scroll-card:where([data-page="index"], [data-page="index"] *){
    top:auto !important;
    clip-path:none !important;
    opacity:1;
    pointer-events:auto;
  }

  .toowie-product .features-page .features-overview-nav-card:hover:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-nav-card:focus-visible:where([data-page="index"], [data-page="index"] *){
    transform:none;
  }

  .toowie-product .features-page .features-overview-nav-card .float-icon:where([data-page="index"], [data-page="index"] *){
    width:30px;
    height:30px;
    flex-basis:30px;
  }

  .toowie-product .features-page .features-overview-nav-card small:where([data-page="index"], [data-page="index"] *){
    display:none;
  }
}

/* Dezenter Bestell-Link in den drei Zugangsvarianten */
.toowie-product .team-option-card:where([data-page="index"], [data-page="index"] *){
  position:relative;
  padding-bottom:56px!important;
}
.toowie-product .team-card-cta:where([data-page="index"], [data-page="index"] *){
  position:absolute;
  right:22px;
  bottom:20px;
  color:var(--gold);
  font-size:12px;
  font-weight:900;
  text-decoration:none;
  letter-spacing:.01em;
  transition:color .18s ease,transform .18s ease;
}
.toowie-product .team-card-cta:hover:where([data-page="index"], [data-page="index"] *){
  color:#e0bd82;
  transform:translateX(2px);
}

@media(max-width:760px){
  .toowie-product .team-option-card:where([data-page="index"], [data-page="index"] *){padding-bottom:54px!important}
  .toowie-product .team-card-cta:where([data-page="index"], [data-page="index"] *){right:20px;bottom:18px}
}

/* Funktionen & Extras – finale Abschnittsfolge */
.toowie-product .features-page #rejection-tracker:where([data-page="index"], [data-page="index"] *){
  background:linear-gradient(180deg,#e8f1f4 0%,#eef4f8 100%);
}

.toowie-product .features-page .placeholder-section:where([data-page="index"], [data-page="index"] *){
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#fffaf0 0%,#fcf3e3 100%);
}

.toowie-product .features-page .placeholder-section:where([data-page="index"], [data-page="index"] *)::before{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  right:-250px;
  top:-250px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(198,154,87,.16),rgba(198,154,87,0) 69%);
  pointer-events:none;
}

.toowie-product .features-page .placeholder-grid:where([data-page="index"], [data-page="index"] *){
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(420px,1.12fr);
  gap:64px;
  align-items:center;
}

.toowie-product .features-page .placeholder-copy h2:where([data-page="index"], [data-page="index"] *){
  margin:13px 0 0;
  max-width:650px;
  font-size:clamp(34px,4.4vw,56px);
  line-height:1.04;
  letter-spacing:-.05em;
}

.toowie-product .features-page .placeholder-copy>p:where([data-page="index"], [data-page="index"] *){
  max-width:620px;
  margin:18px 0 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.75;
}

.toowie-product .features-page .placeholder-details:where([data-page="index"], [data-page="index"] *){
  display:grid;
  gap:14px;
  margin-top:30px;
}

.toowie-product .features-page .placeholder-details article:where([data-page="index"], [data-page="index"] *){
  display:grid;
  grid-template-columns:112px 1fr;
  gap:15px;
  align-items:start;
}

.toowie-product .features-page .placeholder-details article>span:where([data-page="index"], [data-page="index"] *){
  min-height:38px;
  padding:0 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #ead7b6;
  border-radius:11px;
  background:#fff;
  color:var(--blue);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-size:10px;
  font-weight:900;
  box-shadow:0 8px 20px rgba(15,23,42,.05);
}

.toowie-product .features-page .placeholder-details b:where([data-page="index"], [data-page="index"] *){
  display:block;
  color:var(--blue);
  font-size:14px;
}

.toowie-product .features-page .placeholder-details p:where([data-page="index"], [data-page="index"] *){
  margin:4px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
}

.toowie-product .features-page .placeholder-visual:where([data-page="index"], [data-page="index"] *){
  min-width:0;
}

.toowie-product .features-page .placeholder-browser:where([data-page="index"], [data-page="index"] *){
  width:100%;
  overflow:hidden;
  background:#fff;
  box-shadow:0 20px 50px rgba(15,23,42,.12);
}

.toowie-product .features-page .placeholder-browser img:where([data-page="index"], [data-page="index"] *){
  width:100%;
  height:auto;
}

@media(max-width:1050px){
  .toowie-product .features-page .placeholder-grid:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr;
    gap:38px;
  }

  .toowie-product .features-page .placeholder-copy>p:where([data-page="index"], [data-page="index"] *){
    max-width:760px;
  }
}

@media(max-width:760px){
  .toowie-product .features-page .placeholder-copy h2:where([data-page="index"], [data-page="index"] *){
    font-size:34px;
  }

  .toowie-product .features-page .placeholder-copy>p:where([data-page="index"], [data-page="index"] *){
    font-size:15px;
    line-height:1.7;
  }

  .toowie-product .features-page .placeholder-details article:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr;
    gap:9px;
  }

  .toowie-product .features-page .placeholder-details article>span:where([data-page="index"], [data-page="index"] *){
    width:max-content;
  }

  .toowie-product .features-page .placeholder-browser:where([data-page="index"], [data-page="index"] *){
    border-radius:16px;
  }
}

/* Funktionen & Extras – alternierende Intro-Anordnung mit Screenshot darunter */
.toowie-product .features-page #anpassbar .feature-split:where([data-page="index"], [data-page="index"] *){
  display:grid;
  grid-template-columns:1fr;
  gap:34px;
  align-items:stretch;
}

.toowie-product .features-page #anpassbar .copy-col:where([data-page="index"], [data-page="index"] *){
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.85fr);
  column-gap:56px;
  align-items:start;
  max-width:none;
}

.toowie-product .features-page #anpassbar .copy-col>.section-kicker:where([data-page="index"], [data-page="index"] *){
  grid-column:1;
  grid-row:1;
}

.toowie-product .features-page #anpassbar .copy-col>h2:where([data-page="index"], [data-page="index"] *){
  grid-column:1;
  grid-row:2;
  max-width:760px;
  margin:14px 0 0;
  font-size:clamp(34px,4.4vw,56px);
  line-height:1.03;
  letter-spacing:-.05em;
}

.toowie-product .features-page #anpassbar .copy-col>p:where([data-page="index"], [data-page="index"] *){
  grid-column:2;
  grid-row:1 / span 2;
  align-self:end;
  max-width:420px;
  margin:0;
  padding-top:44px;
  font-size:16px;
  line-height:1.8;
}

.toowie-product .features-page #anpassbar .detail-list:where([data-page="index"], [data-page="index"] *){
  grid-column:1 / -1;
  grid-row:3;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin-top:34px;
}

.toowie-product .features-page #anpassbar .detail-list article:where([data-page="index"], [data-page="index"] *){
  min-width:0;
}

.toowie-product .features-page #anpassbar .side-browser:where([data-page="index"], [data-page="index"] *){
  width:100%;
  max-width:none;
  margin:0;
  overflow:hidden;
  box-shadow:0 18px 44px rgba(15,23,42,.10);
}

.toowie-product .features-page #anpassbar .side-browser img:where([data-page="index"], [data-page="index"] *){
  width:100%;
  height:auto;
}

/* Mittlerer Block gespiegelt: Text links, Überschrift rechts. */
.toowie-product .features-page #rejection-tracker .rejection-intro:where([data-page="index"], [data-page="index"] *){
  grid-template-columns:minmax(280px,.85fr) minmax(0,1.35fr);
}

.toowie-product .features-page #rejection-tracker .rejection-intro-copy:where([data-page="index"], [data-page="index"] *){
  grid-column:2;
  grid-row:1;
  padding-left:26px;
  border-left:4px solid var(--gold);
}

.toowie-product .features-page #rejection-tracker .rejection-intro-text:where([data-page="index"], [data-page="index"] *){
  grid-column:1;
  grid-row:1;
  align-self:end;
}

.toowie-product .features-page #rejection-tracker .rejection-intro-text p:where([data-page="index"], [data-page="index"] *){
  margin-left:0;
}

/* Platzhalter: gleiche Logik wie Block 1, Screenshot über volle Breite darunter. */
.toowie-product .features-page .placeholder-grid:where([data-page="index"], [data-page="index"] *){
  display:grid;
  grid-template-columns:1fr;
  gap:34px;
  align-items:stretch;
}

.toowie-product .features-page .placeholder-copy:where([data-page="index"], [data-page="index"] *){
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.85fr);
  column-gap:56px;
  align-items:start;
}

.toowie-product .features-page .placeholder-copy>.section-kicker:where([data-page="index"], [data-page="index"] *){
  grid-column:1;
  grid-row:1;
}

.toowie-product .features-page .placeholder-copy>h2:where([data-page="index"], [data-page="index"] *){
  grid-column:1;
  grid-row:2;
  max-width:760px;
}

.toowie-product .features-page .placeholder-copy>p:where([data-page="index"], [data-page="index"] *){
  grid-column:2;
  grid-row:1 / span 2;
  align-self:end;
  max-width:420px;
  margin:0;
  padding-top:44px;
}

.toowie-product .features-page .placeholder-details:where([data-page="index"], [data-page="index"] *){
  grid-column:1 / -1;
  grid-row:3;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin-top:34px;
}

.toowie-product .features-page .placeholder-details article:where([data-page="index"], [data-page="index"] *){
  min-width:0;
  grid-template-columns:112px minmax(0,1fr);
}

.toowie-product .features-page .placeholder-visual:where([data-page="index"], [data-page="index"] *){
  width:100%;
}

.toowie-product .features-page .placeholder-browser:where([data-page="index"], [data-page="index"] *){
  width:100%;
  max-width:none;
  margin:0;
}

@media(max-width:1050px){
  .toowie-product .features-page #anpassbar .copy-col:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .placeholder-copy:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr;
    gap:0;
  }

  .toowie-product .features-page #anpassbar .copy-col>.section-kicker:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page #anpassbar .copy-col>h2:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page #anpassbar .copy-col>p:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page #anpassbar .detail-list:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .placeholder-copy>.section-kicker:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .placeholder-copy>h2:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .placeholder-copy>p:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .placeholder-details:where([data-page="index"], [data-page="index"] *){
    grid-column:1;
    grid-row:auto;
  }

  .toowie-product .features-page #anpassbar .copy-col>p:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .placeholder-copy>p:where([data-page="index"], [data-page="index"] *){
    max-width:760px;
    margin:18px 0 0;
    padding-top:0;
  }

  .toowie-product .features-page #rejection-tracker .rejection-intro:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr;
  }

  .toowie-product .features-page #rejection-tracker .rejection-intro-copy:where([data-page="index"], [data-page="index"] *){
    grid-column:1;
    grid-row:1;
  }

  .toowie-product .features-page #rejection-tracker .rejection-intro-text:where([data-page="index"], [data-page="index"] *){
    grid-column:1;
    grid-row:2;
  }
}

@media(max-width:760px){
  .toowie-product .features-page #anpassbar .detail-list:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .placeholder-details:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr;
    gap:14px;
    margin-top:28px;
  }

  .toowie-product .features-page #anpassbar .copy-col>h2:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .placeholder-copy>h2:where([data-page="index"], [data-page="index"] *){
    font-size:34px;
  }

  .toowie-product .features-page .placeholder-details article:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr;
  }
}

/* Funktionen & Extras: Goldstrich-Listen wie im alten Fokus-Block */
.toowie-product .features-page #anpassbar .detail-list:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .placeholder-details:where([data-page="index"], [data-page="index"] *){
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  padding-left:28px;
}

.toowie-product .features-page #anpassbar .detail-list:where([data-page="index"], [data-page="index"] *)::before,.toowie-product .features-page .placeholder-details:where([data-page="index"], [data-page="index"] *)::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  border-radius:999px;
  background:linear-gradient(180deg,#e9d4b0 0%,#c69a57 52%,#b88946 100%);
  box-shadow:0 0 0 1px rgba(198,154,87,.08);
}

.toowie-product .features-page #anpassbar .detail-list article:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .placeholder-details article:where([data-page="index"], [data-page="index"] *){
  position:relative;
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:14px;
  align-items:start;
  padding:10px 0;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.toowie-product .features-page #anpassbar .detail-list article+article:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .placeholder-details article+article:where([data-page="index"], [data-page="index"] *){
  border-top:1px solid rgba(15,23,42,.07) !important;
  padding-top:14px;
}

.toowie-product .features-page #anpassbar .detail-list article>span:where([data-page="index"], [data-page="index"] *){
  width:38px;
  height:38px;
  border-radius:11px;
  background:#f1e6d3 !important;
  color:var(--navy) !important;
  border:1px solid rgba(198,154,87,.18);
  box-shadow:none;
}

.toowie-product .features-page #anpassbar .detail-list b:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .placeholder-details b:where([data-page="index"], [data-page="index"] *){
  display:block;
  font-size:21px;
  line-height:1.18;
  letter-spacing:-.02em;
  margin-top:2px;
}

.toowie-product .features-page #anpassbar .detail-list p:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .placeholder-details p:where([data-page="index"], [data-page="index"] *){
  font-size:15px;
  line-height:1.56;
  margin-top:6px;
  max-width:760px;
}

.toowie-product .features-page .placeholder-details article:where([data-page="index"], [data-page="index"] *){
  grid-template-columns:112px minmax(0,1fr);
}

.toowie-product .features-page .placeholder-details article>span:where([data-page="index"], [data-page="index"] *){
  width:112px;
  min-height:38px;
  padding:0 10px;
  border-radius:11px;
  background:#f1e6d3 !important;
  color:var(--navy) !important;
  border:1px solid rgba(198,154,87,.18);
  box-shadow:none;
  display:flex;
  align-items:center;
  justify-content:center;
}

@media(max-width:760px){
  .toowie-product .features-page #anpassbar .detail-list:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .placeholder-details:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr;
    gap:12px;
    padding-left:20px;
  }

  .toowie-product .features-page #anpassbar .detail-list:where([data-page="index"], [data-page="index"] *)::before,.toowie-product .features-page .placeholder-details:where([data-page="index"], [data-page="index"] *)::before{
    width:3px;
  }

  .toowie-product .features-page #anpassbar .detail-list article:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:40px minmax(0,1fr);
    gap:12px;
  }

  .toowie-product .features-page #anpassbar .detail-list article>span:where([data-page="index"], [data-page="index"] *){
    width:34px;
    height:34px;
    border-radius:10px;
  }

  .toowie-product .features-page #anpassbar .detail-list b:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .placeholder-details b:where([data-page="index"], [data-page="index"] *){
    font-size:18px;
  }

  .toowie-product .features-page #anpassbar .detail-list p:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .placeholder-details p:where([data-page="index"], [data-page="index"] *){
    font-size:14px;
  }

  .toowie-product .features-page .placeholder-details article:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr;
    gap:9px;
  }
}

/* Funktionen & Extras – Detailblöcke im Lead-Manager-Stil */
.toowie-product .features-page .feature-detail-shell:where([data-page="index"], [data-page="index"] *){
  display:grid;
  gap:34px;
}

.toowie-product .features-page .feature-detail-top:where([data-page="index"], [data-page="index"] *){
  display:grid;
  grid-template-columns:minmax(0,.98fr) minmax(360px,1.02fr);
  gap:56px;
  align-items:start;
}

.toowie-product .features-page .feature-detail-copy h2:where([data-page="index"], [data-page="index"] *){
  margin:14px 0 0;
  max-width:680px;
  font-size:clamp(34px,4.4vw,56px);
  line-height:1.03;
  letter-spacing:-.05em;
}

.toowie-product .features-page .feature-detail-copy>p:where([data-page="index"], [data-page="index"] *){
  max-width:620px;
  margin:18px 0 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.8;
}

.toowie-product .features-page .feature-detail-rail:where([data-page="index"], [data-page="index"] *){
  padding:2px 0 0 26px;
  border-left:4px solid var(--gold);
}

.toowie-product .features-page .feature-detail-rail article:where([data-page="index"], [data-page="index"] *){
  display:grid;
  grid-template-columns:44px 1fr;
  gap:14px;
  align-items:start;
  padding:0 0 18px;
  margin-bottom:18px;
  border-bottom:1px solid rgba(15,23,42,.12);
}

.toowie-product .features-page .feature-detail-rail article:last-child:where([data-page="index"], [data-page="index"] *){
  padding-bottom:0;
  margin-bottom:0;
  border-bottom:0;
}

.toowie-product .features-page .feature-detail-icon:where([data-page="index"], [data-page="index"] *){
  width:38px;
  height:38px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f1e6d3;
  color:var(--blue);
  font-size:12px;
  font-weight:900;
  box-shadow:none;
}

.toowie-product .features-page .feature-detail-logo:where([data-page="index"], [data-page="index"] *){
  padding:8px;
}

.toowie-product .features-page .feature-detail-logo .detail-logo-symbol:where([data-page="index"], [data-page="index"] *){
  width:100%;
  height:100%;
  object-fit:contain;
}

.toowie-product .features-page .feature-detail-rail b:where([data-page="index"], [data-page="index"] *){
  display:block;
  color:var(--blue);
  font-size:14px;
  line-height:1.35;
}

.toowie-product .features-page .feature-detail-rail p:where([data-page="index"], [data-page="index"] *){
  margin:4px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
}

.toowie-product .features-page .feature-detail-browser:where([data-page="index"], [data-page="index"] *){
  width:100%;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(15,23,42,.12);
}

.toowie-product .features-page .feature-detail-browser img:where([data-page="index"], [data-page="index"] *){
  width:100%;
  height:auto;
}

.toowie-product .features-page .placeholder-detail-rail article:where([data-page="index"], [data-page="index"] *){
  grid-template-columns:112px minmax(0,1fr);
  gap:16px;
}

.toowie-product .features-page .placeholder-detail-rail .feature-detail-icon:where([data-page="index"], [data-page="index"] *){
  width:112px;
  min-width:0;
  padding:0 10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-size:10px;
  letter-spacing:0;
}

@media(max-width:1050px){
  .toowie-product .features-page .feature-detail-top:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr;
    gap:30px;
  }

  .toowie-product .features-page .feature-detail-copy>p:where([data-page="index"], [data-page="index"] *){
    max-width:760px;
  }
}

@media(max-width:760px){
  .toowie-product .features-page .feature-detail-shell:where([data-page="index"], [data-page="index"] *){
    gap:24px;
  }

  .toowie-product .features-page .feature-detail-copy h2:where([data-page="index"], [data-page="index"] *){
    font-size:34px;
  }

  .toowie-product .features-page .feature-detail-copy>p:where([data-page="index"], [data-page="index"] *){
    font-size:15px;
    line-height:1.7;
  }

  .toowie-product .features-page .feature-detail-rail:where([data-page="index"], [data-page="index"] *){
    padding-left:20px;
  }

  .toowie-product .features-page .feature-detail-rail article:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:38px 1fr;
    gap:12px;
    padding-bottom:16px;
    margin-bottom:16px;
  }

  .toowie-product .features-page .feature-detail-icon:where([data-page="index"], [data-page="index"] *){
    width:34px;
    height:34px;
    border-radius:10px;
    font-size:11px;
  }

  .toowie-product .features-page .placeholder-detail-rail article:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr;
    gap:9px;
  }

  .toowie-product .features-page .placeholder-detail-rail .feature-detail-icon:where([data-page="index"], [data-page="index"] *){
    width:max-content;
    min-width:86px;
    font-size:9px;
  }
}

/* Fix: Text im Platzhalter-Block unter die Überschrift setzen */
.toowie-product .features-page .placeholder-detail-shell .placeholder-copy:where([data-page="index"], [data-page="index"] *){
  display:block;
}

.toowie-product .features-page .placeholder-detail-shell .placeholder-copy>.section-kicker:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .placeholder-detail-shell .placeholder-copy>h2:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .placeholder-detail-shell .placeholder-copy>p:where([data-page="index"], [data-page="index"] *){
  grid-column:auto;
  grid-row:auto;
}

.toowie-product .features-page .placeholder-detail-shell .placeholder-copy>h2:where([data-page="index"], [data-page="index"] *){
  max-width:680px;
}

.toowie-product .features-page .placeholder-detail-shell .placeholder-copy>p:where([data-page="index"], [data-page="index"] *){
  max-width:620px;
  margin:18px 0 0;
  padding-top:0;
}

/* Funktionen & Extras – Rejection Tracker wie die Detailblöcke darüber/darunter */
.toowie-product .features-page #rejection-tracker .rejection-intro:where([data-page="index"], [data-page="index"] *){
  grid-template-columns:minmax(360px,1.02fr) minmax(0,.98fr);
  gap:56px;
  align-items:start;
}

.toowie-product .features-page #rejection-tracker .rejection-detail-rail:where([data-page="index"], [data-page="index"] *){
  grid-column:1;
  grid-row:1;
  padding:2px 0 0;
  border-left:0;
}

.toowie-product .features-page #rejection-tracker .rejection-detail-rail article:where([data-page="index"], [data-page="index"] *){
  display:grid;
  grid-template-columns:44px 1fr;
  gap:14px;
  align-items:start;
  padding:0 0 18px;
  margin-bottom:18px;
  border-bottom:1px solid rgba(15,23,42,.12);
}

.toowie-product .features-page #rejection-tracker .rejection-detail-rail article:last-child:where([data-page="index"], [data-page="index"] *){
  padding-bottom:0;
  margin-bottom:0;
  border-bottom:0;
}

.toowie-product .features-page #rejection-tracker .rejection-detail-icon:where([data-page="index"], [data-page="index"] *){
  width:38px;
  height:38px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f1e6d3;
  color:var(--blue);
  font-size:12px;
  font-weight:900;
}

.toowie-product .features-page #rejection-tracker .rejection-detail-rail b:where([data-page="index"], [data-page="index"] *){
  display:block;
  color:var(--blue);
  font-size:14px;
  line-height:1.35;
}

.toowie-product .features-page #rejection-tracker .rejection-detail-rail p:where([data-page="index"], [data-page="index"] *){
  margin:4px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
}

.toowie-product .features-page #rejection-tracker .rejection-intro-copy:where([data-page="index"], [data-page="index"] *){
  grid-column:2;
  grid-row:1;
  padding-left:26px;
  border-left:4px solid var(--gold);
}

.toowie-product .features-page #rejection-tracker .rejection-intro-copy>p:where([data-page="index"], [data-page="index"] *){
  max-width:620px;
  margin:18px 0 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.8;
}

@media(max-width:1050px){
  .toowie-product .features-page #rejection-tracker .rejection-intro:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr;
    gap:30px;
  }

  .toowie-product .features-page #rejection-tracker .rejection-intro-copy:where([data-page="index"], [data-page="index"] *){
    grid-column:1;
    grid-row:1;
  }

  .toowie-product .features-page #rejection-tracker .rejection-detail-rail:where([data-page="index"], [data-page="index"] *){
    grid-column:1;
    grid-row:2;
  }

  .toowie-product .features-page #rejection-tracker .rejection-intro-copy>p:where([data-page="index"], [data-page="index"] *){
    max-width:760px;
  }
}

@media(max-width:760px){
  .toowie-product .features-page #rejection-tracker .rejection-intro-copy:where([data-page="index"], [data-page="index"] *){
    padding-left:20px;
  }

  .toowie-product .features-page #rejection-tracker .rejection-detail-rail article:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:38px 1fr;
    gap:12px;
    padding-bottom:16px;
    margin-bottom:16px;
  }

  .toowie-product .features-page #rejection-tracker .rejection-detail-icon:where([data-page="index"], [data-page="index"] *){
    width:34px;
    height:34px;
    border-radius:10px;
    font-size:11px;
  }

  .toowie-product .features-page #rejection-tracker .rejection-intro-copy>p:where([data-page="index"], [data-page="index"] *){
    font-size:15px;
    line-height:1.7;
  }
}


/* Feature-Listen: Icon-/Code-Boxen vertikal zur gesamten Textgruppe zentrieren */
.toowie-product .features-page .feature-detail-rail article:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page #rejection-tracker .rejection-detail-rail article:where([data-page="index"], [data-page="index"] *){
  align-items:center;
}

/* Rechtliche Seiten – ruhige Dokumentansicht im bestehenden Toowie-Stil */
.toowie-product .legal-page:where([data-page="index"], [data-page="index"] *){
  background:#f7f0e2;
  color:var(--ink);
}
.toowie-product .legal-page .site-header:where([data-page="index"], [data-page="index"] *){
  position:static;
  background:var(--toowie-blue);
  color:#fff;
}
.toowie-product .legal-page .nav:where([data-page="index"], [data-page="index"] *){
  height:86px;
}
.toowie-product .legal-document-section:where([data-page="index"], [data-page="index"] *){
  min-height:70vh;
  padding:66px 0 82px;
  background:var(--toowie-background-gold);
}
.toowie-product .legal-document:where([data-page="index"], [data-page="index"] *){
  position:relative;
  width:min(960px,100%);
  margin:0 auto;
  padding:54px 60px 62px;
  overflow:hidden;
  border:1px solid #cad8df;
  border-radius:16px;
  background:var(--toowie-background-hell);
  box-shadow:0 24px 60px rgba(15,23,42,.12);
}
.toowie-product .legal-document:where([data-page="index"], [data-page="index"] *):before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:linear-gradient(90deg,var(--gold),rgba(198,154,87,.18) 62%,transparent);
}
.toowie-product .legal-document-head:where([data-page="index"], [data-page="index"] *){
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:32px;
  align-items:start;
  padding-bottom:34px;
  margin-bottom:34px;
  border-bottom:1px solid rgba(71,85,105,.18);
}
.toowie-product .legal-document-kicker:where([data-page="index"], [data-page="index"] *){
  display:block;
  margin-bottom:12px;
  color:#8a642d;
  font-size:10px;
  font-weight:950;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.toowie-product .legal-document-head h1:where([data-page="index"], [data-page="index"] *){
  margin:0;
  color:var(--navy);
  font-size:clamp(34px,4.6vw,50px);
  line-height:1.02;
  letter-spacing:-.045em;
}
.toowie-product .legal-document-head p:where([data-page="index"], [data-page="index"] *){
  max-width:690px;
  margin:15px 0 0;
  color:#506276;
  font-size:15px;
  line-height:1.72;
}
.toowie-product .legal-document-date:where([data-page="index"], [data-page="index"] *){
  min-width:118px;
  padding:12px 14px;
  border:1px solid rgba(198,154,87,.36);
  border-radius:12px;
  background:rgba(247,240,226,.72);
  text-align:right;
}
.toowie-product .legal-document-date span:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-document-date strong:where([data-page="index"], [data-page="index"] *){
  display:block;
}
.toowie-product .legal-document-date span:where([data-page="index"], [data-page="index"] *){
  margin-bottom:4px;
  color:#7c8997;
  font-size:9px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.toowie-product .legal-document-date strong:where([data-page="index"], [data-page="index"] *){
  color:var(--navy);
  font-size:12px;
}
.toowie-product .legal-document-body:where([data-page="index"], [data-page="index"] *){
  max-width:800px;
}
.toowie-product .legal-document-body h2:where([data-page="index"], [data-page="index"] *){
  margin:38px 0 13px;
  color:var(--navy);
  font-size:21px;
  line-height:1.28;
  letter-spacing:-.025em;
}
.toowie-product .legal-document-body h2:first-child:where([data-page="index"], [data-page="index"] *){
  margin-top:0;
}
.toowie-product .legal-document-body h3:where([data-page="index"], [data-page="index"] *){
  margin:26px 0 10px;
  color:var(--navy);
  font-size:16px;
  line-height:1.35;
}
.toowie-product .legal-document-body p:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-document-body li:where([data-page="index"], [data-page="index"] *){
  color:#465b70;
  font-size:14px;
  line-height:1.78;
}
.toowie-product .legal-document-body p:where([data-page="index"], [data-page="index"] *){
  margin:0 0 13px;
}
.toowie-product .legal-document-body ul:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-document-body ol:where([data-page="index"], [data-page="index"] *){
  margin:10px 0 18px;
  padding-left:22px;
}
.toowie-product .legal-document-body strong:where([data-page="index"], [data-page="index"] *){
  color:#20364e;
}
.toowie-product .legal-document-body a:where([data-page="index"], [data-page="index"] *){
  color:#0a4a85;
  font-weight:750;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.toowie-product .legal-document-body a:hover:where([data-page="index"], [data-page="index"] *){
  color:#8a642d;
}
.toowie-product .legal-document .legal-contact:where([data-page="index"], [data-page="index"] *){
  margin:14px 0 20px;
  padding:18px 20px;
  border:1px solid rgba(71,85,105,.14);
  border-radius:12px;
  background:rgba(255,255,255,.46);
}
.toowie-product .legal-document .legal-contact p:where([data-page="index"], [data-page="index"] *){
  margin:0;
}
.toowie-product .legal-document .legal-note:where([data-page="index"], [data-page="index"] *){
  margin:20px 0;
  padding:16px 18px;
  border:1px solid rgba(198,154,87,.34);
  border-left:4px solid var(--gold);
  border-radius:0 12px 12px 0;
  background:rgba(247,240,226,.72);
  color:#526478;
  font-size:13px;
  line-height:1.72;
}
.toowie-product .legal-document .legal-table-wrap:where([data-page="index"], [data-page="index"] *){
  margin:18px 0 26px;
  overflow-x:auto;
  border:1px solid rgba(71,85,105,.15);
  border-radius:12px;
  background:rgba(255,255,255,.34);
}
.toowie-product .legal-document .legal-table:where([data-page="index"], [data-page="index"] *){
  width:100%;
  min-width:650px;
  border-collapse:collapse;
}
.toowie-product .legal-document .legal-table th:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-document .legal-table td:where([data-page="index"], [data-page="index"] *){
  padding:13px 14px;
  border-bottom:1px solid rgba(71,85,105,.12);
  text-align:left;
  vertical-align:top;
  font-size:12px;
  line-height:1.6;
}
.toowie-product .legal-document .legal-table th:where([data-page="index"], [data-page="index"] *){
  background:rgba(255,255,255,.52);
  color:#294159;
  font-weight:900;
}
.toowie-product .legal-document .legal-table td:where([data-page="index"], [data-page="index"] *){
  color:#53677b;
}
.toowie-product .legal-document .legal-table tr:last-child td:where([data-page="index"], [data-page="index"] *){
  border-bottom:0;
}
.toowie-product .legal-page .home-footer-compact .footer-legal a[aria-current="page"]:where([data-page="index"], [data-page="index"] *){
  color:#17345f;
}
.toowie-product .legal-page-heading:where([data-page="index"], [data-page="index"] *){
  margin:0 0 18px;
  text-align:center;
}
.toowie-product .legal-page-heading h1:where([data-page="index"], [data-page="index"] *){
  margin:0;
  color:#104e8b;
  font-size:clamp(38px,5vw,62px);
  font-weight:900;
  letter-spacing:-.04em;
}
.toowie-product .legal-document-title:where([data-page="index"], [data-page="index"] *){
  margin:0;
  color:#104e8b;
  font-size:22px;
  font-weight:800;
  line-height:1.2;
}
.toowie-product .impressum-document:where([data-page="index"], [data-page="index"] *){
  padding-bottom:44px;
}
.toowie-product .impressum-document-head:where([data-page="index"], [data-page="index"] *){
  display:block;
  gap:0;
  padding-bottom:18px;
  margin-bottom:12px;
  border-bottom:0;
  text-align:center;
}
.toowie-product .impressum-document .legal-document-body:where([data-page="index"], [data-page="index"] *){
  max-width:none;
}
.toowie-product .impressum-document .legal-document-body h2:where([data-page="index"], [data-page="index"] *),.toowie-product .impressum-document .legal-document-body h3:where([data-page="index"], [data-page="index"] *){
  color:#104e8b;
  font-weight:800;
}
.toowie-product .impressum-document .legal-document-body h2:where([data-page="index"], [data-page="index"] *){
  margin:28px 0 10px;
  font-size:15px;
}
.toowie-product .impressum-document .legal-document-body p:where([data-page="index"], [data-page="index"] *),.toowie-product .impressum-document .legal-document-body li:where([data-page="index"], [data-page="index"] *){
  margin:0 0 10px;
  color:#255180;
  font-size:12px;
  line-height:1.55;
}
.toowie-product .legal-document-footer:where([data-page="index"], [data-page="index"] *){
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,340px);
  gap:36px;
  align-items:center;
  margin-top:26px;
  padding-top:28px;
  border-top:1px solid #bac7d5;
}
.toowie-product .legal-pdf-download:where([data-page="index"], [data-page="index"] *){
  justify-self:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#e63946;
  text-align:center;
}
.toowie-product .legal-pdf-icon:where([data-page="index"], [data-page="index"] *){
  display:flex;
  align-items:center;
  justify-content:center;
}
.toowie-product .legal-pdf-icon svg:where([data-page="index"], [data-page="index"] *){
  width:90px;
  height:90px;
}
.toowie-product .legal-pdf-download-copy:where([data-page="index"], [data-page="index"] *){
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
.toowie-product .legal-pdf-download-copy small:where([data-page="index"], [data-page="index"] *){
  color:#5d7390;
  font-size:11px;
}
.toowie-product .legal-pdf-download-copy strong:where([data-page="index"], [data-page="index"] *){
  color:#104e8b;
  font-size:13px;
}
.toowie-product .legal-document-date:where([data-page="index"], [data-page="index"] *){
  min-width:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  text-align:left;
  justify-self:end;
}
.toowie-product .legal-document-date > strong:where([data-page="index"], [data-page="index"] *){
  display:block;
  margin-bottom:18px;
  color:#104e8b;
  font-size:18px;
  font-weight:900;
}
.toowie-product .legal-document-meta:where([data-page="index"], [data-page="index"] *){
  display:grid;
  grid-template-columns:minmax(110px,max-content) 12px minmax(0,1fr);
  gap:8px 12px;
  margin:0;
}
.toowie-product .legal-document-meta > div:where([data-page="index"], [data-page="index"] *){
  display:contents;
}
.toowie-product .legal-document-meta dt:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-document-meta dd:where([data-page="index"], [data-page="index"] *){
  margin:0;
  font-size:14px;
  line-height:1.4;
}
.toowie-product .legal-document-meta dt:where([data-page="index"], [data-page="index"] *){
  grid-column:1;
  color:#104e8b;
  font-weight:800;
}
.toowie-product .legal-document-meta dd:where([data-page="index"], [data-page="index"] *){
  grid-column:3;
  color:#104e8b;
}
.toowie-product .legal-document-meta > div:where([data-page="index"], [data-page="index"] *)::before{
  content:":";
  grid-column:2;
  color:#7b8ba0;
}
.toowie-product .legal-document-meta a:where([data-page="index"], [data-page="index"] *){
  color:#104e8b;
}
.toowie-product .legal-sources:where([data-page="index"], [data-page="index"] *){
  width:min(1120px,100%);
  margin:46px auto 0;
}
.toowie-product .legal-sources h2:where([data-page="index"], [data-page="index"] *){
  margin:0 0 18px;
  text-align:center;
  color:#104e8b;
  font-size:clamp(34px,4.6vw,60px);
  font-weight:900;
  letter-spacing:-.04em;
}
.toowie-product .legal-sources-card:where([data-page="index"], [data-page="index"] *){
  padding:28px 30px;
  border:1px solid #cad8df;
  border-radius:8px;
  background:#edf4f6;
  box-shadow:0 12px 28px rgba(15,23,42,.07);
}
.toowie-product .legal-source-entry:where([data-page="index"], [data-page="index"] *){
  color:#104e8b;
  font-size:12px;
  line-height:1.6;
}
.toowie-product .legal-source-entry + .legal-source-entry:where([data-page="index"], [data-page="index"] *){
  margin-top:16px;
}
.toowie-product .legal-source-entry strong:where([data-page="index"], [data-page="index"] *){
  display:inline-block;
  margin-bottom:2px;
  font-size:15px;
  font-weight:800;
}
.toowie-product .legal-source-entry a:where([data-page="index"], [data-page="index"] *){
  color:#2563eb;
  text-decoration:underline;
  text-underline-offset:2px;
}
@media(max-width:760px){
  .toowie-product .legal-page .nav:where([data-page="index"], [data-page="index"] *){
    height:72px;
  }
  .toowie-product .legal-page .brand span:where([data-page="index"], [data-page="index"] *){
    font-size:14px;
  }
  .toowie-product .legal-document-section:where([data-page="index"], [data-page="index"] *){
    padding:32px 0 48px;
  }
  .toowie-product .legal-document:where([data-page="index"], [data-page="index"] *){
    padding:34px 22px 40px;
    border-radius:13px;
  }
  .toowie-product .legal-document-head:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr;
    gap:18px;
    padding-bottom:26px;
    margin-bottom:28px;
  }
  .toowie-product .legal-document-head p:where([data-page="index"], [data-page="index"] *){
    font-size:14px;
  }
  .toowie-product .legal-document-date:where([data-page="index"], [data-page="index"] *){
    width:max-content;
    min-width:0;
    text-align:left;
  }
  .toowie-product .legal-document-body h2:where([data-page="index"], [data-page="index"] *){
    margin-top:32px;
    font-size:19px;
  }
  .toowie-product .legal-document-body p:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-document-body li:where([data-page="index"], [data-page="index"] *){
    font-size:13px;
    line-height:1.72;
  }
}

/* --------------------------------------------------------------------------
   Mobile hardening – ausschließlich kleine Viewports, Desktop bleibt unberührt
   -------------------------------------------------------------------------- */
.toowie-product .mobile-nav-toggle:where([data-page="index"], [data-page="index"] *),.toowie-product .mobile-nav-panel:where([data-page="index"], [data-page="index"] *){
  display:none;
}

/* Mobile Dropdowns werden per Klick im Hamburger-Menü geöffnet/geschlossen. */
.toowie-product .mobile-nav-panel .nav-dropdown-menu[hidden]:where([data-page="index"], [data-page="index"] *){
  display:none !important;
}

/* Desktop :hover/:focus-within verschiebt Dropdowns um -50 %. Im mobilen
   Hamburger-Menü muss das Untermenü stattdessen im normalen Dokumentfluss bleiben. */
.toowie-product .mobile-nav-panel .nav-dropdown:hover .nav-dropdown-menu:where([data-page="index"], [data-page="index"] *),.toowie-product .mobile-nav-panel .nav-dropdown:focus-within .nav-dropdown-menu:where([data-page="index"], [data-page="index"] *){
  transform:none !important;
}

.toowie-product .mobile-nav-panel .nav-dropdown:not(.is-mobile-submenu-open) .nav-dropdown-arrow:where([data-page="index"], [data-page="index"] *){
  transform:translateY(-1px) !important;
}

.toowie-product .mobile-nav-panel .nav-dropdown.is-mobile-submenu-open .nav-dropdown-arrow:where([data-page="index"], [data-page="index"] *){
  transform:translateY(-1px) rotate(180deg) !important;
}

@media(max-width:760px){
  .toowie-product:where([data-page="index"], [data-page="index"] *),.toowie-product:where([data-page="index"], [data-page="index"] *){
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .toowie-product .mobile-nav-open:where([data-page="index"], [data-page="index"] *){
    overflow:hidden;
  }

  .toowie-product .shell:where([data-page="index"], [data-page="index"] *){
    width:calc(100% - 28px);
    max-width:1180px;
  }

  .toowie-product .shell:where([data-page="index"], [data-page="index"] *),.toowie-product .hero-grid:where([data-page="index"], [data-page="index"] *),.toowie-product .hero-copy:where([data-page="index"], [data-page="index"] *),.toowie-product .hero-visual:where([data-page="index"], [data-page="index"] *),.toowie-product .section-head:where([data-page="index"], [data-page="index"] *),.toowie-product .split-head:where([data-page="index"], [data-page="index"] *),.toowie-product .phase-overview-box:where([data-page="index"], [data-page="index"] *),.toowie-product .phase-detail:where([data-page="index"], [data-page="index"] *),.toowie-product .phase-detail-copy:where([data-page="index"], [data-page="index"] *),.toowie-product .objection-showcase:where([data-page="index"], [data-page="index"] *),.toowie-product .final-card:where([data-page="index"], [data-page="index"] *),.toowie-product .final-copy:where([data-page="index"], [data-page="index"] *),.toowie-product .final-actions:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-hero-grid:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-hero-visual:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-feature-row:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-feature-copy:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-action-visual:where([data-page="index"], [data-page="index"] *),.toowie-product .features-overview-grid:where([data-page="index"], [data-page="index"] *),.toowie-product .features-overview-visual:where([data-page="index"], [data-page="index"] *),.toowie-product .feature-detail-shell:where([data-page="index"], [data-page="index"] *),.toowie-product .feature-detail-top:where([data-page="index"], [data-page="index"] *),.toowie-product .feature-detail-copy:where([data-page="index"], [data-page="index"] *),.toowie-product .feature-detail-rail:where([data-page="index"], [data-page="index"] *),.toowie-product .rejection-intro:where([data-page="index"], [data-page="index"] *),.toowie-product .rejection-intro-copy:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-document:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-document-head:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-document-body:where([data-page="index"], [data-page="index"] *){
    min-width:0;
    max-width:100%;
  }

  .toowie-product h1:where([data-page="index"], [data-page="index"] *),.toowie-product h2:where([data-page="index"], [data-page="index"] *),.toowie-product h3:where([data-page="index"], [data-page="index"] *),.toowie-product p:where([data-page="index"], [data-page="index"] *),.toowie-product li:where([data-page="index"], [data-page="index"] *),.toowie-product a:where([data-page="index"], [data-page="index"] *),.toowie-product b:where([data-page="index"], [data-page="index"] *),.toowie-product strong:where([data-page="index"], [data-page="index"] *),.toowie-product small:where([data-page="index"], [data-page="index"] *),.toowie-product span:where([data-page="index"], [data-page="index"] *){
    overflow-wrap:break-word;
    word-break:normal;
  }

  /* Mobile Navigation */
  .toowie-product .nav:where([data-page="index"], [data-page="index"] *){
    position:relative;
    height:72px;
    gap:12px;
  }

  .toowie-product .nav > .brand:where([data-page="index"], [data-page="index"] *){
    min-width:0;
    max-width:calc(100% - 54px);
  }

  .toowie-product .nav > .brand span:where([data-page="index"], [data-page="index"] *){
    min-width:0;
    font-size:14px;
    line-height:1.2;
  }

  .toowie-product .mobile-nav-toggle:where([data-page="index"], [data-page="index"] *){
    appearance:none;
    width:42px;
    height:42px;
    flex:0 0 42px;
    margin-left:auto;
    padding:10px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:12px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    gap:5px;
    color:#fff;
    background:rgba(255,255,255,.08);
    cursor:pointer;
  }

  .toowie-product .mobile-nav-toggle span:where([data-page="index"], [data-page="index"] *){
    display:block;
    width:100%;
    height:2px;
    border-radius:999px;
    background:currentColor;
    transform-origin:center;
    transition:transform .18s ease,opacity .18s ease;
  }

  .toowie-product .nav.is-mobile-open .mobile-nav-toggle span:nth-child(1):where([data-page="index"], [data-page="index"] *){transform:translateY(7px) rotate(45deg)}
  .toowie-product .nav.is-mobile-open .mobile-nav-toggle span:nth-child(2):where([data-page="index"], [data-page="index"] *){opacity:0}
  .toowie-product .nav.is-mobile-open .mobile-nav-toggle span:nth-child(3):where([data-page="index"], [data-page="index"] *){transform:translateY(-7px) rotate(-45deg)}

  .toowie-product .mobile-nav-panel:where([data-page="index"], [data-page="index"] *){
    position:absolute;
    top:64px;
    left:0;
    right:0;
    z-index:80;
    max-height:calc(100dvh - 82px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:10px;
    border:1px solid rgba(198,154,87,.36);
    border-radius:16px;
    background:rgba(5,18,39,.985);
    box-shadow:0 24px 56px rgba(0,0,0,.34);
  }

  .toowie-product .nav.is-mobile-open .mobile-nav-panel:where([data-page="index"], [data-page="index"] *){
    display:block;
  }

  .toowie-product .mobile-nav-panel .nav-links:where([data-page="index"], [data-page="index"] *){
    display:grid !important;
    align-items:stretch;
    gap:4px;
    width:100%;
    color:#fff;
    font-size:14px;
  }

  .toowie-product .mobile-nav-panel .nav-links > a:where([data-page="index"], [data-page="index"] *),.toowie-product .mobile-nav-panel .nav-dropdown-trigger:where([data-page="index"], [data-page="index"] *){
    width:100%;
    min-height:44px;
    padding:11px 12px;
    justify-content:space-between;
    border-radius:10px;
    white-space:normal;
  }

  .toowie-product .mobile-nav-panel .nav-dropdown:where([data-page="index"], [data-page="index"] *){
    display:block;
    width:100%;
  }

  .toowie-product .mobile-nav-panel .nav-dropdown-menu:where([data-page="index"], [data-page="index"] *){
    position:static;
    width:100%;
    min-width:0;
    margin:0;
    padding:0 0 4px 14px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    opacity:1;
    visibility:visible;
    transform:none;
  }

  .toowie-product .mobile-nav-panel .nav-dropdown-menu:where([data-page="index"], [data-page="index"] *):before{display:none}

  .toowie-product .mobile-nav-panel .nav-dropdown-menu a:where([data-page="index"], [data-page="index"] *){
    min-height:40px;
    display:flex;
    align-items:center;
    padding:9px 12px;
    color:rgba(255,255,255,.72);
    white-space:normal;
  }

  .toowie-product .mobile-nav-panel .nav-dropdown-menu a:hover:where([data-page="index"], [data-page="index"] *),.toowie-product .mobile-nav-panel .nav-dropdown-menu a:focus-visible:where([data-page="index"], [data-page="index"] *){
    color:#fff;
    background:rgba(255,255,255,.08);
  }

  .toowie-product .mobile-nav-panel .mobile-nav-login:where([data-page="index"], [data-page="index"] *){
    width:100%;
    min-height:46px;
    margin-top:8px;
    display:flex !important;
  }

  /* Hero: keine negativen Ränder oder abgeschnittene Inhalte auf Handys */
  .toowie-product .hero:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-hero:where([data-page="index"], [data-page="index"] *){
    padding-top:116px;
    padding-bottom:64px;
  }

  .toowie-product .hero-grid:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-grid:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-grid:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr !important;
    gap:34px !important;
  }

  .toowie-product .hero h1:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero h1:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-hero h1:where([data-page="index"], [data-page="index"] *){
    max-width:100%;
    font-size:clamp(36px,11vw,45px);
    line-height:1.02;
    letter-spacing:-.045em;
  }

  .toowie-product .hero-subline:where([data-page="index"], [data-page="index"] *){
    max-width:100%;
    font-size:18px;
    line-height:1.4;
  }

  .toowie-product .hero-lead:where([data-page="index"], [data-page="index"] *){
    max-width:100%;
    font-size:16px;
    line-height:1.62;
  }

  .toowie-product .hero-actions:where([data-page="index"], [data-page="index"] *){
    width:100%;
    gap:10px;
  }

  .toowie-product .hero-actions .btn:where([data-page="index"], [data-page="index"] *){
    width:100%;
    min-height:50px;
    height:auto;
    padding:12px 16px;
    text-align:center;
    white-space:normal;
  }

  .toowie-product .hero-points:where([data-page="index"], [data-page="index"] *){
    width:100%;
    grid-template-columns:1fr;
    gap:10px;
  }

  .toowie-product .hero-visual:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-visual:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-visual:where([data-page="index"], [data-page="index"] *){
    width:100%;
    margin:28px 0 0 !important;
  }

  .toowie-product .hero-browser:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-browser:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-browser:where([data-page="index"], [data-page="index"] *){
    width:100% !important;
    max-width:100%;
    transform:none !important;
    overflow:hidden;
    border-radius:16px;
  }

  .toowie-product .hero-scroll-area:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-scroll-area:where([data-page="index"], [data-page="index"] *){
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .toowie-product .browser-bar:where([data-page="index"], [data-page="index"] *){
    height:auto;
    min-height:40px;
    padding:7px 9px;
    gap:6px 9px;
    flex-wrap:wrap;
  }

  .toowie-product .browser-dots:where([data-page="index"], [data-page="index"] *){flex:0 0 auto}

  .toowie-product .browser-label:where([data-page="index"], [data-page="index"] *){
    min-width:0;
    flex:1 1 120px;
    font-size:9px;
    line-height:1.25;
  }

  .toowie-product .browser-tag:where([data-page="index"], [data-page="index"] *),.toowie-product .live-pill:where([data-page="index"], [data-page="index"] *){
    flex:0 0 auto;
    margin-left:auto;
    white-space:nowrap;
  }

  /* Allgemeine Bereiche und Karten */
  .toowie-product .problem-strip:where([data-page="index"], [data-page="index"] *),.toowie-product .section-block:where([data-page="index"], [data-page="index"] *){
    padding:62px 0;
  }

  .toowie-product .statement-lead h2:where([data-page="index"], [data-page="index"] *),.toowie-product .section-head h2:where([data-page="index"], [data-page="index"] *),.toowie-product .copy-col h2:where([data-page="index"], [data-page="index"] *),.toowie-product .closing-copy h2:where([data-page="index"], [data-page="index"] *),.toowie-product .objection-copy h2:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .phase-detail-copy h2:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-feature-copy h2:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .feature-detail-copy h2:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page #rejection-tracker .rejection-intro-copy h2:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .placeholder-copy h2:where([data-page="index"], [data-page="index"] *){
    max-width:100%;
    font-size:clamp(30px,9.5vw,34px);
    line-height:1.08;
    letter-spacing:-.035em;
  }

  .toowie-product .section-head:where([data-page="index"], [data-page="index"] *),.toowie-product .split-head:where([data-page="index"], [data-page="index"] *){
    width:100%;
    margin-bottom:32px;
  }

  .toowie-product .section-head p:where([data-page="index"], [data-page="index"] *),.toowie-product .copy-col>p:where([data-page="index"], [data-page="index"] *),.toowie-product .closing-copy>p:where([data-page="index"], [data-page="index"] *){
    max-width:100%;
    font-size:15px;
    line-height:1.68;
  }

  .toowie-product .phase-overview-box:where([data-page="index"], [data-page="index"] *){
    width:100%;
    padding:0;
  }

  .toowie-product .conversation-flow:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr;
    gap:10px;
  }

  .toowie-product #gespraech .phase-card:where([data-page="index"], [data-page="index"] *){
    width:100%;
    min-height:0 !important;
    padding:20px;
  }

  .toowie-product #gespraech .phase-detail:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .objection-showcase.phase-detail:where([data-page="index"], [data-page="index"] *){
    width:100%;
    grid-template-columns:1fr;
    padding:58px 0;
    gap:26px;
  }

  .toowie-product #gespraech .phase-detail-browser:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .phase-detail-browser-focus:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .phase-detail-browser-interest:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .phase-detail-browser-pan:where([data-page="index"], [data-page="index"] *){
    width:100%;
    max-width:100%;
  }

  .toowie-product #gespraech .phase-detail-browser-focus:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .phase-detail-browser-interest:where([data-page="index"], [data-page="index"] *){
    height:clamp(260px,105vw,390px);
  }

  .toowie-product #gespraech .phase-detail-browser-pan-opener img:where([data-page="index"], [data-page="index"] *){
    width:max(760px,100%);
  }

  .toowie-product .check-list:where([data-page="index"], [data-page="index"] *){
    width:100%;
    max-width:100%;
  }

  .toowie-product .check-list li:where([data-page="index"], [data-page="index"] *){
    min-width:0;
    align-items:flex-start;
  }

  /* Schwebende Phasennavigation bleibt vollständig erreichbar, ohne Seiten-Overflow */
  .toowie-product .phase-floating-nav:where([data-page="index"], [data-page="index"] *){
    left:8px;
    right:8px;
    width:auto;
    max-width:none;
    justify-content:flex-start;
    transform:translateY(12px);
    padding:0 1px;
  }

  .toowie-product .phase-floating-nav.is-visible:where([data-page="index"], [data-page="index"] *){
    transform:none;
  }

  .toowie-product .mobile-nav-open .phase-floating-nav:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    pointer-events:none;
  }

  /* Lead Manager */
  .toowie-product .lead-manager-page .lead-hero-card:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-akquise:where([data-page="index"], [data-page="index"] *){
    position:relative;
    inset:auto;
    width:100%;
    max-width:100%;
    margin:12px 0 0;
    transform:none !important;
  }

  .toowie-product .lead-manager-page .lead-feature-row:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr;
    width:100%;
    gap:26px;
    padding:58px 0;
  }

  .toowie-product .lead-manager-page .lead-feature-copy:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-feature-browser:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-action-visual:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-action-shot:where([data-page="index"], [data-page="index"] *){
    width:100%;
    max-width:100%;
  }

  .toowie-product .lead-manager-page .lead-feature-crop:where([data-page="index"], [data-page="index"] *){
    height:clamp(260px,105vw,390px);
  }

  .toowie-product .lead-manager-page .lead-action-crop:where([data-page="index"], [data-page="index"] *){
    height:clamp(145px,47vw,190px);
  }

  .toowie-product .lead-demo-stage:where([data-page="index"], [data-page="index"] *){
    width:100%;
    padding-right:0;
  }

  .toowie-product .lead-demo-pins:where([data-page="index"], [data-page="index"] *){
    width:100%;
    grid-template-columns:1fr;
  }

  .toowie-product .lead-demo-pin:where([data-page="index"], [data-page="index"] *){
    width:100%;
    min-width:0;
  }

  /* Funktionen & Extras: Callouts nicht mehr absolut über dem Screenshot stapeln */
  .toowie-product .features-page .features-overview-visual:where([data-page="index"], [data-page="index"] *){
    padding-bottom:0;
  }

  .toowie-product .features-page .features-overview-scroll-area:where([data-page="index"], [data-page="index"] *){
    width:100%;
    max-width:100%;
    height:min(430px,62vh);
    min-height:300px;
  }

  .toowie-product .features-page .features-overview-shot-track:where([data-page="index"], [data-page="index"] *){
    width:100%;
    padding:12px;
    gap:26px;
  }

  .toowie-product .features-page .features-overview-nav:where([data-page="index"], [data-page="index"] *){
    position:static;
    width:100%;
    height:auto;
    margin-top:12px;
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    align-content:stretch;
    pointer-events:auto;
  }

  .toowie-product .features-page .features-overview-nav-card:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-nav-placeholders:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-nav-rejection:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-nav-editmode:where([data-page="index"], [data-page="index"] *){
    position:static;
    width:100%;
    max-width:100%;
    min-height:0;
    margin:0;
    padding:11px 12px;
    transform:none !important;
  }

  .toowie-product .features-page .features-overview-nav-card small:where([data-page="index"], [data-page="index"] *){
    display:block;
    margin-top:2px;
    line-height:1.35;
  }

  .toowie-product .features-page .team-grid:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .feature-detail-top:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page #rejection-tracker .rejection-intro:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr;
    width:100%;
    gap:26px;
  }

  .toowie-product .features-page .team-grid article:where([data-page="index"], [data-page="index"] *){
    width:100%;
    min-width:0;
    height:auto;
  }

  .toowie-product .features-page .team-option-card:where([data-page="index"], [data-page="index"] *){
    padding-bottom:70px !important;
  }

  .toowie-product .features-page .team-card-cta:where([data-page="index"], [data-page="index"] *){
    left:20px;
    right:20px;
    bottom:18px;
    width:auto;
    text-align:left;
  }

  .toowie-product .features-page .feature-detail-rail:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page #rejection-tracker .rejection-intro-copy:where([data-page="index"], [data-page="index"] *){
    width:100%;
    padding-left:16px;
  }

  .toowie-product .features-page .feature-detail-rail article:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page #rejection-tracker .rejection-detail-rail article:where([data-page="index"], [data-page="index"] *){
    min-width:0;
    grid-template-columns:38px minmax(0,1fr);
  }

  .toowie-product .features-page .placeholder-detail-rail article:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr;
  }

  .toowie-product .features-page .placeholder-detail-rail .feature-detail-icon:where([data-page="index"], [data-page="index"] *){
    max-width:100%;
    white-space:normal;
  }

  .toowie-product .features-page .feature-detail-browser:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .rejection-browser:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .placeholder-browser:where([data-page="index"], [data-page="index"] *){
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  /* Abschlussbereich */
  .toowie-product .final-cta:where([data-page="index"], [data-page="index"] *){
    padding:62px 0;
  }

  .toowie-product .final-card:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr;
    gap:26px;
    padding:0;
  }

  .toowie-product .final-copy h2:where([data-page="index"], [data-page="index"] *){
    max-width:100%;
    font-size:clamp(32px,10vw,39px);
    line-height:1.08;
  }

  .toowie-product .final-benefits:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr;
    width:100%;
  }

  .toowie-product .final-benefits span:where([data-page="index"], [data-page="index"] *){
    width:100%;
    max-width:100%;
    align-items:center;
  }

  .toowie-product .final-actions:where([data-page="index"], [data-page="index"] *){
    width:100%;
    padding:22px 18px;
  }

  .toowie-product .final-cta-button:where([data-page="index"], [data-page="index"] *){
    width:100%;
    height:auto;
    min-height:54px;
    padding:12px 16px;
    white-space:normal;
  }

  /* Footer */
  .toowie-product .home-footer-compact .home-footer-company-row:where([data-page="index"], [data-page="index"] *),.toowie-product .home-footer-compact .home-footer-company-block:where([data-page="index"], [data-page="index"] *),.toowie-product .home-footer-compact .home-footer-company-brand:where([data-page="index"], [data-page="index"] *),.toowie-product .home-footer-compact .home-footer-company-line:where([data-page="index"], [data-page="index"] *),.toowie-product .home-footer-compact .home-footer-contact-row:where([data-page="index"], [data-page="index"] *),.toowie-product .home-footer-compact .home-footer-inline-contact:where([data-page="index"], [data-page="index"] *),.toowie-product .home-footer-compact .home-footer-bottom:where([data-page="index"], [data-page="index"] *){
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .toowie-product .home-footer-compact .home-footer-contact-row:where([data-page="index"], [data-page="index"] *){
    margin-left:0;
  }

  .toowie-product .home-footer-compact .home-footer-inline-contact strong:where([data-page="index"], [data-page="index"] *){
    white-space:normal;
    overflow-wrap:anywhere;
  }

  .toowie-product .home-footer-compact .footer-legal:where([data-page="index"], [data-page="index"] *){
    width:100%;
    gap:12px 16px;
  }

  /* Rechtliche Seiten */
  .toowie-product .legal-document:where([data-page="index"], [data-page="index"] *){
    width:100%;
    padding:30px 18px 36px;
    overflow:hidden;
  }

  .toowie-product .legal-document-head h1:where([data-page="index"], [data-page="index"] *){
    max-width:100%;
    font-size:clamp(27px,9vw,34px);
    line-height:1.08;
    letter-spacing:-.035em;
  }

  .toowie-product .legal-document-date:where([data-page="index"], [data-page="index"] *){
    width:auto;
    max-width:100%;
  }

  .toowie-product .legal-document .legal-contact:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-document .legal-note:where([data-page="index"], [data-page="index"] *){
    padding:14px 15px;
  }

  .toowie-product .legal-document .legal-table-wrap:where([data-page="index"], [data-page="index"] *){
    width:100%;
    max-width:100%;
    -webkit-overflow-scrolling:touch;
  }
}

@media(max-width:380px){
  .toowie-product .shell:where([data-page="index"], [data-page="index"] *){width:calc(100% - 22px)}

  .toowie-product .nav > .brand span:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .brand span:where([data-page="index"], [data-page="index"] *){
    font-size:12.5px;
  }

  .toowie-product .brand-logo:where([data-page="index"], [data-page="index"] *){
    width:28px;
    height:28px;
    flex-basis:28px;
  }

  .toowie-product .hero h1:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero h1:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-hero h1:where([data-page="index"], [data-page="index"] *){
    font-size:34px;
  }

  .toowie-product .eyebrow:where([data-page="index"], [data-page="index"] *){
    max-width:100%;
    font-size:10px;
    line-height:1.3;
  }

  .toowie-product .browser-bar:where([data-page="index"], [data-page="index"] *){
    gap:5px 7px;
  }

  .toowie-product .browser-label:where([data-page="index"], [data-page="index"] *){
    flex-basis:100px;
    font-size:8px;
  }

  .toowie-product .live-pill:where([data-page="index"], [data-page="index"] *),.toowie-product .browser-tag:where([data-page="index"], [data-page="index"] *){
    font-size:8px;
    padding:4px 6px;
  }

  .toowie-product .phase-floating-link:where([data-page="index"], [data-page="index"] *){
    min-height:50px;
    padding-left:7px;
    padding-right:7px;
  }

  .toowie-product .final-actions:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-document:where([data-page="index"], [data-page="index"] *){
    padding-left:15px;
    padding-right:15px;
  }
}
/* Hero-Callouts: Lift über die eigenständige translate-Eigenschaft.
   Dadurch kollidiert der Hover nicht mit dem transform der Hero-Einblendanimation. */
@media (min-width:761px) and (hover:hover) and (pointer:fine){
  .toowie-product .js .hero-visual.is-visible .float-card.is-interactive:where([data-page="index"], [data-page="index"] *),.toowie-product .js .hero-visual.is-visible .features-overview-nav-card:where([data-page="index"], [data-page="index"] *){
    translate:0 0;
    transition-property:opacity,transform,translate,box-shadow,border-color,background;
    transition-duration:.42s,.42s,.22s,.22s,.22s,.22s;
    transition-timing-function:ease,cubic-bezier(.22,1,.36,1),ease,ease,ease,ease;
    transition-delay:1.88s,1.88s,0s,0s,0s,0s;
  }

  .toowie-product .js .hero-visual.is-visible .float-card.is-interactive:hover:where([data-page="index"], [data-page="index"] *),.toowie-product .js .hero-visual.is-visible .features-overview-nav-card:hover:where([data-page="index"], [data-page="index"] *){
    translate:0 -7px;
  }
}


/* Akquise-Manager: Textseiten sofort sichtbar, nur Produktbilder/CTA-Box animieren. */
@media(prefers-reduced-motion:no-preference){
  /* Gesprächsphasen: Überschrift, Beschreibung und Checkpunkte ohne Reveal. */
  .toowie-product .js #gatekeeper .phase-detail-copy.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js #opener .phase-detail-copy.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js #interesse-vertiefen .phase-detail-copy.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js #abschluss .phase-detail-copy.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
  }

  .toowie-product .js #gatekeeper .phase-detail-copy.reveal .check-list li:where([data-page="index"], [data-page="index"] *),.toowie-product .js #opener .phase-detail-copy.reveal .check-list li:where([data-page="index"], [data-page="index"] *),.toowie-product .js #interesse-vertiefen .phase-detail-copy.reveal .check-list li:where([data-page="index"], [data-page="index"] *),.toowie-product .js #abschluss .phase-detail-copy.reveal .check-list li:where([data-page="index"], [data-page="index"] *),.toowie-product .js #gatekeeper .phase-detail-copy.reveal.is-visible .check-list li:where([data-page="index"], [data-page="index"] *),.toowie-product .js #opener .phase-detail-copy.reveal.is-visible .check-list li:where([data-page="index"], [data-page="index"] *),.toowie-product .js #interesse-vertiefen .phase-detail-copy.reveal.is-visible .check-list li:where([data-page="index"], [data-page="index"] *),.toowie-product .js #abschluss .phase-detail-copy.reveal.is-visible .check-list li:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    transition:none;
  }

  /* Einwandbehandlung: Text sofort, nur Screenshot weiterhin animiert. */
  .toowie-product .js .phase-overview-box .objection-showcase.reveal .objection-copy:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
  }

  /* Finaler CTA: linke Überschriftsseite sofort, nur rechte Aktionsbox animiert. */
  .toowie-product .js #gespraech ~ #anfrage .final-card.reveal .final-copy:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
  }
  .toowie-product .js #gespraech ~ #anfrage .final-card.reveal .final-benefits span:where([data-page="index"], [data-page="index"] *),.toowie-product .js #gespraech ~ #anfrage .final-card.reveal.is-visible .final-benefits span:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* Akquise-Manager: Überschriften bewegen sich leicht hinein, Screenshots blenden nur weich ein. */
@media(prefers-reduced-motion:no-preference){
  /* Der restliche Text bleibt direkt sichtbar; nur die H2 erhält einen Entrance-Effekt. */
  .toowie-product .js #gatekeeper .phase-detail-copy.reveal h2:where([data-page="index"], [data-page="index"] *),.toowie-product .js #abschluss .phase-detail-copy.reveal h2:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateX(-30px) translateY(8px);
    transition:opacity .76s cubic-bezier(.22,1,.36,1),transform .76s cubic-bezier(.22,1,.36,1);
  }
  .toowie-product .js #opener .phase-detail-copy.reveal h2:where([data-page="index"], [data-page="index"] *),.toowie-product .js #interesse-vertiefen .phase-detail-copy.reveal h2:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateX(30px) translateY(8px);
    transition:opacity .76s cubic-bezier(.22,1,.36,1),transform .76s cubic-bezier(.22,1,.36,1);
  }
  .toowie-product .js #gatekeeper .phase-detail-copy.reveal.is-visible h2:where([data-page="index"], [data-page="index"] *),.toowie-product .js #opener .phase-detail-copy.reveal.is-visible h2:where([data-page="index"], [data-page="index"] *),.toowie-product .js #interesse-vertiefen .phase-detail-copy.reveal.is-visible h2:where([data-page="index"], [data-page="index"] *),.toowie-product .js #abschluss .phase-detail-copy.reveal.is-visible h2:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
  }

  /* Einwandbehandlung: Überschrift bewegt sich leicht hinein. */
  .toowie-product .js .phase-overview-box .objection-showcase.reveal .objection-copy h2:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateX(-30px) translateY(8px);
    transition:opacity .76s cubic-bezier(.22,1,.36,1),transform .76s cubic-bezier(.22,1,.36,1);
  }
  .toowie-product .js .phase-overview-box .objection-showcase.reveal.is-visible .objection-copy h2:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
  }

  /* Produktansichten: keine seitliche Bewegung und kein Blur – nur ein weiches Fade. */
  .toowie-product .js #gatekeeper .phase-detail-browser.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js #opener .phase-detail-browser.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js #interesse-vertiefen .phase-detail-browser.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js #abschluss .phase-detail-browser.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js .phase-overview-box .objection-showcase.reveal .compact-browser:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:none;
    filter:none;
    transition:opacity .84s .12s ease;
  }
  .toowie-product .js #gatekeeper .phase-detail-browser.reveal.is-visible:where([data-page="index"], [data-page="index"] *),.toowie-product .js #opener .phase-detail-browser.reveal.is-visible:where([data-page="index"], [data-page="index"] *),.toowie-product .js #interesse-vertiefen .phase-detail-browser.reveal.is-visible:where([data-page="index"], [data-page="index"] *),.toowie-product .js #abschluss .phase-detail-browser.reveal.is-visible:where([data-page="index"], [data-page="index"] *),.toowie-product .js .phase-overview-box .objection-showcase.reveal.is-visible .compact-browser:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:none;
  }

  /* CTA: große Überschrift bewegt sich hinein, Anfrage-Box blendet anschließend nur ein. */
  .toowie-product .js #gespraech ~ #anfrage .final-card.reveal .final-copy h2:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateX(-30px) translateY(8px);
    transition:opacity .76s cubic-bezier(.22,1,.36,1),transform .76s cubic-bezier(.22,1,.36,1);
  }
  .toowie-product .js #gespraech ~ #anfrage .final-card.reveal.is-visible .final-copy h2:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
  }
  .toowie-product .js #gespraech ~ #anfrage .final-card.reveal .final-actions:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:none;
    filter:none;
    transition:opacity .86s .12s ease;
  }
  .toowie-product .js #gespraech ~ #anfrage .final-card.reveal.is-visible .final-actions:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:none;
  }
}

/* Lead Manager + Funktionen & Extras: Überschrift mit leichtem Slide, visuelle Boxen nur als Fade. */
@media(prefers-reduced-motion:no-preference){
  /* Lead Manager – ab "Leads anlegen und bearbeiten" bis CTA. */
  .toowie-product .js .lead-manager-page #kontakte-erfassen .lead-feature-copy.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js .lead-manager-page #csv-import .lead-feature-copy.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js .lead-manager-page #kontakt-aktionen .lead-feature-copy.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
  }

  .toowie-product .js .lead-manager-page #kontakte-erfassen .lead-feature-copy.reveal h2:where([data-page="index"], [data-page="index"] *),.toowie-product .js .lead-manager-page #kontakt-aktionen .lead-feature-copy.reveal h2:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateX(-30px) translateY(8px);
    transition:opacity .76s cubic-bezier(.22,1,.36,1),transform .76s cubic-bezier(.22,1,.36,1);
  }
  .toowie-product .js .lead-manager-page #csv-import .lead-feature-copy.reveal h2:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateX(30px) translateY(8px);
    transition:opacity .76s cubic-bezier(.22,1,.36,1),transform .76s cubic-bezier(.22,1,.36,1);
  }
  .toowie-product .js .lead-manager-page #kontakte-erfassen .lead-feature-copy.reveal.is-visible h2:where([data-page="index"], [data-page="index"] *),.toowie-product .js .lead-manager-page #csv-import .lead-feature-copy.reveal.is-visible h2:where([data-page="index"], [data-page="index"] *),.toowie-product .js .lead-manager-page #kontakt-aktionen .lead-feature-copy.reveal.is-visible h2:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
  }

  .toowie-product .js .lead-manager-page #kontakte-erfassen .lead-feature-browser.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js .lead-manager-page #csv-import .lead-feature-browser.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js .lead-manager-page #kontakt-aktionen .lead-action-visual.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:none;
    filter:none;
    transition:opacity .84s .12s ease;
  }
  .toowie-product .js .lead-manager-page #kontakte-erfassen .lead-feature-browser.reveal.is-visible:where([data-page="index"], [data-page="index"] *),.toowie-product .js .lead-manager-page #csv-import .lead-feature-browser.reveal.is-visible:where([data-page="index"], [data-page="index"] *),.toowie-product .js .lead-manager-page #kontakt-aktionen .lead-action-visual.reveal.is-visible:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:none;
  }

  /* Lead-Manager-CTA: Text direkt sichtbar, H2 slidet leicht, Aktionsbox fadet. */
  .toowie-product .js .lead-manager-page #anfrage .final-card.reveal .final-copy:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
  }
  .toowie-product .js .lead-manager-page #anfrage .final-card.reveal .final-benefits span:where([data-page="index"], [data-page="index"] *),.toowie-product .js .lead-manager-page #anfrage .final-card.reveal.is-visible .final-benefits span:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    transition:none;
  }
  .toowie-product .js .lead-manager-page #anfrage .final-card.reveal .final-copy h2:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateX(-30px) translateY(8px);
    transition:opacity .76s cubic-bezier(.22,1,.36,1),transform .76s cubic-bezier(.22,1,.36,1);
  }
  .toowie-product .js .lead-manager-page #anfrage .final-card.reveal.is-visible .final-copy h2:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
  }
  .toowie-product .js .lead-manager-page #anfrage .final-card.reveal .final-actions:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:none;
    filter:none;
    transition:opacity .86s .12s ease;
  }
  .toowie-product .js .lead-manager-page #anfrage .final-card.reveal.is-visible .final-actions:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:none;
  }

  /* Funktionen & Extras – ab "Ein Skript, das sich an dich anpasst" bis CTA. */
  .toowie-product .js .features-page #anpassbar .feature-detail-copy.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js .features-page #platzhalter .feature-detail-copy.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
  }

  .toowie-product .js .features-page #anpassbar .feature-detail-copy.reveal h2:where([data-page="index"], [data-page="index"] *),.toowie-product .js .features-page #platzhalter .feature-detail-copy.reveal h2:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateX(-30px) translateY(8px);
    transition:opacity .76s cubic-bezier(.22,1,.36,1),transform .76s cubic-bezier(.22,1,.36,1);
  }
  .toowie-product .js .features-page #anpassbar .feature-detail-copy.reveal.is-visible h2:where([data-page="index"], [data-page="index"] *),.toowie-product .js .features-page #platzhalter .feature-detail-copy.reveal.is-visible h2:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
  }

  .toowie-product .js .features-page #anpassbar .feature-detail-rail.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js .features-page #anpassbar .feature-detail-browser.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js .features-page #platzhalter .feature-detail-rail.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js .features-page #platzhalter .placeholder-visual.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:none;
    filter:none;
    transition:opacity .84s .12s ease;
  }
  .toowie-product .js .features-page #anpassbar .feature-detail-rail.reveal.is-visible:where([data-page="index"], [data-page="index"] *),.toowie-product .js .features-page #anpassbar .feature-detail-browser.reveal.is-visible:where([data-page="index"], [data-page="index"] *),.toowie-product .js .features-page #platzhalter .feature-detail-rail.reveal.is-visible:where([data-page="index"], [data-page="index"] *),.toowie-product .js .features-page #platzhalter .placeholder-visual.reveal.is-visible:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:none;
  }

  /* Rejection Tracker: Überschrift rechts slidet hinein, Liste und Screenshot faden. */
  .toowie-product .js .features-page #rejection-tracker .rejection-intro.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
  }
  .toowie-product .js .features-page #rejection-tracker .rejection-intro.reveal .rejection-intro-copy:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
  }
  .toowie-product .js .features-page #rejection-tracker .rejection-intro.reveal .rejection-intro-copy h2:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateX(30px) translateY(8px);
    transition:opacity .76s cubic-bezier(.22,1,.36,1),transform .76s cubic-bezier(.22,1,.36,1);
  }
  .toowie-product .js .features-page #rejection-tracker .rejection-intro.reveal.is-visible .rejection-intro-copy h2:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
  }
  .toowie-product .js .features-page #rejection-tracker .rejection-intro.reveal .rejection-detail-rail:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:none;
    filter:none;
    transition:opacity .84s .12s ease;
  }
  .toowie-product .js .features-page #rejection-tracker .rejection-intro.reveal.is-visible .rejection-detail-rail:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:none;
  }
  .toowie-product .js .features-page #rejection-tracker .rejection-browser-wrap.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:none;
    filter:none;
    transition:opacity .84s .12s ease;
  }
  .toowie-product .js .features-page #rejection-tracker .rejection-browser-wrap.reveal.is-visible:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:none;
  }

  /* Funktionen-&-Extras-CTA wie auf der Akquise-Manager-Seite. */
  .toowie-product .js .features-page #anfrage .final-card.reveal .final-copy:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
  }
  .toowie-product .js .features-page #anfrage .final-card.reveal .final-benefits span:where([data-page="index"], [data-page="index"] *),.toowie-product .js .features-page #anfrage .final-card.reveal.is-visible .final-benefits span:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    transition:none;
  }
  .toowie-product .js .features-page #anfrage .final-card.reveal .final-copy h2:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:translateX(-30px) translateY(8px);
    transition:opacity .76s cubic-bezier(.22,1,.36,1),transform .76s cubic-bezier(.22,1,.36,1);
  }
  .toowie-product .js .features-page #anfrage .final-card.reveal.is-visible .final-copy h2:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
  }
  .toowie-product .js .features-page #anfrage .final-card.reveal .final-actions:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    transform:none;
    filter:none;
    transition:opacity .86s .12s ease;
  }
  .toowie-product .js .features-page #anfrage .final-card.reveal.is-visible .final-actions:where([data-page="index"], [data-page="index"] *){
    opacity:1;
    transform:none;
    filter:none;
  }
}

/* --------------------------------------------------------------------------
   Akquise-Manager Hero – responsive Desktop / Tablet / Handy-Querformat
   Der interaktive Screenshot bleibt erhalten, bekommt auf kleineren Viewports
   aber einen eigenen sicheren Bereich, damit Callouts und Text nicht kollidieren.
   -------------------------------------------------------------------------- */

/* Unterhalb großer Desktopbreiten den künstlichen Überhang kontrolliert zurücknehmen. */
@media (min-width:1051px) and (max-width:1859px){
  .toowie-product .hero > .shell.hero-grid:where([data-page="index"], [data-page="index"] *){
    width:min(1180px,calc(100% - 128px));
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:42px !important;
  }

  .toowie-product .hero h1:where([data-page="index"], [data-page="index"] *){
    font-size:clamp(48px,4.5vw,65px);
  }

  .toowie-product .hero-visual:where([data-page="index"], [data-page="index"] *){
    min-width:0;
    margin-right:0 !important;
  }

  .toowie-product .float-card-leads:where([data-page="index"], [data-page="index"] *){
    right:72px !important;
  }
}

@media (min-width:1051px) and (max-width:1399px){
  .toowie-product .hero-browser:where([data-page="index"], [data-page="index"] *){
    width:108% !important;
  }

  .toowie-product .float-card-call:where([data-page="index"], [data-page="index"] *),.toowie-product .float-card-flow:where([data-page="index"], [data-page="index"] *),.toowie-product .float-card-notes:where([data-page="index"], [data-page="index"] *){
    right:-16px !important;
  }
}

@media (min-width:1400px) and (max-width:1859px){
  .toowie-product .hero-browser:where([data-page="index"], [data-page="index"] *){
    width:115% !important;
  }

  .toowie-product .float-card-call:where([data-page="index"], [data-page="index"] *),.toowie-product .float-card-flow:where([data-page="index"], [data-page="index"] *),.toowie-product .float-card-notes:where([data-page="index"], [data-page="index"] *){
    right:-24px !important;
  }
}

/* Tablet / iPad: Text und Demo trennen, Demo aber vollständig interaktiv lassen. */
@media (min-width:761px) and (max-width:1050px){
  .toowie-product .hero:where([data-page="index"], [data-page="index"] *){
    padding-bottom:96px;
  }

  .toowie-product .hero > .shell.hero-grid:where([data-page="index"], [data-page="index"] *){
    width:min(1080px,calc(100% - 40px));
    grid-template-columns:1fr !important;
    gap:58px !important;
  }

  .toowie-product .hero-copy:where([data-page="index"], [data-page="index"] *){
    width:100%;
    max-width:820px;
  }

  .toowie-product .hero-visual:where([data-page="index"], [data-page="index"] *){
    width:min(820px,calc(100% - 160px));
    min-width:0;
    margin:0 auto !important;
  }

  .toowie-product .hero-browser:where([data-page="index"], [data-page="index"] *){
    width:100% !important;
    max-width:100% !important;
    transform:perspective(1600px) rotateY(-2deg) rotateX(.5deg);
    transform-origin:center center;
  }

  .toowie-product .hero-scroll-area:where([data-page="index"], [data-page="index"] *){
    max-height:min(540px,62vh) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch;
  }

  .toowie-product .hero .float-card:where([data-page="index"], [data-page="index"] *){
    max-width:218px;
    padding:9px 11px;
    gap:8px;
    font-size:10.5px;
  }

  .toowie-product .hero .float-card small:where([data-page="index"], [data-page="index"] *){
    line-height:1.3;
  }

  .toowie-product .hero .float-icon:where([data-page="index"], [data-page="index"] *),.toowie-product .hero .float-number:where([data-page="index"], [data-page="index"] *){
    width:30px;
    height:30px;
    flex:0 0 30px;
  }

  .toowie-product .float-card-call:where([data-page="index"], [data-page="index"] *),.toowie-product .float-card-flow:where([data-page="index"], [data-page="index"] *),.toowie-product .float-card-notes:where([data-page="index"], [data-page="index"] *){
    right:-68px !important;
  }

  .toowie-product .float-card-leads:where([data-page="index"], [data-page="index"] *){
    right:36px !important;
  }
}

/* Handy im Querformat: die Desktop-Demo bleibt scrollbar und anklickbar. */
@media (min-width:560px) and (max-width:760px) and (orientation:landscape){
  .toowie-product .hero:where([data-page="index"], [data-page="index"] *){
    padding-top:104px;
    padding-bottom:68px;
  }

  .toowie-product .hero > .shell.hero-grid:where([data-page="index"], [data-page="index"] *){
    gap:42px !important;
  }

  .toowie-product .hero-visual:where([data-page="index"], [data-page="index"] *){
    width:calc(100% - 128px) !important;
    max-width:620px !important;
    margin:8px auto 0 !important;
    overflow:visible;
  }

  .toowie-product .hero-browser:where([data-page="index"], [data-page="index"] *){
    width:100% !important;
    max-width:100% !important;
    overflow:hidden;
    transform:none !important;
  }

  .toowie-product .hero-scroll-area:where([data-page="index"], [data-page="index"] *){
    width:100%;
    max-width:100%;
    max-height:min(390px,72vh) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  .toowie-product .hero .float-card:where([data-page="index"], [data-page="index"] *){
    max-width:185px;
    padding:8px 9px;
    gap:7px;
    font-size:9.5px;
    border-radius:12px;
  }

  .toowie-product .hero .float-card b:where([data-page="index"], [data-page="index"] *){
    line-height:1.2;
  }

  .toowie-product .hero .float-card small:where([data-page="index"], [data-page="index"] *){
    font-size:8.5px;
    line-height:1.25;
  }

  .toowie-product .hero .float-icon:where([data-page="index"], [data-page="index"] *),.toowie-product .hero .float-number:where([data-page="index"], [data-page="index"] *){
    width:27px;
    height:27px;
    flex:0 0 27px;
    border-radius:8px;
  }

  .toowie-product .float-card-call:where([data-page="index"], [data-page="index"] *),.toowie-product .float-card-flow:where([data-page="index"], [data-page="index"] *),.toowie-product .float-card-notes:where([data-page="index"], [data-page="index"] *){
    right:-54px !important;
  }

  .toowie-product .float-card-leads:where([data-page="index"], [data-page="index"] *){
    right:18px !important;
  }
}

/* Querformat auf Handy und Tablet: Produktdemo bewusst wieder rechts neben dem Text. */
@media (min-width:620px) and (max-width:1250px) and (orientation:landscape){
  .toowie-product .hero:where([data-page="index"], [data-page="index"] *){
    padding-top:100px;
    padding-bottom:62px;
  }

  .toowie-product .hero > .shell.hero-grid:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr) !important;
    gap:24px !important;
    align-items:center;
  }

  .toowie-product .hero-copy:where([data-page="index"], [data-page="index"] *){
    width:100%;
    max-width:none;
  }

  .toowie-product .hero h1:where([data-page="index"], [data-page="index"] *){
    max-width:100%;
    margin:18px 0 18px;
    font-size:clamp(29px,4.2vw,48px);
    line-height:1;
    letter-spacing:-.045em;
  }

  .toowie-product .hero .eyebrow:where([data-page="index"], [data-page="index"] *){
    max-width:100%;
    padding:6px 8px;
    font-size:9px;
    line-height:1.2;
  }

  .toowie-product .hero-subline:where([data-page="index"], [data-page="index"] *){
    margin:-4px 0 9px;
    font-size:clamp(14px,1.8vw,17px);
    line-height:1.35;
  }

  .toowie-product .hero-lead:where([data-page="index"], [data-page="index"] *){
    font-size:13px;
    line-height:1.5;
  }

  .toowie-product .hero-actions:where([data-page="index"], [data-page="index"] *){
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    margin-top:18px;
  }

  .toowie-product .hero-actions .btn:where([data-page="index"], [data-page="index"] *){
    width:100%;
    min-height:43px;
    padding:8px 11px;
    font-size:11.5px;
  }

  .toowie-product .hero-points:where([data-page="index"], [data-page="index"] *){
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
    margin-top:16px;
    font-size:10.5px;
  }

  .toowie-product .hero-visual:where([data-page="index"], [data-page="index"] *){
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    align-self:center;
    overflow:visible;
  }

  .toowie-product .hero-browser:where([data-page="index"], [data-page="index"] *){
    width:100% !important;
    max-width:100% !important;
    transform:none !important;
    transform-origin:center center;
  }

  .toowie-product .hero-scroll-area:where([data-page="index"], [data-page="index"] *){
    max-height:min(500px,72vh) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  .toowie-product .hero .float-card:where([data-page="index"], [data-page="index"] *){
    display:flex;
    max-width:clamp(138px,18vw,185px);
    padding:7px 8px;
    gap:6px;
    border-radius:11px;
    font-size:clamp(8.5px,1vw,10px);
  }

  .toowie-product .hero .float-card small:where([data-page="index"], [data-page="index"] *){
    font-size:8px;
    line-height:1.2;
  }

  .toowie-product .hero .float-icon:where([data-page="index"], [data-page="index"] *),.toowie-product .hero .float-number:where([data-page="index"], [data-page="index"] *){
    width:26px;
    height:26px;
    flex:0 0 26px;
    border-radius:8px;
  }

  .toowie-product .float-card-call:where([data-page="index"], [data-page="index"] *),.toowie-product .float-card-flow:where([data-page="index"], [data-page="index"] *),.toowie-product .float-card-notes:where([data-page="index"], [data-page="index"] *){
    right:-10px !important;
  }

  .toowie-product .float-card-leads:where([data-page="index"], [data-page="index"] *){
    right:10px !important;
  }
}

@media (min-width:620px) and (max-width:700px) and (orientation:landscape){
  .toowie-product .hero h1:where([data-page="index"], [data-page="index"] *){
    font-size:27px;
  }
}

/* --------------------------------------------------------------------------
   Akquise-Manager Hero – zweispaltig bis einschließlich 400px
   Unter 400px bleibt die bestehende Hochformat-Mobile-Ansicht als Basis für
   die später separat gestaltete Smartphone-Version erhalten.
   -------------------------------------------------------------------------- */
@media (min-width:400px) and (max-width:1050px){
  .toowie-product .hero:where([data-page="index"], [data-page="index"] *){
    padding-top:clamp(96px,12vw,126px);
    padding-bottom:clamp(54px,7vw,82px);
  }

  .toowie-product .hero > .shell.hero-grid:where([data-page="index"], [data-page="index"] *){
    width:calc(100% - clamp(20px,4vw,40px));
    max-width:1080px;
    grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr) !important;
    gap:clamp(10px,2.2vw,24px) !important;
    align-items:center;
  }

  .toowie-product .hero-copy:where([data-page="index"], [data-page="index"] *){
    width:100%;
    max-width:none;
    min-width:0;
  }

  .toowie-product .hero .eyebrow:where([data-page="index"], [data-page="index"] *){
    max-width:100%;
    gap:clamp(4px,.8vw,7px);
    padding:clamp(4px,.65vw,6px) clamp(6px,.9vw,9px);
    font-size:clamp(7px,.9vw,9px);
    line-height:1.15;
    letter-spacing:.08em;
    white-space:normal;
  }

  .toowie-product .hero .eyebrow-dot:where([data-page="index"], [data-page="index"] *){
    width:clamp(4px,.6vw,6px);
    height:clamp(4px,.6vw,6px);
    flex:0 0 auto;
    box-shadow:0 0 0 3px rgba(34,197,94,.16);
  }

  .toowie-product .hero h1:where([data-page="index"], [data-page="index"] *){
    max-width:100%;
    margin:clamp(10px,1.7vw,18px) 0 clamp(10px,1.6vw,16px);
    font-size:clamp(22px,4.15vw,44px);
    line-height:1;
    letter-spacing:-.045em;
  }

  .toowie-product .hero-subline:where([data-page="index"], [data-page="index"] *){
    max-width:100%;
    margin:0 0 clamp(6px,1vw,9px);
    font-size:clamp(10.5px,1.55vw,16px);
    line-height:1.32;
  }

  .toowie-product .hero-lead:where([data-page="index"], [data-page="index"] *){
    max-width:100%;
    font-size:clamp(9px,1.25vw,13px);
    line-height:1.48;
  }

  .toowie-product .hero-actions:where([data-page="index"], [data-page="index"] *){
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:clamp(5px,.8vw,8px);
    margin-top:clamp(12px,1.7vw,18px);
  }

  .toowie-product .hero-actions .btn:where([data-page="index"], [data-page="index"] *){
    width:100%;
    min-height:clamp(32px,4.1vw,43px);
    height:auto;
    padding:clamp(6px,.9vw,9px) clamp(7px,1vw,11px);
    border-radius:clamp(8px,1.1vw,12px);
    font-size:clamp(8px,1.05vw,11.5px);
    line-height:1.2;
    white-space:normal;
  }

  .toowie-product .hero-points:where([data-page="index"], [data-page="index"] *){
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:clamp(4px,.7vw,7px);
    margin-top:clamp(10px,1.45vw,16px);
    font-size:clamp(7.5px,.95vw,10.5px);
    line-height:1.25;
  }

  .toowie-product .hero-points span:where([data-page="index"], [data-page="index"] *){
    gap:clamp(3px,.5vw,6px);
  }

  .toowie-product .hero-visual:where([data-page="index"], [data-page="index"] *){
    width:100% !important;
    max-width:none !important;
    min-width:0;
    margin:0 !important;
    align-self:center;
    overflow:visible;
  }

  .toowie-product .hero-browser:where([data-page="index"], [data-page="index"] *){
    width:100% !important;
    max-width:100% !important;
    transform:none !important;
    transform-origin:center center;
    border-radius:clamp(12px,1.7vw,20px);
  }

  .toowie-product .hero-scroll-area:where([data-page="index"], [data-page="index"] *){
    width:100%;
    max-width:100%;
    max-height:clamp(280px,45vw,480px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  .toowie-product .hero .browser-bar:where([data-page="index"], [data-page="index"] *){
    min-height:clamp(30px,4vw,40px);
    height:auto;
    padding:clamp(4px,.65vw,7px) clamp(5px,.85vw,9px);
    gap:clamp(4px,.7vw,8px);
  }

  .toowie-product .hero .browser-dots:where([data-page="index"], [data-page="index"] *){
    gap:3px;
  }

  .toowie-product .hero .browser-dots i:where([data-page="index"], [data-page="index"] *){
    width:clamp(5px,.7vw,8px);
    height:clamp(5px,.7vw,8px);
  }

  .toowie-product .hero .browser-label:where([data-page="index"], [data-page="index"] *){
    min-width:0;
    flex:1 1 60px;
    font-size:clamp(6px,.8vw,9px);
    line-height:1.15;
  }

  .toowie-product .hero .browser-tag:where([data-page="index"], [data-page="index"] *),.toowie-product .hero .live-pill:where([data-page="index"], [data-page="index"] *){
    padding:clamp(3px,.45vw,5px) clamp(4px,.65vw,7px);
    font-size:clamp(6px,.72vw,8px);
  }

  .toowie-product .hero .float-card:where([data-page="index"], [data-page="index"] *){
    display:flex;
    max-width:clamp(84px,14.5vw,158px);
    padding:clamp(4px,.7vw,7px) clamp(5px,.8vw,8px);
    gap:clamp(3px,.55vw,6px);
    border-radius:clamp(8px,1vw,11px);
    font-size:clamp(7px,.88vw,9.5px);
    line-height:1.15;
  }

  .toowie-product .hero .float-card b:where([data-page="index"], [data-page="index"] *){
    line-height:1.15;
  }

  .toowie-product .hero .float-card small:where([data-page="index"], [data-page="index"] *){
    margin-top:1px;
    font-size:clamp(6px,.72vw,8px);
    line-height:1.15;
  }

  .toowie-product .hero .float-icon:where([data-page="index"], [data-page="index"] *),.toowie-product .hero .float-number:where([data-page="index"], [data-page="index"] *){
    width:clamp(19px,2.5vw,26px);
    height:clamp(19px,2.5vw,26px);
    flex:0 0 clamp(19px,2.5vw,26px);
    border-radius:clamp(6px,.8vw,8px);
  }

  .toowie-product .float-card-call:where([data-page="index"], [data-page="index"] *),.toowie-product .float-card-flow:where([data-page="index"], [data-page="index"] *),.toowie-product .float-card-notes:where([data-page="index"], [data-page="index"] *){
    right:-4px !important;
  }

  .toowie-product .float-card-leads:where([data-page="index"], [data-page="index"] *){
    right:6px !important;
  }
}

/* Am unteren Ende des Bereichs Callouts kompakt halten, aber anklickbar lassen. */
@media (min-width:400px) and (max-width:519px){
  .toowie-product .hero > .shell.hero-grid:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:minmax(0,.80fr) minmax(0,1.20fr) !important;
    gap:9px !important;
  }

  .toowie-product .hero .float-card:where([data-page="index"], [data-page="index"] *){
    max-width:78px;
  }

  .toowie-product .hero .float-card small:where([data-page="index"], [data-page="index"] *){
    display:none;
  }

  .toowie-product .hero .float-icon:where([data-page="index"], [data-page="index"] *),.toowie-product .hero .float-number:where([data-page="index"], [data-page="index"] *){
    width:18px;
    height:18px;
    flex-basis:18px;
  }
}

/* --------------------------------------------------------------------------
   Akquise-Manager – Feinschliff 400–1050px
   Callout-Texte skalieren mit; Gesprächsphasen bleiben zweispaltig.
   -------------------------------------------------------------------------- */
@media (min-width:400px) and (max-width:1050px){
  /* Schwebende Screenshot-Buttons: Text nie mehr ausblenden, sondern mitskalieren. */
  .toowie-product .hero .float-card:where([data-page="index"], [data-page="index"] *){
    min-width:0;
    max-width:clamp(76px,17vw,170px);
    padding:clamp(3px,.58vw,7px) clamp(4px,.72vw,8px);
    gap:clamp(2px,.45vw,6px);
  }

  .toowie-product .hero .float-card > div:where([data-page="index"], [data-page="index"] *){
    min-width:0;
  }

  .toowie-product .hero .float-card b:where([data-page="index"], [data-page="index"] *){
    font-size:clamp(6px,1vw,9.5px);
    line-height:1.08;
    overflow-wrap:anywhere;
  }

  .toowie-product .hero .float-card small:where([data-page="index"], [data-page="index"] *){
    display:block !important;
    max-width:none;
    margin-top:1px;
    font-size:clamp(5.2px,.82vw,8px);
    line-height:1.08;
    overflow-wrap:anywhere;
  }

  .toowie-product .hero .float-icon:where([data-page="index"], [data-page="index"] *),.toowie-product .hero .float-number:where([data-page="index"], [data-page="index"] *){
    width:clamp(16px,2.25vw,25px);
    height:clamp(16px,2.25vw,25px);
    flex:0 0 clamp(16px,2.25vw,25px);
    border-radius:clamp(5px,.7vw,8px);
  }

  .toowie-product .hero .float-icon svg:where([data-page="index"], [data-page="index"] *){
    width:clamp(9px,1.2vw,14px);
    height:clamp(9px,1.2vw,14px);
  }

  /* Die Detail-Rubriken unter dem Hero bleiben bis 400px nebeneinander. */
  .toowie-product #gespraech .phase-detail:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .objection-showcase.phase-detail:where([data-page="index"], [data-page="index"] *){
    width:100%;
    grid-template-columns:minmax(0,.80fr) minmax(0,1.20fr) !important;
    gap:clamp(9px,2.6vw,34px) !important;
    align-items:center;
    padding:clamp(42px,7vw,78px) 0;
  }

  .toowie-product #gespraech .phase-detail-copy:where([data-page="index"], [data-page="index"] *){
    min-width:0;
    max-width:none;
  }

  .toowie-product #gespraech .phase-detail-reverse .phase-detail-copy:where([data-page="index"], [data-page="index"] *){
    order:2 !important;
  }

  .toowie-product #gespraech .phase-detail-reverse .phase-detail-browser:where([data-page="index"], [data-page="index"] *){
    order:1 !important;
  }

  .toowie-product #gespraech .phase-detail-copy .section-kicker:where([data-page="index"], [data-page="index"] *){
    font-size:clamp(6px,.9vw,10px);
    line-height:1.15;
    letter-spacing:.09em;
  }

  .toowie-product #gespraech .phase-detail-copy h2:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .objection-copy h2:where([data-page="index"], [data-page="index"] *){
    max-width:100%;
    margin:clamp(6px,1vw,12px) 0 clamp(7px,1.25vw,14px);
    font-size:clamp(18px,3.55vw,40px);
    line-height:1.04;
    letter-spacing:-.04em;
  }

  .toowie-product #gespraech .phase-detail-copy>p:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .objection-copy>p:where([data-page="index"], [data-page="index"] *){
    max-width:100%;
    font-size:clamp(7.5px,1.2vw,14px);
    line-height:1.48;
  }

  .toowie-product #gespraech .phase-detail-copy .check-list:where([data-page="index"], [data-page="index"] *){
    max-width:100%;
    margin-top:clamp(9px,1.7vw,21px);
    gap:clamp(5px,.9vw,11px);
  }

  .toowie-product #gespraech .phase-detail-copy .check-list li:where([data-page="index"], [data-page="index"] *){
    min-width:0;
    gap:clamp(4px,.7vw,8px);
    font-size:clamp(7px,1.05vw,12px);
    line-height:1.3;
  }

  .toowie-product #gespraech .phase-detail-copy .check-list span:where([data-page="index"], [data-page="index"] *){
    width:clamp(13px,1.8vw,20px);
    height:clamp(13px,1.8vw,20px);
    flex:0 0 clamp(13px,1.8vw,20px);
    border-radius:clamp(4px,.6vw,7px);
    font-size:clamp(6px,.85vw,9px);
  }

  .toowie-product #gespraech .phase-detail-browser:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .phase-detail-browser-focus:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .phase-detail-browser-interest:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .compact-browser:where([data-page="index"], [data-page="index"] *){
    min-width:0;
    width:100%;
    max-width:100%;
    border-radius:clamp(10px,1.5vw,18px);
  }

  .toowie-product #gespraech .phase-detail-browser-focus:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .phase-detail-browser-interest:where([data-page="index"], [data-page="index"] *){
    height:clamp(150px,34vw,410px);
  }

  .toowie-product #gespraech .phase-detail-browser-pan-opener img:where([data-page="index"], [data-page="index"] *){
    width:max(clamp(460px,68vw,760px),100%);
  }

  .toowie-product #gespraech .phase-detail-gatekeeper:where([data-page="index"], [data-page="index"] *){
    margin-top:clamp(38px,6vw,70px);
  }
}

@media (min-width:400px) and (max-width:519px){
  /* Bei sehr schmalen Breiten bleiben beide Textzeilen der Callouts sichtbar. */
  .toowie-product .hero .float-card:where([data-page="index"], [data-page="index"] *){
    max-width:76px;
    padding:3px 4px;
    gap:2px;
    border-width:1px;
  }

  .toowie-product .hero .float-card b:where([data-page="index"], [data-page="index"] *){
    font-size:5.8px;
    line-height:1.04;
  }

  .toowie-product .hero .float-card small:where([data-page="index"], [data-page="index"] *){
    display:block !important;
    font-size:4.9px;
    line-height:1.04;
  }

  .toowie-product .hero .float-icon:where([data-page="index"], [data-page="index"] *),.toowie-product .hero .float-number:where([data-page="index"], [data-page="index"] *){
    width:15px;
    height:15px;
    flex-basis:15px;
    border-radius:5px;
  }

  .toowie-product .hero .float-icon svg:where([data-page="index"], [data-page="index"] *){
    width:8px;
    height:8px;
  }

  .toowie-product #gespraech .phase-detail:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .objection-showcase.phase-detail:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr) !important;
    gap:8px !important;
  }
}

/* --------------------------------------------------------------------------
   Lead Manager + Funktionen & Extras – Callouts 400–1050px im Screenshot
   Die älteren <=760px-Regeln verschieben die Karten unter den Browser.
   In diesem Bereich bleiben sie wie im Akquise-Manager absolut im Hero verankert.
   -------------------------------------------------------------------------- */
@media (min-width:400px) and (max-width:1050px){
  /* Lead Manager: schwebende Aktionen im Screenshot halten. */
  .toowie-product .lead-manager-page .lead-hero-visual:where([data-page="index"], [data-page="index"] *){
    position:relative;
    display:block;
    padding-bottom:0;
    overflow:visible;
  }

  .toowie-product .lead-manager-page .lead-hero-card:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-akquise:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-import:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-script:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-notes:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-archived:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-archive:where([data-page="index"], [data-page="index"] *){
    position:absolute;
    width:auto;
    max-width:clamp(76px,17vw,170px);
    margin:0;
    bottom:auto;
  }

  .toowie-product .lead-manager-page .lead-hero-card.hero-scroll-card:where([data-page="index"], [data-page="index"] *){
    top:calc(var(--hero-card-y, 0px) - var(--hero-scroll-top, 0px)) !important;
    clip-path:inset(var(--hero-clip-top, 0px) 0 var(--hero-clip-bottom, 0px) 0 round 11px) !important;
    opacity:1;
    pointer-events:auto;
  }

  .toowie-product .lead-manager-page .lead-hero-card.hero-scroll-card.is-outside-scroll:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    pointer-events:none;
  }

  .toowie-product .lead-manager-page .lead-hero-card-import:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-notes:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-archive:where([data-page="index"], [data-page="index"] *){
    left:6px;
    right:auto;
  }

  .toowie-product .lead-manager-page .lead-hero-card-script:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-archived:where([data-page="index"], [data-page="index"] *){
    left:auto;
    right:6px;
  }

  .toowie-product .lead-manager-page .lead-hero-card-akquise:where([data-page="index"], [data-page="index"] *){
    left:50%;
    right:auto;
    transform:translateX(-50%);
  }

  .toowie-product .lead-manager-page .lead-hero-card-akquise:hover:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-akquise:focus-visible:where([data-page="index"], [data-page="index"] *){
    transform:translateX(-50%) translateY(-2px);
  }

  /* Funktionen & Extras: Auswahlkarten wieder über der Screenshot-Vorschau. */
  .toowie-product .features-page .features-overview-visual:where([data-page="index"], [data-page="index"] *){
    position:relative;
    display:block;
    padding-bottom:0;
    overflow:visible;
  }

  .toowie-product .features-page .features-overview-nav:where([data-page="index"], [data-page="index"] *){
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    pointer-events:none;
    z-index:5;
  }

  .toowie-product .features-page .features-overview-nav-card:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-nav-placeholders:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-nav-rejection:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-nav-editmode:where([data-page="index"], [data-page="index"] *){
    position:absolute;
    width:auto;
    max-width:clamp(76px,17vw,170px);
    min-height:0;
    margin:0;
    transform:none;
    pointer-events:auto;
  }

  .toowie-product .features-page .features-overview-nav-card.hero-scroll-card:where([data-page="index"], [data-page="index"] *){
    top:calc(var(--hero-card-y, 0px) - var(--hero-scroll-top, 0px)) !important;
    clip-path:inset(var(--hero-clip-top, 0px) 0 var(--hero-clip-bottom, 0px) 0 round 11px) !important;
    opacity:1;
    pointer-events:auto;
  }

  .toowie-product .features-page .features-overview-nav-card.hero-scroll-card.is-outside-scroll:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    pointer-events:none;
  }

  .toowie-product .features-page .features-overview-nav-placeholders:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-nav-editmode:where([data-page="index"], [data-page="index"] *){
    left:6px;
    right:auto;
  }

  .toowie-product .features-page .features-overview-nav-rejection:where([data-page="index"], [data-page="index"] *){
    left:auto;
    right:6px;
  }

  .toowie-product .features-page .features-overview-nav-card small:where([data-page="index"], [data-page="index"] *){
    display:block !important;
  }
}

@media (min-width:400px) and (max-width:519px){
  .toowie-product .lead-manager-page .lead-hero-card:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-nav-card:where([data-page="index"], [data-page="index"] *){
    max-width:76px;
  }

  .toowie-product .lead-manager-page .lead-hero-card-import:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-notes:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-archive:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-nav-placeholders:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-nav-editmode:where([data-page="index"], [data-page="index"] *){
    left:3px;
  }

  .toowie-product .lead-manager-page .lead-hero-card-script:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-archived:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-nav-rejection:where([data-page="index"], [data-page="index"] *){
    right:3px;
  }
}

/* --------------------------------------------------------------------------
   Hero-Callouts: Desktop-Geometrie 1:1 proportional zum Screenshot skalieren.
   Die Karten behalten ihre Desktop-Innenmaße und werden als komplette Einheit
   skaliert. Dadurch bleiben Textumbrüche, Icons und Positionen unverändert.
   -------------------------------------------------------------------------- */
.toowie-product .hero-visual:where([data-page="index"], [data-page="index"] *){
  --hero-ui-scale:1;
}

@media (min-width:400px) and (max-width:1859px){
  .toowie-product .hero-visual .hero-scroll-card:where([data-page="index"], [data-page="index"] *){
    scale:var(--hero-ui-scale);
    transform-origin:top left;
    clip-path:inset(
      var(--hero-clip-top,0px) 0 var(--hero-clip-bottom,0px) 0 round 14px
    ) !important;
  }

  /* Alle mobilen Größenänderungen der Karten zurück auf die Desktop-Geometrie.
     Die sichtbare Verkleinerung übernimmt ausschließlich --hero-ui-scale. */
  .toowie-product .hero .float-card:where([data-page="index"], [data-page="index"] *){
    padding:11px 13px !important;
    gap:10px !important;
    border-radius:14px !important;
    font-size:11px !important;
    line-height:normal !important;
  }

  .toowie-product .hero .float-card b:where([data-page="index"], [data-page="index"] *){
    font-size:11px !important;
    line-height:normal !important;
  }

  .toowie-product .hero .float-card small:where([data-page="index"], [data-page="index"] *){
    display:block !important;
    margin-top:2px !important;
    font-size:9.16667px !important;
    line-height:normal !important;
  }

  .toowie-product .hero .float-icon:where([data-page="index"], [data-page="index"] *),.toowie-product .hero .float-number:where([data-page="index"], [data-page="index"] *){
    width:34px !important;
    height:34px !important;
    flex:0 1 auto !important;
    border-radius:10px !important;
  }

  .toowie-product .hero .float-icon svg:where([data-page="index"], [data-page="index"] *){
    width:auto !important;
    height:auto !important;
  }

  /* Akquise Manager – exakt die Desktop-Koordinaten und Desktop-Breiten. */
  .toowie-product:not(.lead-manager-page):not(.features-page) .float-card-call:where([data-page="index"], [data-page="index"] *){
    left:calc(670px * var(--hero-ui-scale)) !important;
    right:auto !important;
    width:200.453px !important;
    max-width:none !important;
    border-width:2px !important;
  }

  .toowie-product:not(.lead-manager-page):not(.features-page) .float-card-leads:where([data-page="index"], [data-page="index"] *){
    left:calc(351px * var(--hero-ui-scale)) !important;
    right:auto !important;
    width:257.156px !important;
    max-width:none !important;
    border-width:2px !important;
  }

  .toowie-product:not(.lead-manager-page):not(.features-page) .float-card-flow:where([data-page="index"], [data-page="index"] *){
    left:calc(614px * var(--hero-ui-scale)) !important;
    right:auto !important;
    width:256.266px !important;
    max-width:none !important;
    border-width:2px !important;
  }

  .toowie-product:not(.lead-manager-page):not(.features-page) .float-card-notes:where([data-page="index"], [data-page="index"] *){
    left:calc(664px * var(--hero-ui-scale)) !important;
    right:auto !important;
    width:206.531px !important;
    max-width:305px !important;
    border-width:2px !important;
  }

  .toowie-product:not(.lead-manager-page):not(.features-page) .float-card-notes small:where([data-page="index"], [data-page="index"] *){
    line-height:1.35 !important;
  }

  /* Lead Manager – Desktopbox bleibt 245px breit; nur die komplette Karte skaliert. */
  .toowie-product .lead-manager-page .lead-hero-card:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-akquise:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-import:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-script:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-notes:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-archived:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-archive:where([data-page="index"], [data-page="index"] *){
    position:absolute !important;
    width:245px !important;
    max-width:245px !important;
    margin:0 !important;
    right:auto !important;
    bottom:auto !important;
    border-width:2px !important;
  }

  .toowie-product .lead-manager-page .lead-hero-card-akquise:where([data-page="index"], [data-page="index"] *){
    left:calc(311px * var(--hero-ui-scale)) !important;
  }

  .toowie-product .lead-manager-page .lead-hero-card-import:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-archive:where([data-page="index"], [data-page="index"] *){
    left:calc(-34px * var(--hero-ui-scale)) !important;
  }

  .toowie-product .lead-manager-page .lead-hero-card-script:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-archived:where([data-page="index"], [data-page="index"] *){
    left:calc(642px * var(--hero-ui-scale)) !important;
  }

  .toowie-product .lead-manager-page .lead-hero-card-notes:where([data-page="index"], [data-page="index"] *){
    left:calc(18px * var(--hero-ui-scale)) !important;
  }

  /* Funktionen & Extras – ebenfalls exakt die Desktopbox/Koordinaten. */
  .toowie-product .features-page .features-overview-nav-card:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-nav-placeholders:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-nav-rejection:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-nav-editmode:where([data-page="index"], [data-page="index"] *){
    position:absolute !important;
    width:255px !important;
    max-width:255px !important;
    min-height:0 !important;
    margin:0 !important;
    right:auto !important;
    border-width:1px !important;
  }

  .toowie-product .features-page .features-overview-nav-card .float-icon:where([data-page="index"], [data-page="index"] *){
    width:34px !important;
    height:34px !important;
    flex:0 0 34px !important;
    border-radius:10px !important;
  }

  .toowie-product .features-page .features-overview-nav-placeholders:where([data-page="index"], [data-page="index"] *){
    left:calc(-38px * var(--hero-ui-scale)) !important;
  }

  .toowie-product .features-page .features-overview-nav-rejection:where([data-page="index"], [data-page="index"] *){
    left:calc(588px * var(--hero-ui-scale)) !important;
  }

  .toowie-product .features-page .features-overview-nav-editmode:where([data-page="index"], [data-page="index"] *){
    left:calc(-46px * var(--hero-ui-scale)) !important;
  }
}

@media (min-width:400px) and (max-width:1050px){
  /* Frühere Mobile-Zentrierung entfernen: die X-Position kommt jetzt aus
     derselben Desktop-Koordinate wie bei allen anderen Karten. */
  .toowie-product .lead-manager-page .lead-hero-card-akquise:where([data-page="index"], [data-page="index"] *){
    transform:none !important;
  }
}

@media (min-width:400px) and (max-width:1859px){
  /* Auch die Hover-Bewegung proportional halten. */
  .toowie-product .hero-visual .float-card.is-interactive:hover:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-nav-card:hover:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-nav-card:focus-visible:where([data-page="index"], [data-page="index"] *){
    transform:translateY(calc(-7px * var(--hero-ui-scale))) !important;
  }

  .toowie-product .lead-manager-page .lead-hero-card-akquise:hover:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-akquise:focus-visible:where([data-page="index"], [data-page="index"] *){
    transform:translateY(calc(-7px * var(--hero-ui-scale))) !important;
  }
}

@media (min-width:400px) and (max-width:1859px){
  .toowie-product .features-page .features-overview-nav:where([data-page="index"], [data-page="index"] *){
    margin:0 !important;
  }
}

/* --------------------------------------------------------------------------
   Durchgängige Desktop-Anmutung von 400–1050px
   Layouts bleiben in ihren Desktop-Spalten und werden nur proportional
   kompakter. Unter 400px darf weiterhin die separate Mobile-Ansicht greifen.
   -------------------------------------------------------------------------- */
@media (min-width:400px) and (max-width:1050px){
  /* =========================
     Akquise Manager: 01–05
     ========================= */
  .toowie-product #gespraech.section-block:where([data-page="index"], [data-page="index"] *){
    padding:clamp(44px,7vw,82px) 0;
  }

  .toowie-product #gespraech .phase-overview-box:where([data-page="index"], [data-page="index"] *){
    padding:clamp(14px,3.35vw,35px) clamp(12px,3.1vw,33px) clamp(16px,3.7vw,39px);
    border:1px solid #ead7b6;
    border-radius:clamp(14px,2.3vw,27px);
    background:#fcf7ef;
    box-shadow:0 22px 56px rgba(15,23,42,.08);
  }

  .toowie-product #gespraech .phase-overview-box .section-head.split-head:where([data-page="index"], [data-page="index"] *){
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) !important;
    gap:clamp(10px,3vw,34px) !important;
    align-items:end;
    margin-bottom:clamp(14px,3.25vw,34px);
  }

  .toowie-product #gespraech .phase-overview-box .section-kicker:where([data-page="index"], [data-page="index"] *){
    font-size:clamp(6px,.9vw,10px);
    letter-spacing:.1em;
  }

  .toowie-product #gespraech .phase-overview-box .section-head h2:where([data-page="index"], [data-page="index"] *){
    margin-top:clamp(5px,1.1vw,12px);
    font-size:clamp(17px,3.65vw,38px);
    line-height:1.06;
    letter-spacing:-.04em;
  }

  .toowie-product #gespraech .phase-head-copy p:where([data-page="index"], [data-page="index"] *){
    margin:0;
    font-size:clamp(6.6px,1.15vw,12px);
    line-height:1.5;
  }

  .toowie-product #gespraech .phase-head-copy .phase-communication:where([data-page="index"], [data-page="index"] *){
    margin-top:clamp(4px,.8vw,8px);
  }

  .toowie-product #gespraech .conversation-flow:where([data-page="index"], [data-page="index"] *){
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:clamp(3px,.85vw,9px);
  }

  .toowie-product #gespraech .phase-card:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .phase-card:nth-child(4):where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .phase-card:nth-child(5):where([data-page="index"], [data-page="index"] *){
    min-width:0;
    min-height:clamp(94px,21vw,221px) !important;
    padding:clamp(7px,1.7vw,18px);
    border-radius:clamp(7px,1.55vw,16px);
  }

  .toowie-product #gespraech .phase-top>span:where([data-page="index"], [data-page="index"] *){
    font-size:clamp(5px,.78vw,8px);
  }

  .toowie-product #gespraech .phase-card h3:where([data-page="index"], [data-page="index"] *){
    margin:clamp(8px,2.15vw,22px) 0 clamp(3px,.75vw,8px);
    font-size:clamp(7px,1.5vw,16px);
    line-height:1.14;
    letter-spacing:-.02em;
  }

  .toowie-product #gespraech .phase-card p:where([data-page="index"], [data-page="index"] *){
    font-size:clamp(5.2px,.98vw,10.5px);
    line-height:1.48;
  }

  /* =========================
     Schwebende 01–05 Navigation
     alle fünf Punkte immer gleichzeitig sichtbar
     ========================= */
  .toowie-product .phase-floating-nav:where([data-page="index"], [data-page="index"] *){
    left:50% !important;
    right:auto !important;
    width:min(820px,calc(100vw - 16px)) !important;
    max-width:calc(100vw - 16px) !important;
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:stretch;
    justify-content:stretch !important;
    gap:clamp(2px,.62vw,7px) !important;
    padding:0 !important;
    overflow:visible !important;
    transform:translate(-50%,12px) !important;
  }

  .toowie-product .phase-floating-nav.is-visible:where([data-page="index"], [data-page="index"] *){
    transform:translate(-50%,0) !important;
  }

  .toowie-product .phase-floating-link:where([data-page="index"], [data-page="index"] *){
    width:100%;
    min-width:0;
    min-height:clamp(31px,5.15vw,54px);
    gap:clamp(3px,.72vw,8px);
    padding:clamp(4px,.72vw,8px) clamp(3px,.72vw,8px);
    border-width:clamp(1px,.18vw,2px);
    border-radius:clamp(5px,.72vw,8px);
    font-size:clamp(5.6px,.84vw,9px);
    line-height:1.05;
    white-space:nowrap;
    overflow:hidden;
  }

  .toowie-product .phase-floating-number:where([data-page="index"], [data-page="index"] *){
    font-size:clamp(4.8px,.68vw,7px);
  }

  .toowie-product .phase-floating-title:where([data-page="index"], [data-page="index"] *){
    min-width:0;
    max-width:100%;
    overflow:hidden;
    text-overflow:clip;
  }

  /* =========================
     CTA: Desktop-Aufteilung beibehalten
     ========================= */
  .toowie-product .final-cta:where([data-page="index"], [data-page="index"] *){
    padding:clamp(44px,8vw,84px) 0;
  }

  .toowie-product .final-card:where([data-page="index"], [data-page="index"] *){
    min-height:clamp(220px,38vw,399px);
    display:grid;
    grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr) !important;
    gap:clamp(12px,4.2vw,44px) !important;
    align-items:center;
    padding:0 !important;
    border-radius:0 !important;
  }

  .toowie-product .final-eyebrow:where([data-page="index"], [data-page="index"] *){
    gap:clamp(3px,.7vw,7px);
    padding:clamp(3px,.58vw,6px) clamp(5px,.8vw,9px);
    font-size:clamp(5.8px,.85vw,9px);
    line-height:1.15;
  }

  .toowie-product .final-eyebrow .eyebrow-dot:where([data-page="index"], [data-page="index"] *){
    width:clamp(4px,.55vw,6px);
    height:clamp(4px,.55vw,6px);
    box-shadow:0 0 0 3px rgba(34,197,94,.16);
  }

  .toowie-product .final-copy h2:where([data-page="index"], [data-page="index"] *){
    max-width:100%;
    margin:clamp(7px,1.45vw,15px) 0 clamp(8px,1.7vw,18px);
    font-size:clamp(17px,4vw,42px) !important;
    line-height:1.02;
    letter-spacing:-.05em;
  }

  .toowie-product .final-copy .final-lead:where([data-page="index"], [data-page="index"] *){
    max-width:100%;
    font-size:clamp(6.8px,1.18vw,12.5px) !important;
    line-height:1.58;
  }

  .toowie-product .final-benefits:where([data-page="index"], [data-page="index"] *){
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap;
    gap:clamp(3px,.72vw,8px);
    margin-top:clamp(10px,2.15vw,23px);
  }

  .toowie-product .final-benefits span:where([data-page="index"], [data-page="index"] *){
    width:auto !important;
    min-height:clamp(18px,3.2vw,34px);
    gap:clamp(3px,.55vw,6px);
    padding:0 clamp(5px,.92vw,10px);
    font-size:clamp(5.7px,.82vw,8.8px);
    white-space:nowrap;
  }

  .toowie-product .final-benefits i:where([data-page="index"], [data-page="index"] *){
    width:clamp(10px,1.7vw,18px);
    height:clamp(10px,1.7vw,18px);
    font-size:clamp(5px,.72vw,8px);
  }

  .toowie-product .final-actions:where([data-page="index"], [data-page="index"] *){
    max-width:none !important;
    align-self:center;
    padding:clamp(10px,2.35vw,25px) !important;
    gap:clamp(4px,.85vw,9px);
    border-radius:clamp(10px,1.85vw,20px) !important;
  }

  .toowie-product .final-action-label:where([data-page="index"], [data-page="index"] *){
    font-size:clamp(9px,1.7vw,18px) !important;
    line-height:1.2;
  }

  .toowie-product .final-actions>p:where([data-page="index"], [data-page="index"] *){
    margin:0 0 clamp(3px,.8vw,8px);
    font-size:clamp(6.2px,1vw,10.5px);
    line-height:1.5;
  }

  .toowie-product .final-cta-button:where([data-page="index"], [data-page="index"] *){
    min-height:clamp(29px,4.65vw,49px) !important;
    padding:clamp(6px,.9vw,10px) clamp(8px,1.35vw,14px) !important;
    margin-top:clamp(2px,.55vw,6px);
    border-radius:clamp(8px,1.2vw,13px);
    font-size:clamp(6.7px,1.05vw,11px) !important;
    line-height:1.15;
    text-align:center;
  }

  .toowie-product .final-cta-button span:where([data-page="index"], [data-page="index"] *){
    font-size:clamp(9px,1.45vw,15px);
  }

  /* =========================
     Lead Manager Hero
     ========================= */
  .toowie-product .lead-manager-page .lead-hero:where([data-page="index"], [data-page="index"] *){
    padding-top:clamp(96px,12vw,126px) !important;
    padding-bottom:clamp(54px,7vw,82px) !important;
  }

  .toowie-product .lead-manager-page .lead-hero-grid:where([data-page="index"], [data-page="index"] *){
    width:calc(100% - clamp(20px,4vw,40px));
    grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr) !important;
    gap:clamp(10px,2.2vw,24px) !important;
    align-items:center;
  }

  .toowie-product .lead-manager-page .lead-hero .hero-copy h1:where([data-page="index"], [data-page="index"] *){
    max-width:100% !important;
    margin:clamp(10px,1.7vw,18px) 0 clamp(10px,1.6vw,16px);
    font-size:clamp(22px,4.15vw,44px) !important;
    line-height:1 !important;
    letter-spacing:-.045em !important;
  }

  .toowie-product .lead-manager-page .lead-hero .hero-subline:where([data-page="index"], [data-page="index"] *){
    max-width:100% !important;
    margin:0 0 clamp(6px,1vw,9px);
    font-size:clamp(10.5px,1.55vw,16px) !important;
    line-height:1.32 !important;
  }

  .toowie-product .lead-manager-page .lead-hero .hero-lead:where([data-page="index"], [data-page="index"] *){
    max-width:100% !important;
    font-size:clamp(9px,1.25vw,13px) !important;
    line-height:1.48 !important;
  }

  .toowie-product .lead-manager-page .lead-hero-visual:where([data-page="index"], [data-page="index"] *){
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }

  .toowie-product .lead-manager-page .lead-hero-browser:where([data-page="index"], [data-page="index"] *){
    width:100% !important;
    max-width:100% !important;
    transform:none !important;
    border-radius:clamp(12px,1.7vw,20px);
  }

  .toowie-product .lead-manager-page .lead-hero-scroll-area:where([data-page="index"], [data-page="index"] *){
    max-height:clamp(280px,45vw,480px) !important;
    overflow-y:auto !important;
  }

  /* Lead Manager Inhaltsbereiche: Wechselstruktur wie Desktop erhalten */
  .toowie-product .lead-manager-page .lead-feature-row:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:minmax(0,.80fr) minmax(0,1.20fr) !important;
    gap:clamp(9px,2.6vw,34px) !important;
    padding:clamp(42px,7vw,78px) 0 !important;
    align-items:center;
  }

  .toowie-product .lead-manager-page .lead-feature-reverse .lead-feature-copy:where([data-page="index"], [data-page="index"] *){
    order:2 !important;
  }

  .toowie-product .lead-manager-page .lead-feature-reverse .lead-feature-browser:where([data-page="index"], [data-page="index"] *){
    order:1 !important;
  }

  .toowie-product .lead-manager-page .lead-feature-copy:where([data-page="index"], [data-page="index"] *){
    min-width:0;
  }

  .toowie-product .lead-manager-page .lead-feature-copy .section-kicker:where([data-page="index"], [data-page="index"] *){
    font-size:clamp(6px,.9vw,10px);
    letter-spacing:.09em;
  }

  .toowie-product .lead-manager-page .lead-feature-copy h2:where([data-page="index"], [data-page="index"] *){
    max-width:100% !important;
    margin:clamp(6px,1vw,12px) 0 clamp(7px,1.25vw,14px);
    font-size:clamp(18px,3.55vw,40px) !important;
    line-height:1.04;
    letter-spacing:-.04em;
  }

  .toowie-product .lead-manager-page .lead-feature-copy>p:where([data-page="index"], [data-page="index"] *){
    max-width:100% !important;
    font-size:clamp(7.5px,1.2vw,14px) !important;
    line-height:1.48;
  }

  .toowie-product .lead-manager-page .lead-feature-copy .check-list:where([data-page="index"], [data-page="index"] *){
    max-width:100% !important;
    margin-top:clamp(9px,1.7vw,21px);
    gap:clamp(5px,.9vw,11px);
  }

  .toowie-product .lead-manager-page .lead-feature-copy .check-list li:where([data-page="index"], [data-page="index"] *){
    gap:clamp(4px,.7vw,8px);
    font-size:clamp(7px,1.05vw,12px);
    line-height:1.3;
  }

  .toowie-product .lead-manager-page .lead-feature-copy .check-list span:where([data-page="index"], [data-page="index"] *){
    width:clamp(13px,1.8vw,20px);
    height:clamp(13px,1.8vw,20px);
    flex:0 0 clamp(13px,1.8vw,20px);
    border-radius:clamp(4px,.6vw,7px);
    font-size:clamp(6px,.85vw,9px);
  }

  .toowie-product .lead-manager-page .lead-feature-browser:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-action-shot:where([data-page="index"], [data-page="index"] *){
    min-width:0;
    width:100%;
    border-radius:clamp(10px,1.5vw,18px) !important;
  }

  .toowie-product .lead-manager-page .lead-feature-row .browser-bar:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-action-shot .browser-bar:where([data-page="index"], [data-page="index"] *){
    min-height:clamp(22px,3.5vw,37px);
    height:auto;
    padding:clamp(3px,.6vw,6px) clamp(5px,.85vw,9px);
    gap:clamp(4px,.7vw,8px);
    flex-wrap:nowrap;
  }

  .toowie-product .lead-manager-page .lead-feature-row .browser-label:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-action-shot .browser-label:where([data-page="index"], [data-page="index"] *){
    flex:1 1 auto;
    font-size:clamp(5.5px,.78vw,8.5px);
  }

  .toowie-product .lead-manager-page .lead-feature-row .live-pill:where([data-page="index"], [data-page="index"] *){
    padding:clamp(2px,.4vw,4px) clamp(3px,.6vw,6px);
    font-size:clamp(5px,.68vw,7.5px);
    white-space:nowrap;
  }

  .toowie-product .lead-manager-page .lead-feature-crop:where([data-page="index"], [data-page="index"] *){
    height:clamp(145px,36vw,378px) !important;
  }

  .toowie-product .lead-manager-page .lead-action-visual:where([data-page="index"], [data-page="index"] *){
    gap:clamp(6px,1.4vw,15px);
  }

  .toowie-product .lead-manager-page .lead-action-crop:where([data-page="index"], [data-page="index"] *){
    height:clamp(72px,17.5vw,184px) !important;
  }

  /* =========================
     Funktionen & Extras Hero
     ========================= */
  .toowie-product .features-page .features-overview-hero:where([data-page="index"], [data-page="index"] *){
    padding-top:clamp(96px,12vw,126px) !important;
    padding-bottom:clamp(54px,7vw,82px) !important;
  }

  .toowie-product .features-page .features-overview-grid:where([data-page="index"], [data-page="index"] *){
    width:calc(100% - clamp(20px,4vw,40px));
    grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr) !important;
    gap:clamp(10px,2.2vw,24px) !important;
    align-items:center;
  }

  .toowie-product .features-page .features-overview-hero .hero-copy h1:where([data-page="index"], [data-page="index"] *){
    max-width:100% !important;
    margin:clamp(10px,1.7vw,18px) 0 clamp(10px,1.6vw,16px);
    font-size:clamp(22px,4.15vw,44px) !important;
    line-height:1 !important;
    letter-spacing:-.045em !important;
  }

  .toowie-product .features-page .features-overview-hero .hero-subline:where([data-page="index"], [data-page="index"] *){
    max-width:100% !important;
    margin:0 0 clamp(6px,1vw,9px);
    font-size:clamp(10.5px,1.55vw,16px) !important;
    line-height:1.32 !important;
  }

  .toowie-product .features-page .features-overview-hero .hero-lead:where([data-page="index"], [data-page="index"] *){
    max-width:100% !important;
    font-size:clamp(9px,1.25vw,13px) !important;
    line-height:1.48 !important;
  }

  .toowie-product .features-page .features-overview-visual:where([data-page="index"], [data-page="index"] *){
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding-bottom:0 !important;
  }

  .toowie-product .features-page .features-overview-browser:where([data-page="index"], [data-page="index"] *){
    width:100% !important;
    max-width:100% !important;
    transform:none !important;
    border-radius:clamp(12px,1.7vw,20px);
  }

  .toowie-product .features-page .features-overview-scroll-area:where([data-page="index"], [data-page="index"] *){
    height:clamp(280px,45vw,480px) !important;
    max-height:clamp(280px,45vw,480px) !important;
    overflow-y:auto !important;
  }

  /* Funktionen & Extras: allgemeine Abstände proportional */
  .toowie-product .features-page .section-block:where([data-page="index"], [data-page="index"] *){
    padding:clamp(44px,7vw,82px) 0;
  }

  /* Solo/Team: drei Desktop-Karten bleiben nebeneinander */
  .toowie-product .features-page #team .section-head:where([data-page="index"], [data-page="index"] *){
    margin-bottom:clamp(18px,3.7vw,39px);
  }

  .toowie-product .features-page #team .section-head h2:where([data-page="index"], [data-page="index"] *){
    font-size:clamp(18px,3.8vw,40px) !important;
    line-height:1.06;
  }

  .toowie-product .features-page #team .section-head p:where([data-page="index"], [data-page="index"] *){
    font-size:clamp(7px,1.2vw,12.5px);
    line-height:1.55;
  }

  .toowie-product .features-page .team-grid:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:clamp(4px,1vw,10px) !important;
  }

  .toowie-product .features-page .team-line:where([data-page="index"], [data-page="index"] *){
    display:none !important;
  }

  .toowie-product .features-page .team-grid article:where([data-page="index"], [data-page="index"] *){
    min-width:0;
    height:auto;
    min-height:clamp(104px,18vw,189px);
    padding:clamp(8px,1.85vw,19px);
    border-radius:clamp(8px,1.55vw,16px);
  }

  .toowie-product .features-page .team-step:where([data-page="index"], [data-page="index"] *){
    width:clamp(17px,3vw,32px);
    height:clamp(17px,3vw,32px);
    border-radius:clamp(5px,.85vw,9px);
    font-size:clamp(6px,1vw,10px);
  }

  .toowie-product .features-page .team-grid h3:where([data-page="index"], [data-page="index"] *){
    margin:clamp(8px,2vw,21px) 0 clamp(3px,.75vw,8px);
    font-size:clamp(8px,1.55vw,16px);
  }

  .toowie-product .features-page .team-grid p:where([data-page="index"], [data-page="index"] *){
    font-size:clamp(5.5px,1vw,10.5px);
    line-height:1.5;
  }

  .toowie-product .features-page .team-option-card:where([data-page="index"], [data-page="index"] *){
    padding-bottom:clamp(27px,4.7vw,49px) !important;
  }

  .toowie-product .features-page .team-card-cta:where([data-page="index"], [data-page="index"] *){
    right:clamp(7px,1.7vw,18px);
    bottom:clamp(7px,1.45vw,15px);
    font-size:clamp(5.5px,.9vw,9.5px);
  }

  .toowie-product .features-page .team-quote:where([data-page="index"], [data-page="index"] *){
    margin-top:clamp(14px,3vw,31px);
  }

  .toowie-product .features-page .team-quote p:where([data-page="index"], [data-page="index"] *){
    font-size:clamp(7px,1.25vw,13px);
    line-height:1.5;
  }

  /* Persönlich anpassbar + Platzhalter: Text/Details wie Desktop nebeneinander */
  .toowie-product .features-page .feature-detail-shell:where([data-page="index"], [data-page="index"] *){
    gap:clamp(14px,3vw,31px);
  }

  .toowie-product .features-page .feature-detail-top:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr) !important;
    gap:clamp(10px,3vw,32px) !important;
    align-items:start;
  }

  .toowie-product .features-page .feature-detail-copy h2:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .placeholder-detail-shell .placeholder-copy h2:where([data-page="index"], [data-page="index"] *){
    max-width:100%;
    margin:clamp(6px,1.1vw,12px) 0 0;
    font-size:clamp(18px,3.75vw,40px) !important;
    line-height:1.04;
    letter-spacing:-.04em;
  }

  .toowie-product .features-page .feature-detail-copy>p:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .placeholder-detail-shell .placeholder-copy>p:where([data-page="index"], [data-page="index"] *){
    max-width:100% !important;
    margin:clamp(7px,1.5vw,16px) 0 0 !important;
    font-size:clamp(7px,1.18vw,12.5px) !important;
    line-height:1.52 !important;
  }

  .toowie-product .features-page .feature-detail-copy .section-kicker:where([data-page="index"], [data-page="index"] *){
    font-size:clamp(6px,.9vw,10px);
  }

  .toowie-product .features-page .feature-detail-rail:where([data-page="index"], [data-page="index"] *){
    min-width:0;
    padding:clamp(1px,.25vw,2px) 0 0 clamp(8px,2vw,21px) !important;
    border-left-width:clamp(2px,.36vw,4px);
  }

  .toowie-product .features-page .feature-detail-rail article:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page #rejection-tracker .rejection-detail-rail article:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:clamp(18px,3.3vw,35px) minmax(0,1fr) !important;
    gap:clamp(5px,1.05vw,11px) !important;
    padding-bottom:clamp(6px,1.4vw,15px) !important;
    margin-bottom:clamp(6px,1.4vw,15px) !important;
  }

  .toowie-product .features-page .feature-detail-icon:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page #rejection-tracker .rejection-detail-icon:where([data-page="index"], [data-page="index"] *){
    width:clamp(17px,3vw,32px) !important;
    height:clamp(17px,3vw,32px) !important;
    border-radius:clamp(5px,.9vw,10px) !important;
    font-size:clamp(5.5px,.95vw,10px) !important;
  }

  .toowie-product .features-page .feature-detail-rail b:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page #rejection-tracker .rejection-detail-rail b:where([data-page="index"], [data-page="index"] *){
    font-size:clamp(6.8px,1.16vw,12px) !important;
    line-height:1.3;
  }

  .toowie-product .features-page .feature-detail-rail p:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page #rejection-tracker .rejection-detail-rail p:where([data-page="index"], [data-page="index"] *){
    margin-top:clamp(2px,.35vw,4px);
    font-size:clamp(5.5px,.95vw,10px) !important;
    line-height:1.48;
  }

  .toowie-product .features-page .placeholder-detail-rail article:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:clamp(45px,9.5vw,100px) minmax(0,1fr) !important;
  }

  .toowie-product .features-page .placeholder-detail-rail .feature-detail-icon:where([data-page="index"], [data-page="index"] *){
    width:clamp(45px,9.5vw,100px) !important;
    min-width:0 !important;
    padding:0 clamp(3px,.7vw,7px);
    font-size:clamp(4.8px,.78vw,8.5px) !important;
  }

  .toowie-product .features-page .feature-detail-browser:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .rejection-browser:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .placeholder-browser:where([data-page="index"], [data-page="index"] *){
    border-radius:clamp(10px,1.5vw,18px) !important;
  }

  /* Rejection Tracker: Desktop-Spiegelung beibehalten */
  .toowie-product .features-page #rejection-tracker .rejection-intro:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr) !important;
    gap:clamp(10px,3vw,32px) !important;
    align-items:start;
  }

  .toowie-product .features-page #rejection-tracker .rejection-detail-rail:where([data-page="index"], [data-page="index"] *){
    grid-column:1 !important;
    grid-row:1 !important;
    padding-left:0 !important;
    border-left:0 !important;
  }

  .toowie-product .features-page #rejection-tracker .rejection-intro-copy:where([data-page="index"], [data-page="index"] *){
    grid-column:2 !important;
    grid-row:1 !important;
    padding-left:clamp(8px,2vw,21px) !important;
    border-left-width:clamp(2px,.36vw,4px) !important;
  }

  .toowie-product .features-page #rejection-tracker .rejection-intro-copy h2:where([data-page="index"], [data-page="index"] *){
    max-width:100%;
    font-size:clamp(18px,3.75vw,40px) !important;
    line-height:1.04;
    letter-spacing:-.04em;
  }

  .toowie-product .features-page #rejection-tracker .rejection-intro-copy>p:where([data-page="index"], [data-page="index"] *){
    max-width:100% !important;
    margin:clamp(7px,1.5vw,16px) 0 0;
    font-size:clamp(7px,1.18vw,12.5px) !important;
    line-height:1.52 !important;
  }
}

@media (min-width:400px) and (max-width:1050px){
  /* Die beiden erklärenden Zeilen im 01–05-Kopf hatten ältere, spezifischere
     Desktop-Werte. Auch sie skalieren jetzt mit dem restlichen Überblick. */
  .toowie-product #gespraech .phase-head-copy>p:first-child:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .phase-head-copy .phase-communication:where([data-page="index"], [data-page="index"] *){
    font-size:clamp(6.6px,1.15vw,12px) !important;
    line-height:1.5 !important;
  }

  .toowie-product #gespraech .phase-head-copy .phase-communication:where([data-page="index"], [data-page="index"] *){
    margin-top:clamp(4px,.8vw,8px) !important;
    padding-left:clamp(9px,1.7vw,18px) !important;
  }

  .toowie-product #gespraech .phase-communication:where([data-page="index"], [data-page="index"] *)::before{
    width:clamp(4px,.78vw,8px) !important;
    height:clamp(4px,.78vw,8px) !important;
    box-shadow:0 0 0 clamp(2px,.42vw,4px) rgba(34,197,94,.14) !important;
  }
}

/* Mobile-Reihenfolge bis einschließlich 400px:
   Überschrift -> Screenshot -> Beschreibung -> Checkpunkte. */
@media (max-width:400px){
  /* Akquise Manager: Gatekeeper bis Abschluss */
  .toowie-product #gespraech .phase-detail:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .objection-showcase.phase-detail:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr !important;
    gap:0 !important;
    align-items:stretch;
    padding:68px 0 !important;
  }

  .toowie-product #gespraech .phase-detail-gatekeeper:where([data-page="index"], [data-page="index"] *){
    margin-top:56px !important;
  }

  .toowie-product #gespraech .phase-detail-copy:where([data-page="index"], [data-page="index"] *){
    display:contents;
  }

  .toowie-product #gespraech .phase-detail-copy .section-kicker:where([data-page="index"], [data-page="index"] *){
    order:1;
    font-size:11px !important;
    line-height:normal;
    letter-spacing:.12em;
  }

  .toowie-product #gespraech .phase-detail-copy h2:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .objection-copy h2:where([data-page="index"], [data-page="index"] *){
    order:2;
    max-width:760px !important;
    margin:12px 0 0;
    font-size:34px !important;
    line-height:1.08;
  }

  .toowie-product #gespraech .phase-detail-copy>p:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .objection-copy>p:where([data-page="index"], [data-page="index"] *){
    order:4;
    max-width:760px !important;
    margin:0;
    font-size:15px !important;
    line-height:1.7;
  }

  .toowie-product #gespraech .phase-detail-browser:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .compact-browser:where([data-page="index"], [data-page="index"] *){
    order:3 !important;
    width:100%;
    max-width:100%;
    margin:16px 0;
    border-radius:16px !important;
  }

  .toowie-product #gespraech .phase-detail-copy .check-list:where([data-page="index"], [data-page="index"] *){
    order:5;
    max-width:760px !important;
    margin:24px 0 0;
    gap:13px;
  }

  .toowie-product #gespraech .phase-detail-copy .check-list li:where([data-page="index"], [data-page="index"] *){
    gap:9px;
    font-size:13px !important;
    line-height:normal;
  }

  .toowie-product #gespraech .phase-detail-copy .check-list span:where([data-page="index"], [data-page="index"] *){
    width:21px;
    height:21px;
    flex:0 0 21px;
    border-radius:7px;
    font-size:10px;
  }

  .toowie-product #gespraech .phase-detail-browser-focus:where([data-page="index"], [data-page="index"] *),.toowie-product #gespraech .phase-detail-browser-interest:where([data-page="index"], [data-page="index"] *){
    height:390px;
  }

  .toowie-product #gespraech .phase-detail-browser-pan-opener img:where([data-page="index"], [data-page="index"] *){
    width:max(900px,100%);
  }

  /* display:contents hat selbst keine sichtbare Box; mobile H2 daher direkt sichtbar halten. */
  .toowie-product .js #gespraech .phase-detail-copy.reveal h2:where([data-page="index"], [data-page="index"] *),.toowie-product .js #gespraech .phase-detail-copy.reveal.is-visible h2:where([data-page="index"], [data-page="index"] *){
    opacity:1 !important;
    transform:none !important;
  }

  /* Lead Manager: die Funktionsboxen */
  .toowie-product .lead-manager-page .lead-feature-sequence .lead-feature-row:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr !important;
    gap:0 !important;
    align-items:stretch;
    padding:68px 0 !important;
  }

  .toowie-product .lead-manager-page .lead-feature-sequence .lead-feature-copy:where([data-page="index"], [data-page="index"] *){
    display:contents;
  }

  .toowie-product .lead-manager-page .lead-feature-copy .section-kicker:where([data-page="index"], [data-page="index"] *){
    order:1;
    font-size:11px !important;
    line-height:normal;
    letter-spacing:.12em;
  }

  .toowie-product .lead-manager-page .lead-feature-copy h2:where([data-page="index"], [data-page="index"] *){
    order:2;
    max-width:760px !important;
    margin:12px 0 0;
    font-size:34px !important;
    line-height:1.08;
  }

  .toowie-product .lead-manager-page .lead-feature-copy>p:where([data-page="index"], [data-page="index"] *){
    order:4;
    max-width:760px !important;
    margin:0;
    font-size:15px !important;
    line-height:1.7;
  }

  .toowie-product .lead-manager-page .lead-feature-browser:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-action-visual:where([data-page="index"], [data-page="index"] *){
    order:3 !important;
    width:100%;
    max-width:100%;
    margin:16px 0;
  }

  .toowie-product .lead-manager-page .lead-feature-copy .check-list:where([data-page="index"], [data-page="index"] *){
    order:5;
    max-width:760px !important;
    margin:24px 0 0;
    gap:13px;
  }

  .toowie-product .lead-manager-page .lead-feature-copy .check-list li:where([data-page="index"], [data-page="index"] *){
    gap:9px;
    font-size:13px !important;
    line-height:normal;
  }

  .toowie-product .lead-manager-page .lead-feature-copy .check-list span:where([data-page="index"], [data-page="index"] *){
    width:21px;
    height:21px;
    flex:0 0 21px;
    border-radius:7px;
    font-size:10px;
  }

  .toowie-product .lead-manager-page .lead-feature-browser:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-action-shot:where([data-page="index"], [data-page="index"] *){
    border-radius:16px !important;
  }

  .toowie-product .lead-manager-page .lead-feature-crop:where([data-page="index"], [data-page="index"] *){
    height:390px !important;
  }

  .toowie-product .lead-manager-page .lead-action-crop:where([data-page="index"], [data-page="index"] *){
    height:170px !important;
  }

  .toowie-product .js .lead-manager-page .lead-feature-copy.reveal h2:where([data-page="index"], [data-page="index"] *),.toowie-product .js .lead-manager-page .lead-feature-copy.reveal.is-visible h2:where([data-page="index"], [data-page="index"] *){
    opacity:1 !important;
    transform:none !important;
  }

  /* Funktionen & Extras: Überschrift -> Screenshot -> Text/Details */
  .toowie-product .features-page #anpassbar .feature-detail-shell:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page #platzhalter .feature-detail-shell:where([data-page="index"], [data-page="index"] *){
    display:flex !important;
    flex-direction:column;
    gap:0 !important;
  }

  .toowie-product .features-page #anpassbar .feature-detail-top:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page #platzhalter .feature-detail-top:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page #anpassbar .feature-detail-copy:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page #platzhalter .feature-detail-copy:where([data-page="index"], [data-page="index"] *){
    display:contents !important;
  }

  .toowie-product .features-page #anpassbar .feature-detail-copy .section-kicker:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page #platzhalter .feature-detail-copy .section-kicker:where([data-page="index"], [data-page="index"] *){order:1}

  .toowie-product .features-page #anpassbar .feature-detail-copy h2:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page #platzhalter .feature-detail-copy h2:where([data-page="index"], [data-page="index"] *){
    order:2;
    margin:12px 0 0 !important;
  }

  .toowie-product .features-page #anpassbar .feature-detail-browser:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page #platzhalter .placeholder-visual:where([data-page="index"], [data-page="index"] *){
    order:3 !important;
    width:100%;
    margin:16px 0 !important;
  }

  .toowie-product .features-page #anpassbar .feature-detail-copy>p:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page #platzhalter .feature-detail-copy>p:where([data-page="index"], [data-page="index"] *){
    order:4;
    margin:0 !important;
  }

  .toowie-product .features-page #anpassbar .feature-detail-rail:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page #platzhalter .feature-detail-rail:where([data-page="index"], [data-page="index"] *){
    order:5;
    margin-top:24px;
  }

  .toowie-product .features-page #rejection-tracker .rejection-tracker-box:where([data-page="index"], [data-page="index"] *){
    display:flex !important;
    flex-direction:column;
    gap:0 !important;
  }

  .toowie-product .features-page #rejection-tracker .rejection-intro:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page #rejection-tracker .rejection-intro-copy:where([data-page="index"], [data-page="index"] *){
    display:contents !important;
  }

  .toowie-product .features-page #rejection-tracker .rejection-intro-copy .section-kicker:where([data-page="index"], [data-page="index"] *){order:1}

  .toowie-product .features-page #rejection-tracker .rejection-intro-copy h2:where([data-page="index"], [data-page="index"] *){
    order:2;
    margin:12px 0 0 !important;
  }

  .toowie-product .features-page #rejection-tracker .rejection-browser-wrap:where([data-page="index"], [data-page="index"] *){
    order:3 !important;
    width:100%;
    margin:16px 0 !important;
  }

  .toowie-product .features-page #rejection-tracker .rejection-intro-copy>p:where([data-page="index"], [data-page="index"] *){
    order:4;
    margin:0 !important;
  }

  .toowie-product .features-page #rejection-tracker .rejection-detail-rail:where([data-page="index"], [data-page="index"] *){
    order:5 !important;
    margin-top:24px;
  }

  .toowie-product .js .features-page #anpassbar .feature-detail-copy.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js .features-page #platzhalter .feature-detail-copy.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js .features-page #rejection-tracker .rejection-intro.reveal:where([data-page="index"], [data-page="index"] *){
    opacity:1 !important;
    transform:none !important;
  }
}

/* --------------------------------------------------------------------------
   Smartphone-Hero bis einschließlich 400px
   Einheitliche Reihenfolge:
   Titel -> Untertitel -> Screenshot -> Beschreibung -> Navigation -> Vorteile.
   Die klickbaren Callouts bleiben wie ab 400px direkt über dem Screenshot.
   -------------------------------------------------------------------------- */
@media (max-width:400px){
  .toowie-product .hero > .shell.hero-grid:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-grid:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-grid:where([data-page="index"], [data-page="index"] *){
    display:flex !important;
    flex-direction:column;
    gap:0 !important;
    align-items:stretch;
  }

  .toowie-product .hero .hero-copy:where([data-page="index"], [data-page="index"] *){
    display:contents;
  }

  .toowie-product .hero .hero-copy .eyebrow:where([data-page="index"], [data-page="index"] *){order:0}
  .toowie-product .hero .hero-copy h1:where([data-page="index"], [data-page="index"] *){order:1}
  .toowie-product .hero .hero-copy .hero-subline:where([data-page="index"], [data-page="index"] *){order:2}
  .toowie-product .hero .hero-visual:where([data-page="index"], [data-page="index"] *){order:3}
  .toowie-product .hero .hero-copy .hero-lead:where([data-page="index"], [data-page="index"] *){order:4}
  .toowie-product .hero .hero-copy .hero-actions:where([data-page="index"], [data-page="index"] *){order:5}
  .toowie-product .hero .hero-copy .hero-points:where([data-page="index"], [data-page="index"] *){order:6}

  /* display:contents darf das vorhandene Reveal nicht auf die Kinder verstecken. */
  .toowie-product .js .hero .hero-copy.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .js .hero .hero-copy.reveal.is-visible:where([data-page="index"], [data-page="index"] *){
    opacity:1 !important;
    transform:none !important;
  }

  .toowie-product .hero .hero-visual:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-visual:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-visual:where([data-page="index"], [data-page="index"] *){
    position:relative;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:14px 0 !important;
    padding-bottom:0 !important;
    overflow:visible;
  }

  .toowie-product .hero .hero-actions:where([data-page="index"], [data-page="index"] *){
    width:100%;
    margin-top:22px !important;
  }

  .toowie-product .hero .hero-points:where([data-page="index"], [data-page="index"] *){
    width:100%;
    margin-top:18px !important;
  }

  /* Derselbe kompakte, scrollbar bleibende Screenshot wie direkt oberhalb 400px. */
  .toowie-product .hero .hero-scroll-area:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-scroll-area:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-scroll-area:where([data-page="index"], [data-page="index"] *){
    width:100% !important;
    height:280px !important;
    min-height:0 !important;
    max-height:280px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  /* Callouts werden als komplette Desktop-Einheit proportional verkleinert. */
  .toowie-product .hero-visual .hero-scroll-card:where([data-page="index"], [data-page="index"] *){
    position:absolute !important;
    top:calc(var(--hero-card-y,0px) - var(--hero-scroll-top,0px)) !important;
    bottom:auto !important;
    margin:0 !important;
    scale:var(--hero-ui-scale);
    transform-origin:top left;
    clip-path:inset(
      var(--hero-clip-top,0px) 0 var(--hero-clip-bottom,0px) 0 round 14px
    ) !important;
    opacity:1;
    pointer-events:auto;
  }

  .toowie-product .hero-visual .hero-scroll-card.is-outside-scroll:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    pointer-events:none;
  }

  .toowie-product .hero .float-card:where([data-page="index"], [data-page="index"] *){
    display:flex !important;
    padding:11px 13px !important;
    gap:10px !important;
    border-radius:14px !important;
    font-size:11px !important;
    line-height:normal !important;
  }

  .toowie-product .hero .float-card b:where([data-page="index"], [data-page="index"] *){
    font-size:11px !important;
    line-height:normal !important;
  }

  .toowie-product .hero .float-card small:where([data-page="index"], [data-page="index"] *){
    display:block !important;
    margin-top:2px !important;
    font-size:9.16667px !important;
    line-height:normal !important;
  }

  .toowie-product .hero .float-icon:where([data-page="index"], [data-page="index"] *),.toowie-product .hero .float-number:where([data-page="index"], [data-page="index"] *){
    width:34px !important;
    height:34px !important;
    flex:0 1 auto !important;
    border-radius:10px !important;
  }

  /* Spezifische <=760px-Regeln mit top:auto wieder überschreiben. */
  .toowie-product .lead-manager-page .lead-hero-card.hero-scroll-card:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-nav-card.hero-scroll-card:where([data-page="index"], [data-page="index"] *){
    top:calc(var(--hero-card-y,0px) - var(--hero-scroll-top,0px)) !important;
    clip-path:inset(
      var(--hero-clip-top,0px) 0 var(--hero-clip-bottom,0px) 0 round 14px
    ) !important;
    opacity:1;
    pointer-events:auto;
  }

  .toowie-product .lead-manager-page .lead-hero-card.hero-scroll-card.is-outside-scroll:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-nav-card.hero-scroll-card.is-outside-scroll:where([data-page="index"], [data-page="index"] *){
    opacity:0;
    pointer-events:none;
  }

  /* Akquise Manager */
  .toowie-product:not(.lead-manager-page):not(.features-page) .float-card-call:where([data-page="index"], [data-page="index"] *){
    left:calc(100% - (200.453px * var(--hero-ui-scale))) !important;
    right:auto !important;
    width:200.453px !important;
    max-width:none !important;
    border-width:2px !important;
  }

  .toowie-product:not(.lead-manager-page):not(.features-page) .float-card-leads:where([data-page="index"], [data-page="index"] *){
    left:calc(351px * var(--hero-ui-scale)) !important;
    right:auto !important;
    width:257.156px !important;
    max-width:none !important;
    border-width:2px !important;
  }

  .toowie-product:not(.lead-manager-page):not(.features-page) .float-card-flow:where([data-page="index"], [data-page="index"] *){
    left:calc(100% - (256.266px * var(--hero-ui-scale))) !important;
    right:auto !important;
    width:256.266px !important;
    max-width:none !important;
    border-width:2px !important;
  }

  .toowie-product:not(.lead-manager-page):not(.features-page) .float-card-notes:where([data-page="index"], [data-page="index"] *){
    left:calc(100% - (206.531px * var(--hero-ui-scale))) !important;
    right:auto !important;
    width:206.531px !important;
    max-width:305px !important;
    border-width:2px !important;
  }

  .toowie-product:not(.lead-manager-page):not(.features-page) .float-card-notes small:where([data-page="index"], [data-page="index"] *){
    line-height:1.35 !important;
  }

  /* Lead Manager */
  .toowie-product .lead-manager-page .lead-hero-card:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-akquise:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-import:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-script:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-notes:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-archived:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-archive:where([data-page="index"], [data-page="index"] *){
    position:absolute !important;
    width:245px !important;
    max-width:245px !important;
    margin:0 !important;
    right:auto !important;
    bottom:auto !important;
    border-width:2px !important;
  }

  .toowie-product .lead-manager-page .lead-hero-card-akquise:where([data-page="index"], [data-page="index"] *){
    left:calc(311px * var(--hero-ui-scale)) !important;
  }

  .toowie-product .lead-manager-page .lead-hero-card-import:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-archive:where([data-page="index"], [data-page="index"] *){
    left:0 !important;
  }

  .toowie-product .lead-manager-page .lead-hero-card-script:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .lead-hero-card-archived:where([data-page="index"], [data-page="index"] *){
    left:calc(100% - (245px * var(--hero-ui-scale))) !important;
  }

  .toowie-product .lead-manager-page .lead-hero-card-notes:where([data-page="index"], [data-page="index"] *){
    left:calc(18px * var(--hero-ui-scale)) !important;
  }

  /* Funktionen & Extras */
  .toowie-product .features-page .features-overview-nav:where([data-page="index"], [data-page="index"] *){
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    display:block !important;
    pointer-events:none;
    z-index:5;
  }

  .toowie-product .features-page .features-overview-nav-card:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-nav-placeholders:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-nav-rejection:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .features-overview-nav-editmode:where([data-page="index"], [data-page="index"] *){
    position:absolute !important;
    width:255px !important;
    max-width:255px !important;
    min-height:0 !important;
    margin:0 !important;
    right:auto !important;
    border-width:1px !important;
    pointer-events:auto;
  }

  .toowie-product .features-page .features-overview-nav-card .float-icon:where([data-page="index"], [data-page="index"] *){
    width:34px !important;
    height:34px !important;
    flex:0 0 34px !important;
    border-radius:10px !important;
  }

  .toowie-product .features-page .features-overview-nav-placeholders:where([data-page="index"], [data-page="index"] *){
    left:0 !important;
  }

  .toowie-product .features-page .features-overview-nav-rejection:where([data-page="index"], [data-page="index"] *){
    left:calc(100% - (255px * var(--hero-ui-scale))) !important;
  }

  .toowie-product .features-page .features-overview-nav-editmode:where([data-page="index"], [data-page="index"] *){
    left:0 !important;
  }

  .toowie-product .features-page .features-overview-nav-card small:where([data-page="index"], [data-page="index"] *){
    display:block !important;
  }
}


/* Responsive Korrekturen: Akquise-Manager Startseite */
@media(max-width:1049px){
  .toowie-product #gespraech .phase-overview-box:where([data-page="index"], [data-page="index"] *){
    border:0;
  }
}

@media(max-width:820px){
  .toowie-product .home-footer-compact .home-footer-company-row:where([data-page="index"], [data-page="index"] *){
    flex-direction:row;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
  }

  .toowie-product .home-footer-compact .home-footer-company-block:where([data-page="index"], [data-page="index"] *),.toowie-product .home-footer-compact .home-footer-company-brand:where([data-page="index"], [data-page="index"] *),.toowie-product .home-footer-compact .home-footer-company-line:where([data-page="index"], [data-page="index"] *){
    width:auto;
    align-items:flex-start;
    text-align:left;
  }

  .toowie-product .home-footer-compact .home-footer-company-name:where([data-page="index"], [data-page="index"] *),.toowie-product .home-footer-compact .home-footer-company-address:where([data-page="index"], [data-page="index"] *){
    text-align:left;
  }

  .toowie-product .home-footer-compact .home-footer-contact-row:where([data-page="index"], [data-page="index"] *){
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:0;
    width:max-content;
    max-width:50%;
    margin-left:auto;
    transform:none;
  }

  .toowie-product .home-footer-compact .home-footer-inline-contact:where([data-page="index"], [data-page="index"] *){
    width:auto;
    max-width:100%;
    justify-content:flex-start;
    text-align:left;
  }
}

@media(max-width:400px){
  .toowie-product .home-footer-compact .home-footer-company-row:where([data-page="index"], [data-page="index"] *){
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    text-align:center;
  }

  .toowie-product .home-footer-compact .home-footer-company-block:where([data-page="index"], [data-page="index"] *),.toowie-product .home-footer-compact .home-footer-company-brand:where([data-page="index"], [data-page="index"] *),.toowie-product .home-footer-compact .home-footer-company-line:where([data-page="index"], [data-page="index"] *){
    width:100%;
    align-items:center;
    text-align:center;
  }

  .toowie-product .home-footer-compact .home-footer-company-name:where([data-page="index"], [data-page="index"] *),.toowie-product .home-footer-compact .home-footer-company-address:where([data-page="index"], [data-page="index"] *){
    width:100%;
    text-align:center;
  }

  .toowie-product .home-footer-compact .home-footer-contact-row:where([data-page="index"], [data-page="index"] *){
    width:min(100%,230px);
    max-width:230px;
    margin-left:auto;
    margin-right:auto;
    align-items:stretch;
  }

  .toowie-product .home-footer-compact .home-footer-inline-contact:where([data-page="index"], [data-page="index"] *){
    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    align-items:center;
    column-gap:10px;
    width:100%;
    max-width:100%;
    justify-content:initial;
    text-align:center;
  }

  .toowie-product .home-footer-compact .home-footer-inline-contact .home-footer-inline-icon:where([data-page="index"], [data-page="index"] *){
    justify-self:start;
  }

  .toowie-product .home-footer-compact .home-footer-inline-contact > span:last-child:where([data-page="index"], [data-page="index"] *),.toowie-product .home-footer-compact .home-footer-inline-contact small:where([data-page="index"], [data-page="index"] *),.toowie-product .home-footer-compact .home-footer-inline-contact strong:where([data-page="index"], [data-page="index"] *){
    width:100%;
    text-align:center;
  }

  .toowie-product .home-footer-compact .home-footer-bottom:where([data-page="index"], [data-page="index"] *){
    width:100%;
    align-items:center;
    text-align:center;
  }

  .toowie-product .home-footer-compact .footer-legal:where([data-page="index"], [data-page="index"] *){
    order:1;
    width:100%;
    justify-content:center;
  }

  .toowie-product .home-footer-compact .home-footer-bottom .copyright:where([data-page="index"], [data-page="index"] *){
    order:2;
    width:100%;
    text-align:center;
  }
}


/* Responsive Navigation: Desktop bleibt einzeilig; bei zu wenig Platz wird das Menü kompakt. */
@media (min-width:1051px) and (max-width:1103px){
  .toowie-product .nav:where([data-page="index"], [data-page="index"] *){
    gap:16px;
  }

  .toowie-product .nav-links:where([data-page="index"], [data-page="index"] *){
    gap:20px;
    white-space:nowrap;
  }

  .toowie-product .nav > .brand:where([data-page="index"], [data-page="index"] *),.toowie-product .nav-links > a:where([data-page="index"], [data-page="index"] *),.toowie-product .nav-dropdown-trigger:where([data-page="index"], [data-page="index"] *){
    white-space:nowrap;
  }

  .toowie-product .nav > .btn-small:where([data-page="index"], [data-page="index"] *){
    width:42px;
    min-width:42px;
    padding:0;
    gap:0;
    font-size:0;
  }

  .toowie-product .nav > .btn-small svg:where([data-page="index"], [data-page="index"] *){
    width:18px;
    height:18px;
  }
}

/* Kompakte Desktop-Navigation: unter 1051 px bleibt die Navigation bewusst länger sichtbar. */
@media (min-width:861px) and (max-width:1050px){
  .toowie-product .nav:where([data-page="index"], [data-page="index"] *){
    height:76px;
    gap:12px;
  }

  .toowie-product .nav > .brand:where([data-page="index"], [data-page="index"] *){
    flex:0 0 auto;
    min-width:0;
    max-width:none;
    gap:8px;
  }

  /* Visuell kompakter Markenname: ohne Bindestrich und bewusst zweizeilig. */
  .toowie-product .nav > .brand span:where([data-page="index"], [data-page="index"] *){
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:96px;
    white-space:normal;
    font-size:0;
    line-height:1.05;
  }

  .toowie-product .nav > .brand span:where([data-page="index"], [data-page="index"] *)::before,.toowie-product .nav > .brand span:where([data-page="index"], [data-page="index"] *)::after{
    display:block;
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
  }

  .toowie-product .nav > .brand span:where([data-page="index"], [data-page="index"] *)::before{content:"Toowie"}
  .toowie-product .nav > .brand span:where([data-page="index"], [data-page="index"] *)::after{content:"Akquise Manager"}

  .toowie-product .nav > .nav-links:where([data-page="index"], [data-page="index"] *){
    display:flex !important;
    gap:12px;
    font-size:13px;
    white-space:nowrap;
  }

  .toowie-product .nav > .nav-links > a:where([data-page="index"], [data-page="index"] *),.toowie-product .nav > .nav-links .nav-dropdown-trigger:where([data-page="index"], [data-page="index"] *){
    white-space:nowrap;
  }

  .toowie-product .nav > .btn-small:where([data-page="index"], [data-page="index"] *){
    display:inline-flex;
    width:42px;
    min-width:42px;
    padding:0;
    gap:0;
    font-size:0;
  }

  .toowie-product .nav > .btn-small svg:where([data-page="index"], [data-page="index"] *){
    width:18px;
    height:18px;
  }

  .toowie-product .mobile-nav-toggle:where([data-page="index"], [data-page="index"] *),.toowie-product .mobile-nav-panel:where([data-page="index"], [data-page="index"] *){
    display:none !important;
  }
}

/* Erst wenn auch die kompakte Desktop-Zeile zu eng wird, auf Hamburger wechseln. */
@media (min-width:761px) and (max-width:860px){
  .toowie-product .nav:where([data-page="index"], [data-page="index"] *){
    position:relative;
    height:76px;
    gap:12px;
  }

  .toowie-product .nav > .brand:where([data-page="index"], [data-page="index"] *){
    min-width:0;
    max-width:calc(100% - 54px);
  }

  .toowie-product .nav > .brand span:where([data-page="index"], [data-page="index"] *){
    min-width:0;
    white-space:nowrap;
  }

  .toowie-product .nav > .btn:where([data-page="index"], [data-page="index"] *){
    display:none;
  }

  .toowie-product .mobile-nav-toggle:where([data-page="index"], [data-page="index"] *){
    appearance:none;
    width:42px;
    height:42px;
    flex:0 0 42px;
    margin-left:auto;
    padding:10px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:12px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    gap:5px;
    color:#fff;
    background:rgba(255,255,255,.08);
    cursor:pointer;
  }

  .toowie-product .mobile-nav-toggle span:where([data-page="index"], [data-page="index"] *){
    display:block;
    width:100%;
    height:2px;
    border-radius:999px;
    background:currentColor;
    transform-origin:center;
    transition:transform .18s ease,opacity .18s ease;
  }

  .toowie-product .nav.is-mobile-open .mobile-nav-toggle span:nth-child(1):where([data-page="index"], [data-page="index"] *){transform:translateY(7px) rotate(45deg)}
  .toowie-product .nav.is-mobile-open .mobile-nav-toggle span:nth-child(2):where([data-page="index"], [data-page="index"] *){opacity:0}
  .toowie-product .nav.is-mobile-open .mobile-nav-toggle span:nth-child(3):where([data-page="index"], [data-page="index"] *){transform:translateY(-7px) rotate(-45deg)}

  .toowie-product .mobile-nav-panel:where([data-page="index"], [data-page="index"] *){
    position:absolute;
    top:68px;
    left:0;
    right:0;
    z-index:80;
    max-height:calc(100dvh - 86px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:10px;
    border:1px solid rgba(198,154,87,.36);
    border-radius:16px;
    background:rgba(5,18,39,.985);
    box-shadow:0 24px 56px rgba(0,0,0,.34);
  }

  .toowie-product .nav.is-mobile-open .mobile-nav-panel:where([data-page="index"], [data-page="index"] *){
    display:block;
  }

  .toowie-product .mobile-nav-panel .nav-links:where([data-page="index"], [data-page="index"] *){
    display:grid !important;
    align-items:stretch;
    gap:4px;
    width:100%;
    color:#fff;
    font-size:14px;
  }

  .toowie-product .mobile-nav-panel .nav-links > a:where([data-page="index"], [data-page="index"] *),.toowie-product .mobile-nav-panel .nav-dropdown-trigger:where([data-page="index"], [data-page="index"] *){
    width:100%;
    min-height:44px;
    padding:11px 12px;
    justify-content:space-between;
    border-radius:10px;
    white-space:normal;
  }

  .toowie-product .mobile-nav-panel .nav-dropdown:where([data-page="index"], [data-page="index"] *){
    display:block;
    width:100%;
  }

  .toowie-product .mobile-nav-panel .nav-dropdown-menu:where([data-page="index"], [data-page="index"] *){
    position:static;
    width:100%;
    min-width:0;
    margin:0;
    padding:0 0 4px 14px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    opacity:1;
    visibility:visible;
    transform:none;
  }

  .toowie-product .mobile-nav-panel .nav-dropdown-menu:where([data-page="index"], [data-page="index"] *):before{
    display:none;
  }

  .toowie-product .mobile-nav-panel .nav-dropdown-menu a:where([data-page="index"], [data-page="index"] *){
    min-height:40px;
    display:flex;
    align-items:center;
    padding:9px 12px;
    color:rgba(255,255,255,.72);
    white-space:normal;
  }

  .toowie-product .mobile-nav-panel .nav-dropdown-menu a:hover:where([data-page="index"], [data-page="index"] *),.toowie-product .mobile-nav-panel .nav-dropdown-menu a:focus-visible:where([data-page="index"], [data-page="index"] *){
    color:#fff;
    background:rgba(255,255,255,.08);
  }

  .toowie-product .mobile-nav-panel .mobile-nav-login:where([data-page="index"], [data-page="index"] *){
    width:100%;
    min-height:46px;
    margin-top:8px;
    display:flex !important;
    font-size:12px;
  }
}

/* CTA-Vorteile: Haken und Text bleiben auch bei schmalen Breiten sauber vertikal zentriert. */
.toowie-product .final-benefits span:where([data-page="index"], [data-page="index"] *){
  align-items:center;
}

.toowie-product .final-benefits i:where([data-page="index"], [data-page="index"] *){
  flex:0 0 20px;
  line-height:1;
}

/* Exakter 1050px-Fix: Navigation bleibt in einer Zeile und wechselt nicht in einen Zwischenzustand. */
@media (width:1050px){
  .toowie-product .nav:where([data-page="index"], [data-page="index"] *){
    flex-wrap:nowrap;
    gap:10px;
  }

  .toowie-product .nav > .brand:where([data-page="index"], [data-page="index"] *){
    flex:0 0 auto;
  }

  .toowie-product .nav > .nav-links:where([data-page="index"], [data-page="index"] *){
    display:flex !important;
    flex:1 1 auto;
    min-width:0;
    flex-wrap:nowrap !important;
    gap:10px;
    font-size:12px;
  }

  .toowie-product .nav > .nav-links > a:where([data-page="index"], [data-page="index"] *),.toowie-product .nav > .nav-links .nav-dropdown:where([data-page="index"], [data-page="index"] *),.toowie-product .nav > .nav-links .nav-dropdown-trigger:where([data-page="index"], [data-page="index"] *){
    flex:0 0 auto;
    white-space:nowrap;
  }

  .toowie-product .nav > .btn-small:where([data-page="index"], [data-page="index"] *){
    flex:0 0 40px;
    width:40px;
    min-width:40px;
  }

  .toowie-product .mobile-nav-toggle:where([data-page="index"], [data-page="index"] *),.toowie-product .mobile-nav-panel:where([data-page="index"], [data-page="index"] *){
    display:none !important;
  }
}


/* Smartphone-CTA bis einschließlich 400px:
   Überschrift -> Beschreibung -> Aktionsbox -> drei Vorteile. */
@media (max-width:400px){
  .toowie-product .final-card:where([data-page="index"], [data-page="index"] *){
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    gap:0 !important;
  }

  .toowie-product .final-copy:where([data-page="index"], [data-page="index"] *){
    display:contents;
  }

  .toowie-product .final-copy .final-eyebrow:where([data-page="index"], [data-page="index"] *){order:1}
  .toowie-product .final-copy h2:where([data-page="index"], [data-page="index"] *){order:2}
  .toowie-product .final-copy .final-lead:where([data-page="index"], [data-page="index"] *){order:3}

  .toowie-product .final-actions:where([data-page="index"], [data-page="index"] *){
    order:4;
    width:100%;
    max-width:none !important;
    margin-top:24px;
  }

  .toowie-product .final-benefits:where([data-page="index"], [data-page="index"] *){
    order:5;
    width:100%;
    margin-top:18px !important;
  }

  .toowie-product .final-copy .final-eyebrow:where([data-page="index"], [data-page="index"] *),.toowie-product .final-copy h2:where([data-page="index"], [data-page="index"] *),.toowie-product .final-copy .final-lead:where([data-page="index"], [data-page="index"] *),.toowie-product .final-benefits:where([data-page="index"], [data-page="index"] *){
    position:relative;
    z-index:2;
  }
}

/* Gesprächsphasen 400–760px: Überschriften richten sich dynamisch an der höchsten Zeile aus. */
@media (min-width:400px) and (max-width:760px){
  .toowie-product #gespraech .phase-card h3:where([data-page="index"], [data-page="index"] *){
    display:flex;
    align-items:center;
  }
}


/* Schwebende Gesprächsphasen-Navigation bis 400px:
   alle fünf Ziele ohne horizontales Scrollen; umgebrochene Titel geben
   dynamisch die gemeinsame Titelhöhe vor. */
@media (max-width:400px){
  .toowie-product .phase-floating-nav:where([data-page="index"], [data-page="index"] *){
    left:50% !important;
    right:auto !important;
    width:calc(100vw - 10px) !important;
    max-width:calc(100vw - 10px) !important;
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:stretch;
    justify-content:stretch !important;
    gap:clamp(2px,.8vw,4px) !important;
    padding:0 !important;
    overflow:visible !important;
    transform:translate(-50%,12px) !important;
  }

  .toowie-product .phase-floating-nav.is-visible:where([data-page="index"], [data-page="index"] *){
    transform:translate(-50%,0) !important;
  }

  .toowie-product .phase-floating-link:where([data-page="index"], [data-page="index"] *){
    width:100%;
    min-width:0;
    min-height:52px;
    align-items:flex-start;
    gap:5px;
    padding:6px clamp(2px,1vw,4px) 7px;
    border-width:1px;
    border-radius:6px;
    font-size:clamp(6.4px,2.15vw,8.5px);
    line-height:1.08;
    white-space:normal;
    overflow:visible;
  }

  .toowie-product .phase-floating-number:where([data-page="index"], [data-page="index"] *){
    font-size:clamp(5.5px,1.8vw,7px);
  }

  .toowie-product .phase-floating-title:where([data-page="index"], [data-page="index"] *){
    display:flex;
    width:100%;
    min-width:0;
    max-width:100%;
    align-items:center;
    white-space:normal;
    overflow:visible;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
  }
}

@media(max-width:900px){
  .toowie-product .legal-document-footer:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr;
    gap:24px;
    justify-items:start;
  }
  .toowie-product .legal-pdf-download:where([data-page="index"], [data-page="index"] *){
    justify-self:start;
  }
  .toowie-product .legal-document-date:where([data-page="index"], [data-page="index"] *){
    justify-self:start;
  }
}
@media(max-width:760px){
  .toowie-product .legal-page-heading:where([data-page="index"], [data-page="index"] *){
    margin-bottom:16px;
  }
  .toowie-product .legal-document-title:where([data-page="index"], [data-page="index"] *){
    font-size:20px;
  }
  .toowie-product .impressum-document .legal-document-body h2:where([data-page="index"], [data-page="index"] *){
    margin-top:24px;
    font-size:14px;
  }
  .toowie-product .impressum-document .legal-document-body p:where([data-page="index"], [data-page="index"] *),.toowie-product .impressum-document .legal-document-body li:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-source-entry:where([data-page="index"], [data-page="index"] *){
    font-size:11px;
  }
  .toowie-product .legal-document-meta:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:minmax(86px,max-content) 10px minmax(0,1fr);
    gap:8px 10px;
  }
  .toowie-product .legal-document-meta dt:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-document-meta dd:where([data-page="index"], [data-page="index"] *){
    font-size:12px;
  }
  .toowie-product .legal-document-date > strong:where([data-page="index"], [data-page="index"] *){
    font-size:16px;
    margin-bottom:14px;
  }
  .toowie-product .legal-sources-card:where([data-page="index"], [data-page="index"] *){
    padding:22px 18px;
  }
}


/* LEGAL PAGES CLEAN REFRESH START */
.toowie-product .legal-page:where([data-page="index"], [data-page="index"] *){
  background:#fff;
  color:#243b53;
}
.toowie-product .legal-page .legal-document-section:where([data-page="index"], [data-page="index"] *){
  min-height:auto;
  padding:42px 0 74px;
  background:#fff;
}
.toowie-product .legal-page .legal-page-heading:where([data-page="index"], [data-page="index"] *){
  width:min(1000px,100%);
  margin:0 auto 18px;
  text-align:left;
}
.toowie-product .legal-page .legal-page-heading h1:where([data-page="index"], [data-page="index"] *){
  margin:0;
  color:#104e8b;
  font-size:clamp(38px,5vw,62px);
  font-weight:900;
  letter-spacing:-.04em;
}
.toowie-product .legal-page .legal-document:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-sources-card:where([data-page="index"], [data-page="index"] *){
  background:#f4f7fb;
}
.toowie-product .legal-page .legal-document:where([data-page="index"], [data-page="index"] *){
  position:relative;
  width:min(1000px,100%);
  margin:0 auto;
  padding:44px 48px 40px;
  border:1px solid #d9e4ef;
  border-radius:18px;
  box-shadow:0 16px 38px rgba(15,23,42,.06);
}
.toowie-product .legal-page .legal-document:where([data-page="index"], [data-page="index"] *):before{
  display:none;
}
.toowie-product .legal-page .legal-document-head:where([data-page="index"], [data-page="index"] *){
  position:relative;
  display:block;
  margin:0 0 24px;
  padding:0 0 4px;
  border:0;
  text-align:left;
}
.toowie-product .legal-page .legal-document-logo:where([data-page="index"], [data-page="index"] *){
  position:absolute;
  top:0;
  right:0;
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
}
.toowie-product .legal-page .legal-document-logo img:where([data-page="index"], [data-page="index"] *){
  width:124px;
  height:auto;
}
.toowie-product .legal-page .legal-document-title:where([data-page="index"], [data-page="index"] *){
  margin:0;
  color:#104e8b;
  font-size:28px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.03em;
}
.toowie-product .legal-page .legal-document-body:where([data-page="index"], [data-page="index"] *){
  max-width:none;
}
.toowie-product .legal-page .legal-document-body h2:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-document-body h3:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-sources h2:where([data-page="index"], [data-page="index"] *){
  color:#104e8b;
}
.toowie-product .legal-page .legal-document-body h2:where([data-page="index"], [data-page="index"] *){
  margin:24px 0 10px;
  font-size:22px;
  font-weight:800;
  line-height:1.3;
  letter-spacing:-.02em;
}
.toowie-product .legal-page .legal-document-body h2:first-child:where([data-page="index"], [data-page="index"] *){
  margin-top:0;
}
.toowie-product .legal-page .legal-document-body h3:where([data-page="index"], [data-page="index"] *){
  margin:20px 0 8px;
  font-size:18px;
  font-weight:800;
  line-height:1.35;
}
.toowie-product .legal-page .legal-document-body p:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-document-body li:where([data-page="index"], [data-page="index"] *){
  color:#334e68;
  font-size:14px;
  line-height:1.64;
}
.toowie-product .legal-page .legal-document-body p:where([data-page="index"], [data-page="index"] *){
  margin:0 0 10px;
}
.toowie-product .legal-page .legal-document-body ul:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-document-body ol:where([data-page="index"], [data-page="index"] *){
  margin:8px 0 14px;
  padding-left:22px;
}
.toowie-product .legal-page .legal-document-body strong:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-source-entry strong:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-document-meta dt:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-document-date > strong:where([data-page="index"], [data-page="index"] *){
  color:#104e8b;
}
.toowie-product .legal-page .legal-document-body a:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-source-entry a:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-document-meta a:where([data-page="index"], [data-page="index"] *){
  color:#2563eb;
  text-decoration:none;
}
.toowie-product .legal-page .legal-document-body a:hover:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-document-body a:focus-visible:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-source-entry a:hover:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-source-entry a:focus-visible:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-document-meta a:hover:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-document-meta a:focus-visible:where([data-page="index"], [data-page="index"] *){
  color:#104e8b;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.toowie-product .legal-page .legal-contact:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-note:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-table-wrap:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-sources-card:where([data-page="index"], [data-page="index"] *){
  border:1px solid #d9e4ef;
  border-radius:16px;
  background:#fbfcfd;
  box-shadow:0 8px 24px rgba(15,23,42,.04);
}
.toowie-product .legal-page .legal-contact:where([data-page="index"], [data-page="index"] *){
  margin:16px 0 20px;
  padding:18px 20px;
}
.toowie-product .legal-page .legal-note:where([data-page="index"], [data-page="index"] *){
  margin:18px 0;
  padding:16px 18px;
  border-left:4px solid #104e8b;
  color:#486581;
}
.toowie-product .legal-page .legal-table-wrap:where([data-page="index"], [data-page="index"] *){
  margin:18px 0 24px;
  overflow-x:auto;
}
.toowie-product .legal-page .legal-table:where([data-page="index"], [data-page="index"] *){
  width:100%;
  min-width:650px;
  border-collapse:collapse;
}
.toowie-product .legal-page .legal-table th:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-table td:where([data-page="index"], [data-page="index"] *){
  padding:13px 14px;
  border-bottom:1px solid #e5e7eb;
  text-align:left;
  vertical-align:top;
  font-size:13px;
  line-height:1.55;
}
.toowie-product .legal-page .legal-table th:where([data-page="index"], [data-page="index"] *){
  background:#f7f9fb;
  color:#104e8b;
  font-weight:800;
}
.toowie-product .legal-page .legal-table td:where([data-page="index"], [data-page="index"] *){
  color:#334e68;
}
.toowie-product .legal-page .legal-table tr:last-child td:where([data-page="index"], [data-page="index"] *){
  border-bottom:0;
}
.toowie-product .legal-page .legal-document-footer:where([data-page="index"], [data-page="index"] *){
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:26px;
  align-items:start;
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid #d9e4ef;
}
.toowie-product .legal-page .legal-pdf-download:where([data-page="index"], [data-page="index"] *){
  display:inline-flex;
  align-items:flex-start;
  justify-content:flex-start;
  color:#e53945;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.toowie-product .legal-page .legal-pdf-icon:where([data-page="index"], [data-page="index"] *){
  display:inline-flex;
}
.toowie-product .legal-page .legal-pdf-icon svg:where([data-page="index"], [data-page="index"] *){
  width:88px;
  height:88px;
}
.toowie-product .legal-page .legal-pdf-download-copy:where([data-page="index"], [data-page="index"] *){
  display:none;
}
.toowie-product .legal-page .legal-document-date:where([data-page="index"], [data-page="index"] *){
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  text-align:left;
}
.toowie-product .legal-page .legal-document-date > strong:where([data-page="index"], [data-page="index"] *){
  display:block;
  margin-bottom:12px;
  font-size:22px;
  font-weight:900;
}
.toowie-product .legal-page .legal-document-meta:where([data-page="index"], [data-page="index"] *){
  display:grid;
  grid-template-columns:126px 12px minmax(0,1fr);
  gap:6px 10px;
  margin:0;
}
.toowie-product .legal-page .legal-document-meta > div:where([data-page="index"], [data-page="index"] *){
  display:contents;
}
.toowie-product .legal-page .legal-document-meta > div:where([data-page="index"], [data-page="index"] *)::before{
  content:":";
  grid-column:2;
  color:#829ab1;
}
.toowie-product .legal-page .legal-document-meta dt:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-document-meta dd:where([data-page="index"], [data-page="index"] *){
  margin:0;
  font-size:14px;
  line-height:1.45;
}
.toowie-product .legal-page .legal-document-meta dt:where([data-page="index"], [data-page="index"] *){
  grid-column:1;
  font-weight:800;
}
.toowie-product .legal-page .legal-document-meta dd:where([data-page="index"], [data-page="index"] *){
  grid-column:3;
  color:#334e68;
}
.toowie-product .legal-page .legal-sources:where([data-page="index"], [data-page="index"] *){
  width:min(1000px,100%);
  margin:38px auto 0;
}
.toowie-product .legal-page .legal-sources h2:where([data-page="index"], [data-page="index"] *){
  margin:0 0 16px;
  text-align:center;
  font-size:clamp(30px,4vw,46px);
  font-weight:900;
  line-height:1.08;
  letter-spacing:-.03em;
}
.toowie-product .legal-page .legal-sources-card:where([data-page="index"], [data-page="index"] *){
  padding:26px 28px;
}
.toowie-product .legal-page .legal-source-entry:where([data-page="index"], [data-page="index"] *){
  color:#334e68;
  font-size:14px;
  line-height:1.68;
}
.toowie-product .legal-page .legal-source-entry + .legal-source-entry:where([data-page="index"], [data-page="index"] *){
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid #e5e7eb;
}
@media(max-width:900px){
  .toowie-product .legal-page .legal-document:where([data-page="index"], [data-page="index"] *){
    padding:34px 24px 32px;
  }
  .toowie-product .legal-page .legal-document-footer:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr;
    gap:18px;
  }
}
@media(max-width:760px){
  .toowie-product .legal-page .legal-document-section:where([data-page="index"], [data-page="index"] *){
    padding:28px 0 48px;
  }
  .toowie-product .legal-page .legal-page-heading:where([data-page="index"], [data-page="index"] *){
    margin-bottom:14px;
  }
  .toowie-product .legal-page .legal-document:where([data-page="index"], [data-page="index"] *){
    padding:28px 18px 24px;
    border-radius:14px;
  }
  .toowie-product .legal-page .legal-document-head:where([data-page="index"], [data-page="index"] *){
    margin-bottom:18px;
    padding-top:0;
  }
  .toowie-product .legal-page .legal-document-logo:where([data-page="index"], [data-page="index"] *){
    position:static;
    display:flex;
    justify-content:flex-start;
    margin-bottom:12px;
  }
  .toowie-product .legal-page .legal-document-logo img:where([data-page="index"], [data-page="index"] *){
    width:110px;
  }
  .toowie-product .legal-page .legal-page-heading h1:where([data-page="index"], [data-page="index"] *){
    font-size:32px;
  }
  .toowie-product .legal-page .legal-document-title:where([data-page="index"], [data-page="index"] *){
    font-size:24px;
  }
  .toowie-product .legal-page .legal-document-body h2:where([data-page="index"], [data-page="index"] *){
    margin-top:22px;
    font-size:19px;
  }
  .toowie-product .legal-page .legal-document-body h3:where([data-page="index"], [data-page="index"] *){
    font-size:16px;
  }
  .toowie-product .legal-page .legal-document-body p:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-document-body li:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-source-entry:where([data-page="index"], [data-page="index"] *){
    font-size:13px;
  }
  .toowie-product .legal-page .legal-sources-card:where([data-page="index"], [data-page="index"] *){
    padding:20px 18px;
  }
  .toowie-product .legal-page .legal-document-date > strong:where([data-page="index"], [data-page="index"] *){
    font-size:18px;
    margin-bottom:10px;
  }
  .toowie-product .legal-page .legal-document-meta:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:88px 10px minmax(0,1fr);
    gap:6px 8px;
  }
  .toowie-product .legal-page .legal-document-meta dt:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-document-meta dd:where([data-page="index"], [data-page="index"] *){
    font-size:12px;
  }
  .toowie-product .legal-page .legal-pdf-icon svg:where([data-page="index"], [data-page="index"] *){
    width:76px;
    height:76px;
  }
}

/* LEGAL PAGES – REFERENCE LAYOUT FINAL */
.toowie-product .legal-page .legal-page-heading:where([data-page="index"], [data-page="index"] *){
  width:min(1000px,100%);
  margin:0 auto 12px;
  text-align:center;
}
.toowie-product .legal-page .legal-page-heading h1:where([data-page="index"], [data-page="index"] *){
  margin:0;
  text-align:center;
}
.toowie-product .legal-page .legal-page-updated:where([data-page="index"], [data-page="index"] *){
  margin:4px 0 0;
  color:#66788a;
  font-size:12px;
  font-weight:600;
  line-height:1.35;
}

.toowie-product .legal-page .legal-document-head:where([data-page="index"], [data-page="index"] *){
  position:relative;
  display:block;
  min-height:38px;
  margin:0 0 8px;
  padding:0;
  border:0;
}
.toowie-product .legal-page .legal-document-logo:where([data-page="index"], [data-page="index"] *){
  position:absolute;
  top:0;
  right:0;
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
}
.toowie-product .legal-page .legal-document-logo img:where([data-page="index"], [data-page="index"] *){
  width:118px;
  height:auto;
}

/* Links wirken im Ruhezustand wie normaler Text. Erst bei Interaktion werden sie sichtbar als Link markiert. */
.toowie-product .legal-page .legal-document-body a:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-source-entry a:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-document-meta a:where([data-page="index"], [data-page="index"] *){
  color:inherit;
  font-weight:inherit;
  text-decoration:none;
  cursor:pointer;
}
.toowie-product .legal-page .legal-document-body a:hover:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-document-body a:focus-visible:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-document-body a:active:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-source-entry a:hover:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-source-entry a:focus-visible:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-source-entry a:active:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-document-meta a:hover:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-document-meta a:focus-visible:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-document-meta a:active:where([data-page="index"], [data-page="index"] *){
  color:#104e8b;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

/* Footer wie in der Programmierung: keine Unterboxen, kein Zusatztext, nur PDF-Icon und Stammdaten. */
.toowie-product .legal-page .legal-document-footer:where([data-page="index"], [data-page="index"] *){
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(300px,360px) !important;
  gap:36px !important;
  align-items:center !important;
  margin-top:22px !important;
  padding:24px 0 0 !important;
  border:0 !important;
  border-top:1px solid #d9e4ef !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.toowie-product .legal-page .legal-document-footer > *:where([data-page="index"], [data-page="index"] *){
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.toowie-product .legal-page .legal-pdf-download:where([data-page="index"], [data-page="index"] *){
  justify-self:center !important;
  align-self:center !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  gap:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#e63946 !important;
  line-height:0 !important;
  text-decoration:none !important;
  transform:none !important;
}
.toowie-product .legal-page .legal-pdf-download:where([data-page="index"], [data-page="index"] *)::before,.toowie-product .legal-page .legal-pdf-download:where([data-page="index"], [data-page="index"] *)::after{
  display:none !important;
  content:none !important;
}
.toowie-product .legal-page .legal-pdf-download-copy:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-pdf-download > small:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-pdf-download > strong:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-pdf-download > span:not(.legal-pdf-icon):where([data-page="index"], [data-page="index"] *){
  display:none !important;
}
.toowie-product .legal-page .legal-pdf-icon:where([data-page="index"], [data-page="index"] *){
  display:block !important;
  width:80px !important;
  height:80px !important;
  margin:0 !important;
  line-height:0 !important;
}
.toowie-product .legal-page .legal-pdf-icon svg:where([data-page="index"], [data-page="index"] *){
  display:block !important;
  width:80px !important;
  height:80px !important;
  overflow:visible;
}
.toowie-product .legal-page .legal-pdf-download:hover:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-pdf-download:focus-visible:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-pdf-download:active:where([data-page="index"], [data-page="index"] *){
  color:#cf2634 !important;
  text-decoration:none !important;
  transform:none !important;
}

.toowie-product .legal-page .legal-document-date:where([data-page="index"], [data-page="index"] *){
  justify-self:end !important;
  align-self:center !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  text-align:left !important;
}
.toowie-product .legal-page .legal-document-date > strong:where([data-page="index"], [data-page="index"] *){
  display:block;
  margin:0 0 14px !important;
  color:#104e8b;
  font-size:20px !important;
  font-weight:900;
  line-height:1.2 !important;
}

/* Jede Metazeile ist ein eigenes Grid. Dadurch stehen die Doppelpunkte direkt in der jeweiligen Zeile
   und es entstehen keine leeren Zwischenzeilen oberhalb von „Unternehmen“. */
.toowie-product .legal-page .legal-document-meta:where([data-page="index"], [data-page="index"] *){
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:8px !important;
  margin:0 !important;
  padding:0 !important;
}
.toowie-product .legal-page .legal-document-meta > div:where([data-page="index"], [data-page="index"] *){
  display:grid !important;
  grid-template-columns:126px 12px minmax(0,1fr) !important;
  column-gap:10px !important;
  align-items:start !important;
}
.toowie-product .legal-page .legal-document-meta > div:where([data-page="index"], [data-page="index"] *)::before{
  content:":" !important;
  display:block !important;
  grid-column:2 !important;
  grid-row:1 !important;
  color:#829ab1;
}
.toowie-product .legal-page .legal-document-meta dt:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-document-meta dd:where([data-page="index"], [data-page="index"] *){
  margin:0 !important;
  font-size:14px !important;
  line-height:1.4 !important;
}
.toowie-product .legal-page .legal-document-meta dt:where([data-page="index"], [data-page="index"] *){
  grid-column:1 !important;
  grid-row:1 !important;
  color:#104e8b;
  font-weight:800;
}
.toowie-product .legal-page .legal-document-meta dd:where([data-page="index"], [data-page="index"] *){
  grid-column:3 !important;
  grid-row:1 !important;
  color:#334e68;
}

@media(max-width:900px){
  .toowie-product .legal-page .legal-document-footer:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:minmax(0,1fr) minmax(270px,330px) !important;
    gap:24px !important;
  }
}
@media(max-width:760px){
  .toowie-product .legal-page .legal-page-heading:where([data-page="index"], [data-page="index"] *){
    margin-bottom:10px;
  }
  .toowie-product .legal-page .legal-page-updated:where([data-page="index"], [data-page="index"] *){
    margin-top:3px;
    font-size:11px;
  }
  .toowie-product .legal-page .legal-document-head:where([data-page="index"], [data-page="index"] *){
    min-height:34px;
    margin-bottom:6px;
  }
  .toowie-product .legal-page .legal-document-logo:where([data-page="index"], [data-page="index"] *){
    position:absolute;
    top:0;
    right:0;
    margin:0;
  }
  .toowie-product .legal-page .legal-document-logo img:where([data-page="index"], [data-page="index"] *){
    width:100px;
  }
  .toowie-product .legal-page .legal-document-footer:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr !important;
    gap:16px !important;
    justify-items:start !important;
  }
  .toowie-product .legal-page .legal-pdf-download:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-document-date:where([data-page="index"], [data-page="index"] *){
    justify-self:start !important;
  }
  .toowie-product .legal-page .legal-pdf-icon:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-pdf-icon svg:where([data-page="index"], [data-page="index"] *){
    width:72px !important;
    height:72px !important;
  }
  .toowie-product .legal-page .legal-document-date > strong:where([data-page="index"], [data-page="index"] *){
    margin-bottom:12px !important;
    font-size:18px !important;
  }
  .toowie-product .legal-page .legal-document-meta:where([data-page="index"], [data-page="index"] *){
    gap:7px !important;
  }
  .toowie-product .legal-page .legal-document-meta > div:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:88px 10px minmax(0,1fr) !important;
    column-gap:8px !important;
  }
  .toowie-product .legal-page .legal-document-meta dt:where([data-page="index"], [data-page="index"] *),.toowie-product .legal-page .legal-document-meta dd:where([data-page="index"], [data-page="index"] *){
    font-size:12px !important;
  }
}


/* Quellenverzeichnis: Box im gleichen Blau-Grau wie der Rechtstext. */
.toowie-product .legal-page .legal-sources-card:where([data-page="index"], [data-page="index"] *){
  background:#f4f7fb;
}

/* Smartphone bis einschließlich 400px: die Eyebrow-Boxen der vier
   Produktseiten vollständig entfernen. Die Überschriften rücken ohne
   reservierten Leerraum direkt nach oben. */
@media (max-width:400px){
  .toowie-product .home-page .hero-copy > .eyebrow:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .hero-copy > .eyebrow:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .hero-copy > .eyebrow:where([data-page="index"], [data-page="index"] *),.toowie-product .price-hero .hero-copy > .eyebrow:where([data-page="index"], [data-page="index"] *),.toowie-product .home-page .final-copy > .final-eyebrow:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .final-copy > .final-eyebrow:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .final-copy > .final-eyebrow:where([data-page="index"], [data-page="index"] *){
    display:none !important;
    margin:0 !important;
    padding:0 !important;
    height:0 !important;
    min-height:0 !important;
  }

  .toowie-product .home-page .hero:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .hero:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .hero:where([data-page="index"], [data-page="index"] *),.toowie-product .price-hero:where([data-page="index"], [data-page="index"] *){
    padding-top:92px !important;
  }

  .toowie-product .home-page .hero-copy > h1:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .hero-copy > h1:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .hero-copy > h1:where([data-page="index"], [data-page="index"] *),.toowie-product .price-hero .hero-copy > h1:where([data-page="index"], [data-page="index"] *),.toowie-product .home-page .final-copy > h2:where([data-page="index"], [data-page="index"] *),.toowie-product .lead-manager-page .final-copy > h2:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page .final-copy > h2:where([data-page="index"], [data-page="index"] *){
    margin-top:0 !important;
  }
}


/* Startseite: gedeckte goldene Titel heben die Hinweise dezent hervor. */
.index-page .toowie-product #akquise-manager .float-card {
  background: #fbf7ef;
  border-color: #cbd5e1;
  box-shadow: 0 5px 16px rgba(15, 23, 42, .16);
  padding-right: 35px !important;
}

.index-page .toowie-product #akquise-manager .callout-click-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 23px;
  height: 23px;
  color: #8a652d;
  pointer-events: none;
}

.index-page .toowie-product #akquise-manager .float-card b {
  color: #8a652d;
  font-size: 14px !important;
  line-height: 1.25 !important;
}

.index-page .toowie-product #akquise-manager .float-card small {
  color: #526071;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.index-page .toowie-product #akquise-manager .float-card.is-active {
  background: #f8efdf;
  border-color: #b88c49;
  box-shadow: 0 7px 20px rgba(15, 23, 42, .21);
}

.index-page .toowie-product #akquise-manager .float-card:not(.is-active):hover {
  background: #fbf7ef;
  border-color: #cbd5e1;
  box-shadow: 0 5px 16px rgba(15, 23, 42, .16);
}

/* Hero-Callouts: Überschrift klarer hervorheben, Unterzeile leicht vergrößern. */
.toowie-product .hero .float-card b:where([data-page="index"], [data-page="index"] *){
  font-size:12.5px !important;
  line-height:1.2 !important;
}

.toowie-product .hero .float-card small:where([data-page="index"], [data-page="index"] *){
  font-size:9.75px !important;
  line-height:1.3 !important;
}

/* Akquise Manager: keinen gelben Zwischenraum zwischen Abschluss und finalem CTA. */
.toowie-product .home-page #gespraech.section-block:where([data-page="index"], [data-page="index"] *){
  padding-bottom:0 !important;
}

.toowie-product .home-page #gespraech .phase-overview-box:where([data-page="index"], [data-page="index"] *){
  padding-bottom:0 !important;
}


/* Hamburger-Menü: Text navigiert, nur der Pfeil steuert das Untermenü. */
@media (max-width:860px){
  .toowie-product .mobile-nav-panel .nav-dropdown:where([data-page="index"], [data-page="index"] *){
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 44px;
    align-items:center;
    width:100%;
  }

  .toowie-product .mobile-nav-panel .nav-dropdown > .nav-dropdown-trigger:where([data-page="index"], [data-page="index"] *){
    grid-column:1;
    grid-row:1;
    min-width:0;
  }

  .toowie-product .mobile-nav-panel .mobile-nav-submenu-toggle:where([data-page="index"], [data-page="index"] *){
    appearance:none;
    grid-column:2;
    grid-row:1;
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    margin:0;
    padding:0;
    border:0;
    border-radius:10px;
    color:rgba(255,255,255,.78);
    background:transparent;
    cursor:pointer;
  }

  .toowie-product .mobile-nav-panel .mobile-nav-submenu-toggle:hover:where([data-page="index"], [data-page="index"] *),.toowie-product .mobile-nav-panel .mobile-nav-submenu-toggle:focus-visible:where([data-page="index"], [data-page="index"] *){
    color:#fff;
    background:rgba(255,255,255,.08);
    outline:none;
  }

  .toowie-product .mobile-nav-panel .mobile-nav-submenu-toggle .nav-dropdown-arrow:where([data-page="index"], [data-page="index"] *){
    width:16px;
    height:16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:0;
    transform:translateY(-1px);
    transform-origin:50% 50%;
    transition:transform .18s ease;
  }

  .toowie-product .mobile-nav-panel .mobile-nav-submenu-toggle .nav-dropdown-arrow svg:where([data-page="index"], [data-page="index"] *){
    width:14px;
    height:14px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .toowie-product .mobile-nav-panel .nav-dropdown.is-mobile-submenu-open .mobile-nav-submenu-toggle .nav-dropdown-arrow:where([data-page="index"], [data-page="index"] *){
    transform:translateY(-1px) rotate(180deg) !important;
  }

  .toowie-product .mobile-nav-panel .nav-dropdown > .nav-dropdown-menu:where([data-page="index"], [data-page="index"] *){
    grid-column:1 / -1;
    grid-row:2;
  }
}

/* Hamburger-Menü: geöffneter oder aktuell gewählter Dropdown-Kopf vollständig gold umranden. */
@media (max-width:860px){
  .toowie-product .mobile-nav-panel .nav-dropdown.is-mobile-submenu-open > .nav-dropdown-trigger:where([data-page="index"], [data-page="index"] *),.toowie-product .mobile-nav-panel .nav-dropdown > .nav-dropdown-trigger.nav-current:where([data-page="index"], [data-page="index"] *){
    border-color:var(--gold) !important;
    border-right-color:transparent !important;
    border-radius:10px 0 0 10px !important;
    background:rgba(198,154,87,.08);
  }

  .toowie-product .mobile-nav-panel .nav-dropdown.is-mobile-submenu-open > .mobile-nav-submenu-toggle:where([data-page="index"], [data-page="index"] *),.toowie-product .mobile-nav-panel .nav-dropdown > .nav-dropdown-trigger.nav-current + .mobile-nav-submenu-toggle:where([data-page="index"], [data-page="index"] *){
    border:1px solid var(--gold) !important;
    border-left:0 !important;
    border-radius:0 10px 10px 0 !important;
    background:rgba(198,154,87,.08);
    color:#fff;
  }
}

/* Funktionen & Extras – Smartphone bis 400px:
   Nur die Nummern-Boxen der Zugangsvarianten zentrieren.
   Die Texte bleiben linksbündig. Beim Rejection Tracker erhält die
   Dreier-Auflistung links denselben goldenen Strich wie die anderen Listen. */
@media (max-width:400px){
  .toowie-product .features-page #team .section-head:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page #team .section-head h2:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page #team .section-head p:where([data-page="index"], [data-page="index"] *){
    text-align:left !important;
  }

  .toowie-product .features-page #team .team-step:where([data-page="index"], [data-page="index"] *){
    margin-left:0;
    margin-right:0;
  }

  .toowie-product .features-page #team .team-option-card:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page #team .team-option-card h3:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page #team .team-option-card p:where([data-page="index"], [data-page="index"] *){
    text-align:left;
  }

  .toowie-product .features-page #team .team-card-cta:where([data-page="index"], [data-page="index"] *){
    text-align:right !important;
  }

  .toowie-product .features-page #team .team-quote:where([data-page="index"], [data-page="index"] *),.toowie-product .features-page #team .team-quote p:where([data-page="index"], [data-page="index"] *){
    text-align:left !important;
    justify-content:flex-start;
  }

  .toowie-product .features-page #rejection-tracker .rejection-detail-rail:where([data-page="index"], [data-page="index"] *){
    position:relative;
    padding-left:20px !important;
    border-left:0 !important;
  }

  .toowie-product .features-page #rejection-tracker .rejection-detail-rail:where([data-page="index"], [data-page="index"] *)::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
    border-radius:999px;
    background:linear-gradient(180deg,#e9d4b0 0%,#c69a57 52%,#b88946 100%);
    box-shadow:0 0 0 1px rgba(198,154,87,.08);
  }
}

/* Integration in the Toowie corporate website */
.toowie-product .hero:where([data-page="index"], [data-page="index"] *){padding-top:92px}
.toowie-product .reveal:where([data-page="index"], [data-page="index"] *){opacity:1;transform:none}
.toowie-product .hero-copy.reveal:where([data-page="index"], [data-page="index"] *),.toowie-product .hero-visual.reveal:where([data-page="index"], [data-page="index"] *){opacity:1;transform:none}
.toowie-product .hero-visual:where([data-page="index"], [data-page="index"] *){z-index:3}
@media(max-width:760px){.toowie-product .hero:where([data-page="index"], [data-page="index"] *){padding-top:72px}}


/* Homepage Lead Manager hero: copy left, image right; lead copy in Toowie corporate blue */
.toowie-product .lead-manager-page .lead-hero:where([data-page="index"], [data-page="index"] *){
  background:linear-gradient(135deg,#f8fbfe 0%,#eef4f8 52%,#e8f1f4 100%);
  color:rgb(var(--toowie-blue-dark));
}
.toowie-product .lead-manager-page .lead-hero:where([data-page="index"], [data-page="index"] *):after{
  background:rgba(0,20,40,.10);
}
.toowie-product .lead-manager-page .lead-hero .hero-glow-one:where([data-page="index"], [data-page="index"] *){
  background:radial-gradient(circle,rgba(198,154,87,.18),rgba(198,154,87,0) 68%);
}
.toowie-product .lead-manager-page .lead-hero .hero-glow-two:where([data-page="index"], [data-page="index"] *){
  background:radial-gradient(circle,rgba(10,40,80,.10),rgba(10,40,80,0) 70%);
}
.toowie-product .lead-manager-page .lead-hero .eyebrow:where([data-page="index"], [data-page="index"] *),
.toowie-product .lead-manager-page .lead-hero h1:where([data-page="index"], [data-page="index"] *),
.toowie-product .lead-manager-page .lead-hero h1:not(:has(span)):where([data-page="index"], [data-page="index"] *),
.toowie-product .lead-manager-page .lead-hero .hero-subline:where([data-page="index"], [data-page="index"] *),
.toowie-product .lead-manager-page .lead-hero .hero-lead:where([data-page="index"], [data-page="index"] *),
.toowie-product .lead-manager-page .lead-hero .hero-points:where([data-page="index"], [data-page="index"] *){
  color:rgb(var(--toowie-blue-dark));
}

/* Homepage product heroes: identical composition, swapped visual themes */
.toowie-product #akquise-manager:where([data-page="index"], [data-page="index"] *),
.toowie-product .lead-manager-page .lead-hero:where([data-page="index"], [data-page="index"] *){
  padding:92px 0 90px !important;
}

.toowie-product #akquise-manager > .shell.hero-grid:where([data-page="index"], [data-page="index"] *),
.toowie-product .lead-manager-page .lead-hero-grid:where([data-page="index"], [data-page="index"] *){
  grid-template-columns:.82fr 1.18fr !important;
  gap:42px !important;
}

.toowie-product #akquise-manager .hero-copy:where([data-page="index"], [data-page="index"] *),
.toowie-product .lead-manager-page .lead-hero .hero-copy:where([data-page="index"], [data-page="index"] *){
  width:100% !important;
  max-width:none !important;
}

.toowie-product #akquise-manager .hero-visual:where([data-page="index"], [data-page="index"] *),
.toowie-product .lead-manager-page .lead-hero-visual:where([data-page="index"], [data-page="index"] *){
  margin-right:-180px !important;
  position:relative !important;
}

.toowie-product #akquise-manager .hero-browser:where([data-page="index"], [data-page="index"] *),
.toowie-product .lead-manager-page .lead-hero-browser:where([data-page="index"], [data-page="index"] *){
  width:112% !important;
  max-width:none !important;
}

/* Akquise Manager now uses the light Lead Manager theme */
.toowie-product #akquise-manager:where([data-page="index"], [data-page="index"] *){
  background:linear-gradient(135deg,#f8fbfe 0%,#eef4f8 52%,#e8f1f4 100%) !important;
  color:rgb(var(--toowie-blue-dark)) !important;
}
.toowie-product #akquise-manager:where([data-page="index"], [data-page="index"] *):after{
  background:rgba(0,20,40,.10) !important;
}
.toowie-product #akquise-manager .hero-glow-one:where([data-page="index"], [data-page="index"] *){
  background:radial-gradient(circle,rgba(198,154,87,.18),rgba(198,154,87,0) 68%) !important;
}
.toowie-product #akquise-manager .hero-glow-two:where([data-page="index"], [data-page="index"] *){
  background:radial-gradient(circle,rgba(10,40,80,.10),rgba(10,40,80,0) 70%) !important;
}
.toowie-product #akquise-manager .hero-copy:where([data-page="index"], [data-page="index"] *),
.toowie-product #akquise-manager .hero-copy h1:where([data-page="index"], [data-page="index"] *),
.toowie-product #akquise-manager .hero-subline:where([data-page="index"], [data-page="index"] *),
.toowie-product #akquise-manager .hero-lead:where([data-page="index"], [data-page="index"] *),
.toowie-product #akquise-manager .hero-points:where([data-page="index"], [data-page="index"] *){
  color:rgb(var(--toowie-blue-dark)) !important;
}
.toowie-product #akquise-manager .hero-copy h1 span:where([data-page="index"], [data-page="index"] *){
  color:var(--gold) !important;
}

/* Lead Manager now uses the dark Akquise Manager theme */
.toowie-product .lead-manager-page .lead-hero:where([data-page="index"], [data-page="index"] *){
  background:var(--toowie-blue) !important;
  color:#fff !important;
}
.toowie-product .lead-manager-page .lead-hero:where([data-page="index"], [data-page="index"] *):after{
  background:rgba(255,255,255,.08) !important;
}
.toowie-product .lead-manager-page .lead-hero .hero-glow-one:where([data-page="index"], [data-page="index"] *){
  background:radial-gradient(circle,rgba(198,154,87,.20),rgba(198,154,87,0) 68%) !important;
}
.toowie-product .lead-manager-page .lead-hero .hero-glow-two:where([data-page="index"], [data-page="index"] *){
  background:radial-gradient(circle,rgba(198,154,87,.14),rgba(198,154,87,0) 70%) !important;
}
.toowie-product .lead-manager-page .lead-hero .hero-copy:where([data-page="index"], [data-page="index"] *),
.toowie-product .lead-manager-page .lead-hero h1:where([data-page="index"], [data-page="index"] *),
.toowie-product .lead-manager-page .lead-hero .hero-subline:where([data-page="index"], [data-page="index"] *){
  color:#fff !important;
}
.toowie-product .lead-manager-page .lead-hero .hero-lead:where([data-page="index"], [data-page="index"] *),
.toowie-product .lead-manager-page .lead-hero .hero-points:where([data-page="index"], [data-page="index"] *){
  color:rgba(255,255,255,.72) !important;
}
.toowie-product .lead-manager-page .lead-hero h1 span:where([data-page="index"], [data-page="index"] *){
  color:#d8b77f !important;
}

@media(max-width:1180px) and (min-width:761px){
  .toowie-product #akquise-manager .hero-browser:where([data-page="index"], [data-page="index"] *),
  .toowie-product .lead-manager-page .lead-hero-browser:where([data-page="index"], [data-page="index"] *){
    width:106% !important;
  }
  .toowie-product #akquise-manager .hero-visual:where([data-page="index"], [data-page="index"] *),
  .toowie-product .lead-manager-page .lead-hero-visual:where([data-page="index"], [data-page="index"] *){
    margin-right:-120px !important;
  }
}

@media(max-width:760px){
  .toowie-product #akquise-manager:where([data-page="index"], [data-page="index"] *),
  .toowie-product .lead-manager-page .lead-hero:where([data-page="index"], [data-page="index"] *){
    padding-top:72px !important;
  }
  .toowie-product #akquise-manager > .shell.hero-grid:where([data-page="index"], [data-page="index"] *),
  .toowie-product .lead-manager-page .lead-hero-grid:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr !important;
  }
  .toowie-product #akquise-manager .hero-browser:where([data-page="index"], [data-page="index"] *),
  .toowie-product .lead-manager-page .lead-hero-browser:where([data-page="index"], [data-page="index"] *){
    width:100% !important;
  }
  .toowie-product #akquise-manager .hero-visual:where([data-page="index"], [data-page="index"] *),
  .toowie-product .lead-manager-page .lead-hero-visual:where([data-page="index"], [data-page="index"] *){
    margin-right:-72px !important;
  }
}

/* Both homepage product heroes use the dark-blue product theme */
.toowie-product #akquise-manager:where([data-page="index"], [data-page="index"] *){
  background:var(--toowie-blue) !important;
  color:#fff !important;
}
.toowie-product #akquise-manager:where([data-page="index"], [data-page="index"] *):after{
  background:rgba(255,255,255,.08) !important;
}
.toowie-product #akquise-manager .hero-glow-one:where([data-page="index"], [data-page="index"] *){
  background:radial-gradient(circle,rgba(198,154,87,.20),rgba(198,154,87,0) 68%) !important;
}
.toowie-product #akquise-manager .hero-glow-two:where([data-page="index"], [data-page="index"] *){
  background:radial-gradient(circle,rgba(198,154,87,.14),rgba(198,154,87,0) 70%) !important;
}
.toowie-product #akquise-manager .hero-copy:where([data-page="index"], [data-page="index"] *),
.toowie-product #akquise-manager .hero-copy h1:where([data-page="index"], [data-page="index"] *),
.toowie-product #akquise-manager .hero-subline:where([data-page="index"], [data-page="index"] *){
  color:#fff !important;
}
.toowie-product #akquise-manager .hero-lead:where([data-page="index"], [data-page="index"] *),
.toowie-product #akquise-manager .hero-points:where([data-page="index"], [data-page="index"] *){
  color:rgba(255,255,255,.72) !important;
}
.toowie-product #akquise-manager .hero-copy h1 span:where([data-page="index"], [data-page="index"] *){
  color:#d8b77f !important;
}

/* ========================================================================== 
   Homepage Akquise Manager – viewport-sichere Hero-Komposition
   - Screenshot und Callouts bleiben mit Seitenabstand vollständig sichtbar.
   - Zweispaltig ab 400px; erst bis 399px wird untereinander angeordnet.
   ========================================================================== */
@media (min-width:1051px){
  .toowie-product #akquise-manager > .shell.hero-grid:where([data-page="index"], [data-page="index"] *){
    width:min(1520px,calc(100% - 64px)) !important;
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr) !important;
    gap:clamp(28px,2.8vw,54px) !important;
  }

  .toowie-product #akquise-manager .hero-copy:where([data-page="index"], [data-page="index"] *),
  .toowie-product #akquise-manager .hero-visual:where([data-page="index"], [data-page="index"] *){
    min-width:0;
  }

  .toowie-product #akquise-manager .hero-visual:where([data-page="index"], [data-page="index"] *){
    width:100% !important;
    max-width:none !important;
    margin-right:0 !important;
    overflow:visible;
  }

  .toowie-product #akquise-manager .hero-browser:where([data-page="index"], [data-page="index"] *){
    width:100% !important;
    max-width:100% !important;
  }

  .toowie-product #akquise-manager .float-card-call:where([data-page="index"], [data-page="index"] *),
  .toowie-product #akquise-manager .float-card-flow:where([data-page="index"], [data-page="index"] *),
  .toowie-product #akquise-manager .float-card-notes:where([data-page="index"], [data-page="index"] *){
    left:auto !important;
    right:12px !important;
  }

  .toowie-product #akquise-manager .float-card-leads:where([data-page="index"], [data-page="index"] *){
    left:auto !important;
    right:clamp(12px,7vw,120px) !important;
  }
}

@media (min-width:1051px) and (max-width:1859px){
  /* Unterhalb von 1860px bleibt rechts bewusst etwas Luft zum Viewportrand.
     So stehen Browser-Demo und schwebende Callouts auch bei schmaleren
     Desktop-Aufloesungen nicht direkt am rechten Rand. */
  .toowie-product #akquise-manager > .shell.hero-grid:where([data-page="index"], [data-page="index"] *){
    padding-right:clamp(24px,2vw,36px) !important;
  }
}

@media (min-width:400px) and (max-width:1050px){
  .toowie-product #akquise-manager > .shell.hero-grid:where([data-page="index"], [data-page="index"] *){
    width:calc(100% - clamp(20px,3vw,32px)) !important;
    max-width:none !important;
    grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr) !important;
    gap:clamp(9px,2vw,22px) !important;
    align-items:center;
  }

  .toowie-product #akquise-manager .hero-copy:where([data-page="index"], [data-page="index"] *),
  .toowie-product #akquise-manager .hero-visual:where([data-page="index"], [data-page="index"] *){
    min-width:0;
  }

  .toowie-product #akquise-manager .hero-visual:where([data-page="index"], [data-page="index"] *){
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    overflow:visible;
  }

  .toowie-product #akquise-manager .hero-browser:where([data-page="index"], [data-page="index"] *){
    width:100% !important;
    max-width:100% !important;
    transform:none !important;
  }

  .toowie-product #akquise-manager .float-card-call:where([data-page="index"], [data-page="index"] *),
  .toowie-product #akquise-manager .float-card-flow:where([data-page="index"], [data-page="index"] *),
  .toowie-product #akquise-manager .float-card-notes:where([data-page="index"], [data-page="index"] *){
    right:4px !important;
  }

  .toowie-product #akquise-manager .float-card-leads:where([data-page="index"], [data-page="index"] *){
    right:6px !important;
  }
}

@media (max-width:399px){
  .toowie-product #akquise-manager > .shell.hero-grid:where([data-page="index"], [data-page="index"] *){
    grid-template-columns:1fr !important;
  }

  .toowie-product #akquise-manager .hero-visual:where([data-page="index"], [data-page="index"] *){
    width:100% !important;
    max-width:100% !important;
    margin:28px 0 0 !important;
  }

  .toowie-product #akquise-manager .hero-browser:where([data-page="index"], [data-page="index"] *){
    width:100% !important;
    max-width:100% !important;
  }
}


/* Gemeinsame Gestaltung aller öffentlichen Unterseiten. */
/* ==========================================================================\n   Toowie Unterseiten – Designsystem angelehnt an die fertige Startseite\n   Gilt bewusst nur für body.toowie-subpage.\n   ========================================================================== */

body.toowie-subpage:where([data-layout="subpage"], [data-layout="subpage"] *) {
  --page-navy: #07182b;
  --page-navy-2: #0d2b49;
  --page-blue: #104e8b;
  --page-gold: var(--toowie-gold, #c69a57);
  --page-hero-gold: #d8b77f;
  --page-gold-soft: #f3e9d8;
  --page-ink: #13283d;
  --page-muted: #66788a;
  --page-line: rgba(16, 78, 139, .14);
  --page-surface: #ffffff;
  --page-soft: #f4f7f9;
  --page-radius: 26px;
  --page-shadow: 0 24px 70px rgba(7, 24, 43, .12);
  margin: 0;
  overflow-x: hidden;
  color: var(--page-ink);
  background: #f8f9fa;
  font-family: inherit;
}

body.toowie-subpage *:where([data-layout="subpage"], [data-layout="subpage"] *),
body.toowie-subpage *:where([data-layout="subpage"], [data-layout="subpage"] *)::before,
body.toowie-subpage *:where([data-layout="subpage"], [data-layout="subpage"] *)::after {
  box-sizing: border-box;
}

body.toowie-subpage main:where([data-layout="subpage"], [data-layout="subpage"] *) {
  overflow: hidden;
}

body.toowie-subpage a:where([data-layout="subpage"], [data-layout="subpage"] *) {
  text-underline-offset: 3px;
}

body.toowie-subpage:not(.toowie-index-navigation) .toowie-primary-nav .nav-link.is-current:where([data-layout="subpage"], [data-layout="subpage"] *),
body.toowie-subpage:not(.toowie-index-navigation) .toowie-primary-nav .dropdown-toggle.is-current:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: var(--page-gold) !important;
}

body.toowie-subpage:not(.toowie-index-navigation) .toowie-primary-nav .nav-link.is-current:where([data-layout="subpage"], [data-layout="subpage"] *)::after {
  opacity: 1;
}

.page-shell:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.page-section:where([data-layout="subpage"], [data-layout="subpage"] *) {
  position: relative;
  padding: clamp(76px, 8vw, 112px) 0;
}

.page-section-soft:where([data-layout="subpage"], [data-layout="subpage"] *) {
  background:
    radial-gradient(circle at 92% 12%, rgba(198, 154, 87, .10), transparent 26%),
    linear-gradient(180deg, #f7f9fb 0%, #eef3f6 100%);
}

.page-section-white:where([data-layout="subpage"], [data-layout="subpage"] *) {
  background: #fff;
}

.page-section-dark:where([data-layout="subpage"], [data-layout="subpage"] *) {
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 82% 18%, rgba(198,154,87,.16), transparent 30%),
    linear-gradient(135deg, #061426 0%, #0c2947 58%, #07182b 100%);
}

.page-section-dark:where([data-layout="subpage"], [data-layout="subpage"] *)::before,
.page-section-dark:where([data-layout="subpage"], [data-layout="subpage"] *)::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(198,154,87,.15);
  transform: rotate(22deg);
  pointer-events: none;
}

.page-section-dark:where([data-layout="subpage"], [data-layout="subpage"] *)::before {
  width: 380px;
  height: 380px;
  right: -210px;
  top: -180px;
}

.page-section-dark:where([data-layout="subpage"], [data-layout="subpage"] *)::after {
  width: 240px;
  height: 240px;
  left: -150px;
  bottom: -130px;
}

.page-eyebrow:where([data-layout="subpage"], [data-layout="subpage"] *),
.page-section-kicker:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--page-gold);
  font-size: .77rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Hero-Label exakt wie auf der Startseite: weiße Pille, dunkle Schrift, grüner Statuspunkt. */
.page-eyebrow:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: fit-content;
  max-width: 100%;
  gap: 8px;
  padding: 7px 10px;
  color: #001428;
  background: #fff;
  border: 1px solid rgba(198,154,87,.42);
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
  font-family: Inter, Arial, sans-serif;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .12em;
}

.page-eyebrow:where([data-layout="subpage"], [data-layout="subpage"] *)::before,
.page-section-kicker:where([data-layout="subpage"], [data-layout="subpage"] *)::before {
  content: "";
  flex: 0 0 auto;
}

.page-eyebrow:where([data-layout="subpage"], [data-layout="subpage"] *)::before {
  width: 7px;
  height: 7px;
  flex-basis: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 5px rgba(34,197,94,.16);
}

.page-section-kicker:where([data-layout="subpage"], [data-layout="subpage"] *)::before {
  width: 8px;
  height: 8px;
  background: var(--page-gold);
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  box-shadow: 0 0 0 6px rgba(198,154,87,.12);
}

.page-title:where([data-layout="subpage"], [data-layout="subpage"] *),
.page-section-title:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 0;
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .98;
}

.page-title:where([data-layout="subpage"], [data-layout="subpage"] *) {
  max-width: 800px;
  color: #fff;
  font-size: clamp(3.15rem, 6.2vw, 6.65rem);
}

/* Helles Gold der Startseiten-Heroüberschrift. */
.page-title span:where([data-layout="subpage"], [data-layout="subpage"] *),
.page-legal-hero h1 span:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: var(--page-hero-gold);
}

.page-section-title span:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: var(--page-gold);
}

.page-hero-lead:where([data-layout="subpage"], [data-layout="subpage"] *) {
  max-width: 720px;
  margin: 28px 0 0;
  color: rgba(255,255,255,.78);
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.75;
}

.page-section-title:where([data-layout="subpage"], [data-layout="subpage"] *) {
  max-width: 810px;
  color: var(--page-navy);
  font-size: clamp(2.3rem, 4.2vw, 4.45rem);
}

.page-section-dark .page-section-title:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #fff;
}

.page-section-lead:where([data-layout="subpage"], [data-layout="subpage"] *) {
  max-width: 760px;
  margin: 24px 0 0;
  color: var(--page-muted);
  font-size: clamp(1rem, 1.3vw, 1.17rem);
  line-height: 1.8;
}

.page-section-dark .page-section-lead:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: rgba(255,255,255,.72);
}

/* Hero -------------------------------------------------------------------- */
.page-hero:where([data-layout="subpage"], [data-layout="subpage"] *) {
  position: relative;
  min-height: min(850px, 92vh);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 156px 0 92px;
  color: #fff;
  background:
    radial-gradient(circle at 78% 24%, rgba(16,78,139,.44), transparent 31%),
    radial-gradient(circle at 54% 80%, rgba(198,154,87,.11), transparent 28%),
    linear-gradient(135deg, #04111f 0%, #0b2948 58%, #061728 100%);
}

.page-hero:where([data-layout="subpage"], [data-layout="subpage"] *)::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .34;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to right, #000, transparent 78%);
}

.page-hero-grid:where([data-layout="subpage"], [data-layout="subpage"] *) {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
  gap: clamp(44px, 7vw, 92px);
  align-items: center;
}

.page-hero-actions:where([data-layout="subpage"], [data-layout="subpage"] *),
.page-cta-actions:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.page-btn:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.page-btn:hover:where([data-layout="subpage"], [data-layout="subpage"] *) {
  transform: translateY(-2px);
}

.page-btn-gold:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #07182b;
  background: var(--page-gold);
  box-shadow: 0 14px 32px rgba(198,154,87,.2);
}

.page-btn-gold:hover:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #07182b;
  background: #d4ae73;
}

.page-btn-ghost:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #fff;
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.06);
}

.page-btn-ghost:hover:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #fff;
  border-color: rgba(198,154,87,.65);
  background: rgba(255,255,255,.1);
}

.page-btn-light:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: var(--page-navy);
  background: #fff;
}


.service-feature-cta:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #0a2850 !important;
  background: #fff !important;
  border: 1px solid rgba(10, 40, 80, .12) !important;
  border-radius: 14px;
  box-shadow: 0 14px 28px rgba(7, 24, 43, .08);
}

.service-feature-cta:hover:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #0a2850 !important;
  border-color: rgba(198, 154, 87, .55) !important;
  background: #fff !important;
  box-shadow: 0 18px 32px rgba(7, 24, 43, .12);
}

.page-btn-outline:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: var(--page-navy);
  border-color: rgba(7,24,43,.2);
  background: transparent;
}

.page-btn-outline:hover:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: var(--page-navy);
  border-color: var(--page-gold);
  background: var(--page-gold-soft);
}

.page-hero-points:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 30px;
  color: rgba(255,255,255,.68);
  font-size: .92rem;
}

.page-hero-points span:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.page-hero-points i:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: 19px;
  height: 19px;
  display: inline-grid;
  place-items: center;
  color: var(--page-gold);
  border: 1px solid rgba(198,154,87,.45);
  font-size: .72rem;
  font-style: normal;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}

.page-hero-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
  position: relative;
  min-height: 470px;
  display: grid;
  place-items: center;
}

.page-hero-visual:where([data-layout="subpage"], [data-layout="subpage"] *)::before,
.page-hero-visual:where([data-layout="subpage"], [data-layout="subpage"] *)::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(198,154,87,.22);
  pointer-events: none;
}

.page-hero-visual:where([data-layout="subpage"], [data-layout="subpage"] *)::before {
  width: 440px;
  height: 300px;
  transform: rotate(-14deg);
}

.page-hero-visual:where([data-layout="subpage"], [data-layout="subpage"] *)::after {
  width: 500px;
  height: 345px;
  transform: rotate(20deg);
  border-color: rgba(89,151,207,.18);
}

.page-hero-frame:where([data-layout="subpage"], [data-layout="subpage"] *) {
  position: relative;
  z-index: 2;
  width: min(410px, 90%);
  aspect-ratio: 1.08 / 1;
  padding: 1px;
  background: linear-gradient(145deg, rgba(198,154,87,.8), rgba(255,255,255,.08) 45%, rgba(16,78,139,.6));
  clip-path: polygon(28% 0, 72% 0, 100% 28%, 100% 72%, 72% 100%, 28% 100%, 0 72%, 0 28%);
  filter: drop-shadow(0 34px 45px rgba(0,0,0,.32));
}

.page-hero-frame-inner:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0a223b;
  clip-path: polygon(28% 0, 72% 0, 100% 28%, 100% 72%, 72% 100%, 28% 100%, 0 72%, 0 28%);
}

.page-hero-frame img:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: .88;
  transform: scale(1.02);
}

.page-hero-frame.is-contain img:where([data-layout="subpage"], [data-layout="subpage"] *) {
  padding: 10%;
  object-fit: contain;
  background: rgba(255,255,255,.96);
}

.page-orbit-card:where([data-layout="subpage"], [data-layout="subpage"] *) {
  position: absolute;
  z-index: 4;
  min-width: 155px;
  padding: 13px 16px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(5,22,39,.82);
  box-shadow: 0 18px 36px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
}

.page-orbit-card strong:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: block;
  color: var(--page-gold);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.page-orbit-card span:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: block;
  margin-top: 3px;
  font-size: .92rem;
  font-weight: 800;
}

.page-orbit-card-one:where([data-layout="subpage"], [data-layout="subpage"] *) {
  top: 15%;
  left: -2%;
}

.page-orbit-card-two:where([data-layout="subpage"], [data-layout="subpage"] *) {
  right: -1%;
  bottom: 14%;
}

.page-breadcrumbs:where([data-layout="subpage"], [data-layout="subpage"] *) {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 22px;
}

.page-breadcrumbs ol:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgba(255,255,255,.45);
  font-size: .78rem;
}

.page-breadcrumbs li + li:where([data-layout="subpage"], [data-layout="subpage"] *)::before {
  content: "/";
  margin-right: 7px;
  color: rgba(198,154,87,.55);
}

.page-breadcrumbs a:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: rgba(255,255,255,.65);
  text-decoration: none;
}

/* Intro / story ----------------------------------------------------------- */
.page-story-grid:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: grid;
  grid-template-columns: minmax(150px, .34fr) minmax(0, 1.66fr);
  gap: clamp(30px, 6vw, 82px);
  align-items: start;
}

.page-story-number:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin-top: 6px;
  color: var(--page-gold);
  font-size: clamp(6.8rem, 14vw, 12.5rem);
  font-weight: 900;
  letter-spacing: -.09em;
  line-height: .7;
  user-select: none;
}

.page-story-copy:where([data-layout="subpage"], [data-layout="subpage"] *) {
  max-width: 860px;
}

.page-story-copy p:where([data-layout="subpage"], [data-layout="subpage"] *),
.page-richtext p:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: var(--page-muted);
  font-size: 1.05rem;
  line-height: 1.82;
}

.page-story-copy p + p:where([data-layout="subpage"], [data-layout="subpage"] *),
.page-richtext p + p:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin-top: 16px;
}

/* Feature cards ----------------------------------------------------------- */
.page-section-heading-row:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  align-items: end;
  margin-bottom: 44px;
}

.page-section-heading-row .page-section-lead:where([data-layout="subpage"], [data-layout="subpage"] *) {
  max-width: 460px;
  margin: 0 0 4px;
}

.page-card-grid:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.page-card-grid.two-cols:where([data-layout="subpage"], [data-layout="subpage"] *) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-card:where([data-layout="subpage"], [data-layout="subpage"] *) {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  padding: 26px;
  border: 1px solid rgba(16,78,139,.11);
  border-radius: var(--page-radius);
  background: rgba(255,255,255,.95);
  box-shadow: 0 15px 45px rgba(7,24,43,.07);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.page-card:hover:where([data-layout="subpage"], [data-layout="subpage"] *) {
  transform: translateY(-5px);
  border-color: rgba(198,154,87,.48);
  box-shadow: 0 26px 58px rgba(7,24,43,.12);
}

.page-card:where([data-layout="subpage"], [data-layout="subpage"] *)::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 82px;
  height: 3px;
  background: var(--page-gold);
}

.page-card-media:where([data-layout="subpage"], [data-layout="subpage"] *) {
  height: 190px;
  overflow: hidden;
  margin: -26px -26px 24px;
  background: #0b2948;
}

.page-card-media img:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .35s ease;
}

.page-card:hover .page-card-media img:where([data-layout="subpage"], [data-layout="subpage"] *) {
  transform: scale(1.035);
}

.page-card-index:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  margin-bottom: 20px;
  color: var(--page-navy);
  background: var(--page-gold-soft);
  font-size: .76rem;
  font-weight: 900;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}

.page-card h3:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 0;
  color: var(--page-navy);
  font-size: 1.28rem;
  font-weight: 900;
  letter-spacing: -.02em;
}

.page-card p:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 13px 0 0;
  color: var(--page-muted);
  line-height: 1.7;
}

.page-card-link:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  color: var(--page-blue);
  font-weight: 800;
  text-decoration: none;
}

.page-card-link:where([data-layout="subpage"], [data-layout="subpage"] *)::after {
  content: "→";
  color: var(--page-gold);
  transition: transform .18s ease;
}

.page-card-link:hover:where([data-layout="subpage"], [data-layout="subpage"] *)::after {
  transform: translateX(4px);
}

/* Deep-dive split --------------------------------------------------------- */
.page-split:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .86fr);
  gap: clamp(48px, 7vw, 92px);
  align-items: center;
}

.page-split.reverse .page-split-media:where([data-layout="subpage"], [data-layout="subpage"] *) {
  order: -1;
}

.page-split-copy .page-section-title:where([data-layout="subpage"], [data-layout="subpage"] *) {
  font-size: clamp(2.25rem, 3.8vw, 4rem);
}

.page-split-media:where([data-layout="subpage"], [data-layout="subpage"] *) {
  position: relative;
}

.page-split-media:where([data-layout="subpage"], [data-layout="subpage"] *)::before {
  content: "";
  position: absolute;
  width: 72%;
  height: 72%;
  right: -28px;
  bottom: -28px;
  border: 1px solid rgba(198,154,87,.35);
  clip-path: polygon(28% 0,72% 0,100% 28%,100% 72%,72% 100%,28% 100%,0 72%,0 28%);
}

.page-split-image:where([data-layout="subpage"], [data-layout="subpage"] *) {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 30px;
  box-shadow: var(--page-shadow);
}

.page-checklist:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: grid;
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.page-checklist li:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--page-ink);
  line-height: 1.6;
}

.page-section-dark .page-checklist li:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: rgba(255,255,255,.78);
}

.page-checklist li:where([data-layout="subpage"], [data-layout="subpage"] *)::before {
  content: "✓";
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  margin-top: 1px;
  color: var(--page-navy);
  background: var(--page-gold);
  font-size: .72rem;
  font-weight: 900;
  clip-path: polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
}

/* Steps ------------------------------------------------------------------- */
.page-steps:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 0;
  margin-top: 52px;
}

.page-step:where([data-layout="subpage"], [data-layout="subpage"] *) {
  position: relative;
  padding: 8px 34px 8px 0;
}

.page-step:not(:last-child):where([data-layout="subpage"], [data-layout="subpage"] *)::after {
  content: "";
  position: absolute;
  top: 27px;
  left: 58px;
  right: 18px;
  height: 1px;
  background: linear-gradient(90deg, rgba(198,154,87,.8), rgba(198,154,87,.15));
}

.page-step-number:where([data-layout="subpage"], [data-layout="subpage"] *) {
  position: relative;
  z-index: 2;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  color: var(--page-navy);
  background: var(--page-gold);
  font-weight: 900;
  clip-path: polygon(28% 0,72% 0,100% 28%,100% 72%,72% 100%,28% 100%,0 72%,0 28%);
}

.page-step h3:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 0 0 10px;
  color: #fff;
  font-size: 1.16rem;
  font-weight: 900;
}

.page-step p:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 0;
  color: rgba(255,255,255,.65);
  line-height: 1.68;
}

/* CTA --------------------------------------------------------------------- */
.page-cta:where([data-layout="subpage"], [data-layout="subpage"] *) {
  position: relative;
  overflow: hidden;
  padding: clamp(62px, 7vw, 90px) 0;
  color: #fff;
  background: var(--page-gold);
}

.page-cta:where([data-layout="subpage"], [data-layout="subpage"] *)::before {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  right: -180px;
  top: -220px;
  border: 1px solid rgba(7,24,43,.16);
  transform: rotate(27deg);
  clip-path: polygon(28% 0,72% 0,100% 28%,100% 72%,72% 100%,28% 100%,0 72%,0 28%);
}

.page-cta-grid:where([data-layout="subpage"], [data-layout="subpage"] *) {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
}

.page-cta h2:where([data-layout="subpage"], [data-layout="subpage"] *) {
  max-width: 760px;
  margin: 0;
  color: var(--page-navy);
  font-size: clamp(2rem, 3.6vw, 3.8rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.02;
}

.page-cta p:where([data-layout="subpage"], [data-layout="subpage"] *) {
  max-width: 700px;
  margin: 16px 0 0;
  color: rgba(7,24,43,.72);
  line-height: 1.7;
}

.page-cta .page-btn-gold:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #fff;
  background: var(--page-navy);
  box-shadow: none;
}

.page-cta .page-btn-outline:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: var(--page-navy);
  border-color: rgba(7,24,43,.25);
}

/* Link hub ---------------------------------------------------------------- */
.page-link-grid:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px;
  margin-top: 44px;
}

.page-link-card:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 20px;
  color: var(--page-ink);
  border: 1px solid var(--page-line);
  border-radius: 22px;
  background: #fff;
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.page-link-card:hover:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: var(--page-ink);
  transform: translateY(-3px);
  border-color: rgba(198,154,87,.5);
  box-shadow: 0 20px 44px rgba(7,24,43,.09);
}

.page-link-card img:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 16px;
}

.page-link-card strong:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: block;
  color: #1b5a90;
  font-size: 1.08rem;
}

.page-link-card small:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: block;
  margin-top: 5px;
  color: var(--page-muted);
  line-height: 1.45;
}

.page-link-arrow:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: var(--page-gold);
  font-size: 1.5rem;
  font-weight: 800;
}

/* FAQ --------------------------------------------------------------------- */
.page-faq-nav:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.page-faq-nav a:where([data-layout="subpage"], [data-layout="subpage"] *) {
  padding: 9px 13px;
  color: var(--page-navy);
  border: 1px solid rgba(7,24,43,.13);
  border-radius: 999px;
  background: #fff;
  font-size: .88rem;
  font-weight: 800;
  text-decoration: none;
}

.page-faq-nav a:hover:where([data-layout="subpage"], [data-layout="subpage"] *) {
  border-color: var(--page-gold);
  background: var(--page-gold-soft);
}

.page-faq-group + .page-faq-group:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin-top: 56px;
}

.page-faq-group h2:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 0 0 20px;
  color: var(--page-navy);
  font-size: clamp(1.7rem, 2.8vw, 2.55rem);
  font-weight: 900;
  letter-spacing: -.03em;
}

.page-faq-list:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: grid;
  gap: 12px;
}

.page-faq-item:where([data-layout="subpage"], [data-layout="subpage"] *) {
  overflow: hidden;
  border: 1px solid rgba(16,78,139,.12);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(7,24,43,.045);
}

.page-faq-item summary:where([data-layout="subpage"], [data-layout="subpage"] *) {
  position: relative;
  padding: 20px 58px 20px 22px;
  cursor: pointer;
  color: var(--page-navy);
  font-weight: 850;
  list-style: none;
}

.page-faq-item summary:where([data-layout="subpage"], [data-layout="subpage"] *)::-webkit-details-marker { display: none; }

.page-faq-item summary:where([data-layout="subpage"], [data-layout="subpage"] *)::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--page-navy);
  border-radius: 50%;
  background: var(--page-gold-soft);
  transform: translateY(-50%);
  font-size: 1.1rem;
}

.page-faq-item[open] summary:where([data-layout="subpage"], [data-layout="subpage"] *)::after { content: "−"; }

.page-faq-answer:where([data-layout="subpage"], [data-layout="subpage"] *) {
  padding: 0 22px 22px;
  color: var(--page-muted);
  line-height: 1.72;
}

/* Download ---------------------------------------------------------------- */
.page-download-groups:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: grid;
  gap: 46px;
}

.page-download-group h2:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 0 0 20px;
  color: var(--page-navy);
  font-size: clamp(1.7rem, 2.6vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -.03em;
}

.page-download-grid:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
}

.page-download-card:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  color: var(--page-ink);
  border: 1px solid rgba(16,78,139,.12);
  border-radius: 18px;
  background: #fff;
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.page-download-card:hover:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: var(--page-ink);
  transform: translateY(-3px);
  border-color: rgba(198,154,87,.55);
  box-shadow: 0 18px 38px rgba(7,24,43,.08);
}

.page-download-card img:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.page-download-card strong:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: block;
  color: var(--page-navy);
  font-size: .98rem;
}

.page-download-card small:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: var(--page-muted);
  font-size: .8rem;
}

.page-download-card .page-link-arrow:where([data-layout="subpage"], [data-layout="subpage"] *) { font-size: 1.1rem; }

/* Contact ----------------------------------------------------------------- */
.page-contact-grid:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: grid;
  grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr);
  gap: 26px;
  align-items: start;
  margin-top: 48px;
}

.page-contact-card:where([data-layout="subpage"], [data-layout="subpage"] *),
.page-form-card:where([data-layout="subpage"], [data-layout="subpage"] *) {
  border: 1px solid rgba(16,78,139,.12);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 20px 58px rgba(7,24,43,.08);
}

.page-contact-card:where([data-layout="subpage"], [data-layout="subpage"] *) {
  padding: 30px;
}

.page-contact-card h3:where([data-layout="subpage"], [data-layout="subpage"] *),
.page-form-card h3:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 0;
  color: var(--page-navy);
  font-size: 1.5rem;
  font-weight: 900;
}

.page-contact-options:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.page-contact-option:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  color: var(--page-ink);
  border-radius: 16px;
  background: #f5f8fa;
  text-decoration: none;
}

.page-contact-option:hover:where([data-layout="subpage"], [data-layout="subpage"] *) { color: var(--page-ink); background: var(--page-gold-soft); }

.page-contact-option i:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--page-navy);
  background: var(--page-gold);
  clip-path: polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
}

.page-contact-option strong:where([data-layout="subpage"], [data-layout="subpage"] *) { display: block; color: var(--page-navy); }
.page-contact-option span:where([data-layout="subpage"], [data-layout="subpage"] *) { display: block; margin-top: 2px; color: var(--page-muted); font-size: .88rem; }

.page-form-card:where([data-layout="subpage"], [data-layout="subpage"] *) { padding: 30px; }

.page-form-grid:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
  margin-top: 24px;
}

.page-form-field.full:where([data-layout="subpage"], [data-layout="subpage"] *) { grid-column: 1 / -1; }

.page-form-field label:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: block;
  margin: 0 0 7px;
  color: var(--page-navy);
  font-size: .82rem;
  font-weight: 800;
}

.page-form-field input:where([data-layout="subpage"], [data-layout="subpage"] *),
.page-form-field textarea:where([data-layout="subpage"], [data-layout="subpage"] *),
.page-form-field select:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: 100%;
  border: 1px solid rgba(16,78,139,.18);
  border-radius: 13px;
  padding: 12px 14px;
  color: var(--page-ink);
  background: #fbfcfd;
  outline: none;
}

.page-form-field input:focus:where([data-layout="subpage"], [data-layout="subpage"] *),
.page-form-field textarea:focus:where([data-layout="subpage"], [data-layout="subpage"] *),
.page-form-field select:focus:where([data-layout="subpage"], [data-layout="subpage"] *) {
  border-color: var(--page-gold);
  box-shadow: 0 0 0 4px rgba(198,154,87,.12);
}

.page-form-field textarea:where([data-layout="subpage"], [data-layout="subpage"] *) { min-height: 150px; resize: vertical; }

.page-form-meta:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin-top: 8px;
  color: var(--page-muted);
  font-size: .78rem;
}

.page-form-actions:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
}

.page-form-actions small:where([data-layout="subpage"], [data-layout="subpage"] *) { max-width: 430px; color: var(--page-muted); line-height: 1.45; }

/* About ------------------------------------------------------------------- */
.page-values-grid:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
  margin-top: 46px;
}

.page-value:where([data-layout="subpage"], [data-layout="subpage"] *) {
  padding: 28px;
  border-top: 3px solid var(--page-gold);
  border-radius: 0 0 22px 22px;
  background: rgba(255,255,255,.07);
}

.page-value strong:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: block;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 900;
}

.page-value p:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 12px 0 0;
  color: rgba(255,255,255,.66);
  line-height: 1.7;
}

.page-person-card:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: grid;
  grid-template-columns: minmax(260px,.55fr) minmax(0,1fr);
  gap: clamp(34px, 6vw, 72px);
  align-items: center;
}

.page-person-photo:where([data-layout="subpage"], [data-layout="subpage"] *) {
  position: relative;
  max-width: 420px;
}

.page-person-photo img:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: block;
  object-fit: cover;
  border-radius: 30px;
  box-shadow: var(--page-shadow);
}

.page-person-photo:where([data-layout="subpage"], [data-layout="subpage"] *)::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -22px;
  width: 150px;
  height: 150px;
  border: 2px solid var(--page-gold);
  clip-path: polygon(28% 0,72% 0,100% 28%,100% 72%,72% 100%,28% 100%,0 72%,0 28%);
}

/* Product pages ----------------------------------------------------------- */
.page-product-shot:where([data-layout="subpage"], [data-layout="subpage"] *) {
  overflow: hidden;
  padding: 12px;
  border: 1px solid rgba(16,78,139,.13);
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--page-shadow);
}

.page-product-shot img:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: 100%;
  display: block;
  border-radius: 18px;
}

.page-highlight:where([data-layout="subpage"], [data-layout="subpage"] *) {
  padding: 22px;
  border-left: 4px solid var(--page-gold);
  border-radius: 0 18px 18px 0;
  background: var(--page-gold-soft);
  color: var(--page-ink);
  line-height: 1.7;
}

/* Legal ------------------------------------------------------------------- */
.page-legal-hero:where([data-layout="subpage"], [data-layout="subpage"] *) {
  position: relative;
  overflow: hidden;
  min-height: clamp(520px, 66vh, 650px);
  padding: 132px 0 76px;
  display: flex;
  align-items: center;
  color: #fff;
  background:
    radial-gradient(circle at 17% 82%, rgba(10,40,80,.94), transparent 34%),
    radial-gradient(circle at 80% 18%, rgba(198,154,87,.15), transparent 24%),
    linear-gradient(135deg, #001428 0%, #0a2850 52%, #000a1e 100%);
}

.page-legal-hero:where([data-layout="subpage"], [data-layout="subpage"] *)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 92%);
}

.page-legal-hero .page-shell:where([data-layout="subpage"], [data-layout="subpage"] *) {
  position: relative;
  z-index: 1;
  width: min(1320px, calc(100% - 24px));
  max-width: 1320px;
}

.page-legal-hero-grid:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr);
  gap: clamp(44px, 6vw, 86px);
  align-items: center;
}

.page-legal-hero-copy:where([data-layout="subpage"], [data-layout="subpage"] *) {
  max-width: 820px;
}

.page-legal-hero h1:where([data-layout="subpage"], [data-layout="subpage"] *) {
  max-width: 840px;
  margin: 0;
  color: #fff;
  font-size: clamp(2.7rem, 4.8vw, 4.9rem);
  font-weight: 780;
  letter-spacing: -.055em;
  line-height: .98;
}

.page-legal-logo:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: grid;
  place-items: center;
  width: min(100%, 700px);
  min-height: 320px;
  margin-left: auto;
}

.page-legal-logo img:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: block;
  width: clamp(390px, 46vw, 700px);
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.18));
}

@media (max-width: 1050px) {
  .page-legal-hero:where([data-layout="subpage"], [data-layout="subpage"] *) {
    min-height: auto;
  }

  .page-legal-hero-grid:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .page-legal-logo:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: min(100%, 620px);
    min-height: 245px;
    margin: 0 auto;
  }
}

@media (max-width: 760px) {
  .page-legal-hero:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding: 118px 0 58px;
  }

  .page-legal-hero .page-shell:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: min(100% - 36px, 1180px);
  }

  .page-legal-hero h1:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(2.35rem, 11vw, 3.7rem);
  }

  .page-legal-logo:where([data-layout="subpage"], [data-layout="subpage"] *) {
    min-height: 190px;
  }

  .page-legal-logo img:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: min(500px, 92vw);
  }

  .legal-paper-head:where([data-layout="subpage"], [data-layout="subpage"] *) {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .legal-paper-logo:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: min(220px, 100%);
    min-height: 72px;
  }

  .legal-meta:where([data-layout="subpage"], [data-layout="subpage"] *) {
    align-self: flex-start;
  }
}

.page-legal-main:where([data-layout="subpage"], [data-layout="subpage"] *) {
  padding-top: clamp(52px, 6vw, 78px);
  padding-bottom: clamp(72px, 8vw, 110px);
}

.page-legal-main .page-shell:where([data-layout="subpage"], [data-layout="subpage"] *) {
  max-width: 980px;
}

.page-legal-paper:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: 100%;
  margin: 0 auto;
  padding: clamp(30px, 5vw, 62px) clamp(24px, 6vw, 70px);
  border: 1px solid rgba(16,78,139,.10);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(7,24,43,.08);
}

.legal-paper-head:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.legal-paper-logo:where([data-layout="subpage"], [data-layout="subpage"] *) {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(140px, 18vw, 190px);
  min-height: 78px;
  padding: 10px 16px;
  border: 1px solid rgba(16,78,139,.10);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%);
  box-shadow: 0 12px 28px rgba(7,24,43,.07);
}

.legal-paper-logo img:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: block;
  width: 100%;
  height: auto;
}

.legal-paper-body:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: min(100%, 780px);
  margin: 0 auto;
}

.legal-paper-body > .legal-section:first-child:where([data-layout="subpage"], [data-layout="subpage"] *) {
  padding-top: 0;
}

.legal-meta:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-bottom: 10px;
  padding: 6px 10px;
  color: #617487;
  border: 1px solid rgba(16,78,139,.10);
  border-radius: 999px;
  background: #f7f9fb;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.legal-section:where([data-layout="subpage"], [data-layout="subpage"] *) {
  padding-top: 34px;
}

.legal-section + .legal-section:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin-top: 36px;
  border-top: 1px solid rgba(16,78,139,.10);
}

.page-legal-paper h2:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 0 0 15px;
  color: var(--page-blue);
  font-size: clamp(1.28rem, 2vw, 1.62rem);
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1.2;
}

.page-legal-paper h3:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 28px 0 12px;
  color: #1b5a90;
  font-size: 1.08rem;
  font-weight: 850;
}

.page-legal-paper p:where([data-layout="subpage"], [data-layout="subpage"] *),
.page-legal-paper li:where([data-layout="subpage"], [data-layout="subpage"] *),
.page-legal-paper dd:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #4d6275;
  font-size: 1rem;
  line-height: 1.78;
}

.page-legal-paper p:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 0 0 14px;
}

.page-legal-paper p:last-child:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin-bottom: 0;
}

.page-legal-paper strong:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #20384e;
}

.page-legal-paper a:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: var(--page-blue);
  overflow-wrap: anywhere;
}

.legal-intro:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin-bottom: 22px !important;
}

.legal-facts:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 34px;
  margin: 22px 0 0;
}

.legal-facts > div:where([data-layout="subpage"], [data-layout="subpage"] *) {
  padding: 15px 0;
  border-top: 1px solid rgba(16,78,139,.09);
}

.legal-facts dt:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 0 0 4px;
  color: #788897;
  font-size: .75rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.legal-facts dd:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 0;
  color: #324a60;
}

.legal-list:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 16px 0 16px;
  padding-left: 1.25rem;
}

.legal-list li:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 7px 0;
  padding-left: 4px;
}

.legal-callout:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 20px 0;
  padding: 18px 20px;
  color: #334d63;
  border: 1px solid rgba(198,154,87,.34);
  border-left: 4px solid var(--page-gold);
  border-radius: 14px;
  background: #fbf7ef;
  line-height: 1.7;
}

.legal-callout strong:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: var(--page-navy);
}

.legal-callout-neutral:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 20px 0 10px;
  border-color: rgba(16,78,139,.17);
  border-left-color: var(--page-blue);
  background: #f5f8fb;
}

.legal-license-list:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}

.legal-license-list p:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid rgba(16,78,139,.09);
  border-radius: 14px;
  background: #f8fafb;
  font-size: .92rem;
}

/* Status / note ----------------------------------------------------------- */
.page-note:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 26px 0 0;
  padding: 17px 18px;
  border: 1px solid rgba(198,154,87,.36);
  border-radius: 16px;
  background: rgba(198,154,87,.09);
  color: var(--page-ink);
  line-height: 1.6;
}

.page-note i:where([data-layout="subpage"], [data-layout="subpage"] *) { color: var(--page-gold); margin-top: 3px; }

/* Reveal ------------------------------------------------------------------ */
.js .page-reveal:where([data-layout="subpage"], [data-layout="subpage"] *) {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s ease, transform .65s ease;
}

.js .page-reveal.is-visible:where([data-layout="subpage"], [data-layout="subpage"] *) {
  opacity: 1;
  transform: none;
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1050px) {
  .page-hero-grid:where([data-layout="subpage"], [data-layout="subpage"] *),
  .page-split:where([data-layout="subpage"], [data-layout="subpage"] *),
  .page-contact-grid:where([data-layout="subpage"], [data-layout="subpage"] *),
  .page-person-card:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: 1fr;
  }

  .page-hero:where([data-layout="subpage"], [data-layout="subpage"] *) { min-height: auto; }
  .page-hero-copy:where([data-layout="subpage"], [data-layout="subpage"] *) { max-width: 820px; }
  .page-hero-visual:where([data-layout="subpage"], [data-layout="subpage"] *) { min-height: 420px; }
  .page-orbit-card-one:where([data-layout="subpage"], [data-layout="subpage"] *) { left: 5%; }
  .page-orbit-card-two:where([data-layout="subpage"], [data-layout="subpage"] *) { right: 4%; }
  .page-section-heading-row:where([data-layout="subpage"], [data-layout="subpage"] *) { display: block; }
  .page-section-heading-row .page-section-lead:where([data-layout="subpage"], [data-layout="subpage"] *) { max-width: 760px; margin-top: 20px; }
}

@media (max-width: 820px) {
  .page-card-grid:where([data-layout="subpage"], [data-layout="subpage"] *),
  .page-card-grid.two-cols:where([data-layout="subpage"], [data-layout="subpage"] *),
  .page-download-grid:where([data-layout="subpage"], [data-layout="subpage"] *),
  .page-values-grid:where([data-layout="subpage"], [data-layout="subpage"] *),
  .page-link-grid:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: 1fr 1fr;
  }

  .page-story-grid:where([data-layout="subpage"], [data-layout="subpage"] *) { grid-template-columns: 105px 1fr; gap: 28px; }
  .page-story-number:where([data-layout="subpage"], [data-layout="subpage"] *) { font-size: 7rem; }
  .page-steps:where([data-layout="subpage"], [data-layout="subpage"] *) { grid-template-columns: 1fr; gap: 26px; }
  .page-step:not(:last-child):where([data-layout="subpage"], [data-layout="subpage"] *)::after { width: 1px; height: calc(100% - 18px); left: 27px; right: auto; top: 55px; background: linear-gradient(rgba(198,154,87,.8),rgba(198,154,87,.12)); }
  .page-cta-grid:where([data-layout="subpage"], [data-layout="subpage"] *) { grid-template-columns: 1fr; }
  .page-cta-actions:where([data-layout="subpage"], [data-layout="subpage"] *) { margin-top: 0; }
}

@media (max-width: 620px) {
  .page-shell:where([data-layout="subpage"], [data-layout="subpage"] *) { width: min(100% - 32px, 1180px); }
  .page-hero:where([data-layout="subpage"], [data-layout="subpage"] *) { padding: 132px 0 76px; }
  .page-title:where([data-layout="subpage"], [data-layout="subpage"] *) { font-size: clamp(2.75rem, 14vw, 4.6rem); }
  .page-hero-grid:where([data-layout="subpage"], [data-layout="subpage"] *) { gap: 36px; }
  .page-hero-visual:where([data-layout="subpage"], [data-layout="subpage"] *) { min-height: 330px; }
  .page-hero-visual:where([data-layout="subpage"], [data-layout="subpage"] *)::before { width: 330px; height: 220px; }
  .page-hero-visual:where([data-layout="subpage"], [data-layout="subpage"] *)::after { width: 370px; height: 250px; }
  .page-hero-frame:where([data-layout="subpage"], [data-layout="subpage"] *) { width: min(315px, 88%); }
  .page-orbit-card:where([data-layout="subpage"], [data-layout="subpage"] *) { min-width: 135px; padding: 10px 12px; }
  .page-orbit-card-one:where([data-layout="subpage"], [data-layout="subpage"] *) { top: 9%; left: 0; }
  .page-orbit-card-two:where([data-layout="subpage"], [data-layout="subpage"] *) { right: 0; bottom: 8%; }
  .page-breadcrumbs:where([data-layout="subpage"], [data-layout="subpage"] *) { display: none; }
  .page-story-grid:where([data-layout="subpage"], [data-layout="subpage"] *) { grid-template-columns: 1fr; }
  .page-story-number:where([data-layout="subpage"], [data-layout="subpage"] *) { font-size: 6.2rem; margin-bottom: 4px; }
  .page-card-grid:where([data-layout="subpage"], [data-layout="subpage"] *),
  .page-card-grid.two-cols:where([data-layout="subpage"], [data-layout="subpage"] *),
  .page-download-grid:where([data-layout="subpage"], [data-layout="subpage"] *),
  .page-values-grid:where([data-layout="subpage"], [data-layout="subpage"] *),
  .page-link-grid:where([data-layout="subpage"], [data-layout="subpage"] *) { grid-template-columns: 1fr; }
  .page-split.reverse .page-split-media:where([data-layout="subpage"], [data-layout="subpage"] *) { order: 0; }
  .page-link-card:where([data-layout="subpage"], [data-layout="subpage"] *) { grid-template-columns: 62px 1fr auto; gap: 14px; }
  .page-link-card img:where([data-layout="subpage"], [data-layout="subpage"] *) { width: 62px; height: 62px; }
  .page-form-grid:where([data-layout="subpage"], [data-layout="subpage"] *) { grid-template-columns: 1fr; }
  .page-form-field.full:where([data-layout="subpage"], [data-layout="subpage"] *) { grid-column: auto; }
  .page-form-actions:where([data-layout="subpage"], [data-layout="subpage"] *) { align-items: stretch; flex-direction: column; }
  .page-legal-paper:where([data-layout="subpage"], [data-layout="subpage"] *) { border-radius: 20px; padding: 28px 22px 34px; }
  .page-legal-hero:where([data-layout="subpage"], [data-layout="subpage"] *) { padding: 136px 0 58px; }
  .page-legal-hero h1:where([data-layout="subpage"], [data-layout="subpage"] *) { font-size: clamp(2.35rem, 11vw, 3.7rem); }
  .legal-facts:where([data-layout="subpage"], [data-layout="subpage"] *),
  .legal-license-list:where([data-layout="subpage"], [data-layout="subpage"] *) { grid-template-columns: 1fr; }
  .legal-section:where([data-layout="subpage"], [data-layout="subpage"] *) { padding-top: 26px; }
  .legal-section + .legal-section:where([data-layout="subpage"], [data-layout="subpage"] *) { margin-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .page-reveal:where([data-layout="subpage"], [data-layout="subpage"] *),
  .page-card:where([data-layout="subpage"], [data-layout="subpage"] *),
  .page-card-media img:where([data-layout="subpage"], [data-layout="subpage"] *),
  .page-btn:where([data-layout="subpage"], [data-layout="subpage"] *),
  .page-link-card:where([data-layout="subpage"], [data-layout="subpage"] *),
  .page-download-card:where([data-layout="subpage"], [data-layout="subpage"] *) { transition: none !important; transform: none !important; opacity: 1 !important; }
}


/* ==========================================================================
   Technik-Unterseiten: eigenstaendige Hero-Visuals
   Nur aktiv, wenn die Hero-Section die Klasse .tech-service-hero besitzt.
   ========================================================================== */
.page-hero.tech-service-hero:where([data-layout="subpage"], [data-layout="subpage"] *) {
  min-height: min(820px, 92vh);
  padding-top: 148px;
  padding-bottom: 84px;
}

.page-hero.tech-service-hero .page-hero-grid:where([data-layout="subpage"], [data-layout="subpage"] *) {
  grid-template-columns: minmax(0, .88fr) minmax(500px, 1.12fr);
  gap: clamp(28px, 4vw, 58px);
}

/* Titelgroesse wie im Hero der Startseite. */
.page-hero.tech-service-hero .page-title:where([data-layout="subpage"], [data-layout="subpage"] *) {
  max-width: 720px;
  font-size: clamp(2.55rem, 4.15vw, 4.45rem);
  line-height: .97;
  letter-spacing: -.055em;
  font-weight: 780;
}

.page-hero.tech-service-hero .page-hero-lead:where([data-layout="subpage"], [data-layout="subpage"] *) {
  max-width: 720px;
  margin-top: 24px;
}

/* Gleiche kleine Status-Pille wie auf der Startseite. */
.page-hero.tech-service-hero .page-eyebrow:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: fit-content;
  max-width: 100%;
  margin-bottom: 18px;
  padding: 7px 10px;
  gap: 8px;
  color: #001428;
  background: #fff;
  border: 1px solid rgba(198,154,87,.42);
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .12em;
}

.page-hero.tech-service-hero .page-eyebrow:where([data-layout="subpage"], [data-layout="subpage"] *)::before {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  clip-path: none;
  background: #22c55e;
  box-shadow: 0 0 0 5px rgba(34,197,94,.16);
}

/* Freigestellte Motive: kein Polygon-Rahmen und keine zusaetzlichen Textkarten. */
.page-hero.tech-service-hero .tech-service-hero-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: clamp(-120px, -6vw, -40px);
  isolation: isolate;
}

.page-hero.tech-service-hero .tech-service-hero-visual:where([data-layout="subpage"], [data-layout="subpage"] *)::before,
.page-hero.tech-service-hero .tech-service-hero-visual:where([data-layout="subpage"], [data-layout="subpage"] *)::after {
  display: none;
}

.page-hero.tech-service-hero .tech-service-hero-art:where([data-layout="subpage"], [data-layout="subpage"] *) {
  position: relative;
  z-index: 2;
  display: block;
  width: min(820px, 122%);
  max-width: none;
  height: auto;
  margin: 0;
  object-fit: contain;
  filter: drop-shadow(0 30px 52px rgba(0,0,0,.28));
  transform: translateZ(0);
}

.page-hero.tech-service-hero .tech-service-hero-art[src*="hero-websites"]:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: min(850px, 126%);
}

@media (max-width: 1100px) {
  .page-hero.tech-service-hero .page-hero-grid:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: minmax(0, .95fr) minmax(440px, 1.05fr);
    gap: 28px;
  }

  .page-hero.tech-service-hero .tech-service-hero-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin-right: -70px;
  }

  .page-hero.tech-service-hero .tech-service-hero-art:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: min(720px, 120%);
  }
}

@media (max-width: 900px) {
  .page-hero.tech-service-hero:where([data-layout="subpage"], [data-layout="subpage"] *) {
    min-height: auto;
    padding-top: 132px;
    padding-bottom: 70px;
  }

  .page-hero.tech-service-hero .page-hero-grid:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .page-hero.tech-service-hero .page-title:where([data-layout="subpage"], [data-layout="subpage"] *) {
    max-width: 780px;
    font-size: clamp(2.55rem, 6vw, 4rem);
  }

  .page-hero.tech-service-hero .tech-service-hero-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
    min-height: 430px;
    width: 100%;
    margin: 6px auto 0;
  }

  .page-hero.tech-service-hero .tech-service-hero-art:where([data-layout="subpage"], [data-layout="subpage"] *),
  .page-hero.tech-service-hero .tech-service-hero-art[src*="hero-websites"]:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: min(760px, 105%);
    max-width: 105%;
  }
}

@media (max-width: 620px) {
  .page-hero.tech-service-hero:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding-top: 118px;
    padding-bottom: 64px;
  }

  .page-hero.tech-service-hero .page-title:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(2.35rem, 11vw, 3.65rem);
    line-height: .98;
  }

  .page-hero.tech-service-hero .page-eyebrow:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding: 6px 8px;
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: .10em;
  }

  .page-hero.tech-service-hero .page-hero-lead:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin-top: 20px;
    font-size: .98rem;
    line-height: 1.65;
  }

  .page-hero.tech-service-hero .tech-service-hero-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
    min-height: 330px;
    margin-top: 0;
  }

  .page-hero.tech-service-hero .tech-service-hero-art:where([data-layout="subpage"], [data-layout="subpage"] *),
  .page-hero.tech-service-hero .tech-service-hero-art[src*="hero-websites"]:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: 112%;
    max-width: 112%;
  }
}


/* Technik-Hero: Buttons und Vorteile wie auf der Startseite / am.toowie.de */
.page-hero .page-hero-actions:where([data-layout="subpage"], [data-layout="subpage"] *) {
  gap: 10px;
  margin-top: 32px;
}

.page-hero .page-hero-actions .page-btn:where([data-layout="subpage"], [data-layout="subpage"] *) {
  min-height: 48px;
  padding: 0 20px;
  border-radius: 13px;
  font-family: Inter, Arial, sans-serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  color: #001428;
  background: #fff;
  border-color: rgba(198,154,87,.52);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

.page-hero .page-hero-actions .page-btn:hover:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #001428;
  background: #fbf7ef;
  border-color: rgba(198,154,87,.72);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

.page-hero .page-hero-points:where([data-layout="subpage"], [data-layout="subpage"] *) {
  gap: 18px;
  margin-top: 28px;
  color: rgba(255,255,255,.74);
  font-size: .82rem;
  font-weight: 750;
}

.page-hero .page-hero-points span:where([data-layout="subpage"], [data-layout="subpage"] *) {
  gap: 6px;
}

.page-hero .page-hero-points i:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: auto;
  height: auto;
  display: inline;
  color: var(--page-gold);
  border: 0;
  clip-path: none;
  font-size: 0;
  line-height: 1;
  background: transparent;
}

.page-hero .page-hero-points i:where([data-layout="subpage"], [data-layout="subpage"] *)::before {
  content: "✓";
  font-family: inherit;
  font-size: .95rem;
  font-weight: 900;
}

@media (max-width: 620px) {
  .page-hero .page-hero-actions:where([data-layout="subpage"], [data-layout="subpage"] *) {
    align-items: stretch;
    flex-direction: column;
  }

  .page-hero .page-hero-actions .page-btn:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: 100%;
  }

  .page-hero .page-hero-points:where([data-layout="subpage"], [data-layout="subpage"] *) {
    display: grid;
    gap: 9px;
  }
}


/* === Hero-Abgleich mit am.toowie.de / Akquise-Manager === */
body.toowie-subpage:where([data-layout="subpage"], [data-layout="subpage"] *) {
  font-family: Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Exakt derselbe dunkelblaue Verlauf wie im Akquise-Manager-Hero. */
body.toowie-subpage .page-hero:where([data-layout="subpage"], [data-layout="subpage"] *),
body.toowie-subpage .page-hero.tech-service-hero:where([data-layout="subpage"], [data-layout="subpage"] *) {
  min-height: auto;
  padding: 158px 0 90px;
  background: linear-gradient(135deg, rgba(0,20,40,1) 0%, rgba(10,40,80,1) 50%, rgba(0,10,30,1) 100%);
}

/* Keine zusätzliche Rasterebene – der Produkt-Hero arbeitet mit dem ruhigen Verlauf. */
body.toowie-subpage .page-hero:where([data-layout="subpage"], [data-layout="subpage"] *)::before {
  display: none;
}

body.toowie-subpage .page-eyebrow:where([data-layout="subpage"], [data-layout="subpage"] *),
body.toowie-subpage .page-hero.tech-service-hero .page-eyebrow:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin-bottom: 0;
  font-family: Inter, Arial, sans-serif;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .12em;
}

/* Überschrift wie beim Akquise Manager. */
body.toowie-subpage .page-title:where([data-layout="subpage"], [data-layout="subpage"] *),
body.toowie-subpage .page-hero.tech-service-hero .page-title:where([data-layout="subpage"], [data-layout="subpage"] *) {
  max-width: 650px;
  margin: 24px 0 24px;
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.058em;
}

body.toowie-subpage .page-title span:where([data-layout="subpage"], [data-layout="subpage"] *),
body.toowie-subpage .page-legal-hero h1 span:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #d8b77f;
}

/* Kleine weiße Unterüberschrift zwischen Headline und Beschreibung. */
body.toowie-subpage .page-hero-subline:where([data-layout="subpage"], [data-layout="subpage"] *) {
  max-width: 620px;
  margin: -8px 0 12px;
  color: #fff;
  font-family: Inter, Arial, sans-serif;
  font-size: 20px;
  font-weight: 850;
  line-height: 1.45;
  letter-spacing: -.015em;
}

body.toowie-subpage .page-hero-lead:where([data-layout="subpage"], [data-layout="subpage"] *),
body.toowie-subpage .page-hero.tech-service-hero .page-hero-lead:where([data-layout="subpage"], [data-layout="subpage"] *) {
  max-width: 620px;
  margin: 0;
  color: rgba(255,255,255,.72);
  font-family: Inter, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.65;
}

/* Vorteilshaken exakt schlicht und golden wie beim Akquise Manager. */
body.toowie-subpage .page-hero .page-hero-points:where([data-layout="subpage"], [data-layout="subpage"] *) {
  gap: 18px;
  margin-top: 28px;
  color: rgba(255,255,255,.74);
  font-family: Inter, Arial, sans-serif;
  font-size: 12px;
  font-weight: 750;
}

body.toowie-subpage .page-hero .page-hero-points span:where([data-layout="subpage"], [data-layout="subpage"] *) {
  gap: 6px;
}

body.toowie-subpage .page-hero .page-hero-points i:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: auto;
  height: auto;
  display: inline;
  color: #c69a57;
  border: 0;
  clip-path: none;
  background: transparent;
  font-family: Inter, Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}

body.toowie-subpage .page-hero .page-hero-points i:where([data-layout="subpage"], [data-layout="subpage"] *)::before {
  content: none;
}

@media (max-width: 900px) {
  body.toowie-subpage .page-hero:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .page-hero.tech-service-hero:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding: 126px 0 65px;
  }

  body.toowie-subpage .page-title:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .page-hero.tech-service-hero .page-title:where([data-layout="subpage"], [data-layout="subpage"] *) {
    max-width: 650px;
    font-size: 45px;
  }
}

@media (max-width: 620px) {
  body.toowie-subpage .page-hero:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .page-hero.tech-service-hero:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding: 118px 0 64px;
  }

  body.toowie-subpage .page-title:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .page-hero.tech-service-hero .page-title:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(38px, 11vw, 45px);
  }

  body.toowie-subpage .page-hero-subline:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: 18px;
  }

  body.toowie-subpage .page-hero-lead:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .page-hero.tech-service-hero .page-hero-lead:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: 16px;
  }
}


/* ==========================================================================\n   Technik-Unterseiten: Phasen-Navigation nach dem Muster der Akquise-Landingpage\n   ========================================================================== */
.service-phase-section:where([data-layout="subpage"], [data-layout="subpage"] *) {
  padding: 56px 0 64px;
  background: #fcf7ef;
  font-family: Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.service-phase-overview-box:where([data-layout="subpage"], [data-layout="subpage"] *) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.service-phase-head:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: block;
  margin-bottom: 42px;
}

.service-phase-head .page-section-kicker:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 0;
  color: #c69a57;
  font-family: Inter, Arial, sans-serif;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .12em;
}

.service-phase-head .page-section-kicker:where([data-layout="subpage"], [data-layout="subpage"] *)::before {
  display: none;
}

.service-phase-head h2:where([data-layout="subpage"], [data-layout="subpage"] *) {
  max-width: 720px;
  margin: 0;
  color: #0a2850;
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.045em;
}

.service-phase-head-copy:where([data-layout="subpage"], [data-layout="subpage"] *) {
  max-width: 760px;
  margin-top: 14px;
  padding-left: 0;
  border-left: 0;
}

.service-phase-head-copy p:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 0;
  color: #64748b;
  font-family: Inter, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
}

.service-phase-hint:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px !important;
  color: #0a2850 !important;
  font-weight: 850;
}

.service-phase-hint span:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 5px rgba(34,197,94,.14);
}

.service-phase-flow:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: grid;
  grid-template-columns: repeat(var(--service-count), minmax(0,1fr));
  gap: 10px;
}

.service-phase-card:where([data-layout="subpage"], [data-layout="subpage"] *) {
  position: relative;
  min-width: 0;
  min-height: 184px;
  display: block;
  padding: 18px;
  font-family: Inter, Arial, sans-serif;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 19px;
  color: #0a2850;
  background: #fff;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.service-phase-card:hover:where([data-layout="subpage"], [data-layout="subpage"] *),
.service-phase-card:focus-visible:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #0a2850;
  transform: translateY(-6px);
  border-color: rgba(198,154,87,.72);
  box-shadow: 0 18px 40px rgba(15,23,42,.13);
  outline: none;
}

.service-phase-card.service-phase-navy:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(145deg,#07142c,#10264d);
}

.service-phase-card.service-phase-navy:hover:where([data-layout="subpage"], [data-layout="subpage"] *),
.service-phase-card.service-phase-navy:focus-visible:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #fff;
  border-color: rgba(198,154,87,.78);
  box-shadow: 0 20px 44px rgba(0,20,40,.24);
}

.service-phase-top span:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .07em;
}

.service-phase-navy .service-phase-top span:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: rgba(255,255,255,.46);
}

.service-phase-card h3:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 24px 0 8px;
  color: #0a2850;
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(14px, 1.3vw, 18px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
}

.service-phase-card p:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 0;
  color: #64748b;
  font-family: Inter, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.55;
}

.service-phase-navy h3:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #fff;
}

.service-phase-navy p:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: rgba(255,255,255,.66);
}

.service-detail-section:where([data-layout="subpage"], [data-layout="subpage"] *) {
  scroll-margin-top: 24px;
  padding-top: 66px;
  padding-bottom: 66px;
}

.service-detail-grid:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: grid;
  grid-template-columns: 86px minmax(0, 760px);
  gap: 34px;
  align-items: start;
}

.service-detail-index:where([data-layout="subpage"], [data-layout="subpage"] *) {
  padding-top: 5px;
  color: var(--page-gold);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.service-detail-copy .page-section-kicker:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin-bottom: 10px;
}

.service-detail-copy .page-section-title:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin-bottom: 12px;
}

.service-detail-lead:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 0 0 12px !important;
  color: var(--page-navy) !important;
  font-size: 17px !important;
  font-weight: 800;
  line-height: 1.5 !important;
}

.service-detail-copy > p:not(.service-detail-lead):where([data-layout="subpage"], [data-layout="subpage"] *) {
  max-width: 720px;
  margin: 0;
  color: var(--page-muted);
  font-size: 15px;
  line-height: 1.7;
}

.service-detail-meta:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: fit-content;
  max-width: 100%;
  margin-top: 18px;
  padding: 7px 10px;
  border: 1px solid rgba(198,154,87,.32);
  border-radius: 999px;
  color: #7d6034;
  background: rgba(198,154,87,.10);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}


/* Technik-Unterseiten: Inhaltsabschnitte im Stil von "Funktionen & Extras" */
.service-feature-section:where([data-layout="subpage"], [data-layout="subpage"] *) {
  scroll-margin-top: 24px;
  padding: 72px 0;
  font-family: Inter, Arial, sans-serif;
}

.service-feature-section.service-feature-warm:where([data-layout="subpage"], [data-layout="subpage"] *) {
  background: #fcf7ef;
}

.service-feature-section.service-feature-cool:where([data-layout="subpage"], [data-layout="subpage"] *) {
  background: #edf5f7;
}

.service-feature-section-heading:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 0 0 20px;
  color: #c69a57;
  font-family: Inter, Arial, sans-serif;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.service-feature-layout:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: grid;
  grid-template-columns: minmax(0,.98fr) minmax(360px,1.02fr);
  gap: 56px;
  align-items: stretch;
}

.service-feature-copy:where([data-layout="subpage"], [data-layout="subpage"] *) {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.service-feature-copy h2:where([data-layout="subpage"], [data-layout="subpage"] *) {
  max-width: 680px;
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(34px,4.4vw,56px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.05em;
}

.service-heading-blue:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #0a2850;
}

.service-heading-gold:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #c69a57;
}

:is(.infrastructure-page, .software-service-page) .service-feature-copy .service-feature-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  color: #0a2850;
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(.84rem, 1vw, 1rem);
  font-weight: 750;
}

:is(.infrastructure-page, .software-service-page) .service-feature-copy .service-feature-benefits > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

:is(.infrastructure-page, .software-service-page) .service-feature-copy .service-feature-benefits i {
  color: #c69a57;
  font-size: inherit;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}

.service-feature-kicker:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #c69a57;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.service-feature-copy > p:where([data-layout="subpage"], [data-layout="subpage"] *) {
  max-width: 620px;
  margin: 18px 0 0;
  color: #64748b;
  font-size: 16px;
  line-height: 1.8;
}

.service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
  min-width: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 0 0 26px;
  border-left: 4px solid #c69a57;
}

.service-feature-rail article:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr);
  gap: 14px;
  align-items: start;
  padding: 0 0 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(15,23,42,.12);
}

.service-feature-rail article:last-child:where([data-layout="subpage"], [data-layout="subpage"] *) {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.service-feature-icon:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a2850;
  background: #f1e6d3;
  font-size: 16px;
  font-weight: 950;
  line-height: 1;
  flex: 0 0 38px;
}

.service-feature-icon i:where([data-layout="subpage"], [data-layout="subpage"] *) {
  font-size: 15px;
  line-height: 1;
}

.service-feature-rail b:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: block;
  color: #0a2850;
  font-size: 14px;
  line-height: 1.35;
}

.service-feature-rail p:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.6;
}

.service-feature-layout.is-reverse .service-feature-copy:where([data-layout="subpage"], [data-layout="subpage"] *) {
  grid-column: 2;
  grid-row: 1;
  min-height: 100%;
  padding-left: 26px;
  border-left: 4px solid #c69a57;
}

.service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
  grid-column: 1;
  grid-row: 1;
  padding-left: 0;
  border-left: 0;
}

@media (max-width: 900px) {
  .service-feature-section:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding: 58px 0;
  }

  .service-feature-layout:where([data-layout="subpage"], [data-layout="subpage"] *),
  .service-feature-layout.is-reverse:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .service-feature-layout.is-reverse .service-feature-copy:where([data-layout="subpage"], [data-layout="subpage"] *),
  .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-column: 1;
  }

  .service-feature-layout.is-reverse .service-feature-copy:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-row: 1;
    min-height: 0;
    padding-left: 0;
    border-left: 0;
  }

  .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-row: 2;
    padding-left: 26px;
    border-left: 4px solid #c69a57;
  }
}

@media (max-width: 560px) {
  .service-feature-section:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding: 46px 0;
  }

  .service-feature-section-heading:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin-bottom: 16px;
    font-size: 11px;
  }

  .service-feature-copy h2:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(30px,10vw,42px);
  }

  .service-feature-copy > p:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: 14px;
    line-height: 1.7;
  }

  .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding-left: 18px;
    border-left-width: 3px;
  }

  .service-feature-rail article:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: 38px minmax(0,1fr);
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
  }

  .service-feature-icon:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 9px;
  }

  .service-feature-rail b:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: 13px;
  }

  .service-feature-rail p:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: 11px;
  }
}

.service-floating-nav:where([data-layout="subpage"], [data-layout="subpage"] *) {
  position: fixed;
  font-family: Inter, Arial, sans-serif;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 70;
  width: min(680px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: repeat(var(--service-nav-count), minmax(0,1fr));
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity .22s ease, transform .22s ease;
}

.service-floating-nav.is-visible:where([data-layout="subpage"], [data-layout="subpage"] *) {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.service-floating-link:where([data-layout="subpage"], [data-layout="subpage"] *) {
  min-width: 0;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 8px 8px;
  overflow: hidden;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  color: #334155;
  background: rgba(255,255,255,.97);
  box-shadow: 0 8px 22px rgba(15,23,42,.14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.service-floating-link.is-edge:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #fff;
  border-color: rgba(7,20,44,.72);
  background: linear-gradient(145deg,rgba(7,20,44,.97),rgba(16,38,77,.97));
}

.service-floating-link:hover:where([data-layout="subpage"], [data-layout="subpage"] *),
.service-floating-link:focus-visible:where([data-layout="subpage"], [data-layout="subpage"] *),
.service-floating-link.is-active:where([data-layout="subpage"], [data-layout="subpage"] *) {
  border-color: var(--page-gold);
  box-shadow: 0 0 0 1px rgba(198,154,87,.22), 0 10px 26px rgba(15,23,42,.18);
  outline: none;
}

.service-floating-link.is-edge:hover:where([data-layout="subpage"], [data-layout="subpage"] *),
.service-floating-link.is-edge:focus-visible:where([data-layout="subpage"], [data-layout="subpage"] *),
.service-floating-link.is-edge.is-active:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #fff;
}

.service-floating-number:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #a8b0bc;
  font-size: 7.5px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .08em;
}

.service-floating-link.is-edge .service-floating-number:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: rgba(255,255,255,.48);
}

.service-floating-title:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.22;
  text-overflow: clip;
  white-space: normal;
}

@media (max-width: 1050px) {
  .service-phase-flow:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }

  .service-phase-card:where([data-layout="subpage"], [data-layout="subpage"] *) {
    min-height: 160px;
  }
}

@media (max-width: 760px) {
  .service-phase-section:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding: 44px 0 50px;
  }

  .service-phase-overview-box:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .service-phase-head:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 22px;
  }

  .service-phase-head h2:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: 32px;
  }

  .service-phase-flow:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
  }

  .service-phase-card:where([data-layout="subpage"], [data-layout="subpage"] *) {
    min-height: 142px;
    padding: 15px;
    border-radius: 15px;
  }

  .service-phase-card h3:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin-top: 18px;
    font-size: 14px;
  }

  .service-phase-card p:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: 10px;
  }

  .service-detail-section:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .service-detail-grid:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .service-detail-index:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding-top: 0;
  }

  .service-floating-nav:where([data-layout="subpage"], [data-layout="subpage"] *) {
    bottom: max(10px, env(safe-area-inset-bottom));
    width: min(680px, calc(100vw - 10px));
    gap: 3px;
  }

  .service-floating-link:where([data-layout="subpage"], [data-layout="subpage"] *) {
    min-height: 36px;
    gap: 2px;
    padding: 4px 4px 5px;
    border-width: 1px;
    border-radius: 6px;
  }

  .service-floating-number:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: 7px;
  }

  .service-floating-title:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(7.5px, 2.15vw, 9px);
    line-height: 1.05;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
}

@media (max-width: 470px) {
  .service-phase-flow:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: 1fr 1fr;
  }

  .service-phase-card:where([data-layout="subpage"], [data-layout="subpage"] *) {
    min-height: 132px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-phase-card:where([data-layout="subpage"], [data-layout="subpage"] *),
  .service-floating-nav:where([data-layout="subpage"], [data-layout="subpage"] *),
  .service-floating-link:where([data-layout="subpage"], [data-layout="subpage"] *) {
    transition: none;
  }

  .service-phase-card:hover:where([data-layout="subpage"], [data-layout="subpage"] *) {
    transform: none;
  }
}

/* IT-Infrastruktur: breite Produktmotive unter den Funktionsabschnitten */
.service-feature-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin-top: 34px;
  overflow: hidden;
  border: 1px solid rgba(15, 40, 80, .10);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(7, 24, 43, .10);
}

.service-feature-visual img:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1914 / 700;
  object-fit: cover;
}

@media (max-width: 900px) {
  .service-feature-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin-top: 28px;
    border-radius: 16px;
  }
}

@media (max-width: 560px) {
  .service-feature-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin-top: 22px;
    border-radius: 13px;
    box-shadow: 0 12px 30px rgba(7, 24, 43, .09);
  }
}


/* Kontaktformular: dunkelblau mit exakt demselben Gold wie in der Hero-Überschrift */
.clean-kontakt-section.contact--navy-softgold:where([data-layout="subpage"], [data-layout="subpage"] *) {
  --contact-octagon-gold: var(--page-hero-gold);
  --contact-soft-gold: var(--page-hero-gold);
  --contact-soft-gold-strong: var(--page-hero-gold);
  --contact-soft-gold-light: var(--page-hero-gold);
  background: linear-gradient(135deg, #06182b 0%, #0b2948 52%, #061326 100%);
}

.contact--navy-softgold .clean-kontakt-ueberschrift:where([data-layout="subpage"], [data-layout="subpage"] *),
.contact--navy-softgold .clean-kontaktformular-ueberschrift:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: var(--contact-soft-gold);
}

.contact--navy-softgold .clean-kontakt-beschreibung:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #e5edf5;
}

.contact--navy-softgold .clean-kontakt-mail:where([data-layout="subpage"], [data-layout="subpage"] *),
.contact--navy-softgold .clean-kontakt-tel:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: var(--contact-soft-gold-light);
}

.contact--navy-softgold .octagon-svg:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: var(--contact-octagon-gold);
}

.contact--navy-softgold.form--oval-blue .clean-kontakt-form-control:where([data-layout="subpage"], [data-layout="subpage"] *),
.contact--navy-softgold.form--oval-blue .clean-kontakt-floating-label-textarea textarea:where([data-layout="subpage"], [data-layout="subpage"] *) {
  border-color: rgba(243, 228, 201, .62);
  background: rgba(255, 255, 255, .075);
  color: #f8fbff;
  box-shadow: inset 0 0 15px rgba(255, 255, 255, .08), 0 10px 28px rgba(0, 0, 0, .14);
}

.contact--navy-softgold.form--oval-blue .clean-kontakt-form-control:hover:where([data-layout="subpage"], [data-layout="subpage"] *),
.contact--navy-softgold.form--oval-blue .clean-kontakt-floating-label-textarea textarea:hover:where([data-layout="subpage"], [data-layout="subpage"] *) {
  border-color: var(--contact-soft-gold);
}

.contact--navy-softgold.form--oval-blue .clean-kontakt-form-control:focus:where([data-layout="subpage"], [data-layout="subpage"] *),
.contact--navy-softgold.form--oval-blue .clean-kontakt-floating-label-textarea textarea:focus:where([data-layout="subpage"], [data-layout="subpage"] *) {
  border-color: var(--contact-soft-gold-light);
  background: rgba(255, 255, 255, .105);
  box-shadow: 0 0 0 3px rgba(243, 228, 201, .14), 0 0 22px rgba(243, 228, 201, .24);
}

.contact--navy-softgold.form--oval-blue .clean-kontakt-floating-label label:where([data-layout="subpage"], [data-layout="subpage"] *),
.contact--navy-softgold.form--oval-blue .clean-kontakt-floating-label-textarea label:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #c7d3df;
}

.contact--navy-softgold.form--oval-blue .clean-kontakt-form-control:focus + label:where([data-layout="subpage"], [data-layout="subpage"] *),
.contact--navy-softgold.form--oval-blue .clean-kontakt-form-control:not(:placeholder-shown) + label:where([data-layout="subpage"], [data-layout="subpage"] *),
.contact--navy-softgold.form--oval-blue .clean-kontakt-floating-label-textarea textarea:focus + label:where([data-layout="subpage"], [data-layout="subpage"] *),
.contact--navy-softgold.form--oval-blue .clean-kontakt-floating-label-textarea textarea:not(:placeholder-shown) + label:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: var(--contact-soft-gold-light);
}

.contact--navy-softgold #charCount:where([data-layout="subpage"], [data-layout="subpage"] *),
.contact--navy-softgold .form-text:where([data-layout="subpage"], [data-layout="subpage"] *),
.contact--navy-softgold .clean-kontakt-form-feedback:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #c7d3df;
}

.contact--navy-softgold.form--oval-blue .clean-kontakt-input-upload-effect:where([data-layout="subpage"], [data-layout="subpage"] *)::after {
  background: var(--contact-soft-gold-light);
}

.contact--navy-softgold .clean-kontakt-btn:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #0a2850;
  background: #fff;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .22);
}

.contact--navy-softgold .clean-kontakt-btn:hover:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #0a2850;
  background: #fffdf8;
  box-shadow: 0 15px 32px rgba(0, 0, 0, .28);
}



/* Service-Uebersicht: Karten behalten eine kompakte Maximalbreite,
   werden als Gruppe zentriert und verkleinern sich bei weniger Platz. */
.service-phase-flow:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.service-phase-card:where([data-layout="subpage"], [data-layout="subpage"] *) {
  flex: 1 1 145px;
  width: 100%;
  max-width: 188px;
}

/* Feinabstimmung der zentrierten Service-Karten:
   IT-Infrastruktur etwas kompakter, IT-Betreuung etwas breiter. */
.service-phase-flow[data-service-count^="6"] .service-phase-card:where([data-layout="subpage"], [data-layout="subpage"] *) {
  max-width: 180px;
}

.service-phase-flow[data-service-count^="4"] .service-phase-card:where([data-layout="subpage"], [data-layout="subpage"] *) {
  max-width: 235px;
}

.service-phase-flow[data-service-count^="4"] .service-phase-card h3:where([data-layout="subpage"], [data-layout="subpage"] *) {
  hyphens: auto;
  overflow-wrap: break-word;
}

/* ========================================================================== */
/* Einheitliche Überschriften-Typografie wie im Startseiten-Hero              */
/* ========================================================================== */
body.toowie-subpage h1:where([data-layout="subpage"], [data-layout="subpage"] *),
body.toowie-subpage h2:where([data-layout="subpage"], [data-layout="subpage"] *) {
  font-family: Inter, Arial, sans-serif;
  font-weight: 780;
  line-height: .97;
  letter-spacing: -.055em;
}

body.toowie-subpage .page-title:where([data-layout="subpage"], [data-layout="subpage"] *),
body.toowie-subpage .page-hero.tech-service-hero .page-title:where([data-layout="subpage"], [data-layout="subpage"] *),
body.toowie-subpage .page-legal-hero h1:where([data-layout="subpage"], [data-layout="subpage"] *),
body.toowie-subpage .page-section-title:where([data-layout="subpage"], [data-layout="subpage"] *),
body.toowie-subpage .page-story-copy h2:where([data-layout="subpage"], [data-layout="subpage"] *),
body.toowie-subpage .service-phase-head h2:where([data-layout="subpage"], [data-layout="subpage"] *),
body.toowie-subpage .service-feature-copy h2:where([data-layout="subpage"], [data-layout="subpage"] *),
body.toowie-subpage .page-section > .page-shell > h2:where([data-layout="subpage"], [data-layout="subpage"] *),
body.toowie-subpage .page-cta h2:where([data-layout="subpage"], [data-layout="subpage"] *),
body.toowie-subpage .clean-kontakt-ueberschrift:where([data-layout="subpage"], [data-layout="subpage"] *),
body.toowie-subpage .clean-kontaktformular-ueberschrift:where([data-layout="subpage"], [data-layout="subpage"] *) {
  font-size: clamp(2.55rem, 4.15vw, 4.45rem);
  font-weight: 780;
  line-height: .97;
  letter-spacing: -.055em;
  white-space: nowrap;
}

@media (max-width: 980px) {
  body.toowie-subpage .page-title:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .page-hero.tech-service-hero .page-title:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .page-legal-hero h1:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .page-section-title:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .page-story-copy h2:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .service-phase-head h2:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .service-feature-copy h2:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .page-section > .page-shell > h2:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .page-cta h2:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .clean-kontakt-ueberschrift:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .clean-kontaktformular-ueberschrift:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(2.55rem, 6vw, 4rem);
  }
}

@media (max-width: 767px) {
  body.toowie-subpage .page-title:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .page-hero.tech-service-hero .page-title:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .page-legal-hero h1:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .page-section-title:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .page-story-copy h2:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .service-phase-head h2:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .service-feature-copy h2:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .page-section > .page-shell > h2:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .page-cta h2:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .clean-kontakt-ueberschrift:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .clean-kontaktformular-ueberschrift:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(2.35rem, 11vw, 3.65rem);
    line-height: .98;
  }
}

/* Websites: wechselnde Text-/Screenshot-Bloecke nur auf der Website-Unterseite */
.website-showcase-page .service-feature-layout:where([data-layout="subpage"], [data-layout="subpage"] *) {
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  grid-template-rows: auto 1fr;
  column-gap: 58px;
  row-gap: 26px;
  align-items: start;
}

.website-showcase-page .service-feature-layout .service-feature-copy:where([data-layout="subpage"], [data-layout="subpage"] *) {
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  padding-left: 0;
  border-left: 0;
}

.website-showcase-page .service-feature-layout .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  padding-left: 22px;
  border-left: 4px solid #c69a57;
}

.website-showcase-page .website-showcase-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(15, 40, 80, .10);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 20px 48px rgba(7, 24, 43, .11);
}

.website-showcase-page .website-showcase-visual img:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: block;
  width: 100%;
  height: 520px;
  object-fit: contain;
  background: #fff;
}

/* Screenshots in den drei gewünschten Bereichen bewusst wie eigenständige Screenshots absetzen. */
.website-showcase-page #klare-botschaft .website-showcase-visual:where([data-layout="subpage"], [data-layout="subpage"] *),
.website-showcase-page #individuelle-funktionen .website-showcase-visual:where([data-layout="subpage"], [data-layout="subpage"] *),
.website-showcase-page #rechtliche-grundlagen .website-showcase-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.website-showcase-page #klare-botschaft .website-showcase-visual img:where([data-layout="subpage"], [data-layout="subpage"] *),
.website-showcase-page #individuelle-funktionen .website-showcase-visual img:where([data-layout="subpage"], [data-layout="subpage"] *),
.website-showcase-page #rechtliche-grundlagen .website-showcase-visual img:where([data-layout="subpage"], [data-layout="subpage"] *) {
  border: 2px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}

.website-showcase-page .service-feature-layout.is-reverse .service-feature-copy:where([data-layout="subpage"], [data-layout="subpage"] *) {
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  padding-left: 0;
  border-left: 0;
}

.website-showcase-page .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
  grid-column: 2;
  grid-row: 2;
  padding-left: 22px;
  border-left: 4px solid #c69a57;
}

.website-showcase-page .service-feature-layout.is-reverse .website-showcase-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
  grid-column: 1;
  grid-row: 1 / span 2;
}

/* Software & Automatisierung: Motive wie bei IT-Betreuung / IT-Infrastruktur */
.software-service-page .software-feature-visual img:where([data-layout="subpage"], [data-layout="subpage"] *) {
  aspect-ratio: 1914 / 700;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 900px) {
  .website-showcase-page .service-feature-layout:where([data-layout="subpage"], [data-layout="subpage"] *),
  .website-showcase-page .service-feature-layout.is-reverse:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 26px;
  }

  .website-showcase-page .service-feature-layout .service-feature-copy:where([data-layout="subpage"], [data-layout="subpage"] *),
  .website-showcase-page .service-feature-layout.is-reverse .service-feature-copy:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-column: 1;
    grid-row: 1;
    padding-left: 0;
    border-left: 0;
  }

  .website-showcase-page .website-showcase-visual:where([data-layout="subpage"], [data-layout="subpage"] *),
  .website-showcase-page .service-feature-layout.is-reverse .website-showcase-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-column: 1;
    grid-row: 2;
    border-radius: 17px;
  }

  .website-showcase-page .website-showcase-visual img:where([data-layout="subpage"], [data-layout="subpage"] *) {
    height: auto;
    max-height: none;
  }

  .website-showcase-page .service-feature-layout .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  .website-showcase-page .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-column: 1;
    grid-row: 3;
    padding-left: 22px;
    border-left: 4px solid #c69a57;
  }
}

@media (max-width: 560px) {
  .website-showcase-page .website-showcase-visual:where([data-layout="subpage"], [data-layout="subpage"] *),
  .website-showcase-page .service-feature-layout.is-reverse .website-showcase-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
    border-radius: 13px;
    box-shadow: 0 12px 30px rgba(7, 24, 43, .09);
  }
}

/* 2026-08-27: Inhaltsbloecke Website + Software wie Akquise-Manager-Textkarten */
.website-showcase-page .service-feature-copy h2:where([data-layout="subpage"], [data-layout="subpage"] *),
.software-service-page .service-feature-copy h2:where([data-layout="subpage"], [data-layout="subpage"] *) {
  max-width: 650px;
  font-size: clamp(2.15rem, 3.35vw, 3.05rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em !important;
}

.website-showcase-page .service-feature-copy h2 .service-heading-gold:where([data-layout="subpage"], [data-layout="subpage"] *),
.software-service-page .service-feature-copy h2 .service-heading-gold:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #0a2850;
}

.website-showcase-page .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
.website-showcase-page .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
.software-service-page .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
  padding-left: 0;
  border-left: 0;
}

.website-showcase-page .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
.software-service-page .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
  gap: 12px;
  justify-content: flex-start;
}

.website-showcase-page .service-feature-rail article:where([data-layout="subpage"], [data-layout="subpage"] *),
.software-service-page .service-feature-rail article:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 0;
  border-bottom: 0;
}

.website-showcase-page .service-feature-icon:where([data-layout="subpage"], [data-layout="subpage"] *),
.software-service-page .service-feature-icon:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: 22px;
  height: 22px;
  min-width: 22px;
  flex-basis: 22px;
  border-radius: 8px;
  color: transparent;
  background: #f8e9c7;
  font-size: 0;
}

.website-showcase-page .service-feature-icon:where([data-layout="subpage"], [data-layout="subpage"] *)::before,
.software-service-page .service-feature-icon:where([data-layout="subpage"], [data-layout="subpage"] *)::before {
  content: "✓";
  color: #0a2850;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.website-showcase-page .service-feature-rail b:where([data-layout="subpage"], [data-layout="subpage"] *),
.software-service-page .service-feature-rail b:where([data-layout="subpage"], [data-layout="subpage"] *) {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
}

.website-showcase-page .service-feature-rail article p:where([data-layout="subpage"], [data-layout="subpage"] *),
.software-service-page .service-feature-rail article p:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: none;
}

.website-showcase-page .service-feature-layout:where([data-layout="subpage"], [data-layout="subpage"] *) {
  row-gap: 20px;
}

@media (max-width: 767px) {
  .website-showcase-page .service-feature-copy h2:where([data-layout="subpage"], [data-layout="subpage"] *),
  .software-service-page .service-feature-copy h2:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(2rem, 9vw, 2.65rem) !important;
  }
}


/* ==========================================================================\n   Website + Software: Detailblöcke wie Akquise Manager (v2)\n   - keine goldene Trennlinie\n   - kleinere Überschriften\n   - ruhige Checkliste mit goldenen Haken\n   ========================================================================== */
body.website-showcase-page .service-feature-copy h2:where([data-layout="subpage"], [data-layout="subpage"] *),
body.software-service-page .service-feature-copy h2:where([data-layout="subpage"], [data-layout="subpage"] *) {
  max-width: 640px;
  font-size: clamp(32px, 3.7vw, 48px);
  line-height: 1.05;
  letter-spacing: -.045em;
}

body.website-showcase-page .service-feature-copy > p:where([data-layout="subpage"], [data-layout="subpage"] *),
body.software-service-page .service-feature-copy > p:where([data-layout="subpage"], [data-layout="subpage"] *) {
  max-width: 650px;
  margin-top: 18px;
  font-size: 15.5px;
  line-height: 1.72;
}

body.website-showcase-page .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
body.software-service-page .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
body.website-showcase-page .service-feature-layout.is-reverse .service-feature-copy:where([data-layout="subpage"], [data-layout="subpage"] *),
body.software-service-page .service-feature-layout.is-reverse .service-feature-copy:where([data-layout="subpage"], [data-layout="subpage"] *) {
  padding-left: 0;
  border-left: 0;
}

body.website-showcase-page .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
body.software-service-page .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
  gap: 13px;
  justify-content: center;
}

body.website-showcase-page .service-feature-rail article:where([data-layout="subpage"], [data-layout="subpage"] *),
body.software-service-page .service-feature-rail article:where([data-layout="subpage"], [data-layout="subpage"] *) {
  grid-template-columns: 30px minmax(0,1fr);
  gap: 11px;
  padding: 0;
  margin: 0;
  border-bottom: 0;
}

body.website-showcase-page .service-feature-icon:where([data-layout="subpage"], [data-layout="subpage"] *),
body.software-service-page .service-feature-icon:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 7px;
  flex: 0 0 22px;
  background: #f7e8ca;
  color: transparent;
  font-size: 0;
  line-height: 1;
}

body.website-showcase-page .service-feature-icon:where([data-layout="subpage"], [data-layout="subpage"] *)::before,
body.software-service-page .service-feature-icon:where([data-layout="subpage"], [data-layout="subpage"] *)::before {
  content: "✓";
  color: #c69a57;
  font-family: Inter, Arial, sans-serif;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

body.website-showcase-page .service-feature-rail b:where([data-layout="subpage"], [data-layout="subpage"] *),
body.software-service-page .service-feature-rail b:where([data-layout="subpage"], [data-layout="subpage"] *) {
  font-size: 14px;
  line-height: 1.4;
}

body.website-showcase-page .service-feature-rail p:where([data-layout="subpage"], [data-layout="subpage"] *),
body.software-service-page .service-feature-rail p:where([data-layout="subpage"], [data-layout="subpage"] *) {
  max-width: 620px;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.55;
}

body.website-showcase-page .service-feature-layout.is-reverse .service-feature-copy:where([data-layout="subpage"], [data-layout="subpage"] *),
body.software-service-page .service-feature-layout.is-reverse .service-feature-copy:where([data-layout="subpage"], [data-layout="subpage"] *) {
  min-height: 100%;
}

@media (max-width: 700px) {
  body.website-showcase-page .service-feature-copy h2:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page .service-feature-copy h2:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(29px, 9vw, 39px);
  }

  body.website-showcase-page .service-feature-copy > p:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page .service-feature-copy > p:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: 15px;
  }

  body.website-showcase-page .service-feature-rail p:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page .service-feature-rail p:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: 12.5px;
  }
}


/* 2026-08-27 v3: Website-Screenshots nicht in Kartenboxen, goldene Linien komplett entfernen */
body.website-showcase-page .website-showcase-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.website-showcase-page .website-showcase-visual img:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: block;
  width: 100%;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(7, 24, 43, .10);
}

body.website-showcase-page .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
body.website-showcase-page .service-feature-layout .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
body.website-showcase-page .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
body.software-service-page .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
body.software-service-page .service-feature-layout .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
body.software-service-page .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
body.website-showcase-page .service-feature-copy:where([data-layout="subpage"], [data-layout="subpage"] *),
body.website-showcase-page .service-feature-layout.is-reverse .service-feature-copy:where([data-layout="subpage"], [data-layout="subpage"] *),
body.software-service-page .service-feature-copy:where([data-layout="subpage"], [data-layout="subpage"] *),
body.software-service-page .service-feature-layout.is-reverse .service-feature-copy:where([data-layout="subpage"], [data-layout="subpage"] *) {
  border-left: 0 !important;
  padding-left: 0 !important;
}

@media (max-width: 900px) {
  body.website-showcase-page .website-showcase-visual:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.website-showcase-page .service-feature-layout.is-reverse .website-showcase-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body.website-showcase-page .website-showcase-visual img:where([data-layout="subpage"], [data-layout="subpage"] *) {
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(7, 24, 43, .09);
  }
}

/* IT-Betreuung: "Arbeitsplatzeinrichtung" in der schwebenden Navigation einzeilig */
.service-floating-link[href="#arbeitsplatzeinrichtung"] .service-floating-title:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  letter-spacing: -0.02em;
}

@media (max-width: 760px) {
  .service-floating-link[href="#arbeitsplatzeinrichtung"] .service-floating-title:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(7px, 2vw, 9px);
  }
}

/* Software & Automatisierung + Websites: groessere Schrift in der unteren Seitennavigation */
@media (min-width: 761px) {
  body.software-service-page .service-floating-title:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.website-showcase-page .service-floating-title:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: 11px;
  }

  /* Software: schwebende Themennavigation kompakter halten. */
  body.software-service-page .service-floating-nav:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: min(560px, calc(100vw - 24px));
  }

  /* Websites: schwebende Navigationsboxen etwas groesser */
  body.website-showcase-page .service-floating-nav:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: min(820px, calc(100vw - 24px));
  }

  body.website-showcase-page .service-floating-link:where([data-layout="subpage"], [data-layout="subpage"] *) {
    min-height: 66px;
    padding: 8px 10px 9px;
  }
}

/* Hero-Bereiche auf den Unterseiten auf dieselbe Inhaltsbreite wie die Startseite bringen. */
@media (min-width: 981px) {
  body.toowie-subpage .page-hero > .page-shell:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .page-hero.tech-service-hero > .page-shell:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .tech-overview-hero > .page-shell:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: min(1440px, calc(100% - 12px));
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  .page-hero.tech-service-hero > .page-shell:where([data-layout="subpage"], [data-layout="subpage"] *),
  .tech-overview-hero > .page-shell:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: min(1320px, calc(100% - 24px));
  }
}

/* 2026-08-28: Rechtliches – Landingpage-Aufbau mit Akquise-Manager-Dokumentbox. */
body.legal-page:where([data-layout="subpage"], [data-layout="subpage"] *) {
  background: #fff;
}

/* Navigation auf allen drei Rechtseiten als durchgehende dunkelblaue Leiste. */
body.legal-page.toowie-shared-navigation .toowie-primary-nav.fixed-top:where([data-layout="subpage"], [data-layout="subpage"] *) {
  background: #001428 !important;
  box-shadow: none !important;
}

body.legal-page .page-legal-document-section:where([data-layout="subpage"], [data-layout="subpage"] *) {
  min-height: auto;
  padding: 0 0 82px;
  background: #fff;
}

/* Titelbereich schließt optisch direkt an die dunkelblaue Navigation an. */
body.legal-page .page-legal-title-band:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: 100%;
  padding: 146px 0 54px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 10%, rgba(198,154,87,.12), transparent 28%),
    linear-gradient(135deg, #001428 0%, #0a2850 62%, #001428 100%);
}

body.legal-page .page-legal-document-section .page-shell:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: min(1120px, calc(100% - 48px));
  max-width: 1120px;
  margin: 0 auto;
}

body.legal-page .page-legal-page-heading:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: min(1000px, 100%);
  margin: 0 auto;
  text-align: center;
}

body.legal-page .page-legal-page-heading h1:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 0;
  color: #fff;
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -.04em;
  text-align: center;
}

body.legal-page .page-legal-content-shell:where([data-layout="subpage"], [data-layout="subpage"] *) {
  padding-top: 34px;
}

/* Dokumentbox entspricht dem Aufbau der Akquise-Manager-Landingpage. */
body.legal-page .page-legal-document:where([data-layout="subpage"], [data-layout="subpage"] *) {
  position: relative;
  width: min(1000px, 100%);
  margin: 0 auto;
  padding: 44px 48px 40px;
  border: 1px solid #d9e4ef;
  border-radius: 18px;
  background: #f4f7fb;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .06);
}

body.legal-page .page-legal-document-head:where([data-layout="subpage"], [data-layout="subpage"] *) {
  position: relative;
  display: block;
  min-height: 38px;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
}

body.legal-page .page-legal-document-title:where([data-layout="subpage"], [data-layout="subpage"] *) {
  max-width: calc(100% - 160px);
  margin: 0;
  color: #104e8b;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
}

body.legal-page .page-legal-document-logo:where([data-layout="subpage"], [data-layout="subpage"] *) {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 132px;
  min-height: 38px;
  text-decoration: none;
}

body.legal-page .page-legal-document-logo img:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: block;
  width: 118px;
  max-width: 100%;
  height: auto;
}

body.legal-page .page-legal-document-body:where([data-layout="subpage"], [data-layout="subpage"] *) {
  max-width: none;
}

body.legal-page .page-legal-document-body .legal-section:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 0;
  padding: 0;
  border: 0;
}

body.legal-page .page-legal-document-body .legal-section + .legal-section:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

body.legal-page .page-legal-document-body h2:where([data-layout="subpage"], [data-layout="subpage"] *),
body.legal-page .page-legal-document-body h3:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #104e8b;
}

body.legal-page .page-legal-document-body h2:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 24px 0 10px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.02em;
}

body.legal-page .page-legal-document-body .legal-section:first-child h2:where([data-layout="subpage"], [data-layout="subpage"] *),
body.legal-page .page-legal-document-body > h2:first-child:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin-top: 0;
}

body.legal-page .page-legal-document-body h3:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 20px 0 8px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
}

body.legal-page .page-legal-document-body p:where([data-layout="subpage"], [data-layout="subpage"] *),
body.legal-page .page-legal-document-body li:where([data-layout="subpage"], [data-layout="subpage"] *),
body.legal-page .page-legal-document-body dd:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #334e68;
  font-size: 14px;
  line-height: 1.64;
}

body.legal-page .page-legal-document-body p:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 0 0 10px;
}

body.legal-page .page-legal-document-body ul:where([data-layout="subpage"], [data-layout="subpage"] *),
body.legal-page .page-legal-document-body ol:where([data-layout="subpage"], [data-layout="subpage"] *),
body.legal-page .page-legal-document-body .legal-list:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 8px 0 14px;
  padding-left: 22px;
}

body.legal-page .page-legal-document-body li:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 5px 0;
  padding-left: 0;
}

body.legal-page .page-legal-document-body strong:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #20384e;
}

body.legal-page .page-legal-document-body a:where([data-layout="subpage"], [data-layout="subpage"] *),
body.legal-page .page-legal-document-meta a:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

body.legal-page .page-legal-document-body a:hover:where([data-layout="subpage"], [data-layout="subpage"] *),
body.legal-page .page-legal-document-body a:focus-visible:where([data-layout="subpage"], [data-layout="subpage"] *),
body.legal-page .page-legal-document-meta a:hover:where([data-layout="subpage"], [data-layout="subpage"] *),
body.legal-page .page-legal-document-meta a:focus-visible:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #104e8b;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.legal-page .page-legal-document-body .legal-callout:where([data-layout="subpage"], [data-layout="subpage"] *),
body.legal-page .page-legal-document-body .legal-callout-neutral:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 18px 0;
  padding: 16px 18px;
  color: #486581;
  border: 1px solid #d9e4ef;
  border-left: 4px solid #104e8b;
  border-radius: 16px;
  background: #fbfcfd;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
  line-height: 1.65;
}

body.legal-page .page-legal-document-body .legal-facts:where([data-layout="subpage"], [data-layout="subpage"] *) {
  gap: 0 30px;
  margin-top: 16px;
}

body.legal-page .page-legal-document-body .legal-facts > div:where([data-layout="subpage"], [data-layout="subpage"] *) {
  border-top-color: #d9e4ef;
}

/* Footer der Dokumentbox – Anordnung wie beim Akquise Manager. */
body.legal-page .page-legal-document-footer:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
  gap: 36px !important;
  align-items: center !important;
  margin-top: 22px !important;
  padding: 24px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid #d9e4ef !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* PDF-Icon 1:1 aus der Akquise-Manager-Landingpage: identisches Font-Awesome-SVG. */
body.legal-page .page-legal-pdf-download:where([data-layout="subpage"], [data-layout="subpage"] *) {
  justify-self: center !important;
  align-self: center !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #e63946 !important;
  line-height: 0 !important;
  text-decoration: none !important;
  transform: none !important;
}

body.legal-page .page-legal-pdf-download:where([data-layout="subpage"], [data-layout="subpage"] *)::before,
body.legal-page .page-legal-pdf-download:where([data-layout="subpage"], [data-layout="subpage"] *)::after {
  display: none !important;
  content: none !important;
}

body.legal-page .page-legal-pdf-icon:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: block !important;
  width: 80px !important;
  height: 80px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  line-height: 0 !important;
}

body.legal-page .page-legal-pdf-icon svg:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: block !important;
  width: 80px !important;
  height: 80px !important;
  overflow: visible;
}

body.legal-page .page-legal-pdf-download:hover:where([data-layout="subpage"], [data-layout="subpage"] *),
body.legal-page .page-legal-pdf-download:focus-visible:where([data-layout="subpage"], [data-layout="subpage"] *),
body.legal-page .page-legal-pdf-download:active:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #cf2634 !important;
  text-decoration: none !important;
  transform: none !important;
}

body.legal-page .page-legal-document-date:where([data-layout="subpage"], [data-layout="subpage"] *) {
  justify-self: end !important;
  align-self: center !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}

body.legal-page .page-legal-document-date > strong:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: block;
  margin: 0 0 14px !important;
  color: #104e8b;
  font-size: 20px !important;
  font-weight: 900;
  line-height: 1.2 !important;
}

body.legal-page .page-legal-document-meta:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.legal-page .page-legal-document-meta > div:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: grid !important;
  grid-template-columns: 126px 12px minmax(0, 1fr) !important;
  column-gap: 10px !important;
  align-items: start !important;
}

body.legal-page .page-legal-document-meta > div:where([data-layout="subpage"], [data-layout="subpage"] *)::before {
  content: ":" !important;
  display: block !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  color: #829ab1;
}

body.legal-page .page-legal-document-meta dt:where([data-layout="subpage"], [data-layout="subpage"] *),
body.legal-page .page-legal-document-meta dd:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

body.legal-page .page-legal-document-meta dt:where([data-layout="subpage"], [data-layout="subpage"] *) {
  grid-column: 1 !important;
  grid-row: 1 !important;
  color: #104e8b;
  font-weight: 800;
}

body.legal-page .page-legal-document-meta dd:where([data-layout="subpage"], [data-layout="subpage"] *) {
  grid-column: 3 !important;
  grid-row: 1 !important;
  color: #334e68;
}

@media (max-width: 900px) {
  body.legal-page .page-legal-document-section .page-shell:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: min(100% - 36px, 1120px);
  }

  body.legal-page .page-legal-document:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding: 34px 24px 32px;
  }

  body.legal-page .page-legal-document-footer:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: minmax(0, 1fr) minmax(270px, 330px) !important;
    gap: 24px !important;
  }
}

@media (max-width: 760px) {
  body.legal-page .page-legal-title-band:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding: 124px 0 42px;
  }

  body.legal-page .page-legal-page-heading h1:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(32px, 10vw, 42px);
  }

  body.legal-page .page-legal-content-shell:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding-top: 22px;
  }

  body.legal-page .page-legal-document:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding: 28px 18px 26px;
    border-radius: 14px;
  }

  body.legal-page .page-legal-document-head:where([data-layout="subpage"], [data-layout="subpage"] *) {
    min-height: 34px;
    margin-bottom: 6px;
  }

  body.legal-page .page-legal-document-title:where([data-layout="subpage"], [data-layout="subpage"] *) {
    max-width: calc(100% - 118px);
    font-size: 24px;
  }

  body.legal-page .page-legal-document-logo:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: 108px;
  }

  body.legal-page .page-legal-document-logo img:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: 100px;
  }

  body.legal-page .page-legal-document-body h2:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin-top: 22px;
    font-size: 19px;
  }

  body.legal-page .page-legal-document-body h3:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: 16px;
  }

  body.legal-page .page-legal-document-body p:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.legal-page .page-legal-document-body li:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.legal-page .page-legal-document-body dd:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: 13px;
  }

  body.legal-page .page-legal-document-body .legal-facts:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.legal-page .page-legal-document-body .legal-license-list:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: 1fr;
  }

  body.legal-page .page-legal-document-footer:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    justify-items: start !important;
  }

  body.legal-page .page-legal-pdf-download:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.legal-page .page-legal-document-date:where([data-layout="subpage"], [data-layout="subpage"] *) {
    justify-self: start !important;
  }

  body.legal-page .page-legal-pdf-icon:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.legal-page .page-legal-pdf-icon svg:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: 72px !important;
    height: 72px !important;
  }

  body.legal-page .page-legal-document-date > strong:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin-bottom: 12px !important;
    font-size: 18px !important;
  }

  body.legal-page .page-legal-document-meta:where([data-layout="subpage"], [data-layout="subpage"] *) {
    gap: 7px !important;
  }

  body.legal-page .page-legal-document-meta > div:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: 88px 10px minmax(0, 1fr) !important;
    column-gap: 8px !important;
  }

  body.legal-page .page-legal-document-meta dt:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.legal-page .page-legal-document-meta dd:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: 12px !important;
  }
}


/* Data-Act-Tabelle innerhalb der zentralen Rechtseiten. */
body.legal-page .legal-data-table-wrap:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: 100%;
  margin: 14px 0 18px;
  overflow-x: auto;
  border: 1px solid #cbd8e5;
  border-radius: 12px;
  background: #fff;
}
body.legal-page .legal-data-table:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  color: #334e68;
  font-size: 13px;
  line-height: 1.5;
}
body.legal-page .legal-data-table th:where([data-layout="subpage"], [data-layout="subpage"] *),
body.legal-page .legal-data-table td:where([data-layout="subpage"], [data-layout="subpage"] *) {
  padding: 11px 12px;
  border-right: 1px solid #cbd8e5;
  border-bottom: 1px solid #cbd8e5;
  vertical-align: top;
  text-align: left;
}
body.legal-page .legal-data-table th:last-child:where([data-layout="subpage"], [data-layout="subpage"] *),
body.legal-page .legal-data-table td:last-child:where([data-layout="subpage"], [data-layout="subpage"] *) { border-right: 0; }
body.legal-page .legal-data-table tr:last-child td:where([data-layout="subpage"], [data-layout="subpage"] *) { border-bottom: 0; }
body.legal-page .legal-data-table th:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #20384e;
  background: #e6eef6;
  font-weight: 800;
}

/* ========================================================================== */
/* IT-Betreuung: Desktop-Anordnung bis 400px beibehalten und mitskalieren     */
/* Erst bei maximal 399px greifen die bestehenden Mobile-Layouts.             */
/* ========================================================================== */
@media (min-width: 400px) and (max-width: 1200px) {
  body.managedservice-page .page-hero.tech-service-hero:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding-top: clamp(108px, 11.2vw, 134px);
    padding-bottom: clamp(42px, 6.5vw, 78px);
  }

  body.managedservice-page .page-hero.tech-service-hero > .page-shell:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: min(1320px, calc(100% - 24px));
  }

  body.managedservice-page .page-hero.tech-service-hero .page-hero-grid:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    gap: clamp(10px, 3.4vw, 40px);
    align-items: center;
  }

  body.managedservice-page .page-hero.tech-service-hero .page-hero-grid > div:first-child:where([data-layout="subpage"], [data-layout="subpage"] *) {
    min-width: 0;
  }

  body.managedservice-page .page-hero.tech-service-hero .page-title:where([data-layout="subpage"], [data-layout="subpage"] *) {
    max-width: none;
    margin: clamp(10px, 2vw, 24px) 0 clamp(10px, 2vw, 24px);
    font-size: clamp(1.28rem, 4.15vw, 3.12rem);
    line-height: .98;
  }

  body.managedservice-page .page-hero-subline:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin: clamp(-4px, -.65vw, -8px) 0 clamp(6px, 1vw, 12px);
    font-size: clamp(.68rem, 1.8vw, 1.25rem);
    line-height: 1.4;
  }

  body.managedservice-page .page-hero.tech-service-hero .page-hero-lead:where([data-layout="subpage"], [data-layout="subpage"] *) {
    max-width: none;
    font-size: clamp(.60rem, 1.35vw, 1.02rem);
    line-height: 1.62;
  }

  body.managedservice-page .page-hero .page-hero-actions:where([data-layout="subpage"], [data-layout="subpage"] *) {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: clamp(5px, .85vw, 10px);
    margin-top: clamp(14px, 2.7vw, 32px);
  }

  body.managedservice-page .page-hero .page-hero-actions .page-btn:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: auto;
    min-height: clamp(31px, 4vw, 48px);
    padding: 0 clamp(9px, 1.67vw, 20px);
    border-radius: clamp(7px, 1.08vw, 13px);
    font-size: clamp(.50rem, 1.17vw, .875rem);
    white-space: nowrap;
  }

  body.managedservice-page .page-hero .page-hero-points:where([data-layout="subpage"], [data-layout="subpage"] *) {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(5px, 1.5vw, 18px);
    margin-top: clamp(12px, 2.33vw, 28px);
    font-size: clamp(.45rem, 1vw, .75rem);
  }

  body.managedservice-page .page-hero .page-hero-points span:where([data-layout="subpage"], [data-layout="subpage"] *) {
    gap: clamp(3px, .5vw, 6px);
  }

  body.managedservice-page .page-hero .page-hero-points i:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(.45rem, 1vw, .75rem);
  }

  body.managedservice-page .page-hero.tech-service-hero .tech-service-hero-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
    min-height: clamp(220px, 46.7vw, 560px);
    width: 100%;
    margin: 0 clamp(-70px, -5.8vw, -24px) 0 0;
  }

  body.managedservice-page .page-hero.tech-service-hero .tech-service-hero-art:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: min(820px, 122%);
    max-width: none;
  }

  body.managedservice-page .service-phase-section:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding: clamp(28px, 4.67vw, 56px) 0 clamp(32px, 5.33vw, 64px);
  }

  body.managedservice-page .service-phase-head:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: clamp(12px, 2.83vw, 34px);
    align-items: end;
    margin-bottom: clamp(20px, 3.5vw, 42px);
  }

  body.managedservice-page .service-phase-head .page-section-kicker:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(.42rem, .92vw, .6875rem);
  }

  body.managedservice-page .service-phase-head h2:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin-top: clamp(7px, 1.08vw, 13px);
    font-size: clamp(1.05rem, 4vw, 3rem);
  }

  body.managedservice-page .service-phase-head-copy p:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(.48rem, 1.33vw, 1rem);
    line-height: 1.7;
  }

  body.managedservice-page .service-phase-hint:where([data-layout="subpage"], [data-layout="subpage"] *) {
    gap: clamp(4px, .83vw, 10px);
    margin-top: clamp(5px, .83vw, 10px) !important;
  }

  body.managedservice-page .service-phase-hint span:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: clamp(5px, .83vw, 10px);
    height: clamp(5px, .83vw, 10px);
    flex-basis: clamp(5px, .83vw, 10px);
    box-shadow: 0 0 0 clamp(2px, .42vw, 5px) rgba(34,197,94,.14);
  }

  body.managedservice-page .service-phase-flow:where([data-layout="subpage"], [data-layout="subpage"] *) {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(4px, .83vw, 10px);
  }

  body.managedservice-page .service-phase-flow[data-service-count^="4"] .service-phase-card:where([data-layout="subpage"], [data-layout="subpage"] *) {
    flex: 1 1 0;
    width: auto;
    max-width: 235px;
    min-width: 0;
    min-height: clamp(92px, 15.33vw, 184px);
    padding: clamp(8px, 1.5vw, 18px);
    border-radius: clamp(9px, 1.58vw, 19px);
  }

  body.managedservice-page .service-phase-card .service-phase-top span:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(.38rem, .83vw, .625rem);
  }

  body.managedservice-page .service-phase-flow[data-service-count^="4"] .service-phase-card h3:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin: clamp(10px, 2vw, 24px) 0 clamp(4px, .67vw, 8px);
    font-size: clamp(.52rem, 1.3vw, 1.125rem);
    line-height: 1.15;
  }

  body.managedservice-page .service-phase-card p:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(.40rem, 1vw, .75rem);
    line-height: 1.5;
  }

  body.managedservice-page .service-feature-section:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding: clamp(36px, 6vw, 72px) 0;
  }

  body.managedservice-page .service-feature-section-heading:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin-bottom: clamp(10px, 1.67vw, 20px);
    font-size: clamp(.42rem, 1vw, .75rem);
  }

  body.managedservice-page .service-feature-layout:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.managedservice-page .service-feature-layout.is-reverse:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr);
    gap: clamp(12px, 4.67vw, 56px);
    align-items: stretch;
  }

  body.managedservice-page .service-feature-layout.is-reverse .service-feature-copy:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-column: 2;
    grid-row: 1;
    min-height: 100%;
    padding-left: clamp(10px, 2.17vw, 26px);
    border-left: clamp(2px, .33vw, 4px) solid #c69a57;
  }

  body.managedservice-page .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-column: 1;
    grid-row: 1;
    padding-left: 0;
    border-left: 0;
  }

  body.managedservice-page .service-feature-copy h2:where([data-layout="subpage"], [data-layout="subpage"] *) {
    max-width: none;
    font-size: clamp(1.05rem, 4.15vw, 3.5rem);
    line-height: 1.03;
  }

  body.managedservice-page .service-feature-copy > p:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin-top: clamp(8px, 1.5vw, 18px);
    font-size: clamp(.48rem, 1.33vw, 1rem);
    line-height: 1.8;
  }

  body.managedservice-page .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.managedservice-page .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
    min-height: 100%;
    padding-left: clamp(14px, 2.75vw, 34px);
    border-left: clamp(2px, .33vw, 4px) solid #c69a57;
  }

  body.managedservice-page .service-feature-rail article:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: clamp(40px, 4.5vw, 54px) minmax(0, 1fr);
    gap: clamp(10px, 1.5vw, 18px);
    padding-bottom: clamp(12px, 1.83vw, 22px);
    margin-bottom: clamp(12px, 1.83vw, 22px);
  }

  body.managedservice-page .service-feature-icon:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: clamp(36px, 4.1vw, 50px);
    height: clamp(36px, 4.1vw, 50px);
    flex-basis: clamp(36px, 4.1vw, 50px);
    border-radius: clamp(10px, 1.17vw, 14px);
    font-size: clamp(.75rem, 1.55vw, 1.1rem);
  }

  body.managedservice-page .service-feature-icon i:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(.72rem, 1.45vw, 1.05rem);
  }

  body.managedservice-page .service-feature-rail b:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(.72rem, 1.45vw, 1.125rem);
    line-height: 1.35;
  }

  body.managedservice-page .service-feature-rail p:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin-top: clamp(4px, .42vw, 5px);
    font-size: clamp(.62rem, 1.18vw, .95rem);
    line-height: 1.65;
  }

  body.managedservice-page .service-feature-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin-top: clamp(17px, 2.83vw, 34px);
    border-radius: clamp(9px, 1.67vw, 20px);
    box-shadow: 0 clamp(9px, 1.5vw, 18px) clamp(22px, 3.67vw, 44px) rgba(7, 24, 43, .10);
  }
}

/* Wie auf „Technik sinnvoll verbunden“: kleiner Status-Badge verschwindet
   in der verkleinerten Desktop-Ansicht. */
@media (min-width: 400px) and (max-width: 980px) {
  body.managedservice-page .page-hero.tech-service-hero .page-eyebrow:where([data-layout="subpage"], [data-layout="subpage"] *) {
    display: none !important;
  }
}

/* ========================================================================== */
/* IT-Betreuung: Hero-Details wie auf „Technik sinnvoll verbunden“            */
/* ========================================================================== */

/* Status-Badge inkl. grünem Punkt ab 980px ausblenden. */
@media (max-width: 980px) {
  body.managedservice-page .page-hero.tech-service-hero .page-eyebrow:where([data-layout="subpage"], [data-layout="subpage"] *) {
    display: none !important;
  }
}

/* Bis 399px: Überschrift -> Unterüberschrift -> Bild -> Text -> Aktionen. */
@media (max-width: 399px) {
  body.managedservice-page .page-hero.tech-service-hero:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding-top: 106px;
    padding-bottom: 46px;
  }

  body.managedservice-page .page-hero.tech-service-hero .page-hero-grid:where([data-layout="subpage"], [data-layout="subpage"] *) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: start;
  }

  body.managedservice-page .page-hero.tech-service-hero .page-hero-grid > div:first-child:where([data-layout="subpage"], [data-layout="subpage"] *) {
    display: contents;
  }

  body.managedservice-page .page-hero.tech-service-hero .page-title:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-row: 1;
    max-width: none;
    margin: 0;
    font-size: clamp(2.08rem, 10.7vw, 2.62rem);
    line-height: .98;
  }

  body.managedservice-page .page-hero-subline:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-row: 2;
    max-width: none;
    margin: 18px 0 0;
    font-size: .98rem;
    line-height: 1.4;
  }

  body.managedservice-page .page-hero.tech-service-hero .tech-service-hero-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-row: 3;
    min-height: 0;
    width: 100%;
    margin: 22px auto 0;
  }

  body.managedservice-page .page-hero.tech-service-hero .tech-service-hero-art:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: min(100%, 360px);
    max-width: 100%;
    margin: 0 auto;
  }

  body.managedservice-page .page-hero.tech-service-hero .page-hero-lead:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-row: 4;
    max-width: none;
    margin: 22px 0 0;
    font-size: .94rem;
    line-height: 1.62;
  }

  /* Beide Buttons bleiben nebeneinander und skalieren passend mit. */
  body.managedservice-page .page-hero .page-hero-actions:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-row: 5;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: clamp(6px, 2.4vw, 10px);
    margin-top: 24px;
  }

  body.managedservice-page .page-hero .page-hero-actions .page-btn:where([data-layout="subpage"], [data-layout="subpage"] *) {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 42px;
    padding: 0 clamp(7px, 2.5vw, 11px);
    border-radius: 11px;
    font-size: clamp(.62rem, 2.75vw, .72rem);
    white-space: nowrap;
  }

  /* Vorteile ebenfalls in einer Reihe, solange der Platz knapp ist kompakt. */
  body.managedservice-page .page-hero .page-hero-points:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-row: 6;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(8px, 4vw, 16px);
    margin-top: 18px;
    font-size: clamp(.62rem, 2.7vw, .72rem);
  }

  body.managedservice-page .page-hero .page-hero-points span:where([data-layout="subpage"], [data-layout="subpage"] *) {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    white-space: nowrap;
  }

  body.managedservice-page .page-hero .page-hero-points i:where([data-layout="subpage"], [data-layout="subpage"] *) {
    flex: 0 0 auto;
    font-size: inherit;
  }
}

/* ========================================================================== */
/* IT-Betreuung: Leistungsabschnitte nur bis 399px neu anordnen               */
/* Reihenfolge: Bereich -> Überschrift -> Bild -> Text -> Leistungsdetails.    */
/* ========================================================================== */
@media (max-width: 399px) {
  body.managedservice-page .service-feature-section > .page-shell:where([data-layout="subpage"], [data-layout="subpage"] *) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  body.managedservice-page .service-feature-section .service-feature-section-heading:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-row: 1;
  }

  /* Die bisherigen Wrapper erzeugen mobil keine eigene Layout-Ebene mehr,
     damit das Bild zwischen Überschrift und Beschreibung einsortiert wird. */
  body.managedservice-page .service-feature-section .service-feature-layout:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.managedservice-page .service-feature-section .service-feature-layout.is-reverse:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.managedservice-page .service-feature-section .service-feature-copy:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.managedservice-page .service-feature-section .service-feature-layout.is-reverse .service-feature-copy:where([data-layout="subpage"], [data-layout="subpage"] *) {
    display: contents;
  }

  body.managedservice-page .service-feature-section .service-feature-copy h2:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-row: 2;
    max-width: none;
    margin: 0;
  }

  body.managedservice-page .service-feature-section .service-feature-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-row: 3;
    width: 100%;
    margin: 22px 0 0;
  }

  body.managedservice-page .service-feature-section .service-feature-copy > p:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-row: 4;
    max-width: none;
    margin: 20px 0 0;
  }

  body.managedservice-page .service-feature-section .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.managedservice-page .service-feature-section .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-row: 5;
    min-height: 0;
    margin-top: 24px;
    padding-left: 0;
    border-left: 0;
  }
}

/* ========================================================================== */
/* IT-Infrastruktur + Software + Websites: Responsive wie IT-Betreuung        */
/* 400–1200px: Desktop-Anordnung bleibt erhalten und skaliert mit.            */
/* Erst bei maximal 399px wird auf das kompakte Mobile-Layout gewechselt.     */
/* ========================================================================== */
@media (min-width: 400px) and (max-width: 1200px) {
  body.responsive-399-service .page-hero.tech-service-hero:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding-top: clamp(108px, 11.2vw, 134px);
    padding-bottom: clamp(42px, 6.5vw, 78px);
  }

  body.responsive-399-service .page-hero.tech-service-hero > .page-shell:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: min(1320px, calc(100% - 24px));
  }

  body.responsive-399-service .page-hero.tech-service-hero .page-hero-grid:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    gap: clamp(10px, 3.4vw, 40px);
    align-items: center;
  }

  body.responsive-399-service .page-hero.tech-service-hero .page-hero-grid > div:first-child:where([data-layout="subpage"], [data-layout="subpage"] *) {
    min-width: 0;
  }

  body.responsive-399-service .page-hero.tech-service-hero .page-title:where([data-layout="subpage"], [data-layout="subpage"] *) {
    max-width: none;
    margin: clamp(10px, 2vw, 24px) 0 clamp(10px, 2vw, 24px);
    font-size: clamp(1.28rem, 4.15vw, 3.12rem);
    line-height: .98;
  }

  body.responsive-399-service .page-hero-subline:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin: clamp(-4px, -.65vw, -8px) 0 clamp(6px, 1vw, 12px);
    font-size: clamp(.68rem, 1.8vw, 1.25rem);
    line-height: 1.4;
  }

  body.responsive-399-service .page-hero.tech-service-hero .page-hero-lead:where([data-layout="subpage"], [data-layout="subpage"] *) {
    max-width: none;
    margin-top: clamp(7px, 1.3vw, 16px);
    font-size: clamp(.60rem, 1.35vw, 1.02rem);
    line-height: 1.62;
  }

  body.responsive-399-service .page-hero .page-hero-actions:where([data-layout="subpage"], [data-layout="subpage"] *) {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: clamp(5px, .85vw, 10px);
    margin-top: clamp(14px, 2.7vw, 32px);
  }

  body.responsive-399-service .page-hero .page-hero-actions .page-btn:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: auto;
    min-width: 0;
    min-height: clamp(31px, 4vw, 48px);
    padding: 0 clamp(9px, 1.67vw, 20px);
    border-radius: clamp(7px, 1.08vw, 13px);
    font-size: clamp(.50rem, 1.17vw, .875rem);
    white-space: nowrap;
  }

  body.responsive-399-service .page-hero .page-hero-points:where([data-layout="subpage"], [data-layout="subpage"] *) {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: clamp(5px, 1.5vw, 18px);
    margin-top: clamp(12px, 2.33vw, 28px);
    font-size: clamp(.43rem, .92vw, .75rem);
  }

  body.responsive-399-service .page-hero .page-hero-points span:where([data-layout="subpage"], [data-layout="subpage"] *) {
    min-width: 0;
    gap: clamp(3px, .5vw, 6px);
    white-space: nowrap;
  }

  body.responsive-399-service .page-hero .page-hero-points i:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: inherit;
  }

  body.responsive-399-service .page-hero.tech-service-hero .tech-service-hero-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
    min-height: clamp(220px, 46.7vw, 560px);
    width: 100%;
    margin: 0 clamp(-70px, -5.8vw, -24px) 0 0;
  }

  body.responsive-399-service .page-hero.tech-service-hero .tech-service-hero-art:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.responsive-399-service .page-hero.tech-service-hero .tech-service-hero-art[src*="hero-websites"]:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: min(820px, 122%);
    max-width: none;
  }

  body.responsive-399-service .service-phase-section:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding: clamp(28px, 4.67vw, 56px) 0 clamp(32px, 5.33vw, 64px);
  }

  body.responsive-399-service .service-phase-head:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: clamp(12px, 2.83vw, 34px);
    align-items: end;
    margin-bottom: clamp(20px, 3.5vw, 42px);
  }

  body.responsive-399-service .service-phase-head .page-section-kicker:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(.42rem, .92vw, .6875rem);
  }

  body.responsive-399-service .service-phase-head h2:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin-top: clamp(7px, 1.08vw, 13px);
    font-size: clamp(1.05rem, 4vw, 3rem);
  }

  body.responsive-399-service .service-phase-head-copy p:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(.48rem, 1.33vw, 1rem);
    line-height: 1.7;
  }

  body.responsive-399-service .service-phase-hint:where([data-layout="subpage"], [data-layout="subpage"] *) {
    gap: clamp(4px, .83vw, 10px);
    margin-top: clamp(5px, .83vw, 10px) !important;
  }

  body.responsive-399-service .service-phase-hint span:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: clamp(5px, .83vw, 10px);
    height: clamp(5px, .83vw, 10px);
    flex-basis: clamp(5px, .83vw, 10px);
    box-shadow: 0 0 0 clamp(2px, .42vw, 5px) rgba(34,197,94,.14);
  }

  body.responsive-399-service .service-phase-flow:where([data-layout="subpage"], [data-layout="subpage"] *) {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(4px, .83vw, 10px);
  }

  body.responsive-399-service .service-phase-flow .service-phase-card:where([data-layout="subpage"], [data-layout="subpage"] *) {
    flex: 1 1 0;
    width: auto;
    max-width: 235px;
    min-width: 0;
    min-height: clamp(92px, 15.33vw, 184px);
    padding: clamp(8px, 1.5vw, 18px);
    border-radius: clamp(9px, 1.58vw, 19px);
  }

  body.responsive-399-service .service-phase-card .service-phase-top span:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(.38rem, .83vw, .625rem);
  }

  body.responsive-399-service .service-phase-card h3:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin: clamp(10px, 2vw, 24px) 0 clamp(4px, .67vw, 8px);
    font-size: clamp(.46rem, 1.18vw, 1.125rem);
    line-height: 1.15;
  }

  body.responsive-399-service .service-phase-card p:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(.36rem, .88vw, .75rem);
    line-height: 1.45;
  }

  body.responsive-399-service .service-feature-section:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding: clamp(36px, 6vw, 72px) 0;
  }

  body.responsive-399-service .service-feature-section-heading:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin-bottom: clamp(10px, 1.67vw, 20px);
    font-size: clamp(.42rem, 1vw, .75rem);
  }

  /* IT-Infrastruktur und Software: gleiche zweispaltige Detailanordnung wie IT-Betreuung. */
  body.responsive-399-service:not(.website-showcase-page) .service-feature-layout:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.responsive-399-service:not(.website-showcase-page) .service-feature-layout.is-reverse:where([data-layout="subpage"], [data-layout="subpage"] *) {
    display: grid;
    grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr);
    gap: clamp(12px, 4.67vw, 56px);
    align-items: stretch;
  }

  body.responsive-399-service:not(.website-showcase-page) .service-feature-layout.is-reverse .service-feature-copy:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-column: 2;
    grid-row: 1;
    min-height: 100%;
    padding-left: clamp(10px, 2.17vw, 26px);
    border-left: clamp(2px, .33vw, 4px) solid #c69a57;
  }

  body.responsive-399-service:not(.website-showcase-page) .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-column: 1;
    grid-row: 1;
    padding-left: 0;
    border-left: 0;
  }

  body.responsive-399-service:not(.website-showcase-page) .service-feature-copy h2:where([data-layout="subpage"], [data-layout="subpage"] *) {
    max-width: none;
    font-size: clamp(1.05rem, 4.15vw, 3.5rem);
    line-height: 1.03;
  }

  body.responsive-399-service:not(.website-showcase-page) .service-feature-copy > p:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin-top: clamp(8px, 1.5vw, 18px);
    font-size: clamp(.48rem, 1.33vw, 1rem);
    line-height: 1.8;
  }

  body.responsive-399-service:not(.website-showcase-page) .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.responsive-399-service:not(.website-showcase-page) .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
    min-height: 100%;
    padding-left: clamp(10px, 2.17vw, 26px);
    border-left: clamp(2px, .33vw, 4px) solid #c69a57;
  }

  /* Software hat bewusst keine goldene Detail-Linie im bestehenden Design. */
  body.software-service-page.responsive-399-service .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page.responsive-399-service .service-feature-layout .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page.responsive-399-service .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page.responsive-399-service .service-feature-layout.is-reverse .service-feature-copy:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding-left: 0;
    border-left: 0;
  }

  body.responsive-399-service:not(.website-showcase-page) .service-feature-rail article:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: clamp(22px, 3.67vw, 44px) minmax(0, 1fr);
    gap: clamp(6px, 1.17vw, 14px);
    padding-bottom: clamp(8px, 1.5vw, 18px);
    margin-bottom: clamp(8px, 1.5vw, 18px);
  }

  body.responsive-399-service:not(.website-showcase-page) .service-feature-icon:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: clamp(19px, 3.17vw, 38px);
    height: clamp(19px, 3.17vw, 38px);
    flex-basis: clamp(19px, 3.17vw, 38px);
    border-radius: clamp(5px, 1vw, 12px);
    font-size: clamp(.48rem, 1.33vw, 1rem);
  }

  body.responsive-399-service:not(.website-showcase-page) .service-feature-icon i:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(.46rem, 1.25vw, .9375rem);
  }

  body.responsive-399-service:not(.website-showcase-page) .service-feature-rail b:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(.48rem, 1.17vw, .875rem);
    line-height: 1.35;
  }

  body.responsive-399-service:not(.website-showcase-page) .service-feature-rail p:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin-top: clamp(2px, .33vw, 4px);
    font-size: clamp(.40rem, 1vw, .75rem);
    line-height: 1.6;
  }

  body.responsive-399-service:not(.website-showcase-page) .service-feature-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin-top: clamp(17px, 2.83vw, 34px);
    border-radius: clamp(9px, 1.67vw, 20px);
    box-shadow: 0 clamp(9px, 1.5vw, 18px) clamp(22px, 3.67vw, 44px) rgba(7, 24, 43, .10);
  }

  /* Websites: Desktop-Wechselanordnung mit Screenshot bleibt bis 400px bestehen. */
  body.website-showcase-page.responsive-399-service .service-feature-layout:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.website-showcase-page.responsive-399-service .service-feature-layout.is-reverse:where([data-layout="subpage"], [data-layout="subpage"] *) {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(12px, 4.83vw, 58px);
    row-gap: clamp(8px, 1.67vw, 20px);
    align-items: start;
  }

  body.website-showcase-page.responsive-399-service .service-feature-layout .service-feature-copy:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-column: 1;
    grid-row: 1;
  }

  body.website-showcase-page.responsive-399-service .service-feature-layout .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-column: 1;
    grid-row: 2;
  }

  body.website-showcase-page.responsive-399-service .service-feature-layout .website-showcase-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }

  body.website-showcase-page.responsive-399-service .service-feature-layout.is-reverse .service-feature-copy:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-column: 2;
    grid-row: 1;
  }

  body.website-showcase-page.responsive-399-service .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-column: 2;
    grid-row: 2;
  }

  body.website-showcase-page.responsive-399-service .service-feature-layout.is-reverse .website-showcase-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  body.website-showcase-page.responsive-399-service .service-feature-copy h2:where([data-layout="subpage"], [data-layout="subpage"] *) {
    max-width: none;
    font-size: clamp(1.05rem, 3.7vw, 3rem) !important;
    line-height: 1.05 !important;
  }

  body.website-showcase-page.responsive-399-service .service-feature-copy > p:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin-top: clamp(8px, 1.5vw, 18px);
    font-size: clamp(.46rem, 1.29vw, .96875rem);
    line-height: 1.72;
  }

  body.website-showcase-page.responsive-399-service .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
    gap: clamp(5px, 1.08vw, 13px);
  }

  body.website-showcase-page.responsive-399-service .service-feature-rail article:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: clamp(16px, 2.5vw, 30px) minmax(0, 1fr);
    gap: clamp(5px, .92vw, 11px);
  }

  body.website-showcase-page.responsive-399-service .service-feature-icon:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: clamp(15px, 1.83vw, 22px);
    height: clamp(15px, 1.83vw, 22px);
    flex-basis: clamp(15px, 1.83vw, 22px);
    border-radius: clamp(5px, .58vw, 7px);
  }

  body.website-showcase-page.responsive-399-service .service-feature-icon:where([data-layout="subpage"], [data-layout="subpage"] *)::before {
    font-size: clamp(.52rem, 1.08vw, .8125rem);
  }

  body.website-showcase-page.responsive-399-service .service-feature-rail b:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(.46rem, 1.17vw, .875rem);
    line-height: 1.4;
  }

  body.website-showcase-page.responsive-399-service .service-feature-rail p:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin-top: clamp(1px, .25vw, 3px);
    font-size: clamp(.40rem, 1.08vw, .8125rem);
    line-height: 1.55;
  }

  body.website-showcase-page.responsive-399-service .website-showcase-visual img:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: 100%;
    height: auto !important;
    border-radius: clamp(7px, 1.5vw, 18px);
  }
}

/* Grüner Statuspunkt / Badge wie auf IT-Betreuung ab 980px ausblenden. */
@media (max-width: 980px) {
  body.responsive-399-service .page-hero.tech-service-hero .page-eyebrow:where([data-layout="subpage"], [data-layout="subpage"] *) {
    display: none !important;
  }
}

/* ========================================================================== */
/* Bis 399px: Überschrift -> Unterüberschrift -> Bild -> Text -> Aktionen.    */
/* ========================================================================== */
@media (max-width: 399px) {
  body.responsive-399-service .page-hero.tech-service-hero:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding-top: 106px;
    padding-bottom: 46px;
  }

  body.responsive-399-service .page-hero.tech-service-hero .page-hero-grid:where([data-layout="subpage"], [data-layout="subpage"] *) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: start;
  }

  body.responsive-399-service .page-hero.tech-service-hero .page-hero-grid > div:first-child:where([data-layout="subpage"], [data-layout="subpage"] *) {
    display: contents;
  }

  body.responsive-399-service .page-hero.tech-service-hero .page-title:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-row: 1;
    max-width: none;
    margin: 0;
    font-size: clamp(2.08rem, 10.7vw, 2.62rem);
    line-height: .98;
  }

  body.responsive-399-service .page-hero-subline:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-row: 2;
    max-width: none;
    margin: 18px 0 0;
    font-size: .98rem;
    line-height: 1.4;
  }

  body.responsive-399-service .page-hero.tech-service-hero .tech-service-hero-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-row: 3;
    min-height: 0;
    width: 100%;
    margin: 22px auto 0;
  }

  body.responsive-399-service .page-hero.tech-service-hero .tech-service-hero-art:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.responsive-399-service .page-hero.tech-service-hero .tech-service-hero-art[src*="hero-websites"]:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: min(100%, 360px);
    max-width: 100%;
    margin: 0 auto;
  }

  body.responsive-399-service .page-hero.tech-service-hero .page-hero-lead:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-row: 4;
    max-width: none;
    margin: 22px 0 0;
    font-size: .94rem;
    line-height: 1.62;
  }

  body.responsive-399-service .page-hero .page-hero-actions:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-row: 5;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: clamp(6px, 2.4vw, 10px);
    margin-top: 24px;
  }

  body.responsive-399-service .page-hero .page-hero-actions .page-btn:where([data-layout="subpage"], [data-layout="subpage"] *) {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 42px;
    padding: 0 clamp(7px, 2.5vw, 11px);
    border-radius: 11px;
    font-size: clamp(.58rem, 2.6vw, .72rem);
    white-space: nowrap;
  }

  body.responsive-399-service .page-hero .page-hero-points:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-row: 6;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(6px, 2.8vw, 14px);
    margin-top: 18px;
    font-size: clamp(.54rem, 2.45vw, .72rem);
  }

  body.responsive-399-service .page-hero .page-hero-points span:where([data-layout="subpage"], [data-layout="subpage"] *) {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    white-space: nowrap;
  }

  body.responsive-399-service .page-hero .page-hero-points i:where([data-layout="subpage"], [data-layout="subpage"] *) {
    flex: 0 0 auto;
    font-size: inherit;
  }

  /* Leistungsabschnitte: Bereich -> Überschrift -> Bild -> Text -> Rest. */
  body.responsive-399-service .service-feature-section > .page-shell:where([data-layout="subpage"], [data-layout="subpage"] *) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  body.responsive-399-service .service-feature-section .service-feature-section-heading:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-row: 1;
  }

  body.responsive-399-service .service-feature-section .service-feature-layout:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.responsive-399-service .service-feature-section .service-feature-layout.is-reverse:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.responsive-399-service .service-feature-section .service-feature-copy:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.responsive-399-service .service-feature-section .service-feature-layout.is-reverse .service-feature-copy:where([data-layout="subpage"], [data-layout="subpage"] *) {
    display: contents;
  }

  body.responsive-399-service .service-feature-section .service-feature-copy h2:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-row: 2;
    max-width: none;
    margin: 0;
  }

  body.responsive-399-service .service-feature-section .service-feature-visual:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.responsive-399-service .service-feature-section .website-showcase-visual:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.responsive-399-service .service-feature-section .service-feature-layout.is-reverse .website-showcase-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    margin: 22px 0 0;
  }

  body.responsive-399-service .service-feature-section .service-feature-copy > p:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-row: 4;
    max-width: none;
    margin: 20px 0 0;
  }

  body.responsive-399-service .service-feature-section .service-feature-copy > .page-cta-actions:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-row: 5;
    margin-top: 20px;
  }

  body.responsive-399-service .service-feature-section .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.responsive-399-service .service-feature-section .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-column: 1;
    grid-row: 6;
    min-height: 0;
    margin-top: 24px;
    padding-left: 0 !important;
    border-left: 0 !important;
  }

  /* Falls kein CTA existiert, bleibt die Rail trotzdem direkt nach dem Text. */
  body.software-service-page.responsive-399-service .service-feature-section .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.website-showcase-page.responsive-399-service .service-feature-section .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.website-showcase-page.responsive-399-service .service-feature-section .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-row: 5;
  }

  body.website-showcase-page.responsive-399-service .service-feature-section .website-showcase-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body.website-showcase-page.responsive-399-service .service-feature-section .website-showcase-visual img:where([data-layout="subpage"], [data-layout="subpage"] *) {
    display: block;
    width: 100%;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    border-radius: 14px;
  }
}


/* 2026-08-31: IT-Infrastruktur – CTA kompakter, Detailpunkte zweispaltig,
   letzte Karte in "Infrastruktur klar aufgeteilt" linksbündig. */
body.infrastructure-page .service-feature-cta:where([data-layout="subpage"], [data-layout="subpage"] *) {
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.25;
  padding: 15px 24px;
}

body.infrastructure-page .service-phase-flow:where([data-layout="subpage"], [data-layout="subpage"] *) {
  justify-content: center;
}

@media (min-width: 330px) and (max-width: 399px) {
  body.infrastructure-page .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.infrastructure-page .service-feature-layout .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.infrastructure-page .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
    align-items: start;
    align-content: start;
    justify-content: start;
  }

  body.infrastructure-page .service-feature-rail article:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.infrastructure-page .service-feature-layout .service-feature-rail article:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.infrastructure-page .service-feature-layout.is-reverse .service-feature-rail article:where([data-layout="subpage"], [data-layout="subpage"] *) {
    height: 100%;
    margin: 0;
    padding: 0 0 14px;
  }

  body.infrastructure-page .service-feature-rail article:last-child:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.infrastructure-page .service-feature-layout .service-feature-rail article:last-child:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.infrastructure-page .service-feature-layout.is-reverse .service-feature-rail article:last-child:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(15,23,42,.12);
  }
}

@media (max-width: 399px) {
  body.infrastructure-page .service-feature-cta:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: 14px;
    padding: 13px 20px;
  }
}

@media (max-width: 329px) {
  body.infrastructure-page .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.infrastructure-page .service-feature-layout .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.infrastructure-page .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
    display: flex !important;
    flex-direction: column;
  }
}

/* 2026-08-31: Software & Automatisierung – Hero-Bild bei kleineren Desktopbreiten
   kompakter halten, damit es nicht in den Textbereich hineinragt. */
@media (min-width: 1201px) and (max-width: 1500px) {
  body.software-service-page .page-hero.tech-service-hero .tech-service-hero-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin-right: -20px;
  }

  body.software-service-page .page-hero.tech-service-hero .tech-service-hero-art:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: min(720px, 108%);
  }
}

@media (min-width: 400px) and (max-width: 1200px) {
  body.software-service-page.responsive-399-service .page-hero.tech-service-hero .tech-service-hero-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin-right: 0;
  }

  body.software-service-page.responsive-399-service .page-hero.tech-service-hero .tech-service-hero-art:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: min(680px, 100%);
    max-width: 100%;
  }
}

/* 2026-08-31: Software & Automatisierung – Detailbereiche an die übrigen
   Technik-Seiten angleichen: goldene Trennlinie, Zeilentrenner und sauber
   zentrierte Haken ohne den zusätzlichen Abstand am 1200px-Breakpoint. */
body.software-service-page .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
  gap: 0;
}

body.software-service-page .service-feature-rail article p:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: block;
}

body.software-service-page .service-feature-icon:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  color: transparent;
}

body.software-service-page .service-feature-icon:where([data-layout="subpage"], [data-layout="subpage"] *)::before {
  display: block;
  line-height: 1;
  text-align: center;
}

@media (min-width: 1201px) {
  body.software-service-page .service-feature-layout:not(.is-reverse) .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding-left: 26px !important;
    border-left: 4px solid #c69a57 !important;
  }

  body.software-service-page .service-feature-layout.is-reverse .service-feature-copy:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding-left: 26px !important;
    border-left: 4px solid #c69a57 !important;
  }

  body.software-service-page .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding-left: 0 !important;
    border-left: 0 !important;
  }

  body.software-service-page .service-feature-rail article:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 0 0 18px;
    margin: 0 0 18px;
    border-bottom: 1px solid rgba(15,23,42,.12);
  }

  body.software-service-page .service-feature-rail article:last-child:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
  }

  body.software-service-page .service-feature-icon:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: 38px;
    height: 38px;
    min-width: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
  }

  body.software-service-page .service-feature-icon:where([data-layout="subpage"], [data-layout="subpage"] *)::before {
    font-size: 15px;
  }
}

@media (min-width: 400px) and (max-width: 1200px) {
  body.software-service-page.responsive-399-service .service-feature-layout:not(.is-reverse) .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding-left: clamp(10px, 2.17vw, 26px) !important;
    border-left: clamp(2px, .33vw, 4px) solid #c69a57 !important;
  }

  body.software-service-page.responsive-399-service .service-feature-layout.is-reverse .service-feature-copy:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding-left: clamp(10px, 2.17vw, 26px) !important;
    border-left: clamp(2px, .33vw, 4px) solid #c69a57 !important;
  }

  body.software-service-page.responsive-399-service .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding-left: 0 !important;
    border-left: 0 !important;
  }

  body.software-service-page.responsive-399-service .service-feature-rail article:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: clamp(24px, 3.17vw, 38px) minmax(0, 1fr);
    gap: clamp(8px, 1.17vw, 14px);
    align-items: center;
    padding: 0 0 clamp(8px, 1.2vw, 14px);
    margin: 0 0 clamp(8px, 1.2vw, 14px);
    border-bottom: 1px solid rgba(15,23,42,.12);
  }

  body.software-service-page.responsive-399-service .service-feature-rail article:last-child:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
  }

  body.software-service-page.responsive-399-service .service-feature-icon:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: clamp(24px, 3.17vw, 38px);
    height: clamp(24px, 3.17vw, 38px);
    min-width: clamp(24px, 3.17vw, 38px);
    flex-basis: clamp(24px, 3.17vw, 38px);
    border-radius: clamp(7px, 1vw, 12px);
  }

  body.software-service-page.responsive-399-service .service-feature-icon:where([data-layout="subpage"], [data-layout="subpage"] *)::before {
    font-size: clamp(11px, 1.25vw, 15px);
  }
}

@media (max-width: 399px) {
  body.software-service-page.responsive-399-service .service-feature-rail article:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 0 0 14px;
    margin: 0 0 14px;
    border-bottom: 1px solid rgba(15,23,42,.12);
  }

  body.software-service-page.responsive-399-service .service-feature-rail article:last-child:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
  }

  body.software-service-page.responsive-399-service .service-feature-icon:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: 34px;
    height: 34px;
    min-width: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
  }

  body.software-service-page.responsive-399-service .service-feature-icon:where([data-layout="subpage"], [data-layout="subpage"] *)::before {
    font-size: 13px;
  }

  body.software-service-page.responsive-399-service .service-feature-rail p:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: 11px;
    line-height: 1.6;
  }
}


/* 2026-08-31: Software & Automatisierung – Detailtexte kompakter und
   responsive Detailspalten ohne Überschneidung. Haken exakt zentrieren. */
body.software-service-page .service-feature-icon:where([data-layout="subpage"], [data-layout="subpage"] *) {
  position: relative;
  font-size: 0 !important;
  line-height: 0;
}

body.software-service-page .service-feature-icon:where([data-layout="subpage"], [data-layout="subpage"] *)::before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  line-height: 1;
  transform: translateY(-0.5px);
}

@media (min-width: 901px) and (max-width: 1200px) {
  body.software-service-page .service-feature-layout:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page .service-feature-layout.is-reverse:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: minmax(0, .94fr) minmax(340px, 1.06fr);
    gap: clamp(30px, 3.3vw, 40px);
  }

  body.software-service-page .service-feature-copy h2:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(34px, 3.55vw, 42px);
    line-height: 1.04;
    letter-spacing: -.045em;
  }
}

@media (min-width: 400px) and (max-width: 900px) {
  body.software-service-page.responsive-399-service .service-feature-layout:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page.responsive-399-service .service-feature-layout.is-reverse:where([data-layout="subpage"], [data-layout="subpage"] *) {
    gap: 22px;
  }

  body.software-service-page.responsive-399-service .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin-top: 18px;
  }
}


/* 2026-08-31: Software & Automatisierung – Detailüberschriften wie auf
   IT-Betreuung / IT-Infrastruktur: blau + gold und zwischen 400–1200px
   proportional mit der verfügbaren Breite verkleinern. */
body.software-service-page .service-feature-copy h2 .service-heading-blue:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #0a2850 !important;
}

body.software-service-page .service-feature-copy h2 .service-heading-gold:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #c69a57 !important;
}

@media (min-width: 400px) and (max-width: 1200px) {
  body.software-service-page.responsive-399-service .service-feature-copy h2:where([data-layout="subpage"], [data-layout="subpage"] *) {
    max-width: none;
    font-size: clamp(1.05rem, 4.15vw, 3.5rem) !important;
    line-height: 1.03 !important;
    letter-spacing: -.05em !important;
  }
}


/* 2026-08-31: Software & Automatisierung – Übersichtskarten auf großem
   Bildschirm etwas größer, auf kleineren Desktopbreiten dagegen kompakter. */
body.software-service-page .service-phase-flow:where([data-layout="subpage"], [data-layout="subpage"] *) {
  gap: clamp(14px, 1.8vw, 24px);
}

body.software-service-page .service-phase-flow .service-phase-card:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: 100%;
  max-width: 292px;
  min-height: 214px;
  padding: 24px 22px 22px;
}

body.software-service-page .service-phase-flow .service-phase-card h3:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin-top: 16px;
  font-size: clamp(19px, 1.48vw, 23px);
  line-height: 1.15;
}

body.software-service-page .service-phase-flow .service-phase-card p:where([data-layout="subpage"], [data-layout="subpage"] *) {
  font-size: clamp(13px, .98vw, 14px);
  line-height: 1.55;
}

body.software-service-page .service-phase-flow .service-phase-card:last-child:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(145deg,#07142c,#10264d);
}

body.software-service-page .service-phase-flow .service-phase-card:last-child h3:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #fff;
}

body.software-service-page .service-phase-flow .service-phase-card:last-child p:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: rgba(255,255,255,.66);
}

body.software-service-page .service-phase-flow .service-phase-card:last-child .service-phase-top span:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: rgba(255,255,255,.46);
}

body.software-service-page .service-phase-flow .service-phase-card:last-child:hover:where([data-layout="subpage"], [data-layout="subpage"] *),
body.software-service-page .service-phase-flow .service-phase-card:last-child:focus-visible:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #fff;
  border-color: rgba(198,154,87,.78);
  box-shadow: 0 20px 44px rgba(0,20,40,.24);
}

@media (min-width: 400px) and (max-width: 1200px) {
  body.software-service-page.responsive-399-service .service-phase-flow:where([data-layout="subpage"], [data-layout="subpage"] *) {
    gap: clamp(8px, .95vw, 14px);
  }

  body.software-service-page.responsive-399-service .service-phase-flow .service-phase-card:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: 100%;
    max-width: 236px;
    min-height: clamp(106px, 12.2vw, 156px);
    padding: clamp(10px, 1.1vw, 16px);
  }

  body.software-service-page.responsive-399-service .service-phase-card h3:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin: clamp(8px, .85vw, 10px) 0 clamp(4px, .55vw, 7px);
    font-size: clamp(.74rem, 1.02vw, .98rem);
    line-height: 1.16;
  }

  body.software-service-page.responsive-399-service .service-phase-card p:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(.56rem, .72vw, .70rem);
    line-height: 1.45;
  }
}

@media (max-width: 399px) {
  body.software-service-page.responsive-399-service .service-phase-flow .service-phase-card h3:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin-top: 10px;
  }
}

/* 2026-08-31: Service-Uebersichten bis 399px wie bei IT-Betreuung:
   zwei Karten nebeneinander, solange mindestens 140px je Karte passen.
   Bei ungerader Kartenanzahl nutzt die letzte Karte die volle Zeilenbreite. */
@media (max-width: 399px) {
  body.responsive-399-service .service-phase-flow:where([data-layout="subpage"], [data-layout="subpage"] *) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    grid-auto-rows: 1fr;
    justify-content: stretch;
    align-items: stretch;
    gap: 8px;
  }

  body.responsive-399-service .service-phase-flow .service-phase-card:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page.responsive-399-service .service-phase-flow .service-phase-card:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 132px;
    height: 100%;
    padding: 15px;
    border-radius: 15px;
  }

  body.responsive-399-service .service-phase-card h3:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page.responsive-399-service .service-phase-card h3:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin: 18px 0 7px;
    font-size: 14px;
    line-height: 1.15;
  }

  body.responsive-399-service .service-phase-card p:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page.responsive-399-service .service-phase-card p:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: 10px;
    line-height: 1.5;
  }

  body.responsive-399-service .service-phase-flow[data-service-count^="3"] .service-phase-card:last-child:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.responsive-399-service .service-phase-flow[data-service-count^="5"] .service-phase-card:last-child:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.responsive-399-service .service-phase-flow[data-service-count^="7"] .service-phase-card:last-child:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.responsive-399-service .service-phase-flow[data-service-count^="9"] .service-phase-card:last-child:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-column: 1 / -1;
  }
}

/* Website-Entwicklung: die drei gewünschten Screenshots mit dezenter hellgrauer Linie kennzeichnen. */
body.website-showcase-page #klare-botschaft .website-showcase-visual:where([data-layout="subpage"], [data-layout="subpage"] *),
body.website-showcase-page #individuelle-funktionen .website-showcase-visual:where([data-layout="subpage"], [data-layout="subpage"] *),
body.website-showcase-page #rechtliche-grundlagen .website-showcase-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
  overflow: visible !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.website-showcase-page #klare-botschaft .website-showcase-visual img:where([data-layout="subpage"], [data-layout="subpage"] *),
body.website-showcase-page #individuelle-funktionen .website-showcase-visual img:where([data-layout="subpage"], [data-layout="subpage"] *),
body.website-showcase-page #rechtliche-grundlagen .website-showcase-visual img:where([data-layout="subpage"], [data-layout="subpage"] *) {
  border: 2px solid #d1d5db !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
}

@media (max-width: 900px) {
  body.website-showcase-page #klare-botschaft .website-showcase-visual:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.website-showcase-page #individuelle-funktionen .website-showcase-visual:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.website-showcase-page #rechtliche-grundlagen .website-showcase-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding: 0 !important;
    border-radius: 0 !important;
  }

  body.website-showcase-page #klare-botschaft .website-showcase-visual img:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.website-showcase-page #individuelle-funktionen .website-showcase-visual img:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.website-showcase-page #rechtliche-grundlagen .website-showcase-visual img:where([data-layout="subpage"], [data-layout="subpage"] *) {
    border-radius: 10px !important;
  }
}

/* Website-Entwicklung: alle Screenshots von Modernes Design bis Rechtliche Grundlagen dezent kennzeichnen. */
body.website-showcase-page .service-feature-section .website-showcase-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
  overflow: visible !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.website-showcase-page .service-feature-section .website-showcase-visual img:where([data-layout="subpage"], [data-layout="subpage"] *) {
  border: 2px solid #d1d5db !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
}

@media (max-width: 900px) {
  body.website-showcase-page .service-feature-section .website-showcase-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding: 0 !important;
    border-radius: 0 !important;
  }

  body.website-showcase-page .service-feature-section .website-showcase-visual img:where([data-layout="subpage"], [data-layout="subpage"] *) {
    border-radius: 10px !important;
  }
}

/* ========================================================================== 
   Hero-Breite der Unterseiten an den Startseiten-Hero angleichen.
   Nur der Hero wird breiter; die Inhaltsbereiche darunter behalten ihre
   bisherige Seitenbreite.
   ========================================================================== */
@media (min-width: 981px) {
  body.toowie-subpage .page-hero > .page-shell:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .page-hero.tech-service-hero > .page-shell:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: min(1440px, calc(100% - 12px));
  }
}

/* ========================================================================== 
   2026-09-01: Hero-Inhalte auf Unterseiten horizontal so breit wie auf der
   Startseite platzieren. Die Textspalte ragt links ueber die Navigationskante,
   die rechte Visual-Spalte entsprechend weiter nach rechts. Zeilenumbrueche
   und eigentliche Spaltenbreiten bleiben dabei unveraendert.
   ========================================================================== */
@media (min-width: 981px) {
  body.toowie-subpage .page-hero > .page-shell:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .page-hero.tech-service-hero > .page-shell:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .tech-overview-hero > .page-shell:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: min(1440px, calc(100% - 12px));
  }

  body.toowie-subpage .page-hero .page-hero-grid > :first-child:where([data-layout="subpage"], [data-layout="subpage"] *) {
    position: relative;
    left: clamp(-54px, -2.7vw, -34px);
  }

  body.toowie-subpage .page-hero .page-hero-grid > .page-hero-visual:not(.tech-service-hero-visual):where([data-layout="subpage"], [data-layout="subpage"] *) {
    right: clamp(-54px, -2.7vw, -34px);
  }
}

/* Linke Textkante ab Desktop wie auf den anderen Unterseiten ausrichten. */
@media (min-width: 981px) {
  body.toowie-subpage .tech-overview-hero .tech-overview-copy:where([data-layout="subpage"], [data-layout="subpage"] *) {
    position: relative;
    left: clamp(-54px, -2.7vw, -34px);
  }
}

/* Die rechte Grafik erst im zweispaltigen Desktop-Hero nach außen versetzen. */
@media (min-width: 1201px) {
  body.toowie-subpage .tech-overview-hero .tech-constellation:where([data-layout="subpage"], [data-layout="subpage"] *) {
    right: clamp(-54px, -2.7vw, -34px);
  }
}

/* Infrastruktur und Websites: Die goldene zweite Hero-Zeile bleibt auf
   Desktop geschlossen und erhaelt dafuer bewusst mehr Spaltenbreite. */
@media (min-width: 901px) {
  body.infrastructure-page .page-hero.tech-service-hero .page-hero-grid:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.website-showcase-page .page-hero.tech-service-hero .page-hero-grid:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: minmax(0, 1.05fr) minmax(500px, 0.95fr);
    gap: clamp(28px, 3.2vw, 48px);
  }

  body.infrastructure-page .page-hero.tech-service-hero .page-title span:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.website-showcase-page .page-hero.tech-service-hero .page-title span:where([data-layout="subpage"], [data-layout="subpage"] *) {
    display: inline-block;
    white-space: nowrap;
  }
}

/* ========================================================================== 
   2026-09-01: Einheitliche Inhaltsbreite unterhalb der Hero-Bereiche.
   Auf Desktop nutzen alle normalen Unterseiten dieselbe 1440px-Inhaltsbreite
   wie die bereits angepassten Hero-Bereiche. Mobile/Tablet bleibt unverändert.
   ========================================================================== */
@media (min-width: 981px) {
  body.toowie-subpage:not(.legal-page) main .page-shell:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: min(1520px, calc(100% - 8px));
  }

  body.toowie-subpage main .tech-overview-hero > .page-shell:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: min(1440px, calc(100% - 12px));
  }
}


/* ========================================================================== 
   2026-09-01: Service-Uebersichten unter dem Hero auf Desktop ebenfalls ueber
   die volle, bereits angeglichene Inhaltsbreite ziehen.
   Die Karten fuellen die vorhandene Breite gleichmaessig aus, statt als
   schmalere, zentrierte Gruppe zu erscheinen.
   ========================================================================== */
@media (min-width: 981px) {
  body.toowie-subpage .service-phase-flow:where([data-layout="subpage"], [data-layout="subpage"] *) {
    display: grid;
    grid-template-columns: repeat(var(--service-count), minmax(0, 1fr));
    justify-content: stretch;
    gap: 10px;
  }

  body.toowie-subpage .service-phase-card:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .service-phase-flow[data-service-count^="6"] .service-phase-card:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.toowie-subpage .service-phase-flow[data-service-count^="4"] .service-phase-card:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page .service-phase-flow .service-phase-card:where([data-layout="subpage"], [data-layout="subpage"] *) {
    flex: initial;
    width: auto;
    max-width: none;
  }
}


/* ========================================================================== 
   2026-09-01: Service-Uebersicht direkt unter dem Hero noch etwas breiter
   ziehen, damit sie visuell exakt zur bereits verbreiterten Hero-Zone passt.
   ========================================================================== */
@media (min-width: 981px) {
  body.toowie-subpage .service-phase-section > .page-shell:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: min(1560px, calc(100% - 4px));
  }
}

/* Hero-Unterüberschriften exakt wie die Referenz auf index.html. */
body.managedservice-page .page-hero-subline:where([data-layout="subpage"], [data-layout="subpage"] *),
body.infrastructure-page .page-hero-subline:where([data-layout="subpage"], [data-layout="subpage"] *),
body.software-service-page .page-hero-subline:where([data-layout="subpage"], [data-layout="subpage"] *),
body.website-showcase-page .page-hero-subline:where([data-layout="subpage"], [data-layout="subpage"] *) {
  font-family: Arial, sans-serif !important;
  font-size: clamp(1.12rem, 1.8vw, 1.6rem) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: normal !important;
  font-style: normal !important;
  text-transform: none !important;
}

@media (min-width: 400px) and (max-width: 980px) {
  body.managedservice-page .page-hero-subline:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.infrastructure-page .page-hero-subline:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page .page-hero-subline:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.website-showcase-page .page-hero-subline:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(.69rem, 1.55vw, 1.08rem) !important;
    line-height: 1.34 !important;
  }
}

@media (max-width: 399px) {
  body.managedservice-page .page-hero-subline:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.infrastructure-page .page-hero-subline:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page .page-hero-subline:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.website-showcase-page .page-hero-subline:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: 1.06rem !important;
    line-height: 1.4 !important;
  }
}

/* Hero-Vorteile auf allen Unterseiten eine Stufe groesser darstellen. */
body.toowie-subpage .page-hero .page-hero-points:where([data-layout="subpage"], [data-layout="subpage"] *) {
  font-size: 14px !important;
}

body.toowie-subpage .page-hero .page-hero-points i:where([data-layout="subpage"], [data-layout="subpage"] *) {
  font-size: inherit !important;
}

@media (min-width: 400px) and (max-width: 980px) {
  body.toowie-subpage .page-hero .page-hero-points:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(.72rem, 1.6vw, .875rem) !important;
  }
}

@media (max-width: 399px) {
  body.toowie-subpage .page-hero .page-hero-points:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(.62rem, 2.8vw, .78rem) !important;
  }
}

/* Technik-Seite: Kontaktbereich an die modernisierte Startseite angeglichen.
   Der dunkelblaue Hintergrund bleibt erhalten; bewusst ohne äußere Umrandung. */
.contact--navy-softgold.contact--home-layout:where([data-layout="subpage"], [data-layout="subpage"] *) {
  padding-top: 36px;
  padding-bottom: 78px;
}

.contact--navy-softgold.contact--home-layout .clean-kontakt-unified-card:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: min(90%, 1100px);
  max-width: 1100px;
  margin: 0 auto;
  padding: 44px 54px 48px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.contact--navy-softgold.contact--home-layout .clean-kontakt-wrapper:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 90px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.contact--navy-softgold.contact--home-layout .clean-kontakt-ueberschrift:where([data-layout="subpage"], [data-layout="subpage"] *) {
  line-height: .84 !important;
}

.contact--navy-softgold.contact--home-layout .clean-kontakt-ueberschrift .heading-desktop-h2:where([data-layout="subpage"], [data-layout="subpage"] *),
.contact--navy-softgold.contact--home-layout .clean-kontakt-ueberschrift .heading-mobile-h2:where([data-layout="subpage"], [data-layout="subpage"] *) {
  font-size: clamp(2.15rem, 4.05vw, 3.25rem) !important;
  line-height: .88 !important;
}

.contact--navy-softgold.contact--home-layout .is-desktop-octagon:where([data-layout="subpage"], [data-layout="subpage"] *) {
  /* Sichtbare Bild-Unterkante auf Höhe der Kontakt-Oktagone ausrichten. */
  transform: translateY(-33px);
}

.contact--navy-softgold.contact--home-layout .clean-kontakt-lead:where([data-layout="subpage"], [data-layout="subpage"] *) {
  max-width: 620px;
  margin: 18px 0 0;
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1.62;
}

.contact--navy-softgold.contact--home-layout .clean-kontakt-choices:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: flex;
  align-items: flex-start;
  gap: clamp(9px, 1.1vw, 12px);
  margin-top: 20px;
  padding-bottom: 52px;
}

.contact--navy-softgold.contact--home-layout .clean-kontakt-choice:where([data-layout="subpage"], [data-layout="subpage"] *) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #f8fbff;
  text-decoration: none;
  outline: none;
}

.contact--navy-softgold.contact--home-layout .clean-kontakt-choice-octagon:where([data-layout="subpage"], [data-layout="subpage"] *) {
  position: relative;
  isolation: isolate;
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f3e4c9;
  background: rgba(243, 228, 201, .68);
  clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%);
  font-size: 1.05rem;
  transition: transform .2s ease, background .2s ease, color .2s ease;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .2));
}

.contact--navy-softgold.contact--home-layout .clean-kontakt-choice-octagon:where([data-layout="subpage"], [data-layout="subpage"] *)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px;
  background: #0b2948;
  clip-path: inherit;
}

.contact--navy-softgold.contact--home-layout .clean-kontakt-choice-octagon > i:where([data-layout="subpage"], [data-layout="subpage"] *),
.contact--navy-softgold.contact--home-layout .clean-kontakt-choice-octagon > svg:where([data-layout="subpage"], [data-layout="subpage"] *) {
  position: relative;
  z-index: 1;
}

.contact--navy-softgold.contact--home-layout .clean-kontakt-choice-octagon > svg:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: 20px;
  height: 20px;
}

.contact--navy-softgold.contact--home-layout .clean-kontakt-choice-tooltip:where([data-layout="subpage"], [data-layout="subpage"] *) {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: calc(100% + 10px);
  width: max-content;
  max-width: 210px;
  padding: 8px 11px;
  color: #06182b;
  background: #fffdf8;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -4px);
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
  pointer-events: none;
}

.contact--navy-softgold.contact--home-layout .clean-kontakt-choice-tooltip strong:where([data-layout="subpage"], [data-layout="subpage"] *),
.contact--navy-softgold.contact--home-layout .clean-kontakt-choice-tooltip small:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: block;
  white-space: nowrap;
}

.contact--navy-softgold.contact--home-layout .clean-kontakt-choice-tooltip strong:where([data-layout="subpage"], [data-layout="subpage"] *) {
  font-size: .78rem;
}

.contact--navy-softgold.contact--home-layout .clean-kontakt-choice-tooltip small:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin-top: 2px;
  color: #8a642d;
  font-size: .72rem;
}

.contact--navy-softgold.contact--home-layout .clean-kontakt-choice:hover .clean-kontakt-choice-octagon:where([data-layout="subpage"], [data-layout="subpage"] *),
.contact--navy-softgold.contact--home-layout .clean-kontakt-choice:focus-visible .clean-kontakt-choice-octagon:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #fff7ea;
  background: #f2e4cb;
  transform: translateY(-3px) scale(1.04);
}

.contact--navy-softgold.contact--home-layout .clean-kontakt-choice:hover .clean-kontakt-choice-tooltip:where([data-layout="subpage"], [data-layout="subpage"] *),
.contact--navy-softgold.contact--home-layout .clean-kontakt-choice:focus-visible .clean-kontakt-choice-tooltip:where([data-layout="subpage"], [data-layout="subpage"] *) {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* Einheitliche helle Kontakt-Octagons in allen blauen Technik-Kontaktbereichen. */
.contact--navy-softgold.contact--home-layout .clean-kontakt-choice-octagon {
  color: #0a2850;
  background: rgba(198, 154, 87, 0.58);
  filter: drop-shadow(0 7px 12px rgba(4, 23, 42, 0.12));
}

.contact--navy-softgold.contact--home-layout .clean-kontakt-choice-octagon::before {
  background: #fff;
}

.contact--navy-softgold.contact--home-layout .clean-kontakt-choice:hover .clean-kontakt-choice-octagon,
.contact--navy-softgold.contact--home-layout .clean-kontakt-choice:focus-visible .clean-kontakt-choice-octagon {
  color: #0a2850;
  background: rgba(198, 154, 87, 0.9);
}

.contact--navy-softgold.contact--home-layout .clean-kontakt-choice:hover .clean-kontakt-choice-octagon::before,
.contact--navy-softgold.contact--home-layout .clean-kontakt-choice:focus-visible .clean-kontakt-choice-octagon::before {
  background: #fffdf8;
}

.contact--navy-softgold.contact--home-layout .clean-kontakt-btn,
.contact--navy-softgold.contact--home-layout .clean-kontakt-btn:hover,
.contact--navy-softgold.contact--home-layout .clean-kontakt-btn:focus-visible {
  color: #0a2850 !important;
}

.contact--navy-softgold.contact--home-layout .clean-kontaktformular-wrapper:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: min(100%, 860px);
  max-width: 860px;
  margin: -80px auto 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.contact--navy-softgold.contact--home-layout .clean-kontaktformular-ueberschrift:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 0 0 34px;
  text-align: center;
}

.contact--navy-softgold.contact--home-layout .clean-kontaktformular-ueberschrift:where([data-layout="subpage"], [data-layout="subpage"] *)::after {
  content: none;
  display: none;
}

/* Ruhigere Felder wie auf der Startseite, farblich für Dunkelblau angepasst. */
.contact--navy-softgold.contact--home-layout.form--oval-blue .clean-kontakt-form-control:where([data-layout="subpage"], [data-layout="subpage"] *),
.contact--navy-softgold.contact--home-layout.form--oval-blue .clean-kontakt-floating-label-textarea textarea:where([data-layout="subpage"], [data-layout="subpage"] *) {
  background: rgba(255, 255, 255, .075);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #f8fbff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .04);
}

.contact--navy-softgold.contact--home-layout.form--oval-blue .clean-kontakt-form-control:hover:where([data-layout="subpage"], [data-layout="subpage"] *),
.contact--navy-softgold.contact--home-layout.form--oval-blue .clean-kontakt-floating-label-textarea textarea:hover:where([data-layout="subpage"], [data-layout="subpage"] *) {
  border-color: rgba(243, 228, 201, .48);
}

.contact--navy-softgold.contact--home-layout.form--oval-blue .clean-kontakt-form-control:focus:where([data-layout="subpage"], [data-layout="subpage"] *),
.contact--navy-softgold.contact--home-layout.form--oval-blue .clean-kontakt-floating-label-textarea textarea:focus:where([data-layout="subpage"], [data-layout="subpage"] *) {
  border-color: rgba(243, 228, 201, .82);
  color: #f8fbff;
  background: rgba(255, 255, 255, .1);
  box-shadow: 0 0 0 4px rgba(243, 228, 201, .1);
}

.contact--navy-softgold.contact--home-layout.form--oval-blue .clean-kontakt-form-control:not(:placeholder-shown):where([data-layout="subpage"], [data-layout="subpage"] *),
.contact--navy-softgold.contact--home-layout.form--oval-blue .clean-kontakt-floating-label-textarea textarea:not(:placeholder-shown):where([data-layout="subpage"], [data-layout="subpage"] *) {
  border-color: rgba(255, 255, 255, .2);
  color: #f8fbff;
}

.contact--navy-softgold.contact--home-layout.form--oval-blue .clean-kontakt-form-control:not(:placeholder-shown):focus:where([data-layout="subpage"], [data-layout="subpage"] *),
.contact--navy-softgold.contact--home-layout.form--oval-blue .clean-kontakt-floating-label-textarea textarea:not(:placeholder-shown):focus:where([data-layout="subpage"], [data-layout="subpage"] *) {
  border-color: rgba(243, 228, 201, .82);
}

.contact--navy-softgold.contact--home-layout.form--oval-blue .clean-kontakt-floating-label label:where([data-layout="subpage"], [data-layout="subpage"] *),
.contact--navy-softgold.contact--home-layout.form--oval-blue .clean-kontakt-floating-label-textarea label:where([data-layout="subpage"], [data-layout="subpage"] *),
.contact--navy-softgold.contact--home-layout.form--oval-blue .clean-kontakt-form-control:not(:placeholder-shown) + label:where([data-layout="subpage"], [data-layout="subpage"] *),
.contact--navy-softgold.contact--home-layout.form--oval-blue .clean-kontakt-floating-label-textarea textarea:not(:placeholder-shown) + label:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #c7d3df;
}

.contact--navy-softgold.contact--home-layout.form--oval-blue .clean-kontakt-form-control:focus + label:where([data-layout="subpage"], [data-layout="subpage"] *),
.contact--navy-softgold.contact--home-layout.form--oval-blue .clean-kontakt-floating-label-textarea textarea:focus + label:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #f3e4c9;
}

.contact--navy-softgold.contact--home-layout #charCount:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #aebdca;
}

/* Submit-Button: helle Wirkung passend zu den Octagon-Flächen. */
.contact--navy-softgold.contact--home-layout .clean-kontakt-btn:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #0a2850;
  background: #fff;
  border: 0;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .22);
}

.contact--navy-softgold.contact--home-layout .clean-kontakt-btn:hover:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #0a2850;
  background: #fffdf8;
  box-shadow: 0 15px 32px rgba(0, 0, 0, .28);
}

@media (max-width: 900px) {
  .contact--navy-softgold.contact--home-layout:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding-top: 26px;
    padding-bottom: 58px;
  }

  .contact--navy-softgold.contact--home-layout .clean-kontakt-unified-card:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: calc(100% - 32px);
    padding: 34px 28px 36px;
  }

  .contact--navy-softgold.contact--home-layout .clean-kontakt-wrapper:where([data-layout="subpage"], [data-layout="subpage"] *) {
    gap: 0;
  }

  .contact--navy-softgold.contact--home-layout .clean-kontaktformular-wrapper:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: 100%;
    margin-top: 22px;
  }

  .contact--navy-softgold.contact--home-layout .clean-kontaktformular-ueberschrift:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin-bottom: 30px;
  }
}

@media (hover: none), (max-width: 900px) {
  .contact--navy-softgold.contact--home-layout .clean-kontakt-choices:where([data-layout="subpage"], [data-layout="subpage"] *) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding-bottom: 0;
  }

  .contact--navy-softgold.contact--home-layout .clean-kontakt-choice:where([data-layout="subpage"], [data-layout="subpage"] *) {
    flex-direction: column;
    gap: 9px;
  }

  .contact--navy-softgold.contact--home-layout .clean-kontakt-choice-tooltip:where([data-layout="subpage"], [data-layout="subpage"] *) {
    position: static;
    width: auto;
    max-width: 100%;
    padding: 0;
    color: #f8fbff;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .contact--navy-softgold.contact--home-layout .clean-kontakt-choice-tooltip small:where([data-layout="subpage"], [data-layout="subpage"] *) {
    color: #f3e4c9;
  }
}

@media (max-width: 575px) {
  .contact--navy-softgold.contact--home-layout .clean-kontakt-choices:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .contact--navy-softgold.contact--home-layout .clean-kontakt-choice:where([data-layout="subpage"], [data-layout="subpage"] *) {
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    text-align: left;
  }

  .contact--navy-softgold.contact--home-layout .clean-kontakt-choice-octagon:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: 48px;
    height: 48px;
    font-size: 1rem;
  }

  .contact--navy-softgold.contact--home-layout .clean-kontakt-choice-tooltip:where([data-layout="subpage"], [data-layout="subpage"] *) {
    text-align: left;
  }

  .contact--navy-softgold.contact--home-layout .clean-kontakt-unified-card:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: calc(100% - 24px);
    padding: 28px 18px 30px;
  }
}

/* ========================================================================== 
   2026-09-02: Technik-Dropdownseiten – Servicekarten inhaltlich dimensionieren
   Schriftgroessen entsprechen Software & Automatisierung. Auf grossen
   Bildschirmen bestimmt das laengste Wort einer Kartenueberschrift die
   gemeinsame Kartenbreite des jeweiligen Abschnitts; die Kartenhoehe folgt
   dem inhaltsreichsten Element der Gruppe.
   ========================================================================== */
@media (min-width: 1201px) {
  body:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  .service-phase-flow .service-phase-card h3:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(19px, 1.48vw, 23px);
    line-height: 1.15;
    hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
  }

  body:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  .service-phase-flow .service-phase-card p:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(13px, .98vw, 14px);
    line-height: 1.55;
    overflow-wrap: break-word;
  }

  body:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  .service-phase-flow.service-phase-content-sized:where([data-layout="subpage"], [data-layout="subpage"] *) {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
  }

  body:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  .service-phase-flow.service-phase-headings-aligned .service-phase-card h3:where([data-layout="subpage"], [data-layout="subpage"] *) {
    display: flex;
    align-items: center;
    height: var(--service-card-heading-height);
  }

  body:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  .service-phase-flow.service-phase-content-sized .service-phase-card:where([data-layout="subpage"], [data-layout="subpage"] *),
  body:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  .service-phase-flow.service-phase-content-sized[data-service-count^="6"] .service-phase-card:where([data-layout="subpage"], [data-layout="subpage"] *),
  body:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  .service-phase-flow.service-phase-content-sized[data-service-count^="4"] .service-phase-card:where([data-layout="subpage"], [data-layout="subpage"] *) {
    flex: 0 0 var(--service-card-content-width);
    width: var(--service-card-content-width);
    max-width: none;
    min-width: 0;
    min-height: 0;
    height: auto;
  }
}

@media (min-width: 400px) and (max-width: 1200px) {
  body:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  .service-phase-flow .service-phase-card h3:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(.74rem, 1.02vw, .98rem);
    line-height: 1.16;
  }

  body:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  .service-phase-flow .service-phase-card p:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(.56rem, .72vw, .70rem);
    line-height: 1.45;
  }
}

/* Ab fünf Service-Karten wird die verfügbare Zeilenbreite vollständig genutzt. */
@media (min-width: 1201px) {
  .service-phase-flow.service-phase-full-width:where([data-layout="subpage"], [data-layout="subpage"] *) {
    flex-wrap: nowrap;
  }

  .service-phase-flow.service-phase-full-width .service-phase-card:where([data-layout="subpage"], [data-layout="subpage"] *) {
    flex: 1 1 0;
    width: auto;
    max-width: none;
  }
}

/* Technik-Unterseiten: Übersichtsbereich wie bei Software & Automatisierung.
   Nur Überschrift/Unterzeile bekommen auf Desktop mehr Breite; die Karten bleiben unverändert. */
@media (min-width: 1000px) {
  body.managedservice-page .service-phase-head h2:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.infrastructure-page .service-phase-head h2:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.website-showcase-page .service-phase-head h2:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.managedservice-page .service-phase-head-copy:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.infrastructure-page .service-phase-head-copy:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.website-showcase-page .service-phase-head-copy:where([data-layout="subpage"], [data-layout="subpage"] *) {
    max-width: none;
  }

  body.managedservice-page .service-phase-head h2:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.infrastructure-page .service-phase-head h2:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.website-showcase-page .service-phase-head h2:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.managedservice-page .service-phase-head-copy > p:first-child:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.infrastructure-page .service-phase-head-copy > p:first-child:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.website-showcase-page .service-phase-head-copy > p:first-child:where([data-layout="subpage"], [data-layout="subpage"] *) {
    white-space: nowrap;
  }
}


/* ========================================================================== */
/* IT-Betreuung: Inhalte rechts neben dem Goldstrich bewusst größer darstellen */
/* ========================================================================== */
body.managedservice-page .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
body.managedservice-page .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
  padding-left: clamp(16px, 2.4vw, 34px);
}

body.managedservice-page .service-feature-rail article:where([data-layout="subpage"], [data-layout="subpage"] *) {
  grid-template-columns: clamp(42px, 4.4vw, 56px) minmax(0, 1fr);
  gap: clamp(10px, 1.5vw, 18px);
  align-items: center;
  padding-bottom: clamp(12px, 1.83vw, 22px);
  margin-bottom: clamp(12px, 1.83vw, 22px);
}

body.managedservice-page .service-feature-rail article > div:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body.managedservice-page .service-feature-icon:where([data-layout="subpage"], [data-layout="subpage"] *) {
  width: clamp(38px, 4vw, 50px);
  height: clamp(38px, 4vw, 50px);
  flex-basis: clamp(38px, 4vw, 50px);
  border-radius: clamp(10px, 1.17vw, 14px);
  font-size: clamp(.8rem, 1.5vw, 1.1rem);
}

body.managedservice-page .service-feature-icon i:where([data-layout="subpage"], [data-layout="subpage"] *) {
  font-size: clamp(.78rem, 1.4vw, 1.05rem);
}

body.managedservice-page .service-feature-rail b:where([data-layout="subpage"], [data-layout="subpage"] *) {
  font-size: clamp(.76rem, 1.4vw, 1.125rem);
  line-height: 1.35;
}

body.managedservice-page .service-feature-rail p:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin-top: clamp(4px, .45vw, 6px);
  font-size: clamp(.66rem, 1.15vw, .95rem);
  line-height: 1.65;
}

@media (max-width: 980px) {
  body.managedservice-page .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.managedservice-page .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding-left: 22px;
  }

  body.managedservice-page .service-feature-rail article:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  body.managedservice-page .service-feature-icon:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 14px;
    font-size: 1rem;
  }

  body.managedservice-page .service-feature-icon i:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: .95rem;
  }

  body.managedservice-page .service-feature-rail b:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: 1rem;
  }

  body.managedservice-page .service-feature-rail p:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: .92rem;
    line-height: 1.6;
  }
}

@media (max-width: 399px) {
  body.managedservice-page .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.managedservice-page .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding-left: 0;
  }

  body.managedservice-page .service-feature-rail article:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding-bottom: 18px;
    margin-bottom: 18px;
  }

  body.managedservice-page .service-feature-icon:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 13px;
    font-size: .95rem;
  }

  body.managedservice-page .service-feature-icon i:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: .9rem;
  }

  body.managedservice-page .service-feature-rail b:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: .98rem;
  }

  body.managedservice-page .service-feature-rail p:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: .9rem;
    line-height: 1.58;
  }
}

/* ========================================================================== */
/* IT-Betreuung: Goldstrich folgt automatisch der höheren Inhaltsseite.       */
/* Die jeweils kürzere Seite bleibt innerhalb derselben Höhe vertikal mittig. */
/* ========================================================================== */
@media (min-width: 400px) {
  body.managedservice-page .service-feature-layout:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.managedservice-page .service-feature-layout.is-reverse:where([data-layout="subpage"], [data-layout="subpage"] *) {
    align-items: stretch;
  }

  body.managedservice-page .service-feature-copy:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.managedservice-page .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.managedservice-page .service-feature-layout.is-reverse .service-feature-copy:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.managedservice-page .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
    box-sizing: border-box;
    justify-content: center;
  }

  body.managedservice-page .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.managedservice-page .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding-top: 0;
    padding-bottom: 0;
  }
}


/* 2026-09-02: IT-Betreuung – Bereichslabel an die linke Überschrift koppeln
   und die Inhalte rechts vertikal sauber am Goldstrich ausrichten. */
@media (min-width: 400px) {
  body.managedservice-page .service-feature-copy .service-feature-section-heading:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin-bottom: 20px;
  }

  body.managedservice-page .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.managedservice-page .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
    min-height: 100%;
    justify-content: center;
    row-gap: clamp(12px, 1.83vw, 22px);
    padding-top: 0;
    padding-bottom: 0;
  }

  body.managedservice-page .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *)::before,
  body.managedservice-page .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *)::after,
  body.managedservice-page .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *)::before,
  body.managedservice-page .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *)::after {
    content: none;
  }

  body.managedservice-page .service-feature-rail article:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.managedservice-page .service-feature-layout.is-reverse .service-feature-rail article:where([data-layout="subpage"], [data-layout="subpage"] *) {
    flex: 0 0 auto;
    margin-bottom: 0;
  }

  /* Nur bei IT-Betreuung wurde durch die groessere Desktop-Darstellung
     auch beim letzten Punkt noch Bottom-Padding gesetzt. Das verschiebt
     den sichtbaren Dreierblock optisch nach oben. */
  body.managedservice-page .service-feature-rail article:last-child:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.managedservice-page .service-feature-layout.is-reverse .service-feature-rail article:last-child:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding-bottom: 0;
  }
}

@media (min-width: 400px) and (max-width: 980px) {
  body.managedservice-page .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.managedservice-page .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
    row-gap: 20px;
  }
}


/* 2026-09-02: IT-Infrastruktur + Software & Automatisierung –
   Detailboxen an die grössere Darstellung der IT-Betreuung angleichen.
   Die komplette rechte Spalte bleibt dabei sauber rechts der goldenen Linie. */
@media (min-width: 400px) {
  body.infrastructure-page .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.infrastructure-page .service-feature-layout .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.infrastructure-page .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page .service-feature-layout .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
    min-height: 100%;
    justify-content: center;
    row-gap: clamp(12px, 1.83vw, 22px);
    padding-left: clamp(14px, 2.75vw, 34px) !important;
    border-left: clamp(2px, .33vw, 4px) solid #c69a57 !important;
  }

  body.infrastructure-page .service-feature-rail article:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.infrastructure-page .service-feature-layout .service-feature-rail article:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.infrastructure-page .service-feature-layout.is-reverse .service-feature-rail article:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page .service-feature-rail article:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page .service-feature-layout .service-feature-rail article:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page .service-feature-layout.is-reverse .service-feature-rail article:where([data-layout="subpage"], [data-layout="subpage"] *) {
    grid-template-columns: clamp(40px, 4.5vw, 54px) minmax(0, 1fr);
    gap: clamp(10px, 1.5vw, 18px);
    align-items: start;
    padding-bottom: clamp(12px, 1.83vw, 22px);
    margin-bottom: 0;
  }

  body.infrastructure-page .service-feature-rail article:last-child:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.infrastructure-page .service-feature-layout .service-feature-rail article:last-child:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.infrastructure-page .service-feature-layout.is-reverse .service-feature-rail article:last-child:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page .service-feature-rail article:last-child:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page .service-feature-layout .service-feature-rail article:last-child:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page .service-feature-layout.is-reverse .service-feature-rail article:last-child:where([data-layout="subpage"], [data-layout="subpage"] *) {
    padding-bottom: 0;
    margin-bottom: 0;
  }

  body.infrastructure-page .service-feature-icon:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page .service-feature-icon:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: clamp(36px, 4.1vw, 50px);
    height: clamp(36px, 4.1vw, 50px);
    min-width: clamp(36px, 4.1vw, 50px);
    flex-basis: clamp(36px, 4.1vw, 50px);
    flex-shrink: 0;
    border-radius: clamp(10px, 1.17vw, 14px);
  }

  body.infrastructure-page .service-feature-icon i:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(.72rem, 1.45vw, 1.05rem);
    line-height: 1;
  }

  body.software-service-page .service-feature-icon:where([data-layout="subpage"], [data-layout="subpage"] *)::before {
    font-size: clamp(.72rem, 1.45vw, 1.05rem);
  }

  body.infrastructure-page .service-feature-rail b:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page .service-feature-rail b:where([data-layout="subpage"], [data-layout="subpage"] *) {
    font-size: clamp(.72rem, 1.45vw, 1.125rem);
    line-height: 1.35;
  }

  body.infrastructure-page .service-feature-rail p:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page .service-feature-rail p:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin-top: clamp(4px, .42vw, 5px);
    font-size: clamp(.62rem, 1.18vw, .95rem);
    line-height: 1.65;
  }
}

@media (min-width: 400px) and (max-width: 980px) {
  body.infrastructure-page .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.infrastructure-page .service-feature-layout .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.infrastructure-page .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page .service-feature-layout .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page .service-feature-layout.is-reverse .service-feature-rail:where([data-layout="subpage"], [data-layout="subpage"] *) {
    row-gap: 20px;
  }
}

/* 2026-09-02: Software & Automatisierung – Hero-Motiv kompakter und weiter links. */
@media (min-width: 901px) {
  body.software-service-page .page-hero.tech-service-hero .tech-service-hero-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
    margin-right: 0;
    transform: translateX(-42px);
  }

  body.software-service-page .page-hero.tech-service-hero .tech-service-hero-art:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: min(680px, 100%);
    max-width: 100%;
  }
}

@media (min-width: 1201px) {
  body.software-service-page .page-hero.tech-service-hero .tech-service-hero-art:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: min(700px, 102%);
  }
}

/* 2026-09-02: IT-Betreuung + Software & Automatisierung –
   Übersichtskarten auf Desktop wieder über die komplette Zeilenbreite verteilen.
   Die spätere inhaltsabhängige Kartenbreite bleibt für die anderen Technikseiten bestehen. */
@media (min-width: 1201px) {
  body.managedservice-page .service-phase-flow.service-phase-content-sized:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page .service-phase-flow.service-phase-content-sized:where([data-layout="subpage"], [data-layout="subpage"] *) {
    display: grid;
    grid-template-columns: repeat(var(--service-count), minmax(0, 1fr));
    justify-content: stretch;
    align-items: stretch;
  }

  body.managedservice-page .service-phase-flow.service-phase-content-sized .service-phase-card:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.managedservice-page .service-phase-flow.service-phase-content-sized[data-service-count^="4"] .service-phase-card:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page .service-phase-flow.service-phase-content-sized .service-phase-card:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: auto;
    max-width: none;
  }
}

/* 2026-09-02: Website-Entwicklung – Abschnittsüberschriften wieder zweifarbig
   und Screenshot bei "Sofort verständlich" auf Desktop kompakter darstellen. */
body.website-showcase-page .service-feature-copy h2 .service-heading-blue:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #0a2850 !important;
}

body.website-showcase-page .service-feature-copy h2 .service-heading-gold:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #c69a57 !important;
}

@media (min-width: 981px) {
  body.website-showcase-page #klare-botschaft .website-showcase-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: 82% !important;
    max-width: 500px;
    justify-self: center;
    margin-inline: auto;
  }
}

/* 2026-09-02: Website-Entwicklung – Eventgesang-Screenshot im Bereich
   "Übersichtliches Design" auf Desktop etwas näher an den Text rücken. */
@media (min-width: 981px) {
  body.website-showcase-page #modernes-design .website-showcase-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
    position: relative;
    left: -135px;
  }
}


/* index.html – Seitengestaltung */


  

    /* Startseiten-Dramaturgie: Erst die Idee, dann Erreichen und Umsetzen. */
    .home-story-step:where([data-page="index"], [data-page="index"] *) {
      position: relative;
      overflow: hidden;
      background: #fff;
      padding: clamp(70px, 8vw, 112px) 24px clamp(56px, 7vw, 92px);
    }

    .home-story-step:where([data-page="index"], [data-page="index"] *)::before {
      content: "";
      position: absolute;
      width: 420px;
      height: 420px;
      right: -210px;
      top: -210px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(198,154,87,.10), rgba(198,154,87,0) 70%);
      pointer-events: none;
    }

    .home-story-step-inner:where([data-page="index"], [data-page="index"] *) {
      position: relative;
      z-index: 1;
      width: min(1180px, 100%);
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(150px, .34fr) minmax(0, 1.66fr);
      gap: clamp(30px, 6vw, 82px);
      align-items: center;
    }

    .home-story-step-number:where([data-page="index"], [data-page="index"] *) {
      display: block;
      margin: 0;
      color: var(--toowie-gold);
      font-size: clamp(7rem, 15vw, 13rem);
      font-weight: 900;
      letter-spacing: -.085em;
      line-height: .72;
      opacity: .96;
      user-select: none;
    }

    .home-story-step-content:where([data-page="index"], [data-page="index"] *) {
      max-width: 850px;
      padding-left: clamp(32px, 3.5vw, 52px);
    }

    .home-story-step-kicker:where([data-page="index"], [data-page="index"] *) {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
      color: rgb(var(--toowie-blue-dark));
      font-size: .84rem;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .home-story-step-kicker:where([data-page="index"], [data-page="index"] *)::before {
      content: "";
      width: 28px;
      height: 2px;
      border-radius: 999px;
      background: var(--toowie-gold);
    }

    .home-story-step h2:where([data-page="index"], [data-page="index"] *) {
      max-width: 960px;
      margin: 0 0 20px;
      color: rgb(var(--toowie-blue-dark));
      font-size: clamp(2.15rem, 4.2vw, 4rem);
      line-height: 1.08;
      letter-spacing: -.035em;
    }

    .home-story-step h2 span:where([data-page="index"], [data-page="index"] *) {
      color: var(--toowie-gold);
    }

    /* Bereiche 01–03: dunkleres TOOWIE-Blau */
    #idee-erreichen .home-story-step-content h2:where([data-page="index"], [data-page="index"] *),
    #idee-ermoeglichen .home-story-step-content h2:where([data-page="index"], [data-page="index"] *),
    #idee-erweitern .home-story-step-content h2:where([data-page="index"], [data-page="index"] *) {
      color: #0a2850;
    }

    .home-story-step p:where([data-page="index"], [data-page="index"] *) {
      max-width: 790px;
      margin: 0;
      color: rgba(16, 48, 78, .78);
      font-size: clamp(1.02rem, 1.5vw, 1.16rem);
      line-height: 1.78;
    }

    .home-story-step + .toowie-product .hero:where([data-page="index"], [data-page="index"] *) {
      border-top: 1px solid rgba(255,255,255,.08);
    }

    /* Bereiche 01–04: Bilder im rechten Hero-Bereich zeigen den normalen Mauszeiger. */
    .toowie-product .hero-visual .browser-frame img:where([data-page="index"], [data-page="index"] *),
    .toowie-product .hero-visual .capability-slide-image img:where([data-page="index"], [data-page="index"] *) {
      cursor: default !important;
    }

    .philosophy-path-item[href]:where([data-page="index"], [data-page="index"] *) {
      padding: 10px 12px;
      margin: -10px -12px;
      border-radius: 16px;
      color: inherit;
      text-decoration: none;
      transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
    }

    .philosophy-path-item[href]:hover:where([data-page="index"], [data-page="index"] *),
    .philosophy-path-item[href]:focus-visible:where([data-page="index"], [data-page="index"] *) {
      transform: translateY(-2px);
      background: rgba(255,255,255,.07);
      box-shadow: 0 10px 28px rgba(0,0,0,.12);
      outline: none;
    }

    .philosophy-path-item[href]:hover .path-octagon:where([data-page="index"], [data-page="index"] *),
    .philosophy-path-item[href]:focus-visible .path-octagon:where([data-page="index"], [data-page="index"] *) {
      background: var(--toowie-gold);
      color: rgb(var(--toowie-blue-dark));
    }

    .philosophy-path-item .path-octagon:where([data-page="index"], [data-page="index"] *) {
      transition: background-color .2s ease, color .2s ease;
    }

    @media (max-width: 760px) {
      .home-story-step:where([data-page="index"], [data-page="index"] *) {
        padding-left: clamp(14px, 3vw, 20px);
        padding-right: clamp(14px, 3vw, 20px);
      }

      /* Unter 760px steht 01–04 nur neben der Überschrift.
         Der Fließtext läuft anschließend wieder über die volle Breite. */
      .home-story-step-inner:where([data-page="index"], [data-page="index"] *) {
        grid-template-columns: clamp(58px, 18vw, 120px) minmax(0, 1fr);
        column-gap: clamp(24px, 7.6vw, 56px);
        row-gap: 0;
        align-items: center;
      }

      .home-story-step-content:where([data-page="index"], [data-page="index"] *) {
        display: contents;
      }

      .home-story-step-kicker:where([data-page="index"], [data-page="index"] *) {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        gap: clamp(6px, 1.5vw, 10px);
        margin-bottom: 8px;
        font-size: clamp(.68rem, 2vw, .84rem);
        letter-spacing: .1em;
      }

      .home-story-step-kicker:where([data-page="index"], [data-page="index"] *)::before {
        width: clamp(16px, 4vw, 28px);
      }

      .home-story-step-number:where([data-page="index"], [data-page="index"] *) {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: center;
        font-size: clamp(4rem, 17vw, 7.25rem);
        line-height: .76;
      }

      .home-story-step h2:where([data-page="index"], [data-page="index"] *),
      .home-story-step-logo:where([data-page="index"], [data-page="index"] *),
      .home-story-step-logo-fallback:where([data-page="index"], [data-page="index"] *) {
        grid-column: 2;
        grid-row: 2;
        align-self: center;
      }

      .home-story-step h2:where([data-page="index"], [data-page="index"] *) {
        font-size: clamp(1.7rem, 7.5vw, 3rem);
      }

      .home-story-step p:where([data-page="index"], [data-page="index"] *) {
        grid-column: 1 / -1;
        grid-row: 3;
        max-width: 790px;
        margin-top: clamp(18px, 4vw, 28px);
      }
    }

    @media (max-width: 399px) {
      .home-story-step-inner:where([data-page="index"], [data-page="index"] *) {
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 14px;
      }

      .home-story-step-number:where([data-page="index"], [data-page="index"] *) {
        display: none;
      }

      #idee-erreichen .home-story-step-number:where([data-page="index"], [data-page="index"] *),
      #idee-ermoeglichen .home-story-step-number:where([data-page="index"], [data-page="index"] *),
      #idee-erweitern .home-story-step-number:where([data-page="index"], [data-page="index"] *) {
        display: block;
        grid-column: 1;
        grid-row: 2;
        align-self: center;
        margin-top: 0;
        font-size: clamp(2.7rem, 12vw, 3.35rem);
        line-height: .9;
        letter-spacing: -.06em;
      }

      .home-story-step-kicker:where([data-page="index"], [data-page="index"] *) {
        grid-column: 1 / -1;
        grid-row: 1;
      }

      .home-story-step h2:where([data-page="index"], [data-page="index"] *),
      .home-story-step-logo:where([data-page="index"], [data-page="index"] *),
      .home-story-step-logo-fallback:where([data-page="index"], [data-page="index"] *),
      .home-story-step p:where([data-page="index"], [data-page="index"] *) {
        grid-column: 1 / -1;
      }

      #idee-erreichen .home-story-step-content h2:where([data-page="index"], [data-page="index"] *),
      #idee-ermoeglichen .home-story-step-content h2:where([data-page="index"], [data-page="index"] *),
      #idee-erweitern .home-story-step-content h2:where([data-page="index"], [data-page="index"] *) {
        grid-column: 2;
        grid-row: 2;
        margin-bottom: 0;
        align-self: center;
      }

      .home-story-step h2:where([data-page="index"], [data-page="index"] *),
      .home-story-step-logo:where([data-page="index"], [data-page="index"] *),
      .home-story-step-logo-fallback:where([data-page="index"], [data-page="index"] *) {
        grid-row: 2;
      }

      .home-story-step p:where([data-page="index"], [data-page="index"] *) {
        grid-row: 3;
      }
    }

    /* Schritt 4 / TOOWIE */
    .home-story-step-logo:where([data-page="index"], [data-page="index"] *) {
      display: block;
      width: min(340px, 100%);
      height: auto;
      margin: 0 0 14px;
    }

    .home-story-step-logo-fallback:where([data-page="index"], [data-page="index"] *) {
      display: none;
      margin: 0 0 14px;
      color: rgb(var(--toowie-blue-dark));
      font-size: clamp(2.5rem, 6vw, 4.1rem);
      font-weight: 900;
      letter-spacing: -.05em;
      line-height: 1;
    }


    .toowie-identity-logo:where([data-page="index"], [data-page="index"] *) {
      display: block;
      width: min(180px, 52%);
      height: auto;
      margin: 0 0 18px;
      filter: drop-shadow(0 8px 20px rgba(0,0,0,.12));
    }

    .toowie-inline-acronym:where([data-page="index"], [data-page="index"] *) {
      margin: 0 0 18px;
    }

    .toowie-inline-acronym-row:where([data-page="index"], [data-page="index"] *) {
      display: grid;
      grid-template-columns: repeat(6, 46px);
      align-items: center;
      gap: 10px;
      width: max-content;
      max-width: 100%;
      margin-bottom: 12px;
    }

    .toowie-inline-octagon:where([data-page="index"], [data-page="index"] *) {
      flex: 0 0 auto;
      width: 46px;
      height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
      background: var(--toowie-gold);
      color: #fff;
      font-size: 1rem;
      font-weight: 900;
      letter-spacing: -.03em;
      box-shadow: 0 10px 24px rgba(0,0,0,.18);
    }

    .toowie-inline-acronym-note:where([data-page="index"], [data-page="index"] *) {
      margin: 0;
      color: rgba(255,255,255,.8);
      font-size: .96rem;
      font-weight: 600;
      line-height: 1.55;
      max-width: 620px;
    }


    .toowie-hover-item:where([data-page="index"], [data-page="index"] *) {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .toowie-hover-tooltip:where([data-page="index"], [data-page="index"] *) {
      position: absolute;
      left: 50%;
      bottom: calc(100% + 10px);
      transform: translateX(-50%) translateY(4px);
      padding: 8px 10px;
      border-radius: 12px;
      background: rgba(7, 27, 48, .96);
      color: #fff;
      font-size: .84rem;
      font-weight: 700;
      line-height: 1.35;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      box-shadow: 0 12px 28px rgba(0,0,0,.22);
      transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
      z-index: 5;
    }

    .toowie-meaning-slide:where([data-page="index"], [data-page="index"] *) {
      display: grid !important;
      grid-template-columns: 1fr !important;
      grid-template-rows: 580px !important;
      grid-template-areas: "info" !important;
      height: 580px !important;
      min-height: 580px !important;
    }

    .toowie-meaning-slide .capability-slide-panel:where([data-page="index"], [data-page="index"] *) {
      grid-area: info;
      width: 100%;
      min-height: 580px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-left: 0;
      box-shadow: none;
    }

    .toowie-meaning-slide .capability-slide-content:where([data-page="index"], [data-page="index"] *) {
      width: 100%;
      min-height: 100%;
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
      grid-template-areas:
        "intro intro"
        "primary explanation";
      align-items: center;
      column-gap: clamp(34px, 5vw, 72px);
      row-gap: clamp(18px, 2.5vw, 28px);
      padding: clamp(30px, 4vw, 54px);
    }

    .toowie-meaning-intro:where([data-page="index"], [data-page="index"] *) {
      grid-area: intro;
      text-align: center;
      margin-bottom: 4px;
    }

    .toowie-meaning-intro h3:where([data-page="index"], [data-page="index"] *) {
      margin: 0;
      color: #c58e36;
      font-size: clamp(1.8rem, 2.5vw, 2.45rem);
      line-height: 1.08;
      letter-spacing: -.03em;
    }

    .toowie-meaning-primary:where([data-page="index"], [data-page="index"] *) {
      grid-area: primary;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .toowie-meaning-logo-wrap:where([data-page="index"], [data-page="index"] *) {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: 18px;
    }

    .toowie-meaning-logo:where([data-page="index"], [data-page="index"] *) {
      display: block;
      width: min(390px, 100%);
      max-width: 100%;
      height: auto;
    }

    .toowie-meaning-slide .toowie-inline-acronym:where([data-page="index"], [data-page="index"] *) {
      width: 100%;
      margin: 0;
    }

    .toowie-meaning-slide .toowie-inline-acronym-row:where([data-page="index"], [data-page="index"] *) {
      width: 100%;
      grid-template-columns: repeat(6, 56px);
      gap: 12px;
      justify-content: center;
      margin-inline: auto;
      margin-bottom: 18px;
    }

    .toowie-meaning-slide .toowie-inline-octagon:where([data-page="index"], [data-page="index"] *) {
      width: 56px;
      height: 56px;
      font-size: 1.16rem;
      box-shadow: 0 12px 28px rgba(0,0,0,.18);
    }

    .toowie-meaning-slide .toowie-inline-acronym-note:where([data-page="index"], [data-page="index"] *) {
      margin: 0 auto;
      text-align: center;
      max-width: 620px;
      color: #5d6d80;
      font-size: 1.06rem;
      line-height: 1.5;
      font-weight: 700;
    }

    .toowie-meaning-explanation:where([data-page="index"], [data-page="index"] *) {
      grid-area: explanation;
      min-width: 0;
      padding-left: clamp(28px, 4vw, 54px);
      border-left: 1px solid rgba(194,145,64,.32);
    }

    .toowie-meaning-explanation h3:where([data-page="index"], [data-page="index"] *) {
      margin: 0 0 16px;
      color: #c58e36;
      font-size: clamp(1.75rem, 2.5vw, 2.35rem);
      line-height: 1.08;
      letter-spacing: -.03em;
    }

    .toowie-meaning-explanation > p:where([data-page="index"], [data-page="index"] *) {
      margin: 0 0 22px;
      color: #5d6d80;
      font-size: 1rem;
      line-height: 1.65;
    }

    .toowie-meaning-explanation-list:where([data-page="index"], [data-page="index"] *) {
      display: grid;
      gap: 12px;
    }

    .toowie-meaning-explanation-item:where([data-page="index"], [data-page="index"] *) {
      padding: 13px 15px;
      border: 1px solid #eadfce;
      border-radius: 16px;
      background: #fffaf3;
    }

    .toowie-meaning-explanation-item strong:where([data-page="index"], [data-page="index"] *) {
      display: block;
      margin-bottom: 3px;
      color: #17334d;
      font-size: .96rem;
    }

    .toowie-meaning-explanation-item span:where([data-page="index"], [data-page="index"] *) {
      display: block;
      color: #6a7888;
      font-size: .9rem;
      line-height: 1.45;
    }

    .toowie-hover-item:hover .toowie-hover-tooltip:where([data-page="index"], [data-page="index"] *),
    .toowie-hover-item:focus-within .toowie-hover-tooltip:where([data-page="index"], [data-page="index"] *) {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }

    .toowie-identity-hero.modern-capability-layout > .shell.hero-grid:where([data-page="index"], [data-page="index"] *) {
      gap: 42px !important;
      align-items: center !important;
    }

    .toowie-identity-hero .hero-copy:where([data-page="index"], [data-page="index"] *) {
      max-width: 680px !important;
    }

    .toowie-identity-hero .capability-visual:where([data-page="index"], [data-page="index"] *) {
      width: auto !important;
      max-width: none !important;
      margin-left: 0 !important;
      margin-right: -180px !important;
      padding-top: 0 !important;
    }

    .toowie-identity-hero .capability-browser:where([data-page="index"], [data-page="index"] *) {
      width: 112% !important;
      max-width: none !important;
    }

    .toowie-identity-hero.modern-capability-layout .hero-visual:where([data-page="index"], [data-page="index"] *) {
      display: block;
    }


    /* TOOWIE Philosophie: klare Einleitung + ruhige Markenfläche */
    .toowie-meaning-slide .capability-slide-content:where([data-page="index"], [data-page="index"] *) {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      min-height: 580px;
      padding: clamp(38px, 6vw, 76px) !important;
    }

    .toowie-meaning-slide .toowie-meaning-primary:where([data-page="index"], [data-page="index"] *) {
      width: 100%;
      min-height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .toowie-meaning-slide .toowie-meaning-logo-wrap:where([data-page="index"], [data-page="index"] *) {
      margin: 0;
    }

    .toowie-meaning-slide .toowie-meaning-logo:where([data-page="index"], [data-page="index"] *) {
      width: min(560px, 82%);
      max-height: 320px;
      object-fit: contain;
      filter: drop-shadow(0 18px 38px rgba(16, 48, 78, .12));
    }

    @media (max-width: 620px) {
      .toowie-identity-logo:where([data-page="index"], [data-page="index"] *) {
        width: min(160px, 50%);
        margin-bottom: 16px;
      }

      .toowie-inline-acronym-row:where([data-page="index"], [data-page="index"] *) {
        grid-template-columns: repeat(6, 38px);
        gap: 7px;
      }

      .toowie-inline-octagon:where([data-page="index"], [data-page="index"] *) {
        width: 38px;
        height: 38px;
        font-size: .9rem;
      }

      .toowie-inline-acronym-note:where([data-page="index"], [data-page="index"] *) {
        font-size: .92rem;
      }

      .toowie-hover-tooltip:where([data-page="index"], [data-page="index"] *) {
        font-size: .76rem;
        padding: 7px 9px;
      }

      .toowie-meaning-logo:where([data-page="index"], [data-page="index"] *),
      .toowie-meaning-slide .toowie-meaning-logo:where([data-page="index"], [data-page="index"] *) {
        width: min(340px, 84vw);
      }

      .toowie-meaning-slide .capability-slide-content:where([data-page="index"], [data-page="index"] *) {
        grid-template-columns: 1fr;
        grid-template-areas:
          "intro"
          "primary"
          "explanation";
        gap: 26px;
        padding: 26px 18px 34px;
      }

      .toowie-meaning-slide .toowie-inline-acronym-row:where([data-page="index"], [data-page="index"] *) {
        grid-template-columns: repeat(6, 42px);
        gap: 7px;
        margin-bottom: 14px;
      }

      .toowie-meaning-slide .toowie-inline-octagon:where([data-page="index"], [data-page="index"] *) {
        width: 42px;
        height: 42px;
        font-size: .94rem;
      }

      .toowie-meaning-slide .toowie-inline-acronym-note:where([data-page="index"], [data-page="index"] *) {
        font-size: .94rem;
      }

      .toowie-meaning-explanation:where([data-page="index"], [data-page="index"] *) {
        width: 100%;
        padding-left: 0;
        padding-top: 24px;
        border-left: 0;
        border-top: 1px solid rgba(194,145,64,.32);
        text-align: left;
      }
    }

    .toowie-identity-hero:where([data-page="index"], [data-page="index"] *) {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 12% 10%, rgba(198,154,87,.16), transparent 31%),
        radial-gradient(circle at 88% 88%, rgba(64,117,163,.16), transparent 34%),
        linear-gradient(145deg, #071b30 0%, #0c2a46 54%, #0a223a 100%);
    }

    .toowie-identity-hero .hero-copy:where([data-page="index"], [data-page="index"] *) {
      max-width: 680px;
    }

    .toowie-identity-hero .hero-visual:where([data-page="index"], [data-page="index"] *) {
      display: flex;
      align-items: stretch;
      justify-content: flex-end;
    }

    .toowie-acronym-panel:where([data-page="index"], [data-page="index"] *) {
      width: min(100%, 500px);
      padding: 18px 20px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 26px;
      background: rgba(255,255,255,.06);
      box-shadow: 0 18px 42px rgba(0,0,0,.14);
      backdrop-filter: blur(8px);
    }

    .toowie-acronym-list:where([data-page="index"], [data-page="index"] *) {
      list-style: none;
      margin: 0 0 18px;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(6, 58px);
      gap: 12px;
      width: max-content;
      max-width: 100%;
    }

    .toowie-acronym-item:where([data-page="index"], [data-page="index"] *) {
      padding: 0;
      display: block;
    }

    .toowie-acronym-item + .toowie-acronym-item:where([data-page="index"], [data-page="index"] *) {
      border-top: 0;
    }

    .toowie-acronym-octagon:where([data-page="index"], [data-page="index"] *) {
      width: 58px;
      height: 58px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
      background: var(--toowie-gold);
      color: #fff;
      font-size: 1.24rem;
      font-weight: 900;
      letter-spacing: -.03em;
      box-shadow: 0 14px 32px rgba(0,0,0,.16);
    }

    .toowie-meaning-grid:where([data-page="index"], [data-page="index"] *) {
      display: grid;
      gap: 12px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .toowie-meaning-card:where([data-page="index"], [data-page="index"] *) {
      padding: 14px 14px 12px;
      border-radius: 18px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.08);
      min-width: 0;
    }

    .toowie-acronym-line:where([data-page="index"], [data-page="index"] *) {
      display: block;
      color: #fff;
      font-size: 1rem;
      font-weight: 800;
      line-height: 1.2;
      margin-bottom: 6px;
    }

    .toowie-acronym-note:where([data-page="index"], [data-page="index"] *) {
      margin: 0;
      color: rgba(255,255,255,.72);
      font-size: .9rem;
      font-weight: 600;
      line-height: 1.45;
    }

    @media (max-width: 960px) {
      .toowie-identity-hero .hero-visual:where([data-page="index"], [data-page="index"] *) {
        justify-content: flex-start;
      }

      .toowie-acronym-panel:where([data-page="index"], [data-page="index"] *) {
        width: 100%;
      }

      .toowie-meaning-grid:where([data-page="index"], [data-page="index"] *) {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 620px) {
      .toowie-acronym-panel:where([data-page="index"], [data-page="index"] *) {
        padding: 16px;
      }

      .toowie-acronym-list:where([data-page="index"], [data-page="index"] *) {
        grid-template-columns: repeat(6, 40px);
        gap: 7px;
      }

      .toowie-acronym-octagon:where([data-page="index"], [data-page="index"] *) {
        width: 40px;
        height: 40px;
        font-size: 1rem;
      }
    }

    /* IT-Systemhaus Hero – gleicher visueller Rhythmus wie die Produkt-Heros */
    .it-systemhaus-hero .it-systemhaus-visual:where([data-page="index"], [data-page="index"] *) {
      position: relative;
      min-height: 520px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .it-systemhaus-hero .it-systemhaus-frame:where([data-page="index"], [data-page="index"] *) {
      width: min(100%, 560px);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 22px;
      background: rgba(255,255,255,.06);
      box-shadow: 0 28px 70px rgba(0,0,0,.28);
      backdrop-filter: blur(10px);
    }

    .it-systemhaus-hero .it-systemhaus-frame-bar:where([data-page="index"], [data-page="index"] *) {
      min-height: 48px;
      padding: 0 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      border-bottom: 1px solid rgba(255,255,255,.10);
      color: rgba(255,255,255,.72);
      font-size: .82rem;
      font-weight: 700;
    }

    .it-systemhaus-hero .it-systemhaus-frame-label:where([data-page="index"], [data-page="index"] *) {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .it-systemhaus-hero .it-systemhaus-status:where([data-page="index"], [data-page="index"] *) {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #fff;
      white-space: nowrap;
    }

    .it-systemhaus-hero .it-systemhaus-status:where([data-page="index"], [data-page="index"] *)::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--toowie-gold);
      box-shadow: 0 0 0 4px rgba(194,145,64,.12);
    }

    .it-systemhaus-hero .it-systemhaus-image-wrap:where([data-page="index"], [data-page="index"] *) {
      min-height: 440px;
      padding: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
    }

    .it-systemhaus-hero .it-systemhaus-image-wrap img:where([data-page="index"], [data-page="index"] *) {
      display: block;
      width: min(100%, 420px);
      height: auto;
      border-radius: 18px;
      box-shadow: 0 20px 48px rgba(0,0,0,.22);
    }

    .it-systemhaus-hero .it-systemhaus-mini:where([data-page="index"], [data-page="index"] *) {
      position: absolute;
      padding: 12px 16px;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 14px;
      background: rgba(9,30,70,.88);
      color: #fff;
      box-shadow: 0 16px 36px rgba(0,0,0,.22);
      backdrop-filter: blur(10px);
    }

    .it-systemhaus-hero .it-systemhaus-mini strong:where([data-page="index"], [data-page="index"] *) {
      display: block;
      color: #fff;
      font-size: .86rem;
      line-height: 1.2;
    }

    .it-systemhaus-hero .it-systemhaus-mini span:where([data-page="index"], [data-page="index"] *) {
      display: block;
      margin-top: 3px;
      color: rgba(255,255,255,.65);
      font-size: .75rem;
    }

    .it-systemhaus-hero .it-systemhaus-mini-one:where([data-page="index"], [data-page="index"] *) {
      left: -18px;
      top: 100px;
    }

    .it-systemhaus-hero .it-systemhaus-mini-two:where([data-page="index"], [data-page="index"] *) {
      right: -20px;
      bottom: 100px;
    }


    @media (max-width: 900px) {
      .it-systemhaus-hero .it-systemhaus-visual:where([data-page="index"], [data-page="index"] *) {
        min-height: 0;
        padding-top: 20px;
      }

      .it-systemhaus-hero .it-systemhaus-mini:where([data-page="index"], [data-page="index"] *) {
        display: none;
      }

      .it-systemhaus-hero .it-systemhaus-image-wrap:where([data-page="index"], [data-page="index"] *) {
        min-height: 340px;
        padding: 26px;
      }
    }

    /* Scrollbare Funktionsansicht für die blauen Bereiche 2 und 3 */
    .capability-visual:where([data-page="index"], [data-page="index"] *) {
      position: relative;
      width: 820px;
      max-width: none;
      margin-right: -260px;
      margin-left: -10px;
    }

    .capability-browser:where([data-page="index"], [data-page="index"] *) {
      width: 820px;
      max-width: none;
      transform: perspective(1600px) rotateY(-2.5deg) rotateX(.5deg);
      transform-origin: center left;
      box-shadow: 0 36px 90px rgba(0,0,0,.32);
    }

    .capability-scroll-area:where([data-page="index"], [data-page="index"] *) {
      height: 540px;
      overflow-y: auto;
      overscroll-behavior: contain;
      scroll-snap-type: y mandatory;
      scrollbar-width: thin;
      scrollbar-color: #c29140 #edf1f5;
      background: #f4f7fa;
    }

    .capability-scroll-area:where([data-page="index"], [data-page="index"] *)::-webkit-scrollbar {
      width: 9px;
    }

    .capability-scroll-area:where([data-page="index"], [data-page="index"] *)::-webkit-scrollbar-track {
      background: #edf1f5;
    }

    .capability-scroll-area:where([data-page="index"], [data-page="index"] *)::-webkit-scrollbar-thumb {
      background: #c29140;
      border: 2px solid #edf1f5;
      border-radius: 999px;
    }

    .capability-slide:where([data-page="index"], [data-page="index"] *) {
      min-height: 540px;
      padding: 30px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      border-bottom: 1px solid #e4eaf0;
      background: linear-gradient(180deg, #fff 0%, #f7f9fb 100%);
    }

    .capability-slide:last-child:where([data-page="index"], [data-page="index"] *) {
      border-bottom: 0;
    }

    .capability-slide-kicker:where([data-page="index"], [data-page="index"] *) {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      gap: 7px;
      margin-bottom: 6px;
      color: #9a6b24;
      font-size: 10px;
      font-weight: 950;
      letter-spacing: .11em;
      text-transform: uppercase;
    }

    .capability-slide-kicker:where([data-page="index"], [data-page="index"] *)::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #c29140;
      box-shadow: 0 0 0 4px rgba(194,145,64,.12);
    }

    .capability-slide h3:where([data-page="index"], [data-page="index"] *) {
      margin: 0;
      color: #0f2942;
      font-size: clamp(1.3rem, 2vw, 1.75rem);
      line-height: 1.12;
      letter-spacing: -.025em;
    }

    .capability-slide p:where([data-page="index"], [data-page="index"] *) {
      max-width: 520px;
      margin: 8px 0 18px;
      color: #667789;
      font-size: .92rem;
      line-height: 1.55;
    }

    .capability-slide-image:where([data-page="index"], [data-page="index"] *) {
      min-height: 325px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 1px solid #e2e8ef;
      border-radius: 16px;
      background: #eef2f5;
      box-shadow: 0 18px 42px rgba(15,41,66,.12);
    }

    .capability-slide-image img:where([data-page="index"], [data-page="index"] *) {
      width: 100%;
      height: 325px;
      object-fit: cover;
    }

    .capability-slide-image.contain img:where([data-page="index"], [data-page="index"] *) {
      padding: 12px;
      object-fit: contain;
      background: #fff;
    }

    .capability-scroll-hint:where([data-page="index"], [data-page="index"] *) {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 8px;
      border-radius: 999px;
      background: #f7f0e2;
      color: #8a642d;
      font-size: 9px;
      font-weight: 900;
      white-space: nowrap;
    }

    .capability-scroll-hint:where([data-page="index"], [data-page="index"] *)::after {
      content: "↓";
      font-size: 11px;
      line-height: 1;
    }

    /* Funktions-Buttons wie beim Kaltakquise-Bereich */
    .capability-fixed-cards:where([data-page="index"], [data-page="index"] *) {
      position: absolute;
      inset: 0;
      z-index: 6;
      pointer-events: none;
    }

    .capability-jump-card:where([data-page="index"], [data-page="index"] *) {
      position: absolute;
      pointer-events: auto;
      z-index: 5;
      cursor: pointer;
      user-select: none;
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .capability-jump-card:hover:where([data-page="index"], [data-page="index"] *),
    .capability-jump-card:focus-visible:where([data-page="index"], [data-page="index"] *),
    .capability-jump-card.is-active:where([data-page="index"], [data-page="index"] *) {
      transform: translateY(-3px);
      border-color: rgba(194,145,64,.78);
      box-shadow: 0 20px 42px rgba(0,0,0,.28);
      outline: none;
    }

    .capability-card-one:where([data-page="index"], [data-page="index"] *) { left: -54px; top: 86px; }
    .capability-card-two:where([data-page="index"], [data-page="index"] *) { right: -34px; top: 174px; }
    .capability-card-three:where([data-page="index"], [data-page="index"] *) { left: -42px; bottom: 136px; }
    .capability-card-four:where([data-page="index"], [data-page="index"] *) { right: -26px; bottom: 54px; }

    @media (max-width: 1450px) {
      .capability-visual:where([data-page="index"], [data-page="index"] *) {
        width: 740px;
        margin-right: -170px;
      }

      .capability-browser:where([data-page="index"], [data-page="index"] *) {
        width: 740px;
      }
    }

    @media (max-width: 1200px) {
      .capability-visual:where([data-page="index"], [data-page="index"] *) {
        width: 100%;
        max-width: 760px;
        margin-right: 0;
        margin-left: 0;
      }

      .capability-browser:where([data-page="index"], [data-page="index"] *) {
        width: 100%;
        max-width: 760px;
      }

      .capability-jump-card:where([data-page="index"], [data-page="index"] *) {
        display: none;
      }
    }

    @media (max-width: 900px) {
      .capability-visual:where([data-page="index"], [data-page="index"] *) {
        padding-top: 20px;
      }

      .capability-browser:where([data-page="index"], [data-page="index"] *) {
        transform: none;
      }

      .capability-scroll-area:where([data-page="index"], [data-page="index"] *),
      .capability-slide:where([data-page="index"], [data-page="index"] *) {
        min-height: 440px;
        height: 440px;
      }

      .capability-slide:where([data-page="index"], [data-page="index"] *) {
        padding: 22px;
      }

      .capability-slide-image:where([data-page="index"], [data-page="index"] *) {
        min-height: 235px;
      }

      .capability-slide-image img:where([data-page="index"], [data-page="index"] *) {
        height: 235px;
      }
    }

    @media (max-width: 520px) {
      .capability-scroll-area:where([data-page="index"], [data-page="index"] *),
      .capability-slide:where([data-page="index"], [data-page="index"] *) {
        min-height: 410px;
        height: 410px;
      }

      .capability-slide:where([data-page="index"], [data-page="index"] *) {
        padding: 16px;
      }

      .capability-slide p:where([data-page="index"], [data-page="index"] *) {
        font-size: .84rem;
        margin-bottom: 14px;
      }

      .capability-slide-image:where([data-page="index"], [data-page="index"] *) {
        min-height: 210px;
      }

      .capability-slide-image img:where([data-page="index"], [data-page="index"] *) {
        height: 210px;
      }
    }

    /* IT-Bereich: gleiche Fensterproportionen wie beim Akquise Manager */
    .modern-capability-layout:where([data-page="index"], [data-page="index"] *) {
      padding: 92px 0 90px !important;
    }

    .modern-capability-layout > .shell.hero-grid:where([data-page="index"], [data-page="index"] *) {
      grid-template-columns: .82fr 1.18fr !important;
      gap: 42px !important;
      align-items: center !important;
    }

    .modern-capability-layout .hero-copy:where([data-page="index"], [data-page="index"] *) {
      width: 100% !important;
      max-width: none !important;
    }

    .modern-capability-layout .capability-visual:where([data-page="index"], [data-page="index"] *) {
      width: auto !important;
      max-width: none !important;
      margin-left: 0 !important;
      margin-right: -180px !important;
      padding-top: 0 !important;
      position: relative !important;
    }

    .modern-capability-layout .capability-browser:where([data-page="index"], [data-page="index"] *) {
      width: 112% !important;
      max-width: none !important;
      transform: none !important;
      transform-origin: center left;
      box-shadow: 0 36px 90px rgba(0,0,0,.24);
    }

    .modern-capability-layout .capability-scroll-hint:where([data-page="index"], [data-page="index"] *) {
      background: #f7f0e2;
      color: #8a642d;
    }

    .modern-capability-layout .capability-scroll-area:where([data-page="index"], [data-page="index"] *) {
      height: 580px;
      padding: 0;
      overflow-y: auto;
      overscroll-behavior-y: auto;
      scroll-behavior: auto;
      scroll-snap-type: none;
      scrollbar-width: thin;
      scrollbar-color: #c29140 #f2eadf;
      scrollbar-gutter: stable;
      touch-action: pan-y;
      -webkit-overflow-scrolling: touch;
      background: #fff;
    }

    .modern-capability-layout .capability-scroll-area:where([data-page="index"], [data-page="index"] *)::-webkit-scrollbar-track {
      background: #f2eadf;
    }

    .modern-capability-layout .capability-scroll-area:where([data-page="index"], [data-page="index"] *)::-webkit-scrollbar-thumb {
      background: #c29140;
      border: 2px solid #f2eadf;
      border-radius: 999px;
    }

    .modern-capability-layout .capability-slide:where([data-page="index"], [data-page="index"] *) {
      height: 580px;
      min-height: 580px;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
      grid-template-rows: 580px;
      grid-template-areas: "image info";
      border: 0;
      border-bottom: 1px solid #eadfce;
      border-radius: 0;
      overflow: hidden;
      background: #fff;
      box-shadow: none;
      scroll-snap-align: none;
      scroll-snap-stop: normal;
    }

    .modern-capability-layout .capability-slide:last-child:where([data-page="index"], [data-page="index"] *) {
      border-bottom: 0;
    }

    .modern-capability-layout .capability-slide:where([data-page="index"], [data-page="index"] *)::after {
      display: none;
    }

    .modern-capability-layout .capability-slide-panel:where([data-page="index"], [data-page="index"] *) {
      grid-area: info;
      position: relative;
      min-height: 0;
      max-width: none;
      padding: 54px 34px 38px;
      display: block;
      background: linear-gradient(180deg, #fffdf9 0%, #fbf7f0 100%);
      border-left: 1px solid rgba(194,145,64,.24);
      box-shadow: inset 4px 0 0 rgba(194,145,64,.06);
    }

    .modern-capability-layout .capability-slide-title-row:where([data-page="index"], [data-page="index"] *) {
      display: flex;
      align-items: center;
      gap: 16px;
      margin: 0 0 20px;
    }

    .modern-capability-layout .capability-slide-icon:where([data-page="index"], [data-page="index"] *) {
      position: static;
      flex: 0 0 58px;
      width: 58px;
      height: 58px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1.5px solid rgba(194,145,64,.48);
      border-radius: 50%;
      color: #b77918;
      background: #fffdf8;
      font-size: 1.38rem;
      box-shadow: 0 7px 18px rgba(194,145,64,.10);
    }

    .modern-capability-layout .capability-slide-content:where([data-page="index"], [data-page="index"] *) {
      width: 100%;
      min-width: 0;
      padding-top: 0;
      padding-right: 0;
      padding-bottom: 86px;
      display: flex;
      flex-direction: column;
      opacity: 1 !important;
      filter: none !important;
      text-shadow: none !important;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .modern-capability-layout .capability-slide-content:where([data-page="index"], [data-page="index"] *),
    .modern-capability-layout .capability-slide-content *:where([data-page="index"], [data-page="index"] *) {
      opacity: 1 !important;
    }

    .modern-capability-layout .capability-slide-kicker:where([data-page="index"], [data-page="index"] *) {
      display: none;
    }

    .modern-capability-layout .capability-slide h3:where([data-page="index"], [data-page="index"] *) {
      margin: 0;
      color: #c29140;
      font-size: clamp(1.72rem, 2.25vw, 2.12rem);
      font-weight: 800;
      line-height: 1.08;
      letter-spacing: -.035em;
      position: relative;
      padding-bottom: 14px;
      flex: 1 1 auto;
    }

    .modern-capability-layout .capability-slide h3:where([data-page="index"], [data-page="index"] *)::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 48px;
      height: 3px;
      border-radius: 999px;
      background: #c29140;
    }

    .modern-capability-layout .capability-slide-quote:where([data-page="index"], [data-page="index"] *) {
      margin: 0 0 18px;
      color: #2d2418;
      font-size: 1.04rem;
      font-weight: 600;
      line-height: 1.55;
      font-style: italic;
    }

    .modern-capability-layout .capability-slide-summary:where([data-page="index"], [data-page="index"] *) {
      max-width: none;
      margin: 0 0 18px;
      color: #17364f;
      font-size: 1.04rem;
      font-weight: 500;
      line-height: 1.68;
      letter-spacing: 0;
    }

    .modern-capability-layout .capability-slide-provider:where([data-page="index"], [data-page="index"] *) {
      margin-top: 0;
      padding: 0;
      width: fit-content;
      border: 0;
      border-radius: 0;
      background: none;
      color: #536575;
      font-size: .88rem;
      font-weight: 600;
    }

    .modern-capability-layout .capability-slide-provider span:where([data-page="index"], [data-page="index"] *) {
      color: #253a4d;
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0;
      font-size: inherit;
    }

    .modern-capability-layout .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *) {
      display: grid;
      gap: 10px;
      margin: 0 0 18px;
      padding: 0;
      list-style: none;
    }

    .modern-capability-layout .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *) {
      display: grid;
      grid-template-columns: 18px minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      padding: 10px 12px;
      border: 1px solid rgba(194,145,64,.16);
      border-radius: 14px;
      background: rgba(255,255,255,.72);
    }

    .modern-capability-layout .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before {
      content: "";
      width: 8px;
      height: 8px;
      margin-top: 7px;
      border-radius: 50%;
      background: #c29140;
      box-shadow: 0 0 0 5px rgba(194,145,64,.12);
    }

    .modern-capability-layout .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *) {
      display: block;
      margin: 0 0 3px;
      color: #8f621d;
      font-size: .90rem;
      font-weight: 800;
      line-height: 1.35;
    }

    .modern-capability-layout .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *) {
      display: block;
      color: #4d6174;
      font-size: .83rem;
      font-weight: 500;
      line-height: 1.45;
    }

    .modern-capability-layout .capability-slide-cta:where([data-page="index"], [data-page="index"] *) {
      position: absolute;
      right: 34px;
      bottom: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      padding: 10px 16px;
      border: 1px solid rgba(194,145,64,.45);
      border-radius: 999px;
      background: rgba(194,145,64,.10);
      color: #8a642d;
      font-size: .84rem;
      font-weight: 700;
      line-height: 1;
      text-decoration: none;
      transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    }

    .modern-capability-layout .capability-slide-cta:hover:where([data-page="index"], [data-page="index"] *),
    .modern-capability-layout .capability-slide-cta:focus-visible:where([data-page="index"], [data-page="index"] *) {
      background: rgba(194,145,64,.16);
      border-color: rgba(194,145,64,.7);
      box-shadow: 0 10px 24px rgba(194,145,64,.14);
      transform: translateY(-1px);
      outline: none;
    }

    .modern-capability-layout .capability-slide-image:where([data-page="index"], [data-page="index"] *) {
      grid-area: image;
      position: relative;
      inset: auto;
      width: 100%;
      height: 580px;
      min-height: 580px;
      border: 0;
      border-radius: 0;
      overflow: hidden;
      background: #f7f1e8;
      box-shadow: none;
    }

    .modern-capability-layout .capability-slide-image img:where([data-page="index"], [data-page="index"] *) {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      filter: none;
      transform: none;
    }

    .modern-capability-layout .capability-slide-image.contain:where([data-page="index"], [data-page="index"] *) {
      display: grid;
      place-items: center;
      background: linear-gradient(180deg, #fbf6ef 0%, #f2e6d6 100%);
    }

    .modern-capability-layout .capability-slide-image.contain img:where([data-page="index"], [data-page="index"] *) {
      width: min(78%, 420px);
      height: auto;
      object-fit: contain;
      object-position: center;
      padding: 0;
      filter: none;
    }

    @media (max-width: 900px) {
      .modern-capability-layout .capability-slide:where([data-page="index"], [data-page="index"] *) {
        grid-template-columns: 1fr;
        grid-template-rows: 330px 250px;
        grid-template-areas:
          "image"
          "info";
      }

      .modern-capability-layout .capability-slide-image:where([data-page="index"], [data-page="index"] *) {
        height: 330px;
        min-height: 330px;
      }

      .modern-capability-layout .capability-slide-panel:where([data-page="index"], [data-page="index"] *) {
        padding: 24px;
        border-left: 0;
        border-top: 1px solid #eee5d8;
      }

      .modern-capability-layout .capability-slide-title-row:where([data-page="index"], [data-page="index"] *) {
        gap: 14px;
        margin-bottom: 16px;
      }

      .modern-capability-layout .capability-slide-content:where([data-page="index"], [data-page="index"] *) {
        padding-top: 0;
        padding-bottom: 74px;
      }

      .modern-capability-layout .capability-slide h3:where([data-page="index"], [data-page="index"] *) {
        margin-bottom: 14px;
        padding-bottom: 10px;
      }

      .modern-capability-layout .capability-slide-quote:where([data-page="index"], [data-page="index"] *) {
        margin-bottom: 10px;
      }

      .modern-capability-layout .capability-slide-provider:where([data-page="index"], [data-page="index"] *) {
        margin-top: 0;
      }

      .modern-capability-layout .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *) {
        gap: 8px;
        margin-bottom: 14px;
      }

      .modern-capability-layout .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *) {
        padding: 9px 10px;
      }

      .modern-capability-layout .capability-slide-cta:where([data-page="index"], [data-page="index"] *) {
        top: auto;
        bottom: 18px;
      }
    }

    @media (max-width: 1180px) and (min-width: 761px) {
      .modern-capability-layout .capability-browser:where([data-page="index"], [data-page="index"] *) {
        width: 106% !important;
      }

      .modern-capability-layout .capability-visual:where([data-page="index"], [data-page="index"] *) {
        margin-right: -120px !important;
      }

      .modern-capability-layout .capability-scroll-area:where([data-page="index"], [data-page="index"] *),
      .modern-capability-layout .capability-slide:where([data-page="index"], [data-page="index"] *) {
        height: 540px;
        min-height: 540px;
      }

      .modern-capability-layout .capability-slide:where([data-page="index"], [data-page="index"] *) {
        grid-template-rows: 230px 310px;
      }

      .modern-capability-layout .capability-slide-image:where([data-page="index"], [data-page="index"] *) {
        height: 310px;
        min-height: 310px;
      }
    }

    @media (max-width: 760px) {
      .modern-capability-layout:where([data-page="index"], [data-page="index"] *) {
        padding-top: 72px !important;
      }

      .modern-capability-layout > .shell.hero-grid:where([data-page="index"], [data-page="index"] *) {
        grid-template-columns: 1fr !important;
      }

      .modern-capability-layout .capability-browser:where([data-page="index"], [data-page="index"] *) {
        width: 100% !important;
        transform: none;
      }

      .modern-capability-layout .capability-visual:where([data-page="index"], [data-page="index"] *) {
        margin-right: -72px !important;
      }

      .modern-capability-layout .capability-scroll-area:where([data-page="index"], [data-page="index"] *),
      .modern-capability-layout .capability-slide:where([data-page="index"], [data-page="index"] *) {
        height: 520px;
        min-height: 520px;
      }

      .modern-capability-layout .capability-slide:where([data-page="index"], [data-page="index"] *) {
        grid-template-rows: 220px 300px;
      }

      .modern-capability-layout .capability-slide-panel:where([data-page="index"], [data-page="index"] *) {
        padding: 22px 22px 18px;
      }

      .modern-capability-layout .capability-slide-title-row:where([data-page="index"], [data-page="index"] *) {
        gap: 12px;
        margin-bottom: 14px;
      }

      .modern-capability-layout .capability-slide-content:where([data-page="index"], [data-page="index"] *) {
        padding-top: 0;
        padding-bottom: 70px;
      }

      .modern-capability-layout .capability-slide-icon:where([data-page="index"], [data-page="index"] *) {
        flex-basis: 54px;
        width: 54px;
        height: 54px;
        font-size: 1.25rem;
      }

      .modern-capability-layout .capability-slide-cta:where([data-page="index"], [data-page="index"] *) {
        right: 22px;
        bottom: 18px;
      }

      .modern-capability-layout .capability-slide-image:where([data-page="index"], [data-page="index"] *) {
        height: 300px;
        min-height: 300px;
      }
    }

    @media (max-width: 520px) {
      .modern-capability-layout .capability-visual:where([data-page="index"], [data-page="index"] *) {
        margin-right: 0 !important;
      }

      .modern-capability-layout .capability-scroll-area:where([data-page="index"], [data-page="index"] *),
      .modern-capability-layout .capability-slide:where([data-page="index"], [data-page="index"] *) {
        height: 500px;
        min-height: 500px;
      }

      .modern-capability-layout .capability-slide:where([data-page="index"], [data-page="index"] *) {
        grid-template-rows: 220px 280px;
      }

      .modern-capability-layout .capability-slide-panel:where([data-page="index"], [data-page="index"] *) {
        padding: 18px;
      }

      .modern-capability-layout .capability-slide-title-row:where([data-page="index"], [data-page="index"] *) {
        gap: 10px;
        margin-bottom: 12px;
      }

      .modern-capability-layout .capability-slide-content:where([data-page="index"], [data-page="index"] *) {
        padding-top: 0;
      }

      .modern-capability-layout .capability-slide-icon:where([data-page="index"], [data-page="index"] *) {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
        font-size: 1.05rem;
      }

      .modern-capability-layout .capability-slide h3:where([data-page="index"], [data-page="index"] *) {
        font-size: 1.28rem;
      }

      .modern-capability-layout .capability-slide-quote:where([data-page="index"], [data-page="index"] *),
      .modern-capability-layout .capability-slide-summary:where([data-page="index"], [data-page="index"] *) {
        font-size: .84rem;
      }

      .modern-capability-layout .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *) {
        gap: 7px;
        margin-bottom: 12px;
      }

      .modern-capability-layout .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *) {
        grid-template-columns: 14px minmax(0, 1fr);
        gap: 9px;
        padding: 8px 9px;
        border-radius: 12px;
      }

      .modern-capability-layout .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before {
        width: 7px;
        height: 7px;
        margin-top: 6px;
      }

      .modern-capability-layout .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *) {
        font-size: .77rem;
      }

      .modern-capability-layout .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *) {
        font-size: .72rem;
      }

      .modern-capability-layout .capability-slide-provider:where([data-page="index"], [data-page="index"] *) {
        font-size: .76rem;
      }

      .modern-capability-layout .capability-slide-image:where([data-page="index"], [data-page="index"] *) {
        height: 280px;
        min-height: 280px;
      }
    }


    /* TOOWIE: erster Philosophie-Slide – kompakter, klarer und hochwertiger */
    .toowie-identity-hero .toowie-meaning-slide .capability-slide-panel:where([data-page="index"], [data-page="index"] *) {
      background:
        radial-gradient(circle at 8% 12%, rgba(194,145,64,.11), transparent 28%),
        radial-gradient(circle at 92% 86%, rgba(23,51,77,.08), transparent 30%),
        linear-gradient(145deg, #fffdf9 0%, #f9f3e9 100%);
    }

    .toowie-identity-hero .toowie-meaning-slide .capability-slide-content:where([data-page="index"], [data-page="index"] *) {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        "intro"
        "primary"
        "explanation";
      grid-template-rows: auto auto 1fr;
      align-content: center;
      gap: 18px;
      padding: 30px 40px 32px;
    }

    .toowie-identity-hero .toowie-meaning-intro:where([data-page="index"], [data-page="index"] *) {
      position: relative;
      margin: 0;
      padding-top: 21px;
      text-align: left;
    }

    .toowie-identity-hero .toowie-meaning-intro:where([data-page="index"], [data-page="index"] *)::before {
      content: "TOOWIE · WAS HINTER DEM NAMEN STECKT";
      position: absolute;
      top: 0;
      left: 0;
      color: #9a6c28;
      font-size: .69rem;
      font-weight: 850;
      letter-spacing: .16em;
    }

    .toowie-identity-hero .toowie-meaning-intro h3:where([data-page="index"], [data-page="index"] *) {
      max-width: 760px;
      margin: 0;
      padding: 0;
      color: #17334d;
      font-size: clamp(1.55rem, 2.2vw, 2.08rem);
      font-weight: 850;
      line-height: 1.12;
      letter-spacing: -.035em;
    }

    .toowie-identity-hero .toowie-meaning-intro h3:where([data-page="index"], [data-page="index"] *)::after {
      display: none;
    }

    .toowie-identity-hero .toowie-meaning-primary:where([data-page="index"], [data-page="index"] *) {
      position: relative;
      grid-area: primary;
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(210px, .82fr) minmax(330px, 1.18fr);
      align-items: center;
      gap: 28px;
      padding: 20px 24px;
      overflow: hidden;
      text-align: left;
      border: 1px solid rgba(194,145,64,.25);
      border-radius: 24px;
      background: rgba(255,255,255,.84);
      box-shadow: 0 18px 42px rgba(23,51,77,.08);
    }

    .toowie-identity-hero .toowie-meaning-primary:where([data-page="index"], [data-page="index"] *)::before {
      content: "";
      position: absolute;
      width: 170px;
      height: 170px;
      right: -80px;
      top: -92px;
      border: 1px solid rgba(194,145,64,.20);
      background: rgba(194,145,64,.035);
      clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
      transform: rotate(10deg);
      pointer-events: none;
    }

    .toowie-identity-hero .toowie-meaning-logo-wrap:where([data-page="index"], [data-page="index"] *) {
      position: relative;
      width: 100%;
      margin: 0;
      padding-right: 28px;
      justify-content: flex-start;
      border-right: 1px solid rgba(194,145,64,.22);
    }

    .toowie-identity-hero .toowie-meaning-logo:where([data-page="index"], [data-page="index"] *) {
      width: min(290px, 100%);
      filter: drop-shadow(0 9px 18px rgba(23,51,77,.10));
    }

    .toowie-identity-hero .toowie-meaning-slide .toowie-inline-acronym:where([data-page="index"], [data-page="index"] *) {
      position: relative;
      z-index: 1;
      width: 100%;
      margin: 0;
    }

    .toowie-identity-hero .toowie-meaning-slide .toowie-inline-acronym-row:where([data-page="index"], [data-page="index"] *) {
      position: relative;
      width: max-content;
      max-width: 100%;
      grid-template-columns: repeat(6, 50px);
      gap: 9px;
      justify-content: start;
      margin: 0 0 12px;
    }

    .toowie-identity-hero .toowie-meaning-slide .toowie-inline-acronym-row:where([data-page="index"], [data-page="index"] *)::before {
      content: "";
      position: absolute;
      left: 10px;
      right: 10px;
      top: 50%;
      height: 1px;
      background: rgba(194,145,64,.22);
      transform: translateY(-50%);
      z-index: 0;
    }

    .toowie-identity-hero .toowie-meaning-slide .toowie-hover-item:where([data-page="index"], [data-page="index"] *) {
      z-index: 1;
    }

    .toowie-identity-hero .toowie-meaning-slide .toowie-inline-octagon:where([data-page="index"], [data-page="index"] *) {
      width: 50px;
      height: 50px;
      background: linear-gradient(145deg, #c99a50 0%, #b67a24 100%);
      border: 1px solid rgba(255,255,255,.34);
      font-size: 1.05rem;
      box-shadow: 0 9px 20px rgba(153,103,30,.18);
    }

    .toowie-identity-hero .toowie-meaning-slide .toowie-inline-acronym-note:where([data-page="index"], [data-page="index"] *) {
      max-width: 480px;
      margin: 0;
      text-align: left;
      color: #5d6d80;
      font-size: .91rem;
      font-weight: 650;
      line-height: 1.5;
    }

    .toowie-identity-hero .toowie-meaning-explanation:where([data-page="index"], [data-page="index"] *) {
      grid-area: explanation;
      min-width: 0;
      padding: 0;
      border: 0;
    }

    .toowie-identity-hero .toowie-meaning-explanation > p:where([data-page="index"], [data-page="index"] *) {
      max-width: 850px;
      margin: 0 0 13px;
      color: #536577;
      font-size: .92rem;
      line-height: 1.52;
    }

    .toowie-identity-hero .toowie-meaning-explanation-list:where([data-page="index"], [data-page="index"] *) {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .toowie-identity-hero .toowie-meaning-explanation-item:where([data-page="index"], [data-page="index"] *) {
      position: relative;
      min-height: 92px;
      padding: 14px 14px 13px 46px;
      overflow: hidden;
      border: 1px solid rgba(194,145,64,.18);
      border-radius: 16px;
      background: rgba(255,255,255,.72);
      box-shadow: none;
    }

    .toowie-identity-hero .toowie-meaning-explanation-item:where([data-page="index"], [data-page="index"] *)::before {
      position: absolute;
      left: 14px;
      top: 15px;
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(194,145,64,.35);
      background: rgba(194,145,64,.09);
      color: #9a6c28;
      clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
      font-size: .58rem;
      font-weight: 900;
      line-height: 1;
    }

    .toowie-identity-hero .toowie-meaning-explanation-item:nth-child(1):where([data-page="index"], [data-page="index"] *)::before { content: "T"; }
    .toowie-identity-hero .toowie-meaning-explanation-item:nth-child(2):where([data-page="index"], [data-page="index"] *)::before { content: "O"; }
    .toowie-identity-hero .toowie-meaning-explanation-item:nth-child(3):where([data-page="index"], [data-page="index"] *)::before { content: "IE"; font-size: .52rem; }

    .toowie-identity-hero .toowie-meaning-explanation-item strong:where([data-page="index"], [data-page="index"] *) {
      margin-bottom: 4px;
      color: #17334d;
      font-size: .91rem;
      line-height: 1.25;
    }

    .toowie-identity-hero .toowie-meaning-explanation-item span:where([data-page="index"], [data-page="index"] *) {
      color: #667687;
      font-size: .79rem;
      line-height: 1.38;
    }

    @media (max-width: 1180px) {
      .toowie-identity-hero .toowie-meaning-slide .capability-slide-content:where([data-page="index"], [data-page="index"] *) {
        gap: 14px;
        padding: 24px 28px 26px;
      }

      .toowie-identity-hero .toowie-meaning-primary:where([data-page="index"], [data-page="index"] *) {
        grid-template-columns: minmax(180px, .75fr) minmax(290px, 1.25fr);
        gap: 20px;
        padding: 18px 20px;
      }

      .toowie-identity-hero .toowie-meaning-logo-wrap:where([data-page="index"], [data-page="index"] *) {
        padding-right: 20px;
      }

      .toowie-identity-hero .toowie-meaning-slide .toowie-inline-acronym-row:where([data-page="index"], [data-page="index"] *) {
        grid-template-columns: repeat(6, 43px);
        gap: 7px;
      }

      .toowie-identity-hero .toowie-meaning-slide .toowie-inline-octagon:where([data-page="index"], [data-page="index"] *) {
        width: 43px;
        height: 43px;
        font-size: .94rem;
      }

      .toowie-identity-hero .toowie-meaning-explanation-item:where([data-page="index"], [data-page="index"] *) {
        min-height: 88px;
        padding: 12px 11px 11px 41px;
      }

      .toowie-identity-hero .toowie-meaning-explanation-item:where([data-page="index"], [data-page="index"] *)::before {
        left: 11px;
        top: 13px;
      }
    }

    @media (max-width: 820px) {
      .toowie-identity-hero .toowie-meaning-slide:where([data-page="index"], [data-page="index"] *) {
        height: 620px !important;
        min-height: 620px !important;
        grid-template-rows: 620px !important;
      }

      .toowie-identity-hero .toowie-meaning-slide .capability-slide-panel:where([data-page="index"], [data-page="index"] *) {
        min-height: 620px;
      }

      .toowie-identity-hero .toowie-meaning-slide .capability-slide-content:where([data-page="index"], [data-page="index"] *) {
        align-content: start;
        gap: 15px;
        padding: 24px 22px 28px;
      }

      .toowie-identity-hero .toowie-meaning-primary:where([data-page="index"], [data-page="index"] *) {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 18px;
        text-align: center;
      }

      .toowie-identity-hero .toowie-meaning-logo-wrap:where([data-page="index"], [data-page="index"] *) {
        justify-content: center;
        padding: 0 0 14px;
        border-right: 0;
        border-bottom: 1px solid rgba(194,145,64,.20);
      }

      .toowie-identity-hero .toowie-meaning-logo:where([data-page="index"], [data-page="index"] *) {
        width: min(250px, 72vw);
      }

      .toowie-identity-hero .toowie-meaning-slide .toowie-inline-acronym-row:where([data-page="index"], [data-page="index"] *) {
        justify-content: center;
        margin-inline: auto;
      }

      .toowie-identity-hero .toowie-meaning-slide .toowie-inline-acronym-note:where([data-page="index"], [data-page="index"] *) {
        margin-inline: auto;
        text-align: center;
      }

      .toowie-identity-hero .toowie-meaning-explanation-list:where([data-page="index"], [data-page="index"] *) {
        grid-template-columns: 1fr 1fr 1fr;
      }
    }

    @media (max-width: 560px) {
      .toowie-identity-hero .toowie-meaning-slide:where([data-page="index"], [data-page="index"] *) {
        height: 690px !important;
        min-height: 690px !important;
        grid-template-rows: 690px !important;
      }

      .toowie-identity-hero .toowie-meaning-slide .capability-slide-panel:where([data-page="index"], [data-page="index"] *) {
        min-height: 690px;
      }

      .toowie-identity-hero .toowie-meaning-slide .capability-slide-content:where([data-page="index"], [data-page="index"] *) {
        gap: 13px;
        padding: 20px 15px 24px;
      }

      .toowie-identity-hero .toowie-meaning-intro:where([data-page="index"], [data-page="index"] *) {
        padding-top: 18px;
      }

      .toowie-identity-hero .toowie-meaning-intro:where([data-page="index"], [data-page="index"] *)::before {
        font-size: .58rem;
        letter-spacing: .11em;
      }

      .toowie-identity-hero .toowie-meaning-intro h3:where([data-page="index"], [data-page="index"] *) {
        font-size: 1.34rem;
      }

      .toowie-identity-hero .toowie-meaning-primary:where([data-page="index"], [data-page="index"] *) {
        border-radius: 19px;
        padding: 16px 12px;
      }

      .toowie-identity-hero .toowie-meaning-slide .toowie-inline-acronym-row:where([data-page="index"], [data-page="index"] *) {
        grid-template-columns: repeat(6, 37px);
        gap: 5px;
      }

      .toowie-identity-hero .toowie-meaning-slide .toowie-inline-octagon:where([data-page="index"], [data-page="index"] *) {
        width: 37px;
        height: 37px;
        font-size: .82rem;
      }

      .toowie-identity-hero .toowie-meaning-slide .toowie-inline-acronym-note:where([data-page="index"], [data-page="index"] *) {
        font-size: .78rem;
      }

      .toowie-identity-hero .toowie-meaning-explanation > p:where([data-page="index"], [data-page="index"] *) {
        margin-bottom: 10px;
        font-size: .82rem;
      }

      .toowie-identity-hero .toowie-meaning-explanation-list:where([data-page="index"], [data-page="index"] *) {
        grid-template-columns: 1fr;
        gap: 7px;
      }

      .toowie-identity-hero .toowie-meaning-explanation-item:where([data-page="index"], [data-page="index"] *) {
        min-height: 0;
        padding: 9px 10px 9px 39px;
        border-radius: 13px;
      }

      .toowie-identity-hero .toowie-meaning-explanation-item:where([data-page="index"], [data-page="index"] *)::before {
        left: 10px;
        top: 10px;
        width: 21px;
        height: 21px;
      }

      .toowie-identity-hero .toowie-meaning-explanation-item strong:where([data-page="index"], [data-page="index"] *) {
        margin-bottom: 2px;
        font-size: .82rem;
      }

      .toowie-identity-hero .toowie-meaning-explanation-item span:where([data-page="index"], [data-page="index"] *) {
        font-size: .72rem;
      }
    }


    /* ========================================================================
       TOOWIE Marken-Hero: programmierte Einstiegsfläche im Philosophie-Slider
       ======================================================================== */
    .toowie-identity-hero .toowie-meaning-slide:where([data-page="index"], [data-page="index"] *) {
      grid-template-columns: 1fr !important;
      grid-template-rows: 580px !important;
      min-height: 580px !important;
      padding: 0 !important;
      background: linear-gradient(135deg, rgba(0,20,40,1) 0%, rgba(10,40,80,1) 50%, rgba(0,10,30,1) 100%) !important;
    }

    .toowie-identity-hero .toowie-meaning-slide .capability-slide-panel:where([data-page="index"], [data-page="index"] *) {
      min-height: 580px;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
    }

    .toowie-brand-stage:where([data-page="index"], [data-page="index"] *) {
      position: relative;
      isolation: isolate;
      width: 100%;
      height: 580px;
      min-height: 580px;
      padding: 32px 34px 28px;
      overflow: hidden;
      display: grid;
      grid-template-rows: auto 1fr auto;
      color: #fff;
      background: linear-gradient(135deg, rgba(0,20,40,1) 0%, rgba(10,40,80,1) 50%, rgba(0,10,30,1) 100%);
    }

    .toowie-brand-grid:where([data-page="index"], [data-page="index"] *) {
      position: absolute;
      inset: 0;
      z-index: -3;
      opacity: .22;
      background-image:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
      background-size: 44px 44px;
      -webkit-mask-image: radial-gradient(circle at center, #000 18%, transparent 78%);
      mask-image: radial-gradient(circle at center, #000 18%, transparent 78%);
    }

    .toowie-brand-glow:where([data-page="index"], [data-page="index"] *) {
      position: absolute;
      z-index: -2;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(2px);
    }

    .toowie-brand-glow-one:where([data-page="index"], [data-page="index"] *) {
      width: 250px;
      height: 250px;
      left: 41%;
      top: 22%;
      background: rgba(198,155,90,.09);
      box-shadow: 0 0 110px 34px rgba(198,155,90,.10);
      animation: toowieGlowPulse 5.8s ease-in-out infinite;
    }

    .toowie-brand-glow-two:where([data-page="index"], [data-page="index"] *) {
      width: 190px;
      height: 190px;
      right: -60px;
      top: -55px;
      border: 1px solid rgba(198,155,90,.12);
      box-shadow: 0 0 90px rgba(56,112,160,.16);
    }

    .toowie-brand-topline:where([data-page="index"], [data-page="index"] *) {
      position: relative;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(255,255,255,.09);
    }

    .toowie-brand-kicker:where([data-page="index"], [data-page="index"] *) {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: #e3bf83;
      font-size: .70rem;
      font-weight: 900;
      letter-spacing: .15em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .toowie-brand-kicker i:where([data-page="index"], [data-page="index"] *) {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #c69b5a;
      box-shadow: 0 0 0 5px rgba(198,155,90,.12), 0 0 22px rgba(198,155,90,.5);
    }

    .toowie-brand-topline-text:where([data-page="index"], [data-page="index"] *) {
      color: rgba(255,255,255,.64);
      font-size: .78rem;
      font-weight: 650;
      letter-spacing: .01em;
      text-align: right;
    }

    .toowie-brand-logo-scene:where([data-page="index"], [data-page="index"] *) {
      position: relative;
      z-index: 2;
      min-height: 0;
      display: grid;
      place-items: center;
    }

    .toowie-brand-logo-shell:where([data-page="index"], [data-page="index"] *) {
      position: relative;
      z-index: 4;
      width: min(475px, 72%);
      min-height: 246px;
      display: grid;
      place-items: center;
      padding: 28px 34px;
      border: 1px solid rgba(198,155,90,.28);
      border-radius: 34px;
      background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
      box-shadow:
        0 30px 75px rgba(0,0,0,.26),
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 0 1px rgba(198,155,90,.025);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      animation: toowieFloat 6.8s ease-in-out infinite;
    }

    .toowie-brand-logo-shell:where([data-page="index"], [data-page="index"] *)::before,
    .toowie-brand-logo-shell:where([data-page="index"], [data-page="index"] *)::after {
      content: "";
      position: absolute;
      width: 28px;
      height: 28px;
      border-color: rgba(198,155,90,.75);
      pointer-events: none;
    }

    .toowie-brand-logo-shell:where([data-page="index"], [data-page="index"] *)::before {
      left: 17px;
      top: 17px;
      border-left: 1px solid;
      border-top: 1px solid;
    }

    .toowie-brand-logo-shell:where([data-page="index"], [data-page="index"] *)::after {
      right: 17px;
      bottom: 17px;
      border-right: 1px solid;
      border-bottom: 1px solid;
    }

    .toowie-brand-logo:where([data-page="index"], [data-page="index"] *) {
      width: min(390px, 94%);
      height: auto;
      display: block;
      filter: drop-shadow(0 16px 30px rgba(0,0,0,.20)) drop-shadow(0 0 26px rgba(198,155,90,.08));
    }

    .toowie-brand-ring:where([data-page="index"], [data-page="index"] *) {
      position: absolute;
      z-index: 1;
      left: 50%;
      top: 50%;
      border: 1px solid rgba(198,155,90,.18);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .toowie-brand-ring:where([data-page="index"], [data-page="index"] *)::before,
    .toowie-brand-ring:where([data-page="index"], [data-page="index"] *)::after {
      content: "";
      position: absolute;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #c69b5a;
      box-shadow: 0 0 0 5px rgba(198,155,90,.08), 0 0 22px rgba(198,155,90,.38);
    }

    .toowie-brand-ring-one:where([data-page="index"], [data-page="index"] *) {
      width: 560px;
      height: 280px;
      animation: toowieOrbitA 16s linear infinite;
    }

    .toowie-brand-ring-one:where([data-page="index"], [data-page="index"] *)::before { left: 12%; top: 11%; }
    .toowie-brand-ring-one:where([data-page="index"], [data-page="index"] *)::after { right: 8%; bottom: 17%; }

    .toowie-brand-ring-two:where([data-page="index"], [data-page="index"] *) {
      width: 660px;
      height: 350px;
      opacity: .54;
      animation: toowieOrbitB 22s linear infinite reverse;
    }

    .toowie-brand-ring-two:where([data-page="index"], [data-page="index"] *)::before { right: 19%; top: 3%; }
    .toowie-brand-ring-two:where([data-page="index"], [data-page="index"] *)::after { left: 4%; bottom: 25%; }

    .toowie-brand-chip:where([data-page="index"], [data-page="index"] *) {
      position: absolute;
      z-index: 5;
      padding: 8px 12px;
      border: 1px solid rgba(198,155,90,.26);
      border-radius: 999px;
      background: rgba(7,24,39,.76);
      color: rgba(255,255,255,.82);
      box-shadow: 0 12px 28px rgba(0,0,0,.17);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      font-size: .70rem;
      font-weight: 800;
      letter-spacing: .04em;
    }

    .toowie-brand-chip:where([data-page="index"], [data-page="index"] *)::before {
      content: "";
      display: inline-block;
      width: 6px;
      height: 6px;
      margin-right: 7px;
      border-radius: 50%;
      background: #c69b5a;
      box-shadow: 0 0 12px rgba(198,155,90,.55);
      vertical-align: 1px;
    }

    .toowie-brand-chip-tech:where([data-page="index"], [data-page="index"] *) { left: 8%; top: 26%; animation: toowieChipFloat 5.2s ease-in-out infinite; }
    .toowie-brand-chip-praxis:where([data-page="index"], [data-page="index"] *) { right: 7%; top: 31%; animation: toowieChipFloat 5.8s ease-in-out .8s infinite; }
    .toowie-brand-chip-dialog:where([data-page="index"], [data-page="index"] *) { right: 14%; bottom: 16%; animation: toowieChipFloat 6.4s ease-in-out 1.4s infinite; }

    .toowie-brand-journey:where([data-page="index"], [data-page="index"] *) {
      position: relative;
      z-index: 4;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 7px;
      padding-top: 17px;
    }

    .toowie-brand-route:where([data-page="index"], [data-page="index"] *) {
      position: absolute;
      left: 6.6%;
      right: 6.6%;
      top: 20px;
      height: 1px;
      overflow: visible;
      background: linear-gradient(90deg, rgba(198,155,90,.25), rgba(198,155,90,.72), rgba(198,155,90,.25));
    }

    .toowie-brand-route:where([data-page="index"], [data-page="index"] *)::before {
      content: "";
      position: absolute;
      inset: -1px 0 auto;
      height: 3px;
      background: linear-gradient(90deg, transparent, rgba(198,155,90,.18), transparent);
      filter: blur(2px);
    }

    .toowie-brand-route span:where([data-page="index"], [data-page="index"] *) {
      position: absolute;
      top: 50%;
      left: 0;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #f0c980;
      box-shadow: 0 0 0 5px rgba(198,155,90,.10), 0 0 18px rgba(240,201,128,.72);
      transform: translate(-50%, -50%);
      animation: toowieSignal 7.2s cubic-bezier(.65,0,.35,1) infinite;
    }

    .toowie-brand-step:where([data-page="index"], [data-page="index"] *) {
      position: relative;
      min-width: 0;
      padding: 17px 5px 0;
      text-align: center;
    }

    .toowie-brand-step:where([data-page="index"], [data-page="index"] *)::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 0;
      width: 8px;
      height: 8px;
      border: 2px solid #c69b5a;
      border-radius: 50%;
      background: #0a2239;
      box-shadow: 0 0 0 5px rgba(198,155,90,.075);
      transform: translateX(-50%);
    }

    .toowie-brand-step b:where([data-page="index"], [data-page="index"] *) {
      display: block;
      margin-bottom: 4px;
      color: #cfa764;
      font-size: .61rem;
      font-weight: 950;
      letter-spacing: .12em;
    }

    .toowie-brand-step strong:where([data-page="index"], [data-page="index"] *) {
      display: block;
      color: rgba(255,255,255,.78);
      font-size: .69rem;
      font-weight: 750;
      line-height: 1.25;
    }

    @keyframes toowieFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }

    @keyframes toowieChipFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-6px); }
    }

    @keyframes toowieGlowPulse {
      0%, 100% { opacity: .66; transform: scale(.96); }
      50% { opacity: 1; transform: scale(1.06); }
    }

    @keyframes toowieOrbitA {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to { transform: translate(-50%, -50%) rotate(360deg); }
    }

    @keyframes toowieOrbitB {
      from { transform: translate(-50%, -50%) rotate(7deg); }
      to { transform: translate(-50%, -50%) rotate(367deg); }
    }

    @keyframes toowieSignal {
      0% { left: 0; opacity: 0; }
      7% { opacity: 1; }
      93% { opacity: 1; }
      100% { left: 100%; opacity: 0; }
    }

    @media (max-width: 1180px) {
      .toowie-brand-stage:where([data-page="index"], [data-page="index"] *) { padding: 28px 28px 24px; }
      .toowie-brand-logo-shell:where([data-page="index"], [data-page="index"] *) { width: min(420px, 68%); min-height: 220px; }
      .toowie-brand-ring-one:where([data-page="index"], [data-page="index"] *) { width: 500px; height: 255px; }
      .toowie-brand-ring-two:where([data-page="index"], [data-page="index"] *) { width: 580px; height: 315px; }
      .toowie-brand-step strong:where([data-page="index"], [data-page="index"] *) { font-size: .64rem; }
    }

    @media (max-width: 820px) {
      .toowie-identity-hero .toowie-meaning-slide:where([data-page="index"], [data-page="index"] *),
      .toowie-identity-hero .toowie-meaning-slide .capability-slide-panel:where([data-page="index"], [data-page="index"] *),
      .toowie-brand-stage:where([data-page="index"], [data-page="index"] *) {
        height: 620px !important;
        min-height: 620px !important;
      }

      .toowie-brand-stage:where([data-page="index"], [data-page="index"] *) { padding: 25px 22px 23px; }
      .toowie-brand-topline:where([data-page="index"], [data-page="index"] *) { align-items: flex-start; }
      .toowie-brand-topline-text:where([data-page="index"], [data-page="index"] *) { max-width: 250px; }
      .toowie-brand-logo-shell:where([data-page="index"], [data-page="index"] *) { width: min(430px, 76%); min-height: 220px; }
      .toowie-brand-logo:where([data-page="index"], [data-page="index"] *) { width: min(345px, 92%); }
      .toowie-brand-ring-one:where([data-page="index"], [data-page="index"] *) { width: 480px; height: 250px; }
      .toowie-brand-ring-two:where([data-page="index"], [data-page="index"] *) { width: 550px; height: 320px; }
      .toowie-brand-chip-tech:where([data-page="index"], [data-page="index"] *) { left: 3%; }
      .toowie-brand-chip-praxis:where([data-page="index"], [data-page="index"] *) { right: 2%; }
      .toowie-brand-chip-dialog:where([data-page="index"], [data-page="index"] *) { right: 6%; }
      .toowie-brand-journey:where([data-page="index"], [data-page="index"] *) { gap: 3px; }
      .toowie-brand-step:where([data-page="index"], [data-page="index"] *) { padding-inline: 2px; }
      .toowie-brand-step strong:where([data-page="index"], [data-page="index"] *) { font-size: .60rem; }
    }

    @media (max-width: 560px) {
      .toowie-identity-hero .toowie-meaning-slide:where([data-page="index"], [data-page="index"] *),
      .toowie-identity-hero .toowie-meaning-slide .capability-slide-panel:where([data-page="index"], [data-page="index"] *),
      .toowie-brand-stage:where([data-page="index"], [data-page="index"] *) {
        height: 690px !important;
        min-height: 690px !important;
      }

      .toowie-brand-stage:where([data-page="index"], [data-page="index"] *) {
        grid-template-rows: auto minmax(325px, 1fr) auto;
        padding: 22px 15px 20px;
      }

      .toowie-brand-topline:where([data-page="index"], [data-page="index"] *) { display: block; }
      .toowie-brand-topline-text:where([data-page="index"], [data-page="index"] *) { display: block; margin-top: 8px; text-align: left; font-size: .72rem; }
      .toowie-brand-logo-shell:where([data-page="index"], [data-page="index"] *) { width: min(355px, 86%); min-height: 205px; padding: 22px 24px; border-radius: 27px; }
      .toowie-brand-logo:where([data-page="index"], [data-page="index"] *) { width: min(300px, 95%); }
      .toowie-brand-ring-one:where([data-page="index"], [data-page="index"] *) { width: 390px; height: 240px; }
      .toowie-brand-ring-two:where([data-page="index"], [data-page="index"] *) { width: 450px; height: 300px; }
      .toowie-brand-chip:where([data-page="index"], [data-page="index"] *) { padding: 6px 9px; font-size: .59rem; }
      .toowie-brand-chip-tech:where([data-page="index"], [data-page="index"] *) { left: 0; top: 24%; }
      .toowie-brand-chip-praxis:where([data-page="index"], [data-page="index"] *) { right: 0; top: 27%; }
      .toowie-brand-chip-dialog:where([data-page="index"], [data-page="index"] *) { right: 2%; bottom: 15%; }

      .toowie-brand-journey:where([data-page="index"], [data-page="index"] *) {
        grid-template-columns: 1fr;
        gap: 5px;
        padding: 0 0 0 24px;
      }

      .toowie-brand-route:where([data-page="index"], [data-page="index"] *) {
        left: 7px;
        right: auto;
        top: 11px;
        bottom: 11px;
        width: 1px;
        height: auto;
        background: linear-gradient(180deg, rgba(198,155,90,.25), rgba(198,155,90,.72), rgba(198,155,90,.25));
      }

      .toowie-brand-route span:where([data-page="index"], [data-page="index"] *) {
        left: 50%;
        top: 0;
        animation: toowieSignalMobile 7.2s cubic-bezier(.65,0,.35,1) infinite;
      }

      .toowie-brand-step:where([data-page="index"], [data-page="index"] *) {
        min-height: 30px;
        padding: 0;
        display: grid;
        grid-template-columns: 28px 1fr;
        align-items: center;
        text-align: left;
      }

      .toowie-brand-step:where([data-page="index"], [data-page="index"] *)::before {
        left: -17px;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      .toowie-brand-step b:where([data-page="index"], [data-page="index"] *) { margin: 0; font-size: .59rem; }
      .toowie-brand-step strong:where([data-page="index"], [data-page="index"] *) { font-size: .66rem; line-height: 1.2; }
    }

    @keyframes toowieSignalMobile {
      0% { top: 0; opacity: 0; }
      7% { opacity: 1; }
      93% { opacity: 1; }
      100% { top: 100%; opacity: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      .toowie-brand-logo-shell:where([data-page="index"], [data-page="index"] *),
      .toowie-brand-chip:where([data-page="index"], [data-page="index"] *),
      .toowie-brand-ring:where([data-page="index"], [data-page="index"] *),
      .toowie-brand-glow-one:where([data-page="index"], [data-page="index"] *),
      .toowie-brand-route span:where([data-page="index"], [data-page="index"] *) {
        animation: none !important;
      }
    }



    /* Feinschliff Startseiten-Hero: ovalere Umlaufbahnen */
    .philosophy-hero-ring-one:where([data-page="index"], [data-page="index"] *) {
      width: 590px;
      height: 370px;
    }

    .philosophy-hero-ring-two:where([data-page="index"], [data-page="index"] *) {
      width: 690px;
      height: 430px;
    }


    @media (max-width: 980px) {
      .philosophy-hero-ring-one:where([data-page="index"], [data-page="index"] *) { width: 555px; height: 350px; }
      .philosophy-hero-ring-two:where([data-page="index"], [data-page="index"] *) { width: 640px; height: 405px; }
    }

    @media (max-width: 767px) {
      .philosophy-hero-ring-one:where([data-page="index"], [data-page="index"] *) { width: 365px; height: 225px; }
      .philosophy-hero-ring-two:where([data-page="index"], [data-page="index"] *) { width: 420px; height: 265px; }
    }

    @media (max-width: 430px) {
      .philosophy-hero-ring-one:where([data-page="index"], [data-page="index"] *) { width: 295px; height: 180px; }
      .philosophy-hero-ring-two:where([data-page="index"], [data-page="index"] *) { width: 340px; height: 215px; }
    }


    /* Hero-Octagons: sanftes Schweben */
    @keyframes philosophyOctagonFloat {
      0%, 100% { transform: translate3d(0, -6px, 0); }
      50% { transform: translate3d(0, 7px, 0); }
    }

    .philosophy-orbit-it:where([data-page="index"], [data-page="index"] *) {
      animation: philosophyOctagonFloat 5.2s ease-in-out infinite;
      animation-delay: -0.8s;
      will-change: transform;
    }

    .philosophy-center-octagon:where([data-page="index"], [data-page="index"] *) {
      animation: philosophyOctagonFloat 5.8s ease-in-out infinite;
      animation-delay: -2.1s;
      will-change: transform;
    }

    .philosophy-orbit-communication:where([data-page="index"], [data-page="index"] *) {
      animation: philosophyOctagonFloat 5.5s ease-in-out infinite;
      animation-delay: -3.4s;
      will-change: transform;
    }

    @media (prefers-reduced-motion: reduce) {
      .philosophy-orbit-it:where([data-page="index"], [data-page="index"] *),
      .philosophy-center-octagon:where([data-page="index"], [data-page="index"] *),
      .philosophy-orbit-communication:where([data-page="index"], [data-page="index"] *) {
        animation: none !important;
        transform: none !important;
      }
    }


  

/* index.html – startseite-hero-technikfarben */

/* Startseiten-Hero: exakt derselbe Hintergrund wie auf den Technik-Seiten */
.index-page .index-hero.philosophy-home-hero:where([data-page="index"], [data-page="index"] *) {
  background: linear-gradient(135deg, rgba(0,20,40,1) 0%, rgba(10,40,80,1) 50%, rgba(0,10,30,1) 100%) !important;
}
.index-page .index-hero.philosophy-home-hero:where([data-page="index"], [data-page="index"] *)::before {
  display: none !important;
  background: none !important;
}

@media (min-width: 981px) {
  .index-page .index-hero.philosophy-home-hero:where([data-page="index"], [data-page="index"] *) {
    min-height: clamp(700px, 80vh, 880px);
    justify-content: flex-start;
    padding-top: 118px;
    padding-right: 24px;
    padding-bottom: 52px;
    padding-left: 12px;
  }

  .index-page .philosophy-hero-layout:where([data-page="index"], [data-page="index"] *) {
    width: min(1440px, calc(100% - 12px));
  }

  .index-page .philosophy-hero-copy:where([data-page="index"], [data-page="index"] *) {
    margin-left: clamp(-54px, -2.7vw, -34px);
  }
}

/* Einheitliche Hauptüberschriften wie im ersten Hero */
.index-page .home-story-step h2:where([data-page="index"], [data-page="index"] *),
.index-page .toowie-product .hero h1:where([data-page="index"], [data-page="index"] *),
.index-page .home-story-step-logo-fallback:where([data-page="index"], [data-page="index"] *),
.index-page .clean-kontakt-ueberschrift:where([data-page="index"], [data-page="index"] *),
.index-page .clean-kontaktformular-ueberschrift:where([data-page="index"], [data-page="index"] *) {
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(2.55rem, 4.15vw, 4.45rem);
  font-weight: 780;
  line-height: .97;
  letter-spacing: -.055em;
}

@media (max-width: 980px) {
  .index-page .home-story-step h2:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .hero h1:where([data-page="index"], [data-page="index"] *),
  .index-page .home-story-step-logo-fallback:where([data-page="index"], [data-page="index"] *),
  .index-page .clean-kontakt-ueberschrift:where([data-page="index"], [data-page="index"] *),
  .index-page .clean-kontaktformular-ueberschrift:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(2.55rem, 6vw, 4rem);
  }
}

@media (max-width: 767px) {
  .index-page .home-story-step h2:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .hero h1:where([data-page="index"], [data-page="index"] *),
  .index-page .home-story-step-logo-fallback:where([data-page="index"], [data-page="index"] *),
  .index-page .clean-kontakt-ueberschrift:where([data-page="index"], [data-page="index"] *),
  .index-page .clean-kontaktformular-ueberschrift:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(2.35rem, 11vw, 3.65rem);
    line-height: .98;
  }

  .index-page .home-story-step h2:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(1.7rem, 7.5vw, 3rem);
  }
}

/*
 * Responsive Startseiten-Hero:
 * Desktop-Komposition (Text links / 3 Octagons rechts) bleibt bis 400px erhalten.
 * Erst unter 400px wird die Octagon-Grafik ausgeblendet.
 */
@media (min-width: 400px) and (max-width: 980px) {
  .index-page .index-hero.philosophy-home-hero:where([data-page="index"], [data-page="index"] *) {
    min-height: auto;
    /* Navigation ist in diesem Bereich 74px hoch. Genuegend konstanter
       Abstand verhindert, dass der Hero bei kleineren Breiten hineinrutscht. */
    padding: 110px clamp(10px, 2vw, 20px) clamp(24px, 4vw, 38px);
  }

  .index-page .philosophy-hero-layout:where([data-page="index"], [data-page="index"] *) {
    width: 100%;
    grid-template-columns: minmax(0, 1.38fr) minmax(118px, .62fr);
    gap: clamp(8px, 1.8vw, 20px);
    align-items: center;
  }

  .index-page .philosophy-hero-copy:where([data-page="index"], [data-page="index"] *) {
    grid-area: 1 / 1;
    max-width: none;
    min-width: 0;
    justify-self: stretch;
  }

  .index-page .philosophy-hero-eyebrow:where([data-page="index"], [data-page="index"] *) {
    min-height: clamp(23px, 3.2vw, 30px);
    padding: clamp(5px, .75vw, 7px) clamp(7px, 1vw, 10px);
    gap: clamp(5px, .8vw, 8px);
    font-size: clamp(7px, 1vw, 10px);
    letter-spacing: clamp(.05em, .09vw, .1em);
    white-space: nowrap;
  }

  .index-page .philosophy-hero-eyebrow-dot:where([data-page="index"], [data-page="index"] *) {
    width: clamp(5px, .7vw, 7px);
    height: clamp(5px, .7vw, 7px);
    flex-basis: clamp(5px, .7vw, 7px);
    box-shadow: 0 0 0 clamp(3px, .5vw, 5px) rgba(34,197,94,.16);
  }

  .index-page .philosophy-home-title:where([data-page="index"], [data-page="index"] *) {
    max-width: none;
    margin: clamp(11px, 1.7vw, 18px) 0 clamp(12px, 2.2vw, 22px);
    gap: .04em;
    font-size: clamp(1.28rem, 5.1vw, 3.25rem);
    line-height: .97;
  }

  .index-page .philosophy-home-title span:where([data-page="index"], [data-page="index"] *),
  .index-page .philosophy-home-title strong:where([data-page="index"], [data-page="index"] *) {
    white-space: nowrap;
  }

  .index-page .philosophy-home-subtitle:where([data-page="index"], [data-page="index"] *) {
    max-width: 100%;
    margin-bottom: clamp(7px, 1.2vw, 12px);
    font-size: clamp(.69rem, 1.55vw, 1.08rem);
    line-height: 1.34;
  }

  .index-page .philosophy-home-lead:where([data-page="index"], [data-page="index"] *) {
    max-width: 100%;
    font-size: clamp(.62rem, 1.28vw, .98rem);
    line-height: 1.58;
  }

  .index-page .philosophy-home-actions:where([data-page="index"], [data-page="index"] *) {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: clamp(5px, .9vw, 9px);
    margin-top: clamp(14px, 2.4vw, 24px);
  }

  .index-page .philosophy-btn:where([data-page="index"], [data-page="index"] *) {
    width: auto;
    min-width: 0;
    min-height: clamp(31px, 4.2vw, 43px);
    padding: 0 clamp(8px, 1.35vw, 15px);
    border-radius: clamp(8px, 1.15vw, 12px);
    font-size: clamp(8px, 1.18vw, 12px);
    white-space: nowrap;
  }

  .index-page .philosophy-hero-visual:where([data-page="index"], [data-page="index"] *) {
    display: grid;
    grid-area: 1 / 2;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    min-height: clamp(190px, 39vw, 420px);
    margin: 0;
    overflow: visible;
  }

  .index-page .philosophy-orbit:where([data-page="index"], [data-page="index"] *) {
    width: clamp(86px, 14.5vw, 190px);
    height: clamp(86px, 14.5vw, 190px);
    padding: clamp(13px, 2.25vw, 29px) clamp(10px, 1.8vw, 24px);
  }

  .index-page .philosophy-orbit-it:where([data-page="index"], [data-page="index"] *) {
    left: 0;
    top: 5%;
  }

  .index-page .philosophy-orbit-communication:where([data-page="index"], [data-page="index"] *) {
    right: 0;
    bottom: 5%;
  }

  .index-page .philosophy-orbit-kicker:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(.38rem, .82vw, .62rem);
    letter-spacing: .09em;
  }

  .index-page .philosophy-orbit strong:where([data-page="index"], [data-page="index"] *) {
    margin: clamp(4px, .8vw, 8px) 0 clamp(3px, .65vw, 6px);
    font-size: clamp(.76rem, 1.75vw, 1.35rem);
  }

  .index-page .philosophy-orbit small:where([data-page="index"], [data-page="index"] *) {
    max-width: 90%;
    font-size: clamp(.43rem, .92vw, .75rem);
    line-height: 1.35;
  }

  .index-page .philosophy-center-octagon:where([data-page="index"], [data-page="index"] *) {
    width: clamp(54px, 8.8vw, 116px);
    height: clamp(54px, 8.8vw, 116px);
  }

  .index-page .philosophy-center-octagon span:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(.55rem, 1.15vw, .94rem);
  }

  .index-page .philosophy-center-octagon small:where([data-page="index"], [data-page="index"] *) {
    margin-top: clamp(1px, .35vw, 4px);
    font-size: clamp(.37rem, .72vw, .63rem);
  }

  .index-page .philosophy-hero-ring-one:where([data-page="index"], [data-page="index"] *) {
    width: clamp(118px, 24vw, 300px);
    height: clamp(74px, 15vw, 188px);
  }

  .index-page .philosophy-hero-ring-two:where([data-page="index"], [data-page="index"] *) {
    width: clamp(136px, 28vw, 350px);
    height: clamp(85px, 17.5vw, 219px);
  }

  .index-page .philosophy-path:where([data-page="index"], [data-page="index"] *) {
    width: 100%;
    max-width: none;
    margin: clamp(24px, 4vw, 42px) auto 0;
    padding-top: clamp(14px, 2.2vw, 22px);
    grid-template-columns: minmax(0, 1fr) clamp(8px, 2vw, 24px) minmax(0, 1fr) clamp(8px, 2vw, 24px) minmax(0, 1fr);
    gap: clamp(4px, .8vw, 10px);
  }

  .index-page .philosophy-path-line:where([data-page="index"], [data-page="index"] *) {
    display: block;
  }

  .index-page .philosophy-path-item:where([data-page="index"], [data-page="index"] *) {
    gap: clamp(5px, .8vw, 10px);
  }

  .index-page .path-octagon:where([data-page="index"], [data-page="index"] *) {
    width: clamp(25px, 3.7vw, 38px);
    height: clamp(25px, 3.7vw, 38px);
    font-size: clamp(.48rem, .75vw, .66rem);
  }

  .index-page .philosophy-path-item strong:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(.51rem, 1vw, .82rem);
    line-height: 1.15;
  }

  .index-page .philosophy-path-item small:where([data-page="index"], [data-page="index"] *) {
    margin-top: 1px;
    font-size: clamp(.39rem, .72vw, .64rem);
    line-height: 1.25;
    white-space: normal;
  }
}

@media (max-width: 399px) {
  .index-page .philosophy-hero-visual:where([data-page="index"], [data-page="index"] *) {
    display: none;
  }

  .index-page .philosophy-hero-layout:where([data-page="index"], [data-page="index"] *) {
    grid-template-columns: 1fr;
  }
}

/*
 * Hero-Diagramm ohne harte Breakpoint-Spruenge:
 * Positionen und Proportionen bleiben identisch, die komplette Grafik
 * skaliert zwischen 400px und 1920px kontinuierlich mit der Viewportbreite.
 */
@media (min-width: 400px) and (max-width: 1920px) {
  .index-page .philosophy-hero-visual:where([data-page="index"], [data-page="index"] *) {
    min-height: clamp(190px, calc(87.37px + 25.66vw), 580px);
  }

  .index-page .philosophy-orbit:where([data-page="index"], [data-page="index"] *) {
    width: clamp(86px, calc(33.63px + 13.09vw), 285px);
    height: clamp(86px, calc(33.63px + 13.09vw), 285px);
    padding: clamp(13px, calc(4.32px + 2.17vw), 46px) clamp(10px, calc(3.16px + 1.71vw), 36px);
  }

  /* Die Positionen skalieren zusammen mit der Octagon-Groesse.
     Die beiden grossen Octagons bleiben bewusst sehr nah am mittleren,
     ohne dessen Flaeche zu ueberlappen. */
  .index-page .philosophy-orbit-it:where([data-page="index"], [data-page="index"] *) {
    left: calc(50% - clamp(89px, calc(34.79px + 13.55vw), 295px));
    top: calc(50% - clamp(83px, calc(32.47px + 12.63vw), 275px));
  }

  .index-page .philosophy-orbit-communication:where([data-page="index"], [data-page="index"] *) {
    right: calc(50% - clamp(89px, calc(34.79px + 13.55vw), 295px));
    bottom: calc(50% - clamp(83px, calc(32.47px + 12.63vw), 275px));
  }

  .index-page .philosophy-orbit-kicker:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(6.08px, calc(4.65px + .357vw), 11.52px);
  }

  .index-page .philosophy-orbit strong:where([data-page="index"], [data-page="index"] *) {
    margin: clamp(4px, calc(2.68px + .329vw), 9px) 0 clamp(3px, calc(1.95px + .263vw), 7px);
    font-size: clamp(12.16px, calc(7.78px + 1.095vw), 28.8px);
  }

  .index-page .philosophy-orbit small:where([data-page="index"], [data-page="index"] *) {
    max-width: clamp(76px, calc(43.37px + 8.16vw), 200px);
    font-size: clamp(6.88px, calc(4.69px + .547vw), 15.2px);
  }

  .index-page .philosophy-center-octagon:where([data-page="index"], [data-page="index"] *) {
    width: clamp(54px, calc(21.37px + 8.16vw), 178px);
    height: clamp(54px, calc(21.37px + 8.16vw), 178px);
  }

  .index-page .philosophy-center-octagon span:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(8.8px, calc(5.89px + .727vw), 19.84px);
  }

  .index-page .philosophy-center-octagon small:where([data-page="index"], [data-page="index"] *) {
    margin-top: clamp(1px, calc(.21px + .197vw), 4px);
    font-size: clamp(5.92px, calc(4.19px + .432vw), 12.48px);
  }

  .index-page .philosophy-hero-ring-one:where([data-page="index"], [data-page="index"] *) {
    width: clamp(118px, calc(-6.21px + 31.05vw), 590px);
    height: clamp(74px, calc(-3.89px + 19.47vw), 370px);
  }

  .index-page .philosophy-hero-ring-two:where([data-page="index"], [data-page="index"] *) {
    width: clamp(136px, calc(-9.79px + 36.45vw), 690px);
    height: clamp(85px, calc(-5.79px + 22.70vw), 430px);
  }

  /* Auch die kleinen Octagons auf den ovalen Umlaufbahnen skalieren
     proportional mit der gesamten Hero-Grafik bis 400px herunter. */
  .index-page .philosophy-hero-ring-node:where([data-page="index"], [data-page="index"] *) {
    width: clamp(7.5px, calc(2.89px + 1.151vw), 25px);
    height: clamp(7.5px, calc(2.89px + 1.151vw), 25px);
  }

  .index-page .philosophy-hero-ring-two .philosophy-hero-ring-node:where([data-page="index"], [data-page="index"] *) {
    width: clamp(6px, calc(2.32px + .921vw), 20px);
    height: clamp(6px, calc(2.32px + .921vw), 20px);
  }
}

/* Auch die rechte Hero-Spalte verlaeuft ohne Sprung am alten 980px-Punkt. */
@media (min-width: 400px) and (max-width: 1320px) {
  .index-page .philosophy-hero-layout:where([data-page="index"], [data-page="index"] *) {
    grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr);
  }
}

@media (max-width: 980px) {
  .index-page .philosophy-hero-eyebrow:where([data-page="index"], [data-page="index"] *) {
    display: none !important;
  }
}

/* TOOWIE-Schritt: ab 760px ohne 04, Logo linksbuendig. */
@media (max-width: 760px) {
  .index-page #wer-ist-toowie .home-story-step-inner:where([data-page="index"], [data-page="index"] *) {
    grid-template-columns: 1fr;
  }

  .index-page #wer-ist-toowie .home-story-step-number:where([data-page="index"], [data-page="index"] *) {
    display: none;
  }

  .index-page #wer-ist-toowie .home-story-step-kicker:where([data-page="index"], [data-page="index"] *),
  .index-page #wer-ist-toowie .home-story-step-logo:where([data-page="index"], [data-page="index"] *),
  .index-page #wer-ist-toowie .home-story-step-logo-fallback:where([data-page="index"], [data-page="index"] *),
  .index-page #wer-ist-toowie .home-story-step p:where([data-page="index"], [data-page="index"] *) {
    grid-column: 1;
    justify-self: start;
  }

  .index-page #wer-ist-toowie .home-story-step-kicker:where([data-page="index"], [data-page="index"] *) {
    display: none !important;
  }

  .index-page #wer-ist-toowie .home-story-step-logo:where([data-page="index"], [data-page="index"] *),
  .index-page #wer-ist-toowie .home-story-step-logo-fallback:where([data-page="index"], [data-page="index"] *) {
    grid-row: 1;
    margin-left: 0;
    margin-right: 0;
  }

  .index-page #wer-ist-toowie .home-story-step p:where([data-page="index"], [data-page="index"] *) {
    grid-row: 2;
  }
}


/* index.html – startseite-blaue-hero-responsiv */

/*
 * Startseite – blaue Hero-Abschnitte unter 01–04:
 * Desktop-Komposition (Text links / Visual rechts) bleibt erhalten.
 * Typografie, Buttons und Browser-Visuals skalieren stufenlos kleiner,
 * statt unter die Texte zu springen.
 */
@media (min-width: 400px) and (max-width: 980px) {
  .index-page .toowie-product .hero:where([data-page="index"], [data-page="index"] *) {
    /* Oberer Abstand skaliert proportional zur Desktop-Komposition (158px bei 1920px). */
    padding: 8.23vw 0 clamp(24px, 4vw, 38px) !important;
  }

  .index-page .toowie-product .hero > .shell.hero-grid:where([data-page="index"], [data-page="index"] *) {
    width: min(1180px, calc(100% - 20px));
    grid-template-columns: minmax(0, 1.34fr) minmax(118px, .66fr) !important;
    gap: clamp(8px, 1.8vw, 20px) !important;
    align-items: center !important;
  }

  .index-page .toowie-product .hero-copy:where([data-page="index"], [data-page="index"] *) {
    min-width: 0;
    max-width: none !important;
  }

  .index-page .toowie-product .hero h1:where([data-page="index"], [data-page="index"] *) {
    max-width: none;
    margin: 0 0 clamp(12px, 2vw, 18px) !important;
    font-size: clamp(1.22rem, 4.8vw, 3.2rem) !important;
    line-height: .98;
  }

  .index-page .toowie-product .hero-subline:where([data-page="index"], [data-page="index"] *) {
    max-width: none;
    margin: 0 0 clamp(7px, 1.2vw, 12px) !important;
    font-size: clamp(.72rem, 1.65vw, 1.08rem) !important;
    line-height: 1.34;
  }

  .index-page .toowie-product .hero-lead:where([data-page="index"], [data-page="index"] *) {
    max-width: none;
    font-size: clamp(.63rem, 1.32vw, .98rem) !important;
    line-height: 1.58;
  }

  .index-page .toowie-product .hero-actions:where([data-page="index"], [data-page="index"] *) {
    flex-wrap: nowrap;
    gap: clamp(5px, .9vw, 10px);
    margin-top: clamp(14px, 2.4vw, 24px);
  }

  .index-page .toowie-product .hero .btn:where([data-page="index"], [data-page="index"] *) {
    min-height: clamp(31px, 4.1vw, 43px);
    padding: 0 clamp(8px, 1.35vw, 15px);
    border-radius: clamp(8px, 1.15vw, 12px);
    font-size: clamp(8px, 1.16vw, 12px);
    white-space: nowrap;
  }

  .index-page .toowie-product .hero-points:where([data-page="index"], [data-page="index"] *) {
    gap: clamp(6px, 1vw, 12px) clamp(9px, 1.4vw, 18px);
    margin-top: clamp(14px, 2.2vw, 24px);
    font-size: clamp(.42rem, .88vw, .74rem);
  }

  .index-page .toowie-product .hero-visual:where([data-page="index"], [data-page="index"] *) {
    width: 100%;
    min-width: 0;
    margin-right: 0 !important;
    min-height: clamp(190px, 39vw, 420px);
  }

  .index-page .toowie-product .browser-frame:where([data-page="index"], [data-page="index"] *) {
    border-radius: clamp(12px, 2.2vw, 22px);
  }

  .index-page .toowie-product .hero .hero-browser:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .hero .capability-browser:where([data-page="index"], [data-page="index"] *) {
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
    transform-origin: center left;
  }

  .index-page .toowie-product .browser-bar:where([data-page="index"], [data-page="index"] *) {
    height: clamp(28px, 3.5vw, 42px);
    gap: clamp(7px, 1vw, 14px);
    padding: 0 clamp(8px, 1vw, 14px);
  }

  .index-page .toowie-product .browser-dots:where([data-page="index"], [data-page="index"] *) {
    gap: clamp(3px, .45vw, 5px);
  }

  .index-page .toowie-product .browser-dots i:where([data-page="index"], [data-page="index"] *) {
    width: clamp(5px, .7vw, 8px);
    height: clamp(5px, .7vw, 8px);
  }

  .index-page .toowie-product .browser-label:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(5px, .92vw, 10px);
  }

  .index-page .toowie-product .live-pill:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .capability-scroll-hint:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(4px, .8vw, 9px);
    padding: clamp(3px, .45vw, 5px) clamp(5px, .7vw, 8px);
  }

  .index-page .toowie-product #akquise-manager .float-card:where([data-page="index"], [data-page="index"] *) {
    gap: clamp(5px, .8vw, 10px);
    padding: clamp(6px, .9vw, 11px) clamp(7px, 1vw, 13px);
    border-radius: clamp(8px, 1.2vw, 14px);
    font-size: clamp(6px, .9vw, 11px);
  }

  .index-page .toowie-product #akquise-manager .float-icon:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #akquise-manager .float-number:where([data-page="index"], [data-page="index"] *) {
    width: clamp(20px, 2.9vw, 34px);
    height: clamp(20px, 2.9vw, 34px);
    border-radius: clamp(6px, .9vw, 10px);
  }

  .index-page .toowie-product #akquise-manager .float-card small:where([data-page="index"], [data-page="index"] *) {
    margin-top: 1px;
    font-size: clamp(5px, .75vw, 10px);
  }

  .index-page .toowie-product .modern-capability-layout:where([data-page="index"], [data-page="index"] *) {
    padding-top: 8.23vw !important;
    padding-bottom: clamp(24px, 4vw, 38px) !important;
  }

  .index-page .toowie-product .modern-capability-layout > .shell.hero-grid:where([data-page="index"], [data-page="index"] *) {
    grid-template-columns: minmax(0, 1.28fr) minmax(118px, .72fr) !important;
    gap: clamp(8px, 1.8vw, 20px) !important;
  }

  .index-page .toowie-product .modern-capability-layout .capability-visual:where([data-page="index"], [data-page="index"] *) {
    margin-right: 0 !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 980px) {
  .index-page .toowie-product .hero .eyebrow:where([data-page="index"], [data-page="index"] *) {
    display: none !important;
  }
}

@media (max-width: 399px) {
  .index-page .toowie-product .hero:where([data-page="index"], [data-page="index"] *) {
    padding: 102px 0 22px !important;
  }

  .index-page .toowie-product .hero > .shell.hero-grid:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .modern-capability-layout > .shell.hero-grid:where([data-page="index"], [data-page="index"] *) {
    width: min(1180px, calc(100% - 16px));
    grid-template-columns: minmax(0, 1.38fr) minmax(102px, .62fr) !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .index-page .toowie-product .hero-copy:where([data-page="index"], [data-page="index"] *) {
    min-width: 0;
    max-width: none !important;
  }

  .index-page .toowie-product .hero h1:where([data-page="index"], [data-page="index"] *) {
    max-width: none;
    margin: 0 0 10px !important;
    font-size: clamp(1.02rem, 7.8vw, 1.68rem) !important;
    line-height: .98;
  }

  .index-page .toowie-product .hero-subline:where([data-page="index"], [data-page="index"] *) {
    margin: 0 0 6px !important;
    font-size: clamp(.60rem, 3.4vw, .84rem) !important;
    line-height: 1.3;
  }

  .index-page .toowie-product .hero-lead:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(.54rem, 2.95vw, .76rem) !important;
    line-height: 1.48;
  }

  .index-page .toowie-product .hero-actions:where([data-page="index"], [data-page="index"] *) {
    gap: 6px;
    margin-top: 12px;
  }

  .index-page .toowie-product .hero .btn:where([data-page="index"], [data-page="index"] *) {
    min-height: 29px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: clamp(7px, 2.05vw, 9px);
  }

  .index-page .toowie-product .hero-points:where([data-page="index"], [data-page="index"] *) {
    gap: 6px 10px;
    margin-top: 10px;
    font-size: clamp(.36rem, 1.95vw, .58rem);
  }

  .index-page .toowie-product .hero-visual:where([data-page="index"], [data-page="index"] *) {
    width: 100%;
    min-width: 0;
    margin-right: 0 !important;
    min-height: clamp(150px, 45vw, 205px);
  }

  .index-page .toowie-product .hero .hero-browser:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .hero .capability-browser:where([data-page="index"], [data-page="index"] *) {
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
  }

  .index-page .toowie-product .browser-frame:where([data-page="index"], [data-page="index"] *) {
    border-radius: 10px;
  }

  .index-page .toowie-product .browser-bar:where([data-page="index"], [data-page="index"] *) {
    height: 26px;
    gap: 7px;
    padding: 0 8px;
  }

  .index-page .toowie-product .browser-dots i:where([data-page="index"], [data-page="index"] *) {
    width: 5px;
    height: 5px;
  }

  .index-page .toowie-product .browser-label:where([data-page="index"], [data-page="index"] *) {
    font-size: 5px;
  }

  .index-page .toowie-product .live-pill:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .capability-scroll-hint:where([data-page="index"], [data-page="index"] *) {
    font-size: 4px;
    padding: 3px 5px;
  }

  .index-page .toowie-product #akquise-manager .float-card:where([data-page="index"], [data-page="index"] *) {
    gap: 4px;
    padding: 5px 6px;
    border-radius: 8px;
    font-size: 6px;
  }

  .index-page .toowie-product #akquise-manager .float-icon:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #akquise-manager .float-number:where([data-page="index"], [data-page="index"] *) {
    width: 18px;
    height: 18px;
    border-radius: 6px;
  }

  .index-page .toowie-product #akquise-manager .float-card small:where([data-page="index"], [data-page="index"] *) {
    font-size: 5px;
  }

  .index-page .toowie-product .modern-capability-layout:where([data-page="index"], [data-page="index"] *) {
    padding-top: 102px !important;
    padding-bottom: 22px !important;
  }

  .index-page .toowie-product .modern-capability-layout .capability-visual:where([data-page="index"], [data-page="index"] *) {
    margin-right: 0 !important;
    padding-top: 0 !important;
  }
}

/* Blaue Hero-Bereiche Desktop: rechte Sicherheitsabstaende zum Viewport erhalten. */
/* 02–04: Nur die Textspalte nutzt links dieselbe breite Ausrichtung wie 01.
   Das Browser-Visual rechts bleibt exakt an seiner bisherigen Position. */
@media (min-width: 1244px) {
  .index-page .toowie-product #it-systemhaus .hero-copy:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-copy:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .hero-copy:where([data-page="index"], [data-page="index"] *) {
    --blue-hero-copy-extension: calc((min(1520px, calc(100vw - 64px)) - 1180px) / 2);
    position: relative;
    left: calc(0px - var(--blue-hero-copy-extension));
    width: calc(100% + var(--blue-hero-copy-extension)) !important;
  }
}

/* IT / Website / TOOWIE: Inhalt skaliert zwischen 400px und 980px mit.
   Die zweispaltige Darstellung bleibt bis 399px erhalten. */
@media (min-width: 400px) and (max-width: 980px) {
  .index-page .toowie-product #it-systemhaus > .shell.hero-grid:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung > .shell.hero-grid:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero > .shell.hero-grid:where([data-page="index"], [data-page="index"] *) {
    /* Das bereits abgestimmte Text/Visual-Verhaeltnis beibehalten. */
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) !important;
    gap: clamp(8px, 1.5vw, 18px) !important;
  }

  .index-page .toowie-product #it-systemhaus .hero-copy:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-copy:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .hero-copy:where([data-page="index"], [data-page="index"] *) {
    min-width: 0 !important;
    padding-right: 0 !important;
  }

  /* Typografie 02–04 exakt in derselben Skalierung wie beim Akquise-Hero. */
  .index-page .toowie-product #it-systemhaus h1:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung h1:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero h1:where([data-page="index"], [data-page="index"] *) {
    max-width: none !important;
    margin: 0 0 clamp(12px, 2vw, 18px) !important;
    /* Klein genug fuer die schmale linke Spalte, ohne in das Visual zu laufen. */
    font-size: clamp(.92rem, 4.05vw, 2.55rem) !important;
    line-height: .98 !important;
  }

  .index-page .toowie-product #it-systemhaus .hero-subline:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-subline:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .hero-subline:where([data-page="index"], [data-page="index"] *) {
    max-width: none !important;
    margin: 0 0 clamp(7px, 1.2vw, 12px) !important;
    font-size: clamp(.72rem, 1.65vw, 1.08rem) !important;
    line-height: 1.34 !important;
  }

  .index-page .toowie-product #it-systemhaus .hero-lead:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-lead:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .hero-lead:where([data-page="index"], [data-page="index"] *) {
    max-width: none !important;
    font-size: clamp(.63rem, 1.32vw, .98rem) !important;
    line-height: 1.58 !important;
  }

  /* Button-Boxen ebenfalls wie bei 01: zwei gleich grosse Boxen nebeneinander. */
  .index-page .toowie-product #it-systemhaus .hero-actions:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-actions:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .hero-actions:where([data-page="index"], [data-page="index"] *) {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: clamp(5px, .9vw, 10px) !important;
    margin-top: clamp(14px, 2.4vw, 24px) !important;
  }

  .index-page .toowie-product #it-systemhaus .hero-actions .btn:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-actions .btn:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .hero-actions .btn:where([data-page="index"], [data-page="index"] *) {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    min-height: clamp(31px, 4.1vw, 43px) !important;
    padding: 0 clamp(8px, 1.35vw, 15px) !important;
    border-radius: clamp(8px, 1.15vw, 12px) !important;
    font-size: clamp(8px, 1.16vw, 12px) !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .index-page .toowie-product #it-systemhaus .hero-points:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-points:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .hero-points:where([data-page="index"], [data-page="index"] *) {
    gap: clamp(6px, 1vw, 12px) clamp(9px, 1.4vw, 18px) !important;
    margin-top: clamp(14px, 2.2vw, 24px) !important;
    font-size: clamp(.42rem, .88vw, .74rem) !important;
    line-height: 1.25 !important;
  }

  /* Die rechte Browser-Box skaliert nun genauso kompakt wie der Screenshot
     im Kaltakquise-Hero, statt bei Tabletbreiten ueber 500px hoch zu bleiben. */
  .index-page .toowie-product #it-systemhaus .capability-scroll-area:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-scroll-area:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-scroll-area:where([data-page="index"], [data-page="index"] *) {
    height: clamp(280px, 45vw, 480px) !important;
    min-height: 0 !important;
  }
}

@media (max-width: 399px) {
  .index-page .toowie-product .hero > .shell.hero-grid:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .modern-capability-layout > .shell.hero-grid:where([data-page="index"], [data-page="index"] *) {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .index-page .toowie-product .hero-copy:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .hero-visual:where([data-page="index"], [data-page="index"] *) {
    width: 100% !important;
  }
}


/* 02–04: Inhalt im rechten Browser proportional mitskalieren.
   Bild und Beschreibung bleiben von 400px bis 980px nebeneinander sichtbar. */
@media (min-width: 400px) and (max-width: 980px) {
  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide):where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide):where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide):where([data-page="index"], [data-page="index"] *) {
    height: 100% !important;
    min-height: 100% !important;
    grid-template-columns: 42% 58% !important;
    grid-template-rows: 100% !important;
    grid-template-areas: "image info" !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-image:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-image:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-image:where([data-page="index"], [data-page="index"] *) {
    grid-area: image !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-image img:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-image img:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-image img:where([data-page="index"], [data-page="index"] *) {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *) {
    grid-area: info !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: clamp(7px, 1.55vw, 18px) !important;
    border-top: 0 !important;
    border-left: 1px solid #eee5d8 !important;
    overflow: hidden !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-content:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-content:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-content:where([data-page="index"], [data-page="index"] *) {
    height: 100% !important;
    padding: 0 0 clamp(24px, 4vw, 48px) !important;
    overflow: hidden !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-title-row:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-title-row:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-title-row:where([data-page="index"], [data-page="index"] *) {
    gap: clamp(4px, .8vw, 10px) !important;
    margin-bottom: clamp(4px, .9vw, 10px) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-icon:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-icon:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-icon:where([data-page="index"], [data-page="index"] *) {
    flex: 0 0 clamp(20px, 3.5vw, 42px) !important;
    width: clamp(20px, 3.5vw, 42px) !important;
    height: clamp(20px, 3.5vw, 42px) !important;
    font-size: clamp(.50rem, 1.25vw, 1rem) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide h3:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide h3:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *) {
    margin: 0 0 clamp(3px, .65vw, 8px) !important;
    padding: 0 0 clamp(3px, .6vw, 7px) !important;
    font-size: clamp(.58rem, 1.55vw, 1.18rem) !important;
    line-height: 1.08 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .capability-slide-quote:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-quote:where([data-page="index"], [data-page="index"] *) {
    margin-bottom: clamp(4px, .8vw, 9px) !important;
    font-size: clamp(.43rem, 1.02vw, .79rem) !important;
    line-height: 1.3 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *) {
    gap: clamp(3px, .55vw, 7px) !important;
    margin-bottom: clamp(4px, .7vw, 9px) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *) {
    grid-template-columns: clamp(5px, .8vw, 10px) minmax(0, 1fr) !important;
    gap: clamp(4px, .7vw, 8px) !important;
    padding: clamp(3px, .55vw, 7px) clamp(4px, .7vw, 9px) !important;
    border-radius: clamp(5px, .9vw, 11px) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before,
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before,
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before {
    width: clamp(4px, .55vw, 7px) !important;
    height: clamp(4px, .55vw, 7px) !important;
    margin-top: clamp(2px, .4vw, 5px) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(.40rem, .9vw, .70rem) !important;
    line-height: 1.18 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(.36rem, .78vw, .63rem) !important;
    line-height: 1.25 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-provider:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-provider:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(.40rem, .86vw, .70rem) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-cta:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-cta:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-cta:where([data-page="index"], [data-page="index"] *) {
    right: clamp(7px, 1.55vw, 18px) !important;
    bottom: clamp(7px, 1.4vw, 16px) !important;
    padding: clamp(4px, .7vw, 8px) clamp(6px, 1vw, 12px) !important;
    font-size: clamp(.39rem, .84vw, .68rem) !important;
  }
}


/* 02–04: Zwischen 981px und 1180px bleibt die Vorschau ebenfalls zweispaltig.
   Das Bild nimmt die komplette linke Höhe ein; die Infotexte werden kompakter,
   damit Bild und Inhalt auf einen Blick sichtbar bleiben. */
@media (min-width: 981px) and (max-width: 1180px) {
  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide):where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide):where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide):where([data-page="index"], [data-page="index"] *) {
    height: 540px !important;
    min-height: 540px !important;
    grid-template-columns: 44% 56% !important;
    grid-template-rows: 100% !important;
    grid-template-areas: "image info" !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-image:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-image:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-image:where([data-page="index"], [data-page="index"] *) {
    grid-area: image !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-image img:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-image img:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-image img:where([data-page="index"], [data-page="index"] *) {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *) {
    grid-area: info !important;
    height: 100% !important;
    min-width: 0 !important;
    padding: clamp(18px, 2vw, 24px) clamp(16px, 1.8vw, 22px) !important;
    overflow: hidden !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-content:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-content:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-content:where([data-page="index"], [data-page="index"] *) {
    height: 100% !important;
    padding: 0 0 58px !important;
    overflow: hidden !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-title-row:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-title-row:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-title-row:where([data-page="index"], [data-page="index"] *) {
    gap: 10px !important;
    margin-bottom: 10px !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-icon:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-icon:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-icon:where([data-page="index"], [data-page="index"] *) {
    flex: 0 0 clamp(36px, 3.6vw, 42px) !important;
    width: clamp(36px, 3.6vw, 42px) !important;
    height: clamp(36px, 3.6vw, 42px) !important;
    font-size: clamp(.86rem, 1.15vw, 1rem) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide h3:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide h3:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *) {
    margin: 0 0 8px !important;
    padding-bottom: 8px !important;
    font-size: clamp(1.02rem, 1.55vw, 1.28rem) !important;
    line-height: 1.08 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .capability-slide-quote:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-quote:where([data-page="index"], [data-page="index"] *) {
    margin-bottom: 10px !important;
    font-size: clamp(.68rem, .92vw, .78rem) !important;
    line-height: 1.38 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *) {
    gap: 6px !important;
    margin-bottom: 8px !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *) {
    grid-template-columns: 10px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 6px 8px !important;
    border-radius: 9px !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before,
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before,
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before {
    width: 6px !important;
    height: 6px !important;
    margin-top: 5px !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *) {
    margin-bottom: 1px !important;
    font-size: clamp(.62rem, .79vw, .70rem) !important;
    line-height: 1.2 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(.57rem, .72vw, .64rem) !important;
    line-height: 1.28 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-provider:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-provider:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(.62rem, .78vw, .69rem) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-cta:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-cta:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-cta:where([data-page="index"], [data-page="index"] *) {
    right: clamp(16px, 1.8vw, 22px) !important;
    bottom: 16px !important;
    padding: 7px 11px !important;
    font-size: clamp(.61rem, .76vw, .68rem) !important;
  }
}

@media (min-width: 981px) {
  .index-page .toowie-product #akquise-manager .hero-visual:where([data-page="index"], [data-page="index"] *) {
    margin-right: clamp(-130px, calc(614px - 50vw), 0px) !important;
  }

  .index-page .toowie-product #akquise-manager .float-card-call:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #akquise-manager .float-card-flow:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #akquise-manager .float-card-notes:where([data-page="index"], [data-page="index"] *) {
    right: clamp(-142px, calc(740px - 50vw), -4px) !important;
  }

  /* IT, technische Erweiterungen und TOOWIE:
     Browser bleibt gross, nutzt aber nur den tatsaechlich freien Platz rechts.
     Dadurch bleiben bei schmaleren Desktop-Breiten mindestens ca. 20px Luft. */
  .index-page .toowie-product #it-systemhaus .capability-visual:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-visual:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-visual:where([data-page="index"], [data-page="index"] *) {
    margin-right: clamp(-280px, calc(610px - 50vw), 0px) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-browser:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-browser:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-browser:where([data-page="index"], [data-page="index"] *) {
    width: 100% !important;
  }
}


/* 02–04: 50/50-Vorschau mit fließender Typografie.
   Bild und Infobereich teilen sich ab 400px exakt den verfügbaren Platz.
   Die Größen im Infobereich orientieren sich an dessen tatsächlicher Breite
   und Höhe; unten bleibt dabei immer Platz für den CTA. */
@media (min-width: 400px) {
  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide):where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide):where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide):where([data-page="index"], [data-page="index"] *) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas: "image info" !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-image:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-image:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-image:where([data-page="index"], [data-page="index"] *) {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *) {
    min-width: 0 !important;
    height: 100% !important;
    container-type: size;
    padding: clamp(8px, 3.8cqh, 34px) clamp(8px, 3.2cqw, 34px) !important;
    overflow: hidden !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-content:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-content:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-content:where([data-page="index"], [data-page="index"] *) {
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 0 clamp(36px, 10cqh, 68px) !important;
    overflow: hidden !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-title-row:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-title-row:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-title-row:where([data-page="index"], [data-page="index"] *) {
    gap: clamp(5px, 2.5cqh, 16px) !important;
    margin-bottom: clamp(5px, 2.4cqh, 18px) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-icon:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-icon:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-icon:where([data-page="index"], [data-page="index"] *) {
    flex: 0 0 clamp(22px, min(9cqh, 12cqw), 58px) !important;
    width: clamp(22px, min(9cqh, 12cqw), 58px) !important;
    height: clamp(22px, min(9cqh, 12cqw), 58px) !important;
    font-size: clamp(.54rem, min(3.5cqh, 4.5cqw), 1.38rem) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide h3:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide h3:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *) {
    margin: 0 !important;
    padding-bottom: clamp(4px, 2cqh, 14px) !important;
    font-size: clamp(.58rem, min(5.8cqh, 8cqw), 2.12rem) !important;
    line-height: 1.08 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide h3:where([data-page="index"], [data-page="index"] *)::after,
  .index-page .toowie-product #website-entwicklung .capability-slide h3:where([data-page="index"], [data-page="index"] *)::after,
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *)::after {
    width: clamp(18px, min(8cqh, 13cqw), 48px) !important;
    height: clamp(1px, .5cqh, 3px) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .capability-slide-quote:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-quote:where([data-page="index"], [data-page="index"] *) {
    margin-bottom: clamp(5px, 2.5cqh, 18px) !important;
    font-size: clamp(.48rem, min(3.2cqh, 4cqw), 1.04rem) !important;
    line-height: 1.42 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *) {
    gap: clamp(3px, 1.6cqh, 10px) !important;
    margin-bottom: clamp(3px, 1.8cqh, 12px) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *) {
    grid-template-columns: clamp(6px, min(2.6cqh, 3cqw), 18px) minmax(0, 1fr) !important;
    gap: clamp(4px, 1.8cqh, 12px) !important;
    padding: clamp(4px, 1.55cqh, 10px) clamp(5px, 2.4cqw, 12px) !important;
    border-radius: clamp(6px, 2.2cqh, 14px) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before,
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before,
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before {
    width: clamp(4px, 1.4cqh, 8px) !important;
    height: clamp(4px, 1.4cqh, 8px) !important;
    margin-top: clamp(2px, 1.1cqh, 7px) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *) {
    margin-bottom: clamp(1px, .45cqh, 3px) !important;
    font-size: clamp(.43rem, min(2.7cqh, 3.5cqw), .90rem) !important;
    line-height: 1.25 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(.40rem, min(2.4cqh, 3.1cqw), .83rem) !important;
    line-height: 1.34 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-provider:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-provider:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(.43rem, min(2.5cqh, 3.2cqw), .88rem) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-cta:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-cta:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-cta:where([data-page="index"], [data-page="index"] *) {
    right: clamp(8px, 3.2cqw, 34px) !important;
    bottom: clamp(8px, 3.2cqh, 34px) !important;
    padding: clamp(4px, 1.45cqh, 10px) clamp(7px, 3cqw, 16px) !important;
    font-size: clamp(.42rem, min(2.35cqh, 3cqw), .84rem) !important;
  }
}


/* 02–04: echtes 50/50-Layout mit in der Hoehe mitwachsendem Infobereich.
   Der Text nutzt den vorhandenen Platz bis knapp oberhalb des CTA;
   Schrift, Abstaende und Karten skalieren dabei mit der tatsaechlichen Panel-Hoehe. */
@media (min-width: 981px) {
  .index-page .toowie-product #it-systemhaus:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero:where([data-page="index"], [data-page="index"] *) {
    padding-top: clamp(36px, 4vw, 58px) !important;
    padding-bottom: clamp(28px, 3.2vw, 46px) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-scroll-area:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-scroll-area:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-scroll-area:where([data-page="index"], [data-page="index"] *) {
    height: clamp(470px, 45vw, 560px) !important;
    min-height: 0 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide):where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide):where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide):where([data-page="index"], [data-page="index"] *) {
    height: 100% !important;
    min-height: 100% !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: 100% !important;
    grid-template-areas: "image info" !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-image:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-image:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-image:where([data-page="index"], [data-page="index"] *) {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *) {
    height: 100% !important;
    min-height: 0 !important;
    container-type: size;
    padding: clamp(18px, 4.4cqh, 30px) clamp(18px, 4.5cqw, 30px) !important;
    overflow: hidden !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-content:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-content:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-content:where([data-page="index"], [data-page="index"] *) {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 0 clamp(48px, 11cqh, 68px) !important;
    overflow: hidden !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-title-row:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-title-row:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-title-row:where([data-page="index"], [data-page="index"] *) {
    flex: 0 0 auto;
    gap: clamp(10px, 2.5cqh, 16px) !important;
    margin-bottom: clamp(10px, 2.3cqh, 15px) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-icon:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-icon:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-icon:where([data-page="index"], [data-page="index"] *) {
    flex-basis: clamp(40px, 9.2cqh, 54px) !important;
    width: clamp(40px, 9.2cqh, 54px) !important;
    height: clamp(40px, 9.2cqh, 54px) !important;
    font-size: clamp(.95rem, 3.4cqh, 1.3rem) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide h3:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide h3:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *) {
    padding-bottom: clamp(8px, 2.2cqh, 13px) !important;
    font-size: clamp(1.45rem, 5.5cqh, 2.08rem) !important;
    line-height: 1.06 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .capability-slide-quote:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-quote:where([data-page="index"], [data-page="index"] *) {
    flex: 0 0 auto;
    margin-bottom: clamp(10px, 2.5cqh, 16px) !important;
    font-size: clamp(.88rem, 3.0cqh, 1.05rem) !important;
    line-height: 1.5 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    gap: clamp(8px, 1.9cqh, 12px) !important;
    margin: 0 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *) {
    min-height: 0 !important;
    height: 100% !important;
    align-items: center !important;
    grid-template-columns: clamp(10px, 2.6cqh, 16px) minmax(0, 1fr) !important;
    gap: clamp(8px, 2cqh, 12px) !important;
    padding: clamp(8px, 2cqh, 12px) clamp(10px, 3cqw, 16px) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before,
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before,
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before {
    width: clamp(7px, 1.6cqh, 9px) !important;
    height: clamp(7px, 1.6cqh, 9px) !important;
    margin-top: 0 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *) {
    margin-bottom: clamp(2px, .7cqh, 4px) !important;
    font-size: clamp(.80rem, 2.65cqh, .96rem) !important;
    line-height: 1.25 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(.74rem, 2.35cqh, .87rem) !important;
    line-height: 1.38 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-cta:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-cta:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-cta:where([data-page="index"], [data-page="index"] *) {
    right: clamp(18px, 4.5cqw, 30px) !important;
    bottom: clamp(16px, 3.8cqh, 24px) !important;
    padding: clamp(8px, 1.8cqh, 10px) clamp(12px, 3.5cqw, 16px) !important;
    font-size: clamp(.72rem, 2.15cqh, .84rem) !important;
  }
}


/* 02–04: kompakte Zwischenstufe 981–1300px.
   Wenn Texte durch die schmalere rechte Haelfte umbrechen, duerfen die Karten
   nicht mehr mit festen gleich hohen Grid-Zeilen kollidieren. Gleichzeitig
   wird die Typografie mit der Viewportbreite kleiner. */
@media (min-width: 981px) and (max-width: 1300px) {
  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *) {
    padding: clamp(12px, 1.55vw, 20px) clamp(11px, 1.45vw, 19px) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-content:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-content:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-content:where([data-page="index"], [data-page="index"] *) {
    padding-bottom: clamp(42px, 5vw, 56px) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-title-row:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-title-row:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-title-row:where([data-page="index"], [data-page="index"] *) {
    gap: clamp(7px, .8vw, 10px) !important;
    margin-bottom: clamp(7px, .8vw, 10px) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-icon:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-icon:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-icon:where([data-page="index"], [data-page="index"] *) {
    flex-basis: clamp(32px, 3.2vw, 42px) !important;
    width: clamp(32px, 3.2vw, 42px) !important;
    height: clamp(32px, 3.2vw, 42px) !important;
    font-size: clamp(.76rem, 1.05vw, 1rem) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide h3:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide h3:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *) {
    padding-bottom: clamp(6px, .7vw, 9px) !important;
    font-size: clamp(1.00rem, 1.55vw, 1.28rem) !important;
    line-height: 1.04 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .capability-slide-quote:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-quote:where([data-page="index"], [data-page="index"] *) {
    margin-bottom: clamp(7px, .8vw, 10px) !important;
    font-size: clamp(.62rem, .95vw, .76rem) !important;
    line-height: 1.34 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *) {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    grid-template-rows: repeat(3, auto) !important;
    grid-auto-rows: auto !important;
    align-content: start !important;
    gap: clamp(5px, .55vw, 8px) !important;
    margin: 0 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *) {
    height: auto !important;
    min-height: 0 !important;
    align-items: start !important;
    grid-template-columns: clamp(7px, .85vw, 10px) minmax(0, 1fr) !important;
    gap: clamp(5px, .62vw, 8px) !important;
    padding: clamp(5px, .62vw, 8px) clamp(6px, .75vw, 10px) !important;
    border-radius: clamp(7px, .8vw, 10px) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before,
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before,
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before {
    width: clamp(5px, .55vw, 7px) !important;
    height: clamp(5px, .55vw, 7px) !important;
    margin-top: .35em !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *) {
    margin-bottom: 1px !important;
    font-size: clamp(.60rem, .88vw, .72rem) !important;
    line-height: 1.16 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(.54rem, .78vw, .66rem) !important;
    line-height: 1.22 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-provider:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-provider:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(.58rem, .82vw, .70rem) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-cta:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-cta:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-cta:where([data-page="index"], [data-page="index"] *) {
    right: clamp(11px, 1.45vw, 19px) !important;
    bottom: clamp(11px, 1.35vw, 18px) !important;
    padding: clamp(6px, .65vw, 8px) clamp(9px, .9vw, 12px) !important;
    font-size: clamp(.58rem, .76vw, .68rem) !important;
  }
}


/* 02–04: 981–1300px proportional ausfuellen statt Inhalt klein in einer grossen Box stehen zu lassen.
   Die Vorschau wird etwas kompakter und die drei Infokarten nutzen den freien Raum bis kurz vor dem CTA.
   min-content verhindert dabei, dass mehrzeilige Texte in die naechste Karte laufen. */
@media (min-width: 981px) and (max-width: 1300px) {
  .index-page .toowie-product #it-systemhaus .capability-scroll-area:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-scroll-area:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-scroll-area:where([data-page="index"], [data-page="index"] *) {
    height: clamp(455px, 43vw, 540px) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-content:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-content:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-content:where([data-page="index"], [data-page="index"] *) {
    padding-bottom: clamp(42px, 4.4vw, 54px) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide h3:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide h3:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(1.04rem, 1.38vw, 1.22rem) !important;
    line-height: 1.05 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .capability-slide-quote:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-quote:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(.68rem, .82vw, .79rem) !important;
    line-height: 1.36 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: repeat(3, minmax(min-content, 1fr)) !important;
    grid-auto-rows: unset !important;
    align-content: stretch !important;
    gap: clamp(5px, .58vw, 8px) !important;
    margin: 0 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *) {
    height: 100% !important;
    min-height: min-content !important;
    align-items: center !important;
    padding: clamp(6px, .68vw, 9px) clamp(7px, .82vw, 11px) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(.64rem, .76vw, .76rem) !important;
    line-height: 1.18 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(.58rem, .68vw, .69rem) !important;
    line-height: 1.27 !important;
  }
}




/* index.html – capability-auto-fit */

/* IT, technische Erweiterungen und TOOWIE: Resthoehe automatisch nutzen,
   ohne Textueberlagerungen. Die drei Feature-Boxen bleiben gleich hoch. */
.index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *),
.index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *),
.index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *) {
  display: flex !important;
  min-height: 0 !important;
  container-type: size;
}

.index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-content:where([data-page="index"], [data-page="index"] *),
.index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-content:where([data-page="index"], [data-page="index"] *),
.index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-content:where([data-page="index"], [data-page="index"] *) {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  gap: clamp(5px, 1.05cqh, 10px) !important;
  overflow: hidden !important;
}

/* Die Spracherkennungs-Slide hat zusaetzlich ein Zitat. Dafuer wird genau
   eine weitere automatische Zeile vorgesehen, ohne den Platz der Boxen zu verkleinern. */
.index-page .toowie-product #it-systemhaus .capability-slide-content:has(> .capability-slide-quote):where([data-page="index"], [data-page="index"] *) {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
}

/* Nur Spracherkennung: Zitat und Kurzbeschreibung bilden gemeinsam die
   Einleitungszeile. So nutzt die Karte dieselbe Hoehenlogik wie alle anderen. */
.index-page .toowie-product #it-systemhaus .speech-recognition-intro:where([data-page="index"], [data-page="index"] *) {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto;
  gap: clamp(5px, 1.05cqh, 10px);
}

.index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-title-row:where([data-page="index"], [data-page="index"] *),
.index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-title-row:where([data-page="index"], [data-page="index"] *),
.index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-title-row:where([data-page="index"], [data-page="index"] *) {
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  gap: clamp(6px, 1.2cqw, 14px) !important;
}

.index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *),
.index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *),
.index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *) {
  min-width: 0 !important;
  margin: 0 !important;
  padding-bottom: clamp(5px, 1cqh, 11px) !important;
  font-size: var(--cap-fit-heading, clamp(.9rem, 2cqw, 1.8rem)) !important;
  line-height: 1.08 !important;
}

.index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
.index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
.index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
.index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-quote:where([data-page="index"], [data-page="index"] *) {
  min-width: 0 !important;
  margin: 0 !important;
  font-size: var(--cap-fit-summary, clamp(.62rem, 1.15cqw, 1rem)) !important;
  line-height: 1.38 !important;
}

.index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *),
.index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *),
.index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *) {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(4px, .85cqh, 9px) !important;
  overflow: hidden !important;
}

.index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *),
.index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *),
.index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *) {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(4px, .9cqh, 9px) clamp(6px, 1.1cqw, 12px) !important;
  grid-template-columns: clamp(7px, 1.15cqw, 14px) minmax(0, 1fr) !important;
  gap: clamp(5px, .9cqw, 10px) !important;
  align-items: start !important;
  align-content: center !important;
  overflow: hidden !important;
}

.index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item > div:where([data-page="index"], [data-page="index"] *),
.index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item > div:where([data-page="index"], [data-page="index"] *),
.index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item > div:where([data-page="index"], [data-page="index"] *) {
  min-width: 0 !important;
  min-height: 0 !important;
}

.index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before,
.index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before,
.index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before {
  align-self: start !important;
  width: clamp(5px, .75cqw, 8px) !important;
  height: clamp(5px, .75cqw, 8px) !important;
  margin-top: .45em !important;
}

.index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *),
.index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *),
.index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *) {
  margin: 0 0 .16em !important;
  font-size: var(--cap-fit-feature-title, clamp(.54rem, 1cqw, .9rem)) !important;
  line-height: 1.22 !important;
}

.index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *),
.index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *),
.index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *) {
  font-size: var(--cap-fit-feature-text, clamp(.5rem, .9cqw, .83rem)) !important;
  line-height: 1.32 !important;
}

.index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-cta:where([data-page="index"], [data-page="index"] *),
.index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-cta:where([data-page="index"], [data-page="index"] *),
.index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-cta:where([data-page="index"], [data-page="index"] *) {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  justify-self: end !important;
  align-self: end !important;
  margin: 0 !important;
  padding: clamp(5px, .9cqh, 9px) clamp(9px, 1.55cqw, 16px) !important;
  font-size: var(--cap-fit-cta, clamp(.55rem, .9cqw, .82rem)) !important;
  white-space: nowrap !important;
}

/* Unterhalb des 980px-Punkts bleibt der obere und untere Innenabstand
   auf derselben fließenden Linie wie knapp oberhalb des Breakpoints. */
@media (min-width: 400px) and (max-width: 980px) {
  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *) {
    padding-top: clamp(12px, 1.55vw, 20px) !important;
    padding-bottom: clamp(12px, 1.55vw, 20px) !important;
  }
}


/* index.html – toowie-overview-auto-fit */

/* TOOWIE: Die erste Uebersicht nutzt exakt die vorhandene Browserhoehe.
   Dadurch sind Logo und der komplette Weg von Verstehen bis Weiterentwickeln
   ohne internes Scrollen sichtbar. */
.index-page .toowie-product #toowie-identity .toowie-meaning-slide:where([data-page="index"], [data-page="index"] *),
.index-page .toowie-product #toowie-identity .toowie-meaning-slide .capability-slide-panel:where([data-page="index"], [data-page="index"] *),
.index-page .toowie-product #toowie-identity .toowie-brand-stage:where([data-page="index"], [data-page="index"] *) {
  box-sizing: border-box !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
}

.index-page .toowie-product #toowie-identity .toowie-meaning-slide:where([data-page="index"], [data-page="index"] *) {
  grid-template-rows: 100% !important;
  overflow: hidden !important;
}

.index-page .toowie-product #toowie-identity .toowie-meaning-slide .capability-slide-panel:where([data-page="index"], [data-page="index"] *) {
  padding: 0 !important;
  overflow: hidden !important;
}

.index-page .toowie-product #toowie-identity .toowie-brand-stage:where([data-page="index"], [data-page="index"] *) {
  container-type: size;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  padding: clamp(10px, 3.1cqh, 32px) clamp(12px, 3.6cqw, 34px) clamp(9px, 2.8cqh, 28px) !important;
}

.index-page .toowie-product #toowie-identity .toowie-brand-topline:where([data-page="index"], [data-page="index"] *) {
  gap: clamp(7px, 2cqw, 18px) !important;
  padding-bottom: clamp(6px, 2cqh, 14px) !important;
}

.index-page .toowie-product #toowie-identity .toowie-brand-kicker:where([data-page="index"], [data-page="index"] *) {
  gap: clamp(5px, 1.3cqw, 9px) !important;
  font-size: clamp(.50rem, min(2.2cqh, 1.65cqw), .70rem) !important;
}

.index-page .toowie-product #toowie-identity .toowie-brand-kicker i:where([data-page="index"], [data-page="index"] *) {
  width: clamp(5px, 1.5cqh, 8px) !important;
  height: clamp(5px, 1.5cqh, 8px) !important;
}

.index-page .toowie-product #toowie-identity .toowie-brand-topline-text:where([data-page="index"], [data-page="index"] *) {
  font-size: clamp(.48rem, min(2.05cqh, 1.55cqw), .78rem) !important;
}

.index-page .toowie-product #toowie-identity .toowie-brand-logo-scene:where([data-page="index"], [data-page="index"] *) {
  min-height: 0 !important;
  overflow: hidden !important;
}

.index-page .toowie-product #toowie-identity .toowie-brand-logo-shell:where([data-page="index"], [data-page="index"] *) {
  width: min(475px, 72%) !important;
  height: calc(100% - clamp(8px, 3cqh, 18px)) !important;
  min-height: 0 !important;
  max-height: 246px !important;
  padding: clamp(9px, 4.2cqh, 28px) clamp(12px, 4.2cqw, 34px) !important;
  border-radius: clamp(16px, 6cqh, 34px) !important;
}

.index-page .toowie-product #toowie-identity .toowie-brand-logo:where([data-page="index"], [data-page="index"] *) {
  width: min(390px, 94%) !important;
  max-width: 100% !important;
  max-height: 78% !important;
  object-fit: contain !important;
}

.index-page .toowie-product #toowie-identity .toowie-brand-chip:where([data-page="index"], [data-page="index"] *) {
  padding: clamp(4px, 1.5cqh, 8px) clamp(6px, 1.6cqw, 12px) !important;
  font-size: clamp(.46rem, min(1.8cqh, 1.35cqw), .70rem) !important;
}

.index-page .toowie-product #toowie-identity .toowie-brand-journey:where([data-page="index"], [data-page="index"] *) {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(2px, .8cqw, 7px) !important;
  padding: clamp(7px, 2.8cqh, 17px) 0 0 !important;
}

.index-page .toowie-product #toowie-identity .toowie-brand-route:where([data-page="index"], [data-page="index"] *) {
  left: 6.6% !important;
  right: 6.6% !important;
  top: clamp(9px, 3.5cqh, 20px) !important;
  bottom: auto !important;
  width: auto !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(198,155,90,.25), rgba(198,155,90,.72), rgba(198,155,90,.25)) !important;
}

.index-page .toowie-product #toowie-identity .toowie-brand-step:where([data-page="index"], [data-page="index"] *) {
  min-height: 0 !important;
  padding: clamp(9px, 3.3cqh, 17px) clamp(1px, .7cqw, 5px) 0 !important;
  display: block !important;
  text-align: center !important;
}

.index-page .toowie-product #toowie-identity .toowie-brand-step:where([data-page="index"], [data-page="index"] *)::before {
  left: 50% !important;
  top: 0 !important;
  width: clamp(6px, 1.6cqh, 8px) !important;
  height: clamp(6px, 1.6cqh, 8px) !important;
  transform: translateX(-50%) !important;
}

.index-page .toowie-product #toowie-identity .toowie-brand-step b:where([data-page="index"], [data-page="index"] *) {
  margin: 0 0 clamp(1px, .8cqh, 4px) !important;
  font-size: clamp(.43rem, min(1.8cqh, 1.35cqw), .61rem) !important;
}

.index-page .toowie-product #toowie-identity .toowie-brand-step strong:where([data-page="index"], [data-page="index"] *) {
  font-size: clamp(.43rem, min(2cqh, 1.5cqw), .69rem) !important;
  line-height: 1.16 !important;
}

/* Bei den besonders schmalen zweispaltigen Ansichten bleibt der Ablauf
   bewusst horizontal; so passen alle fuenf Schritte in die kompakte Hoehe. */
@media (min-width: 400px) and (max-width: 560px) {
  .index-page .toowie-product #toowie-identity .toowie-brand-topline-text:where([data-page="index"], [data-page="index"] *) {
    display: none !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-logo-shell:where([data-page="index"], [data-page="index"] *) {
    width: min(94%, 300px) !important;
    max-height: 150px !important;
    padding: 7px 10px !important;
    border-radius: 16px !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-chip:where([data-page="index"], [data-page="index"] *) {
    padding: 3px 5px !important;
    font-size: .43rem !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-chip-tech:where([data-page="index"], [data-page="index"] *) { left: 1% !important; top: 19% !important; }
  .index-page .toowie-product #toowie-identity .toowie-brand-chip-praxis:where([data-page="index"], [data-page="index"] *) { right: 1% !important; top: 22% !important; }
  .index-page .toowie-product #toowie-identity .toowie-brand-chip-dialog:where([data-page="index"], [data-page="index"] *) { right: 2% !important; bottom: 10% !important; }

  .index-page .toowie-product #toowie-identity .toowie-brand-step strong:where([data-page="index"], [data-page="index"] *) {
    font-size: .42rem !important;
    letter-spacing: -.02em !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-route span:where([data-page="index"], [data-page="index"] *) {
    left: 0 !important;
    top: 50% !important;
    animation: toowieSignal 7.2s cubic-bezier(.65,0,.35,1) infinite !important;
  }
}

/* Auf sehr kleinen Displays ist der Hero wieder einspaltig. Hier darf der
   Ablauf vertikal bleiben, wird aber ebenfalls in die vorhandenen 500px eingepasst. */
@media (max-width: 399px) {
  .index-page .toowie-product #toowie-identity .toowie-brand-stage:where([data-page="index"], [data-page="index"] *) {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    padding: 14px 12px 14px !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-logo-shell:where([data-page="index"], [data-page="index"] *) {
    width: min(330px, 82%) !important;
    height: min(100%, 205px) !important;
    min-height: 0 !important;
    padding: 14px 18px !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-journey:where([data-page="index"], [data-page="index"] *) {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
    padding: 0 0 0 22px !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-route:where([data-page="index"], [data-page="index"] *) {
    left: 7px !important;
    right: auto !important;
    top: 9px !important;
    bottom: 9px !important;
    width: 1px !important;
    height: auto !important;
    background: linear-gradient(180deg, rgba(198,155,90,.25), rgba(198,155,90,.72), rgba(198,155,90,.25)) !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-step:where([data-page="index"], [data-page="index"] *) {
    min-height: 25px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 26px 1fr !important;
    align-items: center !important;
    text-align: left !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-step:where([data-page="index"], [data-page="index"] *)::before {
    left: -15px !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-step b:where([data-page="index"], [data-page="index"] *) {
    margin: 0 !important;
    font-size: .55rem !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-step strong:where([data-page="index"], [data-page="index"] *) {
    font-size: .62rem !important;
  }
}


/* index.html – capability-detail-heading-spacing */

/* IT, Technik und TOOWIE Detailkarten: ohne goldenen Unterstrich, mit mehr Abstand zum Beschreibungstext. */
.index-page .toowie-product #it-systemhaus .capability-slide h3:where([data-page="index"], [data-page="index"] *)::after,
.index-page .toowie-product #website-entwicklung .capability-slide h3:where([data-page="index"], [data-page="index"] *)::after,
.index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *)::after {
  display: none !important;
  content: none !important;
}

.index-page .toowie-product #it-systemhaus .capability-slide h3:where([data-page="index"], [data-page="index"] *),
.index-page .toowie-product #website-entwicklung .capability-slide h3:where([data-page="index"], [data-page="index"] *),
.index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *) {
  padding-bottom: 0 !important;
}

.index-page .toowie-product #it-systemhaus .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
.index-page .toowie-product #website-entwicklung .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
.index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-summary:where([data-page="index"], [data-page="index"] *) {
  margin-top: clamp(8px, 1.5cqh, 14px) !important;
}


/* index.html – startseite-blaue-hero-actions-400-1250 */

/* 400–1250px: Buttons und Vorteilspunkte in allen blauen Startseiten-Heroes nebeneinander.
   Unter 400px greift weiterhin unverändert die bestehende Smartphone-Darstellung. */
@media (min-width: 400px) and (max-width: 1250px) {
  .index-page .toowie-product .hero-actions:where([data-page="index"], [data-page="index"] *) {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: clamp(5px, .9vw, 10px) !important;
  }

  .index-page .toowie-product .hero-actions .btn:where([data-page="index"], [data-page="index"] *) {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .index-page .toowie-product .hero-points:where([data-page="index"], [data-page="index"] *) {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: clamp(6px, 1vw, 12px) clamp(9px, 1.4vw, 18px) !important;
  }

  .index-page .toowie-product .hero-points span:where([data-page="index"], [data-page="index"] *) {
    width: auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex: 0 1 auto !important;
    align-items: center !important;
  }
}


/* index.html – startseite-akquise-mobile-abstaende-399 */

@media (max-width: 399px) {
  .index-page .toowie-product #akquise-manager h1:where([data-page="index"], [data-page="index"] *) {
    margin-bottom: 6px !important;
  }

  .index-page .toowie-product #akquise-manager .hero-subline:where([data-page="index"], [data-page="index"] *) {
    margin: 0 !important;
  }

  .index-page .toowie-product #akquise-manager .hero-visual:where([data-page="index"], [data-page="index"] *) {
    margin: 12px 0 12px !important;
  }

  .index-page .toowie-product #akquise-manager .hero-lead:where([data-page="index"], [data-page="index"] *) {
    margin: 0 !important;
  }

  .index-page .toowie-product #akquise-manager .hero-actions:where([data-page="index"], [data-page="index"] *) {
    margin-top: 14px !important;
  }

  .index-page .toowie-product #akquise-manager .hero-points:where([data-page="index"], [data-page="index"] *) {
    margin-top: 12px !important;
  }
}


/* index.html – startseite-blaue-hero-mobile-reihenfolge-399 */

/* Bis 400px: alle vier blauen Startseiten-Bereiche einheitlich:
   Überschrift -> Unterüberschrift -> Visual -> Beschreibung -> zwei Buttons -> Vorteile. */
@media (max-width: 400px) {
  .index-page .toowie-product #akquise-manager > .shell.hero-grid:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus > .shell.hero-grid:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung > .shell.hero-grid:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity > .shell.hero-grid:where([data-page="index"], [data-page="index"] *) {
    width: calc(100% - 32px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }

  .index-page .toowie-product #akquise-manager .hero-copy:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .hero-copy:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-copy:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .hero-copy:where([data-page="index"], [data-page="index"] *) {
    display: contents !important;
  }

  .index-page .toowie-product #akquise-manager .eyebrow:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .eyebrow:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .eyebrow:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .eyebrow:where([data-page="index"], [data-page="index"] *) {
    display: none !important;
  }

  .index-page .toowie-product #akquise-manager h1:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus h1:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung h1:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity h1:where([data-page="index"], [data-page="index"] *) {
    order: 1 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 18px !important;
    font-size: clamp(1.55rem, 8.7vw, 2.08rem) !important;
    line-height: 1.02 !important;
  }

  .index-page .toowie-product #akquise-manager .hero-subline:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .hero-subline:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-subline:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .hero-subline:where([data-page="index"], [data-page="index"] *) {
    order: 2 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 16px !important;
    font-size: clamp(.82rem, 4vw, 1rem) !important;
    line-height: 1.42 !important;
  }

  .index-page .toowie-product #akquise-manager .hero-visual:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .hero-visual:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-visual:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .hero-visual:where([data-page="index"], [data-page="index"] *) {
    order: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 0 16px !important;
    padding-top: 0 !important;
    align-self: stretch !important;
  }

  .index-page .toowie-product #akquise-manager .hero-lead:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .hero-lead:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-lead:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .hero-lead:where([data-page="index"], [data-page="index"] *) {
    order: 4 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: clamp(.76rem, 3.65vw, .94rem) !important;
    line-height: 1.62 !important;
  }

  /* Zwei gleich breite Buttons garantiert nebeneinander. */
  .index-page .toowie-product #akquise-manager .hero-actions:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .hero-actions:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-actions:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .hero-actions:where([data-page="index"], [data-page="index"] *) {
    order: 5 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 16px 0 0 !important;
    align-items: stretch !important;
  }

  .index-page .toowie-product #akquise-manager .hero-actions .btn:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .hero-actions .btn:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-actions .btn:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .hero-actions .btn:where([data-page="index"], [data-page="index"] *) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 7px 6px !important;
    border-radius: 10px !important;
    font-size: clamp(.54rem, 2.55vw, .70rem) !important;
    line-height: 1.18 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .index-page .toowie-product #akquise-manager .hero-points:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .hero-points:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-points:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .hero-points:where([data-page="index"], [data-page="index"] *) {
    order: 6 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 7px 14px !important;
    margin: 16px 0 0 !important;
    font-size: clamp(.60rem, 2.85vw, .74rem) !important;
  }

  .index-page .toowie-product #akquise-manager .hero-points span:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .hero-points span:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-points span:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .hero-points span:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #akquise-manager .hero-points i:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .hero-points i:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-points i:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .hero-points i:where([data-page="index"], [data-page="index"] *) {
    color: #d8b77f !important;
  }

  .index-page .toowie-product #akquise-manager .hero-points span:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .hero-points span:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-points span:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .hero-points span:where([data-page="index"], [data-page="index"] *) {
    width: auto !important;
    min-width: 0 !important;
    display: inline-flex !important;
    flex: 0 1 auto !important;
    align-items: center !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-scroll-area:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-scroll-area:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-scroll-area:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .capability-slide:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:where([data-page="index"], [data-page="index"] *) {
    height: 320px !important;
    min-height: 320px !important;
  }
}


/* index.html – startseite-hero-buttons-mobile-fix */

@media (max-width: 399px) {
  .index-page .philosophy-home-actions:where([data-page="index"], [data-page="index"] *) {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .index-page .philosophy-home-actions .philosophy-btn:where([data-page="index"], [data-page="index"] *) {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    color: #001428 !important;
    font-size: clamp(.54rem, 2.55vw, .70rem) !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }
}


/* index.html – startseite-philosophy-path-mobile-horizontal-399 */

@media (max-width: 399px) {
  .index-page .philosophy-path:where([data-page="index"], [data-page="index"] *) {
    width: 100% !important;
    max-width: none !important;
    margin: 28px 0 0 !important;
    padding: 18px 0 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .index-page .philosophy-path-item[href]:where([data-page="index"], [data-page="index"] *) {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    border-radius: 8px !important;
  }

  .index-page .philosophy-path-item > div:where([data-page="index"], [data-page="index"] *) {
    min-width: 0 !important;
  }

  .index-page .path-octagon:where([data-page="index"], [data-page="index"] *) {
    width: 25px !important;
    height: 25px !important;
    flex: 0 0 25px !important;
    font-size: .57rem !important;
  }

  .index-page .philosophy-path-item strong:where([data-page="index"], [data-page="index"] *) {
    display: block !important;
    font-size: clamp(.54rem, 2.35vw, .64rem) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  .index-page .philosophy-path-item small:where([data-page="index"], [data-page="index"] *) {
    display: none !important;
  }

  .index-page .philosophy-path-line:where([data-page="index"], [data-page="index"] *) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 1px !important;
    margin: 0 !important;
    opacity: .65 !important;
  }
}


/* index.html – startseite-hero-mobile-kompakter-399 */

@media (max-width: 399px) {
  .index-page .index-hero.philosophy-home-hero:where([data-page="index"], [data-page="index"] *) {
    min-height: auto !important;
    justify-content: flex-start !important;
    padding-top: 96px !important;
    padding-bottom: 24px !important;
  }
}


/* index.html – startseite-blaue-bereiche-mobile-kompakter-399 */

@media (max-width: 399px) {
  .index-page .toowie-product #akquise-manager:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity:where([data-page="index"], [data-page="index"] *) {
    min-height: auto !important;
    height: auto !important;
    padding-top: 28px !important;
    padding-bottom: 26px !important;
    scroll-margin-top: 90px;
  }

  .index-page .toowie-product #akquise-manager > .shell.hero-grid:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus > .shell.hero-grid:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung > .shell.hero-grid:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity > .shell.hero-grid:where([data-page="index"], [data-page="index"] *) {
    min-height: 0 !important;
    height: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}


/* index.html – startseite-bild-text-box-mobile-horizontal-399 */

/* Unter 400px bleibt die Bild/Text-Darstellung der Funktionskarten zweispaltig:
   Bild links, Inhalt rechts – wie bereits ab 400px. */
@media (max-width: 399px) {
  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide):where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide):where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide):where([data-page="index"], [data-page="index"] *) {
    display: grid !important;
    grid-template-columns: 42% 58% !important;
    grid-template-rows: 100% !important;
    grid-template-areas: "image info" !important;
    height: 320px !important;
    min-height: 320px !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-image:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-image:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-image:where([data-page="index"], [data-page="index"] *) {
    grid-area: image !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 0 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-image img:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-image img:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-image img:where([data-page="index"], [data-page="index"] *) {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *) {
    grid-area: info !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 7px !important;
    border-top: 0 !important;
    border-left: 1px solid #eee5d8 !important;
    overflow: hidden !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-content:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-content:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-content:where([data-page="index"], [data-page="index"] *) {
    height: 100% !important;
    padding: 0 0 24px !important;
    overflow: hidden !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-title-row:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-title-row:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-title-row:where([data-page="index"], [data-page="index"] *) {
    gap: 4px !important;
    margin-bottom: 4px !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-icon:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-icon:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-icon:where([data-page="index"], [data-page="index"] *) {
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    font-size: .50rem !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide h3:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide h3:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *) {
    margin: 0 0 3px !important;
    padding: 0 0 3px !important;
    font-size: .58rem !important;
    line-height: 1.08 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .capability-slide-quote:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-quote:where([data-page="index"], [data-page="index"] *) {
    margin: 0 0 4px !important;
    font-size: .43rem !important;
    line-height: 1.3 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *) {
    gap: 3px !important;
    margin-bottom: 4px !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *) {
    grid-template-columns: 5px minmax(0, 1fr) !important;
    gap: 4px !important;
    padding: 3px 4px !important;
    border-radius: 5px !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before,
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before,
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before {
    width: 4px !important;
    height: 4px !important;
    margin-top: 2px !important;
    box-shadow: 0 0 0 2px rgba(194,145,64,.12) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *) {
    margin-bottom: 1px !important;
    font-size: .43rem !important;
    line-height: 1.18 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *) {
    font-size: .43rem !important;
    line-height: 1.25 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-provider:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-provider:where([data-page="index"], [data-page="index"] *) {
    font-size: .40rem !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-cta:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-cta:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-cta:where([data-page="index"], [data-page="index"] *) {
    right: 7px !important;
    bottom: 7px !important;
    padding: 4px 6px !important;
    font-size: .39rem !important;
  }

  /* TOOWIE: auch die erste Bild/Text-Karte unter 400px sicher zweispaltig halten. */
  .index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(2):where([data-page="index"], [data-page="index"] *) {
    display: grid !important;
    grid-template-columns: 42% 58% !important;
    grid-template-rows: 100% !important;
    grid-template-areas: "image info" !important;
    height: 320px !important;
    min-height: 320px !important;
  }

  .index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(2) .capability-slide-image:where([data-page="index"], [data-page="index"] *) {
    grid-area: image !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(2) .capability-slide-panel:where([data-page="index"], [data-page="index"] *) {
    grid-area: info !important;
    min-width: 0 !important;
    height: 100% !important;
  }
}


/* index.html – toowie-overview-mobile-desktop-layout-fix */

/* Bis 399px: TOOWIE-Uebersicht wie in den groesseren Ansichten aufbauen:
   Kopfzeile nebeneinander, grosses Logo mittig und der Ablauf horizontal. */
@media (max-width: 399px) {
  .index-page .toowie-product #toowie-identity .toowie-brand-stage:where([data-page="index"], [data-page="index"] *) {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    padding: 12px 10px 10px !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-topline:where([data-page="index"], [data-page="index"] *) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding-bottom: 7px !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-kicker:where([data-page="index"], [data-page="index"] *) {
    flex: 0 0 auto !important;
    gap: 5px !important;
    font-size: .45rem !important;
    letter-spacing: .11em !important;
    white-space: nowrap !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-kicker i:where([data-page="index"], [data-page="index"] *) {
    width: 5px !important;
    height: 5px !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-topline-text:where([data-page="index"], [data-page="index"] *) {
    display: block !important;
    flex: 0 1 auto !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: .40rem !important;
    line-height: 1.1 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-logo-scene:where([data-page="index"], [data-page="index"] *) {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-logo-shell:where([data-page="index"], [data-page="index"] *) {
    width: min(76%, 255px) !important;
    height: calc(100% - 12px) !important;
    min-height: 0 !important;
    max-height: 185px !important;
    padding: 8px 11px !important;
    border-radius: 17px !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-logo-shell:where([data-page="index"], [data-page="index"] *)::before,
  .index-page .toowie-product #toowie-identity .toowie-brand-logo-shell:where([data-page="index"], [data-page="index"] *)::after {
    width: 14px !important;
    height: 14px !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-logo-shell:where([data-page="index"], [data-page="index"] *)::before {
    left: 9px !important;
    top: 9px !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-logo-shell:where([data-page="index"], [data-page="index"] *)::after {
    right: 9px !important;
    bottom: 9px !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-logo:where([data-page="index"], [data-page="index"] *) {
    width: min(210px, 94%) !important;
    max-width: 100% !important;
    max-height: 78% !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-ring-one:where([data-page="index"], [data-page="index"] *) {
    width: 300px !important;
    height: 150px !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-ring-two:where([data-page="index"], [data-page="index"] *) {
    width: 350px !important;
    height: 190px !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-chip:where([data-page="index"], [data-page="index"] *) {
    padding: 3px 5px !important;
    font-size: .39rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-chip:where([data-page="index"], [data-page="index"] *)::before {
    width: 4px !important;
    height: 4px !important;
    margin-right: 4px !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-chip-tech:where([data-page="index"], [data-page="index"] *) {
    left: 1% !important;
    top: 24% !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-chip-praxis:where([data-page="index"], [data-page="index"] *) {
    right: 1% !important;
    top: 29% !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-chip-dialog:where([data-page="index"], [data-page="index"] *) {
    right: 4% !important;
    bottom: 12% !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-journey:where([data-page="index"], [data-page="index"] *) {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 1px !important;
    padding: 9px 0 0 !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-route:where([data-page="index"], [data-page="index"] *) {
    left: 6.6% !important;
    right: 6.6% !important;
    top: 11px !important;
    bottom: auto !important;
    width: auto !important;
    height: 1px !important;
    background: linear-gradient(90deg, rgba(198,155,90,.25), rgba(198,155,90,.72), rgba(198,155,90,.25)) !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-route span:where([data-page="index"], [data-page="index"] *) {
    left: 0 !important;
    top: 50% !important;
    animation: toowieSignal 7.2s cubic-bezier(.65,0,.35,1) infinite !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-step:where([data-page="index"], [data-page="index"] *) {
    min-height: 0 !important;
    padding: 10px 1px 0 !important;
    display: block !important;
    text-align: center !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-step:where([data-page="index"], [data-page="index"] *)::before {
    left: 50% !important;
    top: 0 !important;
    width: 6px !important;
    height: 6px !important;
    transform: translateX(-50%) !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-step b:where([data-page="index"], [data-page="index"] *) {
    margin: 0 0 2px !important;
    font-size: .38rem !important;
    letter-spacing: .07em !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-step strong:where([data-page="index"], [data-page="index"] *) {
    font-size: .36rem !important;
    line-height: 1.05 !important;
    letter-spacing: -.02em !important;
    white-space: nowrap !important;
  }
}


/* index.html – startseite-philosophy-path-text-groesser */

/* Hero-Navigation: Erreichen / Ermöglichen / Erweitern etwas besser lesbar. */
.index-page .philosophy-path-item strong:where([data-page="index"], [data-page="index"] *) {
  font-size: 1.02rem;
  line-height: 1.18;
}
.index-page .philosophy-path-link-arrow:where([data-page="index"], [data-page="index"] *) {
  display: inline-block;
  margin-left: .44em;
  font-size: .82em;
  line-height: 1;
  opacity: .72;
  transform: translateY(-2px);
  transition: transform .18s ease, opacity .18s ease;
}
.index-page .philosophy-path-item:hover .philosophy-path-link-arrow:where([data-page="index"], [data-page="index"] *),
.index-page .philosophy-path-item:focus-visible .philosophy-path-link-arrow:where([data-page="index"], [data-page="index"] *) {
  opacity: 1;
  transform: translate(3px, -4px);
}
.index-page .philosophy-path-item small:where([data-page="index"], [data-page="index"] *) {
  margin-top: 3px;
  font-size: .82rem;
  line-height: 1.30;
}
@media (min-width: 400px) and (max-width: 980px) {
  .index-page .philosophy-path-item strong:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(.58rem, 1.12vw, .92rem);
  }
  .index-page .philosophy-path-item small:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(.45rem, .82vw, .72rem);
  }
}
@media (max-width: 399px) {
  .index-page .philosophy-path-item strong:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(.58rem, 2.55vw, .70rem) !important;
  }
}


/* index.html – startseite-capability-icons-octagon */

/* Abschnitte 02–04: Icon-Flächen als Octagon und optisch mittig zur Überschrift. */
.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity)
  .capability-slide:not(.toowie-meaning-slide) .capability-slide-icon:where([data-page="index"], [data-page="index"] *) {
  position: relative !important;
  isolation: isolate;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(194, 145, 64, .52) !important;
  clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%);
  transform: none;
  filter: drop-shadow(0 5px 7px rgba(194, 145, 64, .12));
}

.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity)
  .capability-slide:not(.toowie-meaning-slide) .capability-slide-icon:where([data-page="index"], [data-page="index"] *)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1.5px;
  background: #fffdf8;
  clip-path: inherit;
}

.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity)
  .capability-slide:not(.toowie-meaning-slide) .capability-slide-icon > i:where([data-page="index"], [data-page="index"] *) {
  position: relative;
  z-index: 1;
}

.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity)
  .capability-slide:not(.toowie-meaning-slide) .capability-slide-title-row:where([data-page="index"], [data-page="index"] *) {
  column-gap: clamp(10px, 3cqh, 22px) !important;
  margin-bottom: clamp(8px, 3cqh, 21px) !important;
  transform: translateY(clamp(3px, .6cqh, 5px));
}

@media (min-width: 400px) {
  .index-page .toowie-product :is(#it-systemhaus, #website-entwicklung)
    .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *) {
    transform: translateY(clamp(2px, .5cqh, 7px));
  }
}


/* index.html – startseite-toowie-overview-type-larger */

/* TOOWIE-Uebersicht: Leitzeile, Themen und Prozessschritte besser lesbar. */
@media (min-width: 561px) {
  .index-page .toowie-product #toowie-identity .toowie-brand-topline-text:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(.66rem, min(2.8cqh, 2.1cqw), .98rem) !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-chip:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(.64rem, min(2.75cqh, 2.05cqw), .96rem) !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-step b:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(.58rem, min(2.55cqh, 1.85cqw), .82rem) !important;
  }

  .index-page .toowie-product #toowie-identity .toowie-brand-step strong:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(.60rem, min(2.95cqh, 2.05cqw), .90rem) !important;
  }
}


/* index.html – startseite-hero-points-larger */

/* Vorteilszeilen unter den Hero-Buttons in allen Startseiten-Bereichen. */
.index-page .toowie-product .hero-points:where([data-page="index"], [data-page="index"] *) {
  font-size: clamp(.84rem, 1vw, 1rem) !important;
}

.index-page .toowie-product .hero-points i:where([data-page="index"], [data-page="index"] *) {
  font-size: inherit !important;
}

@media (min-width: 400px) and (max-width: 980px) {
  .index-page .toowie-product .hero-points:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(.54rem, 1.05vw, .86rem) !important;
  }
}

@media (max-width: 399px) {
  .index-page .toowie-product .hero-points:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(.68rem, 3vw, .82rem) !important;
  }
}


/* html/technik/it_betreuung.html – Seitengestaltung */

      /* Desktop-Hero: gleiche horizontale Breite wie auf der Startseite. */
      @media (min-width: 981px) {
        body.managedservice-page .page-hero.tech-service-hero > .page-shell:where([data-page="it_betreuung"], [data-page="it_betreuung"] *) {
          width: min(1440px, calc(100% - 12px));
        }

        body.managedservice-page .page-hero.tech-service-hero .page-hero-grid > :first-child:where([data-page="it_betreuung"], [data-page="it_betreuung"] *) {
          position: relative;
          left: clamp(-54px, -2.7vw, -34px);
        }
      }
    

/* html/technik/it_betreuung.html – technik-dropdown-hero-points-like-startpage */

/* Hero-Hakenzeilen: exakt dieselbe Schriftgröße wie auf der Startseite. */
body.toowie-subpage .page-hero .page-hero-points:where([data-page="it_betreuung"], [data-page="it_betreuung"] *) {
  font-size: clamp(.84rem, 1vw, 1rem) !important;
}

body.toowie-subpage .page-hero .page-hero-points i:where([data-page="it_betreuung"], [data-page="it_betreuung"] *) {
  font-size: inherit !important;
}

@media (min-width: 400px) and (max-width: 980px) {
  body.toowie-subpage .page-hero .page-hero-points:where([data-page="it_betreuung"], [data-page="it_betreuung"] *) {
    font-size: clamp(.54rem, 1.05vw, .86rem) !important;
  }
}

@media (max-width: 399px) {
  body.toowie-subpage .page-hero .page-hero-points:where([data-page="it_betreuung"], [data-page="it_betreuung"] *) {
    font-size: clamp(.68rem, 3vw, .82rem) !important;
  }
}


/* html/technik/it_infrastruktur.html – technik-dropdown-hero-points-like-startpage */

/* Hero-Hakenzeilen: exakt dieselbe Schriftgröße wie auf der Startseite. */
body.toowie-subpage .page-hero .page-hero-points:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
  font-size: clamp(.84rem, 1vw, 1rem) !important;
}

body.toowie-subpage .page-hero .page-hero-points i:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
  font-size: inherit !important;
}

@media (min-width: 400px) and (max-width: 980px) {
  body.toowie-subpage .page-hero .page-hero-points:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
    font-size: clamp(.54rem, 1.05vw, .86rem) !important;
  }
}

@media (max-width: 399px) {
  body.toowie-subpage .page-hero .page-hero-points:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
    font-size: clamp(.68rem, 3vw, .82rem) !important;
  }
}


/* html/technik/it_infrastruktur.html – druck-scan-interaktion */

/* Druck & Scan: Hover-Vorschau ohne dauerhafte Auswahl. */
#druck-scan .service-feature-rail article[data-print-device]:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
  position: relative;
  border-radius: 12px;
  cursor: pointer;
  outline: none;
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

#druck-scan:not(.is-scroll-hover-locked) .service-feature-rail article[data-print-device]:hover:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *),
#druck-scan .service-feature-rail article[data-print-device]:focus-visible:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *),
#druck-scan .service-feature-rail article[data-print-device].is-active:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
  background: rgba(198, 154, 87, .10);
  box-shadow: 0 0 0 9px rgba(198, 154, 87, .10);
}

#druck-scan .service-feature-rail article[data-print-device]:focus-visible:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
  outline: 2px solid #c69a57;
  outline-offset: 7px;
}

#druck-scan .service-feature-rail article[data-print-device].is-active .service-feature-icon:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
  color: #fff;
  background: #c69a57;
  box-shadow: 0 7px 18px rgba(198, 154, 87, .28);
}

#druck-scan .print-scan-interactive:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

#druck-scan .print-scan-interactive img:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
  position: relative;
  z-index: 1;
  user-select: none;
  -webkit-user-drag: none;
}

#druck-scan .print-scan-hotspot:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
  position: absolute;
  z-index: 3;
  display: block;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 18px;
  background: transparent;
  cursor: default;
  pointer-events: auto;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .22s ease, transform .18s ease;
}

/* Beim Hover bleibt nur das betroffene Geraet klar sichtbar. */
#druck-scan:not(.is-scroll-hover-locked) .print-scan-hotspot:hover:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *),
#druck-scan .print-scan-hotspot.is-active:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
  border-color: rgba(198, 154, 87, .98);
  background: rgba(255, 255, 255, .02);
  box-shadow:
    0 0 0 9999px rgba(239, 244, 249, .78),
    0 0 0 4px rgba(198, 154, 87, .20),
    0 14px 34px rgba(7, 24, 43, .18);
}

#druck-scan .print-scan-hotspot--multifunction:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
  left: 8.5%;
  top: 30.5%;
  width: 24.8%;
  height: 50.5%;
}

#druck-scan .print-scan-hotspot--printer:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
  left: 32.4%;
  top: 53.0%;
  width: 16.8%;
  height: 28.5%;
}

#druck-scan .print-scan-hotspot--flatbed:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
  left: 50.2%;
  top: 63.0%;
  width: 20.5%;
  height: 22.5%;
}

#druck-scan .print-scan-hotspot--desk:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
  left: 73.5%;
  top: 40.5%;
  width: 16.0%;
  height: 41.0%;
}

/* Die Detailbox wird per JS direkt ueber dem gehoverteten Geraet positioniert. */
#druck-scan .print-scan-info:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
  position: absolute;
  z-index: 6;
  left: 0;
  top: 0;
  width: min(330px, calc(100% - 20px));
  padding: 13px 16px 14px 18px;
  border: 1px solid rgba(198, 154, 87, .38);
  border-left: 3px solid #c69a57;
  border-radius: 12px;
  background: rgba(7, 31, 56, .96);
  box-shadow: 0 16px 42px rgba(7, 24, 43, .26);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(7px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}

#druck-scan .print-scan-info:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *)::before {
  content: "DETAIL";
  display: block;
  margin-bottom: 5px;
  color: #d6b06d;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1;
}

#druck-scan .print-scan-info:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *)::after {
  content: "";
  position: absolute;
  left: var(--info-arrow-left, 50%);
  bottom: -7px;
  width: 12px;
  height: 12px;
  border-right: 1px solid rgba(198, 154, 87, .38);
  border-bottom: 1px solid rgba(198, 154, 87, .38);
  background: rgba(7, 31, 56, .96);
  transform: translateX(-50%) rotate(45deg);
}

#druck-scan .print-scan-interactive.show-device-info .print-scan-info:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
  opacity: 1;
  transform: translateY(0);
}

#druck-scan .print-scan-info strong:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
  display: block;
  margin-bottom: 4px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

#druck-scan .print-scan-info span:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
  display: block;
  color: rgba(229, 237, 245, .84);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  #druck-scan .service-feature-rail article[data-print-device]:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
    touch-action: manipulation;
  }

  #druck-scan .print-scan-hotspot:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
    border-radius: 14px;
  }

  #druck-scan .print-scan-hotspot--flatbed:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
    min-height: 44px;
  }

  #druck-scan .print-scan-info:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
    width: min(310px, calc(100% - 16px));
    padding: 12px 14px 13px 16px;
  }
}

@media (max-width: 560px) {
  #druck-scan:not(.is-scroll-hover-locked) .service-feature-rail article[data-print-device]:hover:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *),
  #druck-scan .service-feature-rail article[data-print-device]:focus-visible:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *),
  #druck-scan .service-feature-rail article[data-print-device].is-active:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
    box-shadow: 0 0 0 6px rgba(198, 154, 87, .10);
  }

  #druck-scan .print-scan-hotspot:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
    border-width: 1.5px;
    border-radius: 10px;
  }

  #druck-scan:not(.is-scroll-hover-locked) .print-scan-hotspot:hover:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *),
  #druck-scan .print-scan-hotspot.is-active:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
    box-shadow:
      0 0 0 9999px rgba(239, 244, 249, .76),
      0 0 0 2px rgba(198, 154, 87, .22);
  }

  #druck-scan .print-scan-info:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
    width: min(280px, calc(100% - 12px));
    padding: 10px 12px 11px 14px;
    border-radius: 10px;
  }

  #druck-scan .print-scan-info:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *)::before {
    margin-bottom: 4px;
    font-size: 8px;
  }

  #druck-scan .print-scan-info strong:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
    font-size: 13px;
  }

  #druck-scan .print-scan-info span:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
    font-size: 11px;
    line-height: 1.4;
  }
}

@media (hover: none), (pointer: coarse) {
  /* Auf Touchgeraeten gibt es keine Hover-Infobox; Auswahl erfolgt ueber die Textkarten. */
  #druck-scan .print-scan-hotspot:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #druck-scan .service-feature-rail article[data-print-device]:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *),
  #druck-scan .print-scan-hotspot:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *),
  #druck-scan .print-scan-info:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
    transition: none;
  }
}


/* html/technik/it_infrastruktur.html – weitere-feature-interaktionen */

/* Interaktive Produktbilder: gleiche Logik wie im Bereich Druck & Scan. */
[data-feature-interaction] .service-feature-rail article[data-feature-device]:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
  position: relative;
  border-radius: 12px;
  cursor: pointer;
  outline: none;
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

[data-feature-interaction]:not(.is-scroll-hover-locked) .service-feature-rail article[data-feature-device]:hover:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *),
[data-feature-interaction] .service-feature-rail article[data-feature-device]:focus-visible:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *),
[data-feature-interaction] .service-feature-rail article[data-feature-device].is-active:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
  background: rgba(198, 154, 87, .10);
  box-shadow: 0 0 0 9px rgba(198, 154, 87, .10);
}

[data-feature-interaction] .service-feature-rail article[data-feature-device]:focus-visible:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
  outline: 2px solid #c69a57;
  outline-offset: 7px;
}

[data-feature-interaction] .service-feature-rail article[data-feature-device].is-active .service-feature-icon:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
  color: #fff;
  background: #c69a57;
  box-shadow: 0 7px 18px rgba(198, 154, 87, .28);
}

[data-feature-interaction] .feature-interactive-visual:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

[data-feature-interaction] .feature-interactive-visual img:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
  position: relative;
  z-index: 1;
  user-select: none;
  -webkit-user-drag: none;
}

[data-feature-interaction] .feature-hotspot:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
  position: absolute;
  z-index: 3;
  left: var(--hotspot-left);
  top: var(--hotspot-top);
  width: var(--hotspot-width);
  height: var(--hotspot-height);
  display: block;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 18px;
  background: transparent;
  cursor: default;
  pointer-events: auto;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .22s ease, transform .18s ease;
}

/* Nur das aktive/angehoverte Geraet bleibt klar sichtbar. */
[data-feature-interaction]:not(.is-scroll-hover-locked) .feature-hotspot:hover:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *),
[data-feature-interaction] .feature-hotspot.is-active:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
  border-color: rgba(198, 154, 87, .98);
  background: rgba(255, 255, 255, .02);
  box-shadow:
    0 0 0 9999px rgba(239, 244, 249, .78),
    0 0 0 4px rgba(198, 154, 87, .20),
    0 14px 34px rgba(7, 24, 43, .18);
}

/* Die Infobox sitzt per JS direkt ueber dem jeweiligen Hotspot. */
[data-feature-interaction] .feature-device-info:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
  position: absolute;
  z-index: 6;
  left: 0;
  top: 0;
  width: min(330px, calc(100% - 20px));
  padding: 13px 16px 14px 18px;
  border: 1px solid rgba(198, 154, 87, .38);
  border-left: 3px solid #c69a57;
  border-radius: 12px;
  background: rgba(7, 31, 56, .96);
  box-shadow: 0 16px 42px rgba(7, 24, 43, .26);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(7px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}

[data-feature-interaction] .feature-device-info:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *)::before {
  content: "DETAIL";
  display: block;
  margin-bottom: 5px;
  color: #d6b06d;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1;
}

[data-feature-interaction] .feature-device-info:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *)::after {
  content: "";
  position: absolute;
  left: var(--info-arrow-left, 50%);
  bottom: -7px;
  width: 12px;
  height: 12px;
  border-right: 1px solid rgba(198, 154, 87, .38);
  border-bottom: 1px solid rgba(198, 154, 87, .38);
  background: rgba(7, 31, 56, .96);
  transform: translateX(-50%) rotate(45deg);
}

[data-feature-interaction] .feature-interactive-visual.show-device-info .feature-device-info:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
  opacity: 1;
  transform: translateY(0);
}

[data-feature-interaction] .feature-device-info strong:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
  display: block;
  margin-bottom: 4px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

[data-feature-interaction] .feature-device-info span:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
  display: block;
  color: rgba(229, 237, 245, .84);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  [data-feature-interaction] .service-feature-rail article[data-feature-device]:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
    touch-action: manipulation;
  }

  [data-feature-interaction] .feature-hotspot:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
    border-radius: 14px;
  }

  [data-feature-interaction] .feature-device-info:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
    width: min(310px, calc(100% - 16px));
    padding: 12px 14px 13px 16px;
  }
}

@media (max-width: 560px) {
  [data-feature-interaction]:not(.is-scroll-hover-locked) .service-feature-rail article[data-feature-device]:hover:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *),
  [data-feature-interaction] .service-feature-rail article[data-feature-device]:focus-visible:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *),
  [data-feature-interaction] .service-feature-rail article[data-feature-device].is-active:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
    box-shadow: 0 0 0 6px rgba(198, 154, 87, .10);
  }

  [data-feature-interaction] .feature-hotspot:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
    border-width: 1.5px;
    border-radius: 10px;
  }

  [data-feature-interaction]:not(.is-scroll-hover-locked) .feature-hotspot:hover:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *),
  [data-feature-interaction] .feature-hotspot.is-active:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
    box-shadow:
      0 0 0 9999px rgba(239, 244, 249, .76),
      0 0 0 2px rgba(198, 154, 87, .22);
  }

  [data-feature-interaction] .feature-device-info:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
    width: min(280px, calc(100% - 12px));
    padding: 10px 12px 11px 14px;
    border-radius: 10px;
  }

  [data-feature-interaction] .feature-device-info:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *)::before {
    margin-bottom: 4px;
    font-size: 8px;
  }

  [data-feature-interaction] .feature-device-info strong:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
    font-size: 13px;
  }

  [data-feature-interaction] .feature-device-info span:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
    font-size: 11px;
    line-height: 1.4;
  }
}

@media (hover: none), (pointer: coarse) {
  /* Touch: keine zufaelligen Bild-Hover, Auswahl weiter ueber die Textkarten. */
  [data-feature-interaction] .feature-hotspot:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-feature-interaction] .service-feature-rail article[data-feature-device]:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *),
  [data-feature-interaction] .feature-hotspot:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *),
  [data-feature-interaction] .feature-device-info:where([data-page="it_infrastruktur"], [data-page="it_infrastruktur"] *) {
    transition: none;
  }
}


/* html/technik/software_automatisierung.html – technik-dropdown-hero-points-like-startpage */

/* Hero-Hakenzeilen: exakt dieselbe Schriftgröße wie auf der Startseite. */
body.toowie-subpage .page-hero .page-hero-points:where([data-page="software_automatisierung"], [data-page="software_automatisierung"] *) {
  font-size: clamp(.84rem, 1vw, 1rem) !important;
}

body.toowie-subpage .page-hero .page-hero-points i:where([data-page="software_automatisierung"], [data-page="software_automatisierung"] *) {
  font-size: inherit !important;
}

@media (min-width: 400px) and (max-width: 980px) {
  body.toowie-subpage .page-hero .page-hero-points:where([data-page="software_automatisierung"], [data-page="software_automatisierung"] *) {
    font-size: clamp(.54rem, 1.05vw, .86rem) !important;
  }
}

@media (max-width: 399px) {
  body.toowie-subpage .page-hero .page-hero-points:where([data-page="software_automatisierung"], [data-page="software_automatisierung"] *) {
    font-size: clamp(.68rem, 3vw, .82rem) !important;
  }
}


/* html/technik/technical.html – Seitengestaltung */

      /* Technik-Übersichtsseite – angepasst an die Unterseitenoptik und an das gewünschte Octagon-Layout. */
      .tech-overview-hero:where([data-page="technical"], [data-page="technical"] *) {
        position: relative;
        overflow: hidden;
        padding: clamp(136px, 12vw, 170px) 0 clamp(78px, 8vw, 96px);
        color: #fff;
        background:
          radial-gradient(
            circle at 18% 82%,
            rgba(10, 40, 80, 0.92),
            transparent 34%
          ),
          radial-gradient(
            circle at 78% 18%,
            rgba(16, 78, 139, 0.18),
            transparent 22%
          ),
          linear-gradient(
            135deg,
            rgba(0, 20, 40, 1) 0%,
            rgba(10, 40, 80, 1) 50%,
            rgba(0, 10, 30, 1) 100%
          );
      }

      .tech-overview-hero:where([data-page="technical"], [data-page="technical"] *)::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(
          115deg,
          rgba(0, 20, 40, 0.16),
          rgba(0, 10, 30, 0.5)
        );
        opacity: 0.9;
      }

      .tech-overview-grid:where([data-page="technical"], [data-page="technical"] *) {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, 0.88fr) minmax(540px, 1.12fr);
        gap: clamp(40px, 6vw, 92px);
        align-items: center;
      }

      .tech-overview-copy:where([data-page="technical"], [data-page="technical"] *) {
        max-width: 560px;
      }

      .tech-overview-kicker:where([data-page="technical"], [data-page="technical"] *) {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        max-width: 100%;
        gap: 8px;
        margin: 0 0 18px;
        padding: 7px 10px;
        color: #001428;
        background: #fff;
        border: 1px solid rgba(198, 154, 87, 0.42);
        border-radius: 999px;
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
        font-family: Inter, Arial, sans-serif;
        font-size: 11px;
        font-weight: 950;
        line-height: 1;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .tech-overview-kicker:where([data-page="technical"], [data-page="technical"] *)::before {
        content: "";
        width: 7px;
        height: 7px;
        flex: 0 0 7px;
        border-radius: 50%;
        background: #22c55e;
        box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.16);
      }

      .tech-overview-title:where([data-page="technical"], [data-page="technical"] *) {
        margin: 0;
        color: #fff;
        font-size: clamp(2.55rem, 4.15vw, 4.45rem);
        line-height: 0.96;
        letter-spacing: -0.04em;
        font-weight: 800;
      }

      .tech-overview-title .tech-overview-title-gold:where([data-page="technical"], [data-page="technical"] *) {
        color: var(--page-hero-gold);
      }

      .tech-overview-subtitle:where([data-page="technical"], [data-page="technical"] *) {
        max-width: 560px;
        margin: 24px 0 0;
        color: #fff;
        font-size: clamp(1.12rem, 1.8vw, 1.6rem);
        font-weight: 700;
        line-height: 1.35;
      }

      .tech-overview-text:where([data-page="technical"], [data-page="technical"] *) {
        max-width: 560px;
        margin: 14px 0 0;
        color: rgba(255, 255, 255, 0.76);
        font-size: clamp(1.02rem, 1.45vw, 1.2rem);
        line-height: 1.72;
      }

      .tech-overview-actions:where([data-page="technical"], [data-page="technical"] *) {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 34px;
      }

      .tech-overview-points:where([data-page="technical"], [data-page="technical"] *) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 18px;
        margin-top: 28px;
        color: rgba(255, 255, 255, 0.78);
        font-family: Inter, Arial, sans-serif;
        font-size: 14px;
        font-weight: 750;
      }

      .tech-overview-points span:where([data-page="technical"], [data-page="technical"] *) {
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

      .tech-overview-points i:where([data-page="technical"], [data-page="technical"] *) {
        color: var(--page-hero-gold);
        font-style: normal;
        font-weight: 900;
      }

      .tech-overview-btn:where([data-page="technical"], [data-page="technical"] *) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        min-height: 60px;
        padding: 16px 28px;
        border-radius: 16px;
        font-size: 1rem;
        font-weight: 800;
        text-decoration: none;
        transition:
          transform 0.2s ease,
          box-shadow 0.2s ease,
          background 0.2s ease;
      }

      .tech-overview-btn:hover:where([data-page="technical"], [data-page="technical"] *) {
        transform: translateY(-2px);
      }

      .tech-overview-btn-light:where([data-page="technical"], [data-page="technical"] *) {
        color: var(--page-navy);
        background: #fff;
        box-shadow: 0 18px 44px rgba(0, 12, 26, 0.2);
      }

      .tech-overview-btn-light:hover:where([data-page="technical"], [data-page="technical"] *) {
        color: var(--page-navy);
        background: #f7f8fb;
      }

      .tech-overview-btn-light:where([data-page="technical"], [data-page="technical"] *)::after {
        content: "→";
        font-size: 1.16rem;
        line-height: 1;
      }

      /* Hero-Buttons wie auf der Startseite im Abschnitt „Lösungen, die zu Ihrem Unternehmen passen.“ */
      .tech-overview-btn-home:where([data-page="technical"], [data-page="technical"] *) {
        min-height: 48px;
        padding: 0 20px;
        border: 1px solid rgba(198, 154, 87, 0.52);
        border-radius: 13px;
        color: var(--page-navy);
        background: #fff;
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
        font-size: 14px;
        font-weight: 900;
      }

      .tech-overview-btn-home:hover:where([data-page="technical"], [data-page="technical"] *) {
        color: var(--page-navy);
        background: #fbf7ef;
        border-color: rgba(198, 154, 87, 0.72);
      }

      .tech-constellation:where([data-page="technical"], [data-page="technical"] *) {
        --tech-constellation-width: 820px;
        --tech-constellation-height: 560px;
        --tech-octagon-size: 190px;
        --tech-octagon-edge-offset: 38px;
        --tech-card-cut: 57px;
        --tech-card-height: 242px;
        position: relative;
        width: min(100%, var(--tech-constellation-width));
        height: var(--tech-constellation-height);
        margin-left: auto;
      }

      .tech-constellation-card:where([data-page="technical"], [data-page="technical"] *),
      .tech-constellation-center:where([data-page="technical"], [data-page="technical"] *) {
        position: absolute;
        z-index: 1;
      }

      .tech-constellation-card:where([data-page="technical"], [data-page="technical"] *) {
        display: flex;
        flex-direction: column;
        width: calc(50% - var(--tech-octagon-edge-offset));
        height: var(--tech-card-height);
        padding: 24px 26px 22px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.24);
        color: #fff;
        text-decoration: none;
        background: linear-gradient(
          180deg,
          rgba(74, 108, 153, 0.3),
          rgba(45, 72, 109, 0.2)
        );
        box-shadow: 0 22px 54px rgba(2, 8, 19, 0.18);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transition:
          transform 0.22s ease,
          border-color 0.22s ease,
          background 0.22s ease,
          box-shadow 0.22s ease;
      }

      .tech-constellation-card:where([data-page="technical"], [data-page="technical"] *)::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        clip-path: inherit;
        pointer-events: none;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
      }

      .tech-constellation-card:hover:where([data-page="technical"], [data-page="technical"] *) {
        transform: translateY(-4px);
        color: #fff;
        border-color: rgba(216, 183, 127, 0.52);
        background: linear-gradient(
          180deg,
          rgba(82, 122, 173, 0.38),
          rgba(48, 77, 118, 0.24)
        );
        box-shadow: 0 26px 58px rgba(2, 8, 19, 0.22);
      }

      .tech-constellation-card--one:where([data-page="technical"], [data-page="technical"] *) {
        left: 0;
        top: 0;
        clip-path: polygon(
          0 0,
          100% 0,
          100% calc(100% - var(--tech-card-cut)),
          calc(100% - var(--tech-card-cut)) 100%,
          0 100%
        );
        border-radius: 26px;
      }

      .tech-constellation-card--two:where([data-page="technical"], [data-page="technical"] *) {
        right: 0;
        top: 0;
        clip-path: polygon(
          0 0,
          100% 0,
          100% 100%,
          var(--tech-card-cut) 100%,
          0 calc(100% - var(--tech-card-cut))
        );
        border-radius: 26px;
      }

      .tech-constellation-card--three:where([data-page="technical"], [data-page="technical"] *) {
        left: 0;
        bottom: 0;
        clip-path: polygon(
          0 0,
          calc(100% - var(--tech-card-cut)) 0,
          100% var(--tech-card-cut),
          100% 100%,
          0 100%
        );
        border-radius: 26px;
      }

      .tech-constellation-card--four:where([data-page="technical"], [data-page="technical"] *) {
        right: 0;
        bottom: 0;
        clip-path: polygon(
          var(--tech-card-cut) 0,
          100% 0,
          100% 100%,
          0 100%,
          0 var(--tech-card-cut)
        );
        border-radius: 26px;
      }

      .tech-card-icon:where([data-page="technical"], [data-page="technical"] *) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-bottom: 10px;
        color: #f0c778;
        transform: translateY(clamp(-12px, -1vw, -5px));
      }

      .tech-card-icon svg:where([data-page="technical"], [data-page="technical"] *) {
        width: 34px;
        height: 34px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .tech-constellation-card h3:where([data-page="technical"], [data-page="technical"] *) {
        margin: 0;
        color: #fff;
        font-size: clamp(1.16rem, 1.35vw, 1.42rem);
        line-height: 1.13;
        font-weight: 800;
        letter-spacing: -0.015em;
        max-width: calc(100% - 12px);
      }

      .tech-constellation-card h3 span:where([data-page="technical"], [data-page="technical"] *) {
        display: block;
      }

      .tech-constellation-card h3 .tech-card-title-gold:where([data-page="technical"], [data-page="technical"] *) {
        color: #f0c778;
      }

      .tech-constellation-card:where([data-page="technical"], [data-page="technical"] *) {
        align-items: center;
        justify-content: center;
        text-align: center;
      }

      .tech-constellation-card .tech-card-icon:where([data-page="technical"], [data-page="technical"] *) {
        display: inline-flex;
        margin-inline: auto;
        color: #fff;
      }

      .tech-constellation-card .tech-card-arrow:where([data-page="technical"], [data-page="technical"] *) {
        display: none;
      }

      .tech-constellation-card h3:where([data-page="technical"], [data-page="technical"] *),
      .tech-constellation-card p:where([data-page="technical"], [data-page="technical"] *) {
        max-width: 100%;
      }

      .tech-constellation-card h3:where([data-page="technical"], [data-page="technical"] *),
      .tech-constellation-card h3 span:where([data-page="technical"], [data-page="technical"] *) {
        color: var(--page-hero-gold);
      }

      .tech-constellation-card p:where([data-page="technical"], [data-page="technical"] *) {
        max-width: calc(100% - 8px);
        margin: 9px 0 0;
        color: rgba(255, 255, 255, 0.78);
        font-size: 0.91rem;
        line-height: 1.48;
      }

      .tech-card-arrow:where([data-page="technical"], [data-page="technical"] *) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 24px;
        width: 46px;
        min-width: 46px;
        height: 30px;
        margin-top: auto;
        margin-left: 0;
        border: 1.5px solid rgba(216, 183, 127, 0.88);
        border-radius: 7px;
        color: var(--page-hero-gold);
        background: rgba(216, 183, 127, 0.12);
        font-size: 1.12rem;
      }

      .tech-constellation-card--one .tech-card-arrow:where([data-page="technical"], [data-page="technical"] *),
      .tech-constellation-card--three .tech-card-arrow:where([data-page="technical"], [data-page="technical"] *) {
        margin-left: 0;
      }

      .tech-constellation-card:hover .tech-card-arrow:where([data-page="technical"], [data-page="technical"] *) {
        color: #08203b;
        background: var(--page-hero-gold);
        box-shadow:
          0 0 0 5px rgba(216, 183, 127, 0.1),
          0 10px 22px rgba(0, 0, 0, 0.18);
        transform: translateX(2px);
      }

      .tech-constellation-center:where([data-page="technical"], [data-page="technical"] *) {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        width: var(--tech-octagon-size);
        height: var(--tech-octagon-size);
        display: grid;
        place-content: center;
        padding: 24px;
        text-align: center;
        text-decoration: none;
        color: rgb(var(--toowie-blue-dark));
        background: #d8b77f;
        clip-path: polygon(
          30% 0,
          70% 0,
          100% 30%,
          100% 70%,
          70% 100%,
          30% 100%,
          0 70%,
          0 30%
        );
        filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.28));
        cursor: pointer;
        transition:
          transform 0.22s ease,
          filter 0.22s ease;
      }

      .tech-constellation-center:where([data-page="technical"], [data-page="technical"] *)::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        opacity: 0;
        background: linear-gradient(
          145deg,
          rgba(255, 255, 255, 0.28),
          rgba(255, 255, 255, 0.03) 48%,
          rgba(111, 73, 20, 0.1)
        );
        transition: opacity 0.22s ease;
      }

      .tech-constellation-center:hover:where([data-page="technical"], [data-page="technical"] *),
      .tech-constellation-center:focus-visible:where([data-page="technical"], [data-page="technical"] *) {
        transform: translate(-50%, calc(-50% - 4px)) scale(1.02);
        filter:
          drop-shadow(0 28px 38px rgba(0, 0, 0, 0.3))
          drop-shadow(0 0 16px rgba(216, 183, 127, 0.28));
        outline: none;
      }

      .tech-constellation-center:link:where([data-page="technical"], [data-page="technical"] *),
      .tech-constellation-center:visited:where([data-page="technical"], [data-page="technical"] *),
      .tech-constellation-center:hover:where([data-page="technical"], [data-page="technical"] *),
      .tech-constellation-center:focus-visible:where([data-page="technical"], [data-page="technical"] *),
      .tech-constellation-center:active:where([data-page="technical"], [data-page="technical"] *) {
        color: rgb(var(--toowie-blue-dark));
      }

      .tech-constellation-center:hover:where([data-page="technical"], [data-page="technical"] *)::before,
      .tech-constellation-center:focus-visible:where([data-page="technical"], [data-page="technical"] *)::before {
        opacity: 1;
      }

      .tech-constellation-center strong:where([data-page="technical"], [data-page="technical"] *),
      .tech-constellation-center span:where([data-page="technical"], [data-page="technical"] *) {
        position: relative;
        z-index: 2;
      }

      .tech-constellation-center strong:where([data-page="technical"], [data-page="technical"] *) {
        display: block;
        font-size: 1.28rem;
        line-height: 1;
        font-weight: 900;
        letter-spacing: 0.07em;
        color: rgb(var(--toowie-blue-dark));
      }

      .tech-constellation-center span:where([data-page="technical"], [data-page="technical"] *) {
        display: block;
        margin-top: 6px;
        font-size: 0.82rem;
        line-height: 1.2;
        font-weight: 700;
        color: rgba(16, 78, 139, 0.88);
      }

      .tech-overview-summary:where([data-page="technical"], [data-page="technical"] *) {
        position: relative;
        padding: clamp(80px, 8vw, 108px) 0 clamp(76px, 8vw, 94px);
        background: linear-gradient(180deg, #f7f3ed 0%, #ffffff 72%);
      }

      .tech-summary-grid:where([data-page="technical"], [data-page="technical"] *) {
        display: grid;
        grid-template-columns: minmax(0, 0.94fr) minmax(340px, 0.86fr);
        gap: clamp(40px, 6vw, 84px);
        align-items: center;
      }

      .tech-summary-kicker:where([data-page="technical"], [data-page="technical"] *) {
        margin: 0 0 18px;
        color: var(--page-gold);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .tech-summary-title:where([data-page="technical"], [data-page="technical"] *) {
        margin: 0;
        color: #0a2850;
        font-size: clamp(2.35rem, 4vw, 3.4rem);
        line-height: 1.08;
        letter-spacing: -0.03em;
        font-weight: 800;
      }

      .tech-summary-title span:where([data-page="technical"], [data-page="technical"] *) {
        color: var(--page-gold);
      }

      .tech-summary-lead:where([data-page="technical"], [data-page="technical"] *) {
        max-width: 650px;
        margin: 22px 0 0;
        color: #55687b;
        font-size: 1.06rem;
        line-height: 1.82;
      }

      .tech-summary-features:where([data-page="technical"], [data-page="technical"] *) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 28px;
        margin-top: 38px;
      }

      .tech-summary-feature:where([data-page="technical"], [data-page="technical"] *) {
        display: grid;
        grid-template-columns: 32px 1fr;
        gap: 12px;
        align-items: start;
      }

      .tech-summary-feature-icon:where([data-page="technical"], [data-page="technical"] *) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        margin-top: 1px;
        color: var(--page-gold);
        border: 0;
        border-radius: 50%;
        background: rgba(194, 145, 64, 0.12);
        box-shadow: inset 0 0 0 1px rgba(194, 145, 64, 0.16);
        font-family: Inter, Arial, sans-serif;
        font-size: 0.9rem;
        font-style: normal;
        font-weight: 700;
        line-height: 1;
      }

      .tech-summary-feature-icon:where([data-page="technical"], [data-page="technical"] *)::after {
        content: none;
      }

      .tech-summary-feature strong:where([data-page="technical"], [data-page="technical"] *) {
        display: block;
        color: rgb(var(--toowie-blue-dark));
        font-size: 1.02rem;
        font-weight: 800;
      }

      .tech-summary-feature p:where([data-page="technical"], [data-page="technical"] *) {
        margin: 7px 0 0;
        color: #65788b;
        font-size: 0.96rem;
        line-height: 1.6;
      }

      .tech-summary-visual:where([data-page="technical"], [data-page="technical"] *) {
        display: flex;
        justify-content: center;
      }

      .tech-device:where([data-page="technical"], [data-page="technical"] *) {
        position: relative;
        width: min(100%, 500px);
      }

      .tech-device:where([data-page="technical"], [data-page="technical"] *)::before {
        content: "";
        position: absolute;
        inset: 10% 11% -5%;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(7, 24, 43, 0.14) 0%,
          rgba(7, 24, 43, 0) 72%
        );
        filter: blur(12px);
        z-index: 0;
      }

      .tech-device-screen:where([data-page="technical"], [data-page="technical"] *) {
        position: relative;
        z-index: 1;
        overflow: hidden;
        padding: 14px;
        border: 1px solid rgba(19, 40, 61, 0.12);
        border-radius: 26px 26px 16px 16px;
        background: linear-gradient(180deg, #0f1620 0%, #252e39 100%);
        box-shadow: 0 28px 70px rgba(7, 24, 43, 0.18);
      }

      .tech-device-camera-row:where([data-page="technical"], [data-page="technical"] *) {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
      }

      .tech-device-camera-row span:where([data-page="technical"], [data-page="technical"] *) {
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.24);
      }

      .tech-device-screen img:where([data-page="technical"], [data-page="technical"] *) {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 14px;
        background:
          radial-gradient(
            circle at 18% 82%,
            rgba(10, 40, 80, 0.92),
            transparent 34%
          ),
          radial-gradient(
            circle at 78% 18%,
            rgba(16, 78, 139, 0.18),
            transparent 22%
          ),
          linear-gradient(
            135deg,
            rgba(0, 20, 40, 1) 0%,
            rgba(10, 40, 80, 1) 50%,
            rgba(0, 10, 30, 1) 100%
          );
      }

      .tech-device-base:where([data-page="technical"], [data-page="technical"] *) {
        position: relative;
        z-index: 1;
        width: 78%;
        height: 18px;
        margin: 0 auto;
        transform: translateY(-1px);
        border-radius: 0 0 22px 22px;
        background: linear-gradient(180deg, #9ea8b3 0%, #c7d0d8 100%);
        box-shadow: 0 22px 26px rgba(7, 24, 43, 0.15);
      }

      .tech-device-base:where([data-page="technical"], [data-page="technical"] *)::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 2px;
        transform: translateX(-50%);
        width: 112px;
        height: 5px;
        border-radius: 999px;
        background: rgba(116, 128, 141, 0.55);
      }

      .tech-summary-cta:where([data-page="technical"], [data-page="technical"] *) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        margin-top: clamp(34px, 5vw, 52px);
        padding: 28px 30px;
        border: 1px solid rgba(198, 154, 87, 0.16);
        border-radius: 22px;
        background: #f4efe7;
        box-shadow: 0 18px 40px rgba(19, 40, 61, 0.06);
      }

      .tech-summary-cta-copy:where([data-page="technical"], [data-page="technical"] *) {
        display: flex;
        align-items: center;
        gap: 18px;
        min-width: 0;
      }

      .tech-summary-cta-icon:where([data-page="technical"], [data-page="technical"] *) {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: #fff;
        color: #5f6f82;
        box-shadow: inset 0 0 0 1px rgba(19, 40, 61, 0.08);
      }

      .tech-summary-cta-icon svg:where([data-page="technical"], [data-page="technical"] *) {
        width: 28px;
        height: 28px;
        fill: currentColor;
      }

      .tech-summary-cta h3:where([data-page="technical"], [data-page="technical"] *) {
        margin: 0;
        color: rgb(var(--toowie-blue-dark));
        font-size: clamp(1.18rem, 1.9vw, 1.4rem);
        font-weight: 800;
      }

      .tech-summary-cta p:where([data-page="technical"], [data-page="technical"] *) {
        margin: 8px 0 0;
        color: #5f7082;
        font-size: 1rem;
        line-height: 1.65;
      }

      .tech-summary-cta-btn:where([data-page="technical"], [data-page="technical"] *, [data-page="ueber_uns"] *) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        flex: 0 0 auto;
        min-height: 56px;
        padding: 15px 24px;
        border-radius: 14px;
        background: linear-gradient(135deg, #dfbf7b 0%, #c99945 100%);
        color: rgb(var(--toowie-blue-dark));
        font-weight: 800;
        text-decoration: none;
        white-space: nowrap;
        box-shadow: 0 16px 30px rgba(198, 154, 87, 0.18);
        transition:
          transform 0.2s ease,
          box-shadow 0.2s ease;
      }

      .tech-summary-cta-btn:hover:where([data-page="technical"], [data-page="technical"] *, [data-page="ueber_uns"] *) {
        transform: translateY(-2px);
        color: rgb(var(--toowie-blue-dark));
        box-shadow: 0 20px 36px rgba(198, 154, 87, 0.26);
      }

      .tech-summary-cta-btn:where([data-page="technical"], [data-page="technical"] *, [data-page="ueber_uns"] *)::after {
        content: "→";
        font-size: 1.1rem;
        line-height: 1;
      }

      @media (max-width: 1200px) {
        .tech-overview-grid:where([data-page="technical"], [data-page="technical"] *),
        .tech-summary-grid:where([data-page="technical"], [data-page="technical"] *) {
          grid-template-columns: 1fr;
        }

        .tech-overview-copy:where([data-page="technical"], [data-page="technical"] *),
        .tech-summary-copy:where([data-page="technical"], [data-page="technical"] *) {
          max-width: none;
        }

        .tech-constellation:where([data-page="technical"], [data-page="technical"] *) {
          margin: 0 auto;
        }
      }

      @media (max-width: 760px) {
        .tech-overview-hero:where([data-page="technical"], [data-page="technical"] *) {
          padding-top: 128px;
        }

        .tech-constellation:where([data-page="technical"], [data-page="technical"] *) {
          position: relative;
          width: 100%;
          max-width: 560px;
          height: auto;
          display: grid;
          gap: 18px;
        }

        .tech-constellation-card:where([data-page="technical"], [data-page="technical"] *),
        .tech-constellation-center:where([data-page="technical"], [data-page="technical"] *) {
          position: relative;
          left: auto;
          right: auto;
          top: auto;
          bottom: auto;
          width: 100%;
          height: auto;
          min-height: unset;
          transform: none;
        }

        .tech-constellation-card--one:where([data-page="technical"], [data-page="technical"] *),
        .tech-constellation-card--two:where([data-page="technical"], [data-page="technical"] *),
        .tech-constellation-card--three:where([data-page="technical"], [data-page="technical"] *),
        .tech-constellation-card--four:where([data-page="technical"], [data-page="technical"] *) {
          clip-path: none;
          border-radius: 24px;
          min-height: 190px;
        }

        .tech-constellation-center:where([data-page="technical"], [data-page="technical"] *) {
          width: 156px;
          height: 156px;
          margin: 0 auto 12px;
          border-radius: 0;
        }

        .tech-summary-features:where([data-page="technical"], [data-page="technical"] *) {
          grid-template-columns: 1fr;
        }

        .tech-summary-cta:where([data-page="technical"], [data-page="technical"] *) {
          flex-direction: column;
          align-items: stretch;
        }

        .tech-summary-cta-btn:where([data-page="technical"], [data-page="technical"] *, [data-page="ueber_uns"] *) {
          width: 100%;
        }
      }

      @media (max-width: 640px) {
        .tech-summary-kicker:where([data-page="technical"], [data-page="technical"] *) {
          font-size: 12px;
        }

        .tech-overview-title:where([data-page="technical"], [data-page="technical"] *) {
          font-size: clamp(2.35rem, 11vw, 3.65rem);
        }

        .tech-overview-subtitle:where([data-page="technical"], [data-page="technical"] *) {
          font-size: 1.06rem;
          line-height: 1.4;
        }

        .tech-overview-text:where([data-page="technical"], [data-page="technical"] *) {
          font-size: 0.98rem;
          line-height: 1.65;
        }

        .tech-constellation-card:where([data-page="technical"], [data-page="technical"] *) {
          min-height: 190px;
          padding: 22px 22px 20px;
        }

        .tech-constellation-card h3:where([data-page="technical"], [data-page="technical"] *) {
          font-size: 1.24rem;
        }

        .tech-summary-cta:where([data-page="technical"], [data-page="technical"] *) {
          padding: 24px 20px;
        }

        .tech-summary-cta-copy:where([data-page="technical"], [data-page="technical"] *) {
          align-items: flex-start;
        }
      }

      /* Responsive Verhalten analog zur Startseite:
   400-1200px bleibt die Desktop-Anordnung erhalten und skaliert mit.
   Erst bis einschliesslich 399px werden die Bereiche untereinander angeordnet. */
      @media (min-width: 400px) and (max-width: 1200px) {
        .tech-overview-hero:where([data-page="technical"], [data-page="technical"] *) {
          padding-top: clamp(110px, 11.3vw, 136px);
          padding-bottom: clamp(42px, 6.5vw, 78px);
        }

        .tech-overview-grid:where([data-page="technical"], [data-page="technical"] *) {
          grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
          gap: clamp(10px, 3.4vw, 40px);
          align-items: center;
        }

        .tech-overview-copy:where([data-page="technical"], [data-page="technical"] *) {
          max-width: none;
          min-width: 0;
        }

        .tech-overview-title:where([data-page="technical"], [data-page="technical"] *) {
          font-size: clamp(1.28rem, 4.15vw, 3.12rem);
        }

        .tech-overview-subtitle:where([data-page="technical"], [data-page="technical"] *) {
          margin-top: clamp(10px, 2vw, 24px);
          font-size: clamp(0.68rem, 1.8vw, 1.35rem);
          line-height: 1.35;
        }

        .tech-overview-text:where([data-page="technical"], [data-page="technical"] *) {
          margin-top: clamp(7px, 1.15vw, 14px);
          font-size: clamp(0.6rem, 1.35vw, 1.02rem);
          line-height: 1.62;
        }

        .tech-overview-actions:where([data-page="technical"], [data-page="technical"] *) {
          margin-top: clamp(14px, 2.8vw, 34px);
        }

        .tech-overview-points:where([data-page="technical"], [data-page="technical"] *) {
          gap: clamp(6px, 1.4vw, 10px) clamp(9px, 2vw, 18px);
          margin-top: clamp(12px, 2.2vw, 24px);
          font-size: clamp(0.72rem, 1.6vw, 0.875rem);
        }

        .tech-overview-btn:where([data-page="technical"], [data-page="technical"] *) {
          min-height: clamp(31px, 5vw, 60px);
          padding: clamp(7px, 1.35vw, 16px) clamp(10px, 2.3vw, 28px);
          gap: clamp(5px, 1vw, 12px);
          border-radius: clamp(8px, 1.3vw, 16px);
          font-size: clamp(0.52rem, 1.25vw, 1rem);
          white-space: nowrap;
        }

        .tech-constellation:where([data-page="technical"], [data-page="technical"] *) {
          --tech-constellation-height: clamp(250px, 46.67vw, 560px);
          --tech-octagon-size: clamp(88px, 15.83vw, 190px);
          --tech-octagon-edge-offset: clamp(18px, 3.17vw, 38px);
          --tech-card-cut: clamp(26px, 4.75vw, 57px);
          --tech-card-height: clamp(108px, 20.17vw, 242px);
          position: relative;
          display: block;
          width: 100%;
          max-width: 820px;
          height: var(--tech-constellation-height);
          margin-left: auto;
        }

        .tech-constellation-card:where([data-page="technical"], [data-page="technical"] *),
        .tech-constellation-center:where([data-page="technical"], [data-page="technical"] *) {
          position: absolute;
        }

        .tech-constellation-card:where([data-page="technical"], [data-page="technical"] *) {
          width: calc(50% - var(--tech-octagon-edge-offset));
          height: var(--tech-card-height);
          min-height: 0;
          padding: clamp(9px, 2vw, 24px) clamp(10px, 2.17vw, 26px)
            clamp(8px, 1.83vw, 22px);
        }

        .tech-constellation-card--one:where([data-page="technical"], [data-page="technical"] *) {
          left: 0;
          right: auto;
          top: 0;
          bottom: auto;
          clip-path: polygon(
            0 0,
            100% 0,
            100% calc(100% - var(--tech-card-cut)),
            calc(100% - var(--tech-card-cut)) 100%,
            0 100%
          );
          border-radius: clamp(12px, 2.17vw, 26px);
        }

        .tech-constellation-card--two:where([data-page="technical"], [data-page="technical"] *) {
          left: auto;
          right: 0;
          top: 0;
          bottom: auto;
          clip-path: polygon(
            0 0,
            100% 0,
            100% 100%,
            var(--tech-card-cut) 100%,
            0 calc(100% - var(--tech-card-cut))
          );
          border-radius: clamp(12px, 2.17vw, 26px);
        }

        .tech-constellation-card--three:where([data-page="technical"], [data-page="technical"] *) {
          left: 0;
          right: auto;
          top: auto;
          bottom: 0;
          clip-path: polygon(
            0 0,
            calc(100% - var(--tech-card-cut)) 0,
            100% var(--tech-card-cut),
            100% 100%,
            0 100%
          );
          border-radius: clamp(12px, 2.17vw, 26px);
        }

        .tech-constellation-card--four:where([data-page="technical"], [data-page="technical"] *) {
          left: auto;
          right: 0;
          top: auto;
          bottom: 0;
          clip-path: polygon(
            var(--tech-card-cut) 0,
            100% 0,
            100% 100%,
            0 100%,
            0 var(--tech-card-cut)
          );
          border-radius: clamp(12px, 2.17vw, 26px);
        }

        .tech-card-icon:where([data-page="technical"], [data-page="technical"] *) {
          width: clamp(20px, 3.65vw, 44px);
          height: clamp(20px, 3.65vw, 44px);
          margin-bottom: clamp(3px, 0.83vw, 10px);
        }

        .tech-card-icon svg:where([data-page="technical"], [data-page="technical"] *) {
          width: clamp(15px, 2.85vw, 34px);
          height: clamp(15px, 2.85vw, 34px);
        }

        .tech-constellation-card h3:where([data-page="technical"], [data-page="technical"] *) {
          font-size: clamp(0.52rem, 1.35vw, 1.16rem);
          line-height: 1.12;
        }

        .tech-constellation-card p:where([data-page="technical"], [data-page="technical"] *) {
          margin-top: clamp(3px, 0.75vw, 9px);
          font-size: clamp(0.39rem, 0.76vw, 0.91rem);
          line-height: 1.42;
        }

        .tech-card-arrow:where([data-page="technical"], [data-page="technical"] *) {
          width: clamp(21px, 3.83vw, 46px);
          min-width: clamp(21px, 3.83vw, 46px);
          height: clamp(14px, 2.5vw, 30px);
          flex-basis: clamp(11px, 2vw, 24px);
          border-radius: clamp(3px, 0.58vw, 7px);
          font-size: clamp(0.5rem, 0.93vw, 1.12rem);
        }

        .tech-constellation-center:where([data-page="technical"], [data-page="technical"] *) {
          left: 50%;
          right: auto;
          top: 50%;
          bottom: auto;
          width: var(--tech-octagon-size);
          height: var(--tech-octagon-size);
          margin: 0;
          padding: clamp(10px, 2vw, 24px);
          border-radius: 0;
          transform: translate(-50%, -50%);
        }

        .tech-constellation-center strong:where([data-page="technical"], [data-page="technical"] *) {
          font-size: clamp(0.58rem, 1.07vw, 1.28rem);
        }

        .tech-constellation-center span:where([data-page="technical"], [data-page="technical"] *) {
          margin-top: clamp(2px, 0.5vw, 6px);
          font-size: clamp(0.38rem, 0.68vw, 0.82rem);
        }

        .tech-overview-summary:where([data-page="technical"], [data-page="technical"] *) {
          padding-top: clamp(42px, 6.67vw, 80px);
          padding-bottom: clamp(40px, 6.33vw, 76px);
        }

        .tech-summary-grid:where([data-page="technical"], [data-page="technical"] *) {
          grid-template-columns: minmax(0, 0.94fr) minmax(0, 0.86fr);
          gap: clamp(14px, 3.33vw, 40px);
          align-items: center;
        }

        .tech-summary-copy:where([data-page="technical"], [data-page="technical"] *) {
          min-width: 0;
        }

        .tech-summary-kicker:where([data-page="technical"], [data-page="technical"] *) {
          margin-bottom: clamp(7px, 1.5vw, 18px);
          font-size: clamp(0.42rem, 0.79vw, 0.95rem);
        }

        .tech-summary-title:where([data-page="technical"], [data-page="technical"] *) {
          font-size: clamp(1.05rem, 4vw, 2.35rem);
        }

        .tech-summary-lead:where([data-page="technical"], [data-page="technical"] *) {
          margin-top: clamp(9px, 1.83vw, 22px);
          font-size: clamp(0.48rem, 0.88vw, 1.06rem);
          line-height: 1.7;
        }

        .tech-summary-features:where([data-page="technical"], [data-page="technical"] *) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: clamp(8px, 1.83vw, 22px) clamp(10px, 2.33vw, 28px);
          margin-top: clamp(16px, 3.17vw, 38px);
        }

        .tech-summary-feature:where([data-page="technical"], [data-page="technical"] *) {
          grid-template-columns: clamp(15px, 2.67vw, 32px) 1fr;
          gap: clamp(5px, 1vw, 12px);
        }

        .tech-summary-feature-icon:where([data-page="technical"], [data-page="technical"] *) {
          width: clamp(12px, 2vw, 24px);
          height: clamp(12px, 2vw, 24px);
          margin-top: clamp(0px, 0.08vw, 1px);
          font-size: clamp(0.38rem, 0.75vw, 0.9rem);
        }

        .tech-summary-feature strong:where([data-page="technical"], [data-page="technical"] *) {
          font-size: clamp(0.46rem, 0.85vw, 1.02rem);
        }

        .tech-summary-feature p:where([data-page="technical"], [data-page="technical"] *) {
          margin-top: clamp(3px, 0.58vw, 7px);
          font-size: clamp(0.42rem, 0.8vw, 0.96rem);
          line-height: 1.5;
        }

        .tech-device:where([data-page="technical"], [data-page="technical"] *) {
          width: min(100%, 500px);
        }

        .tech-device-screen:where([data-page="technical"], [data-page="technical"] *) {
          padding: clamp(6px, 1.17vw, 14px);
          border-radius: clamp(12px, 2.17vw, 26px) clamp(12px, 2.17vw, 26px)
            clamp(7px, 1.33vw, 16px) clamp(7px, 1.33vw, 16px);
        }

        .tech-device-camera-row:where([data-page="technical"], [data-page="technical"] *) {
          gap: clamp(3px, 0.67vw, 8px);
          margin-bottom: clamp(4px, 0.83vw, 10px);
        }

        .tech-device-camera-row span:where([data-page="technical"], [data-page="technical"] *) {
          width: clamp(3px, 0.5vw, 6px);
          height: clamp(3px, 0.5vw, 6px);
        }

        .tech-device-screen img:where([data-page="technical"], [data-page="technical"] *) {
          border-radius: clamp(6px, 1.17vw, 14px);
        }

        .tech-device-base:where([data-page="technical"], [data-page="technical"] *) {
          height: clamp(8px, 1.5vw, 18px);
          border-radius: 0 0 clamp(10px, 1.83vw, 22px) clamp(10px, 1.83vw, 22px);
        }

        .tech-device-base:where([data-page="technical"], [data-page="technical"] *)::after {
          top: clamp(1px, 0.17vw, 2px);
          width: clamp(47px, 9.33vw, 112px);
          height: clamp(2px, 0.42vw, 5px);
        }

        .tech-summary-cta:where([data-page="technical"], [data-page="technical"] *) {
          flex-direction: row;
          align-items: center;
          gap: clamp(8px, 2vw, 24px);
          margin-top: clamp(18px, 2.83vw, 34px);
          padding: clamp(12px, 2.33vw, 28px) clamp(12px, 2.5vw, 30px);
          border-radius: clamp(10px, 1.83vw, 22px);
        }

        .tech-summary-cta-copy:where([data-page="technical"], [data-page="technical"] *) {
          align-items: center;
          gap: clamp(7px, 1.5vw, 18px);
        }

        .tech-summary-cta-icon:where([data-page="technical"], [data-page="technical"] *) {
          width: clamp(23px, 4.33vw, 52px);
          height: clamp(23px, 4.33vw, 52px);
        }

        .tech-summary-cta-icon svg:where([data-page="technical"], [data-page="technical"] *) {
          width: clamp(12px, 2.33vw, 28px);
          height: clamp(12px, 2.33vw, 28px);
        }

        .tech-summary-cta h3:where([data-page="technical"], [data-page="technical"] *) {
          font-size: clamp(0.52rem, 1.17vw, 1.4rem);
        }

        .tech-summary-cta p:where([data-page="technical"], [data-page="technical"] *) {
          margin-top: clamp(3px, 0.67vw, 8px);
          font-size: clamp(0.43rem, 0.83vw, 1rem);
          line-height: 1.5;
        }

        .tech-summary-cta-btn:where([data-page="technical"], [data-page="technical"] *, [data-page="ueber_uns"] *) {
          width: auto;
          min-height: clamp(25px, 4.67vw, 56px);
          padding: clamp(6px, 1.25vw, 15px) clamp(10px, 2vw, 24px);
          gap: clamp(5px, 1vw, 12px);
          border-radius: clamp(6px, 1.17vw, 14px);
          font-size: clamp(0.46rem, 0.83vw, 1rem);
        }
      }

      /* Wie auf der Startseite: der kleine Status-Badge verschwindet ab 980px. */
      @media (max-width: 980px) {
        .tech-overview-kicker:where([data-page="technical"], [data-page="technical"] *) {
          display: none !important;
        }
      }

      @media (max-width: 399px) {
        .tech-overview-hero:where([data-page="technical"], [data-page="technical"] *) {
          padding-top: 106px;
          padding-bottom: 46px;
        }

        /* Mobile Reihenfolge: Überschrift → Unterüberschrift → Technikgrafik → Text → Button */
        .tech-overview-grid:where([data-page="technical"], [data-page="technical"] *) {
          grid-template-columns: minmax(0, 1fr);
          gap: 0;
          align-items: start;
        }

        .tech-overview-copy:where([data-page="technical"], [data-page="technical"] *) {
          display: contents;
        }

        .tech-overview-title:where([data-page="technical"], [data-page="technical"] *) {
          grid-row: 1;
          font-size: clamp(2.08rem, 10.7vw, 2.62rem);
        }

        .tech-overview-subtitle:where([data-page="technical"], [data-page="technical"] *) {
          grid-row: 2;
          margin-top: 18px;
          font-size: 0.98rem;
          line-height: 1.4;
        }

        .tech-constellation:where([data-page="technical"], [data-page="technical"] *) {
          --tech-octagon-size: clamp(70px, 22vw, 86px);
          --tech-octagon-edge-offset: clamp(17px, 5.8vw, 23px);
          --tech-card-cut: clamp(20px, 6.8vw, 27px);
          --tech-card-height: clamp(80px, 25vw, 98px);
          grid-row: 3;
          position: relative;
          display: block;
          width: 100%;
          max-width: 360px;
          height: clamp(174px, 55vw, 214px);
          margin: 26px auto 0;
        }

        .tech-constellation-card:where([data-page="technical"], [data-page="technical"] *),
        .tech-constellation-center:where([data-page="technical"], [data-page="technical"] *) {
          position: absolute;
        }

        .tech-constellation-card:where([data-page="technical"], [data-page="technical"] *) {
          width: calc(50% - var(--tech-octagon-edge-offset));
          height: var(--tech-card-height);
          min-height: 0;
          padding: 10px 10px 9px;
          justify-content: center;
          overflow: hidden;
        }

        .tech-constellation-card--one:where([data-page="technical"], [data-page="technical"] *) {
          left: 0;
          right: auto;
          top: 0;
          bottom: auto;
          clip-path: polygon(
            0 0,
            100% 0,
            100% calc(100% - var(--tech-card-cut)),
            calc(100% - var(--tech-card-cut)) 100%,
            0 100%
          );
          border-radius: 14px;
        }

        .tech-constellation-card--two:where([data-page="technical"], [data-page="technical"] *) {
          left: auto;
          right: 0;
          top: 0;
          bottom: auto;
          clip-path: polygon(
            0 0,
            100% 0,
            100% 100%,
            var(--tech-card-cut) 100%,
            0 calc(100% - var(--tech-card-cut))
          );
          border-radius: 14px;
        }

        .tech-constellation-card--three:where([data-page="technical"], [data-page="technical"] *) {
          left: 0;
          right: auto;
          top: auto;
          bottom: 0;
          clip-path: polygon(
            0 0,
            calc(100% - var(--tech-card-cut)) 0,
            100% var(--tech-card-cut),
            100% 100%,
            0 100%
          );
          border-radius: 14px;
        }

        .tech-constellation-card--four:where([data-page="technical"], [data-page="technical"] *) {
          left: auto;
          right: 0;
          top: auto;
          bottom: 0;
          clip-path: polygon(
            var(--tech-card-cut) 0,
            100% 0,
            100% 100%,
            0 100%,
            0 var(--tech-card-cut)
          );
          border-radius: 14px;
        }

        /* Auf sehr kleinen Displays nur Symbol + Bereichsname, damit die 1:1-Anordnung erhalten bleibt. */
        .tech-constellation-card p:where([data-page="technical"], [data-page="technical"] *),
        .tech-card-arrow:where([data-page="technical"], [data-page="technical"] *) {
          display: none;
        }

        .tech-card-icon:where([data-page="technical"], [data-page="technical"] *) {
          width: 29px;
          height: 29px;
          margin-bottom: 5px;
        }

        .tech-card-icon svg:where([data-page="technical"], [data-page="technical"] *) {
          width: 24px;
          height: 24px;
        }

        .tech-constellation-card h3:where([data-page="technical"], [data-page="technical"] *) {
          max-width: 100%;
          font-size: clamp(0.62rem, 3vw, 0.76rem);
          line-height: 1.12;
        }

        .tech-constellation-center:where([data-page="technical"], [data-page="technical"] *) {
          left: 50%;
          right: auto;
          top: 50%;
          bottom: auto;
          width: var(--tech-octagon-size);
          height: var(--tech-octagon-size);
          margin: 0;
          padding: 9px;
          border-radius: 0;
          transform: translate(-50%, -50%);
          clip-path: polygon(
            30% 0,
            70% 0,
            100% 30%,
            100% 70%,
            70% 100%,
            30% 100%,
            0 70%,
            0 30%
          );
        }

        .tech-constellation-center strong:where([data-page="technical"], [data-page="technical"] *) {
          font-size: clamp(0.52rem, 2.6vw, 0.66rem);
        }

        .tech-constellation-center span:where([data-page="technical"], [data-page="technical"] *) {
          margin-top: 3px;
          font-size: clamp(0.35rem, 1.8vw, 0.46rem);
        }

        .tech-overview-text:where([data-page="technical"], [data-page="technical"] *) {
          grid-row: 4;
          margin-top: 24px;
          font-size: 0.94rem;
          line-height: 1.62;
        }

        .tech-overview-actions:where([data-page="technical"], [data-page="technical"] *) {
          grid-row: 5;
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
          gap: 8px;
          width: 100%;
          margin-top: 22px;
        }

        .tech-overview-points:where([data-page="technical"], [data-page="technical"] *) {
          grid-row: 6;
          gap: 8px 14px;
          margin-top: 18px;
          font-size: clamp(0.68rem, 3vw, 0.82rem);
        }

        .tech-overview-btn:where([data-page="technical"], [data-page="technical"] *) {
          width: 100%;
          min-height: 52px;
          padding: 13px 18px;
          gap: 8px;
          font-size: 0.86rem;
        }

        .tech-overview-btn-home:where([data-page="technical"], [data-page="technical"] *) {
          min-height: 42px;
          padding: 7px 6px;
          border-radius: 10px;
          font-size: clamp(0.54rem, 2.55vw, 0.7rem);
          line-height: 1.18;
          white-space: normal;
          text-align: center;
        }

        .tech-overview-btn-light:where([data-page="technical"], [data-page="technical"] *)::after {
          font-size: 1rem;
        }

        /* Mobile Reihenfolge im zweiten Abschnitt:
     Überschrift → Bild → Text → Merkmale */
        .tech-summary-grid:where([data-page="technical"], [data-page="technical"] *) {
          grid-template-columns: 1fr;
          gap: 0;
          align-items: start;
        }

        .tech-summary-copy:where([data-page="technical"], [data-page="technical"] *) {
          display: contents;
        }

        .tech-summary-kicker:where([data-page="technical"], [data-page="technical"] *) {
          grid-row: 1;
          margin-bottom: 10px;
          font-size: 0.72rem;
        }

        .tech-summary-title:where([data-page="technical"], [data-page="technical"] *) {
          grid-row: 2;
          font-size: clamp(1.7rem, 8.3vw, 2.05rem);
        }

        .tech-summary-visual:where([data-page="technical"], [data-page="technical"] *) {
          grid-row: 3;
          margin-top: 24px;
        }

        .tech-summary-lead:where([data-page="technical"], [data-page="technical"] *) {
          grid-row: 4;
          margin-top: 24px;
          font-size: 0.88rem;
          line-height: 1.65;
        }

        .tech-summary-features:where([data-page="technical"], [data-page="technical"] *) {
          grid-row: 5;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 16px 12px;
          margin-top: 24px;
        }

        .tech-summary-feature:where([data-page="technical"], [data-page="technical"] *) {
          grid-template-columns: 24px minmax(0, 1fr);
          gap: 7px;
        }

        .tech-summary-feature-icon:where([data-page="technical"], [data-page="technical"] *) {
          width: 20px;
          height: 20px;
          margin-top: 1px;
          font-size: clamp(0.64rem, 2.9vw, 0.76rem);
        }

        .tech-summary-feature strong:where([data-page="technical"], [data-page="technical"] *) {
          font-size: clamp(0.72rem, 3.3vw, 0.82rem);
          line-height: 1.2;
        }

        .tech-summary-feature p:where([data-page="technical"], [data-page="technical"] *) {
          margin-top: 4px;
          font-size: clamp(0.66rem, 2.9vw, 0.74rem);
          line-height: 1.45;
        }

        .tech-summary-cta:where([data-page="technical"], [data-page="technical"] *) {
          flex-direction: column;
          align-items: stretch;
        }

        .tech-summary-cta-copy:where([data-page="technical"], [data-page="technical"] *) {
          align-items: flex-start;
        }

        .tech-summary-cta-btn:where([data-page="technical"], [data-page="technical"] *, [data-page="ueber_uns"] *) {
          width: 100%;
        }
      }


      /* Desktop-Hero: etwas schmaler, damit die Technik-Seite optisch genau
         zur Breite der übrigen Dropdown-Unterseiten passt. */
      @media (min-width: 981px) {
        .tech-overview-hero > .page-shell:where([data-page="technical"], [data-page="technical"] *) {
          width: min(1380px, calc(100% - 24px));
        }

        /* Der Bereich darunter nutzt exakt dieselbe 1520px-Inhaltszone wie
           die übrigen bereits angepassten Unterseiten. */
        .tech-overview-summary > .page-shell:where([data-page="technical"], [data-page="technical"] *) {
          width: min(1560px, calc(100% - 4px));
        }

        /* Die Technik-Zusammenfassung soll die breite Fläche auch optisch
           ausnutzen und nicht durch die bisherigen Maximalbreiten kleiner
           wirken als die anderen Seiten. */
        .tech-overview-summary .tech-summary-grid:where([data-page="technical"], [data-page="technical"] *) {
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
          gap: clamp(44px, 4vw, 64px);
        }

        .tech-overview-summary .tech-summary-lead:where([data-page="technical"], [data-page="technical"] *) {
          max-width: 760px;
        }

        .tech-overview-summary .tech-summary-visual:where([data-page="technical"], [data-page="technical"] *) {
          justify-content: flex-end;
        }

        .tech-overview-summary .tech-device:where([data-page="technical"], [data-page="technical"] *) {
          width: min(100%, 650px);
        }
      }

      @media (min-width: 1201px) {
        /* Hero bewusst nicht weiter nach außen ziehen: Die Technik-Seite
           soll dieselbe optische Inhaltsbreite wie die übrigen Unterseiten
           behalten. Der Bereich darunter bleibt unverändert breit. */
        .tech-overview-hero .tech-overview-grid:where([data-page="technical"], [data-page="technical"] *) {
          grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
          gap: clamp(36px, 4vw, 64px);
        }

        .tech-overview-hero .tech-overview-copy:where([data-page="technical"], [data-page="technical"] *) {
          position: relative;
          left: 0;
          max-width: 640px;
        }

        .tech-overview-hero .tech-constellation:where([data-page="technical"], [data-page="technical"] *) {
          right: 0;
        }
      }
    
      /* Hero-Unterüberschrift exakt wie die Referenz auf index.html. */
      .tech-overview-subtitle:where([data-page="technical"], [data-page="technical"] *) {
        font-family: Arial, sans-serif !important;
        font-size: clamp(1.12rem, 1.8vw, 1.6rem) !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        letter-spacing: normal !important;
        font-style: normal !important;
        text-transform: none !important;
      }

      @media (min-width: 400px) and (max-width: 980px) {
        .tech-overview-subtitle:where([data-page="technical"], [data-page="technical"] *) {
          font-size: clamp(.69rem, 1.55vw, 1.08rem) !important;
          line-height: 1.34 !important;
        }
      }

      @media (max-width: 399px) {
        .tech-overview-subtitle:where([data-page="technical"], [data-page="technical"] *) {
          font-size: 1.06rem !important;
          line-height: 1.4 !important;
        }
      }


/* html/technik/technical.html – technik-hero-points-like-startpage */

      /* Hakenzeile im Technik-Hero: exakt dieselbe Schriftgröße wie auf der Startseite. */
      .tech-overview-hero .tech-overview-points:where([data-page="technical"], [data-page="technical"] *) {
        font-size: clamp(.84rem, 1vw, 1rem) !important;
      }

      .tech-overview-hero .tech-overview-points i:where([data-page="technical"], [data-page="technical"] *) {
        font-size: inherit !important;
      }

      @media (min-width: 400px) and (max-width: 980px) {
        .tech-overview-hero .tech-overview-points:where([data-page="technical"], [data-page="technical"] *) {
          font-size: clamp(.54rem, 1.05vw, .86rem) !important;
        }
      }

      @media (max-width: 399px) {
        .tech-overview-hero .tech-overview-points:where([data-page="technical"], [data-page="technical"] *) {
          font-size: clamp(.68rem, 3vw, .82rem) !important;
        }
      }
    

/* html/technik/website_entwicklung.html – technik-dropdown-hero-points-like-startpage */

/* Hero-Hakenzeilen: exakt dieselbe Schriftgröße wie auf der Startseite. */
body.toowie-subpage .page-hero .page-hero-points:where([data-page="website_entwicklung"], [data-page="website_entwicklung"] *) {
  font-size: clamp(.84rem, 1vw, 1rem) !important;
}

body.toowie-subpage .page-hero .page-hero-points i:where([data-page="website_entwicklung"], [data-page="website_entwicklung"] *) {
  font-size: inherit !important;
}

@media (min-width: 400px) and (max-width: 980px) {
  body.toowie-subpage .page-hero .page-hero-points:where([data-page="website_entwicklung"], [data-page="website_entwicklung"] *) {
    font-size: clamp(.54rem, 1.05vw, .86rem) !important;
  }
}

@media (max-width: 399px) {
  body.toowie-subpage .page-hero .page-hero-points:where([data-page="website_entwicklung"], [data-page="website_entwicklung"] *) {
    font-size: clamp(.68rem, 3vw, .82rem) !important;
  }
}

/* Referenz-Hinweis im Hero dezent absetzen. */
body.website-showcase-page .reference-label:where([data-page="website_entwicklung"], [data-page="website_entwicklung"] *) {
  color: #c4c7cc;
}

/* Website-Übersicht: drei Themenkarten auf Desktop bewusst breiter darstellen. */
@media (min-width: 981px) {
  body.website-showcase-page .service-phase-flow:where([data-page="website_entwicklung"], [data-page="website_entwicklung"] *) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
  }

  body.website-showcase-page .service-phase-flow.service-phase-content-sized .service-phase-card:where([data-page="website_entwicklung"], [data-page="website_entwicklung"] *),
  body.website-showcase-page .service-phase-flow[data-service-count^="3"] .service-phase-card:where([data-page="website_entwicklung"], [data-page="website_entwicklung"] *) {
    flex: initial !important;
    width: auto !important;
    max-width: none !important;
  }

  body.website-showcase-page .service-phase-flow .service-phase-card h3:where([data-page="website_entwicklung"], [data-page="website_entwicklung"] *) {
    white-space: nowrap;
  }

  /* Erstes Beispielbild etwas kompakter und sauber in den Abschnitt einpassen. */
  body.website-showcase-page #modernes-design .website-showcase-visual:where([data-page="website_entwicklung"], [data-page="website_entwicklung"] *) {
    max-width: 560px;
    width: 100%;
    justify-self: end;
    align-self: start;
    padding: 18px;
  }

  body.website-showcase-page #modernes-design .website-showcase-visual img:where([data-page="website_entwicklung"], [data-page="website_entwicklung"] *) {
    height: 420px;
    object-fit: contain;
  }

  /* Kontakt & Rechtliches im blauen Abschnitt mit Inhalt links und Bild rechts. */
  body.website-showcase-page #rechtliche-grundlagen:where([data-page="website_entwicklung"], [data-page="website_entwicklung"] *) {
    background: #edf5f7;
  }

  body.website-showcase-page #rechtliche-grundlagen .service-feature-section-heading:where([data-page="website_entwicklung"], [data-page="website_entwicklung"] *) {
    color: #c69a57;
  }
}

@media (max-width: 980px) {
  body.website-showcase-page #modernes-design .website-showcase-visual:where([data-page="website_entwicklung"], [data-page="website_entwicklung"] *) {
    max-width: 100%;
    justify-self: stretch;
    padding: 14px;
  }

  body.website-showcase-page #modernes-design .website-showcase-visual img:where([data-page="website_entwicklung"], [data-page="website_entwicklung"] *) {
    height: auto;
    max-height: 380px;
  }
}


/* html/ueber_uns/ueber_uns.html – Seitengestaltung */

/* Über-Toowie – eigenständige Dramaturgie passend zu Startseite und Technik-Übersicht. */
.about-hero:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  position: relative;
  overflow: hidden;
  padding: clamp(136px, 12vw, 170px) 0 clamp(82px, 8vw, 104px);
  color: #fff;
  background:
    radial-gradient(circle at 17% 82%, rgba(10,40,80,.94), transparent 34%),
    radial-gradient(circle at 80% 18%, rgba(198,154,87,.15), transparent 24%),
    linear-gradient(135deg, #001428 0%, #0a2850 52%, #000a1e 100%);
}
.about-hero:where([data-page="ueber_uns"], [data-page="ueber_uns"] *)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 92%);
}
.about-shell:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { width: min(1440px, calc(100% - 12px)); margin: 0 auto; }
.about-hero-grid:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,.92fr) minmax(470px,1.08fr); gap: clamp(44px,6vw,86px); align-items: center; }
.about-kicker:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; gap: 8px; margin: 0 0 18px; padding: 7px 10px; color: #001428; background: #fff; border: 1px solid rgba(198,154,87,.42); border-radius: 999px; box-shadow: 0 10px 26px rgba(0,0,0,.14); font-family: Inter, Arial, sans-serif; font-size: 11px; font-weight: 950; line-height: 1; letter-spacing: .12em; text-transform: uppercase; }
.about-kicker:where([data-page="ueber_uns"], [data-page="ueber_uns"] *)::before { content:""; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 5px rgba(34,197,94,.16); }
.about-title:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { max-width: 820px; margin: 0; color: #fff; font-size: clamp(2.55rem,4.15vw,4.45rem); line-height: .97; letter-spacing: -.055em; font-weight: 780; }
.about-subtitle:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { max-width:760px; margin:22px 0 0; color:#fff; font-size:clamp(1.12rem,1.8vw,1.6rem); font-weight:700; line-height:1.35; }
.about-title span:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { color: #d8b77f; }
.about-lead:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { max-width: 760px; margin: 14px 0 0; color: rgba(255,255,255,.80); font-size: clamp(1.05rem,1.55vw,1.3rem); line-height: 1.72; }
.about-actions:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.about-btn:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 15px 25px; border-radius: 15px; font-weight: 800; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.about-btn:hover:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { transform: translateY(-2px); }
.about-btn-gold:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { color: #fff; background: linear-gradient(135deg,#dfbf7b,#c99945); box-shadow: 0 16px 34px rgba(198,154,87,.2); }
.about-btn-gold:hover:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { color:#fff; box-shadow: 0 20px 38px rgba(198,154,87,.28); }
.about-btn-ghost:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { color:#fff; border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.06); }
.about-btn-ghost:hover:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { color:#fff; background:rgba(255,255,255,.1); }
.about-hero .about-actions .about-btn:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { color:#0a2850; border:1px solid #fff; background:#fff; box-shadow:0 14px 30px rgba(0,0,0,.14); }
.about-hero .about-actions .about-btn:hover:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { color:#0a2850; background:#fff; box-shadow:0 18px 34px rgba(0,0,0,.18); }
.about-hero-points:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { display:flex; flex-wrap:wrap; gap:18px 24px; margin-top:30px; color:rgba(255,255,255,.78); font-size:.94rem; font-weight:700; }
.about-hero-points span:where([data-page="ueber_uns"], [data-page="ueber_uns"] *)::before { content:"✓"; margin-right:8px; color:#d8b77f; font-weight:900; }
.about-map:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { position:relative; width:min(100%,560px); min-height:520px; margin-left:auto; }
.about-map-center:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { position:absolute; left:50%; top:50%; z-index:3; transform:translate(-50%,-50%); width:190px; height:190px; display:grid; place-content:center; text-align:center; background:#d8b77f; color:#0a2850; clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); filter:drop-shadow(0 24px 34px rgba(0,0,0,.28)); }
.about-map-center:where([data-page="ueber_uns"], [data-page="ueber_uns"] *)::after { content:""; position:absolute; inset:4px; border:1.5px solid rgba(16,78,139,.72); clip-path:inherit; }
.about-map-center img:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { position:relative; z-index:2; width:118px; height:auto; margin:auto; }
.about-map-center small:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { position:relative; z-index:2; display:block; margin-top:8px; font-weight:800; letter-spacing:.04em; }
.about-map-card:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { position:absolute; z-index:1; width:230px; min-height:142px; padding:23px; border:1px solid rgba(255,255,255,.21); border-radius:24px; background:linear-gradient(180deg,rgba(82,122,173,.28),rgba(45,72,109,.20)); box-shadow:0 22px 54px rgba(2,8,19,.18); backdrop-filter:blur(10px); }
.about-map-card strong:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { display:block; color:#fff; font-size:1.2rem; font-weight:850; }
.about-map-card p:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { margin:8px 0 0; color:rgba(255,255,255,.72); font-size:.91rem; line-height:1.5; }
.about-map-card--tech:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { left:0; top:20px; }
.about-map-card--practice:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { right:0; top:50px; }
.about-map-card--communication:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { left:50%; bottom:0; transform:translateX(-50%); }
.about-map-line:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { position:absolute; z-index:0; height:1px; transform-origin:left center; background:linear-gradient(90deg,rgba(216,183,127,.08),rgba(216,183,127,.62),rgba(216,183,127,.08)); }
.about-map-line--one:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { width:180px; left:150px; top:180px; transform:rotate(22deg); }
.about-map-line--two:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { width:180px; left:300px; top:188px; transform:rotate(-28deg); }
.about-map-line--three:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { width:150px; left:275px; top:315px; transform:rotate(90deg); }
.about-section:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { padding: clamp(78px,8vw,108px) 0; }
.about-section-white:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { background:#edf5f7; }
.about-section-soft:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { background:#fcf7ef; }
.about-purpose-section:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { background:#fcf7ef; padding-bottom:clamp(58px,6vw,78px); }
.about-section-dark:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { color:#fff; background:linear-gradient(135deg,#071a2e 0%,#0a2850 56%,#061425 100%); }
.about-section-kicker:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { margin:0 0 17px; color:#c69a57; font-size:.77rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.about-section-title:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { max-width:820px; margin:0; color:#10304e; font-size:clamp(2.3rem,4vw,3.55rem); line-height:1.07; letter-spacing:-.035em; font-weight:850; }
.about-section-title span:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { color:#c69a57; }
.about-section-lead:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { max-width:760px; margin:22px 0 0; color:#596d80; font-size:1.07rem; line-height:1.82; }
.about-section-dark .about-section-title:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { color:#fff; }
.about-section-dark .about-section-lead:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { color:rgba(255,255,255,.72); }
.about-communication-section:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { padding-top:clamp(92px,9vw,118px); padding-bottom:clamp(86px,8.5vw,112px); }
.about-communication-head:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { display:grid; grid-template-columns:minmax(0,.96fr) minmax(280px,.72fr); gap:clamp(28px,5vw,72px); align-items:center; margin-bottom:18px; }
.about-communication-copy .about-section-title:where([data-page="ueber_uns"], [data-page="ueber_uns"] *), .about-communication-copy .about-section-lead:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { max-width:none; }
.about-communication-brand:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { position:relative; overflow:hidden; min-height:320px; padding:32px 34px; border:1px solid rgba(255,255,255,.12); border-radius:30px; background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)); box-shadow:0 22px 50px rgba(0,0,0,.18); isolation:isolate; }
.about-communication-brand:where([data-page="ueber_uns"], [data-page="ueber_uns"] *)::before { content:""; position:absolute; left:-60px; bottom:-80px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, rgba(216,183,127,.16), transparent 72%); }
.about-communication-brand:where([data-page="ueber_uns"], [data-page="ueber_uns"] *)::after { content:""; position:absolute; right:-36px; top:26px; width:120px; height:120px; border:1px solid rgba(216,183,127,.16); border-radius:50%; }
.about-communication-brand-kicker:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { position:relative; z-index:1; display:block; color:rgba(255,255,255,.66); font-size:.76rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.about-communication-wordmark:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { position:relative; z-index:1; display:grid; grid-template-columns:auto minmax(90px,1fr) auto; align-items:center; gap:10px; margin-top:18px; }
.about-wordmark-start:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { justify-self:start; color:#fff; font-size:clamp(2.1rem,3.2vw,3rem); font-weight:850; letter-spacing:-.04em; }
.about-wordmark-o:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { position:relative; display:grid; place-items:center; width:clamp(108px,10vw,148px); height:clamp(108px,10vw,148px); margin:0 auto; background:linear-gradient(135deg,#dfbf7b,#c99945); color:#0a2850; font-size:clamp(3.3rem,5vw,4.9rem); font-weight:900; line-height:1; clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); box-shadow:0 18px 36px rgba(201,153,69,.22); }
.about-wordmark-o > span:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { position:relative; z-index:1; }
.about-wordmark-end:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { justify-self:end; color:#fff; font-size:clamp(1.4rem,2.1vw,2rem); font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.about-communication-echo:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { position:relative; z-index:1; display:flex; align-items:center; justify-content:flex-end; gap:14px; margin-top:18px; }
.about-technology-section:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { padding:clamp(86px,8vw,112px) 0; background:#f4efe7; }
.about-technology-head:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,.96fr); gap:clamp(28px,5vw,72px); align-items:center; }
.about-technology-copy .about-section-title:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { color:#10304e; max-width:none; }
.about-technology-copy .about-section-title span:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { color:#c69a57; }
.about-technology-copy .about-section-lead:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { max-width:none; color:#596d80; }
.about-technology-brand:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { position:relative; overflow:hidden; min-height:320px; padding:32px 34px; border:1px solid rgba(16,48,78,.10); border-radius:30px; background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(252,247,239,.98)); box-shadow:0 18px 42px rgba(19,40,61,.08); isolation:isolate; }
.about-technology-brand:where([data-page="ueber_uns"], [data-page="ueber_uns"] *)::before { content:""; position:absolute; left:-55px; top:-65px; width:190px; height:190px; border-radius:50%; background:radial-gradient(circle, rgba(216,183,127,.22), transparent 72%); }
.about-technology-brand:where([data-page="ueber_uns"], [data-page="ueber_uns"] *)::after { content:""; position:absolute; right:-40px; bottom:-48px; width:170px; height:170px; border-radius:50%; border:1px solid rgba(16,48,78,.08); }
.about-technology-brand-kicker:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { position:relative; z-index:1; display:block; color:rgba(16,48,78,.62); font-size:.76rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.about-technology-wordmark:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { position:relative; z-index:1; display:grid; grid-template-columns:auto auto auto; align-items:center; justify-content:start; gap:12px; margin-top:18px; }
.about-technology-wordmark-octagon:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { justify-self:start; width:clamp(108px,10vw,148px); height:clamp(108px,10vw,148px); }
.about-technology-wordmark-mid:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { color:#10304e; font-size:clamp(2.05rem,3.2vw,3rem); font-weight:850; letter-spacing:-.04em; }
.about-technology-wordmark-end:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { color:#10304e; font-size:clamp(1.4rem,2.1vw,2rem); font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.about-technology-echo:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { position:relative; z-index:1; display:flex; align-items:center; justify-content:flex-start; gap:14px; margin-top:18px; }
.about-technology-echo-label:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { color:rgba(16,48,78,.52); font-size:.75rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; }
.about-technology-echo-line:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { flex:1 1 auto; min-width:90px; height:1px; background:linear-gradient(90deg,rgba(198,154,87,.12),rgba(198,154,87,.62),rgba(198,154,87,.12)); }
.about-technology-echo-word:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { color:#c69a57; font-size:clamp(1.55rem,2.2vw,2.1rem); font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
.about-technology-note:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { position:relative; z-index:1; margin:18px 0 0; color:#5c7082; font-size:.96rem; line-height:1.6; }
.about-communication-echo-label:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { color:rgba(255,255,255,.62); font-size:.75rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; }
.about-communication-echo-line:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { flex:1 1 auto; min-width:90px; height:1px; background:linear-gradient(90deg,rgba(216,183,127,0),rgba(216,183,127,.58),rgba(216,183,127,0)); }
.about-communication-echo-word:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { color:#d8b77f; font-size:clamp(1.55rem,2.2vw,2.1rem); font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
.about-communication-note:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { position:relative; z-index:1; margin:18px 0 0; color:rgba(255,255,255,.72); font-size:.96rem; line-height:1.6; text-align:right; }
.about-purpose-grid:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:44px; }
.about-purpose-card:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { position:relative; overflow:hidden; min-height:280px; padding:30px; border:1px solid rgba(16,48,78,.09); border-radius:26px; background:#fff; box-shadow:0 18px 45px rgba(19,40,61,.07); }
.about-purpose-number:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { display:block; color:#d8b77f; font-size:4.5rem; font-weight:900; line-height:.9; letter-spacing:-.08em; opacity:.9; }
.about-purpose-card h3:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { margin:24px 0 0; color:#10304e; font-size:1.45rem; font-weight:850; }
.about-purpose-card p:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { margin:12px 0 0; color:#64778a; line-height:1.7; }
.about-process-head:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { display:grid; grid-template-columns:minmax(0,.9fr) minmax(350px,.65fr); gap:44px; align-items:end; margin-bottom:48px; }
.about-process-note:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { padding:24px 26px; border:1px solid rgba(198,154,87,.18); border-radius:22px; background:#f5f0e8; color:#5d6f80; line-height:1.7; }
.about-process-note strong:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { color:#10304e; }
.about-steps:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { display:grid; gap:22px; }
.about-step:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { display:grid; grid-template-columns:76px minmax(0,1fr) minmax(250px,.68fr); gap:28px; align-items:center; padding:22px; border:1px solid rgba(16,48,78,.09); border-radius:26px; background:#fff; box-shadow:0 16px 38px rgba(19,40,61,.06); }
.about-step-number:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { display:grid; place-items:center; width:64px; height:64px; border-radius:50%; color:#10304e; background:#d8b77f; font-size:1.15rem; font-weight:900; }
.about-step-copy h3:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { margin:0; color:#10304e; font-size:1.35rem; font-weight:850; }
.about-step-copy p:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { margin:9px 0 0; color:#63768a; line-height:1.68; }
.about-step-image:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { overflow:hidden; height:150px; border-radius:18px; background:#eef2f5; }
.about-step-image img:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { width:100%; height:100%; object-fit:cover; }
.about-person-grid:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { display:grid; grid-template-columns:minmax(320px,.8fr) minmax(0,1.2fr); gap:clamp(42px,6vw,82px); align-items:center; }
.about-person-visual:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { position:relative; width:min(100%,430px); margin:auto; }
.about-person-photo:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { overflow:hidden; border-radius:28px; background:#f0f2f4; box-shadow:0 30px 70px rgba(7,24,43,.18); }
.about-person-photo img:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { display:block; width:100%; height:auto; }
.about-person-badge:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { position:absolute; right:-22px; bottom:24px; max-width:220px; padding:17px 20px; border-radius:18px; background:#d8b77f; color:#10304e; box-shadow:0 18px 34px rgba(7,24,43,.2); }
.about-person-badge strong:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { display:block; font-size:1rem; font-weight:900; }
.about-person-badge span:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { display:block; margin-top:4px; font-size:.88rem; line-height:1.4; }
.about-checks:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { display:grid; gap:13px; margin:28px 0 0; padding:0; list-style:none; }
.about-checks li:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { position:relative; padding-left:30px; color:#5c7082; line-height:1.6; }
.about-checks li:where([data-page="ueber_uns"], [data-page="ueber_uns"] *)::before { content:"✓"; position:absolute; left:0; color:#c69a57; font-weight:900; }
.about-tools-grid:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:42px; }
.about-tool:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { display:grid; grid-template-columns:minmax(0,1fr) 170px; gap:22px; align-items:center; padding:28px; border:1px solid rgba(255,255,255,.12); border-radius:26px; background:rgba(255,255,255,.055); }
.about-tool h3:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { margin:0; color:#fff; font-size:1.4rem; font-weight:850; }
.about-tool p:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { margin:12px 0 0; color:rgba(255,255,255,.68); line-height:1.65; }
.about-tool a:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { display:inline-flex; margin-top:18px; color:#d8b77f; font-weight:850; text-decoration:none; }
.about-tool img:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { width:100%; max-height:150px; object-fit:contain; filter:drop-shadow(0 14px 22px rgba(0,0,0,.2)); }
.about-technology-tools-grid:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:42px; }
.about-technology-tool:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { display:grid; grid-template-columns:minmax(0,1fr) 170px; gap:22px; align-items:center; padding:28px; border:1px solid rgba(16,48,78,.10); border-radius:26px; background:#fff; box-shadow:0 16px 38px rgba(19,40,61,.06); }
.about-technology-tool h3:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { margin:0; color:#10304e; font-size:1.4rem; font-weight:850; }
.about-technology-tool p:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { margin:12px 0 0; color:#64778a; line-height:1.65; }
.about-technology-tool a:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { display:inline-flex; margin-top:18px; color:#c69a57; font-weight:850; text-decoration:none; }
.about-technology-tool img:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { width:100%; max-height:150px; object-fit:contain; filter:drop-shadow(0 14px 22px rgba(19,40,61,.12)); }
.about-interconnection-section:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { padding:clamp(92px,9vw,118px) 0 clamp(86px,8.5vw,112px); background:#edf5f7; }
.about-interconnection-head:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { display:grid; grid-template-columns:minmax(0,.96fr) minmax(280px,.72fr); gap:clamp(28px,5vw,72px); align-items:center; margin-bottom:18px; }
.about-interconnection-copy .about-section-title:where([data-page="ueber_uns"], [data-page="ueber_uns"] *), .about-interconnection-copy .about-section-lead:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { max-width:none; }
.about-interconnection-brand:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { position:relative; overflow:hidden; min-height:320px; padding:32px 34px; border:1px solid rgba(16,48,78,.10); border-radius:30px; background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(244,250,251,.98)); box-shadow:0 18px 42px rgba(19,40,61,.08); isolation:isolate; }
.about-interconnection-brand:where([data-page="ueber_uns"], [data-page="ueber_uns"] *)::before { content:""; position:absolute; left:-55px; bottom:-70px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle, rgba(216,183,127,.20), transparent 72%); }
.about-interconnection-brand:where([data-page="ueber_uns"], [data-page="ueber_uns"] *)::after { content:""; position:absolute; right:-34px; top:26px; width:122px; height:122px; border-radius:50%; border:1px solid rgba(16,48,78,.08); }
.about-interconnection-brand-kicker:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { position:relative; z-index:1; display:block; color:rgba(16,48,78,.62); font-size:.76rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.about-interconnection-wordmark:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { position:relative; z-index:1; display:grid; grid-template-columns:auto auto; align-items:center; justify-content:space-between; gap:18px; margin-top:18px; }
.about-interconnection-wordmark-start:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { color:#10304e; font-size:clamp(2.05rem,3.2vw,3rem); font-weight:850; letter-spacing:-.04em; }
.about-interconnection-wordmark-octagon:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { display:grid; place-items:center; width:clamp(120px,11vw,160px); height:clamp(120px,11vw,160px); margin-left:auto; background:linear-gradient(135deg,#dfbf7b,#c99945); color:#0a2850; font-size:clamp(1.6rem,2.8vw,2.65rem); font-weight:900; line-height:1; letter-spacing:.04em; clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); box-shadow:0 18px 36px rgba(201,153,69,.18); }
.about-interconnection-echo:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { position:relative; z-index:1; display:flex; align-items:center; justify-content:flex-end; gap:14px; margin-top:18px; }
.about-interconnection-echo-label:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { color:rgba(16,48,78,.52); font-size:.75rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; }
.about-interconnection-echo-line:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { flex:1 1 auto; min-width:90px; height:1px; background:linear-gradient(90deg,rgba(198,154,87,.12),rgba(198,154,87,.62),rgba(198,154,87,.12)); }
.about-interconnection-echo-word:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { color:#c69a57; font-size:clamp(1.25rem,1.8vw,1.75rem); font-weight:850; letter-spacing:.08em; }
.about-interconnection-note:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { position:relative; z-index:1; margin:18px 0 0; color:#5c7082; font-size:.96rem; line-height:1.6; text-align:right; }
.about-interconnection-tools-grid:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:42px; }
.about-interconnection-tool:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { display:grid; grid-template-columns:minmax(0,1fr) 170px; gap:22px; align-items:center; padding:28px; border:1px solid rgba(16,48,78,.10); border-radius:26px; background:#fff; box-shadow:0 16px 38px rgba(19,40,61,.06); }
.about-interconnection-tool h3:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { margin:0; color:#10304e; font-size:1.4rem; font-weight:850; }
.about-interconnection-tool p:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { margin:12px 0 0; color:#64778a; line-height:1.65; }
.about-interconnection-tool strong:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { color:#c69a57; }
.about-interconnection-tool img:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { width:100%; max-height:150px; object-fit:contain; filter:drop-shadow(0 14px 22px rgba(19,40,61,.12)); }
.about-final-cta:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { padding:58px 0; background:#f4efe7; }
.about-final-grid:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:32px 34px; border:1px solid rgba(198,154,87,.18); border-radius:24px; background:#fff; box-shadow:0 18px 42px rgba(19,40,61,.06); }
.about-final-grid h2:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { margin:0; color:#10304e; font-size:clamp(1.75rem,3vw,2.45rem); font-weight:850; letter-spacing:-.025em; }
.about-final-grid p:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { margin:8px 0 0; color:#64778a; }
@media (max-width: 1050px) {
  .about-hero-grid:where([data-page="ueber_uns"], [data-page="ueber_uns"] *), .about-process-head:where([data-page="ueber_uns"], [data-page="ueber_uns"] *), .about-person-grid:where([data-page="ueber_uns"], [data-page="ueber_uns"] *), .about-communication-head:where([data-page="ueber_uns"], [data-page="ueber_uns"] *), .about-technology-head:where([data-page="ueber_uns"], [data-page="ueber_uns"] *), .about-interconnection-head:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { grid-template-columns:1fr; }
  .about-map:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { margin:10px auto 0; }
  .about-purpose-grid:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { grid-template-columns:1fr; }
  .about-tools-grid:where([data-page="ueber_uns"], [data-page="ueber_uns"] *), .about-technology-tools-grid:where([data-page="ueber_uns"], [data-page="ueber_uns"] *), .about-interconnection-tools-grid:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { grid-template-columns:1fr; }
  .about-communication-brand:where([data-page="ueber_uns"], [data-page="ueber_uns"] *), .about-technology-brand:where([data-page="ueber_uns"], [data-page="ueber_uns"] *), .about-interconnection-brand:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { max-width:640px; }
}
@media (max-width: 760px) {
  .about-shell:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { width:min(100% - 36px,1180px); }
  .about-hero:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { padding-top:128px; }
  .about-title:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { font-size:clamp(2.55rem,12vw,3.7rem); }
  .about-communication-brand:where([data-page="ueber_uns"], [data-page="ueber_uns"] *), .about-technology-brand:where([data-page="ueber_uns"], [data-page="ueber_uns"] *), .about-interconnection-brand:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { min-height:unset; padding:24px 22px; }
  .about-communication-wordmark:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { grid-template-columns:auto minmax(74px,1fr) auto; gap:8px; }
  .about-wordmark-start:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { font-size:clamp(1.65rem,8vw,2.4rem); }
  .about-wordmark-o:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { width:86px; height:86px; font-size:2.75rem; }
  .about-wordmark-end:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { font-size:clamp(1rem,4.6vw,1.55rem); letter-spacing:.12em; }
  .about-technology-wordmark:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { grid-template-columns:auto auto auto; gap:8px; }
  .about-technology-wordmark-octagon:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { width:86px; height:86px; font-size:2.75rem; }
  .about-technology-wordmark-mid:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { font-size:clamp(1.65rem,8vw,2.4rem); }
  .about-technology-wordmark-end:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { font-size:clamp(1rem,4.6vw,1.55rem); letter-spacing:.12em; }
  .about-interconnection-wordmark:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { gap:10px; }
  .about-interconnection-wordmark-start:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { font-size:clamp(1.65rem,8vw,2.4rem); }
  .about-interconnection-wordmark-octagon:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { width:94px; height:94px; font-size:1.65rem; }
  .about-interconnection-echo:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { justify-content:flex-start; flex-wrap:wrap; gap:10px; }
  .about-interconnection-note:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { text-align:left; }
  .about-communication-echo:where([data-page="ueber_uns"], [data-page="ueber_uns"] *), .about-technology-echo:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { justify-content:flex-start; flex-wrap:wrap; gap:10px; }
  .about-communication-note:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { text-align:left; }
  .about-map:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { min-height:auto; display:grid; gap:16px; }
  .about-map-center:where([data-page="ueber_uns"], [data-page="ueber_uns"] *), .about-map-card:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { position:relative; left:auto; right:auto; top:auto; bottom:auto; transform:none; width:100%; }
  .about-map-center:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { width:158px; height:158px; margin:0 auto 4px; }
  .about-map-center img:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { width:100px; }
  .about-map-card:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { min-height:unset; }
  .about-map-line:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { display:none; }
  .about-step:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { grid-template-columns:58px 1fr; gap:18px; }
  .about-step-number:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { width:54px; height:54px; }
  .about-step-image:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { grid-column:1 / -1; height:190px; }
  .about-tool:where([data-page="ueber_uns"], [data-page="ueber_uns"] *), .about-technology-tool:where([data-page="ueber_uns"], [data-page="ueber_uns"] *), .about-interconnection-tool:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { grid-template-columns:1fr; }
  .about-tool img:where([data-page="ueber_uns"], [data-page="ueber_uns"] *), .about-technology-tool img:where([data-page="ueber_uns"], [data-page="ueber_uns"] *), .about-interconnection-tool img:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { max-width:240px; justify-self:center; }
  .about-person-badge:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { position:relative; right:auto; bottom:auto; max-width:none; margin:-10px 18px 0; }
  .about-final-grid:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { flex-direction:column; align-items:flex-start; padding:28px 24px; }
}

/* Über-uns Hero: gleiche Logik wie Startseite und Technik – Navigation liegt transparent im Hero. */
.about-company-hero:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: clamp(690px, 86vh, 860px);
  display: flex;
  align-items: center;
}
.about-company-hero .about-shell:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  width: min(1440px, calc(100% - 12px));
}
.about-company-hero .about-hero-grid:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr);
}
.about-company-copy:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  max-width: 820px;
}
.about-company-logo:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 760px);
  min-height: 510px;
  margin-left: auto;
  isolation: isolate;
}
.about-company-logo:where([data-page="ueber_uns"], [data-page="ueber_uns"] *)::before,
.about-company-logo:where([data-page="ueber_uns"], [data-page="ueber_uns"] *)::after {
  display: none;
}
.about-company-logo img:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  position: relative;
  z-index: 4;
  display: block;
  width: clamp(620px, 68vw, 980px);
  max-width: 135%;
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.18));
  animation: aboutLogoFloat 6.8s ease-in-out infinite;
}
.about-logo-orbit:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(216,183,127,.25);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}
.about-logo-orbit-one:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  width: min(900px, 135%);
  height: 360px;
  animation: aboutLogoOrbitA 17s linear infinite;
}
.about-logo-orbit-two:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  width: min(1020px, 155%);
  height: 450px;
  opacity: .65;
  animation: aboutLogoOrbitB 23s linear infinite reverse;
}
.about-logo-orbit span:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  position: absolute;
  width: 18px;
  height: 18px;
  background: #d8b77f;
  clip-path: polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
  box-shadow: 0 0 0 5px rgba(216,183,127,.08), 0 0 24px rgba(216,183,127,.42);
}
.about-logo-orbit-one span:first-child:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { left: 11%; top: 10%; }
.about-logo-orbit-one span:last-child:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { right: 7%; bottom: 15%; }
.about-logo-orbit-two span:first-child:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { right: 17%; top: 2%; }
.about-logo-orbit-two span:last-child:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { left: 4%; bottom: 24%; }
.about-logo-octagon:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  position: absolute;
  z-index: 3;
  display: block;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(216,183,127,.66);
  background: rgba(216,183,127,.10);
  clip-path: polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
  box-shadow: 0 12px 28px rgba(0,0,0,.14), 0 0 24px rgba(216,183,127,.16);
  backdrop-filter: blur(3px);
  pointer-events: none;
}
.about-logo-octagon-one:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { left: 3%; top: 25%; animation: aboutOctagonFloat 5.4s ease-in-out infinite; }
.about-logo-octagon-two:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { right: 3%; top: 31%; width: 36px; height: 36px; animation: aboutOctagonFloat 6.1s ease-in-out .8s infinite reverse; }
.about-logo-octagon-three:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { right: 13%; bottom: 14%; width: 22px; height: 22px; animation: aboutOctagonFloat 5.8s ease-in-out 1.4s infinite; }
@keyframes aboutLogoOrbitA {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes aboutLogoOrbitB {
  from { transform: translate(-50%,-50%) rotate(8deg); }
  to { transform: translate(-50%,-50%) rotate(368deg); }
}
@keyframes aboutLogoFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes aboutOctagonFloat {
  0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
  50% { transform: translate3d(8px,-14px,0) rotate(20deg); }
}
@media (prefers-reduced-motion: reduce) {
  .about-company-logo img:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
  .about-logo-orbit:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
  .about-logo-octagon:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { animation: none !important; }
}

.about-company-logo-inline:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
.about-person-visual-inline:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
.about-step-image-inline:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  display: none;
}

.about-company-logo-inline img:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
.about-person-visual-inline img:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
.about-step-image-inline img:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1050px) {
  .about-company-hero:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    min-height: auto;
  }
  .about-company-hero .about-hero-grid:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    grid-template-columns: 1fr;
  }
  .about-company-copy:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    max-width: 760px;
  }
  .about-company-logo:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    width: min(100%, 690px);
    min-height: 430px;
    margin: 4px auto 0;
  }
  .about-logo-orbit-one:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { width: min(760px, 118%); height: 305px; }
  .about-logo-orbit-two:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { width: min(860px, 134%); height: 380px; }
}


@media (max-width: 760px) {
  .about-company-hero:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    padding-top: 118px;
    padding-bottom: 68px;
  }
  .about-company-hero .about-shell:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    width: min(100% - 36px, 1180px);
  }
  .about-actions:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    width: 100%;
  }
  .about-actions .about-btn:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    flex: 1 1 220px;
  }
  .about-hero-points:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    gap: 12px 18px;
  }
  .about-company-logo:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    min-height: 290px;
  }
  .about-company-logo img:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    width: min(590px, 98vw);
  }
  .about-logo-orbit-one:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { width: min(560px, 108vw); height: 225px; }
  .about-logo-orbit-two:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { width: min(630px, 122vw); height: 285px; }
  .about-logo-octagon-one:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { left: 1%; }
  .about-logo-octagon-two:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) { right: 1%; }
}


/* ========================================================================== */
/* Über uns: Desktop-Anmutung bis 400px beibehalten und proportional skalieren */
/* Erst bei maximal 399px greifen die bestehenden Mobile-Anordnungen.          */
/* ========================================================================== */
@media (min-width: 400px) and (max-width: 1200px) {
  .about-shell:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
  .about-company-hero .about-shell:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    width: min(1180px, calc(100% - 24px));
  }

  .about-hero:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
  .about-company-hero:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    min-height: auto;
    padding-top: clamp(82px, 11.33vw, 136px);
    padding-bottom: clamp(34px, 6.83vw, 82px);
  }

  .about-hero-grid:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
  .about-company-hero .about-hero-grid:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(16px, 5vw, 60px);
    align-items: center;
  }

  .about-company-copy:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    min-width: 0;
    max-width: none;
  }

  .about-title:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    max-width: none;
    font-size: clamp(1.28rem, 4.15vw, 3.1125rem);
    line-height: .97;
  }

  .about-subtitle:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    max-width: none;
    margin-top: clamp(8px, 1.83vw, 22px);
    font-size: clamp(.68rem, 1.8vw, 1.35rem);
  }

  .about-lead:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    max-width: none;
    margin-top: clamp(5px, 1.17vw, 14px);
    font-size: clamp(.60rem, 1.35vw, 1.0125rem);
    line-height: 1.62;
  }

  .about-actions:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    flex-wrap: nowrap;
    gap: clamp(5px, 1.17vw, 14px);
    margin-top: clamp(14px, 2.83vw, 34px);
  }

  .about-actions .about-btn:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
  .about-btn:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    min-height: clamp(31px, 4.83vw, 58px);
    padding: clamp(6px, 1.25vw, 15px) clamp(5px, 1.67vw, 20px);
    border-radius: clamp(7px, 1.25vw, 15px);
    font-size: clamp(.38rem, 1.17vw, .875rem);
    white-space: nowrap;
  }

  .about-hero-points:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    flex-wrap: nowrap;
    gap: clamp(7px, 2vw, 24px);
    margin-top: clamp(12px, 2.5vw, 30px);
    font-size: clamp(.45rem, 1vw, .75rem);
  }

  .about-hero-points span:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    white-space: nowrap;
  }

  .about-hero-points span:where([data-page="ueber_uns"], [data-page="ueber_uns"] *)::before {
    margin-right: clamp(3px, .67vw, 8px);
  }

  .about-company-logo:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    width: min(100%, 700px);
    min-height: clamp(180px, 39.17vw, 470px);
    margin: 0 0 0 auto;
  }

  .about-company-logo img:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    width: min(100%, 52vw);
    max-width: 100%;
  }

  .about-section:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    padding: clamp(32px, 9vw, 108px) 0;
  }

  .about-purpose-section:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    padding-bottom: clamp(25px, 6.5vw, 78px);
  }

  .about-section-kicker:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    margin-bottom: clamp(6px, 1.42vw, 17px);
    font-size: clamp(.42rem, .92vw, .6875rem);
    letter-spacing: .14em;
  }

  .about-section-title:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    max-width: min(68.33vw, 820px);
    font-size: clamp(1.05rem, 4vw, 3rem);
    line-height: 1.07;
  }

  .about-section-lead:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    max-width: min(63.33vw, 760px);
    margin-top: clamp(8px, 1.83vw, 22px);
    font-size: clamp(.48rem, 1.33vw, 1rem);
    line-height: 1.75;
  }

  .about-purpose-grid:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(7px, 1.83vw, 22px);
    margin-top: clamp(16px, 3.67vw, 44px);
  }

  .about-purpose-card:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    min-height: clamp(94px, 23.33vw, 280px);
    padding: clamp(10px, 2.5vw, 30px);
    border-radius: clamp(9px, 2.17vw, 26px);
    box-shadow: 0 clamp(6px, 1.5vw, 18px) clamp(15px, 3.75vw, 45px) rgba(19,40,61,.07);
  }

  .about-purpose-number:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    font-size: clamp(1.5rem, 6vw, 4.5rem);
  }

  .about-purpose-card h3:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    margin-top: clamp(8px, 2vw, 24px);
    font-size: clamp(.62rem, 1.93vw, 1.45rem);
  }

  .about-purpose-card p:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    margin-top: clamp(4px, 1vw, 12px);
    font-size: clamp(.45rem, 1.1vw, .825rem);
    line-height: 1.6;
  }

  .about-process-head:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    grid-template-columns: minmax(0, .9fr) minmax(0, .65fr);
    gap: clamp(15px, 3.67vw, 44px);
    align-items: end;
    margin-bottom: clamp(16px, 4vw, 48px);
  }

  .about-process-head .about-section-title:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
  .about-process-head .about-section-lead:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
  .about-person-grid .about-section-title:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
  .about-person-grid .about-section-lead:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    max-width: none;
  }

  .about-process-note:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    padding: clamp(8px, 2.08vw, 25px) clamp(9px, 2.17vw, 26px);
    border-radius: clamp(8px, 1.83vw, 22px);
    font-size: clamp(.46rem, 1.17vw, .875rem);
    line-height: 1.65;
  }

  .about-steps:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    gap: clamp(7px, 1.83vw, 22px);
  }

  .about-step:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    grid-template-columns: clamp(28px, 6.33vw, 76px) minmax(0, 1fr) minmax(0, .68fr);
    gap: clamp(9px, 2.33vw, 28px);
    padding: clamp(8px, 1.83vw, 22px);
    border-radius: clamp(9px, 2.17vw, 26px);
  }

  .about-step-number:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    width: clamp(24px, 5.33vw, 64px);
    height: clamp(24px, 5.33vw, 64px);
    font-size: clamp(.48rem, 1.53vw, 1.15rem);
  }

  .about-step-copy h3:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    font-size: clamp(.58rem, 1.8vw, 1.35rem);
  }

  .about-step-copy p:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    margin-top: clamp(3px, .75vw, 9px);
    font-size: clamp(.43rem, 1.08vw, .81rem);
    line-height: 1.58;
  }

  .about-step-image:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    grid-column: auto;
    height: clamp(50px, 12.5vw, 150px);
    border-radius: clamp(6px, 1.5vw, 18px);
  }

  .about-person-grid:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(16px, 5vw, 60px);
    align-items: center;
  }

  .about-person-visual:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    width: min(100%, 430px);
  }

  .about-person-photo:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    border-radius: clamp(9px, 2.33vw, 28px);
  }

  .about-person-badge:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    position: absolute;
    right: clamp(-22px, -1.83vw, -7px);
    bottom: clamp(8px, 2vw, 24px);
    max-width: clamp(74px, 18.33vw, 220px);
    margin: 0;
    padding: clamp(6px, 1.42vw, 17px) clamp(7px, 1.67vw, 20px);
    border-radius: clamp(6px, 1.5vw, 18px);
  }

  .about-person-badge strong:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    font-size: clamp(.46rem, 1.33vw, 1rem);
  }

  .about-person-badge span:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    margin-top: clamp(1px, .33vw, 4px);
    font-size: clamp(.40rem, 1.17vw, .875rem);
  }

  .about-checks:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    gap: clamp(4px, 1.08vw, 13px);
    margin-top: clamp(10px, 2.33vw, 28px);
  }

  .about-checks li:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    padding-left: clamp(11px, 2.5vw, 30px);
    font-size: clamp(.45rem, 1.1vw, .825rem);
    line-height: 1.55;
  }

  .about-tools-grid:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(8px, 2vw, 24px);
    margin-top: clamp(14px, 3.5vw, 42px);
  }

  .about-tool:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    grid-template-columns: minmax(0, 1fr) clamp(56px, 14.17vw, 170px);
    gap: clamp(7px, 1.83vw, 22px);
    padding: clamp(9px, 2.33vw, 28px);
    border-radius: clamp(9px, 2.17vw, 26px);
  }

  .about-tool h3:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    font-size: clamp(.60rem, 1.87vw, 1.4rem);
  }

  .about-tool p:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    margin-top: clamp(4px, 1vw, 12px);
    font-size: clamp(.43rem, 1.08vw, .81rem);
    line-height: 1.55;
  }

  .about-tool a:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    margin-top: clamp(6px, 1.5vw, 18px);
    font-size: clamp(.45rem, 1.08vw, .81rem);
  }

  .about-tool img:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
  .about-technology-tool img:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    max-width: 100%;
    max-height: clamp(50px, 12.5vw, 150px);
  }

  .about-technology-tools-grid:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(8px, 2vw, 24px);
    margin-top: clamp(14px, 3.5vw, 42px);
  }

  .about-technology-tool:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    grid-template-columns: minmax(0, 1fr) clamp(56px, 14.17vw, 170px);
    gap: clamp(7px, 1.83vw, 22px);
    padding: clamp(9px, 2.33vw, 28px);
    border-radius: clamp(9px, 2.17vw, 26px);
  }

  .about-technology-tool h3:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    font-size: clamp(.60rem, 1.87vw, 1.4rem);
  }

  .about-technology-tool p:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    margin-top: clamp(4px, 1vw, 12px);
    font-size: clamp(.43rem, 1.08vw, .81rem);
    line-height: 1.55;
  }

  .about-technology-tool a:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    margin-top: clamp(6px, 1.5vw, 18px);
    font-size: clamp(.45rem, 1.08vw, .81rem);
  }

  .about-final-cta:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    padding: clamp(20px, 4.83vw, 58px) 0;
  }

  .about-final-grid:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(10px, 2.5vw, 30px);
    padding: clamp(11px, 2.67vw, 32px) clamp(12px, 2.83vw, 34px);
    border-radius: clamp(8px, 2vw, 24px);
  }

  .about-final-grid > div:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    min-width: 0;
  }

  .about-final-grid h2:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    font-size: clamp(.82rem, 3vw, 2.25rem);
  }

  .about-final-grid p:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    margin-top: clamp(3px, .67vw, 8px);
    font-size: clamp(.43rem, 1.08vw, .81rem);
  }
}

/* Wie bei IT-Betreuung: Status-Badge inklusive grünem Punkt verschwindet. */
@media (max-width: 980px) {
  body.about-page .about-company-hero .about-kicker:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    display: none !important;
  }
}

@media (max-width: 399px) {
  .about-shell:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
  .about-company-hero .about-shell:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    width: min(100% - 24px, 1180px);
  }

  .about-company-hero:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    padding-top: 108px;
    padding-bottom: 46px;
  }

  .about-company-hero .about-hero-grid:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .about-company-logo:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    display: none;
  }

  .about-company-logo-inline:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    display: block;
    width: min(100%, 280px);
    margin: 14px auto 0;
  }

  .about-company-logo-inline img:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    filter: drop-shadow(0 18px 28px rgba(0,0,0,.18));
  }

  .about-subtitle:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    margin-top: 14px;
  }

  .about-person-grid:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    display: block;
  }

  .about-person-grid > .about-person-visual:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    display: none;
  }

  .about-person-visual-inline:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    display: block;
    width: min(100%, 320px);
    margin: 18px auto 0;
  }

  .about-person-visual-inline .about-person-photo:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    border-radius: 22px;
  }

  .about-person-visual-inline .about-person-badge:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    position: relative;
    right: auto;
    bottom: auto;
    max-width: none;
    margin: -10px 14px 0;
  }

  .about-step:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .about-step-number:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    margin: 0 auto;
  }

  .about-step > .about-step-image:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    display: none;
  }

  .about-step-image-inline:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    display: block;
    overflow: hidden;
    margin-top: 12px;
    border-radius: 16px;
    background: #eef2f5;
  }

  .about-step-image-inline img:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }
}


/* Über uns: Navigation liegt wie auf Startseite/Technik direkt auf dem Hero. */
body.about-page .toowie-primary-nav.fixed-top:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background: transparent !important;
  box-shadow: none;
}



/* Desktop-Hero: gleiche horizontale Breite wie auf der Startseite. */
@media (min-width: 1051px) {
  body.about-page .about-company-hero .about-hero-grid:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
    gap: clamp(32px, 4vw, 58px);
  }

  body.about-page .about-company-hero .about-title:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    max-width: none;
  }

  body.about-page .about-company-hero .about-title span:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    white-space: nowrap;
  }

  body.about-page .about-company-hero .about-shell:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    width: min(1440px, calc(100% - 12px));
  }

  /* Alle Bereiche unter dem Hero auf die gleiche breite Inhaltszone wie die
     anderen Unterseiten bringen. */
  body.about-page .about-section > .about-shell:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
  body.about-page .about-final-cta > .about-shell:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    width: min(1520px, calc(100% - 8px));
  }

  body.about-page .about-company-hero .about-company-copy:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    position: relative;
    left: clamp(-54px, -2.7vw, -34px);
  }

  body.about-page .about-company-hero .about-company-logo:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    right: clamp(-54px, -2.7vw, -34px);
  }
}

/* Hero-Unterüberschrift exakt wie die Referenz auf index.html. */
.about-subtitle:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  font-family: Arial, sans-serif !important;
  font-size: clamp(1.12rem, 1.8vw, 1.6rem) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: normal !important;
  font-style: normal !important;
  text-transform: none !important;
}

@media (min-width: 400px) and (max-width: 980px) {
  .about-subtitle:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    font-size: clamp(.69rem, 1.55vw, 1.08rem) !important;
    line-height: 1.34 !important;
  }
}

@media (max-width: 399px) {
  .about-subtitle:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    font-size: 1.06rem !important;
    line-height: 1.4 !important;
  }
}


/* Über uns – Feinabstimmung: kräftiges Startseiten-Gold und kompakter 2-Spalten-Ablauf. */
.about-purpose-number:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  color: var(--toowie-gold, #c69a57);
  opacity: 1;
}

.about-process-head:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  grid-template-columns: minmax(0, 1fr);
  max-width: 980px;
}

.about-steps:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.about-step:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-areas:
    "number copy"
    "image image";
  align-content: start;
  align-items: start;
  gap: 20px 22px;
  height: 100%;
  padding: 24px;
}

.about-step-number:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  grid-area: number;
  background: var(--toowie-gold, #c69a57);
}

.about-step-copy:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  grid-area: copy;
  min-width: 0;
}

.about-step-copy p:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  margin-top: 9px;
}

.about-step > .about-step-image:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  display: block;
  grid-area: image;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 8.5;
  margin-top: 2px;
}

.about-step-image img:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-step-image-inline:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  display: none !important;
}

@media (min-width: 400px) and (max-width: 1200px) {
  .about-process-head:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    grid-template-columns: minmax(0, 1fr);
    max-width: min(81.67vw, 980px);
  }

  .about-steps:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(8px, 2vw, 24px);
  }

  .about-step:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    grid-template-columns: clamp(24px, 5.33vw, 64px) minmax(0, 1fr);
    grid-template-areas:
      "number copy"
      "image image";
    gap: clamp(7px, 1.67vw, 20px) clamp(8px, 1.83vw, 22px);
    padding: clamp(8px, 2vw, 24px);
  }

  .about-step > .about-step-image:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    display: block;
    grid-column: auto;
    height: auto;
    aspect-ratio: 16 / 8.5;
  }
}

@media (max-width: 399px) {
  .about-steps:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    grid-template-columns: 1fr;
  }

  .about-step:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-areas:
      "number copy"
      "image image";
  }

  .about-step-number:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    margin: 0;
  }

  .about-step > .about-step-image:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    display: block;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}


/* Über uns – Ablauf 01–05: saubere Octagon-Optik nur für die 5 Boxen. */
.about-steps .about-step:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  position: relative;
  border: 1px solid rgba(16,48,78,.09);
  border-radius: 0;
  background: #fff;
  clip-path: polygon(
    22px 0,
    calc(100% - 22px) 0,
    100% 22px,
    100% calc(100% - 22px),
    calc(100% - 22px) 100%,
    22px 100%,
    0 calc(100% - 22px),
    0 22px
  );
  box-shadow: 0 16px 38px rgba(19,40,61,.06);
  overflow: hidden;
}

.about-steps .about-step:where([data-page="ueber_uns"], [data-page="ueber_uns"] *)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 42px;
  height: 1px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(198,154,87,.92);
  box-shadow: 0 0 0 1px rgba(198,154,87,.04);
  pointer-events: none;
}

.about-steps .about-step:last-child:where([data-page="ueber_uns"], [data-page="ueber_uns"] *)::after {
  display: none;
}

.about-steps .about-step-number:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 0;
  color: #fff;
  background: #c69a57;
  clip-path: polygon(
    29.289% 0,
    70.711% 0,
    100% 29.289%,
    100% 70.711%,
    70.711% 100%,
    29.289% 100%,
    0 70.711%,
    0 29.289%
  );
  box-shadow: 0 10px 22px rgba(198,154,87,.22);
}

.about-steps .about-step-copy h3:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  color: #10304e;
}

.about-steps .about-step-copy p:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  color: #63768a;
}

/* Über uns – Ablauf 01–05: visuell entzerren und klarer staffeln. */
.about-steps:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  gap: 28px;
}

.about-steps .about-step:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  padding: 28px;
  gap: 22px 24px;
  box-shadow: 0 18px 42px rgba(19,40,61,.07);
  transition: transform .18s ease, box-shadow .18s ease;
}

.about-steps .about-step:hover:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  transform: translateY(-2px);
  box-shadow: 0 24px 46px rgba(19,40,61,.10);
}

.about-steps .about-step:where([data-page="ueber_uns"], [data-page="ueber_uns"] *)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(16,48,78,.025), rgba(16,48,78,0) 90px);
  opacity: .7;
}

.about-steps .about-step:nth-child(odd):where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  background: #ffffff;
}

.about-steps .about-step:nth-child(even):where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  background: #f7f9fa;
}

.about-steps .about-step:nth-child(3):where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  background: #fbfbfb;
  border-color: rgba(16,48,78,.12);
  box-shadow: 0 20px 44px rgba(19,40,61,.08);
}

.about-steps .about-step:nth-child(3):where([data-page="ueber_uns"], [data-page="ueber_uns"] *)::before {
  background: linear-gradient(180deg, rgba(16,48,78,.035), rgba(16,48,78,0) 105px);
  opacity: 1;
}

.about-steps .about-step-number:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
.about-steps .about-step:nth-child(odd) .about-step-number:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
.about-steps .about-step:nth-child(even) .about-step-number:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
.about-steps .about-step:nth-child(3) .about-step-number:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  background: #c69a57;
  box-shadow: 0 10px 22px rgba(198,154,87,.22);
}

.about-steps .about-step-copy:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
.about-steps .about-step-image:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  position: relative;
  z-index: 1;
}

.about-steps .about-step-copy h3:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  font-size: 1.42rem;
}

.about-steps .about-step-copy p:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  margin-top: 13px;
  line-height: 1.74;
}

.about-steps .about-step > .about-step-image:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  margin-top: 8px;
}

.about-steps .about-step-image img:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  transform: scale(1.01);
}

@media (min-width: 1051px) {
  .about-steps .about-step:nth-child(5):where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    grid-column: 1 / -1;
    grid-template-columns: 64px minmax(0, .95fr) minmax(300px, .65fr);
    grid-template-areas: "number copy image";
    align-items: center;
  }

  .about-steps .about-step:nth-child(5) > .about-step-image:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    margin-top: 0;
    aspect-ratio: 16 / 7.5;
  }
}

@media (min-width: 400px) and (max-width: 1200px) {
  .about-steps:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    gap: clamp(10px, 2.33vw, 28px);
  }

  .about-steps .about-step:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    padding: clamp(14px, 2.33vw, 28px);
    gap: clamp(10px, 1.83vw, 22px) clamp(10px, 2vw, 24px);
  }

  .about-steps .about-step-copy h3:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    font-size: clamp(.66rem, 1.9vw, 1.42rem);
  }

  .about-steps .about-step-copy p:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    margin-top: clamp(4px, .92vw, 11px);
    line-height: 1.68;
  }
}

@media (min-width: 400px) and (max-width: 1200px) {
  .about-steps .about-step:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    padding: clamp(12px, 2vw, 24px);
  }
}

@media (max-width: 399px) {
  .about-steps .about-step:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    padding: 18px;
    clip-path: polygon(
      18px 0,
      calc(100% - 18px) 0,
      100% 18px,
      100% calc(100% - 18px),
      calc(100% - 18px) 100%,
      18px 100%,
      0 calc(100% - 18px),
      0 18px
    );
  }

  .about-steps .about-step:where([data-page="ueber_uns"], [data-page="ueber_uns"] *)::after {
    bottom: -11px;
    width: 34px;
  }

  .about-steps .about-step-number:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    width: 54px;
    height: 54px;
  }
}



/* Über uns – Ablauf 01–05 als durchgehende Reihen-Boxen in voller Breite. */
.about-steps:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  grid-template-columns: 1fr !important;
  gap: 22px !important;
}

.about-steps .about-step:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
.about-steps .about-step:nth-child(5):where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  grid-column: auto !important;
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) 320px !important;
  grid-template-areas: "number copy image" !important;
  align-items: center !important;
  gap: 24px !important;
  width: 100% !important;
  padding: 24px 28px !important;
}

.about-steps .about-step-number:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  grid-area: number;
  align-self: start;
}

.about-steps .about-step-copy:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  grid-area: copy;
  align-self: center;
  max-width: 820px;
}

.about-steps .about-step-copy h3:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  margin: 0;
  font-size: 1.38rem;
}

.about-steps .about-step-copy p:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  margin: 10px 0 0;
  line-height: 1.7;
}

.about-steps .about-step > .about-step-image:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
.about-steps .about-step:nth-child(5) > .about-step-image:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  grid-area: image;
  width: 100%;
  max-width: 320px;
  height: 132px !important;
  aspect-ratio: auto !important;
  margin-top: 0 !important;
  justify-self: end;
  align-self: center;
}

.about-steps .about-step:where([data-page="ueber_uns"], [data-page="ueber_uns"] *)::after {
  left: 50%;
  bottom: -11px;
  width: 44px;
}

@media (max-width: 1050px) {
  .about-steps:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    gap: 18px !important;
  }

  .about-steps .about-step:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
  .about-steps .about-step:nth-child(5):where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    grid-template-columns: 54px minmax(0, 1fr) 250px !important;
    gap: 18px !important;
    padding: 20px 22px !important;
  }

  .about-steps .about-step > .about-step-image:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
  .about-steps .about-step:nth-child(5) > .about-step-image:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    max-width: 250px;
    height: 114px !important;
  }
}

@media (max-width: 760px) {
  .about-steps .about-step:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
  .about-steps .about-step:nth-child(5):where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    grid-template-areas:
      "number copy"
      "image image" !important;
    align-items: start !important;
  }

  .about-steps .about-step > .about-step-image:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
  .about-steps .about-step:nth-child(5) > .about-step-image:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    max-width: none;
    width: 100%;
    height: 160px !important;
    justify-self: stretch;
    margin-top: 2px !important;
  }
}

@media (max-width: 399px) {
  .about-steps .about-step:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
  .about-steps .about-step:nth-child(5):where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "number"
      "copy"
      "image" !important;
    gap: 14px !important;
    padding: 18px !important;
  }

  .about-steps .about-step-number:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    margin: 0 auto;
    align-self: center;
  }

  .about-steps .about-step-copy:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    max-width: none;
  }

  .about-steps .about-step > .about-step-image:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
  .about-steps .about-step:nth-child(5) > .about-step-image:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    height: 168px !important;
  }
}



/* Über uns – Ablauf 01–05: zwei Boxen nebeneinander, Bildgröße kompakt beibehalten. */
@media (min-width: 1060px) {
  .about-steps:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
    align-items: stretch;
  }

  .about-steps .about-step:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
  .about-steps .about-step:nth-child(5):where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    grid-column: auto !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) 260px !important;
    grid-template-areas: "number copy image" !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    height: 100%;
    padding: 20px 22px !important;
  }

  .about-steps .about-step-copy:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    max-width: none !important;
  }

  .about-steps .about-step-copy h3:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    font-size: 1.22rem !important;
    line-height: 1.22;
  }

  .about-steps .about-step-copy p:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    margin-top: 8px !important;
    font-size: .97rem;
    line-height: 1.58 !important;
  }

  .about-steps .about-step > .about-step-image:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
  .about-steps .about-step:nth-child(5) > .about-step-image:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    width: 100%;
    max-width: 260px;
    height: 124px !important;
    margin-top: 0 !important;
    justify-self: end;
    align-self: center;
    aspect-ratio: auto !important;
  }

  .about-steps .about-step-number:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    width: 54px;
    height: 54px;
    font-size: .98rem;
  }

  .about-steps .about-step:where([data-page="ueber_uns"], [data-page="ueber_uns"] *)::after {
    bottom: -11px;
    width: 40px;
  }
}

@media (min-width: 1060px) and (max-width: 1320px) {
  .about-steps .about-step:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
  .about-steps .about-step:nth-child(5):where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    grid-template-columns: 50px minmax(0, 1fr) 220px !important;
    gap: 14px !important;
    padding: 18px 18px !important;
  }

  .about-steps .about-step > .about-step-image:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
  .about-steps .about-step:nth-child(5) > .about-step-image:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    max-width: 220px;
    height: 112px !important;
  }

  .about-steps .about-step-copy h3:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    font-size: 1.12rem !important;
  }

  .about-steps .about-step-copy p:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    font-size: .91rem;
    line-height: 1.52 !important;
  }
}

@media (min-width: 760px) and (max-width: 1059px) {
  .about-steps:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    grid-template-columns: 1fr !important;
  }
}



/* Über uns – Ablauf final: eine übersichtliche Reihen-Box pro Zeile. */
.about-steps:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  grid-template-columns: 1fr !important;
  gap: 22px !important;
}

.about-steps .about-step:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
.about-steps .about-step:nth-child(5):where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  grid-column: auto !important;
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) 320px !important;
  grid-template-areas: "number copy image" !important;
  align-items: center !important;
  gap: 24px !important;
  width: 100% !important;
  height: auto !important;
  padding: 24px 28px !important;
}

.about-steps .about-step-number:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  width: 64px !important;
  height: 64px !important;
  font-size: 1.05rem !important;
}

.about-steps .about-step-copy:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  max-width: 860px !important;
}

.about-steps .about-step-copy h3:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  font-size: 1.38rem !important;
  line-height: 1.25 !important;
}

.about-steps .about-step-copy p:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  margin-top: 10px !important;
  font-size: 1rem !important;
  line-height: 1.68 !important;
}

.about-steps .about-step > .about-step-image:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
.about-steps .about-step:nth-child(5) > .about-step-image:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  grid-area: image !important;
  width: 100% !important;
  max-width: 320px !important;
  height: 132px !important;
  aspect-ratio: auto !important;
  margin-top: 0 !important;
  justify-self: end !important;
  align-self: center !important;
}

@media (max-width: 1050px) {
  .about-steps .about-step:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
  .about-steps .about-step:nth-child(5):where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    grid-template-columns: 54px minmax(0, 1fr) 250px !important;
    gap: 18px !important;
    padding: 20px 22px !important;
  }

  .about-steps .about-step > .about-step-image:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
  .about-steps .about-step:nth-child(5) > .about-step-image:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    max-width: 250px !important;
    height: 114px !important;
  }
}

@media (max-width: 760px) {
  .about-steps .about-step:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
  .about-steps .about-step:nth-child(5):where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    grid-template-areas:
      "number copy"
      "image image" !important;
  }

  .about-steps .about-step > .about-step-image:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
  .about-steps .about-step:nth-child(5) > .about-step-image:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    max-width: none !important;
    width: 100% !important;
    height: 160px !important;
    justify-self: stretch !important;
  }
}



/* Über uns – Ansprechpartner-Badge leicht höher positionieren. */
@media (min-width: 400px) {
  .about-person-badge:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    bottom: 14px !important;
  }
}

@media (max-width: 399px) {
  .about-person-visual-inline .about-person-badge:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    margin: 0 14px 0 !important;
  }
}

/* Über uns – Ansprechpartnerbild etwas größer, Badge unverändert lassen. */
@media (min-width: 1060px) {
  .about-person-visual:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    width: min(100%, 510px) !important;
  }
}

@media (min-width: 400px) and (max-width: 1059px) {
  .about-person-visual:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    width: min(100%, 470px) !important;
  }
}


/* Aus den HTML-Attributen ausgelagerte, feste Darstellungswerte. */
.contact-honeypot { display: none; }
.index-page .philosophy-btn.philosophy-btn-navy-text { color: #0a2850; }
.service-phase-flow.service-count-3 { --service-count: 3; }
.service-phase-flow.service-count-4 { --service-count: 4; }
.service-phase-flow.service-count-5 { --service-count: 5; }
.faq-contact-spacing { margin-top: 48px; }
.home-story-step-logo.has-image-error { display: none; }
.home-story-step-logo.has-image-error + * { display: block; }
.infrastructure-page .feature-hotspot[data-feature-hotspot="workstation"] { --hotspot-left:8.5%;--hotspot-top:20.5%;--hotspot-width:17.8%;--hotspot-height:65.0%; }
.infrastructure-page .feature-hotspot[data-feature-hotspot="mini-pc"] { --hotspot-left:26.6%;--hotspot-top:73.0%;--hotspot-width:10.8%;--hotspot-height:10.5%; }
.infrastructure-page .feature-hotspot[data-feature-hotspot="all-in-one"] { --hotspot-left:35.3%;--hotspot-top:19.0%;--hotspot-width:28.0%;--hotspot-height:64.5%; }
.infrastructure-page .feature-hotspot[data-feature-hotspot="ipad"] { --hotspot-left:61.8%;--hotspot-top:55.0%;--hotspot-width:14.1%;--hotspot-height:27.5%; }
.infrastructure-page .feature-hotspot[data-feature-hotspot="notebook"] { --hotspot-left:72.7%;--hotspot-top:49.8%;--hotspot-width:21.3%;--hotspot-height:37.5%; }
.infrastructure-page .feature-hotspot[data-feature-hotspot="telefon"] { --hotspot-left:2.2%;--hotspot-top:37.0%;--hotspot-width:30.5%;--hotspot-height:59.0%; }
.infrastructure-page .feature-hotspot[data-feature-hotspot="headset"] { --hotspot-left:32.6%;--hotspot-top:27.5%;--hotspot-width:18.8%;--hotspot-height:62.5%; }
.infrastructure-page .feature-hotspot[data-feature-hotspot="in-ear"] { --hotspot-left:47.4%;--hotspot-top:77.0%;--hotspot-width:14.6%;--hotspot-height:16.0%; }
.infrastructure-page .feature-hotspot[data-feature-hotspot="kopfhoerer"] { --hotspot-left:60.8%;--hotspot-top:31.0%;--hotspot-width:17.5%;--hotspot-height:58.0%; }
.infrastructure-page .feature-hotspot[data-feature-hotspot="tischmikrofon"] { --hotspot-left:80.1%;--hotspot-top:31.0%;--hotspot-width:11.5%;--hotspot-height:63.0%; }
.infrastructure-page .feature-hotspot[data-feature-hotspot="router"] { --hotspot-left:3.8%;--hotspot-top:33.8%;--hotspot-width:20.3%;--hotspot-height:48.0%; }
.infrastructure-page .feature-hotspot[data-feature-hotspot="switch"] { --hotspot-left:24.8%;--hotspot-top:60.2%;--hotspot-width:21.2%;--hotspot-height:22.0%; }
.infrastructure-page .feature-hotspot[data-feature-hotspot="access-point"] { --hotspot-left:47.7%;--hotspot-top:48.7%;--hotspot-width:15.7%;--hotspot-height:34.0%; }
.infrastructure-page .feature-hotspot[data-feature-hotspot="repeater"] { --hotspot-left:66.3%;--hotspot-top:39.8%;--hotspot-width:9.7%;--hotspot-height:43.0%; }
.infrastructure-page .feature-hotspot[data-feature-hotspot="richtfunk"] { --hotspot-left:76.9%;--hotspot-top:38.8%;--hotspot-width:16.1%;--hotspot-height:45.0%; }
.infrastructure-page .feature-hotspot[data-feature-hotspot="monitor"] { --hotspot-left:10.7%;--hotspot-top:5.0%;--hotspot-width:39.8%;--hotspot-height:74.5%; }
.infrastructure-page .feature-hotspot[data-feature-hotspot="tastatur-maus"] { --hotspot-left:8.8%;--hotspot-top:75.0%;--hotspot-width:41.5%;--hotspot-height:20.5%; }
.infrastructure-page .feature-hotspot[data-feature-hotspot="webcam"] { --hotspot-left:50.5%;--hotspot-top:64.5%;--hotspot-width:6.8%;--hotspot-height:23.0%; }
.infrastructure-page .feature-hotspot[data-feature-hotspot="lautsprecher"] { --hotspot-left:59.7%;--hotspot-top:53.5%;--hotspot-width:16.6%;--hotspot-height:34.0%; }
.infrastructure-page .feature-hotspot[data-feature-hotspot="presenter"] { --hotspot-left:78.8%;--hotspot-top:56.5%;--hotspot-width:6.0%;--hotspot-height:35.0%; }

/* Software details: keep headings, benefits and contact action together. */
body.software-service-page .service-feature-section .service-feature-copy {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
body.software-service-page .service-feature-section .service-feature-copy h2 {
  max-width: 680px;
  font-size: clamp(2.55rem, 4.15vw, 4.45rem) !important;
  line-height: 1.03 !important;
  letter-spacing: -.05em !important;
}
body.software-service-page .service-feature-section .service-feature-copy > .service-feature-section-heading {
  margin: 0 0 20px;
}
body.software-service-page .service-feature-section .service-feature-cta {
  font-size: clamp(11px, 1.05vw, 12px);
  line-height: 1.25;
  padding: 11px 17px;
}
@media (max-width: 399px) {
  body.software-service-page .service-feature-section .service-feature-copy h2 {
    font-size: clamp(28px, 8.5vw, 34px) !important;
  }
  body.software-service-page .service-feature-section .service-feature-copy {
    grid-column: 1;
    grid-row: 1;
  }
  body.software-service-page .service-feature-section .service-feature-rail {
    grid-row: 2;
  }
}
body.software-service-page .service-feature-section .service-feature-copy h2 {
  font-weight: 780;
  line-height: .97 !important;
  letter-spacing: -.05em !important;
}
body.software-service-page .service-feature-section .service-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  margin-top: 0;
  color: #0a2850;
  background: #f1e6d3;
}
body.software-service-page .service-feature-section .service-feature-icon::before {
  content: none !important;
  display: none;
}
body.software-service-page .service-feature-section .service-feature-icon i {
  color: #0a2850;
  font-size: clamp(.72rem, 1.45vw, 1.05rem);
  line-height: 1;
}
@media (min-width: 400px) and (max-width: 900px) {
  body.software-service-page .service-feature-section .service-feature-copy h2 {
    font-size: clamp(2.55rem, 6vw, 4rem) !important;
  }
}
@media (max-width: 399px) {
  body.software-service-page .service-feature-section .service-feature-icon i {
    font-size: .9rem;
  }
}
/* Keep the software overview title on one line within its available width. */
body.software-service-page #themen .service-phase-head > div:first-child {
  container-type: inline-size;
  min-width: 0;
  width: 100%;
}
body.software-service-page #themen .service-phase-head h2 {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(16px, 5.8cqw, 64px) !important;
}
body.software-service-page #themen .service-phase-head h2 span {
  display: inline;
}

/* Website details: align first detail block with the infrastructure/software layout. */
body.website-showcase-page :is(#modernes-design, #klare-botschaft, #rechtliche-grundlagen) .service-feature-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr) !important;
  grid-template-rows: auto !important;
  gap: clamp(48px, 6vw, 96px) !important;
  align-items: center;
  --website-detail-divider-left: 58%;
}

body.website-showcase-page :is(#modernes-design, #klare-botschaft, #rechtliche-grundlagen) .service-feature-copy {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

body.website-showcase-page :is(#modernes-design, #klare-botschaft, #rechtliche-grundlagen) .service-feature-copy > .service-feature-section-heading {
  margin: 0 0 20px;
}

body.website-showcase-page :is(#modernes-design, #klare-botschaft, #rechtliche-grundlagen) .service-feature-copy h2 {
  max-width: 680px;
  font-size: clamp(2.55rem, 4.15vw, 4.45rem) !important;
  font-weight: 780;
  line-height: .97 !important;
  letter-spacing: -.05em !important;
}

body.website-showcase-page :is(#modernes-design, #klare-botschaft, #rechtliche-grundlagen) .service-feature-copy h2 .service-heading-gold {
  color: #c69a57 !important;
}

body.website-showcase-page :is(#modernes-design, #klare-botschaft, #rechtliche-grundlagen) .service-feature-benefits {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin: 22px 0 0;
  padding: 0;
  color: #0a2850;
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(.84rem, 1vw, 1rem);
  font-weight: 750;
}

body.website-showcase-page :is(#modernes-design, #klare-botschaft, #rechtliche-grundlagen) .service-feature-benefits > span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

body.website-showcase-page :is(#modernes-design, #klare-botschaft, #rechtliche-grundlagen) .service-feature-benefits i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f1e6d3;
  color: #c69a57;
  font-size: inherit;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}

body.website-showcase-page :is(#modernes-design, #klare-botschaft, #rechtliche-grundlagen) .website-showcase-visual {
  left: 0 !important;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-width: none;
  min-width: 0;
  align-self: center;
  justify-self: stretch;
  margin: 0;
}

body.website-showcase-page :is(#modernes-design, #klare-botschaft, #rechtliche-grundlagen) .website-showcase-visual img {
  display: block;
  width: 100%;
  height: auto !important;
  max-height: none !important;
  border: 1px solid rgba(10, 40, 80, .12) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 40px rgba(10, 40, 80, .10) !important;
}

@media (min-width: 901px) {
  body.website-showcase-page :is(#modernes-design, #klare-botschaft, #rechtliche-grundlagen) .website-showcase-visual {
    left: 0 !important;
  }

  body.website-showcase-page :is(#modernes-design, #klare-botschaft, #rechtliche-grundlagen) .service-feature-layout::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--website-detail-divider-left);
    transform: translateX(-50%);
    width: 4px;
    background: #c69a57;
    pointer-events: none;
  }
}

@media (max-width: 900px) {
  body.website-showcase-page :is(#modernes-design, #klare-botschaft, #rechtliche-grundlagen) .service-feature-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
  }

  body.website-showcase-page :is(#modernes-design, #klare-botschaft, #rechtliche-grundlagen) .website-showcase-visual {
    grid-column: 1;
    grid-row: 2;
  }

  body.website-showcase-page :is(#modernes-design, #klare-botschaft, #rechtliche-grundlagen) .service-feature-copy h2 {
    font-size: clamp(2.55rem, 6vw, 4rem) !important;
  }
}

@media (max-width: 399px) {
  body.website-showcase-page :is(#modernes-design, #klare-botschaft, #rechtliche-grundlagen) .service-feature-copy h2 {
    font-size: clamp(28px, 8.5vw, 34px) !important;
  }
}

/* Alternate the second website detail on desktop. */
@media (min-width: 901px) {
  body.website-showcase-page #klare-botschaft .service-feature-layout {
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr) !important;
    --website-detail-divider-left: 42%;
  }

  body.website-showcase-page #klare-botschaft .service-feature-copy {
    grid-column: 2;
    grid-row: 1;
  }

  body.website-showcase-page #klare-botschaft .website-showcase-visual {
    grid-column: 1;
    grid-row: 1;
  }
}

/* Keep the second and third website screenshots as prominent as the first one. */
@media (min-width: 901px) {
  body.website-showcase-page #klare-botschaft .website-showcase-visual,
  body.website-showcase-page #rechtliche-grundlagen .website-showcase-visual {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
    margin-inline: 0 !important;
  }

  body.website-showcase-page #rechtliche-grundlagen .website-showcase-visual {
    width: 118% !important;
  }
}

body.website-showcase-page .contact--navy-softgold.contact--home-layout .clean-kontakt-btn,
body.website-showcase-page .contact--navy-softgold.contact--home-layout .clean-kontakt-btn:focus-visible {
  background: #fff !important;
  color: #0a2850 !important;
  border: 0 !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .22) !important;
}

body.website-showcase-page .contact--navy-softgold.contact--home-layout .clean-kontakt-btn:hover {
  background: #fffdf8 !important;
  color: #0a2850 !important;
  box-shadow: 0 15px 32px rgba(0, 0, 0, .28) !important;
}

.contact--navy-softgold .clean-kontakt-btn,
.contact--navy-softgold .clean-kontakt-btn:visited,
.contact--navy-softgold .clean-kontakt-btn:hover,
.contact--navy-softgold .clean-kontakt-btn:focus,
.contact--navy-softgold .clean-kontakt-btn:focus-visible,
.contact--navy-softgold .clean-kontakt-btn:active {
  color: #0a2850 !important;
}

body.about-page .about-communication-head {
  grid-template-columns: minmax(0, 1fr);
}



body.about-page #arbeitsweise .about-process-head {
  align-items: center;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  max-width: none;
  gap: 48px;
}

body.about-page #arbeitsweise .about-process-head > .about-section-lead {
  margin: 0;
  max-width: none;
}

@media (max-width: 980px) {
  body.about-page #arbeitsweise .about-process-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

body.about-page .about-statement-section:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  padding: clamp(82px, 8vw, 112px) 0;
}

body.about-page .about-statement-copy:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  max-width: 1120px;
}

body.about-page .about-statement-title:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  max-width: none;
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(2.55rem, 4.15vw, 4.45rem);
  font-weight: 780;
  line-height: .97;
  letter-spacing: -.055em;
  white-space: nowrap;
}

body.about-page .about-statement-title .service-heading-blue:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  color: #0a2850;
}

body.about-page .about-statement-title .service-heading-gold:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  color: #c69a57;
}

body.about-page .about-statement-copy .about-section-lead:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  max-width: 880px;
  margin-top: 22px;
  font-size: 1.08rem;
  line-height: 1.72;
}

body.about-page #arbeitsweise .about-section-title .service-heading-blue:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  color: #0a2850;
}

body.about-page #arbeitsweise .about-section-title .service-heading-gold:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  color: #c69a57;
}

@media (max-width: 980px) {
  body.about-page .about-statement-title:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    font-size: clamp(2.3rem, 8vw, 3.7rem);
    white-space: normal;
  }
}

/* ========================================================================== */
/* Über uns 2026-09 – TOOWIE als roter Faden                                */
/* ========================================================================== */
body.about-page .about-v2-hero .about-shell,
body.about-page .about-v2-person .about-shell,
body.about-page .about-v2-meaning .about-shell,
body.about-page .about-v2-principle .about-shell,
body.about-page .about-v2-process .about-shell,
body.about-page .about-v2-operational .about-shell,
body.about-page .about-v2-final .about-shell {
  width: min(1240px, calc(100% - 48px)) !important;
}

body.about-page .about-v2-hero {
  min-height: 760px;
}

body.about-page .about-v2-hero .about-hero-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr) !important;
  gap: clamp(48px, 6vw, 88px) !important;
}

body.about-page .about-v2-hero .about-company-copy,
body.about-page .about-v2-hero .about-company-logo {
  left: auto !important;
  right: auto !important;
}

body.about-page .about-v2-hero .about-lead strong {
  color: #fff;
  font-weight: 750;
}

.about-v2-name-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 430px;
  padding: clamp(30px, 4vw, 48px);
  border: 1px solid rgba(216,183,127,.28);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
  box-shadow: 0 28px 70px rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
}

.about-v2-name-card::before,
.about-v2-name-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(216,183,127,.18);
  border-radius: 50%;
}

.about-v2-name-card::before { width: 430px; height: 430px; right: -190px; top: -210px; }
.about-v2-name-card::after { width: 300px; height: 300px; left: -180px; bottom: -170px; }

.about-v2-name-glow {
  position: absolute;
  z-index: -1;
  inset: auto -15% -40% 20%;
  height: 70%;
  background: radial-gradient(circle, rgba(198,154,87,.22), transparent 68%);
  pointer-events: none;
}

.about-v2-name-logo {
  display: block;
  width: min(320px, 78%);
  height: auto;
  margin-bottom: 34px;
  filter: drop-shadow(0 18px 32px rgba(0,0,0,.16));
}

.about-v2-name-label {
  margin: 0 0 12px;
  color: #d8b77f;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.about-v2-name-full {
  margin: 0;
  color: rgba(255,255,255,.7);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.45;
}

.about-v2-name-full strong { color: #fff; font-weight: 780; }
.about-v2-name-full span { color: rgba(255,255,255,.52); }

.about-v2-name-axis {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
}

.about-v2-name-axis span {
  display: grid;
  place-items: center;
  min-width: 48px;
  height: 48px;
  padding: 0 12px;
  color: #0a2850;
  background: #d8b77f;
  font-size: .9rem;
  font-weight: 900;
  letter-spacing: .05em;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}

.about-v2-name-axis i {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, rgba(216,183,127,.22), rgba(216,183,127,.75), rgba(216,183,127,.22));
}

.about-v2-name-note {
  margin: 18px 0 0;
  color: rgba(255,255,255,.72);
  font-size: .9rem;
}

.about-v2-person .about-person-grid {
  grid-template-columns: minmax(340px, .78fr) minmax(0, 1.22fr) !important;
  gap: clamp(60px, 8vw, 110px) !important;
}

.about-v2-person .about-person-visual { width: min(100%, 430px); }
.about-v2-person .about-person-badge { max-width: 240px; }
.about-v2-person-copy { max-width: 700px; }

.about-v2-person-note {
  max-width: 690px;
  margin: 22px 0 0;
  padding-left: 20px;
  border-left: 3px solid #c69a57;
  color: #405568;
  font-size: 1rem;
  line-height: 1.75;
}

.about-v2-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr);
  gap: clamp(44px, 6vw, 80px);
  align-items: end;
  margin-bottom: 46px;
}

.about-v2-section-head .about-section-title,
.about-v2-section-head .about-section-lead { max-width: none; margin-bottom: 0; }

.about-v2-pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.about-v2-pillar {
  position: relative;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  min-height: 250px;
  padding: 32px;
  border: 1px solid rgba(16,48,78,.10);
  background: #fff;
  box-shadow: 0 18px 46px rgba(19,40,61,.06);
  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);
}

.about-v2-pillar-wide { grid-column: 1 / -1; min-height: 215px; }

.about-v2-pillar-code {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  padding: 0 8px;
  color: #fff;
  background: #c69a57;
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: .04em;
  clip-path: polygon(29.289% 0,70.711% 0,100% 29.289%,100% 70.711%,70.711% 100%,29.289% 100%,0 70.711%,0 29.289%);
}

.about-v2-pillar-en {
  display: block;
  margin-bottom: 7px;
  color: #c69a57;
  font-size: .75rem;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.about-v2-pillar h3 {
  margin: 0;
  color: #10304e;
  font-size: 1.45rem;
  font-weight: 850;
}

.about-v2-pillar p {
  max-width: 760px;
  margin: 12px 0 0;
  color: #627588;
  line-height: 1.72;
}

.about-v2-principle {
  position: relative;
  overflow: hidden;
  padding: clamp(84px, 9vw, 118px) 0;
  color: #fff;
  background: linear-gradient(135deg, #001428 0%, #0a2850 58%, #061c38 100%);
}

.about-v2-principle::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -220px;
  top: -260px;
  border: 1px solid rgba(216,183,127,.16);
  border-radius: 50%;
}

.about-v2-principle-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(260px, .62fr) minmax(0, 1.38fr);
  gap: clamp(48px, 7vw, 96px);
  align-items: center;
}

.about-v2-principle-mark {
  color: rgba(255,255,255,.14);
  font-size: clamp(4rem, 9vw, 7.8rem);
  font-weight: 900;
  letter-spacing: -.07em;
  line-height: .9;
  white-space: nowrap;
}

.about-v2-principle-mark span { color: #d8b77f; }
.about-v2-principle .about-section-kicker { margin-bottom: 18px; }

.about-v2-principle h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(2.2rem, 4.3vw, 4.2rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.045em;
}

.about-v2-principle h2 span { color: #d8b77f; }

.about-v2-principle p {
  max-width: 760px;
  margin: 24px 0 0;
  color: rgba(255,255,255,.76);
  font-size: 1.08rem;
  line-height: 1.78;
}

.about-v2-process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.about-v2-process-card {
  position: relative;
  min-height: 290px;
  padding: 34px 30px;
  border: 1px solid rgba(16,48,78,.10);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(19,40,61,.055);
}

.about-v2-process-number {
  display: block;
  color: #c69a57;
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.05em;
}

.about-v2-process-card h3 {
  margin: 28px 0 0;
  color: #10304e;
  font-size: 1.4rem;
  font-weight: 850;
}

.about-v2-process-card p {
  margin: 12px 0 0;
  color: #627588;
  line-height: 1.7;
}

.about-v2-operational-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
  gap: clamp(50px, 7vw, 92px);
  align-items: center;
}

.about-v2-operational-copy .about-section-title,
.about-v2-operational-copy .about-section-lead { max-width: 720px; }

.about-v2-tool-list { display: grid; gap: 14px; }

.about-v2-tool-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 118px;
  padding: 24px 26px;
  border: 1px solid rgba(16,48,78,.10);
  border-radius: 20px;
  color: inherit;
  background: #f7f9fa;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.about-v2-tool-link:hover {
  transform: translateY(-2px);
  border-color: rgba(198,154,87,.5);
  box-shadow: 0 18px 34px rgba(19,40,61,.08);
}

.about-v2-tool-link span { display: grid; gap: 6px; }
.about-v2-tool-link strong { color: #10304e; font-size: 1.2rem; }
.about-v2-tool-link small { color: #66798a; font-size: .92rem; line-height: 1.5; }
.about-v2-tool-link b { color: #c69a57; font-size: 1.6rem; font-weight: 500; }

.about-v2-final { padding: 58px 0; background: #f4efe7; }
.about-v2-final .about-final-grid { border-color: rgba(198,154,87,.22); }

@media (max-width: 1050px) {
  body.about-page .about-v2-hero .about-hero-grid,
  .about-v2-section-head,
  .about-v2-principle-grid,
  .about-v2-operational-grid {
    grid-template-columns: 1fr !important;
  }

  .about-v2-name-card { min-height: auto; }
  .about-v2-pillars { grid-template-columns: 1fr; }
  .about-v2-pillar-wide { grid-column: auto; }
  .about-v2-process-grid { grid-template-columns: 1fr; }
  .about-v2-process-card { min-height: auto; }
  .about-v2-principle-mark { display: none; }
  .about-v2-section-head { align-items: start; gap: 24px; }
}

@media (min-width: 400px) and (max-width: 1200px) {
  body.about-page .about-v2-hero .about-hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important;
  }

  body.about-page .about-v2-person .about-person-grid {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) !important;
  }

  .about-v2-name-card {
    min-height: 0;
    padding: clamp(16px, 3vw, 34px);
    border-radius: clamp(14px, 2.2vw, 26px);
  }

  .about-v2-name-logo { width: min(250px, 70%); margin-bottom: clamp(14px, 2.4vw, 28px); }
  .about-v2-name-label { font-size: clamp(.42rem, .9vw, .7rem); }
  .about-v2-name-full { font-size: clamp(.62rem, 1.55vw, 1.2rem); }
  .about-v2-name-axis { margin-top: clamp(14px, 2.5vw, 28px); gap: clamp(5px, 1vw, 10px); }
  .about-v2-name-axis span { min-width: clamp(28px, 4.8vw, 46px); height: clamp(28px, 4.8vw, 46px); padding: 0 clamp(6px, 1vw, 10px); font-size: clamp(.48rem, 1vw, .78rem); }
  .about-v2-name-note { margin-top: clamp(8px, 1.5vw, 16px); font-size: clamp(.48rem, 1vw, .78rem); }

  .about-v2-pillars { gap: clamp(10px, 1.8vw, 20px); }
  .about-v2-pillar { grid-template-columns: clamp(42px, 6vw, 68px) 1fr; gap: clamp(12px, 2vw, 22px); min-height: 0; padding: clamp(16px, 2.5vw, 28px); }
  .about-v2-pillar-code { width: clamp(42px, 6vw, 66px); height: clamp(42px, 6vw, 66px); font-size: clamp(.66rem, 1.2vw, 1rem); }
  .about-v2-pillar-en { font-size: clamp(.46rem, .8vw, .68rem); }
  .about-v2-pillar h3 { font-size: clamp(.78rem, 1.7vw, 1.3rem); }
  .about-v2-pillar p { font-size: clamp(.52rem, 1.15vw, .9rem); }

  .about-v2-process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.8vw, 20px); }
  .about-v2-process-card { min-height: 0; padding: clamp(16px, 2.5vw, 28px); border-radius: clamp(12px, 2vw, 22px); }
  .about-v2-process-number { font-size: clamp(1.8rem, 4.5vw, 3.2rem); }
  .about-v2-process-card h3 { margin-top: clamp(12px, 2vw, 22px); font-size: clamp(.78rem, 1.65vw, 1.25rem); }
  .about-v2-process-card p { font-size: clamp(.52rem, 1.1vw, .88rem); }

  .about-v2-operational-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important; gap: clamp(22px, 4vw, 52px); }
  .about-v2-tool-link { min-height: 0; padding: clamp(12px, 2vw, 22px); border-radius: clamp(10px, 1.8vw, 18px); }
  .about-v2-tool-link strong { font-size: clamp(.68rem, 1.4vw, 1.05rem); }
  .about-v2-tool-link small { font-size: clamp(.5rem, 1vw, .78rem); }
}

@media (max-width: 760px) {
  body.about-page .about-v2-hero .about-shell,
  body.about-page .about-v2-person .about-shell,
  body.about-page .about-v2-meaning .about-shell,
  body.about-page .about-v2-principle .about-shell,
  body.about-page .about-v2-process .about-shell,
  body.about-page .about-v2-operational .about-shell,
  body.about-page .about-v2-final .about-shell {
    width: min(100% - 36px, 1180px) !important;
  }
}

@media (max-width: 399px) {
  body.about-page .about-v2-hero .about-hero-grid,
  body.about-page .about-v2-person .about-person-grid,
  .about-v2-section-head,
  .about-v2-principle-grid,
  .about-v2-operational-grid {
    grid-template-columns: 1fr !important;
  }

  body.about-page .about-v2-hero { min-height: auto; }
  .about-v2-name-card { margin-top: 8px; padding: 24px 20px; border-radius: 20px; }
  .about-v2-name-logo { width: min(240px, 84%); margin-bottom: 24px; }
  .about-v2-name-full { font-size: 1rem; }
  .about-v2-name-axis { gap: 8px; margin-top: 24px; }
  .about-v2-name-axis span { min-width: 40px; height: 40px; padding: 0 8px; font-size: .72rem; }

  .about-v2-person-note { font-size: .92rem; }
  .about-v2-section-head { gap: 18px; margin-bottom: 28px; }
  .about-v2-pillars { grid-template-columns: 1fr; }
  .about-v2-pillar { grid-template-columns: 58px 1fr; gap: 16px; min-height: 0; padding: 22px 18px; }
  .about-v2-pillar-code { width: 54px; height: 54px; font-size: .8rem; }
  .about-v2-pillar-en { font-size: .64rem; }
  .about-v2-pillar h3 { font-size: 1.16rem; }
  .about-v2-pillar p { font-size: .92rem; line-height: 1.65; }

  .about-v2-principle { padding: 70px 0; }
  .about-v2-principle h2 { font-size: 2.2rem; }
  .about-v2-principle p { font-size: .98rem; }

  .about-v2-process-grid { grid-template-columns: 1fr; }
  .about-v2-process-card { min-height: 0; padding: 26px 22px; }

  .about-v2-operational-grid { gap: 28px; }
  .about-v2-tool-link { min-height: 0; padding: 20px; }
  .about-v2-tool-link strong { font-size: 1.05rem; }
  .about-v2-tool-link small { font-size: .86rem; }

  .about-v2-final .about-final-grid { gap: 22px; }
}

/* Über uns – Philosophie gefolgt von der TOOWIE-Namensidee */
body.about-page .about-v2-person {
  padding-bottom: clamp(46px, 5vw, 66px);
}

body.about-page #toowie-bedeutung {
  position: relative;
  margin: 0;
  padding: clamp(28px, 3.5vw, 44px) 0 clamp(78px, 8vw, 108px);
  border: 0;
  background: #fcf7ef;
  box-shadow: none;
}
body.about-page #toowie-bedeutung::before,
body.about-page #toowie-bedeutung::after { display: none; }

body.about-page #toowie-bedeutung .about-shell {
  width: min(1240px, calc(100% - 48px));
}

body.about-page .about-name-story {
  display: grid;
  grid-template-columns: minmax(360px, .9fr) minmax(0, 1.1fr);
  gap: clamp(50px, 7vw, 92px);
  align-items: center;
}

body.about-page .about-name-brand {
  position: relative;
  min-width: 0;
  padding: clamp(34px, 4.5vw, 56px) clamp(28px, 4vw, 48px);
  border: 1px solid rgba(16,48,78,.10);
  border-radius: 28px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 20px 54px rgba(19,40,61,.07);
}
body.about-page .about-name-brand::before,
body.about-page .about-name-brand::after {
  content: "";
  position: absolute;
  left: clamp(28px, 4vw, 48px);
  right: clamp(28px, 4vw, 48px);
  height: 1px;
  background: #c69a57;
}
body.about-page .about-name-brand::before { top: 24px; }
body.about-page .about-name-brand::after { bottom: 24px; }

body.about-page .about-name-brand > img {
  display: block;
  width: min(100%, 390px);
  height: auto;
  margin: 6px auto 34px;
}

body.about-page .about-name-formula {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px 10px;
  max-width: 520px;
  margin: 0 auto 6px;
  color: #10304e;
  text-align: center;
  line-height: 1.35;
}
body.about-page .about-name-formula-main {
  font-size: clamp(.92rem, 1.35vw, 1.08rem);
  font-weight: 850;
}
body.about-page .about-name-formula-link {
  color: #8a7658;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: lowercase;
}
body.about-page .about-name-formula-gold { color: #c69a57; }

body.about-page .about-name-story-copy .about-section-title,
body.about-page .about-name-story-copy .about-section-lead {
  max-width: 690px;
}
body.about-page .about-name-story-note {
  max-width: 690px;
  margin: 18px 0 0;
  padding-left: 20px;
  border-left: 2px solid #c69a57;
  color: #53697c;
  font-size: 1rem;
  line-height: 1.72;
}
body.about-page .about-name-story-note strong {
  color: #10304e;
  font-weight: 850;
}

body.about-page .about-name-octagon-explainer {
  margin-top: clamp(52px, 6vw, 74px);
  padding-top: clamp(30px, 4vw, 42px);
  border-top: 1px solid rgba(198,154,87,.52);
}
body.about-page .about-name-octagon-intro {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 760px;
  margin: 0 auto 28px;
  text-align: left;
}
body.about-page .about-name-octagon-count {
  flex: 0 0 auto;
  color: #c69a57;
  font-size: clamp(2.6rem, 4vw, 4rem);
  font-weight: 900;
  line-height: .9;
}
body.about-page .about-name-octagon-intro p {
  margin: 0;
  color: #5b6f81;
  font-size: 1rem;
  line-height: 1.6;
}
body.about-page .about-name-octagon-intro strong { color: #10304e; }

body.about-page .about-name-octagon-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
body.about-page .about-name-octagon-item {
  display: flex;
  align-items: center;
  gap: 17px;
  min-width: 0;
  min-height: 116px;
  padding: 22px 20px;
  border: 1px solid rgba(16,48,78,.09);
  border-radius: 20px;
  background: rgba(255,255,255,.66);
}
body.about-page .about-name-octagon-shape {
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  color: #10304e;
  background: linear-gradient(135deg,#dfbf7b,#c99945);
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: .02em;
  clip-path: polygon(29.289% 0,70.711% 0,100% 29.289%,100% 70.711%,70.711% 100%,29.289% 100%,0 70.711%,0 29.289%);
}
body.about-page .about-name-octagon-item strong {
  display: block;
  color: #10304e;
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.25;
}
body.about-page .about-name-octagon-item small {
  display: block;
  margin-top: 6px;
  color: #66798a;
  font-size: .86rem;
  line-height: 1.45;
}

@media (max-width: 1050px) {
  body.about-page .about-name-story {
    grid-template-columns: 1fr;
    gap: 38px;
  }
  body.about-page .about-name-brand {
    width: min(100%, 700px);
    margin-inline: auto;
  }
  body.about-page .about-name-story-copy {
    width: min(100%, 760px);
    margin-inline: auto;
  }
  body.about-page .about-name-octagon-grid {
    grid-template-columns: 1fr;
    width: min(100%, 700px);
    margin-inline: auto;
  }
}

@media (max-width: 760px) {
  body.about-page #toowie-bedeutung {
    padding: 24px 0 72px;
  }
  body.about-page #toowie-bedeutung .about-shell {
    width: min(100% - 36px, 1180px);
  }
  body.about-page .about-name-brand {
    padding: 34px 20px;
    border-radius: 22px;
  }
  body.about-page .about-name-brand::before,
  body.about-page .about-name-brand::after {
    left: 20px;
    right: 20px;
  }
  body.about-page .about-name-brand::before { top: 18px; }
  body.about-page .about-name-brand::after { bottom: 18px; }
  body.about-page .about-name-brand > img {
    width: min(100%, 300px);
    margin-bottom: 26px;
  }
  body.about-page .about-name-formula {
    gap: 6px 8px;
  }
  body.about-page .about-name-story-note {
    padding-left: 16px;
    font-size: .94rem;
  }
  body.about-page .about-name-octagon-explainer {
    margin-top: 46px;
  }
  body.about-page .about-name-octagon-intro {
    align-items: flex-start;
    gap: 14px;
  }
  body.about-page .about-name-octagon-item {
    min-height: 0;
    padding: 18px 16px;
  }
  body.about-page .about-name-octagon-shape {
    flex-basis: 58px;
    width: 58px;
    height: 58px;
    font-size: .9rem;
  }
}

@media (max-width: 430px) {
  body.about-page .about-name-formula {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
  }
  body.about-page .about-name-formula-link {
    margin: 2px 0;
  }
  body.about-page .about-name-octagon-item {
    align-items: flex-start;
  }
  body.about-page .about-name-octagon-item strong {
    font-size: .95rem;
  }
  body.about-page .about-name-octagon-item small {
    font-size: .82rem;
  }
}

/* ========================================================================== */
/* Über uns – ruhiger TOOWIE-Erzählfluss                                     */
/* ========================================================================== */
body.about-page .about-v3-meaning .about-shell,
body.about-page .about-v3-origin .about-shell {
  width: min(1240px, calc(100% - 48px));
  margin-inline: auto;
}

body.about-page .about-v3-meaning {
  padding: clamp(86px, 8vw, 118px) 0 clamp(96px, 9vw, 132px);
  background: #fff;
}

body.about-page .about-v3-meaning-head,
body.about-page .about-v3-origin-head {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  gap: clamp(56px, 8vw, 108px);
  align-items: end;
}

body.about-page .about-v3-meaning-lead {
  max-width: 650px;
  margin: 0 0 4px;
  color: #53697c;
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  line-height: 1.82;
}

body.about-page .about-v3-perspective-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr) 86px minmax(0, 1.18fr);
  align-items: stretch;
  margin-top: clamp(58px, 6vw, 78px);
  padding: clamp(42px, 4.5vw, 58px) 0 clamp(38px, 4vw, 50px);
  border-top: 1px solid rgba(198,154,87,.72);
  border-bottom: 1px solid rgba(198,154,87,.72);
}

body.about-page .about-v3-perspective {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 22px;
  align-content: start;
  min-width: 0;
  padding: 0 clamp(18px, 2.4vw, 32px);
}

body.about-page .about-v3-perspective:first-child { padding-left: 0; }
body.about-page .about-v3-perspective:last-child { padding-right: 0; }

body.about-page .about-v3-octagon {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  color: #0a2850;
  background: linear-gradient(135deg,#e0bf7a,#c99640);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: .03em;
  clip-path: polygon(29.289% 0,70.711% 0,100% 29.289%,100% 70.711%,70.711% 100%,29.289% 100%,0 70.711%,0 29.289%);
  box-shadow: 0 12px 26px rgba(198,154,87,.16);
}

body.about-page .about-v3-perspective-copy { min-width: 0; }

body.about-page .about-v3-perspective-en {
  display: block;
  margin: 1px 0 8px;
  color: #c69a57;
  font-size: .75rem;
  font-weight: 850;
  letter-spacing: .12em;
  line-height: 1.35;
  text-transform: uppercase;
}

body.about-page .about-v3-perspective h3 {
  margin: 0;
  color: #10304e;
  font-size: clamp(1.18rem, 1.55vw, 1.42rem);
  font-weight: 850;
  line-height: 1.18;
  letter-spacing: -.02em;
}

body.about-page .about-v3-perspective p {
  margin: 12px 0 0;
  color: #627588;
  font-size: .96rem;
  line-height: 1.7;
}

body.about-page .about-v3-join {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
}

body.about-page .about-v3-join::before,
body.about-page .about-v3-join::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: calc(50% - 27px);
  background: rgba(198,154,87,.28);
}

body.about-page .about-v3-join::before { top: 0; }
body.about-page .about-v3-join::after { bottom: 0; }

body.about-page .about-v3-join span {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 9px;
  border: 1px solid rgba(198,154,87,.55);
  border-radius: 999px;
  color: #8d6c36;
  background: #fff;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: lowercase;
}

body.about-page .about-v3-name-caption {
  max-width: 900px;
  margin: 28px auto 0;
  color: #728292;
  font-size: .94rem;
  line-height: 1.7;
  text-align: center;
}

body.about-page .about-v3-name-caption strong {
  color: #10304e;
  font-weight: 820;
}

body.about-page .about-v3-origin {
  padding: clamp(92px, 9vw, 128px) 0 clamp(88px, 8vw, 118px);
  background: #fcf7ef;
}

body.about-page .about-v3-origin-head { align-items: start; }

body.about-page .about-v3-origin-copy {
  max-width: 680px;
  color: #53697c;
  font-size: 1.02rem;
  line-height: 1.78;
}

body.about-page .about-v3-origin-copy p { margin: 0; }
body.about-page .about-v3-origin-copy p + p { margin-top: 18px; }

body.about-page .about-v3-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(34px, 5vw, 72px);
  margin-top: clamp(68px, 7vw, 92px);
}

body.about-page .about-v3-timeline::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 7px;
  right: 7px;
  height: 1px;
  background: linear-gradient(90deg, rgba(198,154,87,.45), #c69a57 50%, rgba(198,154,87,.45));
}

body.about-page .about-v3-timeline-step {
  position: relative;
  min-width: 0;
  padding-top: 36px;
}

body.about-page .about-v3-step-marker {
  position: absolute;
  z-index: 1;
  top: 1px;
  left: 0;
  width: 15px;
  height: 15px;
  background: #c69a57;
  clip-path: polygon(29.289% 0,70.711% 0,100% 29.289%,100% 70.711%,70.711% 100%,29.289% 100%,0 70.711%,0 29.289%);
  box-shadow: 0 0 0 7px #fcf7ef;
}

body.about-page .about-v3-step-number {
  display: block;
  margin-bottom: 16px;
  color: #c69a57;
  font-size: clamp(2.5rem, 4vw, 3.8rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.05em;
}

body.about-page .about-v3-timeline-step h3 {
  margin: 0;
  color: #10304e;
  font-size: clamp(1.2rem, 1.7vw, 1.52rem);
  font-weight: 850;
  letter-spacing: -.02em;
}

body.about-page .about-v3-timeline-step p {
  max-width: 340px;
  margin: 13px 0 0;
  color: #627588;
  font-size: .96rem;
  line-height: 1.72;
}

body.about-page .about-v3-origin-transition {
  max-width: 900px;
  margin: clamp(50px, 6vw, 76px) 0 0;
  padding: 2px 0 2px 22px;
  border-left: 2px solid #c69a57;
  color: #405568;
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.72;
}

/* Der Gesprächsbereich bleibt, wird aber flacher und ruhiger. */
body.about-page .about-v2-operational {
  padding: clamp(92px, 9vw, 124px) 0;
  background: #fff;
}

body.about-page .about-v2-operational .about-shell {
  width: min(1240px, calc(100% - 48px)) !important;
}

body.about-page .about-v2-operational-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr) !important;
  gap: clamp(62px, 8vw, 106px);
  align-items: center;
}

body.about-page .about-v2-tool-list {
  gap: 0;
  border-top: 1px solid rgba(16,48,78,.13);
}

body.about-page .about-v2-tool-link {
  min-height: 0;
  padding: 24px 4px;
  border: 0;
  border-bottom: 1px solid rgba(16,48,78,.13);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.about-page .about-v2-tool-link:hover {
  transform: none;
  border-color: rgba(198,154,87,.7);
  box-shadow: none;
}

body.about-page .about-v2-tool-link:hover strong { color: #b9853e; }

@media (max-width: 1050px) {
  body.about-page .about-v3-meaning-head,
  body.about-page .about-v3-origin-head,
  body.about-page .about-v2-operational-grid {
    grid-template-columns: 1fr !important;
    gap: 30px;
  }

  body.about-page .about-v3-meaning-lead,
  body.about-page .about-v3-origin-copy { max-width: 760px; }

  body.about-page .about-v3-perspective-line {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }

  body.about-page .about-v3-perspective {
    grid-template-columns: 66px minmax(0, 1fr);
    padding: 30px 0;
  }

  body.about-page .about-v3-join {
    justify-items: start;
    min-height: 0;
    padding-left: 84px;
  }

  body.about-page .about-v3-join::before,
  body.about-page .about-v3-join::after { display: none; }

  body.about-page .about-v3-join span {
    height: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #a17b40;
  }

  body.about-page .about-v3-name-caption { text-align: left; margin-left: 84px; }
}

@media (max-width: 760px) {
  body.about-page .about-v3-meaning .about-shell,
  body.about-page .about-v3-origin .about-shell,
  body.about-page .about-v2-operational .about-shell {
    width: min(100% - 36px, 1180px) !important;
  }

  body.about-page .about-v3-meaning,
  body.about-page .about-v3-origin,
  body.about-page .about-v2-operational { padding: 72px 0; }

  body.about-page .about-v3-perspective-line { margin-top: 44px; }
  body.about-page .about-v3-perspective { grid-template-columns: 58px minmax(0, 1fr); gap: 17px; }
  body.about-page .about-v3-octagon { width: 56px; height: 56px; font-size: .9rem; }
  body.about-page .about-v3-join { padding-left: 75px; }
  body.about-page .about-v3-name-caption { margin-left: 0; }

  body.about-page .about-v3-timeline {
    grid-template-columns: 1fr;
    gap: 38px;
    margin-top: 54px;
    padding-left: 24px;
  }

  body.about-page .about-v3-timeline::before {
    top: 7px;
    bottom: 7px;
    left: 7px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, rgba(198,154,87,.45), #c69a57 50%, rgba(198,154,87,.45));
  }

  body.about-page .about-v3-timeline-step { padding-top: 0; }
  body.about-page .about-v3-step-marker { top: 0; left: -24px; }
  body.about-page .about-v3-step-number { font-size: 2.45rem; margin-bottom: 12px; }
  body.about-page .about-v3-timeline-step p { max-width: 560px; }
  body.about-page .about-v3-origin-transition { margin-top: 48px; }
}

@media (max-width: 430px) {
  body.about-page .about-v3-perspective { grid-template-columns: 50px minmax(0, 1fr); gap: 14px; }
  body.about-page .about-v3-octagon { width: 48px; height: 48px; font-size: .78rem; }
  body.about-page .about-v3-join { padding-left: 64px; }
  body.about-page .about-v3-perspective-en { font-size: .67rem; letter-spacing: .09em; }
  body.about-page .about-v3-perspective h3 { font-size: 1.15rem; }
  body.about-page .about-v3-perspective p { font-size: .9rem; }
}

/* ========================================================================== */
/* Über uns – Entstehung und Gespräch als ein zusammenhängender Ablauf        */
/* ========================================================================== */
body.about-page .about-v3-origin-connected {
  padding: clamp(94px, 9vw, 132px) 0 clamp(96px, 9vw, 130px);
  background: #fcf7ef;
}

body.about-page .about-v3-origin-connected .about-v3-origin-head {
  align-items: start;
}

body.about-page .about-v3-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr) 54px minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  margin-top: clamp(64px, 7vw, 90px);
  padding: clamp(34px, 4vw, 48px) 0;
  border-top: 1px solid rgba(198,154,87,.72);
  border-bottom: 1px solid rgba(198,154,87,.72);
}

body.about-page .about-v3-flow-step {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 20px;
  min-width: 0;
  padding: 0 clamp(12px, 1.8vw, 24px);
}

body.about-page .about-v3-flow-step:first-child { padding-left: 0; }
body.about-page .about-v3-flow-step:last-child { padding-right: 0; }

body.about-page .about-v3-flow-icon {
  width: 54px;
  min-height: 42px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: start;
  color: #c69a57;
  background: transparent;
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.04em;
}

body.about-page .about-v3-flow-label {
  display: block;
  margin: 1px 0 8px;
  color: #c69a57;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .13em;
  line-height: 1.3;
  text-transform: uppercase;
}

body.about-page .about-v3-flow-step h3 {
  margin: 0;
  color: #10304e;
  font-size: clamp(1.18rem, 1.5vw, 1.42rem);
  font-weight: 850;
  line-height: 1.22;
  letter-spacing: -.025em;
}

body.about-page .about-v3-flow-step p {
  margin: 12px 0 0;
  color: #627588;
  font-size: .95rem;
  line-height: 1.72;
}

body.about-page .about-v3-flow-arrow {
  display: grid;
  place-items: center;
  color: #c69a57;
  font-size: 1.65rem;
  font-weight: 300;
  opacity: .8;
}

body.about-page .about-v3-operational-bridge {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: clamp(58px, 8vw, 104px);
  align-items: center;
  margin-top: clamp(72px, 8vw, 104px);
  padding-top: clamp(56px, 6vw, 76px);
  border-top: 1px solid rgba(16,48,78,.11);
}

body.about-page .about-v3-operational-copy h3 {
  max-width: 650px;
  margin: 12px 0 18px;
  color: #10304e;
  font-size: clamp(1.9rem, 3vw, 3rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.045em;
}

body.about-page .about-v3-operational-copy h3::after {
  content: "";
  display: block;
  width: 84px;
  height: 2px;
  margin-top: 22px;
  background: #c69a57;
}

body.about-page .about-v3-operational-copy p {
  max-width: 660px;
  margin: 0;
  color: #53697c;
  font-size: 1rem;
  line-height: 1.8;
}

body.about-page .about-v3-origin-connected .about-v2-tool-list {
  gap: 0;
  border-top: 1px solid rgba(16,48,78,.13);
}

body.about-page .about-v3-origin-connected .about-v2-tool-link {
  min-height: 0;
  padding: 25px 4px;
  border: 0;
  border-bottom: 1px solid rgba(16,48,78,.13);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.about-page .about-v3-origin-connected .about-v2-tool-link:hover {
  transform: none;
  border-color: rgba(198,154,87,.7);
  box-shadow: none;
}

body.about-page .about-v3-origin-connected .about-v2-tool-link:hover strong {
  color: #b9853e;
}

@media (max-width: 1050px) {
  body.about-page .about-v3-flow {
    grid-template-columns: 1fr;
    padding: 10px 0;
  }

  body.about-page .about-v3-flow-step {
    grid-template-columns: 58px minmax(0, 1fr);
    padding: 28px 0;
  }

  body.about-page .about-v3-flow-arrow {
    justify-items: start;
    height: 18px;
    padding-left: 18px;
    transform: rotate(90deg);
    transform-origin: 28px center;
    font-size: 1.35rem;
  }

  body.about-page .about-v3-operational-bridge {
    grid-template-columns: 1fr;
    gap: 38px;
  }
}

@media (max-width: 760px) {
  body.about-page .about-v3-origin-connected {
    padding: 72px 0 78px;
  }

  body.about-page .about-v3-flow {
    margin-top: 48px;
  }

  body.about-page .about-v3-flow-step {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 15px;
  }

  body.about-page .about-v3-flow-icon {
    width: 48px;
    min-height: 36px;
    font-size: 1.35rem;
  }

  body.about-page .about-v3-flow-step h3 {
    font-size: 1.14rem;
  }

  body.about-page .about-v3-flow-step p {
    font-size: .91rem;
  }

  body.about-page .about-v3-operational-bridge {
    margin-top: 56px;
    padding-top: 48px;
  }

  body.about-page .about-v3-operational-copy h3 {
    font-size: clamp(1.8rem, 8vw, 2.45rem);
  }
}

/* Match the service-page hero check labels at every breakpoint. */
body.about-page .about-hero-points {
  font-size: clamp(.84rem, 1vw, 1rem);
}
body.about-page .about-hero-points span,
body.about-page .about-hero-points span::before {
  font-size: inherit;
}
@media (min-width: 400px) and (max-width: 980px) {
  body.about-page .about-hero-points {
    font-size: clamp(.54rem, 1.05vw, .86rem);
  }
}
@media (max-width: 399px) {
  body.about-page .about-hero-points {
    font-size: clamp(.68rem, 3vw, .82rem);
  }
}
/* Separate the name explanation from the concrete areas of work. */
body.about-page .about-company-hero > .about-shell,
body.about-page .about-v2-person > .about-shell,
body.about-page #toowie-bedeutung > .about-shell,
body.about-page .about-expectations > .about-shell {
  width: min(1548px, calc(100% - 12px)) !important;
}
body.about-page .about-company-hero .about-company-copy {
  left: 0;
}
body.about-page .about-company-hero .about-company-logo {
  right: 0;
}
@media (max-width: 1050px) {
  body.about-page .about-company-hero > .about-shell,
  body.about-page .about-v2-person > .about-shell,
  body.about-page #toowie-bedeutung > .about-shell,
  body.about-page .about-expectations > .about-shell {
    width: min(1180px, calc(100% - 24px)) !important;
  }
}
body.about-page #toowie-bedeutung .about-v3-meaning-head {
  display: block;
}
body.about-page #toowie-name-title {
  max-width: none;
}
body.about-page #toowie-name-title > span {
  margin-left: 6px;
}
body.about-page #toowie-bedeutung .about-v3-perspective-line {
  grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr) 72px minmax(0, 1fr);
  grid-auto-rows: 1fr;
  gap: 0;
  margin-top: 28px;
  padding: 0;
  border: 0;
}
body.about-page #toowie-bedeutung .about-v3-perspective {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 22px 32px 32px;
  background: #fff;
  border: 1px solid #dce6ec;
  border-radius: 18px;
  box-shadow: none;
}
body.about-page #toowie-bedeutung .about-v3-perspective::before {
  content: none;
  position: absolute;
  top: 0;
  left: 32px;
  width: 48px;
  height: 3px;
  background: #c69a57;
  border-radius: 0 0 3px 3px;
}
body.about-page #toowie-bedeutung .about-v3-perspective-en {
  min-height: 2.7em;
  color: #71808b;
  letter-spacing: .08em;
  margin-bottom: 2px;
}
body.about-page #toowie-bedeutung .about-v3-octagon {
  position: relative;
  isolation: isolate;
  width: 46px;
  height: 46px;
  background: linear-gradient(135deg, #e0bf7a, #c99640);
  box-shadow: none;
  font-size: .8rem;
}
body.about-page #toowie-bedeutung .about-v3-octagon::before {
  content: none;
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: #fcfaf6;
  clip-path: inherit;
}
body.about-page #toowie-bedeutung .about-v3-join {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
body.about-page #toowie-bedeutung .about-v3-join::before,
body.about-page #toowie-bedeutung .about-v3-join::after {
  content: "";
  display: block;
  position: static;
  flex: 1;
  height: 1px;
  width: auto;
  background: rgba(198,154,87,.65);
}
body.about-page #toowie-bedeutung .about-v3-join span {
  display: grid;
  place-items: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #d8c9ae;
  border-radius: 50%;
  background: #f8fbfc;
  color: #0a2850;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: 0;
}
body.about-page #toowie-bedeutung .about-v3-question {
  margin-top: 20px;
}
body.about-page #toowie-bedeutung .about-v3-name-caption {
  margin: 32px auto 0;
  text-align: center;
}
body.about-page .about-v3-name-intro {
  margin: 0 0 16px;
  color: #10304e;
  font-size: 1.12rem;
  font-weight: 400;
}
body.about-page .about-v3-name-equation {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
body.about-page .about-v3-name-operator {
  color: #627588;
  font-size: .8rem;
}
body.about-page .about-v3-name-result {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #627588;
}
body.about-page .about-v3-name-result strong {
  font-size: 1.15rem;
  letter-spacing: .04em;
}
body.about-page .about-v3-name-explanation {
  margin: 14px 0 0;
  font-size: .86rem;
  color: #71808b;
  font-weight: 400;
}
@media (min-width: 901px) {
  body.about-page #toowie-bedeutung .about-v3-perspective-line {
    grid-template-rows: repeat(5, auto);
    row-gap: 12px;
  }
  body.about-page #toowie-bedeutung .about-v3-perspective,
  body.about-page #toowie-bedeutung .about-v3-join {
    grid-row: 1 / 6;
  }
  body.about-page #toowie-bedeutung .about-v3-perspective {
    grid-template-rows: subgrid;
  }
  body.about-page #toowie-bedeutung .about-v3-perspective-copy {
    display: contents;
  }
  body.about-page #toowie-bedeutung .about-v3-perspective-en,
  body.about-page #toowie-bedeutung .about-v3-perspective h3,
  body.about-page #toowie-bedeutung .about-v3-perspective p {
    margin: 0;
    min-height: 0;
  }
  body.about-page #toowie-bedeutung .about-v3-perspective .about-v3-question {
    margin-top: 8px;
  }
}
@media (max-width: 900px) {
  body.about-page #toowie-bedeutung .about-v3-perspective-line {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 58px 1fr 58px 1fr;
  }
  body.about-page #toowie-bedeutung .about-v3-join {
    flex-direction: column;
  }
  body.about-page #toowie-bedeutung .about-v3-join::before,
  body.about-page #toowie-bedeutung .about-v3-join::after {
    width: 1px;
    height: auto;
  }
  body.about-page #toowie-bedeutung .about-v3-perspective-en {
    min-height: 0;
  }
}
body.about-page .about-v2-person {
  background: #fcf7ef;
}
body.about-page #toowie-bedeutung.about-v3-meaning {
  background: #edf5f7;
}
body.about-page #entstehung.about-v3-origin {
  background: #fff;
}
body.about-page .about-v3-perspective-copy .about-v3-question {
  margin: 0 0 12px;
  color: #10304e;
  font-weight: 700;
}

/* Personal expectations of working together. */
body.about-page .about-expectations { background: #fcf7ef; padding: 84px 0; }
body.about-page #about-expectations-title { color: #0a2850; margin-bottom: 48px; max-width: none; }
body.about-page #about-expectations-title > span { color: #c69a57; }
body.about-page .about-expectations-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
body.about-page .about-expectations-grid article {
  min-width: 0;
  padding: 0 24px;
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(198, 154, 87, .55);
  border-radius: 0;
  box-shadow: none;
}
body.about-page .about-expectation-icon {
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
  color: #0a2850;
}
body.about-page .about-icon-accent { stroke: #c69a57; }
body.about-page .about-contact-close {
  padding: 64px 0;
  background: #edf5f7;
  border-top: 1px solid #dce6ec;
}
body.about-page .about-contact-close-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
}
body.about-page #about-contact-close-title {
  margin: 0;
  max-width: 660px;
  color: #10304e;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  line-height: 1.25;
  font-weight: 750;
  letter-spacing: -.02em;
}
body.about-page .about-contact-close p {
  margin: 18px 0 0;
  color: #53697c;
  font-size: 1.05rem;
  line-height: 1.65;
}
body.about-page .about-contact-close .about-actions { margin: 0; gap: 4px; }
body.about-page .about-contact-close .about-btn-gold,
body.about-page .about-contact-close .about-btn-gold:hover {
  color: #0a2850;
}
body.about-page .about-contact-close .about-btn-ghost {
  color: #10304e;
  border: 1px solid #9baebc;
  background: transparent;
}
body.about-page .about-contact-close .about-btn-ghost:hover {
  color: #10304e;
  background: #fff;
  border-color: #10304e;
}
body.about-page .about-contact-close-action > p { margin-top: 10px; font-size: .85rem; }
@media (max-width: 1050px) {
  body.about-page .about-contact-close-layout { grid-template-columns: 1fr; gap: 28px; }
}
body.about-page .about-expectations-grid h3 {
  color: #0a2850;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 14px;
}
body.about-page .about-expectations-grid p {
  color: #0a2850;
  font-size: 17px;
  line-height: 1.75;
  margin: 0;
  max-width: 360px;
}
@media (max-width: 800px) {
  body.about-page .about-expectations { padding: 60px 0; }
  body.about-page .about-expectations-grid { grid-template-columns: 1fr; gap: 32px; }
  body.about-page .about-expectations-grid article { padding: 0 24px; }
  body.about-page .about-expectations-grid p { max-width: 560px; }
}

/* ==========================================================================
   Kontaktseite – Ausbau 2026-09
   ========================================================================== */
html[data-page="kontakt"] .contact-hero {
  padding-bottom: clamp(96px, 10vw, 138px);
}

html[data-page="kontakt"] .contact-hero-frame .page-hero-frame-inner {
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(240,244,248,.93));
}

html[data-page="kontakt"] .contact-quick-section {
  position: relative;
  z-index: 5;
  margin-top: -54px;
  padding-bottom: clamp(58px, 7vw, 88px);
}

html[data-page="kontakt"] .contact-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

html[data-page="kontakt"] .contact-quick-card {
  display: grid;
  grid-template-columns: 50px minmax(0,1fr) auto;
  gap: 15px;
  align-items: center;
  min-height: 110px;
  padding: 20px 22px;
  color: var(--page-ink);
  border: 1px solid rgba(16,78,139,.11);
  border-radius: 20px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 18px 50px rgba(7,24,43,.10);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

html[data-page="kontakt"] .contact-quick-card:hover {
  color: var(--page-ink);
  transform: translateY(-4px);
  border-color: rgba(198,154,87,.55);
  box-shadow: 0 24px 58px rgba(7,24,43,.14);
}

html[data-page="kontakt"] .contact-quick-icon,
html[data-page="kontakt"] .contact-topic-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  color: var(--page-navy);
  background: linear-gradient(145deg, #d8b97e, var(--page-gold));
  clip-path: polygon(28% 0,72% 0,100% 28%,100% 72%,72% 100%,28% 100%,0 72%,0 28%);
}

html[data-page="kontakt"] .contact-quick-card small,
html[data-page="kontakt"] .contact-quick-card strong,
html[data-page="kontakt"] .contact-quick-card em {
  display: block;
  min-width: 0;
}

html[data-page="kontakt"] .contact-quick-card small {
  margin-bottom: 3px;
  color: #718397;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

html[data-page="kontakt"] .contact-quick-card strong {
  overflow-wrap: anywhere;
  color: var(--page-navy);
  font-size: 1.02rem;
  font-weight: 900;
}

html[data-page="kontakt"] .contact-quick-card em {
  margin-top: 3px;
  color: var(--page-muted);
  font-size: .8rem;
  font-style: normal;
}

html[data-page="kontakt"] .contact-quick-arrow {
  color: var(--page-gold);
  font-size: 1.35rem;
  transition: transform .2s ease;
}

html[data-page="kontakt"] .contact-quick-card:hover .contact-quick-arrow {
  transform: translateX(4px);
}

html[data-page="kontakt"] .contact-topics-section {
  padding-top: clamp(66px, 8vw, 104px);
}

html[data-page="kontakt"] .contact-topic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
  margin-top: 46px;
}

html[data-page="kontakt"] .contact-topic-card {
  position: relative;
  display: flex;
  min-height: 290px;
  flex-direction: column;
  padding: 28px 25px 24px;
  color: var(--page-ink);
  border: 1px solid rgba(16,78,139,.11);
  border-radius: 22px;
  background: linear-gradient(180deg,#fff 0%,#fbfcfd 100%);
  box-shadow: 0 15px 40px rgba(7,24,43,.055);
  text-decoration: none;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

html[data-page="kontakt"] .contact-topic-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 25px;
  width: 52px;
  height: 3px;
  border-radius: 999px;
  background: var(--page-gold);
}

html[data-page="kontakt"] .contact-topic-card:hover {
  color: var(--page-ink);
  transform: translateY(-5px);
  border-color: rgba(198,154,87,.48);
  box-shadow: 0 22px 52px rgba(7,24,43,.095);
}

html[data-page="kontakt"] .contact-topic-icon {
  width: 52px;
  height: 52px;
  margin: 10px 0 24px;
  font-size: 1.05rem;
}

html[data-page="kontakt"] .contact-topic-card > strong {
  color: var(--page-navy);
  font-size: 1.12rem;
  font-weight: 900;
  line-height: 1.28;
}

html[data-page="kontakt"] .contact-topic-card p {
  margin: 12px 0 22px;
  color: var(--page-muted);
  font-size: .92rem;
  line-height: 1.68;
}

html[data-page="kontakt"] .contact-topic-link {
  margin-top: auto;
  color: var(--page-blue);
  font-size: .82rem;
  font-weight: 850;
}

html[data-page="kontakt"] .contact-topic-link b {
  display: inline-block;
  margin-left: 5px;
  color: var(--page-gold);
  transition: transform .2s ease;
}

html[data-page="kontakt"] .contact-topic-card:hover .contact-topic-link b { transform: translateX(4px); }

html[data-page="kontakt"] .contact-form-section {
  overflow: hidden;
  position: relative;
}

html[data-page="kontakt"] .contact-form-section::before {
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  right: -230px;
  top: 40px;
  border: 1px solid rgba(198,154,87,.24);
  transform: rotate(22deg);
  pointer-events: none;
}

html[data-page="kontakt"] .contact-form-lead { max-width: 760px; }

html[data-page="kontakt"] .contact-main-grid {
  grid-template-columns: minmax(285px,.72fr) minmax(0,1.28fr);
  gap: 22px;
  align-items: stretch;
}

html[data-page="kontakt"] .contact-side-card,
html[data-page="kontakt"] .contact-form-card {
  position: relative;
  overflow: hidden;
}

html[data-page="kontakt"] .contact-side-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(155deg,#fff 0%,#f6f8fa 100%);
}

html[data-page="kontakt"] .contact-side-card::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -90px;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(16,78,139,.08);
  transform: rotate(45deg);
  pointer-events: none;
}

html[data-page="kontakt"] .contact-side-badge,
html[data-page="kontakt"] .contact-form-kicker {
  display: inline-block;
  color: var(--page-blue);
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
}

html[data-page="kontakt"] .contact-side-head h3 { margin-top: 8px; }

html[data-page="kontakt"] .contact-side-head p {
  margin: 10px 0 0;
  color: var(--page-muted);
  font-size: .92rem;
  line-height: 1.6;
}

html[data-page="kontakt"] .contact-next-steps {
  position: relative;
  z-index: 1;
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid rgba(16,78,139,.10);
}

html[data-page="kontakt"] .contact-next-steps ol {
  display: grid;
  gap: 15px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

html[data-page="kontakt"] .contact-next-steps li {
  display: grid;
  grid-template-columns: 31px 1fr;
  gap: 11px;
  align-items: start;
}

html[data-page="kontakt"] .contact-next-steps li > span {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid rgba(198,154,87,.55);
  border-radius: 50%;
  color: var(--page-navy);
  background: var(--page-gold-soft);
  font-size: .76rem;
  font-weight: 900;
}

html[data-page="kontakt"] .contact-next-steps strong,
html[data-page="kontakt"] .contact-next-steps small { display: block; }
html[data-page="kontakt"] .contact-next-steps strong { color: var(--page-navy); font-size: .86rem; }
html[data-page="kontakt"] .contact-next-steps small { margin-top: 2px; color: var(--page-muted); font-size: .76rem; line-height: 1.45; }

html[data-page="kontakt"] .contact-form-card {
  padding: clamp(27px,4vw,40px);
  border-color: rgba(16,78,139,.14);
  box-shadow: 0 22px 64px rgba(7,24,43,.09);
}

html[data-page="kontakt"] .contact-form-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg,var(--page-gold),#e1c999 55%,rgba(225,201,153,0));
}

html[data-page="kontakt"] .contact-form-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

html[data-page="kontakt"] .contact-form-head h3 { margin-top: 6px; }

html[data-page="kontakt"] .contact-required-note {
  flex: 0 0 auto;
  margin-top: 4px;
  color: var(--page-muted);
  font-size: .72rem;
  font-weight: 700;
}

html[data-page="kontakt"] .contact-form-grid { gap: 18px 16px; }

html[data-page="kontakt"] .page-form-field label { margin-bottom: 8px; }

html[data-page="kontakt"] .page-form-field input,
html[data-page="kontakt"] .page-form-field select,
html[data-page="kontakt"] .page-form-field textarea {
  min-height: 48px;
  border-color: rgba(16,78,139,.16);
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

html[data-page="kontakt"] .page-form-field textarea {
  min-height: 182px;
  line-height: 1.6;
}

html[data-page="kontakt"] .page-form-field input::placeholder,
html[data-page="kontakt"] .page-form-field textarea::placeholder { color: #9aa7b3; opacity: 1; }

html[data-page="kontakt"] .page-form-field .field-invalid {
  border-color: #b94b4b;
  box-shadow: 0 0 0 4px rgba(185,75,75,.08);
}

html[data-page="kontakt"] .contact-form-privacy {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 11px;
  align-items: start;
  margin-top: 20px;
  padding: 14px 15px;
  border: 1px solid rgba(16,78,139,.09);
  border-radius: 13px;
  background: #f7f9fb;
}

html[data-page="kontakt"] .contact-form-privacy i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--page-blue);
}

html[data-page="kontakt"] .contact-form-privacy p {
  margin: 1px 0 0;
  color: var(--page-muted);
  font-size: .77rem;
  line-height: 1.55;
}

html[data-page="kontakt"] .contact-form-privacy a {
  color: var(--page-blue);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

html[data-page="kontakt"] .contact-submit-note {
  max-width: 390px;
  color: var(--page-muted);
  font-size: .78rem;
  line-height: 1.5;
}

html[data-page="kontakt"] .contact-submit {
  min-width: 175px;
  justify-content: center;
  gap: 9px;
}

html[data-page="kontakt"] .contact-submit[disabled] {
  cursor: wait;
  opacity: .65;
  transform: none;
}

html[data-page="kontakt"] .clean-kontakt-form-feedback {
  display: none;
  margin-top: 18px;
  padding: 13px 15px;
  border-radius: 12px;
  font-size: .86rem;
  font-weight: 750;
  line-height: 1.5;
}

html[data-page="kontakt"] .clean-kontakt-form-feedback.sending,
html[data-page="kontakt"] .clean-kontakt-form-feedback.success,
html[data-page="kontakt"] .clean-kontakt-form-feedback.error { display: block; }
html[data-page="kontakt"] .clean-kontakt-form-feedback.sending { color: #38536d; background: #f1f5f8; border: 1px solid rgba(16,78,139,.12); }
html[data-page="kontakt"] .clean-kontakt-form-feedback.success { color: #235b3a; background: #edf8f1; border: 1px solid rgba(44,128,78,.22); }
html[data-page="kontakt"] .clean-kontakt-form-feedback.error { color: #873737; background: #fff1f1; border: 1px solid rgba(185,75,75,.22); }

html[data-page="kontakt"] .contact-help-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
  margin-top: 44px;
}

html[data-page="kontakt"] .contact-help-card {
  padding: 28px;
  border: 1px solid rgba(16,78,139,.10);
  border-radius: 20px;
  background: #fff;
}

html[data-page="kontakt"] .contact-help-card > span {
  display: block;
  margin-bottom: 20px;
  color: var(--page-gold);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .12em;
}

html[data-page="kontakt"] .contact-help-card h3 {
  margin: 0;
  color: var(--page-navy);
  font-size: 1.14rem;
  font-weight: 900;
}

html[data-page="kontakt"] .contact-help-card p {
  margin: 12px 0 0;
  color: var(--page-muted);
  font-size: .9rem;
  line-height: 1.68;
}

html[data-page="kontakt"] .contact-final-section .page-section-title span { color: var(--page-gold); }
html[data-page="kontakt"] .contact-final-section .page-cta-actions { align-self: center; }

@media (max-width: 1050px) {
  html[data-page="kontakt"] .contact-quick-grid { grid-template-columns: 1fr; }
  html[data-page="kontakt"] .contact-main-grid { grid-template-columns: 1fr; }
  html[data-page="kontakt"] .contact-side-card { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 26px; }
  html[data-page="kontakt"] .contact-next-steps { margin-top: 0; padding-top: 0; padding-left: 26px; border-top: 0; border-left: 1px solid rgba(16,78,139,.10); }
}

@media (max-width: 900px) {
  html[data-page="kontakt"] .contact-topic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html[data-page="kontakt"] .contact-help-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  html[data-page="kontakt"] .contact-hero { padding-bottom: 98px; }
  html[data-page="kontakt"] .contact-quick-section { margin-top: -42px; }
  html[data-page="kontakt"] .contact-quick-card { min-height: 98px; padding: 17px; grid-template-columns: 46px minmax(0,1fr) auto; gap: 12px; }
  html[data-page="kontakt"] .contact-quick-icon { width: 44px; height: 44px; }
  html[data-page="kontakt"] .contact-quick-card strong { font-size: .92rem; }
  html[data-page="kontakt"] .contact-topic-grid { grid-template-columns: 1fr; }
  html[data-page="kontakt"] .contact-topic-card { min-height: 0; }
  html[data-page="kontakt"] .contact-side-card { display: block; }
  html[data-page="kontakt"] .contact-next-steps { margin-top: 26px; padding-top: 24px; padding-left: 0; border-top: 1px solid rgba(16,78,139,.10); border-left: 0; }
  html[data-page="kontakt"] .contact-form-card,
  html[data-page="kontakt"] .contact-side-card { padding: 23px 19px; border-radius: 20px; }
  html[data-page="kontakt"] .contact-form-head { display: block; }
  html[data-page="kontakt"] .contact-required-note { display: block; margin-top: 8px; }
  html[data-page="kontakt"] .contact-submit { width: 100%; }
}

/* Kontaktseite – kompakte Variante */
html[data-page="kontakt"] {
  --contact-navy: #10304e;
  --contact-gold: #c69a57;
  --contact-bg: #fcf7ef;
  --contact-card: #ffffff;
  --contact-soft: #f8efe1;
  --contact-line: #d9c9b0;
  --contact-text: #365571;
}

/* Kontakt-Hero im gleichen Stil wie die übrigen Unterseiten. */
html[data-page="kontakt"] .contact-page-hero {
  min-height: 0;
  padding-top: 112px;
  padding-bottom: 64px;
}

html[data-page="kontakt"] .contact-page-hero .page-hero-grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr);
  gap: clamp(20px, 3vw, 40px);
}

html[data-page="kontakt"] .contact-page-hero .page-title {
  max-width: 690px;
}

html[data-page="kontakt"] .contact-page-hero-frame img {
  opacity: 1;
  object-position: center 30%;
}

html[data-page="kontakt"] .contact-page-hero-visual::after {
  border-color: rgba(216,183,127,.22);
}

@media (max-width: 1050px) {
  html[data-page="kontakt"] .contact-page-hero .page-hero-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  html[data-page="kontakt"] .contact-page-hero {
    padding-top: 104px;
    padding-bottom: 58px;
  }
}

@media (max-width: 620px) {
  html[data-page="kontakt"] .contact-page-hero {
    padding-top: 96px;
    padding-bottom: 48px;
  }
}

html[data-page="kontakt"] .contact-mini-hero {
  padding: 122px 0 34px;
  background: var(--contact-navy);
}

html[data-page="kontakt"] .contact-mini-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
  gap: 48px;
  align-items: center;
}

html[data-page="kontakt"] .contact-mini-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--contact-gold);
}

html[data-page="kontakt"] .contact-mini-hero-copy h1 {
  margin: 0 0 12px;
  font-size: clamp(2.15rem, 4vw, 4rem);
  line-height: .98;
  letter-spacing: -.04em;
  color: #ffffff;
}

html[data-page="kontakt"] .contact-mini-hero-copy p {
  max-width: 650px;
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .76);
}

html[data-page="kontakt"] .contact-mini-hero-visual {
  display: flex;
  justify-content: flex-end;
}

html[data-page="kontakt"] .contact-mini-portrait {
  display: block;
  width: min(100%, 430px);
  height: 230px;
  object-fit: cover;
  object-position: center 27%;
  border-radius: 22px;
  box-shadow: 0 16px 34px rgba(0, 20, 40, .08);
}

html[data-page="kontakt"] .contact-compact-section {
  padding: 64px 0 96px;
  background:
    radial-gradient(circle at 92% 8%, rgba(198,154,87,.13), transparent 28%),
    linear-gradient(180deg, #fffaf2 0%, var(--contact-bg) 100%);
}

/* Schrift im hellen Kontaktbereich bewusst dunkelblau/gold statt schwarz. */
html[data-page="kontakt"] .contact-compact-section {
  color: var(--contact-navy);
}

html[data-page="kontakt"] .contact-compact-section h2,
html[data-page="kontakt"] .contact-compact-section h3,
html[data-page="kontakt"] .contact-compact-section strong,
html[data-page="kontakt"] .contact-compact-section label,
html[data-page="kontakt"] .contact-compact-section input,
html[data-page="kontakt"] .contact-compact-section textarea,
html[data-page="kontakt"] .contact-compact-section select {
  color: var(--contact-navy);
}

html[data-page="kontakt"] .contact-compact-section .contact-mini-eyebrow,
html[data-page="kontakt"] .contact-compact-section h2 span {
  color: var(--contact-gold);
}

html[data-page="kontakt"] .contact-compact-heading {
  margin-bottom: 34px;
}

html[data-page="kontakt"] .contact-compact-heading h2 {
  margin: 0;
  font-size: clamp(2.2rem, 4.3vw, 4.2rem);
  line-height: .96;
  letter-spacing: -.04em;
  color: var(--contact-navy);
}

html[data-page="kontakt"] .contact-compact-heading h2 span {
  color: var(--contact-gold);
}

html[data-page="kontakt"] .contact-compact-grid {
  display: grid;
  grid-template-columns: minmax(300px, 560px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

html[data-page="kontakt"] .contact-compact-card {
  padding: 30px;
  border-radius: 30px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(198,154,87,.18);
  box-shadow: 0 16px 38px rgba(0, 20, 40, .05);
}

html[data-page="kontakt"] .contact-compact-card h3 {
  margin: 0 0 26px;
  font-size: clamp(1.65rem, 2vw, 2.2rem);
  line-height: 1.05;
  color: var(--contact-navy);
}

html[data-page="kontakt"] .contact-compact-details {
  display: grid;
  gap: 14px;
}

html[data-page="kontakt"] .contact-details-person-photo {
  width: 112px;
  height: 112px;
  margin: -4px auto 8px;
  overflow: hidden;
  border: 3px solid rgba(198,154,87,.42);
  border-radius: 24px;
  background: #e5e5e7;
  box-shadow: 0 10px 24px rgba(0,20,40,.08);
}

html[data-page="kontakt"] .contact-details-person-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 27%;
}

html[data-page="kontakt"] .contact-detail-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 18px 16px;
  border-radius: 20px;
  background: var(--contact-soft);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}

html[data-page="kontakt"] .contact-detail-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 20, 40, .06);
}

html[data-page="kontakt"] .contact-detail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--contact-gold);
  color: var(--contact-navy);
  font-size: 1rem;
}

html[data-page="kontakt"] .contact-detail-text {
  display: grid;
  gap: 4px;
}

html[data-page="kontakt"] .contact-detail-text strong {
  font-size: 1.02rem;
  color: var(--contact-navy);
}

html[data-page="kontakt"] .contact-detail-text small {
  font-size: 1rem;
  color: var(--contact-text);
}

html[data-page="kontakt"] .contact-compact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
}

html[data-page="kontakt"] .contact-compact-field {
  display: grid;
  gap: 8px;
}

html[data-page="kontakt"] .contact-compact-field.full {
  grid-column: 1 / -1;
}

html[data-page="kontakt"] .contact-compact-field label {
  font-size: 1rem;
  font-weight: 800;
  color: var(--contact-navy);
}

html[data-page="kontakt"] .contact-compact-field input,
html[data-page="kontakt"] .contact-compact-field textarea,
html[data-page="kontakt"] .contact-compact-field select {
  width: 100%;
  border: 1px solid var(--contact-line);
  border-radius: 16px;
  background: transparent;
  color: var(--contact-navy);
  padding: 14px 16px;
  font-size: 1rem;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

html[data-page="kontakt"] .contact-compact-field textarea {
  min-height: 148px;
  resize: vertical;
}

html[data-page="kontakt"] .contact-compact-field input:focus,
html[data-page="kontakt"] .contact-compact-field textarea:focus,
html[data-page="kontakt"] .contact-compact-field select:focus {
  border-color: rgba(198, 154, 87, .9);
  box-shadow: 0 0 0 4px rgba(198, 154, 87, .11);
}

html[data-page="kontakt"] .contact-compact-input-effect {
  width: 100%;
}

html[data-page="kontakt"] .contact-compact-input-effect::after {
  background: rgb(var(--toowie-blue-dark));
  pointer-events: none;
}

html[data-page="kontakt"] .contact-compact-counter {
  font-size: .95rem;
  color: var(--contact-text);
}

html[data-page="kontakt"] .contact-compact-counter.is-near-limit {
  color: #b45309;
}

/* Zeichenzaehler: beim Schreiben/Fokus gold und nach Eingabe gold behalten. */
html[data-page="kontakt"] .contact-compact-field:focus-within .contact-compact-counter,
html[data-page="kontakt"] .contact-compact-field:has(#clean-kontakt-message:valid) .contact-compact-counter {
  color: #ad7f3f;
  transition: color .18s ease;
}

html[data-page="kontakt"] .contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

html[data-page="kontakt"] .contact-compact-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-end;
  margin-top: 28px;
}

html[data-page="kontakt"] .contact-compact-footer p {
  max-width: 640px;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--contact-text);
}

html[data-page="kontakt"] .contact-compact-footer a {
  color: var(--contact-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

html[data-page="kontakt"] .contact-compact-submit {
  flex: 0 0 auto;
  min-width: 212px;
  border: 0;
  border-radius: 999px;
  background: var(--contact-gold);
  color: var(--contact-navy);
  padding: 16px 24px;
  font-size: 1rem;
  font-weight: 800;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  box-shadow: 0 14px 28px rgba(198, 154, 87, .24);
}

html[data-page="kontakt"] .contact-compact-submit:hover {
  transform: translateY(-2px);
}

html[data-page="kontakt"] .contact-compact-submit:disabled {
  opacity: .72;
  cursor: wait;
}

html[data-page="kontakt"] .clean-kontakt-form-feedback {
  margin-top: 18px;
  padding: 0 4px;
  font-size: .98rem;
}

html[data-page="kontakt"] .clean-kontakt-form-feedback.success {
  color: #166534;
}

html[data-page="kontakt"] .clean-kontakt-form-feedback.error {
  color: #b91c1c;
}

html[data-page="kontakt"] .clean-kontakt-form-feedback.sending {
  color: var(--contact-text);
}

html[data-page="kontakt"] .field-invalid {
  border-color: rgba(185, 28, 28, .5) !important;
  box-shadow: 0 0 0 4px rgba(185, 28, 28, .08) !important;
}

@media (max-width: 991.98px) {
  html[data-page="kontakt"] .contact-mini-hero {
    padding: 118px 0 22px;
  }

  html[data-page="kontakt"] .contact-mini-hero-grid,
  html[data-page="kontakt"] .contact-compact-grid {
    grid-template-columns: 1fr;
  }

  html[data-page="kontakt"] .contact-mini-hero-visual {
    justify-content: flex-start;
  }

  html[data-page="kontakt"] .contact-mini-portrait {
    width: min(100%, 420px);
    height: 220px;
  }

  html[data-page="kontakt"] .contact-compact-footer {
    flex-direction: column;
    align-items: stretch;
  }

  html[data-page="kontakt"] .contact-compact-submit {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 767.98px) {
  html[data-page="kontakt"] .contact-mini-hero {
    padding-top: 104px;
  }

  html[data-page="kontakt"] .contact-mini-hero-copy p,
  html[data-page="kontakt"] .contact-compact-footer p,
  html[data-page="kontakt"] .contact-detail-text small {
    font-size: .96rem;
  }

  html[data-page="kontakt"] .contact-mini-portrait {
    width: 100%;
    height: 210px;
    border-radius: 18px;
  }

  html[data-page="kontakt"] .contact-compact-card {
    padding: 22px;
    border-radius: 24px;
  }

  html[data-page="kontakt"] .contact-compact-form-grid {
    grid-template-columns: 1fr;
  }

  html[data-page="kontakt"] .contact-compact-heading {
    margin-bottom: 24px;
  }
}

/* Kontakt-Hero: Kontakt steht zuerst im Mittelpunkt; Portrait folgt weiter unten. */
html[data-page="kontakt"] .contact-page-hero .page-title > span {
  display: block;
}

html[data-page="kontakt"] .contact-page-hero-visual {
  min-height: 330px;
  justify-items: start;
}

html[data-page="kontakt"] .contact-page-hero-visual::before,
html[data-page="kontakt"] .contact-page-hero-visual::after {
  display: none;
}

html[data-page="kontakt"] .contact-hero-contact-card {
  position: relative;
  width: min(100%, 505px);
  padding: 30px;
  border: 1px solid rgba(216,183,127,.24);
  border-radius: 32px;
  background:
    radial-gradient(circle at 84% 9%, rgba(216,183,127,.16), transparent 27%),
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
  box-shadow: 0 28px 55px rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
  overflow: hidden;
}

html[data-page="kontakt"] .contact-hero-contact-card::after {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  right: -86px;
  bottom: -104px;
  border: 1px solid rgba(216,183,127,.18);
  border-radius: 50%;
  pointer-events: none;
}

html[data-page="kontakt"] .contact-hero-symbol {
  width: 116px;
  height: 116px;
  display: grid;
  place-items: center;
  margin-bottom: 23px;
  border-radius: 26px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 15px 35px rgba(0,0,0,.16);
}

html[data-page="kontakt"] .contact-hero-symbol img {
  width: 86px;
  height: 86px;
  display: block;
  object-fit: contain;
}

html[data-page="kontakt"] .contact-hero-card-copy > span {
  display: block;
  margin-bottom: 7px;
  color: #d8b77f;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

html[data-page="kontakt"] .contact-hero-card-copy > strong {
  display: block;
  color: #fff;
  font-size: clamp(1.55rem, 2.4vw, 2.15rem);
  line-height: 1.05;
  letter-spacing: -.035em;
}

html[data-page="kontakt"] .contact-hero-card-copy p {
  max-width: 390px;
  margin: 10px 0 0;
  color: rgba(255,255,255,.66);
  font-size: .96rem;
  line-height: 1.55;
}

html[data-page="kontakt"] .contact-hero-channels {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 25px;
}

html[data-page="kontakt"] .contact-hero-channel {
  min-width: 0;
  padding: 14px 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(4,17,31,.34);
}

html[data-page="kontakt"] .contact-hero-channel > i {
  display: inline-grid;
  width: 31px;
  height: 31px;
  place-items: center;
  margin-bottom: 10px;
  border-radius: 10px;
  background: rgba(216,183,127,.13);
  color: #d8b77f;
  font-size: .8rem;
}

html[data-page="kontakt"] .contact-hero-channel span,
html[data-page="kontakt"] .contact-hero-channel strong,
html[data-page="kontakt"] .contact-hero-channel small {
  display: block;
}

html[data-page="kontakt"] .contact-hero-channel strong {
  color: #fff;
  font-size: .82rem;
  line-height: 1.25;
}

html[data-page="kontakt"] .contact-hero-channel small {
  margin-top: 3px;
  color: rgba(255,255,255,.48);
  font-size: .68rem;
  line-height: 1.3;
}

/* Persönlicher Ansprechpartner bewusst nach Kontaktdaten und Formular. */
html[data-page="kontakt"] .contact-person-panel {
  display: grid;
  grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr);
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
  margin-top: 48px;
  padding: 26px;
  border: 1px solid rgba(198,154,87,.18);
  border-radius: 30px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 16px 38px rgba(0,20,40,.045);
}

html[data-page="kontakt"] .contact-person-photo {
  min-height: 245px;
  overflow: hidden;
  border-radius: 23px;
  background: #e5e5e7;
}

html[data-page="kontakt"] .contact-person-photo img {
  width: 100%;
  height: 100%;
  min-height: 245px;
  display: block;
  object-fit: cover;
  object-position: center 27%;
}

html[data-page="kontakt"] .contact-person-copy {
  max-width: 680px;
  padding: 12px 12px 12px 0;
}

html[data-page="kontakt"] .contact-person-copy .contact-mini-eyebrow {
  margin-bottom: 10px;
  font-size: .76rem;
}

html[data-page="kontakt"] .contact-person-copy h3 {
  margin: 0;
  color: var(--contact-navy);
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.02;
  letter-spacing: -.04em;
}

html[data-page="kontakt"] .contact-person-copy h3 span {
  color: var(--contact-gold);
}

html[data-page="kontakt"] .contact-person-copy p {
  max-width: 650px;
  margin: 18px 0 0;
  color: var(--contact-text);
  font-size: 1rem;
  line-height: 1.65;
}

html[data-page="kontakt"] .contact-person-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
  margin-top: 21px;
  padding-top: 18px;
  border-top: 1px solid rgba(16,48,78,.09);
}

html[data-page="kontakt"] .contact-person-meta strong {
  color: var(--contact-navy);
  font-size: .96rem;
}

html[data-page="kontakt"] .contact-person-meta span {
  color: var(--contact-text);
  font-size: .9rem;
}

@media (max-width: 1050px) {
  html[data-page="kontakt"] .contact-page-hero-visual {
    min-height: 0;
    justify-items: center;
  }

  html[data-page="kontakt"] .contact-hero-contact-card {
    width: min(100%, 620px);
  }
}

@media (max-width: 767.98px) {
  html[data-page="kontakt"] .contact-hero-contact-card {
    padding: 23px;
    border-radius: 25px;
  }

  html[data-page="kontakt"] .contact-hero-symbol {
    width: 94px;
    height: 94px;
    border-radius: 21px;
  }

  html[data-page="kontakt"] .contact-hero-symbol img {
    width: 69px;
    height: 69px;
  }

  html[data-page="kontakt"] .contact-hero-channels {
    grid-template-columns: 1fr;
  }

  html[data-page="kontakt"] .contact-hero-channel {
    display: grid;
    grid-template-columns: 34px minmax(0,1fr);
    gap: 10px;
    align-items: center;
    padding: 11px 12px;
  }

  html[data-page="kontakt"] .contact-hero-channel > i {
    margin-bottom: 0;
  }

  html[data-page="kontakt"] .contact-person-panel {
    grid-template-columns: 1fr;
    margin-top: 34px;
    padding: 18px;
    border-radius: 24px;
  }

  html[data-page="kontakt"] .contact-person-photo,
  html[data-page="kontakt"] .contact-person-photo img {
    min-height: 220px;
  }

  html[data-page="kontakt"] .contact-person-copy {
    padding: 4px 4px 8px;
  }
}

/* Compact contact emblem: envelope and conversation in the site's octagon. */
html[data-page="kontakt"] .contact-page-hero-visual {
  display: grid;
  align-items: center;
  justify-items: center;
  overflow: visible;
}

html[data-page="kontakt"] .contact-hero-octagon {
  width: min(100%, 330px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 2px;
  background: #c69a57;
  clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%);
}

html[data-page="kontakt"] .contact-hero-octagon-inner {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: #ffffff;
  clip-path: inherit;
}

html[data-page="kontakt"] .contact-hero-logo {
  display: block;
  width: 74%;
  height: auto;
  object-fit: contain;
  object-position: center center;
  margin: 0 auto;
}

@media (max-width: 1050px) {
  html[data-page="kontakt"] .contact-hero-octagon {
    width: min(100%, 300px);
  }
}


/* Kontakt: Hero exakt auf dieselbe Inhaltsbreite wie „Kontakt aufnehmen“ ausrichten. */
@media (min-width: 981px) {
  html[data-page="kontakt"] body.toowie-subpage .contact-page-hero > .page-shell {
    width: min(1520px, calc(100% - 8px));
  }

  html[data-page="kontakt"] body.toowie-subpage .contact-page-hero .page-hero-grid > :first-child,
  html[data-page="kontakt"] body.toowie-subpage .contact-page-hero .page-hero-grid > .contact-page-hero-visual {
    left: 0;
    right: 0;
  }
}

@media (max-width: 767.98px) {
  html[data-page="kontakt"] .contact-page-hero-visual {
    justify-items: center;
  }

  html[data-page="kontakt"] .contact-hero-octagon {
    width: min(100%, 220px);
  }
  html[data-page="kontakt"] .contact-page-hero .page-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-page="kontakt"] .contact-page-hero .page-hero-grid > div {
    min-width: 0;
    width: 100%;
  }
  html[data-page="kontakt"] .contact-page-hero .page-title,
  html[data-page="kontakt"] .contact-page-hero .page-title > span {
    white-space: normal;
  }
}

/* Kontakt-Hero – ruhigere, ausgewogenere Komposition */
html[data-page="kontakt"] .contact-page-hero {
  min-height: 0;
  padding-top: 106px;
  padding-bottom: 48px;
}

@media (min-width: 981px) {
  html[data-page="kontakt"] body.toowie-subpage .contact-page-hero > .page-shell {
    width: min(1320px, calc(100% - 48px));
  }

  html[data-page="kontakt"] .contact-page-hero .page-hero-grid {
    grid-template-columns: minmax(0, 1.14fr) minmax(300px, .86fr);
    gap: clamp(42px, 5vw, 74px);
  }
}

html[data-page="kontakt"] body.toowie-subpage .contact-page-hero .page-title {
  max-width: 700px;
  font-size: clamp(48px, 4.25vw, 62px);
  line-height: .99;
}

html[data-page="kontakt"] body.toowie-subpage .contact-page-hero-subline {
  max-width: 640px;
  margin: -4px 0 10px;
  font-size: 18px;
}

html[data-page="kontakt"] body.toowie-subpage .contact-page-hero .page-hero-lead {
  max-width: 580px;
  font-size: 16px;
  line-height: 1.62;
}

html[data-page="kontakt"] .contact-page-hero .page-hero-actions {
  margin-top: 24px;
}

html[data-page="kontakt"] body.toowie-subpage .contact-page-hero .page-hero-points {
  margin-top: 20px;
  gap: 16px;
}

html[data-page="kontakt"] .contact-page-hero-visual {
  min-height: 285px;
}

html[data-page="kontakt"] .contact-hero-octagon {
  width: min(100%, 270px);
  padding: 1.5px;
  box-shadow: 0 18px 42px rgba(0, 20, 40, .14);
}

html[data-page="kontakt"] .contact-hero-octagon-inner {
  background: #0b2948;
}

html[data-page="kontakt"] .contact-hero-logo {
  width: 68%;
}

@media (max-width: 1050px) {
  html[data-page="kontakt"] .contact-hero-octagon {
    width: min(100%, 250px);
  }
}

@media (max-width: 900px) {
  html[data-page="kontakt"] .contact-page-hero {
    padding-top: 100px;
    padding-bottom: 50px;
  }

  html[data-page="kontakt"] .contact-page-hero-visual {
    min-height: 0;
    margin-top: 8px;
  }
}

@media (max-width: 620px) {
  html[data-page="kontakt"] .contact-page-hero {
    padding-top: 92px;
    padding-bottom: 42px;
  }

  html[data-page="kontakt"] body.toowie-subpage .contact-page-hero .page-title {
    font-size: clamp(39px, 11vw, 48px);
  }

  html[data-page="kontakt"] .contact-hero-octagon {
    width: min(100%, 205px);
  }
}


/* Kontakt-Hero: finale Headline-Zeile */
html[data-page="kontakt"] body.toowie-subpage .contact-page-hero .page-title {
  max-width: none;
  white-space: nowrap;
}

html[data-page="kontakt"] body.toowie-subpage .contact-page-hero .page-title > span {
  display: inline;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  html[data-page="kontakt"] body.toowie-subpage .contact-page-hero .page-title,
  html[data-page="kontakt"] body.toowie-subpage .contact-page-hero .page-title > span {
    white-space: normal;
  }
}


/* Kontakt: Hero und alle Bereiche darunter gleich breit halten. */
@media (min-width: 981px) {
  html[data-page="kontakt"] body.toowie-subpage .contact-compact-section > .page-shell {
    width: min(1320px, calc(100% - 48px));
  }
}


/* Kontaktkarte: Überschrift links, Ansprechpartner-Foto größer rechts. */
html[data-page="kontakt"] .contact-details-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  min-height: 150px;
  margin-bottom: 8px;
}

html[data-page="kontakt"] .contact-details-top h3 {
  margin: 4px 0 0;
}

html[data-page="kontakt"] .contact-details-top .contact-details-person-photo {
  flex: 0 0 150px;
  width: 150px;
  height: 150px;
  margin: 0;
  border-radius: 28px;
}

@media (max-width: 767.98px) {
  html[data-page="kontakt"] .contact-details-top {
    min-height: 126px;
    gap: 18px;
  }

  html[data-page="kontakt"] .contact-details-top .contact-details-person-photo {
    flex-basis: 126px;
    width: 126px;
    height: 126px;
    border-radius: 24px;
  }
}

@media (max-width: 420px) {
  html[data-page="kontakt"] .contact-details-top {
    min-height: 112px;
    gap: 14px;
  }

  html[data-page="kontakt"] .contact-details-top .contact-details-person-photo {
    flex-basis: 112px;
    width: 112px;
    height: 112px;
    border-radius: 22px;
  }
}

/* Kontaktbereich: klare Zweifarb-Headline, großzügigeres Portrait und gleich hohe Karten. */
html[data-page="kontakt"] .contact-compact-heading {
  margin-bottom: 34px;
}

html[data-page="kontakt"] .contact-compact-heading .contact-compact-title {
  margin: 0;
  font-size: clamp(2.2rem, 4.3vw, 4.2rem);
  line-height: .96;
  letter-spacing: -.04em;
  font-weight: 800;
}

html[data-page="kontakt"] .contact-compact-title-main {
  color: var(--contact-navy);
  font-weight: 900;
}

html[data-page="kontakt"] .contact-compact-title-accent {
  color: var(--contact-gold);
  font-weight: 800;
}

html[data-page="kontakt"] .contact-compact-grid {
  align-items: stretch;
}

html[data-page="kontakt"] .contact-compact-grid > .contact-compact-card {
  height: 100%;
}

/* Das größere Bild reicht weiter nach links in die Kopfzeile der Kontaktkarte. */
html[data-page="kontakt"] .contact-details-top {
  align-items: center;
  min-height: 178px;
  gap: 20px;
}

html[data-page="kontakt"] .contact-details-top h3 {
  flex: 0 1 auto;
  margin: 0;
}

html[data-page="kontakt"] .contact-details-top .contact-details-person-photo {
  flex: 0 0 178px;
  width: 178px;
  height: 178px;
  margin-left: auto;
  border-radius: 30px;
}

@media (max-width: 767.98px) {
  html[data-page="kontakt"] .contact-compact-heading .contact-compact-title {
    font-size: clamp(2.05rem, 9vw, 3.15rem);
  }

  html[data-page="kontakt"] .contact-details-top {
    min-height: 150px;
    gap: 16px;
  }

  html[data-page="kontakt"] .contact-details-top .contact-details-person-photo {
    flex-basis: 150px;
    width: 150px;
    height: 150px;
    border-radius: 26px;
  }
}

/* Bis 399 px bleibt „Kontakt“ links und das Portrait rechts nebeneinander. */
@media (max-width: 399px) {
  html[data-page="kontakt"] .contact-details-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 138px;
    gap: 12px;
  }

  html[data-page="kontakt"] .contact-details-top h3 {
    flex: 1 1 auto;
    min-width: 0;
  }

  html[data-page="kontakt"] .contact-details-top .contact-details-person-photo {
    flex: 0 0 138px;
    width: 138px;
    height: 138px;
    margin: 0 0 0 auto;
    border-radius: 24px;
  }
}

@media (max-width: 350px) {
  html[data-page="kontakt"] .contact-details-top .contact-details-person-photo {
    flex-basis: 122px;
    width: 122px;
    height: 122px;
  }
}


/* Technik-Kontaktformulare: Floating-Labels und Zeichenzähler bleiben nach Eingabe gold. */
.contact--navy-softgold.contact--home-layout.form--oval-blue .clean-kontakt-floating-label.has-content label:where([data-layout="subpage"], [data-layout="subpage"] *),
.contact--navy-softgold.contact--home-layout.form--oval-blue .clean-kontakt-floating-label-textarea.has-content label:where([data-layout="subpage"], [data-layout="subpage"] *),
.contact--navy-softgold.contact--home-layout #charCount.has-content:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #f3e4c9;
}

/* Technik-Kontaktformulare: Nachrichten-Label nach Eingabe sicher gold halten. */
.contact--navy-softgold.contact--home-layout.form--oval-blue .clean-kontakt-floating-label-textarea.has-content > label[for="clean-kontakt-message"]:where([data-layout="subpage"], [data-layout="subpage"] *),
.contact--navy-softgold.contact--home-layout.form--oval-blue #clean-kontakt-message:not(:placeholder-shown) + label[for="clean-kontakt-message"]:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #f3e4c9 !important;
}

/* Technik-Kontaktformulare: Datenschutz-Hinweis. */
.contact--navy-softgold.contact--home-layout .clean-kontakt-privacy-note:where([data-layout="subpage"], [data-layout="subpage"] *) {
  margin: 18px auto 2px;
  max-width: 680px;
  text-align: center;
  color: #c7d3df;
  font-size: .9rem;
  line-height: 1.55;
}

.contact--navy-softgold.contact--home-layout .clean-kontakt-privacy-note a:where([data-layout="subpage"], [data-layout="subpage"] *) {
  color: #f3e4c9;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Technik-Kontaktformulare: Zeichenzaehler wie auf der Startseite mittig statt linksbuendig. */
.contact--navy-softgold.contact--home-layout #charCount:where([data-layout="subpage"], [data-layout="subpage"] *) {
  display: block;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
}

/* ========================================================================== 
   Mobile guard <= 399px
   Bewahrt das bestehende Layout ab 400px und korrigiert nur echte
   Platzprobleme auf sehr kleinen Displays.
   ========================================================================== */
@media (max-width: 399px) {
  /* Grid-/Flex-Kinder dürfen auf schmalen Displays wirklich schrumpfen. */
  body.toowie-subpage .page-shell,
  body.toowie-subpage .page-hero-grid,
  body.toowie-subpage .page-hero-grid > *,
  body.toowie-subpage .page-section-heading-row,
  body.toowie-subpage .page-story-grid,
  body.toowie-subpage .page-split,
  body.toowie-subpage .page-cta-grid,
  body.toowie-subpage .service-phase-head,
  body.toowie-subpage .service-phase-head > *,
  body.toowie-subpage .service-feature-layout,
  body.toowie-subpage .service-feature-layout > *,
  body.toowie-subpage .service-feature-copy,
  body.toowie-subpage .service-feature-rail,
  body.toowie-subpage .tech-summary-grid,
  body.toowie-subpage .tech-summary-grid > * {
    min-width: 0 !important;
    max-width: 100%;
  }

  body.toowie-subpage .page-hero-grid > * {
    width: 100%;
  }

  /* Große Headlines dürfen erst unterhalb von 400px umbrechen. */
  body.toowie-subpage .page-title,
  body.toowie-subpage .page-hero.tech-service-hero .page-title,
  body.toowie-subpage .page-legal-hero h1,
  body.toowie-subpage .page-section-title,
  body.toowie-subpage .page-story-copy h2,
  body.toowie-subpage .service-phase-head h2,
  body.toowie-subpage .service-feature-copy h2,
  body.toowie-subpage .page-section > .page-shell > h2,
  body.toowie-subpage .page-cta h2,
  body.toowie-subpage .clean-kontakt-ueberschrift,
  body.toowie-subpage .clean-kontaktformular-ueberschrift,
  body.toowie-subpage .tech-overview-title,
  body.toowie-subpage .tech-summary-title,
  body.about-page .about-title,
  body.about-page .about-section-title {
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* Normale Technik-Unterseiten: Hero-Inhalt nicht breiter als der Screen. */
  body.toowie-subpage .page-hero:not(.tech-service-hero) .page-hero-copy,
  body.toowie-subpage .page-hero:not(.tech-service-hero) .page-hero-grid > div:first-child,
  body.toowie-subpage .page-hero:not(.tech-service-hero) .page-hero-actions,
  body.toowie-subpage .page-hero:not(.tech-service-hero) .page-hero-lead {
    min-width: 0 !important;
    width: 100%;
    max-width: 100%;
  }

  body.toowie-subpage .page-hero:not(.tech-service-hero) .page-hero-actions .page-btn {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    padding-left: 14px;
    padding-right: 14px;
    font-size: 12px;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
  }

  /* Vorteile im Hero bleiben lesbar und dürfen bei Bedarf zweizeilig werden. */
  body.toowie-subpage .page-hero .page-hero-points {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    font-size: clamp(11px, 3.1vw, 12.5px) !important;
  }

  body.toowie-subpage .page-hero .page-hero-points span {
    min-width: 0;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: break-word;
    line-height: 1.25;
  }

  /* Service-Hero: gleiche Optik, aber keine unlesbar kleinen Buttons. */
  body.toowie-subpage .page-hero.tech-service-hero .page-hero-actions .page-btn {
    min-width: 0;
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    font-size: clamp(11.5px, 3.3vw, 12.5px) !important;
    line-height: 1.2;
    white-space: normal !important;
    text-align: center;
  }

  /* Technik-Übersichtsseite: beide Hauptaktionen bleiben zweispaltig lesbar. */
  body.toowie-subpage .tech-overview-actions {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  body.toowie-subpage .tech-overview-actions .tech-overview-btn,
  body.toowie-subpage .tech-overview-actions .tech-overview-btn-home {
    min-width: 0;
    max-width: 100%;
    padding-left: 8px;
    padding-right: 8px;
    font-size: clamp(11px, 3.15vw, 12.5px) !important;
    line-height: 1.2;
    white-space: normal !important;
    text-align: center;
  }

  /* Startseite: bestehende Zweier-Reihe erhalten, Schrift aber lesbar halten. */
  .index-page .philosophy-home-actions .philosophy-btn {
    font-size: clamp(11px, 3.05vw, 12px) !important;
    line-height: 1.15;
  }

  .index-page .philosophy-path-item strong {
    font-size: clamp(10px, 2.8vw, 11px) !important;
    line-height: 1.2;
  }

  /* Lange Adressen, E-Mails und Links auf Rechtstext-Seiten dürfen umbrechen. */
  body.legal-page .page-legal-paper,
  body.legal-page .legal-section,
  body.legal-page .legal-section p,
  body.legal-page .legal-section li,
  body.legal-page .legal-section dd,
  body.legal-page .legal-section a {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

/* <=399px Feinabstimmung nach Grenzbreiten-Prüfung. */
@media (max-width: 399px) {
  /* Lange Rechtstitel bleiben ohne Abschneiden vollständig sichtbar. */
  body.legal-page .page-legal-page-heading h1 {
    max-width: 100%;
    font-size: clamp(25px, 7.2vw, 29px) !important;
    line-height: 1.05;
    white-space: normal !important;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  body.legal-page .page-legal-document-title {
    max-width: calc(100% - 98px);
    font-size: clamp(20px, 5.7vw, 23px);
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  body.legal-page .page-legal-document-logo {
    width: 90px;
  }

  body.legal-page .page-legal-document-logo img {
    width: 84px;
    max-width: 100%;
  }

  /* Service-Kacheln: lange deutsche Begriffe passen auch bei 320px sauber. */
  body.responsive-399-service .service-phase-card h3,
  body.software-service-page.responsive-399-service .service-phase-card h3 {
    font-size: clamp(12px, 3.45vw, 14px) !important;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  /* Drei lange Vorteilspunkte benötigen auf kleinen Displays zwei Spalten. */
  body.responsive-399-service .page-hero .page-hero-points {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    justify-content: stretch;
    gap: 8px 12px !important;
  }

  body.responsive-399-service .page-hero .page-hero-points span {
    width: 100%;
  }
}

@media (max-width: 340px) {
  /* Die horizontale 3-Schritt-Navigation der Startseite bleibt erhalten. */
  .index-page .philosophy-path {
    grid-template-columns: minmax(0, 1fr) 8px minmax(0, 1fr) 8px minmax(0, 1fr) !important;
    gap: 2px !important;
  }

  .index-page .philosophy-path-item[href] {
    gap: 3px !important;
  }

  .index-page .path-octagon {
    width: 22px !important;
    height: 22px !important;
    flex-basis: 22px !important;
    font-size: .52rem !important;
  }

  .index-page .philosophy-path-item strong {
    font-size: 9px !important;
  }

  .index-page .philosophy-path-link-arrow {
    display: none !important;
  }
}

@media (max-width: 399px) {
  body.managedservice-page .service-phase-card h3 {
    font-size: clamp(12px, 3.45vw, 14px) !important;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .index-page .philosophy-path-link-arrow {
    display: none !important;
  }
}

/* Extra schmale Displays: robuste Untergrenze ohne Layout-Bruch. */
@media (max-width: 299px) {
  body.toowie-subpage .page-card h3,
  body.toowie-subpage .page-link-card h3 {
    max-width: 100%;
    font-size: clamp(16px, 6.8vw, 19px);
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  body.toowie-subpage .tech-summary-cta-btn {
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
    line-height: 1.25;
    white-space: normal !important;
    text-align: center;
  }

  body.toowie-subpage .tech-constellation-card h3,
  body.toowie-subpage .tech-constellation-card h3 span {
    max-width: 100%;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  body.responsive-399-service .page-hero .page-hero-points {
    grid-template-columns: 1fr;
  }

  .index-page .philosophy-path-item[href] {
    gap: 2px !important;
  }

  .index-page .path-octagon {
    width: 18px !important;
    height: 18px !important;
    flex-basis: 18px !important;
    font-size: .47rem !important;
  }

  .index-page .philosophy-path-item strong {
    font-size: 8.5px !important;
  }

  .index-page .toowie-brand-step strong {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 259px) {
  .index-page .philosophy-path-item[href] {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  .index-page .philosophy-path-item > div {
    width: 100%;
  }
}

@media (max-width: 299px) {
  .index-page .toowie-product #toowie-identity .toowie-brand-step strong {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 279px) {
  body.toowie-subpage .tech-summary-features {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 259px) {
  .index-page .home-story-step h2 {
    max-width: 100%;
    font-size: clamp(22px, 9vw, 25px) !important;
    line-height: 1.08;
    white-space: normal !important;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

/* 2026-09-08: Startseite – Hero und Story-Schritte auf kleinen Displays. */
@media (max-width: 600px) and (min-width: 400px) {
  /* Die linke Hauptüberschrift früher verkleinern, damit sie nicht in die
     rechte TOOWIE-Grafik hineinragt. */
  .index-page .philosophy-home-title:where([data-page="index"], [data-page="index"] *) {
    font-size: clamp(1.18rem, 4.15vw, 1.55rem) !important;
  }
}

@media (max-width: 760px) {
  /* 01–04 bleiben links stehen; Fließtext bleibt in derselben rechten
     Textspalte wie Überschrift/Logo statt über die volle Breite zu laufen. */
  .index-page .home-story-step p:where([data-page="index"], [data-page="index"] *) {
    grid-column: 2 !important;
    max-width: 100%;
  }

  /* Schritt 04 erhält auf kleinen Displays dieselbe zweispaltige Logik
     wie die Schritte 01–03. */
  .index-page #wer-ist-toowie .home-story-step-inner:where([data-page="index"], [data-page="index"] *) {
    grid-template-columns: clamp(58px, 18vw, 120px) minmax(0, 1fr) !important;
    column-gap: clamp(24px, 7.6vw, 56px);
    row-gap: 0;
  }

  .index-page #wer-ist-toowie .home-story-step-number:where([data-page="index"], [data-page="index"] *) {
    display: block !important;
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
  }

  .index-page #wer-ist-toowie .home-story-step-logo:where([data-page="index"], [data-page="index"] *),
  .index-page #wer-ist-toowie .home-story-step-logo-fallback:where([data-page="index"], [data-page="index"] *) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: start;
  }

  .index-page #wer-ist-toowie .home-story-step p:where([data-page="index"], [data-page="index"] *) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start;
    margin-top: clamp(18px, 4vw, 28px);
  }
}

@media (max-width: 399px) {
  /* Auch auf sehr schmalen Displays 01–04 links neben Überschrift/Logo zeigen. */
  .index-page .home-story-step p:where([data-page="index"], [data-page="index"] *) {
    grid-column: 2 !important;
  }

  .index-page #wer-ist-toowie .home-story-step-inner:where([data-page="index"], [data-page="index"] *) {
    grid-template-columns: auto minmax(0, 1fr) !important;
    column-gap: 14px;
  }

  .index-page #wer-ist-toowie .home-story-step-number:where([data-page="index"], [data-page="index"] *) {
    display: block !important;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin-top: 0;
    font-size: clamp(2.7rem, 12vw, 3.35rem);
    line-height: .9;
    letter-spacing: -.06em;
  }

  .index-page #wer-ist-toowie .home-story-step-logo:where([data-page="index"], [data-page="index"] *),
  .index-page #wer-ist-toowie .home-story-step-logo-fallback:where([data-page="index"], [data-page="index"] *) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center;
  }

  .index-page #wer-ist-toowie .home-story-step p:where([data-page="index"], [data-page="index"] *) {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
}

/* 2026-09-08: Startseite – Story 01–04 auf kleinen Displays proportional skalieren.
   Die Desktop-Komposition bleibt erhalten: Zahl links, Inhalt rechts; Überschrift/Logo
   und Fließtext bleiben in derselben Spalte. Größen und Abstände skalieren gemeinsam. */
@media (max-width: 760px) {
  .index-page .home-story-step:where([data-page="index"], [data-page="index"] *) {
    padding: clamp(36px, 9vw, 68px) 4vw clamp(32px, 8vw, 61px) !important;
  }

  .index-page .home-story-step-inner:where([data-page="index"], [data-page="index"] *) {
    width: 92vw !important;
    max-width: none !important;
    margin-inline: auto !important;
    display: grid !important;
    grid-template-columns: clamp(56px, 15vw, 114px) minmax(0, 1fr) !important;
    column-gap: clamp(20px, 5vw, 38px) !important;
    row-gap: 0 !important;
    align-items: center !important;
  }

  .index-page .home-story-step-content:where([data-page="index"], [data-page="index"] *) {
    display: block !important;
    grid-column: 2 !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-left: clamp(10px, 2.6vw, 20px) !important;
  }

  .index-page .home-story-step-number:where([data-page="index"], [data-page="index"] *) {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    margin: 0 !important;
    font-size: clamp(56px, 15vw, 114px) !important;
    line-height: .76 !important;
    letter-spacing: -.085em !important;
  }

  .index-page .home-story-step-kicker:where([data-page="index"], [data-page="index"] *) {
    display: inline-flex !important;
    gap: clamp(5px, 1.25vw, 10px) !important;
    margin-bottom: clamp(7px, 1.75vw, 13px) !important;
    font-size: clamp(8px, 2vw, 13px) !important;
    letter-spacing: .12em !important;
  }

  .index-page .home-story-step-kicker:where([data-page="index"], [data-page="index"] *)::before {
    width: clamp(16px, 4vw, 28px) !important;
    height: clamp(1px, .25vw, 2px) !important;
  }

  .index-page .home-story-step h2:where([data-page="index"], [data-page="index"] *) {
    max-width: none !important;
    margin: 0 0 clamp(6px, 1.5vw, 12px) !important;
    font-size: clamp(22px, 5.5vw, 42px) !important;
    line-height: .97 !important;
    letter-spacing: -.055em !important;
  }

  .index-page .home-story-step p:where([data-page="index"], [data-page="index"] *) {
    grid-column: auto !important;
    grid-row: auto !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: clamp(11px, 2.75vw, 17px) !important;
    line-height: 1.65 !important;
  }

  .index-page #wer-ist-toowie .home-story-step-inner:where([data-page="index"], [data-page="index"] *) {
    grid-template-columns: clamp(56px, 15vw, 114px) minmax(0, 1fr) !important;
  }

  .index-page #wer-ist-toowie .home-story-step-number:where([data-page="index"], [data-page="index"] *) {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .index-page #wer-ist-toowie .home-story-step-kicker:where([data-page="index"], [data-page="index"] *) {
    display: inline-flex !important;
  }

  .index-page #wer-ist-toowie .home-story-step-logo:where([data-page="index"], [data-page="index"] *),
  .index-page #wer-ist-toowie .home-story-step-logo-fallback:where([data-page="index"], [data-page="index"] *) {
    width: min(28vw, 214px) !important;
    max-width: 100% !important;
    margin: 0 0 clamp(7px, 1.75vw, 13px) !important;
  }

  .index-page #wer-ist-toowie .home-story-step-logo-fallback:where([data-page="index"], [data-page="index"] *) {
    width: auto !important;
    font-size: clamp(22px, 5.5vw, 42px) !important;
  }
}


/* 2026-09-08: Startseite – blaue Hero-Bereiche 400–600px wirklich proportional.
   Unterüberschrift, Beschreibung, Buttons und Haken skalieren ohne feste
   Mindestschriftgroessen mit. Bei exakt 400px bleibt die zweispaltige
   Desktop-Komposition erhalten. */
@media (min-width: 400px) and (max-width: 600px) {
  .index-page .toowie-product #akquise-manager:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity:where([data-page="index"], [data-page="index"] *) {
    padding-top: 8.23vw !important;
  }

  /* Auch bei exakt 400px nicht in die gestapelte Smartphone-Variante wechseln. */
  .index-page .toowie-product #akquise-manager > .shell.hero-grid:where([data-page="index"], [data-page="index"] *) {
    width: calc(100% - clamp(20px, 3vw, 32px)) !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr) !important;
    gap: clamp(9px, 2vw, 22px) !important;
    align-items: center !important;
  }

  .index-page .toowie-product #it-systemhaus > .shell.hero-grid:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung > .shell.hero-grid:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity > .shell.hero-grid:where([data-page="index"], [data-page="index"] *) {
    width: min(1180px, calc(100% - 20px)) !important;
    display: grid !important;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) !important;
    gap: clamp(8px, 1.5vw, 18px) !important;
    align-items: center !important;
  }

  .index-page .toowie-product #akquise-manager .hero-copy:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .hero-copy:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-copy:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .hero-copy:where([data-page="index"], [data-page="index"] *) {
    display: block !important;
    min-width: 0 !important;
  }

  /* Hauptueberschriften bleiben in der bereits abgestimmten Skalierung. */
  .index-page .toowie-product #akquise-manager h1:where([data-page="index"], [data-page="index"] *) {
    margin: 0 0 2vw !important;
    font-size: 4.8vw !important;
    line-height: .98 !important;
  }

  .index-page .toowie-product #it-systemhaus h1:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung h1:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity h1:where([data-page="index"], [data-page="index"] *) {
    margin: 0 0 2vw !important;
    font-size: 4.05vw !important;
    line-height: .98 !important;
  }

  /* Keine rem/px-Untergrenzen: diese Texte schrumpfen jetzt mit der Breite. */
  .index-page .toowie-product #akquise-manager .hero-subline:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .hero-subline:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-subline:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .hero-subline:where([data-page="index"], [data-page="index"] *) {
    margin: 0 0 1.2vw !important;
    font-size: 1.65vw !important;
    line-height: 1.34 !important;
  }

  .index-page .toowie-product #akquise-manager .hero-lead:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .hero-lead:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-lead:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .hero-lead:where([data-page="index"], [data-page="index"] *) {
    margin: 0 !important;
    font-size: 1.32vw !important;
    line-height: 1.58 !important;
  }

  .index-page .toowie-product #akquise-manager .hero-actions:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .hero-actions:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-actions:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .hero-actions:where([data-page="index"], [data-page="index"] *) {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: .9vw !important;
    margin: 2vw 0 0 !important;
  }

  .index-page .toowie-product #akquise-manager .hero-actions .btn:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .hero-actions .btn:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-actions .btn:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .hero-actions .btn:where([data-page="index"], [data-page="index"] *) {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 0 !important;
    min-height: 3.6vw !important;
    margin: 0 !important;
    padding: 0 1.2vw !important;
    border-radius: .95vw !important;
    font-size: 1.05vw !important;
    line-height: 1.18 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .index-page .toowie-product #akquise-manager .hero-points:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .hero-points:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-points:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .hero-points:where([data-page="index"], [data-page="index"] *) {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: .9vw 1.4vw !important;
    margin: 2vw 0 0 !important;
    font-size: 1vw !important;
    line-height: 1.25 !important;
  }

  .index-page .toowie-product #akquise-manager .hero-points span:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .hero-points span:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-points span:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .hero-points span:where([data-page="index"], [data-page="index"] *) {
    width: auto !important;
    min-width: 0 !important;
    display: inline-flex !important;
    flex: 0 1 auto !important;
    align-items: center !important;
    gap: .5vw !important;
  }

  .index-page .toowie-product #akquise-manager .hero-points i:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .hero-points i:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-points i:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .hero-points i:where([data-page="index"], [data-page="index"] *) {
    font-size: inherit !important;
  }

  /* Die rechte Ueberschrift (z. B. „IT-Ausstattung“) darf ebenfalls nicht
     an einer Mindestgroesse haengen und skaliert innerhalb ihrer Box mit. */
  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *) {
    font-size: min(4.6cqh, 6.2cqw) !important;
    line-height: 1.06 !important;
  }
}

/* 2026-09-08: Startseite – rechte Browser-Boxen 400–600px ebenfalls proportional.
   Nicht nur der linke Text, sondern auch die Demo-Fenster skalieren jetzt in ihrer
   Hoehe und mit ihren Innenabstaenden anhand der tatsaechlichen Fensterbreite/-hoehe. */
@media (min-width: 400px) and (max-width: 600px) {
  .index-page .toowie-product #akquise-manager .hero-visual:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .capability-visual:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-visual:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-visual:where([data-page="index"], [data-page="index"] *) {
    min-height: 0 !important;
    align-self: center !important;
  }

  .index-page .toowie-product #akquise-manager .hero-browser:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .capability-browser:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-browser:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-browser:where([data-page="index"], [data-page="index"] *) {
    container-type: inline-size;
    min-height: 0 !important;
  }

  /* Browserkopf skaliert mit der Breite des Demo-Fensters statt mit festen px-Minima. */
  .index-page .toowie-product #akquise-manager .browser-bar:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .browser-bar:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .browser-bar:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .browser-bar:where([data-page="index"], [data-page="index"] *) {
    height: 6.2cqw !important;
    min-height: 0 !important;
    gap: 1.7cqw !important;
    padding: 0 1.9cqw !important;
  }

  .index-page .toowie-product #akquise-manager .browser-dots:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .browser-dots:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .browser-dots:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .browser-dots:where([data-page="index"], [data-page="index"] *) {
    gap: .75cqw !important;
  }

  .index-page .toowie-product #akquise-manager .browser-dots i:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .browser-dots i:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .browser-dots i:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .browser-dots i:where([data-page="index"], [data-page="index"] *) {
    width: 1.05cqw !important;
    height: 1.05cqw !important;
  }

  .index-page .toowie-product #akquise-manager .browser-label:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .browser-label:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .browser-label:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .browser-label:where([data-page="index"], [data-page="index"] *) {
    font-size: 1.35cqw !important;
  }

  .index-page .toowie-product #akquise-manager .live-pill:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .capability-scroll-hint:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-scroll-hint:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-scroll-hint:where([data-page="index"], [data-page="index"] *) {
    font-size: 1.15cqw !important;
    padding: .7cqw 1.1cqw !important;
  }

  /* Akquise-Demo: gleiche Logik wie Desktop – sichtbarer Ausschnitt statt der
     kompletten langen Screenshot-Hoehe. 92% der Browserbreite entspricht
     ungefaehr der Desktop-Proportion des Scrollfensters. */
  .index-page .toowie-product #akquise-manager .hero-scroll-area:where([data-page="index"], [data-page="index"] *) {
    height: 92cqw !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* IT / Website / TOOWIE: 580px Scrollhoehe auf ca. 752px Desktop-Browserbreite
     entspricht rund 77%. Dadurch bleibt die Vorschau bei 432–400px kompakt. */
  .index-page .toowie-product #it-systemhaus .capability-scroll-area:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-scroll-area:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-scroll-area:where([data-page="index"], [data-page="index"] *) {
    height: 77cqw !important;
    min-height: 0 !important;
  }

  /* Der Inhalt der rechten Infobox skaliert ohne feste Mindestgroessen mit der
     nun kleineren Box, damit das Verhaeltnis zur Desktopansicht erhalten bleibt. */
  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *) {
    padding: 3.8cqh 3.2cqw !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-content:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-content:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-content:where([data-page="index"], [data-page="index"] *) {
    padding-bottom: 10cqh !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-title-row:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-title-row:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-title-row:where([data-page="index"], [data-page="index"] *) {
    gap: 2.5cqh !important;
    margin-bottom: 2.4cqh !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-icon:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-icon:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-icon:where([data-page="index"], [data-page="index"] *) {
    flex-basis: min(9cqh, 12cqw) !important;
    width: min(9cqh, 12cqw) !important;
    height: min(9cqh, 12cqw) !important;
    font-size: min(3.5cqh, 4.5cqw) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *) {
    padding-bottom: 2cqh !important;
    font-size: min(5.8cqh, 8cqw) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .capability-slide-quote:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-quote:where([data-page="index"], [data-page="index"] *) {
    margin-bottom: 2.5cqh !important;
    font-size: min(3.2cqh, 4cqw) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *) {
    gap: 1.6cqh !important;
    margin-bottom: 1.8cqh !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *) {
    grid-template-columns: min(2.6cqh, 3cqw) minmax(0, 1fr) !important;
    gap: 1.8cqh !important;
    padding: 1.55cqh 2.4cqw !important;
    border-radius: 2.2cqh !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before,
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before,
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before {
    width: 1.4cqh !important;
    height: 1.4cqh !important;
    margin-top: 1.1cqh !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *) {
    margin-bottom: .45cqh !important;
    font-size: min(2.7cqh, 3.5cqw) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *) {
    font-size: min(2.4cqh, 3.1cqw) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-provider:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-provider:where([data-page="index"], [data-page="index"] *) {
    font-size: min(2.5cqh, 3.2cqw) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-cta:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-cta:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product .toowie-identity-hero .capability-slide:not(.toowie-meaning-slide) .capability-slide-cta:where([data-page="index"], [data-page="index"] *) {
    right: 3.2cqw !important;
    bottom: 3.2cqh !important;
    padding: 1.45cqh 3cqw !important;
    font-size: min(2.35cqh, 3cqw) !important;
  }
}

/* 2026-09-09: Startseite – blaue Bereiche als EIN gemeinsames Desktop-System skalieren.
   400px–1199px: keine separat erfundenen Mobile-Groessen mehr. Die 1180px-Desktop-
   Komposition ist die Referenz; Text, Abstaende, Buttons und Browser-Inhalt werden
   gemeinsam relativ zur aktuellen Shell-Breite kleiner. Unter 400px greift weiterhin
   das vorhandene Smartphone-Layout. */
@media (min-width: 400px) and (max-width: 1199px) {
  /* Die vier blauen Bereiche behalten bis 400px ihre Desktop-Komposition. */
  .index-page .toowie-product #akquise-manager:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity:where([data-page="index"], [data-page="index"] *) {
    padding-top: 7.8vw !important;
    padding-bottom: 7.63vw !important;
  }

  /* Diese Shell ist die gemeinsame Skalierungs-Referenz. 1180px = Desktop 100%. */
  .index-page .toowie-product #akquise-manager > .shell.hero-grid:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus > .shell.hero-grid:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung > .shell.hero-grid:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity > .shell.hero-grid:where([data-page="index"], [data-page="index"] *) {
    width: min(1180px, calc(100% - 20px)) !important;
    max-width: none !important;
    display: grid !important;
    align-items: center !important;
    container-type: inline-size;
  }

  .index-page .toowie-product #akquise-manager > .shell.hero-grid:where([data-page="index"], [data-page="index"] *) {
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr) !important;
    gap: 4.58vw !important;
  }

  .index-page .toowie-product #it-systemhaus > .shell.hero-grid:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung > .shell.hero-grid:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity > .shell.hero-grid:where([data-page="index"], [data-page="index"] *) {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) !important;
    gap: 3.56vw !important;
  }

  .index-page .toowie-product #akquise-manager .hero-copy:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .hero-copy:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-copy:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .hero-copy:where([data-page="index"], [data-page="index"] *) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  /* Linke Seite: exakt aus den Desktop-Pixelwerten auf 1180px Shell umgerechnet. */
  .index-page .toowie-product #akquise-manager h1:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus h1:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung h1:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity h1:where([data-page="index"], [data-page="index"] *) {
    max-width: none !important;
    margin: 0 0 2.03cqw !important;
    font-size: 5.76cqw !important;
    line-height: .98 !important;
    letter-spacing: -.058em !important;
  }

  .index-page .toowie-product #akquise-manager .hero-subline:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .hero-subline:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-subline:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .hero-subline:where([data-page="index"], [data-page="index"] *) {
    max-width: none !important;
    margin: -.68cqw 0 1.02cqw !important;
    font-size: 1.695cqw !important;
    line-height: 1.45 !important;
    letter-spacing: -.015em !important;
  }

  .index-page .toowie-product #akquise-manager .hero-lead:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .hero-lead:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-lead:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .hero-lead:where([data-page="index"], [data-page="index"] *) {
    max-width: none !important;
    margin: 0 !important;
    font-size: 1.525cqw !important;
    line-height: 1.65 !important;
  }

  .index-page .toowie-product #akquise-manager .hero-actions:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .hero-actions:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-actions:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .hero-actions:where([data-page="index"], [data-page="index"] *) {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: .847cqw !important;
    margin: 2.712cqw 0 0 !important;
  }

  .index-page .toowie-product #akquise-manager .hero-actions .btn:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .hero-actions .btn:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-actions .btn:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .hero-actions .btn:where([data-page="index"], [data-page="index"] *) {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 0 !important;
    min-height: 4.068cqw !important;
    margin: 0 !important;
    padding: 0 1.695cqw !important;
    border-radius: 1.102cqw !important;
    gap: .678cqw !important;
    font-size: 1.186cqw !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .index-page .toowie-product #akquise-manager .hero-points:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .hero-points:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-points:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .hero-points:where([data-page="index"], [data-page="index"] *) {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: .847cqw 1.525cqw !important;
    margin: 2.373cqw 0 0 !important;
    font-size: 1.017cqw !important;
    line-height: 1.25 !important;
  }

  .index-page .toowie-product #akquise-manager .hero-points span:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .hero-points span:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .hero-points span:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .hero-points span:where([data-page="index"], [data-page="index"] *) {
    width: auto !important;
    min-width: 0 !important;
    display: inline-flex !important;
    flex: 0 1 auto !important;
    align-items: center !important;
    gap: .508cqw !important;
  }

  /* Beide Browser-Typen skalieren ab jetzt mit derselben Shell-Referenz. */
  .index-page .toowie-product #akquise-manager .hero-visual:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .capability-visual:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-visual:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-visual:where([data-page="index"], [data-page="index"] *) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
  }

  .index-page .toowie-product #akquise-manager .hero-browser:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .capability-browser:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-browser:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-browser:where([data-page="index"], [data-page="index"] *) {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    transform: none !important;
    container-type: normal !important;
    border-radius: 1.864cqw !important;
  }

  .index-page .toowie-product #akquise-manager .browser-bar:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .browser-bar:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .browser-bar:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .browser-bar:where([data-page="index"], [data-page="index"] *) {
    height: 3.729cqw !important;
    gap: 1.186cqw !important;
    padding: 0 1.186cqw !important;
  }

  .index-page .toowie-product #akquise-manager .browser-dots:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .browser-dots:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .browser-dots:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .browser-dots:where([data-page="index"], [data-page="index"] *) {
    gap: .424cqw !important;
  }

  .index-page .toowie-product #akquise-manager .browser-dots i:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .browser-dots i:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .browser-dots i:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .browser-dots i:where([data-page="index"], [data-page="index"] *) {
    width: .678cqw !important;
    height: .678cqw !important;
  }

  .index-page .toowie-product #akquise-manager .browser-label:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .browser-label:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .browser-label:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .browser-label:where([data-page="index"], [data-page="index"] *) {
    font-size: .847cqw !important;
  }

  .index-page .toowie-product #akquise-manager .live-pill:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .capability-scroll-hint:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-scroll-hint:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-scroll-hint:where([data-page="index"], [data-page="index"] *) {
    font-size: .763cqw !important;
    padding: .424cqw .678cqw !important;
  }

  /* Akquise: 580px Desktop-Scrollflaeche proportional zur 1180px-Shell. */
  .index-page .toowie-product #akquise-manager .hero-scroll-area:where([data-page="index"], [data-page="index"] *) {
    height: 49.153cqw !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* IT / Website / TOOWIE: komplette 580px-Desktop-Vorschau proportional. */
  .index-page .toowie-product #it-systemhaus .capability-scroll-area:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-scroll-area:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-scroll-area:where([data-page="index"], [data-page="index"] *) {
    height: 49.153cqw !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide):where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide):where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide):where([data-page="index"], [data-page="index"] *) {
    height: 49.153cqw !important;
    min-height: 49.153cqw !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: 49.153cqw !important;
    grid-template-areas: "image info" !important;
    overflow: hidden !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-image:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-image:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-image:where([data-page="index"], [data-page="index"] *) {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border: 0 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-image img:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-image img:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-image img:where([data-page="index"], [data-page="index"] *) {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *) {
    grid-area: info !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 4.576cqw 2.881cqw 3.22cqw !important;
    border-top: 0 !important;
    border-left: 1px solid rgba(194,145,64,.24) !important;
    container-type: normal !important;
    overflow: hidden !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-content:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-content:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-content:where([data-page="index"], [data-page="index"] *) {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 0 7.288cqw !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-title-row:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-title-row:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-title-row:where([data-page="index"], [data-page="index"] *) {
    gap: 1.356cqw !important;
    margin: 0 0 1.695cqw !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-icon:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-icon:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-icon:where([data-page="index"], [data-page="index"] *) {
    flex: 0 0 4.915cqw !important;
    width: 4.915cqw !important;
    height: 4.915cqw !important;
    font-size: 1.871cqw !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *) {
    margin: 0 !important;
    padding-bottom: 1.186cqw !important;
    font-size: 2.875cqw !important;
    line-height: 1.08 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *)::after,
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *)::after,
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *)::after {
    width: 4.068cqw !important;
    height: .254cqw !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .capability-slide-quote:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-quote:where([data-page="index"], [data-page="index"] *) {
    margin: 0 0 1.525cqw !important;
    font-size: 1.410cqw !important;
    line-height: 1.6 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *) {
    gap: .847cqw !important;
    margin: 0 0 1.525cqw !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *) {
    grid-template-columns: 1.525cqw minmax(0, 1fr) !important;
    gap: 1.017cqw !important;
    padding: .847cqw 1.017cqw !important;
    border-radius: 1.186cqw !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before,
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before,
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before {
    width: .678cqw !important;
    height: .678cqw !important;
    margin-top: .593cqw !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *) {
    margin-bottom: .254cqw !important;
    font-size: 1.220cqw !important;
    line-height: 1.35 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *) {
    font-size: 1.125cqw !important;
    line-height: 1.45 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-provider:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-provider:where([data-page="index"], [data-page="index"] *) {
    font-size: 1.193cqw !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-cta:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-cta:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-cta:where([data-page="index"], [data-page="index"] *) {
    right: 2.881cqw !important;
    bottom: 2.881cqw !important;
    padding: .847cqw 1.356cqw !important;
    font-size: 1.139cqw !important;
  }
}

/* 2026-09-09: Startseite – rechte Demo-Fenster wirklich nach IHRER EIGENEN Breite skalieren.
   Referenz ist die stimmige Desktop-Darstellung (ca. 954px Browserbreite / 562px Inhalt).
   Dadurch bleiben Fensterhoehe, Typografie, Karten und Abstaende bis 400px im selben Verhaeltnis. */
@media (min-width: 400px) and (max-width: 1919px) {
  /* Die aeltere, spezifischere Titelregel nutzt cqh und erzeugt bei schmalen
     Fenstern zu viel Leerraum. Hier wie die uebrige Vorschau mit skalieren. */
  .index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity)
    .capability-slide:not(.toowie-meaning-slide) .capability-slide-title-row:where([data-page="index"], [data-page="index"] *) {
    column-gap: 1.68cqw !important;
    margin-bottom: 1.68cqw !important;
    transform: translateY(.336cqw);
  }

  .index-page .toowie-product :is(#it-systemhaus, #website-entwicklung)
    .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *) {
    transform: translateY(.28cqw);
  }

  .index-page .toowie-product #it-systemhaus .capability-browser:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-browser:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-browser:where([data-page="index"], [data-page="index"] *) {
    /* Alle cqw-Werte innerhalb des Fensters beziehen sich ab hier auf das Fenster selbst. */
    container-type: inline-size !important;
    min-height: 0 !important;
    border-radius: 2.306cqw !important;
  }

  .index-page .toowie-product #it-systemhaus .browser-bar:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .browser-bar:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .browser-bar:where([data-page="index"], [data-page="index"] *) {
    height: 4.612cqw !important;
    min-height: 0 !important;
    gap: 1.468cqw !important;
    padding: 0 1.468cqw !important;
  }

  .index-page .toowie-product #it-systemhaus .browser-dots:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .browser-dots:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .browser-dots:where([data-page="index"], [data-page="index"] *) {
    gap: .524cqw !important;
  }

  .index-page .toowie-product #it-systemhaus .browser-dots i:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .browser-dots i:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .browser-dots i:where([data-page="index"], [data-page="index"] *) {
    width: .839cqw !important;
    height: .839cqw !important;
  }

  .index-page .toowie-product #it-systemhaus .browser-label:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .browser-label:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .browser-label:where([data-page="index"], [data-page="index"] *) {
    font-size: 1.048cqw !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-scroll-hint:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-scroll-hint:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-scroll-hint:where([data-page="index"], [data-page="index"] *) {
    font-size: .943cqw !important;
    padding: .524cqw .839cqw !important;
  }

  /* 562 / 954 = 58.91%: exakt die Hoehenrelation der stimmigen Desktop-Vorschau. */
  .index-page .toowie-product #it-systemhaus .capability-scroll-area:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-scroll-area:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-scroll-area:where([data-page="index"], [data-page="index"] *) {
    height: 58.91cqw !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-scroll-area:where([data-page="index"], [data-page="index"] *)::-webkit-scrollbar,
  .index-page .toowie-product #website-entwicklung .capability-scroll-area:where([data-page="index"], [data-page="index"] *)::-webkit-scrollbar,
  .index-page .toowie-product #toowie-identity .capability-scroll-area:where([data-page="index"], [data-page="index"] *)::-webkit-scrollbar {
    width: .943cqw !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide):where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide):where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide):where([data-page="index"], [data-page="index"] *) {
    height: 58.91cqw !important;
    min-height: 58.91cqw !important;
    grid-template-columns: 50% 50% !important;
    grid-template-rows: 58.91cqw !important;
    grid-template-areas: "image info" !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-image:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-image:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-image:where([data-page="index"], [data-page="index"] *) {
    grid-area: image !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-image img:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-image img:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-image img:where([data-page="index"], [data-page="index"] *) {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel:where([data-page="index"], [data-page="index"] *) {
    grid-area: info !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 3.46cqw 3.25cqw 3.05cqw !important;
    display: flex !important;
    container-type: normal !important;
    overflow: hidden !important;
  }

  /* Kein zusaetzlicher reservierter Leerraum unter dem Inhalt: der CTA ist bereits eine Grid-Zeile. */
  .index-page .toowie-product #it-systemhaus .capability-slide-content:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-content:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-content:where([data-page="index"], [data-page="index"] *) {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    gap: 1.10cqw !important;
    overflow: hidden !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-content:has(> .capability-slide-quote):where([data-page="index"], [data-page="index"] *) {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-title-row:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-title-row:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-title-row:where([data-page="index"], [data-page="index"] *) {
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    gap: 1.68cqw !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-icon:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-icon:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-icon:where([data-page="index"], [data-page="index"] *) {
    flex: 0 0 6.08cqw !important;
    width: 6.08cqw !important;
    height: 6.08cqw !important;
    font-size: 2.31cqw !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *) {
    min-width: 0 !important;
    margin: 0 !important;
    padding-bottom: 1.47cqw !important;
    font-size: 3.30cqw !important;
    line-height: 1.08 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *)::after,
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *)::after,
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *)::after {
    width: 5.03cqw !important;
    height: .314cqw !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .capability-slide-quote:where([data-page="index"], [data-page="index"] *) {
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 1.74cqw !important;
    line-height: 1.45 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *) {
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.05cqw !important;
    overflow: hidden !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *) {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    grid-template-columns: 1.89cqw minmax(0, 1fr) !important;
    gap: 1.26cqw !important;
    padding: 1.05cqw 1.26cqw !important;
    border-radius: 1.47cqw !important;
    align-items: start !important;
    align-content: center !important;
    overflow: hidden !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before,
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before,
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *)::before {
    width: .839cqw !important;
    height: .839cqw !important;
    margin-top: .73cqw !important;
    box-shadow: 0 0 0 .524cqw rgba(194,145,64,.12) !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *) {
    margin: 0 0 .314cqw !important;
    font-size: 1.51cqw !important;
    line-height: 1.28 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *) {
    font-size: 1.39cqw !important;
    line-height: 1.38 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-provider:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-provider:where([data-page="index"], [data-page="index"] *) {
    font-size: 1.48cqw !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-cta:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-cta:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-cta:where([data-page="index"], [data-page="index"] *) {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    justify-self: end !important;
    align-self: end !important;
    margin: 0 !important;
    padding: 1.05cqw 1.68cqw !important;
    font-size: 1.41cqw !important;
    white-space: nowrap !important;
  }
}

/* 2026-09-09: Feinschliff fuer kleinere rechte Demo-Fenster.
   Die Desktop-Ansicht bleibt unveraendert. Unter 760px Browserbreite wird
   vor allem vertikaler Leerraum reduziert und fuer die Lesbarkeit genutzt. */
@container (max-width: 760px) {
  .index-page .toowie-product #it-systemhaus .capability-slide-content:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-content:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-content:where([data-page="index"], [data-page="index"] *) {
    gap: .58cqw !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *) {
    padding-bottom: .72cqw !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *)::after,
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *)::after,
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *)::after {
    bottom: 0 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #it-systemhaus .capability-slide-quote:where([data-page="index"], [data-page="index"] *) {
    margin-top: -.48cqw !important;
    font-size: 1.84cqw !important;
    line-height: 1.40 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-list:where([data-page="index"], [data-page="index"] *) {
    gap: .72cqw !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item:where([data-page="index"], [data-page="index"] *) {
    padding-top: .78cqw !important;
    padding-bottom: .78cqw !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-title:where([data-page="index"], [data-page="index"] *) {
    margin-bottom: .20cqw !important;
    font-size: 1.62cqw !important;
    line-height: 1.24 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-text:where([data-page="index"], [data-page="index"] *) {
    font-size: 1.50cqw !important;
    line-height: 1.32 !important;
  }
}

/* 2026-09-09: Kleines Demo-Fenster – Titelzeile kompakter und optisch zentriert.
   Bei schmalen Browser-Vorschauen bleibt das Icon exakt zur Titelzeile zentriert;
   der Abstand zwischen Titel und Beschreibung skaliert ohne uebergrossen Leerraum. */
@container (max-width: 760px) {
  .index-page .toowie-product #it-systemhaus .capability-slide-title-row:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-title-row:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-title-row:where([data-page="index"], [data-page="index"] *) {
    display: flex !important;
    align-items: center !important;
    gap: 1.25cqw !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-content:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-content:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-content:where([data-page="index"], [data-page="index"] *) {
    row-gap: .42cqw !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *) {
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *)::after,
  .index-page .toowie-product #website-entwicklung .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *)::after,
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *)::after {
    bottom: -.55cqw !important;
  }

  .index-page .toowie-product #it-systemhaus .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #website-entwicklung .capability-slide-summary:where([data-page="index"], [data-page="index"] *),
  .index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-summary:where([data-page="index"], [data-page="index"] *) {
    margin-top: 0 !important;
  }
}

/* Kommunikation in der Markengrafik horizontal zur Mitte ausrichten. */
.index-page .toowie-product #toowie-identity .toowie-brand-chip-dialog:where([data-page="index"], [data-page="index"] *) {
  left: 50% !important;
  right: auto !important;
  translate: -50% 0;
  bottom: 8% !important;
}

/* Einheitlicher Abstand zwischen Titel und Beschreibung in allen Leistungskarten. */
.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity)
  .capability-slide:not(.toowie-meaning-slide) .capability-slide-title-row:where([data-page="index"], [data-page="index"] *) {
  margin: 0 0 .7cqw !important;
  transform: none;
}
.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity)
  .capability-slide:not(.toowie-meaning-slide) h3:where([data-page="index"], [data-page="index"] *) {
  transform: none;
}
.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity)
  .capability-slide:not(.toowie-meaning-slide) .capability-slide-summary:where([data-page="index"], [data-page="index"] *) {
  margin-top: 0 !important;
}
.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity)
  .capability-slide:not(.toowie-meaning-slide) .capability-slide-content:where([data-page="index"], [data-page="index"] *) {
  row-gap: .7cqw !important;
}

/* TOOWIE: Grafik und Prozesskarten skalieren mit derselben Fensterbreite. */
@media (min-width: 400px) {
.index-page .toowie-product #toowie-identity .capability-browser { container-type: inline-size !important; }
.index-page .toowie-product #toowie-identity .capability-scroll-area { height: 58.91cqw !important; min-height: 0 !important; }
.index-page .toowie-product #toowie-identity .capability-slide { height: 58.91cqw !important; min-height: 58.91cqw !important; box-sizing: border-box; }
.index-page .toowie-product #toowie-identity :is(.capability-slide-panel, .capability-slide-content, .toowie-brand-stage) { container-type: normal !important; }
.index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) { grid-template-columns: 50% 50% !important; grid-template-rows: 58.91cqw !important; }
.index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel { padding: 3.46cqw 3.25cqw 3.05cqw !important; }
.index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-title { font-size: 1.51cqw !important; line-height: 1.28 !important; }
.index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-text { font-size: 1.39cqw !important; line-height: 1.38 !important; }
.index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-summary { font-size: 1.74cqw !important; line-height: 1.45 !important; }
.index-page .toowie-product #toowie-identity .toowie-meaning-slide { display: block !important; padding: 0 !important; }
.index-page .toowie-product #toowie-identity .toowie-meaning-slide .capability-slide-panel { height: 100% !important; width: 100% !important; padding: 0 !important; }
.index-page .toowie-product #toowie-identity .toowie-brand-stage { height: 100% !important; width: 100% !important; min-height: 0 !important; padding: 3.1cqw 3.6cqw 2.8cqw !important; grid-template-rows: auto minmax(0,1fr) auto !important; gap: 0 !important; box-sizing: border-box; }
.index-page .toowie-product #toowie-identity .toowie-brand-topline { display: flex !important; flex-direction: row !important; gap: 1.9cqw !important; padding-bottom: 1.47cqw !important; }
.index-page .toowie-product #toowie-identity .toowie-brand-kicker { font-size: 1.18cqw !important; gap: .94cqw !important; }
.index-page .toowie-product #toowie-identity .toowie-brand-kicker i { width: .84cqw !important; height: .84cqw !important; }
.index-page .toowie-product #toowie-identity .toowie-brand-topline-text { font-size: 1.31cqw !important; }
.index-page .toowie-product #toowie-identity .toowie-brand-logo-scene { min-height: 0 !important; }
.index-page .toowie-product #toowie-identity .toowie-brand-logo-shell { width: 50cqw !important; height: 25.9cqw !important; max-height: none !important; min-height: 0 !important; padding: 2.95cqw 3.58cqw !important; border-radius: 3.58cqw !important; }
.index-page .toowie-product #toowie-identity .toowie-brand-logo { width: 41cqw !important; max-width: 100% !important; height: auto !important; max-height: 78% !important; object-fit: contain !important; }
.index-page .toowie-product #toowie-identity .toowie-brand-chip { font-size: 1.18cqw !important; padding: .84cqw 1.26cqw !important; }
.index-page .toowie-product #toowie-identity .toowie-brand-chip::before { width: .63cqw !important; height: .63cqw !important; margin-right: .74cqw !important; }
.index-page .toowie-product #toowie-identity .toowie-brand-chip-tech { left: 8% !important; top: 26% !important; }
.index-page .toowie-product #toowie-identity .toowie-brand-chip-praxis { right: 7% !important; top: 31% !important; }
.index-page .toowie-product #toowie-identity .toowie-brand-ring-one { width: 59cqw !important; height: 29.5cqw !important; }
.index-page .toowie-product #toowie-identity .toowie-brand-ring-two { width: 69.5cqw !important; height: 36.8cqw !important; }
.index-page .toowie-product #toowie-identity .toowie-brand-journey { grid-template-columns: repeat(5,minmax(0,1fr)) !important; gap: .74cqw !important; padding: 1.79cqw 0 0 !important; }
.index-page .toowie-product #toowie-identity .toowie-brand-step { padding: 1.5cqw .2cqw 0 !important; text-align: center !important; }
.index-page .toowie-product #toowie-identity .toowie-brand-step b { font-size: 1.35cqw !important; }
.index-page .toowie-product #toowie-identity .toowie-brand-step strong { font-size: 1.45cqw !important; white-space: nowrap !important; }
.index-page .toowie-product #toowie-identity .toowie-brand-route { left: 6.6% !important; right: 6.6% !important; top: 2.1cqw !important; bottom: auto !important; width: auto !important; height: 1px !important; }
.index-page .toowie-product #toowie-identity .toowie-brand-logo-shell::before,
.index-page .toowie-product #toowie-identity .toowie-brand-logo-shell::after { width: 2.95cqw !important; height: 2.95cqw !important; }
}
@media (min-width: 400px) {
.index-page .toowie-product #toowie-identity .toowie-brand-stage { font-size: 1.68cqw !important; line-height: 1.4 !important; }
.index-page .toowie-product #toowie-identity .toowie-brand-step b { margin: 0 0 .42cqw !important; line-height: 1.2 !important; }
.index-page .toowie-product #toowie-identity .toowie-brand-step::before { width: .84cqw !important; height: .84cqw !important; border-width: .21cqw !important; box-shadow: 0 0 0 .53cqw rgba(198,155,90,.075) !important; }
.index-page .toowie-product #toowie-identity .toowie-brand-logo-shell::before { left: 1.79cqw !important; top: 1.79cqw !important; }
.index-page .toowie-product #toowie-identity .toowie-brand-logo-shell::after { right: 1.79cqw !important; bottom: 1.79cqw !important; }
.index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item { padding: 1.05cqw 1.26cqw !important; gap: 1.26cqw !important; grid-template-columns: 1.89cqw minmax(0,1fr) !important; border-radius: 1.47cqw !important; }
.index-page .toowie-product #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-list { gap: 1.05cqw !important; }
}

/* Einheitliche Schrift und Einrueckung der Vorteilskarten in allen drei Fenstern. */
@media (min-width: 400px) {
.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity) .capability-browser {
  container-type: inline-size !important;
}
.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity) .capability-slide:not(.toowie-meaning-slide) :is(.capability-slide-panel, .capability-slide-content) {
  container-type: normal !important;
}
/* Beschreibung direkt unter der Hauptueberschrift skaliert jetzt wie der restliche Fensterinhalt
   immer mit der tatsaechlichen Breite des rechten Demo-Fensters. */
.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity) .capability-slide:not(.toowie-meaning-slide) .capability-slide-summary {
  font-size: 1.74cqw !important;
  line-height: 1.4 !important;
}
.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity) .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-title {
  font-size: 1.8cqw !important;
  line-height: 1.25 !important;
  margin: 0 0 .3cqw !important;
}
.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity) .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-text {
  font-size: 1.6cqw !important;
  line-height: 1.35 !important;
}
.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity) .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item {
  padding: .65cqw !important;
  grid-template-columns: .8cqw minmax(0, 1fr) !important;
  gap: .5cqw !important;
}
.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity) .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item::before {
  width: .8cqw !important;
  height: .8cqw !important;
  margin-top: .7cqw !important;
  justify-self: center !important;
  box-shadow: 0 0 0 .5cqw rgba(194,145,64,.12) !important;
}
}

/* ========================================================================== 
   2026-09-09: Hero-Sicherheitsbereich fuer mittlere Desktopbreiten.
   Zwischen 981px und 1550px fehlt der seitliche Platz fuer die bewusst nach
   aussen versetzten Desktop-Elemente. In diesem Bereich bleiben alle Hero-
   Inhalte deshalb innerhalb ihrer jeweiligen Hero-Flaeche.
   ========================================================================== */
@media (min-width: 981px) and (max-width: 1550px) {
  /* Startseite: Text nicht links aus dem Hero schieben. */
  .index-page .philosophy-hero-copy:where([data-page="index"], [data-page="index"] *) {
    margin-left: 0 !important;
  }

  /* Allgemeine Technik-/Unterseiten: linke Textspalte und rechte Visuals
     innerhalb des Hero halten. */
  body.toowie-subpage .page-hero .page-hero-grid > :first-child:where([data-layout="subpage"], [data-layout="subpage"] *) {
    left: 0 !important;
  }

  body.toowie-subpage .page-hero .page-hero-grid > .page-hero-visual:not(.tech-service-hero-visual):where([data-layout="subpage"], [data-layout="subpage"] *) {
    right: 0 !important;
  }

  /* Technik-Uebersicht: gleiche Begrenzung wie bei den normalen Unterseiten. */
  body.toowie-subpage .tech-overview-hero .tech-overview-copy:where([data-layout="subpage"], [data-layout="subpage"] *) {
    left: 0 !important;
  }

  body.toowie-subpage .tech-overview-hero .tech-constellation:where([data-layout="subpage"], [data-layout="subpage"] *) {
    right: 0 !important;
  }

  /* Ueber uns: keine zusaetzliche Verschiebung an den Hero-Raendern. */
  body.about-page .about-company-hero .about-company-copy:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    left: 0 !important;
  }

  body.about-page .about-company-hero .about-company-logo:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    right: 0 !important;
  }
}

/* Auf "Ueber uns" wird das Logo oberhalb von 1200px sonst bis auf 135% der
   rechten Grid-Spalte vergroessert und kann bei mittleren Desktopbreiten am
   rechten Hero-Rand abgeschnitten werden. */
@media (min-width: 1201px) and (max-width: 1550px) {
  body.about-page .about-company-hero .about-company-logo img:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* 2026-09-09: Feinschliff mittlere Desktopbreiten 981–1550px. */
@media (min-width: 981px) and (max-width: 1550px) {
  /* Startseite: die untere Drei-Schritt-Navigation bleibt innerhalb des Heros. */
  .index-page .philosophy-path:where([data-page="index"], [data-page="index"] *) {
    width: min(1180px, calc(100% - 24px)) !important;
  }
  .index-page .philosophy-path-item:where([data-page="index"], [data-page="index"] *) {
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .index-page .philosophy-path-item > div:where([data-page="index"], [data-page="index"] *) {
    min-width: 0 !important;
  }
  .index-page .philosophy-path-item small:where([data-page="index"], [data-page="index"] *) {
    max-width: 100% !important;
    white-space: normal !important;
  }

  /* Technik-Uebersicht und Service-Heros: echte Seitenluft statt 6px Rand. */
  body.toowie-subpage .tech-overview-hero > .page-shell:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.managedservice-page .page-hero.tech-service-hero > .page-shell:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.infrastructure-page .page-hero.tech-service-hero > .page-shell:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.software-service-page .page-hero.tech-service-hero > .page-shell:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.website-showcase-page .page-hero.tech-service-hero > .page-shell:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: min(1440px, calc(100% - 48px)) !important;
  }

  /* IT-Betreuung, Infrastruktur und Website: rechte Motive nicht mehr abschneiden. */
  body.managedservice-page .page-hero.tech-service-hero .tech-service-hero-visual:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.infrastructure-page .page-hero.tech-service-hero .tech-service-hero-visual:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.website-showcase-page .page-hero.tech-service-hero .tech-service-hero-visual:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: 100% !important;
    margin-right: 0 !important;
  }

  body.managedservice-page .page-hero.tech-service-hero .tech-service-hero-art:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.infrastructure-page .page-hero.tech-service-hero .tech-service-hero-art:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.website-showcase-page .page-hero.tech-service-hero .tech-service-hero-art:where([data-layout="subpage"], [data-layout="subpage"] *),
  body.website-showcase-page .page-hero.tech-service-hero .tech-service-hero-art[src*="hero-websites"]:where([data-layout="subpage"], [data-layout="subpage"] *) {
    width: min(820px, 100%) !important;
    max-width: 100% !important;
  }
}


/* 2026-09-09: Startseite – Hero-Elemente im Bereich 981–1550px wieder auf die
   kompaktere Desktop-Groesse bringen, damit Badge, Buttons und die untere
   Drei-Schritt-Navigation optisch wie auf breiten Desktops wirken. */
@media (min-width: 981px) and (max-width: 1550px) {
  .index-page .philosophy-hero-eyebrow:where([data-page="index"], [data-page="index"] *) {
    min-height: 28px !important;
    padding: 5px 10px !important;
    gap: 7px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: .10em !important;
  }

  .index-page .philosophy-hero-eyebrow-dot:where([data-page="index"], [data-page="index"] *) {
    width: 6px !important;
    height: 6px !important;
    flex-basis: 6px !important;
    box-shadow: 0 0 0 4px rgba(34,197,94,.16) !important;
  }

  .index-page .philosophy-home-actions:where([data-page="index"], [data-page="index"] *) {
    gap: 8px !important;
    margin-top: 24px !important;
  }

  .index-page .philosophy-home-actions .philosophy-btn:where([data-page="index"], [data-page="index"] *) {
    min-height: 44px !important;
    padding: 0 18px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }

  .index-page .philosophy-path:where([data-page="index"], [data-page="index"] *) {
    margin-top: 38px !important;
    padding-top: 22px !important;
    gap: 14px !important;
  }

  .index-page .philosophy-path-item:where([data-page="index"], [data-page="index"] *) {
    gap: 10px !important;
  }

  .index-page .path-octagon:where([data-page="index"], [data-page="index"] *) {
    width: 40px !important;
    height: 40px !important;
    font-size: .68rem !important;
  }

  .index-page .philosophy-path-item strong:where([data-page="index"], [data-page="index"] *) {
    font-size: .94rem !important;
    line-height: 1.16 !important;
  }

  .index-page .philosophy-path-item small:where([data-page="index"], [data-page="index"] *) {
    margin-top: 2px !important;
    font-size: .74rem !important;
    line-height: 1.24 !important;
  }

  .index-page .philosophy-path-link-arrow:where([data-page="index"], [data-page="index"] *) {
    font-size: .76em !important;
    transform: translateY(-1px) !important;
  }
}


/* 2026-09-09: Startseite – unteren Leerraum des ersten Heros nur zwischen
   980px und 1550px weiter reduzieren. */
@media (min-width: 980px) and (max-width: 1550px) {
  .index-page .index-hero.philosophy-home-hero:where([data-page="index"], [data-page="index"] *) {
    min-height: auto !important;
    padding-bottom: 20px !important;
  }

  .index-page .philosophy-path:where([data-page="index"], [data-page="index"] *) {
    margin-bottom: 0 !important;
  }
}

/* 2026-09-09: IT-Systemhaus-Hero – linke Spalte unter 1200px proportional halten.
   Die rechte Capability-Box bleibt unveraendert. Text, Abstaende, Buttons und
   Vorteile skalieren mit der schmaleren linken Spalte, damit die Desktop-
   Komposition (insbesondere die zweizeilige Hauptueberschrift) erhalten bleibt. */
@media (min-width: 400px) and (max-width: 1199px) {
  .index-page .toowie-product #it-systemhaus h1:where([data-page="index"], [data-page="index"] *) {
    margin: 0 0 1.59cqw !important;
    font-size: 4.52cqw !important;
  }

  .index-page .toowie-product #it-systemhaus .hero-subline:where([data-page="index"], [data-page="index"] *) {
    margin: -.53cqw 0 .80cqw !important;
    font-size: 1.33cqw !important;
  }

  .index-page .toowie-product #it-systemhaus .hero-lead:where([data-page="index"], [data-page="index"] *) {
    font-size: 1.20cqw !important;
  }

  .index-page .toowie-product #it-systemhaus .hero-actions:where([data-page="index"], [data-page="index"] *) {
    width: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .66cqw !important;
    margin: 2.13cqw 0 0 !important;
  }

  .index-page .toowie-product #it-systemhaus .hero-actions .btn:where([data-page="index"], [data-page="index"] *) {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    min-height: 3.19cqw !important;
    padding: 0 1.33cqw !important;
    border-radius: .865cqw !important;
    gap: .53cqw !important;
    font-size: .93cqw !important;
    white-space: nowrap !important;
  }

  .index-page .toowie-product #it-systemhaus .hero-points:where([data-page="index"], [data-page="index"] *) {
    width: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: .66cqw 1.20cqw !important;
    margin: 1.86cqw 0 0 !important;
    font-size: .80cqw !important;
  }

  .index-page .toowie-product #it-systemhaus .hero-points span:where([data-page="index"], [data-page="index"] *) {
    width: auto !important;
    flex: 0 0 auto !important;
    gap: .40cqw !important;
  }
}

/* Solange das Ermöglichen-Badge sichtbar ist, bleibt auch sein Abstand zur
   Hauptueberschrift proportional zum Desktop. Unter 981px verschwindet das
   Badge wie bisher bewusst; dort bleibt der obere H1-Abstand deshalb bei 0. */
@media (min-width: 981px) and (max-width: 1199px) {
  .index-page .toowie-product #it-systemhaus .eyebrow:where([data-page="index"], [data-page="index"] *) {
    gap: .53cqw !important;
    padding: .46cqw .66cqw !important;
    font-size: .73cqw !important;
  }

  .index-page .toowie-product #it-systemhaus .eyebrow-dot:where([data-page="index"], [data-page="index"] *) {
    width: .46cqw !important;
    height: .46cqw !important;
    box-shadow: 0 0 0 .33cqw rgba(34,197,94,.16) !important;
  }

  .index-page .toowie-product #it-systemhaus h1:where([data-page="index"], [data-page="index"] *) {
    margin-top: 1.59cqw !important;
  }
}

/* 2026-09-09: Startseite – dieselbe linke Responsive-Skalierung jetzt fuer alle
   drei Capability-Bereiche. Unterhalb 981px verschwindet das Status-Badge wie
   bisher; den frei werdenden Raum nutzt die Hauptueberschrift fuer eine leicht
   groessere Darstellung. Die rechte Capability-Box bleibt unveraendert. */
@media (min-width: 400px) and (max-width: 1199px) {
  .index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity) h1:where([data-page="index"], [data-page="index"] *) {
    margin: 0 0 1.59cqw !important;
    font-size: 4.52cqw !important;
  }

  .index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity) .hero-subline:where([data-page="index"], [data-page="index"] *) {
    margin: -.53cqw 0 .80cqw !important;
    font-size: 1.33cqw !important;
  }

  .index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity) .hero-lead:where([data-page="index"], [data-page="index"] *) {
    font-size: 1.20cqw !important;
  }

  .index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity) .hero-actions:where([data-page="index"], [data-page="index"] *) {
    width: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .66cqw !important;
    margin: 2.13cqw 0 0 !important;
  }

  .index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity) .hero-actions .btn:where([data-page="index"], [data-page="index"] *) {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    min-height: 3.19cqw !important;
    padding: 0 1.33cqw !important;
    border-radius: .865cqw !important;
    gap: .53cqw !important;
    font-size: .93cqw !important;
    white-space: nowrap !important;
  }

  .index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity) .hero-points:where([data-page="index"], [data-page="index"] *) {
    width: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: .66cqw 1.20cqw !important;
    margin: 1.86cqw 0 0 !important;
    font-size: .80cqw !important;
  }

  .index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity) .hero-points span:where([data-page="index"], [data-page="index"] *) {
    width: auto !important;
    flex: 0 0 auto !important;
    gap: .40cqw !important;
  }
}

/* Badge ist ab 980px bewusst ausgeblendet. Dadurch kann die Ueberschrift in
   allen drei Bereichen etwas groesser werden, ohne die vertikale Komposition
   nach unten zu verschieben. */
@media (min-width: 400px) and (max-width: 980px) {
  .index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity) h1:where([data-page="index"], [data-page="index"] *) {
    font-size: 4.80cqw !important;
  }
}

/* Solange das Badge noch sichtbar ist, skaliert es in allen drei Bereichen
   identisch mit der linken Desktop-Spalte. */
@media (min-width: 981px) and (max-width: 1199px) {
  .index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity) .eyebrow:where([data-page="index"], [data-page="index"] *) {
    gap: .53cqw !important;
    padding: .46cqw .66cqw !important;
    font-size: .73cqw !important;
  }

  .index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity) .eyebrow-dot:where([data-page="index"], [data-page="index"] *) {
    width: .46cqw !important;
    height: .46cqw !important;
    box-shadow: 0 0 0 .33cqw rgba(34,197,94,.16) !important;
  }

  .index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity) h1:where([data-page="index"], [data-page="index"] *) {
    margin-top: 1.59cqw !important;
  }
}

/* 2026-09-09: Startseite – IT-Hauptueberschrift bei Tabletbreiten zweizeilig halten. */
@media (min-width: 400px) and (max-width: 980px) {
  .index-page .toowie-product #it-systemhaus h1:where([data-page="index"], [data-page="index"] *) {
    font-size: 4.52cqw !important;
  }
}

/* 2026-09-09: Akquise-Manager auf der Startseite – rechte Browserbox wie die
   drei anderen blauen Hero-Boxen nach ihrer EIGENEN Breite skalieren.
   Damit wird die Box bei kleineren Viewports nicht mehr ueberproportional hoch. */
@media (min-width: 400px) and (max-width: 1919px) {
  .index-page .toowie-product #akquise-manager .hero-browser:where([data-page="index"], [data-page="index"] *) {
    container-type: inline-size !important;
    min-height: 0 !important;
    border-radius: 2.306cqw !important;
  }

  .index-page .toowie-product #akquise-manager .browser-bar:where([data-page="index"], [data-page="index"] *) {
    height: 4.612cqw !important;
    min-height: 0 !important;
    gap: 1.468cqw !important;
    padding: 0 1.468cqw !important;
  }

  .index-page .toowie-product #akquise-manager .browser-dots:where([data-page="index"], [data-page="index"] *) {
    gap: .524cqw !important;
  }

  .index-page .toowie-product #akquise-manager .browser-dots i:where([data-page="index"], [data-page="index"] *) {
    width: .839cqw !important;
    height: .839cqw !important;
  }

  .index-page .toowie-product #akquise-manager .browser-label:where([data-page="index"], [data-page="index"] *) {
    font-size: 1.048cqw !important;
  }

  .index-page .toowie-product #akquise-manager .live-pill:where([data-page="index"], [data-page="index"] *) {
    font-size: .943cqw !important;
    padding: .524cqw .839cqw !important;
  }

  .index-page .toowie-product #akquise-manager .hero-scroll-area:where([data-page="index"], [data-page="index"] *) {
    height: 58.91cqw !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .index-page .toowie-product #akquise-manager .hero-scroll-area:where([data-page="index"], [data-page="index"] *)::-webkit-scrollbar {
    width: .943cqw !important;
  }
}



/* 2026-09-09: Finaler Abgleich Akquise-Hero Startseite
   - Linke Textspalte rechnet nun in denselben Groessen wie die drei anderen blauen Heroes.
   - Rechte Browser-Box wird wieder leicht vergroessert.
   - Die dezente Schraegstellung auf Desktop bleibt erhalten. */
@media (min-width: 400px) and (max-width: 1199px) {
  .index-page .toowie-product #akquise-manager h1:where([data-page="index"], [data-page="index"] *) {
    margin: 0 0 1.59cqw !important;
    font-size: 4.80cqw !important;
    line-height: .98 !important;
    letter-spacing: -.058em !important;
  }

  .index-page .toowie-product #akquise-manager .hero-subline:where([data-page="index"], [data-page="index"] *) {
    margin: -.53cqw 0 .80cqw !important;
    font-size: 1.33cqw !important;
    line-height: 1.45 !important;
  }

  .index-page .toowie-product #akquise-manager .hero-lead:where([data-page="index"], [data-page="index"] *) {
    font-size: 1.20cqw !important;
    line-height: 1.58 !important;
  }

  .index-page .toowie-product #akquise-manager .hero-actions:where([data-page="index"], [data-page="index"] *) {
    width: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .66cqw !important;
    margin: 2.13cqw 0 0 !important;
  }

  .index-page .toowie-product #akquise-manager .hero-actions .btn:where([data-page="index"], [data-page="index"] *) {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    min-height: 3.19cqw !important;
    padding: 0 1.33cqw !important;
    border-radius: .865cqw !important;
    gap: .53cqw !important;
    font-size: .93cqw !important;
    white-space: nowrap !important;
  }

  .index-page .toowie-product #akquise-manager .hero-points:where([data-page="index"], [data-page="index"] *) {
    width: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: .66cqw 1.20cqw !important;
    margin: 1.86cqw 0 0 !important;
    font-size: .80cqw !important;
  }

  .index-page .toowie-product #akquise-manager .hero-points span:where([data-page="index"], [data-page="index"] *) {
    width: auto !important;
    flex: 0 0 auto !important;
    gap: .40cqw !important;
  }
}

@media (min-width: 400px) and (max-width: 1919px) {
  .index-page .toowie-product #akquise-manager .hero-browser:where([data-page="index"], [data-page="index"] *) {
    width: 103% !important;
    max-width: none !important;
  }

  .index-page .toowie-product #akquise-manager .hero-scroll-area:where([data-page="index"], [data-page="index"] *) {
    height: 61.5cqw !important;
  }
}

@media (min-width: 400px) and (max-width: 1199px) {
  .index-page .toowie-product #akquise-manager .hero-browser:where([data-page="index"], [data-page="index"] *) {
    width: 103% !important;
    max-width: none !important;
    transform: perspective(1600px) rotateY(-3deg) rotateX(.85deg) !important;
    transform-origin: center left !important;
  }
}

@media (min-width: 1200px) {
  .index-page .toowie-product #akquise-manager .hero-browser:where([data-page="index"], [data-page="index"] *) {
    width: 103% !important;
    max-width: none !important;
    transform: perspective(1600px) rotateY(-4deg) rotateX(1deg) !important;
    transform-origin: center left !important;
  }
}


/* 2026-09-09: Startseite – Akquise-Hero unter 1200px mit mehr rechter Luft
   und deutlicherer Schraegstellung, damit der Effekt auch bei ~1064px sichtbar bleibt. */
@media (min-width: 761px) and (max-width: 1199px) {
  .index-page .toowie-product #akquise-manager .hero-visual:where([data-page="index"], [data-page="index"] *) {
    padding-right: clamp(18px, 3vw, 36px) !important;
  }

  .index-page .toowie-product #akquise-manager .hero-browser:where([data-page="index"], [data-page="index"] *) {
    width: 101.5% !important;
    max-width: none !important;
    transform: perspective(1600px) translateX(-10px) rotateY(-6deg) rotateX(1deg) !important;
    transform-origin: center left !important;
  }
}

@media (min-width: 400px) and (max-width: 760px) {
  .index-page .toowie-product #akquise-manager .hero-visual:where([data-page="index"], [data-page="index"] *) {
    padding-right: clamp(10px, 2.5vw, 18px) !important;
  }

  .index-page .toowie-product #akquise-manager .hero-browser:where([data-page="index"], [data-page="index"] *) {
    width: 100.5% !important;
    max-width: none !important;
    transform: perspective(1600px) translateX(-6px) rotateY(-4.5deg) rotateX(.85deg) !important;
    transform-origin: center left !important;
  }
}


/* 2026-09-09: Startseite – 02–04 Hero-Browser ebenfalls mit mehr rechter Luft
   und deutlicher Schraegstellung, passend zum Akquise-Block. */
@media (min-width: 761px) and (max-width: 1199px) {
  .index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity) .capability-visual:where([data-page="index"], [data-page="index"] *) {
    padding-right: clamp(18px, 3vw, 36px) !important;
    overflow: visible !important;
  }

  .index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity) .capability-browser:where([data-page="index"], [data-page="index"] *) {
    width: 101.5% !important;
    max-width: none !important;
    transform: perspective(1600px) translateX(-10px) rotateY(-6deg) rotateX(1deg) !important;
    transform-origin: center left !important;
  }
}

@media (min-width: 400px) and (max-width: 760px) {
  .index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity) .capability-visual:where([data-page="index"], [data-page="index"] *) {
    padding-right: clamp(10px, 2.5vw, 18px) !important;
    overflow: visible !important;
  }

  .index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity) .capability-browser:where([data-page="index"], [data-page="index"] *) {
    width: 100.5% !important;
    max-width: none !important;
    transform: perspective(1600px) translateX(-6px) rotateY(-4.5deg) rotateX(.85deg) !important;
    transform-origin: center left !important;
  }
}


/* 2026-09-09: Startseite – 02–04 Hero-Browser auch ab 1200px mit rechter Luft
   und derselben deutlichen Schraegstellung wie in den kleineren Viewports. */
@media (min-width: 1200px) {
  .index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity) .capability-visual:where([data-page="index"], [data-page="index"] *) {
    padding-right: clamp(24px, 2.4vw, 46px) !important;
    overflow: visible !important;
  }

  .index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity) .capability-browser:where([data-page="index"], [data-page="index"] *) {
    width: 103% !important;
    max-width: none !important;
    transform: perspective(1600px) translateX(-10px) rotateY(-6deg) rotateX(1deg) !important;
    transform-origin: center left !important;
  }
}

/* 2026-09-09: Startseite – Story 01–04 ohne Sprünge bei 760/761px und 980/981px.
   Zahl und Textabstand skalieren jetzt wirklich gemeinsam: Die Zahlenspalte verwendet
   dieselbe Größe wie die Zahl selbst. Der Abstand wird bei kleineren Viewports stärker
   reduziert, während die Position bei 1920px praktisch unverändert bleibt. */
.index-page .home-story-step-inner:where([data-page="index"], [data-page="index"] *) {
  --story-number-size: clamp(56px, 15vw, 208px);
  grid-template-columns: var(--story-number-size) minmax(0, 1fr) !important;
  column-gap: clamp(28px, calc(8vw - 34px), 110px) !important;
}

.index-page .home-story-step-number:where([data-page="index"], [data-page="index"] *) {
  font-size: var(--story-number-size) !important;
}

.index-page .home-story-step-content:where([data-page="index"], [data-page="index"] *) {
  padding-left: 0 !important;
}

.index-page .home-story-step h2:where([data-page="index"], [data-page="index"] *),
.index-page .home-story-step-logo-fallback:where([data-page="index"], [data-page="index"] *) {
  font-size: clamp(22px, min(6vw, calc(45.87px + 1.3191vw)), 71.2px) !important;
  font-weight: 780;
}

.index-page #wer-ist-toowie .home-story-step-logo:where([data-page="index"], [data-page="index"] *) {
  width: min(28vw, 340px) !important;
}

/* 2026-09-09: Startseite – Status-/Eyebrow-Badges bis einschließlich 1199px ausblenden.
   Bewusst ohne :where()-Abhängigkeit, damit die Regel auch unabhängig von data-page greift. */
@media (max-width: 1199px) {
  body.index-page .philosophy-home-hero .philosophy-hero-eyebrow,
  body.index-page .toowie-product .eyebrow {
    display: none !important;
  }
}

/* 2026-09-09: Startseiten-Hero bis 1199px nach ausgeblendetem Status-Badge.
   Der frei gewordene Platz oben wird genutzt, damit der Inhalt naeher an die
   Navigation rueckt. Gleichzeitig bekommt die untere Drei-Wege-Navigation
   wieder etwas mehr ruhigen blauen Abschlussabstand. */
@media (min-width: 400px) and (max-width: 1199px) {
  body.index-page .index-hero.philosophy-home-hero {
    padding-top: clamp(88px, 8vw, 96px) !important;
    padding-bottom: clamp(34px, 3.5vw, 44px) !important;
  }

  body.index-page .index-hero.philosophy-home-hero .philosophy-home-title {
    margin-top: 0 !important;
  }
}

/* 2026-09-09: Startseite – alle blauen Bereiche vertikal kompakter.
   Nur die Aussenluft oben/unten wird reduziert; Typografie, Grid und Visuals bleiben unveraendert. */

/* Oberster Startseiten-Hero: nicht mehr durch eine grosse Mindesthoehe aufziehen. */
body.index-page .index-hero.philosophy-home-hero {
  min-height: auto !important;
}

@media (max-width: 399px) {
  body.index-page .index-hero.philosophy-home-hero {
    padding-top: 86px !important;
    padding-bottom: 18px !important;
  }

  body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) {
    padding-top: 22px !important;
    padding-bottom: 20px !important;
  }
}

@media (min-width: 400px) and (max-width: 1199px) {
  body.index-page .index-hero.philosophy-home-hero {
    padding-top: clamp(80px, 7vw, 88px) !important;
    padding-bottom: clamp(22px, 2.4vw, 30px) !important;
  }

  body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) {
    padding-top: clamp(28px, 4.2vw, 50px) !important;
    padding-bottom: clamp(22px, 3.6vw, 42px) !important;
  }
}

@media (min-width: 1200px) {
  body.index-page .index-hero.philosophy-home-hero {
    padding-top: clamp(96px, 5.8vw, 110px) !important;
    padding-bottom: clamp(28px, 2vw, 38px) !important;
  }

  body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) {
    padding-top: clamp(38px, 2.5vw, 50px) !important;
    padding-bottom: clamp(30px, 2vw, 40px) !important;
  }
}

/* 2026-09-09: Startseite – mehr Luft zwischen fester Navigation und oberstem Hero. */
@media (max-width: 399px) {
  body.index-page .index-hero.philosophy-home-hero {
    padding-top: 108px !important;
  }
}

@media (min-width: 400px) and (max-width: 1199px) {
  body.index-page .index-hero.philosophy-home-hero {
    padding-top: clamp(108px, 9.2vw, 122px) !important;
  }
}

@media (min-width: 1200px) {
  body.index-page .index-hero.philosophy-home-hero {
    padding-top: clamp(126px, 7.2vw, 146px) !important;
  }
}

/* 2026-09-09: Dezenter, klickbarer Scroll-Hinweis in den vier blauen Startseiten-Bereichen. */
body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .browser-frame {
  position: relative;
}

body.index-page .toowie-product .home-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 12;
  width: 48px;
  height: 48px;
  padding: 7px 0 5px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid rgba(15, 41, 66, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 8px 24px rgba(15, 41, 66, .12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  opacity: .72;
  transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease, background .2s ease;
  animation: home-scroll-cue-float 1.8s ease-in-out infinite;
}

body.index-page .toowie-product .home-scroll-cue-chevron {
  width: 12px;
  height: 12px;
  border-right: 2px solid rgba(15, 41, 66, .72);
  border-bottom: 2px solid rgba(15, 41, 66, .72);
  transform: rotate(45deg);
  transition: width .2s ease, height .2s ease, border-width .2s ease, border-color .2s ease;
}

body.index-page .toowie-product .home-scroll-cue-chevron + .home-scroll-cue-chevron {
  margin-top: -5px;
  opacity: .58;
}

body.index-page .toowie-product .home-scroll-cue.is-near-bottom {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px) scale(.9);
  animation: none;
}

body.index-page .toowie-product .home-scroll-cue.is-hidden {
  display: none;
}

@keyframes home-scroll-cue-float {
  0%, 100% { margin-bottom: 0; }
  50% { margin-bottom: -5px; }
}

@media (prefers-reduced-motion: reduce) {
  body.index-page .toowie-product .home-scroll-cue {
    animation: none;
  }
}

/* 2026-09-10: Status-Pillen mit gruenem Punkt wie auf der Startseite bis
   einschliesslich 1199px ausblenden – auf Unterseiten einheitlich. */
@media (max-width: 1199px) {
  html[data-layout="subpage"] body.toowie-subpage .page-hero .page-eyebrow {
    display: none !important;
  }

  body.about-page .about-company-hero .about-kicker:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    display: none !important;
  }
}

/* Technik-Unterseiten: nach dem ausgeblendeten Badge die Ueberschrift direkt
   an der neuen Hero-Oberkante beginnen lassen. */
@media (min-width: 861px) and (max-width: 1199px) {
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  .page-hero.tech-service-hero .page-title {
    margin-top: 0 !important;
  }
}

/* 2026-09-10: Ueber-uns-Hero an die Abstaende und Typografie der Technik-Seite angleichen. */
body.about-page .about-company-hero:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
  min-height: auto !important;
}

@media (max-width: 860px) {
  body.about-page .about-company-hero:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    padding-top: 108px !important;
    padding-bottom: 36px !important;
  }

  body.about-page .about-company-hero .about-title:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    font-size: clamp(25px, 5.8vw, 44px) !important;
    line-height: 1.12 !important;
  }

  body.about-page .about-company-hero .about-subtitle:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    font-size: clamp(14px, 2.5vw, 18px) !important;
    line-height: 1.4 !important;
  }

  body.about-page .about-company-hero .about-lead:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    font-size: clamp(14px, 2.3vw, 17px) !important;
    line-height: 1.6 !important;
  }
}

/* 2026-09-17: Akquise-Hero-Callouts zwischen 400 und 860px vollstaendig
   innerhalb der rechten Visualspalte halten. Die Skalierung erfolgt deshalb
   von der rechten Kartenkante aus. */
@media (min-width: 400px) and (max-width: 860px) {
  html[data-page="index"] body.index-page .toowie-product #akquise-manager .float-card-call,
  html[data-page="index"] body.index-page .toowie-product #akquise-manager .float-card-flow,
  html[data-page="index"] body.index-page .toowie-product #akquise-manager .float-card-notes {
    left: auto !important;
    right: clamp(10px, 2vw, 18px) !important;
    transform-origin: top right !important;
  }
}

@media (min-width: 400px) and (max-width: 860px) {
  body.about-page .about-company-hero:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    padding-inline: 24px !important;
  }

  body.about-page .about-company-hero > .about-shell:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }
}

@media (min-width: 861px) and (max-width: 980px) {
  body.about-page .about-company-hero .about-title:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    font-size: clamp(1.28rem, 5.1vw, 3.25rem) !important;
  }

  body.about-page .about-company-hero .about-subtitle:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    font-size: clamp(.69rem, 1.55vw, 1.08rem) !important;
  }

  body.about-page .about-company-hero .about-lead:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    font-size: clamp(.62rem, 1.28vw, .98rem) !important;
  }
}

@media (min-width: 861px) and (max-width: 1199px) {
  body.about-page .about-company-hero:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    padding-top: max(88px, 8.854vw) !important;
    padding-bottom: clamp(42px, 5vw, 60px) !important;
  }
}

@media (min-width: 861px) and (max-width: 1300px) {
  body.about-page .about-company-hero > .about-shell:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    width: min(1180px, calc(100% - 48px)) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }
}

@media (min-width: 1200px) and (max-width: 1920px) {
  body.about-page .about-company-hero:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    padding-top: 8.854vw !important;
    padding-bottom: clamp(60px, 5vw, 78px) !important;
  }
}

@media (min-width: 1301px) and (max-width: 1920px) {
  html[data-page="ueber_uns"] {
    --about-hero-unit: calc(100vw / 1920);
  }

  body.about-page .about-company-hero > .about-shell:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    width: calc(1380 * var(--about-hero-unit)) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }
}

@media (min-width: 1921px) {
  body.about-page .about-company-hero:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    padding-top: 170px !important;
    padding-bottom: 78px !important;
  }

  body.about-page .about-company-hero > .about-shell:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    width: 1380px !important;
    max-width: none !important;
    margin-inline: auto !important;
  }
}

/* ========================================================================== */
/* 2026-09-14: Einheitliches Ueberschriften-Schema nach Startseite            */
/* Nur Typografie: keine Text-, Inhalts-, Abstands- oder Farbaenderungen.     */
/* ========================================================================== */

/* Desktop-Basis: entspricht der Typografie der Startseiten-Hauptbereiche. */
html[data-layout="subpage"] body.toowie-subpage :is(
  .page-hero h1.page-title,
  .tech-overview-hero h1.tech-overview-title,
  .about-company-hero h1.about-title,
  .page-legal-page-heading h1,
  .page-section-white h2.page-section-title,
  .page-section-soft h2.page-section-title,
  .service-phase-head h2,
  .service-feature-copy h2,
  .tech-overview-summary h2.tech-summary-title,
  .about-section-title,
  .about-contact-close h2,
  .page-section-dark h2.page-section-title,
  .page-cta h2,
  .clean-kontakt-section.bg--blue h2.clean-kontakt-ueberschrift,
  .clean-kontakt-section.bg--blue h2.clean-kontaktformular-ueberschrift
) {
  font-family: Inter, Arial, sans-serif !important;
  font-size: clamp(2.55rem, 4.15vw, 4.45rem) !important;
  font-weight: 780 !important;
  line-height: .97 !important;
  letter-spacing: -.055em !important;
}

/* 2026-09-17: Kontaktformular-Ueberschrift ("Unverbindlich anfragen") groesser
   als die uebrige Ueberschriften-Skala, auf Wunsch, nur diese Ueberschrift. */
.clean-kontakt-section.bg--blue h2.clean-kontaktformular-ueberschrift {
  font-size: clamp(3.05rem, 4.9vw, 5.3rem) !important;
}

html[data-layout="subpage"] body.toowie-subpage :is(
  .page-hero h1.page-title,
  .tech-overview-hero h1.tech-overview-title,
  .about-company-hero h1.about-title,
  .page-legal-page-heading h1,
  .page-section-white h2.page-section-title,
  .page-section-soft h2.page-section-title,
  .service-phase-head h2,
  .service-feature-copy h2,
  .tech-overview-summary h2.tech-summary-title,
  .about-section-title,
  .about-contact-close h2,
  .page-section-dark h2.page-section-title,
  .page-cta h2,
  .clean-kontakt-section.bg--blue h2.clean-kontakt-ueberschrift,
  .clean-kontakt-section.bg--blue h2.clean-kontaktformular-ueberschrift
) :is(span, strong) {
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

/* Tablet: gleiche Skalierung wie die Startseite zwischen Mobile und Desktop. */
@media (min-width: 861px) and (max-width: 980px) {
  html[data-layout="subpage"] body.toowie-subpage :is(
    .page-hero h1.page-title,
    .tech-overview-hero h1.tech-overview-title,
    .about-company-hero h1.about-title,
    .page-legal-page-heading h1,
    .page-section-white h2.page-section-title,
    .page-section-soft h2.page-section-title,
    .service-phase-head h2,
    .service-feature-copy h2,
    .tech-overview-summary h2.tech-summary-title,
    .about-section-title,
    .about-contact-close h2,
    .page-section-dark h2.page-section-title,
    .page-cta h2,
    .clean-kontakt-section.bg--blue h2.clean-kontakt-ueberschrift,
    .clean-kontakt-section.bg--blue h2.clean-kontaktformular-ueberschrift
  ) {
    font-size: clamp(2.55rem, 6vw, 4rem) !important;
  }

  .clean-kontakt-section.bg--blue h2.clean-kontaktformular-ueberschrift {
    font-size: clamp(3.05rem, 7vw, 4.8rem) !important;
  }
}

/* Hero-Ueberschriften: exakt die mobile Groessenlogik des Startseiten-Heros. */
@media (max-width: 860px) {
  html[data-layout="subpage"] body.toowie-subpage :is(
    .page-hero h1.page-title,
    .tech-overview-hero h1.tech-overview-title,
    .about-company-hero h1.about-title,
    .page-legal-page-heading h1
  ) {
    font-size: clamp(25px, 5.8vw, 44px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
  }

  /* Blaue/dunkle Bereiche: die auf der Startseite angehobene Groesse. */
  html[data-layout="subpage"] body.toowie-subpage :is(
    .page-section-dark h2.page-section-title,
    .page-cta h2,
    .clean-kontakt-section.bg--blue h2.clean-kontakt-ueberschrift,
    .clean-kontakt-section.bg--blue h2.clean-kontaktformular-ueberschrift
  ) {
    font-size: clamp(28px, 5.9vw, 47px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
  }

  .clean-kontakt-section.bg--blue h2.clean-kontaktformular-ueberschrift {
    font-size: clamp(34px, 7vw, 56px) !important;
  }
}

/* Weisse/helle Unterteilungen: Startseiten-Hierarchie auf Mobile. */
@media (min-width: 701px) and (max-width: 860px) {
  html[data-layout="subpage"] body.toowie-subpage :is(
    .page-section-white h2.page-section-title,
    .page-section-soft h2.page-section-title,
    .service-phase-head h2,
    .service-feature-copy h2,
    .tech-overview-summary h2.tech-summary-title,
    .about-section-title,
    .about-contact-close h2
  ) {
    font-size: clamp(2.55rem, 6vw, 4rem) !important;
  }
}

@media (max-width: 700px) {
  html[data-layout="subpage"] body.toowie-subpage :is(
    .page-hero h1.page-title,
    .tech-overview-hero h1.tech-overview-title,
    .about-company-hero h1.about-title,
    .page-legal-page-heading h1,
    .page-section-white h2.page-section-title,
    .page-section-soft h2.page-section-title,
    .service-phase-head h2,
    .service-feature-copy h2,
    .tech-overview-summary h2.tech-summary-title,
    .about-section-title,
    .about-contact-close h2,
    .page-section-dark h2.page-section-title,
    .page-cta h2,
    .clean-kontakt-section.bg--blue h2.clean-kontakt-ueberschrift,
    .clean-kontakt-section.bg--blue h2.clean-kontaktformular-ueberschrift
  ) {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif !important;
    font-weight: 900 !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
  }

  html[data-layout="subpage"] body.toowie-subpage :is(
    .page-section-white h2.page-section-title,
    .page-section-soft h2.page-section-title,
    .service-phase-head h2,
    .service-feature-copy h2,
    .tech-overview-summary h2.tech-summary-title,
    .about-section-title,
    .about-contact-close h2
  ) {
    font-size: clamp(27px, 8.5vw, 32px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
  }
}

/* Sehr schmale Displays: dieselben finalen Startseiten-Groessen. */
@media (max-width: 399px) {
  html[data-layout="subpage"] body.toowie-subpage :is(
    .page-hero h1.page-title,
    .tech-overview-hero h1.tech-overview-title,
    .about-company-hero h1.about-title,
    .page-legal-page-heading h1
  ) {
    font-size: clamp(27px, 8.5vw, 32px) !important;
  }

  html[data-layout="subpage"] body.toowie-subpage :is(
    .page-section-dark h2.page-section-title,
    .page-cta h2,
    .clean-kontakt-section.bg--blue h2.clean-kontakt-ueberschrift,
    .clean-kontakt-section.bg--blue h2.clean-kontaktformular-ueberschrift
  ) {
    font-size: clamp(27px, 7.6vw, 30px) !important;
  }

  .clean-kontakt-section.bg--blue h2.clean-kontaktformular-ueberschrift {
    font-size: clamp(33px, 9vw, 36px) !important;
  }
}

/* 2026-09-14: Ueber-uns-Hero 400–860px – wie <=399px mit statischem Logo
   im Textbereich; das animierte Hero-Logo wird in diesem Bereich ausgeblendet. */
@media (min-width: 400px) and (max-width: 860px) {
  body.about-page .about-company-hero .about-hero-grid:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  body.about-page .about-company-hero .about-company-copy:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    min-width: 0 !important;
    max-width: none !important;
  }

  body.about-page .about-company-hero .about-title:where([data-page="ueber_uns"], [data-page="ueber_uns"] *),
  body.about-page .about-company-hero .about-title span:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    white-space: nowrap !important;
  }

  body.about-page .about-company-hero .about-company-logo:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    display: none !important;
  }

  body.about-page .about-company-hero .about-company-logo-inline:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    display: block !important;
    width: min(100%, 280px) !important;
    margin: 14px auto 0 !important;
  }

  body.about-page .about-company-hero .about-company-logo-inline img:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    filter: drop-shadow(0 18px 28px rgba(0,0,0,.18));
    animation: none !important;
  }

  body.about-page .about-company-hero .about-subtitle:where([data-page="ueber_uns"], [data-page="ueber_uns"] *) {
    margin-top: 14px !important;
  }
}

/* index.html – IT-Systemhaus Tablet/Desktop-Angleichung v20260916-1
   Zwischen 400px und 980px bleibt die Browser-Vorschau optisch wie auf Desktop:
   echtes 50/50, Bild bis an die Spaltengrenze, weiße Feature-Karten und mehr
   Abstand zwischen Goldpunkt und Kartentext. */
@media (min-width: 400px) and (max-width: 980px) {
  html[data-page="index"] body.index-page .toowie-product #it-systemhaus .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: 100% !important;
    grid-template-areas: "image info" !important;
    column-gap: 0 !important;
  }

  html[data-page="index"] body.index-page .toowie-product #it-systemhaus .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) > .capability-slide-image {
    grid-area: image !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  html[data-page="index"] body.index-page .toowie-product #it-systemhaus .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) > .capability-slide-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  html[data-page="index"] body.index-page .toowie-product #it-systemhaus .capability-slide-feature-item {
    grid-template-columns: clamp(7px, .9vw, 10px) minmax(0, 1fr) !important;
    column-gap: clamp(10px, 1.25vw, 14px) !important;
    background: #fff !important;
  }

  html[data-page="index"] body.index-page .toowie-product #it-systemhaus .capability-slide-feature-item > div {
    min-width: 0 !important;
    padding-left: clamp(1px, .25vw, 3px) !important;
  }
}