/* Prozen-Trechner — Shared stylesheet
 * Author: Prozen-Trechner Team
 * License: All rights reserved
 */
:root{
  --bg:#f7f8fc;--white:#fff;--s1:#f0f1f7;--s2:#e8e9f2;--bdr:#dddee8;
  --tx:#1a1a2e;--txd:#4a4a6a;--txm:#8585a0;
  --ac:#2563eb;--acl:#3b82f6;--acd:#1d4ed8;--acg:rgba(37,99,235,.08);--acg2:rgba(37,99,235,.15);
  --grn:#059669;--grnl:rgba(5,150,105,.10);
  --red:#dc2626;--redl:rgba(220,38,38,.08);
  --ylw:#d97706;--ylwl:rgba(217,119,6,.10);
  --r:14px;--rs:10px;--max:860px
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--tx);min-height:100vh;line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:var(--ac);text-decoration:none;transition:.2s}
a:hover{color:var(--acd);text-decoration:underline}
img{max-width:100%;height:auto}

/* Skip-to-content for accessibility */
.skip{position:absolute;left:-9999px;top:0;background:var(--ac);color:#fff;padding:10px 16px;z-index:9999}
.skip:focus{left:10px;top:10px}

/* Nav — solid white background, fully opaque, sticks to top */
nav:not(.crumb){background:#fff;border-bottom:1px solid var(--bdr);position:sticky;top:0;z-index:100;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.nav-w{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:12px 24px;gap:12px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo:hover{text-decoration:none}
.logo b{width:36px;height:36px;background:linear-gradient(135deg,var(--ac),var(--acl));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;font-weight:700;box-shadow:0 2px 8px var(--acg2)}
.logo span{font-size:1.1rem;font-weight:700;color:var(--tx)}
.logo em{font-style:normal;color:var(--ac)}
.nav-r{display:flex;gap:2px;flex-wrap:wrap}
.nav-r a{padding:7px 13px;border-radius:8px;color:var(--txd);font-size:.82rem;font-weight:500;text-decoration:none;transition:.2s}
.nav-r a:hover,.nav-r a.on{color:var(--ac);background:var(--acg);text-decoration:none}

/* Mobile menu toggle */
.mb-tg{display:none;background:0;border:0;cursor:pointer;padding:8px;border-radius:8px;color:var(--tx)}
.mb-tg:hover{background:var(--s1)}

/* Search Bar */
.search-w{position:relative;max-width:220px;flex:1}
.search-w input{width:100%;padding:8px 14px 8px 36px;background:var(--s1);border:1.5px solid var(--bdr);border-radius:8px;font-family:inherit;font-size:.82rem;color:var(--tx);outline:0;transition:.2s}
.search-w input:focus{border-color:var(--ac);background:#fff;box-shadow:0 0 0 3px var(--acg)}
.search-w input::placeholder{color:var(--txm)}
.search-w svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--txm);pointer-events:none}
.search-dd{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--white);border:1px solid var(--bdr);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.1);z-index:200;max-height:340px;overflow-y:auto}
.search-dd.open{display:block}
.search-dd a{display:block;padding:10px 14px;color:var(--tx);font-size:.84rem;text-decoration:none;border-bottom:1px solid var(--s1);transition:.15s}
.search-dd a:last-child{border-bottom:0}
.search-dd a:hover{background:var(--acg);color:var(--ac);text-decoration:none}
.search-dd a small{display:block;color:var(--txm);font-size:.74rem;margin-top:2px}
.search-dd .no-res{padding:14px;text-align:center;color:var(--txm);font-size:.82rem}

/* Breadcrumb */
.crumb{max-width:var(--max);margin:0 auto;padding:14px 24px 0;font-size:.82rem;color:var(--txm)}
.crumb a{color:var(--txd)}
.crumb a:hover{color:var(--ac)}
.crumb span{margin:0 6px;color:var(--bdr)}

