/* LivaGoo v3 – Angleichung der Kundenportale (empfehlen.php, datenvolumen.php). Logik unverändert, nur Aussehen. */
@font-face{font-family:"Familjen";src:url(../fonts/familjen-grotesk-latin-wght-normal.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Familjen";src:url(../fonts/familjen-grotesk-latin-ext-wght-normal.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0100-02BA}
@font-face{font-family:"Figtree";src:url(../fonts/figtree-latin-wght-normal.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Figtree";src:url(../fonts/figtree-latin-ext-wght-normal.woff2) format("woff2");font-weight:300 900;font-display:swap;unicode-range:U+0100-02BA}
body{font-family:"Figtree",ui-sans-serif,system-ui,sans-serif!important;color:#082B64;background:linear-gradient(180deg,#F3FAFE,#fff 40%)!important}
h1,h2,h3,.ref-big10,.usage-stat b{font-family:"Familjen",ui-sans-serif,system-ui,sans-serif!important;letter-spacing:-.02em!important}
.ref-hero{background:radial-gradient(120% 140% at 0% 0%,#0F4A93 0%,#082B64 60%)!important}
.ref-hero h1{letter-spacing:-.03em!important}
.ref-big10{color:#0D6FBF!important}
.ref-shell,.usage-shell{border-radius:28px!important;box-shadow:0 18px 50px rgba(8,43,100,.10)!important;backdrop-filter:none!important}
.ref-login button,.ref-action,.usage-form button,.usage-actions .btn,.btn{background:#0D6FBF!important;color:#fff!important;border:0!important;border-radius:999px!important;font-weight:700!important;box-shadow:0 10px 24px rgba(13,111,191,.25)!important}
.ref-login button:hover,.ref-action:hover,.usage-form button:hover,.btn:hover{background:#0A5594!important}
.ref-langs a{border-radius:999px!important}
.ref-langs a.active{background:#082B64!important}
input:focus{outline:none;border-color:#0D6FBF!important;box-shadow:0 0 0 4px rgba(13,111,191,.14)}
.lg-back{display:inline-flex;align-items:center;gap:6px;margin:0 0 16px;padding:8px 14px;border-radius:999px;border:1px solid #DCE6F0;background:#fff;color:#082B64;font:700 14px "Figtree",sans-serif;text-decoration:none}
.lg-back:hover{border-color:#0D6FBF;color:#0D6FBF}
.ref-nav .lg-back{margin:0 auto 0 12px}

/* Empfehlen (referral-portal.php) – kompakt im Stil der neuen Website (User 25.10.: „viel zu groß“) */
body:has(.ref-wrap){font-size:15px;background:#F3F8FC!important}
.ref-wrap{width:min(880px,calc(100% - 28px))!important;margin:18px auto 48px!important}
.ref-nav{margin-bottom:12px!important}
.ref-logo{width:140px!important}
.ref-langs a{padding:6px 10px!important;font-size:13px;font-weight:800!important}
.ref-shell{border:0!important;border-radius:24px!important}
.ref-hero{grid-template-columns:1fr auto!important;align-items:center;gap:20px!important;padding:clamp(22px,3.4vw,34px)!important}
.ref-kicker{padding:5px 10px!important;font-size:12px;font-weight:800!important}
.ref-hero h1{margin:12px 0 8px!important;font-size:clamp(28px,3.6vw,40px)!important;line-height:1.05!important}
.ref-hero p{margin:0;font-size:16px!important;line-height:1.5!important}
.ref-big10{width:118px!important;font-size:36px!important;font-weight:900!important;box-shadow:0 14px 34px rgba(0,0,0,.2)!important}
.ref-content{padding:clamp(18px,3vw,30px)!important}
.ref-content>h2,.ref-dashboard h2{font-size:clamp(22px,2.6vw,28px)!important;margin:0 0 12px!important}
.ref-steps{gap:10px!important;margin:12px 0 20px!important}
.ref-step{padding:14px 16px!important;border-radius:16px!important}
.ref-step span{width:30px!important;height:30px!important;font-size:14px;background:#E3F1FC!important;color:#0D6FBF!important}
.ref-step b{margin:8px 0 4px!important;font-size:16px!important}
.ref-step p,.ref-note{margin:0;font-size:14px;line-height:1.5!important}
.ref-login{padding:16px!important;border-radius:16px!important;background:#F3F8FC!important;border-color:#E1EBF4!important}
.ref-login label{font-weight:800!important;font-size:14px}
.ref-login input,.ref-link-row input{min-height:46px!important;padding:10px 12px!important;font-size:15px!important}
.ref-login button,.ref-action,.ref-actions a{display:inline-flex!important;align-items:center;justify-content:center;min-height:46px!important;padding:0 18px!important;font-size:15px!important;line-height:1.2;text-decoration:none}
.ref-share .whatsapp{background:#1FA855!important;box-shadow:0 8px 20px rgba(31,168,85,.25)!important}
.ref-message{padding:11px 14px!important;font-size:14px}
.ref-secure{margin:10px 0 0}
.ref-stats{gap:10px!important;margin-bottom:12px!important}
.ref-stat{padding:14px 16px!important;border-radius:16px!important}
.ref-stat strong{font-size:26px!important;color:#082B64}
.ref-stat small{font-size:13px}
.ref-panel{padding:16px 18px!important;margin-top:10px!important;border-radius:16px!important}
.ref-panel h3{margin:0 0 6px;font-size:18px}
.ref-panel>small{display:block;font-size:13px;color:#4A5B70}
.ref-code{margin:2px 0 10px;font-size:clamp(20px,2.6vw,26px)!important;color:#0D6FBF!important}
.ref-reward{padding:12px 14px!important}
.ref-actions{margin-top:16px!important}
.ref-actions .primary{background:#0D6FBF!important;color:#fff!important}
.ref-actions .secondary{background:#fff!important;color:#082B64!important;border:1.5px solid #DCE6F0!important;box-shadow:none!important}
.ref-rules{margin-top:16px!important;padding:12px 14px!important;font-size:13px!important}
@media(max-width:760px){.ref-hero{grid-template-columns:1fr!important}.ref-big10{display:none!important}}

/* Datenvolumen (usage-portal.php) – im Stil der neuen Website (User 25.10.: Design anpassen) */
body:has(.usage-wrap){position:relative;display:flow-root;margin:0!important;padding-top:0!important;background:#F3F8FC!important}
body:has(.usage-wrap)::before{content:"";position:absolute;inset:0 0 auto;height:min(420px,60vh);z-index:0;background:linear-gradient(180deg,rgba(8,43,100,.78),rgba(13,111,191,.55) 70%,rgba(243,248,252,1)),url(/assets/v3/img/bg-himmel-1536.webp) center 30%/cover no-repeat}
.usage-wrap{position:relative;z-index:1;width:min(860px,calc(100% - 28px))!important;margin:clamp(20px,5vw,56px) auto 70px!important}
.usage-shell{position:relative;font-size:15px;background:#fff!important;border:0!important;border-radius:24px!important;padding:clamp(18px,3vw,32px)!important;box-shadow:0 30px 80px rgba(8,43,100,.18)!important}
.usage-logo{width:130px!important;margin:0 0 18px!important}
.usage-shell>.lg-back{position:absolute;top:clamp(18px,3vw,32px);right:clamp(18px,3vw,32px);margin:0;padding:6px 12px;font-size:13px}
.usage-shell>.usage-actions:last-child{display:none}
.usage-head{position:relative;padding-left:62px}
.usage-head::before{content:"";position:absolute;left:0;top:2px;width:48px;height:48px;border-radius:14px;background:#E3F1FC url(/assets/v3/img/icon-datenvolumen.png) center/32px no-repeat}
.usage-head h1{font-size:clamp(26px,3.2vw,34px)!important;letter-spacing:-.03em!important;color:#082B64!important;margin:0 0 8px!important}
.usage-head p{margin:0;font-size:15px;line-height:1.55;color:#4A5B70!important}
.usage-form{margin-top:20px!important;padding:16px;border-radius:16px;background:#F3F8FC;border:1px solid #E1EBF4}
.usage-form label{font-weight:800!important;color:#082B64!important}
.usage-form input{min-height:46px!important;padding:10px 12px!important;border:1.5px solid #CFDDEA!important;border-radius:12px!important;background:#fff;font-size:15px!important}
.usage-form button,.usage-actions .btn,.usage-top .btn{display:inline-flex!important;align-items:center;justify-content:center;min-height:46px!important;padding:0 18px!important;font-size:15px!important}
.usage-security{display:inline-flex;align-items:center;gap:6px;margin:12px 0 0;padding:6px 12px;font-size:13px;border-radius:999px;background:#EAF7F1;color:#145C3A!important;font-weight:600}
.usage-note{border-radius:14px!important}
.usage-order{border-radius:22px!important}
.usage-order:before{background:linear-gradient(#16C9C4,#0D6FBF)!important}
.usage-bar span{background:linear-gradient(90deg,#16C9C4,#0D6FBF)!important}
.usage-stat{background:#F3F8FC!important;border-radius:14px!important}
.usage-stat b{color:#082B64!important}
.usage-referral{background:radial-gradient(120% 140% at 0% 0%,#0F4A93 0%,#082B64 60%)!important;border-radius:22px!important}
.usage-referral-row button{background:#16C9C4!important;color:#05264F!important}
.btn.btn-outline{background:#fff!important;color:#082B64!important;border:1.5px solid #DCE6F0!important;box-shadow:none!important}
.btn.btn-outline:hover{border-color:#0D6FBF!important;color:#0D6FBF!important;background:#fff!important}
@media(max-width:720px){
  .usage-shell>.lg-back{position:static;margin:0 0 16px}
  .usage-logo{margin-inline:0!important}
  .usage-head{padding-left:0;padding-top:58px}
  .usage-head h1{font-size:28px!important}
}

/* Datenvolumen angemeldet: Bestellungen kompakt */
.usage-order{padding:16px 18px!important}
.usage-order h2{font-size:18px!important}
.usage-stat{padding:10px 12px!important;font-size:13px}
.usage-stat b{font-size:17px!important}
.usage-bar{height:10px!important}
.usage-referral{padding:16px 18px!important}
.usage-referral h2{font-size:20px!important}