:root{ --primary:#ef5547;--primary-dark:#d94338;--ink:#1e2329;--muted:#69717c;--line:#e4e7eb;--surface:#fff;--soft:#f6f7f8;--dark:#161a1f;--shadow:0 18px 55px rgba(24,29,34,.10);--radius:20px } *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.5}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}img{max-width:100%;display:block}.btn,button{border:0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--primary);color:#fff;padding:.9rem 1.25rem;border-radius:12px;font-weight:800;box-shadow:0 8px 24px rgba(239,85,71,.18);transition:.2s}.btn:hover{transform:translateY(-1px);background:var(--primary-dark)}.btn-small{padding:.65rem 1rem;border-radius:10px}.btn-wide{width:100%}.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}.btn-dark{background:#20252b}.danger,.btn.danger{background:#fff0ef!important;color:#b92f28!important;border:1px solid #ffd6d2!important;box-shadow:none!important}.hint,small{color:var(--muted)}label{display:grid;gap:.45rem;font-weight:700;font-size:.92rem}input,select,textarea{width:100%;border:1px solid #d9dde2;border-radius:11px;padding:.78rem .85rem;background:#fff;color:var(--ink);outline:none;transition:.15s}input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(239,85,71,.11)}textarea{resize:vertical}.check{display:flex;grid-template-columns:none;align-items:flex-start;gap:.7rem;font-weight:500}.check input{width:auto;margin-top:.25rem}.check.mini{align-items:center}.check.mini input{margin:0}.alert{padding:.85rem 1rem;border-radius:12px;margin:0 0 1rem;font-weight:650}.alert.success{background:#eaf8ef;color:#176437}.alert.error{background:#fff0ef;color:#a82822}.alert.info{background:#eef4ff;color:#315fa4}.eyebrow{display:inline-block;color:var(--primary);font-size:.78rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.section{max-width:1180px;margin:auto;padding:84px 28px}.section-head{max-width:720px;margin-bottom:34px}.section-head h2,.section-title h2{font-size:clamp(2rem,4vw,3rem);line-height:1.08;margin:.45rem 0 .8rem;letter-spacing:-.04em}.section-head p{font-size:1.08rem;color:var(--muted)} /* landing */ .topbar{height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 max(28px,calc((100vw - 1180px)/2));border-bottom:1px solid rgba(0,0,0,.05);position:sticky;top:0;background:rgba(255,255,255,.93);backdrop-filter:blur(16px);z-index:20}.brand img{width:128px}.topbar nav{display:flex;align-items:center;gap:24px;font-weight:700;font-size:.93rem}.hero{min-height:720px;background:linear-gradient(135deg,#fff 0%,#fff7f5 56%,#f2f3f5 100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,1fr);gap:60px;align-items:center;padding:80px max(28px,calc((100vw - 1180px)/2));overflow:hidden}.hero-copy{max-width:660px}.hero h1{font-size:clamp(3rem,6.3vw,6rem);line-height:.96;letter-spacing:-.065em;margin:20px 0 28px}.hero h1 span{color:var(--primary)}.hero-copy>p{font-size:1.2rem;color:#5e6670;max-width:620px}.hero-actions{display:flex;gap:12px;margin:30px 0 20px}.trust-row{display:flex;flex-wrap:wrap;gap:16px;color:#555e68;font-weight:700;font-size:.9rem}.hero-visual{position:relative}.browser-mock{background:#fff;border:1px solid #e4e6e9;border-radius:22px;box-shadow:0 30px 80px rgba(35,43,50,.18);overflow:hidden;transform:rotate(1.5deg)}.browser-bar{height:42px;background:#f3f4f5;display:flex;align-items:center;gap:7px;padding:0 14px;color:#87909a;font-size:.75rem}.browser-bar i{width:8px;height:8px;border-radius:50%;background:#d6d9dd}.browser-bar span{margin-left:8px;background:#fff;border-radius:6px;padding:5px 11px;flex:1}.mini-chat{display:grid;grid-template-columns:1fr 150px;grid-template-rows:52px 320px 48px}.mini-top{grid-column:1/3;background:#22272d;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 18px}.mini-top span{color:#ff8177;font-size:.82rem}.mini-body{padding:18px;background:#fafafa;overflow:hidden}.bubble{background:#fff;border:1px solid #e7e9eb;border-radius:14px;padding:11px 13px;margin-bottom:12px;max-width:84%;font-size:.84rem;box-shadow:0 4px 13px rgba(0,0,0,.04)}.bubble.alt{margin-left:auto;background:#fff2f0}.mini-users{border-left:1px solid #eceef0;padding:16px 12px;display:flex;flex-direction:column;gap:10px;font-size:.76rem;background:#fff}.mini-users b{margin-bottom:5px}.mini-input{grid-column:1/3;border-top:1px solid #eceef0;padding:13px 15px;color:#858d95;display:flex;justify-content:space-between}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature{padding:28px;border:1px solid var(--line);border-radius:18px;background:#fff;transition:.2s}.feature:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.feature-icon{font-size:1.7rem}.feature h3{margin:14px 0 8px}.feature p{margin:0;color:var(--muted)}.steps{background:#171b20;color:#fff;max-width:none;padding-left:max(28px,calc((100vw - 1180px)/2));padding-right:max(28px,calc((100vw - 1180px)/2))}.steps .section-head p{color:#b9c0c7}.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.step-grid>div{background:#22272d;border:1px solid #30363d;padding:30px;border-radius:18px}.step-grid b{font-size:2rem;color:#ff7165}.step-grid p{color:#aeb6bf}.brand-showcase{max-width:1180px;margin:90px auto;display:grid;grid-template-columns:1.35fr .8fr;align-items:center;overflow:hidden;border-radius:24px;background:#f3f4f5}.brand-showcase img{width:100%;height:430px;object-fit:cover}.brand-showcase>div{padding:42px}.brand-showcase h2{font-size:2.6rem;letter-spacing:-.04em;margin:10px 0}.create-section{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:start}.create-copy{position:sticky;top:110px}.create-copy h2{font-size:2.8rem;line-height:1.05;margin:.5rem 0 1rem}.create-copy p{color:var(--muted);font-size:1.05rem}.create-copy img{border-radius:18px;margin-top:26px}.form-card,.card,.legal-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-grid .full{grid-column:1/3}.slug-field{display:flex;align-items:center;border:1px solid #d9dde2;border-radius:11px;overflow:hidden;background:#fafafa}.slug-field span{padding:0 .75rem;color:#727b85;font-size:.86rem}.slug-field input{border:0;border-radius:0;background:#fff;box-shadow:none}.form-card form{display:grid;gap:18px}.privacy-note{background:#f4f7f8;border:1px solid #e4e8eb;border-radius:12px;padding:13px;color:#55606a;font-size:.9rem}.captcha{display:flex;align-items:center;gap:12px;background:#fff8e8;border:1px solid #f3ddac;border-radius:12px;padding:12px}.captcha span{flex:1}.captcha input{width:86px}.site-footer{padding:24px max(28px,calc((100vw - 1180px)/2));border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;font-size:.84rem;color:#707985;background:#fff}.site-footer>span:last-child{display:flex;gap:16px} /* simple/legal */ .center-page,.simple-page{min-height:78vh;display:grid;place-items:center;padding:40px 20px;background:#f6f7f8}.form-card.narrow,.card.narrow{width:min(470px,100%)}.form-logo{width:125px;margin:0 auto 18px}.success-card{width:min(520px,100%);text-align:center;background:#fff;border-radius:22px;padding:42px;box-shadow:var(--shadow)}.success-icon{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#e9f8ef;color:#198344;font-size:2rem;font-weight:900;margin:auto}.legal-shell{max-width:850px;margin:50px auto;padding:0 24px 80px}.legal-shell>h1{font-size:3rem;letter-spacing:-.04em}.legal-content{white-space:normal;line-height:1.75}.legal-updated{color:var(--muted);font-size:.85rem} /* tenant login */ .tenant-login-page{min-height:calc(100vh - 72px);display:grid;place-items:center;padding:38px 20px;background:linear-gradient(rgba(22,26,31,.58),rgba(22,26,31,.58)),var(--login-bg,linear-gradient(135deg,#262b31,#111418));background-size:cover;background-position:center}.tenant-login-card{width:min(900px,100%);background:rgba(255,255,255,.97);border-radius:24px;padding:30px;box-shadow:0 30px 90px rgba(0,0,0,.28)}.tenant-login-brand{display:flex;align-items:center;gap:18px;margin-bottom:22px}.tenant-login-brand img{width:120px;max-height:90px;object-fit:contain}.tenant-login-brand h1{margin:0;font-size:2rem}.tenant-login-brand p{margin:4px 0;color:var(--muted)}.login-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px}.login-box{border:1px solid var(--line);padding:20px;border-radius:16px;display:grid;gap:14px}.login-box h2{margin:0}.register-panel{margin-top:18px;border:1px solid var(--line);border-radius:14px;padding:14px 18px}.register-panel summary{font-weight:800;cursor:pointer}.register-panel form{margin-top:18px;display:grid;gap:16px}.tenant-legal-links{display:flex;justify-content:center;gap:20px;margin-top:20px;font-size:.86rem;color:var(--muted)} /* live chat */ .tenant-shell{min-height:100vh;background:linear-gradient(rgba(246,247,248,.96),rgba(246,247,248,.96)),var(--chat-bg,none);background-size:cover;background-position:center;background-attachment:fixed}.tenant-head{height:76px;background:#fff;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr minmax(300px,520px) 1fr;align-items:center;gap:18px;padding:0 24px;position:sticky;top:0;z-index:30}.tenant-brand{display:flex;align-items:center;gap:12px;min-width:0}.tenant-brand img{width:66px;max-height:58px;object-fit:contain}.tenant-brand span{display:grid;min-width:0}.tenant-brand strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tenant-brand small{font-size:.75rem}.radio-player{background:#1e2329;color:#fff;border-radius:13px;display:grid;grid-template-columns:42px 1fr 110px;align-items:center;gap:10px;padding:8px 12px;min-width:0}.play-btn{width:38px;height:38px;border-radius:50%;background:var(--primary);color:#fff}.radio-player span{display:grid;min-width:0}.radio-player strong,.radio-player small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.radio-player small{color:#adb5be;font-size:.72rem}.radio-player input{padding:0;border:0}.tenant-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px}.tenant-actions>a,.tenant-actions button{background:#f3f5f6;border-radius:9px;padding:8px 10px;font-weight:750;color:#3c454e}.tenant-actions form{margin:0}.chat-layout{max-width:1600px;height:calc(100vh - 76px - 55px);margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 270px;padding:16px;gap:16px}.chat-panel,.user-panel{background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:18px;min-height:0;overflow:hidden}.chat-panel{display:grid;grid-template-rows:auto auto 1fr auto}.room-tabs{display:flex;gap:8px;padding:12px;border-bottom:1px solid var(--line);overflow-x:auto}.room-tabs a,.room-tabs button{white-space:nowrap;background:#f1f3f4;padding:8px 12px;border-radius:9px;font-weight:750}.room-tabs .active{background:#22272d;color:#fff}.welcome-banner{margin:10px 12px 0;background:#fff4dc;border:1px solid #f0dba9;color:#75571e;padding:10px 12px;border-radius:11px;font-size:.9rem}.messages{padding:14px 16px 26px;overflow-y:auto;scroll-behavior:smooth}.message{display:grid;grid-template-columns:42px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid #f0f1f2}.avatar{width:42px;height:42px;border-radius:13px;object-fit:cover;background:linear-gradient(135deg,var(--avatar-accent,var(--primary)),#2c3238);color:#fff;display:grid;place-items:center;font-weight:900}.avatar.small{width:34px;height:34px;border-radius:10px}.message-content{min-width:0}.msg-meta{display:flex;align-items:center;gap:9px}.msg-meta b{font-size:.93rem}.msg-meta span{color:#9aa1a9;font-size:.72rem}.message p{margin:3px 0 4px;word-break:break-word}.msg-tools{font-size:.72rem;color:#9aa1a9;opacity:.15;transition:.15s}.message:hover .msg-tools{opacity:1}.msg-tools button{background:none;color:#89929b;padding:0}.chat-upload img{max-width:min(520px,90%);max-height:360px;border-radius:13px;margin-top:8px;border:1px solid var(--line)}.chat-composer{position:relative;display:grid;grid-template-columns:42px 42px minmax(0,1fr) 44px 48px;gap:8px;padding:12px;border-top:1px solid var(--line);background:#fff}.chat-composer>input[type=text],#chatInput{border-radius:12px}.chat-composer input[type=color]{padding:4px}.icon-btn,.send-btn,.upload-label{height:42px;border-radius:11px;background:#f1f3f5;display:grid;place-items:center;padding:0}.send-btn{background:var(--primary);color:#fff;font-size:1.2rem}.smiley-popover{display:none;position:absolute;left:12px;bottom:64px;width:min(430px,calc(100vw - 40px));background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:10px;z-index:40}.smiley-popover.open{display:block}.smiley-tabs{display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid var(--line);padding-bottom:8px}.smiley-tabs button{background:#f2f3f4;padding:6px 9px;border-radius:8px;font-size:.76rem}.smiley-tabs button.active{background:#22272d;color:#fff}.smiley-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;padding-top:8px;max-height:220px;overflow:auto}.smiley-grid button{height:38px;border-radius:8px;background:#fff;font-size:1.25rem}.smiley-grid button:hover{background:#f2f3f4}.smiley-grid img{width:26px;height:26px;object-fit:contain;margin:auto}.upload-preview{position:absolute;bottom:66px;right:12px;background:#eaf8ef;border:1px solid #bfe6cd;padding:8px 11px;border-radius:10px;color:#22643b;font-size:.8rem}.user-panel{overflow-y:auto}.user-head{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);padding:14px;display:flex;justify-content:space-between}.user-row{display:grid;grid-template-columns:36px 1fr 10px;gap:9px;align-items:center;padding:9px 12px}.user-row:hover{background:#f7f8f9}.user-row div{display:grid}.user-row b{font-size:.84rem}.user-row em{font-style:normal;background:#f1f2f3;padding:2px 5px;border-radius:5px;color:#68717a;font-size:.62rem}.user-row small{font-size:.69rem}.online-dot{width:7px;height:7px;border-radius:50%;background:#39b76a}.tenant-copyright{height:55px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);font-size:.78rem;color:#737c85;background:#fff}.tenant-copyright>span:last-child{display:flex;gap:15px} /* admin */ .admin-shell{min-height:100vh;background:#f4f5f7;display:grid;grid-template-columns:250px minmax(0,1fr)}.admin-sidebar{background:#191d22;color:#fff;position:sticky;top:0;height:100vh;padding:16px 12px;display:flex;flex-direction:column}.admin-logo{display:flex;align-items:center;gap:10px;padding:8px}.admin-logo img{width:62px}.admin-logo span{display:grid;font-weight:800}.admin-logo small{font-weight:500;color:#8f99a4}.admin-sidebar nav{margin-top:20px;display:grid;gap:3px;overflow-y:auto}.admin-sidebar nav a{padding:9px 11px;border-radius:9px;color:#c2c8cf;font-size:.86rem}.admin-sidebar nav a:hover{background:#262c33;color:#fff}.admin-side-footer{margin-top:auto;color:#727c86;padding:10px;font-size:.72rem}.admin-main{padding:0 28px 60px;min-width:0}.admin-top{height:80px;display:flex;align-items:center;justify-content:space-between}.admin-top h1{margin:0;font-size:1.6rem}.admin-top p{margin:2px 0;color:var(--muted);font-size:.85rem}.admin-top-actions{display:flex;align-items:center;gap:10px}.admin-top-actions>a{background:#fff;border:1px solid var(--line);padding:8px 11px;border-radius:9px;font-weight:700}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.stat{background:#fff;border:1px solid var(--line);border-radius:15px;padding:18px;display:flex;align-items:center;gap:14px}.stat>span{font-size:1.6rem}.stat div{display:grid}.stat b{font-size:1.35rem}.stat small{font-size:.72rem}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.admin-card,.master-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 6px 18px rgba(29,35,41,.03)}.admin-card.wide{grid-column:1/-1}.card-title{display:flex;justify-content:space-between;align-items:center;gap:12px}.card-title h2{font-size:1.05rem;margin:0}.progress{height:9px;border-radius:999px;background:#eceff1;overflow:hidden;margin:15px 0}.progress i{height:100%;display:block;background:linear-gradient(90deg,var(--primary),#ff8a72)}.storage-legend{display:flex;flex-wrap:wrap;gap:8px}.storage-legend span{background:#f5f6f7;border-radius:7px;padding:5px 7px;font-size:.72rem}.switch-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f0f1f2}.switch{position:relative;width:38px;height:22px;display:inline-block}.switch input{position:absolute;opacity:0}.switch i{position:absolute;inset:0;border-radius:999px;background:#cbd0d5;transition:.2s}.switch i:after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;left:3px;top:3px;transition:.2s}.switch input:checked+i{background:var(--primary)}.switch input:checked+i:after{left:19px}.admin-section{padding-top:36px;scroll-margin-top:20px}.section-title{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:14px}.section-title h2{font-size:2rem;margin:.2rem 0}.room-admin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.room-edit{border:1px solid var(--line);border-radius:13px;padding:14px;display:grid;gap:10px}.room-edit.new-item{background:#fafbfb}.button-row{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.button-row button,.inline-form button,.inline-edit button,.room-edit button,.admin-card>form button,.welcome-row button,.tr-form button{padding:8px 10px;border-radius:8px;background:#252a30;color:#fff;font-weight:700}.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}.inline-form input,.inline-form select{width:auto;min-width:130px}.inline-edit{display:grid;grid-template-columns:minmax(110px,1fr) 75px 90px auto auto auto;align-items:center;gap:7px;padding:8px 0;border-bottom:1px solid #f0f1f2}.inline-edit input{padding:.55rem}.smiley-preview{width:30px;height:30px;object-fit:contain}.table{display:grid}.tr{display:grid;grid-template-columns:1fr 1fr .8fr 1.2fr;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid #eef0f1;font-size:.82rem}.tr.head{font-weight:800;color:#6e7780}.tr-form{display:contents}.tr-form select{padding:.5rem}.rights-table{display:grid;margin-bottom:15px}.rights-row{display:grid;grid-template-columns:minmax(180px,1.4fr) repeat(auto-fit,minmax(90px,1fr));gap:10px;align-items:center;padding:9px 4px;border-bottom:1px solid #eef0f1}.rights-row.head{font-size:.8rem;color:#6f7881}.welcome-row{display:grid;grid-template-columns:minmax(250px,1fr) 130px 150px auto auto;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid #eef0f1}.report{border:1px solid #ffd5d1;background:#fff9f8;border-radius:12px;padding:14px;margin-bottom:10px}.report.closed{opacity:.6;background:#f6f7f8;border-color:#e1e4e7}.report>div:first-child{display:flex;justify-content:space-between}.report p{margin:8px 0}.badge{background:#ffdfdc;color:#9f2e27;padding:3px 6px;border-radius:999px;font-size:.68rem}.status{font-weight:800}.status.good{color:#18834a}.status.warn{color:#b87511}.audit-list{display:grid}.audit-list>div{display:grid;grid-template-columns:150px 120px 180px 1fr;gap:10px;padding:7px 0;border-bottom:1px solid #eef0f1;font-size:.76rem}.profile-shell{max-width:1150px;margin:30px auto;padding:0 20px}.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.profile-grid .wide{grid-column:1/-1}.profile-avatar{width:110px;height:110px;object-fit:cover;border-radius:26px;margin:10px 0 18px}.profile-avatar.placeholder{display:grid;place-items:center;background:#222;color:#fff;font-size:2rem;font-weight:900}.friend-row{display:flex;gap:8px;align-items:center;border-bottom:1px solid #eef0f1;padding:8px 0}.friend-row>span{display:grid;flex:1}.friend-row form{margin:0} /* master */ .master-shell{min-height:100vh;background:#f4f5f7}.master-head{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 max(24px,calc((100vw - 1300px)/2));gap:14px;position:sticky;top:0;z-index:10}.master-head>a img{width:75px}.master-head>div{display:grid;flex:1}.master-head button{background:#f1f3f5;border-radius:9px;padding:8px 10px}.master-main{max-width:1300px;margin:auto;padding:34px 24px 70px}.master-card{margin-top:16px}.master-table{display:grid;overflow:auto}.master-row{min-width:1050px;display:grid;grid-template-columns:1.3fr 1.1fr .65fr 1fr .9fr 1fr;gap:12px;align-items:center;padding:11px 4px;border-bottom:1px solid #eef0f1;font-size:.78rem}.master-row.head{font-weight:800;color:#6e7780}.master-row>span{display:grid}.quota-form{display:flex;gap:5px}.quota-form input{width:90px;padding:.5rem}.quota-form button,.master-actions button,.storage-request button{padding:7px 9px;border-radius:8px;background:#252a30;color:#fff}.master-actions form{display:flex;gap:5px}.storage-request{display:grid;grid-template-columns:1fr 140px 100px 220px;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid #eef0f1}.storage-request>div:first-child{display:grid}.storage-request p{margin:4px 0;color:var(--muted)} /* demo helpers */ .fake-upload{border:1px dashed #cdd3d8;background:#f7f9fa;border-radius:10px;padding:12px;margin-top:6px;color:#66707a}.chat-image-card{display:grid;grid-template-columns:42px 1fr;gap:10px;padding:10px 0}.demo-admin .admin-sidebar a{cursor:default} @media(max-width:1050px){.hero{grid-template-columns:1fr;padding-top:60px}.hero-visual{max-width:750px}.feature-grid{grid-template-columns:1fr 1fr}.create-section{grid-template-columns:1fr}.create-copy{position:static}.admin-shell{grid-template-columns:80px 1fr}.admin-sidebar{padding:12px 8px}.admin-logo span,.admin-sidebar nav a{font-size:0}.admin-sidebar nav a::first-letter{font-size:1rem}.admin-logo img{width:55px}.admin-side-footer{display:none}.room-admin-grid{grid-template-columns:1fr 1fr}.rights-row{min-width:800px}.rights-table{overflow:auto}.welcome-row{grid-template-columns:1fr 120px 140px}.welcome-row button{grid-row:2}.master-row{grid-template-columns:1.2fr 1fr .6fr .9fr .8fr 1fr}} @media(max-width:760px){.topbar{height:68px}.topbar nav>a:not(.btn){display:none}.brand img{width:98px}.hero{min-height:auto;padding:54px 20px;grid-template-columns:1fr;gap:35px}.hero h1{font-size:3.4rem}.hero-visual{display:none}.section{padding:58px 20px}.feature-grid,.step-grid,.brand-showcase,.form-grid,.login-columns,.admin-grid,.profile-grid{grid-template-columns:1fr}.form-grid .full,.admin-card.wide,.profile-grid .wide{grid-column:auto}.brand-showcase{margin:50px 20px}.brand-showcase img{height:260px}.create-section{padding-top:45px}.site-footer,.tenant-copyright{height:auto;flex-direction:column;align-items:flex-start;padding:16px 20px}.tenant-head{height:auto;min-height:70px;grid-template-columns:1fr auto;padding:8px 12px}.tenant-head .radio-player{grid-row:2;grid-column:1/3;width:100%}.tenant-brand img{width:52px}.tenant-actions>a{display:none}.chat-layout{height:calc(100vh - 136px);grid-template-columns:1fr;padding:8px}.user-panel{display:none;position:fixed;right:8px;top:135px;bottom:70px;width:260px;z-index:50;box-shadow:var(--shadow)}.user-panel.open{display:block}.chat-composer{grid-template-columns:38px 38px minmax(0,1fr) 42px}.chat-composer input[type=color]{display:none}.smiley-grid{grid-template-columns:repeat(7,1fr)}.admin-main{padding:0 12px 50px}.admin-top{height:70px}.stat-grid{grid-template-columns:1fr 1fr}.room-admin-grid{grid-template-columns:1fr}.inline-edit{grid-template-columns:1fr 70px}.inline-edit>*:nth-child(n+3){grid-column:auto}.welcome-row{grid-template-columns:1fr}.tr{min-width:700px}.table{overflow:auto}.audit-list>div{grid-template-columns:1fr}.master-main{padding:22px 12px}.storage-request{grid-template-columns:1fr}.tenant-login-card{padding:20px}.tenant-login-brand{align-items:flex-start}.tenant-login-brand img{width:90px}} /* private messages */ .pm-shell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:620px;margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}.pm-list{border-right:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:7px}.pm-list h2{margin:0 0 8px}.pm-list>a{display:grid;padding:10px;border-radius:10px}.pm-list>a:hover,.pm-list>a.active{background:#f2f4f5}.pm-list>a small{font-size:.68rem}.pm-chat{display:grid;grid-template-rows:1fr auto;min-width:0}.pm-empty{display:grid;place-items:center;color:var(--muted);padding:40px}.pm-messages{padding:18px;overflow:auto;display:flex;flex-direction:column;gap:10px}.pm-bubble{max-width:72%;background:#f2f4f5;border-radius:14px;padding:10px 12px}.pm-bubble.mine{align-self:flex-end;background:#fff0ee}.pm-bubble p{margin:4px 0}.pm-bubble small{font-size:.65rem}.pm-compose{padding:12px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:8px}.pm-compose textarea{resize:none}.avatar-hidden{visibility:hidden} @media(max-width:760px){.pm-shell{grid-template-columns:1fr}.pm-list{border-right:0;border-bottom:1px solid var(--line);max-height:240px;overflow:auto}.pm-chat{min-height:500px}.pm-bubble{max-width:88%}.pm-compose{grid-template-columns:1fr}} @media(max-width:760px){.tenant-actions>a{display:inline-flex!important;padding:8px!important;font-size:.72rem!important}.tenant-actions{gap:4px;flex-wrap:wrap;justify-content:flex-end}.tenant-actions button{padding:7px 8px}.tenant-brand span small{display:none}} /* ET-HOST Next 0.2 additions */ .hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important} .smiley-admin-list{display:grid;gap:10px}.smiley-edit-row{display:grid;grid-template-columns:52px minmax(130px,1fr) 110px minmax(150px,1fr) 100px 90px 75px minmax(160px,1fr) auto;gap:8px;align-items:end;padding:12px 0;border-bottom:1px solid #eef0f1}.smiley-edit-row label{font-size:.72rem}.smiley-big{width:46px;height:46px;display:grid;place-items:center;font-size:1.8rem}.smiley-big img{max-width:42px;max-height:42px}.role-manager{margin-top:16px}.role-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #eef0f1}.role-row>span{display:grid;flex:1}.role-row form{margin:0}.msg-meta a,.user-row a{font-weight:inherit;text-decoration:none}.msg-meta a:hover,.user-row a:hover{text-decoration:underline} @media(max-width:1100px){.smiley-edit-row{grid-template-columns:52px 1fr 100px 1fr}.smiley-edit-row>*{min-width:0}.smiley-edit-row .button-row{grid-column:1/-1}} @media(max-width:760px){.smiley-edit-row{grid-template-columns:44px 1fr}.smiley-edit-row>*{grid-column:auto}.smiley-edit-row .button-row{grid-column:1/-1}.role-manager{grid-template-columns:1fr!important}} @media(max-width:760px){.chat-composer{display:flex!important;align-items:center!important;gap:8px!important;width:100%!important;max-width:100%!important}.chat-composer .icon-btn,.chat-composer .upload-label{flex:0 0 38px!important;width:38px!important;min-width:38px!important;max-width:38px!important;height:42px!important}.chat-composer #chatInput{flex:1 1 auto!important;width:1%!important;min-width:0!important;max-width:none!important;height:42px!important;padding:.65rem .75rem!important;font-size:16px!important}.chat-composer .send-btn{flex:0 0 44px!important;width:44px!important;min-width:44px!important;max-width:44px!important;height:42px!important;padding:0!important;font-size:1.1rem!important}.chat-composer input[type=color]{display:none!important}} /* Fix: Chat-Composer bleibt auch bei fehlenden Berechtigungs-Buttons stabil */ @media (min-width:761px){ .chat-composer #chatInput{ grid-column:3; min-width:0; } .chat-composer #chatColor{ grid-column:4; } .chat-composer .send-btn{ grid-column:5; } } /* ET-HOST Bild-Smilies */ .chat-smiley{ display:inline-block; width:1.65em; height:1.65em; max-width:1.65em; object-fit:contain; vertical-align:-0.38em; margin:0 .08em; } /* ET-HOST MASTER SUPPORT */ .support-room-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin:16px 0; } .support-room-tabs a{ text-decoration:none; padding:9px 14px; border-radius:10px; background:#fff; border:1px solid #ddd; } .support-room-tabs a.active{ font-weight:700; border-color:#222; } .support-log{ display:flex; flex-direction:column; gap:10px; max-height:650px; overflow:auto; padding:8px; } .support-message{ padding:12px 14px; border:1px solid #e5e5e5; border-radius:12px; background:#fff; } .support-message.support{ border-width:2px; } .support-message-head{ display:flex; justify-content:space-between; gap:12px; margin-bottom:6px; } .support-message-head span{ font-size:.8rem; opacity:.7; } .support-message-body{ line-height:1.45; word-break:break-word; } .support-upload{ margin-top:7px; font-size:.85rem; opacity:.7; } .support-compose{ margin-top:18px; } .support-compose textarea{ width:100%; margin-top:6px; } .support-empty{ padding:24px; text-align:center; opacity:.65; } /* ========================================================== ET-HOST GIPHY AVATAR V3 ========================================================== */ img.avatar.user-avatar, .user-row img.avatar.user-avatar { object-fit: cover; object-position: center; overflow: hidden; } .support-avatar { display: flex; align-items: center; justify-content: center; background: #171717; color: #fff; font-size: .68rem; font-weight: 900; } .giphy-toggle { font-size: .68rem; font-weight: 900; } .giphy-popover { position: absolute; left: 12px; bottom: 72px; display: none; flex-direction: column; gap: 10px; width: min(520px,calc(100vw - 40px)); max-height: 520px; padding: 14px; background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.18); z-index: 100; } .giphy-popover.open { display: flex; } .giphy-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .giphy-head button { border: 0; background: transparent; font-size: 1.5rem; cursor: pointer; } .giphy-search { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; } .giphy-results { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; max-height: 330px; overflow-y: auto; } .giphy-result { min-height: 90px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: #eee; cursor: pointer; } .giphy-result img { display: block; width: 100%; height: 110px; object-fit: cover; } .giphy-powered { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .75rem; } .giphy-powered img { max-width: 150px; max-height: 20px; } .gif-preview { position: absolute; left: 12px; bottom: 72px; display: flex; align-items: center; gap: 9px; max-width: 380px; padding: 8px 10px; background: #fff; border: 1px solid #ddd; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.15); z-index: 90; } .gif-preview img { width: 70px; height: 52px; border-radius: 8px; object-fit: cover; } .gif-preview span { font-size: .82rem; font-weight: 700; } .gif-preview button { margin-left: auto; } .chat-gif { width: min(380px,100%); margin-top: 9px; } .chat-gif > a { display: block; } .chat-gif > a > img { display: block; width: auto; max-width: 100%; max-height: 360px; object-fit: contain; border-radius: 12px; } .chat-gif small { display: block; margin-top: 4px; font-size: .68rem; opacity: .65; } @media (min-width:761px) { .chat-composer.has-giphy { grid-template-columns: 42px 42px 42px minmax(0,1fr) 44px 48px; } .chat-composer.has-giphy .giphy-toggle { grid-column: 3; } .chat-composer.has-giphy #chatInput { grid-column: 4; min-width: 0; } .chat-composer.has-giphy #chatColor { grid-column: 5; } .chat-composer.has-giphy .send-btn { grid-column: 6; } } @media (max-width:760px) { .giphy-popover { left: 6px; right: 6px; bottom: 64px; width: auto; max-height: 65vh; } .giphy-results { grid-template-columns: repeat(2,minmax(0,1fr)); } .gif-preview { left: 6px; right: 6px; bottom: 64px; max-width: none; } } /* ========================================================== ET-HOST BACKGROUND FOUNDATION V1 ========================================================== */ .tenant-shell{ background-color: var(--chat-bg-color,#f3f5f7); background-image: linear-gradient( rgba(246,247,248,.84), rgba(246,247,248,.84) ), var(--chat-bg,none); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } .operator-confirm{ padding: 12px 14px; border: 1px solid #dfe4e8; border-radius: 12px; background: #f8fafb; } .operator-confirm strong{ color: #20252b; } /* ========================================================== ET-HOST ROOM BOTTOM SPACING V2 Neueste Nachricht bleibt sichtbar, aber kein riesiger Leerraum. ========================================================== */ .messages{ padding-bottom:32px !important; scroll-padding-bottom:32px !important; } @media(max-width:760px){ .messages{ padding-bottom:24px !important; scroll-padding-bottom:24px !important; } } /* ========================================================== ET-HOST PRIVATE MESSAGES 2C ========================================================== */ .pm-nav-badge{ display:inline-grid; place-items:center; min-width:19px; height:19px; margin-left:5px; padding:0 5px; border-radius:999px; background:#d9344f; color:#fff; font-size:.66rem; font-weight:900; } .pm-nav-badge[hidden]{ display:none !important; } /* ---------------------------------------------------------- Benachrichtigung ---------------------------------------------------------- */ .pm-toast{ position:fixed; right:20px; top:20px; z-index:9999; display:flex; align-items:center; gap:11px; width:min(360px,calc(100vw - 30px)); padding:13px 15px; border:1px solid #e1e5e8; border-radius:15px; background:#fff; color:#242a30; box-shadow: 0 18px 50px rgba(16,24,32,.18); text-decoration:none; opacity:0; transform:translateY(-14px); transition: opacity .22s ease, transform .22s ease; } .pm-toast.show{ opacity:1; transform:translateY(0); } .pm-toast-icon{ display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; border-radius:13px; background:#fff0f3; font-size:1.25rem; } .pm-toast>span:last-child{ display:grid; min-width:0; } .pm-toast strong{ font-size:.82rem; } .pm-toast small{ overflow:hidden; color:var(--muted); white-space:nowrap; text-overflow:ellipsis; font-size:.7rem; } /* ---------------------------------------------------------- Layout ---------------------------------------------------------- */ .pm-shell-v2{ min-height:620px; } .pm-list-title h2{ margin: 3px 0 13px; } .pm-new-chat{ margin-bottom:13px; } .pm-new-chat select{ width:100%; } .pm-no-threads{ padding:15px 10px; color:var(--muted); text-align:center; font-size:.76rem; } .pm-thread{ display:flex !important; align-items:center; justify-content:space-between; gap:10px; } .pm-thread>span{ display:grid; min-width:0; } .pm-thread small{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .pm-unread-thread{ display:grid; place-items:center; min-width:23px; height:23px; padding:0 6px; border-radius:999px; background:#d9344f; color:#fff; font-size:.68rem; } /* ---------------------------------------------------------- Chatkopf ---------------------------------------------------------- */ .pm-chat-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding: 14px 17px; border-bottom: 1px solid var(--line); } .pm-chat-head h2{ margin:2px 0 0; font-size:1rem; } .pm-delete-thread{ padding: 8px 11px; font-size:.7rem; } /* ---------------------------------------------------------- Verlauf ---------------------------------------------------------- */ .pm-messages-v2{ overflow-y:auto; min-height:360px; max-height: calc(100vh - 330px); padding: 18px 18px 28px; scroll-behavior:smooth; } .pm-conversation-empty{ margin:auto; padding:40px; color:var(--muted); text-align:center; } .pm-bubble{ width: min(680px,86%); margin-bottom:12px; } .pm-bubble-head{ display:flex; justify-content:space-between; gap:12px; margin-bottom:5px; } .pm-bubble-head small{ opacity:.72; font-size:.63rem; } .pm-bubble p{ margin: 4px 0; } /* ---------------------------------------------------------- Bilder ---------------------------------------------------------- */ .pm-image-link{ display:block; margin-top:7px; width:max-content; max-width:100%; } .pm-image{ display:block; max-width: min(430px,100%); max-height:420px; border-radius:12px; object-fit:contain; } /* ---------------------------------------------------------- GIFs ---------------------------------------------------------- */ .pm-gif-message{ display:grid; width:max-content; max-width:100%; margin-top:7px; } .pm-gif-message img{ display:block; max-width: min(430px,100%); max-height:420px; border-radius:12px; object-fit:contain; } .pm-gif-message small{ margin-top:3px; color:var(--muted); font-size:.62rem; } /* ---------------------------------------------------------- Composer ---------------------------------------------------------- */ .pm-compose-v2{ position:relative; display:grid; grid-template-columns: auto auto minmax(0,1fr) auto; align-items:end; gap:8px; padding:12px; border-top: 1px solid var(--line); background:#fff; } .pm-compose-v2 textarea{ min-width:0; resize:none; min-height:44px; max-height:120px; margin:0; } .pm-tool-button{ display:grid; place-items:center; width:42px; height:42px; padding:0; border: 1px solid var(--line); border-radius:11px; background:#f6f7f8; color:#313840; cursor:pointer; font-size:.76rem; font-weight:900; } .pm-send-button{ min-height:42px; } .pm-media-preview{ grid-column:1/-1; } .pm-selected-media{ display:flex; align-items:center; gap:9px; padding:8px 10px; border: 1px solid #e1e5e8; border-radius:11px; background:#f7f8f9; } .pm-selected-media img{ width:58px; height:58px; border-radius:8px; object-fit:cover; } .pm-selected-media span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.72rem; } .pm-selected-media button{ display:grid; place-items:center; width:29px; height:29px; padding:0; border-radius:8px; background:#eceff1; font-size:1rem; } /* ---------------------------------------------------------- GIPHY-Popover ---------------------------------------------------------- */ .pm-giphy-popover{ display:none; position:absolute; left:12px; bottom:72px; z-index:100; width: min(540px,calc(100vw - 40px)); max-height:480px; padding:13px; overflow:auto; border: 1px solid var(--line); border-radius:16px; background:#fff; box-shadow: 0 18px 50px rgba(16,24,32,.18); } .pm-giphy-popover.open{ display:block; } .pm-giphy-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } .pm-giphy-head button{ width:30px; height:30px; padding:0; border-radius:8px; } .pm-giphy-search{ display:grid; grid-template-columns: minmax(0,1fr) auto; gap:7px; margin-bottom:10px; } .pm-giphy-search input{ min-width:0; } .pm-giphy-results{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:6px; min-height:50px; color:var(--muted); font-size:.75rem; } .pm-giphy-result{ overflow:hidden; padding:0; aspect-ratio:1.4; border-radius:9px; background:#edf0f2; } .pm-giphy-result img{ display:block; width:100%; height:100%; object-fit:cover; } .pm-giphy-powered{ display:block; width:130px; max-width:50%; margin: 12px 0 0 auto; } /* ---------------------------------------------------------- Mobil ---------------------------------------------------------- */ @media(max-width:760px){ .pm-toast{ left:10px; right:10px; top:10px; width:auto; } .pm-shell-v2{ min-height:0; } .pm-chat-head{ align-items:flex-start; flex-direction:column; } .pm-delete-thread{ width:100%; } .pm-messages-v2{ min-height:330px; max-height:55vh; padding: 13px 10px 22px; } .pm-bubble{ width:92%; } .pm-compose-v2{ grid-template-columns: 40px 40px minmax(0,1fr) 52px; gap:6px; padding:8px; } .pm-tool-button{ width:40px; height:42px; } .pm-send-button{ width:52px; padding:0; font-size:.72rem; } .pm-giphy-popover{ position:fixed; left:8px; right:8px; bottom:72px; width:auto; max-height:62vh; } .pm-giphy-results{ grid-template-columns: repeat(2,minmax(0,1fr)); } } /* ========================================================== ET-HOST GUEST14 MASTER LIVE ========================================================== */ .guest-age-check{ margin-top:12px; } .guest-age-check span{ line-height:1.35; } .guest-age-note{ display:block; margin: 5px 0 12px; color:var(--muted); line-height:1.4; font-size:.68rem; } /* ---------------------------------------------------------- MASTER LIVE ---------------------------------------------------------- */ .master-live-panel{ display:flex; align-items:center; gap:13px; margin: 0 0 20px; padding: 15px 18px; border: 1px solid #dfe5e8; border-radius:15px; background:#fff; box-shadow: 0 7px 25px rgba(20,30,40,.05); } .master-live-icon{ display:grid; place-items:center; width:43px; height:43px; flex:0 0 43px; border-radius:13px; background:#eaf8ee; color:#22a447; font-size:1.1rem; } .master-live-panel>div:nth-child(2){ flex:1; } .master-live-panel small{ display:block; margin-bottom:2px; color:#75808a; font-size:.65rem; font-weight:800; letter-spacing:.07em; } .master-live-panel strong{ font-size:1.45rem; } .master-live-panel span{ font-size:.78rem; } .master-live-update{ color:#75808a; font-size:.68rem; } /* ---------------------------------------------------------- LIVE BADGE JE CHAT ---------------------------------------------------------- */ .master-tenant-live{ display:block; width:max-content; margin-top:5px; padding: 3px 7px; border-radius:999px; background:#eaf8ee; color:#18883a; font-size:.62rem; font-weight:800; } .master-tenant-live::before{ content:'●'; margin-right:5px; font-size:.55rem; } .master-tenant-live.offline{ background:#f2f3f4; color:#7b858c; } /* ---------------------------------------------------------- MOBIL ---------------------------------------------------------- */ @media(max-width:760px){ .master-live-panel{ align-items:flex-start; flex-wrap:wrap; padding:13px; } .master-live-update{ width:100%; padding-left:56px; } } /* ========================================================== ET-HOST PLATFORM LEGAL PACK ========================================================== */ .platform-legal-strip{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px 18px; width:100%; margin-top:28px; padding:20px; border-top: 1px solid var(--line,#e4e7ea); font-size:.73rem; } .platform-legal-strip a{ color:var(--muted,#68727b); text-decoration:none; } .platform-legal-strip a:hover{ text-decoration:underline; } .legal-platform{ width:min( 980px, calc(100% - 28px) ); margin:28px auto 60px; } .legal-back{ display:inline-block; margin-bottom:15px; color:var(--muted,#68727b); text-decoration:none; font-size:.78rem; } .legal-nav{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; } .legal-nav a{ padding:8px 11px; border:1px solid #dfe4e7; border-radius:999px; background:#fff; color:#30363b; text-decoration:none; font-size:.72rem; font-weight:700; } .legal-document{ padding:clamp( 20px, 4vw, 44px ); border:1px solid #e1e5e8; border-radius:18px; background:#fff; box-shadow: 0 10px 35px rgba(20,30,40,.06); } .legal-document h1{ margin:0 0 6px; font-size:clamp( 1.55rem, 4vw, 2.2rem ); } .legal-document h2{ margin:30px 0 9px; font-size:1.08rem; } .legal-document p, .legal-document li{ line-height:1.65; } .legal-document ul{ padding-left:22px; } .legal-document a{ word-break:break-word; } .legal-version{ margin-bottom:26px; color:var(--muted,#68727b); font-size:.72rem; } .legal-highlight{ margin:18px 0 25px; padding:14px 16px; border-left: 4px solid var(--primary,#ef5547); border-radius: 0 10px 10px 0; background:#f7f8f9; line-height:1.55; } @media(max-width:760px){ .legal-platform{ width:calc(100% - 16px); margin-top:12px; } .legal-document{ padding:18px 15px; border-radius:13px; } .legal-nav{ gap:5px; } .legal-nav a{ flex:1 1 calc(50% - 5px); text-align:center; } .platform-legal-strip{ justify-content:flex-start; padding:16px 20px; } } /* ========================================================== ET-HOST LEGAL WORKFLOW V1 ========================================================== */ .illegal-report-form{ display:grid; gap:14px; margin-top:24px; } .illegal-report-form label{ display:grid; gap:6px; } .illegal-report-form textarea{ resize:vertical; } .legal-success-card{ width:min(620px,100%); margin:50px auto; padding:30px; border:1px solid #dfe5e8; border-radius:18px; background:#fff; text-align:center; box-shadow: 0 14px 40px rgba(20,30,40,.08); } .legal-success-icon{ display:grid; place-items:center; width:52px; height:52px; margin: 0 auto 15px; border-radius:50%; background:#eaf8ef; color:#16843a; font-size:1.4rem; font-weight:900; } .legal-decision-text{ margin:12px 0; padding:14px; border-radius:10px; background:#f6f7f8; line-height:1.6; } /* ---------------------------------------------------------- MASTER RECHTSMELDUNGEN ---------------------------------------------------------- */ .report-filter{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; } .report-filter a{ padding:7px 10px; border:1px solid #dfe4e7; border-radius:999px; background:#fff; color:inherit; text-decoration:none; font-size:.7rem; } .master-report-card{ margin-bottom:16px; } .report-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .report-card-head h2{ margin:3px 0 0; } .report-status{ padding:5px 8px; border-radius:999px; background:#eff1f2; font-size:.66rem; font-weight:900; } .report-status.status-new{ background:#fff0d2; color:#80590b; } .report-status.status-reviewing{ background:#e8f2ff; color:#285f9b; } .report-status.status-acted{ background:#e9f8ee; color:#207940; } .report-status.status-no_action{ background:#eff1f2; color:#657079; } .report-facts{ display:grid; grid-template-columns: repeat( 3, minmax(0,1fr) ); gap:8px; margin:15px 0; } .report-facts>div{ display:grid; gap:3px; min-width:0; padding:11px; border-radius:10px; background:#f6f7f8; } .report-facts small{ overflow:hidden; color:var(--muted); text-overflow:ellipsis; font-size:.64rem; } .report-facts strong{ font-size:.76rem; } .report-location{ padding:12px; overflow:auto; border-radius:10px; background:#20252b; color:#f1f4f6; white-space:pre-wrap; word-break:break-word; font-size:.72rem; } .report-reason{ padding:12px; border:1px solid #e2e6e8; border-radius:10px; background:#fafbfb; line-height:1.55; font-size:.78rem; } .report-decision-form{ display:grid; gap:11px; margin-top:18px; padding-top:18px; border-top: 1px solid var(--line); } /* ---------------------------------------------------------- AVV ---------------------------------------------------------- */ .avv-status{ display:grid; gap:4px; margin-bottom:15px; padding:14px 16px; border-radius:12px; } .avv-status span{ font-size:.72rem; } .avv-status.accepted{ border:1px solid #bae2c5; background:#edf9f1; } .avv-status.ready{ border:1px solid #c8dcef; background:#eff6ff; } .avv-status.blocked{ border:1px solid #efd69c; background:#fff8e6; } .avv-document h3{ margin:20px 0 7px; font-size:.92rem; } .avv-accept-card{ display:grid; gap:15px; margin-top:18px; padding:19px; border: 2px solid var(--primary); border-radius:15px; background:#fff; } @media(max-width:760px){ .report-facts{ grid-template-columns:1fr; } .report-card-head{ flex-direction:column; } } /* ========================================================== ET-HOST COMMUNITY UI 2A CSS V2 ========================================================== */ @font-face{ font-family:'ETHostFA'; src:url('fontawesome/fa-solid-900.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:block; } .chat-composer{ position:relative; } .community-original-color{ position:absolute !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; } .community-style-button{ font-size:.78rem; font-weight:900; } .community-style-popover{ display:none; position:absolute; z-index:180; right:58px; bottom:64px; width:min(290px,calc(100vw - 30px)); padding:13px; border:1px solid #dde2e5; border-radius:14px; background:#fff; box-shadow: 0 18px 50px rgba(20,30,40,.18); } .community-style-popover.open{ display:grid; gap:11px; } .community-style-popover>strong{ font-size:.8rem; } .community-style-popover label{ display:grid; gap:5px; color:#69737b; font-size:.68rem; } .community-style-popover select, .community-style-popover input[type="color"]{ width:100%; } .community-style-popover input[type="color"]{ height:40px; padding:3px; } .community-reply-bar{ grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border:1px solid #dce2e6; border-left:4px solid var(--primary,#ef5547); border-radius:9px; background:#f7f8f9; } .community-reply-bar[hidden]{ display:none !important; } .community-reply-copy{ display:grid; min-width:0; } .community-reply-copy strong{ font-size:.69rem; } .community-reply-copy small{ overflow:hidden; color:#747e86; white-space:nowrap; text-overflow:ellipsis; font-size:.64rem; } .community-reply-close{ display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; padding:0; border-radius:8px; background:#e9ecee; font-size:1rem; } .community-reply-button{ font-size:.66rem; } .community-message-reply{ margin:4px 0 7px; padding:6px 8px; overflow:hidden; border-left: 3px solid var(--primary,#ef5547); border-radius: 0 7px 7px 0; background: rgba(0,0,0,.035); color:#66717a; white-space:nowrap; text-overflow:ellipsis; font-size:.66rem; } .community-status-control{ margin-left:auto; } .community-status-control select{ min-height:31px; max-width:145px; padding:4px 25px 4px 7px; border-radius:8px; font-size:.66rem; } .community-status-badge{ display:grid; place-items:center; flex:0 0 22px; width:22px; height:22px; margin-left:auto; border-radius:7px; background:#f0f2f3; color:#66717a; } .community-status-badge::before{ font-family:'ETHostFA'; font-size:.68rem; font-weight:900; } .community-status-badge[data-status="online"]{ background:#eaf8ee; color:#259548; } .community-status-badge[data-status="online"]::before{ content:'\f111'; } .community-status-badge[data-status="away"]{ background:#fff5d8; color:#ad7b0a; } .community-status-badge[data-status="away"]::before{ content:'\f017'; } .community-status-badge[data-status="busy"]{ background:#fff0e3; color:#c66a15; } .community-status-badge[data-status="busy"]::before{ content:'\f06a'; } .community-status-badge[data-status="music"]{ background:#edf0ff; color:#5a62b4; } .community-status-badge[data-status="music"]::before{ content:'\f001'; } .community-status-badge[data-status="dnd"]{ background:#ffe9eb; color:#c23847; } .community-status-badge[data-status="dnd"]::before{ content:'\f05e'; } @media(max-width:760px){ .community-style-popover{ position:fixed; left:8px; right:8px; bottom:72px; width:auto; } .community-status-control{ width:100%; margin:6px 0 0; } .community-status-control select{ width:100%; max-width:none; } } /* ========================================================== ET-HOST COMMUNITY PROFILE UX CSS V2 ========================================================== */ /* ---------------------------------------------------------- COMPOSER + STATUS ---------------------------------------------------------- */ .composer-status-control{ display:flex; align-items:center; gap:5px; height:44px; min-width:0; padding: 0 6px; border: 1px solid #dfe4e7; border-radius:11px; background:#fff; } .composer-status-dot{ color:#2aa75b; font-size:.65rem; } .composer-status-control[data-status="away"] .composer-status-dot{ color:#c29019; } .composer-status-control[data-status="busy"] .composer-status-dot{ color:#d17221; } .composer-status-control[data-status="music"] .composer-status-dot{ color:#6470c4; } .composer-status-control[data-status="dnd"] .composer-status-dot{ color:#cf4653; } .composer-status-control select{ width:108px; height:34px; padding: 0 20px 0 2px; border:0 !important; background:transparent; box-shadow:none !important; font-size:.62rem; cursor:pointer; } .user-head .community-status-control{ display:none !important; } /* * Bestehendes Composer-Grid um den Status erweitern. */ @media(min-width:761px){ .chat-composer.has-giphy{ grid-template-columns: 42px 42px 42px minmax(0,1fr) 120px 44px 48px !important; } .chat-composer.has-giphy #chatInput{ grid-column:4 !important; } .chat-composer.has-giphy .composer-status-control{ grid-column:5 !important; } .chat-composer.has-giphy #communityStyleButton{ grid-column:6 !important; } .chat-composer.has-giphy .send-btn{ grid-column:7 !important; } .chat-composer:not(.has-giphy){ grid-template-columns: 42px 42px minmax(0,1fr) 120px 44px 48px !important; } .chat-composer:not(.has-giphy) #chatInput{ grid-column:3 !important; } .chat-composer:not(.has-giphy) .composer-status-control{ grid-column:4 !important; } .chat-composer:not(.has-giphy) #communityStyleButton{ grid-column:5 !important; } .chat-composer:not(.has-giphy) .send-btn{ grid-column:6 !important; } } /* ---------------------------------------------------------- ONLINE-LISTE ---------------------------------------------------------- */ .user-head{ display:grid; grid-template-columns: minmax(0,1fr) auto; align-items:center; gap: 3px 8px; padding: 13px 12px 9px; } .all-profiles-link{ grid-column:2; grid-row:1 / span 2; display:flex; align-items:center; justify-content:center; padding: 6px 8px; border: 1px solid #e1e5e8; border-radius:8px; background:#f6f8f9; color:#333d45; text-decoration:none; font-size:.58rem; font-weight:800; } .all-profiles-link:hover{ background:#edf1f3; } #onlineUsers{ display:grid; gap:6px; padding: 6px 8px 12px; } #onlineUsers .user-row{ display:grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items:center; gap:9px; min-width:0; padding:9px; border: 1px solid transparent; border-radius:12px; background:transparent; transition: background .15s ease, border-color .15s ease, transform .15s ease; } #onlineUsers .user-row.has-profile{ cursor:pointer; } #onlineUsers .user-row:hover{ border-color:#e1e5e8; background:#f7f9fa; } #onlineUsers .user-row.has-profile:hover{ transform: translateY(-1px); } #onlineUsers .avatar.small, #onlineUsers .user-avatar{ width:42px !important; height:42px !important; border-radius:11px !important; object-fit:cover; } #onlineUsers .user-row > div{ display:grid; gap:1px; min-width:0; } #onlineUsers .user-row b{ display:flex; align-items:center; flex-wrap:wrap; gap:5px; min-width:0; font-size:.73rem; } #onlineUsers .user-row b a{ overflow:hidden; color:#1f252a; text-decoration:none; white-space:nowrap; text-overflow:ellipsis; } #onlineUsers .user-row b em{ padding: 2px 5px; border-radius:999px; background:#eef1ff; color:#5963b4; font-size:.5rem; font-style:normal; } #onlineUsers .user-row > div > small{ color:#737e86; font-size:.57rem; } .online-status-label{ font-weight:700; } .online-status-label[data-status="online"]{ color:#26954d !important; } .online-status-label[data-status="away"]{ color:#a87914 !important; } .online-status-label[data-status="busy"]{ color:#be6619 !important; } .online-status-label[data-status="music"]{ color:#5e69ba !important; } .online-status-label[data-status="dnd"]{ color:#c63f4d !important; } .online-profile-label{ margin-top:2px; color:#a0a7ac !important; font-size:.51rem !important; } .user-row.has-profile:hover .online-profile-label{ color: var(--primary,#ef5547) !important; } .old-online-dot{ display:none !important; } #onlineUsers .community-status-badge{ width:25px; height:25px; margin:0; border-radius:8px; } /* ---------------------------------------------------------- ALLE PROFILE ---------------------------------------------------------- */ .member-directory-shell{ width:min( 1180px, calc(100% - 28px) ); margin: 26px auto 60px; } .member-directory-top{ display:flex; align-items:center; gap:18px; margin-bottom:20px; } .member-directory-top h1{ margin: 2px 0; font-size:1.65rem; } .member-directory-top p{ margin:0; color:var(--muted); font-size:.72rem; } .member-directory-grid{ display:grid; grid-template-columns: repeat( auto-fill, minmax(260px,1fr) ); gap:12px; } .member-directory-card{ display:grid; grid-template-columns: 58px minmax(0,1fr); gap:13px; padding:15px; border: 1px solid #e0e5e8; border-radius:15px; background:#fff; color:inherit; text-decoration:none; box-shadow: 0 5px 18px rgba(20,30,40,.04); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } .member-directory-card:hover{ transform: translateY(-2px); border-color:#cfd7dc; box-shadow: 0 10px 28px rgba(20,30,40,.08); } .member-avatar-wrap{ position:relative; width:58px; height:58px; } .member-card-avatar{ display:grid; place-items:center; width:58px; height:58px; border-radius:15px; object-fit:cover; } .member-card-avatar-fallback{ background: linear-gradient( 145deg, #123e72, #1471bd ); color:#fff; font-size:1.2rem; font-weight:900; } .member-online-dot{ position:absolute; right:-2px; bottom:-2px; width:14px; height:14px; border: 3px solid #fff; border-radius:50%; background:#27ac5b; } .member-directory-info{ display:grid; align-content:start; gap:3px; min-width:0; } .member-name-line{ display:flex; align-items:center; gap:6px; } .member-name-line strong{ overflow:hidden; font-size:.82rem; white-space:nowrap; text-overflow:ellipsis; } .member-you{ padding: 2px 5px; border-radius:999px; background:#edf1ff; color:#5761ae; font-size:.5rem; font-weight:800; } .member-role{ color:#67727a; font-size:.6rem; } .member-status, .member-lastseen, .member-location{ font-size:.57rem; } .member-status{ color:#27954d; } .member-lastseen{ color:#959da3; } .member-location{ color:#737d84; } .member-directory-info p{ margin: 5px 0 2px; color:#606a72; line-height:1.35; font-size:.63rem; } .member-open-profile{ margin-top:5px; color: var(--primary,#ef5547); font-size:.56rem; font-weight:800; } /* ---------------------------------------------------------- MOBIL ---------------------------------------------------------- */ @media(max-width:760px){ .composer-status-control{ grid-column: 1 / -1 !important; height:36px; justify-content:flex-end; padding: 0 8px; } .composer-status-control select{ width:auto; min-width:130px; height:30px; } .user-head{ padding: 10px 9px; } #onlineUsers .user-row{ grid-template-columns: 38px minmax(0,1fr) auto; gap:7px; padding:8px; } #onlineUsers .avatar.small, #onlineUsers .user-avatar{ width:38px !important; height:38px !important; } .member-directory-shell{ width: calc(100% - 16px); margin-top:14px; } .member-directory-top{ align-items:flex-start; flex-direction:column; gap:9px; } .member-directory-grid{ grid-template-columns:1fr; } } /* ========================================================== ET-HOST COMMUNITY PROFILE 2B CSS ========================================================== */ .profile2-shell{ width:min( 1120px, calc(100% - 28px) ); margin: 24px auto 60px; } .profile2-topbar{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; } .profile2-layout{ display:grid; grid-template-columns: 270px minmax(0,1fr); gap:14px; align-items:start; } .profile2-summary, .profile2-card{ border: 1px solid #e0e5e8; border-radius:16px; background:#fff; box-shadow: 0 6px 24px rgba(20,30,40,.045); } .profile2-summary{ position:sticky; top:16px; display:grid; justify-items:center; gap:7px; padding:22px; text-align:center; } .profile2-summary h1{ margin: 7px 0 0; font-size:1.2rem; } .profile2-avatar{ display:grid; place-items:center; width:118px; height:118px; border-radius:22px; object-fit:cover; } .profile2-avatar-fallback{ background: linear-gradient( 145deg, #123e72, #1675c1 ); color:#fff; font-size:2.2rem; font-weight:900; } .profile2-role{ display:inline-flex; padding: 4px 8px; border-radius:999px; background:#eef2f5; color:#56616a; font-size:.6rem; font-weight:800; } .profile2-age{ color:#616c74; font-size:.68rem; } .profile2-stat{ display:grid; justify-items:center; gap:1px; width:100%; margin-top:10px; padding:12px; border-radius:12px; background:#fff2f4; } .profile2-stat b{ font-size:1.25rem; } .profile2-stat span{ color:#7c5960; font-size:.58rem; } .profile2-stat.big{ margin-bottom:14px; } .profile2-stat.big b{ font-size:1.7rem; } .profile2-facts{ display:grid; gap:7px; width:100%; margin-top:7px; } .profile2-facts span{ display:grid; gap:2px; padding: 8px 9px; border-radius:9px; background:#f7f8f9; color:#818a90; text-align:left; font-size:.56rem; } .profile2-facts strong{ color:#333b41; font-size:.67rem; } .profile2-main{ display:grid; gap:14px; } .profile2-card{ padding:18px; } .profile2-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:15px; } .profile2-card-head h2{ margin: 2px 0 0; font-size:1rem; } .profile2-private-note{ color:#90989e; font-size:.56rem; } .profile2-form{ display:grid; grid-template-columns: repeat( 2, minmax(0,1fr) ); gap:12px; } .profile2-form>label{ display:grid; gap:5px; min-width:0; font-size:.67rem; font-weight:700; } .profile2-form label small{ color:#929a9f; font-size:.54rem; font-weight:400; } .profile2-full{ grid-column: 1 / -1; } .profile2-form textarea{ resize:vertical; } .profile2-flirt, .profile2-flirt-disabled{ padding:14px; border-radius:12px; } .profile2-flirt{ display:grid; gap:10px; border: 1px solid #f2d5db; background:#fff7f8; } .profile2-flirt h3{ margin: 2px 0; font-size:.85rem; } .profile2-flirt p, .profile2-flirt-disabled p{ margin: 3px 0 0; color:#737d84; font-size:.62rem; } .profile2-flirt-disabled{ border: 1px solid #e1e5e8; background:#f7f8f9; } .profile2-actions{ display:flex; justify-content:flex-end; } .profile2-friend{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 9px 0; border-bottom: 1px solid #edf0f2; } .profile2-friend:last-child{ border-bottom:0; } .profile2-friend>a{ display:grid; color:inherit; text-decoration:none; } .profile2-friend>a small{ color:#90989e; font-size:.55rem; } .profile2-friend-actions{ display:flex; gap:5px; } .profile2-friend-actions form{ margin:0; } .btn-link-danger{ color:#b73d48; } .profile2-empty{ color:#858e94; font-size:.68rem; } /* ---------------------------------------------------------- ÖFFENTLICHES PROFIL ---------------------------------------------------------- */ .profile2-public-layout{ display:grid; grid-template-columns: minmax(0,1fr) 270px; gap:14px; align-items:start; } .profile2-public-main, .profile2-contact{ display:grid; gap:14px; } .profile2-hero{ display:flex; gap:18px; padding:20px; border: 1px solid #e0e5e8; border-radius:17px; background:#fff; box-shadow: 0 6px 24px rgba(20,30,40,.045); } .profile2-hero-copy{ display:grid; align-content:center; gap:6px; } .profile2-hero-copy h1{ margin:0; font-size:1.5rem; } .profile2-badges{ display:flex; flex-wrap:wrap; gap:5px; } .profile2-badges span{ padding: 4px 7px; border-radius:999px; background:#f0f3f5; color:#59646c; font-size:.56rem; font-weight:700; } .profile2-badges .looking-badge{ background:#fff0f4; color:#ac3f59; } .profile2-location{ margin:3px 0 0; color:#737c83; font-size:.66rem; } .profile2-about{ margin-top:10px; line-height:1.6; font-size:.75rem; } .profile2-since{ display:block; margin-top:15px; color:#939ba0; font-size:.56rem; } .profile2-contact-status{ font-size:.68rem; } .kiss-form{ margin:0; } .kiss-button{ width:100%; background: linear-gradient( 135deg, #e84f71, #d33c61 ); } .kiss-given{ padding:10px; border-radius:10px; background:#fff0f4; color:#a8445d; text-align:center; font-size:.65rem; font-weight:800; } /* ---------------------------------------------------------- MITGLIEDERVERZEICHNIS 2B ---------------------------------------------------------- */ .member2-shell{ width:min( 1180px, calc(100% - 28px) ); margin: 24px auto 60px; } .member2-head{ display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:18px; } .member2-head h1{ margin: 2px 0; font-size:1.55rem; } .member2-head p{ margin:0; color:#848e95; font-size:.67rem; } .member2-grid{ display:grid; grid-template-columns: repeat( auto-fill, minmax(270px,1fr) ); gap:11px; } .member2-card{ display:grid; grid-template-columns: 60px minmax(0,1fr); gap:12px; padding:14px; border: 1px solid #e0e5e8; border-radius:15px; background:#fff; color:inherit; text-decoration:none; box-shadow: 0 5px 18px rgba(20,30,40,.035); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } .member2-card:hover{ transform: translateY(-2px); border-color:#ccd5da; box-shadow: 0 10px 26px rgba(20,30,40,.08); } .member2-avatar-wrap{ position:relative; width:60px; height:60px; } .member2-avatar{ display:grid; place-items:center; width:60px; height:60px; border-radius:15px; object-fit:cover; } .member2-avatar-fallback{ background: linear-gradient( 145deg, #123e72, #1477c5 ); color:#fff; font-size:1.3rem; font-weight:900; } .member2-online-dot{ position:absolute; right:-2px; bottom:-2px; width:15px; height:15px; border: 3px solid #fff; border-radius:50%; background:#27aa5b; } .member2-body{ display:grid; align-content:start; gap:3px; min-width:0; } .member2-name{ display:flex; align-items:center; gap:5px; } .member2-name strong{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:.78rem; } .member2-name span{ padding: 2px 5px; border-radius:999px; background:#edf1ff; color:#5862af; font-size:.48rem; font-weight:800; } .member2-role{ color:#727c83; font-size:.57rem; } .member2-tags{ display:flex; flex-wrap:wrap; gap:4px; margin-top:3px; } .member2-tags span{ padding: 3px 5px; border-radius:6px; background:#f2f4f5; color:#69747b; font-size:.51rem; } .member2-tags .looking{ background:#fff0f4; color:#ab455e; } .member2-status{ color:#26934b; font-size:.55rem; font-weight:700; } .member2-last, .member2-location{ color:#8c959b; font-size:.53rem; } .member2-kisses{ margin-top:3px; color:#b34c65; font-size:.55rem; } .member2-open{ margin-top:3px; color: var(--primary,#ef5547); font-size:.53rem; font-weight:800; } /* ---------------------------------------------------------- MOBIL ---------------------------------------------------------- */ @media(max-width:760px){ .profile2-shell, .member2-shell{ width: calc(100% - 16px); margin-top:12px; } .profile2-layout, .profile2-public-layout{ grid-template-columns:1fr; } .profile2-summary{ position:static; } .profile2-form{ grid-template-columns:1fr; } .profile2-full{ grid-column:auto; } .profile2-hero{ flex-direction:column; align-items:center; text-align:center; } .profile2-badges{ justify-content:center; } .member2-head{ align-items:flex-start; flex-direction:column; } .member2-grid{ grid-template-columns:1fr; } } /* ========================================================== ET-HOST MOBILE CHAT STABILIZER V3 Ziel: - Composer bleibt vollständig sichtbar - Nachrichteneingabe hat immer genug Platz - Zusatzfunktionen dürfen umbrechen - Status bleibt bedienbar - Popovers bleiben im sichtbaren Bereich - 100dvh statt problematischem mobilem 100vh ========================================================== */ /* Gastlogin muss auch ohne JavaScript sichtbar sein */ .guest-age-server{ display:flex !important; align-items:flex-start !important; gap:9px !important; width:100% !important; margin: 10px 0 12px !important; padding: 10px 11px !important; border: 1px solid #e0e5e8 !important; border-radius: 10px !important; background: #f7f9fa !important; color: #444d54 !important; font-size: .72rem !important; line-height: 1.35 !important; } .guest-age-server input{ flex: 0 0 auto !important; width: 18px !important; height: 18px !important; margin: 0 !important; } @media(max-width:760px){ /* ------------------------------------------------------ Grundlayout ------------------------------------------------------ */ html, body{ max-width: 100% !important; overflow-x: hidden !important; } body.chat-page{ overscroll-behavior: none; } .chat-page .chat-layout{ box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; height: calc(100dvh - 118px) !important; min-height: 420px !important; padding: 5px !important; gap: 0 !important; grid-template-columns: minmax(0,1fr) !important; } .chat-page .chat-panel{ display: grid !important; grid-template-rows: auto auto minmax(0,1fr) auto !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; border-radius: 10px !important; overflow: hidden !important; } .chat-page .messages{ min-width: 0 !important; min-height: 0 !important; padding: 9px 10px 20px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } /* ------------------------------------------------------ Räume ------------------------------------------------------ */ .chat-page .room-tabs{ gap: 5px !important; padding: 7px !important; } .chat-page .room-tabs a, .chat-page .room-tabs button{ min-height: 34px !important; padding: 6px 9px !important; font-size: .68rem !important; } /* ------------------------------------------------------ Begrüßung ------------------------------------------------------ */ .chat-page .welcome-banner{ margin: 5px 7px 0 !important; padding: 7px 9px !important; max-height: 62px !important; overflow-y: auto !important; font-size: .66rem !important; line-height: 1.35 !important; } /* ------------------------------------------------------ Nachrichten ------------------------------------------------------ */ .chat-page .message{ grid-template-columns: 34px minmax(0,1fr) !important; gap: 7px !important; padding: 7px 0 !important; } .chat-page .message .avatar{ width: 34px !important; height: 34px !important; border-radius: 9px !important; } .chat-page .msg-meta{ gap: 5px !important; min-width: 0 !important; } .chat-page .msg-meta b{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .76rem !important; } .chat-page .message p{ max-width: 100% !important; overflow-wrap: anywhere !important; font-size: .76rem !important; line-height: 1.42 !important; } /* ------------------------------------------------------ COMPOSER Auf Mobilgeräten bewusst FLEX + WRAP statt dem alten festen Grid. Dadurch passen neue Funktionen wie Status, Aa und GIPHY ebenfalls hinein. ------------------------------------------------------ */ .chat-page .chat-composer{ position: relative !important; z-index: 20 !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; align-content: center !important; gap: 6px !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; padding: 7px !important; border-top: 1px solid #e2e6e9 !important; background: #fff !important; overflow: visible !important; } /* * Kleine Funktionsbuttons bilden die obere Zeile. */ .chat-page .chat-composer > .icon-btn, .chat-page .chat-composer > .upload-label, .chat-page .chat-composer > .giphy-toggle, .chat-page .chat-composer > button:not(.send-btn), .chat-page .chat-composer > label:not(.composer-status-control){ order: 10; flex: 0 0 38px !important; width: 38px !important; min-width: 38px !important; max-width: 38px !important; height: 38px !important; min-height: 38px !important; padding: 0 !important; margin: 0 !important; display: grid !important; place-items: center !important; } /* * Status darf den restlichen Platz der oberen Zeile * benutzen. */ .chat-page .composer-status-control{ order: 11 !important; flex: 1 1 132px !important; width: auto !important; min-width: 112px !important; max-width: none !important; height: 38px !important; margin: 0 !important; } .chat-page .composer-status-control select{ display: block !important; width: 100% !important; max-width: 100% !important; height: 38px !important; min-height: 38px !important; padding: 0 28px 0 8px !important; font-size: .62rem !important; } /* * Texteingabe kommt immer in die zweite Zeile. */ .chat-page .chat-composer #chatInput{ order: 20 !important; display: block !important; visibility: visible !important; opacity: 1 !important; flex: 1 1 calc(100% - 54px) !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 8px 10px !important; border-radius: 10px !important; font-size: 16px !important; line-height: normal !important; } /* * Senden bleibt immer rechts neben dem Texteingabefeld. */ .chat-page .chat-composer .send-btn{ order: 21 !important; display: grid !important; place-items: center !important; flex: 0 0 46px !important; width: 46px !important; min-width: 46px !important; max-width: 46px !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important; } /* * Farbauswahl bleibt mobil über Aa erreichbar. * Das nackte color-input nimmt keinen Platz ein. */ .chat-page .chat-composer #chatColor{ position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; } /* * Hidden Inputs dürfen nicht in das Flexlayout eingreifen. */ .chat-page .chat-composer input[type="hidden"]{ display: none !important; } /* ------------------------------------------------------ Antwortleiste ------------------------------------------------------ */ .chat-page #communityReplyBar{ order: 5 !important; flex: 1 0 100% !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 !important; } /* ------------------------------------------------------ Popovers ------------------------------------------------------ */ .chat-page .smiley-popover, .chat-page .giphy-popover, .chat-page #giphyPopover, .chat-page #chatGiphyPopover{ left: 6px !important; right: 6px !important; bottom: calc(100% + 5px) !important; width: auto !important; max-width: none !important; max-height: 45dvh !important; overflow: auto !important; z-index: 100 !important; } .chat-page .smiley-grid{ grid-template-columns: repeat(6,minmax(0,1fr)) !important; max-height: 32dvh !important; } /* ------------------------------------------------------ Upload-Vorschau ------------------------------------------------------ */ .chat-page .upload-preview{ left: 7px !important; right: 7px !important; bottom: calc(100% + 5px) !important; width: auto !important; box-sizing: border-box !important; z-index: 110 !important; } /* ------------------------------------------------------ ONLINE-LISTE MOBILE ------------------------------------------------------ */ .chat-page .user-panel{ position: fixed !important; top: 74px !important; right: 8px !important; bottom: 8px !important; left: auto !important; width: min(330px,calc(100vw - 16px)) !important; max-width: calc(100vw - 16px) !important; height: auto !important; border-radius: 14px !important; z-index: 200 !important; overflow-y: auto !important; } .chat-page .user-head{ padding: 10px !important; } .chat-page .user-row{ min-width: 0 !important; padding: 8px 9px !important; } /* ------------------------------------------------------ Mobile Login ------------------------------------------------------ */ .tenant-login-card, .login-box, .register-panel{ max-width: 100% !important; box-sizing: border-box !important; } .tenant-login-card input, .tenant-login-card select, .tenant-login-card button{ max-width: 100% !important; box-sizing: border-box !important; } .guest-age-server{ font-size: .68rem !important; } } /* * Sehr schmale Geräte */ @media(max-width:390px){ .chat-page .chat-composer{ gap: 5px !important; padding: 6px !important; } .chat-page .chat-composer > .icon-btn, .chat-page .chat-composer > .upload-label, .chat-page .chat-composer > .giphy-toggle, .chat-page .chat-composer > button:not(.send-btn), .chat-page .chat-composer > label:not(.composer-status-control){ flex-basis: 35px !important; width: 35px !important; min-width: 35px !important; max-width: 35px !important; height: 36px !important; min-height: 36px !important; } .chat-page .composer-status-control{ min-width: 100px !important; } .chat-page .composer-status-control select{ font-size: .57rem !important; } .chat-page .smiley-grid{ grid-template-columns: repeat(5,minmax(0,1fr)) !important; } } /* ========================================================== ET-HOST MOBILE CHAT FOUNDATION V4 Final override: no fixed header/footer subtraction. The shell uses the real visible viewport height and lets header/main/footer size themselves naturally. ========================================================== */ @media(max-width:760px){ .chat-page{ height:100%; overflow:hidden !important; } .chat-page .tenant-shell{ display:flex !important; flex-direction:column !important; width:100% !important; height:var(--ethost-chat-vh,100dvh) !important; min-height:var(--ethost-chat-vh,100dvh) !important; max-height:var(--ethost-chat-vh,100dvh) !important; overflow:hidden !important; background-attachment:scroll !important; } .chat-page .tenant-head{ position:relative !important; top:auto !important; flex:0 0 auto !important; width:100% !important; z-index:50 !important; } .chat-page .chat-layout{ flex:1 1 auto !important; width:100% !important; height:auto !important; min-height:0 !important; max-height:none !important; margin:0 auto !important; overflow:hidden !important; } .chat-page .chat-panel{ min-height:0 !important; height:100% !important; overflow:hidden !important; } .chat-page .messages{ min-height:0 !important; overscroll-behavior:contain; } .chat-page .chat-composer{ flex:0 0 auto !important; padding-bottom:max(7px,env(safe-area-inset-bottom)) !important; box-shadow:0 -7px 18px rgba(22,26,31,.06); } .chat-page .chat-composer #chatInput{ background:#fff !important; border:1px solid #cfd5da !important; box-shadow:none !important; } .chat-page .chat-composer #chatInput:focus{ border-color:var(--primary) !important; box-shadow:0 0 0 3px rgba(239,85,71,.11) !important; } .chat-page .msg-tools{ display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:6px !important; margin-top:6px !important; opacity:1 !important; } .chat-page .msg-tools button{ min-height:34px !important; padding:5px 9px !important; border:1px solid #e2e6e9 !important; border-radius:8px !important; background:#f7f8f9 !important; color:#59636d !important; touch-action:manipulation; } .chat-page .user-panel{ top:calc(var(--ethost-chat-head,74px) + 6px) !important; bottom:calc(61px + env(safe-area-inset-bottom)) !important; max-height:calc(var(--ethost-chat-vh,100dvh) - var(--ethost-chat-head,74px) - 73px) !important; } .tenant-login-page{ min-height:100dvh !important; align-items:start !important; padding:18px 10px 30px !important; } .tenant-login-card{ width:min(900px,100%) !important; padding:18px !important; } .guest-login-box .guest-age-server{ order:0; margin:2px 0 0 !important; } .guest-login-box .guest-age-note{ display:block; margin:-8px 0 2px; font-size:.68rem; line-height:1.35; } } @media(max-width:420px){ .chat-page .tenant-head{ gap:7px !important; padding:7px 8px !important; } .chat-page .tenant-actions{ gap:3px !important; } .chat-page .tenant-actions>a, .chat-page .tenant-actions button{ min-height:34px !important; padding:6px 7px !important; } .chat-page .chat-composer #chatInput{ min-height:46px !important; height:46px !important; } .chat-page .chat-composer .send-btn{ min-height:46px !important; height:46px !important; } } /* ========================================================== ET-HOST CONSENT + BETA UI V1 ========================================================== */ .footer-link-button{ appearance:none; border:0; background:transparent; color:inherit; padding:0; font:inherit; cursor:pointer; text-decoration:none; } .footer-link-button:hover, .footer-link-button:focus-visible{ color:var(--primary); text-decoration:underline; outline:none; } .cookie-consent{ position:fixed; inset:0; z-index:12000; pointer-events:none; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; } .cookie-consent[hidden], .cookie-banner[hidden], .cookie-settings[hidden], .beta-modal[hidden], .cookie-runtime-note[hidden], .consent-media-placeholder[hidden]{ display:none!important; } .cookie-banner{ position:absolute; left:50%; bottom:max(18px,env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(1040px,calc(100vw - 28px)); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:end; padding:22px; border:1px solid rgba(20,25,30,.12); border-radius:18px; background:rgba(255,255,255,.98); box-shadow:0 24px 70px rgba(20,25,30,.24); pointer-events:auto; backdrop-filter:blur(18px); } .cookie-copy h2, .cookie-settings-card h2{ margin:3px 0 8px; color:#20252b; font-size:1.28rem; line-height:1.2; letter-spacing:-.02em; } .cookie-copy p, .cookie-settings-card>p{ margin:0 0 7px; color:#56616b; font-size:.9rem; line-height:1.5; } .cookie-kicker{ display:inline-block; color:var(--primary); font-size:.69rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; } .cookie-small{ font-size:.76rem!important; color:#77818a!important; } .cookie-small a{ text-decoration:underline; text-underline-offset:2px; } .cookie-actions, .cookie-settings-actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; } .cookie-actions .btn, .cookie-settings-actions .btn{ min-height:42px; padding:.72rem .95rem; white-space:nowrap; } .cookie-settings{ position:absolute; inset:0; display:grid; place-items:center; padding:18px; background:rgba(18,22,27,.58); pointer-events:auto; overflow:auto; } .cookie-settings-card{ width:min(680px,100%); max-height:min(760px,calc(100dvh - 36px)); overflow:auto; padding:24px; border:1px solid rgba(20,25,30,.1); border-radius:20px; background:#fff; box-shadow:0 30px 90px rgba(0,0,0,.3); } .cookie-settings-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:10px; } .cookie-close{ flex:0 0 40px; width:40px; height:40px; display:grid; place-items:center; border-radius:10px; background:#f1f3f5; color:#323941; font-size:1.4rem; } .cookie-category{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:18px; margin:12px 0; padding:16px; border:1px solid #e2e6e9; border-radius:14px; background:#fafbfb; } .cookie-category>div{ display:grid; gap:4px; } .cookie-category strong{ color:#252b31; } .cookie-category small{ color:#66717b; line-height:1.45; } .cookie-switch{ display:flex; align-items:center; gap:8px; white-space:nowrap; font-size:.78rem; font-weight:800; } .cookie-switch input{ width:20px; height:20px; margin:0; accent-color:var(--primary); } .cookie-runtime-note{ margin:10px 0!important; padding:10px 12px; border:1px solid #f0dba9; border-radius:10px; background:#fff7df; color:#75571e!important; font-weight:700; } .cookie-settings-open{ overflow:hidden!important; } .consent-media-placeholder{ display:inline-flex; align-items:center; justify-content:center; min-height:40px; margin:8px 0 4px; padding:8px 12px; border:1px dashed #c9cfd5; border-radius:10px; background:#f5f7f8; color:#4f5a64; font-size:.78rem; font-weight:800; } .chat-gif img[data-consent-src]:not([src]), .pm-gif-message img[data-consent-src]:not([src]){ display:none; } .beta-modal{ position:fixed; inset:0; z-index:11000; display:grid; place-items:center; padding:18px; background:rgba(17,21,26,.64); backdrop-filter:blur(6px); } .beta-modal-card{ width:min(590px,100%); padding:28px; border:1px solid rgba(255,255,255,.2); border-radius:22px; background:#fff; box-shadow:0 30px 90px rgba(0,0,0,.32); } .beta-modal-card h2{ margin:8px 0 12px; font-size:clamp(1.65rem,4vw,2.2rem); line-height:1.08; letter-spacing:-.035em; } .beta-modal-card p{ margin:0 0 12px; color:#59636d; line-height:1.55; } .beta-badge{ display:inline-flex; align-items:center; padding:5px 9px; border-radius:999px; background:#fff0ef; color:#b73129; font-size:.72rem; font-weight:900; letter-spacing:.1em; } .beta-modal-note{ padding:11px 12px; border-radius:11px; background:#f4f6f7; color:#4e5962!important; font-size:.86rem; } .beta-modal-card .btn{ margin-top:5px; } @media(max-width:760px){ .site-footer>span:last-child, .tenant-copyright>span:last-child{ flex-wrap:wrap; row-gap:8px; } .cookie-banner{ bottom:max(8px,env(safe-area-inset-bottom)); width:calc(100vw - 16px); grid-template-columns:1fr; gap:14px; padding:16px; border-radius:15px; } .cookie-copy h2{ font-size:1.12rem; } .cookie-copy p{ font-size:.82rem; } .cookie-actions{ display:grid; grid-template-columns:1fr 1fr; width:100%; } .cookie-actions [data-cookie-accept]{ grid-column:1/3; grid-row:1; } .cookie-actions .btn{ width:100%; min-width:0; font-size:.8rem; } .cookie-settings{ align-items:end; padding:8px; } .cookie-settings-card{ max-height:calc(100dvh - 16px); padding:18px 15px max(18px,env(safe-area-inset-bottom)); border-radius:18px; } .cookie-category{ grid-template-columns:1fr; gap:10px; padding:13px; } .cookie-switch{ justify-content:space-between; } .cookie-settings-actions{ display:grid; grid-template-columns:1fr; } .cookie-settings-actions .btn{ width:100%; } .beta-modal{ align-items:end; padding:8px; } .beta-modal-card{ max-height:calc(100dvh - 16px); overflow:auto; padding:20px 16px max(18px,env(safe-area-inset-bottom)); border-radius:18px; } } /* ========================================================== ET-HOST CHAT UX V5 · 0.2.4-beta One composer structure: toolbar + writing row. ========================================================== */ .chat-page .chat-composer{ display:flex!important; flex-direction:column!important; flex-wrap:nowrap!important; gap:7px!important; min-width:0!important; } .chat-page .composer-toolbar{ display:flex!important; align-items:center!important; flex-wrap:wrap!important; gap:6px!important; min-width:0!important; width:100%!important; } .chat-page .composer-input-row{ display:flex!important; align-items:stretch!important; gap:8px!important; min-width:0!important; width:100%!important; } .chat-page .composer-input-row #chatInput{ flex:1 1 auto!important; order:initial!important; width:auto!important; min-width:0!important; max-width:none!important; margin:0!important; } .chat-page .composer-input-row .send-btn{ flex:0 0 48px!important; order:initial!important; width:48px!important; min-width:48px!important; max-width:48px!important; margin:0!important; } .chat-page .composer-toolbar>.icon-btn, .chat-page .composer-toolbar>.upload-label, .chat-page .composer-toolbar>.giphy-toggle, .chat-page .composer-toolbar>button:not(.composer-status-control), .chat-page .composer-toolbar>label:not(.composer-status-control){ flex:0 0 40px!important; width:40px!important; min-width:40px!important; max-width:40px!important; height:40px!important; min-height:40px!important; margin:0!important; padding:0!important; } .chat-page .composer-toolbar .composer-status-control{ flex:1 1 150px!important; width:auto!important; min-width:125px!important; max-width:230px!important; margin:0!important; } .chat-page .composer-toolbar .composer-status-control select{ width:100%!important; min-height:40px!important; } .chat-page #communityReplyBar{ order:initial!important; width:100%!important; flex:none!important; } /* Aa: font and text colour intentionally live in one compact module. */ .chat-page .community-style-popover{ right:auto!important; left:12px!important; bottom:calc(100% + 8px)!important; width:min(310px,calc(100vw - 24px))!important; grid-template-columns:minmax(0,1fr) 82px!important; align-items:end!important; gap:9px!important; padding:12px!important; z-index:520!important; } .chat-page .community-style-popover>strong{ grid-column:1/-1!important; } .chat-page .community-style-popover label{ min-width:0!important; } .chat-page .community-style-popover select{ min-height:40px!important; } .chat-page .community-style-popover input[type="color"]{ min-height:40px!important; height:40px!important; } /* Larger smiley picker with explicit expand/collapse controls. */ .smiley-popover-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; } .smiley-popover-head>div{ display:flex; gap:5px; } .smiley-window-btn{ width:34px; height:34px; display:grid; place-items:center; border:1px solid #e0e4e7; border-radius:9px; background:#f5f7f8; color:#414a52; padding:0; font-size:.95rem; } .chat-page .smiley-popover{ width:min(560px,calc(100vw - 28px))!important; max-height:min(520px,68dvh)!important; padding:12px!important; z-index:600!important; } .chat-page .smiley-grid{ grid-template-columns:repeat(auto-fill,minmax(48px,1fr))!important; max-height:min(380px,52dvh)!important; gap:6px!important; } .chat-page .smiley-grid button{ min-height:46px!important; height:46px!important; font-size:1.45rem!important; } .chat-page .smiley-grid img{ width:36px!important; height:36px!important; } .chat-page .smiley-popover.expanded{ position:fixed!important; inset:clamp(18px,5vh,60px) clamp(18px,7vw,90px)!important; left:auto!important; right:auto!important; bottom:auto!important; width:auto!important; max-width:none!important; height:auto!important; max-height:none!important; display:grid!important; grid-template-rows:auto auto minmax(0,1fr)!important; overflow:hidden!important; z-index:13000!important; } .chat-page .smiley-popover.expanded .smiley-grid{ max-height:none!important; height:100%!important; overflow:auto!important; grid-template-columns:repeat(auto-fill,minmax(58px,1fr))!important; align-content:start!important; } .chat-page .smiley-popover.expanded .smiley-grid button{ min-height:54px!important; height:54px!important; } /* Custom chat navigation links created by the tenant admin. */ .tenant-custom-link{ display:inline-flex!important; align-items:center!important; gap:6px!important; text-decoration:none!important; } .tenant-custom-link-icon{ font-size:1rem; line-height:1; } .tenant-custom-link-label{ white-space:nowrap; } /* Admin link manager + help centre. */ .admin-chat-link-row{ display:grid; grid-template-columns:68px minmax(130px,.8fr) minmax(220px,2fr) 80px auto auto auto; gap:8px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); } .admin-chat-link-row input[type="text"], .admin-chat-link-row input[type="url"], .admin-chat-link-row input[type="number"]{ min-width:0; width:100%; } .admin-help-page .admin-main{ min-width:0; } .admin-help-shell{ width:min(1180px,100%); margin:0 auto; padding:24px 0 60px; } .admin-help-intro{ margin-bottom:18px; } .admin-help-nav{ display:flex; flex-wrap:wrap; gap:7px; margin:0 0 20px; } .admin-help-nav a{ padding:7px 10px; border:1px solid var(--line); border-radius:999px; background:#fff; font-size:.78rem; font-weight:750; } .admin-help-card{ scroll-margin-top:20px; margin:0 0 14px; padding:18px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 8px 24px rgba(20,28,35,.05); } .admin-help-card h2{ margin:0 0 8px; font-size:1.05rem; } .admin-help-card p, .admin-help-card li{ color:#59636d; line-height:1.55; } .admin-help-card ul{ margin:8px 0 0; padding-left:20px; } /* Complete kiss management on the user's own profile. */ .profile2-kiss-help{ margin:0 0 12px; color:#6c757d; font-size:.84rem; } .profile2-kiss-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid var(--line); } .profile2-kiss-row>a{ display:flex; align-items:center; gap:9px; min-width:0; } .profile2-kiss-row>a>span:last-child{ display:grid; min-width:0; } .profile2-kiss-row strong{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .profile2-kiss-row small{ color:#89929b; } .profile2-kiss-mark{ display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px; border-radius:12px; background:#fff0f3; font-size:1.15rem; } .kiss-given{ display:grid; gap:8px; } .kiss-given .kiss-remove-form{ margin:0; } @media(max-width:760px){ .chat-page .chat-composer{ gap:6px!important; padding:7px 8px max(7px,env(safe-area-inset-bottom))!important; } .chat-page .composer-toolbar{ flex-wrap:nowrap!important; overflow-x:auto!important; overflow-y:hidden!important; scrollbar-width:none; padding:0 0 1px!important; } .chat-page .composer-toolbar::-webkit-scrollbar{display:none;} .chat-page .composer-toolbar>.icon-btn, .chat-page .composer-toolbar>.upload-label, .chat-page .composer-toolbar>.giphy-toggle, .chat-page .composer-toolbar>button:not(.composer-status-control), .chat-page .composer-toolbar>label:not(.composer-status-control){ flex:0 0 38px!important; width:38px!important; min-width:38px!important; max-width:38px!important; height:38px!important; min-height:38px!important; } .chat-page .composer-toolbar .composer-status-control{ flex:0 0 132px!important; width:132px!important; min-width:132px!important; max-width:132px!important; } .chat-page .composer-toolbar .composer-status-control select{ min-height:38px!important; height:38px!important; font-size:.64rem!important; } .chat-page .composer-input-row #chatInput, .chat-page .composer-input-row .send-btn{ min-height:46px!important; height:46px!important; } .chat-page .composer-input-row .send-btn{ flex-basis:46px!important; width:46px!important; min-width:46px!important; max-width:46px!important; } .chat-page .community-style-popover{ position:fixed!important; left:8px!important; right:8px!important; bottom:calc(var(--ethost-composer-height,104px) + 8px)!important; width:auto!important; max-width:none!important; } .chat-page .smiley-popover.open{ position:fixed!important; left:8px!important; right:8px!important; bottom:calc(var(--ethost-composer-height,104px) + 8px)!important; width:auto!important; max-width:none!important; max-height:min(62dvh,540px)!important; overflow:hidden!important; } .chat-page .smiley-popover.open:not(.expanded){ display:grid!important; grid-template-rows:auto auto minmax(0,1fr)!important; } .chat-page .smiley-popover.open .smiley-grid{ max-height:45dvh!important; overflow:auto!important; grid-template-columns:repeat(auto-fill,minmax(46px,1fr))!important; } .chat-page .smiley-popover.expanded{ inset:8px!important; left:8px!important; right:8px!important; bottom:8px!important; width:auto!important; height:calc(var(--ethost-chat-vh,100dvh) - 16px)!important; max-height:none!important; } .chat-page .smiley-popover.expanded .smiley-grid{ max-height:none!important; } .tenant-custom-link{ justify-content:center!important; min-width:36px!important; min-height:34px!important; } .tenant-custom-link-label{ display:none!important; } .admin-chat-link-row{ grid-template-columns:58px 1fr; } .admin-chat-link-row>*:nth-child(n+3){ grid-column:1/-1; } .admin-help-shell{ padding:16px 0 40px; } .profile2-kiss-row{ align-items:flex-start; } } @media(max-width:390px){ .chat-page .composer-toolbar>.icon-btn, .chat-page .composer-toolbar>.upload-label, .chat-page .composer-toolbar>.giphy-toggle, .chat-page .composer-toolbar>button:not(.composer-status-control), .chat-page .composer-toolbar>label:not(.composer-status-control){ flex-basis:36px!important; width:36px!important; min-width:36px!important; max-width:36px!important; height:36px!important; min-height:36px!important; } } /* Admin chat-link manager uses the live markup class. */ .chat-link-row{ display:grid; grid-template-columns:110px minmax(140px,.85fr) minmax(240px,2fr) 90px 130px 90px auto; gap:8px; align-items:end; padding:10px 0; border-bottom:1px solid var(--line); } .chat-link-row label{ min-width:0; } .chat-link-row input{ width:100%; min-width:0; } .chat-link-create{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); } @media(max-width:980px){ .chat-link-row{ grid-template-columns:90px 1fr; } .chat-link-row>*:nth-child(n+3){grid-column:1/-1;} } /* The native colour input is a state carrier; Aa is the visible control. */ .chat-page #chatColor{ position:absolute!important; width:1px!important; height:1px!important; opacity:0!important; pointer-events:none!important; } /* ========================================================== ET-HOST CHAT STABILITY V6 · 0.2.5-beta ========================================================== */ /* Der alte native Farb-Picker ist nur noch ein unsichtbarer Zustandswert. So kann kein weißer Browser-Kreis mehr auftauchen. */ .chat-page #chatColor, .chat-page .community-original-color{ display:none!important; width:0!important; height:0!important; min-width:0!important; min-height:0!important; margin:0!important; padding:0!important; border:0!important; opacity:0!important; pointer-events:none!important; } .tenant-actions [data-toggle-users]{ display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:6px!important; } .tenant-online-count{ display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#22272d; color:#fff; font-size:.7rem; line-height:1; font-weight:900; } /* Font Awesome Free Solid wird lokal ausgeliefert. */ .tenant-fa-icon{ font-family:'ETHostFA'!important; font-weight:900!important; font-style:normal!important; font-size:1em; line-height:1; speak:none; } @media(max-width:760px){ .tenant-actions [data-toggle-users]{ min-width:44px!important; min-height:38px!important; padding:6px 7px!important; } .tenant-online-count{ min-width:18px; height:18px; padding:0 5px; font-size:.64rem; } } /* Master: unbestätigte Chat-Anträge */ .master-pending-list{ display:grid; gap:10px; } .master-pending-row{ display:grid; grid-template-columns:minmax(180px,1.2fr) minmax(180px,1fr) minmax(170px,.9fr) minmax(160px,.9fr) auto; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); } .master-pending-row>span{ min-width:0; } .master-pending-row b, .master-pending-row small{ display:block; overflow:hidden; text-overflow:ellipsis; } .master-pending-row small{ color:#7a838c; margin-top:3px; } @media(max-width:900px){ .master-pending-row{ grid-template-columns:1fr; gap:5px; } } /* Hilfe: technische Code-Beispiele */ .admin-help-code{ display:block; margin:8px 0; padding:10px 12px; overflow:auto; border:1px solid var(--line); border-radius:10px; background:#f6f8f9; color:#27313a; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.78rem; } .admin-help-card .help-steps{ margin:8px 0 0; padding-left:20px; } .admin-help-card .help-steps li{ margin:5px 0; } /* ========================================================== ET-HOST CHAT TOOLBAR + LAUT.FM V6 · 0.2.6-beta ========================================================== */ .chat-page .composer-toolbar{ gap:8px!important; padding:2px 0!important; } .chat-page .composer-toolbar > .composer-tool{ flex:0 0 auto!important; width:auto!important; min-width:0!important; max-width:none!important; height:42px!important; min-height:42px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:7px!important; padding:0 12px!important; border:1px solid #e0e5e9!important; border-radius:12px!important; background:linear-gradient(180deg,#ffffff,#f4f6f8)!important; color:#303942!important; box-shadow:0 1px 2px rgba(20,28,35,.05)!important; cursor:pointer!important; user-select:none!important; transition:background .15s,border-color .15s,box-shadow .15s,transform .15s!important; } .chat-page .composer-toolbar > .composer-tool:hover{ background:#eef5ff!important; border-color:#bfcfe6!important; box-shadow:0 3px 10px rgba(20,28,35,.08)!important; } .chat-page .composer-toolbar > .composer-tool:focus-visible{ outline:3px solid color-mix(in srgb,var(--primary) 28%,transparent)!important; outline-offset:2px!important; } .chat-page .composer-toolbar > .composer-tool.is-active{ background:color-mix(in srgb,var(--primary) 12%,#fff)!important; border-color:color-mix(in srgb,var(--primary) 42%,#cfd6dc)!important; color:#20272d!important; } .chat-page .composer-toolbar > .composer-tool.is-loading{ opacity:.72!important; cursor:wait!important; } .chat-page .composer-toolbar > .composer-tool.is-error{ background:#fff2f2!important; border-color:#efb7b7!important; } .chat-page .composer-tool-icon{ display:inline-grid; place-items:center; min-width:20px; font-weight:850; line-height:1; font-size:1rem; } .chat-page .composer-tool-gif .composer-tool-icon{ min-width:28px; padding:3px 5px; border-radius:6px; background:#22272d; color:#fff; font-size:.68rem; letter-spacing:.02em; } .chat-page .composer-tool-label{ display:inline-block; white-space:nowrap; font-size:.76rem; font-weight:800; } .chat-page .composer-tool-style{ min-width:48px!important; font-weight:850!important; } .chat-page .upload-preview{ position:static!important; align-self:flex-start!important; max-width:100%!important; margin:0!important; padding:6px 9px!important; border-radius:9px!important; font-size:.74rem!important; } .chat-page .composer-input-row{ padding-top:1px!important; } .chat-page .composer-input-row #chatInput{ border:1px solid #dfe4e8!important; background:#fff!important; box-shadow:inset 0 1px 2px rgba(20,28,35,.03)!important; } .chat-page .composer-input-row #chatInput:focus{ border-color:color-mix(in srgb,var(--primary) 55%,#aeb8c1)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent)!important; } .chat-page .composer-input-row .send-btn{ border-radius:12px!important; box-shadow:0 4px 12px color-mix(in srgb,var(--primary) 25%,transparent)!important; } /* laut.fm uses the provider's official embed widget only. */ .radio-player-lautfm{ position:relative; } .radio-player-lautfm .lautfm-external-link{ width:38px; height:38px; display:grid; place-items:center; border-radius:10px; background:rgba(255,255,255,.1); color:#fff; font-weight:900; } .lautfm-widget-popover[hidden]{display:none!important;} .lautfm-widget-popover{ position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%); width:min(560px,calc(100vw - 24px)); padding:10px; background:#fff; color:#22272d; border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 50px rgba(20,28,35,.24); z-index:2500; } .lautfm-widget-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; } .lautfm-widget-head button{ width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:#f1f3f5; color:#303942; } .lautfm-widget-frame{ width:100%; min-height:210px; overflow:hidden; border-radius:10px; background:#f3f5f7; } .lautfm-widget-frame iframe{ display:block; width:100%; height:220px; border:0; background:#fff; } .lautfm-widget-popover>small{ display:block; margin-top:6px; color:#7b858e; font-size:.68rem; } .admin-help-command{ display:grid; grid-template-columns:minmax(180px,260px) 1fr; gap:12px; align-items:start; padding:10px 0; border-top:1px solid var(--line); } .admin-help-command code{ display:block; padding:8px 10px; border-radius:9px; background:#20262c; color:#fff; font-size:.78rem; overflow-wrap:anywhere; } .admin-help-command span{ color:#59636d; line-height:1.5; } @media(max-width:760px){ .chat-page .composer-toolbar{ gap:6px!important; padding:1px 0 3px!important; } .chat-page .composer-toolbar > .composer-tool{ flex:0 0 auto!important; width:auto!important; min-width:58px!important; max-width:none!important; height:40px!important; min-height:40px!important; padding:0 9px!important; gap:5px!important; } .chat-page .composer-tool-label{ font-size:.69rem; } .chat-page .composer-tool-icon{ font-size:.92rem; } .chat-page .composer-tool-gif .composer-tool-icon{ font-size:.62rem; min-width:25px; } .chat-page .composer-tool-style{ min-width:44px!important; } .lautfm-widget-popover{ left:50%; width:calc(100vw - 16px); padding:8px; } .lautfm-widget-frame iframe{ height:200px; } .admin-help-command{ grid-template-columns:1fr; gap:6px; } } /* ========================================================== ET-HOST RELEASE 0.2.7-beta Composer icons, selectable media, master applications, legal report page and custom-CSS help. ========================================================== */ /* Chat composer: compact icon-first tool dock. */ .chat-page .composer-toolbar{ overflow:visible!important; gap:7px!important; padding:2px 0 4px!important; } .chat-page .composer-toolbar > .composer-tool{ position:relative!important; flex:0 0 46px!important; width:46px!important; min-width:46px!important; max-width:46px!important; height:44px!important; min-height:44px!important; padding:0!important; border:1px solid #dde3e8!important; border-radius:14px!important; background:#fff!important; color:#2d3740!important; box-shadow:0 2px 7px rgba(29,38,46,.08)!important; display:inline-grid!important; place-items:center!important; cursor:pointer!important; overflow:visible!important; } .chat-page .composer-toolbar > .composer-tool:hover, .chat-page .composer-toolbar > .composer-tool:focus-visible{ transform:translateY(-1px)!important; border-color:color-mix(in srgb,var(--primary) 45%,#c7d0d8)!important; background:color-mix(in srgb,var(--primary) 6%,#fff)!important; box-shadow:0 5px 15px rgba(29,38,46,.12)!important; } .chat-page .composer-toolbar > .composer-tool.is-active{ border-color:color-mix(in srgb,var(--primary) 68%,#c7d0d8)!important; background:color-mix(in srgb,var(--primary) 11%,#fff)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent)!important; } .chat-page .composer-toolbar > .composer-tool.is-loading::before{ content:""; position:absolute; inset:-3px; border:2px solid color-mix(in srgb,var(--primary) 18%,transparent); border-top-color:var(--primary); border-radius:16px; animation:ethost-tool-spin .8s linear infinite; } @keyframes ethost-tool-spin{to{transform:rotate(360deg)}} .chat-page .composer-tool-icon{ width:23px!important; height:23px!important; min-width:23px!important; display:grid!important; place-items:center!important; font-size:.9rem!important; line-height:1!important; } .chat-page .composer-tool-icon svg{ width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.85; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; } .chat-page .composer-gif-mark{ width:auto!important; min-width:28px!important; height:22px!important; padding:0 5px!important; border-radius:7px!important; background:#252c33!important; color:#fff!important; font-size:.65rem!important; font-weight:900!important; letter-spacing:.04em!important; } .chat-page .composer-tool-label{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; } .chat-page .composer-tool[data-tool-label]::after{ content:attr(data-tool-label); position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%) translateY(4px); z-index:15000; pointer-events:none; opacity:0; visibility:hidden; white-space:nowrap; padding:5px 8px; border-radius:8px; background:#20262c; color:#fff; font-size:.68rem; font-weight:750; box-shadow:0 5px 18px rgba(20,28,35,.2); transition:.12s ease; } .chat-page .composer-tool[data-tool-label]:hover::after, .chat-page .composer-tool[data-tool-label]:focus-visible::after{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); } /* Selection surfaces must always receive pointer/touch events. */ .chat-page .smiley-popover.open, .chat-page .giphy-popover.open{ z-index:2200!important; pointer-events:auto!important; isolation:isolate; } .chat-page .smiley-tabs, .chat-page .smiley-grid, .chat-page .giphy-results{ pointer-events:auto!important; } .chat-page .smiley-tabs button, .chat-page .smiley-grid button, .chat-page .giphy-result{ position:relative; z-index:1; pointer-events:auto!important; touch-action:manipulation; cursor:pointer!important; } .chat-page .smiley-grid button{ border:1px solid transparent!important; transition:transform .1s,border-color .1s,background .1s!important; } .chat-page .smiley-grid button:hover, .chat-page .smiley-grid button:focus-visible{ transform:scale(1.05); border-color:#d9e0e6!important; background:#f5f8fa!important; } .chat-page .giphy-result{ border:2px solid transparent!important; background:#eef1f3!important; transition:transform .12s,border-color .12s,box-shadow .12s!important; } .chat-page .giphy-result:hover, .chat-page .giphy-result:focus-visible, .chat-page .giphy-result.is-selected{ transform:translateY(-1px); border-color:var(--primary)!important; box-shadow:0 4px 14px rgba(20,28,35,.14)!important; } /* Demo GIF chooser follows the real composer UX without an external request. */ .demo-gif-popover{width:min(420px,calc(100vw - 28px))!important;} .demo-gif-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;} .demo-gif-grid button{min-height:88px;display:grid;place-items:center;gap:4px;border:1px solid #e1e6ea;border-radius:12px;background:#f7f9fa;cursor:pointer;} .demo-gif-grid button span{font-size:1.75rem;} .demo-gif-grid button b{font-size:.72rem;} /* Master: unconfirmed applications now include delivery state + actions. */ .master-pending-row{ grid-template-columns:minmax(175px,1.15fr) minmax(165px,.95fr) minmax(160px,.85fr) minmax(210px,1.2fr) auto minmax(185px,.85fr)!important; } .master-pending-actions form{display:flex;flex-wrap:wrap;gap:6px;margin:0;} .master-pending-actions .btn{min-height:34px;padding:7px 9px;font-size:.7rem;} .master-mail-error{color:#b2463e!important;white-space:normal!important;overflow:visible!important;} /* Friendly public illegal-content report. */ .report-friendly-shell{width:min(1180px,calc(100% - 28px));margin:0 auto;padding-bottom:54px;} .report-friendly-hero{display:grid;grid-template-columns:minmax(0,1fr) 88px;gap:24px;align-items:center;margin:16px 0 18px;padding:30px;border:1px solid #e5e9ec;border-radius:22px;background:linear-gradient(135deg,#fff,#f8fafb);box-shadow:0 12px 35px rgba(20,28,35,.06);} .report-friendly-hero h1{margin:6px 0 10px;font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.08;} .report-friendly-hero p{max-width:780px;margin:0;color:#5d6872;line-height:1.6;} .report-friendly-badge{width:76px;height:76px;display:grid;place-items:center;border-radius:22px;background:color-mix(in srgb,var(--primary) 11%,#fff);font-size:2rem;} .report-help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px;} .report-help-grid>div{padding:15px 16px;border:1px solid #e3e8ec;border-radius:15px;background:#fff;} .report-help-grid b,.report-help-grid span{display:block;} .report-help-grid b{margin-bottom:5px;font-size:.82rem;} .report-help-grid span{color:#66717b;font-size:.76rem;line-height:1.45;} .report-friendly-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px;align-items:start;} .report-form-card{margin:0!important;max-width:none!important;} .report-field-group{margin:20px 0 0;padding-top:18px;border-top:1px solid #edf0f2;} .report-field-group h2{margin:0 0 12px;font-size:1rem;} .report-good-faith{margin-top:18px!important;} .report-submit{margin-top:14px;} .report-form-note{margin:10px 0 0;color:#7a858e;font-size:.74rem;line-height:1.5;} .report-friendly-aside{display:grid;gap:12px;position:sticky;top:92px;} .report-friendly-aside section{padding:16px;border:1px solid #e3e8ec;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(20,28,35,.04);} .report-friendly-aside h2{margin:0 0 8px;font-size:.92rem;} .report-friendly-aside p,.report-friendly-aside li{color:#65707a;font-size:.76rem;line-height:1.55;} .report-friendly-aside ul{margin:0;padding-left:18px;} /* Resend-verification block on landing. */ .resend-section{padding-top:18px!important;} .resend-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,430px);gap:24px;align-items:center;padding:24px;border:1px solid #e2e7eb;border-radius:20px;background:#fff;box-shadow:0 10px 30px rgba(20,28,35,.05);} .resend-card h2{margin:5px 0 8px;} .resend-card p{margin:0;color:#65707a;} .resend-card form{display:grid;gap:10px;} @media(max-width:900px){ .report-friendly-layout{grid-template-columns:1fr;} .report-friendly-aside{position:static;grid-template-columns:repeat(3,1fr);} .master-pending-row{grid-template-columns:1fr!important;} .resend-card{grid-template-columns:1fr;} } @media(max-width:760px){ .chat-page .composer-toolbar{overflow-x:auto!important;overflow-y:visible!important;padding:2px 1px 4px!important;} .chat-page .composer-toolbar > .composer-tool{flex-basis:43px!important;width:43px!important;min-width:43px!important;max-width:43px!important;height:42px!important;min-height:42px!important;border-radius:13px!important;} .chat-page .composer-tool[data-tool-label]::after{display:none!important;} .chat-page .composer-tool-icon,.chat-page .composer-tool-icon svg{width:22px!important;height:22px!important;} .report-friendly-hero{grid-template-columns:1fr;padding:22px 18px;} .report-friendly-badge{display:none;} .report-help-grid{grid-template-columns:1fr;} .report-friendly-aside{grid-template-columns:1fr;} .report-friendly-shell{width:min(100% - 16px,1180px);} .demo-gif-grid{grid-template-columns:repeat(3,1fr);} } .chat-page .composer-tool.has-selection{ border-color:#7ec596!important; background:#effaf3!important; box-shadow:0 0 0 3px rgba(61,160,96,.10)!important; } /* ========================================================== ET-HOST CHAT INTERACTION HOTFIX V7 · 0.2.8-beta Removes orphan colour controls and guarantees that the smiley/GIF surfaces are visible above the composer. ========================================================== */ .chat-page #chatComposer{ overflow:visible!important; } /* No native colour control may ever appear directly in the composer toolbar. The only visible colour picker lives in the Aa popover. This removes the small white/red orphan control reported below the smiley button. */ .chat-page #chatComposer input[type="color"]{ display:none!important; visibility:hidden!important; position:absolute!important; width:0!important; height:0!important; min-width:0!important; min-height:0!important; margin:0!important; padding:0!important; border:0!important; opacity:0!important; pointer-events:none!important; } .chat-page #communityStylePopover input[type="color"], .chat-page .community-style-popover input[type="color"]{ display:block!important; visibility:visible!important; position:static!important; width:100%!important; height:40px!important; min-width:0!important; min-height:40px!important; margin:0!important; padding:3px!important; border:1px solid #dfe4e8!important; border-radius:9px!important; opacity:1!important; pointer-events:auto!important; } .chat-page .smiley-popover.open, .chat-page .giphy-popover.open{ display:block!important; visibility:visible!important; opacity:1!important; pointer-events:auto!important; z-index:16000!important; } .chat-page .smiley-popover.open.expanded{ display:grid!important; } .chat-page .giphy-consent-notice{ min-height:140px; display:grid; place-items:center; align-content:center; gap:10px; padding:18px; text-align:center; border:1px dashed #d7dee4; border-radius:12px; background:#f8fafb; } .chat-page .giphy-consent-notice p{ max-width:420px; margin:0; color:#5e6973; font-size:.8rem; line-height:1.5; } /* Keep the actual message scroller stable. The composer is a separate flex/grid row and must never become the scroll box. */ .chat-page #chatMessages{ min-height:0!important; overflow-y:auto!important; overscroll-behavior:contain; scroll-padding-bottom:18px; } @media(max-width:760px){ .chat-page .smiley-popover.open, .chat-page .giphy-popover.open{ position:fixed!important; left:8px!important; right:8px!important; bottom:calc(var(--ethost-composer-height,104px) + 8px)!important; width:auto!important; max-width:none!important; max-height:min(62dvh,540px)!important; } .chat-page .giphy-popover.open{ overflow:auto!important; } } /* ========================================================== ET-HOST PROFILE + ONLINE STABILITY 0.2.9 ========================================================== */ #onlineUsers .user-row{ grid-template-columns:42px minmax(0,1fr) 28px !important; min-height:60px; transform:none !important; transition:background .15s ease,border-color .15s ease !important; } #onlineUsers .user-row.has-profile:hover{ transform:none !important; } #onlineUsers .online-dot{ width:8px; height:8px; min-width:8px; min-height:8px; justify-self:center; align-self:center; border-radius:50%; background:#39b76a; } .profile2-avatar-remove{ margin-top:12px; } .profile2-friend-actions button{ white-space:nowrap; } @media(max-width:760px){ #onlineUsers .user-row{ min-height:58px; } .profile2-friend{ align-items:flex-start; } .profile2-friend-actions{ justify-content:flex-start; } } /* ============================================================ ET-HOST 0.2.10 CONSOLIDATION Stable online presence + verification UI ============================================================ */ .chat-page .online-user-card{ min-height:58px; align-items:center; } .chat-page .online-user-card .community-status-badge{ justify-self:end; align-self:center; flex:0 0 26px; width:26px; height:26px; margin:0 !important; transform:none !important; } .chat-page .online-user-card:hover, .chat-page .online-user-card:focus-within{ transform:none !important; } .verification-resend-panel{ margin-top:12px; } .verification-resend-panel form{ display:grid; gap:12px; } /* ========================================================== ET-HOST DESIGN PIPELINE FIX · 0.2.10-beta Tenant background colours and images must be shown exactly as configured. Earlier builds covered them with an 84–96 % grey/white overlay, making saved colours/images look broken. ========================================================== */ .tenant-login-page{ background-color:var(--login-bg-color,#f3f5f7)!important; background-image:var(--login-bg,none)!important; background-size:cover!important; background-position:center center!important; background-repeat:no-repeat!important; background-attachment:fixed!important; } .chat-page .tenant-shell{ background-color:var(--chat-bg-color,#f3f5f7)!important; background-image:var(--chat-bg,none)!important; background-size:cover!important; background-position:center center!important; background-repeat:no-repeat!important; background-attachment:fixed!important; } /* Panels stay readable while the configured tenant background remains visible in the surrounding area. */ .chat-page .chat-panel, .chat-page .user-panel{ background:rgba(255,255,255,.97)!important; } .design-preview-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:4px 0 18px; } .design-preview-card{ min-width:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#f7f8f9; } .design-preview-visual{ height:130px; display:grid; place-items:center; overflow:hidden; background:var(--design-preview-color,#f3f5f7); } .design-preview-visual img{ width:100%; height:100%; object-fit:cover; display:block; } .design-preview-card.logo .design-preview-visual img{ width:auto; height:auto; max-width:88%; max-height:90px; object-fit:contain; } .design-preview-card figcaption{ display:grid; gap:2px; padding:10px 12px; background:#fff; } .design-preview-card figcaption strong{font-size:.82rem;} .design-preview-card figcaption small{font-size:.7rem;color:var(--muted);} .design-color-fields{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .design-color-field{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:8px; align-items:center; } .design-color-field input[type="color"]{ width:44px; height:42px; min-height:42px; padding:3px; } .design-color-field span{display:grid;gap:2px;} .design-color-field code{font-size:.7rem;color:var(--muted);} @media(max-width:760px){ .tenant-login-page, .chat-page .tenant-shell{ background-attachment:scroll!important; } .design-preview-grid, .design-color-fields{ grid-template-columns:1fr!important; } } /* ========================================================== ET-HOST MOBILE BOTTOM NAVIGATION 0.2.10.1 The desktop header actions become a persistent mobile dock. This final override intentionally wins over older mobile rules that hid .tenant-actions > a below 760px. ========================================================== */ @media(max-width:760px){ .chat-page .tenant-actions{ position:fixed!important; left:0!important; right:0!important; bottom:0!important; z-index:22000!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; gap:6px!important; width:100%!important; min-width:0!important; height:calc(58px + env(safe-area-inset-bottom))!important; padding:6px 8px max(6px,env(safe-area-inset-bottom))!important; margin:0!important; overflow-x:auto!important; overflow-y:hidden!important; white-space:nowrap!important; scrollbar-width:none!important; -webkit-overflow-scrolling:touch; background:rgba(255,255,255,.98)!important; border-top:1px solid #dfe4e8!important; box-shadow:0 -8px 24px rgba(20,28,36,.10)!important; backdrop-filter:blur(14px); } .chat-page .tenant-actions::-webkit-scrollbar{ display:none!important; } /* Older CSS explicitly hid these anchors on mobile. */ .chat-page .tenant-actions>a, .chat-page .tenant-actions>button, .chat-page .tenant-actions>form, .chat-page .tenant-actions>form>button{ display:inline-flex!important; flex:0 0 auto!important; } .chat-page .tenant-actions>a, .chat-page .tenant-actions>button, .chat-page .tenant-actions>form>button{ align-items:center!important; justify-content:center!important; gap:5px!important; min-width:46px!important; height:44px!important; min-height:44px!important; padding:6px 10px!important; margin:0!important; border:1px solid #e2e6e9!important; border-radius:12px!important; background:#f4f6f8!important; color:#29323a!important; box-shadow:none!important; font-size:.76rem!important; font-weight:800!important; line-height:1!important; touch-action:manipulation; } .chat-page .tenant-actions>a:active, .chat-page .tenant-actions>button:active, .chat-page .tenant-actions>form>button:active{ transform:translateY(1px)!important; background:#e9edf0!important; } .chat-page .tenant-actions>form{ margin:0!important; } .chat-page .tenant-actions .tenant-custom-link{ min-width:44px!important; width:auto!important; } .chat-page .tenant-actions .tenant-custom-link-label{ display:none!important; } .chat-page .tenant-online-count{ display:inline-grid!important; place-items:center!important; min-width:18px!important; height:18px!important; padding:0 4px!important; border-radius:999px!important; background:#252a30!important; color:#fff!important; font-size:.62rem!important; line-height:18px!important; } /* The existing footer continues to reserve the lower area; the mobile dock is rendered over it instead of over the composer. Keep its mobile footprint deterministic. */ .chat-page .tenant-copyright{ flex:0 0 58px!important; flex-direction:row!important; align-items:center!important; padding:0 10px!important; } .chat-page .tenant-copyright>span{ opacity:0!important; pointer-events:none!important; max-height:1px!important; } .chat-page .user-panel{ bottom:calc(66px + env(safe-area-inset-bottom))!important; } /* Fixed popovers must sit above composer + mobile dock. */ .chat-page .smiley-popover.open, .chat-page .giphy-popover.open, .chat-page .community-style-popover{ bottom:calc(var(--ethost-composer-height,104px) + 66px + env(safe-area-inset-bottom))!important; } .chat-page .smiley-popover.expanded{ bottom:calc(66px + env(safe-area-inset-bottom))!important; height:calc(var(--ethost-chat-vh,100dvh) - 74px - env(safe-area-inset-bottom))!important; } } @media(max-width:390px){ .chat-page .tenant-actions>a, .chat-page .tenant-actions>button, .chat-page .tenant-actions>form>button{ min-width:42px!important; padding-left:8px!important; padding-right:8px!important; font-size:.72rem!important; } } /* ========================================================== ET-HOST UPLOAD FEEDBACK + ADMIN TOAST · 0.2.10.2-beta ========================================================== */ .admin-page .admin-main > .alert{ position:fixed; top:82px; right:24px; z-index:32000; width:min(560px,calc(100vw - 48px)); margin:0; padding:14px 16px; border:1px solid rgba(0,0,0,.08); box-shadow:0 14px 40px rgba(20,28,36,.18); } .admin-page .admin-main > .alert.error{border-color:#f1b7b3;} .admin-page .admin-main > .alert.success{border-color:#b9dec7;} .admin-page .admin-main > .alert.info{border-color:#bdd0f1;} .upload-file-state{ display:block; margin:-3px 0 8px; font-size:.76rem; line-height:1.35; color:var(--muted); overflow-wrap:anywhere; } .upload-inline-message{ margin:2px 0 12px; padding:10px 12px; border-radius:10px; border:1px solid #dfe4e8; background:#f6f8f9; color:#39444d; font-size:.82rem; font-weight:700; line-height:1.4; } .upload-inline-message.success{ background:#eaf8ef; border-color:#b9dec7; color:#176437; } .upload-inline-message.error{ background:#fff0ef; border-color:#f1b7b3; color:#a82822; } .upload-inline-message.info{ background:#eef4ff; border-color:#bdd0f1; color:#315fa4; } [data-admin-image-upload] input[type="file"]{ padding:.58rem; background:#fbfcfd; } [data-admin-image-upload] input[type="file"]::file-selector-button{ border:0; border-radius:9px; padding:.55rem .75rem; margin-right:.65rem; background:#20252b; color:#fff; font-weight:800; cursor:pointer; } @media(max-width:760px){ .admin-page .admin-main > .alert{ top:12px; right:12px; left:12px; width:auto; } } /* ========================================================== ET-HOST PROFILE EXTENSIONS · 0.2.11-beta Profilfelder · Profilbesucher · Fotoalben Gästebuch bewusst nicht enthalten. ========================================================== */ .profile2-privacy-option{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:16px; border:1px solid #e5e8ec; border-radius:14px; background:#f8fafb; } .profile2-privacy-option p{ margin:5px 0 0; color:var(--muted); font-size:.84rem; line-height:1.5; max-width:680px; } .profile2-privacy-option .check{ flex:0 0 auto; margin-top:2px; } .profile2-public-fields{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px; margin-top:14px; } .profile2-public-field{ min-width:0; padding:12px 14px; border:1px solid #edf0f2; border-radius:12px; background:#fbfcfd; } .profile2-public-field small, .profile2-public-field strong{ display:block; } .profile2-public-field small{ color:var(--muted); margin-bottom:4px; font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; } .profile2-public-field strong, .profile2-public-field a{ overflow-wrap:anywhere; } .profile2-visitor-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .profile2-visitor{ display:flex; align-items:center; gap:11px; min-width:0; padding:10px 12px; border:1px solid #edf0f2; border-radius:12px; text-decoration:none; color:inherit; background:#fff; } .profile2-visitor:hover{ background:#f8fafb; } .profile2-visitor-avatar{ width:38px; height:38px; flex:0 0 38px; border-radius:11px; overflow:hidden; display:grid; place-items:center; background:#eef3f8; font-weight:900; } .profile2-visitor-avatar img{ width:100%; height:100%; object-fit:cover; } .profile2-visitor>span:last-child{ min-width:0; } .profile2-visitor strong, .profile2-visitor small{ display:block; } .profile2-visitor small{ color:var(--muted); margin-top:2px; font-size:.76rem; } .profile-album-create, .profile-album-settings, .profile-photo-upload{ display:grid; gap:10px; } .profile-album-create{ margin-bottom:16px; padding:14px; border:1px dashed #d8dde2; border-radius:14px; background:#fbfcfd; } .profile-album-form-grid, .profile-album-settings{ grid-template-columns:repeat(2,minmax(0,1fr)); } .profile-album-create label, .profile-album-settings label, .profile-photo-upload label{ display:grid; gap:6px; font-weight:800; font-size:.82rem; } .profile-album{ margin-top:16px; padding:16px; border:1px solid #e6eaed; border-radius:16px; background:#fff; } .profile-album:first-of-type{ margin-top:10px; } .profile-album-meta, .profile-public-album-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0; color:var(--muted); font-size:.8rem; } .profile-album-meta strong{ color:#34414a; } .profile-photo-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:12px 0; } .profile-photo-card{ min-width:0; margin:0; padding:8px; border:1px solid #edf0f2; border-radius:13px; background:#fbfcfd; } .profile-photo-card img, .demo-photo-placeholder{ display:block; width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:9px; background:#eef2f5; } .demo-photo-placeholder{ display:grid; place-items:center; font-size:2rem; } .profile-photo-card figcaption{ margin:7px 2px 0; font-size:.78rem; line-height:1.35; overflow-wrap:anywhere; } .profile-photo-card form{ margin-top:8px; } .profile-photo-upload{ grid-template-columns:1.2fr 1fr auto; align-items:end; margin-top:14px; padding-top:14px; border-top:1px solid #edf0f2; } .profile-album-delete{ margin-top:10px; } .profile-public-album+.profile-public-album{ margin-top:18px; padding-top:18px; border-top:1px solid #edf0f2; } .profile-public-album-head h3{ margin:0; color:var(--ink); } .profile-public-album-head p{ margin:4px 0 0; color:var(--muted); } .profile-field-admin-row{ display:grid; grid-template-columns:minmax(220px,2fr) minmax(160px,1fr) 110px auto minmax(190px,auto); gap:10px; align-items:end; padding:12px 0; border-bottom:1px solid #edf0f2; } .profile-field-admin-row:last-of-type{ border-bottom:0; } .profile-field-admin-row label{ display:grid; gap:6px; min-width:0; font-size:.78rem; font-weight:800; } .profile-field-admin-row .check{ align-self:center; } @media(max-width:900px){ .profile-field-admin-row{ grid-template-columns:repeat(2,minmax(0,1fr)); } .profile-field-admin-row .button-row{ grid-column:1/-1; } .profile-photo-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media(max-width:640px){ .profile2-privacy-option{ flex-direction:column; } .profile2-public-fields, .profile2-visitor-list, .profile-album-form-grid, .profile-album-settings, .profile-field-admin-row{ grid-template-columns:1fr; } .profile-photo-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .profile-photo-upload{ grid-template-columns:1fr; } .profile-album-meta, .profile-public-album-head{ align-items:flex-start; flex-direction:column; } } /* ========================================================== ET-HOST PROFILE ALBUM V2 · 0.2.12-beta Album overview · management · multi upload · lightbox ========================================================== */ .profile-gallery-card-head{ align-items:flex-start; gap:18px; } .profile-gallery-card-head>div:first-child{ min-width:0; } .profile-gallery-card-head p{ margin:5px 0 0; color:var(--muted); font-size:.84rem; line-height:1.5; } .profile-gallery-stats{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; flex:0 0 auto; } .profile-gallery-stats span{ display:flex; align-items:center; gap:5px; padding:7px 10px; border:1px solid #e4e8ec; border-radius:999px; background:#f8fafb; color:#59636c; font-size:.76rem; font-weight:800; white-space:nowrap; } .profile-gallery-stats b{ color:var(--ink); } .profile-album-create-panel{ margin:16px 0 6px; border:1px solid #e2e7eb; border-radius:16px; background:#fbfcfd; overflow:hidden; } .profile-album-create-panel>summary{ list-style:none; display:flex; align-items:center; gap:12px; padding:13px 15px; cursor:pointer; user-select:none; } .profile-album-create-panel>summary::-webkit-details-marker{ display:none; } .profile-album-create-panel>summary:hover{ background:#f5f7f9; } .profile-album-create-icon{ width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; border-radius:11px; background:color-mix(in srgb,var(--primary) 10%,#fff); color:var(--primary); font-size:1.35rem; font-weight:900; } .profile-album-create-panel>summary>span:last-child{ min-width:0; display:grid; } .profile-album-create-panel>summary strong{ font-size:.9rem; } .profile-album-create-panel>summary small{ margin-top:1px; font-size:.72rem; } .profile-album-create-panel[open]>summary{ border-bottom:1px solid #e6eaed; background:#fff; } .profile-album-create-panel .profile-album-create{ margin:0; padding:15px; border:0; border-radius:0; background:#fff; } .profile-album-form-grid textarea, .profile-album-settings textarea{ min-height:72px; } .profile-album-create-actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .profile-gallery-empty{ min-height:180px; margin-top:16px; display:grid; place-items:center; align-content:center; text-align:center; padding:30px 20px; border:1px dashed #dbe1e6; border-radius:18px; background:#fbfcfd; } .profile-gallery-empty>span{ font-size:2.2rem; margin-bottom:8px; } .profile-gallery-empty strong{ font-size:1rem; } .profile-gallery-empty p{ margin:4px 0 0; color:var(--muted); font-size:.82rem; } .profile-album-v2{ padding:0; overflow:hidden; border-radius:18px; box-shadow:0 6px 20px rgba(29,35,41,.035); } .profile-album-v2:target, .profile-photo-manage:target, .profile-public-album-v2:target{ scroll-margin-top:90px; } .profile-album-v2:target{ border-color:color-mix(in srgb,var(--primary) 34%,#d8dde2); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 8%,transparent),0 10px 28px rgba(29,35,41,.06); } .profile-album-head{ display:grid; grid-template-columns:112px minmax(0,1fr) auto; gap:16px; align-items:center; padding:16px; background:linear-gradient(180deg,#fff,#fbfcfd); } .profile-album-cover{ position:relative; width:112px; height:84px; overflow:hidden; display:block; border-radius:13px; background:#edf1f4; border:1px solid #e5e9ec; } .profile-album-cover img{ width:100%; height:100%; object-fit:cover; transition:transform .2s ease; } .profile-album-cover:hover img{ transform:scale(1.035); } .profile-album-cover>span:last-child:not(:first-child){ position:absolute; left:7px; bottom:7px; padding:3px 6px; border-radius:7px; background:rgba(20,24,29,.78); color:#fff; font-size:.62rem; font-weight:900; } .profile-album-cover-empty{ display:grid; place-items:center; color:#7c8791; font-size:1.65rem; } .profile-album-copy{ min-width:0; } .profile-album-title-row{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; } .profile-album-title-row h3{ margin:0; font-size:1.08rem; line-height:1.25; overflow-wrap:anywhere; } .profile-visibility-badge{ display:inline-flex; align-items:center; gap:4px; padding:4px 7px; border-radius:999px; background:#f0f3f5; color:#5c6670; font-size:.66rem; font-weight:900; white-space:nowrap; } .profile-album-copy>p{ margin:5px 0 0; color:var(--muted); font-size:.8rem; line-height:1.45; overflow-wrap:anywhere; } .profile-album-copy>.profile-album-no-description{ opacity:.72; font-style:italic; } .profile-album-facts{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; color:#77808a; font-size:.71rem; font-weight:750; } .profile-album-facts b{ color:#48525b; } .profile-album-head-actions{ display:flex; align-items:center; gap:6px; } .profile-album-head-actions form{ margin:0; } .profile-icon-btn{ width:34px; height:34px; display:grid; place-items:center; border:1px solid #dfe4e8; border-radius:10px; background:#fff; color:#4e5963; font-weight:900; box-shadow:none; } .profile-icon-btn:hover:not(:disabled){ border-color:#cbd3d9; background:#f7f9fa; } .profile-icon-btn:disabled, .profile-photo-tools button:disabled{ opacity:.38; cursor:not-allowed; transform:none!important; } .profile-album-settings-panel{ border-top:1px solid #edf0f2; background:#fbfcfd; } .profile-album-settings-panel>summary{ list-style:none; cursor:pointer; padding:10px 16px; color:#5d6670; font-size:.75rem; font-weight:900; } .profile-album-settings-panel>summary::-webkit-details-marker{ display:none; } .profile-album-settings-panel>summary:hover{ background:#f5f7f8; } .profile-album-settings-panel[open]>summary{ border-bottom:1px solid #e8ecef; } .profile-album-settings-panel .profile-album-settings{ padding:14px 16px 6px; } .profile-album-settings-panel .profile-album-delete{ margin:4px 16px 14px; padding-top:12px; border-top:1px solid #e6eaed; } .profile-photo-manage-grid{ grid-template-columns:repeat(auto-fill,minmax(172px,1fr)); gap:12px; margin:0; padding:16px; border-top:1px solid #edf0f2; background:#fff; } .profile-photo-card.profile-photo-manage, .profile-photo-card.profile-public-photo-card{ padding:0; overflow:hidden; border-radius:14px; background:#fff; } .profile-photo-link{ position:relative; display:block; overflow:hidden; background:#eef2f5; } .profile-photo-card .profile-photo-link img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:0; transition:transform .2s ease,filter .2s ease; } .profile-photo-link:hover img{ transform:scale(1.025); filter:brightness(.96); } .profile-photo-cover-badge{ position:absolute; left:8px; top:8px; padding:4px 7px; border-radius:8px; background:rgba(20,24,29,.82); color:#fff; font-size:.62rem; font-weight:900; backdrop-filter:blur(6px); } .profile-photo-zoom{ position:absolute; right:8px; bottom:8px; width:28px; height:28px; display:grid; place-items:center; border-radius:9px; background:rgba(20,24,29,.72); color:#fff; font-size:1rem; opacity:0; transform:translateY(3px); transition:.18s ease; } .profile-photo-link:hover .profile-photo-zoom, .profile-photo-link:focus-visible .profile-photo-zoom{ opacity:1; transform:none; } .profile-photo-manage>figcaption, .profile-public-photo-card>figcaption{ min-height:35px; margin:0; padding:8px 9px; border-top:1px solid #edf0f2; color:#4e5963; font-size:.74rem; line-height:1.35; } .profile-photo-manage>figcaption.is-empty{ color:#98a0a8; font-style:italic; } .profile-photo-edit{ border-top:1px solid #edf0f2; } .profile-photo-edit>summary{ list-style:none; padding:8px 9px; cursor:pointer; color:#606a74; font-size:.7rem; font-weight:900; text-align:center; background:#fbfcfd; } .profile-photo-edit>summary::-webkit-details-marker{ display:none; } .profile-photo-edit>summary:hover{ background:#f4f6f8; } .profile-photo-edit[open]>summary{ border-bottom:1px solid #e7ebee; } .profile-photo-edit-form{ display:grid; gap:8px; padding:9px; } .profile-photo-edit-form label{ display:grid; gap:4px; font-size:.68rem; font-weight:900; } .profile-photo-edit-form input, .profile-photo-edit-form select{ padding:.55rem .6rem; border-radius:9px; font-size:.75rem; } .profile-photo-edit-form .btn{ width:100%; } .profile-photo-tools{ display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:0 9px 9px; } .profile-photo-tools form{ margin:0; } .profile-photo-tools .btn, .profile-cover-current{ width:100%; min-height:34px; padding:.45rem .48rem; font-size:.64rem; border-radius:8px; } .profile-cover-current{ display:grid; place-items:center; color:#23704a; background:#edf8f2; border:1px solid #d7eee2; font-weight:900; } .profile-album-empty{ display:flex; align-items:center; gap:12px; margin:0 16px 4px; padding:15px; border:1px dashed #dce2e6; border-radius:13px; background:#fbfcfd; } .profile-album-empty>span{ font-size:1.55rem; } .profile-album-empty strong, .profile-album-empty p{ display:block; } .profile-album-empty p{ margin:2px 0 0; color:var(--muted); font-size:.76rem; } .profile-album-empty.compact{ margin:12px 0 0; } .profile-photo-upload-v2{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 12px; align-items:end; margin:0; padding:16px; border-top:1px solid #edf0f2; background:#fbfcfd; } .profile-photo-dropzone{ position:relative; grid-column:1/-1; min-height:74px; display:flex!important; grid-template-columns:none!important; align-items:center; gap:12px!important; padding:13px 14px; border:1.5px dashed #cfd7dd; border-radius:14px; background:#fff; cursor:pointer; overflow:hidden; } .profile-photo-dropzone:hover, .profile-photo-dropzone.is-dragover{ border-color:color-mix(in srgb,var(--primary) 52%,#bcc6cd); background:color-mix(in srgb,var(--primary) 4%,#fff); } .profile-photo-dropzone input[type="file"]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; } .profile-photo-drop-icon{ width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:12px; background:#f0f3f5; color:#59636d; font-size:1.4rem; font-weight:900; } .profile-photo-dropzone>span:nth-child(2){ min-width:0; display:grid; } .profile-photo-dropzone strong{ font-size:.84rem; } .profile-photo-dropzone small{ margin-top:2px; font-size:.69rem; font-weight:650; } .profile-photo-upload-meta{ grid-column:1/-1; display:flex; justify-content:space-between; gap:10px; color:#77818a; font-size:.68rem; } .profile-photo-upload-meta [data-profile-upload-state]{ color:#4d5862; font-weight:800; } .profile-photo-upload-meta [data-profile-upload-state].error{ color:#a82822; } .profile-photo-upload-caption{ min-width:0; } .profile-photo-upload-caption label{ display:grid; gap:5px; } .profile-photo-upload-caption small{ display:block; margin-top:4px; font-size:.65rem; line-height:1.35; } .profile-gallery-overview{ display:grid; grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); gap:12px; margin:16px 0 20px; } .profile-gallery-album-card{ min-width:0; overflow:hidden; display:block; border:1px solid #e4e8eb; border-radius:15px; background:#fff; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; } .profile-gallery-album-card:hover{ transform:translateY(-2px); border-color:#d4dbe0; box-shadow:0 10px 24px rgba(29,35,41,.08); } .profile-gallery-album-cover{ position:relative; display:block; width:100%; aspect-ratio:4/3; overflow:hidden; background:#edf1f4; } .profile-gallery-album-cover>img{ width:100%; height:100%; object-fit:cover; transition:transform .22s ease; } .profile-gallery-album-card:hover .profile-gallery-album-cover>img{ transform:scale(1.035); } .profile-gallery-cover-empty{ width:100%; height:100%; display:grid; place-items:center; font-size:2rem; color:#7f8992; } .profile-gallery-album-count{ position:absolute; right:8px; bottom:8px; padding:4px 7px; border-radius:8px; background:rgba(20,24,29,.78); color:#fff; font-size:.64rem; font-weight:900; backdrop-filter:blur(6px); } .profile-gallery-album-info{ display:grid; gap:2px; padding:10px 11px 11px; } .profile-gallery-album-info strong{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.83rem; } .profile-gallery-album-info small{ font-size:.67rem; } .profile-public-album-v2{ padding-top:18px; border-top:1px solid #edf0f2; } .profile-public-album-v2:first-of-type{ border-top:0; padding-top:0; } .profile-public-album-v2+.profile-public-album-v2{ margin-top:22px; } .profile-public-album-head{ margin:0 0 12px; } .profile-public-album-head>div:first-child{ min-width:0; } .profile-public-album-head h3{ font-size:1rem; } .profile-public-album-meta{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; } .profile-public-album-meta span{ padding:4px 7px; border-radius:999px; background:#f2f4f6; color:#66717b; font-size:.66rem; font-weight:850; white-space:nowrap; } .profile-public-photo-grid{ grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:10px; margin:0; } .profile-gallery-expand{ margin-top:12px; } .profile-lightbox{ position:fixed; inset:0; z-index:10000; display:grid; grid-template-rows:auto minmax(0,1fr) auto; background:rgba(10,13,17,.94); color:#fff; backdrop-filter:blur(10px); } .profile-lightbox[hidden]{ display:none; } .profile-lightbox-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; } .profile-lightbox-counter{ color:#c8cdd3; font-size:.76rem; font-weight:800; } .profile-lightbox-close, .profile-lightbox-nav{ display:grid; place-items:center; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.08); color:#fff; box-shadow:none; } .profile-lightbox-close{ width:40px; height:40px; border-radius:12px; font-size:1.35rem; } .profile-lightbox-stage{ position:relative; min-height:0; display:grid; place-items:center; padding:8px 66px; } .profile-lightbox-image{ max-width:min(1180px,100%); max-height:calc(100vh - 150px); width:auto; height:auto; object-fit:contain; border-radius:10px; box-shadow:0 24px 70px rgba(0,0,0,.34); } .profile-lightbox-nav{ position:absolute; top:50%; width:44px; height:54px; border-radius:13px; transform:translateY(-50%); font-size:1.6rem; } .profile-lightbox-prev{ left:12px; } .profile-lightbox-next{ right:12px; } .profile-lightbox-nav:disabled{ opacity:.25; cursor:default; } .profile-lightbox-foot{ min-height:54px; display:grid; place-items:center; padding:8px 18px 14px; text-align:center; } .profile-lightbox-caption{ max-width:820px; margin:0; color:#eef1f4; font-size:.84rem; line-height:1.45; } body.profile-lightbox-open{ overflow:hidden; } @media(max-width:900px){ .profile-album-head{ grid-template-columns:96px minmax(0,1fr) auto; } .profile-album-cover{ width:96px; height:76px; } .profile-photo-manage-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } .profile-public-photo-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media(max-width:640px){ .profile-gallery-card-head{ flex-direction:column; } .profile-gallery-stats{ justify-content:flex-start; } .profile-album-head{ grid-template-columns:76px minmax(0,1fr); gap:11px; padding:12px; } .profile-album-cover{ width:76px; height:68px; } .profile-album-head-actions{ grid-column:1/-1; justify-content:flex-end; padding-top:2px; } .profile-album-title-row{ align-items:flex-start; flex-direction:column; gap:5px; } .profile-album-facts{ gap:8px; } .profile-album-settings-panel .profile-album-settings, .profile-album-settings-panel .profile-album-delete{ margin-left:12px; margin-right:12px; padding-left:0; padding-right:0; } .profile-photo-manage-grid, .profile-public-photo-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:12px; } .profile-public-photo-grid{ padding:0; } .profile-photo-tools{ grid-template-columns:1fr; } .profile-photo-upload-v2{ grid-template-columns:1fr; padding:12px; } .profile-photo-upload-caption, .profile-photo-upload-v2>.btn{ grid-column:1/-1; } .profile-photo-upload-v2>.btn{ width:100%; } .profile-photo-upload-meta{ flex-direction:column; gap:2px; } .profile-gallery-overview{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .profile-public-album-head{ align-items:flex-start; flex-direction:column; gap:8px; } .profile-public-album-meta{ justify-content:flex-start; } .profile-lightbox-stage{ padding:8px 44px; } .profile-lightbox-image{ max-height:calc(100vh - 130px); border-radius:7px; } .profile-lightbox-nav{ width:36px; height:48px; border-radius:10px; } .profile-lightbox-prev{left:5px} .profile-lightbox-next{right:5px} } @media(max-width:420px){ .profile-gallery-overview{ grid-template-columns:1fr 1fr; } .profile-photo-manage-grid, .profile-public-photo-grid{ grid-template-columns:1fr 1fr; } .profile-gallery-album-info{ padding:8px; } .profile-gallery-album-info strong{ font-size:.76rem; } } \n\n/* ==========================================================\n ET-HOST PROFILE ALBUM V3 · 0.2.13-beta\n Role quotas · large upload zone · in-album slider\n ========================================================== */\n.profile-album-limit-note{\n display:flex;\n align-items:center;\n gap:11px;\n margin:14px 0 4px;\n padding:12px 14px;\n border:1px solid #dce8e1;\n border-radius:14px;\n background:#f4faf6;\n color:#3f5f4d;\n}\n.profile-album-limit-note>span{\n width:30px;\n height:30px;\n flex:0 0 30px;\n display:grid;\n place-items:center;\n border-radius:50%;\n background:#e2f3e8;\n font-weight:950;\n}\n.profile-album-limit-note strong,.profile-album-limit-note small{display:block}\n.profile-album-limit-note small{margin-top:2px;color:#678073;font-size:.7rem}\n.profile-album-slider{\n position:relative;\n margin:0;\n border-top:1px solid #edf0f2;\n border-bottom:1px solid #edf0f2;\n background:#11161b;\n overflow:hidden;\n}\n.profile-album-slider-stage{\n position:relative;\n width:100%;\n aspect-ratio:16/9;\n min-height:240px;\n max-height:560px;\n display:grid;\n place-items:center;\n background:linear-gradient(135deg,#111820,#202a33);\n overflow:hidden;\n}\n.profile-album-slide{\n position:absolute;\n inset:0;\n display:grid;\n place-items:center;\n background:#11161b;\n opacity:0;\n transform:scale(1.012);\n transition:opacity .2s ease,transform .24s ease;\n}\n.profile-album-slide[hidden]{display:none}\n.profile-album-slide.is-active{opacity:1;transform:none}\n.profile-album-slide img{\n width:100%;\n height:100%;\n object-fit:contain;\n background:#11161b;\n}\n.profile-album-slide-caption{\n position:absolute;\n left:14px;\n right:14px;\n bottom:12px;\n width:max-content;\n max-width:calc(100% - 28px);\n padding:7px 10px;\n border-radius:10px;\n background:rgba(12,16,20,.76);\n color:#fff;\n font-size:.74rem;\n line-height:1.35;\n backdrop-filter:blur(7px);\n}\n.profile-album-slider-nav{\n position:absolute;\n z-index:3;\n top:50%;\n width:42px;\n height:52px;\n display:grid;\n place-items:center;\n border:1px solid rgba(255,255,255,.2);\n border-radius:13px;\n background:rgba(15,20,25,.62);\n color:#fff;\n box-shadow:none;\n transform:translateY(-50%);\n font-size:1.55rem;\n backdrop-filter:blur(7px);\n}\n.profile-album-slider-nav:hover{background:rgba(15,20,25,.82)}\n.profile-album-slider-nav.is-prev{left:12px}\n.profile-album-slider-nav.is-next{right:12px}\n.profile-album-slider-footer{\n min-height:38px;\n display:flex;\n align-items:center;\n justify-content:center;\n gap:12px;\n padding:7px 12px;\n background:#171d23;\n color:#d6dce1;\n font-size:.68rem;\n font-weight:850;\n}\n.profile-album-slider-dots{display:flex;align-items:center;gap:5px}\n.profile-album-slider-dot{\n width:7px;\n height:7px;\n min-width:7px;\n padding:0;\n border:0;\n border-radius:50%;\n background:#66717b;\n box-shadow:none;\n}\n.profile-album-slider-dot.is-active{background:#fff;transform:scale(1.22)}\n.profile-public-album-v2 .profile-album-slider{border-radius:15px;border:1px solid #e2e7ea}\n.profile-photo-dropzone{\n min-height:132px;\n justify-content:center;\n padding:24px 22px;\n border-width:2px;\n text-align:left;\n}\n.profile-photo-drop-icon{\n width:58px;\n height:58px;\n flex-basis:58px;\n border-radius:16px;\n font-size:1.8rem;\n}\n.profile-photo-dropzone strong{font-size:.98rem}\n.profile-photo-dropzone small{font-size:.74rem;line-height:1.4}\n@media(max-width:640px){\n .profile-album-slider-stage{aspect-ratio:4/3;min-height:210px}\n .profile-album-slider-nav{width:36px;height:46px;border-radius:11px}\n .profile-album-slider-nav.is-prev{left:7px}\n .profile-album-slider-nav.is-next{right:7px}\n .profile-photo-dropzone{min-height:118px;padding:18px 15px}\n .profile-photo-drop-icon{width:50px;height:50px;flex-basis:50px}\n}\n /* Album V3: admin gallery release switch */ .switch-row>span{min-width:0;display:grid;gap:2px;padding-right:14px} .switch-row>span>small{display:block;color:var(--muted);font-size:.68rem;line-height:1.35;font-weight:500} .profile-gallery-disabled .profile-gallery-empty{margin-top:4px} /* ========================================================== ET-HOST 0.2.14-beta – Platform Supportcenter ========================================================== */ .support-center-page{background:#f5f6f8;color:var(--ink)} .support-topbar{min-height:76px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:10px max(20px,calc((100vw - 1180px)/2));position:sticky;top:0;z-index:30} .support-topbar>a:first-child img{width:82px;display:block}.support-topbar>div{display:grid;flex:1;line-height:1.25}.support-topbar>div strong{font-size:1rem}.support-topbar>div small{color:var(--muted);font-size:.72rem} .support-center-shell{max-width:1180px;margin:0 auto;padding:34px 20px 70px}.support-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end;padding:28px 0 24px}.support-hero h1{font-size:clamp(2.1rem,4vw,4.1rem);line-height:.98;margin:.35rem 0 1rem;max-width:760px}.support-hero p{max-width:760px;color:var(--muted);font-size:1.02rem}.support-hero-badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.support-hero-badges span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 11px;font-size:.72rem;font-weight:750} .support-context-card{background:#181b20;color:#fff;border-radius:18px;padding:16px 18px;margin:4px 0 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;box-shadow:var(--shadow)}.support-context-card>div{display:flex;align-items:center;gap:13px}.support-context-card h2{margin:1px 0;font-size:1.15rem}.support-context-card p,.support-context-card small{margin:0;color:#c8ccd2;font-size:.72rem}.support-context-icon{width:44px;height:44px;border-radius:14px;background:#2b3037;display:grid;place-items:center;font-size:1.35rem}.support-verified{border:1px solid #4e7e61;background:#203c2a;color:#bff3cc;border-radius:999px;padding:7px 10px;font-size:.72rem;font-weight:800} .support-two-col{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:16px;align-items:start}.support-panel,.support-reply-card,.support-access-card,.support-closed-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 8px 30px rgba(23,27,32,.04)}.support-panel .card-title{align-items:flex-start}.support-step{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#f0f2f4;font-size:.72rem;font-weight:900;color:#737b84} .support-create-form,.support-open-form{display:grid;gap:12px}.support-create-form label,.support-open-form label,.support-master-filter label{display:grid;gap:5px;font-weight:750;font-size:.78rem}.support-create-form label small{font-weight:500;color:var(--muted)}.support-create-form textarea,.support-open-form textarea{resize:vertical;min-height:120px}.support-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.support-platform-note{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;background:#f6f7f8;border:1px solid #e6e9ec;border-radius:12px}.support-platform-note span{font-size:1.25rem}.support-platform-note p{margin:0;font-size:.75rem;color:#5f6871}.support-platform-note strong{color:#252a30} .support-ticket-list{margin-top:16px}.support-ticket-row{display:grid;grid-template-columns:42px minmax(0,1fr) 145px auto;gap:12px;align-items:center;padding:12px 4px;border-top:1px solid #edf0f2;text-decoration:none;color:inherit}.support-ticket-row:hover{background:#fafbfc}.support-ticket-row.unread{background:#fff9f8}.support-ticket-row-icon{width:36px;height:36px;border-radius:11px;background:#f1f3f5;display:grid;place-items:center}.support-ticket-row-main{display:grid;min-width:0}.support-ticket-row-main b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.support-ticket-row-main small{color:var(--muted);font-size:.68rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.support-ticket-row-time{font-size:.68rem;color:var(--muted)} .support-status{white-space:nowrap;border-radius:999px;padding:6px 9px;font-size:.66rem;font-weight:850}.support-status.wait-master{background:#fff0de;color:#8a5700}.support-status.wait-tenant{background:#e8f4ff;color:#155a8a}.support-status.closed{background:#edf0f2;color:#6a727b}.support-status.open{background:#e7f6ec;color:#237440} .support-empty{display:grid;gap:4px;padding:25px 8px;color:var(--muted);text-align:center}.support-empty b{color:#30363c}.support-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.support-info-grid article{background:#fff;border:1px solid var(--line);border-radius:16px;padding:17px}.support-info-grid article>span{font-size:1.35rem}.support-info-grid h3{font-size:.95rem;margin:.55rem 0 .3rem}.support-info-grid p{font-size:.75rem;color:var(--muted);margin:0} .support-ticket-head,.support-master-ticket-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;margin-bottom:16px}.support-ticket-head h1,.support-master-ticket-head h1{margin:.4rem 0 .55rem;font-size:clamp(1.45rem,3vw,2.35rem)}.support-ticket-no{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.72rem;background:#f1f3f5;border-radius:8px;padding:5px 7px}.support-ticket-meta{display:flex;flex-wrap:wrap;gap:7px 12px;color:var(--muted);font-size:.7rem}.support-access-card{margin-bottom:16px;border-color:#f0d89c;background:#fffcf3}.support-access-card>div{display:flex;gap:12px;align-items:flex-start}.support-access-card>div>span{font-size:1.5rem}.support-access-card p{margin:.2rem 0 .5rem}.support-access-card code{display:block;margin:12px 0 4px;padding:12px;border-radius:10px;background:#22272d;color:#fff;overflow:auto;font-size:.9rem;letter-spacing:.04em} .support-thread{display:flex;flex-direction:column;gap:12px;margin:16px 0}.support-message-bubble{max-width:82%;border:1px solid var(--line);border-radius:18px;padding:14px 16px;background:#fff}.support-message-bubble.from-master{align-self:flex-start;border-bottom-left-radius:5px}.support-message-bubble.from-tenant{align-self:flex-end;background:#fff2f0;border-color:#ffd7d2;border-bottom-right-radius:5px}.support-message-author{display:flex;gap:9px;align-items:center;margin-bottom:10px}.support-message-author>span{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#f0f2f4}.support-message-author>div{display:grid}.support-message-author small{color:var(--muted);font-size:.65rem}.support-message-text{font-size:.88rem;line-height:1.55;overflow-wrap:anywhere}.support-reply-card{margin-top:16px}.support-reply-card form{display:grid;gap:10px}.support-reply-card textarea{resize:vertical;min-height:145px}.support-close-form{margin-top:8px}.support-closed-card{display:flex;align-items:center;gap:14px}.support-closed-card>span{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:#e9f7ee;color:#25824a;font-size:1.3rem;font-weight:900}.support-closed-card>div{flex:1}.support-closed-card h2{margin:0 0 3px}.support-closed-card p{margin:0;color:var(--muted)} .platform-support-section{display:grid;grid-template-columns:minmax(0,.85fr) minmax(420px,1.15fr);gap:32px;align-items:start;background:#1d2127;color:#fff;border-radius:28px;margin:60px auto;max-width:1200px;padding:44px}.support-home-copy{position:sticky;top:90px}.support-home-copy h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1;margin:.5rem 0 1rem}.support-home-copy p{color:#c8ccd1;max-width:480px}.support-home-points{display:grid;gap:8px;margin:20px 0}.support-home-points span{font-size:.78rem}.support-home-copy .btn-ghost{border-color:#505761;color:#fff}.support-home-form{background:#fff;color:var(--ink);border-radius:20px;padding:20px}.support-home-form .card-title{margin-bottom:10px} .support-master-filter{display:grid;grid-template-columns:180px 120px minmax(260px,1fr) auto;gap:10px;align-items:end}.support-master-filter input,.support-master-filter select{width:100%}.support-master-list{overflow:hidden}.support-master-list .support-ticket-row{grid-template-columns:42px minmax(0,1fr) 145px auto}.support-master-ticket-head{margin-top:0}.master-thread{max-width:1000px}.master-thread .support-message-bubble{max-width:75%}.master-support-compose{max-width:1000px}.support-filter-search{min-width:0} @media(max-width:900px){.support-hero{grid-template-columns:1fr}.support-hero-badges{justify-content:flex-start}.support-two-col{grid-template-columns:1fr}.support-info-grid{grid-template-columns:1fr 1fr}.platform-support-section{grid-template-columns:1fr;margin:40px 20px;padding:28px}.support-home-copy{position:static}.support-master-filter{grid-template-columns:1fr 1fr}.support-filter-search{grid-column:1/-1}.support-master-filter button{grid-column:1/-1}.support-ticket-row{grid-template-columns:42px minmax(0,1fr) auto}.support-ticket-row-time{display:none}} @media(max-width:620px){.support-topbar{min-height:66px;padding:8px 12px}.support-topbar>a:first-child img{width:68px}.support-topbar .btn{font-size:.67rem;padding:8px}.support-center-shell{padding:22px 12px 55px}.support-hero{padding-top:12px}.support-hero h1{font-size:2.35rem}.support-hero-badges{display:grid;grid-template-columns:1fr 1fr}.support-context-card{align-items:flex-start}.support-verified{display:none}.support-info-grid{grid-template-columns:1fr}.support-form-grid{grid-template-columns:1fr}.support-ticket-head,.support-master-ticket-head{display:grid}.support-message-bubble,.master-thread .support-message-bubble{max-width:94%}.support-ticket-row,.support-master-list .support-ticket-row{grid-template-columns:36px minmax(0,1fr)}.support-ticket-row .support-status{grid-column:2}.support-ticket-row-icon{width:32px;height:32px}.support-master-filter{grid-template-columns:1fr}.support-filter-search,.support-master-filter button{grid-column:auto}.platform-support-section{margin:28px 12px;padding:22px 16px;border-radius:20px}.support-home-form{padding:15px}.support-closed-card{align-items:flex-start;flex-wrap:wrap}.support-closed-card .btn{width:100%}} /* 0.2.15-beta: manual registration recovery */ .master-setup-notice{border:1px solid rgba(64,190,120,.45);background:linear-gradient(180deg,rgba(64,190,120,.08),rgba(255,255,255,.02))} .master-setup-notice label{display:block;margin-top:12px;font-weight:700} .master-setup-notice input[readonly]{width:100%;margin-top:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86rem} /* ========================================================== ET-HOST 0.2.16-beta – Supportcenter V2, registration UX, Master handoff, profile security and responsive admin menu ========================================================== */ /* Support is a dedicated light page. Fix legacy var(--ink) inheritance. */ .support-center-page,.support-home-form{color:var(--ink)} .support-center-page .captcha,.support-create-form .captcha{color:var(--ink);background:#fff8e8;border-color:#f0d79c} .support-center-page .captcha span,.support-create-form .captcha span{color:#4e4430} .support-top-actions{display:flex!important;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto!important} .support-page-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:18px;align-items:start} .support-side-stack{display:grid;gap:14px;position:sticky;top:94px} .support-main-panel{min-width:0} .support-context-actions{display:flex!important;align-items:center!important;justify-content:flex-end;gap:8px;flex:0 0 auto!important} .support-notify-card{display:flex;align-items:flex-start;gap:12px;padding:16px 17px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 30px rgba(23,27,32,.04)} .support-notify-card>span{font-size:1.45rem}.support-notify-card strong{display:block}.support-notify-card p{margin:4px 0 0;color:var(--muted);font-size:.76rem;line-height:1.5} .support-hero-clean{padding-top:18px} /* Landing page only links to the dedicated supportcenter. */ .platform-support-teaser{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:28px;align-items:stretch;background:#1d2127;color:#fff;border-radius:28px;margin-top:56px;margin-bottom:56px;padding:42px} .support-teaser-copy h2{font-size:clamp(2rem,4vw,3.6rem);line-height:1;margin:.5rem 0 1rem;max-width:700px} .support-teaser-copy>p{max-width:700px;color:#c8cdd3;font-size:1rem} .support-teaser-points{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:22px 0}.support-teaser-points span{font-size:.78rem;color:#e6e9ec} .support-teaser-copy .btn-ghost{background:transparent;color:#fff;border-color:#535b64} .support-teaser-card{background:#fff;color:var(--ink);border-radius:20px;padding:24px;display:flex;flex-direction:column;justify-content:center;gap:8px}.support-teaser-card>strong{font-size:1.2rem}.support-teaser-card p{color:var(--muted);font-size:.84rem}.support-teaser-card>a{color:var(--primary);font-weight:850}.support-teaser-icon{font-size:2.1rem} /* Registration feedback remains inside the create-chat card. */ .registration-card{scroll-margin-top:100px}.registration-feedback{padding:14px 15px;border-radius:13px;border:1px solid;margin-bottom:2px;font-weight:750;line-height:1.45}.registration-feedback.success{background:#eaf8ef;color:#176437;border-color:#c9ead5}.registration-feedback.error{background:#fff0ef;color:#a82822;border-color:#ffd1cd} .has-error>input,.has-error input,.has-error>.slug-field,.registration-captcha.has-error .captcha{border-color:#d9473d!important;box-shadow:0 0 0 3px rgba(217,71,61,.08)} .field-error{display:block;color:#b52c25!important;font-weight:750!important;font-size:.72rem!important;line-height:1.35;margin-top:3px} .availability-status{margin:-2px 0 2px;padding:10px 12px;border-radius:11px;border:1px solid var(--line);font-size:.78rem;font-weight:720;line-height:1.35}.availability-status.neutral{background:#f6f7f8;color:#66707a}.availability-status.success{background:#eaf8ef;color:#176437;border-color:#c9ead5}.availability-status.warn{background:#fff8e8;color:#825b10;border-color:#f0d79c}.availability-status.error{background:#fff0ef;color:#a82822;border-color:#ffd1cd} .registration-captcha{display:grid;gap:5px} /* Master manual onboarding and full tenant admin handoff. */ .master-manual-create{border-color:#dce4e9;background:linear-gradient(180deg,#fff,#fbfcfd)} .master-manual-form{display:grid;gap:14px;margin-top:16px}.master-manual-form .form-grid{max-width:920px}.master-tenant-tools{margin:0 0 18px}.master-tenant-tools form{margin:0} .master-override-banner{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 18px;padding:13px 15px;background:#fff8e8;border:1px solid #efd59a;border-radius:14px;color:#594419}.master-override-banner>div{display:grid;gap:2px}.master-override-banner strong{font-size:.88rem}.master-override-banner span{font-size:.72rem;color:#75613a}.master-override-banner .btn-ghost{white-space:nowrap;background:#fff} /* Member-owned account security. */ .profile2-password-card{scroll-margin-top:90px}.profile2-password-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end}.profile2-password-form label{min-width:0}.profile2-password-form button{grid-column:1/-1;justify-self:start}.profile2-password-form small{font-size:.68rem} /* Replace the old 80px/icon-only tablet admin menu with readable navigation. */ @media(max-width:1050px) and (min-width:821px){ .admin-shell{grid-template-columns:220px minmax(0,1fr)} .admin-sidebar{padding:14px 10px} .admin-logo span{font-size:.76rem!important}.admin-logo small{font-size:.65rem!important} .admin-sidebar nav a{font-size:.76rem!important;line-height:1.25;padding:8px 9px} .admin-sidebar nav a::first-letter{font-size:inherit!important} .admin-logo img{width:52px} .admin-main{padding-left:18px;padding-right:18px} } @media(max-width:900px){ .support-page-grid{grid-template-columns:1fr}.support-side-stack{position:static}.platform-support-teaser{grid-template-columns:1fr;margin-left:20px;margin-right:20px;padding:28px} .profile2-password-form{grid-template-columns:1fr 1fr}.profile2-password-form button{grid-column:1/-1} } @media(max-width:820px){ .admin-shell{display:block;min-height:100vh} .admin-sidebar{position:sticky;top:0;z-index:70;width:100%;height:auto;min-height:0;padding:8px 10px;display:block;border-bottom:1px solid #30363d;box-shadow:0 6px 18px rgba(0,0,0,.16)} .admin-logo{display:none} .admin-sidebar nav{display:flex;align-items:center;gap:6px;margin:0;overflow-x:auto;overflow-y:hidden;padding:2px 0 5px;scrollbar-width:thin;-webkit-overflow-scrolling:touch} .admin-sidebar nav a{display:block!important;flex:0 0 auto!important;width:auto!important;min-width:0!important;white-space:nowrap;font-size:.74rem!important;line-height:1.2!important;padding:9px 10px!important;border:1px solid #30363d;background:#22272d;color:#d9dee3} .admin-sidebar nav a::first-letter{font-size:inherit!important} .admin-side-footer{display:none} .admin-main{padding:0 12px 48px;min-width:0} .admin-top{height:auto;min-height:68px;padding:10px 0;gap:10px}.admin-top h1{font-size:1.3rem}.admin-top p{font-size:.72rem}.admin-top-actions{gap:6px}.admin-top-actions>a{font-size:.72rem;padding:7px 9px} .master-override-banner{align-items:flex-start;flex-direction:column}.master-override-banner .btn{width:100%} .admin-section{padding-top:26px;scroll-margin-top:66px} } @media(max-width:620px){ .support-topbar{flex-wrap:wrap}.support-topbar>div:nth-child(2){min-width:180px}.support-top-actions{width:100%;justify-content:flex-start}.support-top-actions .btn{flex:1} .support-context-card{flex-direction:column;align-items:stretch}.support-context-actions{justify-content:flex-start!important}.support-context-actions .btn{flex:1} .platform-support-teaser{margin:28px 12px;padding:22px 16px;border-radius:20px}.support-teaser-points{grid-template-columns:1fr}.support-teaser-copy .button-row .btn{width:100%} .profile2-password-form{grid-template-columns:1fr}.profile2-password-form button{grid-column:1} .master-manual-form .form-grid{grid-template-columns:1fr}.master-manual-form .form-grid .full{grid-column:1} } /* 0.2.16 Hauptadmin: sichere Chat-Selbstlöschung */ .admin-sidebar nav a.admin-danger-nav{color:#ffaaa4}.admin-sidebar nav a.admin-danger-nav:hover{background:#3a2223;color:#fff}.admin-danger-section .eyebrow{color:#b92f28}.tenant-delete-card{border-color:#f2b7b3;background:linear-gradient(180deg,#fff 0%,#fff9f8 100%);max-width:920px}.tenant-delete-warning{display:flex;gap:14px;align-items:flex-start;padding:16px;border:1px solid #ffd6d2;border-radius:14px;background:#fff0ef;color:#7f2420;margin-bottom:18px}.tenant-delete-warning>span{font-size:1.5rem;line-height:1}.tenant-delete-warning strong{display:block;font-size:1.05rem}.tenant-delete-warning p{margin:.3rem 0 0;color:#8c4a45}.tenant-delete-card>label{margin-top:14px}.tenant-delete-check{padding:12px 0}.tenant-delete-button{margin-top:6px;padding:11px 14px!important;border-radius:10px!important;font-weight:850!important} /* ========================================================== ET-HOST 0.2.18 – scalable image smileys ========================================================== */ .chat-page .chat-smiley{ width:auto!important; height:var(--smiley-size,64px)!important; max-width:min(180px,12em)!important; max-height:160px!important; object-fit:contain!important; vertical-align:middle!important; margin:.08em .14em!important; } .chat-page .smiley-grid{ grid-template-columns:repeat(auto-fill,minmax(68px,1fr))!important; align-items:stretch!important; } .chat-page .smiley-grid button{ min-height:max(66px,calc(var(--smiley-picker-size,52px) + 16px))!important; height:auto!important; padding:6px!important; overflow:hidden!important; } .chat-page .smiley-grid img{ width:auto!important; height:var(--smiley-picker-size,52px)!important; max-width:100%!important; max-height:88px!important; object-fit:contain!important; } .chat-page .smiley-popover.expanded .smiley-grid{ grid-template-columns:repeat(auto-fill,minmax(92px,1fr))!important; } .chat-page .smiley-popover.expanded .smiley-grid button{ min-height:max(84px,calc(var(--smiley-picker-size,68px) + 16px))!important; } .smiley-category-row{ display:grid; grid-template-columns:minmax(150px,1.4fr) 90px 130px 86px 86px minmax(180px,auto); gap:9px; align-items:end; padding:12px 0; border-bottom:1px solid #eef0f1; } .smiley-category-row label,.smiley-category-new label{margin:0;font-size:.74rem} .smiley-category-row .smiley-count{align-self:center;font-size:.76rem;color:#6d7780;font-weight:700} .smiley-category-new{display:grid;grid-template-columns:minmax(160px,1fr) 100px 140px auto;gap:9px;align-items:end;margin-top:14px} .smiley-edit-row{grid-template-columns:84px minmax(130px,1fr) 110px minmax(150px,1fr) 95px 115px 90px 78px minmax(150px,1fr) auto!important} .smiley-big{width:78px!important;height:78px!important} .smiley-big img,.smiley-preview{width:auto!important;height:min(var(--admin-smiley-size,64px),72px)!important;max-width:76px!important;max-height:72px!important;object-fit:contain!important} @media(max-width:1180px){ .smiley-category-row{grid-template-columns:1fr 90px 130px 90px}.smiley-category-row .button-row{grid-column:1/-1} .smiley-edit-row{grid-template-columns:84px 1fr 110px 1fr!important}.smiley-edit-row .button-row{grid-column:1/-1} } @media(max-width:760px){ .smiley-category-row,.smiley-category-new{grid-template-columns:1fr 1fr!important}.smiley-category-row .button-row,.smiley-category-new button{grid-column:1/-1} .smiley-edit-row{grid-template-columns:78px 1fr!important} .chat-page .smiley-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))!important} } /* ========================================================== ET-HOST 0.2.20-beta · Master-Zentrale / Backup-System ========================================================== */ .master-nav{position:sticky;top:72px;z-index:9;display:flex;align-items:center;gap:6px;padding:8px max(24px,calc((100vw - 1300px)/2));background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(12px);overflow-x:auto;scrollbar-width:thin}.master-nav a{display:flex;align-items:center;gap:7px;white-space:nowrap;padding:9px 12px;border-radius:10px;color:#59616a;font-size:.78rem;font-weight:800}.master-nav a:hover{background:#f2f4f6;color:#222}.master-nav a.active{background:#252a30;color:#fff}.master-nav a em{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:.66rem;font-style:normal}.master-title{align-items:center}.master-title h1{margin:.15rem 0}.master-title p{margin:4px 0 0;color:var(--muted);font-size:.82rem}.master-quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 16px}.master-quick-grid>a{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:2px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 15px;box-shadow:0 6px 18px rgba(29,35,41,.025);transition:.18s ease}.master-quick-grid>a:hover{transform:translateY(-1px);border-color:#cfd4d9;box-shadow:0 10px 24px rgba(29,35,41,.055)}.master-quick-grid>a>span{grid-row:1/3;font-size:1.55rem}.master-quick-grid>a>b{font-size:.88rem;color:#252a30}.master-quick-grid>a>small{font-size:.7rem;color:var(--muted)}.master-stat-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.master-collapsible{padding:0;overflow:hidden}.master-collapsible>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:15px;align-items:center;padding:18px 20px;font-weight:850}.master-collapsible>summary::-webkit-details-marker{display:none}.master-collapsible>summary:after{content:'＋';font-size:1.1rem;color:#6c757d}.master-collapsible[open]>summary:after{content:'−'}.master-collapsible>summary span{font-size:1rem}.master-collapsible>summary small{margin-left:auto;color:var(--muted);font-weight:500;font-size:.72rem}.master-collapsible-body{border-top:1px solid #eef0f1;padding:18px 20px 20px}.backup-safety{border-left:4px solid #252a30}.backup-content-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}.backup-content-grid>div{display:grid;gap:3px;padding:13px;border-radius:12px;background:#f7f8f9;border:1px solid #eceff1}.backup-content-grid b{font-size:.8rem}.backup-content-grid small{font-size:.69rem;color:var(--muted);line-height:1.45}.danger-text{color:#9b3b35!important}.backup-list{display:grid;margin-top:12px}.backup-row{display:grid;grid-template-columns:minmax(260px,1.5fr) 110px 120px 180px 210px;gap:12px;align-items:center;padding:13px 4px;border-bottom:1px solid #eef0f1}.backup-row:last-child{border-bottom:0}.backup-main,.backup-meta,.backup-hash{display:grid;gap:3px}.backup-main small,.backup-meta small,.backup-hash small{font-size:.68rem;color:var(--muted)}.backup-main b{font-size:.8rem}.backup-hash code{font-size:.7rem;overflow:hidden;text-overflow:ellipsis}.backup-actions{display:flex;justify-content:flex-end;gap:7px;align-items:center}.backup-actions form{margin:0}.backup-actions button,.backup-actions .btn{min-height:35px;padding:7px 10px;font-size:.72rem}.backup-error{grid-column:4/5;color:#a33}.backup-progress{display:grid;gap:6px}.backup-progress>span{display:block;height:7px;border-radius:999px;background:linear-gradient(90deg,#cfd4d8 0,#252a30 45%,#cfd4d8 100%);background-size:220% 100%;animation:backupPulse 1.4s linear infinite}.backup-progress small{font-size:.68rem;color:var(--muted)}@keyframes backupPulse{0%{background-position:100% 0}100%{background-position:-100% 0}}.master-empty{display:grid;place-items:center;text-align:center;padding:38px 20px;color:var(--muted)}.master-empty>span{font-size:2rem}.master-empty>b{color:#30363c;margin-top:6px}.master-empty p{margin:5px 0}.status.bad{color:#b0332e} @media(max-width:1120px){.master-stat-grid{grid-template-columns:repeat(3,1fr)}.master-quick-grid{grid-template-columns:repeat(2,1fr)}.backup-content-grid{grid-template-columns:repeat(2,1fr)}.backup-row{grid-template-columns:minmax(240px,1.4fr) 100px 110px minmax(150px,1fr)}.backup-actions{grid-column:1/-1;justify-content:flex-start}.backup-error{grid-column:4/5}} @media(max-width:760px){.master-nav{top:72px;padding:7px 12px}.master-nav a{padding:8px 10px;font-size:.72rem}.master-title{align-items:flex-start;gap:12px}.master-title>.btn,.master-title>form{width:100%}.master-title>form button{width:100%}.master-quick-grid{grid-template-columns:1fr 1fr}.master-stat-grid{grid-template-columns:1fr 1fr}.master-collapsible>summary{align-items:flex-start;flex-wrap:wrap}.master-collapsible>summary small{width:100%;margin-left:0}.backup-content-grid{grid-template-columns:1fr}.backup-row{grid-template-columns:1fr 90px}.backup-meta{grid-column:1}.backup-hash,.backup-progress,.backup-error{grid-column:1/-1}.backup-actions{grid-column:1/-1}.backup-actions .btn,.backup-actions button{flex:1}.backup-actions form{flex:1;display:flex}.backup-actions form button{width:100%}} @media(max-width:480px){.master-quick-grid{grid-template-columns:1fr}.master-stat-grid{grid-template-columns:1fr 1fr}.master-head{padding:0 12px}.master-head>a img{width:64px}.master-main{padding-top:18px}} /* ET-HOST 0.2.21-beta: clearer per-smiley destructive action */ .smiley-edit-row .smiley-delete-button{background:#b42318!important;color:#fff!important;border-color:#b42318!important;white-space:nowrap} .smiley-edit-row .smiley-delete-button:hover{background:#8f1d14!important} @media(max-width:760px){.smiley-edit-row .button-row .smiley-delete-button{flex:1 1 170px}} /* ET-HOST 0.2.21-beta: manual create remains prominent in structured Master UI */ .master-manual-create-cta .card-title{align-items:center}.master-manual-create-cta .btn{white-space:nowrap}.master-manual-create .master-manual-form{max-width:980px}.master-nav a[href$="/master/chat-new"]{font-weight:800} @media(max-width:760px){.master-manual-create-cta .card-title{align-items:flex-start;flex-direction:column}.master-manual-create-cta .btn{width:100%;text-align:center}} /* ========================================================== ET-HOST 0.2.22-beta · Smilie-Admin + moderner On-Air-Player ========================================================== */ .smiley-edit-row{ grid-template-columns:72px minmax(0,1.2fr) minmax(0,.78fr) minmax(0,1.2fr) minmax(0,.7fr) minmax(0,.82fr) minmax(0,.68fr) minmax(0,.72fr)!important; column-gap:10px!important; row-gap:12px!important; align-items:end!important; overflow:hidden; } .smiley-edit-row>*{min-width:0} .smiley-edit-row>.smiley-big{grid-column:1;grid-row:1} .smiley-edit-row>label:nth-of-type(1){grid-column:2;grid-row:1} .smiley-edit-row>label:nth-of-type(2){grid-column:3;grid-row:1} .smiley-edit-row>label:nth-of-type(3){grid-column:4;grid-row:1} .smiley-edit-row>label:nth-of-type(4){grid-column:5;grid-row:1} .smiley-edit-row>label:nth-of-type(5){grid-column:6;grid-row:1} .smiley-edit-row>label:nth-of-type(6){grid-column:7;grid-row:1} .smiley-edit-row>label:nth-of-type(7){grid-column:8;grid-row:1} .smiley-edit-row>label:nth-of-type(8){grid-column:2/6;grid-row:2} .smiley-edit-row>.button-row{ grid-column:6/9!important; grid-row:2; display:flex!important; justify-content:flex-end; align-items:stretch; flex-wrap:wrap; gap:8px; width:100%; min-width:0; } .smiley-edit-row>.button-row button{flex:1 1 145px;min-width:0;max-width:100%;white-space:normal!important} .radio-player{ min-height:58px; grid-template-columns:auto 42px minmax(0,1fr) 92px!important; gap:9px!important; padding:6px 10px!important; border:1px solid rgba(255,255,255,.08); background:linear-gradient(135deg,#171b20,#252b32)!important; box-shadow:0 8px 24px rgba(13,18,24,.16); } .radio-player-copy{display:grid!important;min-width:0} .radio-onair-host{ display:grid; grid-template-columns:44px minmax(0,72px); align-items:center; gap:7px; min-width:0; padding-right:8px; border-right:1px solid rgba(255,255,255,.12); } .radio-onair-host[hidden]{display:none!important} .radio-onair-avatar{ width:44px;height:44px;border-radius:50%;overflow:hidden; display:grid!important;place-items:center; border:2px solid #ff564e; background:#313840; box-shadow:0 0 0 3px rgba(255,86,78,.14); } .radio-onair-avatar img{width:100%;height:100%;object-fit:cover;display:block} .radio-onair-initial{display:grid!important;place-items:center;width:100%;height:100%;font-weight:900;color:#fff;font-size:1rem} .radio-onair-meta{display:grid!important;min-width:0;line-height:1.05} .radio-onair-meta em{font-style:normal;font-size:.58rem;font-weight:950;letter-spacing:.08em;color:#ff7169} .radio-onair-meta b{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff} .community-status-badge[data-status="onair"]{background:#ff554d!important;box-shadow:0 0 0 4px rgba(255,85,77,.12)} .online-status-label[data-status="onair"]{color:#d52e27!important;font-weight:850} @media(max-width:1180px){ .smiley-edit-row{grid-template-columns:64px repeat(3,minmax(0,1fr))!important} .smiley-edit-row>.smiley-big,.smiley-edit-row>label:nth-of-type(n),.smiley-edit-row>.button-row{grid-column:auto!important;grid-row:auto!important} .smiley-edit-row>.button-row{grid-column:1/-1!important;justify-content:flex-end} } @media(max-width:760px){ .smiley-edit-row{grid-template-columns:52px minmax(0,1fr)!important;padding:14px 0!important} .smiley-edit-row>.smiley-big{grid-column:1!important} .smiley-edit-row>label{grid-column:2!important} .smiley-edit-row>.button-row{grid-column:1/-1!important} .radio-player{grid-template-columns:auto 40px minmax(0,1fr)!important;min-height:62px} .radio-player input[data-radio-volume]{grid-column:2/-1;width:100%} .radio-player-lautfm .lautfm-external-link{grid-column:auto} } @media(max-width:520px){ .radio-onair-host{grid-template-columns:42px;min-width:42px;padding-right:7px} .radio-onair-meta{display:none!important} } /* ========================================================== ET-HOST 0.2.23-beta – DJ-Panel, Wunschbox & Sendeplan ========================================================== */ .tenant-actions .tenant-dj-tool{display:inline-flex;align-items:center;gap:5px;white-space:nowrap} .tenant-actions .tenant-dj-tool[hidden]{display:none!important} .dj-public-modal[hidden]{display:none!important} .dj-public-modal{position:fixed;inset:0;z-index:160;display:grid;place-items:center;padding:20px} .dj-public-backdrop{position:absolute;inset:0;background:rgba(13,17,22,.68);backdrop-filter:blur(6px)} .dj-public-dialog{position:relative;width:min(980px,calc(100vw - 32px));max-height:min(82vh,820px);overflow:auto;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 90px rgba(0,0,0,.28);padding:20px} .dj-public-dialog>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:2px 2px 16px;border-bottom:1px solid #edf0f2;margin-bottom:16px} .dj-public-dialog>header h2{margin:2px 0 0;font-size:1.6rem;line-height:1.1} .dj-public-dialog>header p{margin:5px 0 0;color:var(--muted)} .dj-modal-close{width:38px;height:38px;border-radius:12px;background:#f1f3f5;color:#20252b;font-size:1.5rem;line-height:1} body.dj-modal-open{overflow:hidden} .dj-calendar{display:grid;gap:14px} .dj-calendar-day{border:1px solid #e6e9ed;border-radius:18px;overflow:hidden;background:#fbfcfd} .dj-calendar-day>header{padding:10px 14px;background:#20252b;color:#fff;font-weight:900;letter-spacing:.02em;text-transform:capitalize} .dj-calendar-show{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;padding:14px;border-top:1px solid #eceff2;background:#fff} .dj-calendar-day .dj-calendar-show:first-of-type{border-top:0} .dj-calendar-visual{width:120px;height:92px;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#262c33,#4a535c);display:grid;place-items:center} .dj-calendar-visual img{width:100%;height:100%;object-fit:cover} .dj-calendar-flyer-placeholder{font-size:2rem} .dj-calendar-copy{min-width:0;display:grid;align-content:start;gap:4px} .dj-calendar-time{font-size:.72rem;font-weight:900;color:var(--primary);letter-spacing:.04em;text-transform:uppercase} .dj-calendar-copy>strong{font-size:1.05rem;line-height:1.2} .dj-calendar-copy p{margin:4px 0 0;color:#5e6872;font-size:.86rem;line-height:1.45;white-space:pre-wrap} .dj-calendar-dj{display:flex;align-items:center;gap:7px;font-size:.78rem;font-weight:800;color:#59636d} .dj-calendar-avatar{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;overflow:hidden;background:#252a30;color:#fff;font-size:.72rem;font-weight:900;flex:none} .dj-calendar-avatar img{width:100%;height:100%;object-fit:cover} .dj-public-empty{min-height:190px;display:grid;place-items:center;align-content:center;text-align:center;gap:5px;color:#6d7680;border:1px dashed #ccd2d8;border-radius:18px;background:#fafbfc} .dj-public-empty>span{font-size:2.3rem}.dj-public-empty strong{color:#303840}.dj-public-empty small{font-size:.78rem} .dj-wish-dialog{width:min(610px,calc(100vw - 32px))} .dj-public-wish-form{display:grid;gap:12px} .dj-public-wish-form button{background:var(--primary);color:#fff;padding:12px 16px;border-radius:12px;font-weight:850} .dj-wish-feedback{min-height:22px;margin:0;font-size:.82rem;font-weight:750;color:#65707b} .dj-wish-feedback.success{color:#187640}.dj-wish-feedback.error{color:#b52e28} .dj-panel-page{background:#f4f6f8} .dj-panel-shell{max-width:1240px;margin:0 auto;padding:28px 22px 70px} .dj-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px} .dj-panel-head h1{font-size:clamp(2rem,4vw,3.2rem);line-height:1;margin:.35rem 0 .6rem;letter-spacing:-.04em} .dj-panel-head p{margin:0;color:var(--muted);font-size:1rem} .dj-panel-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:16px;margin-bottom:16px} .dj-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 10px 32px rgba(25,30,35,.05)} .dj-card.wide{margin-top:16px} .dj-card-title{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px} .dj-card-title h2{margin:2px 0 0;font-size:1.3rem}.dj-card-title>span{font-size:.76rem;color:var(--muted);font-weight:800} .dj-state{padding:5px 9px;border-radius:999px;font-size:.68rem!important;letter-spacing:.04em}.dj-state.online{background:#e9f8ef;color:#14713b}.dj-state.offline{background:#f1f3f5;color:#69717b} .dj-wish-control>p{color:#5e6872;min-height:52px}.dj-wish-control form{margin-top:15px} .dj-schedule-form{display:grid;gap:12px}.dj-form-row{display:grid;grid-template-columns:1fr 150px;gap:10px}.dj-schedule-form button{background:#20252b;color:#fff;padding:12px 16px;border-radius:12px;font-weight:850} .dj-schedule-admin-list,.dj-wish-list{display:grid} .dj-schedule-admin-row{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid #edf0f2}.dj-schedule-admin-row:last-child{border-bottom:0} .dj-schedule-admin-visual{width:92px;height:72px;border-radius:13px;overflow:hidden;background:#242a30;color:#fff;display:grid;place-items:center}.dj-schedule-admin-visual img{width:100%;height:100%;object-fit:cover}.dj-flyer-placeholder{font-size:1.7rem} .dj-schedule-admin-row>div:nth-child(2){display:grid;gap:2px;min-width:0}.dj-schedule-admin-row strong{font-size:.98rem}.dj-schedule-admin-row span{font-size:.78rem;font-weight:800;color:var(--primary)}.dj-schedule-admin-row small{font-size:.72rem}.dj-schedule-admin-row p{margin:4px 0 0;color:#66717b;font-size:.8rem} .dj-wish-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:13px 0;border-bottom:1px solid #edf0f2}.dj-wish-row:last-child{border-bottom:0}.dj-wish-row>div:first-child{display:grid;gap:2px;min-width:0}.dj-wish-row strong{font-size:.98rem}.dj-wish-row small{font-size:.73rem}.dj-wish-row p{margin:5px 0 0;color:#5f6973}.dj-wish-time{font-size:.68rem;color:#8a939c}.dj-wish-row .button-row{flex-wrap:nowrap}.dj-wish-row form{margin:0} .dj-empty{padding:28px;text-align:center;color:#77808a;background:#fafbfc;border:1px dashed #d6dbe0;border-radius:14px} @media(max-width:900px){ .dj-panel-grid{grid-template-columns:1fr} .dj-panel-head{flex-direction:column} .dj-panel-head .button-row{width:100%;flex-wrap:wrap} .dj-schedule-admin-row{grid-template-columns:76px minmax(0,1fr)} .dj-schedule-admin-row>form{grid-column:1/-1} } @media(max-width:760px){ .tenant-actions .tenant-dj-tool span{display:none} .dj-public-modal{padding:8px} .dj-public-dialog{width:calc(100vw - 16px);max-height:88vh;border-radius:18px;padding:14px} .dj-calendar-show{grid-template-columns:84px minmax(0,1fr);gap:10px;padding:10px} .dj-calendar-visual{width:84px;height:76px} .dj-calendar-copy p{font-size:.8rem} .dj-panel-shell{padding:18px 12px 55px} .dj-form-row{grid-template-columns:1fr} .dj-wish-row{grid-template-columns:1fr}.dj-wish-row .button-row{justify-content:flex-start;flex-wrap:wrap} } /* ========================================================== ET-HOST 0.2.24-beta – Startseiten-Vorschau wie echter Demo-Chat ========================================================== */ .hero-demo-preview{ width:min(760px,100%); margin-left:auto; background:#f6f7f8; border:1px solid #dfe3e7; border-radius:22px; box-shadow:0 34px 90px rgba(24,29,34,.18); overflow:hidden; transform:rotate(.55deg); transform-origin:center; color:#1e2329; } .hero-demo-head{ min-height:66px; display:grid; grid-template-columns:minmax(132px,.82fr) minmax(260px,1.55fr) auto; align-items:center; gap:10px; padding:8px 10px; background:#fff; border-bottom:1px solid #e2e5e8; } .hero-demo-brand{display:flex;align-items:center;gap:8px;min-width:0} .hero-demo-brand img{width:48px;height:38px;object-fit:contain;flex:0 0 auto} .hero-demo-brand span{display:grid;min-width:0;line-height:1.1} .hero-demo-brand b{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hero-demo-brand small{font-size:.54rem;color:#7a838c} .hero-demo-player{ min-width:0; min-height:48px; display:grid; grid-template-columns:auto 34px minmax(0,1fr) 60px; align-items:center; gap:7px; padding:5px 8px; border-radius:12px; color:#fff; background:linear-gradient(135deg,#171b20,#252b32); box-shadow:0 7px 20px rgba(13,18,24,.14); } .hero-demo-onair{display:grid;grid-template-columns:34px auto;align-items:center;gap:5px;padding-right:7px;border-right:1px solid rgba(255,255,255,.12)} .hero-demo-onair-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:2px solid #ff564e;background:#343b43;color:#fff;font-weight:900;font-size:.7rem;box-shadow:0 0 0 2px rgba(255,86,78,.14)} .hero-demo-onair>span:last-child{display:grid;line-height:1.02} .hero-demo-onair em{font-style:normal;font-size:.46rem;font-weight:950;letter-spacing:.08em;color:#ff7169} .hero-demo-onair b{font-size:.58rem;color:#fff} .hero-demo-play{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--primary);font-size:.64rem;padding-left:2px} .hero-demo-player-copy{display:grid;min-width:0;line-height:1.14} .hero-demo-player-copy b,.hero-demo-player-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hero-demo-player-copy b{font-size:.7rem}.hero-demo-player-copy small{font-size:.48rem;color:#adb5be} .hero-demo-volume{display:flex;align-items:center;gap:3px}.hero-demo-volume i{display:block;height:6px;background:#d4d7da;border:1px solid #9fa5aa}.hero-demo-volume i:first-child{width:36px}.hero-demo-volume i:last-child{width:15px} .hero-demo-actions{display:flex;justify-content:flex-end;align-items:center;gap:5px;white-space:nowrap} .hero-demo-actions span{background:#f1f3f5;border-radius:8px;padding:7px 8px;font-size:.52rem;font-weight:800;color:#39434c} .hero-demo-layout{height:420px;display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:8px;padding:8px;background:#f4f5f6} .hero-demo-chat,.hero-demo-users{background:#fff;border:1px solid #e0e4e7;border-radius:14px;overflow:hidden;min-width:0} .hero-demo-chat{display:grid;grid-template-rows:auto auto 1fr auto} .hero-demo-rooms{display:flex;gap:5px;padding:8px;border-bottom:1px solid #e8eaed;overflow:hidden} .hero-demo-rooms span,.hero-demo-rooms b{white-space:nowrap;border-radius:7px;padding:5px 7px;background:#f1f3f4;font-size:.56rem;font-weight:800} .hero-demo-rooms b{background:#22272d;color:#fff} .hero-demo-welcome{margin:6px 8px 0;padding:6px 8px;border:1px solid #efd8a2;border-radius:8px;background:#fff4dc;color:#75571e;font-size:.55rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hero-demo-messages{padding:7px 10px 5px;overflow:hidden} .hero-demo-message{display:grid;grid-template-columns:30px minmax(0,1fr);gap:7px;padding:6px 0;border-bottom:1px solid #f0f1f2} .hero-demo-message.compact{padding-bottom:4px} .hero-demo-avatar{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;font-weight:900;font-size:.62rem;background:linear-gradient(135deg,#ef5547,#353b42);flex:0 0 auto} .hero-demo-avatar.blue{background:linear-gradient(135deg,#4d66db,#27376f)}.hero-demo-avatar.green{background:linear-gradient(135deg,#24986f,#214c40)}.hero-demo-avatar.purple{background:linear-gradient(135deg,#9a62d1,#4b3564)}.hero-demo-avatar.red{background:linear-gradient(135deg,#ef5547,#3b3435)} .hero-demo-message strong{display:block;font-size:.62rem;line-height:1.05}.hero-demo-message strong small{font-weight:500;color:#9aa1a9;font-size:.48rem;margin-left:4px}.hero-demo-message p{margin:3px 0 0;font-size:.58rem;line-height:1.28;color:#1f252a} .hero-demo-compose{padding:7px;border-top:1px solid #e7e9ec;background:#fff} .hero-demo-tools{display:flex;align-items:center;gap:4px;margin-bottom:5px}.hero-demo-tools>span{height:25px;min-width:25px;padding:0 5px;border:1px solid #e1e5e8;border-radius:7px;display:grid;place-items:center;font-size:.53rem;font-weight:800;background:#fff}.hero-demo-tools .gif{background:#20252b;color:#fff;font-size:.42rem}.hero-demo-tools .status{min-width:94px;justify-content:start;color:#3c454e}.hero-demo-tools .status::first-letter{color:#39b76a} .hero-demo-input{height:32px;border:1px solid #dfe3e7;border-radius:9px;display:flex;align-items:center;justify-content:space-between;padding-left:9px;color:#9098a0;font-size:.58rem;overflow:hidden}.hero-demo-input b{width:34px;height:32px;display:grid;place-items:center;background:var(--primary);color:#fff;font-size:.72rem} .hero-demo-users{overflow:hidden}.hero-demo-users header{display:flex;justify-content:space-between;align-items:center;padding:9px;border-bottom:1px solid #e6e9ec;font-size:.58rem}.hero-demo-users>div{display:grid;grid-template-columns:30px minmax(0,1fr) 6px;gap:6px;align-items:center;padding:7px 8px}.hero-demo-users p{margin:0;display:grid;min-width:0;line-height:1.08}.hero-demo-users p b{font-size:.57rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero-demo-users p small{font-size:.47rem;color:#717b84}.hero-demo-users>div>i{width:5px;height:5px;border-radius:50%;background:#39b76a} @media(max-width:1220px){.hero-demo-head{grid-template-columns:120px minmax(240px,1fr)}.hero-demo-actions{display:none}.hero-demo-layout{grid-template-columns:minmax(0,1fr) 135px}} @media(max-width:1050px){.hero-demo-preview{margin:0;transform:none}.hero-demo-layout{height:400px}} @media(max-width:760px){.hero-visual{display:none!important}} /* ========================================================== ET-HOST 0.2.25-beta – DJ-Panel Studio UI ========================================================== */ .dj-panel-page{background:radial-gradient(circle at 8% 4%,rgba(239,85,71,.09),transparent 28rem),linear-gradient(180deg,#f4f6f8 0,#eef1f4 100%)} .dj-panel-shell{max-width:1180px;padding:30px 22px 72px} .dj-panel-head{position:relative;overflow:hidden;margin-bottom:20px;padding:26px 28px;border:1px solid rgba(255,255,255,.12);border-radius:26px;background:linear-gradient(135deg,#20252b 0%,#292f36 58%,#3a2a2a 100%);box-shadow:0 24px 60px rgba(22,28,34,.16);color:#fff} .dj-panel-head::after{content:"";position:absolute;right:-85px;top:-130px;width:300px;height:300px;border-radius:50%;background:rgba(239,85,71,.16);pointer-events:none} .dj-panel-head>div{position:relative;z-index:1}.dj-panel-head .eyebrow{color:#ff948a}.dj-panel-head h1{color:#fff;margin:.3rem 0 .55rem}.dj-panel-head p{color:#c9d0d6;max-width:650px} .dj-panel-head .button-row{position:relative;z-index:2}.dj-panel-head .btn{min-height:42px;border-radius:13px;border:1px solid rgba(255,255,255,.18);background:#fff;color:#20252b;font-weight:850;box-shadow:none}.dj-panel-head .btn.btn-ghost{background:rgba(255,255,255,.08);color:#fff} .dj-panel-grid{grid-template-columns:minmax(320px,.88fr) minmax(0,1.12fr);gap:18px} .dj-card{border:1px solid #e1e5e9;border-radius:22px;padding:22px;box-shadow:0 12px 34px rgba(28,34,40,.065)} .dj-card-title{margin-bottom:16px;padding-bottom:13px;border-bottom:1px solid #edf0f2}.dj-card-title h2{font-size:1.38rem;letter-spacing:-.02em}.dj-card-title .eyebrow{font-size:.68rem;letter-spacing:.09em;color:#8a939c} .dj-state{display:inline-flex;align-items:center;justify-content:center;min-width:84px;padding:7px 11px;border-radius:999px;border:1px solid transparent;font-size:.69rem!important;font-weight:950;letter-spacing:.055em} .dj-state.online{background:#e8f8ee;border-color:#bce7cb;color:#11703a;box-shadow:0 0 0 4px rgba(27,154,82,.07)}.dj-state.offline{background:#f3f5f6;border-color:#e0e4e7;color:#68727c} .dj-wish-control{min-height:100%;display:flex;flex-direction:column;background:linear-gradient(180deg,#fff 0%,#fff 70%,#fff8f7 100%)} .dj-wish-control>p{min-height:0;margin:2px 0 18px;padding:14px 15px;border-radius:14px;background:#f7f8fa;border:1px solid #eceff2;line-height:1.5}.dj-wish-control form{margin-top:auto} .dj-wish-control form button{width:100%;min-height:50px;border-radius:14px;padding:12px 16px;background:linear-gradient(135deg,#ef5547,#d94337);color:#fff;font-weight:900;box-shadow:0 10px 24px rgba(239,85,71,.2)} .dj-wish-control form button.danger{background:#fff1ef;color:#b62e25;border:1px solid #f2c8c3;box-shadow:none}.dj-wish-control form button:disabled{background:#eef1f3;color:#98a0a8;border:1px solid #dfe3e6;box-shadow:none} .dj-schedule-form{gap:13px}.dj-schedule-form label{display:grid;gap:7px;font-size:.78rem;font-weight:850;color:#4f5963} .dj-schedule-form input,.dj-schedule-form select,.dj-schedule-form textarea{width:100%;min-height:44px;border:1px solid #dce1e5;border-radius:12px;background:#fbfcfd;padding:10px 12px;color:#20252b;box-shadow:inset 0 1px 1px rgba(0,0,0,.02)} .dj-schedule-form textarea{min-height:96px;resize:vertical}.dj-schedule-form input:focus,.dj-schedule-form select:focus,.dj-schedule-form textarea:focus{outline:0;border-color:rgba(239,85,71,.7);box-shadow:0 0 0 4px rgba(239,85,71,.1);background:#fff}.dj-schedule-form label small{font-weight:650;color:#89929b} .dj-schedule-form>button{min-height:48px;border-radius:14px;background:linear-gradient(135deg,#242a30,#171b1f);box-shadow:0 10px 22px rgba(24,29,34,.14)} .dj-card.wide{margin-top:18px}.dj-schedule-admin-row,.dj-wish-row{padding:15px 4px}.dj-schedule-admin-row:hover,.dj-wish-row:hover{background:#fbfcfd}.dj-schedule-admin-visual{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}.dj-empty{padding:34px 20px;background:linear-gradient(180deg,#fbfcfd,#f7f9fa)} @media(max-width:900px){.dj-panel-grid{grid-template-columns:1fr}.dj-panel-head{padding:22px}} @media(max-width:600px){.dj-panel-shell{padding:12px 10px 48px}.dj-panel-head{padding:19px 16px;border-radius:20px}.dj-panel-head h1{font-size:2rem}.dj-panel-head .button-row{display:grid;grid-template-columns:1fr 1fr;width:100%}.dj-panel-head .btn{justify-content:center}.dj-card{padding:16px;border-radius:18px}.dj-card-title{gap:10px}.dj-state{min-width:76px;padding:6px 8px}} .dj-wish-control>button{width:100%;min-height:50px;border-radius:14px;padding:12px 16px;background:linear-gradient(135deg,#ef5547,#d94337);color:#fff;font-weight:900;box-shadow:0 10px 24px rgba(239,85,71,.2)} /* ========================================================== ET-HOST CHAT NAVIGATION V2 · 0.2.26-beta Compact, stable desktop toolbar; mobile bottom dock remains. ========================================================== */ .chat-page .tenant-head{ grid-template-columns:minmax(180px,.78fr) minmax(360px,560px) minmax(420px,1.22fr); gap:14px; padding-left:18px; padding-right:18px; } .chat-page .tenant-brand{min-width:0;} .chat-page .tenant-brand strong{font-size:.94rem;} .chat-page .tenant-actions{ min-width:0; display:flex; align-items:center; justify-content:flex-end; flex-wrap:nowrap; gap:5px; } .chat-page .tenant-actions>a, .chat-page .tenant-actions>button, .chat-page .tenant-actions>form>button{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:42px; height:42px; min-height:42px; padding:0 10px; border:1px solid #e4e8eb; border-radius:11px; background:#f5f7f8; color:#29323a; font-size:.78rem; font-weight:800; line-height:1; white-space:nowrap; word-break:normal; box-shadow:none; transition:background .15s ease,border-color .15s ease,transform .15s ease; } .chat-page .tenant-actions>a:hover, .chat-page .tenant-actions>button:hover, .chat-page .tenant-actions>form>button:hover{ background:#fff; border-color:#cfd6dc; transform:translateY(-1px); } .chat-page .tenant-actions .tenant-action-icon{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; font-size:1rem; line-height:1; } .chat-page .tenant-actions .tenant-action-label{ display:inline-block; white-space:nowrap; } .chat-page .tenant-actions .tenant-dj-tool[data-dj-open="schedule"]{ background:#eef4ff; border-color:#dce7f8; } .chat-page .tenant-actions .tenant-wishbox-button:not([hidden]){ background:#edf9f2; border-color:#cfe9da; color:#17683d; } .chat-page .tenant-actions .tenant-users-action{ padding-left:9px; padding-right:9px; } .chat-page .tenant-actions .tenant-online-count{ display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:#252b31; color:#fff; font-size:.66rem; line-height:20px; } .chat-page .tenant-actions .tenant-logout-form{margin:0;} .chat-page .tenant-actions .tenant-logout-action{ width:42px; padding:0; background:#fff4f2; border-color:#f0d9d5; color:#a43b31; } .chat-page .tenant-actions .tenant-custom-link{ max-width:118px; } .chat-page .tenant-actions .tenant-custom-link-label{ overflow:hidden; text-overflow:ellipsis; } @media (min-width:761px) and (max-width:1320px){ .chat-page .tenant-head{ grid-template-columns:minmax(150px,.7fr) minmax(320px,500px) minmax(360px,1.3fr); gap:10px; padding-left:12px; padding-right:12px; } .chat-page .tenant-actions>a, .chat-page .tenant-actions>button, .chat-page .tenant-actions>form>button{ padding-left:8px; padding-right:8px; gap:4px; } .chat-page .tenant-actions .tenant-custom-link-label{ display:none; } } @media (min-width:761px) and (max-width:1120px){ .chat-page .tenant-actions .tenant-action-label{ display:none; } .chat-page .tenant-actions>a, .chat-page .tenant-actions>button, .chat-page .tenant-actions>form>button{ width:42px; padding:0; } .chat-page .tenant-actions .tenant-users-action{ width:auto; padding:0 7px; } } @media(max-width:760px){ .chat-page .tenant-actions .tenant-action-label{ display:inline-block!important; } .chat-page .tenant-actions .tenant-logout-action .tenant-action-label{ display:none!important; } } /* ========================================================== ET-HOST 0.2.27-beta – kompakter Chat-Player ========================================================== */ @media (min-width:761px){ .chat-page .tenant-head{ grid-template-columns:minmax(180px,.9fr) minmax(300px,440px) minmax(430px,1.35fr); gap:12px; } .chat-page .radio-player{ min-height:50px!important; grid-template-columns:auto 34px minmax(0,1fr) 78px!important; gap:7px!important; padding:5px 8px!important; border-radius:11px; box-shadow:0 6px 18px rgba(13,18,24,.14); } .chat-page .play-btn{ width:32px; height:32px; font-size:.82rem; } .chat-page .radio-onair-host{ grid-template-columns:36px minmax(0,60px); gap:5px; padding-right:6px; } .chat-page .radio-onair-avatar{ width:36px; height:36px; } .chat-page .radio-onair-meta em{font-size:.49rem} .chat-page .radio-onair-meta b{font-size:.65rem} .chat-page .radio-player-copy strong{font-size:.82rem} .chat-page .radio-player-copy small{font-size:.64rem} .chat-page .radio-player input[data-radio-volume]{ width:78px!important; min-width:0!important; max-width:78px!important; justify-self:end; } } @media (min-width:761px) and (max-width:1320px){ .chat-page .tenant-head{ grid-template-columns:minmax(150px,.75fr) minmax(285px,390px) minmax(390px,1.45fr); } .chat-page .radio-player{ grid-template-columns:auto 32px minmax(0,1fr) 68px!important; } .chat-page .radio-player input[data-radio-volume]{width:68px!important;max-width:68px!important} } /* ========================================================== ET-HOST 0.2.28-beta – Mobile Chat UI V5 Klarer Kopfbereich, immer erreichbare Online-Liste und kompakte Bottom-Navigation ohne versteckte Kernfunktionen. ========================================================== */ .mobile-users-trigger, .user-panel-close{ display:none; } @media(max-width:760px){ .chat-page .tenant-head{ display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; grid-template-areas: "brand users" "player player"!important; align-items:center!important; gap:6px 8px!important; min-height:0!important; padding:7px 8px!important; border-bottom:1px solid #e3e7ea!important; box-shadow:0 5px 16px rgba(20,28,36,.055)!important; background:rgba(255,255,255,.985)!important; } .chat-page .tenant-brand{ grid-area:brand!important; gap:8px!important; min-width:0!important; } .chat-page .tenant-brand img, .chat-page .tenant-brand .tenant-custom-logo{ width:42px!important; height:42px!important; max-height:42px!important; border-radius:9px!important; object-fit:contain!important; } .chat-page .tenant-brand strong{ font-size:.84rem!important; line-height:1.1!important; } .chat-page .tenant-brand small{ font-size:.64rem!important; line-height:1.1!important; margin-top:2px!important; } .chat-page .mobile-users-trigger{ grid-area:users!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:5px!important; width:auto!important; min-width:50px!important; height:40px!important; padding:0 10px!important; margin:0!important; border:1px solid #dde3e7!important; border-radius:12px!important; background:#f4f6f8!important; color:#252d35!important; font-weight:900!important; box-shadow:none!important; } .chat-page .mobile-users-trigger[aria-expanded="true"]{ background:#252b31!important; border-color:#252b31!important; color:#fff!important; } .chat-page .mobile-users-icon{ font-size:1rem!important; line-height:1!important; } .chat-page .mobile-users-count{ display:inline-grid!important; place-items:center!important; min-width:20px!important; height:20px!important; padding:0 5px!important; border-radius:999px!important; background:#252b31!important; color:#fff!important; font-size:.64rem!important; line-height:20px!important; } .chat-page .mobile-users-trigger[aria-expanded="true"] .mobile-users-count{ background:#fff!important; color:#252b31!important; } .chat-page .radio-player{ grid-area:player!important; display:flex!important; align-items:center!important; width:100%!important; min-width:0!important; min-height:46px!important; gap:6px!important; padding:5px 7px!important; border-radius:10px!important; box-shadow:0 5px 15px rgba(13,18,24,.13)!important; } .chat-page .radio-player .radio-onair-host{ flex:0 0 auto!important; grid-template-columns:30px minmax(0,54px)!important; gap:5px!important; padding-right:6px!important; border-right:1px solid rgba(255,255,255,.12)!important; } .chat-page .radio-onair-avatar{ width:30px!important; height:30px!important; } .chat-page .radio-onair-meta em{ font-size:.44rem!important; } .chat-page .radio-onair-meta b{ max-width:54px!important; font-size:.59rem!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } .chat-page .play-btn{ flex:0 0 32px!important; width:32px!important; height:32px!important; font-size:.78rem!important; } .chat-page .radio-player-copy{ flex:1 1 auto!important; min-width:0!important; } .chat-page .radio-player-copy strong{ font-size:.76rem!important; } .chat-page .radio-player-copy small{ font-size:.56rem!important; } .chat-page .radio-player input[data-radio-volume]{ display:none!important; } .chat-page .radio-player-lautfm .lautfm-external-link{ flex:0 0 32px!important; width:32px!important; height:32px!important; display:grid!important; place-items:center!important; margin:0!important; } .chat-page .chat-layout{ padding:6px 6px calc(66px + env(safe-area-inset-bottom))!important; gap:0!important; } .chat-page .chat-panel{ border-radius:15px!important; } .chat-page .room-tabs{ gap:6px!important; padding:8px!important; } .chat-page .room-tabs a, .chat-page .room-tabs button{ padding:7px 10px!important; border-radius:9px!important; font-size:.78rem!important; } .chat-page .welcome-banner{ margin:7px 8px 0!important; padding:8px 10px!important; font-size:.76rem!important; } .chat-page .messages{ padding:8px 10px 14px!important; } .chat-page .message{ grid-template-columns:36px minmax(0,1fr)!important; gap:8px!important; padding:8px 0!important; } .chat-page .message>.avatar, .chat-page .message .avatar{ width:36px!important; height:36px!important; border-radius:10px!important; } .chat-page .msg-meta b{ font-size:.84rem!important; } .chat-page .message p{ font-size:.9rem!important; line-height:1.38!important; } .chat-page .chat-composer{ gap:6px!important; padding:8px!important; } .chat-page .composer-toolbar{ display:flex!important; flex-wrap:nowrap!important; align-items:center!important; gap:6px!important; min-width:0!important; overflow-x:auto!important; overflow-y:hidden!important; scrollbar-width:none!important; -webkit-overflow-scrolling:touch!important; } .chat-page .composer-toolbar::-webkit-scrollbar{ display:none!important; } .chat-page .composer-tool{ flex:0 0 40px!important; width:40px!important; min-width:40px!important; height:40px!important; min-height:40px!important; padding:0!important; border-radius:11px!important; } .chat-page .composer-tool .composer-tool-label{ display:none!important; } .chat-page .composer-status-control{ flex:1 0 132px!important; min-width:132px!important; max-width:190px!important; } .chat-page .composer-status-control select{ width:100%!important; min-height:40px!important; height:40px!important; border-radius:11px!important; font-size:.68rem!important; } .chat-page .composer-input-row{ display:grid!important; grid-template-columns:minmax(0,1fr) 44px!important; gap:7px!important; } .chat-page .chat-composer #chatInput, .chat-page .chat-composer .send-btn{ min-height:44px!important; height:44px!important; } .chat-page .tenant-actions{ position:fixed!important; left:0!important; right:0!important; bottom:0!important; z-index:22000!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:4px!important; width:100%!important; height:calc(60px + env(safe-area-inset-bottom))!important; padding:6px 6px max(6px,env(safe-area-inset-bottom))!important; overflow-x:auto!important; overflow-y:hidden!important; white-space:nowrap!important; scrollbar-width:none!important; -webkit-overflow-scrolling:touch!important; background:rgba(255,255,255,.985)!important; border-top:1px solid #dfe4e8!important; box-shadow:0 -7px 22px rgba(20,28,36,.1)!important; backdrop-filter:blur(14px)!important; } .chat-page .tenant-actions::-webkit-scrollbar{ display:none!important; } .chat-page .tenant-actions>a, .chat-page .tenant-actions>button, .chat-page .tenant-actions>form, .chat-page .tenant-actions>form>button{ flex:0 0 auto!important; } .chat-page .tenant-actions>a, .chat-page .tenant-actions>button, .chat-page .tenant-actions>form>button{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:40px!important; min-width:40px!important; height:44px!important; min-height:44px!important; padding:0!important; margin:0!important; border-radius:12px!important; } .chat-page .tenant-actions .tenant-action-icon, .chat-page .tenant-actions .tenant-custom-link-icon{ font-size:1rem!important; line-height:1!important; } .chat-page .tenant-actions .tenant-action-label, .chat-page .tenant-actions .tenant-custom-link-label{ display:none!important; } /* Online sitzt im mobilen Kopf und wird nicht mehr ans Ende einer horizontal scrollenden Leiste versteckt. */ .chat-page .tenant-actions .tenant-users-action{ display:none!important; } .chat-page .tenant-actions .tenant-logout-action{ width:40px!important; } .chat-page .tenant-copyright{ display:none!important; } .chat-page .user-panel{ display:block!important; position:fixed!important; top:calc(var(--ethost-chat-head,104px) + 7px)!important; right:7px!important; bottom:calc(67px + env(safe-area-inset-bottom))!important; left:auto!important; width:min(340px,calc(100vw - 14px))!important; max-width:none!important; max-height:none!important; z-index:23000!important; border-radius:16px!important; box-shadow:0 18px 50px rgba(13,18,24,.26)!important; transform:translateX(calc(100% + 20px))!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important; transition:transform .2s ease,opacity .2s ease,visibility .2s ease!important; overflow:hidden!important; background:#fff!important; } .chat-page .user-panel.open{ transform:translateX(0)!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; } .chat-page .user-head{ display:grid!important; grid-template-columns:auto 1fr 38px!important; align-items:center!important; gap:8px!important; padding:11px 12px!important; } .chat-page .user-head>span{ justify-self:start!important; font-size:.75rem!important; color:#7a848d!important; } .chat-page .user-panel-close{ display:grid!important; place-items:center!important; width:36px!important; height:36px!important; padding:0!important; border:1px solid #e0e5e8!important; border-radius:10px!important; background:#f4f6f8!important; color:#303841!important; font-size:1.25rem!important; line-height:1!important; } .chat-page #onlineUsers{ height:calc(100% - 58px)!important; overflow-y:auto!important; overscroll-behavior:contain!important; padding:4px!important; } .chat-page .user-row{ grid-template-columns:42px minmax(0,1fr) 12px!important; gap:9px!important; padding:9px 8px!important; border-radius:11px!important; } .chat-page .user-row .avatar.small{ width:40px!important; height:40px!important; border-radius:11px!important; } body.chat-page.mobile-users-open{ overflow:hidden!important; } body.chat-page.mobile-users-open::before{ content:""!important; position:fixed!important; inset:0!important; z-index:22500!important; background:rgba(16,22,28,.35)!important; backdrop-filter:blur(2px)!important; } } @media(max-width:380px){ .chat-page .tenant-actions{ justify-content:flex-start!important; padding-left:5px!important; padding-right:5px!important; } .chat-page .tenant-actions>a, .chat-page .tenant-actions>button, .chat-page .tenant-actions>form>button{ width:38px!important; min-width:38px!important; } .chat-page .radio-onair-meta{ display:none!important; } .chat-page .radio-player .radio-onair-host{ grid-template-columns:30px!important; padding-right:5px!important; } } /* ========================================================== ET-HOST 0.2.30.1-beta – Quick settings switch containment Long descriptions must never push toggles outside cards. ========================================================== */ .admin-card form .switch-row{ display:grid; grid-template-columns:minmax(0,1fr) 38px; align-items:center; gap:12px; width:100%; max-width:100%; min-width:0; } .admin-card form .switch-row>span{ min-width:0; max-width:100%; padding-right:0; overflow-wrap:anywhere; } .admin-card form .switch-row>label.switch{ width:38px; min-width:38px; max-width:38px; height:22px; justify-self:end; flex:none; margin:0; } .admin-card form .switch-row>label.switch input{ width:auto; } @media(max-width:520px){ .admin-card form .switch-row{ grid-template-columns:minmax(0,1fr) 38px; gap:10px; } } /* ========================================================== ET-HOST 0.2.32-beta – Responsive Consolidation + Navigation More Mobile-first cleanup for chat, PM, profiles, DJ and admin. ========================================================== */ /* Admin: grouped quick settings + readable diagnostics */ .quick-settings-form{display:grid;gap:16px} .quick-settings-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .quick-settings-group{min-width:0;border:1px solid #e4e8eb;border-radius:16px;background:#fafbfc;padding:14px;overflow:hidden} .quick-settings-group>header{display:flex;align-items:center;gap:10px;padding-bottom:11px;margin-bottom:5px;border-bottom:1px solid #e9ecef} .quick-settings-group>header>span:first-child{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#fff;border:1px solid #e4e8eb;flex:none} .quick-settings-group>header>div{display:grid;min-width:0} .quick-settings-group>header strong{font-size:.92rem;color:#252b31} .quick-settings-group>header small{font-size:.69rem;color:#89929b} .quick-settings-group .switch-row{padding:10px 0;border-bottom:1px solid #edf0f2} .quick-settings-group .switch-row:last-child{border-bottom:0} .quick-settings-group .switch-row span{display:grid;gap:2px} .quick-settings-group .switch-row b{font-size:.82rem;color:#30373e} .quick-settings-group .switch-row small{font-size:.68rem;line-height:1.35;color:#838c95} .quick-settings-group label:not(.switch):not(.check){display:grid;gap:6px;margin:9px 0;font-size:.76rem;font-weight:800;color:#555f68;min-width:0} .quick-settings-group input[type="text"],.quick-settings-group textarea,.quick-settings-group select{width:100%;max-width:100%;min-width:0} .quick-settings-group .btn.btn-ghost{display:inline-flex;margin-top:8px;width:100%;justify-content:center;white-space:normal;text-align:center} .quick-settings-save{display:flex;justify-content:flex-end;padding-top:3px} .quick-settings-save .btn{min-width:180px} .admin-system-health{min-width:0} .admin-health-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .health-count{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:5px 9px;font-size:.7rem;font-weight:850;white-space:nowrap} .health-count.good{background:#e8f7ee;color:#14723d}.health-count.warn{background:#fff2d9;color:#8a5b08}.health-count.error{background:#ffe7e4;color:#9d2f27} .health-list,.diagnostic-log{display:grid;gap:8px;min-width:0} .health-item,.diagnostic-log>div,.health-empty{min-width:0;padding:11px 12px;border:1px solid #e6e9ec;border-radius:12px;background:#fafbfc;overflow-wrap:anywhere} .health-item strong,.diagnostic-log strong{display:block;font-size:.8rem;color:#30373e;margin-bottom:2px}.health-item small,.diagnostic-log small,.health-empty{font-size:.72rem;line-height:1.45;color:#74808a} .health-item.warn{border-color:#f1d9aa;background:#fffaf0}.health-item.error{border-color:#efc2bd;background:#fff8f7} /* More navigation exists only as a compact mobile overflow menu. */ .tenant-more-trigger,.tenant-more-menu{display:none!important} /* Global overflow guards. Large components scroll internally rather than the page. */ .admin-shell,.admin-main,.admin-section,.admin-card,.profile-shell,.profile-grid,.pm-shell,.pm-chat,.dj-panel-shell,.dj-card,.chat-panel,.chat-composer{min-width:0;max-width:100%} .admin-card img,.profile-shell img,.pm-shell img,.dj-panel-shell img{max-width:100%} .admin-card input,.admin-card select,.admin-card textarea,.profile-shell input,.profile-shell select,.profile-shell textarea,.pm-shell input,.pm-shell select,.pm-shell textarea,.dj-panel-shell input,.dj-panel-shell select,.dj-panel-shell textarea{max-width:100%;min-width:0} .admin-card .table,.admin-card .rights-table,.admin-card .audit-list{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain} .admin-card .chat-link-row,.admin-card .profile-field-admin-row,.admin-card .welcome-row,.admin-card .inline-edit{max-width:100%;min-width:0} .message-content,.pm-bubble,.profile-shell p,.dj-card p{overflow-wrap:anywhere;word-break:break-word} .settings-refreshing::after{content:"Einstellungen werden aktualisiert …";position:fixed;left:50%;bottom:86px;transform:translateX(-50%);z-index:30000;background:#20252b;color:#fff;border-radius:999px;padding:10px 15px;font-size:.78rem;font-weight:800;box-shadow:0 10px 30px rgba(0,0,0,.2);white-space:nowrap;max-width:calc(100vw - 24px)} @media(max-width:1050px){ .quick-settings-groups,.admin-health-grid{grid-template-columns:1fr} } @media(max-width:760px){ html,body{max-width:100%;overflow-x:hidden} /* Exactly the primary chat actions stay in the bottom bar. */ .chat-page .tenant-actions>.tenant-mobile-secondary{display:none!important} .chat-page .tenant-actions>.tenant-users-action{display:none!important} .chat-page .tenant-actions>.tenant-more-trigger{ display:inline-flex!important;align-items:center;justify-content:center;flex-direction:column; gap:2px;width:52px!important;min-width:52px!important;height:48px!important;padding:4px!important; } .chat-page .tenant-actions>.tenant-more-trigger[hidden]{display:none!important} .chat-page .tenant-actions>.tenant-more-trigger .tenant-action-label{display:block!important;font-size:.58rem!important;line-height:1!important} .chat-page .tenant-actions{overflow-x:auto!important;overflow-y:visible!important;flex-wrap:nowrap!important;justify-content:flex-start!important} .chat-page .tenant-more-menu:not([hidden]){ display:block!important;position:fixed!important;left:8px!important;right:8px!important;bottom:66px!important; width:auto!important;max-width:390px!important;margin-left:auto!important;padding:12px!important;z-index:26000!important; border:1px solid #dfe3e6!important;border-radius:18px!important;background:#fff!important; box-shadow:0 22px 55px rgba(22,29,35,.24)!important;color:#242a30!important; } .tenant-more-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:1px 2px 10px;border-bottom:1px solid #edf0f2} .tenant-more-head strong{font-size:.88rem}.tenant-more-head button{width:34px;height:34px;border-radius:10px;background:#f0f2f4;font-size:1.15rem} .tenant-more-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-top:10px;max-height:min(48vh,340px);overflow:auto} .tenant-more-items>.tenant-more-item,.tenant-more-items>.tenant-more-item>a,.tenant-more-items>.tenant-more-item>button, .tenant-more-items>a.tenant-more-item,.tenant-more-items>button.tenant-more-item{ min-width:0!important;width:100%!important;max-width:100%!important;margin:0!important; } .tenant-more-items>a.tenant-more-item,.tenant-more-items>button.tenant-more-item,.tenant-more-items>form.tenant-more-item>button{ display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;height:auto!important;min-height:44px!important; padding:9px 10px!important;border-radius:12px!important;background:#f5f7f8!important;color:#343c44!important;font-size:.72rem!important; } .tenant-more-items .tenant-action-label,.tenant-more-items .tenant-custom-link-label{display:block!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tenant-more-items form.tenant-more-item{display:block!important} .tenant-more-items form.tenant-more-item>button{color:#a72f28!important;background:#fff1ef!important} /* Chat / composer / pickers */ .chat-page .chat-layout{width:100%;max-width:100%;padding:6px!important} .chat-page .chat-panel{border-radius:14px} .chat-page .messages{padding:10px 10px 22px!important} .chat-page .message{grid-template-columns:34px minmax(0,1fr);gap:8px;padding:8px 0} .chat-page .message>.avatar{width:34px;height:34px;border-radius:10px} .chat-page .chat-composer{grid-template-columns:36px 36px minmax(0,1fr) 40px!important;gap:6px!important;padding:8px!important} .chat-page .chat-composer .icon-btn,.chat-page .chat-composer .upload-label,.chat-page .chat-composer .send-btn{height:40px!important;min-width:0} .chat-page #chatInput{width:100%;min-width:0;padding-left:10px;padding-right:10px} .chat-page .smiley-popover,.chat-page .giphy-popover{left:6px!important;right:6px!important;width:auto!important;max-width:none!important;bottom:58px!important} .chat-page .smiley-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important;max-height:38vh} /* Online drawer always stays inside the physical viewport. */ .chat-page .user-panel{left:8px!important;right:8px!important;width:auto!important;max-width:none!important;top:max(8px,env(safe-area-inset-top))!important;bottom:66px!important;border-radius:18px!important} /* PM and profile */ .pm-shell,.pm-shell-v2{width:100%;max-width:100%;grid-template-columns:1fr!important;border-radius:14px} .pm-list{max-height:190px!important;overflow:auto}.pm-chat{min-height:430px!important} .pm-chat-head{gap:8px;flex-wrap:wrap}.pm-chat-head h2{min-width:0;font-size:1rem} .pm-messages,.pm-messages-v2{padding:10px!important}.pm-bubble{max-width:92%!important} .pm-compose,.pm-compose-v2{grid-template-columns:minmax(0,1fr) auto!important;padding:8px!important;gap:6px!important} .pm-compose-v2 textarea{min-width:0}.pm-giphy-popover{left:6px!important;right:6px!important;width:auto!important;max-width:none!important} .profile-shell{margin:14px auto!important;padding:0 10px!important}.profile-grid{gap:10px!important}.profile-grid>.admin-card{padding:14px!important} .profile-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.profile-album-meta,.profile-public-album-head{gap:8px;align-items:flex-start} /* Admin: all cards are single-column and controls never protrude. */ .admin-shell{display:block!important;width:100%;max-width:100%} .admin-sidebar{position:relative!important;top:auto!important;width:100%!important;max-width:100%!important;height:auto!important;overflow:hidden!important;padding:8px!important} .admin-sidebar .admin-logo{display:none!important} .admin-sidebar nav{display:flex!important;overflow-x:auto!important;gap:6px!important;padding:2px!important;scrollbar-width:thin} .admin-sidebar nav a{font-size:.68rem!important;white-space:nowrap!important;min-width:max-content!important;padding:8px 10px!important;border-radius:9px!important} .admin-sidebar nav a::first-letter{font-size:inherit!important} .admin-main{width:100%!important;max-width:100%!important;padding:0 8px 40px!important;overflow:hidden!important} .admin-top{height:auto!important;min-height:62px!important;padding:10px 4px!important;gap:8px;flex-wrap:wrap} .admin-top h1{font-size:1.35rem}.admin-top p{font-size:.72rem}.admin-top-actions{margin-left:auto;flex-wrap:wrap;justify-content:flex-end} .admin-section{padding-left:0!important;padding-right:0!important}.section-title{gap:10px;flex-wrap:wrap}.section-title h2{font-size:1.35rem} .admin-card{padding:13px!important;border-radius:14px!important;overflow:hidden} .admin-grid,.quick-settings-groups,.admin-health-grid{grid-template-columns:1fr!important;gap:9px!important} .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}.stat{min-width:0;padding:10px!important}.stat b{font-size:1.05rem} .quick-settings-group{padding:11px;border-radius:13px}.quick-settings-save .btn{width:100%;min-width:0} .admin-card .tr{min-width:620px}.admin-card .rights-row{min-width:720px} .admin-card .welcome-row,.admin-card .chat-link-row,.admin-card .profile-field-admin-row{grid-template-columns:1fr!important;gap:7px!important} .admin-card .button-row{flex-wrap:wrap!important}.admin-card .button-row>*{max-width:100%} /* DJ panel */ .dj-panel-shell{width:100%!important;max-width:100%!important;padding:10px 8px 44px!important} .dj-panel-head{padding:16px 13px!important;border-radius:18px!important}.dj-panel-head h1{font-size:1.75rem!important} .dj-panel-head .button-row{grid-template-columns:1fr!important}.dj-panel-grid{grid-template-columns:1fr!important;gap:10px!important} .dj-card{padding:13px!important;border-radius:15px!important}.dj-card-title{gap:7px;flex-wrap:wrap} .dj-schedule-admin-row{grid-template-columns:62px minmax(0,1fr)!important;gap:8px!important}.dj-schedule-admin-visual{width:62px!important;height:58px!important} .dj-wish-row{grid-template-columns:1fr!important;gap:7px!important} } @media(max-width:380px){ .tenant-more-items{grid-template-columns:1fr} .chat-page .smiley-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important} .admin-main{padding-left:6px!important;padding-right:6px!important}.admin-card{padding:11px!important} .stat-grid{grid-template-columns:1fr!important} .profile-photo-grid{grid-template-columns:1fr 1fr!important} } @media(max-width:760px) and (orientation:landscape) and (max-height:480px){ .chat-page .tenant-more-menu:not([hidden]){bottom:56px!important;max-height:70vh!important} .chat-page .tenant-actions>.tenant-more-trigger{height:42px!important} .tenant-more-items{max-height:52vh} .chat-page .user-panel{bottom:56px!important} .settings-refreshing::after{bottom:64px} } /* Tablet bridge: 761px must not inherit desktop minimum widths that exceed portrait tablets. Keep the full desktop structure but compact it safely. */ @media(min-width:761px) and (max-width:980px){ .chat-page .tenant-head{ grid-template-columns:minmax(120px,.55fr) minmax(230px,1fr) minmax(230px,.9fr)!important; gap:6px!important; padding-left:8px!important; padding-right:8px!important; } .chat-page .tenant-brand img{width:48px!important} .chat-page .tenant-brand strong{font-size:.82rem!important} .chat-page .radio-player{grid-template-columns:auto 32px minmax(0,1fr) 58px!important;gap:5px!important;padding:4px 6px!important} .chat-page .tenant-actions{max-width:100%;overflow-x:auto;scrollbar-width:none;justify-content:flex-start!important} .chat-page .tenant-actions::-webkit-scrollbar{display:none} .chat-page .tenant-actions>a,.chat-page .tenant-actions>button,.chat-page .tenant-actions>form>button{flex:0 0 38px!important;width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important;padding:0!important} .chat-page .tenant-actions .tenant-users-action{flex-basis:auto!important;width:auto!important;min-width:48px!important;padding:0 5px!important} } .quick-settings-link{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;padding:9px 10px;border-radius:11px;background:#fff;border:1px solid #e5e9ec;color:#4e5963;font-size:.72rem;font-weight:800;min-width:0} .quick-settings-link span{min-width:0;overflow-wrap:anywhere}.quick-settings-link b{flex:none} .diagnostic-log>article{min-width:0;padding:11px 12px;border:1px solid #e6e9ec;border-radius:12px;background:#fafbfc;overflow-wrap:anywhere} .diagnostic-log>article>div{display:flex;align-items:center;justify-content:space-between;gap:10px}.diagnostic-log time{font-size:.65rem;color:#8a939c;white-space:nowrap}.diagnostic-log article p{margin:4px 0;font-size:.74rem;color:#4f5a64}.diagnostic-log article small{font-size:.67rem;color:#89929b} /* ========================================================== ET-HOST 0.2.33-beta – Mentions, Teambefehle & Message Tools ========================================================== */ .chat-page .msg-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:7px; } .chat-page .msg-tools>span{display:none!important} .chat-page .msg-tools button{ min-height:28px; padding:4px 8px; border:1px solid #e4e8eb; border-radius:8px; background:#f7f8f9; color:#616b74; font-size:.72rem; line-height:1.2; transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease; } .chat-page .msg-tools button:hover{ background:#eef1f3; border-color:#d9dfe3; color:#303840; transform:translateY(-1px); } .chat-page .msg-tools button[data-admin-delete-message]{ color:#a34740; background:#fff8f7; border-color:#f0d8d5; } .chat-page .msg-tools button[data-admin-delete-message]:hover{ background:#fff0ee; border-color:#e7c4c0; } .chat-page .chat-mention{ display:inline-block; padding:1px 5px; border-radius:6px; background:#fff0ee; background:color-mix(in srgb,var(--primary) 12%,#fff); color:#b7443a; color:color-mix(in srgb,var(--primary) 78%,#20262c); font-weight:850; cursor:pointer; } .chat-page .message-mentioned{ margin-inline:-8px; padding-inline:8px; border-radius:12px; background:#fff8f7; background:color-mix(in srgb,var(--primary) 7%,transparent); box-shadow:inset 3px 0 0 var(--primary); box-shadow:inset 3px 0 0 color-mix(in srgb,var(--primary) 80%,#fff); } .chat-page .chat-suggest-popover{ position:absolute; left:12px; bottom:calc(100% - 4px); z-index:75; width:min(360px,calc(100% - 24px)); max-height:min(340px,48vh); overflow:auto; padding:8px; border:1px solid #dde2e6; border-radius:13px; background:#fff; box-shadow:0 16px 38px rgba(24,29,34,.16); } .chat-page .chat-suggest-popover[hidden]{display:none!important} .chat-page .chat-suggest-head{ display:block; padding:3px 7px 7px; color:#7b858e; font-size:.68rem; font-weight:850; letter-spacing:.03em; text-transform:uppercase; } .chat-page .chat-suggest-item{ width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; text-align:left; padding:8px 9px; border:0; border-radius:9px; background:#fff; color:#303840; } .chat-page .chat-suggest-item:hover, .chat-page .chat-suggest-item:focus-visible{ background:#f3f5f6; outline:none; } .chat-page .chat-suggest-item strong{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.8rem; } .chat-page .chat-suggest-item small{ color:#8a939b; font-size:.66rem; white-space:nowrap; } .chat-page .chat-local-notice{ position:absolute; right:12px; bottom:calc(100% + 8px); z-index:76; max-width:min(520px,calc(100% - 24px)); white-space:pre-line; padding:10px 12px; border:1px solid #dce2e6; border-radius:11px; background:#fff; color:#39424a; box-shadow:0 14px 32px rgba(24,29,34,.14); font-size:.76rem; line-height:1.5; } .chat-page .chat-local-notice[data-tone="team"]{ border-color:#cfdbe5; background:#f8fbfd; } .chat-page .chat-local-notice[hidden]{display:none!important} @media(max-width:760px){ .chat-page .chat-suggest-popover{ left:7px; width:calc(100% - 14px); max-height:42vh; border-radius:12px; } .chat-page .chat-local-notice{ left:7px; right:7px; max-width:none; bottom:calc(100% + 6px); } .chat-page .message-mentioned{ margin-inline:-4px; padding-inline:4px; } } /* ========================================================== ET-HOST 0.2.33.1-beta – Player Grid Hotfix Ohne aktiven On-Air-DJ bleibt Spalte 1 leer/0px. Play, Sendertext und Lautstärke behalten trotzdem feste Spalten. ========================================================== */ @media (min-width:761px){ .chat-page .radio-player>.radio-onair-host{grid-column:1!important} .chat-page .radio-player>.play-btn{grid-column:2!important} .chat-page .radio-player>.radio-player-copy{grid-column:3!important;min-width:0!important} .chat-page .radio-player>input[data-radio-volume], .chat-page .radio-player>.lautfm-external-link{grid-column:4!important} } /* ============================================================ ET-HOST PROFILE UX 2.1 FINAL ============================================================ */ /* ------------------------------------------------------------ ALLGEMEIN ------------------------------------------------------------ */ body.profile-page{ min-height:100vh; background-attachment:fixed; } .profile2-shell{ width:min(1240px,calc(100% - 30px)); margin:0 auto; padding:20px 0 55px; } /* ------------------------------------------------------------ TOPBAR ------------------------------------------------------------ */ .profile2-topbar{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; padding:9px; border:1px solid rgba(15,23,42,.08); border-radius:17px; background:rgba(255,255,255,.88); box-shadow:0 8px 28px rgba(15,23,42,.06); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } /* ------------------------------------------------------------ EIGENES PROFIL / EDITOR ------------------------------------------------------------ */ .community-profile-2b .profile2-layout{ display:grid; grid-template-columns:290px minmax(0,1fr); gap:22px; align-items:start; } .community-profile-2b .profile2-summary{ position:sticky; top:18px; overflow:hidden; padding:28px 19px 21px; border:1px solid rgba(15,23,42,.08); border-radius:27px; background: radial-gradient( circle at 50% -10%, rgba(1,122,255,.17), transparent 40% ), linear-gradient( 180deg, rgba(255,255,255,.98), rgba(248,250,252,.97) ); box-shadow:0 18px 55px rgba(15,23,42,.10); text-align:center; } .community-profile-2b .profile2-main{ display:grid; gap:18px; min-width:0; } .community-profile-2b .profile2-avatar{ width:132px; height:132px; margin:0 auto 16px; border:5px solid #fff; border-radius:34px; object-fit:cover; box-shadow: 0 15px 34px rgba(15,23,42,.16), 0 0 0 1px rgba(15,23,42,.06); } .community-profile-2b .profile2-avatar-fallback{ display:flex; align-items:center; justify-content:center; color:#fff; font-size:3rem; font-weight:900; background:linear-gradient(145deg,#017aff,#6d5cff); } .community-profile-2b .profile2-summary h1{ margin:0; color:#172033; font-size:1.58rem; line-height:1.15; letter-spacing:-.025em; } .community-profile-2b .profile2-role{ display:inline-flex; margin-top:9px; padding:6px 11px; border-radius:999px; color:#165ca8; background:#edf5ff; font-size:.7rem; font-weight:850; } /* ------------------------------------------------------------ KARTEN ------------------------------------------------------------ */ .community-profile-2b .profile2-card{ overflow:hidden; padding:23px; border:1px solid rgba(15,23,42,.075); border-radius:23px; background:rgba(255,255,255,.97); box-shadow:0 12px 36px rgba(15,23,42,.065); } .community-profile-2b .profile2-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:15px; margin-bottom:19px; padding-bottom:14px; border-bottom:1px solid #edf0f4; } .community-profile-2b .profile2-card-head h2{ margin:3px 0 0; color:#172033; font-size:1.17rem; letter-spacing:-.015em; } .community-profile-2b .profile2-card-head p{ margin:5px 0 0; color:#7c8797; font-size:.74rem; line-height:1.45; } .community-profile-2b .eyebrow{ color:#017aff; font-size:.62rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; } /* ------------------------------------------------------------ EDITOR-FORMULAR ------------------------------------------------------------ */ .community-profile-2b .profile2-form{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 18px; } .community-profile-2b .profile2-form label{ display:grid; gap:7px; margin:0; color:#344054; font-size:.72rem; font-weight:800; } .community-profile-2b .profile2-form input:not([type=checkbox]):not([type=color]):not([type=file]), .community-profile-2b .profile2-form select, .community-profile-2b .profile2-form textarea{ width:100%; min-height:46px; box-sizing:border-box; padding:10px 12px; border:1px solid #dbe2e9; border-radius:12px; outline:none; background:#fbfcfd; color:#182230; font:inherit; font-size:.78rem; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .community-profile-2b .profile2-form textarea{ min-height:140px; resize:vertical; line-height:1.55; } .community-profile-2b .profile2-form input:not([type=checkbox]):focus, .community-profile-2b .profile2-form select:focus, .community-profile-2b .profile2-form textarea:focus{ border-color:#75aef8; background:#fff; box-shadow:0 0 0 4px rgba(1,122,255,.10); } /* ------------------------------------------------------------ PROFIL-HINTERGRUND ------------------------------------------------------------ */ .community-profile-2b .profile-background-control{ grid-template-columns:minmax(0,1fr) auto!important; gap:14px!important; padding:17px!important; border:1px solid #dfe5eb!important; border-radius:17px!important; background:linear-gradient(135deg,#f8fafc,#fff)!important; } .community-profile-2b .profile-background-control input[type=color]{ width:72px!important; height:50px!important; padding:3px!important; border:1px solid #d8dee7!important; border-radius:13px!important; cursor:pointer; } .profile-color-presets{ grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px; } .profile-color-preset{ width:31px; height:31px; min-width:31px; padding:0; border:3px solid #fff; border-radius:10px; cursor:pointer; box-shadow: 0 0 0 1px rgba(15,23,42,.13), 0 3px 7px rgba(15,23,42,.08); transition: transform .12s ease, box-shadow .12s ease; } .profile-color-preset:hover{ transform:translateY(-2px); } .profile-color-preset.is-selected{ box-shadow: 0 0 0 2px #017aff, 0 5px 11px rgba(15,23,42,.12); } /* ------------------------------------------------------------ LIVE-VORSCHAU ------------------------------------------------------------ */ .profile2-live-preview{ position:relative; overflow:hidden; min-height:160px; padding:23px; border:1px solid rgba(15,23,42,.08); border-radius:23px; background:#f5f7fb; box-shadow:0 13px 38px rgba(15,23,42,.08); transition:background-color .2s ease; } .profile2-live-preview::after{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient( circle at 92% 5%, rgba(255,255,255,.85), transparent 38% ); } .profile2-live-preview-label{ position:relative; z-index:2; display:inline-flex; margin-bottom:15px; padding:5px 9px; border-radius:999px; background:rgba(255,255,255,.83); color:#677285; font-size:.61rem; font-weight:900; letter-spacing:.07em; text-transform:uppercase; } .profile2-preview-user{ position:relative; z-index:2; display:flex; align-items:center; gap:15px; } .profile2-preview-avatar{ width:76px; height:76px; flex:0 0 76px; overflow:hidden; border-radius:21px; background:#fff; box-shadow:0 8px 22px rgba(15,23,42,.14); } .profile2-preview-avatar img{ width:100%; height:100%; object-fit:cover; } .profile2-preview-fallback{ display:flex; width:100%; height:100%; align-items:center; justify-content:center; background:linear-gradient(145deg,#017aff,#6d5cff); color:#fff; font-size:1.8rem; font-weight:900; } .profile2-preview-user h3{ margin:0; color:#172033; font-size:1.3rem; } .profile2-preview-user p{ margin:5px 0 0; color:#626d7e; font-size:.74rem; } /* ------------------------------------------------------------ PROFIL-STATISTIKEN ------------------------------------------------------------ */ .profile2-smart-stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:18px; } .profile2-smart-stat{ padding:10px 6px; border:1px solid rgba(15,23,42,.07); border-radius:13px; background:rgba(255,255,255,.78); } .profile2-smart-stat strong{ display:block; color:#172033; font-size:1.02rem; } .profile2-smart-stat span{ display:block; margin-top:3px; color:#7d8797; font-size:.61rem; font-weight:800; } /* ------------------------------------------------------------ LETZTER BESUCHER ------------------------------------------------------------ */ .profile2-last-visitor{ margin-top:11px; padding:12px; border:1px solid rgba(15,23,42,.07); border-radius:15px; background:rgba(255,255,255,.80); text-align:left; } .profile2-last-visitor-label{ display:block; margin-bottom:8px; color:#8791a1; font-size:.6rem; font-weight:900; letter-spacing:.07em; text-transform:uppercase; } .profile2-last-visitor-person{ display:flex; align-items:center; gap:9px; } .profile2-last-visitor-person .profile2-visitor-avatar{ display:flex; width:38px; height:38px; flex:0 0 38px; align-items:center; justify-content:center; overflow:hidden; border-radius:11px; background:#edf5ff; } .profile2-last-visitor-person .profile2-visitor-avatar img{ width:100%; height:100%; object-fit:cover; } .profile2-last-visitor-person strong, .profile2-last-visitor-person small{ display:block; } .profile2-last-visitor-person strong{ font-size:.76rem; } .profile2-last-visitor-person small{ margin-top:2px; color:#818b9a; font-size:.62rem; } /* ------------------------------------------------------------ BESUCHERLISTE ------------------------------------------------------------ */ .community-profile-2b .profile2-visitor-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .community-profile-2b .profile2-visitor{ display:flex; align-items:center; gap:11px; padding:11px; border:1px solid #e7ebef; border-radius:14px; background:#fbfcfd; text-decoration:none; transition: transform .14s ease, box-shadow .14s ease; } .community-profile-2b .profile2-visitor:hover{ transform:translateY(-2px); box-shadow:0 7px 20px rgba(15,23,42,.07); } .community-profile-2b .profile2-visitor-avatar{ display:flex; width:43px; height:43px; flex:0 0 43px; align-items:center; justify-content:center; overflow:hidden; border-radius:12px; background:#eaf3ff; color:#1761aa; font-weight:900; } .community-profile-2b .profile2-visitor-avatar img{ width:100%; height:100%; object-fit:cover; } /* ------------------------------------------------------------ ZEICHENZÄHLER + SPEICHERSTATUS ------------------------------------------------------------ */ .profile-field-counter{ justify-self:end; margin-top:-3px; color:#919baa; font-size:.61rem; font-weight:700; } .profile-field-counter.is-near-limit{ color:#b45309; } .profile-save-state{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; padding:7px 10px; border-radius:999px; background:#f1f5f9; color:#64748b; font-size:.64rem; font-weight:850; } .profile-save-state::before{ content:""; width:7px; height:7px; border-radius:50%; background:#94a3b8; } .profile-save-state.is-dirty{ color:#975a16; background:#fff7ed; } .profile-save-state.is-dirty::before{ background:#f59e0b; } .profile-save-state.is-saving{ color:#165da7; background:#eef6ff; } .profile-save-state.is-saving::before{ background:#017aff; } /* ------------------------------------------------------------ ALBEN ------------------------------------------------------------ */ .community-profile-2b .profile-album{ border-radius:19px; box-shadow:0 8px 24px rgba(15,23,42,.055); } .community-profile-2b .profile-photo-card{ overflow:hidden; border-radius:15px; } /* ------------------------------------------------------------ ÖFFENTLICHES PROFIL ------------------------------------------------------------ */ .public-profile-2b .profile2-shell{ width:min(1160px,calc(100% - 30px)); } .public-profile-2b .profile2-public-layout{ display:grid; gap:18px; } .public-profile-2b .profile2-public-main{ display:grid; gap:18px; } .public-profile-2b .profile2-hero{ display:flex; align-items:center; gap:22px; padding:27px; border:1px solid rgba(15,23,42,.08); border-radius:27px; background: radial-gradient( circle at 95% 0, rgba(1,122,255,.11), transparent 38% ), rgba(255,255,255,.97); box-shadow:0 17px 48px rgba(15,23,42,.09); } .public-profile-2b .profile2-hero .profile2-avatar{ width:145px; height:145px; flex:0 0 145px; margin:0; border:5px solid #fff; border-radius:37px; object-fit:cover; box-shadow:0 14px 33px rgba(15,23,42,.16); } .public-profile-2b .profile2-hero-copy{ min-width:0; } .public-profile-2b .profile2-hero-copy h1{ margin:7px 0; color:#172033; font-size:2rem; line-height:1.08; letter-spacing:-.035em; } .public-profile-2b .profile2-badges{ display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; } .public-profile-2b .profile2-badges span{ display:inline-flex; padding:6px 10px; border:1px solid #e1e8ef; border-radius:999px; background:#f8fafc; color:#586476; font-size:.67rem; font-weight:750; } /* ------------------------------------------------------------ RESPONSIVE ------------------------------------------------------------ */ @media(max-width:900px){ .community-profile-2b .profile2-layout{ grid-template-columns:1fr; } .community-profile-2b .profile2-summary{ position:relative; top:auto; } .profile2-smart-stats{ grid-template-columns:repeat(4,minmax(0,1fr)); } } @media(max-width:650px){ .profile2-shell{ width:min(100% - 18px,720px); padding-top:10px; } .profile2-topbar{ border-radius:14px; } .profile2-topbar .btn{ flex:1 1 auto; justify-content:center; } .community-profile-2b .profile2-summary{ padding:22px 15px 17px; border-radius:21px; } .community-profile-2b .profile2-avatar{ width:106px; height:106px; border-radius:27px; } .community-profile-2b .profile2-card{ padding:17px 14px; border-radius:18px; } .community-profile-2b .profile2-card-head{ display:block; } .community-profile-2b .profile2-form{ grid-template-columns:1fr; gap:14px; } .community-profile-2b .profile2-full{ grid-column:auto!important; } .community-profile-2b .profile-background-control{ grid-template-columns:1fr!important; } .profile-color-presets{ grid-column:auto; } .community-profile-2b .profile2-visitor-list{ grid-template-columns:1fr; } .profile2-smart-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } .profile2-live-preview{ padding:18px; min-height:140px; } .profile2-preview-avatar{ width:62px; height:62px; flex-basis:62px; border-radius:18px; } .public-profile-2b .profile2-hero{ align-items:flex-start; gap:14px; padding:19px 15px; border-radius:21px; } .public-profile-2b .profile2-hero .profile2-avatar{ width:88px; height:88px; flex-basis:88px; border-radius:24px; } .public-profile-2b .profile2-hero-copy h1{ font-size:1.45rem; } } /* ============================================================ END ET-HOST PROFILE UX 2.1 FINAL ============================================================ */ /* ============================================================ ET-HOST PROFILE CITY MAP 2.2B ============================================================ */ .profile-city-map-card{ width:100%; overflow:hidden; box-sizing:border-box; border:1px solid rgba(15,23,42,.09); border-radius:20px; background:#fff; box-shadow:0 10px 30px rgba(15,23,42,.065); } .profile-city-map-head{ padding:17px 17px 14px; } .profile-city-map-eyebrow{ display:block; margin-bottom:7px; color:#ef5547; font-size:.65rem; line-height:1; font-weight:900; letter-spacing:.09em; text-transform:uppercase; } .profile-city-map-title{ display:flex; align-items:center; gap:8px; margin:0; color:#172033; font-size:1rem; line-height:1.25; } .profile-city-map-title-pin{ display:flex; width:28px; height:28px; flex:0 0 28px; align-items:center; justify-content:center; border-radius:9px; background:#fff0ef; font-size:.9rem; } .profile-city-map-viewport{ position:relative; height:220px; overflow:hidden; border-top:1px solid #edf0f4; border-bottom:1px solid #edf0f4; background: linear-gradient( 32deg, transparent 46%, rgba(148,163,184,.15) 47%, rgba(148,163,184,.15) 49%, transparent 50% ), linear-gradient( -38deg, transparent 46%, rgba(148,163,184,.12) 47%, rgba(148,163,184,.12) 49%, transparent 50% ), linear-gradient( 90deg, rgba(203,213,225,.16) 1px, transparent 1px ), linear-gradient( rgba(203,213,225,.16) 1px, transparent 1px ), #eef3f7; background-size: 135px 95px, 155px 120px, 34px 34px, 34px 34px, auto; } .profile-city-map-placeholder{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:20px; text-align:center; } .profile-city-map-marker{ position:relative; display:flex; width:55px; height:55px; margin-bottom:8px; align-items:center; justify-content:center; border:4px solid #fff; border-radius:50% 50% 50% 8px; background:#ef5547; box-shadow:0 9px 22px rgba(239,85,71,.30); transform:rotate(-45deg); } .profile-city-map-marker-dot{ width:15px; height:15px; border-radius:50%; background:#fff; } .profile-city-map-placeholder strong{ color:#172033; font-size:1.03rem; } .profile-city-map-placeholder small{ color:#778293; font-size:.65rem; } .profile-city-map-viewport iframe{ display:block; width:100%; height:100%; border:0; } .profile-city-map-actions{ display:grid; gap:7px; padding:13px; } .profile-city-map-load{ display:flex; width:100%; min-height:43px; padding:9px 13px; align-items:center; justify-content:center; gap:7px; border:0; border-radius:11px; background:#ef5547; color:#fff; cursor:pointer; font:inherit; font-size:.73rem; font-weight:850; box-shadow:0 6px 16px rgba(239,85,71,.20); transition: transform .15s ease, box-shadow .15s ease; } .profile-city-map-load:hover{ transform:translateY(-1px); box-shadow:0 9px 20px rgba(239,85,71,.25); } .profile-city-map-open{ display:flex; min-height:34px; align-items:center; justify-content:center; color:#667085; font-size:.65rem; font-weight:750; text-decoration:none; } .profile-city-map-open:hover{ color:#172033; } .profile-city-map-privacy{ margin:0; color:#8a94a3; font-size:.58rem; line-height:1.4; text-align:center; } .profile-city-map-card.is-loaded .profile-city-map-load{ display:none; } /* Mobile */ @media(max-width:700px){ .profile-city-map-card{ border-radius:18px; } .profile-city-map-viewport{ height:245px; } .profile-city-map-head{ padding:16px 15px 13px; } } /* ============================================================ END ET-HOST PROFILE CITY MAP 2.2B ============================================================ */ /* ============================================================ ET-HOST PROFILE ALBUM 2.3 ============================================================ */ /* ------------------------------------------------------------ Öffentliche Albumübersicht ------------------------------------------------------------ */ .public-profile-2b .profile-modern-album-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:8px; } .public-profile-2b .profile-modern-album{ position:relative; display:flex; flex-direction:column; min-width:0; padding:0; overflow:hidden; border:1px solid rgba(15,23,42,.09); border-radius:19px; background:#fff; color:#172033; text-align:left; cursor:pointer; box-shadow: 0 7px 22px rgba(15,23,42,.065); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .public-profile-2b .profile-modern-album:hover{ transform:translateY(-3px); border-color:rgba(1,122,255,.25); box-shadow: 0 14px 32px rgba(15,23,42,.11); } .public-profile-2b .profile-modern-album:focus-visible{ outline:3px solid rgba(1,122,255,.25); outline-offset:3px; } /* ------------------------------------------------------------ Alle Albumtitelbilder exakt gleich groß ------------------------------------------------------------ */ .profile-modern-album-cover{ position:relative; width:100%; aspect-ratio:4 / 3; overflow:hidden; background:#eef2f6; } .profile-modern-album-cover img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .25s ease; } .profile-modern-album:hover .profile-modern-album-cover img{ transform:scale(1.035); } /* ------------------------------------------------------------ Bildanzahl oben rechts ------------------------------------------------------------ */ .profile-modern-album-count{ position:absolute; right:10px; bottom:10px; display:inline-flex; align-items:center; gap:5px; padding:6px 9px; border-radius:999px; background:rgba(17,24,39,.82); color:#fff; font-size:.64rem; font-weight:850; box-shadow:0 5px 14px rgba(0,0,0,.18); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } /* ------------------------------------------------------------ Albumtext ------------------------------------------------------------ */ .profile-modern-album-info{ display:grid; gap:4px; min-height:76px; padding:13px 14px 14px; } .profile-modern-album-info strong{ overflow:hidden; color:#172033; font-size:.84rem; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; } .profile-modern-album-info span{ display:flex; align-items:center; gap:5px; color:#778293; font-size:.64rem; font-weight:700; } .profile-modern-album-info span::before{ content:"▣"; color:#ef5547; font-size:.72rem; } /* ============================================================ SLIDESHOW ============================================================ */ .profile-album-modal{ position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:22px; background:rgba(5,10,18,.90); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } .profile-album-modal[hidden]{ display:none!important; } .profile-album-modal-dialog{ position:relative; display:grid; grid-template-rows:auto minmax(0,1fr) auto; width:min(1120px,96vw); height:min(820px,92vh); overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:24px; background:#10151c; box-shadow: 0 30px 90px rgba(0,0,0,.48); } /* ------------------------------------------------------------ Kopfzeile ------------------------------------------------------------ */ .profile-album-modal-head{ display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:68px; padding:13px 16px 13px 20px; border-bottom:1px solid rgba(255,255,255,.09); background:#171d25; } .profile-album-modal-heading{ min-width:0; } .profile-album-modal-heading span{ display:block; margin-bottom:3px; color:#ef6a5e; font-size:.59rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; } .profile-album-modal-heading strong{ display:block; overflow:hidden; color:#fff; font-size:.98rem; text-overflow:ellipsis; white-space:nowrap; } .profile-album-modal-close{ display:flex; align-items:center; justify-content:center; width:42px; height:42px; flex:0 0 42px; padding:0; border:1px solid rgba(255,255,255,.13); border-radius:12px; background:rgba(255,255,255,.07); color:#fff; cursor:pointer; font-size:1.55rem; line-height:1; transition:background .15s ease; } .profile-album-modal-close:hover{ background:rgba(255,255,255,.14); } /* ------------------------------------------------------------ Einheitliche Bildfläche ------------------------------------------------------------ */ .profile-album-modal-stage{ position:relative; display:flex; align-items:center; justify-content:center; min-height:0; overflow:hidden; background: radial-gradient( circle at center, #222b35 0, #11171e 68% ); } .profile-album-modal-image{ display:block; width:100%; height:100%; object-fit:contain; object-position:center; } /* ------------------------------------------------------------ Pfeile ------------------------------------------------------------ */ .profile-album-modal-nav{ position:absolute; top:50%; display:flex; align-items:center; justify-content:center; width:48px; height:62px; padding:0; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(9,14,20,.67); color:#fff; cursor:pointer; font-size:2rem; line-height:1; transform:translateY(-50%); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition: background .15s ease, transform .15s ease; } .profile-album-modal-nav:hover{ background:rgba(9,14,20,.9); } .profile-album-modal-prev{ left:16px; } .profile-album-modal-next{ right:16px; } /* ------------------------------------------------------------ Footer ------------------------------------------------------------ */ .profile-album-modal-foot{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:15px; align-items:center; min-height:70px; padding:12px 20px; border-top:1px solid rgba(255,255,255,.09); background:#171d25; } .profile-album-modal-caption{ min-width:0; margin:0; overflow:hidden; color:#d4d9df; font-size:.72rem; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; } .profile-album-modal-position{ display:inline-flex; align-items:center; justify-content:center; min-width:58px; padding:7px 10px; border-radius:999px; background:rgba(255,255,255,.08); color:#fff; font-size:.66rem; font-weight:850; } /* ------------------------------------------------------------ Punkte ------------------------------------------------------------ */ .profile-album-modal-dots{ grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:6px; } .profile-album-modal-dot{ width:7px; height:7px; min-width:7px; padding:0; border:0; border-radius:50%; background:#65707d; cursor:pointer; } .profile-album-modal-dot.is-active{ background:#fff; transform:scale(1.3); } /* ------------------------------------------------------------ Knutschfleck-Counter ------------------------------------------------------------ */ .profile-kiss-counter-modern{ position:relative; } .profile-kiss-counter-icon{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; margin:0 auto 6px; border-radius:50%; background: linear-gradient( 145deg, #fff0f3, #ffe2e8 ); box-shadow: 0 5px 13px rgba(225,60,96,.12); font-size:1.05rem; } /* ------------------------------------------------------------ Smartphone ------------------------------------------------------------ */ @media(max-width:800px){ .public-profile-2b .profile-modern-album-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .profile-album-modal{ padding:8px; } .profile-album-modal-dialog{ width:100%; height:min(90vh,760px); border-radius:19px; } .profile-album-modal-nav{ width:40px; height:54px; border-radius:12px; } .profile-album-modal-prev{ left:8px; } .profile-album-modal-next{ right:8px; } } @media(max-width:480px){ .public-profile-2b .profile-modern-album-grid{ grid-template-columns:1fr 1fr; gap:9px; } .profile-modern-album{ border-radius:15px; } .profile-modern-album-info{ min-height:68px; padding:10px 11px 11px; } .profile-modern-album-info strong{ font-size:.76rem; } .profile-modern-album-modal-head{ min-height:60px; } .profile-album-modal-foot{ padding:10px 13px; } } /* ============================================================ END ET-HOST PROFILE ALBUM 2.3 ============================================================ */ /* ============================================================ ET-HOST PROFILE ALBUM 2.3.2 ============================================================ */ /* * Hidden muss wirklich unsichtbar sein. * Einige ältere Album-CSS-Regeln überschrieben dies. */ .public-profile-2b #profile-albums > [hidden]{ display:none!important; } /* ------------------------------------------------------------ MODERNE ALBUMKACHELN ------------------------------------------------------------ */ .public-profile-2b .profile-modern-album-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,230px)); gap:16px; align-items:start; } .public-profile-2b .profile-modern-album{ width:100%; overflow:hidden; border-radius:18px; } .public-profile-2b .profile-modern-album-cover{ width:100%; aspect-ratio:4 / 3; overflow:hidden; background:#eef2f6; } .public-profile-2b .profile-modern-album-cover img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; } /* ------------------------------------------------------------ KNUTSCHFLECK ------------------------------------------------------------ */ .profile-kiss-counter-modern{ display:flex!important; flex-direction:column; align-items:center; justify-content:center; min-height:125px; text-align:center; } .profile-kiss-counter-modern .profile-kiss-counter-icon{ display:flex!important; align-items:center; justify-content:center; width:54px!important; height:54px!important; margin:0 auto 9px!important; border:1px solid rgba(230,55,92,.12); border-radius:50%; background: radial-gradient( circle at 35% 25%, #ffffff, #fff3f6 40%, #ffe1e8 100% ); box-shadow: 0 9px 22px rgba(219,54,91,.16); font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif!important; font-size:29px!important; line-height:1!important; } .profile-kiss-counter-modern b{ font-size:1.55rem!important; line-height:1!important; font-weight:900!important; } .profile-kiss-counter-modern > span:last-child{ margin-top:6px; color:#7b6b72; font-size:.65rem; font-weight:700; } @media(max-width:700px){ .public-profile-2b .profile-modern-album-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* ============================================================ END ET-HOST PROFILE ALBUM 2.3.2 ============================================================ */ /* ============================================================ ET-HOST OLD PUBLIC ALBUM REMOVE Alte Albumdarstellung aus Fremdprofil entfernen ============================================================ */ .public-profile-2b #profile-albums .profile-public-album-v2{ display:none!important; visibility:hidden!important; } /* * Nur die neue Album-2.3-Darstellung bleibt sichtbar. */ .public-profile-2b #profile-albums .profile-modern-album-grid{ display:grid!important; visibility:visible!important; } /* ============================================================ END ET-HOST OLD PUBLIC ALBUM REMOVE ============================================================ */ /* ============================================================ ET-HOST ORPHAN CHAT COLOR FIX Altes Farbfeld darf im modernen Composer nicht sichtbar sein. ============================================================ */ .chat-page #chatComposer > input#chatColor{ display:none!important; position:absolute!important; width:0!important; height:0!important; min-width:0!important; min-height:0!important; margin:0!important; padding:0!important; border:0!important; opacity:0!important; pointer-events:none!important; } /* Sicherheit gegen Browser-Defaultdarstellung */ .chat-page #chatComposer > #chatColor{ appearance:none!important; -webkit-appearance:none!important; } /* ============================================================ END ET-HOST ORPHAN CHAT COLOR FIX ============================================================ */ /* ============================================================ ET-HOST ONLINE LIST POSITION 2.5 ============================================================ */ /* * Desktop und größere Tablets. * Mobil unter 761px bleibt die bestehende Drawer-Ansicht * vollständig unverändert. */ @media (min-width:761px){ /* Standard: rechts */ .chat-layout.online-list-right{ grid-template-columns: minmax(0,1fr) 270px; } .chat-layout.online-list-right > .chat-panel{ grid-column:1; grid-row:1; } .chat-layout.online-list-right > .user-panel{ grid-column:2; grid-row:1; } /* Optional: links */ .chat-layout.online-list-left{ grid-template-columns: 270px minmax(0,1fr); } .chat-layout.online-list-left > .user-panel{ grid-column:1; grid-row:1; } .chat-layout.online-list-left > .chat-panel{ grid-column:2; grid-row:1; } } /* Adminfeld passend zu Schnelleinstellungen */ .online-list-position-setting{ display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:14px; align-items:center; margin-top:10px; padding:12px 0; } .online-list-position-setting > span{ display:grid; gap:3px; } .online-list-position-setting > span b{ color:#283341; font-size:.78rem; } .online-list-position-setting > span small{ color:#7c8794; font-size:.66rem; line-height:1.4; } .online-list-position-setting select{ width:100%; min-height:42px; padding:8px 10px; border:1px solid #d8dfe6; border-radius:10px; background:#fff; color:#172033; } @media(max-width:640px){ .online-list-position-setting{ grid-template-columns:1fr; } } /* ============================================================ END ET-HOST ONLINE LIST POSITION 2.5 ============================================================ */ /* ============================================================ ET-HOST ADMIN CONTENT UX 3.1 WICHTIG: Die vorhandene Admin-Navigation wird NICHT verändert. Dieses Design betrifft ausschließlich den Inhaltsbereich. ============================================================ */ .admin-shell{ --admin-content-primary:var(--primary,#ef5547); --admin-content-line:var(--line,#e2e6ea); --admin-content-muted:var(--muted,#7b858f); --admin-content-bg:var(--surface,#fff); } /* ============================================================ GESAMTER INHALT ============================================================ */ .admin-content-board{ display:grid; gap:24px; width:100%; min-width:0; margin-top:18px; margin-bottom:28px; } /* ============================================================ HAUPTGRUPPEN ============================================================ */ .admin-content-group{ min-width:0; padding:18px; border: 1px solid var(--admin-content-line); border-radius:18px; background: color-mix( in srgb, var(--admin-content-primary) 2%, #fff ); box-shadow: 0 6px 22px rgba(22,30,38,.035); } /* ============================================================ GRUPPENÜBERSCHRIFT ============================================================ */ .admin-content-group-head{ display:flex; align-items:center; gap:13px; margin-bottom:17px; padding-bottom:14px; border-bottom: 1px solid var(--admin-content-line); } .admin-content-group-icon{ flex:0 0 42px; width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background: color-mix( in srgb, var(--admin-content-primary) 12%, #fff ); color: var(--admin-content-primary); font-size:1.05rem; } .admin-content-group-title{ min-width:0; flex:1; } .admin-content-group-title h2{ margin:0 0 2px; color:var(--text,#1b2530); font-size: clamp( 1rem, 1.5vw, 1.18rem ); line-height:1.2; letter-spacing:-.015em; } .admin-content-group-title p{ margin:0; color: var(--admin-content-muted); font-size:.7rem; line-height:1.45; } .admin-content-group-count{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px; padding:0 8px; border-radius:999px; background: color-mix( in srgb, var(--admin-content-primary) 9%, #fff ); color: var(--admin-content-primary); font-size:.63rem; font-weight:900; } /* ============================================================ SEKTIONEN INNERHALB EINER GRUPPE ============================================================ */ .admin-content-group-body{ display:grid; gap:18px; min-width:0; } .admin-content-group-body > .admin-section{ min-width:0; margin:0!important; padding:0!important; } /* * Jede Funktion bekommt weiterhin ihre eigene Überschrift, * aber optisch einheitlicher. */ .admin-content-group .admin-section > .section-title{ position:relative; margin:0 0 10px!important; padding: 12px 14px 12px 17px!important; border: 1px solid var(--admin-content-line); border-radius: 13px 13px 0 0; background:#fff; } .admin-content-group .admin-section > .section-title::before{ content:""; position:absolute; left:0; top:11px; bottom:11px; width:4px; border-radius: 0 4px 4px 0; background: var(--admin-content-primary); } .admin-content-group .section-title .eyebrow{ color: var(--admin-content-primary)!important; font-size:.59rem; font-weight:900; letter-spacing:.07em; text-transform:uppercase; } .admin-content-group .section-title h2{ margin-top:2px!important; margin-bottom:0!important; font-size: clamp( .96rem, 1.4vw, 1.12rem )!important; letter-spacing:-.015em; } /* ============================================================ KARTEN ============================================================ */ .admin-content-group .admin-card{ min-width:0; border: 1px solid var(--admin-content-line)!important; border-radius:14px!important; background:#fff; box-shadow: 0 4px 15px rgba(20,30,40,.025)!important; } .admin-content-group .admin-card:hover{ border-color: color-mix( in srgb, var(--admin-content-primary) 20%, var(--admin-content-line) )!important; } .admin-content-group .admin-grid{ gap:15px!important; } /* ============================================================ KARTENÜBERSCHRIFTEN ============================================================ */ .admin-content-group .card-title{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px!important; padding-bottom:10px; border-bottom: 1px solid var(--admin-content-line); } .admin-content-group .card-title h2, .admin-content-group .card-title h3{ margin:0; font-size:.92rem; letter-spacing:-.01em; } /* ============================================================ FORMULARE ============================================================ */ .admin-content-group .admin-card input, .admin-content-group .admin-card select, .admin-content-group .admin-card textarea{ border-color: var(--admin-content-line); transition: border-color .15s ease, box-shadow .15s ease; } .admin-content-group .admin-card input:focus, .admin-content-group .admin-card select:focus, .admin-content-group .admin-card textarea:focus{ border-color: var(--admin-content-primary); box-shadow: 0 0 0 3px color-mix( in srgb, var(--admin-content-primary) 11%, transparent ); } /* ============================================================ SWITCH-ZEILEN ============================================================ */ .admin-content-group .switch-row{ padding: 9px 0; border-bottom: 1px solid color-mix( in srgb, var(--admin-content-line) 70%, transparent ); } .admin-content-group .switch-row:last-child{ border-bottom:0; } /* ============================================================ TABELLEN ============================================================ */ .admin-content-group .table{ overflow:hidden; border: 1px solid var(--admin-content-line); border-radius:12px; } .admin-content-group .table .tr.head{ background: color-mix( in srgb, var(--admin-content-primary) 3%, #f7f8f9 ); color: var(--admin-content-muted); font-size:.64rem; font-weight:850; letter-spacing:.04em; text-transform:uppercase; } .admin-content-group .table .tr:not(.head):hover{ background: color-mix( in srgb, var(--admin-content-primary) 3%, #fff ); } /* ============================================================ SCHNELLEINSTELLUNGEN ============================================================ */ .admin-content-group .quick-settings-groups{ gap:13px!important; } .admin-content-group .quick-settings-group{ overflow:hidden; border: 1px solid var(--admin-content-line)!important; border-radius:13px!important; background:#fff; } .admin-content-group .quick-settings-group > header{ padding:11px 13px; border-bottom: 1px solid var(--admin-content-line); background: color-mix( in srgb, var(--admin-content-primary) 3%, #f7f8f9 ); } /* ============================================================ ABSCHLUSSABSTÄNDE ============================================================ */ .admin-content-group .admin-section:last-child{ margin-bottom:0!important; } .admin-content-group .admin-section > :last-child{ margin-bottom:0; } /* ============================================================ DIREKTE DEMO-KARTEN ============================================================ */ .admin-content-group-body > section.admin-card{ margin:0!important; } /* ============================================================ TABLET ============================================================ */ @media(max-width:900px){ .admin-content-board{ gap:18px; } .admin-content-group{ padding:14px; border-radius:15px; } .admin-content-group-head{ margin-bottom:14px; } } /* ============================================================ SMARTPHONE ============================================================ */ @media(max-width:620px){ .admin-content-board{ gap:14px; margin-top:12px; } .admin-content-group{ padding:11px; border-radius:13px; } .admin-content-group-head{ align-items:flex-start; gap:10px; margin-bottom:12px; padding-bottom:11px; } .admin-content-group-icon{ flex-basis:36px; width:36px; height:36px; border-radius:10px; } .admin-content-group-count{ min-width:24px; height:24px; } .admin-content-group-body{ gap:13px; } .admin-content-group .admin-section > .section-title{ padding: 10px 11px 10px 14px!important; } } /* ============================================================ END ET-HOST ADMIN CONTENT UX 3.1 ============================================================ */ /* ============================================================ ET-HOST ACCESSIBILITY 1.0 ============================================================ */ /* Screenreader-only */ .a11y-sr-only{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; } /* ============================================================ TASTATURFOKUS – IMMER AKTIV ============================================================ */ body :focus-visible{ outline: 3px solid var(--primary,#ef5547)!important; outline-offset: 3px!important; } /* Skip-Link */ .a11y-skip-link{ position:fixed; left:12px; top:10px; z-index:100000; transform: translateY(-160%); padding: 11px 15px; border-radius:9px; background:#111!important; color:#fff!important; font-weight:850; text-decoration:none!important; } .a11y-skip-link:focus{ transform:none; } /* ============================================================ BUTTON ============================================================ */ .a11y-trigger{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:42px; min-height:40px; padding:8px 11px; border: 1px solid var(--line,#dfe4e8); border-radius:11px; background:#fff; color:#17202a; font:inherit; font-size:.73rem; font-weight:850; cursor:pointer; box-shadow: 0 3px 12px rgba(20,30,40,.06); } .a11y-trigger:hover{ border-color: var(--primary,#ef5547); color: var(--primary,#ef5547); } .a11y-trigger-icon{ font-size:1rem; line-height:1; } /* * Wenn keine passende Kopfzeile existiert: * schwebender Button. */ body > .a11y-trigger{ position:fixed; right:16px; bottom:16px; z-index:9000; } /* ============================================================ MODAL ============================================================ */ .a11y-overlay[hidden]{ display:none!important; } .a11y-overlay{ position:fixed; inset:0; z-index:99990; display:grid; place-items:center; padding:18px; background: rgba(10,15,20,.58); backdrop-filter: blur(5px); } .a11y-dialog{ width: min( 560px, 100% ); max-height: min( 760px, calc(100vh - 36px) ); overflow:auto; border: 1px solid var(--line,#dfe4e8); border-radius:18px; background:#fff; color:#17202a; box-shadow: 0 25px 80px rgba(0,0,0,.28); } .a11y-dialog-head{ position:sticky; top:0; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:15px; padding: 18px 20px; border-bottom: 1px solid #e2e6e9; background:#fff; } .a11y-dialog-head h2{ margin:0 0 4px; font-size:1.15rem; } .a11y-dialog-head p{ margin:0; color:#707b85; font-size:.72rem; line-height:1.45; } .a11y-close{ flex:0 0 38px; width:38px; height:38px; display:grid; place-items:center; border: 1px solid #dfe4e8; border-radius:10px; background:#fff; color:#17202a; cursor:pointer; font-size:1.25rem; } .a11y-dialog-body{ display:grid; gap:18px; padding:20px; } .a11y-section{ display:grid; gap:10px; } .a11y-section-title{ margin:0; font-size:.78rem; font-weight:900; color:#27313b; } .a11y-choice-grid{ display:grid; grid-template-columns: repeat( 3, minmax(0,1fr) ); gap:8px; } .a11y-choice{ position:relative; } .a11y-choice input{ position:absolute; opacity:0; pointer-events:none; } .a11y-choice span{ min-height:45px; display:flex; align-items:center; justify-content:center; padding:8px; border: 1px solid #dce2e7; border-radius:10px; background:#f8f9fa; color:#27313b; cursor:pointer; text-align:center; font-size:.72rem; font-weight:800; } .a11y-choice input:checked + span{ border-color: var(--primary,#ef5547); background: color-mix( in srgb, var(--primary,#ef5547) 10%, #fff ); color: var(--primary,#ef5547); } .a11y-toggle{ min-height:50px; display:grid; grid-template-columns: minmax(0,1fr) auto; gap:15px; align-items:center; padding: 10px 12px; border: 1px solid #e1e5e8; border-radius:11px; cursor:pointer; } .a11y-toggle-copy{ display:grid; gap:2px; } .a11y-toggle-copy b{ font-size:.75rem; } .a11y-toggle-copy small{ color:#78828b; font-size:.65rem; line-height:1.4; } .a11y-toggle input{ width:20px; height:20px; accent-color: var(--primary,#ef5547); } .a11y-dialog-foot{ display:flex; justify-content:space-between; gap:10px; padding: 15px 20px 20px; } .a11y-reset{ min-height:42px; padding: 8px 14px; border: 1px solid #dce2e7; border-radius:10px; background:#fff; color:#27313b; font:inherit; font-weight:800; cursor:pointer; } .a11y-done{ min-height:42px; padding: 8px 17px; border:0; border-radius:10px; background: var(--primary,#ef5547); color:#fff; font:inherit; font-weight:850; cursor:pointer; } /* ============================================================ SCHRIFTGRÖSSE ============================================================ */ html.a11y-font-large{ font-size:112.5%!important; } html.a11y-font-xlarge{ font-size:125%!important; } /* * Chatnachrichten teilweise mit festen px-Werten: * zusätzlich explizit vergrößern. */ html.a11y-font-large .message-content, html.a11y-font-large .pm-bubble, html.a11y-font-large .messages{ font-size:1rem!important; } html.a11y-font-xlarge .message-content, html.a11y-font-xlarge .pm-bubble, html.a11y-font-xlarge .messages{ font-size:1.12rem!important; } /* ============================================================ FETTERE SCHRIFT ============================================================ */ html.a11y-bold .message-content, html.a11y-bold .pm-bubble, html.a11y-bold .user-row, html.a11y-bold .admin-main p, html.a11y-bold .profile-shell p, html.a11y-bold label, html.a11y-bold input, html.a11y-bold textarea, html.a11y-bold select{ font-weight:600!important; } /* ============================================================ MEHR ZEILENABSTAND ============================================================ */ html.a11y-spacing .message-content, html.a11y-spacing .pm-bubble, html.a11y-spacing .profile-shell p, html.a11y-spacing .admin-main p, html.a11y-spacing label, html.a11y-spacing small{ line-height:1.7!important; } html.a11y-spacing .message{ margin-bottom:10px!important; } /* ============================================================ GRÖSSERE BEDIENELEMENTE ============================================================ */ html.a11y-big-controls button, html.a11y-big-controls input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), html.a11y-big-controls select, html.a11y-big-controls textarea, html.a11y-big-controls .btn, html.a11y-big-controls .tenant-action, html.a11y-big-controls .icon-btn{ min-height:48px!important; } html.a11y-big-controls button, html.a11y-big-controls .btn, html.a11y-big-controls .tenant-action, html.a11y-big-controls .icon-btn{ min-width:48px; } /* ============================================================ LINKS ============================================================ */ html.a11y-links a:not(.btn):not(.tenant-action):not(.icon-btn){ text-decoration: underline!important; text-decoration-thickness: 2px!important; text-underline-offset: 3px!important; } /* ============================================================ AVATARE IM CHAT AUSBLENDEN ============================================================ */ html.a11y-hide-avatars .chat-page .avatar, html.a11y-hide-avatars .chat-page .user-avatar, html.a11y-hide-avatars .chat-page .message-avatar, html.a11y-hide-avatars .chat-page [class*="message-avatar"]{ display:none!important; } /* ============================================================ HOHER KONTRAST ============================================================ */ html.a11y-high-contrast body, html.a11y-high-contrast .tenant-shell, html.a11y-high-contrast .admin-shell, html.a11y-high-contrast .profile-shell, html.a11y-high-contrast .pm-shell{ background:#000!important; color:#fff!important; --bg:#000; --surface:#000; --text:#fff; --muted:#f2f2f2; --line:#fff; --primary:#ffde00; } html.a11y-high-contrast .chat-panel, html.a11y-high-contrast .user-panel, html.a11y-high-contrast .admin-card, html.a11y-high-contrast .admin-section, html.a11y-high-contrast .profile2-card, html.a11y-high-contrast .profile-card, html.a11y-high-contrast .pm-list, html.a11y-high-contrast .pm-chat, html.a11y-high-contrast .chat-composer, html.a11y-high-contrast .a11y-dialog{ background:#000!important; color:#fff!important; border-color:#fff!important; } html.a11y-high-contrast .a11y-dialog-head{ background:#000!important; color:#fff!important; border-color:#fff!important; } html.a11y-high-contrast h1, html.a11y-high-contrast h2, html.a11y-high-contrast h3, html.a11y-high-contrast h4, html.a11y-high-contrast p, html.a11y-high-contrast span, html.a11y-high-contrast small, html.a11y-high-contrast strong, html.a11y-high-contrast b, html.a11y-high-contrast label{ color:#fff!important; } html.a11y-high-contrast a{ color:#ffde00!important; text-decoration: underline!important; text-decoration-thickness: 2px!important; text-underline-offset: 3px!important; } html.a11y-high-contrast input, html.a11y-high-contrast textarea, html.a11y-high-contrast select{ background:#000!important; color:#fff!important; border: 2px solid #fff!important; } html.a11y-high-contrast button, html.a11y-high-contrast .btn, html.a11y-high-contrast .tenant-action, html.a11y-high-contrast .icon-btn{ border: 2px solid #ffde00!important; background:#000!important; color:#ffde00!important; } html.a11y-high-contrast button:hover, html.a11y-high-contrast .btn:hover, html.a11y-high-contrast .tenant-action:hover, html.a11y-high-contrast .icon-btn:hover{ background:#ffde00!important; color:#000!important; } html.a11y-high-contrast .message, html.a11y-high-contrast .message-content, html.a11y-high-contrast .pm-bubble{ background:#000!important; color:#fff!important; border-color:#fff!important; } html.a11y-high-contrast .online-dot{ background:#ffde00!important; border: 2px solid #000!important; outline: 2px solid #ffde00!important; } /* ============================================================ BEWEGUNGEN REDUZIEREN ============================================================ */ html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; } /* * Betriebssystem-Einstellung ebenfalls respektieren. */ @media(prefers-reduced-motion:reduce){ *, *::before, *::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; } } /* ============================================================ MOBIL ============================================================ */ @media(max-width:620px){ .a11y-overlay{ padding:8px; } .a11y-dialog{ max-height: calc(100vh - 16px); border-radius:14px; } .a11y-dialog-head, .a11y-dialog-body{ padding:15px; } .a11y-dialog-foot{ padding: 12px 15px 15px; } .a11y-choice-grid{ grid-template-columns:1fr; } body > .a11y-trigger{ right:10px; bottom:10px; } } /* ============================================================ END ET-HOST ACCESSIBILITY 1.0 ============================================================ */ /* ============================================================ ET-HOST PLAYER ONLINE BOTTOM 1.0 Desktop: Player unten in der Onlineliste Mobil: bisherige Position bleibt bestehen ============================================================ */ @media (min-width:761px){ /* * Nachdem der Player aus der Mitte entfernt wurde, * braucht der Header nur noch: * * Logo / Chatname | Navigation */ .tenant-shell .tenant-head.player-docked-to-online{ grid-template-columns: minmax(190px,1fr) auto!important; gap:18px!important; } .tenant-shell .tenant-head.player-docked-to-online .tenant-actions{ min-width:0; justify-content:flex-end; gap:7px; } /* * Onlineliste erhält drei Bereiche: * * Kopf * Nutzerliste (scrollbar) * Player */ .tenant-shell .user-panel.ethost-player-docked{ display:flex; flex-direction:column; min-height:0; overflow:hidden!important; } .tenant-shell .user-panel.ethost-player-docked .user-head{ flex:0 0 auto; } .tenant-shell .user-panel.ethost-player-docked #onlineUsers{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; } /* * Player unten */ .online-player-dock{ flex:0 0 auto; margin-top:12px; padding: 14px 12px 12px; border-top: 1px solid var(--line,#e2e6e9); background: linear-gradient( 180deg, rgba(248,249,250,.96), #fff ); } .online-player-dock::before{ content:"📻 Radioplayer"; display:block; margin: 0 2px 8px; color: #68727c; font-size:.64rem; font-weight:850; letter-spacing:.035em; text-transform:uppercase; } /* * Der bisher breite Header-Player * wird für die schmale Onlineliste kompakt. */ .online-player-dock .radio-player{ width:100%; display:grid!important; grid-template-columns: 38px minmax(0,1fr)!important; grid-template-rows: auto auto; gap: 8px 9px!important; align-items:center; padding: 10px!important; border-radius: 12px!important; min-width:0; } .online-player-dock .radio-player .play-btn{ grid-column:1; grid-row:1; width:36px!important; height:36px!important; } .online-player-dock .radio-player > span{ grid-column:2; grid-row:1; min-width:0; } .online-player-dock .radio-player strong{ display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:.76rem; } .online-player-dock .radio-player small{ display:block; margin-top:2px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:.61rem; } .online-player-dock .radio-player input[data-radio-volume]{ grid-column:1 / -1; grid-row:2; width:100%!important; min-width:0; margin:2px 0 0!important; padding:0!important; } } /* * Hoher Kontrast aus der Sehhilfe * funktioniert auch am neuen Platz. */ html.a11y-high-contrast .online-player-dock{ background:#000!important; border-color:#fff!important; } html.a11y-high-contrast .online-player-dock::before{ color:#fff!important; } /* ============================================================ END ET-HOST PLAYER ONLINE BOTTOM 1.0 ============================================================ */ /* ============================================================ ET-HOST PLAYER SIDEBAR 1.2 ============================================================ */ /* ------------------------------------------------------------ ONLINE-LISTE Nickname und Avatar immer oben beginnen ------------------------------------------------------------ */ .chat-page .user-row{ align-items:start!important; } .chat-page .user-row > div{ align-self:start!important; padding-top:0!important; margin-top:0!important; } .chat-page .user-row > .avatar, .chat-page .user-row > img{ align-self:start!important; margin-top:0!important; } .chat-page .user-row b{ margin-top:0!important; line-height:1.15!important; } /* ------------------------------------------------------------ SIDEBAR PLAYER ------------------------------------------------------------ */ @media (min-width:761px){ .online-player-dock{ margin-top:14px!important; padding: 13px 12px 12px!important; border-top: 1px solid var(--line,#e1e5e8)!important; background: linear-gradient( 180deg, #fafbfc, #fff )!important; } .online-player-dock::before{ content:"📻 Radioplayer"; display:block; margin: 0 2px 9px!important; color:#66717c!important; font-size:.62rem!important; font-weight:900!important; line-height:1!important; letter-spacing:.05em!important; text-transform:uppercase; } /* -------------------------------------------------------- PLAYER KARTE -------------------------------------------------------- */ .online-player-dock .radio-player.radio-player-sidebar-v2{ position:relative; width:100%!important; display:grid!important; grid-template-columns: 46px minmax(0,1fr) 38px!important; grid-template-rows: auto auto auto!important; column-gap:10px!important; row-gap:10px!important; align-items:start!important; min-width:0!important; padding: 12px!important; border: 1px solid rgba(255,255,255,.08)!important; border-radius: 14px!important; background: linear-gradient( 145deg, #222930 0%, #171c21 100% )!important; box-shadow: 0 8px 22px rgba(20,28,35,.17)!important; color:#fff!important; overflow:hidden!important; } /* * dezenter Akzent */ .online-player-dock .radio-player-sidebar-v2::after{ content:""; position:absolute; right:-50px; top:-60px; width:120px; height:120px; border-radius:50%; background: color-mix( in srgb, var(--primary,#ef5547) 24%, transparent ); filter:blur(25px); pointer-events:none; } /* -------------------------------------------------------- ON-AIR BENUTZER -------------------------------------------------------- */ .online-player-dock .radio-player-sidebar-v2 > .radio-onair-host{ position:relative; z-index:2; grid-column: 1 / 3!important; grid-row: 1!important; width:100%; display:grid!important; grid-template-columns: 46px minmax(0,1fr)!important; gap:9px!important; align-items:start!important; margin:0!important; padding:0!important; } /* Avatar */ .online-player-dock .radio-player-sidebar-v2 .radio-onair-avatar{ width:46px!important; height:46px!important; min-width:46px!important; display:grid!important; place-items:center!important; align-self:start!important; margin:0!important; overflow:hidden!important; border: 2px solid rgba(255,255,255,.8)!important; border-radius: 12px!important; background: #303840!important; box-shadow: 0 4px 12px rgba(0,0,0,.25)!important; color:#fff!important; } .online-player-dock .radio-player-sidebar-v2 .radio-onair-avatar img{ display:block!important; width:100%!important; height:100%!important; object-fit:cover!important; } .online-player-dock .radio-player-sidebar-v2 .radio-onair-initial{ display:grid!important; place-items:center!important; width:100%!important; height:100%!important; color:#fff!important; font-size:1rem!important; font-weight:900!important; } /* -------------------------------------------------------- ON AIR + DJ NICKNAME -------------------------------------------------------- */ .online-player-dock .radio-player-sidebar-v2 .radio-onair-meta{ display:grid!important; align-content:start!important; align-self:start!important; gap:3px!important; min-width:0!important; margin:0!important; padding:1px 0 0!important; } .online-player-dock .radio-player-sidebar-v2 .radio-onair-meta em{ display:flex!important; align-items:center!important; gap:5px!important; margin:0!important; color:#ff6868!important; font-size:.57rem!important; font-style:normal!important; font-weight:950!important; line-height:1!important; letter-spacing:.055em!important; text-transform:uppercase!important; } .online-player-dock .radio-player-sidebar-v2 .radio-onair-meta em::before{ content:""; width:6px; height:6px; flex:0 0 6px; border-radius:50%; background:#ff5252; box-shadow: 0 0 0 3px rgba(255,82,82,.14); } .online-player-dock .radio-player-sidebar-v2 .radio-onair-meta b{ display:block!important; overflow:hidden!important; margin:0!important; color:#fff!important; font-size:.78rem!important; font-weight:900!important; line-height:1.15!important; white-space:nowrap!important; text-overflow:ellipsis!important; } /* -------------------------------------------------------- PLAY -------------------------------------------------------- */ .online-player-dock .radio-player-sidebar-v2 > .play-btn{ position:relative; z-index:3; grid-column: 3!important; grid-row: 1!important; align-self:start!important; justify-self:end!important; width:36px!important; height:36px!important; min-width:36px!important; min-height:36px!important; margin:0!important; padding:0!important; display:grid!important; place-items:center!important; border:0!important; border-radius:50%!important; background: var(--primary,#ef5547)!important; color:#fff!important; box-shadow: 0 5px 14px color-mix( in srgb, var(--primary,#ef5547) 32%, transparent )!important; font-size:.8rem!important; line-height:1!important; } .online-player-dock .radio-player-sidebar-v2 > .play-btn:hover{ transform: translateY(-1px) scale(1.04); } /* -------------------------------------------------------- SENDERNAMEN + STATUS -------------------------------------------------------- */ .online-player-dock .radio-player-sidebar-v2 > .radio-player-copy{ position:relative!important; z-index:2!important; grid-column: 1 / 4!important; grid-row: 2!important; display:grid!important; width:100%!important; min-width:0!important; max-width:none!important; gap:3px!important; margin:0!important; padding: 10px 0 2px!important; border-top: 1px solid rgba(255,255,255,.1)!important; visibility:visible!important; opacity:1!important; overflow:visible!important; } .online-player-dock .radio-player-sidebar-v2 > .radio-player-copy strong{ display:block!important; width:100%!important; margin:0!important; overflow:hidden!important; visibility:visible!important; opacity:1!important; color:#fff!important; font-size:.82rem!important; font-weight:900!important; line-height:1.2!important; white-space:nowrap!important; text-overflow:ellipsis!important; } .online-player-dock .radio-player-sidebar-v2 > .radio-player-copy small{ display:block!important; width:100%!important; margin:0!important; overflow:hidden!important; visibility:visible!important; opacity:1!important; color:#b7c0c9!important; font-size:.62rem!important; font-weight:650!important; line-height:1.35!important; white-space:nowrap!important; text-overflow:ellipsis!important; } /* -------------------------------------------------------- LAUTSTÄRKE -------------------------------------------------------- */ .online-player-dock .radio-player-sidebar-v2 > input[type="range"]{ position:relative; z-index:2; grid-column: 1 / 4!important; grid-row: 3!important; display:block!important; width:100%!important; min-width:0!important; min-height:18px!important; height:18px!important; margin:0!important; padding:0!important; border:0!important; accent-color: var(--primary,#ef5547)!important; } /* * Falls gerade kein DJ / On-Air-Host existiert. */ .online-player-dock .radio-player-sidebar-v2:not(.has-onair-host) > .radio-player-copy{ grid-column: 1 / 3!important; grid-row: 1!important; padding-top:0!important; border-top:0!important; } .online-player-dock .radio-player-sidebar-v2:not(.has-onair-host) > input[type="range"]{ grid-row: 2!important; } } /* ------------------------------------------------------------ BARRIEREFREIHEIT ------------------------------------------------------------ */ html.a11y-high-contrast .online-player-dock .radio-player-sidebar-v2{ background:#000!important; border: 2px solid #fff!important; } html.a11y-high-contrast .radio-player-sidebar-v2 .radio-onair-avatar{ border-color:#fff!important; } html.a11y-high-contrast .radio-player-sidebar-v2 .radio-player-copy strong, html.a11y-high-contrast .radio-player-sidebar-v2 .radio-player-copy small, html.a11y-high-contrast .radio-player-sidebar-v2 .radio-onair-meta b{ color:#fff!important; } /* ============================================================ END ET-HOST PLAYER SIDEBAR 1.2 ============================================================ */ /* ============================================================ ET-HOST AUTODJ PLAYER 1.0 ============================================================ */ .autodj-admin-box{ display:grid; gap:13px; margin: 16px 0; padding:16px; border: 1px solid var(--line,#dde3e8); border-radius:14px; background: color-mix( in srgb, var(--primary,#ef5547) 3%, #fff ); } .autodj-admin-head{ display:flex; align-items:center; justify-content:space-between; padding-bottom:11px; border-bottom: 1px solid var(--line,#dde3e8); } .autodj-admin-head strong{ display:block; margin-bottom:3px; font-size:.88rem; } .autodj-admin-head small{ display:block; color: var(--muted,#78838d); font-size:.67rem; line-height:1.45; } .autodj-avatar-preview{ display:flex; align-items:center; gap:12px; padding:10px; border: 1px solid var(--line,#dde3e8); border-radius:12px; background:#fff; } .autodj-avatar-preview img{ flex:0 0 54px; width:54px; height:54px; border-radius:12px; object-fit:cover; border: 2px solid color-mix( in srgb, var(--primary,#ef5547) 35%, #fff ); } .autodj-avatar-preview span{ display:grid; gap:3px; min-width:0; } .autodj-avatar-preview b{ font-size:.75rem; } .autodj-avatar-preview small{ color: var(--muted,#78838d); font-size:.64rem; line-height:1.4; } /* AutoDJ optisch von einem echten Live-DJ unterscheiden */ .radio-onair-host[data-autodj-active="1"] .radio-onair-meta em{ color:#61bdf2!important; } .radio-onair-host[data-autodj-active="1"] .radio-onair-avatar{ box-shadow: 0 0 0 3px rgba(97,189,242,.13), 0 4px 12px rgba(0,0,0,.23)!important; } /* Hoher Kontrast */ html.a11y-high-contrast .radio-onair-host[data-autodj-active="1"] .radio-onair-meta em{ color:#ffde00!important; } /* ============================================================ END ET-HOST AUTODJ PLAYER 1.0 ============================================================ */ /* ============================================================ ET-HOST ONLINE USERS COMPACT 1.0 Benutzer kompakt und sauber untereinander ============================================================ */ /* ------------------------------------------------------------ NUTZERLISTE Keine Verteilung über die komplette Höhe mehr ------------------------------------------------------------ */ .chat-page .user-panel #onlineUsers{ display:flex!important; flex-direction:column!important; justify-content:flex-start!important; align-items:stretch!important; align-content:flex-start!important; gap:0!important; min-height:0; padding:0!important; overflow-y:auto; overflow-x:hidden; } /* ------------------------------------------------------------ EINZELNER BENUTZER ------------------------------------------------------------ */ .chat-page .user-panel #onlineUsers .user-row{ flex: 0 0 auto!important; width:100%!important; min-height:68px!important; height:auto!important; max-height:none!important; display:grid!important; grid-template-columns: 46px minmax(0,1fr) 28px!important; grid-template-rows:auto!important; column-gap:10px!important; align-items:start!important; align-content:start!important; margin:0!important; padding: 11px 12px!important; border-bottom: 1px solid rgba(20,30,40,.055); box-sizing:border-box; } /* * Letzter Benutzer ohne Trennlinie */ .chat-page .user-panel #onlineUsers .user-row:last-child{ border-bottom:0; } /* ------------------------------------------------------------ AVATAR ------------------------------------------------------------ */ .chat-page .user-panel #onlineUsers .user-row .avatar, .chat-page .user-panel #onlineUsers .user-row .user-avatar{ grid-column:1!important; align-self:start!important; width:46px!important; height:46px!important; min-width:46px!important; min-height:46px!important; margin:0!important; border-radius:12px!important; } /* * Falls das Avatar direkt als Bild ausgegeben wird */ .chat-page .user-panel #onlineUsers .user-row > img{ grid-column:1!important; align-self:start!important; width:46px!important; height:46px!important; margin:0!important; border-radius:12px!important; object-fit:cover!important; } /* ------------------------------------------------------------ BENUTZERDATEN Nickname beginnt immer oben ------------------------------------------------------------ */ .chat-page .user-panel #onlineUsers .user-row > div{ grid-column:2!important; align-self:start!important; align-content:start!important; min-width:0!important; margin:0!important; padding:0!important; } /* Nickname */ .chat-page .user-panel #onlineUsers .user-row b{ display:flex!important; align-items:center!important; flex-wrap:wrap!important; gap:4px!important; margin: 0 0 3px!important; padding:0!important; line-height:1.15!important; font-size:.78rem!important; } /* Rolle */ .chat-page .user-panel #onlineUsers .user-row small{ display:block; margin: 0 0 3px!important; line-height:1.2!important; font-size:.64rem!important; } /* Online / On Air Status */ .chat-page .user-panel #onlineUsers .user-row .online-status-label{ display:block!important; margin: 1px 0 3px!important; line-height:1.15!important; } /* Profil ansehen */ .chat-page .user-panel #onlineUsers .user-row a{ line-height:1.2!important; } /* ------------------------------------------------------------ STATUSPUNKT RECHTS ------------------------------------------------------------ */ .chat-page .user-panel #onlineUsers .user-row > i:last-child, .chat-page .user-panel #onlineUsers .user-row .community-status-badge{ grid-column:3!important; justify-self:end!important; align-self:start!important; margin: 7px 0 0!important; } /* ------------------------------------------------------------ PLAYER BLEIBT UNTEN ------------------------------------------------------------ */ .chat-page .user-panel.ethost-player-docked #onlineUsers{ flex: 1 1 auto!important; justify-content: flex-start!important; } .chat-page .user-panel .online-player-dock{ flex: 0 0 auto!important; margin-top:auto!important; } /* ------------------------------------------------------------ SEHR VIELE BENUTZER Liste scrollt, Player bleibt unten sichtbar ------------------------------------------------------------ */ .chat-page .user-panel.ethost-player-docked{ min-height:0!important; overflow:hidden!important; } /* ------------------------------------------------------------ MOBIL ebenfalls kompakt, aber etwas größere Touchfläche ------------------------------------------------------------ */ @media(max-width:760px){ .chat-page .user-panel #onlineUsers .user-row{ min-height:72px!important; padding: 12px 13px!important; } } /* ============================================================ END ET-HOST ONLINE USERS COMPACT 1.0 ============================================================ */ /* ============================================================ ET-HOST HOME MODERN 4.0.1 Landingpage redesign – Farbe/Marke bleiben erhalten ============================================================ */ body.home-modern-v4{ --home-red:var(--primary,#ef5547); --home-red-dark:var(--primary-dark,#d9473d); --home-ink:#171b20; --home-ink-2:#242a31; --home-muted:#69737d; --home-line:#e7eaed; --home-soft:#f7f8f9; --home-cream:#fff8f6; --home-blue:#1188f7; background:#fff; color:var(--home-ink); overflow-x:hidden; } body.home-modern-v4 .eyebrow{ color:var(--home-red); font-size:.72rem; font-weight:950; letter-spacing:.135em; } body.home-modern-v4 .btn{ border-radius:13px; min-height:46px; font-weight:850; box-shadow:0 10px 28px rgba(239,85,71,.16); } body.home-modern-v4 .btn-ghost{ box-shadow:none; background:#fff; border-color:#e2e6e9; } .homev4-skip{ position:fixed; z-index:99999; top:8px; left:10px; transform:translateY(-150%); padding:10px 14px; border-radius:10px; background:#171b20; color:#fff; font-weight:850; } .homev4-skip:focus{ transform:none; } /* ---------- Header ---------- */ body.home-modern-v4 .homev4-topbar{ height:82px; border-bottom:1px solid rgba(20,28,35,.06); background:rgba(255,255,255,.88); backdrop-filter:blur(22px) saturate(150%); box-shadow:0 1px 0 rgba(255,255,255,.8) inset; } body.home-modern-v4 .homev4-brand img{ width:132px; } body.home-modern-v4 .homev4-topbar nav{ gap:22px; font-size:.86rem; } body.home-modern-v4 .homev4-topbar nav>a:not(.btn){ position:relative; color:#414b55; } body.home-modern-v4 .homev4-topbar nav>a:not(.btn)::after{ content:""; position:absolute; left:0; right:100%; bottom:-8px; height:2px; border-radius:999px; background:var(--home-red); transition:right .18s ease; } body.home-modern-v4 .homev4-topbar nav>a:not(.btn):hover::after{ right:0; } /* ---------- Hero ---------- */ .homev4-hero{ position:relative; isolation:isolate; min-height:790px; display:grid; grid-template-columns:minmax(0,.86fr) minmax(570px,1.14fr); align-items:center; gap:64px; padding:78px max(28px,calc((100vw - 1320px)/2)) 84px; background: linear-gradient(130deg,#fff 0%,#fffaf9 46%,#f3f5f6 100%); overflow:hidden; } .homev4-hero::before{ content:""; position:absolute; inset:0; z-index:-3; background-image: linear-gradient(rgba(23,27,32,.025) 1px,transparent 1px), linear-gradient(90deg,rgba(23,27,32,.025) 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(to right,#000,transparent 68%); } .homev4-hero-glow{ position:absolute; z-index:-2; border-radius:50%; filter:blur(20px); pointer-events:none; } .homev4-hero-glow-a{ width:520px; height:520px; right:-170px; top:40px; background:rgba(239,85,71,.12); } .homev4-hero-glow-b{ width:300px; height:300px; left:35%; bottom:-170px; background:rgba(20,133,246,.07); } .homev4-hero-copy{ position:relative; z-index:2; max-width:650px; } .homev4-kicker{ display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid rgba(239,85,71,.16); border-radius:999px; background:rgba(255,255,255,.78); color:#6c4c48; font-size:.67rem; font-weight:900; letter-spacing:.075em; text-transform:uppercase; box-shadow:0 7px 24px rgba(40,32,30,.04); } .homev4-kicker>span{ width:7px; height:7px; border-radius:50%; background:var(--home-red); box-shadow:0 0 0 5px rgba(239,85,71,.11); } .homev4-hero h1{ max-width:700px; margin:23px 0 22px; font-size:clamp(3.6rem,6.25vw,6.65rem); line-height:.89; letter-spacing:-.075em; font-weight:900; text-wrap:balance; } .homev4-hero h1 em{ color:var(--home-red); font-style:normal; } .homev4-lead{ max-width:610px; margin:0; color:#606a74; font-size:1.1rem; line-height:1.68; } .homev4-hero-actions{ display:flex; flex-wrap:wrap; gap:11px; margin:29px 0 26px; } .homev4-primary-cta span{ font-size:1.15rem; } .homev4-proof{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid rgba(23,27,32,.09); padding-top:20px; gap:12px; } .homev4-proof>span{ display:grid; gap:2px; } .homev4-proof b{ color:#262d34; font-size:.77rem; } .homev4-proof small{ color:#8a929a; font-size:.61rem; } /* ---------- Current product preview ---------- */ .homev4-product-wrap{ position:relative; z-index:2; width:min(760px,100%); justify-self:end; perspective:1600px; } .homev4-product{ position:relative; z-index:3; overflow:hidden; border:1px solid rgba(25,31,38,.09); border-radius:24px; background:#fff; box-shadow: 0 50px 100px rgba(30,38,46,.18), 0 18px 38px rgba(30,38,46,.1), 0 0 0 7px rgba(255,255,255,.55); transform:rotateY(-4deg) rotateX(1.5deg); transform-origin:center left; } .homev4-product::before{ content:""; display:block; height:5px; background:linear-gradient(90deg,var(--home-red),#ff8c79 46%,#27313a 46%); } .homev4-product-head{ min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 13px; border-bottom:1px solid #e8ebee; background:#fff; } .homev4-mini-brand{ display:flex; align-items:center; gap:9px; min-width:135px; } .homev4-mini-brand img{ width:44px; height:44px; border-radius:9px; object-fit:cover; } .homev4-mini-brand span{ display:grid; } .homev4-mini-brand b{ font-size:.72rem; } .homev4-mini-brand small{ font-size:.58rem; color:#78818b; } .homev4-mini-actions{ display:flex; align-items:center; justify-content:flex-end; gap:5px; min-width:0; } .homev4-mini-actions>span{ display:flex; align-items:center; gap:3px; min-height:31px; padding:6px 7px; border:1px solid #e3e7ea; border-radius:8px; background:#f8fafb; font-size:.53rem; white-space:nowrap; } .homev4-mini-actions>span:first-child{ background:#fff7f5; border-color:#ffdcd7; } .homev4-product-body{ height:430px; display:grid; grid-template-columns:177px minmax(0,1fr); gap:8px; padding:9px; background: radial-gradient(circle at 78% 45%,rgba(239,85,71,.055),transparent 42%), #f4f5f6; } .homev4-mini-users, .homev4-mini-chat{ overflow:hidden; border:1px solid #e3e6e9; border-radius:13px; background:#fff; } .homev4-mini-users{ display:flex; flex-direction:column; min-height:0; } .homev4-mini-users-head{ display:flex; align-items:center; justify-content:space-between; gap:6px; padding:10px; border-bottom:1px solid #e8ebed; } .homev4-mini-users-head>span{ display:grid; line-height:1.05; } .homev4-mini-users-head b{ font-size:.67rem; } .homev4-mini-users-head small{ margin-top:3px; font-size:.52rem; color:#626c75; } .homev4-mini-users-head>i{ padding:5px 6px; border:1px solid #e4e7ea; border-radius:6px; font-size:.43rem; font-style:normal; font-weight:800; } .homev4-mini-user{ display:grid; grid-template-columns:32px minmax(0,1fr) 9px; gap:7px; align-items:start; padding:8px 9px; border-bottom:1px solid rgba(30,37,43,.045); } .homev4-mini-avatar{ width:32px; height:32px; display:grid; place-items:center; border-radius:9px; color:#fff; font-size:.63rem; font-weight:900; box-shadow:0 4px 10px rgba(22,30,38,.14); } .avatar-red{background:linear-gradient(145deg,#f56b5f,#c9433a)} .avatar-blue{background:linear-gradient(145deg,#4f91f6,#2459b5)} .avatar-dark{background:linear-gradient(145deg,#45525f,#1d242a)} .homev4-mini-user p{ display:grid; margin:0; line-height:1.08; } .homev4-mini-user p>b{ font-size:.57rem; } .homev4-mini-user p>b small{ display:inline-block; margin-left:2px; padding:2px 3px; border-radius:4px; background:#edf0ff; color:#6375d9; font-size:.39rem; } .homev4-mini-user p>span{ margin-top:3px; color:#7e8790; font-size:.46rem; } .homev4-mini-user p>em{ margin-top:3px; color:#15913e; font-size:.45rem; font-style:normal; font-weight:850; } .homev4-mini-user p>em.onair{ color:#e03f3b; } .homev4-mini-dot{ width:7px; height:7px; margin-top:8px; border-radius:50%; background:#23ad4d; box-shadow:0 0 0 4px #e8f8ec; } .homev4-mini-dot.onair-dot{ background:#ff5353; box-shadow:0 0 0 4px #ffe8e8; } .homev4-mini-player{ margin-top:auto; padding:8px; border-top:1px solid #e7eaed; background:#fafbfc; } .homev4-mini-player-title{ margin:0 0 6px; color:#6b7580; font-size:.44rem; font-weight:950; letter-spacing:.05em; } .homev4-mini-player-card{ display:grid; grid-template-columns:35px minmax(0,1fr) 27px; grid-template-rows:auto auto auto; gap:5px 6px; padding:7px; border-radius:9px; background:linear-gradient(145deg,#222b33,#151a1f); color:#fff; } .homev4-mini-dj-avatar{ grid-column:1; grid-row:1; width:35px; height:35px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.55); border-radius:9px; background:linear-gradient(145deg,#526d7c,#26313a); font-size:.66rem; font-weight:900; } .homev4-mini-dj-copy{ grid-column:2; grid-row:1; display:grid; align-content:center; min-width:0; } .homev4-mini-dj-copy em{ color:#65c4f6; font-size:.39rem; font-style:normal; font-weight:950; letter-spacing:.06em; } .homev4-mini-dj-copy b{ font-size:.56rem; } .homev4-mini-play{ grid-column:3; grid-row:1; width:27px; height:27px; display:grid; place-items:center; align-self:center; border-radius:50%; background:#0f82f6; font-size:.56rem; } .homev4-mini-station{ grid-column:1/4; grid-row:2; display:grid; gap:1px; padding-top:5px; border-top:1px solid rgba(255,255,255,.09); } .homev4-mini-station b{font-size:.52rem} .homev4-mini-station small{font-size:.42rem;color:#b7c0c9} .homev4-mini-volume{ grid-column:1/4; grid-row:3; height:3px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.22); } .homev4-mini-volume i{ display:block; width:68%; height:100%; border-radius:inherit; background:#fff; } .homev4-mini-chat{ display:flex; flex-direction:column; min-width:0; } .homev4-mini-room{ min-height:49px; display:flex; align-items:center; justify-content:space-between; padding:9px 12px; border-bottom:1px solid #e6e9ec; } .homev4-mini-room b{ padding:7px 10px; border-radius:8px; background:#1d2329; color:#fff; font-size:.62rem; } .homev4-mini-room span{ color:#8a9299; font-size:.47rem; } .homev4-mini-welcome{ margin:8px 9px 0; padding:8px 10px; border:1px solid #f1d89d; border-radius:8px; background:#fff5dd; color:#775826; font-size:.52rem; } .homev4-mini-message-list{ flex:1; display:grid; align-content:start; gap:8px; padding:12px; min-height:0; } .homev4-mini-message-list article{ display:grid; grid-template-columns:32px minmax(0,1fr); gap:8px; align-items:start; } .homev4-mini-message-list article>div{ min-width:0; } .homev4-mini-message-list b{ display:block; font-size:.55rem; } .homev4-mini-message-list b small{ color:#9aa1a8; font-size:.4rem; font-weight:600; } .homev4-mini-message-list p{ width:max-content; max-width:92%; margin:3px 0 0; padding:7px 8px; border:1px solid #eceef0; border-radius:8px; background:#fafbfb; color:#46515a; font-size:.49rem; } .homev4-mini-message-list mark{ padding:1px 2px; border-radius:3px; background:#ffe8e4; color:#bc4239; } .homev4-mini-composer{ padding:8px; border-top:1px solid #e8ebed; background:#fff; } .homev4-mini-tools{ display:flex; align-items:center; gap:5px; margin-bottom:6px; } .homev4-mini-tools span{ min-width:26px; height:25px; display:grid; place-items:center; padding:0 6px; border:1px solid #e4e7e9; border-radius:7px; background:#fff; font-size:.44rem; font-weight:800; } .homev4-mini-tools .gif{ background:#222a31; color:#fff; } .homev4-mini-tools span:nth-child(4){ min-width:96px; justify-content:start; color:#19863b; } .homev4-mini-input{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:35px; padding:4px 5px 4px 10px; border:1px solid #e1e5e8; border-radius:8px; color:#8a9299; font-size:.5rem; } .homev4-mini-input b{ width:28px; height:28px; display:grid; place-items:center; border-radius:7px; background:#1188f7; color:#fff; } .homev4-product-orbit{ position:absolute; z-index:1; border:1px solid rgba(239,85,71,.12); border-radius:50%; pointer-events:none; } .homev4-orbit-one{ width:720px; height:720px; right:-250px; top:-145px; } .homev4-orbit-two{ width:520px; height:520px; right:-120px; top:-35px; } .homev4-floating-note{ position:absolute; z-index:6; display:flex; align-items:center; gap:8px; padding:9px 11px; border:1px solid rgba(22,30,38,.07); border-radius:12px; background:rgba(255,255,255,.94); backdrop-filter:blur(12px); box-shadow:0 14px 34px rgba(28,35,42,.14); } .homev4-floating-note>span{ width:28px; height:28px; display:grid; place-items:center; border-radius:8px; background:#fff1ef; color:var(--home-red); font-weight:900; } .homev4-floating-note>div{ display:grid; } .homev4-floating-note b{font-size:.62rem} .homev4-floating-note small{font-size:.48rem} .homev4-note-one{left:-30px;bottom:-23px} .homev4-note-two{right:-22px;top:80px} /* ---------- Value strip ---------- */ .homev4-value-strip{ max-width:1320px; margin:-20px auto 0; position:relative; z-index:7; display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; border:1px solid #e8eaed; border-radius:20px; background:#fff; box-shadow:0 20px 55px rgba(25,32,39,.08); } .homev4-value-strip>div{ display:grid; grid-template-columns:34px minmax(0,1fr); gap:2px 9px; padding:20px 19px; border-right:1px solid #eceef0; } .homev4-value-strip>div:last-child{border-right:0} .homev4-value-strip span{ grid-row:1/3; align-self:start; color:var(--home-red); font-size:.67rem; font-weight:950; letter-spacing:.05em; } .homev4-value-strip b{font-size:.76rem} .homev4-value-strip small{font-size:.59rem;line-height:1.4} /* ---------- Sections ---------- */ .homev4-section{ max-width:1240px; margin:0 auto; padding:98px 28px; } .homev4-section-head{ max-width:850px; margin-bottom:38px; } .homev4-section-head h2, .homev4-brand-copy h2, .homev4-support-copy h2, .homev4-before-form h2{ margin:8px 0 14px; font-size:clamp(2.45rem,4.8vw,4.7rem); line-height:.96; letter-spacing:-.06em; } .homev4-section-head h2 em, .homev4-head-row h2 em{ color:var(--home-red); font-style:normal; } .homev4-section-head>p{ max-width:740px; margin:0; color:var(--home-muted); font-size:1.02rem; line-height:1.7; } /* ---------- Bento feature scan ---------- */ .homev4-bento{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px; } .homev4-bento-card{ grid-column:span 4; position:relative; overflow:hidden; min-height:390px; padding:27px; border:1px solid #e5e8eb; border-radius:20px; background:#fff; box-shadow:0 8px 30px rgba(25,32,39,.035); } .homev4-bento-large{ grid-column:span 7; min-height:440px; background:linear-gradient(150deg,#fff 0%,#fff7f5 100%); } .homev4-bento-large + .homev4-bento-card{ grid-column:span 5; min-height:440px; } .homev4-bento-wide{ grid-column:span 8; min-height:315px; background:linear-gradient(135deg,#171c21 0%,#252c33 100%); border-color:#2b3239; color:#fff; } .homev4-bento-wide p{color:#b6bec6!important} .homev4-card-no{ position:absolute; right:22px; top:20px; color:#c9ced3; font-size:.66rem; font-weight:900; letter-spacing:.1em; } .homev4-card-icon{ width:46px; height:46px; display:grid; place-items:center; border-radius:13px; background:#fff0ee; color:var(--home-red); font-size:1.12rem; font-weight:900; } .homev4-bento-wide .homev4-card-icon{ background:rgba(255,255,255,.08); color:#fff; } .homev4-bento-card h3{ margin:18px 0 8px; font-size:1.34rem; letter-spacing:-.03em; } .homev4-bento-card>p{ max-width:630px; margin:0 0 16px; color:#6b7580; font-size:.84rem; line-height:1.55; } .homev4-bento-card ul{ display:grid; gap:8px; margin:0; padding:0; list-style:none; } .homev4-bento-card li{ position:relative; padding-left:18px; color:#46515b; font-size:.75rem; line-height:1.45; } .homev4-bento-card li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--home-red); font-weight:950; } .homev4-card-visual{ position:absolute; right:25px; bottom:22px; width:180px; height:105px; } .community-visual span{ position:absolute; width:54px; height:54px; display:grid; place-items:center; border:4px solid #fff; border-radius:16px; color:#fff; font-weight:950; box-shadow:0 10px 24px rgba(25,32,39,.16); } .community-visual .profile-a{left:10px;top:23px;background:#f25c50} .community-visual .profile-b{left:55px;top:5px;background:#4d78d4} .community-visual .profile-c{left:100px;top:29px;background:#2d343a} .community-visual i{ position:absolute; left:24px; right:8px; bottom:3px; height:38px; border-radius:50%; background:rgba(239,85,71,.11); filter:blur(13px); } .homev4-chip-cloud{ display:flex; flex-wrap:wrap; gap:8px; margin-top:19px; } .homev4-chip-cloud span{ padding:8px 10px; border:1px solid rgba(255,255,255,.12); border-radius:9px; background:rgba(255,255,255,.06); color:#eef1f3; font-size:.65rem; font-weight:700; } .homev4-a11y-card{ background:linear-gradient(145deg,#f6fbff,#fff); } .homev4-a11y-options{ display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; } .homev4-a11y-options span{ padding:7px 9px; border:1px solid #dce6ee; border-radius:8px; background:#fff; color:#4d5c68; font-size:.62rem; font-weight:700; } /* ---------- Dark proof section ---------- */ .homev4-dark-section{ padding:88px 28px; background:#171c21; color:#fff; } .homev4-dark-inner{ max-width:1240px; margin:auto; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:64px; align-items:center; } .homev4-dark-copy h2{ margin:9px 0 16px; font-size:clamp(2.5rem,4.7vw,4.6rem); line-height:.95; letter-spacing:-.06em; } .homev4-dark-copy>p{ max-width:600px; margin:0; color:#b7c0c8; line-height:1.72; } .homev4-dark-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:21px; } .homev4-dark-tags span{ padding:7px 9px; border:1px solid #343b42; border-radius:8px; color:#dfe4e8; font-size:.63rem; } .homev4-dark-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .homev4-dark-grid article{ min-height:190px; padding:22px; border:1px solid #30373e; border-radius:16px; background:#20262c; } .homev4-dark-grid article>span{ display:block; margin-bottom:25px; font-size:1.25rem; } .homev4-dark-grid b{ display:block; margin-bottom:6px; font-size:.86rem; } .homev4-dark-grid p{ margin:0; color:#aeb7bf; font-size:.72rem; line-height:1.55; } /* ---------- Flow ---------- */ .homev4-head-row{ max-width:none; display:grid; grid-template-columns:1fr .62fr; align-items:end; gap:50px; } .homev4-head-row>p{ padding-bottom:7px; } .homev4-flow-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .homev4-flow-grid article{ min-height:180px; display:grid; grid-template-columns:56px minmax(0,1fr); gap:16px; padding:23px; border:1px solid #e5e8eb; border-radius:17px; background:#fff; } .homev4-flow-grid article>span{ color:var(--home-red); font-size:1.3rem; font-weight:950; letter-spacing:-.03em; } .homev4-flow-grid b{ display:block; margin-bottom:8px; font-size:.9rem; } .homev4-flow-grid p{ margin:0; color:#717b85; font-size:.72rem; line-height:1.55; } /* ---------- Brand showcase ---------- */ .homev4-brand-panel{ max-width:1240px; margin:0 auto 40px; display:grid; grid-template-columns:1.12fr .88fr; overflow:hidden; border:1px solid #e6e9eb; border-radius:24px; background:#f5f6f7; } .homev4-brand-image{ min-height:470px; } .homev4-brand-image img{ width:100%; height:100%; min-height:470px; object-fit:cover; } .homev4-brand-copy{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:46px; } .homev4-brand-copy h2{ font-size:clamp(2.35rem,4vw,4rem); } .homev4-brand-copy>p{ color:#69737d; line-height:1.65; } .homev4-brand-points{ display:grid; gap:8px; margin:16px 0 24px; color:#3f4952; font-size:.76rem; font-weight:750; } .homev4-brand-points span::first-letter{ color:var(--home-red); } /* ---------- Support ---------- */ .homev4-support{ padding-top:72px; padding-bottom:82px; } .homev4-support-card{ position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr); gap:48px; align-items:center; padding:44px; border-radius:24px; background:linear-gradient(145deg,#181d22,#232a31); color:#fff; } .homev4-support-card::after{ content:""; position:absolute; right:-100px; bottom:-180px; width:420px; height:420px; border-radius:50%; background:rgba(239,85,71,.13); filter:blur(16px); } .homev4-support-copy{ position:relative; z-index:2; } .homev4-support-copy h2{ font-size:clamp(2.3rem,4vw,4.1rem); } .homev4-support-copy>p{ max-width:690px; color:#b8c0c8; line-height:1.65; } .homev4-support-points{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:18px 0 25px; color:#d7dde2; font-size:.69rem; } .homev4-support-card .btn-ghost{ background:transparent; border-color:#3c454e; color:#fff; } .homev4-support-ticket{ position:relative; z-index:2; min-height:260px; padding:23px; border:1px solid rgba(255,255,255,.14); border-radius:18px; background:#fff; color:#20262c; box-shadow:0 25px 60px rgba(0,0,0,.22); transform:rotate(1.5deg); } .ticket-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:30px; color:#8a929a; font-size:.62rem; font-weight:800; } .ticket-top i{ padding:5px 7px; border-radius:999px; background:#eaf8ef; color:#16843d; font-style:normal; } .homev4-support-ticket>strong{ display:block; margin-bottom:7px; font-size:1rem; } .homev4-support-ticket>p{ margin:0; color:#6c7680; font-size:.74rem; } .ticket-reply{ display:grid; grid-template-columns:32px minmax(0,1fr); gap:9px; align-items:center; margin-top:30px; padding:12px; border-radius:11px; background:#f5f7f8; } .ticket-reply>span{ width:32px; height:32px; display:grid; place-items:center; border-radius:9px; background:#fff; } .ticket-reply div{display:grid} .ticket-reply b{font-size:.66rem} .ticket-reply small{font-size:.57rem} /* ---------- Registration bridge ---------- */ .homev4-before-form{ padding-top:45px; padding-bottom:35px; display:grid; grid-template-columns:1fr .72fr; gap:48px; align-items:end; border-top:1px solid #eceef0; } .homev4-before-form h2{ margin-bottom:0; font-size:clamp(2.45rem,4.5vw,4.25rem); } .homev4-before-form>p{ margin:0 0 6px; color:#69737d; line-height:1.68; } body.home-modern-v4 .create-section{ max-width:1240px; gap:64px; padding-top:42px; padding-bottom:90px; } body.home-modern-v4 .create-copy{ top:108px; } body.home-modern-v4 .create-copy h2{ font-size:clamp(2.45rem,4.2vw,4.1rem); line-height:.98; letter-spacing:-.055em; } body.home-modern-v4 .create-copy>p{ max-width:500px; color:#68727c; line-height:1.65; } body.home-modern-v4 .create-copy img{ max-height:280px; width:100%; object-fit:cover; border:1px solid #e7eaed; border-radius:19px; box-shadow:0 20px 50px rgba(25,32,39,.1); } body.home-modern-v4 .registration-card{ padding:31px; border-radius:20px; box-shadow:0 24px 60px rgba(27,34,41,.095); } body.home-modern-v4 .registration-card input, body.home-modern-v4 .registration-card select, body.home-modern-v4 .registration-card textarea{ min-height:47px; border-radius:10px; border-color:#dfe4e8; background:#fbfcfc; } body.home-modern-v4 .registration-card input:focus, body.home-modern-v4 .registration-card select:focus, body.home-modern-v4 .registration-card textarea:focus{ background:#fff; } body.home-modern-v4 .operator-confirm, body.home-modern-v4 .registration-card>.check, body.home-modern-v4 .registration-card form>.check{ padding:12px; border:1px solid #e2e6e9; border-radius:11px; background:#f8f9fa; } body.home-modern-v4 .privacy-note{ border-radius:11px; } .homev4-resend{ max-width:1240px!important; padding-top:10px!important; padding-bottom:80px!important; } body.home-modern-v4 .resend-card{ border-radius:18px; border:1px solid #e4e8eb; box-shadow:0 14px 38px rgba(24,31,38,.05); } body.home-modern-v4 .platform-legal-strip{ border-top:1px solid #e8ebed; background:#fafbfb; } body.home-modern-v4 .site-footer{ background:#fff; } /* ---------- Responsive ---------- */ @media(max-width:1220px){ .homev4-hero{ grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr); gap:38px; } .homev4-product{ transform:none; } .homev4-note-one{left:10px} .homev4-note-two{right:10px} } @media(max-width:1080px){ body.home-modern-v4 .homev4-topbar nav>a:nth-child(3), body.home-modern-v4 .homev4-topbar nav>a:nth-child(4){ display:none; } .homev4-hero{ min-height:auto; grid-template-columns:1fr; gap:48px; padding-top:60px; } .homev4-hero-copy{ max-width:800px; } .homev4-product-wrap{ justify-self:stretch; width:100%; max-width:840px; } .homev4-value-strip{ margin:24px 28px 0; grid-template-columns:1fr 1fr; } .homev4-value-strip>div:nth-child(2){border-right:0} .homev4-value-strip>div:nth-child(-n+2){border-bottom:1px solid #eceef0} .homev4-bento-card, .homev4-bento-large, .homev4-bento-large + .homev4-bento-card, .homev4-bento-wide{ grid-column:span 6; } .homev4-dark-inner{ grid-template-columns:1fr; } .homev4-brand-panel{ margin-left:28px; margin-right:28px; } } @media(max-width:820px){ body.home-modern-v4 .homev4-topbar nav>a:not(.btn){ display:none; } .homev4-hero{ padding-left:20px; padding-right:20px; } .homev4-hero h1{ font-size:clamp(3.25rem,11vw,5.4rem); } .homev4-product-head{ flex-direction:column; align-items:flex-start; } .homev4-mini-actions{ width:100%; justify-content:flex-start; overflow:hidden; } .homev4-mini-actions>span:nth-last-child(-n+2){display:none} .homev4-product-body{ height:420px; grid-template-columns:155px minmax(0,1fr); } .homev4-floating-note{display:none} .homev4-section, .homev4-flow, .homev4-support{ padding-left:20px; padding-right:20px; } .homev4-bento-card, .homev4-bento-large, .homev4-bento-large + .homev4-bento-card, .homev4-bento-wide{ grid-column:1/-1; min-height:auto; } .homev4-card-visual{ opacity:.35; } .homev4-head-row, .homev4-before-form{ grid-template-columns:1fr; gap:18px; } .homev4-flow-grid{ grid-template-columns:1fr; } .homev4-brand-panel{ grid-template-columns:1fr; margin-left:20px; margin-right:20px; } .homev4-brand-image, .homev4-brand-image img{ min-height:280px; max-height:320px; } .homev4-brand-copy{ padding:30px; } .homev4-support-card{ grid-template-columns:1fr; gap:26px; padding:30px; } body.home-modern-v4 .create-section{ padding-left:20px; padding-right:20px; } } @media(max-width:620px){ body.home-modern-v4 .homev4-topbar{ height:68px; padding-left:15px; padding-right:15px; } body.home-modern-v4 .homev4-brand img{ width:100px; } body.home-modern-v4 .homev4-topbar .btn{ min-height:40px; padding:.65rem .85rem; font-size:.72rem; } .homev4-hero{ padding-top:44px; padding-bottom:52px; } .homev4-kicker{ max-width:100%; white-space:normal; line-height:1.35; } .homev4-hero h1{ margin-top:19px; font-size:clamp(3rem,15vw,4.35rem); } .homev4-lead{ font-size:.98rem; } .homev4-hero-actions{ display:grid; grid-template-columns:1fr; } .homev4-hero-actions .btn{ width:100%; } .homev4-proof{ grid-template-columns:1fr 1fr; gap:15px; } .homev4-product-wrap{ margin-top:4px; } .homev4-product{ border-radius:17px; box-shadow:0 25px 55px rgba(30,38,46,.15); } .homev4-product-body{ height:360px; grid-template-columns:112px minmax(0,1fr); gap:5px; padding:5px; } .homev4-mini-brand img{width:36px;height:36px} .homev4-mini-actions>span{font-size:0;width:30px;padding:4px} .homev4-mini-actions>span::first-letter{font-size:.6rem} .homev4-mini-actions>span:first-child{font-size:.45rem;width:auto} .homev4-mini-users-head{padding:7px} .homev4-mini-users-head>i{display:none} .homev4-mini-user{ grid-template-columns:26px minmax(0,1fr); padding:7px; gap:5px; } .homev4-mini-user>.homev4-mini-dot{display:none} .homev4-mini-avatar{width:26px;height:26px;border-radius:7px} .homev4-mini-user p>b{font-size:.49rem} .homev4-mini-user p>span, .homev4-mini-user p>em{font-size:.39rem} .homev4-mini-player{padding:5px} .homev4-mini-player-title{display:none} .homev4-mini-player-card{ grid-template-columns:27px minmax(0,1fr) 22px; gap:3px 4px; padding:5px; } .homev4-mini-dj-avatar{width:27px;height:27px;border-radius:7px} .homev4-mini-play{width:22px;height:22px} .homev4-mini-room{min-height:41px;padding:6px} .homev4-mini-room b{font-size:.52rem;padding:6px} .homev4-mini-room span{display:none} .homev4-mini-welcome{font-size:.42rem;margin:5px 5px 0;padding:6px} .homev4-mini-message-list{padding:7px;gap:6px} .homev4-mini-message-list article{grid-template-columns:26px minmax(0,1fr);gap:5px} .homev4-mini-message-list p{font-size:.4rem;padding:5px} .homev4-mini-tools span{min-width:21px;height:21px;padding:0 4px} .homev4-mini-tools span:nth-child(4){min-width:60px} .homev4-mini-input{min-height:29px;font-size:.42rem} .homev4-value-strip{ margin:16px 14px 0; grid-template-columns:1fr; border-radius:15px; } .homev4-value-strip>div{ border-right:0; border-bottom:1px solid #eceef0; } .homev4-value-strip>div:last-child{border-bottom:0} .homev4-section{ padding-top:68px; padding-bottom:68px; } .homev4-section-head h2, .homev4-dark-copy h2, .homev4-brand-copy h2, .homev4-support-copy h2, .homev4-before-form h2{ font-size:clamp(2.35rem,12vw,3.6rem); } .homev4-bento-card{ padding:22px; border-radius:16px; } .homev4-card-visual{display:none} .homev4-dark-section{padding:65px 20px} .homev4-dark-grid{grid-template-columns:1fr} .homev4-dark-grid article{min-height:155px} .homev4-brand-panel{border-radius:17px} .homev4-brand-copy{padding:25px 20px} .homev4-support-card{padding:25px 20px;border-radius:18px} .homev4-support-points{grid-template-columns:1fr} .homev4-support-copy .button-row{ display:grid; grid-template-columns:1fr; } .homev4-support-copy .btn{width:100%} .homev4-support-ticket{transform:none;min-height:230px} body.home-modern-v4 .registration-card{padding:20px} } @media(prefers-reduced-motion:reduce){ body.home-modern-v4 *, body.home-modern-v4 *::before, body.home-modern-v4 *::after{ scroll-behavior:auto!important; transition-duration:.001ms!important; animation-duration:.001ms!important; animation-iteration-count:1!important; } } /* ============================================================ END ET-HOST HOME MODERN 4.0.1 ============================================================ */ /* ============================================================ ET-HOST HOME SUPPORT BUTTON FIX 4.0.2 Sekundärer Button im dunklen Supportbereich ============================================================ */ body.home-modern-v4 .homev4-support-card .button-row .btn.btn-ghost{ background: rgba(255,255,255,.06)!important; color: #ffffff!important; border: 1px solid rgba(255,255,255,.30)!important; box-shadow: none!important; text-decoration: none!important; } body.home-modern-v4 .homev4-support-card .button-row .btn.btn-ghost:hover{ background: #ffffff!important; color: #171c21!important; border-color: #ffffff!important; transform: translateY(-1px); } body.home-modern-v4 .homev4-support-card .button-row .btn.btn-ghost:focus-visible{ outline: 3px solid #ffffff!important; outline-offset: 3px!important; } /* ============================================================ END ET-HOST HOME SUPPORT BUTTON FIX 4.0.2 ============================================================ */ /* ============================================================ ET-HOST SEO ADMIN 1.1 ============================================================ */ .seo-admin-card{display:grid;gap:18px} .seo-admin-notice{display:grid;gap:5px;padding:15px 16px;border:1px solid rgba(239,85,71,.22);border-radius:14px;background:rgba(239,85,71,.055)} .seo-admin-notice strong{font-size:.84rem} .seo-admin-notice span{color:#68737d;font-size:.71rem;line-height:1.45} .seo-admin-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .seo-admin-fields .full,.seo-index-check{grid-column:1/-1} .seo-index-check{padding:13px 14px;border:1px solid #e1e6ea;border-radius:12px;background:#fafbfc} .seo-index-check span{display:grid;gap:3px}.seo-index-check small{color:#78838d} .seo-upload-card{display:grid;align-content:start;gap:11px;padding:14px;border:1px solid #e1e6ea;border-radius:14px;background:#fbfcfd} .seo-current-image{display:flex;align-items:center;gap:11px}.seo-current-image img{width:56px;height:56px;flex:0 0 56px;object-fit:cover;border-radius:13px;border:1px solid #dce2e7;background:#fff} .seo-current-image span{display:grid;gap:2px}.seo-current-image small{color:#79838d;font-size:.64rem} .seo-social-preview img{display:block;width:100%;max-width:380px;aspect-ratio:1200/630;object-fit:cover;border-radius:12px;border:1px solid #dce2e7} .seo-google-preview{display:grid;gap:4px;max-width:680px;padding:17px;border:1px solid #e2e6ea;border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(30,40,50,.05)} .seo-google-preview>span{color:#78838d;font-size:.62rem;font-weight:850;text-transform:uppercase;letter-spacing:.05em} .seo-google-preview strong{color:#1a0dab;font-size:1rem;font-weight:650}.seo-google-preview small{color:#188038;font-size:.67rem}.seo-google-preview p{margin:3px 0 0;color:#4d5156;font-size:.72rem;line-height:1.45} @media(max-width:760px){.seo-admin-fields{grid-template-columns:1fr}.seo-admin-fields .full,.seo-index-check{grid-column:1}} /* END ET-HOST SEO ADMIN 1.1 */ /* ============================================================ ET-HOST ADMIN LAYOUT 2.0 Saubere Container / Responsive / kein Überlaufen ============================================================ */ /* ------------------------------------------------------------ 1. GRUNDSCHUTZ ------------------------------------------------------------ */ body.admin-page, body.admin-help-page{ overflow-x:hidden; } body.admin-page *, body.admin-help-page *{ box-sizing:border-box; } .admin-shell, .admin-main, .admin-main > *, .admin-section, .admin-section > *, .admin-grid, .admin-grid > *, .admin-card, .admin-card > *, .admin-top, .section-title, .card-title{ min-width:0; max-width:100%; } /* Lange Texte, Links oder IDs dürfen keine Karte sprengen */ .admin-main p, .admin-main small, .admin-main span, .admin-main strong, .admin-main label, .admin-main a, .admin-main td, .admin-main th{ overflow-wrap:anywhere; word-break:normal; } /* ------------------------------------------------------------ 2. ADMIN HAUPTBEREICH ------------------------------------------------------------ */ .admin-main{ width:100%; min-width:0; padding: clamp(18px,2.5vw,34px); overflow-x:hidden; } .admin-section{ width:100%; margin: 0 0 clamp(26px,4vw,44px); scroll-margin-top:24px; } /* Abschnitte klarer voneinander trennen */ .admin-section + .admin-section{ padding-top: clamp(10px,1.5vw,18px); } /* ------------------------------------------------------------ 3. ÜBERSCHRIFTEN ------------------------------------------------------------ */ .admin-main .section-title{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:14px 24px; width:100%; margin-bottom:18px; } .admin-main .section-title > div{ min-width:0; max-width:760px; } .admin-main .section-title h1, .admin-main .section-title h2, .admin-main .section-title h3{ margin-top:4px; margin-bottom:5px; line-height:1.12; } .admin-main .section-title p{ margin: 4px 0 0; max-width:760px; line-height:1.55; } /* ------------------------------------------------------------ 4. ADMIN GRID ------------------------------------------------------------ */ .admin-grid{ display:grid; grid-template-columns: repeat( 2, minmax(0,1fr) ); align-items:start; gap: clamp(14px,2vw,22px); width:100%; } .admin-grid > .wide, .admin-card.wide{ grid-column: 1 / -1; } /* ------------------------------------------------------------ 5. CARDS ------------------------------------------------------------ */ .admin-card{ width:100%; min-width:0; padding: clamp(16px,2vw,22px); border-radius:16px; overflow:visible; } .admin-card + .admin-card{ min-width:0; } .admin-card .card-title{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 16px; width:100%; margin-bottom:16px; } .admin-card .card-title h2, .admin-card .card-title h3{ margin:0; min-width:0; } /* ------------------------------------------------------------ 6. FORMULARE ------------------------------------------------------------ */ .admin-card form, .admin-section form{ min-width:0; max-width:100%; } .admin-card label, .admin-section label{ min-width:0; max-width:100%; } .admin-card input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .admin-card select, .admin-card textarea, .admin-section input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .admin-section select, .admin-section textarea{ display:block; width:100%; min-width:0; max-width:100%; } .admin-card textarea, .admin-section textarea{ resize:vertical; } /* Lange Dateinamen bleiben im Container */ .admin-card input[type="file"], .admin-section input[type="file"]{ width:100%; max-width:100%; overflow:hidden; font-size:.78rem; } /* ------------------------------------------------------------ 7. BUTTONS ------------------------------------------------------------ */ .admin-main .button-row, .admin-main .admin-top-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; } .admin-main button, .admin-main .btn{ max-width:100%; white-space:normal; text-align:center; } /* ------------------------------------------------------------ 8. SCHALTER / EINSTELLUNGSZEILEN ------------------------------------------------------------ */ .admin-main .switch-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; min-width:0; } .admin-main .switch-row > span{ min-width:0; flex: 1 1 auto; } .admin-main .switch-row .switch{ flex: 0 0 auto; } /* ------------------------------------------------------------ 9. BESTEHENDE KOMPLEXE FORMULARZEILEN ------------------------------------------------------------ */ .admin-card .chat-link-row, .admin-card .profile-field-admin-row, .admin-card .welcome-row, .admin-card .inline-edit, .admin-card .tr-form, .admin-card .role-row{ min-width:0; max-width:100%; } .admin-card .chat-link-row > *, .admin-card .profile-field-admin-row > *, .admin-card .welcome-row > *, .admin-card .inline-edit > *, .admin-card .tr-form > *, .admin-card .role-row > *{ min-width:0; } /* ------------------------------------------------------------ 10. TABELLEN Tabellen bleiben innerhalb ihrer Card. Falls wirklich zu breit: horizontal nur IN der Tabelle scrollen. ------------------------------------------------------------ */ .admin-card .table{ display:block; width:100%; max-width:100%; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; border-radius:12px; } .admin-card .table > .tr{ min-width: min( 680px, 100% ); } /* ------------------------------------------------------------ 11. RÄUME / SPEICHER / LISTEN ------------------------------------------------------------ */ .admin-main .room-admin-grid{ display:grid; grid-template-columns: repeat( auto-fit, minmax( min(240px,100%), 1fr ) ); gap:12px; } .admin-main .room-admin-grid > *, .admin-main .storage-legend > *, .admin-main .report{ min-width:0; max-width:100%; } .admin-main .storage-legend{ display:flex; flex-wrap:wrap; gap:8px 12px; } /* ------------------------------------------------------------ 12. SEO ADMIN ------------------------------------------------------------ */ .admin-main .seo-admin-card, .admin-main .seo-admin-fields, .admin-main .seo-upload-card, .admin-main .seo-google-preview{ min-width:0; max-width:100%; } .admin-main .seo-admin-fields{ width:100%; } /* ------------------------------------------------------------ 13. DESIGN / BILDER ------------------------------------------------------------ */ .admin-card img, .admin-section img{ max-width:100%; height:auto; } .admin-card pre, .admin-card code{ max-width:100%; overflow-x:auto; white-space:pre-wrap; overflow-wrap:anywhere; } /* ------------------------------------------------------------ 14. SIDEBAR Inhalt bleibt vollständig innerhalb der Navigation. ------------------------------------------------------------ */ .admin-side{ min-width:0; max-width:100%; } .admin-side nav{ min-width:0; } .admin-side nav a{ display:flex; align-items:center; min-width:0; max-width:100%; overflow-wrap:anywhere; } /* ------------------------------------------------------------ 15. TABLET ------------------------------------------------------------ */ @media(max-width:1100px){ .admin-grid{ grid-template-columns: minmax(0,1fr); } .admin-grid > .wide, .admin-card.wide{ grid-column:1; } .admin-main{ padding: 22px 18px; } } /* ------------------------------------------------------------ 16. SMARTPHONE ------------------------------------------------------------ */ @media(max-width:760px){ .admin-main{ padding: 16px 10px 28px; } .admin-section{ margin-bottom:30px; } .admin-main .section-title{ align-items:flex-start; margin-bottom:13px; } .admin-main .section-title h2{ font-size: clamp( 1.45rem, 7vw, 2rem ); } .admin-card{ padding: 14px 12px; border-radius:14px; } .admin-grid{ gap:12px; } .admin-main .switch-row{ gap:10px; } .admin-main .card-title{ align-items:flex-start; } .admin-main .button-row{ align-items:stretch; } .admin-main .button-row > .btn, .admin-main .button-row > button{ flex: 1 1 160px; } /* * Lange Bearbeitungszeilen werden auf Mobile * bewusst untereinander dargestellt. */ .admin-card .welcome-row, .admin-card .chat-link-row, .admin-card .profile-field-admin-row, .admin-card .inline-edit{ grid-template-columns: minmax(0,1fr)!important; gap:8px!important; } .admin-card .tr-form{ min-width:560px; } .admin-main .seo-admin-fields{ grid-template-columns: minmax(0,1fr); } .admin-main .seo-admin-fields .full, .admin-main .seo-index-check{ grid-column:1; } .admin-main .room-admin-grid{ grid-template-columns: minmax(0,1fr); } } /* ------------------------------------------------------------ 17. SEHR KLEINE GERÄTE ------------------------------------------------------------ */ @media(max-width:430px){ .admin-main{ padding-left:8px; padding-right:8px; } .admin-card{ padding: 13px 10px; } .admin-main .section-title p{ font-size:.86rem; } .admin-main .btn, .admin-main button{ min-height:42px; } } /* ============================================================ END ET-HOST ADMIN LAYOUT 2.0 ============================================================ */ /* ============================================================ ET-HOST ADMIN CONTAINER FIX 1.0 Inhalte sauber in Container setzen ============================================================ */ body.admin-page .admin-main, body.admin-page .admin-content, body.admin-page .admin-shell, body.admin-page .admin-layout, body.admin-page .settings-content, body.admin-page .admin-section, body.admin-page .admin-card, body.admin-page .card, body.admin-page .panel, body.admin-page .box, body.admin-page .widget{ min-width:0; } body.admin-page .admin-main *, body.admin-page .admin-content *, body.admin-page .admin-shell *, body.admin-page .admin-layout *{ box-sizing:border-box; } body.admin-page .admin-main img, body.admin-page .admin-content img, body.admin-page .admin-main svg, body.admin-page .admin-content svg, body.admin-page .admin-main canvas, body.admin-page .admin-content canvas{ max-width:100%; height:auto; } body.admin-page .admin-main input, body.admin-page .admin-content input, body.admin-page .admin-main select, body.admin-page .admin-content select, body.admin-page .admin-main textarea, body.admin-page .admin-content textarea, body.admin-page .admin-main button, body.admin-page .admin-content button{ max-width:100%; } body.admin-page .admin-main textarea, body.admin-page .admin-content textarea{ width:100%; min-height:110px; resize:vertical; } body.admin-page .admin-section, body.admin-page .admin-card, body.admin-page .card, body.admin-page .panel, body.admin-page .box, body.admin-page .admin-box, body.admin-page .settings-box, body.admin-page .widget, body.admin-page .smiley-box, body.admin-page .smilie-box, body.admin-page .smiley-form, body.admin-page .smilie-form, body.admin-page .smiley-categories, body.admin-page .smilie-categories{ background:#ffffff; border:1px solid rgba(15,23,42,.08); border-radius:24px; padding:24px; box-shadow:0 12px 30px rgba(15,23,42,.06); overflow:hidden; } body.admin-page .admin-card h2, body.admin-page .card h2, body.admin-page .panel h2, body.admin-page .box h2, body.admin-page .admin-card h3, body.admin-page .card h3, body.admin-page .panel h3, body.admin-page .box h3{ margin-top:0; } body.admin-page .admin-grid, body.admin-page .settings-grid, body.admin-page .form-grid, body.admin-page .content-grid, body.admin-page .two-col, body.admin-page .split-layout, body.admin-page .smiley-layout, body.admin-page .smilie-layout, body.admin-page .smiley-admin-layout, body.admin-page .smilie-admin-layout{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:24px; align-items:start; } body.admin-page .field-row, body.admin-page .form-row, body.admin-page .input-row, body.admin-page .control-row, body.admin-page .inline-fields, body.admin-page .admin-inline, body.admin-page .action-row, body.admin-page .button-row, body.admin-page .btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; } body.admin-page .field, body.admin-page .form-field, body.admin-page .input-group, body.admin-page .control-group, body.admin-page .form-control-wrap, body.admin-page .admin-field{ flex:1 1 220px; min-width:0; } body.admin-page label{ display:block; margin-bottom:8px; font-weight:700; color:#0f172a; } body.admin-page input[type="text"], body.admin-page input[type="email"], body.admin-page input[type="url"], body.admin-page input[type="number"], body.admin-page input[type="search"], body.admin-page input[type="date"], body.admin-page input[type="password"], body.admin-page select, body.admin-page textarea{ width:100%; min-width:0; border:1px solid #d7deea; border-radius:16px; padding:14px 16px; background:#ffffff; color:#0f172a; box-shadow:none; } body.admin-page input[type="checkbox"], body.admin-page input[type="radio"]{ width:auto; max-width:none; } body.admin-page .actions, body.admin-page .button-row, body.admin-page .btn-row, body.admin-page .action-row{ display:flex; flex-wrap:wrap; gap:12px; } body.admin-page .actions .btn, body.admin-page .button-row .btn, body.admin-page .btn-row .btn, body.admin-page .action-row .btn, body.admin-page .actions button, body.admin-page .button-row button, body.admin-page .btn-row button, body.admin-page .action-row button{ width:auto; max-width:100%; } body.admin-page .smiley-category, body.admin-page .smilie-category, body.admin-page .category-item, body.admin-page .category-row, body.admin-page .smiley-group, body.admin-page .smilie-group{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(110px,.75fr) minmax(150px,.95fr) auto auto; gap:14px; align-items:end; padding:18px; margin:0 0 16px 0; border:1px solid rgba(15,23,42,.08); border-radius:20px; background:#f8fafc; } body.admin-page .smiley-category:last-child, body.admin-page .smilie-category:last-child, body.admin-page .category-item:last-child, body.admin-page .category-row:last-child, body.admin-page .smiley-group:last-child, body.admin-page .smilie-group:last-child{ margin-bottom:0; } body.admin-page .smiley-count, body.admin-page .smilie-count, body.admin-page .category-count, body.admin-page .count, body.admin-page .meta-count{ display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border-radius:999px; background:rgba(239,91,76,.08); color:#ef5b4c; font-weight:800; white-space:nowrap; } body.admin-page .badge, body.admin-page .pill, body.admin-page .meta{ max-width:100%; overflow-wrap:anywhere; } body.admin-page .upload-row, body.admin-page .file-row, body.admin-page .media-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; } body.admin-page .upload-row input[type="file"], body.admin-page .file-row input[type="file"], body.admin-page .media-row input[type="file"]{ flex:1 1 260px; min-width:0; } body.admin-page .help, body.admin-page .hint, body.admin-page .note, body.admin-page small{ display:block; margin-top:8px; color:#64748b; line-height:1.55; } body.admin-page hr{ border:none; border-top:1px solid rgba(15,23,42,.08); margin:18px 0; } body.admin-page .admin-main > * + *, body.admin-page .admin-content > * + *{ margin-top:20px; } body.admin-page .table-wrap, body.admin-page .admin-table-wrap{ overflow:auto; max-width:100%; border-radius:18px; } body.admin-page table{ width:100%; max-width:100%; } @media (max-width: 1180px){ body.admin-page .admin-grid, body.admin-page .settings-grid, body.admin-page .form-grid, body.admin-page .content-grid, body.admin-page .two-col, body.admin-page .split-layout, body.admin-page .smiley-layout, body.admin-page .smilie-layout, body.admin-page .smiley-admin-layout, body.admin-page .smilie-admin-layout{ grid-template-columns:minmax(0,1fr); } } @media (max-width: 860px){ body.admin-page .smiley-category, body.admin-page .smilie-category, body.admin-page .category-item, body.admin-page .category-row, body.admin-page .smiley-group, body.admin-page .smilie-group{ grid-template-columns:minmax(0,1fr); align-items:stretch; } body.admin-page .admin-section, body.admin-page .admin-card, body.admin-page .card, body.admin-page .panel, body.admin-page .box, body.admin-page .admin-box, body.admin-page .settings-box, body.admin-page .widget, body.admin-page .smiley-box, body.admin-page .smilie-box, body.admin-page .smiley-form, body.admin-page .smilie-form, body.admin-page .smiley-categories, body.admin-page .smilie-categories{ padding:18px; border-radius:20px; } } @media (max-width: 640px){ body.admin-page input[type="text"], body.admin-page input[type="email"], body.admin-page input[type="url"], body.admin-page input[type="number"], body.admin-page input[type="search"], body.admin-page input[type="date"], body.admin-page input[type="password"], body.admin-page select, body.admin-page textarea{ padding:12px 14px; border-radius:14px; } } /* ============================================================ END ET-HOST ADMIN CONTAINER FIX 1.0 ============================================================ */ /* ============================================================ ET-HOST ADMIN COMPACT DESIGN 1.0 ============================================================ */ /* ------------------------------------------------------------ HAUPTTEXT ------------------------------------------------------------ */ body.admin-page .admin-main{ font-size:70%; } /* * Sidebar ebenfalls kompakter, * aber getrennt vom Copyright. */ body.admin-page .admin-sidebar{ font-size:72%; } /* ------------------------------------------------------------ ÜBERSCHRIFTEN ------------------------------------------------------------ */ body.admin-page .admin-main h1{ font-size:1.75rem !important; line-height:1.15; } body.admin-page .admin-main h2{ font-size:1.45rem !important; line-height:1.18; } body.admin-page .admin-main h3{ font-size:1.15rem !important; line-height:1.2; } body.admin-page .section-title .eyebrow{ font-size:.66rem !important; } body.admin-page .section-title p, body.admin-page .admin-card p{ font-size:.86rem; line-height:1.55; } /* ------------------------------------------------------------ LABELS / HINWEISE ------------------------------------------------------------ */ body.admin-page .admin-main label{ font-size:.82rem !important; } body.admin-page .admin-main small, body.admin-page .admin-main .hint, body.admin-page .admin-main .help, body.admin-page .admin-main .note{ font-size:.72rem !important; line-height:1.5; } /* ------------------------------------------------------------ EINGABEFELDER Nicht volle 30 %, damit Bedienung angenehm bleibt. ------------------------------------------------------------ */ body.admin-page .admin-main input[type="text"], body.admin-page .admin-main input[type="email"], body.admin-page .admin-main input[type="url"], body.admin-page .admin-main input[type="number"], body.admin-page .admin-main input[type="search"], body.admin-page .admin-main input[type="password"], body.admin-page .admin-main input[type="date"], body.admin-page .admin-main select, body.admin-page .admin-main textarea{ min-height:38px !important; padding: 8px 11px !important; border-radius: 11px !important; font-size: .82rem !important; } body.admin-page .admin-main textarea{ min-height:78px !important; } /* ------------------------------------------------------------ DATEI UPLOAD ------------------------------------------------------------ */ body.admin-page .admin-main input[type="file"]{ font-size:.74rem !important; padding:7px !important; } /* ------------------------------------------------------------ BUTTONS ------------------------------------------------------------ */ body.admin-page .admin-main button, body.admin-page .admin-main .btn{ min-height:34px !important; padding: 7px 12px !important; border-radius: 9px !important; font-size: .76rem !important; line-height:1.2 !important; } body.admin-page .admin-main .btn-small{ min-height:30px !important; padding: 5px 9px !important; font-size: .69rem !important; } /* ------------------------------------------------------------ CHECKBOX / SWITCH ------------------------------------------------------------ */ body.admin-page .admin-main .switch-row{ min-height:38px; padding: 6px 0; } body.admin-page .admin-main .switch-row > span{ font-size:.8rem; } body.admin-page .admin-main .switch-row small{ font-size:.68rem !important; } body.admin-page .admin-main input[type="checkbox"]{ transform:scale(.86); transform-origin:center; } /* ------------------------------------------------------------ CARDS Mehr Luft trotz kleinerer Elemente ------------------------------------------------------------ */ body.admin-page .admin-card, body.admin-page .admin-section > form.admin-card{ padding: 20px !important; } body.admin-page .admin-grid{ gap: 20px !important; } body.admin-page .admin-section{ margin-bottom: 34px !important; } body.admin-page .card-title{ margin-bottom: 16px !important; } body.admin-page .section-title{ margin-bottom: 18px !important; } /* ------------------------------------------------------------ FORMULAR-ABSTÄNDE ------------------------------------------------------------ */ body.admin-page .admin-card form{ gap: 12px !important; } body.admin-page .profile-field-admin-row, body.admin-page .chat-link-row, body.admin-page .welcome-row, body.admin-page .inline-edit{ gap: 10px !important; } /* ------------------------------------------------------------ KATEGORIEN / SMILIES ------------------------------------------------------------ */ body.admin-page .category-row, body.admin-page .category-item, body.admin-page .smiley-category, body.admin-page .smilie-category{ padding: 14px !important; gap: 10px !important; border-radius: 14px !important; } body.admin-page .category-row label, body.admin-page .category-item label{ font-size: .75rem !important; } body.admin-page .category-row input, body.admin-page .category-row select, body.admin-page .category-item input, body.admin-page .category-item select{ min-height: 36px !important; } /* ------------------------------------------------------------ TABELLEN ------------------------------------------------------------ */ body.admin-page .admin-main .table{ font-size:.76rem; } body.admin-page .admin-main .table .tr{ min-height:38px; } body.admin-page .admin-main .table .tr > *{ padding: 8px 10px !important; } /* ------------------------------------------------------------ SIDEBAR ------------------------------------------------------------ */ body.admin-page .admin-sidebar nav a{ min-height:34px !important; padding: 7px 9px !important; border-radius: 8px; font-size: .78rem !important; } body.admin-page .admin-logo img{ width:36px !important; height:36px !important; } body.admin-page .admin-logo > span{ font-size:.82rem; } body.admin-page .admin-logo small{ font-size:.62rem !important; } /* ------------------------------------------------------------ BADGES ------------------------------------------------------------ */ body.admin-page .badge, body.admin-page .status, body.admin-page .pill{ padding: 4px 7px !important; font-size: .65rem !important; } /* ------------------------------------------------------------ SEO ------------------------------------------------------------ */ body.admin-page .seo-admin-notice{ padding: 11px 13px !important; } body.admin-page .seo-upload-card{ padding: 12px !important; } body.admin-page .seo-google-preview{ padding: 13px !important; } /* ------------------------------------------------------------ MOBILE Auf Handy nicht zu klein werden. ------------------------------------------------------------ */ @media(max-width:760px){ body.admin-page .admin-main{ font-size:82%; } body.admin-page .admin-sidebar{ font-size:82%; } body.admin-page .admin-main input[type="text"], body.admin-page .admin-main input[type="email"], body.admin-page .admin-main input[type="url"], body.admin-page .admin-main input[type="number"], body.admin-page .admin-main input[type="search"], body.admin-page .admin-main input[type="password"], body.admin-page .admin-main input[type="date"], body.admin-page .admin-main select, body.admin-page .admin-main textarea{ font-size:14px !important; } body.admin-page .admin-main button, body.admin-page .admin-main .btn{ font-size:.78rem !important; } body.admin-page .admin-card{ padding: 15px !important; } } /* ============================================================ END ET-HOST ADMIN COMPACT DESIGN 1.0 ============================================================ */ /* ============================================================ ET-HOST QUICK SETTINGS LAYOUT FIX 1.1 ============================================================ */ /* * DASHBOARD: * * Speicher * ↓ * Schnelleinstellungen */ body.admin-page #dashboard > .admin-grid{ display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:20px !important; width:100% !important; max-width:100% !important; } body.admin-page #dashboard > .admin-grid > .admin-card{ grid-column:1 !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; } /* * SCHNELLEINSTELLUNGEN: * Auf Desktop zwei saubere Spalten. * * Chat | Radio * Community | Registrierung */ body.admin-page #dashboard .quick-settings-form{ width:100% !important; max-width:100% !important; min-width:0 !important; } body.admin-page #dashboard .quick-settings-groups{ display:grid !important; grid-template-columns: repeat( 2, minmax(0,1fr) ) !important; gap:14px !important; width:100% !important; max-width:100% !important; min-width:0 !important; } body.admin-page #dashboard .quick-settings-group{ width:100% !important; max-width:100% !important; min-width:0 !important; padding:14px !important; overflow:hidden !important; } /* * Texte dürfen normal umbrechen, * aber nicht Buchstabe für Buchstabe. */ body.admin-page #dashboard .quick-settings-group strong, body.admin-page #dashboard .quick-settings-group small, body.admin-page #dashboard .quick-settings-group b, body.admin-page #dashboard .quick-settings-group span{ word-break:normal !important; overflow-wrap:break-word !important; hyphens:none !important; } body.admin-page #dashboard .quick-settings-group > header{ min-width:0 !important; } body.admin-page #dashboard .quick-settings-group > header > div{ min-width:0 !important; } body.admin-page #dashboard .quick-settings-group > header strong{ white-space:normal !important; } /* * Schaltertext links, Switch sauber rechts. */ body.admin-page #dashboard .quick-settings-group .switch-row{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:14px !important; min-width:0 !important; } body.admin-page #dashboard .quick-settings-group .switch-row > span{ flex:1 1 auto !important; min-width:0 !important; } body.admin-page #dashboard .quick-settings-group .switch{ flex:0 0 auto !important; } /* * Speicherformular ebenfalls sauber über volle Breite. */ body.admin-page #dashboard > .admin-grid > .admin-card:first-child .inline-form{ display:grid !important; grid-template-columns: minmax(130px,.35fr) minmax(220px,1fr) auto !important; gap:10px !important; align-items:end !important; width:100% !important; max-width:100% !important; } body.admin-page #dashboard > .admin-grid > .admin-card:first-child .inline-form button{ width:auto !important; } /* Tablet */ @media(max-width:850px){ body.admin-page #dashboard .quick-settings-groups{ grid-template-columns:minmax(0,1fr) !important; } body.admin-page #dashboard > .admin-grid > .admin-card:first-child .inline-form{ grid-template-columns:minmax(0,1fr) !important; } body.admin-page #dashboard > .admin-grid > .admin-card:first-child .inline-form button{ width:100% !important; } } /* ============================================================ END ET-HOST QUICK SETTINGS LAYOUT FIX 1.1 ============================================================ */ /* ET-HOST HEALTH CENTER 1.0 */ .health-overview{display:flex;align-items:center;gap:16px;padding:18px 20px;margin:0 0 16px;border:1px solid var(--line);border-radius:16px;background:#fff}.health-overview-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;font-size:1.35rem;font-weight:900}.health-overview span{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:850}.health-overview h2{margin:3px 0 2px;font-size:1.25rem}.health-overview p{margin:0;color:var(--muted);font-size:.75rem}.health-overview.health-ok{border-color:#cfe8d8;background:#fbfefc}.health-overview.health-ok .health-overview-icon{background:#e6f6ec;color:#247447}.health-overview.health-warn{border-color:#ecdcae;background:#fffdf7}.health-overview.health-warn .health-overview-icon{background:#fff1c9;color:#826115}.health-overview.health-error{border-color:#efc8c5;background:#fffafa}.health-overview.health-error .health-overview-icon{background:#fde7e5;color:#a23933} .health-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}.health-card{min-width:0;padding:16px;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:0 5px 18px rgba(29,35,41,.025)}.health-card.health-ok{border-top:3px solid #53a977}.health-card.health-warn{border-top:3px solid #d2a73c}.health-card.health-error{border-top:3px solid #c95b55}.health-card-head{display:flex;align-items:flex-start;gap:11px}.health-status-icon{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:50%;font-weight:900;font-size:.82rem}.health-ok .health-status-icon{background:#e8f6ed;color:#267348}.health-warn .health-status-icon{background:#fff2ce;color:#7e5f13}.health-error .health-status-icon{background:#fde8e6;color:#a13c36}.health-card h3{margin:1px 0 4px;font-size:.9rem}.health-card p{margin:0;color:var(--muted);font-size:.72rem;line-height:1.5}.health-meta{display:grid;gap:6px;margin:13px 0 0}.health-meta>div{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #f0f1f2;padding-top:6px}.health-meta dt,.health-meta dd{margin:0;font-size:.68rem}.health-meta dt{color:var(--muted)}.health-meta dd{font-weight:750;text-align:right;max-width:64%;overflow-wrap:anywhere} .health-tenant-card{overflow:hidden}.health-tenant-table{display:grid;margin-top:12px}.health-tenant-row{display:grid;grid-template-columns:minmax(220px,1.25fr) minmax(170px,1fr) 120px minmax(180px,1fr);gap:12px;align-items:center;padding:11px 4px;border-bottom:1px solid #eef0f1;font-size:.74rem}.health-tenant-row:last-child{border-bottom:0}.health-tenant-row.head{font-size:.65rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:850}.health-tenant-row span{min-width:0}.health-tenant-row b,.health-tenant-row small{display:block}.health-tenant-row small{color:var(--muted);margin-top:2px}.health-tenant-row code{font-size:.68rem;overflow-wrap:anywhere}.health-inline{display:inline-flex!important;align-items:center;gap:5px;font-weight:800}.health-inline.health-ok{color:#27744a}.health-inline.health-warn{color:#836116}.health-inline.health-error{color:#a23d37}.health-inline.health-muted{color:#8a9198} .health-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}.health-service-list{display:grid;gap:8px;margin-top:8px}.health-service-list>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #eef0f1;font-size:.75rem}.health-service-list>div:last-child{border-bottom:0}.health-jails{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.health-jail{padding:6px 9px;border-radius:999px;font-size:.67rem;font-weight:800;background:#f1f3f5;color:#687079}.health-jail.health-ok{background:#e8f6ed;color:#27744a}.health-note code{font-size:.75rem} @media(max-width:1120px){.health-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.health-tenant-row{grid-template-columns:minmax(190px,1.2fr) minmax(150px,1fr) 100px minmax(160px,1fr)}} @media(max-width:760px){.health-card-grid,.health-detail-grid{grid-template-columns:1fr}.health-tenant-table{overflow-x:auto}.health-tenant-row{min-width:720px}.health-overview{align-items:flex-start}.health-meta>div{align-items:flex-start}} /* /ET-HOST HEALTH CENTER 1.0 */ /* ET-HOST HEALTH CENTER 1.1 MAIL/BACKUP */ .health-extra-card{margin-bottom:16px}.health-mini-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}.health-mini{border:1px solid var(--line);border-radius:13px;padding:12px;background:#fff;min-width:0}.health-mini.health-ok{border-left:3px solid #53a977}.health-mini.health-warn{border-left:3px solid #d2a73c}.health-mini.health-error{border-left:3px solid #c95b55}.health-mini b{font-size:.76rem}.health-mini p{margin:4px 0 8px;color:var(--muted);font-size:.68rem;line-height:1.45}.health-mini small{display:block;margin-top:7px;color:var(--muted);font-size:.62rem;overflow-wrap:anywhere}.health-mini dl{margin:0;display:grid;gap:4px}.health-mini dl>div{display:flex;justify-content:space-between;gap:8px;font-size:.64rem}.health-mini dt{color:var(--muted)}.health-mini dd{margin:0;font-weight:750;text-align:right;overflow-wrap:anywhere} .health-stat-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:12px 0}.health-stat{border:1px solid var(--line);border-radius:12px;padding:10px;background:#fafbfc}.health-stat span{display:block;color:var(--muted);font-size:.61rem;line-height:1.35}.health-stat b{display:block;margin-top:4px;font-size:1.1rem}.health-stat.health-warn{border-color:#ecdcae;background:#fffdf7}.health-stat.health-error{border-color:#efc8c5;background:#fffafa}.health-stat.health-muted{opacity:.7} .health-mail-table-wrap{overflow-x:auto;border-top:1px solid #edf0f2;margin-top:12px}.health-mail-table{min-width:860px}.health-mail-row{display:grid;grid-template-columns:minmax(230px,1.25fr) minmax(150px,.8fr) minmax(260px,1.35fr) minmax(205px,1fr);gap:12px;padding:10px 2px;border-bottom:1px solid #eef0f1;align-items:start;font-size:.7rem}.health-mail-row.head{font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:850}.health-mail-row b,.health-mail-row small{display:block}.health-mail-row small{color:var(--muted);margin-top:2px;line-height:1.4}.health-mail-row .health-mail-error{color:#a23d37}.health-audit{margin-top:12px;border-top:1px solid #eef0f1;padding-top:10px}.health-audit summary{cursor:pointer;font-size:.72rem;font-weight:800}.health-audit p{margin:7px 0;font-size:.66rem;color:var(--muted)} @media(max-width:1180px){.health-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.health-stat-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:760px){.health-mini-grid,.health-stat-strip{grid-template-columns:1fr 1fr}} /* /ET-HOST HEALTH CENTER 1.1 MAIL/BACKUP */ /* ET-HOST HUGO CHATBOT + HISTORY PREVIEW 1.0 */ .message.message-system{background:transparent;border-color:transparent;box-shadow:none}.message.message-hugo{background:linear-gradient(135deg,rgba(232,245,255,.96),rgba(247,251,255,.98));border:1px solid rgba(78,150,214,.24);border-radius:14px;padding:10px 12px}.message.message-hugo .hugo-avatar{width:44px;height:44px;object-fit:cover;border-radius:50%;border:2px solid rgba(60,146,228,.55);box-shadow:0 3px 12px rgba(23,86,145,.18);background:#071426}.message.message-hugo .msg-meta b{color:#2369a8}.message.message-hugo .message-content>p{font-style:italic;color:#355273!important;margin-top:3px}.message.message-hugo .msg-tools{display:none!important} @media(max-width:760px){.message.message-hugo{padding:8px 9px}.message.message-hugo .hugo-avatar{width:38px;height:38px}} /* /ET-HOST HUGO CHATBOT + HISTORY PREVIEW 1.0 */ /* ET-HOST HUGO ONLINE + F5 HISTORY FIX 1.0.1 */ .online-user-card.bot-online-user{cursor:default;background:linear-gradient(135deg,rgba(232,245,255,.82),rgba(249,252,255,.92));border-color:rgba(78,150,214,.22)} .online-user-card.bot-online-user:hover{transform:none} .online-user-card.bot-online-user .hugo-online-avatar{object-fit:cover;border-radius:50%;border:2px solid rgba(60,146,228,.48);background:#071426;box-shadow:0 2px 8px rgba(23,86,145,.16)} .online-user-card.bot-online-user .online-profile-label{color:#4a78a4} .online-user-card.bot-online-user b{color:#2369a8} /* /ET-HOST HUGO ONLINE + F5 HISTORY FIX 1.0.1 */ /* ET-HOST CONSENT V4 + LAUT.FM PLAYER FIX 1.0 */ /* ============================================================ ET-HOST LAUT.FM OFFICIAL WIDGET PORTAL 1.1 Keeps the unchanged provider widget outside clipped sidebar/player cards. ============================================================ */ html.lautfm-modal-open, html.lautfm-modal-open body{ overflow:hidden!important; } .lautfm-widget-backdrop[hidden]{display:none!important} .lautfm-widget-backdrop{ position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(13,18,23,.66); backdrop-filter:blur(3px); } .lautfm-widget-backdrop .lautfm-widget-popover.lautfm-widget-portal{ position:relative!important; inset:auto!important; top:auto!important; right:auto!important; bottom:auto!important; left:auto!important; transform:none!important; width:min(620px,calc(100vw - 32px))!important; max-width:620px!important; max-height:calc(100vh - 32px)!important; overflow:auto!important; margin:0!important; z-index:1!important; } .lautfm-widget-backdrop .lautfm-widget-frame{ min-height:220px; overflow:visible; } .lautfm-widget-backdrop .lautfm-widget-frame iframe{ width:100%!important; min-height:220px!important; height:240px!important; } @media(max-width:760px){ .lautfm-widget-backdrop{padding:8px} .lautfm-widget-backdrop .lautfm-widget-popover.lautfm-widget-portal{ width:calc(100vw - 16px)!important; max-height:calc(100vh - 16px)!important; } .lautfm-widget-backdrop .lautfm-widget-frame iframe{ min-height:200px!important; height:220px!important; } } /* /ET-HOST LAUT.FM OFFICIAL WIDGET PORTAL 1.1 */