/* Layout */
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* Hero */
.hero{padding:44px 0 24px;text-align:center}
.hero h1{font-size:clamp(1.8rem,4.5vw,2.6rem);font-weight:800;line-height:1.2;color:var(--tx);margin-bottom:14px}
.hero h1 span{color:var(--ac);background:linear-gradient(135deg,var(--ac),var(--acl));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero .sub{font-size:1rem;color:var(--txd);max-width:560px;margin:0 auto;font-weight:400}
.hero .badges{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:18px}
.hero .badge{padding:6px 12px;background:var(--white);border:1px solid var(--bdr);border-radius:20px;font-size:.78rem;color:var(--txd);display:flex;align-items:center;gap:5px}
.hero .badge svg{color:var(--grn)}

/* ===== WOW HERO (May 2026 redesign) ===== */
.whero{position:relative;margin:0 0 14px;padding:54px 28px 48px;border-radius:28px;overflow:hidden;text-align:center;background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 42%,#0891b2 100%)}
.whero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 18% 28%,rgba(124,58,237,.55) 0%,transparent 42%),
  radial-gradient(circle at 82% 22%,rgba(8,145,178,.55) 0%,transparent 42%),
  radial-gradient(circle at 72% 82%,rgba(236,72,153,.40) 0%,transparent 45%),
  radial-gradient(circle at 25% 88%,rgba(34,197,94,.35) 0%,transparent 45%);
  animation:meshmove 16s ease-in-out infinite;pointer-events:none}
@keyframes meshmove{0%,100%{transform:scale(1) rotate(0deg);opacity:.9}50%{transform:scale(1.15) rotate(4deg);opacity:1}}
.whero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);background-size:22px 22px;pointer-events:none;opacity:.5}

/* floating percent symbols */
.whero .floaty{position:absolute;color:rgba(255,255,255,.13);font-weight:800;pointer-events:none;user-select:none;line-height:1}
.whero .floaty:nth-child(1){font-size:90px;top:8%;left:6%;animation:float1 9s ease-in-out infinite}
.whero .floaty:nth-child(2){font-size:54px;top:60%;left:11%;animation:float2 11s ease-in-out infinite}
.whero .floaty:nth-child(3){font-size:70px;top:14%;right:8%;animation:float3 10s ease-in-out infinite}
.whero .floaty:nth-child(4){font-size:46px;bottom:12%;right:13%;animation:float1 13s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-22px) rotate(6deg)}}
@keyframes float2{0%,100%{transform:translateY(0) rotate(10deg)}50%{transform:translateY(18px) rotate(-6deg)}}
@keyframes float3{0%,100%{transform:translateY(0) rotate(5deg)}50%{transform:translateY(-16px) rotate(-10deg)}}

