:root{--bg:#f8f9fb;--white:#fff;--ink:#131922;--muted:#788191;--line:#e8ebf0;--blue:#426bfa;--blue2:#eff4ff;--sidebar:280px;--radius:19px;--shadow:0 10px 32px rgba(26,42,74,.035)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Arial,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #8fa9ff;outline-offset:3px}::selection{background:#d5e0ff} .app{min-height:100dvh}.side{position:fixed;inset:0 auto 0 0;width:var(--sidebar);z-index:40;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:27px 16px 25px;overflow:auto}.brand{display:block;padding:0 13px 25px}.brand img{display:block;width:188px;height:auto;max-width:100%;object-fit:contain}.brand-caption{font-size:10px;font-weight:800;letter-spacing:.27em;color:#858e9f;padding:12px 1px 0}.menu-label{font-size:11px;color:#9099aa;letter-spacing:.03em;font-weight:680;margin:31px 17px 12px}.menu-btn{display:flex;align-items:center;gap:14px;background:none;border:0;width:100%;text-align:left;min-height:48px;padding:12px 15px;border-radius:12px;font-size:13px;font-weight:570;color:#5b6575;transition:background .2s,color .2s}.menu-btn svg{width:19px;height:19px;color:#7e8a9e}.menu-btn:hover{background:#f6f8fd;color:#182032}.menu-btn.active{background:linear-gradient(105deg,#eaf0ff,#f1f5ff);color:#172a5a;font-weight:710}.menu-btn.active svg{color:var(--blue)}.side-bottom{margin-top:auto;padding:32px 15px 2px;border-top:1px solid var(--line);font-size:12px;color:#8b94a3;line-height:1.8}.side-bottom a{color:#3766f5;display:block}.main{margin-left:var(--sidebar);min-height:100vh}.top{height:78px;position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:20px;background:rgba(249,250,252,.9);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);padding:0 clamp(25px,3.3vw,62px)}.breadcrumbs{font-size:12px;color:#9aa1ad}.breadcrumbs strong{color:#263043;font-weight:650}.actions{display:flex;align-items:center;gap:24px}.online{display:flex;gap:9px;align-items:center;color:#737e90;font-size:12px;white-space:nowrap}.online:before{content:'';height:8px;width:8px;background:#26bf91;border-radius:100%}.service{background:#fff;border:1px solid var(--line);font-size:12px;font-weight:700;padding:12px 19px;border-radius:50px}.service:hover{border-color:#a8bcf8;color:var(--blue)}.mobile-trigger{display:none;border:0;background:transparent}.mobile-brand{display:none}.content{max-width:1630px;margin:auto;padding:42px clamp(22px,3.4vw,62px) 80px}.hero{position:relative;min-height:300px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 0 0;overflow:hidden}.hero-copy{position:relative;z-index:2;max-width:810px}.eyebrow{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:800;color:var(--blue);letter-spacing:.20em;text-transform:uppercase}.eyebrow:before{content:'';width:29px;height:2px;background:var(--blue)}h1{margin:25px 0 17px;font-size:clamp(44px,4.8vw,77px);font-weight:780;letter-spacing:-.071em;line-height:.99}h1 span{display:block;color:#8b919b;margin-top:5px}.lead{font-size:15px;line-height:1.8;color:#7a8391;max-width:720px;margin:0}.hero-art{position:relative;flex:0 0 320px;height:277px;margin:-18px 2px 0 0}.orbit{position:absolute;left:24px;top:0;width:275px;height:275px;border-radius:50%;border:1px solid #e5edff;box-shadow:inset 0 0 0 34px #f3f7ff60,0 0 75px 50px #e8efff70}.orbit:before,.orbit:after{content:'';position:absolute;border:1px dashed #dbe7ff;border-radius:50%;inset:35px}.orbit:after{inset:70px}.hero-core{position:absolute;top:80px;left:96px;width:134px;height:119px;border-radius:29px;background:#fff;box-shadow:0 15px 40px #8fb2fd33;transform:rotate(6deg);display:grid;place-items:center;border:1px solid #f0f3ff}.hero-core img{max-width:102px;width:85%;height:auto}.float{position:absolute;width:66px;height:66px;display:grid;place-items:center;border-radius:18px;background:#fff;color:#3d6dff;box-shadow:0 12px 25px #95b1ed29;border:1px solid #f0f3fe;transform:rotate(9deg)}.float svg{width:30px;height:30px}.float.one{top:15px;left:86px;transform:rotate(13deg)}.float.two{top:44px;right:2px;transform:rotate(11deg)}.float.three{top:156px;left:8px;transform:rotate(-12deg)}.float.four{top:197px;right:9px;transform:rotate(11deg)}.search{margin:20px 0 29px;max-width:900px;background:#fff;height:60px;display:flex;align-items:center;gap:15px;border:1px solid #e7ebf3;border-radius:17px;box-shadow:var(--shadow);padding:0 19px}.search svg{width:20px;height:20px;color:#788497}.search input{width:100%;min-width:0;border:0;background:transparent;font-size:14px;outline:0!important;color:var(--ink)}.search input::placeholder{color:#9aa3b1}.key{white-space:nowrap;font-size:11px;font-weight:600;color:#99a2ae;background:#f5f7fa;border:1px solid #edf0f4;padding:7px 9px;border-radius:7px}.filters{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 26px}.chip{font-size:12px;border-radius:40px;padding:10px 16px;font-weight:640;color:#7d8796;background:#fff;border:1px solid #e0e5ee}.chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}.chip:hover:not(.active){border-color:#a9bffb;color:#426bfa}.section-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:13px 0 18px}.section-header h2{font-size:23px;letter-spacing:-.045em;margin:0}.tool-count{color:#98a2ae;font-size:12px}.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.tile{min-width:0;border:1px solid #e5e9f0;background:#fff;border-radius:16px;padding:20px 19px 17px;text-align:left;min-height:190px;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s,border-color .18s}.tile:hover{transform:translateY(-4px);border-color:#b9c9ff;box-shadow:0 15px 35px #2c4d8830}.tile-top{display:flex;align-items:center;gap:13px}.tile-icon{width:45px;height:45px;display:grid;place-items:center;flex:0 0 45px;background:#ecf2ff;color:#366af9;border-radius:12px}.tile-icon svg{width:24px;height:24px}.tile-icon.green{background:#e8f8f3;color:#079c80}.tile-icon.purple{background:#f3efff;color:#7857e5}.tile-icon.orange{background:#fff6e8;color:#d89a27}.tile-icon.red{background:#fff0f2;color:#e15163}.tile-icon.slate{background:#eff2f5;color:#4e688a}.tile-title{font-size:13.5px;font-weight:730;letter-spacing:-.02em;line-height:1.3}.tile p{font-size:12px;color:#8792a3;line-height:1.52;margin:12px 0 15px;flex:1}.tile-foot{font-size:12px;color:#346afb;font-weight:700;display:flex;gap:9px;align-items:center}.tile-foot svg{width:14px;height:14px}.empty{padding:50px;text-align:center;border:1px dashed #cdd6e4;border-radius:16px;grid-column:1/-1;color:#8390a2}.foot{margin-top:80px;border-top:1px solid var(--line);padding:24px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px;color:#929ba7}.foot a:hover{text-decoration:underline}.view{display:none}.view.active{display:block}.tool-page{max-width:1060px;margin:15px auto 30px}.back{border:0;background:transparent;color:#667487;display:inline-flex;align-items:center;gap:7px;padding:5px 0;margin-bottom:27px;font-size:13px;font-weight:600}.back svg{width:17px;height:17px}.tool-eyebrow{font-size:11px;text-transform:uppercase;color:#4169ee;letter-spacing:.15em;font-weight:800}.tool-heading{font-size:clamp(32px,3.7vw,56px);line-height:1.05;letter-spacing:-.055em;margin:11px 0}.tool-description{color:#758193;font-size:15px;line-height:1.6;margin-bottom:28px}.panel{border:1px solid #e5e9f0;border-radius:20px;padding:clamp(21px,3.4vw,36px);background:#fff;box-shadow:var(--shadow);min-height:190px}.form-field{display:flex;flex-direction:column;gap:9px;margin:0 0 21px}.form-field>label,.form-field>.field-label{font-size:12px;color:#344052;font-weight:700}.control{width:100%;border:1px solid #dfe5ef;background:#fbfcff;border-radius:10px;padding:12px 13px;font-size:13px;min-height:44px;color:#293549}.control:focus{border-color:#7e9bfa;outline:2px solid #dce5ff;outline-offset:0}.control.textarea{min-height:160px;resize:vertical;line-height:1.58;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.control[type=range]{accent-color:var(--blue);min-height:20px}.control[type=file]{padding:10px}.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.inline{display:flex;align-items:center;flex-wrap:wrap;gap:15px}.options{display:flex;gap:13px 22px;flex-wrap:wrap;margin:12px 0 23px}.options label{display:flex;align-items:center;gap:7px;color:#5b6778;font-size:13px}.options input{accent-color:var(--blue)}.btn{background:#161d29;color:white;border:1px solid #161d29;padding:12px 18px;border-radius:10px;font-size:12px;font-weight:720;min-height:43px}.btn:hover{background:#344052}.btn.subtle{background:#f3f5f9;color:#364456;border-color:#ebeff5}.btn.subtle:hover{background:#e9effa}.btn:disabled{opacity:.55;cursor:not-allowed}.result-wrap{margin-top:25px}.result-label{font-size:11px;color:#647288;letter-spacing:.05em;font-weight:750;text-transform:uppercase;margin:0 0 9px}.result{border:1px solid #e6eaf1;background:#f8fafc;padding:17px;border-radius:12px;color:#243044;font-size:13px;line-height:1.65;min-height:71px;overflow-wrap:anywhere;white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.result:empty:before{content:'Hier erscheint dein Ergebnis.';color:#9da7b4}.helper{color:#8b95a4;font-size:12px;line-height:1.7;margin:18px 0 0}.notice{border-radius:10px;background:#f0f5ff;color:#4f658e;padding:12px 15px;font-size:12px;line-height:1.7;margin-top:16px}.notice.error{background:#fff2f3;color:#a03748}.ok{color:#119473}.warning{color:#bc781d}.statline{font-size:13px;color:#536074;padding:10px 0;border-bottom:1px solid #edf0f5}.statline strong{float:right;color:#161d29}.preview-canvas{max-width:100%;height:auto;display:block;border:1px solid #e8edf5;border-radius:10px;background:#fff;margin:20px 0}.qr-area{display:flex;justify-content:center;min-height:280px;align-items:center}.qr-area canvas{max-width:100%;height:auto}.checklist-item{display:flex;align-items:center;gap:12px;border-bottom:1px solid #edf0f3;padding:13px 1px;font-size:13px}.checklist-item span{flex:1;overflow-wrap:anywhere}.checklist-item input{accent-color:#426bfa}.checklist-item.done span{text-decoration:line-through;color:#9ba4b2}.checklist-item button{background:none;border:0;font-size:20px;color:#9ba4b2}.diff-added{background:#e8f8ef;color:#166f4a;display:block;padding:3px 8px}.diff-removed{background:#fff0f1;color:#bb4054;display:block;padding:3px 8px}.meta{display:flex;align-items:center;gap:6px;font-size:11px;color:#8c96a6;margin:15px 0}.mobile-shade{display:none}.toast{position:fixed;right:22px;bottom:25px;background:#172235;color:#fff;border-radius:11px;padding:13px 18px;font-size:12px;box-shadow:0 12px 40px #1d2e4d44;z-index:100;opacity:0;transform:translateY(15px);pointer-events:none;transition:.22s}.toast.show{opacity:1;transform:translateY(0)}.count-badge{font-size:10px;color:#6b88c9;background:#eff3ff;border-radius:6px;padding:3px 6px;margin-left:auto}.link-card{background:#eff4ff;padding:19px;border-radius:13px;margin-top:22px;font-size:13px;color:#3b527e}.link-card a{color:#245eee;font-weight:700}.separator{height:1px;background:var(--line);margin:20px 0} .with-arrow{display:flex;align-items:center;gap:8px}
@media(max-width:1450px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.hero-art{flex-basis:250px;transform:scale(.84);transform-origin:top right;margin-left:-60px}.hero-copy{max-width:660px}}
@media(max-width:1080px){:root{--sidebar:235px}.brand img{width:175px}.content{padding:38px 29px 70px}.hero-art{display:none}.hero{min-height:auto;padding-bottom:8px}.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.side{transform:translateX(-104%);width:276px;transition:transform .23s;box-shadow:0 15px 50px #152f4129}.side.open{transform:translateX(0)}.mobile-shade.show{display:block;position:fixed;inset:0;background:#131e3077;z-index:35}.main{margin-left:0}.top{height:67px;padding:0 17px}.mobile-trigger{display:grid;place-items:center;width:34px;height:34px}.mobile-brand{display:block;width:116px;height:auto;object-fit:contain}.breadcrumbs{display:none}.online{display:none}.service{font-size:11px;padding:9px 12px}.actions{gap:10px}.content{padding:34px 19px 65px}.eyebrow{font-size:9px;letter-spacing:.15em}.hero{padding:4px 0}.hero h1{font-size:clamp(43px,10.4vw,72px);margin:19px 0 20px}.lead{font-size:14px}.search{margin-top:24px;height:56px}.key{display:none}.tiles{gap:11px}.tile{min-height:178px;padding:15px}.tile-top{gap:10px}.tile-icon{width:39px;height:39px;flex-basis:39px}.tile-title{font-size:12px}.tile p{font-size:11px}.tool-page{margin:0}.two,.three{grid-template-columns:1fr}.foot{margin-top:55px}}
@media(max-width:480px){.tiles{grid-template-columns:1fr}.tile{min-height:130px}.tile p{margin:11px 0}.tile-top{gap:14px}.tool-count{font-size:11px}.section-header h2{font-size:20px}.filters{gap:6px}.chip{font-size:11px;padding:9px 12px}.mobile-brand{width:106px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* GC OneSolution Tools 2.1 – genehmigte monochrome Markenoptik */
:root { --blue:#171a1e; --blue2:#f0f2f5; }
.brand-caption,.eyebrow,.tool-eyebrow,.side-bottom a,.tile-foot,.link-card a { color:#171a1e; }
.eyebrow:before { background:#171a1e; }
.menu-btn.active { color:#171a1e; background:#f0f2f7; }
.menu-btn.active svg { color:#171a1e; }
.menu-btn:hover,.chip:hover:not(.active),.service:hover { color:#171a1e; }
.tile-foot svg { color:#171a1e; }
.count-badge { color:#464e59; background:#f0f1f3; }
/* Decorative hero graphic: monochrome, balanced and contained. */
.hero-art { isolation:isolate; }
.orbit { border-color:#e7e9ed; box-shadow:inset 0 0 0 34px #eef0f448,0 0 75px 45px #edeff466; }
.orbit:before,.orbit:after { border-color:#e5e8ed; }
.hero-core { border-color:#f0f0f2; box-shadow:0 15px 40px #626a7620; }
.float { color:#171a1e; border-color:#f1f1f3; box-shadow:0 12px 25px #646b7820; }
.float.one { top:18px; left:86px; }
.float.two { top:44px; right:20px; }
.float.three { top:160px; left:38px; transform:rotate(-10deg); }
.float.four { top:197px; right:28px; }
@media(max-width:1450px) { .hero-art { margin-left:-25px; } }

/* GC OneSolution Tools 2.2 — Hero-Icons im Kachelzentrum.
   Ursache: .two und .three werden auch für allgemeine Formular-Grids verwendet.
   Dadurch wurde bei den Hero-Kacheln das SVG in die erste Grid-Spalte gesetzt. */
.hero-art .float {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  grid-template-columns: none;
  gap: 0;
}
.hero-art .float > svg {
  display: block;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  margin: 0;
}
