*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f3f6fa;color:#102033;line-height:1.5}a{text-decoration:none;color:inherit}.portal-shell{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:100vh}.sidebar{background:#0f1a2b;color:#eaf2fb;padding:24px;display:flex;flex-direction:column;gap:22px}.brand small{display:block;color:#8ea7c2;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem}.brand strong{display:block;font-size:1.4rem;margin-top:6px}.nav{display:flex;flex-direction:column;gap:8px}.nav a,.nav-section{padding:11px 14px;border-radius:12px}.nav a{background:rgba(255,255,255,.04);color:#f3f8ff}.nav a:hover{background:rgba(255,255,255,.1)}.nav-section{font-size:.78rem;color:#89a3bf;text-transform:uppercase;letter-spacing:.08em;padding-left:4px}.sidebar-footer{margin-top:auto;font-size:.92rem;color:#b4c7db}.main{padding:28px}.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:18px}.topbar h1{margin:0;font-size:2rem;line-height:1.1}.topbar p{margin:6px 0 0;color:#64748b}.topbar-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.badge,.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:#e7eef7;color:#16314f;font-size:.88rem}.pill.ok{background:#e5f7ed;color:#166534}.pill.warn{background:#fff4d7;color:#8a5a00}.pill.danger{background:#fde7e7;color:#a12727}.notice{padding:14px 16px;border-radius:14px;background:#edf4ff;color:#19365c;border:1px solid rgba(25,54,92,.08);margin-bottom:18px}.notice.success{background:#eaf8ef;color:#1d5a32}.notice.error{background:#ffe9e9;color:#8f1f1f}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.stat{background:#fff;border:1px solid rgba(16,32,51,.08);border-radius:18px;padding:18px;box-shadow:0 10px 30px rgba(15,23,42,.04)}.stat strong{display:block;font-size:1.6rem;margin-bottom:4px}.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}.card{background:#fff;border:1px solid rgba(16,32,51,.08);border-radius:20px;padding:20px;box-shadow:0 10px 30px rgba(15,23,42,.04)}.inner-card{box-shadow:none;background:#f8fbff}.card h2,.card h3{margin:0 0 10px}.kv{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid rgba(16,32,51,.08)}.kv:last-child{border-bottom:0}.ticket{border:1px solid rgba(16,32,51,.08);border-radius:16px;padding:14px;background:#f9fbfe}.ticket.compact{padding:12px}.ticket+.ticket{margin-top:12px}.ticket-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.ticket-meta{display:flex;gap:8px;flex-wrap:wrap;color:#64748b;font-size:.92rem}.message-thread{display:flex;flex-direction:column;gap:10px;margin:14px 0}.message{background:#fff;border:1px solid rgba(16,32,51,.08);border-radius:14px;padding:12px}.message.admin{background:#eef6ff}.message-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;color:#64748b;font-size:.9rem}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}label{font-weight:600;font-size:.92rem}input,select,textarea{width:100%;min-height:48px;border:1px solid rgba(16,32,51,.14);border-radius:14px;padding:12px 14px;font:inherit;background:#fff;color:#102033}textarea{min-height:110px;resize:vertical}input:focus,select:focus,textarea:focus{outline:none;border-color:#16708a;box-shadow:0 0 0 4px rgba(22,112,138,.08)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 16px;border-radius:14px;background:#fff;border:1px solid rgba(16,32,51,.12);color:#102033;font-weight:700;cursor:pointer}.btn:hover{transform:translateY(-1px)}.btn.primary{background:#123b52;color:#fff;border-color:#123b52}.btn.small{min-height:36px;padding:0 12px;border-radius:10px;font-size:.88rem}.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;padding:12px;border-bottom:1px solid rgba(16,32,51,.08);vertical-align:top}.table th{font-size:.84rem;text-transform:uppercase;letter-spacing:.06em;color:#64748b}.empty{padding:18px;border-radius:16px;background:#f8fbff;border:1px dashed rgba(16,32,51,.14);color:#64748b}.login-shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:16px}.login-card{width:min(100%,520px);background:#fff;border:1px solid rgba(16,32,51,.08);border-radius:24px;padding:24px;box-shadow:0 18px 50px rgba(15,23,42,.06)}.login-card h1{margin:8px 0 8px;font-size:2rem}.quick-list{display:flex;flex-direction:column;gap:10px}.quick-list a{padding:12px 14px;border:1px solid rgba(16,32,51,.08);border-radius:14px;background:#f8fbff}.actions-row{display:flex;gap:10px;flex-wrap:wrap}code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}@media (max-width:1100px){.portal-shell{grid-template-columns:1fr}.sidebar{padding:18px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:860px){.grid,.form-grid{grid-template-columns:1fr}.card,.inner-card{grid-column:auto!important}.topbar{flex-direction:column}.main{padding:18px}}@media (max-width:560px){.stats{grid-template-columns:1fr}.ticket-header,.kv,.message-head{flex-direction:column}.table{display:block;overflow-x:auto}.login-card{padding:18px}}
/* Stacked Moinhosting logo integration */
.brand.brand-stacked{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:10px;
}
.brand.brand-stacked strong{
font-size:1.1rem;
line-height:1.1;
}
.brand.brand-stacked small{
opacity:.8;
font-size:.84rem;
}
.login-brand.login-brand-stacked{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
margin:0 0 14px;
}
.portal-logo{
display:block;
height:auto;
max-width:100%;
}
.portal-logo-sidebar{
width:190px;
}
.portal-logo-login{
width:240px;
margin-inline:auto;
}
@media (max-width:760px){
.portal-logo-sidebar{ width:150px; }
.portal-logo-login{ width:190px; }
}
/* Centered sidebar brand block */
.brand.brand-stacked{
align-items:center !important;
text-align:center !important;
justify-content:center !important;
width:100%;
}
.brand.brand-stacked strong,
.brand.brand-stacked small{
text-align:center !important;
width:100%;
}
.portal-logo-sidebar{
margin-inline:auto !important;
}
/* Ticket page cleanup */
.ticket-layout{display:grid;grid-template-columns:minmax(320px,4.4fr) minmax(280px,3.6fr);gap:16px;align-items:start}
.ticket-create-card,.ticket-list-card,.ticket-detail-card{min-width:0}
.ticket-detail-card{grid-column:1 / -1}
.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px}
.section-head h2{margin:0}
.section-head p{margin:4px 0 0;color:#64748b}
.ticket-list{display:flex;flex-direction:column;gap:12px}
.ticket-list-item{display:block;transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease}
.ticket-list-item.is-active{border-color:#123b52;background:#f4f9fc;box-shadow:0 10px 24px rgba(18,59,82,.08)}
.ticket-list-item:hover{border-color:rgba(18,59,82,.26)}
.ticket-detail-head{padding-bottom:8px;border-bottom:1px solid rgba(16,32,51,.08)}
.message-thread{gap:14px;margin:18px 0}
.message{max-width:100%;padding:16px}
.message.customer{background:#ffffff}
.message.admin{background:#eef6ff;border-color:rgba(18,59,82,.14)}
.message-body{overflow-wrap:anywhere}
.message-attachment{margin-top:10px}
.ticket-reply-form{padding-top:10px;border-top:1px solid rgba(16,32,51,.08)}
.ticket-reply-actions{align-items:end}
@media (max-width:980px){.ticket-layout{grid-template-columns:1fr}.ticket-detail-card{grid-column:auto}}
@media (max-width:560px){.section-head,.ticket-header,.ticket-reply-actions,.message-head{flex-direction:column;align-items:flex-start}.ticket-list-item .pill{align-self:flex-start}}
input[type=checkbox]{width:auto;min-height:0;transform:translateY(1px);margin-right:8px}
.table td .pill{white-space:nowrap}
.stack-links{display:grid;gap:10px}.stack-links .btn{text-align:center;justify-content:center}.hint{color:#64748b;font-size:.92rem}.table td small,.kv small{color:#64748b}.message-thread{display:grid;gap:12px}.message{border:1px solid rgba(15,23,42,.08);border-radius:16px;padding:14px;background:#fff}.message.admin{background:#f8fbff}.ticket{border-radius:16px}.sidebar .nav a{border-radius:12px}.card h2{letter-spacing:-.01em}.table th,.table td{vertical-align:top}.empty{padding:14px;border:1px dashed rgba(15,23,42,.12);border-radius:14px;color:#64748b}
/* Ticket layout hard fix */
.ticket{display:block;width:100%;max-width:100%;}
.ticket.compact{display:block;width:100%;}
.ticket-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;}
.ticket-header > div:first-child{min-width:0;flex:1 1 auto;}
.ticket-header .pill{flex:0 0 auto;white-space:nowrap;align-self:flex-start;}
.ticket-meta{display:flex;flex-wrap:wrap;gap:8px;}
.message{display:block;width:100%;max-width:100%;}
.message-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.message-head strong, .message-head span{min-width:0;}
section.grid > article.card a.ticket + a.ticket{margin-top:12px;}
@media (max-width: 700px){
.ticket-header,.message-head{flex-direction:column;align-items:flex-start;}
}
/* 2026-06-07 structural ticket/admin cleanup */
:root{--mh-navy:#0f1a2b;--mh-blue:#123b52;--mh-cyan:#24c7dd;--mh-border:rgba(16,32,51,.09);--mh-muted:#64748b;}
.card{overflow:hidden;}
.btn{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;}
.btn:hover{box-shadow:0 12px 24px rgba(15,23,42,.08);border-color:rgba(18,59,82,.28);}
.btn.primary{background:linear-gradient(135deg,#123b52,#0f2d40);border-color:#123b52;box-shadow:0 12px 24px rgba(18,59,82,.18);}
.btn.primary:hover{background:linear-gradient(135deg,#0f2d40,#123b52);box-shadow:0 16px 32px rgba(18,59,82,.24);}
.nav a{transition:background .16s ease,transform .16s ease;}
.nav a:hover{transform:translateX(2px);}
.ticket-layout{grid-template-columns:minmax(360px,1fr) minmax(360px,1fr);}
.ticket-detail-card{grid-column:1 / -1;}
.ticket-list-item strong,.message-body{word-break:break-word;overflow-wrap:anywhere;}
.ticket-header > div:first-child{min-width:0;}
.ticket-header .pill{margin-left:auto;}
.admin-ticket-layout{display:grid;grid-template-columns:minmax(330px,420px) minmax(0,1fr);gap:16px;align-items:start;}
.admin-ticket-sidebar,.admin-ticket-detail{min-width:0;}
.admin-ticket-filter{grid-template-columns:1fr 1fr;margin-bottom:16px;}
.admin-ticket-list{max-height:calc(100vh - 420px);min-height:220px;overflow:auto;padding-right:4px;}
.admin-ticket-list .ticket{background:#f9fbfe;}
.admin-ticket-list .ticket-header{align-items:flex-start;}
.admin-ticket-list .pill{font-size:.8rem;padding:5px 9px;}
.ticket-detail-head{align-items:flex-start;}
.message.customer{background:#fff;}
.message.admin{background:#eef6ff;border-color:rgba(18,59,82,.16);}
.message-attachment{margin-top:10px;}
@media (max-width:1180px){.admin-ticket-layout{grid-template-columns:1fr;}.admin-ticket-list{max-height:none;overflow:visible;}.ticket-layout{grid-template-columns:1fr;}.ticket-detail-card{grid-column:auto;}}
@media (max-width:700px){.admin-ticket-filter{grid-template-columns:1fr;}.ticket-header .pill{margin-left:0;}.topbar-actions{width:100%;}.topbar-actions .btn,.topbar-actions .badge{width:100%;justify-content:center;}.main{padding:16px;}.card{padding:16px;border-radius:18px;}}
/* Order/admin spacing cleanup */
.admin-order-layout{display:grid;grid-template-columns:minmax(330px,430px) minmax(0,1fr);gap:18px;align-items:start;}
.admin-order-sidebar{display:flex;flex-direction:column;gap:18px;min-width:0;}
.admin-order-detail{min-width:0;}
.order-filter-card{margin-bottom:0;}
.order-filter-card h2,.order-list-card h2{margin-bottom:14px;}
.order-filter-form{grid-template-columns:1fr 1fr;}
.order-list{display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 430px);min-height:220px;overflow:auto;padding-right:4px;}
.order-list .ticket{margin-top:0;}
.order-list-item{display:block;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;}
.order-list-item.is-active{border-color:#123b52;background:#f4f9fc;box-shadow:0 10px 24px rgba(18,59,82,.08);}
.order-edit-form{margin-top:16px;padding-top:16px;border-top:1px solid rgba(16,32,51,.08);}
@media (max-width:1180px){.admin-order-layout{grid-template-columns:1fr;}.order-list{max-height:none;overflow:visible;}}
@media (max-width:700px){.order-filter-form{grid-template-columns:1fr;}.admin-order-sidebar{gap:14px;}.admin-order-layout{gap:14px;}}
/* Newsletter composer */
.newsletter-admin-grid{margin-top:16px;align-items:start}
.newsletter-composer-card{grid-column:1 / -1;width:100%;max-width:none}
.newsletter-campaigns-card{grid-column:1 / -1;width:100%;max-width:none}
.newsletter-form{grid-template-columns:repeat(4,minmax(0,1fr))}
.newsletter-form .field.full{grid-column:1 / -1}
.newsletter-toolbar{display:flex;flex-wrap:wrap;gap:8px;padding:12px;border:1px solid rgba(16,32,51,.1);border-radius:16px 16px 0 0;background:#f8fbff;width:100%}
.newsletter-editor{width:100%;max-width:none;min-height:460px;border:1px solid rgba(16,32,51,.14);border-top:0;border-radius:0 0 16px 16px;padding:22px;background:#fff;overflow:auto}
.newsletter-editor:focus{outline:none;border-color:#16708a;box-shadow:0 0 0 4px rgba(22,112,138,.08)}
.newsletter-editor h1,.newsletter-editor h2,.newsletter-editor h3{margin:0 0 12px}
.newsletter-editor p{margin:0 0 12px}
.newsletter-editor img{max-width:100%;height:auto;border-radius:14px;margin:8px 0}
.newsletter-upload-status{min-height:22px;margin-top:8px;font-size:.92rem;color:#16708a;font-weight:700}
.newsletter-upload-status.is-error{color:#b42318}
.newsletter-editor a{color:#16708a;text-decoration:underline}
.newsletter-editor .newsletter-cta{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:12px;background:#123b52;color:#fff;text-decoration:none;font-weight:800}
.newsletter-editor blockquote{margin:12px 0;padding:10px 14px;border-left:4px solid rgba(22,112,138,.35);background:#f8fbff;border-radius:10px}
.newsletter-form textarea[hidden]{display:none}
@media (max-width:1100px){.newsletter-form{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.newsletter-composer-card,.newsletter-campaigns-card{grid-column:auto!important}.newsletter-form{grid-template-columns:1fr}.newsletter-editor{min-height:280px;padding:18px}}
/* Central admin logs */
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.hint{color:#64748b;font-size:.92rem;margin:4px 0 0}.logs-filter-card{margin-bottom:4px}.log-list{display:flex;flex-direction:column;gap:10px}.log-entry{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px;border:1px solid rgba(16,32,51,.08);border-radius:16px;background:#f9fbfe}.log-main{min-width:0}.log-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.log-type{display:inline-flex;align-items:center;border-radius:999px;padding:4px 9px;background:#e7eef7;color:#16314f;font-weight:700;font-size:.78rem}.log-details{margin:6px 0;color:#334155;word-break:break-word}@media (max-width:700px){.section-head,.log-entry{flex-direction:column}.log-entry .pill{align-self:flex-start}}
/* Global copyright footer */
.portal-copyright{margin-top:28px;padding:18px 20px;border:1px solid rgba(16,32,51,.08);border-radius:18px;background:#fff;color:#64748b;text-align:center;font-size:.92rem;box-shadow:0 10px 30px rgba(15,23,42,.04)}
.portal-copyright-login{width:min(100%,520px);margin-top:16px}
@media (max-width:700px){.portal-copyright{margin-top:18px;padding:14px 16px;font-size:.86rem}}
/* Customer management upgrade */
.highlight-card{background:linear-gradient(135deg,#ffffff,#f4fbff)}
.management-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:12px}.management-grid>a,.management-grid>div{display:flex;flex-direction:column;gap:5px;padding:14px;border:1px solid rgba(16,32,51,.08);border-radius:16px;background:#f8fbff}.management-grid strong{font-size:1rem}.management-grid span{color:#64748b;font-size:.92rem}.management-grid.small{grid-template-columns:repeat(2,minmax(0,1fr))}.check-card{display:flex;align-items:flex-start;gap:10px;padding:14px;border:1px solid rgba(16,32,51,.1);border-radius:16px;background:#f8fbff;font-weight:700}.check-card input{width:auto;min-height:auto;margin-top:4px}.stack-links{display:flex;flex-direction:column;gap:10px}.stack-links .btn{width:100%}.portal-copyright{margin-top:24px;text-align:center;color:#64748b;background:#fff;border:1px solid rgba(16,32,51,.08);border-radius:16px;padding:14px;box-shadow:0 10px 30px rgba(15,23,42,.04)}.portal-copyright-login{max-width:520px;width:100%}@media(max-width:1100px){.management-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.management-grid,.management-grid.small{grid-template-columns:1fr}}
/* Login page footer alignment fix */
.login-shell{flex-direction:column;align-items:center;justify-content:center;gap:16px;}
.login-shell .login-card,.login-shell .portal-copyright-login{width:min(100%,520px);}
.login-shell .portal-copyright-login{margin:0;text-align:center;}
.login-shell>.notice{margin-bottom:0;}
@media (max-width:560px){.login-shell{padding:18px;justify-content:flex-start;}.login-shell .login-card,.login-shell .portal-copyright-login{width:100%;}}
/* Login: Testkundendaten sauber vom Passwort-Link trennen */
.login-links{
display:flex;
justify-content:center;
margin-top:14px;
margin-bottom:20px;
}
.login-demo-box{
margin-top:0;
margin-bottom:0;
display:grid;
gap:6px;
text-align:left;
}
.login-demo-box span{
font-size:.78rem;
text-transform:uppercase;
letter-spacing:.06em;
color:#64748b;
font-weight:800;
}
.login-demo-box strong{
color:#16314f;
word-break:break-word;
}
.login-demo-box small{
color:#64748b;
}
/* Login: deutlichere Abstände unterhalb des Formulars */
.login-card form{
margin-bottom:0;
}
.login-helper-area{
margin-top:28px;
display:flex;
flex-direction:column;
gap:24px;
}
.login-links{
display:flex;
justify-content:center;
margin:0;
padding-top:2px;
}
.login-demo-box{
margin:0;
padding:18px 20px;
display:grid;
gap:8px;
text-align:left;
}
.login-demo-box span{
font-size:.78rem;
text-transform:uppercase;
letter-spacing:.06em;
color:#64748b;
font-weight:800;
}
.login-demo-box strong{
color:#16314f;
word-break:break-word;
}
.login-demo-box small{
color:#64748b;
}
/* Login: Testkundendaten als klare Zugangsdaten-Box */
.login-demo-box{
margin:0;
padding:18px;
display:flex;
flex-direction:column;
gap:12px;
background:#f8fbff;
border:1px solid rgba(16,32,51,.10);
border-radius:16px;
}
.demo-box-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
padding-bottom:10px;
border-bottom:1px solid rgba(16,32,51,.08);
}
.demo-box-head span{
font-size:.78rem;
text-transform:uppercase;
letter-spacing:.06em;
color:#16314f;
font-weight:900;
}
.demo-box-head small{
color:#64748b;
font-size:.78rem;
text-align:right;
}
.demo-credential-row{
display:grid;
grid-template-columns:92px minmax(0,1fr);
gap:12px;
align-items:center;
}
.demo-credential-row span{
color:#64748b;
font-size:.88rem;
font-weight:700;
}
.demo-credential-row strong{
color:#16314f;
font-weight:800;
word-break:break-word;
background:#fff;
border:1px solid rgba(16,32,51,.08);
border-radius:10px;
padding:8px 10px;
}
@media (max-width:560px){
.demo-box-head{
flex-direction:column;
gap:4px;
}
.demo-box-head small{
text-align:left;
}
.demo-credential-row{
grid-template-columns:1fr;
gap:6px;
}
}
/* Wartungskalender */
.calendar-head{
display:flex;
justify-content:space-between;
gap:16px;
align-items:flex-start;
margin-bottom:16px;
}
.calendar-head h2{
margin-bottom:4px;
}
.maintenance-current-date{
margin:12px 0 16px;
padding:12px 14px;
border:1px solid rgba(16,32,51,.08);
background:#f8fbff;
border-radius:14px;
color:#64748b;
}
.maintenance-current-date strong{
color:#16314f;
}
.calendar-grid{
display:grid;
grid-template-columns:repeat(7,minmax(0,1fr));
gap:8px;
}
.calendar-weekday{
text-align:center;
font-weight:800;
font-size:.82rem;
color:#64748b;
padding:8px 0;
}
.calendar-day{
position:relative;
min-height:74px;
border:1px solid rgba(16,32,51,.08);
border-radius:14px;
background:#fff;
color:#16314f;
text-align:left;
padding:10px;
cursor:pointer;
transition:.18s ease;
}
.calendar-day:hover{
transform:translateY(-1px);
border-color:rgba(13,139,141,.35);
box-shadow:0 8px 24px rgba(15,23,42,.08);
}
.calendar-day span{
font-weight:800;
}
.calendar-day em{
position:absolute;
right:8px;
bottom:8px;
min-width:22px;
height:22px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
background:#ed9b27;
color:#fff;
font-style:normal;
font-size:.78rem;
font-weight:900;
}
.calendar-day.is-muted{
opacity:.42;
}
.calendar-day.is-today{
border-color:#0d8b8d;
}
.calendar-day.is-selected{
outline:3px solid rgba(13,139,141,.18);
border-color:#0d8b8d;
background:#f0fbfb;
}
.calendar-day.has-event{
background:linear-gradient(180deg,#fff 0%,#fff7ec 100%);
}
.maintenance-event-list{
display:flex;
flex-direction:column;
gap:10px;
}
.maintenance-event{
padding:12px 14px;
border:1px solid rgba(16,32,51,.08);
border-radius:14px;
background:#fff;
}
.maintenance-event strong{
display:block;
color:#16314f;
margin-bottom:4px;
}
.maintenance-event span,
.maintenance-event small{
display:block;
color:#64748b;
line-height:1.45;
}
.maintenance-event p{
margin:8px 0 0;
color:#334155;
}
.soft-separator{
border:0;
border-top:1px solid rgba(16,32,51,.08);
margin:18px 0;
}
@media (max-width:700px){
.calendar-head{
flex-direction:column;
}
.calendar-grid{
gap:5px;
}
.calendar-day{
min-height:52px;
padding:7px;
border-radius:10px;
}
.calendar-day em{
right:5px;
bottom:5px;
min-width:18px;
height:18px;
font-size:.7rem;
}
}
.field small{display:block;margin-top:6px;color:#64748b;font-size:.8rem;line-height:1.35;}
/* Einheitliches Design für Datei-Auswahl / Durchsuchen-Buttons */
input[type="file"].file-upload,
.field input[type="file"]:not([hidden]){
width:100%;
padding:10px;
border:1px solid rgba(16,32,51,.10);
border-radius:14px;
background:#f8fbff;
color:#64748b;
cursor:pointer;
transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input[type="file"].file-upload:hover,
.field input[type="file"]:not([hidden]):hover{
border-color:rgba(13,139,141,.34);
background:#f4fbfb;
box-shadow:0 8px 22px rgba(15,23,42,.06);
}
input[type="file"].file-upload:focus,
.field input[type="file"]:not([hidden]):focus{
outline:none;
border-color:#0d8b8d;
box-shadow:0 0 0 4px rgba(13,139,141,.13);
}
input[type="file"].file-upload::file-selector-button,
.field input[type="file"]:not([hidden])::file-selector-button{
margin-right:14px;
border:0;
border-radius:999px;
padding:9px 15px;
background:linear-gradient(135deg,#0d8b8d,#0fb8c6);
color:#fff;
font-weight:800;
cursor:pointer;
transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
box-shadow:0 8px 18px rgba(13,139,141,.22);
}
input[type="file"].file-upload::file-selector-button:hover,
.field input[type="file"]:not([hidden])::file-selector-button:hover{
transform:translateY(-1px);
filter:brightness(1.04);
box-shadow:0 10px 24px rgba(13,139,141,.30);
}
input[type="file"].file-upload::-webkit-file-upload-button,
.field input[type="file"]:not([hidden])::-webkit-file-upload-button{
margin-right:14px;
border:0;
border-radius:999px;
padding:9px 15px;
background:linear-gradient(135deg,#0d8b8d,#0fb8c6);
color:#fff;
font-weight:800;
cursor:pointer;
box-shadow:0 8px 18px rgba(13,139,141,.22);
}
.upload-action-btn{
border-color:rgba(13,139,141,.22);
background:linear-gradient(135deg,rgba(13,139,141,.10),rgba(237,155,39,.10));
color:#0f3140;
font-weight:800;
}
.upload-action-btn:hover{
border-color:rgba(13,139,141,.40);
box-shadow:0 8px 22px rgba(15,23,42,.08);
}
/* Datei-Auswahl: dezenter, professioneller Upload-Stil */
input[type="file"].file-upload,
.field input[type="file"]:not([hidden]){
width:100%;
min-height:42px;
padding:7px 10px;
border:1px solid rgba(16,32,51,.12);
border-radius:12px;
background:#fff;
color:#64748b;
font-size:.9rem;
cursor:pointer;
box-shadow:none;
transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
input[type="file"].file-upload:hover,
.field input[type="file"]:not([hidden]):hover{
border-color:rgba(13,139,141,.32);
background:#fbfdff;
box-shadow:0 3px 10px rgba(15,23,42,.04);
}
input[type="file"].file-upload:focus,
.field input[type="file"]:not([hidden]):focus{
outline:none;
border-color:#0d8b8d;
box-shadow:0 0 0 3px rgba(13,139,141,.10);
}
input[type="file"].file-upload::file-selector-button,
.field input[type="file"]:not([hidden])::file-selector-button{
margin-right:12px;
border:1px solid rgba(13,139,141,.28);
border-radius:10px;
padding:6px 11px;
background:#f6fbfb;
color:#0f5960;
font-size:.86rem;
font-weight:700;
line-height:1.2;
cursor:pointer;
box-shadow:none;
transition:background .16s ease, border-color .16s ease, color .16s ease;
}
input[type="file"].file-upload::file-selector-button:hover,
.field input[type="file"]:not([hidden])::file-selector-button:hover{
background:#eefafa;
border-color:rgba(13,139,141,.48);
color:#0d4f55;
transform:none;
box-shadow:none;
filter:none;
}
input[type="file"].file-upload::-webkit-file-upload-button,
.field input[type="file"]:not([hidden])::-webkit-file-upload-button{
margin-right:12px;
border:1px solid rgba(13,139,141,.28);
border-radius:10px;
padding:6px 11px;
background:#f6fbfb;
color:#0f5960;
font-size:.86rem;
font-weight:700;
line-height:1.2;
cursor:pointer;
box-shadow:none;
}
.upload-action-btn{
border:1px solid rgba(13,139,141,.22);
background:#fff;
color:#0f5960;
font-weight:700;
box-shadow:none;
}
.upload-action-btn:hover{
background:#f6fbfb;
border-color:rgba(13,139,141,.42);
box-shadow:0 3px 10px rgba(15,23,42,.04);
transform:none;
}
/* Community & Hilfe */
.community-topic-list{
display:flex;
flex-direction:column;
gap:10px;
margin-top:16px;
}
.community-topic{
display:flex;
justify-content:space-between;
gap:14px;
padding:14px 16px;
border:1px solid rgba(16,32,51,.08);
border-radius:16px;
background:#fff;
text-decoration:none;
color:inherit;
transition:.18s ease;
}
.community-topic:hover,
.community-topic.active{
border-color:rgba(13,139,141,.28);
background:#f8fbff;
box-shadow:0 8px 22px rgba(15,23,42,.05);
}
.community-topic strong{
display:block;
color:#16314f;
margin-bottom:4px;
}
.community-topic span{
display:block;
color:#334155;
line-height:1.45;
}
.community-topic small{
display:block;
color:#64748b;
margin-top:6px;
}
.community-topic-meta{
min-width:96px;
text-align:right;
display:flex;
flex-direction:column;
gap:6px;
align-items:flex-end;
}
.community-topic-meta em{
font-style:normal;
font-size:.75rem;
font-weight:800;
color:#0d5960;
background:#e9fbfb;
border:1px solid rgba(13,139,141,.14);
border-radius:999px;
padding:4px 8px;
}
.community-detail-head{
display:flex;
justify-content:space-between;
gap:14px;
align-items:flex-start;
margin-bottom:16px;
}
.community-detail-head h2{
margin-bottom:6px;
}
.community-message{
border:1px solid rgba(16,32,51,.08);
border-radius:16px;
background:#fff;
padding:16px;
margin:12px 0;
}
.community-message.staff{
border-color:rgba(13,139,141,.20);
background:#f6fbfb;
}
.community-message .message-body{
color:#1f2937;
line-height:1.62;
}
.community-reply{
margin-top:18px;
}
.inline-form{
display:inline-flex;
flex-wrap:wrap;
gap:8px;
}
@media (max-width:760px){
.community-topic,
.community-detail-head{
flex-direction:column;
}
.community-topic-meta{
min-width:0;
text-align:left;
align-items:flex-start;
}
}
/* Registrierung: klare Abschnittsüberschriften */
.form-section-title{
margin-top:8px;
padding-top:16px;
border-top:1px solid rgba(16,32,51,.08);
}
.form-section-title h2{
margin:0 0 4px;
font-size:1rem;
color:#16314f;
}
.form-section-title p{
margin:0;
color:#64748b;
font-size:.9rem;
}
.register-form .field label{
font-weight:800;
}
/* Registrierung: Hinweis im Adressbereich einzeilig halten */
.register-form .form-section-title p{
white-space:nowrap;
}
@media (max-width:760px){
.register-form .form-section-title p{
white-space:normal;
}
}
/* Registrierung: Passwortfelder nebeneinander und Anforderungen hervorheben */
.password-section-title{
margin-bottom:2px;
}
.password-section-title h2{
margin-bottom:10px;
}
.password-requirements{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px 10px;
padding:14px 16px;
border:1px solid rgba(13,139,141,.16);
border-left:4px solid #0d8b8d;
border-radius:14px;
background:linear-gradient(135deg,rgba(13,139,141,.08),rgba(237,155,39,.06));
}
.password-requirements strong{
grid-column:1/-1;
color:#16314f;
font-size:.9rem;
margin-bottom:2px;
}
.password-requirements span{
position:relative;
padding-left:18px;
color:#334155;
font-size:.88rem;
line-height:1.35;
}
.password-requirements span::before{
content:"✓";
position:absolute;
left:0;
top:0;
color:#0d8b8d;
font-weight:900;
}
.password-fields{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
}
.password-fields .field{
min-width:0;
}
@media (max-width:760px){
.password-requirements,
.password-fields{
grid-template-columns:1fr;
}
}
/* Registrierung: Moinhosting-Branding */
.register-card{
position:relative;
}
.register-brand{
display:flex;
align-items:center;
gap:14px;
margin-bottom:18px;
padding-bottom:18px;
border-bottom:1px solid rgba(16,32,51,.08);
}
.register-brand img{
width:54px;
height:auto;
display:block;
}
.register-brand strong{
display:block;
color:#16314f;
font-size:1.12rem;
font-weight:900;
line-height:1.1;
}
.register-brand span{
display:block;
color:#64748b;
font-size:.9rem;
margin-top:3px;
}
@media (max-width:560px){
.register-brand{
justify-content:center;
text-align:left;
}
.register-brand img{
width:48px;
}
}
/* Registrierung: finales, ruhiges Branding und Passwortlayout */
.register-brand{
justify-content:center !important;
text-align:center !important;
margin-bottom:22px !important;
padding-bottom:20px !important;
}
.register-brand img{
width:118px !important;
max-width:42vw;
height:auto !important;
margin:0 auto;
}
.register-brand div,
.register-brand strong,
.register-brand span{
display:none !important;
}
.password-section-title{
margin-bottom:0 !important;
padding-bottom:0;
}
.password-section-title h2{
margin-bottom:6px !important;
}
.password-hint{
display:block;
max-width:none;
margin:0 0 2px !important;
padding:10px 12px;
border:1px solid rgba(16,32,51,.08);
border-radius:12px;
background:#f8fafc;
color:#475569 !important;
font-size:.88rem !important;
line-height:1.45;
white-space:normal !important;
}
.password-requirements{
display:none !important;
}
.password-fields{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:18px !important;
align-items:start;
margin-top:12px;
}
.password-fields .field{
display:flex;
flex-direction:column;
gap:7px;
min-width:0;
margin:0;
}
.password-fields .field label{
min-height:20px;
}
.password-fields input[type="password"]{
width:100%;
}
@media (max-width:760px){
.register-brand img{
width:96px !important;
}
.password-fields{
grid-template-columns:1fr !important;
gap:14px !important;
}
}
/* Registrierung: finale Logo- und Passwortfeld-Korrektur */
.register-brand{
display:flex !important;
justify-content:center !important;
align-items:center !important;
width:max-content;
max-width:100%;
margin:0 auto 24px !important;
padding:0 0 20px !important;
border-bottom:1px solid rgba(16,32,51,.08);
text-decoration:none;
}
.register-brand img{
width:142px !important;
max-width:48vw;
height:auto !important;
display:block;
}
.register-brand:hover img{
transform:translateY(-1px);
}
.register-brand img{
transition:transform .16s ease;
}
.register-form .password-section-title{
margin-top:12px !important;
}
.register-form .password-hint{
margin-top:6px !important;
margin-bottom:0 !important;
padding:10px 12px;
border:1px solid rgba(16,32,51,.08);
border-radius:12px;
background:#f8fafc;
color:#475569 !important;
font-size:.88rem !important;
line-height:1.45;
white-space:normal !important;
}
.register-form > .password-field{
display:flex !important;
flex-direction:column !important;
gap:7px !important;
min-width:0;
margin:0 !important;
}
.register-form > .password-field label{
display:block;
min-height:auto !important;
line-height:1.25;
}
.register-form > .password-field input{
width:100%;
box-sizing:border-box;
}
.password-fields{
display:contents !important;
}
@media (max-width:760px){
.register-brand img{
width:118px !important;
}
.register-form > .password-field{
grid-column:1/-1;
}
}
/* Registrierung: Logo wie im Kundenportal und Passwortfelder direkt unter Hinweisbox */
.register-card .register-brand{
display:flex !important;
justify-content:center !important;
align-items:center !important;
width:100% !important;
margin:0 auto 26px !important;
padding:0 0 22px !important;
border-bottom:1px solid rgba(16,32,51,.08) !important;
text-decoration:none !important;
}
.register-card .register-brand .register-logo,
.register-card .register-brand img{
width:190px !important;
max-width:min(70vw, 220px) !important;
height:auto !important;
display:block !important;
margin:0 auto !important;
}
.register-card .register-brand:hover img{
transform:translateY(-1px);
}
.register-card .register-brand img{
transition:transform .16s ease;
}
.register-form .password-section-title{
margin-top:12px !important;
margin-bottom:0 !important;
}
.register-form .password-section-title h2{
margin-bottom:8px !important;
}
.register-form .password-hint{
display:block !important;
width:100% !important;
margin:0 !important;
padding:10px 12px !important;
border:1px solid rgba(16,32,51,.08) !important;
border-radius:12px !important;
background:#f8fafc !important;
color:#475569 !important;
font-size:.88rem !important;
line-height:1.45 !important;
white-space:normal !important;
}
.password-fields-row{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:16px !important;
align-items:start !important;
margin-top:0 !important;
}
.password-fields-row .field{
margin:0 !important;
min-width:0 !important;
}
.password-fields-row .field label{
display:block !important;
line-height:1.25 !important;
margin-bottom:7px !important;
}
.password-fields-row input[type="password"]{
width:100% !important;
box-sizing:border-box !important;
}
.register-form > .password-field{
grid-column:auto !important;
}
@media (max-width:760px){
.register-card .register-brand .register-logo,
.register-card .register-brand img{
width:150px !important;
max-width:64vw !important;
}
.password-fields-row{
grid-template-columns:1fr !important;
gap:14px !important;
}
}
/* Registrierung: Passwort-Hinweis unter die Passwortfelder setzen */
.register-form .password-section-title{
margin-bottom:0 !important;
}
.register-form .password-section-title h2{
margin-bottom:0 !important;
}
.password-fields-row{
margin-top:0 !important;
}
.register-form > .password-hint.full{
grid-column:1/-1 !important;
display:block !important;
width:100% !important;
box-sizing:border-box !important;
margin:-4px 0 0 !important;
padding:10px 12px !important;
border:1px solid rgba(16,32,51,.08) !important;
border-radius:12px !important;
background:#f8fafc !important;
color:#475569 !important;
font-size:.88rem !important;
line-height:1.45 !important;
white-space:normal !important;
}
/* Registrierung: Passwortfelder sauber, groß und nebeneinander */
.register-form .password-fields-row.full{
grid-column:1/-1 !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
gap:22px !important;
width:100% !important;
align-items:end !important;
margin-top:2px !important;
}
.register-form .password-fields-row.full .field{
width:100% !important;
min-width:0 !important;
margin:0 !important;
display:flex !important;
flex-direction:column !important;
gap:8px !important;
}
.register-form .password-fields-row.full .field label{
display:block !important;
margin:0 !important;
min-height:18px !important;
line-height:1.25 !important;
font-weight:800 !important;
}
.register-form .password-fields-row.full .field input[type="password"]{
width:100% !important;
min-width:0 !important;
height:48px !important;
box-sizing:border-box !important;
font-size:.98rem !important;
padding:12px 14px !important;
}
.register-form > .password-hint.full{
grid-column:1/-1 !important;
width:100% !important;
margin:2px 0 0 !important;
}
@media (max-width:760px){
.register-form .password-fields-row.full{
grid-template-columns:1fr !important;
gap:14px !important;
}
}
/* Registrierung: Eingabefelder Hover/Fokus mit zweiter Logofarbe */
.register-form input,
.register-form select,
.register-form textarea{
transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.register-form input:hover,
.register-form select:hover,
.register-form textarea:hover{
border-color:rgba(237,155,39,.42) !important;
background:#fffaf3 !important;
}
.register-form input:focus,
.register-form select:focus,
.register-form textarea:focus{
outline:none !important;
border-color:#ed9b27 !important;
box-shadow:0 0 0 4px rgba(237,155,39,.14) !important;
background:#fff !important;
}
.register-form input[type="password"]:hover{
border-color:rgba(237,155,39,.48) !important;
background:#fffaf3 !important;
}
.register-form input[type="password"]:focus{
border-color:#ed9b27 !important;
box-shadow:0 0 0 4px rgba(237,155,39,.16) !important;
}
/* Hinweisboxen: Bestätigungslink sauber darstellen */
.notice a{
font-weight:800;
color:#0d5960;
text-decoration:underline;
text-underline-offset:3px;
}
.notice a:hover{
color:#ed9b27;
}
/* Registrierung: Passwortprüfung sauber darstellen */
.register-form input:invalid{
box-shadow:none;
}
.register-form input:user-invalid{
border-color:#dc2626;
}
/* Moinhosting: Primäre Buttons in Logo-Farben */
.btn.primary,
button.btn.primary,
input[type="submit"].btn.primary,
.login-card .btn.primary,
.register-card .btn.primary,
.form-grid .btn.primary{
background:linear-gradient(135deg,#0d8b8d 0%,#0fb8c6 100%) !important;
color:#ffffff !important;
border:1px solid rgba(13,139,141,.45) !important;
box-shadow:0 10px 24px rgba(13,139,141,.22) !important;
}
.btn.primary:hover,
button.btn.primary:hover,
input[type="submit"].btn.primary:hover,
.login-card .btn.primary:hover,
.register-card .btn.primary:hover,
.form-grid .btn.primary:hover{
background:linear-gradient(135deg,#ed9b27 0%,#d98514 100%) !important;
color:#ffffff !important;
border-color:rgba(237,155,39,.55) !important;
box-shadow:0 12px 28px rgba(237,155,39,.25) !important;
transform:translateY(-1px);
}
.btn.primary:focus,
button.btn.primary:focus,
input[type="submit"].btn.primary:focus,
.login-card .btn.primary:focus,
.register-card .btn.primary:focus,
.form-grid .btn.primary:focus{
outline:none !important;
box-shadow:0 0 0 4px rgba(237,155,39,.18), 0 10px 24px rgba(13,139,141,.20) !important;
}
/* Sekundäre Buttons im Login-/Registrierungsbereich dezenter im Moinhosting-Stil */
.login-card .btn:not(.primary),
.register-card .btn:not(.primary){
border-color:rgba(13,139,141,.22) !important;
color:#0f5960 !important;
background:#ffffff !important;
}
.login-card .btn:not(.primary):hover,
.register-card .btn:not(.primary):hover{
border-color:rgba(237,155,39,.42) !important;
color:#9a5a00 !important;
background:#fffaf3 !important;
}
/* Moinhosting: Buttons ohne Verlauf */
.btn.primary,
button.btn.primary,
input[type="submit"].btn.primary,
.login-card .btn.primary,
.register-card .btn.primary,
.form-grid .btn.primary{
background:#0d8b8d !important;
color:#ffffff !important;
border:1px solid #0d8b8d !important;
box-shadow:0 8px 18px rgba(13,139,141,.18) !important;
}
.btn.primary:hover,
button.btn.primary:hover,
input[type="submit"].btn.primary:hover,
.login-card .btn.primary:hover,
.register-card .btn.primary:hover,
.form-grid .btn.primary:hover{
background:#ed9b27 !important;
color:#ffffff !important;
border-color:#ed9b27 !important;
box-shadow:0 10px 22px rgba(237,155,39,.20) !important;
transform:translateY(-1px);
}
.btn.primary:focus,
button.btn.primary:focus,
input[type="submit"].btn.primary:focus,
.login-card .btn.primary:focus,
.register-card .btn.primary:focus,
.form-grid .btn.primary:focus{
outline:none !important;
box-shadow:0 0 0 4px rgba(237,155,39,.18) !important;
}
/* Community & Hilfe - überarbeitet */
.community-page{
display:flex;
flex-direction:column;
gap:16px;
}
.community-hero,
.community-admin-hero{
display:flex;
justify-content:space-between;
gap:18px;
align-items:flex-start;
}
.community-hero h2,
.community-admin-hero h2{
margin:8px 0 6px;
}
.community-shell{
display:grid;
grid-template-columns:minmax(300px, 390px) minmax(0, 1fr);
gap:16px;
align-items:start;
}
.community-sidebar,
.community-content{
min-width:0;
}
.community-filter{
display:flex;
flex-direction:column;
gap:12px;
}
.community-topic-list{
display:flex;
flex-direction:column;
gap:10px;
margin-top:16px;
max-height:760px;
overflow:auto;
padding-right:4px;
}
.community-topic{
display:flex;
justify-content:space-between;
gap:12px;
padding:14px;
border:1px solid rgba(16,32,51,.08);
border-radius:16px;
background:#fff;
text-decoration:none;
color:inherit;
transition:.18s ease;
}
.community-topic:hover,
.community-topic.active{
border-color:rgba(13,139,141,.30);
background:#f8fbff;
box-shadow:0 8px 22px rgba(15,23,42,.05);
}
.community-topic-main{
min-width:0;
}
.community-topic strong{
display:block;
color:#16314f;
margin-bottom:5px;
}
.community-topic span{
display:block;
color:#334155;
line-height:1.45;
}
.community-topic small{
display:block;
color:#64748b;
margin-top:7px;
}
.community-topic-meta{
min-width:92px;
display:flex;
flex-direction:column;
align-items:flex-end;
gap:6px;
text-align:right;
}
.community-topic-meta em{
font-style:normal;
font-size:.75rem;
font-weight:800;
color:#0d5960;
background:#e9fbfb;
border:1px solid rgba(13,139,141,.14);
border-radius:999px;
padding:4px 8px;
}
.community-detail-head{
display:flex;
justify-content:space-between;
gap:18px;
align-items:flex-start;
margin-bottom:18px;
}
.community-detail-head h2{
margin:10px 0 6px;
}
.community-badges{
display:flex;
flex-wrap:wrap;
gap:8px;
align-items:center;
}
.community-mod-actions,
.community-admin-actions{
display:flex;
flex-wrap:wrap;
gap:8px;
justify-content:flex-end;
}
.community-message{
border:1px solid rgba(16,32,51,.08);
border-radius:16px;
background:#fff;
padding:16px;
margin:12px 0;
}
.community-message.topic-message{
border-color:rgba(16,32,51,.12);
}
.community-message.staff{
border-color:rgba(13,139,141,.22);
background:#f6fbfb;
box-shadow:inset 4px 0 0 #0d8b8d;
}
.community-message .message-head{
display:flex;
justify-content:space-between;
gap:12px;
align-items:flex-start;
margin-bottom:10px;
}
.community-message .message-head strong{
color:#16314f;
}
.community-message .message-head small{
color:#64748b;
}
.community-message .message-body{
color:#1f2937;
line-height:1.65;
}
.community-reply{
margin-top:18px;
}
.community-info-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
margin-top:18px;
}
.community-info-grid div{
border:1px solid rgba(16,32,51,.08);
border-radius:16px;
padding:14px;
background:#f8fbff;
}
.community-info-grid strong,
.community-info-grid span{
display:block;
}
.community-info-grid strong{
color:#16314f;
margin-bottom:5px;
}
.community-info-grid span{
color:#64748b;
line-height:1.45;
}
.community-admin-list{
display:flex;
flex-direction:column;
gap:12px;
}
.community-admin-item{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:16px;
align-items:start;
border:1px solid rgba(16,32,51,.08);
border-radius:18px;
padding:16px;
background:#fff;
}
.community-admin-main h3{
margin:10px 0 6px;
color:#16314f;
}
.community-admin-main p{
margin:0 0 8px;
color:#334155;
line-height:1.5;
}
.community-admin-main small{
color:#64748b;
}
.inline-form{
display:inline-flex;
flex-wrap:wrap;
gap:8px;
}
@media (max-width:1100px){
.community-shell{
grid-template-columns:1fr;
}
.community-topic-list{
max-height:none;
}
}
@media (max-width:760px){
.community-hero,
.community-admin-hero,
.community-detail-head,
.community-topic,
.community-admin-item{
grid-template-columns:1fr;
flex-direction:column;
}
.community-topic-meta{
min-width:0;
align-items:flex-start;
text-align:left;
}
.community-info-grid{
grid-template-columns:1fr;
}
.community-mod-actions,
.community-admin-actions{
justify-content:flex-start;
}
}
/* Community Live-System Erweiterung */
.live-community .community-rules{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}
.live-community .community-rules div{
border:1px solid rgba(16,32,51,.08);
border-radius:16px;
padding:14px 16px;
background:#f8fbff;
}
.live-community .community-rules strong,
.live-community .community-rules span{
display:block;
}
.live-community .community-rules strong{
color:#16314f;
margin-bottom:5px;
}
.live-community .community-rules span{
color:#64748b;
line-height:1.45;
}
.community-mini-badges{
display:flex;
flex-wrap:wrap;
gap:5px;
margin-bottom:6px;
}
.community-mini-badges em{
font-style:normal;
font-size:.68rem;
font-weight:900;
border-radius:999px;
padding:3px 7px;
color:#0d5960;
background:#e9fbfb;
border:1px solid rgba(13,139,141,.14);
}
.community-mini-badges em.danger{
color:#991b1b;
background:#fef2f2;
border-color:#fecaca;
}
.community-topic.is-hidden,
.community-admin-item.is-hidden,
.community-message.hidden-reply{
opacity:.68;
background:#f8fafc;
}
.community-report-form{
display:flex;
align-items:center;
gap:8px;
margin-top:12px;
flex-wrap:wrap;
}
.community-report-form select{
min-width:150px;
max-width:220px;
}
.message-actions{
margin-top:12px;
display:flex;
justify-content:flex-end;
}
.pill.danger{
background:#fef2f2;
color:#991b1b;
border:1px solid #fecaca;
}
.section-head.compact{
margin-bottom:10px;
}
.section-head.compact h2,
.section-head.compact h3{
margin-bottom:2px;
}
.section-head.compact p{
margin:0;
color:#64748b;
}
@media (max-width:900px){
.live-community .community-rules{
grid-template-columns:1fr;
}
.message-actions{
justify-content:flex-start;
}
}
/* Klassisches Forum-Layout */
.forum-page{
display:flex;
flex-direction:column;
gap:16px;
}
.forum-header{
display:flex;
justify-content:space-between;
gap:18px;
align-items:flex-start;
}
.forum-header h2{
margin:8px 0 6px;
}
.forum-breadcrumb{
display:flex;
flex-wrap:wrap;
gap:8px;
align-items:center;
color:#64748b;
font-size:.92rem;
}
.forum-breadcrumb a{
color:#0d5960;
font-weight:800;
text-decoration:none;
}
.forum-layout{
display:grid;
grid-template-columns:minmax(0,1fr) 320px;
gap:16px;
align-items:start;
}
.forum-topic-layout{
display:grid;
grid-template-columns:minmax(0,1fr);
gap:16px;
}
.forum-main,
.forum-side{
min-width:0;
}
.forum-category-table{
padding:0;
overflow:hidden;
}
.forum-table-head,
.forum-row{
display:grid;
grid-template-columns:minmax(0,1fr) 90px 90px minmax(180px,260px);
gap:0;
align-items:center;
}
.forum-table-head{
background:#f8fbff;
color:#64748b;
font-size:.78rem;
font-weight:900;
text-transform:uppercase;
letter-spacing:.05em;
border-bottom:1px solid rgba(16,32,51,.08);
}
.forum-table-head > div,
.forum-row .forum-cell{
padding:14px 16px;
}
.forum-row{
color:inherit;
text-decoration:none;
border-bottom:1px solid rgba(16,32,51,.07);
transition:.16s ease;
}
.forum-row:hover{
background:#f8fbff;
}
.forum-title-cell{
display:flex;
gap:14px;
align-items:center;
}
.forum-icon{
width:42px;
height:42px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:14px;
background:#eefafa;
font-size:1.35rem;
}
.forum-icon.large{
width:56px;
height:56px;
font-size:1.7rem;
margin-bottom:10px;
}
.forum-title-cell strong,
.topic-title-cell strong,
.forum-latest-list strong{
display:block;
color:#16314f;
}
.forum-title-cell small,
.topic-title-cell small,
.forum-latest-list small{
display:block;
color:#64748b;
margin-top:4px;
line-height:1.4;
}
.forum-number{
font-weight:900;
color:#16314f;
text-align:center;
}
.forum-last strong,
.forum-last small{
display:block;
}
.forum-last strong{
color:#16314f;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.forum-last small,
.forum-last span{
color:#64748b;
}
.forum-latest-list{
display:flex;
flex-direction:column;
gap:10px;
}
.forum-latest-list a{
display:block;
padding:12px;
border:1px solid rgba(16,32,51,.08);
border-radius:14px;
text-decoration:none;
color:inherit;
}
.forum-latest-list a:hover{
background:#f8fbff;
}
.forum-rules-card p{
color:#64748b;
line-height:1.55;
}
.forum-board-head{
display:flex;
justify-content:space-between;
gap:18px;
align-items:flex-start;
}
.forum-board-head h2{
margin:0 0 6px;
}
.topic-table{
margin-top:14px;
border:1px solid rgba(16,32,51,.08);
border-radius:16px;
overflow:hidden;
}
.topic-table-head,
.topic-row{
display:grid;
grid-template-columns:minmax(0,1fr) 90px 90px 170px;
align-items:center;
}
.topic-table-head{
background:#f8fbff;
color:#64748b;
font-size:.78rem;
font-weight:900;
text-transform:uppercase;
letter-spacing:.05em;
}
.topic-table-head > div,
.topic-row > div{
padding:13px 15px;
}
.topic-row{
color:inherit;
text-decoration:none;
border-top:1px solid rgba(16,32,51,.07);
}
.topic-row:hover{
background:#f8fbff;
}
.topic-number{
text-align:center;
font-weight:900;
color:#16314f;
}
.topic-last{
color:#64748b;
font-size:.9rem;
}
.topic-badges{
display:flex;
flex-wrap:wrap;
gap:5px;
margin-bottom:5px;
}
.topic-badges span{
font-size:.68rem;
font-weight:900;
border-radius:999px;
padding:3px 7px;
color:#0d5960;
background:#e9fbfb;
}
.topic-badges span.danger{
color:#991b1b;
background:#fef2f2;
}
.topic-header-card h2{
margin:10px 0 6px;
}
.topic-header-top{
display:flex;
justify-content:space-between;
gap:18px;
align-items:flex-start;
}
.forum-post{
display:grid;
grid-template-columns:180px minmax(0,1fr);
border:1px solid rgba(16,32,51,.08);
border-radius:18px;
background:#fff;
overflow:hidden;
}
.forum-post + .forum-post{
margin-top:12px;
}
.forum-post aside{
background:#f8fbff;
border-right:1px solid rgba(16,32,51,.08);
padding:16px;
}
.forum-post aside strong,
.forum-post aside small{
display:block;
}
.forum-post aside strong{
color:#16314f;
}
.forum-post aside small{
color:#64748b;
margin-top:5px;
}
.forum-post > div{
padding:16px;
}
.forum-post.staff aside{
background:#eefafa;
box-shadow:inset 4px 0 0 #0d8b8d;
}
.post-meta{
color:#64748b;
font-size:.88rem;
margin-bottom:10px;
}
.post-body{
color:#1f2937;
line-height:1.7;
}
.forum-post.is-hidden,
.topic-row.is-hidden{
opacity:.68;
}
.forum-new-topic textarea{
min-height:180px;
}
@media (max-width:1000px){
.forum-layout{
grid-template-columns:1fr;
}
.forum-table-head,
.forum-row{
grid-template-columns:minmax(0,1fr) 70px 70px;
}
.forum-table-head > div:last-child,
.forum-row .forum-last{
display:none;
}
}
@media (max-width:760px){
.forum-header,
.forum-board-head,
.topic-header-top{
flex-direction:column;
}
.forum-table-head{
display:none;
}
.forum-row{
grid-template-columns:1fr;
}
.forum-row .forum-cell{
padding:12px 14px;
}
.forum-number{
display:none;
}
.topic-table-head{
display:none;
}
.topic-row{
grid-template-columns:1fr;
}
.topic-number,
.topic-last{
display:none;
}
.forum-post{
grid-template-columns:1fr;
}
.forum-post aside{
border-right:0;
border-bottom:1px solid rgba(16,32,51,.08);
}
}
/* FORUM V2 - stark sichtbares klassisches Layout */
.mh-forum{display:flex;flex-direction:column;gap:18px}
.mh-forum-top{display:flex;justify-content:space-between;gap:22px;align-items:flex-start;padding:24px;border:1px solid rgba(16,32,51,.08);border-radius:22px;background:linear-gradient(180deg,#fff,#f8fbff)}
.mh-forum-kicker{display:inline-flex;padding:5px 10px;border-radius:999px;background:#e9fbfb;color:#0d5960;font-weight:900;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}
.mh-forum-top h1{margin:10px 0 6px;color:#16314f;font-size:2rem}
.mh-forum-top p{margin:0;color:#64748b;max-width:760px;line-height:1.55}
.mh-forum-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.mh-forum-crumb{display:flex;gap:8px;align-items:center;color:#64748b;font-size:.92rem}
.mh-forum-crumb a{color:#0d5960;font-weight:800;text-decoration:none}
.mh-forum-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.mh-forum-card{background:#fff;border:1px solid rgba(16,32,51,.08);border-radius:20px;padding:18px;box-shadow:0 10px 28px rgba(15,23,42,.04)}
.mh-board{padding:0;overflow:hidden}
.mh-board-head,.mh-board-row{display:grid;grid-template-columns:minmax(0,1fr) 90px 90px minmax(190px,280px);align-items:center}
.mh-board-head{background:#16314f;color:#fff;font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em}
.mh-board-head>div,.mh-board-row>div{padding:15px 18px}
.mh-board-row{color:inherit;text-decoration:none;border-bottom:1px solid rgba(16,32,51,.08);transition:.16s ease}
.mh-board-row:hover{background:#f8fbff}
.mh-board-title{display:flex;gap:15px;align-items:center}
.mh-board-icon{width:46px;height:46px;border-radius:16px;background:#e9fbfb;display:flex;align-items:center;justify-content:center;font-size:1.45rem;flex:0 0 auto}
.mh-board-icon.big{width:62px;height:62px;font-size:1.8rem;margin-bottom:10px}
.mh-board-title strong,.mh-board-last strong,.mh-latest strong,.mh-topic-title strong{display:block;color:#16314f}
.mh-board-title small,.mh-board-last small,.mh-latest small,.mh-topic-title small{display:block;color:#64748b;margin-top:5px;line-height:1.45}
.mh-board-count,.mh-topic-num{text-align:center;font-weight:900;color:#16314f;font-size:1.05rem}
.mh-board-last span{color:#64748b}
.mh-latest{display:flex;flex-direction:column;gap:10px}
.mh-latest a{display:block;padding:12px;border:1px solid rgba(16,32,51,.08);border-radius:14px;text-decoration:none;color:inherit}
.mh-latest a:hover{background:#f8fbff}
.mh-forum-category-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.mh-forum-category-head h2{margin:0 0 6px;color:#16314f}
.mh-forum-category-head p{margin:0;color:#64748b}
.mh-topic-filter{display:grid;grid-template-columns:minmax(0,1fr) 190px auto;gap:12px;margin-bottom:16px}
.mh-topic-filter input,.mh-topic-filter select{height:44px;border:1px solid rgba(16,32,51,.12);border-radius:12px;padding:0 12px}
.mh-topic-table{border:1px solid rgba(16,32,51,.08);border-radius:16px;overflow:hidden}
.mh-topic-head,.mh-topic-row{display:grid;grid-template-columns:minmax(0,1fr) 90px 90px 180px;align-items:center}
.mh-topic-head{background:#f8fbff;color:#64748b;font-weight:900;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}
.mh-topic-head>div,.mh-topic-row>div{padding:14px 16px}
.mh-topic-row{text-decoration:none;color:inherit;border-top:1px solid rgba(16,32,51,.07)}
.mh-topic-row:hover{background:#f8fbff}
.mh-topic-badges{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:5px}
.mh-topic-badges span{font-size:.68rem;font-weight:900;border-radius:999px;padding:3px 7px;color:#0d5960;background:#e9fbfb}
.mh-topic-badges span.danger{color:#991b1b;background:#fef2f2}
.mh-topic-last{color:#64748b;font-size:.9rem}
.mh-topic-header{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.mh-topic-header h2{margin:10px 0 6px;color:#16314f}
.mh-mod-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.mh-post{display:grid;grid-template-columns:190px minmax(0,1fr);border:1px solid rgba(16,32,51,.08);border-radius:20px;background:#fff;overflow:hidden}
.mh-post+ .mh-post{margin-top:12px}
.mh-post aside{background:#f8fbff;border-right:1px solid rgba(16,32,51,.08);padding:18px}
.mh-post aside strong,.mh-post aside small{display:block}
.mh-post aside strong{color:#16314f}
.mh-post aside small{color:#64748b;margin-top:6px}
.mh-post>div{padding:18px}
.mh-post.team aside{background:#e9fbfb;box-shadow:inset 4px 0 0 #0d8b8d}
.mh-post-meta{color:#64748b;font-size:.88rem;margin-bottom:10px}
.mh-post-body{line-height:1.7;color:#1f2937}
@media(max-width:1000px){.mh-forum-grid{grid-template-columns:1fr}.mh-board-head,.mh-board-row{grid-template-columns:minmax(0,1fr) 70px 70px}.mh-board-head>div:last-child,.mh-board-last{display:none}}
@media(max-width:760px){.mh-forum-top,.mh-forum-category-head,.mh-topic-header{flex-direction:column}.mh-board-head,.mh-topic-head{display:none}.mh-board-row,.mh-topic-row{grid-template-columns:1fr}.mh-board-count,.mh-topic-num,.mh-topic-last{display:none}.mh-post{grid-template-columns:1fr}.mh-post aside{border-right:0;border-bottom:1px solid rgba(16,32,51,.08)}.mh-topic-filter{grid-template-columns:1fr}}
/* Forum V2: Abstand Seitenboxen und Zurück-Button */
.mh-forum-side{
display:flex;
flex-direction:column;
gap:18px;
}
.mh-forum-actions .btn:first-child:not(.primary){
border-color:rgba(13,139,141,.22);
color:#0f5960;
background:#fff;
}
.mh-forum-actions .btn:first-child:not(.primary):hover{
border-color:rgba(237,155,39,.42);
color:#9a5a00;
background:#fffaf3;
}
/* Forum V2: mehr Abstand zwischen Antworten und Letzter Beitrag */
.mh-board-head,
.mh-board-row{
grid-template-columns:minmax(0,1fr) 100px 125px minmax(220px,320px) !important;
column-gap:14px !important;
}
.mh-board-head > div,
.mh-board-row > div{
padding-left:18px !important;
padding-right:18px !important;
}
.mh-board-head > div:nth-child(3),
.mh-board-row > div:nth-child(3){
border-right:1px solid rgba(255,255,255,.22);
}
.mh-board-row > div:nth-child(3){
border-right:1px solid rgba(16,32,51,.08);
}
.mh-board-head > div:nth-child(4),
.mh-board-row > div:nth-child(4){
padding-left:24px !important;
}
@media(max-width:1000px){
.mh-board-head,
.mh-board-row{
grid-template-columns:minmax(0,1fr) 80px 90px !important;
column-gap:8px !important;
}
}
@media(max-width:760px){
.mh-board-row{
grid-template-columns:1fr !important;
}
}
/* Forum-Kategorien: professioneller, gruppiert und communityfreundlicher */
.mh-board-group{
display:flex;
justify-content:space-between;
gap:16px;
align-items:center;
padding:13px 18px;
background:#f8fafc;
border-top:1px solid rgba(16,32,51,.08);
border-bottom:1px solid rgba(16,32,51,.08);
}
.mh-board-group:first-of-type{
border-top:0;
}
.mh-board-group strong{
color:#16314f;
font-size:.9rem;
font-weight:900;
text-transform:uppercase;
letter-spacing:.06em;
}
.mh-board-group span{
color:#64748b;
font-size:.88rem;
}
.mh-board-row{
position:relative;
}
.mh-board-row::before{
content:"";
position:absolute;
left:0;
top:12px;
bottom:12px;
width:4px;
border-radius:999px;
background:#0d8b8d;
opacity:.75;
}
.mh-board-row.mh-board-accent-orange::before{
background:#ed9b27;
}
.mh-board-row.mh-board-accent-cyan::before{
background:#0d8b8d;
}
.mh-board-row:hover{
background:#fbfdff;
box-shadow:inset 0 0 0 999px rgba(13,139,141,.025);
}
.mh-board-accent-orange:hover{
box-shadow:inset 0 0 0 999px rgba(237,155,39,.045);
}
.mh-board-icon{
background:#e9fbfb !important;
border:1px solid rgba(13,139,141,.12);
}
.mh-board-accent-orange .mh-board-icon{
background:#fff7ec !important;
border-color:rgba(237,155,39,.18);
}
.mh-board-title strong{
font-size:1.02rem;
}
.mh-board-title small{
max-width:720px;
}
.mh-forum-top{
background:
radial-gradient(circle at top right, rgba(237,155,39,.10), transparent 34%),
radial-gradient(circle at bottom left, rgba(13,139,141,.10), transparent 32%),
#fff !important;
}
.mh-forum-kicker{
background:#e9fbfb !important;
border:1px solid rgba(13,139,141,.14);
}
.mh-latest a{
border-left:4px solid #0d8b8d;
}
.mh-latest a:nth-child(even){
border-left-color:#ed9b27;
}
.mh-forum-card h2{
color:#16314f;
}
@media(max-width:760px){
.mh-board-group{
align-items:flex-start;
flex-direction:column;
gap:4px;
}
.mh-board-row::before{
top:10px;
bottom:10px;
}
}
/* Forum-Adminpanel */
.admin-forum-note{
padding:12px 14px;
border:1px solid rgba(13,139,141,.16);
border-radius:14px;
background:#f6fbfb;
color:#334155;
}
#admin-forum-preview{
border:1px solid rgba(16,32,51,.08);
border-radius:16px;
padding:14px;
background:#fff;
}
.table small{
color:#64748b;
line-height:1.45;
}
/* Admin Benutzerverwaltung erweitert */
.admin-users-hero{
display:flex;
justify-content:space-between;
gap:18px;
align-items:flex-start;
}
.admin-users-hero h2{
margin:8px 0 6px;
}
.admin-users-table td{
vertical-align:top;
}
.admin-user-details{
margin-top:20px;
padding-top:16px;
border-top:1px solid rgba(16,32,51,.08);
}
.admin-user-details h3,
.danger-zone h3{
margin:0 0 12px;
color:#16314f;
}
.danger-zone{
margin-top:20px;
padding:16px;
border:1px solid #fecaca;
border-radius:16px;
background:#fef2f2;
}
.danger-zone p{
color:#7f1d1d;
line-height:1.5;
}
.danger-zone form{
display:flex;
flex-direction:column;
gap:10px;
}
.btn.danger{
background:#dc2626 !important;
color:#fff !important;
border-color:#dc2626 !important;
}
.btn.danger:hover{
background:#b91c1c !important;
border-color:#b91c1c !important;
}
.inline-form{
display:inline-flex;
gap:8px;
}
@media(max-width:760px){
.admin-users-hero{
flex-direction:column;
}
}
/* Admin Benutzerverwaltung: Mehrfachauswahl */
.bulk-toolbar{
display:flex;
justify-content:space-between;
gap:16px;
align-items:center;
margin:16px 0 12px;
padding:14px 16px;
border:1px solid rgba(16,32,51,.08);
border-radius:16px;
background:#f8fbff;
}
.bulk-toolbar strong,
.bulk-toolbar span{
display:block;
}
.bulk-toolbar strong{
color:#16314f;
}
.bulk-toolbar span{
color:#64748b;
margin-top:3px;
font-size:.9rem;
}
.admin-users-table input[type="checkbox"]{
width:18px;
height:18px;
accent-color:#0d8b8d;
}
@media(max-width:760px){
.bulk-toolbar{
flex-direction:column;
align-items:flex-start;
}
}
/* Rollen- und Rechteverwaltung */
.roles-hero{
display:flex;
justify-content:space-between;
gap:18px;
align-items:flex-start;
}
.roles-hero h2{
margin:8px 0 6px;
}
.permissions-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}
.permission-group{
border:1px solid rgba(16,32,51,.08);
border-radius:16px;
padding:14px;
background:#f8fbff;
}
.permission-group > strong{
display:block;
color:#16314f;
margin-bottom:10px;
}
.permission-group label{
display:grid;
grid-template-columns:22px minmax(0,1fr);
gap:8px;
align-items:start;
padding:8px 0;
border-top:1px solid rgba(16,32,51,.06);
}
.permission-group label:first-of-type{
border-top:0;
}
.permission-group input[type="checkbox"]{
width:18px;
height:18px;
accent-color:#0d8b8d;
margin-top:2px;
}
.permission-group span,
.permission-group small{
grid-column:2;
}
.permission-group span{
color:#1f2937;
font-weight:800;
}
.permission-group small{
color:#64748b;
font-size:.78rem;
}
@media(max-width:900px){
.permissions-grid{
grid-template-columns:1fr;
}
.roles-hero{
flex-direction:column;
}
}
/* Admin Navigation: klare Unterkategorien */
.nav-group-label{
margin:16px 12px 6px;
padding-top:12px;
border-top:1px solid rgba(255,255,255,.12);
color:rgba(255,255,255,.58);
font-size:.68rem;
font-weight:900;
text-transform:uppercase;
letter-spacing:.08em;
}
.nav-group-label:first-of-type{
margin-top:10px;
padding-top:0;
border-top:0;
}
.nav-section + .nav-group-label{
margin-top:8px;
}
.nav-group-label + a{
margin-top:2px;
}
/* Admin Navigation: hochwertigere Kategorie-Überschriften */
.nav-group-label{
margin:18px 10px 8px !important;
padding:0 !important;
border-top:0 !important;
display:flex;
align-items:center;
gap:10px;
color:rgba(255,255,255,.82) !important;
font-size:.72rem !important;
font-weight:950 !important;
text-transform:uppercase;
letter-spacing:.085em;
}
.nav-group-label::before{
content:"";
width:7px;
height:7px;
border-radius:999px;
background:#0fb8c6;
box-shadow:0 0 0 4px rgba(15,184,198,.12);
flex:0 0 auto;
}
.nav-group-label:nth-of-type(even)::before{
background:#ed9b27;
box-shadow:0 0 0 4px rgba(237,155,39,.14);
}
.nav-group-label::after{
content:"";
height:1px;
flex:1;
background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,0));
}
.nav-group-label span{
white-space:nowrap;
}
.nav-section + .nav-group-label{
margin-top:12px !important;
}
.nav-group-label + a{
margin-top:4px !important;
}
.sidebar .nav-section{
margin-bottom:6px;
}
/* Admin Navigation: ruhigere und sauberere Typografie der Kategorie-Überschriften */
.nav-group-label{
font-size:.74rem !important;
font-weight:800 !important;
letter-spacing:.045em !important;
text-transform:none !important;
color:rgba(255,255,255,.78) !important;
line-height:1.25 !important;
}
.nav-group-label span{
font-family:inherit;
white-space:nowrap;
text-rendering:geometricPrecision;
-webkit-font-smoothing:antialiased;
}
.nav-group-label span::first-letter{
text-transform:uppercase;
}
.nav-group-label::before{
width:6px !important;
height:6px !important;
}
.nav-group-label::after{
opacity:.75;
}
/* Admin Navigation: Kategorie-Überschriften in Montserrat, nicht fett */
.nav-group-label{
font-family:"Montserrat","Inter","Segoe UI",Arial,sans-serif !important;
font-size:.76rem !important;
font-weight:400 !important;
letter-spacing:.025em !important;
text-transform:none !important;
color:rgba(255,255,255,.86) !important;
line-height:1.35 !important;
}
.nav-group-label span{
font-family:"Montserrat","Inter","Segoe UI",Arial,sans-serif !important;
font-weight:400 !important;
letter-spacing:.025em !important;
text-rendering:auto !important;
-webkit-font-smoothing:antialiased;
}
.nav-group-label::before{
width:5px !important;
height:5px !important;
box-shadow:0 0 0 3px rgba(15,184,198,.10) !important;
}
.nav-group-label:nth-of-type(even)::before{
box-shadow:0 0 0 3px rgba(237,155,39,.12) !important;
}
.nav-group-label::after{
opacity:.45 !important;
}
/* Admin Navigation: Kategorie-Überschriften größer und dezent unterstrichen */
.nav-group-label{
font-family:"Montserrat","Inter","Segoe UI",Arial,sans-serif !important;
font-size:.84rem !important;
font-weight:400 !important;
letter-spacing:.015em !important;
color:rgba(255,255,255,.92) !important;
margin:20px 12px 9px !important;
padding-bottom:5px !important;
border-bottom:1px solid rgba(255,255,255,.20) !important;
}
.nav-group-label span{
font-family:"Montserrat","Inter","Segoe UI",Arial,sans-serif !important;
font-weight:400 !important;
}
.nav-group-label::after{
display:none !important;
}
.nav-group-label::before{
width:5px !important;
height:5px !important;
}
.nav-section + .nav-group-label{
margin-top:14px !important;
}
/* UX-Komplettupgrade: Dashboards, Suche, Hinweise, Mobile */
.ux-dashboard .ux-hero{
display:flex;
justify-content:space-between;
gap:18px;
align-items:flex-start;
background:
radial-gradient(circle at top right, rgba(237,155,39,.10), transparent 30%),
radial-gradient(circle at bottom left, rgba(13,139,141,.10), transparent 34%),
#fff;
}
.ux-hero h2{
margin:8px 0 6px;
color:#16314f;
}
.ux-hero p{
margin:0;
color:#64748b;
line-height:1.55;
}
.help-choice-list{
display:flex;
flex-direction:column;
gap:10px;
}
.help-choice-list a,
.search-result{
display:block;
text-decoration:none;
color:inherit;
padding:13px 14px;
border:1px solid rgba(16,32,51,.08);
border-radius:14px;
background:#fff;
transition:.16s ease;
}
.help-choice-list a:hover,
.search-result:hover{
background:#f8fbff;
border-color:rgba(13,139,141,.22);
}
.help-choice-list strong,
.help-choice-list span,
.search-result strong,
.search-result span,
.search-result small{
display:block;
}
.help-choice-list strong,
.search-result strong{
color:#16314f;
}
.help-choice-list span,
.search-result small{
color:#64748b;
margin-top:4px;
line-height:1.4;
}
.search-result span{
color:#0d5960;
font-size:.72rem;
font-weight:900;
text-transform:uppercase;
letter-spacing:.06em;
}
.search-results{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
.global-search-form{
min-width:220px;
}
.global-search-form input{
width:100%;
height:38px;
border:1px solid rgba(16,32,51,.10);
border-radius:999px;
padding:0 14px;
background:#fff;
box-sizing:border-box;
}
.notification-btn{
position:relative;
min-width:42px;
justify-content:center;
}
.notification-btn span{
position:absolute;
top:-7px;
right:-7px;
min-width:18px;
height:18px;
border-radius:999px;
background:#ed9b27;
color:#fff;
font-size:.7rem;
font-weight:900;
display:flex;
align-items:center;
justify-content:center;
padding:0 5px;
}
.form-help-box{
margin-top:8px;
padding:10px 12px;
border:1px solid rgba(13,139,141,.14);
border-radius:12px;
background:#f6fbfb;
color:#475569;
font-size:.88rem;
line-height:1.45;
}
.pill.danger,
.pill.failed{
background:#fef2f2;
color:#991b1b;
border:1px solid #fecaca;
}
.pill.warn{
background:#fff7ed;
color:#9a3412;
border:1px solid #fed7aa;
}
.pill.ok{
background:#ecfdf5;
color:#065f46;
border:1px solid #a7f3d0;
}
@media(max-width:1000px){
.topbar{
flex-direction:column;
align-items:stretch;
}
.topbar-actions{
width:100%;
flex-wrap:wrap;
}
.global-search-form{
flex:1 1 100%;
min-width:0;
}
.search-results{
grid-template-columns:1fr;
}
}
@media(max-width:760px){
.ux-dashboard .ux-hero{
flex-direction:column;
}
.grid > .card[style*="grid-column:span 4"],
.grid > .card[style*="grid-column:span 5"],
.grid > .card[style*="grid-column:span 6"],
.grid > .card[style*="grid-column:span 7"],
.grid > .card[style*="grid-column:span 8"],
.grid > .card[style*="grid-column:span 12"]{
grid-column:span 12 !important;
}
.table,
.table thead,
.table tbody,
.table tr,
.table th,
.table td{
display:block;
}
.table thead{
display:none;
}
.table tr{
border:1px solid rgba(16,32,51,.08);
border-radius:14px;
margin-bottom:10px;
padding:10px;
background:#fff;
}
.table td{
border:0 !important;
padding:7px 4px !important;
}
}
/* Kunden-Navigation: gleiche Optik wie Admin-Navigation */
.sidebar .nav-section{
margin:14px 12px 8px;
color:rgba(255,255,255,.70);
font-family:"Montserrat","Inter","Segoe UI",Arial,sans-serif;
font-size:.76rem;
font-weight:500;
letter-spacing:.025em;
}
.nav-group-label{
font-family:"Montserrat","Inter","Segoe UI",Arial,sans-serif !important;
font-size:.84rem !important;
font-weight:400 !important;
letter-spacing:.015em !important;
color:rgba(255,255,255,.92) !important;
margin:20px 12px 9px !important;
padding-bottom:5px !important;
border-bottom:1px solid rgba(255,255,255,.20) !important;
display:flex;
align-items:center;
gap:10px;
text-transform:none !important;
line-height:1.35 !important;
}
.nav-group-label span{
font-family:"Montserrat","Inter","Segoe UI",Arial,sans-serif !important;
font-weight:400 !important;
white-space:nowrap;
}
.nav-group-label::before{
content:"";
width:5px !important;
height:5px !important;
border-radius:999px;
background:#0fb8c6;
box-shadow:0 0 0 3px rgba(15,184,198,.10) !important;
flex:0 0 auto;
}
.nav-group-label:nth-of-type(even)::before{
background:#ed9b27;
box-shadow:0 0 0 3px rgba(237,155,39,.12) !important;
}
.nav-group-label::after{
display:none !important;
}
.nav-section + .nav-group-label{
margin-top:14px !important;
}
.nav-group-label + a{
margin-top:4px !important;
}
/* Suche sichtbar in Admin- und Kundenpanel */
.topbar-actions-search{
display:flex !important;
align-items:center;
gap:10px;
flex-wrap:wrap;
}
.global-search-form{
display:flex !important;
align-items:center;
gap:8px;
min-width:360px;
max-width:520px;
flex:1 1 360px;
}
.global-search-form input{
height:40px;
min-width:240px;
flex:1;
border:1px solid rgba(16,32,51,.14);
border-radius:999px;
padding:0 15px;
background:#fff;
color:#16314f;
box-sizing:border-box;
}
.global-search-form input:focus{
outline:none;
border-color:#0d8b8d;
box-shadow:0 0 0 4px rgba(13,139,141,.12);
}
.search-submit-btn{
height:40px;
padding:0 16px !important;
white-space:nowrap;
}
.notification-btn{
position:relative;
min-width:42px;
justify-content:center;
}
.notification-btn span{
position:absolute;
top:-7px;
right:-7px;
min-width:18px;
height:18px;
border-radius:999px;
background:#ed9b27;
color:#fff;
font-size:.7rem;
font-weight:900;
display:flex;
align-items:center;
justify-content:center;
padding:0 5px;
}
.search-results{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
.search-result{
display:block;
text-decoration:none;
color:inherit;
padding:14px;
border:1px solid rgba(16,32,51,.08);
border-radius:14px;
background:#fff;
}
.search-result:hover{
background:#f8fbff;
border-color:rgba(13,139,141,.22);
}
.search-result span,
.search-result strong,
.search-result small{
display:block;
}
.search-result span{
color:#0d5960;
font-size:.72rem;
font-weight:900;
text-transform:uppercase;
letter-spacing:.06em;
}
.search-result strong{
color:#16314f;
margin-top:4px;
}
.search-result small{
color:#64748b;
margin-top:4px;
}
@media(max-width:900px){
.global-search-form{
flex:1 1 100%;
min-width:0;
max-width:none;
width:100%;
}
.global-search-form input{
min-width:0;
}
.search-results{
grid-template-columns:1fr;
}
}
/* UX-Erweiterung: FAQ, Onboarding, Aufgabenliste, Timeline, mobile Sidebar */
.sidebar-toggle-btn{
display:none;
align-items:center;
justify-content:center;
gap:6px;
border:1px solid rgba(16,32,51,.12);
background:#fff;
color:#16314f;
border-radius:999px;
height:40px;
padding:0 14px;
font-weight:700;
cursor:pointer;
}
.task-list{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:12px;
}
.task-item{
display:block;
text-decoration:none;
color:inherit;
padding:14px;
border:1px solid rgba(16,32,51,.08);
border-radius:16px;
background:#fff;
}
.task-item span{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:30px;
height:30px;
border-radius:999px;
background:#f1f5f9;
color:#16314f;
font-weight:900;
margin-bottom:8px;
}
.task-item strong,
.task-item small{
display:block;
}
.task-item small{
color:#64748b;
margin-top:4px;
line-height:1.4;
}
.task-item.warn span{background:#fff7ed;color:#9a3412;}
.task-item.danger span{background:#fef2f2;color:#991b1b;}
.task-item.ok span{background:#ecfdf5;color:#065f46;}
.task-item.info span{background:#eff6ff;color:#1d4ed8;}
.onboarding-mini{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.onboarding-mini span{
padding:9px 12px;
border-radius:999px;
border:1px solid rgba(16,32,51,.08);
background:#f8fafc;
color:#475569;
font-size:.9rem;
}
.onboarding-mini span.done{
background:#ecfdf5;
color:#065f46;
border-color:#a7f3d0;
}
.onboarding-steps{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
}
.onboarding-step{
text-decoration:none;
color:inherit;
padding:18px;
border-radius:18px;
border:1px solid rgba(16,32,51,.08);
background:#fff;
}
.onboarding-step > span{
display:flex;
width:34px;
height:34px;
border-radius:999px;
align-items:center;
justify-content:center;
background:#f1f5f9;
margin-bottom:12px;
font-weight:900;
}
.onboarding-step.is-done > span{
background:#ecfdf5;
color:#065f46;
}
.onboarding-step strong,
.onboarding-step small{
display:block;
}
.onboarding-step small{
color:#64748b;
margin-top:6px;
line-height:1.45;
}
.faq-search{
display:flex;
gap:10px;
align-items:center;
}
.faq-search input{
min-width:260px;
height:40px;
border:1px solid rgba(16,32,51,.12);
border-radius:999px;
padding:0 14px;
}
.faq-list{
display:grid;
gap:10px;
}
.faq-item{
border:1px solid rgba(16,32,51,.08);
border-radius:14px;
background:#fff;
padding:0;
overflow:hidden;
}
.faq-item summary{
cursor:pointer;
padding:15px 16px;
color:#16314f;
font-weight:700;
}
.faq-item summary span{
display:inline-block;
margin-right:8px;
color:#0d8b8d;
font-size:.72rem;
font-weight:900;
text-transform:uppercase;
letter-spacing:.06em;
}
.faq-item p{
margin:0;
padding:0 16px 16px;
color:#475569;
line-height:1.6;
}
.ux-timeline{
position:relative;
display:grid;
gap:10px;
}
.ux-timeline-item{
padding:12px 12px 12px 16px;
border-left:3px solid #0d8b8d;
background:#f8fafc;
border-radius:12px;
}
.ux-timeline-item span{
display:block;
color:#0d5960;
font-size:.72rem;
font-weight:900;
text-transform:uppercase;
letter-spacing:.06em;
}
.ux-timeline-item strong,
.ux-timeline-item small{
display:block;
}
.ux-timeline-item small{
color:#64748b;
margin-top:3px;
}
.permission-group label em{
display:block;
margin:3px 0 0 24px;
color:#64748b;
font-style:normal;
font-size:.78rem;
line-height:1.35;
}
@media(max-width:1100px){
.task-list,
.onboarding-steps{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:780px){
.sidebar-toggle-btn{
display:inline-flex;
}
body:not(.sidebar-open) .sidebar{
transform:translateX(-105%);
}
.sidebar{
position:fixed;
z-index:1000;
inset:0 auto 0 0;
width:min(84vw,320px);
transform:translateX(0);
transition:transform .2s ease;
box-shadow:20px 0 50px rgba(15,23,42,.25);
}
.main{
margin-left:0 !important;
}
.task-list,
.onboarding-steps{
grid-template-columns:1fr;
}
.faq-search{
width:100%;
flex-direction:column;
align-items:stretch;
}
.faq-search input{
min-width:0;
width:100%;
}
}
/* F.A.Q. Verwaltung */
.faq-tabs{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
}
.admin-faq-page textarea{
min-height:180px;
resize:vertical;
}
.admin-faq-page .table td{
vertical-align:top;
}
.faq-item p{
white-space:normal;
}
@media(max-width:760px){
.faq-tabs{
flex-direction:column;
align-items:stretch;
}
.faq-tabs .btn{
width:100%;
justify-content:center;
}
}
/* F.A.Q.-Verwaltung: mehr Abstand zwischen Text und Buttons im Kopfbereich */
.admin-faq-page .ux-hero{
align-items:flex-start !important;
gap:34px !important;
}
.admin-faq-page .ux-hero p{
margin-bottom:0 !important;
max-width:680px;
}
.admin-faq-page .ux-hero .actions-row{
margin-top:10px !important;
padding-top:8px;
gap:12px !important;
flex-shrink:0;
}
@media(max-width:900px){
.admin-faq-page .ux-hero{
gap:20px !important;
}
.admin-faq-page .ux-hero .actions-row{
width:100%;
margin-top:4px !important;
}
}
/* Admin-Forum-Zugriff */
.admin-forum-access-note{
margin:0 0 14px;
}
.notice.info{
border-color:rgba(13,139,141,.20);
background:#f0fdfa;
color:#0f5961;
}
/* Premium UI + Kundenakte + Support-Assistent */
.card{
border-radius:18px;
box-shadow:0 16px 40px rgba(15,23,42,.06);
}
.premium-hero{
background:
radial-gradient(circle at 90% 10%, rgba(237,155,39,.13), transparent 28%),
radial-gradient(circle at 0% 100%, rgba(13,139,141,.12), transparent 30%),
#fff !important;
align-items:flex-start !important;
gap:32px !important;
}
.premium-hero .actions-row{
padding-top:10px;
gap:12px;
}
.customer-file-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
margin-bottom:16px;
}
.customer-file-head h2{
margin:7px 0 3px;
}
.customer-file-head p{
margin:0;
color:#64748b;
}
.customer-file-stats{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
margin:16px 0 18px;
}
.customer-file-stats div{
padding:14px;
border:1px solid rgba(16,32,51,.08);
border-radius:16px;
background:#f8fafc;
}
.customer-file-stats strong,
.customer-file-stats span{
display:block;
}
.customer-file-stats strong{
color:#16314f;
font-size:1.3rem;
}
.customer-file-stats span{
color:#64748b;
font-size:.84rem;
margin-top:3px;
}
.contact-customer-list{
display:flex;
flex-direction:column;
gap:9px;
margin-top:16px;
max-height:680px;
overflow:auto;
padding-right:4px;
}
.contact-customer{
display:block;
text-decoration:none;
color:inherit;
border:1px solid rgba(16,32,51,.08);
border-radius:14px;
padding:12px 13px;
background:#fff;
transition:.16s ease;
}
.contact-customer:hover,
.contact-customer.active{
background:#f0fdfa;
border-color:rgba(13,139,141,.28);
}
.contact-customer strong,
.contact-customer span{
display:block;
}
.contact-customer span{
color:#64748b;
margin-top:4px;
font-size:.84rem;
line-height:1.35;
}
.contact-panels{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}
.contact-panel{
border:1px solid rgba(16,32,51,.08);
border-radius:18px;
padding:16px;
background:#fff;
}
.contact-panel h3{
margin:0 0 12px;
}
.contact-notes{
display:flex;
flex-direction:column;
gap:12px;
}
.contact-note{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
border:1px solid rgba(16,32,51,.08);
border-radius:15px;
padding:13px;
background:#f8fafc;
}
.contact-note.wichtig{
background:#fff7ed;
border-color:#fed7aa;
}
.contact-note.rueckruf{
background:#eff6ff;
border-color:#bfdbfe;
}
.contact-note span,
.contact-note strong,
.contact-note p{
display:block;
}
.contact-note span{
color:#64748b;
font-size:.78rem;
}
.contact-note strong{
color:#16314f;
margin-top:3px;
}
.contact-note p{
color:#475569;
margin:7px 0 0;
line-height:1.5;
}
.timeline-wide{
margin-top:16px;
}
.assistant-topic-list{
display:flex;
flex-direction:column;
gap:12px;
}
.assistant-topic-list a{
display:block;
text-decoration:none;
color:inherit;
border:1px solid rgba(16,32,51,.08);
border-radius:16px;
padding:15px;
background:#fff;
transition:.16s ease;
}
.assistant-topic-list a:hover,
.assistant-topic-list a.active{
background:#f0fdfa;
border-color:rgba(13,139,141,.28);
}
.assistant-topic-list strong,
.assistant-topic-list span{
display:block;
}
.assistant-topic-list span{
color:#64748b;
margin-top:5px;
line-height:1.45;
}
.compact-form .field{
margin-bottom:0;
}
.compact-faq{
margin-top:10px;
}
.assistant-next-step{
margin-top:16px;
}
.table{
border-collapse:separate;
border-spacing:0 8px;
}
.table tbody tr{
box-shadow:0 8px 22px rgba(15,23,42,.04);
}
.table tbody td{
background:#fff;
}
.table tbody td:first-child{
border-radius:12px 0 0 12px;
}
.table tbody td:last-child{
border-radius:0 12px 12px 0;
}
input, select, textarea{
transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input:focus, select:focus, textarea:focus{
border-color:#0d8b8d !important;
box-shadow:0 0 0 4px rgba(13,139,141,.11) !important;
outline:none !important;
}
@media(max-width:1000px){
.contact-panels,
.customer-file-stats{
grid-template-columns:1fr 1fr;
}
}
@media(max-width:760px){
.premium-hero,
.customer-file-head{
flex-direction:column;
}
.contact-panels,
.customer-file-stats{
grid-template-columns:1fr;
}
.contact-note{
flex-direction:column;
}
}
/* Pro Upgrade: Kundenakte, Installation, Rollen, Ticket-Komfort */
.install-check-list{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
.install-check{
border:1px solid rgba(16,32,51,.08);
border-radius:16px;
padding:14px;
background:#fff;
}
.install-check span{
display:inline-flex;
padding:4px 8px;
border-radius:999px;
font-size:.7rem;
font-weight:900;
letter-spacing:.05em;
margin-bottom:8px;
}
.install-check.ok span{background:#ecfdf5;color:#065f46;}
.install-check.warn span{background:#fff7ed;color:#9a3412;}
.install-check.danger span{background:#fef2f2;color:#991b1b;}
.install-check strong,
.install-check em,
.install-check small{
display:block;
}
.install-check strong{
color:#16314f;
}
.install-check em{
color:#0d8b8d;
font-style:normal;
margin-top:4px;
}
.install-check small{
color:#64748b;
margin-top:6px;
line-height:1.45;
}
.customer-file-related{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
margin-top:16px;
}
.quick-actions-panel{
margin-top:16px;
}
.pro-actions{
gap:10px;
flex-wrap:wrap;
}
.role-warning{
margin-bottom:14px;
}
.role-access-preview{
padding:13px;
border:1px solid rgba(13,139,141,.14);
border-radius:14px;
background:#f6fbfb;
margin-bottom:14px;
}
.role-access-preview > strong{
display:block;
margin-bottom:10px;
color:#16314f;
}
.admin-ticket-detail .section-head > .actions-row{
align-items:center;
}
.btn.primary,
button.btn.primary{
box-shadow:0 10px 22px rgba(13,139,141,.18);
}
.btn:hover{
transform:translateY(-1px);
}
.empty{
border-radius:16px;
padding:18px;
border:1px dashed rgba(16,32,51,.15);
background:#f8fafc;
}
@media(max-width:900px){
.install-check-list,
.customer-file-related{
grid-template-columns:1fr;
}
}
/* Forum Upgrade: hochwertigere Beitrags- und Themenansicht */
.mh-topic-header-premium{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:24px;
background:
radial-gradient(circle at 100% 0%, rgba(237,155,39,.12), transparent 28%),
radial-gradient(circle at 0% 100%, rgba(13,139,141,.10), transparent 30%),
#fff;
}
.mh-topic-header-premium h2{
font-size:1.85rem;
line-height:1.18;
margin:12px 0 8px;
color:#16314f;
}
.mh-topic-header-premium p{
color:#64748b;
margin:0;
}
.mh-topic-overview{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
margin:14px 0 16px;
}
.mh-topic-overview div{
border:1px solid rgba(16,32,51,.08);
border-radius:16px;
background:#fff;
padding:14px;
box-shadow:0 10px 26px rgba(15,23,42,.045);
}
.mh-topic-overview strong,
.mh-topic-overview span{
display:block;
}
.mh-topic-overview strong{
color:#16314f;
font-size:1.12rem;
}
.mh-topic-overview span{
color:#64748b;
margin-top:3px;
font-size:.86rem;
}
.mh-post-premium{
display:grid;
grid-template-columns:190px minmax(0,1fr);
gap:0;
overflow:hidden;
border:1px solid rgba(16,32,51,.08);
border-radius:20px;
background:#fff;
box-shadow:0 16px 38px rgba(15,23,42,.055);
margin:16px 0;
}
.mh-post-premium.team{
border-color:rgba(13,139,141,.24);
box-shadow:0 18px 42px rgba(13,139,141,.075);
}
.mh-post-author{
padding:20px 16px;
background:#f8fafc;
border-right:1px solid rgba(16,32,51,.08);
text-align:center;
}
.mh-post-premium.team .mh-post-author{
background:linear-gradient(180deg,#f0fdfa,#f8fafc);
}
.mh-author-avatar{
width:58px;
height:58px;
border-radius:18px;
margin:0 auto 12px;
display:flex;
align-items:center;
justify-content:center;
background:#0d8b8d;
color:#fff;
font-weight:900;
font-size:1.05rem;
box-shadow:0 10px 24px rgba(13,139,141,.20);
}
.mh-post-premium.team .mh-author-avatar{
background:#ed9b27;
box-shadow:0 10px 24px rgba(237,155,39,.20);
}
.mh-post-author strong{
display:block;
color:#16314f;
line-height:1.25;
}
.mh-post-author small{
display:block;
color:#64748b;
margin-top:4px;
}
.mh-post-author em{
display:block;
margin-top:14px;
font-style:normal;
color:#94a3b8;
font-size:.78rem;
line-height:1.45;
}
.mh-official-badge{
display:inline-flex;
margin-top:10px;
padding:5px 9px;
border-radius:999px;
background:#ecfdf5;
color:#065f46;
border:1px solid #a7f3d0;
font-size:.72rem;
font-weight:900;
}
.mh-post-content{
min-width:0;
}
.mh-post-toolbar{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
min-height:48px;
padding:0 20px;
border-bottom:1px solid rgba(16,32,51,.07);
background:#fff;
}
.mh-post-toolbar span{
color:#64748b;
font-size:.83rem;
font-weight:800;
}
.mh-post-toolbar a{
color:#0d8b8d;
text-decoration:none;
font-weight:900;
}
.mh-post-body{
padding:22px 24px;
color:#26364a;
font-size:1rem;
line-height:1.75;
word-break:break-word;
}
.mh-post-premium.team .mh-post-toolbar{
background:#f9fefc;
}
.mh-inline-mod{
padding:0 24px 18px;
}
.mh-reply-card{
margin-top:18px;
background:
radial-gradient(circle at 100% 0%, rgba(13,139,141,.10), transparent 25%),
#fff;
}
.mh-reply-card textarea{
min-height:170px;
font-size:1rem;
line-height:1.6;
}
.mh-topic-table{
overflow:hidden;
border-radius:18px;
}
.mh-topic-row{
transition:background .16s ease, transform .16s ease, border-color .16s ease;
}
.mh-topic-row:hover{
transform:translateY(-1px);
background:#f8fbff;
}
.mh-topic-badges span{
border-radius:999px;
padding:4px 8px;
}
@media(max-width:900px){
.mh-topic-header-premium{
flex-direction:column;
}
.mh-topic-overview{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.mh-post-premium{
grid-template-columns:1fr;
}
.mh-post-author{
border-right:0;
border-bottom:1px solid rgba(16,32,51,.08);
text-align:left;
display:grid;
grid-template-columns:58px minmax(0,1fr);
column-gap:12px;
align-items:center;
}
.mh-author-avatar{
margin:0;
grid-row:span 3;
}
.mh-post-author em{
margin-top:4px;
}
}
@media(max-width:560px){
.mh-topic-overview{
grid-template-columns:1fr;
}
.mh-post-toolbar,
.mh-post-body{
padding-left:16px;
padding-right:16px;
}
}
/* Forum: bessere Lesbarkeit der Namen in Beiträgen */
.mh-post-author strong{
font-family:"Montserrat","Inter","Segoe UI",Arial,sans-serif !important;
font-size:1.02rem !important;
font-weight:600 !important;
color:#10233f !important;
letter-spacing:0 !important;
line-height:1.35 !important;
margin-top:2px;
word-break:break-word;
}
.mh-post-author small{
font-family:"Montserrat","Inter","Segoe UI",Arial,sans-serif !important;
font-size:.86rem !important;
font-weight:500 !important;
color:#0d8b8d !important;
margin-top:6px !important;
line-height:1.35 !important;
}
.mh-post-author em{
font-size:.82rem !important;
color:#64748b !important;
line-height:1.5 !important;
margin-top:14px !important;
}
.mh-post-premium.team .mh-post-author strong{
color:#0f172a !important;
}
.mh-post-premium.team .mh-post-author small{
color:#b66b00 !important;
}
.mh-official-badge{
font-size:.76rem !important;
font-weight:700 !important;
letter-spacing:0 !important;
}
@media(max-width:900px){
.mh-post-author strong{
font-size:1rem !important;
}
.mh-post-author small{
font-size:.84rem !important;
}
}
/* Mobile Fix: Suche groß, Navigation scrollbar und Menüs einklappbar */
.sidebar{
display:flex;
flex-direction:column;
}
.sidebar .nav{
flex:1 1 auto;
min-height:0;
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
padding-bottom:18px;
}
.sidebar .sidebar-footer{
flex:0 0 auto;
}
.nav-mobile-group-content{
display:block;
}
.nav-group-label{
cursor:pointer;
user-select:none;
}
.nav-group-label::after{
content:"" !important;
}
.nav-group-label span::after{
content:"";
}
@media(min-width:781px){
.nav-mobile-group-content{
display:block !important;
}
}
@media(max-width:780px){
body.sidebar-open{
overflow:hidden;
}
.portal-shell{
min-height:100dvh;
}
.sidebar{
height:100dvh !important;
max-height:100dvh !important;
overflow:hidden !important;
display:flex !important;
flex-direction:column !important;
padding-bottom:0 !important;
}
.sidebar .brand{
flex:0 0 auto;
padding-bottom:12px;
}
.sidebar .nav{
flex:1 1 auto !important;
overflow-y:auto !important;
max-height:none !important;
padding:8px 10px 22px !important;
}
.sidebar .sidebar-footer{
display:none !important;
}
.nav-group-label{
min-height:44px;
margin:10px 4px 6px !important;
padding:10px 12px !important;
border:1px solid rgba(255,255,255,.14) !important;
border-radius:14px !important;
background:rgba(255,255,255,.075);
color:#fff !important;
justify-content:space-between;
}
.nav-group-label span{
white-space:normal !important;
line-height:1.25;
}
.nav-group-label span::after{
content:"▾";
display:inline-block;
margin-left:10px;
font-size:.78rem;
opacity:.75;
transition:transform .16s ease;
}
.nav-group-label.is-collapsed span::after{
transform:rotate(-90deg);
}
.nav-mobile-group-content{
display:none;
padding:2px 0 8px;
}
.nav-mobile-group-content.is-open{
display:block;
}
.nav-mobile-group-content a{
min-height:42px;
display:flex !important;
align-items:center;
margin:5px 4px !important;
padding:10px 13px !important;
border-radius:13px !important;
}
.nav > a{
min-height:42px;
display:flex !important;
align-items:center;
margin:5px 4px !important;
padding:10px 13px !important;
border-radius:13px !important;
}
.nav-section{
margin:12px 8px 8px !important;
}
.topbar{
gap:12px !important;
padding:14px !important;
}
.topbar > div:first-of-type{
min-width:0;
}
.topbar h1{
font-size:1.25rem !important;
line-height:1.2 !important;
}
.topbar-actions-search{
width:100% !important;
display:grid !important;
grid-template-columns:1fr auto;
gap:10px !important;
align-items:center !important;
}
.global-search-form{
grid-column:1 / -1;
width:100% !important;
max-width:none !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) auto;
gap:8px !important;
flex:none !important;
order:-1;
}
.global-search-form input{
width:100% !important;
min-width:0 !important;
height:50px !important;
font-size:1rem !important;
border-radius:16px !important;
padding:0 16px !important;
background:#fff !important;
border:2px solid rgba(13,139,141,.20) !important;
box-shadow:0 10px 24px rgba(15,23,42,.06) !important;
}
.search-submit-btn{
height:50px !important;
border-radius:16px !important;
padding:0 16px !important;
font-size:.95rem !important;
}
.notification-btn{
min-height:42px !important;
}
.topbar-actions-search .badge{
grid-column:1 / 2;
min-height:42px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
text-overflow:ellipsis;
}
.topbar-actions-search > .btn[href="logout.php"]{
grid-column:2 / 3;
min-height:42px;
}
}
@media(max-width:480px){
.global-search-form{
grid-template-columns:1fr;
}
.search-submit-btn{
width:100%;
}
.topbar-actions-search{
grid-template-columns:1fr;
}
.topbar-actions-search .badge,
.topbar-actions-search > .btn[href="logout.php"]{
grid-column:auto;
}
}
/* Mobile Fix: Logo in der mobilen Sidebar sichtbar halten */
@media(max-width:780px){
.sidebar .brand,
.sidebar .brand-stacked{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:6px !important;
min-height:118px !important;
padding:18px 14px 14px !important;
margin:0 0 6px !important;
flex:0 0 auto !important;
opacity:1 !important;
visibility:visible !important;
}
.sidebar .brand img,
.sidebar .portal-logo,
.sidebar .portal-logo-sidebar{
display:block !important;
width:132px !important;
max-width:78% !important;
height:auto !important;
max-height:54px !important;
object-fit:contain !important;
opacity:1 !important;
visibility:visible !important;
margin:0 auto 4px !important;
}
.sidebar .brand strong{
display:block !important;
color:#fff !important;
font-size:1rem !important;
line-height:1.2 !important;
text-align:center !important;
}
.sidebar .brand small{
display:block !important;
color:rgba(255,255,255,.72) !important;
font-size:.82rem !important;
text-align:center !important;
}
}
/* Mobile Sidebar UX: schließen, Overlay, bessere Bedienbarkeit */
.sidebar-backdrop{
display:none;
}
.sidebar-close-btn{
display:none;
}
@media(max-width:780px){
.sidebar-backdrop{
position:fixed;
inset:0;
z-index:998;
background:rgba(15,23,42,.48);
backdrop-filter:blur(2px);
opacity:0;
pointer-events:none;
transition:opacity .18s ease;
display:block;
}
body.sidebar-open .sidebar-backdrop{
opacity:1;
pointer-events:auto;
}
.sidebar{
z-index:999 !important;
width:min(88vw,340px) !important;
border-radius:0 22px 22px 0;
}
body:not(.sidebar-open) .sidebar{
transform:translateX(-110%) !important;
}
body.sidebar-open .sidebar{
transform:translateX(0) !important;
}
.sidebar-close-btn{
display:flex !important;
position:absolute;
top:12px;
right:12px;
z-index:3;
width:42px;
height:42px;
border-radius:999px;
border:1px solid rgba(255,255,255,.18);
background:rgba(255,255,255,.12);
color:#fff;
align-items:center;
justify-content:center;
font-size:1.85rem;
line-height:1;
cursor:pointer;
box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.sidebar-close-btn:active{
transform:scale(.96);
}
.sidebar-toggle-btn{
display:inline-flex !important;
min-height:44px;
padding:0 16px !important;
border-radius:999px !important;
background:#0d8b8d !important;
color:#fff !important;
border:0 !important;
font-weight:800 !important;
box-shadow:0 10px 24px rgba(13,139,141,.20);
}
.sidebar .brand,
.sidebar .brand-stacked{
padding-top:58px !important;
min-height:148px !important;
}
.sidebar .nav{
padding-top:4px !important;
scrollbar-width:thin;
}
.sidebar .nav::-webkit-scrollbar{
width:6px;
}
.sidebar .nav::-webkit-scrollbar-thumb{
background:rgba(255,255,255,.24);
border-radius:999px;
}
.nav > a:first-child,
.nav > a:nth-child(2),
.nav > a:nth-child(3),
.nav > a:nth-child(4){
background:rgba(255,255,255,.09);
border:1px solid rgba(255,255,255,.10);
font-weight:700;
}
.nav-group-label{
position:sticky;
top:0;
z-index:2;
backdrop-filter:blur(8px);
}
.nav-mobile-group-content a,
.nav > a{
font-size:.96rem !important;
line-height:1.25 !important;
}
.sidebar::after{
content:"Zum Schließen außerhalb tippen oder × nutzen";
display:block;
flex:0 0 auto;
padding:10px 16px 14px;
color:rgba(255,255,255,.58);
font-size:.76rem;
text-align:center;
border-top:1px solid rgba(255,255,255,.10);
}
.main{
width:100% !important;
}
}
@media(max-width:420px){
.sidebar{
width:92vw !important;
border-radius:0 18px 18px 0;
}
.sidebar-close-btn{
width:40px;
height:40px;
}
}
/* Startseite/Dashboard: Moinhosting Logo sichtbar im Hero-Bereich */
.dashboard-brand-hero{
position:relative;
align-items:center !important;
}
.dashboard-hero-logo{
flex:0 0 auto;
width:148px;
min-height:78px;
display:flex;
align-items:center;
justify-content:center;
padding:14px 18px;
border-radius:20px;
background:rgba(255,255,255,.82);
border:1px solid rgba(16,32,51,.08);
box-shadow:0 14px 34px rgba(15,23,42,.08);
}
.dashboard-hero-logo img{
display:block;
max-width:128px;
width:100%;
height:auto;
object-fit:contain;
}
@media(max-width:780px){
.dashboard-brand-hero{
align-items:flex-start !important;
}
.dashboard-hero-logo{
width:100%;
max-width:220px;
min-height:68px;
padding:12px 16px;
margin-bottom:4px;
}
.dashboard-hero-logo img{
max-width:170px;
}
}
/* Mobile Cleanup: Logo ganz oben und kompaktere Smartphone-Ansicht */
.main-top-logo-bar{
display:flex;
align-items:center;
justify-content:center;
padding:18px 20px 4px;
}
.main-top-logo-bar a{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 18px;
border-radius:18px;
background:rgba(255,255,255,.86);
border:1px solid rgba(16,32,51,.07);
box-shadow:0 12px 30px rgba(15,23,42,.06);
}
.main-top-logo-bar img{
display:block;
width:180px;
max-width:46vw;
height:auto;
object-fit:contain;
}
@media(min-width:781px){
.main-top-logo-bar{
justify-content:flex-start;
padding:22px 28px 0;
}
}
@media(max-width:780px){
.main-top-logo-bar{
padding:10px 12px 2px !important;
justify-content:center !important;
}
.main-top-logo-bar a{
padding:7px 13px !important;
border-radius:14px !important;
box-shadow:0 8px 20px rgba(15,23,42,.055) !important;
}
.main-top-logo-bar img{
width:142px !important;
max-width:58vw !important;
}
body{
font-size:14px;
}
.main{
padding:0 10px 16px !important;
}
.topbar{
margin:8px 0 10px !important;
padding:10px !important;
border-radius:16px !important;
gap:8px !important;
}
.topbar h1{
font-size:1.05rem !important;
line-height:1.18 !important;
margin:0 !important;
}
.topbar p{
font-size:.78rem !important;
margin-top:2px !important;
}
.sidebar-toggle-btn{
min-height:38px !important;
padding:0 12px !important;
font-size:.86rem !important;
}
.global-search-form input{
height:44px !important;
border-radius:14px !important;
font-size:.94rem !important;
}
.search-submit-btn{
height:44px !important;
border-radius:14px !important;
font-size:.9rem !important;
}
.grid{
gap:10px !important;
}
.card{
border-radius:16px !important;
padding:14px !important;
box-shadow:0 8px 22px rgba(15,23,42,.045) !important;
}
.card h2{
font-size:1.05rem !important;
line-height:1.25 !important;
margin-bottom:8px !important;
}
.card h3{
font-size:.98rem !important;
}
.ux-hero,
.premium-hero{
gap:10px !important;
padding:14px !important;
}
.ux-hero h2,
.premium-hero h2{
font-size:1.16rem !important;
line-height:1.22 !important;
margin:6px 0 5px !important;
}
.ux-hero p,
.premium-hero p{
font-size:.88rem !important;
line-height:1.42 !important;
}
.pill{
font-size:.72rem !important;
padding:5px 8px !important;
}
.stats{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:9px !important;
}
.stat{
padding:12px !important;
border-radius:15px !important;
}
.stat strong{
font-size:1.22rem !important;
}
.stat span{
font-size:.78rem !important;
}
.actions-row{
gap:7px !important;
}
.btn{
min-height:38px !important;
padding:8px 11px !important;
font-size:.86rem !important;
border-radius:12px !important;
}
.btn.small{
min-height:34px !important;
padding:7px 9px !important;
font-size:.8rem !important;
}
.help-choice-list,
.assistant-topic-list,
.contact-customer-list,
.stack-links{
gap:7px !important;
}
.help-choice-list a,
.assistant-topic-list a,
.contact-customer,
.search-result{
padding:10px 11px !important;
border-radius:13px !important;
}
.help-choice-list span,
.assistant-topic-list span,
.search-result small{
font-size:.82rem !important;
line-height:1.35 !important;
}
.kv{
padding:9px 0 !important;
gap:8px !important;
}
.kv span,
.kv small{
font-size:.82rem !important;
}
.table tr{
margin-bottom:8px !important;
padding:8px !important;
}
.table td{
padding:5px 3px !important;
font-size:.84rem !important;
}
.form-grid{
gap:10px !important;
}
.field label{
font-size:.82rem !important;
margin-bottom:5px !important;
}
input,
select,
textarea{
min-height:40px !important;
border-radius:12px !important;
font-size:.92rem !important;
}
textarea{
min-height:110px !important;
}
.mh-topic-overview{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:8px !important;
}
.mh-topic-overview div{
padding:10px !important;
border-radius:13px !important;
}
.mh-topic-header-premium h2{
font-size:1.22rem !important;
}
.mh-post-premium{
border-radius:16px !important;
margin:10px 0 !important;
}
.mh-post-author{
padding:12px !important;
grid-template-columns:46px minmax(0,1fr) !important;
}
.mh-author-avatar{
width:46px !important;
height:46px !important;
border-radius:14px !important;
}
.mh-post-body{
padding:14px !important;
font-size:.92rem !important;
line-height:1.55 !important;
}
.mh-post-toolbar{
min-height:40px !important;
padding:0 14px !important;
}
.portal-copyright{
font-size:.75rem !important;
padding:12px 8px !important;
}
/* Weniger visuelle Überladung auf Mobilgeräten */
.dashboard-hero-logo{
display:none !important;
}
.sidebar::after{
font-size:.7rem !important;
padding:8px 12px 10px !important;
}
}
@media(max-width:420px){
.stats,
.mh-topic-overview{
grid-template-columns:1fr !important;
}
.main-top-logo-bar img{
width:126px !important;
}
.card{
padding:12px !important;
}
}
/* Mobile Cleanup 2: weniger anzeigen, Begrüßung direkt unter Logo */
.main-top-logo-bar{
flex-direction:column;
gap:7px;
}
.main-mobile-greeting{
display:none;
text-align:center;
}
.main-mobile-greeting strong{
display:block;
color:#16314f;
font-size:1.02rem;
line-height:1.2;
}
.main-mobile-greeting span{
display:block;
color:#64748b;
font-size:.78rem;
margin-top:2px;
}
@media(min-width:781px){
.main-top-logo-bar{
align-items:flex-start;
}
.main-mobile-greeting{
display:none;
}
}
@media(max-width:780px){
.main-top-logo-bar{
gap:6px !important;
padding-top:12px !important;
padding-bottom:8px !important;
}
.main-mobile-greeting{
display:block !important;
}
/* Topbar mobil weniger doppelt: Titel/App-Name ausblenden, Fokus auf Menü + Suche */
.topbar > div:first-of-type{
display:none !important;
}
.topbar{
display:grid !important;
grid-template-columns:auto 1fr !important;
align-items:start !important;
}
.topbar-actions-search{
grid-column:1 / -1 !important;
}
/* Dashboard mobil: weniger Karten direkt sichtbar */
.dashboard-mobile-clean > .card,
.dashboard-mobile-clean > article,
.dashboard-mobile-clean > section{
display:none !important;
}
.dashboard-mobile-clean > .ux-hero,
.dashboard-mobile-clean > article:first-child,
.dashboard-mobile-clean > section.stats,
.dashboard-mobile-clean > .stats{
display:grid !important;
}
.dashboard-mobile-clean > article:nth-of-type(2),
.dashboard-mobile-clean > article:nth-of-type(3){
display:block !important;
}
/* Hero mobil kürzer: Begrüßung steht jetzt oben, daher weniger Text anzeigen */
.dashboard-mobile-clean .ux-hero small,
.dashboard-mobile-clean .ux-hero p{
display:none !important;
}
.dashboard-mobile-clean .ux-hero h2{
font-size:1.04rem !important;
margin:0 !important;
}
.dashboard-mobile-clean .ux-hero{
min-height:auto !important;
}
/* Statistiken mobil auf wichtigste, Rest ausblenden */
.dashboard-mobile-clean .stats .stat:nth-child(n+5){
display:none !important;
}
/* Lange Nebenlisten mobil verstecken, damit es nicht erschlägt */
.dashboard-mobile-clean .ux-timeline,
.dashboard-mobile-clean .onboarding-mini,
.dashboard-mobile-clean .help-choice-list{
max-height:220px;
overflow:hidden;
}
/* In normalen mobilen Seiten weniger sekundäre Infos zeigen */
.topbar-actions-search .badge{
display:none !important;
}
.notification-btn{
justify-self:start;
}
.topbar-actions-search > .btn[href="logout.php"]{
justify-self:end;
}
/* Kundenbereich: Karten nicht mehr so wuchtig */
.card p{
line-height:1.38 !important;
}
.section-head p{
display:none !important;
}
}
@media(max-width:480px){
.dashboard-mobile-clean > article:nth-of-type(3){
display:none !important;
}
.dashboard-mobile-clean .stats .stat:nth-child(n+3){
display:none !important;
}
}
/* Mobile Fix: keine doppelte Begrüßung, Bereichstitel direkt unter Logo */
@media(max-width:780px){
.main-mobile-greeting{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
gap:2px !important;
}
.main-mobile-greeting span{
order:1;
display:block !important;
color:#0d8b8d !important;
font-size:.82rem !important;
font-weight:700 !important;
letter-spacing:.01em !important;
margin:0 0 1px !important;
}
.main-mobile-greeting strong{
order:2;
display:block !important;
color:#16314f !important;
font-size:.98rem !important;
font-weight:600 !important;
line-height:1.2 !important;
}
/* Auf dem Dashboard mobil keine zweite Begrüßungs-/Bereichsüberschrift anzeigen */
.dashboard-mobile-clean > .ux-hero,
.dashboard-mobile-clean > article:first-child{
display:none !important;
}
/* Stats/erste sinnvolle Inhalte rücken dadurch direkt nach oben */
.dashboard-mobile-clean{
margin-top:4px !important;
}
}
/* HARD FIX Mobile Begrüßung: Struktur erzwingen, doppelte Begrüßung entfernen */
.main-top-logo-bar-final{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:6px !important;
}
.main-mobile-greeting-final{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
gap:2px !important;
}
.main-mobile-greeting-final span{
display:block !important;
order:1 !important;
color:#0d8b8d !important;
font-size:.86rem !important;
font-weight:800 !important;
line-height:1.15 !important;
margin:0 !important;
}
.main-mobile-greeting-final strong{
display:block !important;
order:2 !important;
color:#16314f !important;
font-size:1rem !important;
font-weight:600 !important;
line-height:1.2 !important;
margin:0 !important;
}
@media(max-width:780px){
.main-top-logo-bar,
.main-top-logo-bar-final{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
padding:10px 10px 8px !important;
gap:6px !important;
}
.main-top-logo-bar a{
margin:0 !important;
}
.main-top-logo-bar img{
width:136px !important;
max-width:62vw !important;
}
.main-mobile-greeting,
.main-mobile-greeting-final{
display:flex !important;
visibility:visible !important;
opacity:1 !important;
}
/* Dashboard-Begrüßung wirklich entfernen */
.mobile-dashboard-hero-remove,
.dashboard-mobile-clean > .mobile-dashboard-hero-remove,
.dashboard-mobile-clean > .ux-hero,
.dashboard-mobile-clean > article:first-child{
display:none !important;
visibility:hidden !important;
height:0 !important;
min-height:0 !important;
max-height:0 !important;
overflow:hidden !important;
padding:0 !important;
margin:0 !important;
border:0 !important;
}
/* Nach dem Entfernen der Hero-Begrüßung oben weniger Abstand */
.dashboard-mobile-clean{
margin-top:0 !important;
gap:9px !important;
}
/* Falls alte Regeln wieder versuchen die Greeting-Zeilen zu drehen */
.main-mobile-greeting span,
.main-mobile-greeting strong{
float:none !important;
position:static !important;
}
}
/* Mobile Logo: ohne Rahmen, ohne Box, ohne Hintergrund */
.main-top-logo-bar a,
.main-top-logo-bar-final a{
background:transparent !important;
border:0 !important;
box-shadow:none !important;
padding:0 !important;
border-radius:0 !important;
}
.main-top-logo-bar img,
.main-top-logo-bar-final img{
filter:none !important;
}
@media(max-width:780px){
.main-top-logo-bar,
.main-top-logo-bar-final{
padding-top:12px !important;
}
.main-top-logo-bar a,
.main-top-logo-bar-final a{
background:transparent !important;
border:none !important;
box-shadow:none !important;
padding:0 !important;
margin:0 !important;
border-radius:0 !important;
}
.main-top-logo-bar img,
.main-top-logo-bar-final img{
width:144px !important;
max-width:64vw !important;
height:auto !important;
display:block !important;
}
}
/* Desktop Navigation Restore: Mobile-Regeln greifen nicht mehr auf Desktop */
@media(min-width:781px){
.sidebar-backdrop,
.sidebar-close-btn{
display:none !important;
}
body.sidebar-open{
overflow:auto !important;
}
.sidebar{
position:sticky !important;
top:0 !important;
height:100vh !important;
width:280px !important;
transform:none !important;
border-radius:0 !important;
overflow-y:auto !important;
display:block !important;
z-index:auto !important;
}
.sidebar .brand,
.sidebar .brand-stacked{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
min-height:auto !important;
padding:0 !important;
margin:0 0 24px !important;
}
.sidebar .portal-logo-sidebar,
.sidebar .portal-logo,
.sidebar .brand img{
display:block !important;
width:auto !important;
max-width:190px !important;
max-height:70px !important;
height:auto !important;
margin:0 auto 12px !important;
object-fit:contain !important;
}
.sidebar .nav{
display:flex !important;
flex-direction:column !important;
gap:8px !important;
overflow:visible !important;
max-height:none !important;
padding:0 !important;
}
.sidebar .nav > a,
.nav-mobile-group-content a{
display:block !important;
min-height:auto !important;
margin:0 !important;
padding:12px 14px !important;
border-radius:14px !important;
font-size:.95rem !important;
line-height:1.25 !important;
}
.nav-mobile-group-content{
display:contents !important;
}
.nav-group-label{
position:static !important;
top:auto !important;
min-height:auto !important;
margin:18px 0 8px !important;
padding:0 !important;
border:0 !important;
background:transparent !important;
cursor:default !important;
pointer-events:none !important;
backdrop-filter:none !important;
}
.nav-group-label span::after{
content:"" !important;
}
.sidebar::after{
content:none !important;
display:none !important;
}
.main{
width:auto !important;
}
}
/* Sidebar Footer: mehr Abstand zur Navigation */
.sidebar-footer{
margin-top:30px !important;
padding-top:18px !important;
border-top:1px solid rgba(255,255,255,.10) !important;
}
@media(min-width:781px){
.sidebar-footer{
margin-top:38px !important;
}
}
@media(max-width:780px){
.sidebar-footer{
margin-top:22px !important;
padding-top:14px !important;
}
}
/* Header Rework: Logo zentral, Suche sauber, oben nicht mehr zerschossen */
.main-brand-header{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:6px !important;
padding:22px 24px 8px !important;
text-align:center !important;
}
.main-brand-logo{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
padding:0 !important;
margin:0 !important;
border-radius:0 !important;
}
.main-brand-logo img{
display:block !important;
width:190px !important;
max-width:42vw !important;
height:auto !important;
object-fit:contain !important;
}
.main-brand-greeting{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
gap:2px !important;
margin-top:2px !important;
}
.main-brand-greeting span{
color:#0d8b8d !important;
font-size:.86rem !important;
font-weight:800 !important;
line-height:1.15 !important;
}
.main-brand-greeting strong{
color:#16314f !important;
font-size:1.02rem !important;
font-weight:600 !important;
line-height:1.2 !important;
}
.clean-topbar{
display:grid !important;
grid-template-columns:auto minmax(160px,1fr) minmax(360px,540px) !important;
align-items:center !important;
gap:16px !important;
margin:12px 28px 18px !important;
padding:14px 16px !important;
border-radius:20px !important;
}
.clean-topbar .sidebar-toggle-btn{
grid-column:1 !important;
}
.clean-topbar .topbar-title{
grid-column:2 !important;
min-width:0 !important;
}
.clean-topbar .topbar-title h1{
margin:0 !important;
line-height:1.18 !important;
}
.clean-topbar .topbar-title p{
margin:2px 0 0 !important;
}
.clean-topbar .topbar-actions-search{
grid-column:3 !important;
width:100% !important;
display:grid !important;
grid-template-columns:minmax(220px,1fr) auto auto auto !important;
align-items:center !important;
gap:8px !important;
justify-content:end !important;
}
.clean-topbar .global-search-form{
width:100% !important;
min-width:0 !important;
max-width:none !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) auto !important;
gap:8px !important;
}
.clean-topbar .global-search-form input{
width:100% !important;
min-width:0 !important;
height:42px !important;
}
.clean-topbar .search-submit-btn{
height:42px !important;
white-space:nowrap !important;
}
.clean-topbar .notification-btn{
height:42px !important;
min-width:42px !important;
padding:0 12px !important;
}
.clean-topbar .badge{
max-width:170px !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
.clean-topbar > *{
min-width:0 !important;
}
/* Alte Logo-Regeln neutralisieren */
.main-top-logo-bar,
.main-top-logo-bar-final{
display:none !important;
}
.dashboard-hero-logo{
display:none !important;
}
@media(max-width:1180px){
.clean-topbar{
grid-template-columns:auto minmax(130px,1fr) minmax(280px,1fr) !important;
margin-left:20px !important;
margin-right:20px !important;
}
.clean-topbar .topbar-actions-search{
grid-template-columns:minmax(180px,1fr) auto auto !important;
}
.clean-topbar .badge{
display:none !important;
}
}
@media(max-width:900px){
.clean-topbar{
grid-template-columns:auto 1fr !important;
gap:10px !important;
}
.clean-topbar .topbar-title{
grid-column:2 !important;
}
.clean-topbar .topbar-actions-search{
grid-column:1 / -1 !important;
grid-template-columns:minmax(0,1fr) auto auto !important;
}
}
/* Mobile: ruhig, kompakt, Logo oben zentral, Suche darunter vollbreit */
@media(max-width:780px){
.main-brand-header{
padding:12px 12px 8px !important;
gap:5px !important;
}
.main-brand-logo img{
width:144px !important;
max-width:64vw !important;
}
.main-brand-greeting span{
font-size:.82rem !important;
}
.main-brand-greeting strong{
font-size:.96rem !important;
}
.clean-topbar{
margin:6px 10px 12px !important;
padding:10px !important;
border-radius:16px !important;
grid-template-columns:1fr auto !important;
gap:8px !important;
}
.clean-topbar .sidebar-toggle-btn{
grid-column:1 !important;
grid-row:1 !important;
justify-self:start !important;
}
.clean-topbar .topbar-title{
display:none !important;
}
.clean-topbar .topbar-actions-search{
grid-column:1 / -1 !important;
grid-row:2 !important;
width:100% !important;
display:grid !important;
grid-template-columns:1fr auto !important;
gap:8px !important;
}
.clean-topbar .global-search-form{
grid-column:1 / -1 !important;
display:grid !important;
grid-template-columns:1fr auto !important;
width:100% !important;
}
.clean-topbar .global-search-form input{
height:44px !important;
border-radius:14px !important;
font-size:.94rem !important;
}
.clean-topbar .search-submit-btn{
height:44px !important;
border-radius:14px !important;
}
.clean-topbar .notification-btn{
grid-column:1 !important;
justify-self:start !important;
height:38px !important;
min-height:38px !important;
}
.clean-topbar .badge{
display:none !important;
}
.clean-topbar > .btn[href="logout.php"],
.clean-topbar .topbar-actions-search > .btn[href="logout.php"]{
grid-column:2 !important;
justify-self:end !important;
height:38px !important;
min-height:38px !important;
}
}
@media(max-width:420px){
.clean-topbar .global-search-form{
grid-template-columns:1fr !important;
}
.clean-topbar .search-submit-btn{
width:100% !important;
}
}
/* Header Final Rework: große Suche + saubere Benutzeranzeige */
.clean-topbar{
grid-template-columns:auto minmax(180px,1fr) minmax(520px,760px) !important;
gap:18px !important;
}
.topbar-actions-final{
display:grid !important;
grid-template-columns:minmax(340px,1fr) auto auto !important;
align-items:center !important;
gap:12px !important;
width:100% !important;
}
.global-search-form-final{
display:grid !important;
grid-template-columns:minmax(260px,1fr) auto !important;
gap:10px !important;
width:100% !important;
max-width:none !important;
min-width:0 !important;
}
.global-search-form-final input{
height:52px !important;
min-height:52px !important;
width:100% !important;
border-radius:17px !important;
padding:0 18px !important;
font-size:1rem !important;
background:#fff !important;
border:2px solid rgba(13,139,141,.18) !important;
box-shadow:0 10px 24px rgba(15,23,42,.055) !important;
}
.global-search-form-final input:focus{
border-color:#0d8b8d !important;
box-shadow:0 0 0 4px rgba(13,139,141,.12), 0 12px 28px rgba(15,23,42,.07) !important;
}
.global-search-form-final .search-submit-btn{
height:52px !important;
min-height:52px !important;
border-radius:17px !important;
padding:0 20px !important;
font-size:.96rem !important;
white-space:nowrap !important;
}
.topbar-user-box{
min-height:52px !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
align-items:flex-start !important;
gap:2px !important;
padding:8px 14px !important;
border-radius:17px !important;
background:#f8fafc !important;
border:1px solid rgba(16,32,51,.08) !important;
white-space:nowrap !important;
max-width:230px !important;
}
.topbar-user-name{
display:block !important;
max-width:200px !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
color:#16314f !important;
font-weight:700 !important;
font-size:.93rem !important;
line-height:1.15 !important;
}
.topbar-user-role{
display:block !important;
color:#0d8b8d !important;
font-weight:700 !important;
font-size:.76rem !important;
line-height:1.15 !important;
}
.topbar-action-buttons{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap:8px !important;
}
.topbar-action-buttons .btn{
min-height:52px !important;
height:52px !important;
border-radius:17px !important;
}
.topbar-action-buttons .notification-btn{
min-width:52px !important;
padding:0 13px !important;
}
/* alte Badge-Darstellung sicher aus dem Header neutralisieren */
.clean-topbar .badge,
.topbar-actions-final > .badge{
display:none !important;
}
@media(max-width:1280px){
.clean-topbar{
grid-template-columns:auto minmax(150px,1fr) minmax(420px,1.4fr) !important;
}
.topbar-actions-final{
grid-template-columns:minmax(280px,1fr) auto !important;
}
.topbar-user-box{
display:none !important;
}
}
@media(max-width:980px){
.clean-topbar{
grid-template-columns:auto 1fr !important;
}
.clean-topbar .topbar-title{
grid-column:2 !important;
}
.clean-topbar .topbar-actions-final{
grid-column:1 / -1 !important;
grid-template-columns:minmax(0,1fr) auto !important;
}
}
@media(max-width:780px){
.clean-topbar{
margin:6px 10px 12px !important;
padding:10px !important;
grid-template-columns:1fr !important;
gap:9px !important;
}
.clean-topbar .sidebar-toggle-btn{
grid-column:1 !important;
justify-self:start !important;
min-height:40px !important;
height:40px !important;
}
.clean-topbar .topbar-title{
display:none !important;
}
.clean-topbar .topbar-actions-final{
grid-column:1 !important;
display:grid !important;
grid-template-columns:1fr !important;
gap:9px !important;
width:100% !important;
}
.global-search-form-final{
grid-template-columns:1fr !important;
gap:8px !important;
}
.global-search-form-final input{
height:50px !important;
min-height:50px !important;
border-radius:16px !important;
font-size:1rem !important;
padding:0 16px !important;
}
.global-search-form-final .search-submit-btn{
height:46px !important;
min-height:46px !important;
width:100% !important;
border-radius:15px !important;
}
.topbar-user-box{
display:flex !important;
grid-row:2 !important;
width:100% !important;
max-width:none !important;
min-height:44px !important;
height:auto !important;
align-items:center !important;
text-align:center !important;
background:transparent !important;
border:0 !important;
padding:0 !important;
margin:0 !important;
}
.topbar-user-name{
max-width:100% !important;
text-align:center !important;
font-size:.9rem !important;
}
.topbar-user-role{
font-size:.74rem !important;
}
.topbar-action-buttons{
width:100% !important;
justify-content:space-between !important;
gap:8px !important;
}
.topbar-action-buttons .btn{
min-height:40px !important;
height:40px !important;
border-radius:13px !important;
font-size:.86rem !important;
}
.topbar-action-buttons .notification-btn{
min-width:46px !important;
}
}
@media(max-width:420px){
.global-search-form-final input{
height:48px !important;
min-height:48px !important;
}
}
/* Forum: saubere Autorennamen + moderne Initialen-Grafik */
.mh-post-author strong{
color:#10233f !important;
font-size:1.04rem !important;
font-weight:700 !important;
line-height:1.28 !important;
letter-spacing:-.01em !important;
}
.mh-post-author small{
color:#0d8b8d !important;
font-size:.84rem !important;
font-weight:700 !important;
margin-top:5px !important;
}
.mh-author-avatar{
position:relative !important;
isolation:isolate !important;
width:62px !important;
height:62px !important;
border-radius:22px !important;
background:
radial-gradient(circle at 30% 20%, rgba(255,255,255,.32), transparent 34%),
linear-gradient(135deg,#0d8b8d,#16314f) !important;
color:#fff !important;
font-size:1.08rem !important;
font-weight:800 !important;
letter-spacing:.02em !important;
box-shadow:
0 14px 30px rgba(13,139,141,.24),
inset 0 1px 0 rgba(255,255,255,.30) !important;
border:1px solid rgba(255,255,255,.26) !important;
}
.mh-author-avatar::after{
content:"";
position:absolute;
right:-2px;
bottom:-2px;
width:17px;
height:17px;
border-radius:999px;
background:#22c55e;
border:3px solid #f8fafc;
box-shadow:0 6px 14px rgba(34,197,94,.25);
z-index:2;
}
.mh-post-premium.team .mh-author-avatar{
background:
radial-gradient(circle at 30% 20%, rgba(255,255,255,.34), transparent 34%),
linear-gradient(135deg,#ed9b27,#0d8b8d) !important;
box-shadow:
0 14px 30px rgba(237,155,39,.24),
inset 0 1px 0 rgba(255,255,255,.30) !important;
}
.mh-post-premium.team .mh-author-avatar::after{
background:#ed9b27;
border-color:#f0fdfa;
}
.mh-post-premium.team .mh-post-author strong{
color:#10233f !important;
}
.mh-post-premium.team .mh-post-author small{
color:#b66b00 !important;
}
@media(max-width:900px){
.mh-author-avatar{
width:50px !important;
height:50px !important;
border-radius:18px !important;
font-size:.95rem !important;
}
.mh-author-avatar::after{
width:14px;
height:14px;
border-width:2px;
}
.mh-post-author strong{
font-size:.98rem !important;
}
}
/* Forum Web 2.0 Style Upgrade */
.mh-post-premium{
border:1px solid rgba(13,139,141,.12) !important;
border-radius:24px !important;
background:
linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.98)) !important;
box-shadow:
0 22px 46px rgba(15,23,42,.075),
inset 0 1px 0 rgba(255,255,255,.88) !important;
overflow:hidden !important;
}
.mh-post-premium.team{
border-color:rgba(237,155,39,.26) !important;
background:
radial-gradient(circle at 100% 0%, rgba(237,155,39,.13), transparent 28%),
linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.98)) !important;
box-shadow:
0 24px 54px rgba(237,155,39,.10),
0 16px 36px rgba(13,139,141,.06),
inset 0 1px 0 rgba(255,255,255,.90) !important;
}
.mh-post-author{
background:
radial-gradient(circle at 50% 0%, rgba(13,139,141,.13), transparent 42%),
linear-gradient(180deg,#ffffff,#f8fafc) !important;
border-right:1px solid rgba(13,139,141,.10) !important;
}
.mh-post-premium.team .mh-post-author{
background:
radial-gradient(circle at 50% 0%, rgba(237,155,39,.18), transparent 44%),
linear-gradient(180deg,#fffdf8,#f8fafc) !important;
}
.mh-author-avatar{
width:68px !important;
height:68px !important;
border-radius:24px !important;
background:
radial-gradient(circle at 28% 22%, rgba(255,255,255,.95) 0 9%, rgba(255,255,255,.28) 10% 22%, transparent 23%),
linear-gradient(145deg,#19b9bc 0%,#0d8b8d 42%,#16314f 100%) !important;
color:#fff !important;
font-size:1.12rem !important;
font-weight:900 !important;
text-shadow:0 2px 10px rgba(0,0,0,.22) !important;
box-shadow:
0 16px 32px rgba(13,139,141,.28),
inset 0 1px 0 rgba(255,255,255,.55),
inset 0 -10px 18px rgba(0,0,0,.10) !important;
border:1px solid rgba(255,255,255,.48) !important;
transform:translateZ(0);
}
.mh-author-avatar::before{
content:"";
position:absolute;
inset:7px 7px auto 7px;
height:42%;
border-radius:18px 18px 22px 22px;
background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.03));
pointer-events:none;
z-index:1;
}
.mh-author-avatar::after{
width:18px !important;
height:18px !important;
right:-3px !important;
bottom:-3px !important;
background:
radial-gradient(circle at 35% 30%, rgba(255,255,255,.85), transparent 28%),
linear-gradient(135deg,#45f08b,#16a34a) !important;
border:3px solid #fff !important;
box-shadow:
0 7px 16px rgba(34,197,94,.34),
inset 0 1px 0 rgba(255,255,255,.52) !important;
}
.mh-post-premium.team .mh-author-avatar{
background:
radial-gradient(circle at 28% 22%, rgba(255,255,255,.95) 0 9%, rgba(255,255,255,.30) 10% 22%, transparent 23%),
linear-gradient(145deg,#ffbd5a 0%,#ed9b27 42%,#0d8b8d 100%) !important;
box-shadow:
0 16px 34px rgba(237,155,39,.30),
inset 0 1px 0 rgba(255,255,255,.55),
inset 0 -10px 18px rgba(0,0,0,.10) !important;
}
.mh-post-premium.team .mh-author-avatar::after{
background:
radial-gradient(circle at 35% 30%, rgba(255,255,255,.88), transparent 28%),
linear-gradient(135deg,#ffd28a,#ed9b27) !important;
box-shadow:
0 7px 16px rgba(237,155,39,.36),
inset 0 1px 0 rgba(255,255,255,.55) !important;
}
.mh-post-author strong{
font-size:1.08rem !important;
font-weight:800 !important;
color:#12213a !important;
letter-spacing:-.018em !important;
}
.mh-post-author small{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
align-self:center !important;
margin-top:8px !important;
padding:5px 10px !important;
border-radius:999px !important;
background:rgba(13,139,141,.10) !important;
color:#0d7375 !important;
font-size:.76rem !important;
font-weight:800 !important;
border:1px solid rgba(13,139,141,.12) !important;
}
.mh-post-premium.team .mh-post-author small{
background:rgba(237,155,39,.13) !important;
color:#a65f00 !important;
border-color:rgba(237,155,39,.20) !important;
}
.mh-post-author em{
margin-top:16px !important;
padding-top:12px !important;
border-top:1px solid rgba(16,32,51,.08) !important;
color:#7c8aa0 !important;
}
.mh-post-toolbar{
min-height:54px !important;
background:
linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,250,252,.94)) !important;
border-bottom:1px solid rgba(13,139,141,.08) !important;
}
.mh-post-premium.team .mh-post-toolbar{
background:
linear-gradient(180deg,rgba(255,253,248,.95),rgba(248,250,252,.96)) !important;
}
.mh-post-toolbar span{
color:#52647a !important;
font-size:.82rem !important;
letter-spacing:.02em !important;
}
.mh-post-toolbar a{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-width:38px !important;
height:30px !important;
border-radius:999px !important;
background:rgba(13,139,141,.10) !important;
color:#0d7375 !important;
font-size:.82rem !important;
}
.mh-post-body{
background:
radial-gradient(circle at 100% 0%, rgba(13,139,141,.035), transparent 24%),
#fff !important;
color:#253348 !important;
}
.mh-official-badge{
background:
linear-gradient(180deg,#ecfdf5,#d1fae5) !important;
color:#047857 !important;
border:1px solid rgba(16,185,129,.22) !important;
box-shadow:0 8px 18px rgba(16,185,129,.12) !important;
}
.mh-post-premium.team .mh-official-badge{
background:
linear-gradient(180deg,#fff7ed,#ffedd5) !important;
color:#9a5800 !important;
border-color:rgba(237,155,39,.24) !important;
box-shadow:0 8px 18px rgba(237,155,39,.13) !important;
}
.mh-topic-header-premium,
.mh-reply-card{
border-radius:24px !important;
border:1px solid rgba(13,139,141,.10) !important;
box-shadow:
0 18px 42px rgba(15,23,42,.065),
inset 0 1px 0 rgba(255,255,255,.78) !important;
}
@media(max-width:900px){
.mh-author-avatar{
width:52px !important;
height:52px !important;
border-radius:19px !important;
font-size:.96rem !important;
}
.mh-post-author small{
align-self:flex-start !important;
margin-top:5px !important;
padding:4px 8px !important;
}
.mh-post-author em{
border-top:0 !important;
padding-top:0 !important;
margin-top:5px !important;
}
.mh-post-premium{
border-radius:19px !important;
}
}
/* Forum Cleanup: zurück zu sauberem Look, Fokus auf Web-2.0-Avatare */
.mh-post-premium{
border:1px solid rgba(16,32,51,.08) !important;
border-radius:20px !important;
background:#fff !important;
box-shadow:0 14px 34px rgba(15,23,42,.055) !important;
}
.mh-post-premium.team{
border-color:rgba(13,139,141,.18) !important;
background:#fff !important;
box-shadow:0 16px 36px rgba(15,23,42,.06) !important;
}
.mh-post-author{
background:#f8fafc !important;
border-right:1px solid rgba(16,32,51,.08) !important;
}
.mh-post-premium.team .mh-post-author{
background:#f8fbfc !important;
}
.mh-post-toolbar{
min-height:48px !important;
background:#fff !important;
border-bottom:1px solid rgba(16,32,51,.07) !important;
}
.mh-post-premium.team .mh-post-toolbar{
background:#fcfefe !important;
}
.mh-post-toolbar a{
background:rgba(13,139,141,.08) !important;
color:#0d7375 !important;
border-radius:999px !important;
}
.mh-post-body{
background:#fff !important;
}
/* Schlichte moderne Web-2.0-Avatare */
.mh-author-avatar{
position:relative !important;
width:60px !important;
height:60px !important;
border-radius:18px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
overflow:hidden !important;
color:#ffffff !important;
font-size:1rem !important;
font-weight:800 !important;
letter-spacing:.02em !important;
text-shadow:0 1px 2px rgba(0,0,0,.18) !important;
background:
linear-gradient(180deg,#42c5c7 0%, #169ea0 48%, #0d8b8d 49%, #116c77 100%) !important;
border:1px solid rgba(255,255,255,.45) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
inset 0 -10px 14px rgba(0,0,0,.08),
0 10px 22px rgba(13,139,141,.20) !important;
}
.mh-author-avatar::before{
content:"";
position:absolute;
left:6px;
right:6px;
top:5px;
height:46%;
border-radius:14px 14px 20px 20px;
background:linear-gradient(180deg,rgba(255,255,255,.50),rgba(255,255,255,.08));
pointer-events:none;
}
.mh-author-avatar::after{
content:none !important;
}
.mh-post-premium.team .mh-author-avatar{
background:
linear-gradient(180deg,#ffc86d 0%, #f1ae46 48%, #ed9b27 49%, #ce7b0a 100%) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
inset 0 -10px 14px rgba(0,0,0,.08),
0 10px 22px rgba(237,155,39,.20) !important;
}
.mh-post-author strong{
font-size:1.02rem !important;
font-weight:700 !important;
color:#10233f !important;
letter-spacing:-.01em !important;
}
.mh-post-author small{
display:block !important;
padding:0 !important;
margin-top:6px !important;
background:transparent !important;
border:0 !important;
color:#0d8b8d !important;
font-size:.82rem !important;
font-weight:700 !important;
}
.mh-post-premium.team .mh-post-author small{
color:#b66b00 !important;
}
.mh-post-author em{
color:#64748b !important;
border-top:0 !important;
padding-top:0 !important;
margin-top:12px !important;
}
.mh-official-badge{
box-shadow:none !important;
}
@media(max-width:900px){
.mh-author-avatar{
width:50px !important;
height:50px !important;
border-radius:15px !important;
font-size:.92rem !important;
}
.mh-author-avatar::before{
left:5px;
right:5px;
top:4px;
border-radius:11px 11px 16px 16px;
}
}
/* Forum: klassische Web-2.0 User-Avatare wie im Referenzstil */
.mh-author-avatar{
position:relative !important;
width:76px !important;
height:88px !important;
min-width:76px !important;
flex:0 0 76px !important;
border-radius:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
overflow:visible !important;
color:transparent !important;
font-size:0 !important;
text-shadow:none !important;
margin:0 auto 10px !important;
}
/* Kopf + Haare */
.mh-author-avatar::before{
content:"";
position:absolute;
left:16px;
top:2px;
width:44px;
height:44px;
border-radius:50%;
background:
radial-gradient(circle at 50% 62%, #ffd9b2 0%, #f6c18f 62%, #e1a66f 100%);
box-shadow:
inset 0 7px 10px rgba(255,255,255,.38),
0 3px 8px rgba(0,0,0,.12);
z-index:2;
}
/* Haare + Körper */
.mh-author-avatar::after{
content:"";
position:absolute;
inset:0;
z-index:3;
background:
/* Haare oben */
radial-gradient(ellipse at 50% 16px, #8f5618 0 22px, transparent 23px),
radial-gradient(ellipse at 32px 20px, #9a5e1d 0 10px, transparent 11px),
radial-gradient(ellipse at 45px 19px, #74400d 0 12px, transparent 13px),
/* Haarkante rechts */
linear-gradient(135deg, transparent 0 61%, #8a5115 62% 74%, transparent 75%) 34px 16px / 24px 20px no-repeat,
/* Hals */
linear-gradient(#efbf8a, #dfa470) 33px 42px / 10px 10px no-repeat,
/* Schultern/Körper */
linear-gradient(135deg, #1f47d4 0 47%, #eef0f4 48% 100%) 13px 49px / 50px 26px no-repeat,
linear-gradient(225deg, #090909 0 47%, #f5f7fb 48% 100%) 13px 49px / 50px 26px no-repeat,
radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.22), transparent 70%) 10px 70px / 56px 10px no-repeat;
border-radius:0;
}
/* Team-Variante: etwas hochwertiger/farblich anders */
.mh-post-premium.team .mh-author-avatar::after{
background:
radial-gradient(ellipse at 50% 16px, #8f5618 0 22px, transparent 23px),
radial-gradient(ellipse at 32px 20px, #9a5e1d 0 10px, transparent 11px),
radial-gradient(ellipse at 45px 19px, #74400d 0 12px, transparent 13px),
linear-gradient(135deg, transparent 0 61%, #8a5115 62% 74%, transparent 75%) 34px 16px / 24px 20px no-repeat,
linear-gradient(#efbf8a, #dfa470) 33px 42px / 10px 10px no-repeat,
linear-gradient(135deg, #0d8b8d 0 47%, #eef7f7 48% 100%) 13px 49px / 50px 26px no-repeat,
linear-gradient(225deg, #ed9b27 0 47%, #f8fbff 48% 100%) 13px 49px / 50px 26px no-repeat,
radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.22), transparent 70%) 10px 70px / 56px 10px no-repeat;
}
.mh-post-author{
text-align:center !important;
}
.mh-post-author strong{
display:block !important;
margin-top:2px !important;
}
.mh-post-author small{
display:block !important;
margin-top:4px !important;
}
@media(max-width:900px){
.mh-author-avatar{
width:62px !important;
height:72px !important;
min-width:62px !important;
flex-basis:62px !important;
margin:0 0 8px !important;
}
.mh-author-avatar::before{
left:13px;
top:2px;
width:36px;
height:36px;
}
.mh-author-avatar::after{
background:
radial-gradient(ellipse at 50% 13px, #8f5618 0 18px, transparent 19px),
radial-gradient(ellipse at 26px 16px, #9a5e1d 0 8px, transparent 9px),
radial-gradient(ellipse at 37px 15px, #74400d 0 10px, transparent 11px),
linear-gradient(135deg, transparent 0 61%, #8a5115 62% 74%, transparent 75%) 27px 12px / 20px 16px no-repeat,
linear-gradient(#efbf8a, #dfa470) 27px 35px / 8px 8px no-repeat,
linear-gradient(135deg, #1f47d4 0 47%, #eef0f4 48% 100%) 10px 41px / 42px 21px no-repeat,
linear-gradient(225deg, #090909 0 47%, #f5f7fb 48% 100%) 10px 41px / 42px 21px no-repeat,
radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.22), transparent 70%) 8px 58px / 46px 8px no-repeat;
}
.mh-post-premium.team .mh-author-avatar::after{
background:
radial-gradient(ellipse at 50% 13px, #8f5618 0 18px, transparent 19px),
radial-gradient(ellipse at 26px 16px, #9a5e1d 0 8px, transparent 9px),
radial-gradient(ellipse at 37px 15px, #74400d 0 10px, transparent 11px),
linear-gradient(135deg, transparent 0 61%, #8a5115 62% 74%, transparent 75%) 27px 12px / 20px 16px no-repeat,
linear-gradient(#efbf8a, #dfa470) 27px 35px / 8px 8px no-repeat,
linear-gradient(135deg, #0d8b8d 0 47%, #eef7f7 48% 100%) 10px 41px / 42px 21px no-repeat,
linear-gradient(225deg, #ed9b27 0 47%, #f8fbff 48% 100%) 10px 41px / 42px 21px no-repeat,
radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.22), transparent 70%) 8px 58px / 46px 8px no-repeat;
}
}
/* Forum Avatar Final: echter Web-2.0 Avatar aus Referenzstil statt CSS-Formen */
.mh-author-avatar{
width:82px !important;
height:82px !important;
min-width:82px !important;
flex:0 0 82px !important;
margin:0 auto 12px !important;
border-radius:0 !important;
background:transparent url("../img/forum-avatar-web20-user.png") center center / contain no-repeat !important;
border:0 !important;
box-shadow:none !important;
overflow:visible !important;
color:transparent !important;
font-size:0 !important;
line-height:0 !important;
text-shadow:none !important;
}
.mh-author-avatar::before,
.mh-author-avatar::after{
content:none !important;
display:none !important;
background:none !important;
box-shadow:none !important;
border:0 !important;
}
.mh-post-premium.team .mh-author-avatar{
background-image:url("../img/forum-avatar-web20-team.png") !important;
}
.mh-post-author{
text-align:center !important;
}
.mh-post-author strong{
margin-top:0 !important;
}
@media(max-width:900px){
.mh-author-avatar{
width:64px !important;
height:64px !important;
min-width:64px !important;
flex-basis:64px !important;
margin:0 0 8px !important;
}
}
/* Forum: generierte Avatar-Bilder verwenden */
.mh-author-avatar{
width:82px !important;
height:82px !important;
min-width:82px !important;
flex:0 0 82px !important;
margin:0 auto 12px !important;
border-radius:0 !important;
background:transparent url("../img/forum-avatar-user.png") center center / contain no-repeat !important;
border:0 !important;
box-shadow:none !important;
overflow:visible !important;
color:transparent !important;
font-size:0 !important;
line-height:0 !important;
text-shadow:none !important;
}
.mh-author-avatar::before,
.mh-author-avatar::after{
content:none !important;
display:none !important;
background:none !important;
box-shadow:none !important;
border:0 !important;
}
.mh-post-premium.team .mh-author-avatar{
background-image:url("../img/forum-avatar-team.png") !important;
}
@media(max-width:900px){
.mh-author-avatar{
width:64px !important;
height:64px !important;
min-width:64px !important;
flex-basis:64px !important;
margin:0 0 8px !important;
}
}
/* Forum Team Avatar Fix: Team-Avatar explizit anzeigen */
.mh-author-avatar,
.mh-author-avatar.mh-avatar-user{
background:transparent url("../img/forum-avatar-user.png") center center / contain no-repeat !important;
}
.mh-author-avatar.mh-avatar-team,
.mh-post-premium.team .mh-author-avatar,
.mh-post.team .mh-author-avatar{
background:transparent url("../img/forum-avatar-team.png") center center / contain no-repeat !important;
}
.mh-author-avatar::before,
.mh-author-avatar::after{
content:none !important;
display:none !important;
}
/* Forum Editor: Textformatierung, Zitate, Anhänge */
.forum-editor-toolbar{
display:flex;
flex-wrap:wrap;
gap:7px;
padding:9px;
border:1px solid rgba(16,32,51,.08);
border-radius:14px 14px 0 0;
background:#f8fafc;
margin-bottom:0;
}
.forum-editor-toolbar button{
border:1px solid rgba(13,139,141,.14);
background:#fff;
color:#16314f;
border-radius:10px;
min-height:34px;
padding:0 10px;
font-weight:700;
cursor:pointer;
transition:.15s ease;
}
.forum-editor-toolbar button:hover{
background:#f0fdfa;
border-color:rgba(13,139,141,.28);
}
.forum-editor-toolbar + textarea{
border-radius:0 0 14px 14px !important;
min-height:170px;
}
.forum-post-tools{
display:flex;
align-items:center;
gap:8px;
}
.quote-btn{
min-height:30px !important;
padding:5px 10px !important;
}
.mh-post-body blockquote{
margin:12px 0;
padding:12px 14px;
border-left:4px solid #0d8b8d;
border-radius:12px;
background:#f0fdfa;
color:#2f465d;
}
.mh-post-body pre{
white-space:pre-wrap;
overflow:auto;
padding:12px 14px;
border-radius:12px;
background:#0f172a;
color:#e2e8f0;
}
.mh-post-body a{
color:#0d8b8d;
font-weight:700;
}
.forum-attachments{
display:flex;
flex-wrap:wrap;
gap:8px;
padding:0 24px 20px;
}
.forum-attachments > strong{
width:100%;
color:#64748b;
font-size:.82rem;
}
.forum-attachments a{
display:inline-flex;
align-items:center;
gap:7px;
text-decoration:none;
color:#16314f;
padding:8px 11px;
border-radius:12px;
border:1px solid rgba(16,32,51,.08);
background:#f8fafc;
font-weight:700;
font-size:.86rem;
}
.forum-attachments a:hover{
background:#f0fdfa;
border-color:rgba(13,139,141,.22);
}
@media(max-width:780px){
.forum-editor-toolbar{
gap:5px;
padding:7px;
}
.forum-editor-toolbar button{
min-height:32px;
padding:0 8px;
font-size:.78rem;
}
.forum-attachments{
padding:0 14px 14px;
}
}
/* FAQ Pro */
.faq-pro-hero{
align-items:center !important;
}
.faq-search-pro{
display:grid;
grid-template-columns:minmax(240px,1fr) auto;
gap:10px;
width:min(100%,520px);
}
.faq-search-pro input{
min-height:48px;
border-radius:16px;
padding:0 16px;
}
.faq-category-grid{
display:grid;
gap:10px;
}
.faq-category-grid a{
display:block;
text-decoration:none;
color:inherit;
border:1px solid rgba(16,32,51,.08);
border-radius:15px;
background:#fff;
padding:13px;
transition:.16s ease;
}
.faq-category-grid a:hover,
.faq-category-grid a.active{
background:#f0fdfa;
border-color:rgba(13,139,141,.25);
}
.faq-category-grid strong,
.faq-category-grid span{
display:block;
}
.faq-category-grid span{
color:#64748b;
margin-top:3px;
font-size:.84rem;
}
.faq-side-cta{
margin-top:18px;
padding:16px;
border-radius:16px;
background:#f8fafc;
border:1px solid rgba(16,32,51,.08);
}
.faq-side-cta p{
color:#64748b;
margin:6px 0 12px;
}
.faq-side-cta .btn{
margin:4px 4px 0 0;
}
.faq-pro-item{
border-radius:16px;
overflow:hidden;
}
.faq-answer-body{
padding:0 18px 16px;
color:#334155;
line-height:1.65;
}
.faq-feedback-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
padding:12px 18px 16px;
border-top:1px solid rgba(16,32,51,.06);
background:#f8fafc;
}
.faq-feedback-row form{
display:flex;
gap:7px;
flex-wrap:wrap;
}
.faq-feedback-row small{
color:#64748b;
}
.faq-popular-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}
.faq-popular-grid a{
display:block;
text-decoration:none;
color:inherit;
padding:15px;
border-radius:16px;
border:1px solid rgba(16,32,51,.08);
background:#fff;
}
.faq-popular-grid a:hover{
background:#f0fdfa;
border-color:rgba(13,139,141,.22);
}
.faq-popular-grid span{
display:block;
color:#0d8b8d;
font-size:.78rem;
font-weight:800;
margin-bottom:6px;
}
.faq-popular-grid strong{
color:#16314f;
}
/* Forum Pro */
.mh-topic-subscribe{
margin-left:auto;
}
.forum-admin-topic-tools{
margin:12px 0;
}
.forum-admin-topic-tools h3{
margin:0 0 10px;
}
.forum-admin-topic-tools select{
min-width:220px;
}
.forum-reaction-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:0 24px 20px;
flex-wrap:wrap;
}
.forum-reaction-row form{
display:flex;
gap:7px;
flex-wrap:wrap;
}
.forum-admin-edit{
margin-top:4px;
}
.forum-admin-edit summary{
cursor:pointer;
color:#0d8b8d;
font-weight:800;
}
.forum-admin-edit form{
margin-top:10px;
display:grid;
gap:8px;
}
.forum-admin-edit textarea{
min-height:120px;
}
.mh-inline-mod{
display:flex;
gap:8px;
flex-wrap:wrap;
}
.mh-inline-mod .danger{
background:#fee2e2 !important;
color:#991b1b !important;
}
@media(max-width:1000px){
.faq-category-card,
.faq-pro-page > article{
grid-column:span 12 !important;
}
.faq-popular-grid{
grid-template-columns:1fr;
}
}
@media(max-width:780px){
.faq-search-pro{
grid-template-columns:1fr;
width:100%;
}
.faq-feedback-row{
align-items:flex-start;
}
.forum-reaction-row{
padding:0 14px 14px;
}
}
/* Forum Rechte-Suite */
.forum-permission-form{
display:grid;
gap:18px;
}
.forum-permission-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.permission-toggle{
display:flex;
align-items:center;
gap:10px;
padding:13px;
border:1px solid rgba(16,32,51,.08);
border-radius:15px;
background:#fff;
}
.permission-toggle input{
width:18px;
height:18px;
}
.permission-toggle span{
font-weight:700;
color:#16314f;
}
.forum-limit-grid{
margin-top:4px;
}
.forum-rights-info{
display:grid;
gap:10px;
}
.forum-rights-info div{
padding:13px;
border-radius:15px;
border:1px solid rgba(16,32,51,.08);
background:#f8fafc;
}
.forum-rights-info strong,
.forum-rights-info span{
display:block;
}
.forum-rights-info span{
margin-top:4px;
color:#64748b;
font-size:.86rem;
}
.forum-rights-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}
.forum-rights-grid div{
padding:14px;
border-radius:16px;
border:1px solid rgba(16,32,51,.08);
background:#fff;
}
.forum-rights-grid div.allowed{
background:#ecfdf5;
border-color:#bbf7d0;
}
.forum-rights-grid div.denied{
background:#f8fafc;
color:#64748b;
}
.forum-rights-grid strong,
.forum-rights-grid span{
display:block;
}
.forum-rights-grid span{
margin-top:4px;
font-size:.84rem;
font-weight:800;
}
.forum-user-edit-panel{
padding:0 24px 18px;
}
.forum-user-edit-panel form{
display:grid;
gap:10px;
}
.forum-user-edit-panel textarea{
min-height:150px;
}
.inline-form{
display:inline-flex !important;
margin:0;
}
.btn.danger,
button.danger{
background:#fee2e2 !important;
color:#991b1b !important;
border-color:#fecaca !important;
}
.forum-post-tools{
flex-wrap:wrap;
}
@media(max-width:900px){
.forum-permission-grid,
.forum-rights-grid{
grid-template-columns:1fr;
}
.forum-user-edit-panel{
padding:0 14px 14px;
}
}
/* Forum Profil + Signaturen */
.profile-divider{
margin-top:10px;
padding-top:16px;
border-top:1px solid rgba(16,32,51,.08);
}
.profile-divider h3{
margin:0 0 4px;
}
.profile-divider p{
margin:0;
color:#64748b;
}
.forum-profile-preview{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
gap:6px;
padding:18px;
border-radius:18px;
background:#f8fafc;
border:1px solid rgba(16,32,51,.08);
}
.forum-profile-preview strong{
color:#16314f;
font-size:1.08rem;
}
.forum-profile-preview small{
color:#0d8b8d;
font-weight:800;
}
.forum-profile-preview span,
.forum-profile-preview a{
font-size:.88rem;
}
.forum-signature,
.forum-signature-preview{
margin:14px 24px 20px;
padding:13px 15px;
border-left:4px solid #0d8b8d;
border-radius:14px;
background:#f8fafc;
color:#475569;
font-size:.9rem;
line-height:1.55;
}
.forum-signature::before,
.forum-signature-preview::before{
content:"Signatur";
display:block;
color:#0d8b8d;
font-size:.72rem;
font-weight:900;
text-transform:uppercase;
letter-spacing:.06em;
margin-bottom:6px;
}
.forum-signature.public{
margin:0;
}
.forum-profile-link{
display:inline-flex;
align-self:center;
margin-top:7px;
font-size:.78rem;
color:#0d8b8d;
font-weight:800;
text-decoration:none;
}
.forum-profile-link:hover{
text-decoration:underline;
}
.public-forum-profile-hero{
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
align-items:center;
gap:20px;
border-radius:22px;
background:
radial-gradient(circle at 100% 0%, rgba(13,139,141,.10), transparent 28%),
#fff;
}
.public-forum-profile-hero h2{
margin:7px 0 3px;
}
.public-forum-profile-hero p{
margin:0;
color:#64748b;
}
.public-profile-meta{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:8px;
}
.public-profile-meta span,
.public-profile-meta a{
color:#0d8b8d;
font-weight:800;
text-decoration:none;
font-size:.86rem;
}
.compact-profile-topics .mh-topic-row{
grid-template-columns:minmax(0,1fr) auto;
}
@media(max-width:900px){
.public-forum-profile-hero{
grid-template-columns:1fr;
text-align:center;
}
.public-forum-profile-hero .mh-author-avatar{
margin:0 auto;
}
.public-profile-meta{
justify-content:center;
}
.forum-signature{
margin:10px 14px 14px;
}
}
/* Forum-Profil sichtbarer + Smiley-Auswahl */
.forum-smiley-picker{
display:flex;
flex-wrap:wrap;
gap:6px;
padding:8px 9px;
border-left:1px solid rgba(16,32,51,.08);
border-right:1px solid rgba(16,32,51,.08);
background:#fff;
}
.forum-smiley-picker button{
width:34px;
height:34px;
border-radius:10px;
border:1px solid rgba(16,32,51,.08);
background:#f8fafc;
cursor:pointer;
font-size:1.05rem;
line-height:1;
transition:.15s ease;
}
.forum-smiley-picker button:hover{
background:#f0fdfa;
border-color:rgba(13,139,141,.28);
transform:translateY(-1px);
}
.forum-smiley-picker + textarea{
border-top-left-radius:0 !important;
border-top-right-radius:0 !important;
}
#forum-profile{
scroll-margin-top:110px;
}
.profile-pro-page .ux-hero .actions-row .btn.primary,
.profile-pro-page .ux-hero .actions-row .btn:hover{
transform:translateY(-1px);
}
@media(max-width:780px){
.forum-smiley-picker{
gap:5px;
padding:7px;
}
.forum-smiley-picker button{
width:32px;
height:32px;
font-size:1rem;
}
}
/* Forum: bessere Zitatdarstellung */
.mh-post-body blockquote.forum-quote,
.forum-signature blockquote.forum-quote,
.forum-signature-preview blockquote.forum-quote{
margin:16px 0;
padding:0;
border:1px solid rgba(13,139,141,.18);
border-left:5px solid #0d8b8d;
border-radius:16px;
background:#f8ffff;
color:#334155;
overflow:hidden;
box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.forum-quote-head{
display:flex;
align-items:center;
gap:8px;
padding:10px 14px;
background:linear-gradient(180deg, #f0fdfa, #e9fbfb);
color:#0d6f72;
font-size:.82rem;
font-weight:900;
letter-spacing:.02em;
border-bottom:1px solid rgba(13,139,141,.12);
}
.forum-quote-head::before{
content:"❝";
display:inline-flex;
align-items:center;
justify-content:center;
width:24px;
height:24px;
border-radius:999px;
background:#0d8b8d;
color:#fff;
font-size:1rem;
line-height:1;
}
.forum-quote-body{
padding:14px 16px;
color:#475569;
line-height:1.6;
background:#ffffff;
}
.forum-quote-body br:first-child{
display:none;
}
/* alte Blockquotes ebenfalls etwas sauberer halten */
.mh-post-body blockquote:not(.forum-quote){
margin:16px 0;
padding:14px 16px;
border-left:5px solid #0d8b8d;
border-radius:14px;
background:#f0fdfa;
color:#334155;
}
/* Forum: erweiterte Smiley-Leiste */
.forum-smiley-picker-expanded{
max-height:132px;
overflow:auto;
align-items:center;
scrollbar-width:thin;
}
.forum-smiley-picker-expanded .smiley-group-label{
display:inline-flex;
align-items:center;
height:28px;
padding:0 8px;
border-radius:999px;
background:#eef6f8;
color:#0d6f72;
font-size:.72rem;
font-weight:900;
text-transform:uppercase;
letter-spacing:.04em;
margin:2px 2px 2px 0;
}
.forum-smiley-picker-expanded button{
font-size:1.08rem;
}
.forum-smiley-picker-expanded button:hover{
transform:translateY(-1px) scale(1.04);
}
@media(max-width:780px){
.forum-smiley-picker-expanded{
max-height:116px;
}
.forum-smiley-picker-expanded .smiley-group-label{
width:100%;
justify-content:flex-start;
margin-top:4px;
}
}
/* Kontoeinstellungen übersichtlicher + Signatur-Fix */
.account-settings-page{
align-items:start;
}
.account-settings-hero{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
background:
radial-gradient(circle at 100% 0%, rgba(13,139,141,.10), transparent 32%),
#fff;
}
.account-settings-hero h2{
margin:6px 0;
}
.account-settings-hero p{
margin:0;
color:#64748b;
}
.account-settings-nav{
position:sticky;
top:18px;
display:grid;
gap:10px;
}
.account-settings-nav h3{
margin:0 0 6px;
}
.account-settings-nav a{
display:block;
text-decoration:none;
color:inherit;
padding:13px;
border-radius:16px;
border:1px solid rgba(16,32,51,.08);
background:#fff;
transition:.16s ease;
}
.account-settings-nav a:hover,
.account-settings-nav a.active{
background:#f0fdfa;
border-color:rgba(13,139,141,.26);
transform:translateY(-1px);
}
.account-settings-nav strong,
.account-settings-nav span{
display:block;
}
.account-settings-nav strong{
color:#16314f;
}
.account-settings-nav span{
color:#64748b;
font-size:.84rem;
margin-top:3px;
}
.account-settings-main{
display:block;
}
.account-settings-form{
display:grid;
gap:16px;
}
.account-settings-section{
display:none;
}
.account-settings-section.is-active{
display:block;
}
.forum-settings-layout{
display:grid;
grid-template-columns:minmax(0,1fr) 280px;
gap:18px;
align-items:start;
}
.account-save-bar{
position:sticky;
bottom:12px;
z-index:10;
display:flex;
align-items:center;
gap:10px;
justify-content:flex-end;
padding:12px;
border-radius:18px;
background:rgba(255,255,255,.92);
border:1px solid rgba(16,32,51,.08);
box-shadow:0 12px 30px rgba(15,23,42,.10);
backdrop-filter:blur(10px);
}
.account-newsletter-field{
margin-top:16px;
}
.forum-signature{
margin:14px 24px 20px !important;
padding:13px 15px !important;
border-left:4px solid #0d8b8d !important;
border-radius:14px !important;
background:#f8fafc !important;
color:#475569 !important;
font-size:.9rem !important;
line-height:1.55 !important;
}
.forum-signature:before{
content:"Signatur";
display:block;
color:#0d8b8d;
font-size:.72rem;
font-weight:900;
text-transform:uppercase;
letter-spacing:.06em;
margin-bottom:6px;
}
@media(max-width:1000px){
.account-settings-nav,
.account-settings-main{
grid-column:span 12 !important;
}
.account-settings-nav{
position:relative;
top:auto;
grid-template-columns:repeat(2,minmax(0,1fr));
}
.forum-settings-layout{
grid-template-columns:1fr;
}
}
@media(max-width:700px){
.account-settings-hero{
display:block;
}
.account-settings-hero .actions-row{
margin-top:14px;
}
.account-settings-nav{
grid-template-columns:1fr;
}
.account-save-bar{
justify-content:stretch;
flex-direction:column;
}
.account-save-bar .btn{
width:100%;
}
}
/* Forum: Signatur klar vom Beitrag trennen - nicht wie Zitat darstellen */
.mh-post-content .forum-signature{
margin:18px 24px 18px !important;
padding:12px 0 0 !important;
border:0 !important;
border-top:1px dashed rgba(100,116,139,.45) !important;
border-left:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
color:#64748b !important;
font-size:.82rem !important;
line-height:1.45 !important;
max-width:640px;
}
.mh-post-content .forum-signature::before{
content:"" !important;
display:block !important;
width:42px !important;
height:2px !important;
margin:0 0 8px !important;
border-radius:999px !important;
background:rgba(13,139,141,.45) !important;
}
.mh-post-content .forum-signature *{
color:inherit !important;
}
.mh-post-content .forum-signature a{
color:#0d8b8d !important;
text-decoration:none !important;
font-weight:700 !important;
}
.mh-post-content .forum-signature a:hover{
text-decoration:underline !important;
}
.mh-post-content .forum-signature blockquote,
.mh-post-content .forum-signature blockquote.forum-quote{
margin:8px 0 !important;
padding:8px 10px !important;
border:1px solid rgba(100,116,139,.18) !important;
border-left:0 !important;
border-radius:10px !important;
background:rgba(248,250,252,.75) !important;
box-shadow:none !important;
}
.mh-post-content .forum-signature .forum-quote-head{
display:none !important;
}
.mh-post-content .forum-signature .forum-quote-body{
padding:0 !important;
background:transparent !important;
color:#64748b !important;
}
/* Vorschau/öffentliches Profil darf als Box bleiben, aber nicht als Zitat wirken */
.forum-signature-preview,
.forum-signature.public{
border-left:0 !important;
border-top:1px dashed rgba(100,116,139,.45) !important;
background:#f8fafc !important;
box-shadow:none !important;
}
.forum-signature-preview::before,
.forum-signature.public::before{
content:"Signatur-Vorschau" !important;
color:#64748b !important;
}
.forum-signature.public::before{
content:"Signatur" !important;
}
@media(max-width:780px){
.mh-post-content .forum-signature{
margin:14px 14px 14px !important;
max-width:none;
}
}
/* Forum: Signatur im klassischen Foren-Stil mit Label */
.mh-post-content .forum-signature{
margin:18px 24px 18px !important;
padding:9px 0 0 !important;
border:0 !important;
border-top:1px solid rgba(100,116,139,.35) !important;
border-left:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
color:#64748b !important;
font-size:.82rem !important;
line-height:1.45 !important;
max-width:680px !important;
}
.mh-post-content .forum-signature::before{
content:"Signatur" !important;
display:block !important;
width:auto !important;
height:auto !important;
margin:0 0 7px !important;
padding:0 !important;
border:0 !important;
background:transparent !important;
color:#94a3b8 !important;
font-size:.68rem !important;
font-weight:800 !important;
text-transform:uppercase !important;
letter-spacing:.08em !important;
}
.mh-post-content .forum-signature::after{
content:none !important;
display:none !important;
}
.mh-post-content .forum-signature p{
margin:0 0 4px !important;
}
.mh-post-content .forum-signature a{
color:#0d8b8d !important;
font-weight:700 !important;
text-decoration:none !important;
}
.mh-post-content .forum-signature a:hover{
text-decoration:underline !important;
}
/* Forum-Startseite: letzter Beitrag rechts direkt anklickbar */
.mh-board-row{
text-decoration:none;
color:inherit;
}
.mh-board-title-link,
.mh-board-last-link{
text-decoration:none !important;
color:inherit !important;
}
.mh-board-title-link:hover strong,
.mh-board-last-link:hover strong{
color:#0d8b8d !important;
}
.mh-board-last-link{
display:block;
border-radius:12px;
padding:4px 6px;
margin:-4px -6px;
}
.mh-board-last-link:hover{
background:#f0fdfa;
}
@media(max-width:780px){
.mh-post-content .forum-signature{
margin:14px 14px 14px !important;
max-width:none !important;
}
}
/* Forum: Autor-Metadaten unten anzeigen */
.mh-post-author{
display:flex !important;
flex-direction:column !important;
}
.mh-post-author .mh-author-post-meta{
margin-top:auto !important;
padding-top:14px !important;
width:100% !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
gap:8px !important;
}
.mh-post-author .mh-author-post-meta .mh-official-badge{
margin:0 !important;
align-self:center !important;
}
.mh-post-author .mh-author-post-meta em{
margin-top:0 !important;
color:#94a3b8 !important;
font-size:.78rem !important;
line-height:1.45 !important;
}
.mh-post-author > .mh-official-badge{
margin-top:0 !important;
}
@media(max-width:900px){
.mh-post-author .mh-author-post-meta{
margin-top:8px !important;
padding-top:8px !important;
align-items:flex-start !important;
}
}
/* Forum Pro 2: klassische Themenliste, Ränge, Benachrichtigungen, Vorschau */
.mh-topic-table-pro .mh-topic-head,
.mh-topic-table-pro .mh-topic-row-pro{
grid-template-columns:minmax(260px,1.7fr) minmax(150px,.8fr) 90px 90px minmax(150px,.9fr) !important;
}
.mh-topic-row-pro{
text-decoration:none;
}
.mh-topic-row-pro .mh-topic-title,
.mh-topic-row-pro .mh-topic-last-link{
text-decoration:none;
color:inherit;
}
.mh-topic-row-pro .mh-topic-title:hover strong,
.mh-topic-row-pro .mh-topic-last-link:hover strong{
color:#0d8b8d;
}
.topic-status-icon{
font-size:1rem;
background:#f8fafc !important;
}
.mh-topic-author{
display:flex;
flex-direction:column;
gap:5px;
color:#475569;
}
.mh-topic-author strong{
color:#16314f;
font-size:.9rem;
}
.forum-rank{
display:inline-flex;
align-items:center;
justify-content:center;
width:max-content;
max-width:100%;
padding:3px 8px;
border-radius:999px;
font-size:.68rem;
font-weight:900;
text-transform:uppercase;
letter-spacing:.04em;
background:#f1f5f9;
color:#64748b;
margin-top:5px;
}
.forum-rank-team{background:#fff7ed;color:#c2410c;}
.forum-rank-expert{background:#ecfdf5;color:#047857;}
.forum-rank-veteran{background:#eff6ff;color:#1d4ed8;}
.forum-rank-active{background:#f0fdfa;color:#0d6f72;}
.forum-rank-member{background:#f8fafc;color:#475569;}
.forum-rank-new{background:#f1f5f9;color:#64748b;}
.forum-preview-panel{
margin-top:10px;
border:1px solid rgba(16,32,51,.08);
border-radius:16px;
background:#fff;
overflow:hidden;
}
.forum-preview-panel > strong{
display:block;
padding:10px 14px;
background:#f8fafc;
border-bottom:1px solid rgba(16,32,51,.08);
color:#0d8b8d;
}
.forum-preview-body{
padding:14px;
line-height:1.6;
color:#334155;
}
.forum-notification-list,
.moderation-review-list,
.forum-user-rights-list{
display:grid;
gap:10px;
}
.forum-notification-item,
.moderation-review-item,
.forum-user-rights-item{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:14px;
border:1px solid rgba(16,32,51,.08);
border-radius:16px;
background:#fff;
text-decoration:none;
color:inherit;
}
.forum-notification-item.unread{
background:#f0fdfa;
border-color:rgba(13,139,141,.24);
}
.forum-notification-item strong,
.forum-notification-item span,
.forum-notification-item small{
display:block;
}
.forum-notification-item span,
.forum-notification-item small,
.moderation-review-item small{
color:#64748b;
}
.forum-user-rights-item{
display:block;
}
.forum-user-rights-item summary{
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.forum-user-rights-item summary strong,
.forum-user-rights-item summary small{
display:block;
}
.forum-user-rights-item summary small{
color:#64748b;
margin-top:3px;
}
.forum-user-rights-item form{
margin-top:14px;
padding-top:14px;
border-top:1px solid rgba(16,32,51,.08);
}
@media(max-width:1000px){
.mh-topic-table-pro .mh-topic-head{
display:none !important;
}
.mh-topic-table-pro .mh-topic-row-pro{
grid-template-columns:1fr !important;
gap:10px;
}
.mh-topic-author,
.mh-topic-last-link{
padding-left:0;
}
.moderation-review-item,
.forum-notification-item{
align-items:flex-start;
flex-direction:column;
}
}
/* Forum Pro2 Cleanup: Startseiten-Icons wieder sauber anzeigen */
.mh-board-title,
.mh-board-title-link{
display:flex !important;
align-items:center !important;
gap:14px !important;
min-width:0 !important;
}
.mh-board-icon{
width:44px !important;
height:44px !important;
min-width:44px !important;
flex:0 0 44px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:16px !important;
background:linear-gradient(180deg, #ffffff, #f8fafc) !important;
border:1px solid rgba(16,32,51,.08) !important;
box-shadow:0 8px 18px rgba(15,23,42,.06) !important;
font-size:1.35rem !important;
line-height:1 !important;
text-decoration:none !important;
overflow:hidden !important;
}
.mh-board-icon.big{
width:58px !important;
height:58px !important;
min-width:58px !important;
flex-basis:58px !important;
font-size:1.65rem !important;
}
.mh-board-title-link:hover .mh-board-icon{
transform:none !important;
}
.mh-board-title-link div{
min-width:0 !important;
}
.mh-board-title-link strong,
.mh-board-title-link small{
display:block !important;
}
/* Beitragsansicht: doppelte Team-Rolle vermeiden */
.mh-post-author .forum-rank-team{
display:none !important;
}
/* FINAL CLEANUP: Rang mittig + Startseiten-Icons sauber */
.mh-post-author{
text-align:center !important;
align-items:center !important;
}
.mh-post-author .forum-rank{
align-self:center !important;
margin-left:auto !important;
margin-right:auto !important;
text-align:center !important;
justify-content:center !important;
}
.mh-post-author small + .forum-rank,
.mh-post-author .forum-rank:not(.forum-rank-team){
display:inline-flex !important;
}
.mh-post-author .forum-rank-team{
display:none !important;
}
/* Forum-Startseite: Icon-Spalte komplett neutralisieren und sauber neu setzen */
.mh-board .mh-board-row{
display:grid !important;
grid-template-columns:minmax(0,1fr) 86px 86px minmax(170px,.8fr) !important;
align-items:center !important;
gap:14px !important;
min-height:76px !important;
padding:14px 16px !important;
text-decoration:none !important;
color:inherit !important;
}
.mh-board .mh-board-title,
.mh-board .mh-board-title-link{
display:grid !important;
grid-template-columns:52px minmax(0,1fr) !important;
align-items:center !important;
gap:14px !important;
min-width:0 !important;
width:100% !important;
text-decoration:none !important;
color:inherit !important;
}
.mh-board .mh-board-title > div,
.mh-board .mh-board-title-link > div{
min-width:0 !important;
display:block !important;
}
.mh-board .mh-board-title strong,
.mh-board .mh-board-title-link strong{
display:block !important;
color:#16314f !important;
font-size:1rem !important;
line-height:1.25 !important;
white-space:normal !important;
}
.mh-board .mh-board-title small,
.mh-board .mh-board-title-link small{
display:block !important;
margin-top:3px !important;
color:#64748b !important;
font-size:.84rem !important;
line-height:1.35 !important;
white-space:normal !important;
}
/* Emoji/Icon selbst: feste Kachel, keine Verzerrung, kein abgeschnittener Müll */
.mh-board .mh-board-icon{
all:unset !important;
box-sizing:border-box !important;
width:52px !important;
height:52px !important;
min-width:52px !important;
max-width:52px !important;
flex:0 0 52px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:17px !important;
background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%) !important;
border:1px solid rgba(16,32,51,.10) !important;
box-shadow:0 8px 18px rgba(15,23,42,.07) !important;
color:#0d8b8d !important;
font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif !important;
font-size:24px !important;
line-height:1 !important;
text-align:center !important;
overflow:hidden !important;
transform:none !important;
filter:none !important;
}
.mh-board .mh-board-icon.big{
width:58px !important;
height:58px !important;
min-width:58px !important;
max-width:58px !important;
font-size:28px !important;
border-radius:19px !important;
}
.mh-board .mh-board-title-link:hover .mh-board-icon{
background:linear-gradient(180deg,#f0fdfa 0%,#ffffff 100%) !important;
border-color:rgba(13,139,141,.26) !important;
box-shadow:0 10px 22px rgba(13,139,141,.10) !important;
}
/* Akzentfarben nur als dezente linke Linie, nicht im Icon selbst */
.mh-board .mh-board-row[class*="mh-board-accent-"] .mh-board-icon{
background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%) !important;
}
.mh-board .mh-board-row.mh-board-accent-orange{
border-left:4px solid #d97706 !important;
}
.mh-board .mh-board-row.mh-board-accent-cyan{
border-left:4px solid #0d8b8d !important;
}
.mh-board .mh-board-row.mh-board-accent-blue{
border-left:4px solid #2563eb !important;
}
.mh-board .mh-board-row.mh-board-accent-green{
border-left:4px solid #16a34a !important;
}
.mh-board .mh-board-row.mh-board-accent-purple{
border-left:4px solid #7c3aed !important;
}
.mh-board .mh-board-row.mh-board-accent-red{
border-left:4px solid #dc2626 !important;
}
@media(max-width:900px){
.mh-board .mh-board-row{
grid-template-columns:1fr !important;
gap:10px !important;
}
.mh-board .mh-board-title,
.mh-board .mh-board-title-link{
grid-template-columns:48px minmax(0,1fr) !important;
}
.mh-board .mh-board-icon{
width:48px !important;
height:48px !important;
min-width:48px !important;
max-width:48px !important;
font-size:22px !important;
}
}
/* Forum-Startseite: doppelten Farbstreifen entfernen */
.mh-board .mh-board-row,
.mh-board .mh-board-row.mh-board-accent-orange,
.mh-board .mh-board-row.mh-board-accent-cyan,
.mh-board .mh-board-row.mh-board-accent-blue,
.mh-board .mh-board-row.mh-board-accent-green,
.mh-board .mh-board-row.mh-board-accent-purple,
.mh-board .mh-board-row.mh-board-accent-red,
.mh-board .mh-board-row[class*="mh-board-accent-"]{
border-left:0 !important;
}
/* Den eigentlichen Akzent nur sauber am Icon lassen */
.mh-board .mh-board-row.mh-board-accent-orange .mh-board-icon{
border-color:rgba(217,119,6,.35) !important;
box-shadow:inset 4px 0 0 #d97706, 0 8px 18px rgba(15,23,42,.07) !important;
}
.mh-board .mh-board-row.mh-board-accent-cyan .mh-board-icon{
border-color:rgba(13,139,141,.35) !important;
box-shadow:inset 4px 0 0 #0d8b8d, 0 8px 18px rgba(15,23,42,.07) !important;
}
.mh-board .mh-board-row.mh-board-accent-blue .mh-board-icon{
border-color:rgba(37,99,235,.35) !important;
box-shadow:inset 4px 0 0 #2563eb, 0 8px 18px rgba(15,23,42,.07) !important;
}
.mh-board .mh-board-row.mh-board-accent-green .mh-board-icon{
border-color:rgba(22,163,74,.35) !important;
box-shadow:inset 4px 0 0 #16a34a, 0 8px 18px rgba(15,23,42,.07) !important;
}
.mh-board .mh-board-row.mh-board-accent-purple .mh-board-icon{
border-color:rgba(124,58,237,.35) !important;
box-shadow:inset 4px 0 0 #7c3aed, 0 8px 18px rgba(15,23,42,.07) !important;
}
.mh-board .mh-board-row.mh-board-accent-red .mh-board-icon{
border-color:rgba(220,38,38,.35) !important;
box-shadow:inset 4px 0 0 #dc2626, 0 8px 18px rgba(15,23,42,.07) !important;
}
/* Forum: oberer Aktionsbereich aufräumen */
.mh-forum-actions-clean{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap:8px !important;
flex-wrap:wrap !important;
}
.mh-forum-actions-clean .btn{
white-space:nowrap !important;
}
.mh-forum-actions-clean .btn.ghost{
background:#f8fafc !important;
color:#64748b !important;
}
.forum-admin-tools-menu{
position:relative !important;
display:inline-block !important;
}
.forum-admin-tools-menu summary{
list-style:none !important;
cursor:pointer !important;
user-select:none !important;
}
.forum-admin-tools-menu summary::-webkit-details-marker{
display:none !important;
}
.forum-admin-tools-menu summary::after{
content:" ▾";
font-size:.78em;
}
.forum-admin-tools-menu[open] summary::after{
content:" ▴";
}
.forum-admin-tools-menu > div{
position:absolute !important;
right:0 !important;
top:calc(100% + 8px) !important;
z-index:50 !important;
min-width:230px !important;
padding:8px !important;
border-radius:16px !important;
background:#fff !important;
border:1px solid rgba(16,32,51,.10) !important;
box-shadow:0 18px 44px rgba(15,23,42,.18) !important;
}
.forum-admin-tools-menu > div a{
display:block !important;
padding:10px 12px !important;
border-radius:12px !important;
text-decoration:none !important;
color:#16314f !important;
font-weight:800 !important;
font-size:.9rem !important;
}
.forum-admin-tools-menu > div a:hover{
background:#f0fdfa !important;
color:#0d8b8d !important;
}
@media(max-width:780px){
.mh-forum-actions-clean{
justify-content:flex-start !important;
}
.forum-admin-tools-menu{
width:100% !important;
}
.forum-admin-tools-menu summary{
width:100% !important;
text-align:center !important;
}
.forum-admin-tools-menu > div{
position:static !important;
margin-top:8px !important;
width:100% !important;
}
}
/* Forum: Kopfbereich ordentlich und getrennt darstellen */
.mh-forum-top{
align-items:flex-start !important;
gap:24px !important;
}
.mh-forum-actions-polished{
min-width:min(100%, 620px) !important;
display:grid !important;
grid-template-columns:1fr !important;
gap:10px !important;
align-items:stretch !important;
justify-items:stretch !important;
}
.forum-action-primary,
.forum-action-group{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap:8px !important;
flex-wrap:wrap !important;
}
.forum-action-primary{
padding-bottom:4px !important;
}
.forum-action-group{
padding:9px !important;
border:1px solid rgba(16,32,51,.08) !important;
border-radius:16px !important;
background:rgba(248,250,252,.86) !important;
}
.forum-action-group > span{
margin-right:auto !important;
color:#64748b !important;
font-size:.72rem !important;
font-weight:900 !important;
text-transform:uppercase !important;
letter-spacing:.08em !important;
}
.forum-action-group .btn,
.forum-action-primary .btn{
min-height:36px !important;
padding:8px 12px !important;
border-radius:12px !important;
white-space:nowrap !important;
font-size:.86rem !important;
}
.forum-action-admin{
background:#fff7ed !important;
border-color:rgba(217,119,6,.18) !important;
}
.forum-action-admin > span{
color:#c2410c !important;
}
.forum-action-admin .btn{
background:#fff !important;
}
.forum-action-admin .btn:hover{
background:#fffbeb !important;
border-color:rgba(217,119,6,.28) !important;
}
.forum-admin-tools-menu{
display:none !important;
}
@media(max-width:1100px){
.mh-forum-top{
display:grid !important;
grid-template-columns:1fr !important;
}
.mh-forum-actions-polished{
min-width:0 !important;
width:100% !important;
}
.forum-action-primary,
.forum-action-group{
justify-content:flex-start !important;
}
}
@media(max-width:720px){
.forum-action-group{
display:grid !important;
grid-template-columns:1fr !important;
}
.forum-action-group > span{
margin-right:0 !important;
}
.forum-action-group .btn,
.forum-action-primary .btn{
width:100% !important;
text-align:center !important;
justify-content:center !important;
}
.forum-action-primary{
display:grid !important;
grid-template-columns:1fr !important;
}
}
/* Kundenpanel: Logo/Brand in der Seitenleiste verlinken */
.brand-link,
.sidebar-logo-link{
text-decoration:none !important;
color:inherit !important;
cursor:pointer !important;
}
.brand-link:hover .portal-logo-sidebar,
.sidebar-logo-link:hover .portal-logo-sidebar{
transform:translateY(-1px) !important;
filter:drop-shadow(0 8px 16px rgba(13,139,141,.16)) !important;
}
.brand-link strong,
.brand-link small{
color:inherit !important;
}
/* Forum Design Polish 3: klare Startseite, bessere Suche, Autorblock, mobile Ansicht */
.forum-search-polish3{
margin:0 0 18px !important;
padding:14px !important;
border:1px solid rgba(16,32,51,.08) !important;
border-radius:20px !important;
background:linear-gradient(180deg,#ffffff,#f8fafc) !important;
box-shadow:0 12px 30px rgba(15,23,42,.04) !important;
}
.forum-search-polish3 form{
display:grid !important;
grid-template-columns:minmax(260px,1fr) 190px auto !important;
gap:10px !important;
align-items:center !important;
}
.forum-search-polish3 input,
.forum-search-polish3 select,
.mh-topic-filter-polish3 input,
.mh-topic-filter-polish3 select{
min-height:42px !important;
border-radius:14px !important;
border:1px solid rgba(16,32,51,.10) !important;
background:#fff !important;
padding:0 13px !important;
}
.mh-board{
overflow:hidden !important;
}
.mh-board-head-polish3{
background:#f8fafc !important;
border-bottom:1px solid rgba(16,32,51,.08) !important;
color:#64748b !important;
font-size:.72rem !important;
text-transform:uppercase !important;
letter-spacing:.08em !important;
}
.mh-board-group{
margin-top:10px !important;
border-radius:14px !important;
background:#f8fafc !important;
border:1px solid rgba(16,32,51,.06) !important;
}
.mh-board-group strong{
color:#16314f !important;
}
.mh-board .mh-board-row{
border:1px solid rgba(16,32,51,.07) !important;
border-radius:18px !important;
margin:10px 0 !important;
background:#fff !important;
box-shadow:0 8px 22px rgba(15,23,42,.035) !important;
}
.mh-board .mh-board-row:hover{
border-color:rgba(13,139,141,.18) !important;
box-shadow:0 14px 32px rgba(13,139,141,.08) !important;
}
.mh-board-count{
background:#f8fafc !important;
border:1px solid rgba(16,32,51,.07) !important;
border-radius:14px !important;
min-height:42px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
color:#16314f !important;
font-weight:900 !important;
}
.mh-board-last-link{
border:1px solid transparent !important;
background:#f8fafc !important;
padding:10px 12px !important;
border-radius:14px !important;
margin:0 !important;
}
.mh-board-last-link:hover{
border-color:rgba(13,139,141,.18) !important;
background:#f0fdfa !important;
}
.mh-board-last-link strong{
display:block !important;
color:#16314f !important;
max-width:220px !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.mh-board-last-link small{
display:block !important;
color:#64748b !important;
margin-top:2px !important;
}
.mh-latest a{
border:1px solid rgba(16,32,51,.07) !important;
border-radius:16px !important;
padding:12px !important;
background:#fff !important;
}
.mh-latest a:hover{
background:#f0fdfa !important;
border-color:rgba(13,139,141,.18) !important;
}
.mh-topic-filter-polish3{
background:#f8fafc !important;
border:1px solid rgba(16,32,51,.08) !important;
border-radius:18px !important;
padding:12px !important;
margin-bottom:14px !important;
}
.mh-topic-table-pro{
gap:8px !important;
}
.mh-topic-head-polish3{
border-radius:14px !important;
background:#f8fafc !important;
border:1px solid rgba(16,32,51,.07) !important;
padding:10px 14px !important;
color:#64748b !important;
text-transform:uppercase !important;
letter-spacing:.07em !important;
font-size:.7rem !important;
}
.mh-topic-row-pro{
border:1px solid rgba(16,32,51,.07) !important;
border-radius:18px !important;
background:#fff !important;
padding:14px !important;
box-shadow:0 8px 22px rgba(15,23,42,.035) !important;
}
.mh-topic-row-pro:hover{
border-color:rgba(13,139,141,.18) !important;
background:#fcffff !important;
}
.mh-topic-author small{
color:#94a3b8 !important;
font-size:.76rem !important;
}
.mh-topic-last-link{
border-radius:14px !important;
padding:9px 11px !important;
background:#f8fafc !important;
}
.mh-topic-last-link:hover{
background:#f0fdfa !important;
}
.mh-topic-last-link small{
color:#64748b !important;
}
.mh-topic-header-premium{
align-items:flex-start !important;
}
.forum-topic-admin-menu{
position:relative !important;
margin-left:auto !important;
}
.forum-topic-admin-menu summary{
list-style:none !important;
cursor:pointer !important;
}
.forum-topic-admin-menu summary::-webkit-details-marker{
display:none !important;
}
.forum-topic-admin-menu summary::after{
content:" ▾";
}
.forum-topic-admin-menu[open] summary::after{
content:" ▴";
}
.forum-topic-admin-menu .mh-mod-actions{
position:absolute !important;
right:0 !important;
top:calc(100% + 8px) !important;
z-index:30 !important;
min-width:250px !important;
display:grid !important;
gap:7px !important;
padding:10px !important;
border-radius:16px !important;
background:#fff !important;
border:1px solid rgba(16,32,51,.1) !important;
box-shadow:0 18px 44px rgba(15,23,42,.18) !important;
}
.forum-topic-admin-menu .mh-mod-actions .btn{
width:100% !important;
justify-content:center !important;
}
.mh-post-premium{
border:1px solid rgba(16,32,51,.08) !important;
border-radius:22px !important;
overflow:hidden !important;
box-shadow:0 14px 34px rgba(15,23,42,.045) !important;
}
.mh-post-author{
background:linear-gradient(180deg,#f8fafc,#fff) !important;
border-right:1px solid rgba(16,32,51,.08) !important;
min-width:190px !important;
}
.forum-author-facts{
width:100% !important;
display:grid !important;
gap:5px !important;
margin:8px 0 !important;
padding:9px !important;
border-radius:14px !important;
background:#fff !important;
border:1px solid rgba(16,32,51,.07) !important;
}
.forum-author-facts span{
display:block !important;
color:#64748b !important;
font-size:.75rem !important;
line-height:1.35 !important;
}
.forum-author-facts b{
color:#16314f !important;
}
.forum-profile-link{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
padding:6px 10px !important;
border-radius:999px !important;
background:#f0fdfa !important;
color:#0d8b8d !important;
font-size:.76rem !important;
font-weight:900 !important;
text-decoration:none !important;
}
.forum-profile-link:hover{
background:#ccfbf1 !important;
}
.mh-post-toolbar{
background:#f8fafc !important;
border-bottom:1px solid rgba(16,32,51,.07) !important;
}
.forum-post-tools .btn,
.forum-post-tools a{
opacity:.82 !important;
}
.forum-post-tools .btn:hover,
.forum-post-tools a:hover{
opacity:1 !important;
}
.mh-post-body{
font-size:.96rem !important;
line-height:1.72 !important;
}
/* Kopfbereich final ruhiger */
.mh-forum-actions-polished{
max-width:680px !important;
}
.forum-action-group{
box-shadow:0 8px 20px rgba(15,23,42,.035) !important;
}
.forum-action-admin{
box-shadow:0 8px 20px rgba(217,119,6,.06) !important;
}
/* Mobile Forum final */
@media(max-width:900px){
.forum-search-polish3 form{
grid-template-columns:1fr !important;
}
.mh-board-head-polish3,
.mh-topic-head-polish3{
display:none !important;
}
.mh-board .mh-board-row{
grid-template-columns:1fr !important;
padding:14px !important;
}
.mh-board .mh-board-title,
.mh-board .mh-board-title-link{
grid-template-columns:48px minmax(0,1fr) !important;
}
.mh-board-count{
justify-content:flex-start !important;
padding:0 12px !important;
}
.mh-board-count::before{
content:"Anzahl: ";
color:#64748b;
margin-right:4px;
font-weight:700;
}
.mh-topic-header-premium{
display:grid !important;
grid-template-columns:1fr !important;
}
.forum-topic-admin-menu{
margin-left:0 !important;
}
.forum-topic-admin-menu .mh-mod-actions{
position:static !important;
margin-top:8px !important;
box-shadow:none !important;
}
.mh-post-premium{
display:grid !important;
grid-template-columns:1fr !important;
}
.mh-post-author{
border-right:0 !important;
border-bottom:1px solid rgba(16,32,51,.08) !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:72px 1fr !important;
text-align:left !important;
align-items:center !important;
gap:8px 12px !important;
}
.mh-post-author .mh-author-avatar{
grid-row:span 4 !important;
}
.mh-post-author .forum-rank,
.mh-post-author .forum-profile-link{
justify-self:start !important;
margin-left:0 !important;
margin-right:0 !important;
}
.forum-author-facts,
.mh-author-post-meta{
grid-column:1 / -1 !important;
}
.mh-post-content .forum-signature{
margin:14px !important;
}
}
@media(max-width:620px){
.mh-forum-top{
gap:14px !important;
}
.forum-action-primary,
.forum-action-group{
display:grid !important;
grid-template-columns:1fr !important;
}
.forum-search-polish3{
padding:10px !important;
}
.mh-board .mh-board-row,
.mh-topic-row-pro{
border-radius:16px !important;
}
}
/* Forum: Beitrags-Buttons ganz nach rechts ausrichten */
.mh-post-toolbar{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:14px !important;
}
.mh-post-toolbar > span{
flex:0 0 auto !important;
}
.mh-post-toolbar .forum-post-tools{
margin-left:auto !important;
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap:7px !important;
flex-wrap:wrap !important;
text-align:right !important;
}
.mh-post-toolbar .forum-post-tools .inline-form{
display:inline-flex !important;
margin:0 !important;
}
.mh-post-toolbar .forum-post-tools .btn,
.mh-post-toolbar .forum-post-tools a{
white-space:nowrap !important;
}
@media(max-width:720px){
.mh-post-toolbar{
align-items:flex-start !important;
flex-direction:column !important;
}
.mh-post-toolbar .forum-post-tools{
width:100% !important;
justify-content:flex-end !important;
}
}
/* HARD FIX: Forum-Beitragsbuttons wirklich ganz rechts */
.mh-post-content > .mh-post-toolbar-rightfix,
.mh-post .mh-post-content .mh-post-toolbar-rightfix,
article.mh-post .mh-post-toolbar-rightfix{
display:grid !important;
grid-template-columns:auto minmax(0,1fr) !important;
align-items:center !important;
gap:12px !important;
width:100% !important;
}
.mh-post-toolbar-rightfix .mh-post-toolbar-label{
grid-column:1 !important;
justify-self:start !important;
white-space:nowrap !important;
}
.mh-post-toolbar-rightfix .forum-post-tools-rightfix{
grid-column:2 !important;
justify-self:end !important;
margin-left:auto !important;
width:auto !important;
max-width:100% !important;
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap:7px !important;
flex-wrap:wrap !important;
text-align:right !important;
}
.mh-post-toolbar-rightfix .forum-post-tools-rightfix form,
.mh-post-toolbar-rightfix .forum-post-tools-rightfix .inline-form{
display:inline-flex !important;
margin:0 !important;
padding:0 !important;
}
.mh-post-toolbar-rightfix .forum-post-tools-rightfix .btn,
.mh-post-toolbar-rightfix .forum-post-tools-rightfix a,
.mh-post-toolbar-rightfix .forum-post-tools-rightfix button{
white-space:nowrap !important;
}
@media(max-width:720px){
.mh-post-content > .mh-post-toolbar-rightfix,
.mh-post .mh-post-content .mh-post-toolbar-rightfix,
article.mh-post .mh-post-toolbar-rightfix{
grid-template-columns:1fr !important;
}
.mh-post-toolbar-rightfix .forum-post-tools-rightfix{
grid-column:1 !important;
justify-self:end !important;
width:100% !important;
justify-content:flex-end !important;
}
}
/* Forum: Button-Design unverändert lassen, nur Position nach rechts */
.mh-post-toolbar-positionfix{
display:flex !important;
align-items:center !important;
width:100% !important;
gap:12px !important;
}
.mh-post-toolbar-positionfix .mh-post-toolbar-label{
flex:0 0 auto !important;
}
.mh-post-toolbar-positionfix .forum-post-tools-positionfix{
margin-left:auto !important;
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap:7px !important;
flex-wrap:wrap !important;
}
.mh-post-toolbar-positionfix .forum-post-tools-positionfix form,
.mh-post-toolbar-positionfix .forum-post-tools-positionfix .inline-form{
display:inline-flex !important;
margin:0 !important;
padding:0 !important;
}
@media(max-width:720px){
.mh-post-toolbar-positionfix{
align-items:flex-start !important;
flex-direction:column !important;
}
.mh-post-toolbar-positionfix .forum-post-tools-positionfix{
width:100% !important;
justify-content:flex-end !important;
}
}
/* Forum: Reaktions-/Moderationsbuttons unten links im Beitrag */
.mh-post-content{
display:flex !important;
flex-direction:column !important;
}
.forum-post-bottom-actions{
margin-top:auto !important;
padding:14px 24px 16px !important;
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:8px !important;
flex-wrap:wrap !important;
border-top:1px solid rgba(16,32,51,.07) !important;
background:#fbfdff !important;
}
.forum-post-bottom-actions .forum-reaction-row{
margin:0 !important;
padding:0 !important;
border:0 !important;
background:transparent !important;
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:8px !important;
flex-wrap:wrap !important;
}
.forum-post-bottom-actions .forum-reaction-row form,
.forum-post-bottom-actions .mh-inline-mod,
.forum-post-bottom-actions .forum-admin-edit{
margin:0 !important;
}
.forum-post-bottom-actions .forum-reaction-row form,
.forum-post-bottom-actions .mh-inline-mod{
display:inline-flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:8px !important;
flex-wrap:wrap !important;
}
.forum-post-bottom-actions .btn,
.forum-post-bottom-actions button,
.forum-post-bottom-actions summary{
white-space:nowrap !important;
}
.mh-post-content > .forum-reaction-row:not(.forum-post-bottom-actions){
align-self:flex-start !important;
margin-top:auto !important;
margin-left:24px !important;
margin-bottom:16px !important;
}
.mh-post-content > .mh-inline-mod{
align-self:flex-start !important;
margin-left:24px !important;
margin-bottom:16px !important;
}
@media(max-width:720px){
.forum-post-bottom-actions{
padding:12px 14px 14px !important;
}
}
/* Forum: saubere untere Aktionsleiste im Beitrag */
.forum-post-bottom-actions.clean{
margin-top:auto !important;
padding:14px 24px 16px !important;
border-top:1px solid rgba(16,32,51,.07) !important;
background:#fbfdff !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:12px !important;
flex-wrap:wrap !important;
}
.forum-post-bottom-actions.clean .forum-bottom-reactions,
.forum-post-bottom-actions.clean .forum-bottom-admin{
display:flex !important;
align-items:center !important;
gap:8px !important;
flex-wrap:wrap !important;
}
.forum-post-bottom-actions.clean .forum-bottom-reactions{
justify-content:flex-start !important;
}
.forum-post-bottom-actions.clean .forum-bottom-admin{
margin-left:auto !important;
justify-content:flex-end !important;
}
.forum-post-bottom-actions.clean form{
display:inline-flex !important;
align-items:center !important;
gap:8px !important;
margin:0 !important;
padding:0 !important;
}
.forum-post-bottom-actions.clean .forum-admin-edit{
position:relative !important;
margin:0 !important;
}
.forum-post-bottom-actions.clean .forum-admin-edit > summary{
list-style:none !important;
cursor:pointer !important;
font-weight:800 !important;
}
.forum-post-bottom-actions.clean .forum-admin-edit > summary::-webkit-details-marker{
display:none !important;
}
.forum-post-bottom-actions.clean .forum-admin-edit > summary::before{
content:none !important;
}
.forum-post-bottom-actions.clean .forum-admin-edit[open] > summary{
background:#f0fdfa !important;
border-color:rgba(13,139,141,.22) !important;
}
.forum-post-bottom-actions.clean .forum-admin-edit > form{
position:absolute !important;
right:0 !important;
bottom:calc(100% + 10px) !important;
z-index:40 !important;
width:min(520px, calc(100vw - 48px)) !important;
display:grid !important;
gap:10px !important;
padding:12px !important;
border-radius:16px !important;
background:#fff !important;
border:1px solid rgba(16,32,51,.10) !important;
box-shadow:0 18px 44px rgba(15,23,42,.18) !important;
}
.forum-post-bottom-actions.clean .forum-admin-edit textarea{
width:100% !important;
min-height:130px !important;
}
.forum-post-bottom-actions.clean button,
.forum-post-bottom-actions.clean .btn{
white-space:nowrap !important;
}
.forum-post-bottom-actions.clean + .mh-inline-mod,
.forum-post-bottom-actions.clean .forum-reaction-row{
margin:0 !important;
}
@media(max-width:720px){
.forum-post-bottom-actions.clean{
padding:12px 14px 14px !important;
align-items:flex-start !important;
flex-direction:column !important;
}
.forum-post-bottom-actions.clean .forum-bottom-admin{
margin-left:0 !important;
justify-content:flex-start !important;
}
.forum-post-bottom-actions.clean .forum-admin-edit > form{
position:static !important;
width:100% !important;
margin-top:8px !important;
box-shadow:none !important;
}
}
/* Global: Löschen-/Danger-Buttons beim Hover lesbar halten */
.btn.danger,
button.btn.danger,
a.btn.danger,
input.btn.danger{
color:#ffffff !important;
background:#dc2626 !important;
border-color:#dc2626 !important;
}
.btn.danger:hover,
button.btn.danger:hover,
a.btn.danger:hover,
input.btn.danger:hover,
.btn.danger:focus,
button.btn.danger:focus,
a.btn.danger:focus,
input.btn.danger:focus{
color:#ffffff !important;
background:#b91c1c !important;
border-color:#991b1b !important;
text-shadow:none !important;
box-shadow:0 10px 22px rgba(185,28,28,.22) !important;
}
.btn.danger:active,
button.btn.danger:active,
a.btn.danger:active,
input.btn.danger:active{
color:#ffffff !important;
background:#991b1b !important;
border-color:#7f1d1d !important;
}
/* Auch generische Delete-/Trash-Buttons absichern */
button[name="delete"]:hover,
button[value="delete"]:hover,
button[value="trash"]:hover,
button[value="remove"]:hover,
button[value="hide"]:hover,
a[href*="delete"]:hover,
a[href*="trash"]:hover{
color:#ffffff !important;
}
/* Falls Danger-Buttons in hellen Aktionsleisten liegen */
.forum-post-bottom-actions .btn.danger:hover,
.forum-post-tools .btn.danger:hover,
.actions-row .btn.danger:hover,
.inline-form .btn.danger:hover{
color:#ffffff !important;
background:#b91c1c !important;
border-color:#991b1b !important;
}
/* Forum-Startseite: Kopfzeile und Zeilen exakt gleich ausrichten */
.mh-board{
--forum-col-topic:minmax(0, 1fr);
--forum-col-count:86px;
--forum-col-last:minmax(190px, .82fr);
}
.mh-board .mh-board-head,
.mh-board .mh-board-head-polish3,
.mh-board .mh-board-row{
display:grid !important;
grid-template-columns:
var(--forum-col-topic)
var(--forum-col-count)
var(--forum-col-count)
var(--forum-col-last) !important;
align-items:center !important;
column-gap:14px !important;
}
.mh-board .mh-board-head,
.mh-board .mh-board-head-polish3{
padding:10px 16px !important;
margin:0 0 8px !important;
}
.mh-board .mh-board-head > div,
.mh-board .mh-board-head-polish3 > div{
min-width:0 !important;
}
.mh-board .mh-board-head > div:nth-child(2),
.mh-board .mh-board-head > div:nth-child(3),
.mh-board .mh-board-head-polish3 > div:nth-child(2),
.mh-board .mh-board-head-polish3 > div:nth-child(3){
text-align:center !important;
justify-self:stretch !important;
}
.mh-board .mh-board-head > div:nth-child(4),
.mh-board .mh-board-head-polish3 > div:nth-child(4){
text-align:left !important;
justify-self:stretch !important;
}
.mh-board .mh-board-row{
padding:14px 16px !important;
margin:10px 0 !important;
}
.mh-board .mh-board-title,
.mh-board .mh-board-title-link{
min-width:0 !important;
}
.mh-board .mh-board-count{
width:86px !important;
min-width:86px !important;
max-width:86px !important;
justify-self:center !important;
text-align:center !important;
box-sizing:border-box !important;
}
.mh-board .mh-board-last{
min-width:0 !important;
width:100% !important;
justify-self:stretch !important;
}
.mh-board .mh-board-last-link{
width:100% !important;
box-sizing:border-box !important;
}
.mh-board .mh-board-last-link strong{
max-width:100% !important;
}
/* Gruppenüberschrift darf die Spalten nicht beeinflussen */
.mh-board .mh-board-group{
display:block !important;
grid-column:1 / -1 !important;
}
/* Mobile: Kopfzeile ausblenden, Zeilen stapeln */
@media(max-width:900px){
.mh-board .mh-board-head,
.mh-board .mh-board-head-polish3{
display:none !important;
}
.mh-board .mh-board-row{
display:grid !important;
grid-template-columns:1fr !important;
}
.mh-board .mh-board-count{
width:100% !important;
min-width:0 !important;
max-width:none !important;
justify-self:stretch !important;
justify-content:flex-start !important;
text-align:left !important;
}
}
/* Forum-Startseite: Themen-/Antwortenzahlen edler und kleiner darstellen */
.mh-board{
--forum-col-count:72px !important;
}
.mh-board .mh-board-count{
width:56px !important;
min-width:56px !important;
max-width:56px !important;
min-height:34px !important;
height:34px !important;
padding:0 !important;
justify-self:center !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:999px !important;
background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%) !important;
border:1px solid rgba(100,116,139,.18) !important;
box-shadow:0 6px 14px rgba(15,23,42,.045) !important;
color:#334155 !important;
font-size:.88rem !important;
font-weight:800 !important;
line-height:1 !important;
letter-spacing:.01em !important;
}
.mh-board .mh-board-row:hover .mh-board-count{
background:#f0fdfa !important;
border-color:rgba(13,139,141,.24) !important;
color:#0d6f72 !important;
box-shadow:0 8px 18px rgba(13,139,141,.08) !important;
}
.mh-board .mh-board-head > div:nth-child(2),
.mh-board .mh-board-head > div:nth-child(3),
.mh-board .mh-board-head-polish3 > div:nth-child(2),
.mh-board .mh-board-head-polish3 > div:nth-child(3){
font-size:.68rem !important;
color:#94a3b8 !important;
font-weight:900 !important;
letter-spacing:.09em !important;
}
/* Mobile: Zahlen wieder als dezente Zeile statt große Box */
@media(max-width:900px){
.mh-board .mh-board-count{
width:auto !important;
min-width:0 !important;
max-width:none !important;
height:32px !important;
min-height:32px !important;
padding:0 12px !important;
justify-content:flex-start !important;
justify-self:start !important;
border-radius:999px !important;
}
.mh-board .mh-board-count::before{
content:"";
display:none !important;
}
}
/* Forum-Startseite: Bereiche gleichmäßig hoch darstellen */
.mh-board .mh-board-row{
min-height:74px !important;
height:auto !important;
align-items:center !important;
}
.mh-board .mh-board-title-link strong,
.mh-board .mh-board-title strong{
font-size:1rem !important;
line-height:1.25 !important;
margin:0 !important;
}
.mh-board .mh-board-title-link small,
.mh-board .mh-board-title small{
font-size:.84rem !important;
line-height:1.32 !important;
margin-top:3px !important;
max-width:100% !important;
display:-webkit-box !important;
-webkit-line-clamp:2 !important;
-webkit-box-orient:vertical !important;
overflow:hidden !important;
}
.mh-board .mh-board-title-link > div,
.mh-board .mh-board-title > div{
min-width:0 !important;
max-width:100% !important;
}
/* Speziell lange Bereichsnamen wie Domain & DNS nicht größer wirken lassen */
.mh-board .mh-board-title-link[href*="Domain"],
.mh-board .mh-board-title-link[href*="domain"],
.mh-board .mh-board-title-link[href*="dns"],
.mh-board .mh-board-title-link[href*="DNS"]{
align-items:center !important;
}
.mh-board .mh-board-title-link[href*="Domain"] strong,
.mh-board .mh-board-title-link[href*="domain"] strong,
.mh-board .mh-board-title-link[href*="dns"] strong,
.mh-board .mh-board-title-link[href*="DNS"] strong{
font-size:1rem !important;
line-height:1.25 !important;
}
@media(max-width:900px){
.mh-board .mh-board-row{
min-height:0 !important;
}
}
/* Forum-Startseite: alle Forenbereiche exakt gleich groß darstellen */
.mh-board{
--forum-row-height:92px !important;
--forum-col-topic:minmax(0, 1fr) !important;
--forum-col-count:72px !important;
--forum-col-last:minmax(210px, .82fr) !important;
}
.mh-board .mh-board-head,
.mh-board .mh-board-head-polish3,
.mh-board .mh-board-row{
grid-template-columns:
var(--forum-col-topic)
var(--forum-col-count)
var(--forum-col-count)
var(--forum-col-last) !important;
column-gap:14px !important;
}
.mh-board .mh-board-row{
height:var(--forum-row-height) !important;
min-height:var(--forum-row-height) !important;
max-height:var(--forum-row-height) !important;
padding:14px 16px !important;
align-items:center !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
.mh-board .mh-board-title,
.mh-board .mh-board-title-link{
height:100% !important;
min-height:0 !important;
display:grid !important;
grid-template-columns:52px minmax(0,1fr) !important;
align-items:center !important;
gap:14px !important;
overflow:hidden !important;
}
.mh-board .mh-board-title-link > div,
.mh-board .mh-board-title > div{
min-width:0 !important;
max-width:100% !important;
overflow:hidden !important;
}
.mh-board .mh-board-title-link strong,
.mh-board .mh-board-title strong{
display:block !important;
font-size:1rem !important;
line-height:1.25 !important;
margin:0 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.mh-board .mh-board-title-link small,
.mh-board .mh-board-title small{
display:-webkit-box !important;
-webkit-line-clamp:2 !important;
-webkit-box-orient:vertical !important;
overflow:hidden !important;
font-size:.82rem !important;
line-height:1.28 !important;
margin-top:4px !important;
min-height:2.56em !important;
max-height:2.56em !important;
}
.mh-board .mh-board-icon{
width:52px !important;
height:52px !important;
min-width:52px !important;
max-width:52px !important;
align-self:center !important;
}
.mh-board .mh-board-count{
width:56px !important;
height:34px !important;
min-width:56px !important;
max-width:56px !important;
min-height:34px !important;
max-height:34px !important;
justify-self:center !important;
align-self:center !important;
}
.mh-board .mh-board-last{
height:100% !important;
min-height:0 !important;
display:flex !important;
align-items:center !important;
overflow:hidden !important;
}
.mh-board .mh-board-last-link,
.mh-board .mh-board-last > span{
width:100% !important;
min-height:58px !important;
height:58px !important;
max-height:58px !important;
box-sizing:border-box !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
overflow:hidden !important;
}
.mh-board .mh-board-last-link strong{
max-width:100% !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
line-height:1.25 !important;
}
.mh-board .mh-board-last-link small{
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
line-height:1.25 !important;
}
/* Auch leere Bereiche ohne Beitrag bekommen dieselbe letzte-Beitrag-Fläche */
.mh-board .mh-board-last > span{
padding:10px 12px !important;
border-radius:14px !important;
background:#f8fafc !important;
border:1px solid transparent !important;
color:#94a3b8 !important;
font-size:.84rem !important;
font-weight:800 !important;
}
/* Mobile bleibt natürlich flexibel und sauber gestapelt */
@media(max-width:900px){
.mh-board{
--forum-row-height:auto !important;
}
.mh-board .mh-board-row{
height:auto !important;
min-height:0 !important;
max-height:none !important;
grid-template-columns:1fr !important;
overflow:visible !important;
}
.mh-board .mh-board-title,
.mh-board .mh-board-title-link{
height:auto !important;
}
.mh-board .mh-board-title-link strong,
.mh-board .mh-board-title strong{
white-space:normal !important;
}
.mh-board .mh-board-title-link small,
.mh-board .mh-board-title small{
min-height:0 !important;
max-height:none !important;
}
.mh-board .mh-board-last-link,
.mh-board .mh-board-last > span{
height:auto !important;
min-height:42px !important;
max-height:none !important;
}
}
/* Forum-Startseite: Inhalte wieder sauber darstellen, Spalten bleiben gleich */
.mh-board{
--forum-col-topic:minmax(0, 1fr) !important;
--forum-col-count:72px !important;
--forum-col-last:minmax(230px, .9fr) !important;
}
.mh-board .mh-board-head,
.mh-board .mh-board-head-polish3,
.mh-board .mh-board-row{
display:grid !important;
grid-template-columns:
var(--forum-col-topic)
var(--forum-col-count)
var(--forum-col-count)
var(--forum-col-last) !important;
column-gap:14px !important;
align-items:center !important;
}
/* Keine harte Abschneidung mehr */
.mh-board .mh-board-row{
height:auto !important;
min-height:86px !important;
max-height:none !important;
overflow:visible !important;
padding:14px 16px !important;
}
.mh-board .mh-board-title,
.mh-board .mh-board-title-link{
height:auto !important;
min-height:58px !important;
max-height:none !important;
overflow:visible !important;
align-items:center !important;
}
.mh-board .mh-board-title-link > div,
.mh-board .mh-board-title > div{
overflow:visible !important;
min-width:0 !important;
}
.mh-board .mh-board-title-link strong,
.mh-board .mh-board-title strong{
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
line-height:1.25 !important;
}
.mh-board .mh-board-title-link small,
.mh-board .mh-board-title small{
display:block !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
-webkit-line-clamp:unset !important;
-webkit-box-orient:unset !important;
line-height:1.35 !important;
}
/* Anzahl bleibt klein und edel */
.mh-board .mh-board-count{
width:56px !important;
min-width:56px !important;
max-width:56px !important;
height:34px !important;
min-height:34px !important;
max-height:34px !important;
justify-self:center !important;
align-self:center !important;
border-radius:999px !important;
}
/* Letzter Beitrag bekommt genug Platz und wird nicht mehr zerquetscht */
.mh-board .mh-board-last{
height:auto !important;
min-height:58px !important;
max-height:none !important;
display:flex !important;
align-items:center !important;
overflow:visible !important;
min-width:0 !important;
}
.mh-board .mh-board-last-link,
.mh-board .mh-board-last > span{
height:auto !important;
min-height:58px !important;
max-height:none !important;
width:100% !important;
box-sizing:border-box !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
overflow:visible !important;
}
.mh-board .mh-board-last-link strong{
display:block !important;
max-width:100% !important;
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
line-height:1.3 !important;
}
.mh-board .mh-board-last-link small{
display:block !important;
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
line-height:1.3 !important;
}
/* Leere Bereiche bleiben optisch gleich, aber ohne Inhalt abzuschneiden */
.mh-board .mh-board-last > span{
padding:10px 12px !important;
border-radius:14px !important;
background:#f8fafc !important;
color:#94a3b8 !important;
font-size:.84rem !important;
font-weight:800 !important;
}
/* Desktop: gleiche Grundhöhe, aber bei längeren Beiträgen darf die Zeile wachsen */
@media(min-width:901px){
.mh-board .mh-board-row{
min-height:86px !important;
}
}
/* Mobile bleibt gestapelt */
@media(max-width:900px){
.mh-board .mh-board-head,
.mh-board .mh-board-head-polish3{
display:none !important;
}
.mh-board .mh-board-row{
grid-template-columns:1fr !important;
min-height:0 !important;
}
.mh-board .mh-board-count{
width:auto !important;
min-width:0 !important;
max-width:none !important;
justify-self:start !important;
padding:0 12px !important;
}
}
/* Forum-Startseite: Kategorie-Beschreibung rechts neben dem Kategorienamen */
@media(min-width:901px){
.mh-board .mh-board-title-link{
grid-template-columns:52px minmax(0,1fr) !important;
}
.mh-board .mh-board-title-link > div,
.mh-board .mh-board-title > div{
display:grid !important;
grid-template-columns:minmax(150px,.42fr) minmax(220px,.58fr) !important;
align-items:center !important;
column-gap:18px !important;
min-width:0 !important;
}
.mh-board .mh-board-title-link strong,
.mh-board .mh-board-title strong{
grid-column:1 !important;
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
margin:0 !important;
}
.mh-board .mh-board-title-link small,
.mh-board .mh-board-title small{
grid-column:2 !important;
margin:0 !important;
padding-left:16px !important;
border-left:1px solid rgba(100,116,139,.18) !important;
color:#64748b !important;
font-size:.82rem !important;
line-height:1.35 !important;
display:block !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
}
/* Mobil wieder untereinander, damit es nicht gequetscht wird */
@media(max-width:900px){
.mh-board .mh-board-title-link > div,
.mh-board .mh-board-title > div{
display:block !important;
}
.mh-board .mh-board-title-link small,
.mh-board .mh-board-title small{
padding-left:0 !important;
border-left:0 !important;
margin-top:4px !important;
}
}
/* Forum-Startseite: Gruppenbeschreibung ganz rechts anordnen */
@media(min-width:901px){
.mh-board .mh-board-group{
display:grid !important;
grid-template-columns:minmax(180px, .38fr) minmax(260px, .62fr) !important;
align-items:center !important;
column-gap:24px !important;
padding:12px 16px !important;
}
.mh-board .mh-board-group strong{
justify-self:start !important;
margin:0 !important;
white-space:nowrap !important;
}
.mh-board .mh-board-group span{
justify-self:end !important;
text-align:right !important;
margin:0 !important;
color:#64748b !important;
font-size:.84rem !important;
line-height:1.35 !important;
max-width:520px !important;
}
}
/* Mobil wieder sauber untereinander */
@media(max-width:900px){
.mh-board .mh-board-group{
display:block !important;
}
.mh-board .mh-board-group span{
display:block !important;
text-align:left !important;
margin-top:3px !important;
max-width:none !important;
}
}
/* Forum-Startseite: Hover-Effekt für einzelne Foren wieder sichtbar machen */
.mh-board .mh-board-row{
position:relative !important;
transition:
transform .18s ease,
box-shadow .18s ease,
border-color .18s ease,
background .18s ease !important;
}
.mh-board .mh-board-row::before{
content:"" !important;
position:absolute !important;
left:0 !important;
top:14px !important;
bottom:14px !important;
width:3px !important;
border-radius:999px !important;
background:transparent !important;
opacity:0 !important;
transition:opacity .18s ease, background .18s ease !important;
}
.mh-board .mh-board-row:hover{
transform:translateY(-2px) !important;
background:linear-gradient(180deg,#ffffff 0%,#f8fffe 100%) !important;
border-color:rgba(13,139,141,.26) !important;
box-shadow:0 16px 36px rgba(13,139,141,.11), 0 8px 18px rgba(15,23,42,.05) !important;
}
.mh-board .mh-board-row:hover::before{
opacity:1 !important;
background:#0d8b8d !important;
}
.mh-board .mh-board-row:hover .mh-board-icon{
background:linear-gradient(180deg,#f0fdfa 0%,#ffffff 100%) !important;
border-color:rgba(13,139,141,.32) !important;
box-shadow:inset 4px 0 0 #0d8b8d, 0 10px 24px rgba(13,139,141,.13) !important;
}
.mh-board .mh-board-row:hover .mh-board-title-link strong,
.mh-board .mh-board-row:hover .mh-board-title strong{
color:#0d6f72 !important;
}
.mh-board .mh-board-row:hover .mh-board-title-link small,
.mh-board .mh-board-row:hover .mh-board-title small{
color:#475569 !important;
}
.mh-board .mh-board-title-link,
.mh-board .mh-board-last-link{
transition:color .18s ease, background .18s ease, border-color .18s ease !important;
}
/* Akzentfarbe pro Forum beim Hover beibehalten */
.mh-board .mh-board-row.mh-board-accent-orange:hover::before{background:#d97706 !important;}
.mh-board .mh-board-row.mh-board-accent-orange:hover .mh-board-icon{
border-color:rgba(217,119,6,.35) !important;
box-shadow:inset 4px 0 0 #d97706, 0 10px 24px rgba(217,119,6,.13) !important;
}
.mh-board .mh-board-row.mh-board-accent-blue:hover::before{background:#2563eb !important;}
.mh-board .mh-board-row.mh-board-accent-blue:hover .mh-board-icon{
border-color:rgba(37,99,235,.35) !important;
box-shadow:inset 4px 0 0 #2563eb, 0 10px 24px rgba(37,99,235,.13) !important;
}
.mh-board .mh-board-row.mh-board-accent-green:hover::before{background:#16a34a !important;}
.mh-board .mh-board-row.mh-board-accent-green:hover .mh-board-icon{
border-color:rgba(22,163,74,.35) !important;
box-shadow:inset 4px 0 0 #16a34a, 0 10px 24px rgba(22,163,74,.13) !important;
}
.mh-board .mh-board-row.mh-board-accent-purple:hover::before{background:#7c3aed !important;}
.mh-board .mh-board-row.mh-board-accent-purple:hover .mh-board-icon{
border-color:rgba(124,58,237,.35) !important;
box-shadow:inset 4px 0 0 #7c3aed, 0 10px 24px rgba(124,58,237,.13) !important;
}
.mh-board .mh-board-row.mh-board-accent-red:hover::before{background:#dc2626 !important;}
.mh-board .mh-board-row.mh-board-accent-red:hover .mh-board-icon{
border-color:rgba(220,38,38,.35) !important;
box-shadow:inset 4px 0 0 #dc2626, 0 10px 24px rgba(220,38,38,.13) !important;
}
@media(max-width:900px){
.mh-board .mh-board-row:hover{
transform:none !important;
}
}
/* FINAL: Forum-Startseite Spalten hart und exakt synchronisieren */
.mh-board{
--mh-forum-col-main:minmax(420px, 1fr) !important;
--mh-forum-col-topics:74px !important;
--mh-forum-col-replies:74px !important;
--mh-forum-col-last:minmax(250px, 300px) !important;
}
/* Kopfzeile und jede Forum-Zeile bekommen exakt dieselbe Grid-Struktur */
.mh-board > .mh-board-head,
.mh-board > .mh-board-head-polish3,
.mh-board > .mh-board-row{
display:grid !important;
grid-template-columns:
var(--mh-forum-col-main)
var(--mh-forum-col-topics)
var(--mh-forum-col-replies)
var(--mh-forum-col-last) !important;
grid-auto-flow:column !important;
align-items:center !important;
column-gap:16px !important;
box-sizing:border-box !important;
width:100% !important;
min-width:0 !important;
}
/* Exakte Spaltenzuordnung Kopfzeile */
.mh-board > .mh-board-head > div:nth-child(1),
.mh-board > .mh-board-head-polish3 > div:nth-child(1){
grid-column:1 !important;
justify-self:stretch !important;
text-align:left !important;
}
.mh-board > .mh-board-head > div:nth-child(2),
.mh-board > .mh-board-head-polish3 > div:nth-child(2){
grid-column:2 !important;
justify-self:center !important;
text-align:center !important;
width:74px !important;
}
.mh-board > .mh-board-head > div:nth-child(3),
.mh-board > .mh-board-head-polish3 > div:nth-child(3){
grid-column:3 !important;
justify-self:center !important;
text-align:center !important;
width:74px !important;
}
.mh-board > .mh-board-head > div:nth-child(4),
.mh-board > .mh-board-head-polish3 > div:nth-child(4){
grid-column:4 !important;
justify-self:stretch !important;
text-align:left !important;
}
/* Exakte Spaltenzuordnung jeder Forum-Zeile */
.mh-board > .mh-board-row > .mh-board-title,
.mh-board > .mh-board-row > .mh-board-title-link{
grid-column:1 !important;
justify-self:stretch !important;
width:100% !important;
min-width:0 !important;
}
.mh-board > .mh-board-row > .mh-board-count:nth-child(2){
grid-column:2 !important;
justify-self:center !important;
}
.mh-board > .mh-board-row > .mh-board-count:nth-child(3){
grid-column:3 !important;
justify-self:center !important;
}
.mh-board > .mh-board-row > .mh-board-last{
grid-column:4 !important;
justify-self:stretch !important;
width:100% !important;
min-width:0 !important;
}
/* Zahlen exakt unter den Überschriften zentrieren */
.mh-board > .mh-board-row > .mh-board-count{
width:46px !important;
min-width:46px !important;
max-width:46px !important;
height:30px !important;
min-height:30px !important;
max-height:30px !important;
padding:0 !important;
margin:0 auto !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
border-radius:999px !important;
font-size:.82rem !important;
line-height:1 !important;
}
/* Kopfzeile exakt mit gleicher Außenkante wie die Zeilen */
.mh-board > .mh-board-head,
.mh-board > .mh-board-head-polish3{
padding:10px 16px !important;
margin:0 0 8px !important;
border-radius:14px !important;
}
/* Zeilen behalten gleiche Außenkante */
.mh-board > .mh-board-row{
padding:14px 16px !important;
margin:10px 0 !important;
}
/* Letzter Beitrag nicht in die Zahlen-Spalten drücken */
.mh-board > .mh-board-row > .mh-board-last,
.mh-board > .mh-board-row > .mh-board-last .mh-board-last-link{
max-width:100% !important;
overflow:hidden !important;
}
.mh-board > .mh-board-row > .mh-board-last .mh-board-last-link strong,
.mh-board > .mh-board-row > .mh-board-last .mh-board-last-link small{
max-width:100% !important;
}
/* Gruppenüberschriften sind keine Spalten-Zeilen */
.mh-board > .mh-board-group{
width:100% !important;
box-sizing:border-box !important;
margin:12px 0 8px !important;
}
/* Bei mittleren Breiten letzte Spalte etwas kleiner, aber weiterhin exakt synchron */
@media(max-width:1180px) and (min-width:901px){
.mh-board{
--mh-forum-col-main:minmax(320px, 1fr) !important;
--mh-forum-col-last:minmax(210px, 250px) !important;
}
}
/* Mobile: Kopfzeile ausblenden und sauber stapeln */
@media(max-width:900px){
.mh-board > .mh-board-head,
.mh-board > .mh-board-head-polish3{
display:none !important;
}
.mh-board > .mh-board-row{
display:grid !important;
grid-template-columns:1fr !important;
row-gap:10px !important;
}
.mh-board > .mh-board-row > .mh-board-title,
.mh-board > .mh-board-row > .mh-board-title-link,
.mh-board > .mh-board-row > .mh-board-count:nth-child(2),
.mh-board > .mh-board-row > .mh-board-count:nth-child(3),
.mh-board > .mh-board-row > .mh-board-last{
grid-column:1 !important;
justify-self:stretch !important;
}
.mh-board > .mh-board-row > .mh-board-count{
width:max-content !important;
min-width:46px !important;
max-width:none !important;
margin:0 !important;
padding:0 12px !important;
justify-self:start !important;
}
}
/* FINAL CLEAN LAYOUT: Forum-Startseite ruhiger und ordentlicher */
.mh-board{
--mh-clean-main:minmax(360px, 1fr) !important;
--mh-clean-count:72px !important;
--mh-clean-last:minmax(230px, 285px) !important;
}
/* Kopfzeile und Zeilen sauber synchron */
.mh-board > .mh-board-head,
.mh-board > .mh-board-head-polish3,
.mh-board > .mh-board-row{
display:grid !important;
grid-template-columns:
var(--mh-clean-main)
var(--mh-clean-count)
var(--mh-clean-count)
var(--mh-clean-last) !important;
column-gap:18px !important;
align-items:center !important;
width:100% !important;
box-sizing:border-box !important;
}
/* Außenkanten gleich */
.mh-board > .mh-board-head,
.mh-board > .mh-board-head-polish3{
padding:10px 18px !important;
margin:0 0 10px !important;
border-radius:14px !important;
}
.mh-board > .mh-board-row{
padding:15px 18px !important;
margin:10px 0 !important;
min-height:88px !important;
height:auto !important;
max-height:none !important;
overflow:visible !important;
border-radius:18px !important;
}
/* Spalten exakt zuordnen */
.mh-board > .mh-board-row > .mh-board-title,
.mh-board > .mh-board-row > .mh-board-title-link{
grid-column:1 !important;
}
.mh-board > .mh-board-row > .mh-board-count:nth-child(2){
grid-column:2 !important;
}
.mh-board > .mh-board-row > .mh-board-count:nth-child(3){
grid-column:3 !important;
}
.mh-board > .mh-board-row > .mh-board-last{
grid-column:4 !important;
}
/* Kopfzeile exakt ausrichten */
.mh-board > .mh-board-head > div:nth-child(2),
.mh-board > .mh-board-head > div:nth-child(3),
.mh-board > .mh-board-head-polish3 > div:nth-child(2),
.mh-board > .mh-board-head-polish3 > div:nth-child(3){
width:var(--mh-clean-count) !important;
justify-self:center !important;
text-align:center !important;
}
.mh-board > .mh-board-head > div:nth-child(4),
.mh-board > .mh-board-head-polish3 > div:nth-child(4){
justify-self:stretch !important;
text-align:left !important;
}
/* Forumname + Beschreibung wieder kompakt zusammen, nicht zu weit rechts */
.mh-board .mh-board-title,
.mh-board .mh-board-title-link{
display:grid !important;
grid-template-columns:52px minmax(0,1fr) !important;
gap:14px !important;
align-items:center !important;
width:100% !important;
min-width:0 !important;
text-decoration:none !important;
color:inherit !important;
}
.mh-board .mh-board-title > div,
.mh-board .mh-board-title-link > div{
display:block !important;
min-width:0 !important;
max-width:100% !important;
overflow:visible !important;
}
.mh-board .mh-board-title strong,
.mh-board .mh-board-title-link strong{
display:block !important;
font-size:1rem !important;
line-height:1.25 !important;
margin:0 !important;
color:#16314f !important;
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
}
.mh-board .mh-board-title small,
.mh-board .mh-board-title-link small{
display:block !important;
margin:4px 0 0 !important;
padding:0 !important;
border-left:0 !important;
color:#64748b !important;
font-size:.83rem !important;
line-height:1.36 !important;
max-width:620px !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
-webkit-line-clamp:unset !important;
-webkit-box-orient:unset !important;
}
/* Icon sauber und gleichmäßig */
.mh-board .mh-board-icon{
width:52px !important;
height:52px !important;
min-width:52px !important;
max-width:52px !important;
align-self:center !important;
}
/* Zahlen klein, edel, exakt mittig unter den Überschriften */
.mh-board > .mh-board-row > .mh-board-count{
width:46px !important;
min-width:46px !important;
max-width:46px !important;
height:30px !important;
min-height:30px !important;
max-height:30px !important;
padding:0 !important;
margin:0 auto !important;
justify-self:center !important;
align-self:center !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:999px !important;
font-size:.82rem !important;
font-weight:850 !important;
}
/* Letzter Beitrag kompakter, aber lesbar */
.mh-board > .mh-board-row > .mh-board-last{
width:100% !important;
min-width:0 !important;
justify-self:stretch !important;
}
.mh-board .mh-board-last-link,
.mh-board .mh-board-last > span{
width:100% !important;
min-height:54px !important;
height:auto !important;
max-height:none !important;
padding:9px 11px !important;
box-sizing:border-box !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
border-radius:14px !important;
}
.mh-board .mh-board-last-link strong{
display:block !important;
color:#16314f !important;
font-size:.88rem !important;
line-height:1.25 !important;
max-width:100% !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.mh-board .mh-board-last-link small{
display:block !important;
color:#64748b !important;
font-size:.76rem !important;
line-height:1.25 !important;
max-width:100% !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* Gruppenbeschreibung rechts, aber nicht übertrieben weit auseinander */
@media(min-width:901px){
.mh-board .mh-board-group{
display:grid !important;
grid-template-columns:auto minmax(260px, 1fr) !important;
column-gap:18px !important;
align-items:center !important;
padding:11px 16px !important;
}
.mh-board .mh-board-group strong{
justify-self:start !important;
white-space:nowrap !important;
}
.mh-board .mh-board-group span{
justify-self:start !important;
text-align:left !important;
max-width:620px !important;
margin:0 !important;
}
}
/* Bei kleineren Desktop-Breiten kompaktere letzte Spalte */
@media(max-width:1180px) and (min-width:901px){
.mh-board{
--mh-clean-main:minmax(280px, 1fr) !important;
--mh-clean-last:minmax(205px, 245px) !important;
}
.mh-board .mh-board-title small,
.mh-board .mh-board-title-link small{
max-width:520px !important;
}
}
/* Mobile: sauber untereinander */
@media(max-width:900px){
.mh-board > .mh-board-head,
.mh-board > .mh-board-head-polish3{
display:none !important;
}
.mh-board > .mh-board-row{
display:grid !important;
grid-template-columns:1fr !important;
row-gap:10px !important;
min-height:0 !important;
}
.mh-board > .mh-board-row > .mh-board-title,
.mh-board > .mh-board-row > .mh-board-title-link,
.mh-board > .mh-board-row > .mh-board-count:nth-child(2),
.mh-board > .mh-board-row > .mh-board-count:nth-child(3),
.mh-board > .mh-board-row > .mh-board-last{
grid-column:1 !important;
justify-self:stretch !important;
}
.mh-board > .mh-board-row > .mh-board-count{
width:max-content !important;
min-width:46px !important;
max-width:none !important;
margin:0 !important;
padding:0 12px !important;
justify-self:start !important;
}
.mh-board .mh-board-group{
display:block !important;
}
.mh-board .mh-board-group span{
display:block !important;
text-align:left !important;
margin-top:3px !important;
max-width:none !important;
}
}
/* FINAL TABLE GRID: Forum-Startseite Spalten wirklich exakt ausrichten */
.mh-forum-main .mh-board{
--board-main-col:minmax(340px, 1fr) !important;
--board-topic-col:96px !important;
--board-reply-col:96px !important;
--board-last-col:minmax(240px, 300px) !important;
}
/* Kopf und Zeile erhalten exakt das gleiche Raster */
.mh-forum-main .mh-board > .mh-board-head,
.mh-forum-main .mh-board > .mh-board-head-polish3,
.mh-forum-main .mh-board > .mh-board-row{
display:grid !important;
grid-template-columns:
var(--board-main-col)
var(--board-topic-col)
var(--board-reply-col)
var(--board-last-col) !important;
gap:0 18px !important;
align-items:center !important;
width:100% !important;
box-sizing:border-box !important;
}
/* Gleiche Innenabstände, damit Überschrift und Werte dieselbe Kante haben */
.mh-forum-main .mh-board > .mh-board-head,
.mh-forum-main .mh-board > .mh-board-head-polish3{
padding:11px 18px !important;
margin:0 0 10px !important;
}
.mh-forum-main .mh-board > .mh-board-row{
padding:15px 18px !important;
margin:10px 0 !important;
}
/* Kopfspalten fest zuweisen */
.mh-forum-main .mh-board > .mh-board-head > div:nth-child(1),
.mh-forum-main .mh-board > .mh-board-head-polish3 > div:nth-child(1){
grid-column:1 !important;
justify-self:stretch !important;
text-align:left !important;
}
.mh-forum-main .mh-board > .mh-board-head > div:nth-child(2),
.mh-forum-main .mh-board > .mh-board-head-polish3 > div:nth-child(2){
grid-column:2 !important;
justify-self:center !important;
text-align:center !important;
width:var(--board-topic-col) !important;
}
.mh-forum-main .mh-board > .mh-board-head > div:nth-child(3),
.mh-forum-main .mh-board > .mh-board-head-polish3 > div:nth-child(3){
grid-column:3 !important;
justify-self:center !important;
text-align:center !important;
width:var(--board-reply-col) !important;
}
.mh-forum-main .mh-board > .mh-board-head > div:nth-child(4),
.mh-forum-main .mh-board > .mh-board-head-polish3 > div:nth-child(4){
grid-column:4 !important;
justify-self:stretch !important;
text-align:left !important;
width:100% !important;
}
/* Inhaltsspalten fest zuweisen */
.mh-forum-main .mh-board > .mh-board-row > .mh-board-title,
.mh-forum-main .mh-board > .mh-board-row > .mh-board-title-link{
grid-column:1 !important;
justify-self:stretch !important;
width:100% !important;
min-width:0 !important;
}
.mh-forum-main .mh-board > .mh-board-row > .mh-board-count:nth-child(2){
grid-column:2 !important;
justify-self:center !important;
}
.mh-forum-main .mh-board > .mh-board-row > .mh-board-count:nth-child(3){
grid-column:3 !important;
justify-self:center !important;
}
.mh-forum-main .mh-board > .mh-board-row > .mh-board-last{
grid-column:4 !important;
justify-self:stretch !important;
width:100% !important;
min-width:0 !important;
}
/* Zahlen edler, größer und besser lesbar */
.mh-forum-main .mh-board > .mh-board-row > .mh-board-count{
width:64px !important;
min-width:64px !important;
max-width:64px !important;
height:38px !important;
min-height:38px !important;
max-height:38px !important;
padding:0 !important;
margin:0 auto !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:14px !important;
background:linear-gradient(180deg,#ffffff 0%,#f1f5f9 100%) !important;
border:1px solid rgba(100,116,139,.20) !important;
box-shadow:0 8px 18px rgba(15,23,42,.06) !important;
color:#16314f !important;
font-size:1rem !important;
font-weight:900 !important;
letter-spacing:.01em !important;
line-height:1 !important;
box-sizing:border-box !important;
}
/* Zahl-Hover etwas hochwertiger */
.mh-forum-main .mh-board > .mh-board-row:hover > .mh-board-count{
background:linear-gradient(180deg,#f0fdfa 0%,#ffffff 100%) !important;
border-color:rgba(13,139,141,.30) !important;
color:#0d6f72 !important;
box-shadow:0 10px 22px rgba(13,139,141,.11) !important;
}
/* Kopfzeile optisch passend zu den größeren Zahlen */
.mh-forum-main .mh-board > .mh-board-head > div:nth-child(2),
.mh-forum-main .mh-board > .mh-board-head > div:nth-child(3),
.mh-forum-main .mh-board > .mh-board-head-polish3 > div:nth-child(2),
.mh-forum-main .mh-board > .mh-board-head-polish3 > div:nth-child(3){
color:#64748b !important;
font-size:.72rem !important;
font-weight:950 !important;
letter-spacing:.08em !important;
}
/* Beschreibung wieder kompakt beim Forennamen */
.mh-forum-main .mh-board .mh-board-title,
.mh-forum-main .mh-board .mh-board-title-link{
display:grid !important;
grid-template-columns:52px minmax(0,1fr) !important;
gap:14px !important;
align-items:center !important;
}
.mh-forum-main .mh-board .mh-board-title > div,
.mh-forum-main .mh-board .mh-board-title-link > div{
display:block !important;
min-width:0 !important;
}
.mh-forum-main .mh-board .mh-board-title small,
.mh-forum-main .mh-board .mh-board-title-link small{
margin-top:4px !important;
padding-left:0 !important;
border-left:0 !important;
max-width:620px !important;
}
/* Letzter Beitrag bleibt in seiner Spalte */
.mh-forum-main .mh-board .mh-board-last,
.mh-forum-main .mh-board .mh-board-last-link{
min-width:0 !important;
max-width:100% !important;
box-sizing:border-box !important;
}
.mh-forum-main .mh-board .mh-board-last-link strong,
.mh-forum-main .mh-board .mh-board-last-link small{
max-width:100% !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
/* Bei schmaleren Desktops trotzdem synchron bleiben */
@media(max-width:1180px) and (min-width:901px){
.mh-forum-main .mh-board{
--board-main-col:minmax(280px, 1fr) !important;
--board-topic-col:88px !important;
--board-reply-col:88px !important;
--board-last-col:minmax(210px, 250px) !important;
}
.mh-forum-main .mh-board > .mh-board-row > .mh-board-count{
width:60px !important;
min-width:60px !important;
max-width:60px !important;
}
}
/* Mobile: keine Tabellenüberschrift, aber Werte ordentlich */
@media(max-width:900px){
.mh-forum-main .mh-board > .mh-board-head,
.mh-forum-main .mh-board > .mh-board-head-polish3{
display:none !important;
}
.mh-forum-main .mh-board > .mh-board-row{
display:grid !important;
grid-template-columns:1fr !important;
row-gap:10px !important;
}
.mh-forum-main .mh-board > .mh-board-row > .mh-board-title,
.mh-forum-main .mh-board > .mh-board-row > .mh-board-title-link,
.mh-forum-main .mh-board > .mh-board-row > .mh-board-count:nth-child(2),
.mh-forum-main .mh-board > .mh-board-row > .mh-board-count:nth-child(3),
.mh-forum-main .mh-board > .mh-board-row > .mh-board-last{
grid-column:1 !important;
justify-self:stretch !important;
}
.mh-forum-main .mh-board > .mh-board-row > .mh-board-count{
width:max-content !important;
min-width:64px !important;
max-width:none !important;
height:36px !important;
padding:0 14px !important;
margin:0 !important;
justify-self:start !important;
}
}
/* Registrierung: einfache Bot-Sicherheitsfrage */
.captcha-section-title{
margin-top:8px !important;
}
.register-captcha-field{
padding:14px !important;
border:1px solid rgba(13,139,141,.16) !important;
border-radius:18px !important;
background:linear-gradient(180deg,#f0fdfa,#ffffff) !important;
}
.register-captcha-field label{
color:#16314f !important;
font-weight:900 !important;
}
.register-captcha-field input{
max-width:240px !important;
font-weight:900 !important;
letter-spacing:.04em !important;
}
/* Forum-Startseite: echte Tabellenstruktur für dauerhaft passende Spalten */
.mh-board-table-wrap{
overflow-x:auto !important;
}
.mh-board-table{
width:100% !important;
border-collapse:separate !important;
border-spacing:0 10px !important;
table-layout:fixed !important;
}
.mh-board-table th{
padding:11px 18px !important;
color:#64748b !important;
font-size:.72rem !important;
font-weight:950 !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
text-align:left !important;
}
.mh-board-table th:nth-child(2),
.mh-board-table th:nth-child(3){
text-align:center !important;
}
.mh-board-col-forum{width:auto !important;}
.mh-board-col-count{width:108px !important;}
.mh-board-col-last{width:300px !important;}
.mh-board-table td{
padding:0 !important;
vertical-align:middle !important;
}
.mh-board-table .mh-board-row{
display:table-row !important;
transform:none !important;
}
.mh-board-table .mh-board-row td{
background:#fff !important;
border-top:1px solid rgba(100,116,139,.14) !important;
border-bottom:1px solid rgba(100,116,139,.14) !important;
padding:15px 18px !important;
transition:background .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
.mh-board-table .mh-board-row td:first-child{
border-left:1px solid rgba(100,116,139,.14) !important;
border-radius:18px 0 0 18px !important;
}
.mh-board-table .mh-board-row td:last-child{
border-right:1px solid rgba(100,116,139,.14) !important;
border-radius:0 18px 18px 0 !important;
}
.mh-board-table .mh-board-row:hover td{
background:#f8fffe !important;
border-color:rgba(13,139,141,.28) !important;
box-shadow:0 12px 28px rgba(13,139,141,.08) !important;
}
.mh-board-table .mh-board-forum-cell{
min-width:0 !important;
}
.mh-board-table .mh-board-title-link{
display:grid !important;
grid-template-columns:52px minmax(0,1fr) !important;
gap:14px !important;
align-items:center !important;
color:inherit !important;
text-decoration:none !important;
min-width:0 !important;
}
.mh-board-table .mh-board-title-link > div{
display:block !important;
min-width:0 !important;
}
.mh-board-table .mh-board-title-link strong{
display:block !important;
color:#16314f !important;
font-size:1rem !important;
line-height:1.25 !important;
margin:0 !important;
}
.mh-board-table .mh-board-title-link small{
display:block !important;
margin:4px 0 0 !important;
padding:0 !important;
border:0 !important;
color:#64748b !important;
font-size:.84rem !important;
line-height:1.36 !important;
max-width:620px !important;
}
.mh-board-table .mh-board-count-cell{
text-align:center !important;
}
.mh-board-table .mh-board-count{
width:74px !important;
height:44px !important;
margin:0 auto !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:16px !important;
background:linear-gradient(180deg,#ffffff 0%,#eef7f7 100%) !important;
border:1px solid rgba(13,139,141,.18) !important;
box-shadow:0 8px 18px rgba(15,23,42,.07) !important;
color:#16314f !important;
font-size:1.1rem !important;
font-weight:950 !important;
letter-spacing:.01em !important;
}
.mh-board-table .mh-board-row:hover .mh-board-count{
background:linear-gradient(180deg,#f0fdfa 0%,#ffffff 100%) !important;
color:#0d6f72 !important;
border-color:rgba(13,139,141,.34) !important;
}
.mh-board-table .mh-board-last-link,
.mh-board-table .mh-board-last > span{
min-height:58px !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
padding:9px 11px !important;
border-radius:14px !important;
background:rgba(248,250,252,.9) !important;
text-decoration:none !important;
}
.mh-board-table .mh-board-last-link strong,
.mh-board-table .mh-board-last-link small{
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
max-width:100% !important;
}
.mh-board-table .mh-board-group-row td{
padding:6px 0 0 !important;
}
.mh-board-table .mh-board-group{
display:grid !important;
grid-template-columns:auto minmax(0,1fr) !important;
gap:18px !important;
align-items:center !important;
padding:11px 16px !important;
border-radius:16px !important;
}
.mh-board-table .mh-board-group span{
justify-self:start !important;
text-align:left !important;
max-width:620px !important;
}
@media(max-width:1000px){
.mh-board-col-count{width:92px !important;}
.mh-board-col-last{width:240px !important;}
.mh-board-table .mh-board-count{width:64px !important;height:40px !important;}
}
@media(max-width:760px){
.mh-board-table,
.mh-board-table thead,
.mh-board-table tbody,
.mh-board-table tr,
.mh-board-table td{
display:block !important;
width:100% !important;
}
.mh-board-table thead{display:none !important;}
.mh-board-table{
border-spacing:0 !important;
}
.mh-board-table .mh-board-row{
margin:12px 0 !important;
background:#fff !important;
border:1px solid rgba(100,116,139,.14) !important;
border-radius:18px !important;
padding:14px !important;
}
.mh-board-table .mh-board-row td{
border:0 !important;
border-radius:0 !important;
padding:8px 0 !important;
box-shadow:none !important;
}
.mh-board-table .mh-board-count-cell{
text-align:left !important;
display:inline-block !important;
width:auto !important;
margin-right:8px !important;
}
.mh-board-table .mh-board-count-cell:nth-child(2)::before{content:"Themen ";font-size:.74rem;color:#64748b;font-weight:800;margin-right:8px;}
.mh-board-table .mh-board-count-cell:nth-child(3)::before{content:"Antworten ";font-size:.74rem;color:#64748b;font-weight:800;margin-right:8px;}
}
.mh-hp-field{
position:absolute !important;
left:-9999px !important;
top:auto !important;
width:1px !important;
height:1px !important;
overflow:hidden !important;
}
.security-check{
display:flex !important;
gap:12px !important;
align-items:flex-start !important;
padding:12px 14px !important;
border:1px solid rgba(100,116,139,.14) !important;
border-radius:16px !important;
background:#fff !important;
}
.security-check span{
display:flex !important;
flex-direction:column !important;
gap:3px !important;
}
.security-check small{
color:#64748b !important;
}
/* Loginseite: Logo als sauberer Link */
.login-brand-link,
.login-card > a.login-brand,
.login-card > a.register-brand{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
text-decoration:none !important;
border-radius:18px !important;
transition:transform .18s ease, filter .18s ease, opacity .18s ease !important;
}
.login-brand-link:hover,
.login-card > a.login-brand:hover,
.login-card > a.register-brand:hover{
transform:translateY(-1px) !important;
filter:drop-shadow(0 8px 18px rgba(13,139,141,.14)) !important;
opacity:.96 !important;
}
.login-brand-link:focus-visible,
.login-card > a.login-brand:focus-visible,
.login-card > a.register-brand:focus-visible{
outline:3px solid rgba(13,139,141,.28) !important;
outline-offset:5px !important;
}
/* NOTFALL-FIX: Forum-Übersicht wieder stabil, ohne Tabellen-Layout */
.mh-board-table,
.mh-board-table-wrap,
.mh-board-table thead,
.mh-board-table tbody,
.mh-board-table tr,
.mh-board-table td,
.mh-board-table th{
all:unset;
}
.mh-board-stable{
overflow:visible !important;
}
.mh-board-stable-head,
.mh-board-stable-row{
display:grid !important;
grid-template-columns:minmax(360px,1fr) 104px 104px minmax(240px,300px) !important;
column-gap:18px !important;
align-items:center !important;
box-sizing:border-box !important;
width:100% !important;
}
.mh-board-stable-head{
padding:10px 18px !important;
margin:0 0 10px !important;
border-radius:14px !important;
background:rgba(248,250,252,.92) !important;
border:1px solid rgba(100,116,139,.12) !important;
color:#64748b !important;
font-size:.72rem !important;
font-weight:950 !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
}
.mh-board-stable-head > div:nth-child(2),
.mh-board-stable-head > div:nth-child(3){
text-align:center !important;
}
.mh-board-stable-group{
display:grid !important;
grid-template-columns:auto minmax(0,1fr) !important;
gap:18px !important;
align-items:center !important;
margin:14px 0 8px !important;
padding:11px 16px !important;
border-radius:16px !important;
background:linear-gradient(180deg,#f8fafc,#ffffff) !important;
border:1px solid rgba(100,116,139,.12) !important;
}
.mh-board-stable-group strong{
color:#16314f !important;
font-size:.9rem !important;
font-weight:950 !important;
white-space:nowrap !important;
}
.mh-board-stable-group span{
color:#64748b !important;
font-size:.84rem !important;
line-height:1.35 !important;
max-width:640px !important;
}
.mh-board-stable-row{
position:relative !important;
min-height:92px !important;
padding:15px 18px !important;
margin:10px 0 !important;
border-radius:18px !important;
background:#fff !important;
border:1px solid rgba(100,116,139,.14) !important;
box-shadow:0 8px 22px rgba(15,23,42,.045) !important;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
overflow:visible !important;
}
.mh-board-stable-row:hover{
transform:translateY(-2px) !important;
background:linear-gradient(180deg,#ffffff 0%,#f8fffe 100%) !important;
border-color:rgba(13,139,141,.28) !important;
box-shadow:0 16px 36px rgba(13,139,141,.11), 0 8px 18px rgba(15,23,42,.05) !important;
}
.mh-board-stable-forum{
display:grid !important;
grid-template-columns:54px minmax(0,1fr) !important;
gap:14px !important;
align-items:center !important;
text-decoration:none !important;
color:inherit !important;
min-width:0 !important;
}
.mh-board-stable-icon{
width:54px !important;
height:54px !important;
border-radius:17px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-size:1.45rem !important;
background:linear-gradient(180deg,#f8fafc,#ffffff) !important;
border:1px solid rgba(100,116,139,.16) !important;
box-shadow:inset 4px 0 0 #0d8b8d, 0 8px 18px rgba(15,23,42,.05) !important;
}
.mh-board-stable-text{
display:block !important;
min-width:0 !important;
}
.mh-board-stable-text strong{
display:block !important;
color:#16314f !important;
font-size:1rem !important;
line-height:1.25 !important;
margin:0 !important;
}
.mh-board-stable-text small{
display:block !important;
margin-top:4px !important;
color:#64748b !important;
font-size:.84rem !important;
line-height:1.36 !important;
max-width:620px !important;
}
.mh-board-stable-count{
width:78px !important;
min-height:50px !important;
margin:0 auto !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
border-radius:16px !important;
background:linear-gradient(180deg,#ffffff 0%,#eef7f7 100%) !important;
border:1px solid rgba(13,139,141,.18) !important;
box-shadow:0 8px 18px rgba(15,23,42,.07) !important;
}
.mh-board-stable-count strong{
color:#16314f !important;
font-size:1.15rem !important;
line-height:1 !important;
font-weight:950 !important;
}
.mh-board-stable-count small{
margin-top:4px !important;
color:#64748b !important;
font-size:.66rem !important;
line-height:1 !important;
font-weight:850 !important;
text-transform:uppercase !important;
letter-spacing:.06em !important;
}
.mh-board-stable-row:hover .mh-board-stable-count{
background:linear-gradient(180deg,#f0fdfa 0%,#ffffff 100%) !important;
color:#0d6f72 !important;
border-color:rgba(13,139,141,.34) !important;
}
.mh-board-stable-last{
min-width:0 !important;
}
.mh-board-stable-last a,
.mh-board-stable-last span{
display:flex !important;
min-height:58px !important;
flex-direction:column !important;
justify-content:center !important;
padding:9px 11px !important;
border-radius:14px !important;
background:rgba(248,250,252,.9) !important;
border:1px solid rgba(100,116,139,.10) !important;
text-decoration:none !important;
color:inherit !important;
box-sizing:border-box !important;
min-width:0 !important;
}
.mh-board-stable-last strong{
color:#16314f !important;
font-size:.88rem !important;
line-height:1.25 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.mh-board-stable-last small{
color:#64748b !important;
font-size:.76rem !important;
line-height:1.25 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* Akzentfarben für stabile Forum-Karten */
.mh-board-stable-row.mh-board-accent-orange .mh-board-stable-icon{box-shadow:inset 4px 0 0 #d97706, 0 8px 18px rgba(15,23,42,.05) !important;}
.mh-board-stable-row.mh-board-accent-blue .mh-board-stable-icon{box-shadow:inset 4px 0 0 #2563eb, 0 8px 18px rgba(15,23,42,.05) !important;}
.mh-board-stable-row.mh-board-accent-green .mh-board-stable-icon{box-shadow:inset 4px 0 0 #16a34a, 0 8px 18px rgba(15,23,42,.05) !important;}
.mh-board-stable-row.mh-board-accent-purple .mh-board-stable-icon{box-shadow:inset 4px 0 0 #7c3aed, 0 8px 18px rgba(15,23,42,.05) !important;}
.mh-board-stable-row.mh-board-accent-red .mh-board-stable-icon{box-shadow:inset 4px 0 0 #dc2626, 0 8px 18px rgba(15,23,42,.05) !important;}
@media(max-width:1180px) and (min-width:781px){
.mh-board-stable-head,
.mh-board-stable-row{
grid-template-columns:minmax(280px,1fr) 90px 90px minmax(210px,250px) !important;
column-gap:14px !important;
}
.mh-board-stable-count{
width:70px !important;
}
}
@media(max-width:780px){
.mh-board-stable-head{
display:none !important;
}
.mh-board-stable-group{
display:block !important;
}
.mh-board-stable-group span{
display:block !important;
margin-top:4px !important;
}
.mh-board-stable-row{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:10px !important;
padding:14px !important;
min-height:0 !important;
transform:none !important;
}
.mh-board-stable-forum,
.mh-board-stable-last{
grid-column:1 / -1 !important;
}
.mh-board-stable-count{
width:100% !important;
min-height:46px !important;
margin:0 !important;
}
}
/* Forum-Übersicht: vorherige klassische Darstellung wiederherstellen */
.mh-board-classic-restored{
overflow:visible !important;
}
/* Alte Tabellen-/Notfall-Strukturen aus späteren Versuchen deaktivieren */
.mh-board-classic-restored .mh-board-table,
.mh-board-classic-restored .mh-board-stable,
.mh-board-classic-restored .mh-board-stable-row,
.mh-board-classic-restored .mh-board-stable-head{
display:none !important;
}
/* Klassisches Grid wie zuvor */
.mh-board-classic-restored > .mh-board-head,
.mh-board-classic-restored > .mh-board-row{
display:grid !important;
grid-template-columns:minmax(360px,1fr) 92px 92px minmax(230px,285px) !important;
column-gap:18px !important;
align-items:center !important;
width:100% !important;
box-sizing:border-box !important;
}
.mh-board-classic-restored > .mh-board-head{
padding:10px 18px !important;
margin:0 0 10px !important;
border-radius:14px !important;
background:rgba(248,250,252,.92) !important;
border:1px solid rgba(100,116,139,.12) !important;
color:#64748b !important;
font-size:.72rem !important;
font-weight:950 !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
}
.mh-board-classic-restored > .mh-board-head > div:nth-child(2),
.mh-board-classic-restored > .mh-board-head > div:nth-child(3){
text-align:center !important;
}
.mh-board-classic-restored > .mh-board-row{
position:relative !important;
padding:15px 18px !important;
margin:10px 0 !important;
min-height:88px !important;
height:auto !important;
max-height:none !important;
overflow:visible !important;
border-radius:18px !important;
background:#fff !important;
border:1px solid rgba(100,116,139,.14) !important;
box-shadow:0 8px 22px rgba(15,23,42,.045) !important;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
}
.mh-board-classic-restored > .mh-board-row:hover{
transform:translateY(-2px) !important;
background:linear-gradient(180deg,#ffffff 0%,#f8fffe 100%) !important;
border-color:rgba(13,139,141,.28) !important;
box-shadow:0 16px 36px rgba(13,139,141,.11), 0 8px 18px rgba(15,23,42,.05) !important;
}
.mh-board-classic-restored .mh-board-group{
display:grid !important;
grid-template-columns:auto minmax(260px,1fr) !important;
gap:18px !important;
align-items:center !important;
padding:11px 16px !important;
margin:14px 0 8px !important;
border-radius:16px !important;
background:linear-gradient(180deg,#f8fafc,#ffffff) !important;
border:1px solid rgba(100,116,139,.12) !important;
}
.mh-board-classic-restored .mh-board-group strong{
justify-self:start !important;
color:#16314f !important;
font-size:.9rem !important;
font-weight:950 !important;
white-space:nowrap !important;
}
.mh-board-classic-restored .mh-board-group span{
justify-self:start !important;
text-align:left !important;
max-width:620px !important;
color:#64748b !important;
font-size:.84rem !important;
line-height:1.35 !important;
}
.mh-board-classic-restored .mh-board-title,
.mh-board-classic-restored .mh-board-title-link{
display:grid !important;
grid-template-columns:52px minmax(0,1fr) !important;
gap:14px !important;
align-items:center !important;
width:100% !important;
min-width:0 !important;
text-decoration:none !important;
color:inherit !important;
}
.mh-board-classic-restored .mh-board-title > div,
.mh-board-classic-restored .mh-board-title-link > div{
display:block !important;
min-width:0 !important;
max-width:100% !important;
}
.mh-board-classic-restored .mh-board-icon{
width:52px !important;
height:52px !important;
min-width:52px !important;
border-radius:17px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-size:1.42rem !important;
background:linear-gradient(180deg,#f8fafc,#ffffff) !important;
border:1px solid rgba(100,116,139,.16) !important;
box-shadow:inset 4px 0 0 #0d8b8d, 0 8px 18px rgba(15,23,42,.05) !important;
}
.mh-board-classic-restored .mh-board-title strong,
.mh-board-classic-restored .mh-board-title-link strong{
display:block !important;
font-size:1rem !important;
line-height:1.25 !important;
margin:0 !important;
color:#16314f !important;
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
}
.mh-board-classic-restored .mh-board-title small,
.mh-board-classic-restored .mh-board-title-link small{
display:block !important;
margin:4px 0 0 !important;
padding:0 !important;
border-left:0 !important;
color:#64748b !important;
font-size:.83rem !important;
line-height:1.36 !important;
max-width:620px !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
.mh-board-classic-restored > .mh-board-row > .mh-board-count{
width:64px !important;
min-width:64px !important;
max-width:64px !important;
height:40px !important;
min-height:40px !important;
max-height:40px !important;
padding:0 !important;
margin:0 auto !important;
justify-self:center !important;
align-self:center !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:14px !important;
background:linear-gradient(180deg,#ffffff 0%,#eef7f7 100%) !important;
border:1px solid rgba(13,139,141,.18) !important;
box-shadow:0 8px 18px rgba(15,23,42,.07) !important;
color:#16314f !important;
font-size:1.05rem !important;
font-weight:950 !important;
line-height:1 !important;
box-sizing:border-box !important;
}
.mh-board-classic-restored > .mh-board-row:hover > .mh-board-count{
background:linear-gradient(180deg,#f0fdfa 0%,#ffffff 100%) !important;
color:#0d6f72 !important;
border-color:rgba(13,139,141,.34) !important;
}
.mh-board-classic-restored .mh-board-last{
width:100% !important;
min-width:0 !important;
}
.mh-board-classic-restored .mh-board-last-link,
.mh-board-classic-restored .mh-board-last > span{
width:100% !important;
min-height:54px !important;
height:auto !important;
padding:9px 11px !important;
box-sizing:border-box !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
border-radius:14px !important;
background:rgba(248,250,252,.9) !important;
border:1px solid rgba(100,116,139,.10) !important;
text-decoration:none !important;
}
.mh-board-classic-restored .mh-board-last-link strong{
display:block !important;
color:#16314f !important;
font-size:.88rem !important;
line-height:1.25 !important;
max-width:100% !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.mh-board-classic-restored .mh-board-last-link small{
display:block !important;
color:#64748b !important;
font-size:.76rem !important;
line-height:1.25 !important;
max-width:100% !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
@media(max-width:1180px) and (min-width:781px){
.mh-board-classic-restored > .mh-board-head,
.mh-board-classic-restored > .mh-board-row{
grid-template-columns:minmax(280px,1fr) 82px 82px minmax(205px,245px) !important;
column-gap:14px !important;
}
.mh-board-classic-restored > .mh-board-row > .mh-board-count{
width:58px !important;
}
}
@media(max-width:780px){
.mh-board-classic-restored > .mh-board-head{
display:none !important;
}
.mh-board-classic-restored .mh-board-group{
display:block !important;
}
.mh-board-classic-restored .mh-board-group span{
display:block !important;
margin-top:4px !important;
}
.mh-board-classic-restored > .mh-board-row{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:10px !important;
padding:14px !important;
min-height:0 !important;
transform:none !important;
}
.mh-board-classic-restored .mh-board-title-link,
.mh-board-classic-restored .mh-board-last{
grid-column:1 / -1 !important;
}
.mh-board-classic-restored > .mh-board-row > .mh-board-count{
width:100% !important;
min-width:0 !important;
max-width:none !important;
height:40px !important;
margin:0 !important;
}
}
/* Forum: Hover-Effekt für Beiträge, Themen und Antworten wieder sichtbar */
.mh-topic-row,
.mh-topic-item,
.mh-latest a,
.mh-post,
.forum-post,
.mh-reply,
.community-post,
.topic-card,
.post-card,
.mh-forum-post,
.mh-topic-table a,
.mh-my-topic-row{
transition:
transform .18s ease,
box-shadow .18s ease,
border-color .18s ease,
background .18s ease,
color .18s ease !important;
}
/* Themen-/Listenbeiträge */
.mh-topic-row:hover,
.mh-topic-item:hover,
.mh-latest a:hover,
.mh-topic-table a:hover,
.mh-my-topic-row:hover,
.topic-card:hover{
transform:translateY(-2px) !important;
background:linear-gradient(180deg,#ffffff 0%,#f8fffe 100%) !important;
border-color:rgba(13,139,141,.28) !important;
box-shadow:0 14px 32px rgba(13,139,141,.10), 0 7px 16px rgba(15,23,42,.05) !important;
}
/* Einzelne Beiträge / Antworten im Thema */
.mh-post:hover,
.forum-post:hover,
.mh-reply:hover,
.community-post:hover,
.post-card:hover,
.mh-forum-post:hover{
transform:translateY(-2px) !important;
background:linear-gradient(180deg,#ffffff 0%,#f8fffe 100%) !important;
border-color:rgba(13,139,141,.28) !important;
box-shadow:0 16px 36px rgba(13,139,141,.10), 0 8px 18px rgba(15,23,42,.05) !important;
}
/* dezente Akzentkante beim Hover */
.mh-post,
.forum-post,
.mh-reply,
.community-post,
.post-card,
.mh-forum-post,
.mh-topic-row,
.mh-topic-item{
position:relative !important;
}
.mh-post::before,
.forum-post::before,
.mh-reply::before,
.community-post::before,
.post-card::before,
.mh-forum-post::before,
.mh-topic-row::before,
.mh-topic-item::before{
content:"" !important;
position:absolute !important;
left:0 !important;
top:16px !important;
bottom:16px !important;
width:3px !important;
border-radius:999px !important;
background:#0d8b8d !important;
opacity:0 !important;
transition:opacity .18s ease !important;
pointer-events:none !important;
}
.mh-post:hover::before,
.forum-post:hover::before,
.mh-reply:hover::before,
.community-post:hover::before,
.post-card:hover::before,
.mh-forum-post:hover::before,
.mh-topic-row:hover::before,
.mh-topic-item:hover::before{
opacity:1 !important;
}
/* Titel/Links beim Hover klarer */
.mh-topic-row:hover strong,
.mh-topic-item:hover strong,
.mh-latest a:hover strong,
.mh-topic-table a:hover strong,
.mh-post:hover .mh-post-title,
.mh-post:hover .forum-topic-title,
.forum-post:hover .mh-post-title,
.community-post:hover .mh-post-title,
.post-card:hover .mh-post-title{
color:#0d6f72 !important;
}
/* Aktionen im Beitrag bleiben lesbar */
.mh-post:hover .btn,
.forum-post:hover .btn,
.mh-reply:hover .btn,
.community-post:hover .btn,
.post-card:hover .btn{
text-decoration:none !important;
}
/* Mobile: kein Springen, aber sichtbarer Hover/Focus bleibt */
@media(max-width:780px){
.mh-topic-row:hover,
.mh-topic-item:hover,
.mh-latest a:hover,
.mh-topic-table a:hover,
.mh-my-topic-row:hover,
.topic-card:hover,
.mh-post:hover,
.forum-post:hover,
.mh-reply:hover,
.community-post:hover,
.post-card:hover,
.mh-forum-post:hover{
transform:none !important;
}
}
/* HARD-FIX: Forum-Hover wieder deutlich sichtbar auf den echten Elementen */
.mh-forum article.mh-post.mh-post-premium,
.mh-forum .mh-post.mh-post-premium,
.mh-forum a.mh-topic-row,
.mh-forum .mh-topic-row,
.mh-forum .mh-board-row,
.mh-forum .mh-latest > a{
position:relative !important;
isolation:isolate !important;
transition:
transform .18s ease,
box-shadow .18s ease,
border-color .18s ease,
background-color .18s ease,
outline-color .18s ease !important;
}
/* Beiträge im geöffneten Thema */
.mh-forum article.mh-post.mh-post-premium:hover,
.mh-forum .mh-post.mh-post-premium:hover{
transform:translateY(-3px) !important;
background:#ffffff !important;
border-color:#0d8b8d !important;
outline:2px solid rgba(13,139,141,.22) !important;
outline-offset:0 !important;
box-shadow:
0 22px 48px rgba(13,139,141,.18),
0 10px 24px rgba(15,23,42,.08) !important;
}
/* klar sichtbarer linker Hover-Streifen bei Beiträgen */
.mh-forum article.mh-post.mh-post-premium::after,
.mh-forum .mh-post.mh-post-premium::after{
content:"" !important;
position:absolute !important;
left:0 !important;
top:18px !important;
bottom:18px !important;
width:5px !important;
border-radius:999px !important;
background:#0d8b8d !important;
opacity:0 !important;
transform:scaleY(.65) !important;
transition:opacity .18s ease, transform .18s ease !important;
pointer-events:none !important;
z-index:3 !important;
}
.mh-forum article.mh-post.mh-post-premium:hover::after,
.mh-forum .mh-post.mh-post-premium:hover::after{
opacity:1 !important;
transform:scaleY(1) !important;
}
/* Autorenspalte reagiert mit, damit man den Hover sofort sieht */
.mh-forum article.mh-post.mh-post-premium:hover .mh-post-author,
.mh-forum .mh-post.mh-post-premium:hover .mh-post-author{
background:linear-gradient(180deg,#f0fdfa 0%,#ffffff 100%) !important;
border-color:rgba(13,139,141,.26) !important;
}
.mh-forum article.mh-post.mh-post-premium:hover .mh-author-avatar,
.mh-forum .mh-post.mh-post-premium:hover .mh-author-avatar{
transform:translateY(-1px) scale(1.03) !important;
box-shadow:0 12px 28px rgba(13,139,141,.16) !important;
}
.mh-forum article.mh-post.mh-post-premium:hover .mh-post-toolbar,
.mh-forum .mh-post.mh-post-premium:hover .mh-post-toolbar{
background:rgba(240,253,250,.95) !important;
border-color:rgba(13,139,141,.22) !important;
}
/* Themenlisten */
.mh-forum a.mh-topic-row:hover,
.mh-forum .mh-topic-row:hover{
transform:translateY(-2px) !important;
background:linear-gradient(180deg,#ffffff 0%,#f0fdfa 100%) !important;
border-color:#0d8b8d !important;
outline:2px solid rgba(13,139,141,.16) !important;
box-shadow:
0 18px 38px rgba(13,139,141,.14),
0 8px 18px rgba(15,23,42,.06) !important;
}
.mh-forum a.mh-topic-row:hover strong,
.mh-forum .mh-topic-row:hover strong{
color:#0d6f72 !important;
}
/* Forenübersicht-Zeilen */
.mh-forum .mh-board-row:hover{
transform:translateY(-2px) !important;
background:linear-gradient(180deg,#ffffff 0%,#f0fdfa 100%) !important;
border-color:#0d8b8d !important;
outline:2px solid rgba(13,139,141,.16) !important;
box-shadow:
0 18px 38px rgba(13,139,141,.14),
0 8px 18px rgba(15,23,42,.06) !important;
}
.mh-forum .mh-board-row:hover .mh-board-icon{
background:#ffffff !important;
border-color:rgba(13,139,141,.36) !important;
box-shadow:inset 4px 0 0 #0d8b8d, 0 12px 28px rgba(13,139,141,.16) !important;
}
.mh-forum .mh-board-row:hover .mh-board-title-link strong{
color:#0d6f72 !important;
}
/* Neueste Themen rechts */
.mh-forum .mh-latest > a:hover{
transform:translateY(-2px) !important;
background:linear-gradient(180deg,#ffffff 0%,#f0fdfa 100%) !important;
border-color:#0d8b8d !important;
outline:2px solid rgba(13,139,141,.14) !important;
box-shadow:0 14px 30px rgba(13,139,141,.12) !important;
}
.mh-forum .mh-latest > a:hover strong{
color:#0d6f72 !important;
}
/* Tastatur-Fokus genauso sichtbar */
.mh-forum article.mh-post.mh-post-premium:focus-within,
.mh-forum .mh-post.mh-post-premium:focus-within,
.mh-forum a.mh-topic-row:focus-visible,
.mh-forum .mh-board-row:focus-within,
.mh-forum .mh-latest > a:focus-visible{
outline:3px solid rgba(13,139,141,.30) !important;
outline-offset:3px !important;
}
/* Mobile: kein Verrutschen, aber Farbe/Schatten bleiben */
@media(max-width:780px){
.mh-forum article.mh-post.mh-post-premium:hover,
.mh-forum .mh-post.mh-post-premium:hover,
.mh-forum a.mh-topic-row:hover,
.mh-forum .mh-topic-row:hover,
.mh-forum .mh-board-row:hover,
.mh-forum .mh-latest > a:hover{
transform:none !important;
}
}
/* USER-FRIENDLY FINAL: Forum-Hover beruhigen und übertriebene Effekte entfernen */
.mh-forum article.mh-post.mh-post-premium,
.mh-forum .mh-post.mh-post-premium,
.mh-forum a.mh-topic-row,
.mh-forum .mh-topic-row,
.mh-forum .mh-board-row,
.mh-forum .mh-latest > a,
.mh-forum .mh-board-classic-restored > .mh-board-row,
.mh-forum .mh-board-stable-row,
.mh-forum .mh-topic-item,
.mh-forum .topic-card,
.mh-forum .post-card,
.mh-forum .community-post,
.mh-forum .forum-post,
.mh-forum .mh-reply,
.mh-forum .mh-forum-post{
transition:background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease !important;
}
/* Kein Springen/Anheben mehr im Forum */
.mh-forum article.mh-post.mh-post-premium:hover,
.mh-forum .mh-post.mh-post-premium:hover,
.mh-forum a.mh-topic-row:hover,
.mh-forum .mh-topic-row:hover,
.mh-forum .mh-board-row:hover,
.mh-forum .mh-latest > a:hover,
.mh-forum .mh-board-classic-restored > .mh-board-row:hover,
.mh-forum .mh-board-stable-row:hover,
.mh-forum .mh-topic-item:hover,
.mh-forum .topic-card:hover,
.mh-forum .post-card:hover,
.mh-forum .community-post:hover,
.mh-forum .forum-post:hover,
.mh-forum .mh-reply:hover,
.mh-forum .mh-forum-post:hover{
transform:none !important;
outline:none !important;
outline-offset:0 !important;
background:#f8fffe !important;
border-color:rgba(13,139,141,.22) !important;
box-shadow:0 6px 18px rgba(15,23,42,.045) !important;
}
/* Alle starken Hover-Streifen im Forum deaktivieren */
.mh-forum article.mh-post.mh-post-premium::before,
.mh-forum article.mh-post.mh-post-premium::after,
.mh-forum .mh-post.mh-post-premium::before,
.mh-forum .mh-post.mh-post-premium::after,
.mh-forum .mh-post::before,
.mh-forum .mh-post::after,
.mh-forum .forum-post::before,
.mh-forum .forum-post::after,
.mh-forum .mh-reply::before,
.mh-forum .mh-reply::after,
.mh-forum .community-post::before,
.mh-forum .community-post::after,
.mh-forum .post-card::before,
.mh-forum .post-card::after,
.mh-forum .mh-forum-post::before,
.mh-forum .mh-forum-post::after,
.mh-forum .mh-topic-row::before,
.mh-forum .mh-topic-row::after,
.mh-forum .mh-topic-item::before,
.mh-forum .mh-topic-item::after,
.mh-forum .mh-board-row::before,
.mh-forum .mh-board-row::after{
opacity:0 !important;
display:none !important;
}
/* Autorenspalte im Beitrag nur minimal aufhellen */
.mh-forum article.mh-post.mh-post-premium:hover .mh-post-author,
.mh-forum .mh-post.mh-post-premium:hover .mh-post-author{
background:#fbfefe !important;
border-color:rgba(100,116,139,.14) !important;
}
/* Avatar nicht mehr springen lassen */
.mh-forum article.mh-post.mh-post-premium:hover .mh-author-avatar,
.mh-forum .mh-post.mh-post-premium:hover .mh-author-avatar{
transform:none !important;
box-shadow:0 8px 18px rgba(15,23,42,.06) !important;
}
/* Toolbar nicht stark einfärben */
.mh-forum article.mh-post.mh-post-premium:hover .mh-post-toolbar,
.mh-forum .mh-post.mh-post-premium:hover .mh-post-toolbar{
background:rgba(248,250,252,.88) !important;
border-color:rgba(100,116,139,.12) !important;
}
/* Titel-Hover nur dezent */
.mh-forum a.mh-topic-row:hover strong,
.mh-forum .mh-topic-row:hover strong,
.mh-forum .mh-board-row:hover .mh-board-title-link strong,
.mh-forum .mh-latest > a:hover strong,
.mh-forum article.mh-post.mh-post-premium:hover .mh-post-title,
.mh-forum .mh-post.mh-post-premium:hover .mh-post-title{
color:#0d6f72 !important;
}
/* Icons/Zahlen nicht mehr stark animieren */
.mh-forum .mh-board-row:hover .mh-board-icon,
.mh-forum .mh-board-classic-restored .mh-board-row:hover .mh-board-icon{
background:linear-gradient(180deg,#f8fafc,#ffffff) !important;
border-color:rgba(13,139,141,.20) !important;
box-shadow:inset 4px 0 0 #0d8b8d, 0 8px 18px rgba(15,23,42,.05) !important;
}
.mh-forum .mh-board-row:hover .mh-board-count,
.mh-forum .mh-board-classic-restored > .mh-board-row:hover > .mh-board-count{
background:linear-gradient(180deg,#ffffff 0%,#eef7f7 100%) !important;
color:#16314f !important;
border-color:rgba(13,139,141,.18) !important;
box-shadow:0 8px 18px rgba(15,23,42,.07) !important;
}
/* Fokus sichtbar, aber nicht aggressiv */
.mh-forum a:focus-visible,
.mh-forum button:focus-visible,
.mh-forum summary:focus-visible,
.mh-forum textarea:focus-visible,
.mh-forum input:focus-visible,
.mh-forum select:focus-visible{
outline:2px solid rgba(13,139,141,.32) !important;
outline-offset:2px !important;
}
/* Buttons im Forum: ruhiger Hover */
.mh-forum .btn:hover{
transform:none !important;
box-shadow:0 4px 12px rgba(15,23,42,.06) !important;
}
/* Reaktions-/Admin-Leiste ohne übermäßige Hover-Ablenkung */
.mh-forum .forum-post-bottom-actions.clean:hover,
.mh-forum .forum-bottom-reactions:hover,
.mh-forum .forum-bottom-admin:hover{
background:inherit !important;
box-shadow:none !important;
transform:none !important;
}
/* Forum-Startseite: ordentlicher Hover nur für Themen/Foren der Startseite */
.mh-forum .mh-board-classic-restored > .mh-board-row,
.mh-forum .mh-board-classic-restored .mh-board-title-link,
.mh-forum .mh-board-classic-restored .mh-board-icon,
.mh-forum .mh-board-classic-restored .mh-board-count,
.mh-forum .mh-board-classic-restored .mh-board-last-link,
.mh-forum .mh-latest > a{
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease,
transform .18s ease !important;
}
/* Hauptzeilen auf der Forum-Startseite */
.mh-forum .mh-board-classic-restored > .mh-board-row:hover{
transform:translateY(-1px) !important;
background:linear-gradient(180deg,#ffffff 0%,#f4fbfb 100%) !important;
border-color:rgba(13,139,141,.34) !important;
box-shadow:0 12px 28px rgba(13,139,141,.10), 0 4px 12px rgba(15,23,42,.045) !important;
}
/* dezente linke Markierung nur auf der Startseiten-Zeile */
.mh-forum .mh-board-classic-restored > .mh-board-row::before{
content:"" !important;
display:block !important;
position:absolute !important;
left:0 !important;
top:16px !important;
bottom:16px !important;
width:4px !important;
border-radius:999px !important;
background:#0d8b8d !important;
opacity:0 !important;
transform:scaleY(.75) !important;
transition:opacity .18s ease, transform .18s ease !important;
pointer-events:none !important;
}
.mh-forum .mh-board-classic-restored > .mh-board-row:hover::before{
opacity:1 !important;
transform:scaleY(1) !important;
}
/* Titel und Beschreibung angenehm hervorheben */
.mh-forum .mh-board-classic-restored > .mh-board-row:hover .mh-board-title-link strong{
color:#0d6f72 !important;
}
.mh-forum .mh-board-classic-restored > .mh-board-row:hover .mh-board-title-link small{
color:#475569 !important;
}
/* Icon reagiert sichtbar, aber nicht übertrieben */
.mh-forum .mh-board-classic-restored > .mh-board-row:hover .mh-board-icon{
background:linear-gradient(180deg,#f0fdfa 0%,#ffffff 100%) !important;
border-color:rgba(13,139,141,.30) !important;
box-shadow:inset 4px 0 0 #0d8b8d, 0 10px 22px rgba(13,139,141,.11) !important;
}
/* Zahlen bleiben ruhig, wirken aber aktiver */
.mh-forum .mh-board-classic-restored > .mh-board-row:hover > .mh-board-count{
background:linear-gradient(180deg,#ffffff 0%,#f0fdfa 100%) !important;
border-color:rgba(13,139,141,.28) !important;
color:#0d6f72 !important;
box-shadow:0 8px 18px rgba(13,139,141,.08) !important;
}
/* Letzter Beitrag bekommt eine leichte, saubere Fläche */
.mh-forum .mh-board-classic-restored > .mh-board-row:hover .mh-board-last-link,
.mh-forum .mh-board-classic-restored > .mh-board-row:hover .mh-board-last > span{
background:#ffffff !important;
border-color:rgba(13,139,141,.16) !important;
}
.mh-forum .mh-board-classic-restored > .mh-board-row:hover .mh-board-last-link strong{
color:#0d6f72 !important;
}
/* Rechte Box "Neueste Themen" auf der Startseite */
.mh-forum .mh-latest > a:hover{
transform:translateY(-1px) !important;
background:linear-gradient(180deg,#ffffff 0%,#f4fbfb 100%) !important;
border-color:rgba(13,139,141,.30) !important;
box-shadow:0 10px 24px rgba(13,139,141,.09), 0 4px 10px rgba(15,23,42,.04) !important;
}
.mh-forum .mh-latest > a:hover strong{
color:#0d6f72 !important;
}
/* Mobile: kein Springen, aber der Hover/Fokus bleibt sauber sichtbar */
@media(max-width:780px){
.mh-forum .mh-board-classic-restored > .mh-board-row:hover,
.mh-forum .mh-latest > a:hover{
transform:none !important;
}
}
/* Non-Forum Upgrade: Dashboards, Tickets, Bestellungen, Mail, Rechtliches */
.portal-alert-grid{
display:grid !important;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important;
gap:12px !important;
}
.portal-alert{
display:flex !important;
flex-direction:column !important;
gap:6px !important;
padding:14px 16px !important;
border-radius:18px !important;
text-decoration:none !important;
background:#fff !important;
border:1px solid rgba(100,116,139,.14) !important;
box-shadow:0 8px 20px rgba(15,23,42,.045) !important;
}
.portal-alert strong{color:#16314f !important;font-size:.98rem !important;}
.portal-alert span{color:#64748b !important;font-size:.86rem !important;line-height:1.35 !important;}
.portal-alert.warn{border-color:rgba(217,119,6,.24) !important;background:#fffbeb !important;}
.portal-alert.danger{border-color:rgba(220,38,38,.22) !important;background:#fff7f7 !important;}
.portal-alert.info{border-color:rgba(13,139,141,.24) !important;background:#f0fdfa !important;}
.portal-alert.ok{border-color:rgba(22,163,74,.22) !important;background:#f0fdf4 !important;}
.portal-alert:hover{
transform:translateY(-1px) !important;
box-shadow:0 12px 28px rgba(15,23,42,.07) !important;
}
.portal-kv-link{
text-decoration:none !important;
color:inherit !important;
border-radius:14px !important;
padding:10px 0 !important;
}
.portal-kv-link:hover{
background:#f8fffe !important;
}
.ticket-next-step-box{
margin:14px 0 !important;
padding:14px 16px !important;
border-radius:16px !important;
background:#f0fdfa !important;
border:1px solid rgba(13,139,141,.20) !important;
color:#16314f !important;
}
.internal-notes-box{
margin:16px 0 !important;
padding:14px !important;
border-radius:18px !important;
background:#fbfcfe !important;
border:1px dashed rgba(100,116,139,.28) !important;
}
.internal-notes-box h3{
margin:0 0 10px !important;
font-size:1rem !important;
color:#16314f !important;
}
.internal-note{
padding:10px 12px !important;
border-radius:14px !important;
background:#fff !important;
border:1px solid rgba(100,116,139,.12) !important;
margin-top:8px !important;
}
.internal-note strong{display:block !important;color:#16314f !important;}
.internal-note small{display:block !important;color:#64748b !important;margin:2px 0 6px !important;}
.internal-note p{margin:0 !important;color:#334155 !important;}
.legal-consent-box{
padding:14px 16px !important;
border:1px solid rgba(13,139,141,.18) !important;
border-radius:18px !important;
background:#f8fffe !important;
}
.legal-consent-box label{
display:flex !important;
gap:10px !important;
align-items:flex-start !important;
line-height:1.45 !important;
}
.legal-consent-box small{
display:block !important;
margin-top:6px !important;
color:#64748b !important;
}
.legal-page-card p{
line-height:1.7 !important;
color:#334155 !important;
}
.mail-template-card{
margin:0 0 18px !important;
padding:16px !important;
border:1px solid rgba(100,116,139,.14) !important;
border-radius:18px !important;
background:#fbfcfe !important;
}
.mail-preview-box{
padding:16px !important;
border-radius:16px !important;
background:#f8fafc !important;
border:1px solid rgba(100,116,139,.14) !important;
line-height:1.6 !important;
color:#334155 !important;
}
.order-next-step{
display:block !important;
margin-top:6px !important;
color:#64748b !important;
line-height:1.35 !important;
}
.portal-copyright a{
color:inherit !important;
text-decoration:none !important;
opacity:.88 !important;
}
.portal-copyright a:hover{
opacity:1 !important;
text-decoration:underline !important;
}
/* Header: Suche und rechte Buttons im kompletten Kundenportal mittig ausrichten */
.topbar,
.portal-topbar,
.app-topbar,
.main-header,
.portal-header,
.dashboard-header,
.header-user-search,
.main-brand-header{
align-items:center !important;
}
/* Der Bereich mit Suche + Nutzer-/Aktionsbuttons wird als mittige Gruppe behandelt */
.header-user-search,
.topbar .header-user-search,
.portal-header .header-user-search,
.main-header .header-user-search{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:12px !important;
flex-wrap:nowrap !important;
align-self:center !important;
margin-top:0 !important;
margin-bottom:0 !important;
}
/* Suchformular selbst vertikal sauber zentrieren */
.header-user-search form,
.header-user-search .search-form,
.header-user-search .global-search-form,
.topbar-search,
.portal-search,
.header-search,
.global-search{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
margin:0 !important;
align-self:center !important;
}
/* Suchfeld nicht mehr nach oben/unten versetzt */
.header-user-search input[type="search"],
.header-user-search input[name="q"],
.topbar-search input,
.portal-search input,
.header-search input,
.global-search input{
height:42px !important;
min-height:42px !important;
display:flex !important;
align-items:center !important;
margin:0 !important;
line-height:42px !important;
}
/* Buttons rechts neben der Suche mittig zur Suchleiste */
.header-user-search .btn,
.header-user-search button,
.header-user-search a.btn,
.header-user-search .user-menu,
.header-user-search .user-chip,
.header-user-search .profile-chip,
.header-user-search .logout-btn,
.header-user-search .header-action,
.header-user-search .actions-row,
.topbar .btn,
.portal-header .btn{
align-self:center !important;
vertical-align:middle !important;
}
/* Aktionsgruppen rechts neben der Suche nicht nach oben/unten ausbrechen lassen */
.header-user-search .actions-row,
.header-user-search .header-actions,
.header-user-search .user-actions,
.header-user-search .quick-actions{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
margin:0 !important;
}
/* Falls der Header als Grid gebaut ist: rechte Spalte mittig halten */
.main-brand-header > *,
.portal-header > *,
.main-header > *,
.topbar > *{
align-self:center !important;
}
/* Desktop: Suche + Buttons optisch in der Mitte der Kopfleiste halten */
@media(min-width:781px){
.header-user-search{
min-height:48px !important;
}
.header-user-search form,
.header-user-search .search-form,
.header-user-search .global-search-form{
min-height:42px !important;
}
}
/* Mobile bleibt stabil und bricht sauber um */
@media(max-width:780px){
.header-user-search,
.topbar .header-user-search,
.portal-header .header-user-search,
.main-header .header-user-search{
width:100% !important;
justify-content:center !important;
flex-wrap:wrap !important;
gap:10px !important;
}
.header-user-search form,
.header-user-search .search-form,
.header-user-search .global-search-form,
.topbar-search,
.portal-search,
.header-search,
.global-search{
width:100% !important;
}
.header-user-search input[type="search"],
.header-user-search input[name="q"],
.topbar-search input,
.portal-search input,
.header-search input,
.global-search input{
width:100% !important;
}
}
/* REALFIX Header: echte Portal-Kopfleiste mittig ausrichten */
.main-brand-header{
display:grid !important;
grid-template-columns:minmax(220px,auto) minmax(360px,1fr) auto !important;
align-items:center !important;
gap:18px !important;
}
/* Logo/Brand bleibt links, Suche sitzt vertikal mittig, Nutzeraktionen rechts mittig */
.main-brand-header .main-brand-logo,
.main-brand-header .brand,
.main-brand-header .brand-link,
.main-brand-header .main-brand-greeting{
align-self:center !important;
}
/* Tatsächlicher Such-/Userbereich */
.main-brand-header .header-user-search,
.header-user-search{
display:flex !important;
align-items:center !important;
justify-content:center !important;
align-self:center !important;
gap:12px !important;
margin:0 !important;
min-height:52px !important;
height:auto !important;
}
/* Alle direkten Kinder rechts neben/innerhalb Suche mittig */
.header-user-search > *,
.main-brand-header .header-user-search > *{
align-self:center !important;
margin-top:0 !important;
margin-bottom:0 !important;
}
/* Suchformular im Header */
.header-user-search form,
.header-user-search .portal-search,
.header-user-search .global-search,
.header-user-search .header-search,
.header-user-search .search-form,
.header-user-search .topbar-search,
.main-brand-header form[method="get"]{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
margin:0 !important;
min-height:44px !important;
height:44px !important;
}
/* Sucheingabe exakt in der Mitte der Kopfleiste */
.header-user-search input,
.header-user-search input[type="search"],
.header-user-search input[name="q"],
.header-user-search .portal-search input,
.header-user-search .global-search input,
.main-brand-header input[name="q"]{
height:42px !important;
min-height:42px !important;
max-height:42px !important;
line-height:42px !important;
margin:0 !important;
padding-top:0 !important;
padding-bottom:0 !important;
display:block !important;
box-sizing:border-box !important;
}
/* Buttons und Userbox rechts neben der Suche mittig */
.header-user-search .btn,
.header-user-search button,
.header-user-search a,
.header-user-search .user-chip,
.header-user-search .profile-chip,
.header-user-search .header-user,
.header-user-search .user-menu,
.header-user-search .actions-row,
.main-brand-header .btn,
.main-brand-header button{
align-self:center !important;
margin-top:0 !important;
margin-bottom:0 !important;
vertical-align:middle !important;
}
/* User-/Aktionsgruppe nicht versetzt anzeigen */
.header-user-search .actions-row,
.header-user-search .header-actions,
.header-user-search .user-actions,
.header-user-search .quick-actions,
.header-user-search .header-user{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
min-height:42px !important;
margin:0 !important;
}
/* Falls das Profil/Logout als einzelne Links/Buttons steht */
.header-user-search a:not(.btn),
.header-user-search .logout-link,
.header-user-search .profile-link{
display:inline-flex !important;
align-items:center !important;
}
/* Mobile: Suche und Buttons sauber untereinander, aber mittig */
@media(max-width:900px){
.main-brand-header{
grid-template-columns:1fr !important;
justify-items:center !important;
gap:12px !important;
}
.header-user-search{
width:100% !important;
flex-wrap:wrap !important;
justify-content:center !important;
}
.header-user-search form,
.main-brand-header form[method="get"]{
width:100% !important;
max-width:560px !important;
}
.header-user-search input,
.header-user-search input[type="search"],
.header-user-search input[name="q"],
.main-brand-header input[name="q"]{
width:100% !important;
}
}
/* REALFIX: Suche, Name, Benachrichtigung und Abmelden mittig auf der Seite */
.topbar.clean-topbar{
position:relative !important;
display:grid !important;
grid-template-columns:auto minmax(0,1fr) auto !important;
align-items:center !important;
min-height:76px !important;
gap:18px !important;
}
/* Titelbereich links lassen, aber nicht mehr die Suchgruppe nach rechts drücken */
.topbar.clean-topbar .topbar-title{
justify-self:start !important;
align-self:center !important;
min-width:0 !important;
z-index:2 !important;
}
/* Komplette Such-/User-/Button-Gruppe mittig im verfügbaren Hauptbereich */
.topbar.clean-topbar .topbar-actions,
.topbar.clean-topbar .topbar-actions-search,
.topbar.clean-topbar .topbar-actions-final{
grid-column:2 !important;
justify-self:center !important;
align-self:center !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:12px !important;
width:auto !important;
max-width:min(900px, 100%) !important;
margin:0 auto !important;
text-align:center !important;
}
/* Suchformular mittig innerhalb der Gruppe */
.topbar.clean-topbar .global-search-form,
.topbar.clean-topbar .global-search-form-final{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
margin:0 !important;
height:44px !important;
min-height:44px !important;
flex:0 1 420px !important;
}
/* Suchfeld und Suchen-Button sauber mittig */
.topbar.clean-topbar .global-search-form input,
.topbar.clean-topbar .global-search-form-final input{
height:42px !important;
min-height:42px !important;
max-height:42px !important;
line-height:42px !important;
margin:0 !important;
box-sizing:border-box !important;
}
.topbar.clean-topbar .global-search-form .search-submit-btn,
.topbar.clean-topbar .global-search-form-final .search-submit-btn{
height:42px !important;
min-height:42px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
margin:0 !important;
}
/* Name/Nutzerbox mittig zur Suchleiste */
.topbar.clean-topbar .topbar-user-box{
align-self:center !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
min-height:42px !important;
margin:0 !important;
text-align:center !important;
}
/* Button-Gruppe rechts neben Name ebenfalls mittig */
.topbar.clean-topbar .topbar-action-buttons{
align-self:center !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
min-height:42px !important;
margin:0 !important;
}
/* Abmelden-/Benachrichtigungsbuttons vertikal sauber ausrichten */
.topbar.clean-topbar .topbar-action-buttons .btn,
.topbar.clean-topbar .notification-btn,
.topbar.clean-topbar a[href="logout.php"]{
height:42px !important;
min-height:42px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
margin:0 !important;
white-space:nowrap !important;
}
/* Menübutton links bleibt links, aber mittig in der Höhe */
.topbar.clean-topbar .sidebar-toggle-btn{
justify-self:start !important;
align-self:center !important;
height:42px !important;
min-height:42px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
margin:0 !important;
z-index:2 !important;
}
/* Falls der Menübutton und Titel zusammen zu breit werden, Suchgruppe weiterhin zentriert halten */
@media(min-width:1100px){
.topbar.clean-topbar{
grid-template-columns:minmax(220px,auto) minmax(520px,1fr) minmax(120px,auto) !important;
}
}
/* Tablet: mittig, aber umbrechen erlauben */
@media(max-width:1099px){
.topbar.clean-topbar{
grid-template-columns:1fr !important;
justify-items:center !important;
gap:12px !important;
padding-top:14px !important;
padding-bottom:14px !important;
}
.topbar.clean-topbar .sidebar-toggle-btn,
.topbar.clean-topbar .topbar-title,
.topbar.clean-topbar .topbar-actions,
.topbar.clean-topbar .topbar-actions-search,
.topbar.clean-topbar .topbar-actions-final{
grid-column:1 !important;
justify-self:center !important;
}
.topbar.clean-topbar .topbar-title{
text-align:center !important;
}
.topbar.clean-topbar .topbar-actions,
.topbar.clean-topbar .topbar-actions-search,
.topbar.clean-topbar .topbar-actions-final{
flex-wrap:wrap !important;
width:100% !important;
max-width:760px !important;
}
}
/* Mobile: alles sauber mittig untereinander */
@media(max-width:720px){
.topbar.clean-topbar .global-search-form,
.topbar.clean-topbar .global-search-form-final{
width:100% !important;
flex:1 1 100% !important;
max-width:100% !important;
}
.topbar.clean-topbar .global-search-form input,
.topbar.clean-topbar .global-search-form-final input{
flex:1 1 auto !important;
min-width:0 !important;
}
.topbar.clean-topbar .topbar-user-box{
width:100% !important;
}
.topbar.clean-topbar .topbar-action-buttons{
width:100% !important;
flex-wrap:wrap !important;
}
}
/* TOPBAR INLINE FIX: Benachrichtigung und Abmelden bleiben neben Name/Suche */
.topbar.clean-topbar .topbar-actions,
.topbar.clean-topbar .topbar-actions-search,
.topbar.clean-topbar .topbar-actions-final{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:center !important;
flex-wrap:nowrap !important;
gap:12px !important;
white-space:nowrap !important;
width:auto !important;
max-width:none !important;
}
/* Suchformular nimmt nicht die komplette Breite ein, damit Buttons daneben bleiben */
.topbar.clean-topbar .global-search-form,
.topbar.clean-topbar .global-search-form-final{
flex:0 0 auto !important;
width:auto !important;
max-width:none !important;
min-width:0 !important;
}
/* Suchfeld kompakt halten */
.topbar.clean-topbar .global-search-form input,
.topbar.clean-topbar .global-search-form-final input{
width:260px !important;
min-width:220px !important;
max-width:320px !important;
flex:0 0 auto !important;
}
/* Nutzerbox bleibt neben der Suche */
.topbar.clean-topbar .topbar-user-box{
flex:0 0 auto !important;
width:auto !important;
min-width:max-content !important;
max-width:220px !important;
}
/* Benachrichtigung + Abmelden immer nebeneinander */
.topbar.clean-topbar .topbar-action-buttons{
flex:0 0 auto !important;
display:inline-flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:center !important;
flex-wrap:nowrap !important;
gap:8px !important;
width:auto !important;
min-width:max-content !important;
white-space:nowrap !important;
}
/* Einzelne Buttons nicht umbrechen */
.topbar.clean-topbar .topbar-action-buttons .btn,
.topbar.clean-topbar .notification-btn,
.topbar.clean-topbar a[href="logout.php"]{
flex:0 0 auto !important;
white-space:nowrap !important;
}
/* Mittige Gesamtposition bleibt erhalten */
@media(min-width:1100px){
.topbar.clean-topbar{
grid-template-columns:minmax(180px,auto) minmax(720px,1fr) minmax(80px,auto) !important;
}
.topbar.clean-topbar .topbar-actions,
.topbar.clean-topbar .topbar-actions-search,
.topbar.clean-topbar .topbar-actions-final{
grid-column:2 !important;
justify-self:center !important;
}
}
/* Tablet: erst später umbrechen, Buttons bleiben zusammen */
@media(max-width:1099px) and (min-width:721px){
.topbar.clean-topbar .topbar-actions,
.topbar.clean-topbar .topbar-actions-search,
.topbar.clean-topbar .topbar-actions-final{
flex-wrap:nowrap !important;
width:auto !important;
max-width:100% !important;
}
.topbar.clean-topbar .global-search-form input,
.topbar.clean-topbar .global-search-form-final input{
width:220px !important;
min-width:180px !important;
max-width:240px !important;
}
.topbar.clean-topbar .topbar-user-box{
max-width:190px !important;
}
}
/* Nur auf kleinen Handys darf es umbrechen, aber Benachrichtigung + Abmelden bleiben zusammen */
@media(max-width:720px){
.topbar.clean-topbar .topbar-actions,
.topbar.clean-topbar .topbar-actions-search,
.topbar.clean-topbar .topbar-actions-final{
flex-wrap:wrap !important;
width:100% !important;
max-width:100% !important;
}
.topbar.clean-topbar .global-search-form,
.topbar.clean-topbar .global-search-form-final{
flex:1 1 100% !important;
width:100% !important;
}
.topbar.clean-topbar .global-search-form input,
.topbar.clean-topbar .global-search-form-final input{
width:100% !important;
min-width:0 !important;
max-width:none !important;
flex:1 1 auto !important;
}
.topbar.clean-topbar .topbar-user-box{
flex:1 1 auto !important;
width:auto !important;
min-width:0 !important;
}
.topbar.clean-topbar .topbar-action-buttons{
flex:0 0 auto !important;
width:auto !important;
}
}
/* TOPBAR RESET: Suche, Benutzerbox, Benachrichtigung und Abmelden wieder rechtsbündig */
.topbar.clean-topbar{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:18px !important;
min-height:76px !important;
}
.topbar.clean-topbar .sidebar-toggle-btn{
flex:0 0 auto !important;
align-self:center !important;
}
.topbar.clean-topbar .topbar-title{
flex:1 1 auto !important;
justify-self:auto !important;
align-self:center !important;
text-align:left !important;
min-width:0 !important;
}
.topbar.clean-topbar .topbar-actions,
.topbar.clean-topbar .topbar-actions-search,
.topbar.clean-topbar .topbar-actions-final{
grid-column:auto !important;
flex:0 0 auto !important;
width:auto !important;
max-width:none !important;
margin-left:auto !important;
margin-right:0 !important;
justify-self:end !important;
align-self:center !important;
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:flex-end !important;
flex-wrap:nowrap !important;
gap:12px !important;
text-align:right !important;
white-space:nowrap !important;
}
.topbar.clean-topbar .global-search-form,
.topbar.clean-topbar .global-search-form-final{
flex:0 0 auto !important;
width:auto !important;
max-width:none !important;
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap:8px !important;
margin:0 !important;
}
.topbar.clean-topbar .global-search-form input,
.topbar.clean-topbar .global-search-form-final input{
width:300px !important;
min-width:220px !important;
max-width:340px !important;
flex:0 0 auto !important;
}
.topbar.clean-topbar .topbar-user-box{
flex:0 0 auto !important;
width:auto !important;
min-width:max-content !important;
max-width:240px !important;
text-align:right !important;
align-items:flex-end !important;
}
.topbar.clean-topbar .topbar-action-buttons{
flex:0 0 auto !important;
width:auto !important;
min-width:max-content !important;
display:inline-flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:flex-end !important;
flex-wrap:nowrap !important;
gap:8px !important;
white-space:nowrap !important;
}
/* Mobile/Tablet: rechtsbündig beibehalten, bei wenig Platz sauber umbrechen */
@media(max-width:1099px){
.topbar.clean-topbar{
display:flex !important;
flex-wrap:wrap !important;
justify-content:flex-end !important;
align-items:center !important;
}
.topbar.clean-topbar .sidebar-toggle-btn{
margin-right:auto !important;
}
.topbar.clean-topbar .topbar-title{
flex:1 1 220px !important;
text-align:left !important;
}
.topbar.clean-topbar .topbar-actions,
.topbar.clean-topbar .topbar-actions-search,
.topbar.clean-topbar .topbar-actions-final{
flex:0 1 auto !important;
justify-content:flex-end !important;
margin-left:auto !important;
}
}
@media(max-width:720px){
.topbar.clean-topbar .topbar-actions,
.topbar.clean-topbar .topbar-actions-search,
.topbar.clean-topbar .topbar-actions-final{
width:100% !important;
flex-wrap:wrap !important;
justify-content:flex-end !important;
}
.topbar.clean-topbar .global-search-form,
.topbar.clean-topbar .global-search-form-final{
flex:1 1 100% !important;
width:100% !important;
}
.topbar.clean-topbar .global-search-form input,
.topbar.clean-topbar .global-search-form-final input{
width:100% !important;
min-width:0 !important;
max-width:none !important;
flex:1 1 auto !important;
}
.topbar.clean-topbar .topbar-user-box{
align-items:flex-end !important;
text-align:right !important;
}
}
/* GLOBAL: Button "Menü öffnen" im gesamten Kundenportal entfernen */
.sidebar-toggle-btn,
button.sidebar-toggle-btn,
.topbar .sidebar-toggle-btn,
.clean-topbar .sidebar-toggle-btn{
display:none !important;
visibility:hidden !important;
width:0 !important;
height:0 !important;
min-width:0 !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
overflow:hidden !important;
}
/* Topbar ohne Menübutton wieder sauber ausrichten */
.topbar.clean-topbar{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
}
.topbar.clean-topbar .topbar-title{
margin-left:0 !important;
}
/* =========================================================
HEADER COMPLETE ORDER FIX
Ziel:
- Logo überall oben mittig
- Admin-/Kundenname sauber mittig darunter
- Suche, Nutzerbox, Glocke und Abmelden stabil rechts in einer Zeile
- kein "Menü öffnen"-Button
- kein zerschossener Abstand auf Impressum/Datenschutz
========================================================= */
/* Hauptbereich nach Entfernen des Menübuttons wieder sauber */
.main{
min-width:0 !important;
}
/* Oberer Markenbereich: Logo wirklich mittig */
.main-brand-header{
width:100% !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
gap:8px !important;
padding:22px 24px 18px !important;
margin:0 auto !important;
box-sizing:border-box !important;
}
.main-brand-header .main-brand-logo{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
margin:0 auto !important;
text-decoration:none !important;
}
.main-brand-header .main-brand-logo img{
display:block !important;
width:auto !important;
max-width:120px !important;
height:auto !important;
max-height:86px !important;
object-fit:contain !important;
margin:0 auto !important;
}
.main-brand-header .main-brand-greeting{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
margin:0 auto !important;
line-height:1.2 !important;
}
.main-brand-header .main-brand-greeting span{
display:block !important;
color:#0d8b8d !important;
font-weight:850 !important;
font-size:14px !important;
}
.main-brand-header .main-brand-greeting strong{
display:block !important;
color:#0f172a !important;
font-weight:750 !important;
font-size:16px !important;
}
/* Menü öffnen überall komplett entfernen */
.sidebar-toggle-btn,
button.sidebar-toggle-btn,
.topbar .sidebar-toggle-btn,
.clean-topbar .sidebar-toggle-btn{
display:none !important;
}
/* Topbar stabil: Titel links, Aktionen rechts, alles vertikal mittig */
.topbar.clean-topbar{
width:100% !important;
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:space-between !important;
gap:24px !important;
min-height:86px !important;
padding:18px 24px 22px !important;
box-sizing:border-box !important;
margin:0 !important;
}
.topbar.clean-topbar .topbar-title{
flex:1 1 auto !important;
min-width:220px !important;
max-width:520px !important;
margin:0 !important;
padding:0 !important;
text-align:left !important;
align-self:center !important;
}
.topbar.clean-topbar .topbar-title h1{
margin:0 0 5px !important;
padding:0 !important;
color:#0f172a !important;
font-size:32px !important;
line-height:1.1 !important;
letter-spacing:-.035em !important;
}
.topbar.clean-topbar .topbar-title p{
margin:0 !important;
padding:0 !important;
color:#64748b !important;
font-size:15px !important;
line-height:1.35 !important;
}
/* Rechte Aktionsgruppe ordentlich in EINER Zeile */
.topbar.clean-topbar .topbar-actions,
.topbar.clean-topbar .topbar-actions-search,
.topbar.clean-topbar .topbar-actions-final{
flex:0 0 auto !important;
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:flex-end !important;
flex-wrap:nowrap !important;
gap:12px !important;
width:auto !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
text-align:right !important;
white-space:nowrap !important;
align-self:center !important;
}
/* Suchformular kompakt und stabil */
.topbar.clean-topbar .global-search-form,
.topbar.clean-topbar .global-search-form-final{
flex:0 0 auto !important;
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:flex-end !important;
flex-wrap:nowrap !important;
gap:8px !important;
width:auto !important;
min-width:0 !important;
height:44px !important;
margin:0 !important;
padding:0 !important;
}
.topbar.clean-topbar .global-search-form input,
.topbar.clean-topbar .global-search-form-final input{
flex:0 0 auto !important;
width:300px !important;
min-width:220px !important;
max-width:340px !important;
height:42px !important;
min-height:42px !important;
max-height:42px !important;
margin:0 !important;
padding-top:0 !important;
padding-bottom:0 !important;
line-height:42px !important;
box-sizing:border-box !important;
}
/* Suchen-Button exakt neben Suchfeld */
.topbar.clean-topbar .search-submit-btn,
.topbar.clean-topbar .global-search-form button,
.topbar.clean-topbar .global-search-form-final button{
flex:0 0 auto !important;
height:42px !important;
min-height:42px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
margin:0 !important;
white-space:nowrap !important;
}
/* Userbox stabil */
.topbar.clean-topbar .topbar-user-box{
flex:0 0 auto !important;
min-width:138px !important;
max-width:220px !important;
height:50px !important;
margin:0 !important;
padding:8px 14px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
box-sizing:border-box !important;
white-space:nowrap !important;
}
.topbar.clean-topbar .topbar-user-name,
.topbar.clean-topbar .topbar-user-role{
display:block !important;
margin:0 !important;
padding:0 !important;
line-height:1.15 !important;
}
/* Glocke + Abmelden in einer Linie */
.topbar.clean-topbar .topbar-action-buttons{
flex:0 0 auto !important;
display:inline-flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:flex-end !important;
flex-wrap:nowrap !important;
gap:8px !important;
width:auto !important;
min-width:max-content !important;
height:50px !important;
margin:0 !important;
padding:0 !important;
white-space:nowrap !important;
}
.topbar.clean-topbar .topbar-action-buttons .btn,
.topbar.clean-topbar .notification-btn,
.topbar.clean-topbar a[href="logout.php"]{
flex:0 0 auto !important;
height:42px !important;
min-height:42px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
margin:0 !important;
white-space:nowrap !important;
}
/* Rechtliche Seiten: Content nicht unter Header schieben, sondern mittig und ordentlich */
.mh-legal-wrap{
width:100% !important;
max-width:1040px !important;
margin:0 auto 34px !important;
padding:0 20px 34px !important;
box-sizing:border-box !important;
}
.mh-legal-hero{
margin-top:0 !important;
}
/* Desktop mit schmalerer Breite: Suche etwas verkleinern, aber Layout bleibt in einer Zeile */
@media(max-width:1280px) and (min-width:981px){
.topbar.clean-topbar{
gap:16px !important;
padding-left:20px !important;
padding-right:20px !important;
}
.topbar.clean-topbar .global-search-form input,
.topbar.clean-topbar .global-search-form-final input{
width:250px !important;
min-width:200px !important;
max-width:270px !important;
}
.topbar.clean-topbar .topbar-title{
max-width:380px !important;
}
}
/* Tablet: sauber stapeln, aber zentriert und nicht zerschossen */
@media(max-width:980px){
.main-brand-header{
padding:18px 18px 14px !important;
}
.topbar.clean-topbar{
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:14px !important;
padding:16px 18px 20px !important;
text-align:center !important;
}
.topbar.clean-topbar .topbar-title{
flex:0 1 auto !important;
min-width:0 !important;
max-width:100% !important;
text-align:center !important;
}
.topbar.clean-topbar .topbar-actions,
.topbar.clean-topbar .topbar-actions-search,
.topbar.clean-topbar .topbar-actions-final{
justify-content:center !important;
flex-wrap:wrap !important;
width:100% !important;
max-width:760px !important;
text-align:center !important;
}
}
/* Mobile: Suche oben, Nutzer/Buttons darunter, alles ordentlich */
@media(max-width:640px){
.main-brand-header .main-brand-logo img{
max-width:105px !important;
max-height:76px !important;
}
.topbar.clean-topbar .topbar-title h1{
font-size:27px !important;
}
.topbar.clean-topbar .global-search-form,
.topbar.clean-topbar .global-search-form-final{
width:100% !important;
flex:1 1 100% !important;
}
.topbar.clean-topbar .global-search-form input,
.topbar.clean-topbar .global-search-form-final input{
flex:1 1 auto !important;
width:100% !important;
min-width:0 !important;
max-width:none !important;
}
.topbar.clean-topbar .topbar-user-box{
flex:1 1 auto !important;
min-width:160px !important;
}
.topbar.clean-topbar .topbar-action-buttons{
flex:0 0 auto !important;
}
}
/* =========================================================
LOGO + SEITENTITEL FIX
- Logo wieder sichtbar
- Seitentitel wie "Übersicht", "Suche", "Tickets" linksbündig
- Topbar-Aktionen rechts stabil lassen
========================================================= */
/* Header-Logo wieder zuverlässig anzeigen */
.main-brand-header{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
width:100% !important;
padding:18px 24px 14px !important;
margin:0 auto !important;
min-height:118px !important;
overflow:visible !important;
}
.main-brand-header .main-brand-logo{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:auto !important;
height:auto !important;
min-width:110px !important;
min-height:78px !important;
opacity:1 !important;
visibility:visible !important;
overflow:visible !important;
margin:0 auto !important;
padding:0 !important;
background:transparent !important;
text-decoration:none !important;
}
.main-brand-header .main-brand-logo img,
.main-brand-logo img{
display:block !important;
opacity:1 !important;
visibility:visible !important;
width:120px !important;
max-width:120px !important;
min-width:120px !important;
height:auto !important;
max-height:none !important;
object-fit:contain !important;
object-position:center !important;
margin:0 auto !important;
padding:0 !important;
transform:none !important;
filter:none !important;
}
/* Adminbereich/Kundenbereich sauber unter Logo */
.main-brand-header .main-brand-greeting{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
margin:6px auto 0 !important;
width:100% !important;
}
/* Seitentitel überall linksbündig */
.topbar.clean-topbar{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:space-between !important;
gap:24px !important;
width:100% !important;
padding:18px 24px 22px !important;
box-sizing:border-box !important;
}
.topbar.clean-topbar .topbar-title{
flex:1 1 auto !important;
min-width:220px !important;
max-width:none !important;
text-align:left !important;
align-items:flex-start !important;
justify-content:center !important;
margin:0 !important;
padding:0 !important;
order:1 !important;
}
.topbar.clean-topbar .topbar-title h1,
.topbar-title h1{
text-align:left !important;
margin-left:0 !important;
padding-left:0 !important;
}
.topbar.clean-topbar .topbar-title p,
.topbar-title p{
text-align:left !important;
margin-left:0 !important;
padding-left:0 !important;
}
/* Aktionen bleiben rechtsbündig */
.topbar.clean-topbar .topbar-actions,
.topbar.clean-topbar .topbar-actions-search,
.topbar.clean-topbar .topbar-actions-final{
flex:0 0 auto !important;
order:2 !important;
margin-left:auto !important;
margin-right:0 !important;
justify-content:flex-end !important;
align-items:center !important;
text-align:right !important;
display:flex !important;
flex-direction:row !important;
flex-wrap:nowrap !important;
}
/* Rechtliche Seiten: Inhalt normal linksbündig innerhalb der Karten, nicht wild zentriert */
.mh-legal-wrap{
margin-left:auto !important;
margin-right:auto !important;
}
.mh-legal-card,
.mh-legal-card h2,
.mh-legal-card p,
.mh-legal-card li{
text-align:left !important;
}
/* Mobile: Titel bleibt auch dort links, Aktionen dürfen umbrechen */
@media(max-width:980px){
.topbar.clean-topbar{
align-items:flex-start !important;
}
.topbar.clean-topbar .topbar-title{
width:100% !important;
text-align:left !important;
}
.topbar.clean-topbar .topbar-actions,
.topbar.clean-topbar .topbar-actions-search,
.topbar.clean-topbar .topbar-actions-final{
width:100% !important;
justify-content:flex-end !important;
}
}
@media(max-width:640px){
.main-brand-header .main-brand-logo img,
.main-brand-logo img{
width:105px !important;
min-width:105px !important;
max-width:105px !important;
}
.main-brand-header{
min-height:108px !important;
}
}
/* =========================================================
FULL LEFT TITLE + BIGGER LOGO FIX
- Seitentitel wirklich komplett linksbündig
- kein reservierter Platz mehr für entfernten Menübutton
- Logo deutlich größer
========================================================= */
/* Logo größer und zuverlässig sichtbar */
.main-brand-header{
width:100% !important;
min-height:150px !important;
padding:24px 24px 18px !important;
margin:0 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
box-sizing:border-box !important;
overflow:visible !important;
}
.main-brand-header .main-brand-logo{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:auto !important;
height:auto !important;
min-width:160px !important;
min-height:105px !important;
margin:0 auto !important;
padding:0 !important;
opacity:1 !important;
visibility:visible !important;
overflow:visible !important;
}
.main-brand-header .main-brand-logo img,
.main-brand-logo img{
display:block !important;
width:165px !important;
min-width:165px !important;
max-width:165px !important;
height:auto !important;
max-height:none !important;
object-fit:contain !important;
margin:0 auto !important;
opacity:1 !important;
visibility:visible !important;
transform:none !important;
}
/* Adminbereich/Kundenbereich bleibt unter dem größeren Logo */
.main-brand-header .main-brand-greeting{
margin-top:8px !important;
}
/* Topbar: kein Platz mehr links für Menübutton */
.topbar.clean-topbar{
width:100% !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:20px !important;
padding:18px 24px 22px 0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* Entfernten Menübutton wirklich aus Layoutfluss nehmen */
.sidebar-toggle-btn,
button.sidebar-toggle-btn,
.topbar.clean-topbar .sidebar-toggle-btn{
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;
overflow:hidden !important;
}
/* Seitentitel komplett linksbündig am Content-Anfang */
.topbar.clean-topbar .topbar-title{
flex:1 1 auto !important;
min-width:0 !important;
max-width:none !important;
margin:0 !important;
padding:0 0 0 0 !important;
text-align:left !important;
align-self:center !important;
justify-self:start !important;
transform:none !important;
}
.topbar.clean-topbar .topbar-title h1,
.topbar-title h1{
display:block !important;
text-align:left !important;
margin:0 0 5px 0 !important;
padding:0 !important;
transform:none !important;
}
.topbar.clean-topbar .topbar-title p,
.topbar-title p{
display:block !important;
text-align:left !important;
margin:0 !important;
padding:0 !important;
transform:none !important;
}
/* Hauptcontent ebenfalls ohne künstlichen linken Header-Abstand */
.main > .grid,
.main > section.grid,
.main > .card,
.main > section,
.main > article{
margin-left:0 !important;
}
/* Suche/User/Buttons bleiben rechts */
.topbar.clean-topbar .topbar-actions,
.topbar.clean-topbar .topbar-actions-search,
.topbar.clean-topbar .topbar-actions-final{
flex:0 0 auto !important;
margin-left:auto !important;
margin-right:0 !important;
justify-content:flex-end !important;
align-items:center !important;
display:flex !important;
flex-direction:row !important;
flex-wrap:nowrap !important;
gap:12px !important;
}
/* Rechtliche Seiten: Abstand links sauber, aber nicht zentriert erzwingen */
.mh-legal-wrap{
max-width:1040px !important;
margin-left:0 !important;
margin-right:auto !important;
padding-left:0 !important;
padding-right:20px !important;
}
/* Tablet/Mobile: Titel links lassen, Logo nur moderat kleiner */
@media(max-width:980px){
.main-brand-header{
min-height:132px !important;
padding:20px 18px 16px !important;
}
.main-brand-header .main-brand-logo img,
.main-brand-logo img{
width:145px !important;
min-width:145px !important;
max-width:145px !important;
}
.topbar.clean-topbar{
padding-left:0 !important;
padding-right:18px !important;
align-items:flex-start !important;
}
.topbar.clean-topbar .topbar-title{
width:100% !important;
text-align:left !important;
}
.topbar.clean-topbar .topbar-actions,
.topbar.clean-topbar .topbar-actions-search,
.topbar.clean-topbar .topbar-actions-final{
width:100% !important;
justify-content:flex-end !important;
}
}
@media(max-width:640px){
.main-brand-header{
min-height:118px !important;
}
.main-brand-header .main-brand-logo img,
.main-brand-logo img{
width:130px !important;
min-width:130px !important;
max-width:130px !important;
}
.topbar.clean-topbar{
padding-left:0 !important;
padding-right:14px !important;
}
}
/* =========================================================
LOGO GLOBAL: weiter nach oben + deutlich größer
========================================================= */
/* Oberer Logo-Bereich enger nach oben ziehen */
.main-brand-header{
min-height:155px !important;
padding-top:6px !important;
padding-bottom:12px !important;
margin-top:0 !important;
align-items:center !important;
justify-content:flex-start !important;
overflow:visible !important;
}
/* Logo-Wrapper größer und ohne unnötigen Abstand */
.main-brand-header .main-brand-logo{
min-width:210px !important;
min-height:122px !important;
margin-top:0 !important;
margin-bottom:0 !important;
padding:0 !important;
display:flex !important;
align-items:flex-start !important;
justify-content:center !important;
overflow:visible !important;
transform:translateY(-8px) !important;
}
/* Moinhosting-Logo deutlich größer */
.main-brand-header .main-brand-logo img,
.main-brand-logo img{
width:210px !important;
min-width:210px !important;
max-width:210px !important;
height:auto !important;
max-height:none !important;
display:block !important;
object-fit:contain !important;
margin:0 auto !important;
padding:0 !important;
opacity:1 !important;
visibility:visible !important;
}
/* Begrüßung näher unter das Logo ziehen */
.main-brand-header .main-brand-greeting{
margin-top:-10px !important;
padding-top:0 !important;
}
/* Sidebar-Logo ebenfalls etwas größer, aber nicht überladen */
.sidebar .portal-logo,
.sidebar .portal-logo-sidebar,
.brand .portal-logo{
width:118px !important;
max-width:118px !important;
height:auto !important;
object-fit:contain !important;
}
/* Header auf rechtlichen Seiten und normalen Seiten einheitlich */
.mh-legal-wrap{
margin-top:0 !important;
}
/* Tablet */
@media(max-width:980px){
.main-brand-header{
min-height:140px !important;
padding-top:6px !important;
}
.main-brand-header .main-brand-logo{
min-width:185px !important;
min-height:108px !important;
transform:translateY(-6px) !important;
}
.main-brand-header .main-brand-logo img,
.main-brand-logo img{
width:185px !important;
min-width:185px !important;
max-width:185px !important;
}
.main-brand-header .main-brand-greeting{
margin-top:-8px !important;
}
}
/* Mobile */
@media(max-width:640px){
.main-brand-header{
min-height:126px !important;
padding-top:4px !important;
padding-bottom:10px !important;
}
.main-brand-header .main-brand-logo{
min-width:160px !important;
min-height:92px !important;
transform:translateY(-5px) !important;
}
.main-brand-header .main-brand-logo img,
.main-brand-logo img{
width:160px !important;
min-width:160px !important;
max-width:160px !important;
}
.main-brand-header .main-brand-greeting{
margin-top:-7px !important;
}
}
/* =========================================================
LOGO TRUE PAGE CENTER FIX
Das Logo wird relativ zur kompletten Browser-/Portalbreite
mittig oben dargestellt, nicht relativ zum verschobenen Content.
========================================================= */
/* Platz im Inhaltsbereich für das absolute/fixed zentrierte Logo schaffen */
.portal-shell .main{
position:relative !important;
padding-top:0 !important;
}
/* Logo-Zeile komplett aus dem normalen Layout lösen und über die gesamte Seite spannen */
.main-brand-header{
position:relative !important;
left:50% !important;
right:auto !important;
transform:translateX(-50%) !important;
width:100vw !important;
max-width:100vw !important;
min-height:150px !important;
padding:4px 0 8px !important;
margin:0 !important;
box-sizing:border-box !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
text-align:center !important;
overflow:visible !important;
z-index:5 !important;
}
/* Logo selbst exakt mittig */
.main-brand-header .main-brand-logo{
display:flex !important;
align-items:flex-start !important;
justify-content:center !important;
width:230px !important;
min-width:230px !important;
max-width:230px !important;
height:auto !important;
min-height:128px !important;
margin:0 auto !important;
padding:0 !important;
transform:none !important;
opacity:1 !important;
visibility:visible !important;
overflow:visible !important;
flex:0 0 auto !important;
}
.main-brand-header .main-brand-logo img{
display:block !important;
width:230px !important;
min-width:230px !important;
max-width:230px !important;
height:auto !important;
max-height:none !important;
object-fit:contain !important;
object-position:center top !important;
margin:0 auto !important;
padding:0 !important;
opacity:1 !important;
visibility:visible !important;
transform:none !important;
}
/* Begrüßung ebenfalls zur ganzen Seite mittig */
.main-brand-header .main-brand-greeting{
width:100% !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
margin:-16px auto 0 !important;
padding:0 !important;
transform:none !important;
}
/* Topbar beginnt unter dem zentrierten Logo und bleibt normal im Content */
.topbar.clean-topbar{
margin-top:0 !important;
}
/* Verhindert, dass alte Logo-Regeln aus der Sidebar auf das Headerlogo wirken */
.main-brand-header .main-brand-logo img.portal-logo,
.main-brand-header .portal-logo{
width:230px !important;
max-width:230px !important;
}
/* Rechtliche Seiten bekommen keinen Sonderversatz */
.mh-legal-wrap{
margin-top:0 !important;
}
/* Tablet */
@media(max-width:980px){
.main-brand-header{
width:100vw !important;
min-height:135px !important;
padding-top:4px !important;
}
.main-brand-header .main-brand-logo{
width:195px !important;
min-width:195px !important;
max-width:195px !important;
min-height:110px !important;
}
.main-brand-header .main-brand-logo img,
.main-brand-header .portal-logo{
width:195px !important;
min-width:195px !important;
max-width:195px !important;
}
.main-brand-header .main-brand-greeting{
margin-top:-13px !important;
}
}
/* Mobile */
@media(max-width:640px){
.main-brand-header{
min-height:122px !important;
}
.main-brand-header .main-brand-logo{
width:168px !important;
min-width:168px !important;
max-width:168px !important;
min-height:96px !important;
}
.main-brand-header .main-brand-logo img,
.main-brand-header .portal-logo{
width:168px !important;
min-width:168px !important;
max-width:168px !important;
}
.main-brand-header .main-brand-greeting{
margin-top:-10px !important;
}
}
/* MoinPanel Footer Branding */
.portal-footer-branding{
width:100%;
box-sizing:border-box;
margin:34px 0 0;
padding:18px 24px;
border-top:1px solid rgba(100,116,139,.14);
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
color:#64748b;
font-size:14px;
line-height:1.45;
}
.portal-footer-branding strong{
color:#0d8b8d;
font-weight:900;
}
.portal-footer-branding nav{
display:flex;
align-items:center;
justify-content:flex-end;
gap:12px;
flex-wrap:wrap;
}
.portal-footer-branding a{
color:#0d6f72;
font-weight:750;
text-decoration:none;
}
.portal-footer-branding a:hover{
text-decoration:underline;
}
@media(max-width:720px){
.portal-footer-branding{
flex-direction:column;
text-align:center;
justify-content:center;
}
.portal-footer-branding nav{
justify-content:center;
}
}
/* MoinPanel Footer Realfix */
.portal-footer-branding,
footer.portal-footer-branding{
width:100% !important;
box-sizing:border-box !important;
margin:34px 0 0 !important;
padding:0 !important;
border-top:1px solid rgba(100,116,139,.16) !important;
background:transparent !important;
}
.portal-footer-branding-inner{
width:100% !important;
box-sizing:border-box !important;
padding:18px 24px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:14px !important;
color:#64748b !important;
font-size:14px !important;
line-height:1.45 !important;
}
.portal-footer-branding-inner strong{
color:#0d8b8d !important;
font-weight:900 !important;
}
.portal-footer-branding-inner nav{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap:12px !important;
flex-wrap:wrap !important;
}
.portal-footer-branding-inner a{
color:#0d6f72 !important;
font-weight:750 !important;
text-decoration:none !important;
}
.portal-footer-branding-inner a:hover{
text-decoration:underline !important;
}
@media(max-width:720px){
.portal-footer-branding-inner{
flex-direction:column !important;
text-align:center !important;
justify-content:center !important;
}
.portal-footer-branding-inner nav{
justify-content:center !important;
}
}
/* MoinPanel Footer Elegant */
.portal-footer-branding-inner{
font-weight:400 !important;
color:#7b8797 !important;
letter-spacing:.01em !important;
}
.portal-footer-branding-inner .moinpanel-wordmark{
display:inline-block !important;
color:#0f2f46 !important;
font-weight:300 !important;
letter-spacing:.085em !important;
text-transform:none !important;
font-size:1.04em !important;
line-height:1 !important;
margin:0 3px !important;
font-family:Montserrat, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
.portal-footer-branding-inner .footer-separator{
color:#a7b1bf !important;
font-weight:300 !important;
margin:0 2px !important;
}
.portal-footer-branding-inner strong{
color:#0f2f46 !important;
font-weight:300 !important;
letter-spacing:.085em !important;
}
.portal-footer-branding-inner a{
font-weight:500 !important;
color:#567083 !important;
}
.portal-footer-branding-inner a:hover{
color:#0d8b8d !important;
text-decoration:none !important;
}
.portal-footer-branding{
border-top-color:rgba(100,116,139,.11) !important;
}
/* MoinPanel Footer Balanced: normal, aber passend hervorgehoben */
.portal-footer-branding-inner{
font-weight:400 !important;
color:#64748b !important;
letter-spacing:0 !important;
}
.portal-footer-branding-inner .moinpanel-wordmark{
display:inline-block !important;
color:#0d8b8d !important;
font-weight:700 !important;
letter-spacing:0 !important;
text-transform:none !important;
font-size:1em !important;
line-height:1.1 !important;
margin:0 2px !important;
font-family:Montserrat, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
.portal-footer-branding-inner .footer-separator{
color:#94a3b8 !important;
font-weight:400 !important;
margin:0 2px !important;
}
.portal-footer-branding-inner strong{
color:#0d8b8d !important;
font-weight:700 !important;
letter-spacing:0 !important;
}
.portal-footer-branding-inner a{
font-weight:600 !important;
color:#0d6f72 !important;
text-decoration:none !important;
}
.portal-footer-branding-inner a:hover{
color:#0d8b8d !important;
text-decoration:underline !important;
}
/* Footer: Moinhosting.de passend verlinken */
.portal-footer-branding-inner .footer-brand-link{
color:#0d6f72 !important;
font-weight:700 !important;
text-decoration:none !important;
}
.portal-footer-branding-inner .footer-brand-link:hover{
color:#0d8b8d !important;
text-decoration:underline !important;
}
/* Rechtliche Seiten: Datenschutz & Impressum wieder mittig im Contentbereich */
body:has(.mh-legal-wrap) .mh-legal-wrap{
width:100% !important;
max-width:1040px !important;
margin-left:auto !important;
margin-right:auto !important;
padding-left:20px !important;
padding-right:20px !important;
box-sizing:border-box !important;
}
/* Hero und Karten mittig als Block */
body:has(.mh-legal-wrap) .mh-legal-hero,
body:has(.mh-legal-wrap) .mh-legal-grid,
body:has(.mh-legal-wrap) .mh-legal-content{
width:100% !important;
margin-left:auto !important;
margin-right:auto !important;
}
/* Text innerhalb der rechtlichen Karten bleibt sauber lesbar linksbündig */
body:has(.mh-legal-wrap) .mh-legal-card,
body:has(.mh-legal-wrap) .mh-legal-card h2,
body:has(.mh-legal-wrap) .mh-legal-card p,
body:has(.mh-legal-wrap) .mh-legal-card li,
body:has(.mh-legal-wrap) .mh-legal-box{
text-align:left !important;
}
/* Inhaltsnavigation bleibt als Spalte links innerhalb des zentrierten Blocks */
body:has(.mh-legal-wrap) .mh-legal-nav{
text-align:left !important;
}
/* Fallback für Browser/Setups ohne :has(): direkte Klasse gewinnt durch späte Reihenfolge */
.mh-legal-wrap{
max-width:1040px !important;
margin-left:auto !important;
margin-right:auto !important;
padding-left:20px !important;
padding-right:20px !important;
box-sizing:border-box !important;
}
/* =========================================================
GLOBAL NO HORIZONTAL SCROLL FIX
Verhindert seitliches Scrollen auf allen Portal-Seiten.
========================================================= */
/* Grundsätzlich keine horizontale Seitenüberbreite */
html,
body{
max-width:100% !important;
overflow-x:hidden !important;
}
/* Ursache für Überbreite: 100vw im Content-Kontext vermeiden */
.main-brand-header{
left:auto !important;
right:auto !important;
transform:none !important;
width:100% !important;
max-width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
}
/* Logo bleibt trotzdem mittig */
.main-brand-header .main-brand-logo,
.main-brand-header .main-brand-greeting{
margin-left:auto !important;
margin-right:auto !important;
}
/* Topbar darf bei vielen Buttons nicht aus dem Viewport schieben */
.topbar.clean-topbar{
min-width:0 !important;
overflow:hidden !important;
}
.topbar.clean-topbar .topbar-title{
min-width:0 !important;
}
.topbar.clean-topbar .topbar-actions,
.topbar.clean-topbar .topbar-actions-search,
.topbar.clean-topbar .topbar-actions-final{
min-width:0 !important;
max-width:100% !important;
}
/* Tabellen, Formulare und große Inhalte dürfen nicht die Seite verbreitern */
.table-wrap,
.admin-table-wrap,
.responsive-table,
.card table,
table{
max-width:100% !important;
}
.table-wrap,
.admin-table-wrap,
.responsive-table{
overflow-x:auto !important;
}
/* Lange Texte, Links, Dateinamen, E-Mails brechen statt Seitenbreite zu sprengen */
.card,
.notice,
.alert,
.ticket-message,
.forum-post-body,
.mh-legal-card,
.mh-legal-box,
td,
th,
p,
li,
a,
span{
overflow-wrap:anywhere;
word-break:normal;
}
/* Bilder und Medien bleiben im Container */
img,
svg,
video,
canvas,
iframe{
max-width:100% !important;
height:auto;
}
/* Rechtliche Seiten sicher innerhalb des Viewports */
.mh-legal-wrap,
.mh-legal-hero,
.mh-legal-grid,
.mh-legal-content,
.mh-legal-card{
max-width:100% !important;
box-sizing:border-box !important;
}
/* Mobile: Topbar sauber umbrechen statt seitlich rauszulaufen */
@media(max-width:980px){
.topbar.clean-topbar{
overflow:visible !important;
}
.topbar.clean-topbar .topbar-actions,
.topbar.clean-topbar .topbar-actions-search,
.topbar.clean-topbar .topbar-actions-final{
flex-wrap:wrap !important;
}
}
@media(max-width:640px){
.global-search-form,
.global-search-form-final{
max-width:100% !important;
}
.global-search-form input,
.global-search-form-final input{
min-width:0 !important;
}
}
/* =========================================================
SIDEBAR LEFT CLIP FIX
Der letzte No-Scroll-Fix darf die linke Sidebar/Kundenpanel
nicht abschneiden. Sidebar bekommt wieder vollständigen Platz.
========================================================= */
/* Kein negativer Versatz links */
html,
body{
margin-left:0 !important;
padding-left:0 !important;
}
/* Haupt-Shell sitzt sauber am linken Rand */
.portal-shell{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
margin-left:0 !important;
padding-left:0 !important;
display:flex !important;
align-items:stretch !important;
overflow-x:clip !important;
box-sizing:border-box !important;
}
/* Sidebar/Kundenpanel nicht mehr durch globale Max-Width/Overflow-Regeln beschneiden */
.sidebar{
flex:0 0 var(--sidebar-width, 280px) !important;
width:var(--sidebar-width, 280px) !important;
min-width:var(--sidebar-width, 280px) !important;
max-width:var(--sidebar-width, 280px) !important;
margin-left:0 !important;
left:0 !important;
transform:none !important;
overflow:visible !important;
box-sizing:border-box !important;
z-index:30 !important;
}
/* Sidebar-Inhalt darf vollständig sichtbar sein */
.sidebar .brand,
.sidebar .brand-stacked,
.sidebar .nav,
.sidebar .sidebar-footer{
max-width:100% !important;
overflow:visible !important;
box-sizing:border-box !important;
}
/* Hauptinhalt nimmt den Rest ein, ohne nach links zu rutschen */
.main{
flex:1 1 auto !important;
min-width:0 !important;
width:auto !important;
max-width:calc(100% - var(--sidebar-width, 280px)) !important;
margin-left:0 !important;
overflow-x:hidden !important;
box-sizing:border-box !important;
}
/* Logo-Zeile nicht über die Sidebar legen und nicht nach links ziehen */
.main-brand-header{
width:100% !important;
max-width:100% !important;
left:auto !important;
transform:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
/* Topbar ebenfalls nur im Hauptinhalt, nicht über die Sidebar hinaus */
.topbar.clean-topbar{
width:100% !important;
max-width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
overflow:visible !important;
}
/* Auf Desktop bleibt Sidebar sichtbar und vollständig */
@media(min-width:781px){
.portal-shell{
overflow-x:hidden !important;
}
.sidebar{
position:relative !important;
display:flex !important;
}
.main{
max-width:calc(100vw - var(--sidebar-width, 280px)) !important;
}
}
/* Mobile: Sidebar ist standardmäßig außerhalb, aber vollständig, wenn geöffnet */
@media(max-width:780px){
.portal-shell{
display:block !important;
overflow-x:hidden !important;
}
.sidebar{
position:fixed !important;
top:0 !important;
bottom:0 !important;
left:0 !important;
width:min(86vw, 320px) !important;
min-width:0 !important;
max-width:min(86vw, 320px) !important;
transform:translateX(-105%) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
}
body.sidebar-open .sidebar{
transform:translateX(0) !important;
}
.main{
width:100% !important;
max-width:100% !important;
}
}
/* Falls Browser clip nicht unterstützt: hidden als Fallback ohne linken Abschnitt */
@supports not (overflow: clip){
.portal-shell{
overflow-x:hidden !important;
}
}
/* =========================================================
SIDEBAR STABLE RESTORE
Finaler Reset für die linke Navigation.
Die Sidebar ist wieder eine feste, vollständige Spalte.
========================================================= */
:root{
--mh-sidebar-width: 292px;
}
/* Nur die ganze Seite darf nicht seitlich scrollen */
html,
body{
width:100% !important;
max-width:100% !important;
overflow-x:hidden !important;
margin:0 !important;
}
/* Portal-Shell: feste Sidebar links, Main rechts */
.portal-shell{
width:100% !important;
max-width:100% !important;
min-height:100vh !important;
display:grid !important;
grid-template-columns:var(--mh-sidebar-width) minmax(0, 1fr) !important;
align-items:stretch !important;
margin:0 !important;
padding:0 !important;
overflow-x:hidden !important;
box-sizing:border-box !important;
}
/* Sidebar vollständig sichtbar, nicht gequetscht, nicht abgeschnitten */
.portal-shell > .sidebar,
.sidebar{
position:relative !important;
inset:auto !important;
grid-column:1 !important;
width:var(--mh-sidebar-width) !important;
min-width:var(--mh-sidebar-width) !important;
max-width:var(--mh-sidebar-width) !important;
height:auto !important;
min-height:100vh !important;
margin:0 !important;
padding:24px 18px !important;
box-sizing:border-box !important;
transform:none !important;
translate:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
display:flex !important;
flex-direction:column !important;
flex-shrink:0 !important;
z-index:20 !important;
}
/* Sidebar-Inhalte sauber innerhalb der Spalte */
.sidebar *,
.sidebar .brand,
.sidebar .brand-stacked,
.sidebar .brand-link,
.sidebar .nav,
.sidebar .nav-section,
.sidebar .nav-group-label,
.sidebar .sidebar-footer{
box-sizing:border-box !important;
max-width:100% !important;
}
.sidebar .brand,
.sidebar .brand-stacked,
.sidebar .brand-link{
width:100% !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
gap:6px !important;
margin:0 0 22px !important;
padding:0 !important;
overflow:visible !important;
text-decoration:none !important;
}
/* Sidebar-Logo normalisieren, damit es die Spalte nicht sprengt */
.sidebar .portal-logo,
.sidebar .portal-logo-sidebar,
.sidebar .brand img{
display:block !important;
width:112px !important;
max-width:112px !important;
min-width:0 !important;
height:auto !important;
max-height:none !important;
object-fit:contain !important;
margin:0 auto !important;
}
.sidebar .brand strong,
.sidebar .brand small{
display:block !important;
width:100% !important;
text-align:center !important;
overflow-wrap:anywhere !important;
}
/* Navigation wieder als saubere vertikale Liste */
.sidebar .nav{
width:100% !important;
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
gap:6px !important;
margin:0 !important;
padding:0 !important;
overflow:visible !important;
}
.sidebar .nav a,
.sidebar .nav-link,
.sidebar .nav .active,
.sidebar nav a{
width:100% !important;
max-width:100% !important;
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
min-height:40px !important;
padding:10px 12px !important;
margin:0 !important;
border-radius:13px !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
text-align:left !important;
}
.sidebar .nav-section,
.sidebar .nav-group-label{
width:100% !important;
margin:16px 0 6px !important;
padding:0 10px !important;
text-align:left !important;
white-space:normal !important;
}
.sidebar .nav-group-label span{
display:block !important;
max-width:100% !important;
overflow-wrap:anywhere !important;
}
/* Footer der Sidebar unten, aber nicht abschneiden */
.sidebar .sidebar-footer{
width:100% !important;
margin-top:auto !important;
padding-top:18px !important;
overflow-wrap:anywhere !important;
text-align:left !important;
}
/* Main sauber rechts neben Sidebar */
.portal-shell > .main,
.main{
grid-column:2 !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
overflow-x:hidden !important;
box-sizing:border-box !important;
}
/* Header darf nicht über Sidebar gelegt werden */
.main-brand-header,
.topbar.clean-topbar{
width:100% !important;
max-width:100% !important;
left:auto !important;
right:auto !important;
transform:none !important;
margin-left:0 !important;
margin-right:0 !important;
box-sizing:border-box !important;
}
/* Menü-Buttons bleiben entfernt */
.sidebar-toggle-btn,
.sidebar-close-btn,
.sidebar-backdrop{
display:none !important;
}
/* Inhalt darf intern scrollen, aber nicht die ganze Seite verbreitern */
.table-wrap,
.admin-table-wrap,
.responsive-table{
max-width:100% !important;
overflow-x:auto !important;
}
/* Mobile: ohne Menübutton wird die Sidebar oben als normale Navigation dargestellt */
@media(max-width:780px){
.portal-shell{
display:block !important;
width:100% !important;
overflow-x:hidden !important;
}
.portal-shell > .sidebar,
.sidebar{
position:relative !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
min-height:auto !important;
height:auto !important;
transform:none !important;
padding:18px 16px !important;
overflow:visible !important;
}
.sidebar .nav{
display:grid !important;
grid-template-columns:1fr !important;
}
.portal-shell > .main,
.main{
width:100% !important;
max-width:100% !important;
}
}
/* =========================================================
GLOBAL CONTENT SPACING
Auf jeder Seite links und rechts etwas Abstand,
ohne Sidebar oder Layout zu beschädigen.
========================================================= */
/* Hauptbereich bekommt saubere Innenabstände */
.portal-shell > .main,
.main{
padding-left:24px !important;
padding-right:24px !important;
box-sizing:border-box !important;
}
/* Header/Topbar bleiben innerhalb dieses Abstands */
.main-brand-header,
.topbar.clean-topbar{
padding-left:0 !important;
padding-right:0 !important;
}
/* Karten, Grids und Seitenbereiche bleiben innerhalb des Hauptbereichs */
.main > .grid,
.main > section.grid,
.main > section,
.main > article,
.main > .card,
.main .dashboard-grid,
.main .content-grid{
max-width:100% !important;
box-sizing:border-box !important;
}
/* Rechtliche Seiten mittig mit angenehmem Rand */
.mh-legal-wrap{
padding-left:24px !important;
padding-right:24px !important;
box-sizing:border-box !important;
}
/* Sidebar erhält ebenfalls innen etwas sauberen Rand */
.sidebar{
padding-left:20px !important;
padding-right:20px !important;
}
/* Mobile etwas weniger Abstand */
@media(max-width:780px){
.portal-shell > .main,
.main{
padding-left:16px !important;
padding-right:16px !important;
}
.mh-legal-wrap{
padding-left:16px !important;
padding-right:16px !important;
}
.sidebar{
padding-left:16px !important;
padding-right:16px !important;
}
}
@media(max-width:420px){
.portal-shell > .main,
.main{
padding-left:12px !important;
padding-right:12px !important;
}
.mh-legal-wrap{
padding-left:12px !important;
padding-right:12px !important;
}
}
/* Footer unten dezenter: kleiner und mit sichtbarem Hintergrund-Abstand */
.portal-footer-branding,
footer.portal-footer-branding{
margin-top:26px !important;
margin-bottom:18px !important;
border-top:1px solid rgba(100,116,139,.12) !important;
}
.portal-footer-branding-inner{
padding-top:12px !important;
padding-bottom:12px !important;
min-height:auto !important;
font-size:13px !important;
}
/* Hauptbereich bekommt unten etwas Luft, damit der Hintergrund sichtbar bleibt */
.portal-shell > .main,
.main{
padding-bottom:18px !important;
}
@media(max-width:720px){
.portal-footer-branding{
margin-bottom:14px !important;
}
.portal-footer-branding-inner{
padding-top:10px !important;
padding-bottom:10px !important;
font-size:12.5px !important;
}
.portal-shell > .main,
.main{
padding-bottom:14px !important;
}
}
/* Teamkalender */
.team-calendar-hero{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
}
.team-calendar-hero h2{
margin:.35rem 0 .35rem;
}
.team-calendar-month-nav{
display:flex;
align-items:center;
justify-content:flex-end;
gap:10px;
flex-wrap:wrap;
text-align:center;
}
.team-calendar-month-nav strong{
min-width:170px;
color:#16314f;
font-size:1.05rem;
}
.team-calendar-board{
overflow:hidden;
}
.team-calendar-weekdays{
display:grid;
grid-template-columns:repeat(7, minmax(0, 1fr));
gap:1px;
margin-bottom:1px;
background:rgba(100,116,139,.14);
border-radius:18px 18px 0 0;
overflow:hidden;
}
.team-calendar-weekdays strong{
display:flex;
align-items:center;
justify-content:center;
min-height:42px;
background:#f8fafc;
color:#475569;
font-size:.82rem;
text-transform:uppercase;
letter-spacing:.04em;
}
.team-calendar-grid{
display:grid;
grid-template-columns:repeat(7, minmax(0, 1fr));
gap:1px;
background:rgba(100,116,139,.14);
border:1px solid rgba(100,116,139,.14);
border-top:0;
border-radius:0 0 18px 18px;
overflow:hidden;
}
.team-calendar-day{
min-height:142px;
background:#fff;
padding:10px;
box-sizing:border-box;
display:flex;
flex-direction:column;
gap:8px;
}
.team-calendar-day.muted-day{
background:#f8fafc;
}
.team-calendar-day.is-today{
background:linear-gradient(180deg,#f0fdfa,#fff 55%);
box-shadow:inset 0 0 0 2px rgba(13,139,141,.24);
}
.team-calendar-day-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
}
.team-calendar-day-head strong{
color:#16314f;
font-size:.96rem;
}
.team-calendar-day-head a{
width:24px;
height:24px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
color:#0d6f72;
background:#f0fdfa;
font-weight:900;
}
.team-calendar-events{
display:grid;
gap:6px;
}
.team-calendar-event{
display:grid;
gap:1px;
padding:7px 8px;
border-radius:12px;
text-decoration:none;
border-left:4px solid #0d8b8d;
background:#f8fafc;
color:#334155;
box-shadow:0 4px 10px rgba(15,23,42,.04);
}
.team-calendar-event:hover{
transform:translateY(-1px);
box-shadow:0 8px 18px rgba(15,23,42,.08);
}
.team-calendar-event span{
font-size:.72rem;
color:#64748b;
font-weight:750;
}
.team-calendar-event strong{
color:#0f172a;
font-size:.82rem;
line-height:1.2;
}
.team-calendar-event em{
color:#64748b;
font-size:.72rem;
font-style:normal;
}
.team-calendar-event.meeting,
.team-calendar-legend .meeting{ border-color:#2563eb; }
.team-calendar-event.support,
.team-calendar-legend .support{ border-color:#0d8b8d; }
.team-calendar-event.maintenance,
.team-calendar-legend .maintenance{ border-color:#f59e0b; }
.team-calendar-event.customer,
.team-calendar-legend .customer{ border-color:#7c3aed; }
.team-calendar-event.internal,
.team-calendar-legend .internal{ border-color:#64748b; }
.team-calendar-event.absence,
.team-calendar-legend .absence{ border-color:#dc2626; }
.team-calendar-event.deadline,
.team-calendar-legend .deadline{ border-color:#111827; }
.team-calendar-more{
color:#64748b;
font-weight:700;
}
.team-calendar-side h3{
margin:.4rem 0 1rem;
}
.team-calendar-delete-form{
margin-top:12px;
padding-top:12px;
border-top:1px solid rgba(100,116,139,.14);
}
.team-calendar-legend{
margin-top:16px;
padding-top:14px;
border-top:1px solid rgba(100,116,139,.14);
display:flex;
flex-wrap:wrap;
gap:8px;
align-items:center;
}
.team-calendar-legend strong{
width:100%;
color:#16314f;
}
.team-calendar-legend span{
border-left:4px solid #64748b;
padding:5px 8px;
border-radius:10px;
background:#f8fafc;
color:#475569;
font-size:.82rem;
font-weight:700;
}
@media(max-width:1100px){
.team-calendar-board,
.team-calendar-side{
grid-column:span 12 !important;
}
}
@media(max-width:780px){
.team-calendar-hero{
flex-direction:column;
align-items:flex-start;
}
.team-calendar-weekdays{
display:none;
}
.team-calendar-grid{
grid-template-columns:1fr;
border-radius:18px;
}
.team-calendar-day{
min-height:auto;
}
.team-calendar-day.muted-day{
display:none;
}
}
/* Teamkalender sichtbar verlinkt */
.admin-calendar-shortcut-box{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
}
.admin-calendar-shortcut-box h3{
margin:.35rem 0 .25rem;
}
@media(max-width:720px){
.admin-calendar-shortcut-box{
flex-direction:column;
align-items:flex-start;
}
}
/* Teamkalender Eingabemaske sichtbar und benutzbar */
.team-calendar-entry-main-form{
border:1px solid rgba(13,139,141,.18) !important;
box-shadow:0 16px 36px rgba(15,23,42,.07) !important;
}
.team-calendar-form-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
margin-bottom:16px;
}
.team-calendar-form-head h3{
margin:.35rem 0 .25rem;
}
.team-calendar-main-form{
display:grid;
grid-template-columns:repeat(5, minmax(0, 1fr));
gap:14px;
align-items:end;
}
.team-calendar-main-form label{
display:grid;
gap:6px;
margin:0;
}
.team-calendar-main-form input,
.team-calendar-main-form select,
.team-calendar-main-form textarea{
width:100%;
box-sizing:border-box;
}
.team-calendar-description-field{
grid-column:span 3;
}
.team-calendar-form-actions{
display:flex;
align-items:center;
justify-content:flex-start;
gap:10px;
flex-wrap:wrap;
}
.team-calendar-delete-form-main{
margin-top:14px;
padding-top:14px;
border-top:1px solid rgba(100,116,139,.14);
}
.team-calendar-side .team-calendar-legend{
margin-top:8px;
padding-top:0;
border-top:0;
}
@media(max-width:1180px){
.team-calendar-main-form{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
.team-calendar-description-field{
grid-column:span 2;
}
}
@media(max-width:640px){
.team-calendar-form-head{
flex-direction:column;
}
.team-calendar-main-form{
grid-template-columns:1fr;
}
.team-calendar-description-field{
grid-column:span 1;
}
}
/* Teamkalender Kalenderbereich Restore */
.team-calendar-board{
display:block !important;
grid-column:span 12 !important;
overflow:visible !important;
}
.team-calendar-board-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
margin-bottom:14px;
}
.team-calendar-board-head h3{
margin:.35rem 0 0;
}
.team-calendar-legend-inline{
display:flex;
align-items:center;
justify-content:flex-end;
gap:8px;
flex-wrap:wrap;
}
.team-calendar-legend-inline span{
border-left:4px solid #64748b;
padding:6px 9px;
border-radius:10px;
background:#f8fafc;
color:#475569;
font-size:.82rem;
font-weight:700;
}
.team-calendar-legend-inline .meeting{ border-color:#2563eb; }
.team-calendar-legend-inline .support{ border-color:#0d8b8d; }
.team-calendar-legend-inline .maintenance{ border-color:#f59e0b; }
.team-calendar-legend-inline .customer{ border-color:#7c3aed; }
.team-calendar-legend-inline .absence{ border-color:#dc2626; }
.team-calendar-grid,
.team-calendar-weekdays{
width:100% !important;
}
@media(max-width:720px){
.team-calendar-board-head{
flex-direction:column;
}
.team-calendar-legend-inline{
justify-content:flex-start;
}
}
/* Teamkalender SIMPLE VISIBLE – unabhängig vom Portal-Grid sichtbar */
.teamcal-page{
display:block !important;
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
}
.teamcal-page > .card{
display:block !important;
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
margin-bottom:18px !important;
}
.teamcal-hero,
.teamcal-calendar-head,
.teamcal-form-title{
display:flex !important;
align-items:flex-start !important;
justify-content:space-between !important;
gap:18px !important;
}
.teamcal-hero h2,
.teamcal-calendar-head h3,
.teamcal-form-title h3{
margin:.35rem 0 .25rem !important;
}
.teamcal-nav{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap:10px !important;
flex-wrap:wrap !important;
}
.teamcal-nav strong{
color:#16314f !important;
min-width:165px !important;
text-align:center !important;
}
.teamcal-form-grid{
display:grid !important;
grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
gap:14px !important;
align-items:end !important;
}
.teamcal-form-grid label{
display:grid !important;
gap:6px !important;
margin:0 !important;
}
.teamcal-form-grid input,
.teamcal-form-grid select,
.teamcal-form-grid textarea{
width:100% !important;
box-sizing:border-box !important;
}
.teamcal-form-grid .wide{
grid-column:span 3 !important;
}
.teamcal-actions{
display:flex !important;
align-items:center !important;
gap:10px !important;
flex-wrap:wrap !important;
}
.teamcal-delete{
margin-top:14px !important;
padding-top:14px !important;
border-top:1px solid rgba(100,116,139,.14) !important;
}
.teamcal-legend{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap:8px !important;
flex-wrap:wrap !important;
}
.teamcal-legend span{
border-left:4px solid #64748b !important;
background:#f8fafc !important;
border-radius:10px !important;
padding:6px 9px !important;
color:#475569 !important;
font-size:.82rem !important;
font-weight:700 !important;
}
.teamcal-legend .meeting{ border-color:#2563eb !important; }
.teamcal-legend .support{ border-color:#0d8b8d !important; }
.teamcal-legend .maintenance{ border-color:#f59e0b !important; }
.teamcal-legend .customer{ border-color:#7c3aed !important; }
.teamcal-legend .absence{ border-color:#dc2626 !important; }
.teamcal-weekdays{
display:grid !important;
grid-template-columns:repeat(7, minmax(0, 1fr)) !important;
gap:1px !important;
background:rgba(100,116,139,.15) !important;
border-radius:18px 18px 0 0 !important;
overflow:hidden !important;
margin-top:14px !important;
}
.teamcal-weekdays div{
background:#f8fafc !important;
min-height:42px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
color:#475569 !important;
font-size:.82rem !important;
font-weight:800 !important;
text-transform:uppercase !important;
letter-spacing:.04em !important;
}
.teamcal-month{
display:grid !important;
grid-template-columns:repeat(7, minmax(0, 1fr)) !important;
gap:1px !important;
background:rgba(100,116,139,.15) !important;
border:1px solid rgba(100,116,139,.15) !important;
border-top:0 !important;
border-radius:0 0 18px 18px !important;
overflow:hidden !important;
width:100% !important;
}
.teamcal-day{
display:flex !important;
flex-direction:column !important;
min-height:150px !important;
background:#fff !important;
padding:10px !important;
box-sizing:border-box !important;
}
.teamcal-empty{
background:#f8fafc !important;
}
.teamcal-day.today{
background:linear-gradient(180deg,#f0fdfa,#ffffff 58%) !important;
box-shadow:inset 0 0 0 2px rgba(13,139,141,.22) !important;
}
.teamcal-day-top{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:8px !important;
margin-bottom:8px !important;
}
.teamcal-day-top strong{
color:#16314f !important;
}
.teamcal-day-top a{
width:25px !important;
height:25px !important;
border-radius:999px !important;
background:#f0fdfa !important;
color:#0d6f72 !important;
text-decoration:none !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
font-weight:900 !important;
}
.teamcal-events{
display:grid !important;
gap:6px !important;
}
.teamcal-event{
display:grid !important;
gap:1px !important;
padding:7px 8px !important;
border-radius:12px !important;
text-decoration:none !important;
background:#f8fafc !important;
color:#334155 !important;
border-left:4px solid #64748b !important;
box-shadow:0 4px 10px rgba(15,23,42,.04) !important;
}
.teamcal-event:hover{
transform:translateY(-1px) !important;
box-shadow:0 8px 18px rgba(15,23,42,.08) !important;
}
.teamcal-event small{
color:#64748b !important;
font-weight:750 !important;
font-size:.72rem !important;
}
.teamcal-event b{
color:#0f172a !important;
font-size:.82rem !important;
line-height:1.2 !important;
}
.teamcal-event em{
color:#64748b !important;
font-size:.72rem !important;
font-style:normal !important;
}
.teamcal-event.meeting{ border-color:#2563eb !important; }
.teamcal-event.support{ border-color:#0d8b8d !important; }
.teamcal-event.maintenance{ border-color:#f59e0b !important; }
.teamcal-event.customer{ border-color:#7c3aed !important; }
.teamcal-event.internal{ border-color:#64748b !important; }
.teamcal-event.absence{ border-color:#dc2626 !important; }
.teamcal-event.deadline{ border-color:#111827 !important; }
.teamcal-more{
color:#64748b !important;
font-weight:700 !important;
font-size:.78rem !important;
}
@media(max-width:1180px){
.teamcal-form-grid{
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}
.teamcal-form-grid .wide{
grid-column:span 2 !important;
}
}
@media(max-width:780px){
.teamcal-hero,
.teamcal-calendar-head,
.teamcal-form-title{
flex-direction:column !important;
}
.teamcal-weekdays{
display:none !important;
}
.teamcal-month{
grid-template-columns:1fr !important;
border-radius:18px !important;
}
.teamcal-empty{
display:none !important;
}
.teamcal-day{
min-height:auto !important;
}
}
@media(max-width:640px){
.teamcal-form-grid{
grid-template-columns:1fr !important;
}
.teamcal-form-grid .wide{
grid-column:span 1 !important;
}
}
/* TEAMKALENDER RENDER BREAK FIX: Formular und Kalender garantiert sichtbar */
.teamcal-force-visible,
.teamcal-force-visible *,
.teamcal-form,
.teamcal-form *,
.teamcal-calendar,
.teamcal-calendar *{
box-sizing:border-box !important;
}
.teamcal-force-visible{
display:block !important;
width:100% !important;
max-width:100% !important;
}
.teamcal-force-visible > .card{
display:block !important;
width:100% !important;
max-width:100% !important;
margin-bottom:18px !important;
visibility:visible !important;
opacity:1 !important;
height:auto !important;
min-height:0 !important;
overflow:visible !important;
}
.teamcal-form form,
.teamcal-form-grid{
display:grid !important;
visibility:visible !important;
opacity:1 !important;
height:auto !important;
overflow:visible !important;
grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
gap:14px !important;
align-items:end !important;
margin-top:16px !important;
}
.teamcal-form-grid label{
display:grid !important;
gap:6px !important;
margin:0 !important;
color:#0f172a !important;
font-weight:700 !important;
}
.teamcal-form-grid label span{
display:block !important;
}
.teamcal-form-grid input,
.teamcal-form-grid select,
.teamcal-form-grid textarea{
display:block !important;
width:100% !important;
min-height:42px !important;
box-sizing:border-box !important;
visibility:visible !important;
opacity:1 !important;
}
.teamcal-form-grid .wide{
grid-column:span 3 !important;
}
.teamcal-actions{
display:flex !important;
gap:10px !important;
flex-wrap:wrap !important;
align-items:center !important;
}
.teamcal-calendar{
display:block !important;
visibility:visible !important;
opacity:1 !important;
min-height:400px !important;
overflow:visible !important;
}
.teamcal-weekdays{
display:grid !important;
grid-template-columns:repeat(7, minmax(0, 1fr)) !important;
}
.teamcal-month{
display:grid !important;
grid-template-columns:repeat(7, minmax(0, 1fr)) !important;
min-height:520px !important;
}
.teamcal-day{
display:flex !important;
min-height:150px !important;
visibility:visible !important;
opacity:1 !important;
}
@media(max-width:1180px){
.teamcal-form form,
.teamcal-form-grid{
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}
.teamcal-form-grid .wide{
grid-column:span 2 !important;
}
}
@media(max-width:780px){
.teamcal-weekdays{
display:none !important;
}
.teamcal-month{
grid-template-columns:1fr !important;
}
.teamcal-empty{
display:none !important;
}
}
@media(max-width:640px){
.teamcal-form form,
.teamcal-form-grid{
grid-template-columns:1fr !important;
}
.teamcal-form-grid .wide{
grid-column:span 1 !important;
}
}
/* =========================================================
TEAMKALENDER – MODERNES DESIGN
========================================================= */
.teamcal-page{
padding-top:4px !important;
}
.teamcal-page > .card{
border:1px solid rgba(148,163,184,.16) !important;
border-radius:24px !important;
box-shadow:0 18px 44px rgba(15,23,42,.06), 0 2px 8px rgba(15,23,42,.04) !important;
overflow:hidden !important;
}
.teamcal-hero{
position:relative !important;
padding:28px 30px !important;
background:
radial-gradient(circle at top right, rgba(13,139,141,.16), transparent 28%),
linear-gradient(135deg, #ffffff 0%, #f8fbfd 55%, #eff8f8 100%) !important;
}
.teamcal-hero::after{
content:"";
position:absolute;
inset:auto 0 0 0;
height:4px;
background:linear-gradient(90deg, #0d8b8d 0%, #18b3b5 50%, #f5a623 100%);
}
.teamcal-hero h2{
font-size:2rem !important;
line-height:1.1 !important;
margin:.5rem 0 .45rem !important;
letter-spacing:-.02em !important;
}
.teamcal-hero .muted{
max-width:760px !important;
font-size:1rem !important;
}
.teamcal-nav{
gap:12px !important;
}
.teamcal-nav-btn{
min-width:118px !important;
justify-content:center !important;
}
.teamcal-month-badge{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-width:172px !important;
min-height:48px !important;
padding:0 18px !important;
border-radius:16px !important;
background:#ffffff !important;
border:1px solid rgba(13,139,141,.16) !important;
box-shadow:0 10px 24px rgba(15,23,42,.05) !important;
color:#16314f !important;
font-size:1rem !important;
font-weight:800 !important;
}
.teamcal-form{
padding:26px 28px !important;
background:linear-gradient(180deg, #ffffff 0%, #fcfefe 100%) !important;
}
.teamcal-form-title{
margin-bottom:8px !important;
}
.teamcal-form-title .muted{
max-width:720px !important;
margin:.35rem 0 0 !important;
}
.teamcal-form-grid{
gap:16px !important;
}
.teamcal-form-grid label{
font-size:.95rem !important;
font-weight:700 !important;
color:#16314f !important;
}
.teamcal-form-grid label span{
font-size:.87rem !important;
font-weight:800 !important;
color:#334155 !important;
letter-spacing:.01em !important;
}
.teamcal-form-grid input,
.teamcal-form-grid select,
.teamcal-form-grid textarea{
border:1px solid rgba(148,163,184,.26) !important;
border-radius:16px !important;
background:#fff !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 8px rgba(15,23,42,.03) !important;
transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
.teamcal-form-grid input:focus,
.teamcal-form-grid select:focus,
.teamcal-form-grid textarea:focus{
border-color:rgba(13,139,141,.55) !important;
box-shadow:0 0 0 4px rgba(13,139,141,.12), 0 8px 18px rgba(13,139,141,.08) !important;
transform:translateY(-1px) !important;
outline:none !important;
}
.teamcal-actions{
margin-top:2px !important;
}
.teamcal-delete{
background:#fff7f7 !important;
border:1px dashed rgba(220,38,38,.22) !important;
border-radius:16px !important;
padding:14px !important;
}
.teamcal-calendar{
padding:26px 24px 24px !important;
background:
radial-gradient(circle at top left, rgba(13,139,141,.07), transparent 22%),
linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%) !important;
}
.teamcal-calendar-head{
margin-bottom:16px !important;
}
.teamcal-calendar-subtitle{
margin:.2rem 0 0 !important;
font-size:.92rem !important;
}
.teamcal-legend{
gap:10px !important;
}
.teamcal-legend span{
border-left-width:0 !important;
border-radius:999px !important;
padding:7px 12px !important;
font-size:.78rem !important;
font-weight:800 !important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.65) !important;
}
.teamcal-legend .meeting{
background:#eef4ff !important;
color:#2553a6 !important;
}
.teamcal-legend .support{
background:#e8fbfb !important;
color:#0d6f72 !important;
}
.teamcal-legend .maintenance{
background:#fff6df !important;
color:#b66b00 !important;
}
.teamcal-legend .customer{
background:#f2ecff !important;
color:#6d38cb !important;
}
.teamcal-legend .absence{
background:#fff0f0 !important;
color:#c23030 !important;
}
.teamcal-weekdays{
gap:8px !important;
background:transparent !important;
margin-top:16px !important;
border-radius:0 !important;
}
.teamcal-weekdays div{
min-height:44px !important;
border-radius:14px !important;
background:#f5f8fb !important;
border:1px solid rgba(148,163,184,.14) !important;
color:#5b6b7f !important;
font-size:.76rem !important;
font-weight:900 !important;
}
.teamcal-month{
gap:10px !important;
background:transparent !important;
border:0 !important;
border-radius:0 !important;
min-height:0 !important;
margin-top:10px !important;
}
.teamcal-day{
min-height:168px !important;
padding:12px !important;
border:1px solid rgba(148,163,184,.14) !important;
border-radius:20px !important;
background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
box-shadow:0 10px 24px rgba(15,23,42,.04) !important;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
.teamcal-day:hover{
transform:translateY(-2px) !important;
box-shadow:0 16px 30px rgba(15,23,42,.08) !important;
border-color:rgba(13,139,141,.22) !important;
}
.teamcal-day.today{
background:linear-gradient(180deg, #f1fcfc 0%, #ffffff 66%) !important;
border-color:rgba(13,139,141,.28) !important;
box-shadow:0 14px 30px rgba(13,139,141,.08) !important;
}
.teamcal-empty{
background:linear-gradient(180deg, #f8fafc 0%, #f5f7fa 100%) !important;
border-style:dashed !important;
}
.teamcal-day-top{
margin-bottom:10px !important;
}
.teamcal-day-top strong{
width:34px !important;
height:34px !important;
border-radius:999px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
background:#f3f7fa !important;
color:#16314f !important;
font-size:.95rem !important;
font-weight:900 !important;
}
.teamcal-day.today .teamcal-day-top strong{
background:#0d8b8d !important;
color:#fff !important;
}
.teamcal-day-top a{
width:30px !important;
height:30px !important;
border-radius:12px !important;
background:#ffffff !important;
border:1px solid rgba(148,163,184,.2) !important;
color:#0d6f72 !important;
box-shadow:0 6px 14px rgba(15,23,42,.05) !important;
transition:all .18s ease !important;
}
.teamcal-day-top a:hover{
background:#0d8b8d !important;
color:#fff !important;
border-color:#0d8b8d !important;
}
.teamcal-events{
gap:8px !important;
}
.teamcal-event{
gap:3px !important;
padding:9px 10px !important;
border-left:0 !important;
border-radius:14px !important;
background:#f8fafc !important;
box-shadow:0 6px 14px rgba(15,23,42,.05) !important;
border:1px solid transparent !important;
}
.teamcal-event:hover{
transform:translateY(-1px) !important;
}
.teamcal-event small{
font-size:.7rem !important;
text-transform:uppercase !important;
letter-spacing:.05em !important;
}
.teamcal-event b{
font-size:.82rem !important;
line-height:1.22 !important;
font-weight:800 !important;
}
.teamcal-event em{
font-size:.72rem !important;
}
.teamcal-event.meeting{
background:#eef4ff !important;
border-color:rgba(37,99,235,.14) !important;
}
.teamcal-event.support{
background:#e8fbfb !important;
border-color:rgba(13,139,141,.16) !important;
}
.teamcal-event.maintenance{
background:#fff6df !important;
border-color:rgba(245,158,11,.18) !important;
}
.teamcal-event.customer{
background:#f2ecff !important;
border-color:rgba(124,58,237,.15) !important;
}
.teamcal-event.internal{
background:#f4f7fa !important;
border-color:rgba(100,116,139,.12) !important;
}
.teamcal-event.absence{
background:#fff0f0 !important;
border-color:rgba(220,38,38,.15) !important;
}
.teamcal-event.deadline{
background:#f3f4f6 !important;
border-color:rgba(17,24,39,.12) !important;
}
.teamcal-more{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-height:30px !important;
padding:0 10px !important;
border-radius:999px !important;
background:#f8fafc !important;
border:1px dashed rgba(148,163,184,.24) !important;
color:#64748b !important;
}
.teamcal-list{
padding:24px 26px !important;
}
.teamcal-list h3{
margin:0 0 14px !important;
}
.teamcal-list .table-wrap{
border:1px solid rgba(148,163,184,.14) !important;
border-radius:18px !important;
overflow:hidden !important;
box-shadow:0 8px 20px rgba(15,23,42,.04) !important;
}
.teamcal-list table thead th{
background:#f7fafc !important;
color:#475569 !important;
font-size:.78rem !important;
text-transform:uppercase !important;
letter-spacing:.05em !important;
}
.teamcal-list table tbody tr:hover{
background:#fbfefe !important;
}
@media(max-width:1100px){
.teamcal-month-badge{
min-width:145px !important;
}
}
@media(max-width:780px){
.teamcal-hero,
.teamcal-calendar,
.teamcal-form,
.teamcal-list{
padding:20px 18px !important;
}
.teamcal-nav{
justify-content:flex-start !important;
}
.teamcal-nav-btn{
min-width:0 !important;
}
.teamcal-month-badge{
min-width:135px !important;
min-height:42px !important;
}
.teamcal-day{
min-height:auto !important;
}
}
/* Teamkalender Details + modernerer Look */
.teamcal-detail-card{
padding:26px 28px !important;
background:
radial-gradient(circle at top right, rgba(245,166,35,.12), transparent 24%),
linear-gradient(180deg, #ffffff 0%, #fffdf9 100%) !important;
}
.teamcal-detail-head{
display:flex !important;
align-items:flex-start !important;
justify-content:space-between !important;
gap:18px !important;
margin-bottom:18px !important;
}
.teamcal-detail-head h3{
margin:.45rem 0 .25rem !important;
font-size:1.5rem !important;
}
.teamcal-detail-head-actions{
display:flex !important;
gap:10px !important;
flex-wrap:wrap !important;
}
.teamcal-detail-grid{
display:grid !important;
grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
gap:14px !important;
margin-bottom:16px !important;
}
.teamcal-detail-box{
border:1px solid rgba(148,163,184,.14) !important;
border-radius:18px !important;
padding:16px !important;
background:linear-gradient(180deg, #ffffff 0%, #f9fbfc 100%) !important;
box-shadow:0 10px 22px rgba(15,23,42,.04) !important;
display:grid !important;
gap:4px !important;
}
.teamcal-detail-label{
display:inline-flex !important;
align-items:center !important;
width:max-content !important;
min-height:24px !important;
padding:0 9px !important;
border-radius:999px !important;
background:#eef8f8 !important;
color:#0d6f72 !important;
font-size:.74rem !important;
font-weight:800 !important;
text-transform:uppercase !important;
letter-spacing:.04em !important;
}
.teamcal-detail-box strong{
color:#16314f !important;
font-size:1rem !important;
line-height:1.25 !important;
}
.teamcal-detail-box small{
color:#64748b !important;
font-size:.8rem !important;
}
.teamcal-detail-panels{
display:grid !important;
grid-template-columns:1.3fr .9fr !important;
gap:16px !important;
}
.teamcal-detail-panel{
border:1px solid rgba(148,163,184,.14) !important;
border-radius:18px !important;
padding:18px !important;
background:#fff !important;
}
.teamcal-detail-panel h4{
margin:0 0 10px !important;
color:#16314f !important;
}
.teamcal-detail-panel p{
margin:0 !important;
line-height:1.65 !important;
color:#334155 !important;
}
.teamcal-detail-panel-meta ul{
margin:0 !important;
padding-left:18px !important;
}
.teamcal-detail-panel-meta li{
margin-bottom:10px !important;
color:#334155 !important;
}
.teamcal-form-grid{
grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
}
.teamcal-form-grid .wide{
grid-column:span 5 !important;
}
.teamcal-calendar{
background:
radial-gradient(circle at top left, rgba(13,139,141,.08), transparent 24%),
radial-gradient(circle at bottom right, rgba(245,166,35,.09), transparent 20%),
linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%) !important;
}
.teamcal-weekdays div{
background:linear-gradient(180deg, #f8fbfd 0%, #f2f6fa 100%) !important;
box-shadow:0 4px 10px rgba(15,23,42,.03) !important;
}
.teamcal-day{
min-height:182px !important;
border-radius:22px !important;
box-shadow:0 16px 30px rgba(15,23,42,.05) !important;
}
.teamcal-day-top strong{
width:36px !important;
height:36px !important;
background:linear-gradient(180deg, #ffffff 0%, #eef4f7 100%) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.teamcal-day.today .teamcal-day-top strong{
background:linear-gradient(180deg, #10a5a7 0%, #0d8b8d 100%) !important;
}
.teamcal-events{
gap:9px !important;
}
.teamcal-event{
position:relative !important;
padding:10px 11px !important;
border-radius:16px !important;
overflow:hidden !important;
}
.teamcal-event::before{
content:"";
position:absolute;
inset:0 auto 0 0;
width:4px;
background:rgba(15,23,42,.12);
}
.teamcal-event.meeting::before{ background:#2563eb; }
.teamcal-event.support::before{ background:#0d8b8d; }
.teamcal-event.maintenance::before{ background:#f59e0b; }
.teamcal-event.customer::before{ background:#7c3aed; }
.teamcal-event.internal::before{ background:#64748b; }
.teamcal-event.absence::before{ background:#dc2626; }
.teamcal-event.deadline::before{ background:#111827; }
.teamcal-event b{
padding-left:2px !important;
}
.teamcal-event-location{
display:block !important;
margin-top:2px !important;
color:#475569 !important;
font-size:.72rem !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.teamcal-table-actions{
display:flex !important;
gap:8px !important;
flex-wrap:wrap !important;
}
@media(max-width:1180px){
.teamcal-detail-grid{
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}
.teamcal-detail-panels{
grid-template-columns:1fr !important;
}
.teamcal-form-grid{
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}
.teamcal-form-grid .wide{
grid-column:span 2 !important;
}
}
@media(max-width:780px){
.teamcal-detail-head{
flex-direction:column !important;
}
}
@media(max-width:640px){
.teamcal-detail-grid{
grid-template-columns:1fr !important;
}
.teamcal-form-grid{
grid-template-columns:1fr !important;
}
.teamcal-form-grid .wide{
grid-column:span 1 !important;
}
}
/* =========================================================
TEAMKALENDER PREMIUM UX
Moderner, edler, benutzerfreundlicher
========================================================= */
.teamcal-page{
display:grid !important;
gap:22px !important;
}
.teamcal-page > .card{
margin-bottom:0 !important;
}
/* Premium Hero */
.teamcal-hero{
position:relative !important;
padding:34px 36px !important;
border-radius:30px !important;
background:
radial-gradient(circle at 12% 0%, rgba(13,139,141,.16), transparent 34%),
radial-gradient(circle at 100% 8%, rgba(245,166,35,.14), transparent 30%),
linear-gradient(135deg, #ffffff 0%, #f8fbfd 46%, #edfafa 100%) !important;
border:1px solid rgba(13,139,141,.14) !important;
box-shadow:
0 24px 70px rgba(15,23,42,.08),
0 2px 8px rgba(15,23,42,.04) !important;
overflow:hidden !important;
}
.teamcal-hero::before{
content:"";
position:absolute;
right:-90px;
top:-90px;
width:260px;
height:260px;
border-radius:999px;
background:rgba(255,255,255,.55);
border:1px solid rgba(255,255,255,.65);
}
.teamcal-hero::after{
height:5px !important;
background:linear-gradient(90deg, #0d8b8d 0%, #1bb9bb 42%, #f5a623 100%) !important;
}
.teamcal-hero > div:first-child,
.teamcal-nav{
position:relative !important;
z-index:2 !important;
}
.teamcal-hero h2{
font-size:clamp(2rem, 3.2vw, 3rem) !important;
letter-spacing:-.045em !important;
color:#10233d !important;
}
.teamcal-hero .pill{
background:#0d8b8d !important;
color:#fff !important;
border-color:#0d8b8d !important;
box-shadow:0 8px 18px rgba(13,139,141,.18) !important;
}
.teamcal-hero-stats{
display:flex !important;
flex-wrap:wrap !important;
gap:10px !important;
margin-top:18px !important;
}
.teamcal-hero-stats span{
display:inline-flex !important;
align-items:center !important;
gap:7px !important;
min-height:34px !important;
padding:0 12px !important;
border-radius:999px !important;
background:rgba(255,255,255,.72) !important;
border:1px solid rgba(148,163,184,.16) !important;
color:#64748b !important;
font-size:.86rem !important;
box-shadow:0 8px 18px rgba(15,23,42,.04) !important;
}
.teamcal-hero-stats strong{
color:#16314f !important;
font-weight:900 !important;
}
.teamcal-nav{
padding:10px !important;
border-radius:22px !important;
background:rgba(255,255,255,.68) !important;
border:1px solid rgba(148,163,184,.14) !important;
box-shadow:0 12px 32px rgba(15,23,42,.05) !important;
}
.teamcal-nav-btn{
border-radius:15px !important;
min-height:44px !important;
border-color:rgba(148,163,184,.18) !important;
background:#fff !important;
}
.teamcal-nav-btn:hover{
transform:translateY(-1px) !important;
box-shadow:0 10px 20px rgba(15,23,42,.08) !important;
}
.teamcal-month-badge{
min-height:46px !important;
border-radius:15px !important;
background:linear-gradient(180deg, #10233d 0%, #16314f 100%) !important;
color:#fff !important;
border-color:rgba(16,35,61,.18) !important;
box-shadow:0 14px 26px rgba(16,35,61,.16) !important;
}
/* Premium Detail View */
.teamcal-detail-card{
border-radius:30px !important;
border:1px solid rgba(245,166,35,.18) !important;
box-shadow:0 22px 60px rgba(15,23,42,.075) !important;
background:
radial-gradient(circle at 5% 5%, rgba(245,166,35,.14), transparent 28%),
radial-gradient(circle at 100% 0%, rgba(13,139,141,.10), transparent 30%),
linear-gradient(180deg, #ffffff 0%, #fffdf8 100%) !important;
}
.teamcal-detail-head h3{
font-size:1.85rem !important;
letter-spacing:-.035em !important;
color:#10233d !important;
}
.teamcal-detail-box{
border-radius:22px !important;
padding:18px !important;
background:rgba(255,255,255,.82) !important;
border:1px solid rgba(148,163,184,.14) !important;
box-shadow:0 16px 34px rgba(15,23,42,.055) !important;
}
.teamcal-detail-box:hover{
transform:translateY(-2px) !important;
box-shadow:0 20px 42px rgba(15,23,42,.08) !important;
}
.teamcal-detail-label{
background:#10233d !important;
color:#fff !important;
}
.teamcal-detail-panel{
border-radius:22px !important;
box-shadow:0 14px 34px rgba(15,23,42,.045) !important;
}
/* Form UX */
.teamcal-form{
border-radius:30px !important;
padding:30px 32px !important;
background:
radial-gradient(circle at top right, rgba(13,139,141,.08), transparent 26%),
linear-gradient(180deg, #ffffff 0%, #fbfefe 100%) !important;
border:1px solid rgba(13,139,141,.12) !important;
}
.teamcal-form-title{
padding-bottom:16px !important;
border-bottom:1px solid rgba(148,163,184,.12) !important;
margin-bottom:16px !important;
}
.teamcal-form-title h3{
font-size:1.45rem !important;
letter-spacing:-.025em !important;
color:#10233d !important;
}
.teamcal-form-helper{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:12px !important;
flex-wrap:wrap !important;
margin-bottom:18px !important;
padding:14px 16px !important;
border-radius:18px !important;
background:linear-gradient(135deg, #f0fdfa 0%, #f8fafc 100%) !important;
border:1px solid rgba(13,139,141,.14) !important;
color:#476173 !important;
font-size:.9rem !important;
}
.teamcal-form-grid{
gap:18px !important;
}
.teamcal-form-grid label span{
color:#16314f !important;
}
.teamcal-form-grid input,
.teamcal-form-grid select,
.teamcal-form-grid textarea{
min-height:46px !important;
border-radius:18px !important;
border-color:rgba(148,163,184,.22) !important;
}
/* Calendar board */
.teamcal-calendar{
border-radius:30px !important;
padding:30px !important;
border:1px solid rgba(148,163,184,.14) !important;
box-shadow:0 26px 70px rgba(15,23,42,.075) !important;
}
.teamcal-calendar-head{
padding-bottom:16px !important;
border-bottom:1px solid rgba(148,163,184,.12) !important;
margin-bottom:18px !important;
}
.teamcal-calendar-head h3{
font-size:1.65rem !important;
color:#10233d !important;
letter-spacing:-.03em !important;
}
.teamcal-weekdays{
gap:10px !important;
margin-top:18px !important;
}
.teamcal-weekdays div{
border-radius:16px !important;
background:linear-gradient(180deg, #f8fafc 0%, #eef3f7 100%) !important;
color:#4b6075 !important;
min-height:46px !important;
}
.teamcal-month{
gap:12px !important;
}
.teamcal-day{
min-height:190px !important;
border-radius:24px !important;
padding:13px !important;
background:
linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(250,253,255,.96) 100%) !important;
border:1px solid rgba(148,163,184,.15) !important;
box-shadow:0 14px 32px rgba(15,23,42,.055) !important;
}
.teamcal-day:hover{
transform:translateY(-3px) !important;
box-shadow:0 22px 44px rgba(15,23,42,.10) !important;
border-color:rgba(13,139,141,.26) !important;
}
.teamcal-event{
padding:10px 12px 10px 14px !important;
border-radius:17px !important;
box-shadow:0 10px 22px rgba(15,23,42,.055) !important;
transition:transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
.teamcal-event:hover{
transform:translateY(-2px) scale(1.01) !important;
box-shadow:0 16px 30px rgba(15,23,42,.12) !important;
filter:saturate(1.04) !important;
}
.teamcal-event b{
font-size:.86rem !important;
color:#10233d !important;
}
.teamcal-table-actions .btn{
min-height:36px !important;
border-radius:12px !important;
}
/* Better responsiveness */
@media(max-width:1180px){
.teamcal-detail-grid{
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}
.teamcal-hero{
flex-direction:column !important;
align-items:flex-start !important;
}
.teamcal-nav{
width:100% !important;
justify-content:flex-start !important;
}
}
@media(max-width:780px){
.teamcal-hero,
.teamcal-form,
.teamcal-calendar,
.teamcal-detail-card,
.teamcal-list{
border-radius:24px !important;
padding:22px 18px !important;
}
.teamcal-month-badge{
order:-1 !important;
width:100% !important;
}
.teamcal-detail-grid{
grid-template-columns:1fr !important;
}
.teamcal-day{
min-height:auto !important;
}
}
/* =========================================================
GLOBAL MOBILE NAV + SEARCH REPAIR
Stellt mobile Navigation, Suchleiste und Bedienbarkeit wieder her
========================================================= */
@media (max-width: 860px){
html,
body{
max-width:100% !important;
overflow-x:hidden !important;
}
.portal-shell{
display:block !important;
width:100% !important;
max-width:100% !important;
min-height:100vh !important;
}
.main{
display:block !important;
width:100% !important;
max-width:100% !important;
margin:0 !important;
padding:14px !important;
overflow:visible !important;
}
.topbar.clean-topbar,
.topbar{
display:grid !important;
grid-template-columns:auto 1fr !important;
gap:12px !important;
align-items:center !important;
margin:0 0 14px !important;
padding:0 !important;
width:100% !important;
}
.sidebar-toggle-btn,
button.sidebar-toggle-btn,
.topbar .sidebar-toggle-btn,
.topbar.clean-topbar .sidebar-toggle-btn,
.clean-topbar .sidebar-toggle-btn{
display:inline-flex !important;
visibility:visible !important;
opacity:1 !important;
position:relative !important;
width:auto !important;
height:44px !important;
min-width:96px !important;
min-height:44px !important;
margin:0 !important;
padding:0 14px !important;
border:0 !important;
border-radius:999px !important;
background:#0d8b8d !important;
color:#fff !important;
font-weight:900 !important;
box-shadow:0 10px 24px rgba(13,139,141,.22) !important;
z-index:1201 !important;
cursor:pointer !important;
}
.topbar-title{
display:block !important;
min-width:0 !important;
}
.topbar-title h1{
display:block !important;
font-size:1.05rem !important;
line-height:1.15 !important;
margin:0 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.topbar-title p{
display:none !important;
}
.topbar-actions,
.topbar-actions-final,
.topbar-actions-search{
grid-column:1 / -1 !important;
display:grid !important;
grid-template-columns:1fr !important;
gap:10px !important;
width:100% !important;
min-width:0 !important;
}
.global-search-form,
.global-search-form-final{
display:grid !important;
grid-template-columns:1fr auto !important;
gap:8px !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
}
.global-search-form input,
.global-search-form-final input{
display:block !important;
width:100% !important;
min-width:0 !important;
height:46px !important;
min-height:46px !important;
border-radius:16px !important;
font-size:16px !important;
padding:0 14px !important;
box-sizing:border-box !important;
}
.global-search-form .search-submit-btn,
.global-search-form-final .search-submit-btn{
display:inline-flex !important;
height:46px !important;
min-height:46px !important;
width:auto !important;
min-width:92px !important;
padding:0 14px !important;
border-radius:16px !important;
justify-content:center !important;
white-space:nowrap !important;
}
.topbar-user-box,
.notification-btn{
display:none !important;
}
.sidebar{
display:flex !important;
visibility:visible !important;
opacity:1 !important;
position:fixed !important;
z-index:1200 !important;
top:0 !important;
left:0 !important;
bottom:0 !important;
width:min(88vw, 340px) !important;
max-width:min(88vw, 340px) !important;
height:100vh !important;
max-height:100vh !important;
transform:translateX(-105%) !important;
transition:transform .22s ease !important;
overflow-y:auto !important;
overflow-x:hidden !important;
padding:20px 18px !important;
border-radius:0 24px 24px 0 !important;
box-shadow:24px 0 60px rgba(15,23,42,.28) !important;
}
body.sidebar-open .sidebar{
transform:translateX(0) !important;
}
.sidebar-backdrop{
display:none !important;
position:fixed !important;
inset:0 !important;
background:rgba(15,23,42,.45) !important;
z-index:1190 !important;
backdrop-filter:blur(2px) !important;
}
body.sidebar-open .sidebar-backdrop{
display:block !important;
}
.sidebar-close-btn{
display:inline-flex !important;
position:absolute !important;
top:12px !important;
right:12px !important;
width:38px !important;
height:38px !important;
min-width:38px !important;
min-height:38px !important;
border-radius:999px !important;
border:1px solid rgba(255,255,255,.18) !important;
background:rgba(255,255,255,.12) !important;
color:#fff !important;
align-items:center !important;
justify-content:center !important;
font-size:1.35rem !important;
line-height:1 !important;
z-index:2 !important;
}
.sidebar .brand{
padding-right:44px !important;
}
.sidebar .nav,
.nav{
display:flex !important;
flex-direction:column !important;
gap:8px !important;
width:100% !important;
}
.sidebar .nav a,
.sidebar .nav .nav-link{
display:flex !important;
width:100% !important;
min-height:42px !important;
align-items:center !important;
box-sizing:border-box !important;
}
.nav-section,
.nav-group-label{
display:flex !important;
width:100% !important;
}
.nav-mobile-group-content{
display:block !important;
}
.nav-mobile-group-content.is-open{
display:block !important;
}
body.sidebar-open{
overflow:hidden !important;
}
.grid,
.form-grid{
grid-template-columns:1fr !important;
}
.card,
.inner-card{
max-width:100% !important;
}
}
@media (max-width: 520px){
.global-search-form,
.global-search-form-final{
grid-template-columns:1fr !important;
}
.global-search-form .search-submit-btn,
.global-search-form-final .search-submit-btn{
width:100% !important;
}
.main{
padding:12px !important;
}
}
/* Suche visuell verbessern */
.search-results{
display:grid !important;
grid-template-columns:repeat(2, minmax(0,1fr)) !important;
gap:12px !important;
}
.search-result{
border-radius:18px !important;
border:1px solid rgba(148,163,184,.18) !important;
background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%) !important;
box-shadow:0 10px 24px rgba(15,23,42,.045) !important;
}
.search-result:hover{
transform:translateY(-2px) !important;
box-shadow:0 16px 32px rgba(15,23,42,.08) !important;
border-color:rgba(13,139,141,.22) !important;
}
@media (max-width: 760px){
.search-results{
grid-template-columns:1fr !important;
}
}
/* =========================================================
MOBILE HARD FIX: Menü, Logo-Abstand, Benachrichtigung
Muss ganz am Ende stehen und überschreibt alte Mobile-Regeln
========================================================= */
@media (max-width: 900px){
body{
overflow-x:hidden !important;
}
.portal-shell{
display:block !important;
width:100% !important;
max-width:100% !important;
}
.main{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
margin:0 !important;
padding:8px 12px 14px !important;
overflow:visible !important;
}
/* Abstand über dem Logo entfernen */
.main-brand-header{
padding:0 8px 4px !important;
margin:0 0 6px !important;
min-height:0 !important;
gap:2px !important;
}
.main-brand-logo{
margin:0 !important;
padding:0 !important;
height:auto !important;
min-height:0 !important;
}
.main-brand-logo img{
display:block !important;
max-height:54px !important;
width:auto !important;
margin:0 auto !important;
}
.main-brand-greeting{
margin:0 !important;
padding:0 !important;
line-height:1.15 !important;
}
.main-brand-greeting span{
font-size:.72rem !important;
}
.main-brand-greeting strong{
font-size:.86rem !important;
}
/* Topbar sauber als App-Leiste */
.topbar.clean-topbar,
.topbar{
position:relative !important;
display:grid !important;
grid-template-columns:auto 1fr auto !important;
align-items:center !important;
gap:10px !important;
width:100% !important;
margin:0 0 12px !important;
padding:0 !important;
overflow:visible !important;
}
.sidebar-toggle-btn,
button.sidebar-toggle-btn,
.topbar .sidebar-toggle-btn,
.topbar.clean-topbar .sidebar-toggle-btn,
.clean-topbar .sidebar-toggle-btn,
.js-sidebar-open{
display:inline-flex !important;
visibility:visible !important;
opacity:1 !important;
pointer-events:auto !important;
position:relative !important;
inset:auto !important;
transform:none !important;
width:auto !important;
height:44px !important;
min-width:92px !important;
min-height:44px !important;
margin:0 !important;
padding:0 14px !important;
border:0 !important;
border-radius:999px !important;
background:#0d8b8d !important;
color:#fff !important;
font-weight:900 !important;
font-size:.92rem !important;
line-height:1 !important;
box-shadow:0 10px 24px rgba(13,139,141,.24) !important;
z-index:1305 !important;
cursor:pointer !important;
-webkit-tap-highlight-color:transparent !important;
}
.topbar-title{
display:block !important;
min-width:0 !important;
overflow:hidden !important;
}
.topbar-title h1{
display:block !important;
margin:0 !important;
font-size:1rem !important;
line-height:1.15 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.topbar-title p{
display:none !important;
}
/* Header-Aktionen entkoppeln: keine Elemente mehr hinter der Glocke */
.topbar-actions,
.topbar-actions-final,
.topbar-actions-search{
grid-column:1 / -1 !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) auto !important;
align-items:center !important;
gap:10px !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
position:relative !important;
z-index:1 !important;
overflow:visible !important;
}
.topbar-user-box{
display:none !important;
visibility:hidden !important;
width:0 !important;
height:0 !important;
overflow:hidden !important;
}
.topbar-action-buttons{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap:8px !important;
width:auto !important;
min-width:max-content !important;
position:relative !important;
z-index:2 !important;
}
.topbar-action-buttons a:not(.notification-btn){
display:none !important;
}
.notification-btn{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
position:relative !important;
width:46px !important;
height:46px !important;
min-width:46px !important;
min-height:46px !important;
padding:0 !important;
border-radius:16px !important;
background:#fff !important;
color:#16314f !important;
border:1px solid rgba(148,163,184,.22) !important;
box-shadow:0 10px 22px rgba(15,23,42,.08) !important;
z-index:5 !important;
}
.notification-btn span{
position:absolute !important;
top:-7px !important;
right:-7px !important;
z-index:6 !important;
}
.global-search-form,
.global-search-form-final{
display:grid !important;
grid-template-columns:minmax(0,1fr) auto !important;
gap:8px !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
}
.global-search-form input,
.global-search-form-final input{
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height:46px !important;
min-height:46px !important;
border-radius:16px !important;
font-size:16px !important;
box-sizing:border-box !important;
}
.global-search-form .search-submit-btn,
.global-search-form-final .search-submit-btn{
height:46px !important;
min-height:46px !important;
min-width:78px !important;
width:auto !important;
padding:0 12px !important;
border-radius:16px !important;
}
/* Offcanvas Navigation: garantiert bedienbar */
.sidebar{
display:flex !important;
flex-direction:column !important;
visibility:visible !important;
opacity:1 !important;
position:fixed !important;
top:0 !important;
left:0 !important;
bottom:0 !important;
right:auto !important;
z-index:1300 !important;
width:min(88vw,340px) !important;
max-width:min(88vw,340px) !important;
height:100dvh !important;
max-height:100dvh !important;
padding:16px 16px 18px !important;
margin:0 !important;
border-radius:0 24px 24px 0 !important;
transform:translate3d(-110%,0,0) !important;
transition:transform .22s ease !important;
overflow-y:auto !important;
overflow-x:hidden !important;
box-shadow:24px 0 60px rgba(15,23,42,.32) !important;
}
body.sidebar-open .sidebar{
transform:translate3d(0,0,0) !important;
}
.sidebar-backdrop,
.js-sidebar-close.sidebar-backdrop{
display:block !important;
visibility:hidden !important;
opacity:0 !important;
pointer-events:none !important;
position:fixed !important;
inset:0 !important;
z-index:1290 !important;
background:rgba(15,23,42,.46) !important;
backdrop-filter:blur(2px) !important;
transition:opacity .2s ease, visibility .2s ease !important;
}
body.sidebar-open .sidebar-backdrop,
body.sidebar-open .js-sidebar-close.sidebar-backdrop{
visibility:visible !important;
opacity:1 !important;
pointer-events:auto !important;
}
.sidebar-close-btn,
button.sidebar-close-btn,
.js-sidebar-close.sidebar-close-btn{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
position:absolute !important;
top:10px !important;
right:10px !important;
width:40px !important;
height:40px !important;
min-width:40px !important;
min-height:40px !important;
border:1px solid rgba(255,255,255,.20) !important;
border-radius:999px !important;
background:rgba(255,255,255,.13) !important;
color:#fff !important;
font-size:1.4rem !important;
line-height:1 !important;
z-index:1302 !important;
cursor:pointer !important;
}
.sidebar .brand{
margin-top:0 !important;
padding-top:8px !important;
padding-right:44px !important;
}
.sidebar .nav{
display:flex !important;
flex-direction:column !important;
gap:8px !important;
width:100% !important;
margin-top:12px !important;
}
.sidebar .nav a,
.sidebar .nav .nav-link{
display:flex !important;
align-items:center !important;
width:100% !important;
min-height:42px !important;
box-sizing:border-box !important;
}
}
@media (max-width:520px){
.topbar-actions,
.topbar-actions-final,
.topbar-actions-search{
grid-template-columns:1fr !important;
}
.topbar-action-buttons{
position:absolute !important;
top:-56px !important;
right:0 !important;
}
.global-search-form,
.global-search-form-final{
grid-template-columns:1fr auto !important;
padding-right:0 !important;
}
.global-search-form .search-submit-btn,
.global-search-form-final .search-submit-btn{
min-width:74px !important;
}
}
/* Mobile Inline Critical Fix ist zusätzlich direkt in includes/layout.php eingebettet, damit Browser-Cache/alte CSS-Regeln nicht mehr stören. */
/* Root cause cleanfix: mobile structure is now controlled by includes/layout.php #mhMobileTop/#mhMobileDrawer and body.mobile-menu-open. */
/* Stability Design Upgrade: Finale mobile Struktur liegt in includes/layout.php, um alte CSS-Konflikte und Cache-Probleme zu umgehen. */
/* ==========================================================
Teamkalender Corporate-Date-Fix
Datum/Monatsanzeige nicht mehr dunkelblau, sondern lesbar
im Moinhosting Corporate Design.
========================================================== */
.teamcal-month-badge,
.team-calendar-month-nav strong,
.teamcal-nav strong,
.team-calendar-current-month,
.teamcal-current-month{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-height:46px !important;
min-width:168px !important;
padding:0 18px !important;
border-radius:16px !important;
background:#ffffff !important;
color:#12324d !important;
border:1px solid rgba(13,139,141,.22) !important;
box-shadow:0 10px 24px rgba(15,23,42,.06) !important;
font-weight:900 !important;
letter-spacing:.01em !important;
text-align:center !important;
}
.teamcal-nav .btn,
.teamcal-nav-btn,
.team-calendar-month-nav .btn,
.team-calendar-month-nav a.btn{
background:#0d8b8d !important;
border-color:#0d8b8d !important;
color:#ffffff !important;
box-shadow:0 10px 22px rgba(13,139,141,.18) !important;
}
.teamcal-nav .btn:hover,
.teamcal-nav-btn:hover,
.team-calendar-month-nav .btn:hover,
.team-calendar-month-nav a.btn:hover{
background:#087678 !important;
border-color:#087678 !important;
color:#ffffff !important;
transform:translateY(-1px) !important;
}
.teamcal-nav .btn.secondary,
.teamcal-nav-btn.secondary,
.team-calendar-month-nav .btn.secondary,
.team-calendar-month-nav a.btn.secondary{
background:#ffffff !important;
border-color:rgba(13,139,141,.26) !important;
color:#0d6f71 !important;
box-shadow:0 8px 18px rgba(15,23,42,.05) !important;
}
.teamcal-nav .btn.secondary:hover,
.teamcal-nav-btn.secondary:hover,
.team-calendar-month-nav .btn.secondary:hover,
.team-calendar-month-nav a.btn.secondary:hover{
background:#eefafa !important;
border-color:rgba(13,139,141,.42) !important;
color:#075f61 !important;
}
/* Tageszahlen im Kalender gut lesbar halten */
.teamcal-day-number,
.team-calendar-day-number,
.team-calendar-day > strong,
.team-calendar-day .day-number,
.teamcal-day > strong,
.teamcal-day .day-number{
color:#12324d !important;
font-weight:900 !important;
}
.team-calendar-day.is-today,
.teamcal-day.is-today{
border-color:#0d8b8d !important;
box-shadow:inset 0 0 0 2px rgba(13,139,141,.20) !important;
}
.team-calendar-day.is-today .teamcal-day-number,
.teamcal-day.is-today .teamcal-day-number,
.team-calendar-day.is-today strong,
.teamcal-day.is-today strong{
color:#0d6f71 !important;
}
@media(max-width:720px){
.teamcal-nav,
.team-calendar-month-nav{
justify-content:flex-start !important;
gap:8px !important;
}
.teamcal-month-badge,
.team-calendar-month-nav strong,
.teamcal-nav strong,
.team-calendar-current-month,
.teamcal-current-month{
width:100% !important;
min-width:0 !important;
order:-1 !important;
}
.teamcal-nav .btn,
.teamcal-nav-btn,
.team-calendar-month-nav .btn,
.team-calendar-month-nav a.btn{
flex:1 1 0 !important;
min-width:0 !important;
justify-content:center !important;
}
}
/* ==========================================================
Teamkalender Aufräum-Fix: Stats + Button-Abstände
========================================================== */
.teamcal-hero{
align-items:flex-start !important;
gap:28px !important;
padding:28px !important;
}
.teamcal-hero > div:first-child{
min-width:0 !important;
flex:1 1 auto !important;
}
.teamcal-hero-stats{
display:flex !important;
align-items:stretch !important;
justify-content:flex-start !important;
flex-wrap:wrap !important;
gap:12px !important;
margin:18px 0 0 !important;
padding:0 !important;
}
.teamcal-hero-stats span{
display:grid !important;
grid-template-rows:auto auto !important;
align-content:center !important;
justify-items:start !important;
gap:3px !important;
min-width:112px !important;
min-height:68px !important;
padding:12px 15px !important;
border-radius:17px !important;
background:linear-gradient(180deg,#ffffff 0%,#f7fbfb 100%) !important;
border:1px solid rgba(13,139,141,.16) !important;
box-shadow:0 10px 24px rgba(15,23,42,.05) !important;
color:#587087 !important;
font-size:.82rem !important;
font-weight:800 !important;
line-height:1.12 !important;
text-transform:none !important;
}
.teamcal-hero-stats span strong{
display:block !important;
color:#0d8b8d !important;
font-size:1.35rem !important;
line-height:1 !important;
font-weight:950 !important;
letter-spacing:-.02em !important;
}
.teamcal-nav{
display:flex !important;
align-items:stretch !important;
justify-content:flex-end !important;
gap:12px !important;
row-gap:14px !important;
flex-wrap:wrap !important;
margin:6px 0 16px !important;
padding:0 0 8px !important;
min-width:min(100%, 390px) !important;
}
.teamcal-nav-btn,
.teamcal-nav .btn{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-width:118px !important;
min-height:46px !important;
margin:0 !important;
padding:0 16px !important;
border-radius:15px !important;
font-weight:900 !important;
white-space:nowrap !important;
}
.teamcal-month-badge{
min-height:46px !important;
margin:0 !important;
align-self:stretch !important;
}
.teamcal-page > .card.teamcal-hero{
margin-bottom:22px !important;
}
.teamcal-calendar-head,
.teamcal-form-title{
gap:18px !important;
margin-bottom:16px !important;
}
.teamcal-actions{
gap:12px !important;
row-gap:12px !important;
margin-top:16px !important;
padding-top:4px !important;
}
.teamcal-actions .btn,
.teamcal-actions button,
.teamcal-actions a{
margin-bottom:4px !important;
}
@media(max-width:920px){
.teamcal-hero{
display:flex !important;
flex-direction:column !important;
gap:22px !important;
padding:22px !important;
}
.teamcal-nav{
width:100% !important;
min-width:0 !important;
justify-content:flex-start !important;
margin:0 0 14px !important;
padding-bottom:10px !important;
}
.teamcal-month-badge{
width:100% !important;
min-width:0 !important;
order:-1 !important;
}
}
@media(max-width:720px){
.teamcal-hero{
padding:18px !important;
}
.teamcal-hero h2{
font-size:1.55rem !important;
}
.teamcal-hero-stats{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:10px !important;
width:100% !important;
margin-top:16px !important;
}
.teamcal-hero-stats span{
min-width:0 !important;
width:100% !important;
min-height:64px !important;
padding:11px 10px !important;
justify-items:center !important;
text-align:center !important;
border-radius:15px !important;
}
.teamcal-hero-stats span strong{
font-size:1.22rem !important;
}
.teamcal-nav{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:10px !important;
row-gap:12px !important;
padding-bottom:14px !important;
margin-bottom:16px !important;
}
.teamcal-month-badge{
grid-column:1 / -1 !important;
order:-1 !important;
width:100% !important;
min-width:0 !important;
min-height:46px !important;
}
.teamcal-nav-btn,
.teamcal-nav .btn{
min-width:0 !important;
width:100% !important;
min-height:44px !important;
padding:0 8px !important;
font-size:.88rem !important;
}
.teamcal-actions{
display:grid !important;
grid-template-columns:1fr !important;
gap:10px !important;
margin-top:18px !important;
}
.teamcal-actions .btn,
.teamcal-actions button,
.teamcal-actions a{
width:100% !important;
justify-content:center !important;
margin-bottom:0 !important;
}
}
/* ==========================================================
Elegante Button-Typografie
Dünnere, ruhigere Schrift für Teamkalender und Portal-Buttons
========================================================== */
/* Allgemeine Buttons etwas edler und weniger wuchtig */
.btn,
button.btn,
a.btn,
input[type="submit"].btn,
input[type="button"].btn,
button,
input[type="submit"],
input[type="button"]{
font-family:'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-weight:500 !important;
letter-spacing:.005em !important;
}
/* Primäre Buttons bleiben klar, aber nicht mehr extrem fett */
.btn.primary,
button.primary,
input[type="submit"].primary,
.search-submit-btn{
font-weight:600 !important;
letter-spacing:.01em !important;
}
/* Kleine/sekundäre Buttons dezenter */
.btn.small,
.btn.secondary,
a.btn.secondary,
button.secondary{
font-weight:500 !important;
}
/* Teamkalender: besonders feine, hochwertige Button-Anmutung */
.teamcal-nav-btn,
.teamcal-nav .btn,
.team-calendar-month-nav .btn,
.team-calendar-month-nav a.btn{
font-weight:500 !important;
letter-spacing:.015em !important;
font-size:.93rem !important;
text-transform:none !important;
}
/* Der aktuelle Monat soll edel wirken, nicht wie ein schwerer Button */
.teamcal-month-badge,
.team-calendar-month-nav strong,
.teamcal-nav strong,
.team-calendar-current-month,
.teamcal-current-month{
font-weight:500 !important;
letter-spacing:.012em !important;
font-size:.98rem !important;
}
/* Statistik-Kacheln im Teamkalender feiner */
.teamcal-hero-stats span{
font-weight:500 !important;
letter-spacing:.005em !important;
}
.teamcal-hero-stats span strong{
font-weight:600 !important;
letter-spacing:-.015em !important;
}
/* Teamkalender Formular-/Aktionsbuttons */
.teamcal-actions .btn,
.teamcal-actions button,
.teamcal-actions a{
font-weight:500 !important;
letter-spacing:.01em !important;
}
/* Navigation im mobilen Drawer bleibt gut lesbar, aber weniger schwer */
@media(max-width:900px){
body #mhMobileDrawer .nav a,
body .sidebar .nav a,
body .sidebar .nav .nav-link{
font-weight:500 !important;
letter-spacing:.005em !important;
}
body #mhMobileOpen,
body .mh-mobile-search-clean button{
font-weight:600 !important;
}
}
/* ==========================================================
Dashboard/Admin/2FA Feinschliff
========================================================== */
.ux-dashboard .stats{
gap:14px !important;
}
.ux-dashboard .stat{
border:1px solid rgba(13,139,141,.12) !important;
box-shadow:0 10px 24px rgba(15,23,42,.045) !important;
}
.ux-dashboard .stat strong{
color:#0d8b8d !important;
font-weight:600 !important;
}
.portal-alert-grid{
gap:14px !important;
}
.portal-alert{
border-radius:17px !important;
transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}
.portal-alert:hover{
transform:translateY(-1px) !important;
box-shadow:0 12px 28px rgba(15,23,42,.08) !important;
}
.stack-links,
.help-choice-list{
gap:10px !important;
}
.refined-form{
gap:14px !important;
}
.refined-form .field label{
font-weight:500 !important;
letter-spacing:.01em !important;
}
.refined-actions,
.actions-row,
.form-actions,
.button-row{
gap:10px !important;
row-gap:10px !important;
}
.security-page{
display:block;
}
.security-hero{
display:flex !important;
align-items:flex-start !important;
justify-content:space-between !important;
gap:24px !important;
margin-bottom:18px !important;
padding:26px 28px !important;
}
.security-hero h2{
margin:.35rem 0 .35rem !important;
}
.security-status-grid{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:12px !important;
min-width:min(100%,520px) !important;
}
.security-status-item{
display:grid !important;
gap:4px !important;
padding:13px 14px !important;
border-radius:17px !important;
border:1px solid rgba(13,139,141,.13) !important;
background:#fff !important;
box-shadow:0 10px 22px rgba(15,23,42,.045) !important;
}
.security-status-item span{
color:#64748b !important;
font-size:.82rem !important;
font-weight:500 !important;
}
.security-status-item strong{
color:#16314f !important;
font-weight:600 !important;
}
.security-status-item.is-ok strong{
color:#0d8b8d !important;
}
.security-status-item.is-warn strong{
color:#b7791f !important;
}
.security-card{
overflow:hidden !important;
}
.twofactor-card .section-head{
margin-bottom:14px !important;
}
.twofactor-enabled-box,
.twofactor-secret-box,
.twofactor-step{
border-radius:16px !important;
border:1px solid rgba(13,139,141,.14) !important;
background:#f7fbfb !important;
}
.twofactor-enabled-box{
display:grid !important;
gap:4px !important;
padding:14px 16px !important;
margin-bottom:14px !important;
}
.twofactor-enabled-box strong{
color:#0d8b8d !important;
font-weight:600 !important;
}
.twofactor-enabled-box span{
color:#64748b !important;
}
.twofactor-setup{
display:grid !important;
gap:11px !important;
margin:12px 0 14px !important;
}
.twofactor-step{
display:flex !important;
align-items:flex-start !important;
gap:10px !important;
padding:12px 14px !important;
}
.twofactor-step b{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:24px !important;
min-width:24px !important;
height:24px !important;
border-radius:999px !important;
background:#0d8b8d !important;
color:#fff !important;
font-size:.78rem !important;
font-weight:600 !important;
}
.twofactor-step span{
color:#475569 !important;
line-height:1.45 !important;
}
.twofactor-secret-box{
display:grid !important;
gap:5px !important;
padding:13px 14px !important;
}
.twofactor-secret-box span{
color:#64748b !important;
font-size:.82rem !important;
font-weight:500 !important;
}
.twofactor-secret-box strong{
display:block !important;
color:#16314f !important;
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
font-size:1rem !important;
letter-spacing:.06em !important;
word-break:break-all !important;
}
.twofactor-mobile-link{
justify-content:center !important;
color:#0d6f71 !important;
border-color:rgba(13,139,141,.24) !important;
background:#fff !important;
}
.twofactor-url-details{
color:#64748b !important;
font-size:.88rem !important;
}
.twofactor-url-details summary{
cursor:pointer !important;
font-weight:500 !important;
}
.twofactor-url-details code{
display:block !important;
margin-top:8px !important;
padding:10px !important;
border-radius:12px !important;
background:#f8fafc !important;
color:#334155 !important;
white-space:normal !important;
word-break:break-all !important;
}
.twofactor-login-card{
width:min(100%,520px) !important;
}
.twofactor-form input[name="code"],
.twofactor-card input[name="code"]{
text-align:center !important;
letter-spacing:.28em !important;
font-size:1.25rem !important;
font-weight:500 !important;
}
.security-log-table td,
.security-log-table th{
vertical-align:top !important;
}
@media(max-width:900px){
.ux-dashboard .stats{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
.ux-dashboard .grid > .card,
.security-grid > .card{
grid-column:span 12 !important;
}
.security-hero{
display:grid !important;
gap:18px !important;
padding:20px !important;
}
.security-status-grid{
grid-template-columns:1fr !important;
min-width:0 !important;
}
.portal-alert-grid{
grid-template-columns:1fr !important;
}
.actions-row,
.refined-actions,
.form-actions,
.button-row{
display:grid !important;
grid-template-columns:1fr !important;
}
.actions-row .btn,
.refined-actions .btn,
.form-actions .btn,
.button-row .btn,
.actions-row button,
.refined-actions button{
width:100% !important;
justify-content:center !important;
}
.twofactor-mobile-link{
display:flex !important;
}
.twofactor-login-card{
margin-top:0 !important;
}
}
@media(max-width:520px){
.ux-dashboard .stats{
grid-template-columns:1fr !important;
}
.security-hero{
padding:18px !important;
}
.twofactor-form input[name="code"],
.twofactor-card input[name="code"]{
font-size:1.18rem !important;
}
}
/* ==========================================================
Remaining Quality Polish: Mobile-Hauptseiten + FAQ + Forum
========================================================== */
/* Einheitlicher Seitenfluss */
.grid,
.ux-dashboard,
.faq-pro-page,
.forum-notifications-page,
.public-forum-profile-page,
.teamcal-page,
.security-page{
min-width:0;
}
.card{
box-sizing:border-box;
}
.section-head{
gap:16px !important;
}
/* FAQ – ruhiger, gleichmäßiger, besser mobil */
.faq-pro-page .faq-pro-hero,
.faq-pro-page .premium-hero{
gap:22px !important;
align-items:flex-start !important;
}
.faq-search,
.faq-search-pro{
display:flex !important;
align-items:center !important;
gap:10px !important;
flex-wrap:wrap !important;
min-width:min(100%,420px) !important;
}
.faq-search input,
.faq-search-pro input{
height:44px !important;
border-radius:15px !important;
border:1px solid rgba(13,139,141,.18) !important;
background:#fff !important;
padding:0 14px !important;
}
.faq-search button,
.faq-search-pro button{
height:44px !important;
border-radius:15px !important;
font-weight:500 !important;
}
.faq-category-list,
.faq-categories,
.faq-filter-list{
display:flex !important;
flex-wrap:wrap !important;
gap:10px !important;
}
.faq-category-list a,
.faq-categories a,
.faq-filter-list a{
border-radius:999px !important;
font-weight:500 !important;
border-color:rgba(13,139,141,.18) !important;
}
.faq-item,
.faq-pro-item,
.faq-card,
.faq-entry{
border-radius:18px !important;
border:1px solid rgba(13,139,141,.12) !important;
box-shadow:0 10px 24px rgba(15,23,42,.045) !important;
overflow:hidden !important;
}
.faq-item h3,
.faq-pro-item h3,
.faq-card h3,
.faq-entry h3{
line-height:1.25 !important;
color:#16314f !important;
}
/* Community/Forum – sauberere Karten und Buttons */
.community-hero,
.community-admin-hero,
.public-forum-profile-hero,
.forum-notifications-page .premium-hero{
gap:22px !important;
align-items:flex-start !important;
}
.forum-board-row,
.forum-category-row,
.forum-topic-row,
.forum-post,
.forum-notification-item,
.community-topic,
.community-card{
border-radius:18px !important;
border:1px solid rgba(13,139,141,.11) !important;
box-shadow:0 10px 24px rgba(15,23,42,.04) !important;
}
.forum-notification-list{
display:grid !important;
gap:12px !important;
}
.forum-notification-item{
display:flex !important;
align-items:flex-start !important;
justify-content:space-between !important;
gap:14px !important;
padding:15px 16px !important;
text-decoration:none !important;
color:inherit !important;
background:#fff !important;
}
.forum-notification-item.unread{
border-color:rgba(13,139,141,.28) !important;
background:linear-gradient(180deg,#ffffff 0%,#f3fbfb 100%) !important;
}
.forum-notification-item strong{
color:#16314f !important;
font-weight:600 !important;
}
.forum-notification-item span{
display:block !important;
color:#64748b !important;
margin-top:4px !important;
line-height:1.45 !important;
}
.forum-notification-item small{
color:#64748b !important;
white-space:nowrap !important;
}
/* Profil/Forum-Meta sauberer */
.public-forum-profile-hero{
display:flex !important;
flex-wrap:wrap !important;
}
.public-profile-meta{
display:flex !important;
flex-wrap:wrap !important;
gap:9px !important;
margin-top:10px !important;
}
.public-profile-meta span,
.public-profile-meta a{
display:inline-flex !important;
align-items:center !important;
min-height:30px !important;
padding:0 10px !important;
border-radius:999px !important;
background:#f8fafc !important;
border:1px solid rgba(13,139,141,.12) !important;
color:#475569 !important;
text-decoration:none !important;
font-weight:500 !important;
}
/* Formulare allgemein final glätten */
.form-grid{
gap:14px !important;
}
.field{
min-width:0 !important;
}
.field label{
font-weight:500 !important;
letter-spacing:.005em !important;
}
.field input,
.field select,
.field textarea,
input,
select,
textarea{
max-width:100% !important;
box-sizing:border-box !important;
}
textarea{
line-height:1.45 !important;
}
.actions-row,
.form-actions,
.button-row,
.page-actions,
.top-actions,
.toolbar{
gap:10px !important;
row-gap:10px !important;
}
/* Tabellen und KV-Zeilen */
.table-wrap{
width:100% !important;
overflow-x:auto !important;
-webkit-overflow-scrolling:touch !important;
}
.kv{
gap:12px !important;
}
.kv span{
min-width:0 !important;
}
/* Mobile-Hauptseiten final */
@media(max-width:900px){
.main{
padding-left:10px !important;
padding-right:10px !important;
}
.grid{
display:grid !important;
grid-template-columns:1fr !important;
gap:14px !important;
}
.grid > *,
.grid > .card,
.ux-dashboard .grid > .card,
.faq-pro-page > .card,
.forum-notifications-page > .card,
.public-forum-profile-page > .card{
grid-column:1 / -1 !important;
width:100% !important;
min-width:0 !important;
}
.card{
padding:18px !important;
border-radius:18px !important;
}
.ux-hero,
.premium-hero,
.faq-pro-hero,
.community-hero,
.community-admin-hero,
.public-forum-profile-hero,
.security-hero{
display:grid !important;
grid-template-columns:1fr !important;
gap:16px !important;
}
.ux-hero h2,
.premium-hero h2,
.faq-pro-hero h2,
.community-hero h2,
.public-forum-profile-hero h2{
font-size:1.35rem !important;
line-height:1.18 !important;
}
.ux-hero p,
.premium-hero p,
.faq-pro-hero p,
.community-hero p,
.public-forum-profile-hero p{
font-size:.95rem !important;
line-height:1.5 !important;
}
.stats,
.task-list,
.portal-alert-grid,
.onboarding-steps{
grid-template-columns:1fr !important;
}
.stat,
.task-item,
.portal-alert{
min-width:0 !important;
}
.actions-row,
.form-actions,
.button-row,
.page-actions,
.top-actions,
.toolbar{
display:grid !important;
grid-template-columns:1fr !important;
width:100% !important;
}
.actions-row .btn,
.actions-row button,
.form-actions .btn,
.form-actions button,
.button-row .btn,
.button-row button,
.page-actions .btn,
.top-actions .btn,
.toolbar .btn{
width:100% !important;
justify-content:center !important;
margin:0 !important;
}
.form-grid{
display:grid !important;
grid-template-columns:1fr !important;
}
.form-grid .field,
.form-grid .field.full,
.form-grid .wide{
grid-column:1 / -1 !important;
}
.faq-search,
.faq-search-pro{
display:grid !important;
grid-template-columns:1fr !important;
width:100% !important;
min-width:0 !important;
}
.faq-search input,
.faq-search-pro input,
.faq-search button,
.faq-search-pro button{
width:100% !important;
}
.forum-notification-item{
display:grid !important;
grid-template-columns:1fr !important;
}
.forum-notification-item small{
white-space:normal !important;
}
.public-forum-profile-hero{
text-align:left !important;
}
.public-forum-profile-hero .actions-row{
width:100% !important;
}
.table,
table{
display:block !important;
width:100% !important;
max-width:100% !important;
overflow-x:auto !important;
-webkit-overflow-scrolling:touch !important;
}
.kv{
align-items:flex-start !important;
}
.kv strong{
text-align:right !important;
}
}
@media(max-width:520px){
.card{
padding:16px !important;
}
.pill{
max-width:100% !important;
white-space:normal !important;
}
.kv{
display:grid !important;
grid-template-columns:1fr !important;
gap:6px !important;
}
.kv strong{
text-align:left !important;
}
}
/* ==========================================================
Mobile Menü Equal Spacing Fix
Alle Menübuttons im mobilen Drawer bekommen identische Abstände.
Gruppenüberschriften bleiben bewusst getrennt, erzeugen aber
keine ungleichmäßigen Link-Abstände mehr.
========================================================== */
@media(max-width:900px){
body #mhMobileDrawer .nav,
body .sidebar .nav{
gap:0 !important;
row-gap:0 !important;
padding:0 2px 26px !important;
}
body #mhMobileDrawer .nav a,
body #mhMobileDrawer .nav .nav-link,
body .sidebar .nav a,
body .sidebar .nav .nav-link{
display:flex !important;
align-items:center !important;
width:100% !important;
min-height:44px !important;
margin:0 0 9px 0 !important;
padding:11px 13px !important;
box-sizing:border-box !important;
border-radius:14px !important;
}
body #mhMobileDrawer .nav a:last-child,
body #mhMobileDrawer .nav .nav-link:last-child,
body .sidebar .nav a:last-child,
body .sidebar .nav .nav-link:last-child{
margin-bottom:0 !important;
}
body #mhMobileDrawer .nav-section,
body #mhMobileDrawer .nav-group-label,
body .sidebar .nav-section,
body .sidebar .nav-group-label{
margin:13px 0 7px 0 !important;
padding:0 8px !important;
min-height:22px !important;
}
body #mhMobileDrawer .nav-section:first-child,
body #mhMobileDrawer .nav-group-label:first-child,
body .sidebar .nav-section:first-child,
body .sidebar .nav-group-label:first-child{
margin-top:0 !important;
}
body #mhMobileDrawer .nav-section + a,
body #mhMobileDrawer .nav-section + .nav-link,
body #mhMobileDrawer .nav-group-label + a,
body #mhMobileDrawer .nav-group-label + .nav-link,
body .sidebar .nav-section + a,
body .sidebar .nav-section + .nav-link,
body .sidebar .nav-group-label + a,
body .sidebar .nav-group-label + .nav-link{
margin-top:0 !important;
}
body #mhMobileDrawer .nav-mobile-group-content,
body .sidebar .nav-mobile-group-content{
display:flex !important;
flex-direction:column !important;
gap:0 !important;
margin:0 !important;
padding:0 !important;
}
body #mhMobileDrawer .nav-mobile-group-content a,
body #mhMobileDrawer .nav-mobile-group-content .nav-link,
body .sidebar .nav-mobile-group-content a,
body .sidebar .nav-mobile-group-content .nav-link{
margin:0 0 9px 0 !important;
}
body #mhMobileDrawer .nav-mobile-group-content a:last-child,
body #mhMobileDrawer .nav-mobile-group-content .nav-link:last-child,
body .sidebar .nav-mobile-group-content a:last-child,
body .sidebar .nav-mobile-group-content .nav-link:last-child{
margin-bottom:9px !important;
}
body #mhMobileDrawer .mh-current-nav-section,
body .sidebar .mh-current-nav-section{
margin:0 0 9px 0 !important;
}
body #mhMobileDrawer .mh-current-nav-section + a,
body #mhMobileDrawer .mh-current-nav-section + .nav-link,
body .sidebar .mh-current-nav-section + a,
body .sidebar .mh-current-nav-section + .nav-link{
margin-top:0 !important;
}
}
/* Mobile menu spacing hardfix is intentionally injected in includes/layout.php after inline mobile CSS. */
/* Forum mobile clean rework is intentionally injected late in includes/layout.php for priority over older forum styles. */
/* Forum mobile counts/profile fix is injected late in includes/layout.php for priority over older forum styles. */
/* Forum mobile stats row realfix: markup changed in community.php; priority CSS injected in includes/layout.php. */
/* Full mobile/desktop final polish is injected late in includes/layout.php for priority. */
/* Forum mobile post focus fix is injected late in includes/layout.php. */
/* Forum mobile post highlight is injected late in includes/layout.php. */
/* Forum mobile post content tint is injected late in includes/layout.php. */
/* MoinBoard avatar upgrade styles are injected late in includes/layout.php to override older avatar assets. */
/* MoinBoard minimalistischer Footer-Schriftzug wird bewusst spät in includes/layout.php eingebunden. */
/* Mail logs datetime is injected late in includes/layout.php for no-wrap priority. */
/* Teamkalender Calm Header Rework is injected late in includes/layout.php for priority. */
/* Mail log recipient one-line fix is injected late in includes/layout.php for priority. */
/* Mail log subject one-line fix is injected late in includes/layout.php for priority. */
/* Mail log subject two-line full rendering is injected late in includes/layout.php for priority. */
/* Moin roles display is injected late in includes/layout.php for priority. */
/* Faire Rollenrechte werden spät in includes/layout.php eingebunden. */
/* Codebereinigung 20260612-125: Layout-Overrides und UI-Logik sind ausgelagert. */