.whero-in{position:relative;z-index:2}
.whero .pill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.16);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.25);color:#fff;padding:7px 16px;border-radius:30px;font-size:.8rem;font-weight:600;margin-bottom:18px;animation:fadeDown .7s ease}
.whero .pill .dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:livedot 2s infinite}
@keyframes livedot{0%{box-shadow:0 0 0 0 rgba(74,222,128,.7)}70%{box-shadow:0 0 0 8px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.whero h1{color:#fff;font-size:clamp(2rem,5.5vw,3.3rem);font-weight:900;line-height:1.08;margin:0 0 16px;letter-spacing:-.02em;animation:fadeUp .7s ease}
.whero h1 .grad{background:linear-gradient(120deg,#fff 0%,#bae6fd 50%,#a5f3fc 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.whero .lead{color:rgba(255,255,255,.94);font-size:clamp(1rem,2.2vw,1.18rem);max-width:620px;margin:0 auto 26px;line-height:1.6;animation:fadeUp .7s ease .1s both}
.whero .lead strong{color:#fff;font-weight:700}

/* hero stat counters */
.whero-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:6px;animation:fadeUp .7s ease .2s both}
.whero-stats .stat{background:rgba(255,255,255,.13);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:14px 22px;min-width:120px;transition:.3s}
.whero-stats .stat:hover{background:rgba(255,255,255,.22);transform:translateY(-3px)}
.whero-stats .stat .num{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:800;color:#fff;line-height:1}
.whero-stats .stat .lbl{font-size:.76rem;color:rgba(255,255,255,.85);margin-top:5px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}

@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:640px){
  .whero{padding:40px 18px 34px;border-radius:22px}
  .whero .floaty:nth-child(1){font-size:60px}
  .whero .floaty:nth-child(3){font-size:48px}
  .whero-stats .stat{padding:11px 16px;min-width:88px}
}
@media(prefers-reduced-motion:reduce){
  .whero::before,.whero .floaty,.whero .pill .dot{animation:none}
  .whero h1,.whero .lead,.whero .pill,.whero-stats{animation:none}
}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* section heading with accent */
.sec-head{text-align:center;margin:46px 0 8px}
.sec-head h2{font-size:clamp(1.5rem,3.2vw,2rem);font-weight:800;color:var(--tx);margin:0;display:inline-block;position:relative}
.sec-head h2::after{content:"";display:block;width:54px;height:4px;border-radius:3px;background:linear-gradient(90deg,var(--ac),#0891b2);margin:10px auto 0}
.sec-head p{color:var(--txd);font-size:.95rem;margin:14px 0 0}

/* glow on calculator tabs container */
.tabs{box-shadow:0 4px 24px rgba(37,99,235,.08)}

/* Cards */
.card{background:var(--white);border:1px solid var(--bdr);border-radius:var(--r);padding:32px;margin-bottom:20px;box-shadow:0 1px 3px rgba(0,0,0,.04)}

/* Calculator Tabs */
.tabs{display:flex;gap:4px;background:var(--white);border:1px solid var(--bdr);border-radius:var(--r);padding:5px;margin:0 0 24px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tb{flex:1;min-width:max-content;padding:10px 16px;background:0;border:0;border-radius:var(--rs);color:var(--txd);font-family:inherit;font-size:.84rem;font-weight:500;cursor:pointer;transition:.2s;white-space:nowrap}
.tb:hover{color:var(--ac);background:var(--acg)}
.tb.on{background:var(--ac);color:#fff;box-shadow:0 2px 8px var(--acg2)}
.cs{display:none;animation:fs .3s ease}.cs.on{display:block}
@keyframes fs{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Inputs */
.ir{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.ir .tl{color:var(--txd);font-size:.92rem;white-space:nowrap;font-weight:500}
.if{flex:1;min-width:90px}
.if input,.if select{width:100%;padding:12px 16px;background:var(--s1);border:1.5px solid var(--bdr);border-radius:var(--rs);color:var(--tx);font-family:inherit;font-size:1rem;font-weight:500;outline:0;transition:.2s;-moz-appearance:textfield}
.if input::-webkit-outer-spin-button,.if input::-webkit-inner-spin-button{-webkit-appearance:none}
.if input::placeholder{color:var(--txm);font-weight:400}
.if input:focus,.if select:focus{border-color:var(--ac);background:#fff;box-shadow:0 0 0 3px var(--acg)}
.cb{width:100%;padding:14px;background:var(--ac);border:0;border-radius:var(--rs);color:#fff;font-family:inherit;font-size:.95rem;font-weight:600;cursor:pointer;transition:.2s;margin-top:6px}
.cb:hover{background:var(--acd);box-shadow:0 4px 16px var(--acg2)}
.cb:active{transform:translateY(1px)}
.cb-row{display:flex;gap:8px;margin-top:6px}
.cb-row .cb{margin-top:0}
.cb-sec{background:var(--white);color:var(--ac);border:1.5px solid var(--bdr)}
.cb-sec:hover{background:var(--acg);border-color:var(--ac);box-shadow:none}

/* Result */
.rb{margin-top:20px;padding:24px;background:linear-gradient(135deg,var(--s1),var(--white));border:1px solid var(--bdr);border-radius:var(--rs);text-align:center;display:none;animation:rp .35s ease}
.rb.sh{display:block}
@keyframes rp{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
.rl{font-size:.72rem;color:var(--txm);text-transform:uppercase;letter-spacing:1.5px;font-weight:700;margin-bottom:6px}
.rv{font-size:2.4rem;color:var(--ac);font-weight:800;letter-spacing:-.5px;line-height:1.1}
.rf{margin-top:12px;padding-top:12px;border-top:1px solid var(--bdr);font-size:.82rem;color:var(--txd)}
.rf code{background:var(--s2);padding:3px 8px;border-radius:5px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--tx);font-size:.8rem}
.rb .copy{margin-top:14px;padding:6px 14px;background:var(--white);border:1px solid var(--bdr);border-radius:6px;color:var(--txd);font-size:.78rem;cursor:pointer;font-family:inherit;transition:.2s;display:inline-flex;align-items:center;gap:6px}
.rb .copy:hover{border-color:var(--ac);color:var(--ac)}
.rb .copy.ok{border-color:var(--grn);color:var(--grn)}

/* Multi-result grid (for tools with several outputs) */
.rg{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:14px}
.rg .ri{padding:14px;background:var(--white);border:1px solid var(--bdr);border-radius:var(--rs);text-align:center}
.rg .ri .lb{font-size:.7rem;color:var(--txm);text-transform:uppercase;letter-spacing:1px;font-weight:600;margin-bottom:4px}
.rg .ri .vl{font-size:1.25rem;color:var(--tx);font-weight:700}
.rg .ri.acc .vl{color:var(--ac)}
.rg .ri.pos .vl{color:var(--grn)}
.rg .ri.neg .vl{color:var(--red)}

/* Quick calcs */
.qg{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:14px;margin:20px 0 40px}
.qc{background:var(--white);border:1px solid var(--bdr);border-radius:var(--r);padding:22px;transition:.25s}
.qc:hover{border-color:var(--acl);box-shadow:0 8px 24px rgba(37,99,235,.12);transform:translateY(-3px)}
.qc h3{font-size:.98rem;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:9px}
.qc h3 i{width:32px;height:32px;background:var(--acg);border-radius:9px;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:.95rem}
.qi{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.qi input,.qi select{flex:1;min-width:0;padding:9px 12px;background:var(--s1);border:1.5px solid var(--bdr);border-radius:7px;color:var(--tx);font-family:inherit;font-size:.88rem;outline:0;transition:.2s;-moz-appearance:textfield}
.qi input::-webkit-outer-spin-button,.qi input::-webkit-inner-spin-button{-webkit-appearance:none}
.qi input:focus,.qi select:focus{border-color:var(--ac)}
.qr{padding:11px;background:var(--s1);border-radius:7px;text-align:center;font-size:.95rem;font-weight:700;color:var(--ac);min-height:42px;display:flex;align-items:center;justify-content:center;line-height:1.4}
.qr.emp{color:var(--txm);font-weight:400;font-size:.82rem}

/* Content sections */
.content{margin-bottom:40px}
.content h2{font-size:1.45rem;font-weight:700;margin:36px 0 14px;line-height:1.3;color:var(--tx)}
.content h2:first-child{margin-top:0}
.content h3{font-size:1.05rem;font-weight:600;margin:24px 0 10px;color:var(--ac)}
.content h4{font-size:.96rem;font-weight:600;margin:18px 0 8px;color:var(--tx)}
.content p{color:var(--txd);font-size:.94rem;font-weight:400;line-height:1.8;margin-bottom:14px}
.content strong{color:var(--tx);font-weight:600}
.content ul,.content ol{color:var(--txd);font-size:.94rem;line-height:1.8;margin:14px 0;padding-left:24px}
.content li{margin-bottom:6px}
.content a{font-weight:500}
.content table{width:100%;border-collapse:collapse;font-size:.88rem;margin:16px 0;background:var(--white);border-radius:var(--rs);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.content table th{text-align:left;padding:12px;background:var(--s1);color:var(--tx);font-weight:700;border-bottom:2px solid var(--bdr)}
.content table td{padding:11px 12px;color:var(--txd);border-bottom:1px solid var(--bdr)}
.content table tr:last-child td{border-bottom:0}
.content table tr:hover td{background:var(--acg)}

/* Formula box */
.fbx{padding:18px;background:var(--acg);border:1px solid rgba(37,99,235,.15);border-radius:var(--rs);text-align:center;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:1.05rem;color:var(--acd);margin:18px 0;font-weight:600}

/* Example box */
.ebx{padding:18px;background:var(--s1);border-left:3px solid var(--ac);border-radius:0 var(--rs) var(--rs) 0;margin:18px 0}
.ebx p{margin-bottom:6px;color:var(--txd);font-size:.92rem;line-height:1.7}.ebx p:last-child{margin-bottom:0}
.ebx strong{color:var(--ac)}

/* Info / warning boxes */
.box-info,.box-warn,.box-tip{padding:16px 18px;border-radius:var(--rs);margin:16px 0;font-size:.92rem;line-height:1.65}
.box-info{background:var(--acg);border-left:3px solid var(--ac);color:var(--txd)}
.box-warn{background:var(--ylwl);border-left:3px solid var(--ylw);color:var(--txd)}
.box-tip{background:var(--grnl);border-left:3px solid var(--grn);color:var(--txd)}
.box-info strong,.box-warn strong,.box-tip strong{color:var(--tx)}

/* FAQ */
.fq{background:var(--white);border:1px solid var(--bdr);border-radius:var(--rs);margin-bottom:8px}
.fqq{width:100%;padding:16px 20px;background:0;border:0;color:var(--tx);font-family:inherit;font-size:.92rem;font-weight:600;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px}
.fqq i{color:var(--txm);transition:.3s;font-style:normal;font-size:.8rem}
.fq.op .fqq i{transform:rotate(180deg);color:var(--ac)}
.fqa{max-height:0;overflow:hidden;transition:max-height .35s}
.fq.op .fqa{max-height:600px}
.fqa p{padding:0 20px 16px;color:var(--txd);font-size:.88rem;font-weight:400;line-height:1.75}
.fqa ul{padding:0 20px 16px 40px;color:var(--txd);font-size:.88rem;line-height:1.75}

/* Link grid */
.link-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:20px 0}
.link-card{background:var(--white);border:1px solid var(--bdr);border-radius:var(--r);padding:22px;text-decoration:none;color:inherit;transition:.2s;display:block}
.link-card:hover{border-color:var(--ac);box-shadow:0 6px 20px rgba(37,99,235,.08);text-decoration:none;transform:translateY(-2px)}
.link-card h3{font-size:.98rem;font-weight:700;margin-bottom:6px;color:var(--tx)}
.link-card p{font-size:.8rem;color:var(--txd);font-weight:400;margin:0}

/* Blog cards */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:16px;margin:20px 0 40px}
.blog-card{background:var(--white);border:1px solid var(--bdr);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;transition:.25s;display:block}
.blog-card:hover{border-color:var(--ac);box-shadow:0 10px 30px rgba(37,99,235,.12);text-decoration:none;transform:translateY(-4px)}
.blog-card .thumb{height:120px;display:flex;align-items:center;justify-content:center;font-size:2.6rem;background:linear-gradient(135deg,var(--s1),var(--s2))}
.blog-card .body{padding:20px}
.blog-card .tag{display:inline-block;padding:2px 9px;background:var(--acg);color:var(--ac);border-radius:12px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.3px;margin-bottom:8px}
.blog-card .body h3{font-size:1rem;font-weight:700;margin-bottom:6px;line-height:1.3;color:var(--tx)}
.blog-card .body p{font-size:.8rem;color:var(--txd);font-weight:400;line-height:1.5}
.blog-card .meta{font-size:.72rem;color:var(--txm);margin-top:8px}

/* Blog cards used directly without .body wrapper (blog index) */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:24px 0}
.blog-grid .blog-card{padding:22px}
.blog-grid .blog-card .tag{display:inline-block;padding:3px 11px;background:var(--acg);color:var(--ac);border-radius:14px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.3px;margin-bottom:10px}
.blog-grid .blog-card h3{font-size:1.08rem;font-weight:700;margin:0 0 8px;line-height:1.32;color:var(--tx)}
.blog-grid .blog-card p{font-size:.86rem;color:var(--txd);line-height:1.55;margin:0 0 12px}
.blog-grid .blog-card .meta{font-size:.74rem;color:var(--txm);font-weight:500}

/* Featured blog hero card */
.feat-post{position:relative;overflow:hidden;display:block;border-radius:20px;padding:36px 32px;margin:0 0 18px;text-decoration:none;background:linear-gradient(135deg,#1e3a8a,#2563eb 60%,#0891b2);box-shadow:0 12px 36px rgba(37,99,235,.22);transition:.25s}
.feat-post:hover{transform:translateY(-4px);box-shadow:0 18px 46px rgba(37,99,235,.3);text-decoration:none}
.feat-post::after{content:"📊";position:absolute;right:18px;bottom:-22px;font-size:130px;opacity:.12;line-height:1;pointer-events:none}
.feat-post .ftag{display:inline-block;background:rgba(255,255,255,.2);backdrop-filter:blur(8px);color:#fff;padding:5px 14px;border-radius:20px;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:14px}
.feat-post h3{color:#fff;font-size:clamp(1.3rem,3vw,1.7rem);font-weight:800;line-height:1.2;margin:0 0 10px;position:relative;z-index:2}
.feat-post p{color:rgba(255,255,255,.92);font-size:.96rem;line-height:1.55;margin:0 0 14px;max-width:600px;position:relative;z-index:2}
.feat-post .fmeta{display:inline-flex;align-items:center;gap:6px;color:#fff;font-size:.82rem;font-weight:600;position:relative;z-index:2}
.feat-post .fmeta::after{content:"→";transition:.2s}
.feat-post:hover .fmeta::after{transform:translateX(4px)}

/* CTA */
.cta{position:relative;overflow:hidden;background:linear-gradient(135deg,#1e3a8a,#2563eb 55%,#0891b2);border:0;border-radius:22px;padding:40px 28px;text-align:center;margin:42px 0;box-shadow:0 14px 40px rgba(37,99,235,.28)}
.cta::before{content:"%";position:absolute;right:-10px;bottom:-30px;font-size:160px;font-weight:900;color:rgba(255,255,255,.08);line-height:1;pointer-events:none}
.cta h3{font-size:1.5rem;font-weight:800;margin-bottom:10px;color:#fff;position:relative}
.cta p{color:rgba(255,255,255,.92);font-size:.95rem;margin-bottom:20px;position:relative;max-width:520px;margin-left:auto;margin-right:auto}
.cta a.btn{display:inline-block;padding:13px 32px;background:#fff;border-radius:30px;color:var(--ac);font-weight:700;font-size:.95rem;text-decoration:none;position:relative;transition:.25s;box-shadow:0 6px 18px rgba(0,0,0,.15)}
.cta a.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.22);text-decoration:none;color:var(--acd)}

/* Legal/content pages */
.legal{margin:36px 0}
.legal h2{font-size:1.35rem;font-weight:700;margin:28px 0 12px;color:var(--tx)}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:1rem;font-weight:600;margin:20px 0 8px;color:var(--ac)}
.legal p{color:var(--txd);font-size:.92rem;line-height:1.8;margin-bottom:12px}
.legal ul{color:var(--txd);font-size:.92rem;line-height:1.8;margin:12px 0;padding-left:24px}
.legal li{margin-bottom:6px}
.legal a{color:var(--ac);font-weight:500}
.legal strong{color:var(--tx)}
.legal .updated{color:var(--txm);font-size:.82rem;margin-bottom:24px;font-style:italic}

/* Contact / About */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:24px 0}
.contact-card{background:var(--white);border:1px solid var(--bdr);border-radius:14px;padding:28px;text-align:center;transition:.2s}
.contact-card:hover{border-color:var(--ac);transform:translateY(-2px)}
.contact-card .icon{font-size:2.2rem;margin-bottom:12px}
.contact-card h3{font-size:1.05rem;font-weight:700;margin-bottom:6px}
.contact-card p{color:var(--txd);font-size:.84rem}
.contact-card a{color:var(--ac);font-weight:500;word-break:break-word}
.team-section{background:var(--white);border:1px solid var(--bdr);border-radius:14px;padding:32px;margin:24px 0;text-align:center}
.team-section .logo-big{width:64px;height:64px;background:linear-gradient(135deg,var(--ac),var(--acl));border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff;margin:0 auto 16px;font-weight:700;box-shadow:0 4px 16px var(--acg2)}

/* Contact form */
.cform{background:var(--white);border:1px solid var(--bdr);border-radius:var(--r);padding:28px;margin:24px 0}
.cform .row{margin-bottom:14px}
.cform label{display:block;font-size:.85rem;font-weight:600;color:var(--tx);margin-bottom:6px}
.cform input,.cform textarea,.cform select{width:100%;padding:11px 14px;background:var(--s1);border:1.5px solid var(--bdr);border-radius:var(--rs);color:var(--tx);font-family:inherit;font-size:.92rem;outline:0;transition:.2s}
.cform input:focus,.cform textarea:focus,.cform select:focus{border-color:var(--ac);background:#fff;box-shadow:0 0 0 3px var(--acg)}
.cform textarea{min-height:110px;resize:vertical;line-height:1.6}
.cform-msg{padding:12px;border-radius:var(--rs);margin-top:12px;font-size:.88rem;display:none}
.cform-msg.ok{display:block;background:var(--grnl);color:var(--grn);border:1px solid rgba(5,150,105,.3)}
.cform-msg.err{display:block;background:var(--redl);color:var(--red);border:1px solid rgba(220,38,38,.3)}

/* Footer */
footer{background:var(--white);border-top:1px solid var(--bdr);margin-top:48px;padding:32px 24px}
footer .fw{max-width:var(--max);margin:0 auto}
footer .f-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px;margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--bdr)}
footer .f-col h4{font-size:.84rem;font-weight:700;color:var(--tx);margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px}
footer .f-col a{display:block;font-size:.82rem;color:var(--txd);text-decoration:none;padding:3px 0;transition:.15s}
footer .f-col a:hover{color:var(--ac)}
footer .f-social{display:flex;justify-content:center;gap:14px;margin:16px 0}
footer .f-social a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--s1);color:var(--txd);transition:.25s;text-decoration:none}
footer .f-social a:hover{background:var(--ac);color:#fff;transform:translateY(-2px);text-decoration:none}
footer .f-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-bottom:14px}
footer .f-legal a{font-size:.8rem;color:var(--txm);text-decoration:none}
footer .f-legal a:hover{color:var(--ac)}
footer p.cp{text-align:center;color:var(--txm);font-size:.78rem}

/* Tool listing */
.tool-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:20px 0}
.tool-list a{background:var(--white);border:1px solid var(--bdr);border-radius:var(--r);padding:18px;text-decoration:none;color:inherit;transition:.2s;display:flex;align-items:center;gap:12px}
.tool-list a:hover{border-color:var(--ac);box-shadow:0 4px 14px rgba(37,99,235,.06);text-decoration:none;transform:translateY(-1px)}
.tool-list a .ic{width:38px;height:38px;background:var(--acg);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.tool-list a strong{display:block;font-size:.92rem;font-weight:700;color:var(--tx);margin-bottom:2px}
.tool-list a span{display:block;font-size:.76rem;color:var(--txd)}

/* Notentabelle (notentabelle table) */
.notes-tab{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:18px 0;font-size:.82rem}
.notes-tab .nt-h{background:var(--acg);color:var(--ac);font-weight:700;padding:8px;text-align:center;border-radius:6px}
.notes-tab .nt-c{background:var(--white);border:1px solid var(--bdr);padding:8px;text-align:center;border-radius:6px;color:var(--txd)}
@media(max-width:640px){.notes-tab{grid-template-columns:repeat(3,1fr);font-size:.76rem}}

/* === MOBILE UX BOOST (May 2026) === */
/* Bigger touch targets - iOS recommends min 44px */
@media(max-width:640px){
  .if input,.if select{padding:14px 16px;font-size:16px;font-weight:600}  /* 16px font prevents iOS zoom */
  .cb,.cb-sec{padding:14px 24px;font-size:1rem;font-weight:700;min-height:48px}
  .tb{padding:11px 14px;font-size:.85rem;min-height:42px}
  .ir{margin-bottom:12px}
}

/* Live-calculate badge */
.live-tag{display:inline-flex;align-items:center;gap:5px;background:#dcfce7;color:#15803d;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-left:8px;vertical-align:middle}
.live-tag::before{content:"●";color:#22c55e;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Result card prominence - mobile optimization */
.rb{background:linear-gradient(135deg,var(--acg),rgba(37,99,235,.04));border:2px solid var(--ac);border-radius:14px;padding:22px;margin-top:18px;display:none;animation:slideUp .3s ease}
.rb.show{display:block}
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:640px){.rb{padding:18px 16px}.rv{font-size:2.2rem!important}}

/* Hero CTA strip - new trust signals */
.trust-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;padding:12px 16px;background:rgba(255,255,255,.7);backdrop-filter:blur(8px);border-radius:12px;margin:14px auto 0;max-width:680px;font-size:.84rem;color:var(--txd);font-weight:500}
.trust-strip span{display:inline-flex;align-items:center;gap:5px}
.trust-strip span::before{content:"✓";color:var(--grn);font-weight:800;font-size:.95rem}

/* Top-tools quick access — homepage simplification */
.top-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:24px 0}
.top-tools a{display:flex;align-items:center;gap:14px;padding:18px 22px;background:#fff;border:1.5px solid var(--bdr);border-radius:14px;text-decoration:none;color:var(--tx);transition:.2s;position:relative;overflow:hidden}
.top-tools a:hover{border-color:var(--ac);transform:translateY(-2px);box-shadow:0 8px 20px rgba(37,99,235,.12);text-decoration:none}
.top-tools a::after{content:"→";position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--ac);font-weight:700;opacity:0;transition:.2s;font-size:1.2rem}
.top-tools a:hover::after{opacity:1;right:14px}
.top-tools .ic{font-size:1.8rem;flex-shrink:0;width:48px;height:48px;background:var(--acg);border-radius:10px;display:flex;align-items:center;justify-content:center}
.top-tools .tt{flex:1;padding-right:24px}
.top-tools .tt strong{display:block;font-size:1.02rem;color:var(--tx);font-weight:700;margin-bottom:2px}
.top-tools .tt span{font-size:.84rem;color:var(--txd);line-height:1.45}
.top-tools .pop{position:absolute;top:8px;right:8px;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;font-size:.66rem;padding:3px 8px;border-radius:6px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}

/* Responsive */
@media(max-width:780px){
  .nav-r{display:none}
  .nav-r.open{display:flex;position:absolute;top:60px;left:0;right:0;background:var(--white);border-bottom:1px solid var(--bdr);flex-direction:column;padding:8px;gap:0;box-shadow:0 8px 20px rgba(0,0,0,.08)}
  .nav-r.open a{padding:12px 16px;border-radius:6px;min-height:44px;display:flex;align-items:center}
  .mb-tg{display:flex}
}
@media(max-width:640px){
  .card{padding:22px 18px}
  .ir{flex-direction:column;align-items:stretch;gap:6px}
  .tb{padding:11px 12px;font-size:.82rem}
  .rv{font-size:1.9rem}
  .hero{padding:32px 0 18px}
  .nav-w{padding:10px 16px}
  .wrap{padding:0 16px}
  .crumb{padding:12px 16px 0;font-size:.78rem}
  footer{padding:24px 16px}
  .content table{font-size:.8rem}
  .content table td,.content table th{padding:8px}
  .top-tools{grid-template-columns:1fr}
  .top-tools a{padding:16px 18px}
}

/* Print */
@media print{
  nav,footer,.cta,.cb,.cb-row,.tabs,.search-w,.f-social{display:none}
  .card{box-shadow:none;border:1px solid #ddd}
  body{background:#fff;font-size:12pt}
}

/* Performance: lazy-render off-screen sections */
.content,.fq,.link-grid,.qg,.blog-grid{content-visibility:auto;contain-intrinsic-size:auto 500px}

/* Utility */
.txt-c{text-align:center}
.mt-2{margin-top:24px}
.mb-2{margin-bottom:24px}
.muted{color:var(--txm);font-size:.85rem}